/* =========================================================
   Susanne Breit
   1. Schriften
   2. Grundwerte (:root)
   3. Grundgerüst
   4. Bausteine (Knöpfe, Kicker, Links, Listen)
   5. Kopf
   6. Abschnitt: Hero
   7. Abschnitt: Belege
   8. Abschnitt: Themen
   9. Abschnitt: Arbeitsweise
  10. Abschnitt: Vorstellung
  11. Abschnitt: Wege
  12. Abschnitt: Preise
  13. Abschnitt: Fragen
  14. Abschnitt: Kontakt
  15. Fußbereich
  16. Umbrüche
   ========================================================= */


/* ========== 1. Schriften ========== */
/* Lora: Überschriften. Lato: Fließtext und Auszeichnungen. */

@font-face{
  font-family:"Lora";
  src:url("../fonts/lora-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:url("../fonts/lora-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:url("../fonts/lora-400-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Lato";
  src:url("../fonts/lato-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lato";
  src:url("../fonts/lato-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}


/* ========== 2. Grundwerte ========== */

:root{
  /* Farben */
  --orange:        #D1824F;
  --orange-dunkel: #A25C22;
  --papier:        #FFFFFF;
  --papier-getoent:#FAF7F3;
  --tinte:         #1B1A17;
  --neben:         #6D6960;
  --linie:         #E7E0D6;
  --auf-farbe:     #FFFFFF;

  /* Schrift */
  --schrift-titel: "Lora", Georgia, "Times New Roman", serif;
  --schrift-text:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gr-text:    clamp(1.0625rem, 0.99rem + 0.34vw, 1.1875rem);
  --gr-klein:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --gr-lead:    clamp(1.125rem, 1.03rem + 0.45vw, 1.3125rem);
  --gr-h1:      clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --gr-h2:      clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
  --gr-h3:      clamp(1.0625rem, 1.0rem + 0.3vw, 1.1875rem);

  /* Abstände */
  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2.25rem;
  --raum-5: 3.5rem;
  --raum-6: clamp(3.5rem, 2rem + 6vw, 7rem);

  --sec-y:  clamp(4rem, 2rem + 7vw, 7.5rem);
  --rand:   clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* Maße */
  --breite:        1200px;
  --breite-text:   62ch;

  /* Rundungen */
  --rund-s:    14px;
  --rund-m:    28px;
  --rund-l:    56px;
  --rund-voll: 999px;

  --zeit: 220ms;
}

@media (prefers-color-scheme: dark){
  :root{
    --orange:        #E2A175;
    --orange-dunkel: #E2A175;
    --papier:        #171613;
    --papier-getoent:#201E1A;
    --tinte:         #F3EEE7;
    --neben:         #B3ABA0;
    --linie:         #33302A;
    --auf-farbe:     #171613;
  }
}


/* ========== 3. Grundgerüst ========== */

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--schrift-text);
  font-weight:400;
  font-size:var(--gr-text);
  line-height:1.75;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--schrift-titel);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-0.005em;
  margin:0 0 var(--raum-3);
  text-wrap:wrap;
}
h1{ font-size:var(--gr-h1); }
h2{ font-size:var(--gr-h2); }
h3{ font-size:var(--gr-h3); line-height:1.35; }

h1 span, h2 span{ display:block; }

p{ margin:0 0 var(--raum-3); }
p:last-child{ margin-bottom:0; }

ul{ margin:0; padding:0; list-style:none; }

a{ color:var(--orange-dunkel); }

:focus-visible{
  outline:3px solid var(--orange-dunkel);
  outline-offset:3px;
  border-radius:4px;
}

.sprungmarke{
  position:absolute; left:var(--raum-2); top:-4rem; z-index:100;
  background:var(--tinte); color:var(--papier);
  padding:0.85rem 1.25rem; border-radius:var(--rund-voll);
  text-decoration:none; font-size:var(--gr-klein);
  transition:top var(--zeit) ease;
}
.sprungmarke:focus{ top:var(--raum-2); }

.sec--paper{ background:var(--papier); }
.sec--shade{ background:var(--papier-getoent); }


/* ========== 4. Bausteine ========== */

.kicker{
  display:flex; align-items:center; gap:0.7rem;
  font-family:var(--schrift-text);
  font-size:var(--gr-klein);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange-dunkel);
  margin:0 0 var(--raum-2);
  line-height:1.4;
}
.kicker::before{
  content:""; flex:0 0 auto;
  width:1.5rem; height:1.5rem;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  transform:rotate(-30deg);
}

.knopf{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; min-width:48px;
  padding:0.85rem 1.75rem;
  border-radius:var(--rund-voll);
  font-family:var(--schrift-text);
  font-size:var(--gr-klein);
  font-weight:700;
  letter-spacing:0.04em;
  text-decoration:none;
  text-align:center;
  transition:background-color var(--zeit) ease, color var(--zeit) ease, border-color var(--zeit) ease;
}
.knopf--voll{
  background:var(--orange-dunkel);
  color:var(--auf-farbe);
  border:1px solid var(--orange-dunkel);
}
.knopf--voll:hover{ background:var(--tinte); border-color:var(--tinte); }
.knopf--linie{
  background:transparent;
  color:var(--tinte);
  border:1px solid var(--tinte);
}
.knopf--linie:hover{ background:var(--tinte); color:var(--papier); }

.textlink{
  color:var(--orange-dunkel);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.textlink:hover{ color:var(--tinte); }

.liste{
  display:grid;
  gap:0;
  max-width:var(--breite-text);
  border-top:1px solid var(--linie);
}
.liste__punkt{
  padding:0.85rem 0;
  border-bottom:1px solid var(--linie);
  font-size:var(--gr-klein);
  color:var(--neben);
  line-height:1.6;
}
.liste__wert{
  display:block;
  font-family:var(--schrift-titel);
  font-size:1.0625rem;
  color:var(--tinte);
}


/* ========== 5. Kopf ========== */

.kopf{
  position:sticky; top:0; z-index:60;
  background:var(--papier);
  border-bottom:1px solid var(--linie);
}

.kopf__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding:var(--raum-2) var(--rand);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  row-gap:var(--raum-2);
  transition:row-gap 420ms cubic-bezier(.4,0,.2,1), padding-block 420ms cubic-bezier(.4,0,.2,1);
}

.kopf__logo{
  grid-column:2; grid-row:1;
  justify-self:center;
  min-width:0;
  display:block;
  line-height:0;
  overflow:hidden;
  max-height:70px;
  opacity:1;
  transform:translateY(0);
  transition:max-height 420ms cubic-bezier(.4,0,.2,1),
             opacity 240ms ease,
             transform 420ms cubic-bezier(.4,0,.2,1);
}
.kopf__logo-bild{
  width:auto;
  max-width:100%;
  height:clamp(28px, 4.6vw, 46px);
  transition:height 420ms cubic-bezier(.4,0,.2,1);
}
.kopf.ist-kompakt .kopf__logo-bild{ height:clamp(26px, 4vw, 34px); }
.kopf.ist-kompakt .kopf__innen{ padding-block:0.6rem; }

.kopf__schalter{
  grid-column:1; grid-row:1;
  justify-self:start;
  display:inline-flex; align-items:center; gap:0.6rem;
  min-height:48px; min-width:48px;
  padding:0 0.5rem;
  background:none; border:0; cursor:pointer;
  color:var(--tinte);
}
.kopf__schalter-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.kopf__schalter-strich{
  position:relative; display:block;
  width:22px; height:2px; background:currentColor; border-radius:2px;
}
.kopf__schalter-strich::before,
.kopf__schalter-strich::after{
  content:""; position:absolute; left:0;
  width:22px; height:2px; background:currentColor; border-radius:2px;
}
.kopf__schalter-strich::before{ top:-7px; }
.kopf__schalter-strich::after{ top:7px; }

.kopf__nav{
  grid-column:1 / -1; grid-row:2;
  display:none;
}
.kopf__nav.ist-offen{ display:block; }

.nav{
  display:grid;
  gap:0.25rem;
  padding-top:var(--raum-2);
  border-top:1px solid var(--linie);
}
.nav__punkt{ position:relative; }

.nav__link{
  display:inline-flex; align-items:center; gap:0.45rem;
  min-height:48px;
  padding:0 0.25rem;
  background:none; border:0;
  color:var(--tinte);
  text-decoration:none;
  font-family:var(--schrift-text);
  font-size:var(--gr-klein);
  letter-spacing:0.02em;
  cursor:pointer;
}
.nav__link:hover{ color:var(--orange-dunkel); }

.nav__pfeil{
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--zeit) ease;
}
.nav__link--klapp[aria-expanded="true"] .nav__pfeil{
  transform:translateY(1px) rotate(225deg);
}

.nav__unter{
  display:none;
  padding:0 0 var(--raum-2) var(--raum-2);
  border-left:2px solid var(--linie);
  margin-left:0.25rem;
}
.nav__unter.ist-offen{ display:block; }
.nav__unter-link{
  display:flex; align-items:center;
  min-height:44px;
  color:var(--neben);
  text-decoration:none;
  font-size:var(--gr-klein);
}
.nav__unter-link:hover{ color:var(--orange-dunkel); }


/* ========== 6. Abschnitt: Hero ========== */

.hero{
  position:relative;
  overflow:hidden;
}

.hero__bild img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:64% 26%;
}

.hero__innen{
  position:relative;
  max-width:var(--breite);
  margin-inline:auto;
  padding:var(--raum-5) var(--rand) var(--raum-6);
}

.hero__innen::before{
  content:"";
  position:absolute;
  right:-18%; bottom:-30%;
  width:min(60vw, 420px); aspect-ratio:1;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  opacity:0.14;
  transform:rotate(18deg);
  pointer-events:none;
}

.hero__inhalt{ position:relative; max-width:34rem; }

.hero__titel{ margin-bottom:var(--raum-3); }
.hero__titel span:last-child{ color:var(--orange-dunkel); }

.hero__text{
  font-size:var(--gr-lead);
  color:var(--neben);
  max-width:40ch;
}

.hero__knoepfe{
  display:flex; flex-wrap:wrap; gap:var(--raum-2);
  margin-bottom:0;
}


/* ========== 7. Abschnitt: Belege ========== */
/* Freistehendes Band zwischen Hero und erstem Abschnitt, ohne Kasten. */

.belege{
  padding-block:clamp(2.5rem, 5vw, 4rem);
}

.belege__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.belege__innen::after{
  content:"";
  display:block;
  height:1px;
  margin-top:clamp(2rem, 4vw, 3rem);
  background:linear-gradient(90deg,
    rgba(209,130,79,0) 0%,
    var(--linie) 18%,
    var(--linie) 82%,
    rgba(209,130,79,0) 100%);
}

.belege__reihe{
  display:grid;
  gap:0;
}

.belege__punkt{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:0.85rem;
  row-gap:0.2rem;
  padding:0.9rem 0;
  border-bottom:1px solid var(--linie);
}
.belege__punkt:last-child{ border-bottom:0; padding-bottom:0; }
.belege__punkt:first-child{ padding-top:0; }

.belege__marke{
  grid-row:1;
  width:1.5rem; height:1.5rem;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  transform:rotate(-30deg);
  align-self:center;
}
.belege__wert{
  grid-row:1;
  font-family:var(--schrift-titel);
  font-size:1.0625rem;
  line-height:1.3;
  color:var(--tinte);
  align-self:center;
}
.belege__text{
  grid-column:2;
  font-size:var(--gr-klein);
  line-height:1.5;
  color:var(--neben);
}


/* ========== 8. Abschnitt: Themen ========== */

.themen{
  position:relative;
  padding-block:clamp(2.75rem, 4vw, 4rem) var(--sec-y);
  overflow:hidden;
}
.themen::before{
  content:"";
  position:absolute;
  right:-16%; top:18%;
  width:min(66vw, 480px); aspect-ratio:1;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  opacity:0.09;
  transform:rotate(60deg);
  pointer-events:none;
}

.themen__innen{
  position:relative;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}

.themen__kopf{ max-width:56ch; margin-bottom:var(--raum-5); }
.themen__titel span:last-child{ color:var(--orange-dunkel); }
.themen__einleitung{ color:var(--neben); font-size:var(--gr-lead); }

.themen__raster{
  display:grid;
  gap:clamp(1rem, 2vw, 1.5rem);
}

.karte{
  position:relative;
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:var(--rund-m);
  padding:clamp(1.75rem, 3vw, 2.5rem);
  transition:transform 280ms cubic-bezier(.4,0,.2,1),
             box-shadow 280ms ease,
             border-color 280ms ease;
}
.karte:hover{
  transform:translateY(-4px);
  border-color:var(--orange);
  box-shadow:0 16px 36px rgba(27,26,23,0.08);
}

.karte__marke{
  display:block;
  width:1.9rem; height:1.9rem;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  transform:rotate(-30deg);
  margin-bottom:var(--raum-2);
}

.karte__titel{
  font-size:1.1875rem;
  margin-bottom:0.65rem;
}

.karte__text{
  color:var(--neben);
  font-size:var(--gr-klein);
  line-height:1.7;
  margin-bottom:var(--raum-3);
}

.karte__link{
  display:inline-flex; align-items:center; gap:0.5rem;
  min-height:44px;
  color:var(--orange-dunkel);
  text-decoration:none;
  font-size:var(--gr-klein);
  font-weight:700;
  letter-spacing:0.03em;
}
.karte__link::after{
  content:"";
  width:0.55rem; height:0.55rem;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform 240ms ease;
}
.karte:hover .karte__link::after{ transform:rotate(45deg) translate(2px,-2px); }


/* ========== 9. Abschnitt: Arbeitsweise ========== */

.arbeitsweise{
  position:relative;
  padding-block:var(--sec-y);
  overflow:hidden;
}
.arbeitsweise::before{
  content:"";
  position:absolute;
  left:-14%; bottom:-18%;
  width:min(64vw, 470px); aspect-ratio:1;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  opacity:0.08;
  transform:rotate(-70deg);
  pointer-events:none;
}

.arbeitsweise__innen{
  position:relative;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
  display:grid;
  gap:var(--raum-5);
}

.arbeitsweise__text{ max-width:var(--breite-text); }
.arbeitsweise__text p{ color:var(--neben); }
.arbeitsweise__text p:first-of-type{ color:var(--tinte); font-size:var(--gr-lead); }
.arbeitsweise__titel span:last-child{ color:var(--orange-dunkel); }

.arbeitsweise__bild{
  position:relative;
  margin:0;
}
.arbeitsweise__bild img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:100% 50%;
  border-radius:var(--rund-l);
}
.arbeitsweise__bild::after{
  content:"";
  position:absolute;
  left:-8%; bottom:-10%;
  width:30%; aspect-ratio:1;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  transform:rotate(40deg);
  pointer-events:none;
}

.saeulen{
  display:grid;
  gap:0;
  border-top:1px solid var(--linie);
}
.saeulen__punkt{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:0.85rem;
  row-gap:0.25rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--linie);
}
.saeulen__marke{
  grid-row:1;
  width:1.5rem; height:1.5rem;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  transform:rotate(-30deg);
  align-self:center;
}
.saeulen__titel{
  grid-row:1;
  margin:0;
  font-size:1.0625rem;
  align-self:center;
}
.saeulen__text{
  grid-column:2;
  margin:0;
  font-size:var(--gr-klein);
  line-height:1.65;
  color:var(--neben);
}


/* ========== 10. Abschnitt: Vorstellung ========== */

.vorstellung{
  position:relative;
  padding-block:var(--sec-y);
  overflow:hidden;
}
.vorstellung::before{
  content:"";
  position:absolute;
  right:-12%; bottom:-16%;
  width:min(62vw, 460px); aspect-ratio:1;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  opacity:0.09;
  transform:rotate(145deg);
  pointer-events:none;
}

.vorstellung__innen{
  position:relative;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
  display:grid;
  gap:var(--raum-5);
}

.vorstellung__bild{
  margin:0;
  width:min(100%, 22rem);
  justify-self:center;
}
.vorstellung__rahmen{ position:relative; }
.vorstellung__rahmen img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:var(--rund-voll);
}
.vorstellung__rahmen::after{
  content:"";
  position:absolute; inset:-5%;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  transform:rotate(-115deg);
  pointer-events:none;
}

.vorstellung__bildtext{
  margin-top:var(--raum-3);
  text-align:center;
  font-size:var(--gr-klein);
  color:var(--neben);
  line-height:1.5;
}
.vorstellung__bildname{
  display:block;
  font-family:var(--schrift-titel);
  font-size:1.125rem;
  color:var(--tinte);
}

.vorstellung__titel span:last-child{ color:var(--orange-dunkel); }

.vorstellung__text p{ max-width:var(--breite-text); color:var(--neben); }
.vorstellung__text p:first-of-type{ color:var(--tinte); }

.vorstellung__zwischen{
  margin:var(--raum-5) 0 var(--raum-2);
  font-family:var(--schrift-text);
  font-weight:700;
  font-size:var(--gr-klein);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--tinte);
}

.vorstellung__weiter{ margin-top:var(--raum-4); }


/* ========== 11. Abschnitt: Wege ========== */

.wege{
  position:relative;
  padding-block:var(--sec-y);
  overflow:hidden;
}
.wege__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.wege__kopf{ max-width:56ch; margin-bottom:var(--raum-5); }
.wege__titel span:last-child{ color:var(--orange-dunkel); }
.wege__einleitung{ color:var(--neben); font-size:var(--gr-lead); }
.wege__raster{
  display:grid;
  gap:clamp(1rem, 2vw, 1.5rem);
}
.wege__hinweis{
  margin-top:var(--raum-4);
  font-size:var(--gr-klein);
  color:var(--neben);
}


/* ========== 12. Abschnitt: Preise ========== */

.preise{
  position:relative;
  padding-block:var(--sec-y);
  overflow:hidden;
}
.preise::before{
  content:"";
  position:absolute;
  left:-14%; top:16%;
  width:min(60vw, 440px); aspect-ratio:1;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  opacity:0.08;
  transform:rotate(200deg);
  pointer-events:none;
}
.preise__innen{
  position:relative;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.preise__kopf{ max-width:56ch; margin-bottom:var(--raum-5); }
.preise__titel span:last-child{ color:var(--orange-dunkel); }
.preise__einleitung{ color:var(--neben); font-size:var(--gr-lead); }

.preise__raster{
  display:grid;
  gap:clamp(1rem, 2vw, 1.5rem);
  margin-bottom:var(--raum-5);
}
.preis{
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:var(--rund-m);
  padding:clamp(1.75rem, 3vw, 2.25rem);
}
.preis__wert{
  display:block;
  font-family:var(--schrift-titel);
  font-size:1.75rem;
  line-height:1.2;
  color:var(--orange-dunkel);
}
.preis__einheit{
  display:block;
  margin-top:0.35rem;
  font-size:var(--gr-klein);
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--tinte);
}
.preis__text{
  margin:var(--raum-2) 0 0;
  font-size:var(--gr-klein);
  line-height:1.7;
  color:var(--neben);
}

.preise__hinweise{
  display:grid;
  gap:var(--raum-3);
  max-width:var(--breite-text);
}
.preise__hinweise p{
  margin:0;
  font-size:var(--gr-klein);
  line-height:1.75;
  color:var(--neben);
}


/* ========== 13. Abschnitt: Fragen ========== */

.fragen{
  position:relative;
  padding-block:var(--sec-y);
  overflow:hidden;
}
.fragen__innen{
  max-width:860px;
  margin-inline:auto;
  padding-inline:var(--rand);
}
.fragen__kopf{ margin-bottom:var(--raum-4); }
.fragen__titel span:last-child{ color:var(--orange-dunkel); }

.fragen__liste{
  display:grid;
  border-top:1px solid var(--linie);
}
.frage{ border-bottom:1px solid var(--linie); }
.frage__kopf{ margin:0; font-size:inherit; font-family:inherit; font-weight:400; }

.frage__knopf{
  display:flex; align-items:center; justify-content:space-between; gap:var(--raum-3);
  width:100%;
  min-height:56px;
  padding:1.1rem 0;
  background:none; border:0;
  text-align:left;
  cursor:pointer;
  font-family:var(--schrift-titel);
  font-size:1.0625rem;
  line-height:1.4;
  color:var(--tinte);
}
.frage__knopf:hover{ color:var(--orange-dunkel); }

.frage__zeichen{
  position:relative;
  flex:0 0 auto;
  width:22px; height:22px;
  border:1px solid var(--linie);
  border-radius:var(--rund-voll);
  transition:transform var(--zeit) ease, border-color var(--zeit) ease;
}
.frage__zeichen::before,
.frage__zeichen::after{
  content:"";
  position:absolute; top:50%; left:50%;
  background:var(--orange-dunkel);
  transform:translate(-50%,-50%);
}
.frage__zeichen::before{ width:10px; height:1.5px; }
.frage__zeichen::after{ width:1.5px; height:10px; transition:opacity var(--zeit) ease; }
.frage__knopf[aria-expanded="true"] .frage__zeichen{ border-color:var(--orange); transform:rotate(180deg); }
.frage__knopf[aria-expanded="true"] .frage__zeichen::after{ opacity:0; }

.frage__antwort{ padding:0 0 1.35rem; }
.frage__antwort p{
  margin:0;
  max-width:68ch;
  font-size:var(--gr-klein);
  line-height:1.8;
  color:var(--neben);
}


/* ========== 14. Abschnitt: Kontakt ========== */

.kontakt{
  position:relative;
  padding-block:var(--sec-y);
  overflow:hidden;
}
.kontakt::before{
  content:"";
  position:absolute;
  right:-14%; top:10%;
  width:min(62vw, 460px); aspect-ratio:1;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  opacity:0.08;
  transform:rotate(-40deg);
  pointer-events:none;
}
.kontakt__innen{
  position:relative;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.kontakt__kopf{ max-width:56ch; margin-bottom:var(--raum-5); }
.kontakt__titel span:last-child{ color:var(--orange-dunkel); }
.kontakt__einleitung{ color:var(--neben); font-size:var(--gr-lead); }

.kontakt__spalten{
  display:grid;
  gap:var(--raum-5);
}

.formular{
  display:grid;
  gap:var(--raum-3);
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:var(--rund-m);
  padding:clamp(1.5rem, 3vw, 2.5rem);
  align-content:start;
}
.formular__feld{ display:grid; gap:0.4rem; }
.formular__label{
  font-size:var(--gr-klein);
  color:var(--neben);
}
.formular__eingabe{
  width:100%;
  padding:0.85rem 1rem;
  min-height:48px;
  border:1px solid var(--linie);
  border-radius:var(--rund-s);
  background:var(--papier-getoent);
  font-family:inherit;
  font-size:var(--gr-klein);
  color:var(--tinte);
}
.formular__eingabe:focus-visible{ background:var(--papier); }
.formular__eingabe--gross{ min-height:140px; resize:vertical; }
.formular .knopf{ justify-self:start; cursor:pointer; }

.kontaktdaten{ align-content:start; }
.kontaktdaten__zeile{
  display:grid;
  gap:0.15rem;
  margin:0;
  padding:0.9rem 0;
  border-bottom:1px solid var(--linie);
}
.kontaktdaten__zeile:first-child{ padding-top:0; }
.kontaktdaten__label{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--neben);
}
.kontaktdaten__wert{
  font-family:var(--schrift-titel);
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--tinte);
  text-decoration:none;
}
a.kontaktdaten__wert:hover{ color:var(--orange-dunkel); }
.kontaktdaten__wert--klein{
  font-family:var(--schrift-text);
  font-size:var(--gr-klein);
  color:var(--neben);
}
.kontaktdaten__karte{
  margin-top:var(--raum-3);
  aspect-ratio:16 / 10;
  border-radius:var(--rund-m);
  background:var(--linie);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--gr-klein);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--neben);
}


/* ========== 15. Fußbereich ========== */

.fuss{
  background:#1B1A17;
  color:#CFC9C0;
  padding-block:var(--raum-6) var(--raum-4);
}
.fuss__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
  display:grid;
  gap:var(--raum-5);
}
.fuss__logo{
  height:44px; width:auto;
  margin-bottom:var(--raum-3);
}
.fuss__text{
  max-width:42ch;
  font-size:var(--gr-klein);
  line-height:1.75;
  color:#9C958A;
}
.fuss__titel{
  font-family:var(--schrift-text);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#9C958A;
  margin:0 0 var(--raum-2);
}
.fuss__liste{ display:grid; gap:0.55rem; }
.fuss__link{
  color:#CFC9C0;
  text-decoration:none;
  font-size:var(--gr-klein);
}
.fuss__link:hover{ color:#FFFFFF; }

.fuss__unten{
  max-width:var(--breite);
  margin-inline:auto;
  padding:var(--raum-3) var(--rand) 0;
  margin-top:var(--raum-5);
  border-top:1px solid #33302A;
  display:flex; flex-wrap:wrap; gap:var(--raum-2) var(--raum-4);
  justify-content:space-between;
  font-size:0.8125rem;
  color:#9C958A;
}


/* ========== 16. Umbruch 880 ========== */

@media (min-width:880px){

  .kopf__schalter{ display:none; }

  .kopf.ist-kompakt .kopf__logo{
    max-height:0;
    opacity:0;
    transform:translateY(-10px);
  }
  .kopf.ist-kompakt .kopf__innen{ row-gap:0; }

  .kopf__nav{ display:block; }

  .nav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 clamp(0.75rem, 2vw, 1.75rem);
    border-top:0;
    padding-top:0;
  }
  .nav__link{ min-height:44px; }

  .nav__unter{
    position:absolute; left:50%; top:100%;
    transform:translateX(-50%);
    min-width:19rem;
    background:var(--papier);
    border:1px solid var(--linie);
    border-radius:var(--rund-s);
    box-shadow:0 14px 34px rgba(27,26,23,0.10);
    padding:0.5rem 0.75rem;
    margin:0;
    z-index:10;
  }
  .nav__unter-link{ padding-inline:0.5rem; }

  /* Hero: Bild über die volle Breite, Text links darüber */
  .hero{
    display:grid;
    min-height:min(74vh, 680px);
    max-height:100vh;
    background:var(--papier-getoent);
  }
  .hero__bild,
  .hero__innen{ grid-area:1 / 1; }

  .hero__bild{ position:relative; }
  .hero__bild img{
    position:absolute; inset:0;
    width:100%; height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:72% 30%;
  }
  .hero__bild::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(100deg,
      rgba(250,247,243,0.97) 0%,
      rgba(250,247,243,0.95) 30%,
      rgba(250,247,243,0.72) 46%,
      rgba(250,247,243,0.10) 62%,
      rgba(250,247,243,0) 74%);
    pointer-events:none;
  }

  .hero__innen{
    display:flex;
    align-items:center;
    width:100%;
    padding-block:var(--raum-6);
  }
  .hero__innen::before{
    right:auto; bottom:auto;
    left:-10%; top:-18%;
    width:min(42vw, 520px);
    opacity:0.13;
  }
  .hero__inhalt{ max-width:40rem; }

  /* Belege: fünf Spalten mit feinen Trennlinien */
  .belege{ padding-block:clamp(3rem, 5vw, 4.5rem); }
  .belege__reihe{ grid-template-columns:repeat(5, 1fr); }
  .belege__punkt{
    padding:0 clamp(0.75rem, 1.4vw, 1.25rem);
    column-gap:0.6rem;
    border-bottom:0;
    border-left:1px solid var(--linie);
    align-content:start;
  }
  .belege__marke{ width:1.25rem; height:1.25rem; }
  .belege__punkt:first-child{ border-left:0; padding-left:0; }
  .belege__punkt:last-child{ padding-right:0; }

  .themen__raster{ grid-template-columns:repeat(2, 1fr); }

  .arbeitsweise__innen{
    grid-template-columns:1fr 1fr;
    column-gap:clamp(3rem, 6vw, 6rem);
    row-gap:var(--raum-6);
    align-items:center;
  }
  .arbeitsweise__text{ grid-column:1; grid-row:1; }
  .arbeitsweise__bild{ grid-column:2; grid-row:1; align-self:center; }
  .arbeitsweise__bild img{ aspect-ratio:1; object-position:100% 50%; }
  .saeulen{
    grid-column:1 / -1; grid-row:2;
    grid-template-columns:repeat(2, 1fr);
    column-gap:clamp(2rem, 4vw, 4rem);
  }
  .saeulen__punkt{ padding:1.35rem 0; }

  .wege__raster{ grid-template-columns:repeat(3, 1fr); }
  .preise__raster{ grid-template-columns:repeat(3, 1fr); }
  .kontakt__spalten{
    grid-template-columns:1.05fr 0.95fr;
    gap:clamp(2.5rem, 5vw, 4.5rem);
  }
  .fuss__innen{ grid-template-columns:2fr 1fr 1fr; gap:var(--raum-5); }

  .vorstellung__innen{
    grid-template-columns:minmax(16rem, 24rem) 1fr;
    gap:var(--raum-6);
    align-items:center;
  }
  .vorstellung__bild{ justify-self:start; width:100%; }
}


/* ========== Umbruch 1100 ========== */

@media (min-width:1100px){
  .vorstellung__innen{ gap:clamp(4rem, 6vw, 6.5rem); }
}


/* ========== Dunkelmodus: Hero-Verlauf ========== */

@media (prefers-color-scheme: dark) and (min-width:880px){
  .hero__bild::after{
    background:linear-gradient(100deg,
      rgba(23,22,19,0.96) 0%,
      rgba(23,22,19,0.94) 30%,
      rgba(23,22,19,0.74) 46%,
      rgba(23,22,19,0.12) 62%,
      rgba(23,22,19,0) 74%);
  }
}


/* ========== Bewegung reduzieren ========== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}


/* =========================================================
   17. Ergänzung für die Kirby-Umsetzung
   Alles darüber bleibt unverändert. Hier stehen nur die
   Bausteine, die im Entwurf noch nicht vorkamen, sowie die
   Schalter, die aus zwei Abschnitten einen Baustein machen.
   ========================================================= */

/* --- Kopf ohne Logodatei --- */
.kopf__logo-text{
  font-family:var(--schrift-titel);
  font-size:1.25rem;
  color:var(--tinte);
  text-decoration:none;
  line-height:1.2;
}

/* --- Seitenkopf in flach, für Unterseiten --- */
.hero--flach .hero__innen{ padding-block:var(--raum-5); }

/* --- Karten: drei je Reihe --- */
.themen__raster--drei{ gap:clamp(1rem, 2vw, 1.5rem); }

/* --- Text mit Bild: Bild links --- */
.arbeitsweise__innen--bild-links .arbeitsweise__bild::after{
  left:auto; right:-8%;
  transform:rotate(-40deg);
}

/* --- Fließtext --- */
.fliesstext{
  position:relative;
  padding-block:var(--sec-y);
}
.fliesstext__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.fliesstext__titel span:last-child{ color:var(--orange-dunkel); }
.fliesstext__text{ max-width:var(--breite-text); }
.fliesstext__text p{ color:var(--neben); }
.fliesstext__text p:first-of-type{ color:var(--tinte); font-size:var(--gr-lead); }

/* --- Bildergalerie --- */
.galerie{
  position:relative;
  padding-block:var(--sec-y);
}
.galerie__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.galerie__kopf{ max-width:56ch; margin-bottom:var(--raum-5); }
.galerie__titel span:last-child{ color:var(--orange-dunkel); }
.galerie__einleitung{ color:var(--neben); font-size:var(--gr-lead); }

.galerie__raster{
  display:grid;
  gap:clamp(0.75rem, 1.6vw, 1.25rem);
}
.galerie__punkt{ margin:0; }

.galerie__knopf{
  position:relative;
  display:block;
  width:100%;
  min-height:44px;
  padding:0;
  border:0;
  background:none;
  border-radius:var(--rund-m);
  overflow:hidden;
  cursor:pointer;
}
.galerie__knopf img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  transition:transform 320ms cubic-bezier(.4,0,.2,1);
}
.galerie__knopf:hover img{ transform:scale(1.03); }

.galerie__lupe{
  position:absolute; right:0.75rem; bottom:0.75rem;
  width:44px; height:44px;
  border-radius:var(--rund-voll);
  background:var(--papier);
  border:1px solid var(--linie);
  opacity:0.92;
}
.galerie__lupe::before,
.galerie__lupe::after{
  content:"";
  position:absolute; top:50%; left:50%;
  background:var(--orange-dunkel);
  transform:translate(-50%,-50%);
}
.galerie__lupe::before{ width:14px; height:1.5px; }
.galerie__lupe::after{ width:1.5px; height:14px; }

.galerie__versteckt{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* Lightbox */
.lupe{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 3rem);
  background:rgba(27,26,23,0.94);
}
.lupe[hidden]{ display:none; }
.lupe__figur{
  margin:0;
  max-width:min(100%, 1100px);
  display:grid;
  justify-items:center;
  gap:var(--raum-2);
}
.lupe__figur img{
  max-width:100%;
  max-height:74vh;
  width:auto;
  border-radius:var(--rund-m);
}
.lupe__text{
  color:#CFC9C0;
  font-size:var(--gr-klein);
  line-height:1.6;
  text-align:center;
  max-width:60ch;
}
.lupe__zaehler{
  position:absolute; top:clamp(0.75rem, 2vw, 1.5rem); left:50%;
  transform:translateX(-50%);
  margin:0;
  color:#9C958A;
  font-size:var(--gr-klein);
  letter-spacing:0.08em;
}
.lupe__knopf{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:var(--rund-voll);
  border:1px solid rgba(255,255,255,0.28);
  background:rgba(27,26,23,0.6);
  color:#FFFFFF;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}
.lupe__knopf:hover{ background:rgba(255,255,255,0.14); }
.lupe__knopf--zu{ top:clamp(0.75rem, 2vw, 1.5rem); right:clamp(0.75rem, 2vw, 1.5rem); }
.lupe__knopf--zurueck{ left:clamp(0.5rem, 2vw, 1.5rem); top:50%; transform:translateY(-50%); }
.lupe__knopf--vor{ right:clamp(0.5rem, 2vw, 1.5rem); top:50%; transform:translateY(-50%); }

/* --- Personenkarten --- */
.personen{
  position:relative;
  padding-block:var(--sec-y);
}
.personen__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.personen__kopf{ max-width:56ch; margin-bottom:var(--raum-5); }
.personen__titel span:last-child{ color:var(--orange-dunkel); }
.personen__einleitung{ color:var(--neben); font-size:var(--gr-lead); }
.personen__raster{
  display:grid;
  gap:clamp(1rem, 2vw, 1.5rem);
}
.person__bild{
  width:100%;
  max-width:9rem;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:var(--rund-voll);
  margin-bottom:var(--raum-3);
}
.person__rolle{
  margin:0 0 var(--raum-2);
  font-size:var(--gr-klein);
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--orange-dunkel);
}

/* --- Öffnungszeiten --- */
.zeiten{
  position:relative;
  padding-block:var(--sec-y);
}
.zeiten__innen{
  max-width:860px;
  margin-inline:auto;
  padding-inline:var(--rand);
}
.zeiten__kopf{ margin-bottom:var(--raum-4); }
.zeiten__titel span:last-child{ color:var(--orange-dunkel); }
.zeiten__tabelle{
  width:100%;
  max-width:var(--breite-text);
  border-collapse:collapse;
  text-align:left;
}
.zeiten__tabelle th,
.zeiten__tabelle td{
  padding:0.9rem 0;
  border-bottom:1px solid var(--linie);
  font-weight:400;
  vertical-align:top;
}
.zeiten__tabelle th{
  font-family:var(--schrift-titel);
  font-size:1.0625rem;
  color:var(--tinte);
  width:45%;
}
.zeiten__tabelle td{
  font-size:var(--gr-klein);
  color:var(--neben);
}
.zeiten__tabelle tr:first-child th,
.zeiten__tabelle tr:first-child td{ border-top:1px solid var(--linie); }
.zeiten__hinweis{
  margin-top:var(--raum-3);
  font-size:var(--gr-klein);
  color:var(--neben);
}

/* --- Anfahrt --- */
.anfahrt{
  position:relative;
  padding-block:var(--sec-y);
}
.anfahrt__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
  display:grid;
  gap:var(--raum-5);
}
.anfahrt__titel span:last-child{ color:var(--orange-dunkel); }
.anfahrt__adresse{
  font-family:var(--schrift-titel);
  font-size:1.125rem;
  line-height:1.6;
  color:var(--tinte);
}
.anfahrt__hinweis{ color:var(--neben); max-width:var(--breite-text); }
.anfahrt__weiter{ margin-top:var(--raum-3); }

.anfahrt__karte{
  position:relative;
  aspect-ratio:16 / 10;
  border:1px solid var(--linie);
  border-radius:var(--rund-m);
  background:var(--papier-getoent);
  overflow:hidden;
}
.anfahrt__zustimmung{
  position:absolute; inset:0;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:var(--raum-2);
  padding:clamp(1.25rem, 3vw, 2.25rem);
}
.anfahrt__frage{
  margin:0;
  font-family:var(--schrift-titel);
  font-size:1.125rem;
  color:var(--tinte);
}
.anfahrt__erklaerung{
  margin:0;
  font-size:var(--gr-klein);
  line-height:1.7;
  color:var(--neben);
  max-width:46ch;
}
.anfahrt__karte iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* --- Hinweiskasten --- */
.hinweis{
  position:relative;
  padding-block:clamp(2rem, 4vw, 3.5rem);
}
.hinweis__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.hinweis__kasten{
  position:relative;
  max-width:var(--breite-text);
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:var(--rund-m);
  padding:clamp(1.5rem, 3vw, 2.25rem);
}
.hinweis__kasten--wichtig{
  border-color:var(--orange);
  border-left-width:4px;
}
.hinweis__marke{
  display:block;
  width:1.9rem; height:1.9rem;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  transform:rotate(-30deg);
  margin-bottom:var(--raum-2);
}
.hinweis__titel{ margin-bottom:0.65rem; font-size:1.1875rem; }
.hinweis__text p{
  margin:0 0 var(--raum-2);
  font-size:var(--gr-klein);
  line-height:1.75;
  color:var(--neben);
}
.hinweis__text p:last-child{ margin-bottom:0; }

/* --- Formular: Meldungen und Zusätze --- */
.formular__pflicht{ color:var(--orange-dunkel); }
.formular__schutz{
  margin:0;
  font-size:var(--gr-klein);
  line-height:1.6;
  color:var(--neben);
}
.formular__schutz p{ margin:0; }
.formular__fehler{
  border:1px solid var(--orange);
  border-radius:var(--rund-s);
  background:var(--papier-getoent);
  padding:var(--raum-2) var(--raum-3);
}
.formular__fehler p{
  margin:0 0 0.4rem;
  font-size:var(--gr-klein);
  line-height:1.6;
  color:var(--tinte);
}
.formular__fehler p:last-child{ margin-bottom:0; }
.formular--fertig{ align-content:center; }
.formular__fertig{
  margin:0;
  font-family:var(--schrift-titel);
  font-size:1.125rem;
  line-height:1.6;
  color:var(--tinte);
}
.formular__hinweisfeld{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* --- Umbruch 880 für die Ergänzungen --- */
@media (min-width:880px){
  .themen__raster--drei{ grid-template-columns:repeat(3, 1fr); }

  .arbeitsweise__innen--bild-links .arbeitsweise__text{ grid-column:2; grid-row:1; }
  .arbeitsweise__innen--bild-links .arbeitsweise__bild{ grid-column:1; grid-row:1; }

  .galerie__raster--zwei{ grid-template-columns:repeat(2, 1fr); }
  .galerie__raster--drei{ grid-template-columns:repeat(3, 1fr); }
  .galerie__raster--vier{ grid-template-columns:repeat(4, 1fr); }

  .personen__raster{ grid-template-columns:repeat(2, 1fr); }
  .personen__raster--drei{ grid-template-columns:repeat(3, 1fr); }

  .anfahrt__innen{
    grid-template-columns:1fr 1fr;
    gap:clamp(2.5rem, 5vw, 4.5rem);
    align-items:center;
  }
}

@media (min-width:560px) and (max-width:879.98px){
  .galerie__raster{ grid-template-columns:repeat(2, 1fr); }
}


/* =========================================================
   18. Seitenkopf für Unterseiten und der wandernde Ring
   ========================================================= */

/* --- Der große Ring verbindet jetzt zwei Abschnitte ---
   Er stand zu dicht über den Karten. Jetzt reicht er nach oben
   in den Abschnitt darüber hinein, deshalb darf Themen nicht
   mehr beschneiden. Der Seitenrand bleibt ruhig, weil der
   Körper waagerecht ohnehin nicht scrollt. */

.themen{ overflow:visible; }
.themen::before{
  top:calc(-38% + 100px);
  right:-12%;
  width:min(84vw, 660px);
  opacity:0.10;
  transform:rotate(38deg);
}

/* --- Seitenkopf für Unterseiten ---
   Getönter Grund, damit sich der Kopf von der weißen Kopfzeile absetzt.
   Text links, normales Bild rechts auf einer weißen Papierlage.
   Genau ein Ring, klein, rechts oben in der Ecke, als Abschluss. */

.seitenkopf{
  position:relative;
  background:var(--papier-getoent);
  padding-block:var(--raum-5) clamp(3rem, 5vw, 4.5rem);
}
.seitenkopf::after{
  content:"";
  position:absolute;
  top:clamp(1.25rem, 3vw, 2.25rem);
  right:var(--rand);
  width:clamp(44px, 5vw, 60px); aspect-ratio:1;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  transform:rotate(-30deg);
  pointer-events:none;
}

.seitenkopf__innen{
  position:relative;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
  display:grid;
  gap:var(--raum-5);
  align-items:center;
}

.seitenkopf__inhalt{ max-width:var(--breite-text); }
.seitenkopf__titel{
  font-size:clamp(1.875rem, 1.3rem + 2.1vw, 2.875rem);
  margin-bottom:var(--raum-3);
}
.seitenkopf__titel span:last-child{ color:var(--orange-dunkel); }

.seitenkopf__text{
  font-size:var(--gr-lead);
  color:var(--neben);
  max-width:46ch;
  margin-bottom:0;
}

.seitenkopf__knoepfe{
  display:flex; flex-wrap:wrap; gap:var(--raum-2);
  margin:var(--raum-4) 0 0;
}

/* Das Bild liegt auf einer weißen Lage, die ringsum gleich weit
   hervorschaut, wie ein Passepartout. Das greift den Papierton der
   hellen Abschnitte auf und gibt Tiefe, ohne einen weiteren Ring.
   z-index sorgt dafuer, dass der große blasse Ring des naechsten
   Abschnitts hinter dem Bild durchlaeuft statt darueber. */

.seitenkopf__bild{
  position:relative;
  z-index:1;
  margin:0;
}
.seitenkopf__bild::before{
  content:"";
  position:absolute;
  inset:-0.9rem;
  background:var(--papier);
  border-radius:calc(var(--rund-l) + 0.9rem);
  pointer-events:none;
}
.seitenkopf__bild img{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:100% 50%;
  border-radius:var(--rund-l);
}

@media (min-width:880px){
  .seitenkopf{ padding-block:var(--raum-6) clamp(3.5rem, 6vw, 5rem); }
  .seitenkopf__innen{
    grid-template-columns:1.05fr 0.95fr;
    column-gap:clamp(2.5rem, 5vw, 4.5rem);
  }
  .seitenkopf__bild img{ aspect-ratio:5 / 4; }
}

@media (prefers-color-scheme: dark){
  .seitenkopf__bild::before{ background:var(--linie); }
}


/* =========================================================
   19. Karten mit mehr Halt
   Die Karten wirkten innen leer. Geändert sind nur Maße und
   Gliederung, Farben, Rundung und das Verhalten beim Überfahren
   bleiben wie im Entwurf.
   ========================================================= */

.karte{
  display:flex;
  flex-direction:column;
  padding:clamp(2rem, 3.2vw, 2.75rem);
}

/* Der Ring bekommt eine getönte Scheibe als Grund und wird damit
   zum Anker der Karte, statt frei über dem Text zu schweben. */
.karte__marke{
  width:3.5rem; height:3.5rem;
  border-radius:var(--rund-voll);
  background-color:var(--papier-getoent);
  background-image:url("../img/ring-orange.svg");
  background-position:center;
  background-size:1.75rem 1.75rem;
  background-repeat:no-repeat;
  margin-bottom:var(--raum-3);
  transition:background-color 280ms ease;
}
.karte:hover .karte__marke{ background-color:rgba(209,130,79,0.16); }

.karte__titel{
  font-size:clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  line-height:1.3;
  margin-bottom:var(--raum-2);
}

.karte__text{
  font-size:var(--gr-text);
  line-height:1.75;
  margin-bottom:var(--raum-3);
}

/* Der Link sitzt als eigene Zeile am Fuß der Karte, durch eine feine
   Linie abgesetzt. Dadurch enden alle Karten einer Reihe gleich,
   auch wenn die Texte verschieden lang sind. */
.karte__link{
  width:100%;
  justify-content:space-between;
  margin-top:auto;
  padding-top:var(--raum-3);
  border-top:1px solid var(--linie);
  transition:color 280ms ease;
}
.karte:hover .karte__link{ color:var(--tinte); }

@media (prefers-color-scheme: dark){
  .karte__marke{ background-color:var(--linie); }
}

/* Karten ohne Link bekommen statt der Linkzeile einen kurzen Strich
   am Fuß. Damit enden auch sie alle auf derselben Höhe, und die
   Fläche unter dem Text wirkt gewollt statt übrig geblieben. */
.karte:not(:has(.karte__link))::after{
  content:"";
  width:3rem; height:1px;
  margin-top:auto;
  background:var(--linie);
  transition:background-color 280ms ease, width 280ms ease;
}
.karte:not(:has(.karte__link)):hover::after{
  background:var(--orange);
  width:4.5rem;
}

/* Seitenkopf ohne Bild: eine Spalte statt zwei. */
.seitenkopf__innen--ohne-bild{ grid-template-columns:1fr; }
.seitenkopf__innen--ohne-bild .seitenkopf__inhalt{ max-width:52ch; }

/* Besteht eine Überschrift nur aus einer Zeile, bleibt sie in Tinte.
   Die Akzentfarbe ist für die letzte von mehreren Zeilen gedacht,
   sonst stünde die ganze Überschrift orange da. */
[class$="__titel"] span:only-child{ color:var(--tinte); }


/* =========================================================
   20. Aufruf zum Handeln
   Ein ruhiger, zentrierter Abschluss. Zwei Fassungen, hell
   auf dem Papierton und dunkel auf Tinte wie der Fußbereich.
   ========================================================= */

.cta{
  position:relative;
  padding-block:var(--sec-y);
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:min(86vw, 640px); aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(-18deg);
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  opacity:0.07;
  pointer-events:none;
}

.cta__innen{
  position:relative;
  max-width:760px;
  margin-inline:auto;
  padding-inline:var(--rand);
  text-align:center;
}
.cta .kicker{ justify-content:center; }

.cta__titel{
  font-size:clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  margin-bottom:var(--raum-3);
}
.cta__titel span:last-child{ color:var(--orange-dunkel); }

.cta__text{
  font-size:var(--gr-lead);
  color:var(--neben);
  max-width:52ch;
  margin-inline:auto;
}

.cta__knoepfe{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:var(--raum-2);
  margin:var(--raum-4) 0 0;
}

/* Dunkle Fassung. Die Werte stehen fest wie im Fußbereich,
   damit sie im Dunkelmodus nicht umschlagen. */
.cta--dunkel{ background:#1B1A17; }
.cta--dunkel::before{ opacity:0.12; }
.cta--dunkel .kicker{ color:#D1824F; }
.cta--dunkel .cta__titel{ color:#F3EEE7; }
.cta--dunkel .cta__titel span:last-child{ color:#D1824F; }
.cta--dunkel .cta__text{ color:#B3ABA0; }
.cta--dunkel .knopf--voll{
  background:#D1824F;
  border-color:#D1824F;
  color:#1B1A17;
}
.cta--dunkel .knopf--voll:hover{ background:#F3EEE7; border-color:#F3EEE7; }
.cta--dunkel .knopf--linie{ color:#F3EEE7; border-color:#F3EEE7; }
.cta--dunkel .knopf--linie:hover{ background:#F3EEE7; color:#1B1A17; }
.cta--dunkel :focus-visible{ outline-color:#D1824F; }


/* =========================================================
   21. Blog: Übersicht und Beitrag
   ========================================================= */

.beitraege{
  position:relative;
  padding-block:var(--sec-y);
}
.beitraege__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.beitraege__kopf{ max-width:56ch; margin-bottom:var(--raum-5); }
.beitraege__titel span:last-child{ color:var(--orange-dunkel); }
.beitraege__einleitung{ color:var(--neben); font-size:var(--gr-lead); }

.beitraege__raster{
  display:grid;
  gap:clamp(1rem, 2vw, 1.5rem);
}
.beitraege__leer{ color:var(--neben); }

.beitragskarte__bild{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border-radius:var(--rund-m);
  margin-bottom:var(--raum-3);
}
.beitragskarte__datum{
  margin:0 0 0.4rem;
  font-size:var(--gr-klein);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--orange-dunkel);
}

.beitrag__zurueck{
  max-width:var(--breite);
  margin:0 auto;
  padding:0 var(--rand) var(--sec-y);
}

@media (min-width:880px){
  .beitraege__raster{ grid-template-columns:repeat(2, 1fr); }
  .beitraege__raster--drei{ grid-template-columns:repeat(3, 1fr); }
}


/* =========================================================
   22. Ablauf in Schritten, und Sprungziele unter der Kopfzeile
   ========================================================= */

/* Die Kopfzeile klebt oben. Ohne diesen Abstand verschwindet die
   Überschrift eines angesprungenen Abschnitts darunter. */
section[id]{ scroll-margin-top:clamp(4.5rem, 9vw, 7rem); }

.schritte{
  position:relative;
  padding-block:var(--sec-y);
}
.schritte__innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.schritte__kopf{ max-width:56ch; margin-bottom:var(--raum-5); }
.schritte__titel span:last-child{ color:var(--orange-dunkel); }
.schritte__einleitung{ color:var(--neben); font-size:var(--gr-lead); }

.schritte__liste{
  counter-reset:schritt;
  list-style:none;
  margin:0;
  padding:0;
  max-width:72ch;
}
.schritt{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:clamp(1rem, 2.5vw, 1.75rem);
  padding-bottom:var(--raum-4);
}
.schritt:last-child{ padding-bottom:0; }

.schritt::before{
  counter-increment:schritt;
  content:counter(schritt);
  display:grid;
  place-items:center;
  width:3.25rem; height:3.25rem;
  border-radius:var(--rund-voll);
  background:var(--papier);
  border:1px solid var(--linie);
  font-family:var(--schrift-titel);
  font-size:1.25rem;
  color:var(--orange-dunkel);
}

/* Feine Linie von einer Zahl zur nächsten. */
.schritt:not(:last-child)::after{
  content:"";
  position:absolute;
  left:1.625rem;
  top:3.6rem;
  bottom:0.4rem;
  width:1px;
  background:var(--linie);
}

.schritt__inhalt{ padding-top:0.55rem; }
.schritt__titel{
  font-size:clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  margin-bottom:0.5rem;
}
.schritt__text{
  margin:0;
  color:var(--neben);
  line-height:1.75;
}


/* =========================================================
   23. Nachbesserungen
   ========================================================= */

/* Die kleine Zeile über der Überschrift ist ein Absatz und war damit
   das erste p im Textblock. Sie hat dadurch Größe und Farbe des
   Einleitungsabsatzes abbekommen und stand mal groß und dunkel,
   mal klein und orange da. Jetzt überall gleich. */
.arbeitsweise__text p.kicker,
.vorstellung__text p.kicker{
  font-size:var(--gr-klein);
  color:var(--orange-dunkel);
}

/* Gemeint war der erste Absatz nach der Überschrift, nicht die kleine Zeile. */
.arbeitsweise__text h1 + p,
.arbeitsweise__text h2 + p{
  color:var(--tinte);
  font-size:var(--gr-lead);
}
.vorstellung__text h1 + p,
.vorstellung__text h2 + p{ color:var(--tinte); }

/* Fotos stehen mittig, solange am Bild kein Fokuspunkt gesetzt ist.
   Den Punkt setzt die Kundin im Panel mit einem Klick auf das Gesicht,
   er landet als object-position direkt am Bild. */
.arbeitsweise__bild img,
.seitenkopf__bild img{ object-position:50% 50%; }

/* Knopf unter einer Kartenreihe */
.themen__knopf{
  display:flex;
  justify-content:center;
  margin:var(--raum-5) 0 0;
}

/* Fußbereich: die Spalten richten sich nach dem, was da ist. */
@media (min-width:880px){
  .fuss__innen{ grid-template-columns:1.6fr 1fr 1fr; }
  .fuss__innen--vier{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
}
.fuss__zeile{
  display:grid;
  gap:0.15rem;
  margin:0 0 0.9rem;
  font-size:var(--gr-klein);
  color:#9C958A;
}
.fuss__zeile a{
  color:#CFC9C0;
  text-decoration:none;
}
.fuss__zeile a:hover{ color:#FFFFFF; }


/* =========================================================
   24. Die Ringe
   Der Ring aus dem Logo hat seine Öffnung oben rechts. In der
   Grundstellung der Datei stimmt das bereits, gedreht wurde er
   bisher nur zur Abwechslung. Hier stehen alle Ringe wieder auf
   die Logo-Stellung, und der Akzent am Bild wird kleiner.
   ========================================================= */

.kicker::before,
.belege__marke,
.karte__marke,
.saeulen__marke,
.hinweis__marke,
.hero__innen::before,
.themen::before,
.arbeitsweise::before,
.arbeitsweise__bild::after,
.arbeitsweise__innen--bild-links .arbeitsweise__bild::after,
.vorstellung::before,
.vorstellung__rahmen::after,
.preise::before,
.kontakt::before,
.seitenkopf::after{
  transform:rotate(0deg);
}

.cta::before{
  transform:translate(-50%,-50%) rotate(0deg);
}

/* Der Akzent an der Bildecke war zu wuchtig. */
.arbeitsweise__bild::after{
  width:17%;
  left:-5%;
  bottom:-6%;
}
.arbeitsweise__innen--bild-links .arbeitsweise__bild::after{
  left:auto;
  right:-5%;
}


/* =========================================================
   25. Der Seitenkopf setzt sich ab
   Er sah den Abschnitten darunter zu ähnlich: gleiche Höhe,
   gleiches Bildformat, fast gleiche Überschrift. Jetzt ist er
   höher, das Bild steht hochkant statt quer, die Überschrift
   ist größer, und unten schließt eine feine Linie ab.
   ========================================================= */

.seitenkopf{
  padding-block:clamp(2.75rem, 2rem + 4vw, 5rem) clamp(3.25rem, 2.25rem + 5vw, 6rem);
  border-bottom:1px solid var(--linie);
}

.seitenkopf__titel{
  font-size:clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

@media (min-width:880px){
  .seitenkopf{
    padding-block:clamp(4rem, 2.5rem + 5vw, 7rem) clamp(4.5rem, 3rem + 5vw, 7.5rem);
  }

  /* Text bekommt mehr Platz, das Bild wird schmaler und höher. */
  .seitenkopf__innen{
    grid-template-columns:1fr 0.82fr;
    column-gap:clamp(3rem, 6vw, 5.5rem);
  }
  .seitenkopf__bild img{ aspect-ratio:4 / 5; }
}


/* =========================================================
   26. Karten zum Durchwischen auf dem Handy
   Unter 880 Pixel wird aus der Kartenreihe ein Streifen, der
   sich wischen lässt und einrastet. Die Pfeile stehen unter
   den Karten, nie darüber.
   ========================================================= */

@media (max-width:879.98px){
  [data-slider]{
    display:flex;
    gap:clamp(0.75rem, 3vw, 1.25rem);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--rand);
    margin-inline:calc(var(--rand) * -1);
    padding-inline:var(--rand);
    padding-block:0.25rem;
    scrollbar-width:none;
    -ms-overflow-style:none;
    overscroll-behavior-x:contain;
  }
  [data-slider]::-webkit-scrollbar{ display:none; }

  [data-slider] > li{
    flex:0 0 min(82%, 21rem);
    scroll-snap-align:start;
  }
}

.slider__steuerung{
  display:none;
  justify-content:center;
  gap:var(--raum-2);
  margin-top:var(--raum-3);
}
.slider__steuerung.ist-sichtbar{ display:flex; }

.slider__knopf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  padding:0;
  border:1px solid var(--linie);
  border-radius:var(--rund-voll);
  background:var(--papier);
  color:var(--orange-dunkel);
  cursor:pointer;
  transition:border-color var(--zeit) ease, color var(--zeit) ease, opacity var(--zeit) ease;
}
.slider__knopf:hover{ border-color:var(--orange); }
.slider__knopf[disabled]{
  opacity:0.3;
  cursor:default;
  border-color:var(--linie);
}

.slider__pfeil{
  width:0.6rem; height:0.6rem;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}
.slider__knopf--vor .slider__pfeil{ transform:translateX(-2px) rotate(45deg); }
.slider__knopf--zurueck .slider__pfeil{ transform:translateX(2px) rotate(-135deg); }


/* =========================================================
   27. Video als Kreis, Wiedergabe im Fenster
   Der Kreis greift das Porträt aus der Vorstellung auf, mit
   dem Logo-Ring als Rahmen. Der Abspielknopf sitzt als kleine
   Plakette am Rand, nicht mitten im Gesicht.
   ========================================================= */

.themen__kopf--mit-video{
  max-width:none;
  display:grid;
  gap:var(--raum-4);
}
.themen__kopftext{ max-width:56ch; }

.video{ justify-self:start; }

.video__knopf{
  display:flex;
  align-items:center;
  gap:var(--raum-3);
  color:inherit;
  text-decoration:none;
  border-radius:var(--rund-m);
}

.video__kreis{
  position:relative;
  flex:0 0 auto;
  width:7.5rem;
  aspect-ratio:1;
}
.video__kreis img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--rund-voll);
}
.video__kreis::before{
  content:"";
  position:absolute;
  inset:-9%;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  pointer-events:none;
}

.video__play{
  position:absolute;
  right:-4%;
  bottom:-2%;
  width:2.9rem; height:2.9rem;
  border-radius:var(--rund-voll);
  background:var(--orange-dunkel);
  border:3px solid var(--papier-getoent);
  transition:background-color var(--zeit) ease, transform var(--zeit) ease;
}
.video__play::after{
  content:"";
  position:absolute;
  top:50%; left:54%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:0.42rem 0 0.42rem 0.7rem;
  border-color:transparent transparent transparent var(--auf-farbe);
}
.video__knopf:hover .video__play{
  background:var(--tinte);
  transform:scale(1.06);
}

.video__beschriftung{ display:grid; gap:0.2rem; }
.video__marke{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange-dunkel);
}
.video__titel{
  font-family:var(--schrift-titel);
  font-size:1.125rem;
  line-height:1.35;
  color:var(--tinte);
  max-width:22ch;
}
.video__knopf:hover .video__titel{ color:var(--orange-dunkel); }

.video__hinweis{
  margin:var(--raum-2) 0 0;
  max-width:36ch;
  font-size:0.8125rem;
  line-height:1.55;
  color:var(--neben);
}

@media (min-width:880px){
  .themen__kopf--mit-video{
    grid-template-columns:minmax(0, 56ch) auto;
    justify-content:space-between;
    align-items:center;
    column-gap:clamp(3rem, 6vw, 6rem);
  }

  .video{ justify-self:end; text-align:center; }
  .video__knopf{ flex-direction:column; gap:var(--raum-4); }
  .video__kreis{ width:clamp(11rem, 16vw, 14.5rem); }
  .video__play{ width:3.75rem; height:3.75rem; right:2%; bottom:2%; }
  .video__play::after{ border-width:0.55rem 0 0.55rem 0.9rem; }
  .video__beschriftung{ justify-items:center; }
  .video__hinweis{ margin-inline:auto; }
}

/* Das Fenster */
.videofenster{
  width:min(92vw, 1000px);
  max-width:none;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
.videofenster::backdrop{ background:rgba(27,26,23,0.88); }

.videofenster__rahmen{
  aspect-ratio:16 / 9;
  border-radius:var(--rund-m);
  overflow:hidden;
  background:#000;
}
.videofenster__rahmen iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.videofenster__zu{
  position:absolute;
  right:0;
  bottom:calc(100% + 0.75rem);
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:var(--rund-voll);
  border:1px solid rgba(255,255,255,0.3);
  background:rgba(27,26,23,0.6);
  color:#FFFFFF;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}
.videofenster__zu:hover{ background:rgba(255,255,255,0.14); }

/* Bei großen Kreisen wirkt der Logo-Ring zu kräftig. Dieselbe Form,
   nur mit feinerer Linie, wie ein optischer Größenschnitt. */
.video__kreis::before{
  background-image:url("../img/ring-orange-fein.svg");
  inset:-8%;
}


/* =========================================================
   28. Seitenkopf mit Querbild
   Für Seiten, auf denen der Kopf nicht so hoch werden soll,
   etwa Kontakt. Das Bild steht quer, oben und unten gibt es
   weniger Luft. Auswahl im Baustein über „Bildformat“.
   ========================================================= */

@media (min-width:880px){
  .seitenkopf--quer{
    padding-block:clamp(3rem, 2rem + 3vw, 4.5rem) clamp(3.5rem, 2.5rem + 3vw, 5rem);
  }
  .seitenkopf--quer .seitenkopf__innen{
    grid-template-columns:1fr 0.95fr;
  }
  .seitenkopf--quer .seitenkopf__bild img{ aspect-ratio:5 / 4; }
}


/* =========================================================
   29. Mehr Luft über dem Logo
   Oben stand das Logo zu dicht am Rand. Jetzt ist der Abstand
   nach oben so groß wie der zur Navigation darunter. Im
   kompakten Kopf beim Scrollen bleibt alles wie bisher.
   ========================================================= */

@media (min-width:880px){
  .kopf:not(.ist-kompakt) .kopf__innen{ padding-top:1.8rem; }
}


/* =========================================================
   30. Text nur für Screenreader
   Unsichtbar, wird aber vorgelesen. Zum Beispiel der Hinweis,
   dass ein Link in einem neuen Tab öffnet.
   ========================================================= */

.nur-vorlesen{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}


/* =========================================================
   31. Links in Texten auf dunklem Grund
   Seit die kurzen Texte Links haben dürfen, braucht der
   dunkle Grund eine hellere Linkfarbe, sonst reicht der
   Kontrast nicht.
   ========================================================= */

.fuss__text a,
.cta--dunkel .cta__text a{
  color:#F3EEE7;
  text-underline-offset:0.15em;
}
.fuss__text a:hover,
.cta--dunkel .cta__text a:hover{ color:#D1824F; }


/* =========================================================
   32. Blog: klickbare Karten, Blättern, Weg zurück
   ========================================================= */

/* Die ganze Karte ist klickbar. Der Link „Beitrag lesen“
   legt sich unsichtbar über die Karte, es bleibt ein Link. */
.beitragskarte{ position:relative; }
.beitragskarte .karte__link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
}
.beitragskarte:has(.karte__link:focus-visible){
  outline:3px solid var(--orange-dunkel);
  outline-offset:3px;
}
.beitragskarte .karte__link:focus-visible{ outline:none; }

/* Seitenzahlen unter der Liste */
.blaettern{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--raum-2) var(--raum-3);
  margin-top:var(--raum-6);
}
.blaettern__zahlen{
  display:flex;
  gap:0.4rem;
  margin:0;
  padding:0;
  list-style:none;
}
.blaettern__zahl,
.blaettern__schritt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 0.9rem;
  border:1px solid var(--linie);
  border-radius:999px;
  color:var(--tinte);
  text-decoration:none;
  transition:background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.blaettern__zahl{ padding:0; }
.blaettern__zahl:hover,
.blaettern__schritt:hover{ border-color:var(--tinte); }
.blaettern__zahl[aria-current="page"]{
  background:var(--tinte);
  border-color:var(--tinte);
  color:var(--papier);
}

/* Weg zurück zur Übersicht, oben und unten im Beitrag */
.beitrag__oben{ margin:0 0 var(--raum-4); }
.beitrag__oben-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  min-height:44px;
  font-weight:700;
  color:var(--orange-dunkel);
  text-decoration:none;
}
.beitrag__oben-link:hover{ color:var(--tinte); }
.beitrag__zurueck{ text-align:center; }

@media (prefers-reduced-motion: reduce){
  .blaettern__zahl,
  .blaettern__schritt{ transition:none; }
}
.beitraege__titel span:only-child{ color:var(--tinte); }
.beitrag__zurueck .knopf{ gap:0.5rem; }


/* =========================================================
   33. Seitenkopf der Unterseiten: niedriger
   Der Kopf war mit dem Hochkantbild fast so hoch wie auf der
   Startseite. Jetzt steht das Bild quer und flacher, oben und
   unten gibt es weniger Luft. Abgesetzt wird der Kopf durch
   den getönten Grund und dadurch, dass das Bild unten ein Stück
   über die Kante in den weißen Abschnitt darunter ragt.
   Gilt für alle Unterseiten, Blog und Beiträge, das Feld
   „Bildformat“ spielt keine Rolle mehr.
   ========================================================= */

.seitenkopf.seitenkopf{
  padding-block:clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}
.seitenkopf .seitenkopf__titel{
  font-size:clamp(1.875rem, 1.3rem + 2vw, 2.875rem);
}
.seitenkopf .seitenkopf__bild img{ aspect-ratio:3 / 2; object-position:50% 50%; }

@media (min-width:880px){
  .seitenkopf.seitenkopf{
    padding-block:clamp(4rem, 2rem + 4.5vw, 6rem);
  }
  .seitenkopf.seitenkopf .seitenkopf__innen{
    grid-template-columns:1fr 1fr;
    column-gap:clamp(3rem, 6vw, 5.5rem);
  }
  .seitenkopf .seitenkopf__bild img{
    aspect-ratio:1 / 1;
    max-height:none;
  }
  /* Der Text sitzt mittig im getönten Band, nicht mittig zum Bild. */
  .seitenkopf .seitenkopf__inhalt{ align-self:center; }
}


/* =========================================================
   34. Video im Seitenkopf
   Rechts im kompakten Seitenkopf, an der Stelle des Bildes.
   Dieselbe weiße Papierlage und dieselben Rundungen wie die
   Seitenkopfbilder. Abspielknopf in der Mitte, dazu ein Schild
   „Video“, damit klar ist, dass sich dahinter ein Film verbirgt.
   Geöffnet wird im selben Fenster wie der runde Videoknopf.
   ========================================================= */

.kopfvideo{
  position:relative;
  z-index:1;
  margin:0;
}

.kopfvideo__knopf{
  display:block;
  color:inherit;
  text-decoration:none;
  border-radius:var(--rund-l);
}
.kopfvideo__knopf:focus-visible{
  outline:3px solid var(--orange-dunkel);
  outline-offset:1.3rem;
}

.kopfvideo__flaeche{
  position:relative;
  display:block;
}
/* Die weiße Lage wie beim Seitenkopfbild */
.kopfvideo__flaeche::before{
  content:"";
  position:absolute;
  inset:-0.9rem;
  background:var(--papier);
  border-radius:calc(var(--rund-l) + 0.9rem);
  pointer-events:none;
}
.kopfvideo__flaeche img{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:var(--rund-l);
  background:var(--linie);
}
/* Leichter Schleier, damit Knopf und Schild auf jedem Bild stehen */
.kopfvideo__flaeche::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--rund-l);
  background:linear-gradient(180deg, rgba(27,26,23,0.28) 0%, rgba(27,26,23,0) 30%, rgba(27,26,23,0) 70%, rgba(27,26,23,0.18) 100%);
  pointer-events:none;
  transition:background-color var(--zeit) ease;
}
.kopfvideo__knopf:hover .kopfvideo__flaeche::after{ background-color:rgba(27,26,23,0.08); }

/* Abspielknopf nach dem bekannten Vorbild: abgerundetes Rechteck */
.kopfvideo__play{
  position:absolute;
  z-index:1;
  top:50%; left:50%;
  width:5.25rem; height:3.6rem;
  transform:translate(-50%, -50%);
  border-radius:1rem;
  background:var(--orange-dunkel);
  box-shadow:0 10px 30px rgba(27,26,23,0.28);
  transition:background-color var(--zeit) ease, transform var(--zeit) ease;
}
.kopfvideo__play::after{
  content:"";
  position:absolute;
  top:50%; left:53%;
  transform:translate(-50%, -50%);
  border-style:solid;
  border-width:0.7rem 0 0.7rem 1.15rem;
  border-color:transparent transparent transparent #FFFFFF;
}
.kopfvideo__knopf:hover .kopfvideo__play,
.kopfvideo__knopf:focus-visible .kopfvideo__play{
  background:#1B1A17;
  transform:translate(-50%, -50%) scale(1.06);
}

/* Schild oben links */
.kopfvideo__schild{
  position:absolute;
  z-index:1;
  top:1.1rem; left:1.1rem;
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.4rem 0.8rem 0.4rem 0.7rem;
  border-radius:var(--rund-voll);
  background:rgba(255,255,255,0.94);
  color:#1B1A17;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1;
}
.kopfvideo__schild-dreieck{
  width:0; height:0;
  border-style:solid;
  border-width:0.3rem 0 0.3rem 0.5rem;
  border-color:transparent transparent transparent #A25C22;
}

.kopfvideo__beschriftung{
  display:grid;
  gap:0.2rem;
  margin-top:calc(0.9rem + var(--raum-3));
}
.kopfvideo__marke{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange-dunkel);
}
.kopfvideo__titel{
  font-family:var(--schrift-titel);
  font-size:clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height:1.35;
  color:var(--tinte);
}
.kopfvideo__knopf:hover .kopfvideo__titel{ color:var(--orange-dunkel); }

.kopfvideo__hinweis{
  margin:var(--raum-1) 0 0;
  max-width:46ch;
  font-size:0.8125rem;
  line-height:1.55;
  color:var(--neben);
}

@media (min-width:880px){
  .kopfvideo{ align-self:center; }
  .kopfvideo__flaeche img{ aspect-ratio:5 / 4; }
  .kopfvideo__play{ width:6rem; height:4.1rem; }
  .kopfvideo__play::after{ border-width:0.8rem 0 0.8rem 1.3rem; }
}

@media (prefers-color-scheme: dark){
  .kopfvideo__flaeche::before{ background:var(--linie); }
}

@media (prefers-reduced-motion: reduce){
  .kopfvideo__play,
  .kopfvideo__flaeche::after{ transition:none; }
}


/* =========================================================
   35. Text zum Aufklappen unter „Text mit Bild“
   Unter dem Text steht „mehr lesen“. Der Text klappt darunter
   über die ganze Breite auf, als Karte in der Gegenfarbe des
   Abschnitts, auf großen Bildschirmen in zwei Spalten. Ohne
   JavaScript steht der Text einfach offen da.
   Auf dem Handy steht das Bild über dem Text, damit sich der
   Text direkt unter dem Link öffnet und nicht unter dem Bild.
   ========================================================= */

.mehrlink__zeile{ margin:var(--raum-3) 0 0; }

.mehrlink{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  min-height:44px;
  padding:0;
  border:0;
  background:none;
  font-family:var(--schrift-text);
  font-size:var(--gr-klein);
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--orange-dunkel);
  cursor:pointer;
}
.mehrlink[hidden]{ display:none; }
.mehrlink__text{
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.mehrlink:hover{ color:var(--tinte); }
.mehrlink:focus-visible{
  outline:3px solid var(--orange-dunkel);
  outline-offset:4px;
  border-radius:4px;
}
.mehrlink__pfeil{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.75rem; height:1.75rem;
  border:1px solid currentColor;
  border-radius:var(--rund-voll);
  transition:transform 350ms ease;
}
.mehrlink__pfeil::before{
  content:"";
  width:0.4rem; height:0.4rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-1px) rotate(45deg);
}
.mehrlink[aria-expanded="true"] .mehrlink__pfeil,
.mehrlink--zu .mehrlink__pfeil{ transform:rotate(180deg); }

.arbeitsweise__siegel{ margin:var(--raum-4) 0 0; }
.arbeitsweise__siegel img{
  display:block;
  width:auto;
  height:4.5rem;
  border-radius:8px;
}

/* Die aufklappende Fläche */
.aufklapp{
  grid-column:1 / -1;
  display:grid;
  grid-template-rows:1fr;
}
.aufklapp[hidden]{ display:none; }
.aufklapp__huelle{ min-height:0; }

.js-aufklapp .aufklapp{
  grid-template-rows:0fr;
  transition:grid-template-rows 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-aufklapp .aufklapp__huelle{ overflow:hidden; }
.js-aufklapp .aufklapp__karte{
  opacity:0;
  transform:translateY(-0.75rem);
  transition:opacity 380ms ease, transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-aufklapp .aufklapp.ist-offen{ grid-template-rows:1fr; }
.js-aufklapp .aufklapp.ist-offen .aufklapp__karte{
  opacity:1;
  transform:none;
  transition-delay:80ms;
}

.aufklapp__karte{
  position:relative;
  padding:clamp(1.75rem, 1rem + 3vw, 3.25rem) clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem);
  border:1px solid var(--linie);
  border-radius:var(--rund-m);
  background:var(--papier-getoent);
}
.sec--shade .aufklapp__karte{ background:var(--papier); }

/* Feiner Ring oben rechts als Abschluss, wie im Seitenkopf */
.aufklapp__karte::after{
  content:"";
  position:absolute;
  top:clamp(1rem, 2.5vw, 1.75rem);
  right:clamp(1rem, 2.5vw, 1.75rem);
  width:clamp(28px, 3vw, 40px); aspect-ratio:1;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  opacity:0.6;
  pointer-events:none;
}

.aufklapp__text{ color:var(--neben); }
.aufklapp__text p{ margin:0 0 var(--raum-3); }
.aufklapp__text > p:first-child{
  max-width:34ch;
  font-family:var(--schrift-titel);
  font-size:clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  line-height:1.4;
  color:var(--tinte);
  padding-right:2.5rem;
}
.aufklapp__text strong{ color:var(--tinte); }
.aufklapp__text ul{
  margin:0 0 var(--raum-3);
  padding-left:1.2rem;
}
.aufklapp__text li{ margin-bottom:0.4rem; }

.aufklapp__schluss{
  margin:var(--raum-2) 0 0;
  padding-top:var(--raum-2);
  border-top:1px solid var(--linie);
}

@media (min-width:880px){
  .aufklapp{ margin-top:calc(var(--raum-6) * -0.5); }
  .aufklapp__text{
    columns:2;
    column-gap:clamp(2.5rem, 5vw, 4.5rem);
  }
  .aufklapp__text > p:first-child{
    column-span:all;
    margin-bottom:var(--raum-4);
  }
  .aufklapp__text p,
  .aufklapp__text li{ break-inside:avoid-column; }
  .aufklapp__schluss{ text-align:right; }
}

@media (max-width:879.98px){
  /* Bild zuerst, dann Text mit Link, darunter der aufklappende Text */
  .arbeitsweise--aufklapp .arbeitsweise__bild{ order:-1; }
  /* Die Karte rückt an den Link heran, statt den vollen Abstand zu lassen */
  .aufklapp{ margin-top:calc(var(--raum-5) * -1 + var(--raum-2)); }
}

@media (prefers-reduced-motion: reduce){
  .js-aufklapp .aufklapp,
  .js-aufklapp .aufklapp__karte,
  .mehrlink__pfeil{ transition:none; }
}


/* =========================================================
   36. Nummer vor der kleinen Zeile
   Für Abschnitte, die durchgezählt werden, etwa die Angebote.
   Statt des kleinen Rings steht ein größerer Ring mit der Zahl
   darin, damit man am Telefon einfach „Nummer 4“ sagen kann.
   ========================================================= */

.kicker--nummer{
  gap:0.75rem;
}
.kicker--nummer::before{ display:none; }

.kicker__nummer{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem; height:2.25rem;
  background:url("../img/ring-orange.svg") center / contain no-repeat;
  font-family:var(--schrift-titel);
  font-size:1rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  line-height:1;
  color:var(--tinte);
  font-variant-numeric:lining-nums tabular-nums;
}
.kicker--nummer .kicker__text{ min-width:0; }

@media (min-width:880px){
  .kicker__nummer{
    width:2.5rem; height:2.5rem;
    font-size:1.0625rem;
  }
}


/* =========================================================
   37. Zwischenüberschriften und Listen im Fließtext
   Für lange Texte wie Datenschutz und Impressum.
   ========================================================= */

.fliesstext__text h2{
  margin:var(--raum-5) 0 var(--raum-2);
  font-size:clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  line-height:1.3;
  color:var(--tinte);
}
.fliesstext__text h2:first-child{ margin-top:0; }
.fliesstext__text h3{
  margin:var(--raum-4) 0 var(--raum-1);
  font-family:var(--schrift-text);
  font-size:var(--gr-text);
  font-weight:700;
  color:var(--tinte);
}
.fliesstext__text ul{
  margin:0 0 var(--raum-3);
  padding-left:1.2rem;
  list-style:disc;
  color:var(--neben);
}
.fliesstext__text li{ margin-bottom:0.35rem; padding-left:0.2rem; }
.fliesstext__text li::marker{ color:var(--orange-dunkel); }
.fliesstext__text li > p,
.fliesstext__text li > p:first-of-type{ margin:0; font-size:inherit; color:inherit; }
.fliesstext__text a{ color:var(--orange-dunkel); text-underline-offset:0.15em; }
.fliesstext__text a:hover{ color:var(--tinte); }


/* =========================================================
   38. Social-Media-Symbole
   Nur die Linienzeichen in einer Reihe, ohne Kreise oder
   Flächen. Die Klickfläche ist trotzdem 44 Pixel groß, die
   Reihe rückt deshalb links um den Rand nach außen, damit das
   erste Symbol bündig mit dem Text steht.
   ========================================================= */

.kanaele{
  display:flex;
  flex-wrap:wrap;
  gap:0.1rem;
  margin:var(--raum-3) 0 0 -11px;
  padding:0;
  list-style:none;
}
.kanaele__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:var(--rund-voll);
  color:var(--neben);
  transition:color var(--zeit) ease;
}
.kanaele__link:hover{ color:var(--orange-dunkel); }
.kanaele__link:focus-visible{
  outline:3px solid var(--orange-dunkel);
  outline-offset:0;
}
.kanaele svg{ display:block; }

/* Im dunklen Fußbereich so hell wie die Links daneben */
.kanaele--hell .kanaele__link{ color:#CFC9C0; }
.kanaele--hell .kanaele__link:hover{ color:#FFFFFF; }
.kanaele--hell .kanaele__link:focus-visible{ outline-color:#F3EEE7; }

.seitenkopf__inhalt .kanaele,
.hero__inhalt .kanaele{ margin-top:var(--raum-3); }

@media (prefers-reduced-motion: reduce){
  .kanaele__link{ transition:none; }
}


/* =========================================================
   39. Aktive Seite im Menü
   Dieselbe Farbe wie beim Überfahren, ohne Unterstreichung.
   ========================================================= */

.nav__link[aria-current="page"],
.nav__unter-link[aria-current="page"]{
  color:var(--orange-dunkel);
  text-decoration:none;
}


/* =========================================================
   40. Bild per Klick vergrößern
   Für „Text mit Bild“ und den kompakten Seitenkopf. Nutzt die
   Lightbox der Galerie. Form und Format bleiben wie beim
   normalen Bild, dazu das kleine Pluszeichen unten rechts.
   ========================================================= */

.bildlupe{
  border-radius:var(--rund-l);
  cursor:zoom-in;
}
.arbeitsweise__bild .bildlupe img{ aspect-ratio:4 / 3; border-radius:var(--rund-l); }
.seitenkopf__bild .bildlupe{ position:relative; z-index:1; }
.seitenkopf__bild .bildlupe img{ aspect-ratio:3 / 2; border-radius:var(--rund-l); }
.bildlupe .galerie__lupe{ top:1rem; right:1rem; bottom:auto; }

/* Bei nur einem Bild keine Pfeile und kein Zähler */
.lupe__knopf[hidden],
.lupe__zaehler[hidden]{ display:none; }
.bildlupe:focus-visible{
  outline:3px solid var(--orange-dunkel);
  outline-offset:4px;
}

@media (min-width:880px){
  .arbeitsweise__bild .bildlupe img,
  .seitenkopf__bild .bildlupe img{ aspect-ratio:1; }
}


/* =========================================================
   41. Kein Dunkelmodus
   Die Seite bleibt immer hell, auch wenn das Gerät auf dunkel
   steht. Die Regeln für den Dunkelmodus weiter oben bleiben
   stehen, werden hier aber mit den hellen Werten überschrieben.
   ========================================================= */

:root{ color-scheme:light; }

@media (prefers-color-scheme: dark){
  :root{
    --orange:        #D1824F;
    --orange-dunkel: #A25C22;
    --papier:        #FFFFFF;
    --papier-getoent:#FAF7F3;
    --tinte:         #1B1A17;
    --neben:         #6D6960;
    --linie:         #E7E0D6;
    --auf-farbe:     #FFFFFF;
  }
  .seitenkopf__bild::before,
  .kopfvideo__flaeche::before{ background:var(--papier); }
  .karte__marke{ background-color:var(--papier-getoent); }
}

@media (prefers-color-scheme: dark) and (min-width:880px){
  .hero__bild::after{
    background:linear-gradient(100deg,
      rgba(250,247,243,0.97) 0%,
      rgba(250,247,243,0.95) 30%,
      rgba(250,247,243,0.72) 46%,
      rgba(250,247,243,0.10) 62%,
      rgba(250,247,243,0) 74%);
  }
}


/* =========================================================
   42. Auswahl zum Ankreuzen im Kontaktformular
   Möglichkeiten untereinander als Kacheln im Stil der Eingabefelder.
   Bei „nur eine“ runde Markierung, bei „mehrere“ eckige.
   ========================================================= */

.formular__auswahl{
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
.formular__auswahl legend{ padding:0; margin-bottom:0.4rem; }

.formular__optionen{
  display:grid;
  gap:0.5rem;
}

.formular__option{
  position:relative;
  display:flex;
  align-items:center;
  gap:0.7rem;
  min-height:48px;
  padding:0.7rem 1rem;
  border:1px solid var(--linie);
  border-radius:var(--rund-s);
  background:var(--papier-getoent);
  font-size:var(--gr-klein);
  color:var(--tinte);
  cursor:pointer;
  transition:border-color var(--zeit) ease, background-color var(--zeit) ease;
}
.formular__option:hover{ border-color:var(--orange); }

/* Das echte Eingabefeld liegt unsichtbar über der Kachel,
   bleibt aber mit der Tastatur bedienbar. */
.formular__option input{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.formular__markierung{
  flex:0 0 auto;
  position:relative;
  width:1.25rem; height:1.25rem;
  border:1.5px solid var(--neben);
  border-radius:var(--rund-voll);
  background:var(--papier);
  transition:border-color var(--zeit) ease;
}
.formular__option input[type="checkbox"] ~ .formular__markierung{ border-radius:5px; }

.formular__option:has(input:checked){
  border-color:var(--orange-dunkel);
  background:var(--papier);
}
.formular__option input:checked ~ .formular__markierung{ border-color:var(--orange-dunkel); }
.formular__option input[type="radio"]:checked ~ .formular__markierung::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:var(--rund-voll);
  background:var(--orange-dunkel);
}
.formular__option input[type="checkbox"]:checked ~ .formular__markierung{ background:var(--orange-dunkel); }
.formular__option input[type="checkbox"]:checked ~ .formular__markierung::after{
  content:"";
  position:absolute;
  left:5px; top:1px;
  width:5px; height:10px;
  border-right:2px solid #FFFFFF;
  border-bottom:2px solid #FFFFFF;
  transform:rotate(45deg);
}
.formular__option:has(input:focus-visible){
  outline:3px solid var(--orange-dunkel);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .formular__option,
  .formular__markierung{ transition:none; }
}


/* =========================================================
   43. Bild beim Scrollen mitführen
   Schalter in „Text mit Bild“. Auf großen Bildschirmen steht das
   Bild oben neben dem Text und bleibt sichtbar (position: sticky),
   bis der Abschnitt zu Ende ist. overflow:clip statt hidden, sonst
   funktioniert sticky nicht. Auf dem Handy bleibt alles wie gehabt.
   ========================================================= */

@media (min-width:880px){
  .arbeitsweise--mitlaufen{ overflow:clip; }
  .arbeitsweise--mitlaufen .arbeitsweise__innen{ align-items:start; }
  .arbeitsweise--mitlaufen .arbeitsweise__bild{
    align-self:start;
    position:sticky;
    top:clamp(6rem, 8vw, 7.5rem);
  }
}


/* =========================================================
   44. Bild ganz zeigen
   Schalter in „Text mit Bild“. Das Bild behält sein eigenes
   Seitenverhältnis statt quadratisch oder 4:3 beschnitten zu
   werden. Breite wie sonst, die Höhe folgt dem Bild.
   ========================================================= */

.arbeitsweise.arbeitsweise--ganz .arbeitsweise__bild img,
.arbeitsweise.arbeitsweise--ganz .arbeitsweise__bild .bildlupe img{
  aspect-ratio:auto;
  height:auto;
  object-fit:contain;
}


/* =========================================================
   45. Menü auf dem Handy
   Logo links, Menüknopf rechts, dort erreicht ihn der Daumen.
   Aufgeklappt: ganze Zeilen zum Tippen, rechtsbündig, Schrift
   der Überschriften, feine Linien dazwischen. Die Punkte gleiten
   nacheinander sanft herein, der Knopf wird zum Kreuz.
   Bei reduzierter Bewegung ohne Animation.
   ========================================================= */

@media (max-width:879px){
  .kopf__innen{ grid-template-columns:1fr auto; column-gap:var(--raum-2); }
  .kopf__logo{ grid-column:1; justify-self:start; }
  .kopf__schalter{ grid-column:2; justify-self:end; margin-right:-0.5rem; }
  .kopf__nav{ grid-column:1 / -1; }

  /* Strich wird zum Kreuz */
  .kopf__schalter-strich,
  .kopf__schalter-strich::before,
  .kopf__schalter-strich::after{
    transition:transform 260ms cubic-bezier(.4,0,.2,1), top 260ms cubic-bezier(.4,0,.2,1), background-color 160ms ease;
  }
  .kopf__schalter[aria-expanded="true"] .kopf__schalter-strich{ background-color:transparent; }
  .kopf__schalter[aria-expanded="true"] .kopf__schalter-strich::before{ top:0; transform:rotate(45deg); }
  .kopf__schalter[aria-expanded="true"] .kopf__schalter-strich::after{ top:0; transform:rotate(-45deg); }

  .nav{
    gap:0;
    padding-top:var(--raum-1, 0.5rem);
    padding-bottom:var(--raum-2);
    text-align:right;
  }
  .nav__punkt{ border-bottom:1px solid var(--linie); }
  .nav__punkt:last-child{ border-bottom:0; }

  .nav__link{
    display:flex; width:100%;
    justify-content:flex-end; align-items:center; gap:0.6rem;
    min-height:56px;
    padding:0 0.25rem;
    font-family:var(--schrift-titel);
    font-size:1.25rem;
    letter-spacing:0;
    transition:color var(--zeit) ease, padding var(--zeit) ease;
  }
  .nav__link:active{ padding-right:0.6rem; }

  /* aktive Seite: kleiner Punkt in Orange vor dem Wort */
  .nav__link[aria-current="page"]::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background:var(--orange);
  }

  .nav__unter{
    border-left:0; border-right:2px solid var(--linie);
    margin:0 0.25rem 0 0; padding:0 var(--raum-2) var(--raum-2) 0;
    text-align:right;
  }
  .nav__unter-link{ justify-content:flex-end; }

  .kopf__nav.ist-offen .nav__punkt{
    animation:menue-ein 360ms cubic-bezier(.2,.7,.2,1) both;
  }
  .kopf__nav.ist-offen .nav__punkt:nth-child(2){ animation-delay:40ms; }
  .kopf__nav.ist-offen .nav__punkt:nth-child(3){ animation-delay:80ms; }
  .kopf__nav.ist-offen .nav__punkt:nth-child(4){ animation-delay:120ms; }
  .kopf__nav.ist-offen .nav__punkt:nth-child(5){ animation-delay:160ms; }
  .kopf__nav.ist-offen .nav__punkt:nth-child(6){ animation-delay:200ms; }
  .kopf__nav.ist-offen .nav__punkt:nth-child(n+7){ animation-delay:240ms; }
}

@keyframes menue-ein{
  from{ opacity:0; transform:translateX(14px); }
  to{ opacity:1; transform:none; }
}

@media (max-width:879px) and (prefers-reduced-motion: reduce){
  .kopf__nav.ist-offen .nav__punkt{ animation:none; }
}