/* Anfang Optik-Klassen (technik.js): Überschrift mit korrigierter Stufe behält das Aussehen der Designer-Stufe, z. B. <h3 class="h6"> */
.h1 { font-size: 1.6rem; color: #1d4468; line-height: 120%; text-align: left; font-weight: bold; margin-top: 0.67em; margin-bottom: 0.67em; }
.h2 { font-size: 1.3rem; color: #a0521f; line-height: 120%; text-align: left; font-weight: bold; margin-top: 0.83em; margin-bottom: 0.83em; }
.h3 { font-size: 1.4rem; color: #1d4468; line-height: 120%; text-align: left; font-weight: 500; margin-top: 1em; margin-bottom: 1em; }
.h4 { font-size: 1.6rem; color: #1d4468; line-height: 120%; text-align: center; font-weight: 500; margin-top: 1.33em; margin-bottom: 1.33em; }
.h5 { font-size: 1.5rem; color: #1d4468; line-height: 120%; text-align: left; font-weight: 300; margin-top: 1.67em; margin-bottom: 1.67em; }
.h6 { font-size: 1.5rem; color: #1d4468; line-height: 120%; text-align: left; font-weight: 600; margin-top: 2.33em; margin-bottom: 2.33em; }
/* Ende Optik-Klassen */



/* =====================================================================
   Gastronom-Service Caputh GmbH – style.css (Claude)
   Hell und freundlich: tiefes Seeblau #1d4468, Papierton, viel Weiß – Kupfer als einziger Akzent (wie die Töpfe in der Küche).
   Überschriften h1–h6, a, ul, li stylt der Designer in style_wbs.css – hier nur über Klassen/Bereiche.
   Schriftgrößen in rem, damit der A+-Knopf überall wirkt.
   ===================================================================== */
:root {
  --nacht: #12314f;
  --blau: #1d4468;
  --blau-dunkel: #12314f;
  --see: #e9f3fb;
  --see-2: #cfe4f6;
  --akzent: #c8743a;
  --akzent-hell: #f0b483;
  --kupfer-dunkel: #a0521f;
  --text: #24323f;
  --grau: #566675;
  --linie: #e6dfd2;
  --flaeche: #fbf8f2;
  --papier: #fbf8f2;
  --weiss: #ffffff;
  --breite: 76rem;
  --radius: 4px;
  --radius-gross: 6px;
  --schatten: 0 16px 44px rgba(18, 49, 79, 0.09);
  --schatten-stark: 0 28px 70px rgba(18, 49, 79, 0.2);
  --fokus: #1d4468;
  --kopf-hoehe: 5.25rem;
  --kopf-gesamt: 8.15rem; /* Servicezeile + Kopfleiste (Desktop) */
  --edel: Georgia, "Times New Roman", serif;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html[data-schrift="gross"] { font-size: 125%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.wrap { width: min(100% - 2rem, var(--breite)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 999; padding: 0.7rem 1.2rem; background: var(--blau); color: var(--weiss); border-radius: 999px; font-weight: 700; text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 1rem; color: var(--weiss); }
section { scroll-margin-top: 6rem; }
.menue-offen { overflow: hidden; }
.abschnitt { padding: 4.5rem 0; }
.section--alt { background: var(--flaeche); }
.kicker { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kupfer-dunkel); }

/* ---------- Schrift-Klassen (Hausregel) ---------- */
.schrift1 { font-size: 1.2em; color: var(--blau); text-align: left; line-height: 1.2; font-weight: bold; }
.schrift2 { font-size: 1.1em; color: var(--blau-dunkel); line-height: 1.2; }
.schrift3 { font-size: 1.1em; color: #999; line-height: 1.2; }
.schrift4 { font-size: 1.0em; color: var(--kupfer-dunkel); line-height: 1.0; text-decoration: underline; }
.schrift5 { font-size: 1.0em; color: #FFF; text-align: center; }
.schrift6 { font-size: 1.6em; color: #FFF; text-align: center; }
.hero__slogan2 { display: block; font-size: 1.3em; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 0.4em; }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.95rem 1.65rem; border-radius: 2px; border: 1.5px solid var(--kupfer-dunkel);
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  color: var(--weiss); background: var(--kupfer-dunkel);
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:visited { color: var(--weiss); text-decoration: none; }
.btn:hover { color: var(--weiss); background: #86431a; border-color: #86431a; transform: translateY(-2px); box-shadow: none; text-decoration: none; }
.btn--rahmen { color: var(--nacht); border-color: var(--nacht); background: transparent; box-shadow: none; }
.btn--rahmen:visited { color: var(--nacht); }
.btn--rahmen:hover { color: var(--weiss); background: var(--nacht); border-color: var(--nacht); }
.btn--akzent { color: var(--weiss); background: var(--kupfer-dunkel); border-color: var(--kupfer-dunkel); box-shadow: none; }
.btn--akzent:visited { color: var(--weiss); }
.btn--akzent:hover { color: var(--weiss); background: #86431a; border-color: #86431a; box-shadow: none; }
.btn--glas { color: var(--weiss); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); box-shadow: none; }
.btn--glas:visited, .btn--glas:hover { color: var(--weiss); }
.btn--glas:hover { background: rgba(255, 255, 255, 0.22); border-color: var(--weiss); box-shadow: none; }
.btn-gruppe { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.pfeil-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--kupfer-dunkel); text-decoration: none; }
.pfeil-link:visited { color: var(--kupfer-dunkel); text-decoration: none; }
.pfeil-link::after { content: "→"; transition: transform 0.25s; }
.pfeil-link:hover::after { transform: translateX(4px); }

/* ---------- A+-Knopf ---------- */
.schrift-knopf { font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--nacht); background: var(--weiss); border: 1.5px solid var(--linie); border-radius: 999px; padding: 0.1em 0.75em; cursor: pointer; transition: background 0.25s, color 0.25s; }
.schrift-knopf b { color: var(--kupfer-dunkel); }
.schrift-knopf:hover, .schrift-knopf[aria-pressed="true"] { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
.schrift-knopf:hover b, .schrift-knopf[aria-pressed="true"] b { color: var(--akzent-hell); }

/* ---------- Mobilleiste (nur Handy) ---------- */
.mobilleiste { position: sticky; top: 0; z-index: 60; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.mobilleiste__inner { display: flex; align-items: center; justify-content: flex-end; gap: 0.85rem; min-height: 3.4rem; }
.mobilleiste a img { width: 30px; height: 30px; }
.mobilleiste .nav-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; color: var(--weiss); background: var(--blau); cursor: pointer; }

/* ---------- Servicezeile + Header (Desktop) ---------- */
.servicezeile { display: none; }
.site-header { position: relative; z-index: 50; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--kopf-hoehe); }
.marke { display: flex; align-items: center; gap: 0.9rem; flex: none; min-width: 0; }
.logo { display: block; flex: none; }
.logo img { width: 72px; height: auto; transition: width 0.3s ease; }
.marke__zusatz { display: block; line-height: 1.25; color: var(--grau); font-size: 0.8rem; }
.marke__zusatz strong { display: block; font-size: 1.12rem; font-weight: 800; color: var(--nacht); letter-spacing: -0.01em; }
/* Handy: Firmenname mit „GmbH“ darf schrumpfen und umbrechen statt abgeschnitten zu werden */
@media (max-width: 47.99em) { .marke { flex: 1 1 auto; } .marke__zusatz strong { font-size: 1rem; } }

/* Hauptmenü – Handy: Vollbild-Ebene */
#hauptmenue { position: fixed; inset: 3.4rem 0 0 0; z-index: 55; background: var(--nacht); padding: 1.5rem 1rem 3rem; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), visibility 0.4s; }
#hauptmenue.is-open { transform: none; visibility: visible; }
.nav { list-style: none; margin: 0; padding: 0; }
.nav__item { list-style: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.nav__link, .nav__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 1rem 0.2rem; border: 0; background: none; font: inherit; font-size: 1.35rem; font-weight: 700; color: var(--weiss); text-decoration: none; cursor: pointer; text-align: left; }
.nav__link:visited, .nav__link:hover { color: var(--weiss); text-decoration: none; }
.nav__toggle::after { content: ""; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s; margin-right: 0.4rem; }
.nav__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
.mega { display: none; padding: 0 0 1rem; }
.nav__toggle[aria-expanded="true"] + .mega { display: block; }
.mega__spalte { margin-bottom: 0.8rem; }
.mega__titel { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-hell); margin: 0.6rem 0 0.3rem; font-weight: 700; }
.mega__liste { list-style: none; margin: 0; padding: 0; }
.mega__liste li { list-style: none; }
.mega__liste a { display: block; padding: 0.45rem 0; color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: 1.05rem; }
.mega__liste a:visited { color: rgba(255, 255, 255, 0.88); }
.mega__liste a:hover { color: var(--akzent-hell); }
.mega__liste small { display: none; }
.nav__cta-item { border-bottom: 0; padding-top: 1.2rem; }
.nav__cta { width: 100%; }
.nav__schrift { border-bottom: 0; padding-top: 1rem; }
.nav__schrift .schrift-knopf { font-size: 1.05rem; padding: 0.45em 1.2em; }

@media (min-width: 64em) {
  .mobilleiste { display: none; }
  .servicezeile { display: block; background: var(--flaeche); font-size: 0.9rem; color: var(--grau); }
  .servicezeile__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 2.9rem; }
  .servicezeile__text { font-weight: 600; color: var(--nacht); }
  .servicezeile__text span { color: var(--akzent); padding: 0 0.3em; }
  .kontaktzeile { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
  .kontaktzeile li { list-style: none; }
  .kontaktzeile a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text); text-decoration: none; }
  .kontaktzeile a:visited { color: var(--text); }
  .kontaktzeile a:hover { color: var(--blau); }
  .kontaktzeile img { width: 26px; height: 26px; transition: transform 0.25s; }
  .kontaktzeile a:hover img { transform: translateY(-2px); }

  .site-header { position: sticky; top: 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); transition: box-shadow 0.3s; }
  .ist-gescrollt .site-header { box-shadow: 0 10px 30px rgba(18, 49, 79, 0.1); }
  .header__inner { min-height: 5.25rem; padding: 0.4rem 0; transition: min-height 0.3s ease; }
  .ist-gescrollt .header__inner { min-height: 4rem; }
  .ist-gescrollt .logo img { width: 62px; }

  #hauptmenue { position: static; inset: auto; transform: none; visibility: visible; background: none; padding: 0; overflow: visible; }
  .nav { display: flex; align-items: center; gap: 0.15rem; }
  .nav__item { border: 0; position: static; }
  .nav__link, .nav__toggle { position: relative; width: auto; padding: 0.6rem 0.8rem; font-size: 1rem; font-weight: 600; color: var(--nacht); border-radius: 999px; }
  .nav__link:visited, .nav__link:hover { color: var(--nacht); }
  .nav__link::before, .nav__toggle::before { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.25rem; height: 2px; border-radius: 2px; background: var(--akzent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
  .nav__link:hover::before, .nav__toggle:hover::before, .nav__link[aria-current="page"]::before, .nav__toggle[aria-expanded="true"]::before { transform: scaleX(1); }
  .nav__toggle::after { width: 0.42rem; height: 0.42rem; margin: -0.2rem 0 0 0.55rem; }
  .nav__toggle { gap: 0; }
  .nav__cta-item { padding: 0 0 0 0.5rem; }
  .nav__cta { width: auto; padding: 0.75rem 1.35rem; }
  .nav__schrift { display: none; }

  .mega { position: absolute; left: 50%; top: 100%; width: min(100vw - 2rem, var(--breite)); transform: translate(-50%, 10px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1.8rem; background: var(--weiss); border-radius: 0 0 var(--radius-gross) var(--radius-gross); box-shadow: var(--schatten-stark); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
  .nav__toggle[aria-expanded="true"] + .mega { display: grid; opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
  .mega__titel { color: var(--kupfer-dunkel); margin: 0 0 0.6rem; }
  .mega__liste a { padding: 0.55rem 0.7rem; margin: 0 -0.7rem; border-radius: 12px; color: var(--nacht); font-weight: 600; font-size: 1rem; transition: background 0.2s; }
  .mega__liste a:visited { color: var(--nacht); }
  .mega__liste a:hover { color: var(--blau); background: var(--see); }
  .mega__liste small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--grau); line-height: 1.35; }
  .nav__item:has(.mega--klein) { position: relative; }
  .mega.mega--klein { left: 0; top: calc(100% + 1.1rem); width: 21rem; grid-template-columns: 1fr; border-radius: var(--radius-gross); transform: translateY(10px); }
  .nav__toggle[aria-expanded="true"] + .mega.mega--klein { transform: none; }
  .menue-offen { overflow: visible; }
}

/* ---------- Hero: Plakat aus Großküche (oben) und Schwielowsee (unten), dazwischen der Schriftzug ---------- */
.page-hero--start { position: relative; overflow: hidden; background: var(--see); }
.plakat { position: relative; height: max(38rem, 100svh - 3.4rem); overflow: hidden; background: linear-gradient(180deg, #dce9f4, #9dc6ea); }
.plakat__kueche, .plakat__see { position: absolute; left: 0; right: 0; display: block; overflow: hidden; }
.plakat__kueche img, .plakat__see img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.plakat__kueche { top: 0; height: 66%; z-index: 2; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); animation: von-oben 1.5s cubic-bezier(.16,.8,.24,1) both; }
.plakat__kueche img { object-position: 50% 42%; transform-origin: 50% 40%; animation: kenburns 26s ease-in-out 1.4s infinite alternate; }
.plakat__see { top: 38%; bottom: 0; z-index: 1; animation: von-unten 1.5s cubic-bezier(.16,.8,.24,1) both; }
.plakat__see img { object-position: 58% 24%; transform-origin: 50% 70%; }
/* Leicht bewegtes Wasser: flache, weiche Lichtpunkte treiben langsam in zwei Lagen gegeneinander und atmen sanft */
.plakat__glanz, .plakat__glanz::after { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 3; pointer-events: none; mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
.plakat__glanz { opacity: 0.3;
  background-image: radial-gradient(ellipse 30px 1.6px at 18% 30%, rgba(255,255,255,0.9), transparent 70%),
                    radial-gradient(ellipse 20px 1.2px at 64% 72%, rgba(255,255,255,0.8), transparent 70%),
                    radial-gradient(ellipse 40px 1.8px at 46% 52%, rgba(255,255,255,0.7), transparent 70%);
  background-size: 260px 44px;
  animation: wasser-a 40s linear infinite, wasser-atmen 7s ease-in-out infinite alternate; }
.plakat__glanz::after { content: ""; height: 100%; opacity: 0.8;
  background-image: radial-gradient(ellipse 26px 1.4px at 30% 40%, rgba(255,255,255,0.8), transparent 70%),
                    radial-gradient(ellipse 36px 1.6px at 78% 66%, rgba(255,255,255,0.7), transparent 70%);
  background-size: 340px 58px;
  animation: wasser-b 55s linear infinite; }
/* sanfte Abdunklung hinter dem Schriftzug, damit er auch auf den weißen Kochjacken lesbar bleibt */
.plakat::after { content: ""; position: absolute; left: 0; right: 0; top: 18%; height: 54%; z-index: 3; pointer-events: none; background: radial-gradient(60% 50% at 50% 50%, rgba(18, 49, 79, 0.55) 0%, rgba(18, 49, 79, 0.28) 55%, rgba(18, 49, 79, 0) 100%); opacity: 0; animation: fuellen-deckkraft 1.4s ease 0.7s forwards; }
.plakat__inhalt { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; }
.page-hero--start h1 { margin: 0; font-size: 1rem; font-weight: 400; color: var(--weiss); flex: 1; position: relative; display: flex; flex-direction: column; text-align: center; }
/* Schriftzug liegt genau auf der Naht zwischen Küche und See */
.hero__headline { position: absolute; left: 50%; top: 38%; width: min(100vw - 1.2rem, 60rem); transform: translate(-50%, -50%); display: block; font-size: clamp(1.5rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-shadow: 0 2px 16px rgba(18, 49, 79, 0.55), 0 1px 3px rgba(18, 49, 79, 0.5); }
.hero__nach { display: block; opacity: 0; animation: einfliegen 0.9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__nach { text-align: right; padding-right: 4%; animation-delay: 2.5s; margin-top: -0.5em; }
.schriftzug-wort { position: relative; display: block; width: 100%; padding-bottom: 0.5em; }
.schriftzug { display: block; width: var(--anteil); margin-inline: auto; height: auto; overflow: visible; filter: drop-shadow(0 2px 3px rgba(18, 49, 79, 0.6)) drop-shadow(0 4px 16px rgba(18, 49, 79, 0.5)); }
.schriftzug + .schriftzug { margin-top: -3%; }
.schriftzug__flaeche { fill: #fff; fill-opacity: 0; animation: fuellen 0.7s ease 2.1s forwards; }
.schriftzug__linie { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: schreiben 0.9s cubic-bezier(.45,.05,.55,.95) calc(0.7s + var(--i) * 0.04s) forwards; }
.schriftzug-bogen { position: absolute; left: 0; right: 0; bottom: -0.2em; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 4px rgba(18, 49, 79, 0.55)); }
.schriftzug__schwung { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: schreiben 1.1s ease-out 2s forwards; }
/* Karte mit Text und Knöpfen über dem Wasser */
.hero-karte-rahmen { position: absolute; left: 0; right: 0; bottom: 1.2rem; z-index: 5; display: flex; justify-content: center; }
.hero-karte { width: min(100%, 60rem); padding: 1.1rem 1.4rem; display: grid; gap: 0.9rem; border-radius: var(--radius); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: var(--schatten-stark); opacity: 0; animation: einfliegen 1s cubic-bezier(.2,.7,.2,1) 2.3s forwards; }
.hero-karte .lead { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text); }
.hero-karte .btn-gruppe { margin: 0; gap: 0.55rem; }
.hero-karte .btn { padding: 0.8rem 1.25rem; white-space: nowrap; }

@keyframes von-oben { from { transform: translateY(-14%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes von-unten { from { transform: translateY(14%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, 0.6%); } }
@keyframes wasser-a { to { background-position: 260px 8px; } }
@keyframes wasser-b { to { background-position: -340px -6px; } }
@keyframes wasser-atmen { from { opacity: 0.22; } to { opacity: 0.4; } }
@keyframes einfliegen { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes schreiben { to { stroke-dashoffset: 0; } }
@keyframes fuellen { to { fill-opacity: 1; } }
@keyframes fuellen-deckkraft { to { opacity: 1; } }
@media (min-width: 64em) {
  .plakat { height: max(32rem, 100svh - var(--kopf-gesamt)); }
  .hero-karte { grid-template-columns: 1fr auto; align-items: center; gap: 1.4rem; }
}
@media (max-width: 63.99em) {
  .plakat { height: 64svh; min-height: 26rem; max-height: 46rem; }
  .plakat__kueche { height: 60%; }
  .plakat__see { top: 44%; }
  .plakat__see img { object-position: 60% 40%; }
  .hero__headline { top: 50%; font-size: 1.5rem; }
  .schriftzug-wort { padding-bottom: 0.75em; }
  .schriftzug-bogen { bottom: 0.1em; }
  .hero__nach { margin-top: 0; }
  .page-hero--start { background: var(--weiss); }
  .hero-karte-rahmen { position: static; display: block; }
  .hero-karte { width: 100%; padding: 1.4rem 0 1.6rem; border-radius: 0; background: var(--weiss); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; animation: none; }
  .hero-karte .btn { width: 100%; }
}

/* =====================================================================
   Ab hier: alles unter dem Kopfbild – die Seite liest sich wie eine gute Speisekarte.
   Papierton, große Serifenschrift, feine Linien statt Karten und Schatten.
   ===================================================================== */
.akzent { display: block; height: auto; }
.marken__satz em, .page-hero--bild-links .hero__headline em, .ueber h3 em, .weg h4 em, .vorteile h4 em,
.galerie-kopf .hero__headline em, .referenzen h4 em, .ueber .h3 em, .weg .h4 em, .vorteile .h4 em, .referenzen .h4 em { font-style: italic; color: var(--kupfer-dunkel); }

/* ---------- Marken: schmale Leiste mit laufendem Band ---------- */
.marken { padding: 1.5rem 0; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.marken__reihe { display: grid; gap: 1rem; align-items: center; }
.marken__satz { margin: 0; font-family: var(--edel); font-size: 1.3rem; line-height: 1.25; color: var(--nacht); }
.band { position: relative; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.band__spur { display: flex; align-items: center; gap: 3rem; width: max-content; list-style: none; margin: 0; padding: 0.3rem 0; animation: laufen 60s linear infinite; }
.band:hover .band__spur, .band:focus-within .band__spur { animation-play-state: paused; }
.band__spur li { list-style: none; flex: none; }
.band__spur img { height: 2.4rem; width: auto; max-width: 8rem; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: 0.6; transition: filter 0.3s, opacity 0.3s; }
.band__spur img:hover { filter: none; opacity: 1; }
@keyframes laufen { to { transform: translateX(calc(-50% - 1.5rem)); } }
@media (min-width: 64em) { .marken__reihe { grid-template-columns: 19rem minmax(0, 1fr); gap: 2.5rem; } }

/* ---------- Fachbereiche als Speisekarte: links das Bild zum Gericht, rechts die Karte ---------- */
.page-hero--bild-links { padding: 5rem 0; background: var(--papier); }
.page-hero--bild-links .page-hero__grid { display: grid; gap: 2.6rem; }
.karte-bild { position: relative; margin: 0; height: 22rem; overflow: hidden; background: var(--see); }
.karte-bild__folie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.8s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.karte-bild__folie.ist-aktiv { opacity: 1; transform: none; }
.karte-text .akzent { width: 11rem; }
.page-hero--bild-links h2, .page-hero--bild-links .h2 { margin: 0.9rem 0 2rem; font-size: 1rem; color: var(--nacht); font-weight: 400; }
.page-hero--bild-links .hero__slogan2 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); line-height: 1.4; margin-bottom: 0.7em; }
.page-hero--bild-links .hero__headline { position: static; transform: none; width: auto; display: block; font-family: var(--edel); font-size: clamp(2.2rem, 4.2vw, 3.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; text-shadow: none; text-align: left; color: var(--nacht); }
.menuekarte { list-style: none; margin: 0; padding: 0; }
.menuekarte__gruppe { list-style: none; margin: 0 0 1.9rem; }
.menuekarte__gruppe > strong { display: block; padding-bottom: 0.45rem; border-bottom: 1px solid var(--nacht); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kupfer-dunkel); }
.menuekarte ul { list-style: none; margin: 0; padding: 0; }
.menuekarte li li { list-style: none; border-bottom: 1px solid var(--linie); }
.menuekarte a { display: grid; grid-template-columns: auto 1fr auto; gap: 0.1rem 0.7rem; align-items: baseline; padding: 0.8rem 0; font-family: inherit; font-size: 1rem; color: var(--nacht); text-decoration: none; transition: padding-left 0.35s cubic-bezier(.2,.7,.2,1); }
.menuekarte a:visited { color: var(--nacht); text-decoration: none; }
.menuekarte a:hover, .menuekarte a.ist-aktiv { padding-left: 0.6rem; color: var(--nacht); }
.menuekarte__name { font-family: var(--edel); font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.01em; transition: color 0.25s; }
.menuekarte a:hover .menuekarte__name, .menuekarte a.ist-aktiv .menuekarte__name { color: var(--kupfer-dunkel); }
.menuekarte__punkte { align-self: end; margin-bottom: 0.4rem; border-bottom: 1px dotted #b9ad9b; }
.menuekarte__pfeil { color: var(--kupfer-dunkel); transition: transform 0.3s; }
.menuekarte a:hover .menuekarte__pfeil { transform: translateX(5px); }
.menuekarte small { grid-column: 1 / -1; font-size: 0.93rem; line-height: 1.45; color: var(--grau); }
@media (min-width: 64em) {
  .page-hero--bild-links { padding: 6.5rem 0; }
  .page-hero--bild-links .page-hero__grid { grid-template-columns: 1fr 1.08fr; gap: 5.5rem; align-items: start; }
  .page-hero--bild-links .page-hero__grid > .bild { order: -1; margin-right: 0; margin-left: calc((min(100vw, var(--breite)) - 100vw) / 2 - 1rem); }
  .karte-bild { position: sticky; top: 5.5rem; height: calc(100svh - 7.5rem); min-height: 24rem; }
}

/* ---------- Über uns: große Lese-Zeile, die sich beim Scrollen füllt, darunter das Panorama ---------- */
.ueber { padding-top: 5rem; background: var(--weiss); }
.ueber__raster { display: grid; gap: 1.6rem; }
.ueber h3, .ueber .h3 { margin: 0; font-family: var(--edel); font-size: clamp(2.2rem, 4.2vw, 3.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: var(--nacht); }
.ueber .kicker { margin-bottom: 1.1rem; }
.lesetext { margin: 0; font-family: var(--edel); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.5; color: var(--nacht); }
.lesetext strong { font-weight: 400; color: var(--blau); }
.worte-wort { opacity: 0.16; transition: opacity 0.35s ease; }
.worte-wort.an { opacity: 1; }
.ueber__panorama { margin: 4rem 0 0; height: clamp(15rem, 40vw, 34rem); overflow: hidden; }
.ueber__panorama img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.enthuellen { clip-path: inset(12% 8% 12% 8%); transition: clip-path 1.4s cubic-bezier(.2,.7,.2,1); }
.enthuellen.ist-sichtbar { clip-path: inset(0); }
@media (min-width: 64em) { .ueber { padding-top: 6.5rem; } .ueber__raster { grid-template-columns: 1fr 1.25fr; gap: 5rem; } }

/* Pfeile: kräftig in Kupfer, damit man sofort sieht, dass es hier weitergeht */
.weg__pfeil, .film__knopf { display: inline-grid; place-items: center; width: 3.75rem; height: 3.75rem; padding: 0; border: 0; border-radius: 50%; color: var(--weiss); background: var(--kupfer-dunkel); box-shadow: 0 8px 20px rgba(160, 82, 31, 0.35); cursor: pointer; transition: background 0.25s, transform 0.25s, box-shadow 0.25s, opacity 0.25s; }
.weg__pfeil:hover:not(:disabled), .film__knopf:hover { background: var(--nacht); transform: scale(1.08); box-shadow: 0 10px 24px rgba(18, 49, 79, 0.35); }
.weg__pfeil:disabled { color: var(--grau); background: #e8e1d5; box-shadow: none; cursor: default; }
/* ---------- Drei Gänge: Schieber mit Pfeilen, Bild und Text nebeneinander, der Text steht immer frei ---------- */
.weg { background: var(--papier); padding-bottom: 5rem; }
.weg__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: 4.5rem 0 2rem; }
.weg__kopf .akzent { width: 9.5rem; margin-bottom: 0.4rem; }
.weg h4, .weg .h4 { margin: 0; font-family: var(--edel); font-size: clamp(2.2rem, 4.2vw, 3.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; text-align: left; color: var(--nacht); }
.weg__pfeile { display: flex; gap: 0.6rem; flex: none; }
.weg__schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1.4rem; }
.weg__schritt { padding: 0.7rem 0 0; border: 0; border-top: 1px solid #cfc6b6; background: none; font: inherit; font-family: var(--edel); font-size: 1.15rem; line-height: 1.25; text-align: left; color: var(--grau); cursor: pointer; transition: color 0.25s, border-color 0.25s; }
.weg__schritt span { display: block; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; }
.weg__schritt:hover { color: var(--nacht); }
.weg__schritt[aria-current="true"] { border-top: 2px solid var(--kupfer-dunkel); padding-top: calc(0.7rem - 1px); color: var(--kupfer-dunkel); }
.weg__tafeln { display: flex; list-style: none; margin: 0 auto; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.weg__tafeln::-webkit-scrollbar { display: none; }
.weg__tafel { list-style: none; flex: 0 0 100%; min-width: 0; display: grid; grid-template-rows: 14rem auto; background: var(--weiss); scroll-snap-align: start; }
.weg__tafel > img { width: 100%; height: 100%; object-fit: cover; }
.weg__text { padding: 1.6rem 1.3rem 1.8rem; }
.weg__nr { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kupfer-dunkel); }
.weg h5, .weg .h5 { margin: 0.35rem 0 0.7rem; font-family: var(--edel); font-size: clamp(2.2rem, 4vw, 3.3rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: var(--nacht); }
.weg__text p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--text); }
@media (min-width: 64em) {
  .weg { padding-bottom: 6.5rem; }
  .weg__tafel { grid-template-rows: none; grid-template-columns: 1.55fr 1fr; height: min(calc(100svh - 20rem), 32rem); min-height: 20rem; }
  .weg__tafel > img { min-height: 0; }
  .weg__text { display: flex; flex-direction: column; justify-content: center; padding: 2rem 3rem; }
}

/* ---------- Vorteile: vier Spalten, nur Linien ---------- */
.vorteile { position: relative; z-index: 1; background: var(--papier); padding: 5rem 0; }
.vorteile h4, .vorteile .h4 { margin: 0 0 2.6rem; font-family: var(--edel); font-size: clamp(2.2rem, 4.2vw, 3.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; text-align: left; color: var(--nacht); }
.vorteile__raster { display: grid; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.vorteil { list-style: none; padding-top: 1rem; border-top: 1px solid var(--nacht); }
.vorteil__nr { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; color: var(--kupfer-dunkel); }
.vorteil h5, .vorteil .h5 { margin: 1.5rem 0 0.5rem; font-family: var(--edel); font-size: 1.45rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--nacht); }
.vorteil p { margin: 0; color: var(--grau); font-size: 0.98rem; line-height: 1.6; }
@media (min-width: 40em) { .vorteile__raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .vorteile { padding: 6.5rem 0; } .vorteile__raster { grid-template-columns: repeat(4, 1fr); gap: 2.4rem; } }

/* ---------- Galerie: Filmstreifen zum Wischen ---------- */
.galerie-band { padding: 5rem 0 3.5rem; background: var(--weiss); }
.galerie-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.2rem; }
.galerie-kopf .hero__headline { position: static; transform: none; width: auto; display: block; font-family: var(--edel); font-size: clamp(2.2rem, 4.2vw, 3.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: var(--nacht); text-shadow: none; }
.galerie-kopf p { margin: 0.7rem 0 0; color: var(--grau); }
.film__knoepfe { display: flex; gap: 0.6rem; flex: none; }
.film { --rand: max(1rem, calc((100vw - var(--breite)) / 2)); display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0 var(--rand); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--rand); scrollbar-width: none; }
.film::-webkit-scrollbar { display: none; }
.film li { list-style: none; flex: none; width: min(84vw, 38rem); scroll-snap-align: start; }
.film li:nth-child(even) { width: min(70vw, 27rem); }
.film a { display: block; overflow: hidden; }
.film img { width: 100%; height: 22rem; object-fit: cover; transition: transform 0.9s cubic-bezier(.2,.7,.2,1); }
.film a:hover img { transform: scale(1.05); }
.film p { margin: 0.7rem 0 0; font-family: var(--edel); font-style: italic; font-size: 1.05rem; color: var(--nacht); }
.symbolhinweis { margin-top: 1.4rem; margin-bottom: 0; font-size: 0.85rem; color: var(--grau); }

/* ---------- Referenzen: dunkler Gästeraum, die Häuser ruhig in drei Gruppen ---------- */
.referenzen { position: relative; overflow: hidden; padding: 5.5rem 0 5rem; color: rgba(255, 255, 255, 0.86); background: radial-gradient(70% 60% at 88% 0%, rgba(240, 180, 131, 0.16), transparent 62%), linear-gradient(180deg, #12314f 0%, #0d253d 100%); }
.referenzen__kopf { display: grid; gap: 0.3rem; margin-bottom: 3.6rem; }
.referenzen__kopf .akzent { width: 11.5rem; }
.referenzen h4, .referenzen .h4 { margin: 0.2rem 0 0; font-family: var(--edel); font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.02em; text-align: left; color: var(--weiss); }
.referenzen h4 em, .referenzen .h4 em { color: var(--akzent-hell); }
.referenzen__kopf p { max-width: 40rem; margin: 0.9rem 0 0; color: rgba(255, 255, 255, 0.75); }
.ref-raster { display: grid; gap: 2.8rem; }
.ref-gruppe__kopf { display: flex; align-items: baseline; gap: 0.9rem; margin: 0; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(240, 180, 131, 0.45); }
.ref-gruppe__zahl { font-family: var(--edel); font-size: 2.8rem; line-height: 1; color: var(--akzent-hell); }
.referenzen .kicker { color: rgba(255, 255, 255, 0.72); }
.ref-gruppe ul { list-style: none; margin: 0; padding: 0; }
.ref-gruppe li { list-style: none; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--edel); font-size: 1.12rem; line-height: 1.3; color: var(--weiss); transition: color 0.25s, padding-left 0.35s cubic-bezier(.2,.7,.2,1); }
.ref-gruppe li:hover { color: var(--akzent-hell); padding-left: 0.5rem; }
.ref-gruppe li.ref--plus { border-bottom: 0; font-style: italic; color: var(--akzent-hell); }
.ref-gruppe li.ref--plus:hover { padding-left: 0; }
.referenzen__knopf { margin: 1.2rem 0 0; }
.referenzen .pfeil-link, .referenzen .pfeil-link:visited { color: var(--akzent-hell); }
@media (min-width: 64em) { .referenzen { padding: 7rem 0 6.5rem; } .ref-raster { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; } }

/* ---------- Kontakt: der See im Hintergrund, Kontaktdaten links, Formular als Karte rechts ---------- */
.section--cta { position: relative; padding: 4.5rem 0; color: var(--weiss); background: linear-gradient(180deg, rgba(22, 58, 94, 0.72) 0%, rgba(22, 58, 94, 0.55) 55%, rgba(22, 58, 94, 0.3) 100%), url("../images/startseite/hero-see-900.jpg") 60% center / cover; }
.cta__raster { display: grid; gap: 2.8rem; align-items: center; }
.cta__kopf { text-shadow: 0 1px 10px rgba(10, 30, 50, 0.45); }
.cta__kopf .akzent { width: 14rem; margin-bottom: 0.6rem; }
.cta__kopf .schrift6 { display: block; font-family: var(--edel); font-size: clamp(2.3rem, 4.2vw, 3.6rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.02em; text-align: left; margin-bottom: 1rem; }
.cta__kopf p { margin: 0; max-width: 32rem; color: rgba(255, 255, 255, 0.9); }
.kontaktdaten { list-style: none; max-width: 32rem; margin: 2.4rem 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.kontaktdaten li { list-style: none; display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.kontaktdaten li > span:first-child { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-hell); }
.kontaktdaten a, .kontaktdaten a:visited { font-family: var(--edel); font-size: 1.12rem; color: var(--weiss); text-decoration: none; }
.kontaktdaten a:hover { color: var(--akzent-hell); }
.kontakt-box { position: relative; padding: 2.2rem 1.4rem; color: var(--text); background: var(--papier); border-top: 3px solid var(--kupfer-dunkel); box-shadow: 0 24px 60px rgba(10, 30, 50, 0.22); text-shadow: none; }
.formular { position: relative; display: grid; gap: 1.5rem; color: var(--text); }
.formular__titel { margin: 0; font-family: var(--edel); font-size: 2rem; line-height: 1.2; color: var(--nacht); }
.formular label { display: block; margin-bottom: 0.15rem; }
.formular label .schrift2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nacht); }
.formular .pflicht { font-size: 0.82rem; color: var(--grau); }
.formular input, .formular textarea { width: 100%; font: inherit; color: var(--text); padding: 0.55rem 0; border: 0; border-bottom: 1px solid var(--nacht); border-radius: 0; background: transparent; transition: border-color 0.2s, box-shadow 0.2s; }
.formular input:hover, .formular textarea:hover { border-bottom-color: var(--kupfer-dunkel); }
.formular input:focus, .formular textarea:focus { outline: none; border-bottom-color: var(--kupfer-dunkel); box-shadow: 0 1px 0 var(--kupfer-dunkel); }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.formular textarea { min-height: 7rem; resize: vertical; }
.formular .datenschutz-hinweis { margin: 0; font-size: 0.9rem; color: var(--grau); }
.formular .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zwei-felder { display: grid; gap: 1.5rem; }
.meldung { display: none; margin: 0 0 1rem; padding: 1rem 1.2rem; font-weight: 600; line-height: 1.5; scroll-margin-top: 8rem; }
.meldung:target { display: block; }
.meldung--ok { background: #e8f5ec; color: #17603a; }
.meldung--fehler { background: #fdecea; color: #9b1c1c; }
.meldung a { color: inherit; font-weight: 800; }
@media (min-width: 40em) { .zwei-felder { grid-template-columns: 1fr 1fr; gap: 2rem; } .kontakt-box { padding: 2.8rem 2.6rem; } }
@media (min-width: 64em) {
  .section--cta { padding: 7rem 0; background-image: linear-gradient(90deg, rgba(22, 58, 94, 0.74) 0%, rgba(22, 58, 94, 0.56) 40%, rgba(22, 58, 94, 0.08) 72%, rgba(22, 58, 94, 0) 100%), url("../images/startseite/hero-see-2200.jpg"); background-position: center 60%; }
  .cta__raster { grid-template-columns: 1fr 1.05fr; gap: 5rem; }
  .kontakt-box { padding: 3.2rem 3.2rem 3rem; }
}

/* ---------- FAQ: nummerierte Fragen wie Programmpunkte, links der Titel mit direktem Draht ---------- */
.faq { background: var(--papier); padding: 5rem 0; }
.faq__raster { display: grid; gap: 2.4rem; }
.faq__kopf .akzent { width: 12rem; margin-bottom: 0.5rem; }
.faq h6, .faq .h6 { margin: 0 0 1rem; font-family: var(--edel); font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--nacht); }
.faq__kopf p { margin: 0; color: var(--grau); }
.faq__anruf, .faq__anruf:visited { display: inline-flex; flex-direction: column; gap: 0.15rem; margin-top: 1.6rem; padding: 1rem 1.4rem; border: 1px solid var(--nacht); font-family: var(--edel); font-size: 1.7rem; line-height: 1.1; color: var(--nacht); text-decoration: none; transition: background 0.25s, color 0.25s; }
.faq__anruf span { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kupfer-dunkel); transition: color 0.25s; }
.faq__anruf:hover { background: var(--nacht); color: var(--weiss); text-decoration: none; }
.faq__anruf:hover span { color: var(--akzent-hell); }
.faq__liste { counter-reset: frage; }
.faq .acc { margin: 0; min-width: 0; counter-increment: frage; }
.faq .acc .choice { position: relative; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--linie); }
.faq__liste .acc:first-child .choice { border-top: 1px solid var(--nacht); }
.faq .acc label { position: relative; padding: 1.25rem 3.6rem 1.25rem 3rem; border-bottom: 0; font-family: var(--edel); font-weight: 400; font-size: 1.22rem; line-height: 1.3; color: var(--nacht); background: none; transition: color 0.25s; }
.faq .acc label.close { position: static; width: 0; padding: 0; }
.faq .acc label:not(.close)::before { content: counter(frage, decimal-leading-zero); position: absolute; left: 0; top: 1.55rem; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--kupfer-dunkel); }
.faq .acc label:hover { color: var(--kupfer-dunkel); }
.faq .acc label:nth-child(odd)::after { content: "+"; position: absolute; right: 0; top: 1.05rem; float: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin: 0; border: 1px solid var(--kupfer-dunkel); border-radius: 50%; font-family: "Segoe UI", system-ui, sans-serif; font-size: 1.15rem; line-height: 1; color: var(--kupfer-dunkel); transition: background 0.25s, color 0.25s; }
.faq .acc label:nth-child(odd):hover::after { background: var(--kupfer-dunkel); color: var(--weiss); }
.faq .acc input.open:checked ~ label { background: none; color: var(--kupfer-dunkel); }
.faq .acc input.open:checked ~ label:nth-child(odd)::after { content: ""; display: none; }
.faq .acc input.open:checked ~ label.close::after { content: "–"; position: absolute; right: 0; top: 1.05rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin: 0; border-radius: 50%; background: var(--kupfer-dunkel); color: var(--weiss); font-size: 1.15rem; line-height: 1; float: none; }
.faq .acc .panel { background: none; padding: 0 0 0 3rem; }
.faq .acc input.open:checked ~ .panel { padding: 0 0 1.5rem 3rem; }
.faq .acc .panel p { color: var(--grau); margin-bottom: 0; }
@media (min-width: 64em) { .faq { padding: 7rem 0; } .faq__raster { grid-template-columns: 1fr 1.6fr; gap: 5.5rem; align-items: start; } .faq__kopf { position: sticky; top: 6rem; } }

/* ---------- Footer: großer Auftakt mit Telefon, darunter die Angaben, ganz unten der Name in Handschrift ---------- */
.site-footer { position: relative; overflow: hidden; padding: 0 0 1.5rem; color: rgba(255, 255, 255, 0.76); background: #0d253d; font-size: 0.98rem; }
.footer__auftakt { display: grid; gap: 1.6rem; align-items: end; padding: 4.5rem 0 3rem; margin-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.footer__satz { margin: 0; max-width: 14em; font-family: var(--edel); font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--weiss); }
.footer__satz em { color: var(--akzent-hell); }
.site-footer .footer__telefon, .site-footer .footer__telefon:visited { display: inline-flex; flex-direction: column; gap: 0.2rem; font-family: var(--edel); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; color: var(--weiss); text-decoration: none; }
.footer__telefon span { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-hell); }
.site-footer .footer__telefon:hover { color: var(--akzent-hell); text-decoration: none; }
.footer__grid { display: grid; gap: 2.4rem; }
.footer__titel { margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(240, 180, 131, 0.4); font-family: var(--edel); font-size: 1.35rem; font-weight: 400; color: var(--weiss); text-align: left; }
.site-footer a { color: var(--weiss); text-decoration: none; }
.site-footer a:visited { color: var(--weiss); }
.site-footer a:hover { color: var(--akzent-hell); text-decoration: underline; }
.footer__links { margin: 0; padding: 0; list-style: none; }
.footer__links li { list-style: none; padding: 0.15rem 0; }
.footer__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.9rem; }
.footer__unten p { margin: 0; }
.footer__schriftzug { display: block; width: calc(100% - 2rem); max-width: 90rem; height: auto; margin: 2.5rem auto -0.6rem; opacity: 0.08; pointer-events: none; }
@media (min-width: 48em) { .footer__grid { grid-template-columns: 2fr 1fr; } .footer__auftakt { grid-template-columns: 1fr auto; padding-top: 6rem; } }

/* ---------- Bildvorschau ---------- */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 28, 46, 0.93); }
.lightbox::backdrop { background: rgba(10, 28, 46, 0.6); }
.lightbox__figur { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; padding: 1.2rem; }
.lightbox__bild { max-width: 100%; max-height: 84vh; width: auto; border-radius: 10px; }
.lightbox__text { color: var(--weiss); font-size: 0.95rem; text-align: center; }
.lightbox__knopf { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; color: var(--weiss); background: rgba(255, 255, 255, 0.14); cursor: pointer; }
.lightbox__knopf:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__schliessen { top: 1rem; right: 1rem; }
.lightbox__zurueck { left: 1rem; top: 50%; margin-top: -1.5rem; }
.lightbox__weiter { right: 1rem; top: 50%; margin-top: -1.5rem; }

/* „Nach oben“-freie Seite: Einblenden beim Scrollen */
.einblenden { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.einblenden.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__nach, .hero-karte, .plakat::after { opacity: 1; }
  .schriftzug__flaeche { fill-opacity: 1; }
  .schriftzug__linie, .schriftzug__schwung { stroke-dashoffset: 0; }
  .band { overflow-x: auto; }
  .worte-wort { opacity: 1; }
  .enthuellen { clip-path: none; }
}

.acc { position: relative; isolation: isolate; }   /* akkordion.css gibt den Fragen z-index 100 – so bleiben sie unter dem Menü (technik.js) */

/* =====================================================================
   Unterseiten (Generator _werkzeuge/seiten.js) – gleiche Speisekarte wie die Startseite:
   Papierton, Georgia groß, feine Linien und gepunktete Führungslinien, Kupfer als einziger Akzent.
   ===================================================================== */
.titel em, .seitenkopf h1 em, .bildband figcaption em, .hinweisband__satz em { font-style: italic; color: var(--kupfer-dunkel); }

/* ---------- Seitenkopf: Text links, Bild rechts bis an den Rand, mit feiner Kartenlinie ---------- */
.seitenkopf { position: relative; overflow: hidden; padding: 2rem 0 3.5rem; background: var(--papier); border-bottom: 1px solid var(--linie); }
.seitenkopf__raster { display: grid; gap: 2.4rem; align-items: center; }
.pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; margin: 0 0 2rem; font-size: 0.85rem; color: var(--grau); }
.pfad a, .pfad a:visited { color: var(--grau); text-decoration: none; }
.pfad a:hover { color: var(--kupfer-dunkel); text-decoration: underline; }
.pfad [aria-current] { color: var(--nacht); font-weight: 600; }
.seitenkopf .kicker { margin-bottom: 1rem; }
.seitenkopf h1 { margin: 0; font-family: var(--edel); font-size: clamp(2.4rem, 5.2vw, 4.3rem); font-weight: 400; line-height: 1.04; letter-spacing: -0.025em; color: var(--nacht); }
.seitenkopf__lead { max-width: 37rem; margin: 1.4rem 0 0; font-size: 1.12rem; line-height: 1.65; color: var(--text); }
.seitenkopf__text > * { animation: einfliegen 0.9s cubic-bezier(.2,.7,.2,1) both; }
.seitenkopf__text > :nth-child(2) { animation-delay: 0.08s; }
.seitenkopf__text > :nth-child(3) { animation-delay: 0.16s; }
.seitenkopf__text > :nth-child(4) { animation-delay: 0.26s; }
.seitenkopf__text > :nth-child(5) { animation-delay: 0.36s; }
.seitenkopf__bild { margin: 0; }
.seitenkopf__rahmen { position: relative; display: block; overflow: hidden; height: clamp(16rem, 62vw, 24rem); background: var(--see); animation: kopf-bild 1.3s cubic-bezier(.2,.7,.2,1) 0.15s both; }
.seitenkopf__rahmen img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; animation: kopf-zoom 1.8s cubic-bezier(.2,.7,.2,1) 0.15s both; }
/* feine weiße Linie im Bild – wie der Rahmen einer Speisekarte */
.seitenkopf__rahmen::after { content: ""; position: absolute; inset: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.75); pointer-events: none; }
.seitenkopf__bild figcaption { margin-top: 0.8rem; font-family: var(--edel); font-style: italic; font-size: 1rem; color: var(--grau); }
.seitenkopf__bild figcaption::before { content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: 0.7rem; vertical-align: middle; background: var(--kupfer-dunkel); }
.seitenkopf--schlicht { padding-bottom: 3rem; }
.seitenkopf--schlicht .seitenkopf__raster { max-width: 52rem; margin-left: max(1rem, calc((100vw - var(--breite)) / 2)); }
@keyframes kopf-bild { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes kopf-zoom { from { transform: scale(1.12); } to { transform: none; } }
@media (min-width: 64em) {
  .seitenkopf { padding: 2.2rem 0 4.5rem; }
  .seitenkopf__raster { grid-template-columns: 1fr 1.02fr; gap: 4.5rem; }
  .seitenkopf__bild { margin-right: calc((min(100vw, var(--breite)) - 100vw) / 2 - 1rem); }
  .seitenkopf__rahmen { height: min(calc(100svh - 14rem), 34rem); min-height: 24rem; }
  .seitenkopf__bild figcaption { padding-left: 0.2rem; }
}

/* ---------- Inhaltsabschnitte ---------- */
.abschnitt-u { padding: 4.5rem 0; background: var(--weiss); }
.abschnitt-u--papier { background: var(--papier); }
.abschnitt-u + .abschnitt-u--papier, .abschnitt-u--papier + .abschnitt-u:not(.abschnitt-u--papier) { border-top: 1px solid var(--linie); }
.zweispalt { display: grid; gap: 1.6rem; }
.titel { margin: 0; font-family: var(--edel); font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: var(--nacht); text-align: left; }
.zweispalt .kicker, .kopfzeile .kicker { margin-bottom: 0.9rem; }
.fliesstext p { font-size: 1.06rem; line-height: 1.75; }
.fliesstext p:last-child { margin-bottom: 0; }
.fliesstext strong { color: var(--nacht); }
.einstieg { font-family: var(--edel); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.5; color: var(--nacht); }
.einstieg strong { font-weight: 400; color: var(--blau); }
.kopfzeile { display: grid; gap: 0.6rem; max-width: 46rem; margin-bottom: 2.6rem; }
.kopfzeile p { margin: 0.4rem 0 0; color: var(--grau); }
@media (min-width: 64em) {
  .abschnitt-u { padding: 6rem 0; }
  .zweispalt { grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; }
  .zweispalt > :first-child { position: sticky; top: 7rem; }
}

/* ---------- Karte: Einträge mit gepunkteter Führungslinie wie auf einer Speisekarte ---------- */
.karten-raster { display: grid; gap: 2.6rem 4rem; }
.karte-titel { margin: 0 0 0.2rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--nacht); font-family: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; color: var(--kupfer-dunkel); text-align: left; }
.karte { list-style: none; margin: 0; padding: 0; }
.karte li { list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 0.1rem 0.7rem; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--linie); }
.karte__name { font-family: var(--edel); font-size: 1.32rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--nacht); }
.karte a.karte__name, .karte a.karte__name:visited { color: var(--nacht); text-decoration: none; background: linear-gradient(var(--akzent-hell), var(--akzent-hell)) 0 100% / 100% 1px no-repeat; transition: color 0.25s, background-size 0.25s; }
.karte a.karte__name:hover { color: var(--kupfer-dunkel); background-image: linear-gradient(var(--kupfer-dunkel), var(--kupfer-dunkel)); }
.fliesstext a, .fliesstext a:visited, .vorteil p a, .vorteil p a:visited { color: var(--kupfer-dunkel); }
.karte__punkte { align-self: end; margin-bottom: 0.4rem; border-bottom: 1px dotted #b9ad9b; }
.karte__zeichen { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kupfer-dunkel); }
.karte small { grid-column: 1 / -1; font-size: 0.95rem; line-height: 1.5; color: var(--grau); }
@media (min-width: 48em) { .karten-raster--zwei { grid-template-columns: 1fr 1fr; } }

/* ---------- Steckbrief (Über uns, Kontakt): Angaben wie eine Weinkarte ---------- */
.steckbrief { margin: 0; border-top: 1px solid var(--nacht); }
.steckbrief > div { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
.steckbrief dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kupfer-dunkel); }
.steckbrief dd { margin: 0; font-family: var(--edel); font-size: 1.15rem; line-height: 1.4; color: var(--nacht); text-align: right; }
.steckbrief dd a, .steckbrief dd a:visited { color: var(--nacht); text-decoration: none; border-bottom: 1px solid var(--akzent-hell); }
.steckbrief dd a:hover { color: var(--kupfer-dunkel); border-bottom-color: var(--kupfer-dunkel); }

/* ---------- Vorzüge: vier Spalten nur mit Linien (wie „Warum Küchenprofis zu uns kommen“) ---------- */
.vorteil .vorteil__titel { margin: 1.5rem 0 0.5rem; font-family: var(--edel); font-size: 1.45rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--nacht); text-align: left; }
@media (min-width: 64em) { .vorteile__raster--drei { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Bildband: ein großes Bild über die ganze Breite, öffnet sich beim Hereinscrollen ---------- */
.bildband { margin: 0; background: var(--weiss); }
.bildband.ueber__panorama { margin: 0; }
.bildband figcaption { padding: 0.9rem 0 0; font-family: var(--edel); font-style: italic; color: var(--grau); }

/* ---------- Hinweisband: dunkle Leiste mit einem Satz und einem Knopf ---------- */
.hinweisband { padding: 3.2rem 0; color: rgba(255, 255, 255, 0.86); background: radial-gradient(60% 120% at 90% 0%, rgba(240, 180, 131, 0.18), transparent 60%), var(--nacht); }
.hinweisband__inner { display: grid; gap: 1.4rem; align-items: center; }
.hinweisband__satz { margin: 0; font-family: var(--edel); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--weiss); }
.hinweisband__satz em { color: var(--akzent-hell); }
.hinweisband p.hinweisband__text { margin: 0.6rem 0 0; color: rgba(255, 255, 255, 0.78); }
.hinweisband .btn-gruppe { margin: 0; }
@media (min-width: 64em) { .hinweisband__inner { grid-template-columns: 1fr auto; gap: 3rem; } }

/* ---------- Drei Schritte (Über uns): Planung, Umsetzung, Service als Programmpunkte ---------- */
.gaenge { display: grid; gap: 2rem; list-style: none; margin: 0; padding: 0; counter-reset: gang; }
.gaenge li { list-style: none; padding-top: 1rem; border-top: 2px solid var(--kupfer-dunkel); }
.gaenge .weg__nr { margin-bottom: 0.4rem; }
.gaenge__titel { margin: 0 0 0.6rem; font-family: var(--edel); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400; line-height: 1.1; color: var(--nacht); text-align: left; }
.gaenge p { margin: 0; color: var(--text); }
@media (min-width: 48em) { .gaenge { grid-template-columns: repeat(3, 1fr); gap: 2.6rem; } }

/* ---------- Markenwand (Partner): Logos ruhig im Raster, Name darunter ---------- */
.markenwand { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nacht); border-left: 1px solid var(--linie); }
.markenwand li { list-style: none; display: grid; grid-template-rows: 1fr auto; gap: 0.7rem; justify-items: center; padding: 1.4rem 1rem 1rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--weiss); transition: background 0.3s; }
.markenwand__logo { display: grid; place-items: center; height: 4.2rem; }
.markenwand img { max-height: 4.2rem; max-width: 9rem; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s, transform 0.4s cubic-bezier(.2,.7,.2,1); }
.markenwand__name { font-family: var(--edel); font-style: italic; font-size: 0.95rem; color: var(--grau); text-align: center; }
.markenwand li:hover { background: var(--papier); }
.markenwand li:hover img { filter: none; opacity: 1; transform: scale(1.05); }
@media (min-width: 40em) { .markenwand { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .markenwand { grid-template-columns: repeat(6, 1fr); } }

/* ---------- Referenzen-Seite: die dunkle Gästeliste, Titel als h2 ---------- */
.referenzen .titel { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.06; color: var(--weiss); }
.referenzen .titel em { color: var(--akzent-hell); }
.referenzen .ref-gruppe__titel { margin: 0; font-family: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; color: rgba(255, 255, 255, 0.72); text-align: left; }

/* ---------- Kontakt-Wege (Kontakt, Angebote): drei große Zeilen ---------- */
.wege { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nacht); }
.wege li { list-style: none; border-bottom: 1px solid var(--linie); }
.wege a, .wege a:visited { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; align-items: center; padding: 1.3rem 0; color: var(--nacht); text-decoration: none; transition: padding-left 0.35s cubic-bezier(.2,.7,.2,1); }
.wege a:hover { padding-left: 0.6rem; }
.wege__art { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kupfer-dunkel); }
.wege__wert { font-family: var(--edel); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em; }
.wege__pfeil { font-size: 1.4rem; color: var(--kupfer-dunkel); transition: transform 0.3s; }
.wege a:hover .wege__pfeil { transform: translateX(5px); }
.wege small { grid-column: 1 / -1; font-size: 0.93rem; color: var(--grau); }

/* ---------- Kontakt auf Unterseiten: ohne Foto, tiefes Seeblau ---------- */
.section--cta.cta--nacht { background: radial-gradient(70% 70% at 10% 0%, rgba(240, 180, 131, 0.16), transparent 60%), linear-gradient(180deg, #1d4468 0%, #12314f 100%); }
@media (min-width: 64em) { .section--cta.cta--nacht { background-image: radial-gradient(70% 70% at 10% 0%, rgba(240, 180, 131, 0.16), transparent 60%), linear-gradient(180deg, #1d4468 0%, #12314f 100%); } }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 50rem; }
.rechtstext h2, .rechtstext .h2 { margin: 2.6rem 0 0.8rem; font-family: var(--edel); font-size: 1.65rem; font-weight: 400; line-height: 1.2; color: var(--nacht); text-align: left; }
.rechtstext h2:first-child, .rechtstext .h2:first-child { margin-top: 0; }
.rechtstext h3, .rechtstext .h3 { margin: 1.6rem 0 0.5rem; font-size: 1.05rem; font-weight: 700; color: var(--nacht); text-align: left; }
.rechtstext ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.3rem; }
.rechtstext a { color: var(--kupfer-dunkel); }
/* Bildnachweise im Impressum: Vorschaubild + Urheber + Seiten */
.rechtstext ul.nachweise { list-style: none; margin: 0.4rem 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.4rem 1.2rem; }
.rechtstext .nachweise li { margin: 0; border-top: 1px solid rgba(18, 49, 79, 0.18); padding-top: 0.7rem; }
.rechtstext .nachweise img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #efe9de; }
.rechtstext .nachweise p { margin: 0.55rem 0 0; font-size: 0.92rem; line-height: 1.45; }
.rechtstext .nachweise strong { color: var(--nacht); font-weight: 700; }
.rechtstext .nachweise span { color: #5b6470; }

/* Hausregel: ausgeblendete Elemente (hidden-Attribut) bleiben immer unsichtbar */
[hidden] { display: none !important; }