/* ============================================================================
   GOHL CONSULTING & ELSTER DENTAL CONSULTING
   Gemeinsames Stylesheet fuer alle Seiten.

   Aufbau
   1  Grundlagen und Farbwelt
   2  Typografie
   3  Bausteine (Knoepfe, Karten, Kicker)
   4  Kopfbereich und Navigation
   5  Auswahl-Startseite
   6  Sektionen der Markenbereiche
   7  FAQ
   8  Kontakt und Formular
   9  Fusszeile
   10 Rechtsseiten
   11 Responsive

   Farblogik
   Beide Marken teilen sich dieselbe Palette und unterscheiden sich in der
   Grundstimmung. Elster Dental steht auf Anthrazit, Gohl Consulting auf Creme.
   Gesteuert wird das ueber data-marke am html-Element, damit dieselben
   Bausteine in beiden Bereichen funktionieren.

   Barrierefreiheit
   Keine Pixelgroesse am body. Alle Groessen in rem, sonst greift die
   Schriftskalierung des Barrierefreiheits-Widgets nicht durch.
   ============================================================================ */

/* ===========================================================================
   1  GRUNDLAGEN UND FARBWELT
   =========================================================================== */

:root{
  /* Farben der bestehenden Kundenseite, unveraendert uebernommen */
  --anthrazit:#1A1A1A;
  --anthrazit-2:#242424;
  --anthrazit-3:#2E2E2E;
  --creme:#FAF8F5;
  --creme-2:#F2EDE6;
  --sand:#D4C5A0;
  --gold:#C9A961;          /* Akzent auf dunklem Grund, Kontrast 7,7:1 */
  --gold-mittel:#A9812E;   /* grosse Schrift auf hellem Grund, 3,4:1 */
  --gold-text:#8A6A1F;     /* Fliesstext und Links auf hellem Grund, 4,7:1 */
  --weiss:#FFFFFF;
  --text:#555C66;          /* Fliesstext auf hellem Grund, 6,0:1 */
  --text-leise:#6B7280;
  --linie:rgba(26,26,26,.12);
  --linie-hell:rgba(250,248,245,.16);

  /* Rollen, werden je Marke ueberschrieben */
  --grund:var(--creme);
  --grund-2:var(--creme-2);
  --auf-grund:var(--anthrazit);
  --auf-grund-leise:var(--text);
  --akzent:var(--gold-mittel);
  --akzent-text:var(--gold-text);

  --breite:1220px;
  --breite-weit:1440px;
  --radius:14px;
  --radius-gross:22px;
  --schatten:0 18px 50px rgba(26,26,26,.09);
  --schatten-stark:0 26px 70px rgba(0,0,0,.30);
  --takt:cubic-bezier(.22,.61,.36,1);

  /* Die wiederverwendeten Module barrierefreiheit.css und einwilligung.css
     lesen diese Namen aus dem Wurzelelement. So tragen Widget und
     Einwilligungsfenster die Farben dieser Marke statt der Vorgabefarben
     aus dem Projekt, aus dem die Module stammen. */
  --navy:#1A1A1A;
  --navy-deep:#242424;
  --navy-ink:#0F0F0F;
  --coral:#A9812E;
  --coral-dark:#8A6A1F;
}

/* Der runde Knopf des Barrierefreiheits-Widgets traegt im Modul die Farbe
   --navy. Auf hellem Grund ist das richtig, dort steht er mit hohem Kontrast.
   Auf der dunklen Elster-Seite ist --navy jedoch die Hintergrundfarbe, dort
   verschwindet er. Nur dort wird umgefaerbt. */
html[data-marke="elster"] .bf-knopf{
  background:var(--gold) !important;
  color:var(--anthrazit) !important;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.65) !important;
}
html[data-marke="elster"] .bf-knopf:hover,
html[data-marke="elster"] .bf-knopf:focus-visible{
  background:var(--creme) !important;color:var(--anthrazit) !important;
}

/* Elster Dental: dunkle Grundstimmung */
html[data-marke="elster"]{
  --grund:var(--anthrazit);
  --grund-2:var(--anthrazit-2);
  --auf-grund:var(--creme);
  --auf-grund-leise:rgba(250,248,245,.74);
  --akzent:var(--gold);
  --akzent-text:var(--gold);
  --linie:rgba(250,248,245,.14);
}

/* Gohl Consulting: helle Grundstimmung */
html[data-marke="gohl"]{
  --grund:var(--creme);
  --grund-2:var(--creme-2);
  --auf-grund:var(--anthrazit);
  --auf-grund-leise:var(--text);
  --akzent:var(--gold-mittel);
  --akzent-text:var(--gold-text);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:106px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  /* bewusst in rem, damit die Schriftskalierung des Widgets greift */
  font:400 1.0625rem/1.7 'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--auf-grund-leise);
  background:var(--grund);
  overflow-x:hidden;
}

/* Attribute width und height stehen an jedem Bild. Ohne height:auto
   gewinnt das Attribut und Bilder werden auf Originalhoehe aufgeblasen. */
img{max-width:100%;height:auto;display:block}
picture{display:block}
/* SVG ist von Haus aus inline. Ohne display:block zentriert ein Grid die
   Grundlinie mit und das Zeichen sitzt sichtbar zu hoch in seinem Feld. */
svg{display:block}

a{color:var(--akzent-text);text-decoration-thickness:1px;text-underline-offset:3px}

/* Fokus nur bei Tastaturbedienung, damit Mausklicks keinen Ring zeigen */
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
html[data-marke="elster"] :focus-visible{outline-color:var(--weiss)}

.wrap{width:min(100% - 40px,var(--breite));margin-inline:auto}
.wrap--weit{width:min(100% - 40px,var(--breite-weit))}

.sprunglink{
  position:absolute;top:-200px;left:16px;z-index:1200;
  background:var(--anthrazit);color:var(--creme);
  padding:12px 18px;border-radius:0 0 10px 10px;
  font-weight:600;text-decoration:none;
  transition:top .18s var(--takt);
}
.sprunglink:focus{top:0}

/* Nur für Screenreader. Wird für Überschriften gebraucht, die die Gliederung
   vollständig halten, ohne dass sie im Layout doppelt erscheinen. */
.sr-nur{
  position:absolute !important;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ===========================================================================
   2  TYPOGRAFIE
   =========================================================================== */

h1,h2,h3,h4{
  margin:0;color:var(--auf-grund);
  font-weight:600;line-height:1.12;letter-spacing:-.02em;
  text-wrap:balance;
}

h1{font-size:clamp(2.5rem,1.4rem + 4.4vw,4.6rem);font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(1.95rem,1.25rem + 2.6vw,3.1rem);letter-spacing:-.03em}
h3{font-size:clamp(1.1rem,1.02rem + .4vw,1.3rem);letter-spacing:-.015em}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.kicker{
  display:inline-block;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent-text);margin-bottom:18px;
}

.mark{color:var(--akzent);font-weight:300}
html[data-marke="gohl"] .mark{color:var(--gold-mittel)}

.lead{
  font-size:clamp(1.0625rem,1rem + .3vw,1.22rem);
  line-height:1.68;color:var(--auf-grund-leise);
  max-width:56ch;
}

.sec-kopf{max-width:62ch;margin-bottom:clamp(40px,5vw,64px)}
.sec-kopf h2 + .lead{margin-top:20px}
.sec-kopf--mitte{margin-inline:auto;text-align:center}
.sec-kopf--mitte .lead{margin-inline:auto}

/* ===========================================================================
   3  BAUSTEINE
   =========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;
  border:1px solid transparent;border-radius:999px;
  font:600 .95rem/1.2 'Poppins',sans-serif;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--takt),color .2s var(--takt),
             border-color .2s var(--takt),transform .2s var(--takt);
}
.btn svg{width:18px;height:18px;flex:none}

/* Vordergrundfarbe wird in jedem Hover-Selektor mitgesetzt, sonst
   verschwinden Icons in ihrem eigenen Hintergrund. */
.btn--gold{background:var(--gold-mittel);color:var(--weiss);border-color:var(--gold-mittel)}
.btn--gold:hover,.btn--gold:focus-visible{background:var(--anthrazit);color:var(--creme);border-color:var(--anthrazit);transform:translateY(-2px)}
html[data-marke="elster"] .btn--gold{background:var(--gold);color:var(--anthrazit);border-color:var(--gold)}
html[data-marke="elster"] .btn--gold:hover,
html[data-marke="elster"] .btn--gold:focus-visible{background:var(--creme);color:var(--anthrazit);border-color:var(--creme)}

.btn--linie{background:transparent;color:var(--auf-grund);border-color:var(--auf-grund)}
.btn--linie:hover,.btn--linie:focus-visible{background:var(--auf-grund);color:var(--grund);transform:translateY(-2px)}

.btn-reihe{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ===========================================================================
   4  KOPFBEREICH UND NAVIGATION
   =========================================================================== */

.kopf{
  position:sticky;top:0;z-index:900;
  background:color-mix(in srgb,var(--grund) 92%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--takt),box-shadow .25s var(--takt);
}
.kopf[data-gescrollt="ja"]{border-bottom-color:var(--linie);box-shadow:0 10px 34px rgba(0,0,0,.06)}
html[data-marke="elster"] .kopf[data-gescrollt="ja"]{box-shadow:0 10px 34px rgba(0,0,0,.35)}

.nav{display:flex;align-items:center;gap:26px;min-height:88px}

.nav__logo{display:flex;align-items:center;flex:none;text-decoration:none}
/* Die beiden Logos haben sehr unterschiedliche Seitenverhaeltnisse.
   Elster ist breit und flach, Gohl hoch. Ohne eigene Hoehen wirkt das
   Gohl-Logo deutlich kleiner, obwohl es dieselbe Hoehe hat. */
.nav__logo img{height:56px;width:auto}
html[data-marke="gohl"] .nav__logo img{height:70px}

.nav__liste{
  display:flex;align-items:center;gap:26px;
  margin:0 0 0 auto;padding:0;list-style:none;
}
.nav__liste a{
  position:relative;white-space:nowrap;text-decoration:none;
  font-size:.925rem;font-weight:500;color:var(--auf-grund);
  /* 12px oben und unten bringen die Trefferflaeche auf die geforderten 44px. */
  padding:12px 0;transition:color .2s var(--takt);
}
.nav__liste a::after{
  content:"";position:absolute;left:0;right:100%;bottom:7px;height:2px;
  background:var(--akzent);transition:right .24s var(--takt);
}
.nav__liste a:hover,.nav__liste a:focus-visible{color:var(--akzent-text)}
.nav__liste a:hover::after,.nav__liste a:focus-visible::after,
.nav__liste a[aria-current="page"]::after{right:0}

.nav__cta{flex:none}
.nav__liste-cta{display:none}
@media (max-width:1240px){.kopf[data-menue="offen"] .nav__liste-cta{display:block}}

/* Umschalter zur Schwestermarke */
.nav__wechsel{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  min-height:44px;padding:10px 18px;border:1px solid var(--linie);border-radius:999px;
  font-size:.82rem;font-weight:500;color:var(--auf-grund-leise);
  text-decoration:none;white-space:nowrap;
  transition:background .2s var(--takt),color .2s var(--takt),border-color .2s var(--takt);
}
.nav__wechsel svg{width:15px;height:15px;flex:none}
.nav__wechsel:hover,.nav__wechsel:focus-visible{
  background:var(--auf-grund);color:var(--grund);border-color:var(--auf-grund);
}

.nav__burger{
  display:none;flex:none;
  width:48px;height:48px;padding:0;margin-left:auto;
  background:transparent;border:1px solid var(--linie);border-radius:12px;
  cursor:pointer;
}
.nav__burger span{
  display:block;width:20px;height:2px;margin:4px auto;
  background:var(--auf-grund);border-radius:2px;
  transition:transform .25s var(--takt),opacity .2s var(--takt);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ===========================================================================
   5  AUSWAHL-STARTSEITE
   =========================================================================== */

.start{min-height:100svh;display:flex;flex-direction:column;background:var(--creme)}

.start__kopf{padding:clamp(36px,6vw,72px) 0 clamp(28px,4vw,44px);text-align:center}
.start__kopf h1{font-size:clamp(2.25rem,1.4rem + 3vw,3.8rem);letter-spacing:-.03em}
/* Feine Goldlinie unter dem Titel, wie auf den Markenseiten: ruhig, CI-nah */
.start__kopf h1::after{content:"";display:block;width:56px;height:2px;margin:22px auto 0;background:var(--gold);border-radius:1px}
.start__kopf .lead{margin:20px auto 0;text-align:center}

.start__wahl{
  flex:1;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--linie);
}

.wahl{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:min(64vh,580px);padding:clamp(26px,3vw,44px);
  overflow:hidden;text-decoration:none;isolation:isolate;
}
.wahl__bild{position:absolute;inset:0;z-index:-2}
/* Der Ausschnitt schiebt das Gesicht nach rechts, damit Logo und Text
   links freie Flaeche haben. */
.wahl__bild img{width:100%;height:100%;object-fit:cover}
.wahl--elster .wahl__bild img{object-position:40% 15%}   /* Behandlungsstuhl rechts, links ruhige Wand */
.wahl--gohl .wahl__bild img{object-position:72% 16%}

/* Der Verlauf laeuft waagerecht, nicht senkrecht. So bleibt das Foto rechts
   sichtbar und Text wie Logo stehen links auf ruhigem Grund. Elster traegt
   die dunkle Grundstimmung, Gohl die helle. Dieselbe Unterscheidung wie in
   den beiden Markenbereichen. */
.wahl::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .4s var(--takt)}
.wahl--elster::before{
  background:linear-gradient(96deg,#1A1A1A 0%,rgba(26,26,26,.94) 26%,
             rgba(26,26,26,.48) 56%,rgba(26,26,26,0) 100%);
}
.wahl--gohl::before{
  background:linear-gradient(96deg,#FAF8F5 0%,rgba(250,248,245,.97) 28%,
             rgba(250,248,245,.55) 58%,rgba(250,248,245,0) 100%);
}
.wahl:hover::before,.wahl:focus-visible::before{opacity:.9}

.wahl__kopf{display:flex;align-items:center;gap:clamp(16px,2vw,26px)}
.wahl__nr{
  font-size:clamp(2.2rem,1.7rem + 1.6vw,3rem);font-weight:300;
  line-height:1;color:var(--gold);
}
.wahl--gohl .wahl__nr{color:var(--gold-mittel)}
.wahl__logo{height:clamp(54px,5vw,74px);width:auto}
.wahl--gohl .wahl__logo{height:clamp(70px,6.4vw,96px)}

.wahl__inhalt{max-width:44ch}
.wahl__rolle{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.wahl--gohl .wahl__rolle{color:var(--gold-text)}
.wahl h2{color:var(--creme);font-size:clamp(1.55rem,1.2rem + 1.3vw,2.2rem)}
.wahl--gohl h2{color:var(--anthrazit)}
.wahl p{color:rgba(250,248,245,.86);max-width:40ch;margin:14px 0 0}
.wahl--gohl p{color:var(--text)}
.wahl__mehr{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  font-weight:600;font-size:.95rem;color:var(--creme);
}
.wahl--gohl .wahl__mehr{color:var(--anthrazit)}
.wahl__mehr svg{width:18px;height:18px;transition:transform .25s var(--takt)}
.wahl:hover .wahl__mehr svg,.wahl:focus-visible .wahl__mehr svg{transform:translateX(6px)}

/* Fuss der Auswahlseite: zwei gleichwertige Saeulen, links Elster Dental,
   rechts Gohl Consulting. Beide Firmen tragen ihre eigenen Pflichtangaben,
   darunter eine gemeinsame Schlusszeile. */
.start__fuss{
  padding:clamp(40px,5vw,64px) 0 8px;border-top:1px solid var(--linie);
  font-size:.88rem;color:var(--text-leise);
}
.start__fuss__satz{
  margin:0 auto clamp(28px,3.4vw,44px);max-width:56ch;text-align:center;
  font-size:clamp(1.05rem,1rem + .35vw,1.3rem);line-height:1.6;color:var(--anthrazit);font-weight:300;
}
.start__fuss__satz strong{font-weight:600;color:var(--anthrazit)}
.start__fuss__satz .mark{color:var(--gold-mittel)}
.start__fuss__raster{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4vw,56px);
  padding:clamp(28px,3.4vw,44px);
  border-radius:calc(var(--radius-gross) + 8px);
  overflow:hidden;
}
/* Dezenter Glas-Effekt: hinter den Karten liegen zwei sehr weiche Farbflecken
   (Gold, Anthrazit), die Karten sind halbtransparent und verwischen sie.
   Browser ohne backdrop-filter zeigen eine fast deckende Karte. */
.start__fuss__raster::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 70% at 18% 30%, rgba(201,169,97,.22), transparent 70%),
    radial-gradient(55% 65% at 84% 76%, rgba(26,26,26,.10), transparent 70%),
    var(--creme-2);
}
.fussmarke{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,32px);
  background:rgba(250,248,245,.72);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 40px rgba(26,26,26,.07);
  border-radius:var(--radius-gross);
  transition:transform .35s var(--takt),box-shadow .35s var(--takt);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .fussmarke{background:rgba(250,248,245,.55);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
}
.fussmarke:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 20px 50px rgba(26,26,26,.10)}
/* Lichtstreif: beim Darueberfahren wandert ein schmaler, schraeger Glanz
   einmal von links nach rechts ueber die Karte. Dezent, 0,9 Sekunden. */
.fussmarke{overflow:hidden}
.fussmarke::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:35%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 45%, rgba(201,169,97,.18) 55%, rgba(255,255,255,0) 100%);
  transform:translateX(-120%) skewX(-14deg);pointer-events:none;opacity:0;
}
.fussmarke:hover::after{animation:glanz .9s var(--takt) forwards}
@keyframes glanz{
  0%{transform:translateX(-120%) skewX(-14deg);opacity:0}
  15%{opacity:1}
  100%{transform:translateX(480%) skewX(-14deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){.fussmarke:hover{transform:none}.fussmarke:hover::after{animation:none}}
/* Feste Feldhoehe fuer das Logo. Die beiden Logos haben sehr unterschiedliche
   Seitenverhaeltnisse, ohne festes Feld beginnt der Text darunter versetzt. */
.fussmarke__logofeld{
  height:76px;display:flex;align-items:center;margin-bottom:16px;
}
.fussmarke__logo{max-height:54px;width:auto;margin:0}
.fussmarke--gohl .fussmarke__logo{max-height:70px}
.fussmarke__titel{
  margin:0;font-size:1.02rem;font-weight:700;color:var(--anthrazit);
  letter-spacing:-.01em;
}
.fussmarke__rolle{
  display:block;margin-top:6px;font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);
}
.fussmarke__adresse{
  margin:16px 0 0;font-style:normal;line-height:1.75;color:var(--text);
}
.fussmarke__fuehrung{margin:14px 0 20px;color:var(--text-leise);font-size:.84rem}
.fussmarke__recht{
  display:flex;flex-wrap:wrap;gap:4px 16px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--linie);
}
.start__fuss a{color:var(--text-leise);text-decoration:none}
.fussmarke__adresse a{color:var(--text)}
.start__fuss a:hover,.start__fuss a:focus-visible{color:var(--gold-text);text-decoration:underline}
.start__schluss{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 20px;margin-top:clamp(28px,3vw,40px);padding-top:20px;
  border-top:1px solid var(--linie);
}
.start__copyright{font-size:.82rem;color:var(--text-leise)}
.start__schluss .fuss__widerruf{color:var(--text-leise)}

/* ===========================================================================
   6b REFERENZEN: drei Stimmen, gleiche Glaskarten wie die Leistungen
   =========================================================================== */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
/* Nur zwei Stimmen: zwei gleich breite Karten, damit rechts keine Luecke bleibt. */
.stimmen--zwei{grid-template-columns:repeat(2,1fr)}
.stimme{
  position:relative;margin:0;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;
  border:1px solid var(--linie);border-radius:var(--radius-gross);background:var(--grund);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;overflow:hidden;
  transition:transform .28s var(--takt),border-color .28s var(--takt),box-shadow .28s var(--takt);
}
.stimme:hover{transform:translateY(-4px);border-color:var(--akzent);box-shadow:var(--schatten)}
html[data-marke="elster"] .stimme:hover{box-shadow:var(--schatten-stark)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .stimme{background:rgba(250,248,245,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.7)}
  html[data-marke="elster"] .stimme{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
}
.stimme::before{content:"\201E";position:absolute;top:10px;left:22px;font-size:4.5rem;line-height:1;color:var(--akzent);opacity:.28;font-weight:700}
.stimme__text{margin:0;padding-top:44px;flex:1}
.stimme__text p{margin:0;font-size:.98rem;line-height:1.7;color:var(--auf-grund)}
.stimme__wer{margin-top:22px;padding-top:16px;border-top:1px solid var(--linie);display:flex;flex-direction:column;gap:2px}
.stimme__wer b{color:var(--auf-grund);font-weight:600}
.stimme__wer span{font-size:.86rem;color:var(--auf-grund-leise)}
.stimme__quelle{font-size:.76rem !important;letter-spacing:.04em;opacity:.8}
#referenzen{position:relative;isolation:isolate}
#referenzen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 55% at 80% 30%, rgba(201,169,97,.14), transparent 70%),
             radial-gradient(38% 50% at 18% 75%, rgba(201,169,97,.09), transparent 70%)}
@media (max-width:1024px){.stimmen{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.stimmen{grid-template-columns:1fr}}

/* ===========================================================================
   6  SEKTIONEN DER MARKENBEREICHE
   =========================================================================== */

.sek{padding:clamp(64px,8vw,124px) 0;background:var(--grund)}
.sek--getoent{background:var(--grund-2)}
.sek--kante{border-top:1px solid var(--linie)}

/* Hero */
.hero{position:relative;padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,110px);overflow:hidden}
.hero__raster{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero__text{max-width:36ch}
.hero h1 .zeile{display:block}
.hero .lead{margin-top:24px}
.hero__medien{position:relative}
.hero__medien img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  /* Ausschnitt etwas nach oben, damit das Gesicht im Bild bleibt,
     auch wenn die Vorlage im Querformat vorliegt. */
  object-position:50% 28%;
  border-radius:var(--radius-gross);box-shadow:var(--schatten);
}
html[data-marke="elster"] .hero__medien img{box-shadow:var(--schatten-stark);object-position:50% 6%;aspect-ratio:4/3}
/* Elster-Kopfzeile: kuerzer und breiter, damit der Titel in zwei Zeilen steht */
.hero__text{max-width:46ch}
html[data-marke="elster"] .hero h1{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.6rem)}
html[data-marke="elster"] .hero__raster{align-items:center}
/* Schleier ueber dem Kopfbild (Elster): unten dunkler Anthrazit-Verlauf,
   oben klar. Bindet das Foto an den dunklen Grund, Gesichter bleiben frei. */
/* Gohl: leichter cremefarbener Schleier von unten, bindet das Foto an den hellen Grund */
html[data-marke="gohl"] .hero__medien::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-gross);pointer-events:none;
  background:linear-gradient(180deg,rgba(250,248,245,.10) 0%,rgba(250,248,245,.06) 50%,rgba(250,248,245,.45) 100%);
}
html[data-marke="elster"] .hero__medien::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-gross);pointer-events:none;
  background:linear-gradient(180deg,rgba(26,26,26,.30) 0%,rgba(26,26,26,.22) 45%,rgba(26,26,26,.72) 100%);
}

/* Partnernetzwerk. Die Logos liegen auf weissen Feldern, damit sie auf der
   dunklen Elster-Seite genauso sauber stehen wie auf der hellen Gohl-Seite. */
/* Flex statt Grid: eine unvollstaendige letzte Reihe steht mittig. --spalten je Breite. */
.partner{
  --spalten:4;--abstand:clamp(14px,1.8vw,22px);
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--abstand);
}
.partner__feld{
  flex:0 0 calc((100% - (var(--spalten) - 1) * var(--abstand)) / var(--spalten));
  box-sizing:border-box;
  display:grid;place-items:center;min-height:104px;
  padding:clamp(18px,2.2vw,28px);
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);
  transition:border-color .28s var(--takt),box-shadow .28s var(--takt);
}
.partner__feld:hover{border-color:var(--akzent);box-shadow:var(--schatten)}
.partner__feld img{
  display:block;width:auto;max-width:100%;height:auto;max-height:48px;
  filter:grayscale(1);opacity:.8;
  transition:filter .28s var(--takt),opacity .28s var(--takt);
}
.partner__feld:hover img{filter:none;opacity:1}
/* Logos im Hochformat oder mit zwei Textzeilen brauchen mehr Hoehe,
   sonst ist die Unterzeile nicht mehr zu lesen. */
.partner__feld--hoch img{max-height:84px}

/* Hinweiskasten, zurzeit fuer die Praxisaufloesung. */
.hinweis{
  max-width:68ch;margin:0 auto;padding:clamp(22px,3vw,38px);
  background:var(--grund-2);border:1px solid var(--akzent);border-radius:var(--radius-gross);
}
.hinweis h3{
  margin:0 0 12px;color:var(--auf-grund);
  font-size:clamp(1.12rem,1rem + .5vw,1.4rem);font-weight:600;letter-spacing:-.01em;
}
.hinweis p{margin:0}
.hinweis .btn-reihe{margin-top:26px}

/* Vertrauensband */
.band{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--grund-2)}
.band__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie)}
.band__punkt{
  display:flex;align-items:center;gap:16px;
  padding:28px clamp(16px,2.4vw,34px);background:var(--grund-2);
}
.band__ico{
  flex:none;width:48px;height:48px;display:grid;place-items:center;
  border-radius:13px;background:color-mix(in srgb,var(--akzent) 16%,transparent);
  color:var(--akzent-text);
}
.band__ico svg{width:24px;height:24px}
.band__punkt b{display:block;color:var(--auf-grund);font-weight:600;font-size:.98rem;line-height:1.3}
/* Eingeschraenkt auf den Textblock. Ein einfaches .band__punkt span trifft
   auch das Icon-Feld, ueberschreibt dessen display:grid und schiebt das
   Zeichen an den oberen Rand. */
.band__punkt div span{display:block;font-size:.86rem;color:var(--auf-grund-leise);margin-top:3px}

/* Leistungen */
.leistungen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
/* Unterstuetzende Leistung: eine Karte ueber die ganze Breite, Text neben dem Symbol */
.karte--breit{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:start}
.karte--breit .karte__ico{grid-row:1 / span 2}
.karte--breit h3{grid-column:2}
.karte--breit p{grid-column:2;max-width:none}
@media (max-width:860px){.karte--breit{display:block}}
.karte{
  position:relative;padding:clamp(26px,3vw,40px);
  border:1px solid var(--linie);border-radius:var(--radius-gross);
  background:var(--grund);
  /* dezente Glasoptik: leicht durchscheinend, feiner Lichtrand oben */
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
  transition:transform .28s var(--takt),border-color .28s var(--takt),box-shadow .28s var(--takt);
}
.karte:hover{transform:translateY(-4px);border-color:var(--akzent);box-shadow:var(--schatten)}
html[data-marke="elster"] .karte:hover{box-shadow:var(--schatten-stark)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .karte{background:rgba(250,248,245,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.7)}
  html[data-marke="elster"] .karte{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
  .kopfkarte{background:rgba(250,248,245,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  html[data-marke="elster"] .kopfkarte{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10)}
}
/* Lichtstreif beim Darueberfahren, wie bei den Kontaktkarten der Startseite */
.karte{overflow:hidden}
.karte::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:35%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 45%, rgba(201,169,97,.16) 55%, rgba(255,255,255,0) 100%);
  transform:translateX(-120%) skewX(-14deg);pointer-events:none;opacity:0;
}
html[data-marke="elster"] .karte::after{background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 45%, rgba(201,169,97,.14) 55%, rgba(255,255,255,0) 100%)}
.karte:hover::after{animation:glanz .9s var(--takt) forwards}
@media (prefers-reduced-motion:reduce){.karte:hover::after{animation:none}}

/* Weiche Farbflecken hinter den Leistungen, damit das Glas etwas zu verwischen hat */
#leistungen{position:relative;isolation:isolate}
#leistungen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 55% at 20% 35%, rgba(201,169,97,.16), transparent 70%),
             radial-gradient(40% 50% at 82% 70%, rgba(201,169,97,.10), transparent 70%)}
html[data-marke="gohl"] #leistungen::before{
  background:radial-gradient(45% 55% at 20% 35%, rgba(201,169,97,.18), transparent 70%),
             radial-gradient(40% 50% at 82% 70%, rgba(26,26,26,.07), transparent 70%)}
.karte__ico{
  width:56px;height:56px;display:grid;place-items:center;margin-bottom:22px;
  border-radius:15px;background:color-mix(in srgb,var(--akzent) 15%,transparent);
  color:var(--akzent-text);
}
.karte__ico svg{width:28px;height:28px}
.karte h3{margin-bottom:10px}
.karte p{font-size:.96rem;margin:0}
.karte__nr{
  position:absolute;top:clamp(22px,2.6vw,32px);right:clamp(24px,3vw,36px);
  font-size:.78rem;font-weight:600;letter-spacing:.1em;color:var(--akzent);opacity:.6;
}

/* Gruenderin */
.person{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
/* Ohne Portrait steht der Text allein. Eine Spalte, begrenzte Zeilenlaenge,
   damit die Zeilen auf breiten Bildschirmen nicht auseinanderlaufen. */
.person--ohne-bild{grid-template-columns:1fr;max-width:74ch;margin-inline:auto;text-align:center}
.person--ohne-bild blockquote{margin-inline:auto}
.person--ohne-bild .person__wer{display:inline-block;padding-inline:clamp(18px,3vw,40px)}
.person--ohne-bild .btn-reihe{justify-content:center}
.person__bild img{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 26%;
  border-radius:var(--radius-gross);box-shadow:var(--schatten);
}
html[data-marke="elster"] .person__bild img{box-shadow:var(--schatten-stark)}
.person blockquote{
  margin:0;font-size:clamp(1.28rem,1.05rem + 1.05vw,1.95rem);
  line-height:1.4;font-weight:300;letter-spacing:-.02em;color:var(--auf-grund);
  text-wrap:balance;
}
.person__wer{margin-top:26px;padding-top:22px;border-top:1px solid var(--linie)}
.person__wer b{display:block;color:var(--auf-grund);font-weight:600}
.person__wer span{font-size:.9rem}
.person__text{margin-top:24px;font-size:1rem}

/* Zwei Koepfe nebeneinander. Wird gebraucht, wo ein Unternehmen mehrere
   Verantwortliche hat und nicht eine Person das ganze Gesicht sein soll. */
.aussage{
  margin:0 auto clamp(40px,5vw,64px);max-width:34ch;text-align:center;
  font-size:clamp(1.28rem,1.05rem + 1.05vw,1.95rem);line-height:1.4;
  font-weight:300;letter-spacing:-.02em;color:var(--auf-grund);text-wrap:balance;
}

.koepfe{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px)}
/* Nur eine verantwortliche Person: eine Karte, mittig, nicht ueber die ganze Breite. */
.koepfe--einzeln{grid-template-columns:minmax(0,560px);justify-content:center}
.kopfkarte{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,30px);
  align-items:center;padding:clamp(18px,2vw,26px);
  border:1px solid var(--linie);border-radius:var(--radius-gross);background:var(--grund);
  transition:border-color .28s var(--takt),box-shadow .28s var(--takt);
}
.kopfkarte:hover{border-color:var(--akzent);box-shadow:var(--schatten)}
html[data-marke="elster"] .kopfkarte:hover{box-shadow:var(--schatten-stark)}
.kopfkarte img{
  width:clamp(120px,12vw,168px);aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;
  border-radius:var(--radius);
}
.kopfkarte h3{margin-bottom:2px}
.kopfkarte__rolle{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent-text);margin-bottom:12px;
}
.kopfkarte p{font-size:.94rem;margin:0}

/* ===========================================================================
   7  FAQ
   =========================================================================== */

.faq{max-width:820px;margin-inline:auto}
.faq details{
  border-bottom:1px solid var(--linie);
  transition:background .2s var(--takt);
}
.faq details[open]{background:color-mix(in srgb,var(--akzent) 5%,transparent)}
.faq summary{
  display:flex;align-items:flex-start;gap:18px;
  padding:22px 18px;cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
/* Die Frage ist eine echte h3. Ohne sie zaehlt der Text nicht fuer die
   Gliederung, die Google und Screenreader auswerten. Optisch aendert sich nichts. */
.faq summary h3{
  font:inherit;color:var(--auf-grund);font-weight:600;font-size:1.02rem;
  letter-spacing:-.01em;margin:0;display:inline;flex:1;
}
.faq__zeichen{
  flex:none;width:28px;height:28px;margin-top:0;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--akzent);color:var(--akzent-text);
  transition:transform .25s var(--takt),background .2s var(--takt),color .2s var(--takt);
}
.faq__zeichen svg{width:14px;height:14px}
.faq details[open] .faq__zeichen{transform:rotate(45deg);background:var(--akzent);color:var(--grund)}
html[data-marke="elster"] .faq details[open] .faq__zeichen{color:var(--anthrazit)}
.faq summary:hover h3,.faq summary:focus-visible h3{color:var(--akzent-text)}
.faq__antwort{padding:0 18px 24px 62px;font-size:.98rem;max-width:64ch}
.faq__antwort p:last-child{margin-bottom:0}

/* ===========================================================================
   8  KONTAKT UND FORMULAR
   =========================================================================== */

.kontakt__raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start}

.kontakt__daten{font-size:.98rem}
.kontakt__zeile{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--linie)}
.kontakt__zeile:first-of-type{border-top:1px solid var(--linie)}
.kontakt__zeile svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--akzent-text)}
.kontakt__zeile b{display:block;color:var(--auf-grund);font-weight:600;font-size:.88rem}
.kontakt__zeile a{color:var(--auf-grund-leise);text-decoration:none}
.kontakt__zeile a:hover,.kontakt__zeile a:focus-visible{color:var(--akzent-text);text-decoration:underline}

.form{
  padding:clamp(26px,3.4vw,44px);
  border:1px solid var(--linie);border-radius:var(--radius-gross);
  background:var(--grund-2);
}
.form__paar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{margin-bottom:16px}
.feld label{
  display:block;margin-bottom:7px;
  font-size:.82rem;font-weight:600;color:var(--auf-grund);letter-spacing:.01em;
}
.feld input,.feld textarea{
  width:100%;min-height:52px;padding:13px 16px;
  font:400 1rem/1.5 'Poppins',sans-serif;color:var(--auf-grund);
  background:var(--grund);
  border:1px solid var(--linie);border-radius:12px;
  transition:border-color .2s var(--takt),box-shadow .2s var(--takt);
}
.feld textarea{min-height:132px;resize:vertical}
.feld input:focus,.feld textarea:focus{
  outline:none;border-color:var(--akzent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 22%,transparent);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--text-leise)}
.feld--fehler input,.feld--fehler textarea{border-color:#C0392B}
.feld__fehler{display:block;margin-top:6px;font-size:.82rem;color:#C0392B}
html[data-marke="elster"] .feld--fehler input,
html[data-marke="elster"] .feld--fehler textarea{border-color:#E88B7F}
html[data-marke="elster"] .feld__fehler{color:#E88B7F}

.zustimmung{display:flex;gap:12px;align-items:flex-start;margin:6px 0 20px;min-height:44px;padding:6px 0}
.zustimmung input{flex:none;width:24px;height:24px;min-height:0;margin-top:2px;accent-color:var(--akzent);cursor:pointer}
.zustimmung label{font-size:.86rem;font-weight:400;color:var(--auf-grund-leise);margin:0;line-height:1.55;cursor:pointer}

.form__hinweis{margin-top:16px;font-size:.8rem;color:var(--auf-grund-leise)}

.danke{
  display:none;padding:32px;text-align:center;
  border:1px solid var(--akzent);border-radius:var(--radius);
  background:color-mix(in srgb,var(--akzent) 10%,transparent);
}
.danke[data-sichtbar="ja"]{display:block}
.danke h3{margin-bottom:8px}

/* ===========================================================================
   9  FUSSZEILE
   =========================================================================== */

.fuss{background:var(--anthrazit);color:rgba(250,248,245,.72);padding:clamp(52px,6vw,80px) 0 0}
.fuss a{color:rgba(250,248,245,.72);text-decoration:none}
.fuss a:hover,.fuss a:focus-visible{color:var(--gold);text-decoration:underline}
.fuss__raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.fuss__logo{height:42px;width:auto;margin-bottom:20px}
html[data-marke="gohl"] .fuss__logo{height:56px}
.fuss__text{font-size:.92rem;max-width:38ch}
.fuss h3{color:var(--creme);font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.92rem}
.fuss__leiste{
  margin-top:clamp(38px,5vw,56px);padding:24px 0;
  border-top:1px solid var(--linie-hell);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  font-size:.84rem;
}
.fuss__leiste nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.fuss__region{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--linie-hell);
  font-size:.82rem;color:rgba(250,248,245,.56);
}

/* Signatur des Hauses, auf jeder Seite. Bewusst leise: eine Stufe kleiner
   als die Rechtszeile darueber, damit sie die Pflichtangaben nicht
   verdraengt, aber mit goldenem Namen und Zeichen erkennbar. */
.fuss__ao{
  margin:0;padding:18px 0 26px;text-align:center;
  font-size:.78rem;letter-spacing:.04em;color:rgba(250,248,245,.46);
}
.fuss__ao a{
  display:inline-flex;align-items:center;gap:7px;
  margin-left:7px;color:var(--gold);text-decoration:none;font-weight:600;
  transition:color .2s var(--takt);
}
.fuss__ao svg{width:14px;height:14px;opacity:.85;transition:transform .35s var(--takt)}
.fuss__ao a:hover,.fuss__ao a:focus-visible{color:var(--creme)}
.fuss__ao a:hover svg,.fuss__ao a:focus-visible svg{transform:rotate(90deg)}

/* Auf der Auswahl-Startseite steht die Signatur auf hellem Grund. */
.start .fuss__ao{color:var(--text-leise);border-top:1px solid var(--linie);margin-top:4px}
.start .fuss__ao a{color:var(--gold-text)}
.start .fuss__ao a:hover,.start .fuss__ao a:focus-visible{color:var(--anthrazit)}

/* Der Widerruf steht in jeder Fusszeile und kostet genauso wenig Aufwand
   wie die Erteilung der Einwilligung. */
.fuss__widerruf{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:rgba(250,248,245,.72);text-decoration:underline;
}
.fuss__widerruf:hover,.fuss__widerruf:focus-visible{color:var(--gold)}

/* ===========================================================================
   10  RECHTSSEITEN
   =========================================================================== */

.recht{padding:clamp(48px,6vw,88px) 0}
.recht__inhalt{max-width:760px;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.recht__inhalt h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin:44px 0 14px}
.recht__inhalt h3{margin:26px 0 10px}
.recht__inhalt p{font-size:.98rem}
.recht__inhalt address{font-style:normal;margin-bottom:20px}

.entwurf{
  padding:20px 24px;margin-bottom:38px;
  border:1px solid #C9A961;border-left:5px solid #C9A961;border-radius:var(--radius);
  background:rgba(201,169,97,.12);font-size:.92rem;
}
.entwurf b{color:var(--auf-grund)}

/* Fehlende Pflichtangaben sind sichtbar markiert und nicht erfunden. */
.luecke{
  background:#FFF3B0;color:#5A4300;
  padding:1px 8px;border-radius:5px;font-weight:600;font-size:.9em;
  border:1px dashed #C9A961;
}

/* ===========================================================================
   11  RESPONSIVE
   =========================================================================== */

@media (max-width:1240px){
  .nav__liste,.nav__cta{display:none}
  .nav__burger{display:block}
  .nav__wechsel{margin-left:auto}

  .kopf[data-menue="offen"] .nav__liste{
    position:absolute;left:0;right:0;top:100%;z-index:910;
    display:grid;gap:2px;margin:0;padding:14px 20px 22px;
    background:var(--grund);border-bottom:1px solid var(--linie);
    box-shadow:0 22px 50px rgba(0,0,0,.18);
  }
  .kopf[data-menue="offen"] .nav__liste a{display:block;padding:13px 4px;font-size:1.02rem}
  .kopf[data-menue="offen"] .nav__liste a::after{display:none}
  /* Der Knopf in der Kopfzeile bleibt am Handy versteckt (er wuerde rechts aus
     dem Bild laufen); stattdessen steht er als letzter Punkt im Klappmenue. */
  .kopf[data-menue="offen"] .nav__cta{display:none}
  .kopf[data-menue="offen"] .nav__liste-cta{margin-top:10px}
  .kopf[data-menue="offen"] .nav__liste-cta a{display:inline-flex;width:100%;justify-content:center;padding:14px 20px}
  .kopf[data-menue="offen"] .nav__liste-cta a::after{display:none}
}

@media (max-width:1024px){
  .hero__raster,.person,.kontakt__raster{grid-template-columns:1fr}
  .hero__text{max-width:none}
  .person__bild{max-width:420px}
  .hero__medien{max-width:520px}
  .hero__medien img{aspect-ratio:16/11}
  /* Elster: die Vorlage ist Hochformat, deshalb bleibt der Kasten Hochformat.
     Ein 16:11-Kasten wuerde hier den Kopf abschneiden. */
  html[data-marke="elster"] .hero__medien img{aspect-ratio:4/3;object-position:50% 6%}   /* auch am Handy ohne Beine */
  .fuss__raster{grid-template-columns:1fr 1fr}
  .fuss__raster > :first-child{grid-column:1 / -1}
}

@media (max-width:860px){
  .koepfe{grid-template-columns:1fr}
  .start__wahl{grid-template-columns:1fr}
  /* Handy: Foto oben, Text darunter auf eigener Flaeche. Ueberlagerung von
     Schrift und Gesicht faellt damit weg (Rueckmeldung Frau Gohl). */
  .wahl{min-height:0;padding:0;display:block}
  .wahl::before{display:none}
  .wahl__bild{position:relative;inset:auto;z-index:0;aspect-ratio:4/3;overflow:hidden}
  .wahl__bild picture,.wahl__bild img{display:block;height:100%;width:100%}
  .wahl__bild img{object-position:50% 20%}
  .wahl--gohl .wahl__bild img{object-position:50% 12% !important}
  .wahl--elster .wahl__bild img{object-position:60% 50% !important}
  .wahl__kopf{position:absolute;top:14px;left:14px;gap:10px}
  .wahl__kopf .wahl__nr{display:none}
  .wahl__kopf .wahl__logo{height:34px}
  .wahl--gohl .wahl__kopf .wahl__logo{height:42px}
  /* leichter Schleier oben auf dem Foto, damit Logo und Nummer ruhig sitzen */
  /* Schleier wie am Desktop: Elster dunkel, Gohl creme, ueber dem ganzen Foto,
     oben etwas dichter fuer das Logo */
  .wahl__bild::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(26,26,26,.45) 0%,rgba(26,26,26,.22) 100%)}
  .wahl--gohl .wahl__bild::after{background:linear-gradient(180deg,rgba(250,248,245,.72) 0%,rgba(250,248,245,.45) 100%)}
  .wahl{position:relative}
  .wahl__inhalt{padding:22px 22px 28px;max-width:none}
  .wahl--elster .wahl__inhalt{background:#1A1A1A}
  .wahl--gohl .wahl__inhalt{background:var(--creme)}
  .wahl--gohl .wahl__kopf .wahl__nr{color:var(--gold)}
  /* Logo oben links auf dem Foto: leichte dunkle Kante fuer Lesbarkeit */
  .wahl__kopf{padding:6px 10px;border-radius:10px;background:rgba(26,26,26,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .wahl--gohl .wahl__kopf{background:rgba(250,248,245,.6)}
  .wahl--gohl .wahl__kopf .wahl__nr{color:var(--gold-mittel)}
  .band__raster{grid-template-columns:1fr}
  .leistungen{grid-template-columns:1fr}
  .partner{--spalten:2}
}

@media (max-width:600px){
  .partner{--spalten:1}
  .start__fuss__raster{grid-template-columns:1fr;padding:18px}
  .kopfkarte{grid-template-columns:1fr;text-align:left}
  .kopfkarte img{width:100%;max-width:220px;aspect-ratio:4/3}
  .wrap{width:min(100% - 32px,var(--breite))}
  html{scroll-padding-top:90px}
  .nav{min-height:76px}
  .nav__logo img{height:46px}
  /* Der Gohl-Schriftzug ist hochformatig. Ohne eigene Regel gewinnt hier
     der spezifischere Markenselektor und das Logo sprengt die Leiste. */
  html[data-marke="gohl"] .nav__logo img{height:58px}
  .form__paar{grid-template-columns:1fr}
  .faq__antwort{padding-left:18px}
  .fuss__raster{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-reihe{flex-direction:column;align-items:stretch}
  .nav__wechsel span{display:none}
}

/* Animationen nur, wenn der Besucher sie nicht abbestellt hat */
/* Das Einblenden wird erst aktiv, wenn das Skript laeuft und der Besucher
   Animationen nicht abbestellt hat. Ohne JavaScript ist der Inhalt sichtbar.
   Andernfalls waere eine Seite mit blockiertem Skript leer. */
html[data-animiert="ja"] .auf{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--takt),transform .7s var(--takt);
}
html[data-animiert="ja"] .auf[data-sichtbar="ja"]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  html[data-animiert="ja"] .auf{opacity:1;transform:none}
}

@media print{
  .kopf,.fuss,.sprunglink,.btn,.form{display:none}
  body{background:#fff;color:#000}
}

/* Kontaktformular: Honigtopf unsichtbar */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}