/* ==========================================================================
   Schriften — selbst gehostet (kein Google Fonts, keine Datenübertragung)
   ========================================================================== */
@font-face{font-family:"Montserrat Variable";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/schrift/montserrat-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat Variable";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/schrift/montserrat-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat Variable";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/schrift/caveat-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat Variable";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/schrift/caveat-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   PESA — Designsystem
   ========================================================================== */
:root{
  /* #E4DED1 ist der Sektionsgrund eurer bestehenden Seite — der macht das
     wohlige Gefühl. Weiß wird zur Ausnahme statt zur Regel. */
  --papier:#EAE4D8; --creme:#F4F0E7; --sand:#DED7C7;
  --navy:#0D2C5C; --navy-tief:#0A2247; --kaffee:#4A4238;
  --koralle:#ED4958; --koralle-tief:#C4303E;
  --hellblau:#8AAFE6; --hellblau-hell:#C3D8F2; --linie:#C2B6A0;
  /* Eure Seite hat weder Schatten noch Rundungen. Schwebende weiße Karten
     sind die Formensprache von Apps und Praxis-Software — genau das, was
     steril wirkt. Wir behalten nur einen Hauch Tiefe. */
  --sch-1:none;
  --sch-2:0 2px 14px rgba(92,83,70,.09);
  --sch-3:0 8px 30px rgba(92,83,70,.13);
  --e:cubic-bezier(.22,1,.36,1);
  --luft:clamp(4.75rem,9vw,7.5rem);
  --gut:clamp(1.5rem,5vw,4rem);
  --schrift:"Montserrat Variable",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hand:"Caveat Variable","Segoe Script","Bradley Hand","Brush Script MT",cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--navy);font-family:var(--schrift);
  font-size:1.1875rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance;line-height:1.22}
p{margin:0;text-wrap:pretty}
ul,dl,dd{margin:0;padding:0}li{list-style:none}
a{color:var(--koralle-tief)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--koralle-tief);outline-offset:3px;border-radius:4px}

.h1{font-size:clamp(2.4rem,1.3rem + 4.8vw,4.1rem);line-height:1.12}
.h2{font-size:clamp(1.85rem,1.3rem + 2.4vw,2.7rem);line-height:1.2}
.h3{font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);line-height:1.3}
.lead{font-size:clamp(1.25rem,1.15rem + .55vw,1.5rem);line-height:1.62;max-width:34rem;color:var(--kaffee)}
.fliess{font-size:1.1875rem;line-height:1.78;max-width:36rem}
.sek{font-size:1.0625rem;line-height:1.65;color:var(--kaffee)}

/* Aufeinanderfolgende Absätze standen bisher ohne jeden Abstand direkt
   untereinander — darum wirkte der Text gedrängt. Ein Abstand in der Größe
   einer Zeile trennt die Gedanken, ohne den Block auseinanderzureißen. */
.fliess + .fliess,.fliess + .sek,.sek + .fliess,.sek + .sek,
.fliess + .lead,.lead + .fliess,.lead + .lead{margin-top:1.15em}
.fliess + ul,.sek + ul,.fliess + ol,.sek + ol{margin-top:1rem}
ul + .fliess,ol + .fliess,ul + .sek,ol + .sek{margin-top:1.3rem}
.hand{font-family:var(--hand);font-weight:400;font-synthesis:none;line-height:1.15;padding-block:.14em}
.wrap{max-width:1220px;margin-inline:auto;padding-inline:var(--gut)}
.wrap--breit{max-width:1360px}
.mitte{text-align:center}
.mitte .lead{margin-inline:auto}


/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:58px;
  padding:14px 32px;border:0;border-radius:999px;font:inherit;font-size:1.125rem;font-weight:700;
  text-align:center;text-decoration:none;cursor:pointer;background:var(--koralle-tief);color:#fff;
  box-shadow:0 6px 18px rgba(196,48,62,.3);
  transition:transform .25s var(--e),box-shadow .25s var(--e),background-color .25s var(--e)}
.btn:hover{background:#A5252F;transform:translateY(-3px);box-shadow:0 12px 28px rgba(196,48,62,.38)}
.btn:active{transform:translateY(-1px)}
.btn svg{width:20px;height:20px;flex:none;transition:transform .25s var(--e)}
.btn:hover svg{transform:translateX(4px)}
.btn--weiss{background:#fff;color:var(--navy);box-shadow:var(--sch-1)}
.btn--weiss:hover{background:#fff;box-shadow:var(--sch-2)}
.btn--blau{background:var(--hellblau);color:var(--navy);box-shadow:0 6px 18px rgba(138,175,230,.4)}
.btn--blau:hover{background:#7BA3E0}
.btn--voll{width:100%}

/* ---------- Symbole ---------- */
.sym{width:76px;height:76px;flex:none;display:block}
.sym--gross{width:92px;height:92px}
.sym .b{fill:var(--hellblau)}.sym .k{fill:var(--koralle)}

/* ---------- Notizzettel ---------- */
.zettel{position:relative;background:#FCFAF6;padding:2.6rem 2.2rem 2.2rem;box-shadow:var(--sch-2);
  max-width:22rem;transform:rotate(-1.2deg)}
.zettel::before{content:"";position:absolute;top:-15px;left:50%;
  transform:translateX(-50%) rotate(1.5deg);width:104px;height:34px;background:#7E8CA8;
  opacity:.85;box-shadow:0 2px 5px rgba(92,83,70,.22)}
.zettel .hand{font-size:1.7rem;color:var(--navy);display:block;text-align:center}
.zettel cite{display:block;margin-top:1.1rem;text-align:center;font-style:normal;
  font-size:1rem;color:var(--kaffee)}

/* ---------- Karten ---------- */
.karte{background:var(--creme);border-radius:10px;padding:2rem 1.6rem;text-align:center;
  box-shadow:var(--sch-1);transition:transform .45s var(--e),box-shadow .45s var(--e)}
.karte:hover{transform:translateY(-8px);box-shadow:var(--sch-2)}
.karte .sym{width:62px;height:62px;margin:0 auto 1.1rem;transition:transform .45s var(--e)}
.karte:hover .sym{transform:scale(1.1) rotate(-4deg)}
.karte h3{font-size:1.15rem;margin-bottom:.5rem}
.karte p{font-size:1rem;line-height:1.55;color:var(--kaffee)}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:60;background:rgba(251,248,243,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
body.ab .kopf{border-bottom-color:var(--linie);box-shadow:var(--sch-1)}
.kopf__in{max-width:1220px;margin-inline:auto;padding-inline:var(--gut);height:92px;
  display:flex;align-items:center;gap:clamp(.8rem,2.4vw,2rem);transition:height .3s}
body.ab .kopf__in{height:72px}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.logo svg{width:54px;height:54px;transition:transform .3s}
body.ab .logo svg{transform:scale(.88)}
.logo b{font-size:1.18rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
.logo span{display:block;font-size:.82rem;color:var(--kaffee);font-weight:500}
.kopf nav{margin-left:auto;display:flex;gap:clamp(.7rem,1.8vw,1.6rem);align-items:center}
.kopf nav a{position:relative;font-size:1.0625rem;font-weight:600;color:var(--navy);
  text-decoration:none;padding:.4rem 0;white-space:nowrap}
.kopf nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;
  background:var(--koralle);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--e)}
.kopf nav a:hover::after,.kopf nav a.hier::after{transform:scaleX(1)}
.kopf nav a.hier{font-weight:800}
.kopf__tel{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;
  color:var(--koralle-tief);text-decoration:none;font-variant-numeric:tabular-nums}
.kopf__tel svg{width:18px;height:18px}
.burger{display:none;width:48px;height:48px;border:2px solid var(--linie);border-radius:12px;
  background:#fff;cursor:pointer;position:relative;flex:none;margin-left:auto}
.burger i{position:absolute;left:13px;width:20px;height:2.4px;border-radius:2px;background:var(--navy);
  transition:transform .3s var(--e),opacity .2s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
body.menu .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mob{position:fixed;inset:0;top:0;z-index:59;background:var(--creme);padding:110px var(--gut) 2rem;
  opacity:0;visibility:hidden;transform:translateY(-12px);overflow-y:auto;
  transition:opacity .3s var(--e),transform .3s var(--e),visibility .3s}
body.menu .mob{opacity:1;visibility:visible;transform:none}
.mob a{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0;
  border-bottom:1px solid var(--linie);text-decoration:none;font-size:1.35rem;font-weight:700;
  color:var(--navy)}
.mob a svg{width:19px;height:19px;color:var(--kaffee)}
.mob a.btn{margin-top:1.8rem;width:100%;justify-content:center;color:#fff;border-bottom:0;
  font-size:1.2rem;font-variant-numeric:tabular-nums}
.mob a.btn svg{color:#fff;width:21px;height:21px}
/* Das größere Logo braucht Platz. Zwischen 1081 und 1340 px rücken die
   Menüpunkte deshalb enger zusammen, statt aus dem Fenster zu laufen. */
@media (max-width:1340px){
  .kopf nav{gap:clamp(.55rem,1.15vw,1.05rem)}
  .kopf nav a{font-size:1rem}
  .kopf__in{gap:clamp(.7rem,1.4vw,1.2rem)}
}
/* Burger jetzt früher: mit dem größeren Logo passt die volle Navigation
   erst ab etwa 1180 px nebeneinander. */
@media (max-width:1180px){ .kopf nav{display:none} .burger{display:block} }
/* Auf schmalen Handys wird die Wortmarke etwas kleiner, sonst stößt sie
   an den Burger. Die Bildmarke bleibt deutlich größer als vorher. */
@media (max-width:460px){
  .logo svg,.logo__bild{width:46px;height:46px}
  .logo b{font-size:1.05rem}
  .logo span{font-size:.70rem}
}

/* ---------- Fortschritt ---------- */
.fort{position:fixed;top:0;left:0;height:4px;width:100%;transform:scaleX(0);transform-origin:left;
  z-index:95;pointer-events:none;background:linear-gradient(90deg,var(--hellblau),var(--koralle))}

/* ==========================================================================
   HERO
   ========================================================================== */
/* ==========================================================================
   HERO MIT BILD — Foto über die volle Breite, Text darüber
   Der Verlauf sorgt dafür, dass die Schrift auf jedem Bild lesbar bleibt.
   ========================================================================== */
.hero--bild{position:relative;min-height:min(88vh,46rem);display:flex;align-items:flex-end;
  overflow:hidden;color:#fff;background:var(--navy)}
/* Das Foto liegt als oberste Ebene ÜBER dem Farbverlauf, nicht an
   dessen Stelle. Fehlt die Bilddatei oder darf sie nicht geladen werden,
   bleibt die Ebene leer und der Verlauf trägt den Kopf weiter — der
   Besucher sieht nie eine leere blaue Fläche.
   VIEW.start setzt --herofoto inline. Ohne Foto bleibt der Wert »none«. */
.hero__grund{position:absolute;inset:0;z-index:0;background-color:var(--navy-tief);
  background-image:
    var(--herofoto, none),
    radial-gradient(60% 50% at 70% 30%, rgba(214,196,166,.55), transparent 70%),
    linear-gradient(160deg,#7E8B72 0%,#5D6B57 40%,#38402F 100%);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--fokus,62% 52%),center,center}

/* Der Schleier über dem Foto.
   Das Händedruck-Foto ist ausgesprochen hell — links muss der Schleier
   kräftig sein, damit die weisse Schrift trägt; nachgemessen 12,1:1 am
   linken Rand und 7,4:1 dort, wo der Fliesstext endet. Beides deutlich
   über den 4,5:1, die die Barrierefreiheit verlangt.
   Nach rechts läuft er fast auf null aus, damit der Händedruck offen
   im Bild steht und nicht hinter einer blauen Scheibe verschwindet. */
.hero__grund::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(103deg, rgba(10,34,71,.90) 0%, rgba(10,34,71,.74) 34%,
      rgba(10,34,71,.34) 62%, rgba(13,44,92,.14) 100%),
    linear-gradient(transparent 46%, rgba(8,24,50,.74))}

/* Text rechts statt links. Bei b15 stehen Mitarbeiterin und Kundin mit
   der PESA-Tasche in der linken Bildhälfte — läge der Text dort, würde
   der Schleier genau das Motiv zudecken, das die Aufnahme wertvoll macht.
   Rechts ist die Küchenwand leer und hell: dort trägt der Text, links
   bleibt das Bild offen. Ab 900 px, darunter steht der Text ohnehin
   über der vollen Breite. */
@media (min-width:900px){
  /* Alle Teile des Hero-Textes bilden eine Spalte gleicher Breite und sind
     darin zentriert. Vorher hatte jedes Element seine eigene Höchstbreite
     (Überschrift 16ch, Lead 40ch) und wurde einzeln nach rechts geschoben —
     dadurch stand der Lead 92 px weiter links als alles andere. */
  .hero--rechts .hero__in > *{margin-left:auto;margin-right:0;
    width:100%;max-width:38rem;text-align:center}
  .hero--rechts .hero__in > h1,
  .hero--rechts .hero__in > .lead{max-width:38rem}
  .hero--rechts .hero__in > .bchip{margin-inline:auto;width:fit-content}
  .hero--rechts .hero__akt{justify-content:center}
  /* Der Haken gehört vor das erste Wort, nicht als eigene Spalte neben einen
     zweizeiligen Text — sonst steht er abgetrennt am linken Rand. */
  .hero--rechts .hero__unten{display:block}
  .hero--rechts .hero__unten svg{display:inline-block;vertical-align:-.25em;
    margin-right:.45rem}
  /* Der seitliche Verlauf machte aus der hellen Wand rechts einen dunkelblauen
     Block — das Foto verschwand dahinter. Stattdessen eine sehr große, weiche
     Vignette: dunkel genau dort, wo die Schrift steht, und nach außen so
     allmählich auslaufend, dass ihre Kante außerhalb des Bildes liegt. Ohne
     diese Größe zeichnet sie einen sichtbaren Bogen auf die glatte Wand.
     Gemessen: Überschrift 4,6:1, Fließtext 5,3:1 im ungünstigsten Punkt
     (nötig wären 3,0 bzw. 4,5). */
  .hero--rechts .hero__grund::after{background:
    radial-gradient(ellipse 100% 135% at 36% 50%,
      rgba(8,24,50,.80) 0%, rgba(8,24,50,.66) 26%, rgba(8,24,50,.46) 52%,
      rgba(8,24,50,.30) 76%, rgba(8,24,50,.22) 100%),
    linear-gradient(transparent 56%, rgba(8,24,50,.36))}
  .hero--rechts .hero__notiz{left:clamp(1rem,4vw,3.5rem);right:auto}
}

/* Hochkant ist die Textspalte so breit wie das Bild. Ein seitlicher
   Verlauf hilft dort nicht — es braucht einen senkrechten. */
@media (max-width:760px){
  .hero__grund{background-position:var(--fokusm,58% 60%),center,center}
  .hero__grund::after{background:
    linear-gradient(rgba(10,34,71,.58) 0%, rgba(10,34,71,.48) 32%,
      rgba(8,24,50,.84) 66%, rgba(8,24,50,.93) 100%)}
}
/* Ein Schatten direkt an der Schrift hält sie auch über helleren
   Bildstellen lesbar — ohne das ganze Foto zuzudecken. */
.hero--bild h1,.hero--bild .lead{text-shadow:0 2px 18px rgba(8,24,50,.62),0 1px 3px rgba(8,24,50,.5)}
.hero--bild .hero__notiz{text-shadow:0 1px 10px rgba(8,24,50,.6)}
.hero__marke{position:absolute;right:-2%;bottom:-6%;width:min(46%,30rem);z-index:1;
  opacity:.10;pointer-events:none}
.hero__marke .sym{width:100%;height:auto}
.hero__notiz{position:absolute;right:clamp(1rem,4vw,3.5rem);top:clamp(5.5rem,9vw,7rem);
  z-index:3;max-width:17rem;display:none}
.hero__notiz.zettel{padding:2.2rem 1.6rem 1.6rem;transform:rotate(-2.5deg)}
.hero__notiz .hand{font-size:1.75rem;line-height:1.1}
@media (min-width:1100px){ .hero__notiz{display:block} }
.hero--bild .hero__in{position:relative;z-index:2;display:block;
  padding-block:clamp(2rem,3.8vw,3.4rem)}
.hero--bild h1{color:#fff;max-width:16ch}
.hero--bild .lead{color:rgba(255,255,255,.9);max-width:40ch}
.hero--bild .hero__unten{color:rgba(255,255,255,.82)}
.hero--bild .hero__unten .sym .b{fill:#C3D8F2}
.hero__hin{position:absolute;left:1rem;bottom:.7rem;z-index:4;font-size:.78rem;
  color:rgba(255,255,255,.62)}

.hero{min-height:min(92vh,50rem);display:flex;align-items:center;position:relative;overflow:hidden;
  padding-block:clamp(2rem,5vw,4rem) clamp(3rem,6vw,5rem)}
.hero::before{content:"";position:absolute;inset:-25%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38rem 32rem at 22% 28%, rgba(138,175,230,.34), transparent 66%),
    radial-gradient(30rem 28rem at 82% 72%, rgba(237,73,88,.16), transparent 64%),
    radial-gradient(26rem 24rem at 62% 12%, rgba(195,216,242,.4), transparent 62%);
  animation:licht 26s ease-in-out infinite alternate}
@keyframes licht{0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.07)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.03)}}
.treiber{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.treiber span{position:absolute;opacity:.13;animation:treiben ease-in-out infinite}
@keyframes treiben{0%{transform:translate3d(0,0,0) rotate(0)}
  25%{transform:translate3d(14px,-22px,0) rotate(4deg)}
  50%{transform:translate3d(-10px,-38px,0) rotate(-3deg)}
  75%{transform:translate3d(-18px,-16px,0) rotate(3deg)}
  100%{transform:translate3d(0,0,0) rotate(0)}}
.hero__in{position:relative;z-index:2;max-width:1220px;margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .h1{margin-bottom:1.9rem}
.hero .lead{margin-bottom:2.7rem}
.hero__akt{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__unten{display:flex;align-items:center;gap:.8rem;margin-top:2.1rem;font-size:1.0625rem;color:var(--kaffee)}
/* ---------- Akzente im Hero ---------- */
/* Ein Vertrauensnachweis gleich oben: die echten Google-Bewertungen als
   Plakette. Dunkles Glas, damit die weiße Schrift auf jedem Bildausschnitt
   trägt — gemessen 8,9:1. */
.bchip{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.5rem;
  width:fit-content;max-width:100%;margin-block:0 1.5rem;
  padding:.46rem 1.05rem;border-radius:999px;font-size:.95rem;color:#fff;
  background:rgba(10,30,62,.58);border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(8,24,50,.28)}
.bchip b{font-weight:800;font-variant-numeric:tabular-nums}
.bchip__s{color:#FFC861;letter-spacing:1.5px;font-size:.92rem;
  text-shadow:0 1px 3px rgba(8,24,50,.5)}

/* Ein Pinselstrich unter dem ersten Wort — der einzige Farbakzent in der
   Überschrift, deshalb trägt er. Er liegt unter der Schriftlinie, nicht
   darüber, damit kein Buchstabe angeschnitten wird. */
.hero h1 .wort:first-child{position:relative;display:inline-block}
.hero h1 .wort:first-child::after{content:"";position:absolute;left:-1%;right:-1%;
  bottom:-.01em;height:.115em;border-radius:999px;
  background:linear-gradient(90deg,var(--koralle),#FF7A68)}

/* Der Hauptknopf bekommt einen warmen Schein — er ist das Ziel der Seite. */
.hero .hero__akt .btn:not(.btn--weiss){
  box-shadow:0 10px 34px rgba(237,73,88,.52),0 2px 8px rgba(8,24,50,.28)}
.hero .hero__akt .btn:not(.btn--weiss):hover{
  box-shadow:0 16px 42px rgba(237,73,88,.62),0 3px 10px rgba(8,24,50,.3)}
.hero .hero__akt .btn--weiss{box-shadow:0 10px 30px rgba(8,24,50,.28)}

.hero__b{position:relative}
.hero__foto{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/4.2;
  background:linear-gradient(150deg,var(--hellblau-hell),var(--hellblau) 55%,#5C86C4);
  box-shadow:var(--sch-3)}
.hero__foto span{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.6rem;
  font-size:1rem;color:#fff;background:linear-gradient(transparent 40%,rgba(13,44,92,.72))}
.hero__zettel{position:absolute;left:-2.5rem;bottom:2.5rem;max-width:16rem;z-index:3}
.hero__zettel .hand{font-size:1.35rem}
.wort{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);
  transition:opacity .8s var(--e),transform .9s var(--e)}
.los .wort{opacity:1;transform:none}
.stufe{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e),transform .8s var(--e)}
.los .stufe{opacity:1;transform:none}
.los .s0{transition-delay:.18s}
.los .s1{transition-delay:.55s}.los .s2{transition-delay:.72s}.los .s3{transition-delay:.88s}
.hero__b{opacity:0;transform:translateY(34px) scale(.97);
  transition:opacity 1s var(--e),transform 1.1s var(--e);transition-delay:.35s}
.los .hero__b{opacity:1;transform:none}
.runter{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;
  display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.95rem;
  font-weight:600;letter-spacing:.01em;color:#fff;text-shadow:0 1px 10px rgba(8,24,50,.75),0 1px 2px rgba(8,24,50,.6);
  background:none;border:0;cursor:pointer;opacity:0;padding:.4rem .9rem;
  transition:opacity .8s var(--e) 1.3s}
.runter svg{filter:drop-shadow(0 1px 4px rgba(8,24,50,.7))}
.los .runter{opacity:1}
.runter svg{width:22px;height:22px;animation:tupf 2.4s ease-in-out infinite}
@keyframes tupf{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- Seitenkopf für Unterseiten ---------- */
.skopf{position:relative;overflow:hidden;color:#fff;padding-block:clamp(3.5rem,7vw,6rem);
  background:linear-gradient(148deg,#123A73,#0D2C5C 48%,#081C3C)}
.skopf__bild{position:absolute;inset:0;z-index:0;
  background:radial-gradient(46rem 34rem at 74% 22%, rgba(138,175,230,.5), transparent 66%),
             radial-gradient(34rem 28rem at 18% 82%, rgba(237,73,88,.3), transparent 62%);
  animation:atmen 30s ease-in-out infinite alternate}
@keyframes atmen{0%{transform:scale(1)}100%{transform:scale(1.1) translate3d(-2%,1.5%,0)}}
.skopf__hin{position:absolute;right:1rem;top:1rem;z-index:4;font-size:.8rem;
  background:rgba(0,0,0,.34);border-radius:8px;padding:.3rem .65rem;color:#fff}
.skopf__in{position:relative;z-index:4;max-width:1220px;margin-inline:auto;padding-inline:var(--gut)}
.skopf h1{font-size:clamp(2.2rem,1.4rem + 3.6vw,3.6rem);color:#fff;margin-bottom:1rem;max-width:22ch}
.skopf p{font-size:clamp(1.1rem,1.02rem + .5vw,1.35rem);color:rgba(255,255,255,.86);
  max-width:48ch;line-height:1.55}
.skopf .hand{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);color:var(--hellblau-hell);
  display:block;margin-bottom:.3rem}

/* ---------- Linien ---------- */
.linien{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55}
.linien svg{width:100%;height:100%;display:block}
.linien path{fill:none;stroke:var(--hellblau);stroke-width:1.4;opacity:.45;stroke-dasharray:14 22;
  animation:wandern 42s linear infinite}
.linien path:nth-child(2){stroke:var(--koralle);opacity:.3;animation-duration:56s;
  animation-direction:reverse;stroke-dasharray:8 30}
.linien path:nth-child(3){opacity:.3;animation-duration:66s;stroke-dasharray:20 26}
.skopf .linien path{stroke:#fff;opacity:.26}
.skopf .linien path:nth-child(2){stroke:var(--koralle);opacity:.32}
@keyframes wandern{to{stroke-dashoffset:-620}}
section.hatlinien{position:relative}
section.hatlinien > *:not(.linien){position:relative;z-index:2}

/* ==========================================================================
   MAGAZIN
   ========================================================================== */
.mag{padding-block:var(--luft)}
.mag__g{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr))}
.art{background:var(--creme);border-radius:12px;overflow:hidden;box-shadow:var(--sch-1);cursor:pointer;
  border:2px solid transparent;display:flex;flex-direction:column;
  transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .3s}
.art:hover{transform:translateY(-7px);box-shadow:var(--sch-2);border-color:var(--hellblau)}
.art.weg{display:none}
.art--gross{grid-column:span 2}
@media (max-width:760px){ .art--gross{grid-column:span 1} }
.art__a{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.art__a:focus-visible{outline:3px solid var(--koralle-tief);outline-offset:3px;border-radius:12px}
.art__bild{position:relative;overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(140deg,var(--hellblau-hell),var(--hellblau) 60%,#5C86C4)}
.art--gross .art__bild{aspect-ratio:16/7}
/* Jeder Artikel hat seine eigene Zeichnung statt eines wiederholten Icons */
.artkunst{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .7s var(--e)}
.art:hover .artkunst{transform:scale(1.045)}
.art__bild{background:linear-gradient(150deg,#F0EADF,#E2DAC9 62%,#D2C7B0)}
.art--gross .art__bild{background:linear-gradient(150deg,#EDE7F0,#DDE3EE 62%,#C6D2E6)}
.art:nth-child(3n) .art__bild{background:linear-gradient(150deg,#E9EFE6,#D6E1D2 62%,#BECBB8)}
.art:nth-child(4n) .art__bild{background:linear-gradient(150deg,#F2E8E4,#E8D8D2 62%,#D8C0B8)}
.leser__kopf .artkunst{position:absolute;right:0;top:0;width:46%;height:100%;opacity:.22;
  pointer-events:none}
.art__mark{position:absolute;left:1rem;top:1rem;background:var(--koralle-tief);color:#fff;
  border-radius:999px;padding:.32rem .85rem;font-size:.8rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase}
/* Der Knaller: große Zahl auf dem Bild */
.art__knall{position:absolute;left:1.2rem;bottom:1rem;color:#fff;line-height:1;
  text-shadow:0 2px 14px rgba(8,28,60,.45)}
.art__knall b{display:block;font-size:clamp(2.4rem,7vw,3.6rem);font-weight:800;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.art--gross .art__knall b{font-size:clamp(3rem,8vw,4.6rem)}
.art__knall span{display:block;font-size:.95rem;font-weight:700;opacity:.94;margin-top:.15rem}
.art__k{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.art__k h2{font-size:1.3rem;margin-bottom:.6rem;line-height:1.28}
.art--gross .art__k h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.art__k p{font-size:1.02rem;line-height:1.6;color:var(--kaffee);flex:1}
.art__f{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-size:.92rem;color:var(--kaffee)}
.art__f svg{width:16px;height:16px;color:var(--hellblau)}
.art__f .los2{margin-left:auto;font-weight:700;color:var(--koralle-tief);
  display:inline-flex;align-items:center;gap:.35rem}
.art__f .los2 svg{width:15px;height:15px;color:inherit;transition:transform .3s var(--e)}
.art:hover .art__f .los2 svg{transform:translateX(4px)}

/* Die Themenknöpfe dürfen umbrechen. Eine seitlich schiebbare Reihe ohne
   Rollbalken versteckt auf dem Handy die hinteren Themen, ohne dass man es
   ahnt — mit vier Knöpfen ist eine zweite Zeile die ehrlichere Lösung. */
.filter{display:flex;flex-wrap:wrap;gap:.6rem .5rem;padding-bottom:.4rem;margin-bottom:2rem}
.filter button{flex:none;min-height:48px;padding:0 1.15rem;border:2px solid var(--linie);
  border-radius:999px;background:#fff;font:inherit;font-size:1rem;font-weight:600;
  color:var(--navy);cursor:pointer;white-space:nowrap;transition:all .2s var(--e)}
.filter button:hover{border-color:var(--hellblau)}
.filter button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- Leseansicht ---------- */
.leser{position:fixed;inset:0;z-index:130;background:rgba(13,44,92,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:center;
  align-items:flex-start;padding:clamp(.5rem,3vw,2.5rem);opacity:0;visibility:hidden;
  transition:opacity .35s var(--e),visibility .35s}
.leser.auf{opacity:1;visibility:visible}
.leser__k{background:var(--creme);border-radius:14px;max-width:46rem;width:100%;max-height:100%;
  overflow-y:auto;box-shadow:var(--sch-3);transform:translateY(28px);transition:transform .4s var(--e)}
.leser.auf .leser__k{transform:none}
.leser__kopf{position:relative;padding:clamp(1.6rem,4vw,2.6rem);color:#fff;
  background:linear-gradient(150deg,#123A73,#0D2C5C);overflow:hidden}
.leser__kopf .art__mark{position:static;display:inline-block;margin-bottom:.9rem}
.leser__kopf h2{font-size:clamp(1.55rem,1.2rem + 1.6vw,2.3rem);color:#fff;margin-bottom:.7rem;
  position:relative;z-index:2}
.leser__meta{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.95rem;color:var(--hellblau-hell);
  position:relative;z-index:2}
.leser__meta span{display:inline-flex;align-items:center;gap:.4rem}
.leser__meta svg{width:15px;height:15px}
.leser__zu{position:absolute;right:1rem;top:1rem;z-index:5;width:46px;height:46px;border:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:grid;
  place-items:center;transition:background-color .2s}
.leser__zu:hover{background:rgba(255,255,255,.3)}
.leser__zu svg{width:20px;height:20px}
.leser__in{padding:clamp(1.6rem,4vw,2.6rem)}
.leser__in h3{font-size:1.32rem;margin:2rem 0 .7rem}
.leser__in h3:first-child{margin-top:0}
.leser__in p{margin-bottom:1.1rem;line-height:1.75}
.leser__in ul{margin:0 0 1.2rem;display:grid;gap:.55rem}
.leser__in li{padding-left:1.5rem;position:relative;line-height:1.65}
.leser__in li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:8px;
  border-radius:50%;background:var(--hellblau)}
.merk{background:#FDF3F4;border-left:4px solid var(--koralle-tief);border-radius:0 14px 14px 0;
  padding:1.1rem 1.3rem;margin:1.4rem 0}
.merk > b{display:block;color:var(--koralle-tief);margin-bottom:.3rem}
.merk p{margin:0;font-size:1.05rem}
.zahl{background:var(--navy);color:#fff;border-radius:16px;padding:1.3rem 1.5rem;margin:1.4rem 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.3rem}
/* Nur die große Zahl selbst ist das direkte Kind — fett gesetzte Wörter im
   Erklärtext dürfen nicht dieselbe Größe bekommen, sonst sprengt ein
   langes Wort wie „Pflegeunterstützungsgeld" auf dem Handy die Seite. */
.zahl > b{font-size:2.2rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;flex:none}
.zahl span{font-size:1.02rem;color:#C9D3E4;line-height:1.45;flex:1 1 14rem;min-width:0}
.zahl span b{font-size:inherit;font-weight:700;color:#fff}
.leser__cta{background:var(--sand);border-radius:18px;padding:1.5rem;margin-top:2rem;text-align:center}
.leser__cta p{font-size:1.05rem;margin-bottom:1rem}
.stand{margin-top:1.6rem;font-size:.92rem;color:var(--kaffee);line-height:1.6;
  border-top:1px solid var(--linie);padding-top:1.1rem}

/* ==========================================================================
   LEISTUNGSROLLE + DIREKTWAHL
   ========================================================================== */
.rolle{background:var(--papier);padding-block:var(--luft);overflow:hidden}
.rolle__fenster{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rolle__band{display:flex;gap:1.2rem;width:max-content;animation:rollen 64s linear infinite}
.rolle__fenster:hover .rolle__band,.rolle__fenster:focus-within .rolle__band{animation-play-state:paused}
@keyframes rollen{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rolle .karte{flex:0 0 clamp(14rem,20vw,17.5rem);cursor:pointer;border:2px solid transparent}
.rolle .karte:hover{border-color:var(--hellblau)}
.karte__mehr{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.95rem;
  font-weight:700;color:var(--koralle-tief)}
.karte__mehr svg{width:16px;height:16px;transition:transform .3s var(--e)}
.karte:hover .karte__mehr svg{transform:rotate(90deg)}
.wahl{max-width:1220px;margin:1.6rem auto 0;padding-inline:var(--gut);display:flex;
  align-items:center;gap:.6rem}
.wahl__pfeil{width:52px;height:52px;flex:none;border:2px solid var(--linie);border-radius:50%;
  background:#fff;color:var(--navy);cursor:pointer;display:grid;place-items:center;
  transition:border-color .2s,background-color .2s}
.wahl__pfeil:hover{border-color:var(--navy);background:var(--creme)}
.wahl__pfeil svg{width:20px;height:20px}
.wahl__pfeil.links svg{transform:rotate(180deg)}
.wahl__spur{flex:1;display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.wahl__spur::-webkit-scrollbar{display:none}
.wahl__spur button{flex:none;min-height:48px;padding:0 1.1rem;border:2px solid var(--linie);
  border-radius:999px;background:#fff;font:inherit;font-size:1rem;font-weight:600;color:var(--navy);
  cursor:pointer;white-space:nowrap;transition:all .2s var(--e)}
.wahl__spur button:hover{border-color:var(--hellblau)}
.wahl__spur button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:620px){ .wahl__pfeil{display:none} }
.detail{max-width:1220px;margin:0 auto;padding-inline:var(--gut);display:grid;
  grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.detail.auf{grid-template-rows:1fr;margin-top:1.8rem}
.detail__in{overflow:hidden}
.detail__k{background:var(--creme);border-radius:12px;padding:clamp(1.6rem,3.5vw,2.6rem);
  box-shadow:var(--sch-2);display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.2rem);align-items:start}
.detail__k .sym{width:96px;height:96px}
.detail__k p{font-size:1.1rem;line-height:1.7;color:var(--kaffee)}
.detail__zu{margin-top:1.2rem;min-height:48px;padding:0 20px;border:2px solid var(--linie);
  border-radius:999px;background:#fff;font:inherit;font-weight:700;color:var(--navy);cursor:pointer}
@media (max-width:620px){ .detail__k{grid-template-columns:minmax(0,1fr)} }

/* ==========================================================================
   ZEITSTRAHL
   ========================================================================== */
.strahl__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);
  position:relative}
.strahl__bahn{position:absolute;top:34px;left:12%;right:12%;height:4px;border-radius:99px;
  background:var(--linie);overflow:hidden}
.strahl__bahn i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--hellblau),var(--koralle));transition:width 1.6s var(--e)}
.st{position:relative;text-align:center}
.st__p{width:68px;height:68px;border-radius:50%;margin:0 auto 1.4rem;display:grid;place-items:center;
  background:var(--creme);border:4px solid var(--linie);color:var(--linie);font-size:1.45rem;font-weight:800;
  position:relative;z-index:2;
  transition:border-color .5s var(--e),color .5s var(--e),background-color .5s var(--e),transform .5s var(--e)}
.st.an .st__p{border-color:var(--hellblau);color:var(--navy);transform:scale(1.06)}
.st.fertig .st__p{background:var(--hellblau);border-color:var(--hellblau);color:var(--navy)}
.st:last-child.fertig .st__p{background:var(--koralle-tief);border-color:var(--koralle-tief);color:#fff}
.st h3{font-size:1.3rem;margin-bottom:.6rem;opacity:.6;transition:opacity .5s var(--e)}
.st p{font-size:1.0625rem;line-height:1.65;color:var(--kaffee);max-width:24rem;margin-inline:auto;
  opacity:.6;transition:opacity .5s var(--e)}
.st.an h3,.st.an p,.st.fertig h3,.st.fertig p{opacity:1}
@media (max-width:820px){
  .strahl__g{grid-template-columns:minmax(0,1fr);gap:0}
  .strahl__bahn{top:0;bottom:0;left:33px;right:auto;width:4px;height:auto}
  .strahl__bahn i{width:100%!important;height:0;transition:height 1.6s var(--e)}
  .st{display:grid;grid-template-columns:68px minmax(0,1fr);gap:1.2rem;text-align:left;padding-bottom:2.5rem}
  .st__p{margin:0;grid-row:span 2}
  .st h3,.st p{grid-column:2}
  .st p{margin-inline:0}
}

/* ==========================================================================
   RECHNER
   ========================================================================== */
.rech__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.rmerk{margin-top:1.6rem;background:#FDF3F4;border-left:4px solid var(--koralle-tief);
  border-radius:0 14px 14px 0;padding:1.1rem 1.3rem;max-width:34rem}
.rmerk > b{display:flex;align-items:center;gap:.6rem;color:var(--koralle-tief);font-weight:800;
  margin-bottom:.35rem}
.rmerk > b svg{width:20px;height:20px;flex:none}
.rmerk p{font-size:1rem;line-height:1.6;color:var(--kaffee)}
.rbox{background:var(--navy);color:#fff;border-radius:14px;padding:clamp(1.8rem,4vw,2.6rem);
  box-shadow:var(--sch-2)}
.rbox h3{color:#fff;font-size:1.3rem;margin-bottom:.4rem}
.rbox > p{color:#C9D3E4;font-size:1rem;margin-bottom:1.4rem}
.rgrade{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.5rem}
.rgrade button{flex:1;min-width:4rem;min-height:62px;border:2px solid rgba(255,255,255,.28);
  border-radius:14px;background:transparent;color:#fff;font:inherit;font-weight:800;font-size:1.1rem;
  cursor:pointer;display:grid;place-items:center;line-height:1.2;
  transition:background-color .2s,border-color .2s,transform .2s var(--e)}
.rgrade button small{display:block;font-size:.7rem;font-weight:500;color:#A9BBD6}
.rgrade button:hover{border-color:var(--hellblau);transform:translateY(-2px)}
.rgrade button[aria-pressed="true"]{background:var(--hellblau);border-color:var(--hellblau);color:var(--navy)}
.rgrade button[aria-pressed="true"] small{color:#204070}
.rkacheln{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.9rem}
.rk{background:rgba(255,255,255,.09);border-radius:14px;padding:.9rem 1rem}
.rk span{display:block;font-size:.92rem;color:#C9D3E4;line-height:1.3}
.rk b{display:block;font-size:1.5rem;font-weight:800;margin:.25rem 0 .2rem;
  font-variant-numeric:tabular-nums;line-height:1.1}
.rk small{display:block;font-size:.78rem;color:#8FA5C6;line-height:1.35}
.rsumme{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--hellblau);color:var(--navy);border-radius:14px;padding:.9rem 1.2rem}
.rsumme span{font-size:1rem;font-weight:700;line-height:1.25}
.rsumme b{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rzeile{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-top:.9rem;
  padding-top:.9rem;border-top:1px solid rgba(255,255,255,.14)}
.rzeile span{font-size:.95rem;color:#C9D3E4;line-height:1.4}
.rzeile span b{color:#fff}
.rzeile small{display:block;font-size:.82rem;color:#8FA5C6;line-height:1.4;margin-top:.2rem}
.rzeile em{font-style:normal;font-size:1.05rem;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.anerk{display:flex;gap:.75rem;align-items:flex-start;margin-top:1rem;padding:.9rem 1.1rem;
  border-radius:10px;background:rgba(138,175,230,.16);border:1px solid rgba(138,175,230,.32);
  font-size:.98rem;line-height:1.55;color:#D8CFC0}
.anerk b{color:#fff}
.anerk svg{width:19px;height:19px;color:var(--hellblau);flex:none;margin-top:.18rem}
.rstd{margin-top:.9rem;background:rgba(255,255,255,.09);border-radius:10px;padding:1rem 1.2rem}
.rstd > b{display:flex;align-items:center;gap:.55rem;color:var(--hellblau);font-size:1rem;
  margin-bottom:.45rem}
.rstd b svg{width:18px;height:18px;flex:none}
.rstd p{font-size:.96rem;line-height:1.55;color:#C9D3E4;margin-bottom:.5rem}
.rstd p b{display:inline;color:#fff;font-size:inherit;margin:0}
.rstd .rklein{font-size:.86rem;color:#8FA5C6;margin-bottom:0}
.rmehr{margin-top:1rem;border-top:1px solid rgba(255,255,255,.14);padding-top:.9rem}
.rmehr summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  font-size:.98rem;font-weight:700;color:var(--hellblau);min-height:44px}
.rmehr summary::-webkit-details-marker{display:none}
.rmehr summary svg{width:16px;height:16px;transition:transform .3s var(--e)}
.rmehr[open] summary svg{transform:rotate(45deg)}

/* ---- Leistungsseite: Kopf-Button, Leistungs-Untertitel, Paragrafen-Akkordeon ---- */
.skopf__cta{margin-top:clamp(1.6rem,3vw,2.2rem)}

/* Der warme Halbsatz über dem Fliesstext jeder Leistung */
.lunter{font-size:clamp(1.1rem,2.1vw,1.38rem);line-height:1.35;
  color:var(--koralle-tief);font-weight:700;margin-bottom:1.1rem}

.lakk{max-width:52rem;margin-inline:auto;border-top:1px solid var(--linie)}
.lakk__i{border-bottom:1px solid var(--linie)}
.lakk__i summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1.2rem;padding:1.3rem .2rem;
  transition:color .25s var(--e)}
.lakk__i summary::-webkit-details-marker{display:none}
.lakk__i summary:hover{color:var(--koralle-tief)}
.lakk__i summary:focus-visible{outline:3px solid var(--hellblau);outline-offset:3px;
  border-radius:4px}
.lakk__t{font-weight:600;font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:1.35;
  color:var(--navy);display:block}
.lakk__i summary:hover .lakk__t{color:var(--koralle-tief)}
.lakk__tr{display:block;font-style:normal;font-weight:500;font-size:.76rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--kaffee);opacity:.7;
  margin-top:.35rem}
.lakk__z{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--linie);border-radius:50%;color:var(--koralle-tief);
  transition:transform .35s var(--e),background .25s var(--e),border-color .25s var(--e)}
.lakk__z svg{width:15px;height:15px}
.lakk__i[open] .lakk__z{transform:rotate(45deg);background:var(--koralle-tief);
  color:#fff;border-color:var(--koralle-tief)}
.lakk__in{padding:0 .2rem 1.7rem;max-width:46rem;animation:lakkAuf .45s var(--e) both}
.lakk__in > *:last-child{margin-bottom:0}
@keyframes lakkAuf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lakk__in{animation:none}}
.rmehr__in p{font-size:.94rem;line-height:1.6;color:#C9D3E4;margin-bottom:.7rem}
.rmehr__in p b{color:#fff}
.rmehr__in a{color:var(--hellblau-hell);text-decoration:underline;text-underline-offset:3px}
.rmehr__in .rstand{color:#8FA5C6;font-size:.88rem;margin-bottom:0}
.rbox .btn{margin-top:1.4rem;width:100%}
.rnicht{display:none;font-size:1rem;color:#C9D3E4;line-height:1.6}
.rbox.pg0 .rerg{display:none}.rbox.pg0 .rnicht{display:block}
@media (max-width:900px){ .rech__in{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){ .rkacheln{grid-template-columns:1fr} }

/* ==========================================================================
   FINDER
   ========================================================================== */
.fbox{background:var(--creme);border-radius:14px;padding:clamp(1.8rem,4vw,3.2rem);max-width:52rem;
  margin-inline:auto;box-shadow:var(--sch-2)}
.fbal{height:6px;background:var(--sand);border-radius:99px;margin-bottom:2rem;overflow:hidden}
.fbal i{display:block;height:100%;width:0;background:var(--koralle-tief);border-radius:99px;
  transition:width .5s var(--e)}
.fschritt{display:none}
.fschritt.aktiv{display:block;animation:fein .5s var(--e)}
@keyframes fein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.fschritt h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);margin-bottom:.6rem}
.fschritt > p{color:var(--kaffee);margin-bottom:1.6rem}
.fopt{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.fopt button{display:flex;align-items:center;gap:.9rem;text-align:left;min-height:66px;
  padding:1rem 1.2rem;border:2px solid var(--linie);border-radius:14px;background:#fff;font:inherit;
  font-size:1.0625rem;font-weight:600;color:var(--navy);cursor:pointer;
  transition:border-color .2s,background-color .2s,transform .2s var(--e)}
.fopt button:hover{border-color:var(--hellblau);background:var(--creme);transform:translateY(-2px)}
.fopt button[aria-pressed="true"]{border-color:var(--koralle-tief);background:#FDF3F4}
.fopt .hk{width:26px;height:26px;border-radius:50%;border:2px solid var(--linie);flex:none;
  display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.fopt button[aria-pressed="true"] .hk{background:var(--koralle-tief);border-color:var(--koralle-tief)}
.fopt .hk svg{width:14px;height:14px;color:#fff;opacity:0;transition:opacity .2s}
.fopt button[aria-pressed="true"] .hk svg{opacity:1}
.fnav{display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}
.fzurueck{min-height:58px;padding:0 24px;border:2px solid var(--linie);border-radius:999px;
  background:#fff;font:inherit;font-weight:700;color:var(--navy);cursor:pointer}
.ferg{display:none}
.ferg.aktiv{display:block;animation:fein .55s var(--e)}
.ferg__t{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.6rem}
.ferg__t .sym{width:74px;height:74px}
.ferg ul{display:grid;gap:.6rem;margin:1.4rem 0}
.ferg li{display:flex;gap:.7rem;align-items:flex-start;font-size:1.0625rem}
.ferg li svg{width:20px;height:20px;color:var(--koralle-tief);flex:none;margin-top:.3rem}
.ferg__box{background:var(--creme);border-radius:16px;padding:1.3rem 1.5rem;margin-top:1.4rem}
.ferg__box b{display:block;margin-bottom:.3rem}
.ferg__box p{font-size:1rem;color:var(--kaffee)}

/* ==========================================================================
   WEITERE BAUSTEINE
   ========================================================================== */
.vier__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.vier__i{text-align:center}
.vier__i .sym{margin:0 auto 1rem;transition:transform .45s var(--e)}
.vier__i:hover .sym{transform:translateY(-8px) scale(1.06)}
.vier__i p{font-size:1.0625rem;font-weight:600;line-height:1.5;max-width:20rem;margin-inline:auto}
@media (max-width:900px){ .vier__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.5rem} }

.kost{position:relative;min-height:clamp(28rem,48vw,38rem);display:flex;align-items:center;
  background:linear-gradient(115deg,#EAF2E4,#D9E8D2 40%,#BFD6C6);overflow:hidden}
.kost__foto{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:1.6rem;font-size:1rem;color:#3B4A38}
.kost__karte{position:relative;z-index:2;background:rgba(251,248,243,.92);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);border-radius:10px;padding:clamp(2rem,4vw,3rem);max-width:32rem;
  box-shadow:var(--sch-2)}
.kost__l li{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1rem;font-size:1.125rem}
.kost__l svg{width:22px;height:22px;flex:none;margin-top:.25rem;color:var(--koralle)}
@media (max-width:900px){ .kost{min-height:0;padding-block:3rem} .kost__karte{max-width:none} }

.band{background:var(--navy);color:#fff;padding-block:var(--luft)}
.band__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.band h2{color:#fff;font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);line-height:1.18}
.band blockquote{margin:0;font-size:1.1875rem;line-height:1.75;color:#D6DFEE;
  border-left:3px solid var(--hellblau);padding-left:1.6rem}
.band__sig{margin-top:1.4rem}
.band__sig .hand{font-size:2.4rem;color:var(--navy);display:block}
.band__sig span{font-size:1rem;color:var(--kaffee)}
.band .band__sig .hand{color:#fff}
.band .band__sig span{color:var(--hellblau)}
@media (max-width:900px){ .band__in{grid-template-columns:minmax(0,1fr)} }

.bew__spur{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;scrollbar-width:none}
.bew__spur::-webkit-scrollbar{display:none}
.rez{flex:0 0 clamp(17rem,29vw,21rem);scroll-snap-align:start;background:var(--creme);border-radius:10px;
  padding:1.6rem;box-shadow:var(--sch-1);opacity:0;transform:translateX(44px);
  transition:opacity .6s var(--e),transform .6s var(--e)}
.rez.da{opacity:1;transform:none}
.rez__k{display:flex;align-items:center;gap:.75rem;margin-bottom:.7rem}
.rez__av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:#fff;font-weight:700;font-size:1.1rem}
.rez__k b{display:block;font-size:1.0625rem;font-weight:700;line-height:1.3}
.rez__k span{font-size:.9rem;color:var(--kaffee)}
/* Das helle Gold kam auf dem cremefarbenen Grund nur auf 1,8:1 — die Sterne
   tragen aber die Bewertung, also brauchen sie die 3:1 für grafische
   Elemente. Ein tieferes Gold erfüllt das und wirkt zugleich wertiger. */
.rez__s{color:#B87011;letter-spacing:2px;font-size:1.05rem;margin-bottom:.6rem}
.rez p{font-size:1rem;line-height:1.6;color:var(--kaffee)}

.feld{margin-bottom:1.4rem}
.feld label{display:block;font-size:1.0625rem;font-weight:700;margin-bottom:.5rem}
.feld input,.feld textarea{width:100%;font:inherit;font-size:1.0625rem;color:var(--navy);
  padding:1rem 1.1rem;min-height:58px;border:2px solid var(--linie);border-radius:12px;
  background:var(--creme);transition:border-color .2s,box-shadow .2s}
.feld textarea{min-height:118px;resize:vertical;line-height:1.6}
.feld input:focus,.feld textarea:focus{outline:0;border-color:var(--hellblau);
  box-shadow:0 0 0 4px rgba(138,175,230,.3)}
.feld input:user-invalid,form.geprueft .feld input:invalid{border-color:var(--koralle)}
.feld .f{display:none;margin-top:.4rem;font-size:.95rem;color:var(--koralle-tief);font-weight:600}
.feld input:user-invalid ~ .f,form.geprueft .feld input:invalid ~ .f{display:block}
.zust{display:flex;gap:.85rem;align-items:flex-start;margin:1.5rem 0}
.zust input{width:26px;height:26px;min-height:0;flex:none;margin-top:.15rem;accent-color:var(--koralle)}
.zust label{font-size:1rem;font-weight:400;color:var(--kaffee);line-height:1.55}
.dank{display:none;text-align:center;padding:2rem 0}
.dank svg{width:60px;height:60px;margin:0 auto 1rem;color:#2E8B62}
form.fertig .form__k{display:none}form.fertig .dank{display:block}
.form{background:var(--creme);border-radius:12px;padding:clamp(1.8rem,3.5vw,2.8rem);box-shadow:var(--sch-1)}

.dl dt{font-size:1.3rem;font-weight:700;padding-top:1.6rem;border-top:1px solid var(--linie)}
.dl dd{margin:.6rem 0 1.6rem;font-size:1.0625rem;line-height:1.7;color:var(--kaffee);max-width:44rem}
.offen{display:block;border-left:3px solid var(--koralle-tief);padding:.5rem 0 .5rem 1rem;
  margin-top:.4rem;font-size:1rem;color:var(--kaffee)}
.offen b{color:var(--koralle-tief);font-weight:700}

/* ==========================================================================
   BILDFLÄCHEN
   Jede Fläche trägt eine Motivbeschreibung — das ist die Anweisung an den
   Fotografen und zugleich die Kontrolle, dass keine leere Fläche live geht.
   ========================================================================== */
.ph{position:relative;overflow:hidden;border-radius:10px;display:block;width:100%;
  background:linear-gradient(148deg,var(--hellblau-hell),var(--hellblau) 58%,#5C86C4);
  box-shadow:var(--sch-1)}
.ph--warm{background:linear-gradient(148deg,#EFE0CB,#D9BF9A 58%,#B2946C)}
.ph--gruen{background:linear-gradient(148deg,#E3EEDC,#C3D9BC 58%,#93B48C)}
.ph--navy{background:linear-gradient(148deg,#3D66A8,#17417C 58%,#0A2247)}
.ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.28), transparent 60%)}
.ph__sym{position:absolute;right:-6%;bottom:-14%;width:46%;height:auto;opacity:.26;z-index:1}
.ph__t{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;padding:clamp(1.1rem,2.5vw,1.6rem);color:#fff;
  background:linear-gradient(transparent 45%,rgba(13,44,92,.62))}
.ph__t b{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.2);
  border-radius:999px;padding:.25rem .7rem;margin-bottom:.5rem;width:fit-content;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ph__t span{font-size:.98rem;line-height:1.45;max-width:34ch;text-shadow:0 1px 8px rgba(8,28,60,.4)}
.ph--1x1{aspect-ratio:1/1}.ph--4x3{aspect-ratio:4/3}.ph--3x2{aspect-ratio:3/2}
.ph--16x9{aspect-ratio:16/9}.ph--4x5{aspect-ratio:4/5}.ph--21x9{aspect-ratio:21/9}
.phbu{display:block;margin-top:.7rem;font-size:1rem;line-height:1.5;color:var(--kaffee)}
/* Echtes Foto statt Platzhalter: der Rahmen tritt zurück, das Bild füllt ihn.
   object-fit:cover schneidet mittig zu, damit kein Motiv verzerrt wird. */
.ph--foto{background:none}
.ph--foto::after{display:none}
.ph--foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Eure vier Symbole. Deutlich grösser als die gezeichneten vorher —
   ihr hattet gesagt, sie dürfen mehr Raum bekommen. */
.viersym{width:clamp(64px,8vw,88px);height:auto;display:block;margin:0 auto 1.1rem}

/* Die Kamillenwiese hinter dem Kostenübernahme-Block. Der helle Schleier
   nimmt dem Foto die Kraft, damit die Karte darüber ruhig bleibt. */
.kost__grund{position:absolute;inset:0;z-index:0;background-size:cover;
  background-position:50% 62%;background-repeat:no-repeat}
.kost__grund::after{content:"";position:absolute;inset:0;background:
  linear-gradient(105deg, rgba(240,246,235,.62), rgba(206,226,210,.34) 58%, rgba(255,255,255,.10))}

/* Euer Logo im Kopf — gleiche Grösse wie das gezeichnete Zeichen vorher */
.logo__bild{width:54px;height:54px;object-fit:contain;flex:none;
  transition:transform .3s var(--e)}
body.ab .logo__bild{transform:scale(.88)}
/* Der Notizzettel im Kopf der Startseite. Klebeband und die leichte
   Schräge stecken schon im Bild — hier wird nur noch die Grösse gesetzt. */
.hero__notiz img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 26px rgba(8,24,50,.28))}
:root[data-kontrast="hoch"] .ph{border:2px solid var(--navy)}

/* Bildband über die volle Breite */
.bildband{padding-block:clamp(2rem,4vw,3.5rem)}
.bildband__g{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.bildband__g .ph{aspect-ratio:4/5}
.bildband__g > div:nth-child(2) .ph{aspect-ratio:4/3;margin-top:2rem}
@media (max-width:820px){ .bildband__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bildband__g > div:nth-child(3){display:none} }
@media (max-width:520px){ .bildband__g{grid-template-columns:minmax(0,1fr)}
  .bildband__g > div:nth-child(2) .ph{margin-top:0} }

/* Text neben Bild, wechselnde Seite */
.duo{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.duo--um > div:first-child{order:2}
/* Beim Inhaberfoto trägt das Bild die Aussage — es bekommt mehr Platz als
   der Text und darf über die Spaltenbreite hinaus nach links auslaufen. */
/* Das Foto bekommt etwas mehr Platz als der Text, bleibt aber im Rahmen.
   Ein Anschnitt bis zum Bildschirmrand war zu dominant — das Bild erschlug
   den Text daneben. */
.duo--bild{grid-template-columns:1.15fr 1fr;align-items:center}
/* Ohne Bild bleibt nur eine Spalte übrig — Text nutzt die volle Breite */
.duo > div:only-child{grid-column:1 / -1;max-width:46rem}
.duo:has(> div:only-child){grid-template-columns:minmax(0,1fr)}
.bildband:empty,.bildband__g:empty{display:none}
.bildband__g > div:empty{display:none}
.bildband:has(.bildband__g:not(:has(figure))){display:none}
@media (max-width:860px){ .duo{grid-template-columns:minmax(0,1fr)}
  .duo--um > div:first-child{order:0} }

/* Leistungen ohne eigenes Bild — Symbol trägt, Text bleibt vollständig */
.lteil{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.lteil__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.2rem,3vw,2.5rem);
  align-items:start;padding-bottom:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--linie)}
.lteil__i:last-child{border-bottom:0}
.lteil__k{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.lteil__k .sym{width:60px;height:60px}
@media (max-width:620px){.lteil__i{grid-template-columns:minmax(0,1fr)}
  .lteil__k{flex-direction:row;align-items:center;gap:1rem}
  .lteil__k .sym{width:60px;height:60px}}

/* ---------- Leistungsliste mit konkreten Tätigkeiten ---------- */
.lst2{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(min(22rem,100%),1fr))}
.lst2__i{background:var(--creme);border-radius:10px;padding:1.6rem;box-shadow:var(--sch-1);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:start;
  border:2px solid transparent;cursor:pointer;
  transition:transform .4s var(--e),box-shadow .4s var(--e),border-color .3s}
.lst2__i:hover{transform:translateY(-5px);box-shadow:var(--sch-2);border-color:var(--hellblau)}
.lst2__i .sym{width:52px;height:52px;transition:transform .4s var(--e)}
.lst2__i:hover .sym{transform:scale(1.08) rotate(-4deg)}
.lst2__i h2,.lst2__i h3{margin-bottom:.4rem}
.tun{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.8rem}
.tun li{display:inline-flex;align-items:center;gap:.35rem;font-size:1rem;font-weight:600;
  color:var(--navy)}
.tun li svg{display:none}
.tun--gross{gap:.6rem}
.tun--gross li{background:none;border:0;border-left:2px solid var(--koralle);border-radius:0;padding:.1rem 0 .1rem .7rem;font-size:1.0625rem;font-weight:500}
.nr{display:inline-block;font-size:1rem;font-weight:800;letter-spacing:.1em;
  color:var(--koralle-tief);font-variant-numeric:tabular-nums}
@media (max-width:520px){ .lst2__i{grid-template-columns:minmax(0,1fr)} }

/* ---------- Ihr eigener Satz, groß gesetzt ---------- */
.satz{background:var(--sand);padding-block:clamp(3.5rem,7vw,5.5rem);text-align:center}
.satz__gross{font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);font-weight:700;line-height:1.25;
  letter-spacing:-.02em;max-width:24ch;margin-inline:auto}
.satz__klein{margin-top:1.2rem;font-size:1.0625rem;line-height:1.7;color:var(--kaffee);
  max-width:44ch;margin-inline:auto}

/* ---------- Kostenträger ---------- */
.trg{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(min(24rem,100%),1fr))}
.trg__i{background:var(--creme);border-radius:10px;padding:1.8rem;box-shadow:var(--sch-1);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.3rem;align-items:start}
.trg__i .sym{width:50px;height:50px}
/* Paragrafen-Plakette: zwei Zeilen, Zahl groß, Gesetzbuch klein darunter. */
.trg__p{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:86px;height:86px;border-radius:18px;background:var(--navy);color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.05;text-align:center}
.trg__p b{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.trg__p i{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--hellblau-hell);margin-top:.3rem;white-space:nowrap}
.trg__p--privat{background:var(--koralle-tief)}
.trg__p--privat b{font-size:1.02rem}
.trg__i .h3{margin-bottom:.45rem}
@media (max-width:520px){ .trg__i{grid-template-columns:minmax(0,1fr)} }

/* ---------- Hakenlisten ---------- */
.zwei{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.hak{display:grid;gap:1rem}
.hak li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.0625rem;line-height:1.6}
.hak li svg{width:20px;height:20px;color:var(--koralle);flex:none;margin-top:.3rem}
.hak--k li svg{color:#2E8B62}

.tab{width:100%;border-collapse:collapse;font-size:1.0625rem;min-width:34rem}
.tab th,.tab td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--linie)}
.tab th{font-weight:800;font-size:.95rem;color:var(--kaffee)}
.tab td b{font-variant-numeric:tabular-nums}
.tabwrap{overflow-x:auto;background:var(--creme);border-radius:18px;box-shadow:var(--sch-1);padding:.5rem}

/* ---------- Fuß ---------- */
.fuss{background:var(--navy);color:#C9D3E4;padding-block:var(--luft) 0}
.fuss__in{max-width:1220px;margin-inline:auto;padding-inline:var(--gut);display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(1.8rem,4vw,3rem)}
.fuss h3{color:var(--hellblau);font-size:1rem;font-weight:800;margin-bottom:1rem}
.fuss li,.fuss p{font-size:1.0625rem;line-height:1.9}
.fuss a{color:#C9D3E4;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.fuss__b{display:inline-flex;gap:.8rem;align-items:flex-start;margin-top:1.2rem;padding:1rem 1.2rem;
  border-radius:14px;background:rgba(138,175,230,.14);border:1px solid rgba(138,175,230,.28);
  font-size:1rem;color:#fff;line-height:1.5}
.fuss__b svg{width:22px;height:22px;color:var(--hellblau);flex:none}
.fuss__u{max-width:1220px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;padding:1.5rem var(--gut) 2rem;
  border-top:1px solid rgba(201,211,228,.2);display:flex;flex-wrap:wrap;gap:1rem 1.8rem;
  justify-content:space-between;font-size:1rem}
.fuss__u nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.fuss__u span:last-child{color:#8FA5C6}
@media (max-width:900px){ .fuss__in{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .fuss__in{grid-template-columns:minmax(0,1fr)} .fuss__u{flex-direction:column} }

/* ---------- Anrufleiste ---------- */
.rufen{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:.7rem;
  background:rgba(251,248,243,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--linie);box-shadow:0 -4px 20px rgba(92,83,70,.14);padding:.7rem .9rem 1rem}
.rufen a{flex:1}
@media (max-width:620px){ .rufen{display:flex} .fuss{padding-bottom:5.5rem} }

/* ---------- Barrierefreiheit ---------- */
.bf-btn{position:fixed;left:16px;bottom:16px;z-index:90;width:60px;height:60px;border:0;
  border-radius:50%;background:var(--navy);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(13,44,92,.34);transition:transform .25s var(--e)}
.bf-btn:hover{transform:scale(1.06)}
.bf-btn svg{width:30px;height:30px}
.bf{position:fixed;left:16px;bottom:88px;z-index:91;width:min(320px,calc(100vw - 32px));
  background:#fff;border:2px solid var(--navy);border-radius:18px;padding:1.3rem;
  box-shadow:0 18px 46px rgba(92,83,70,.3);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s var(--e),transform .25s var(--e),visibility .25s}
.bf.auf{opacity:1;visibility:visible;transform:none}
.bf h2{font-size:1.15rem;font-weight:800;margin:0 0 1rem}
.bf__g{margin-bottom:1.1rem}
.bf__g > span{display:block;font-size:1rem;font-weight:700;margin-bottom:.5rem}
.bf__r{display:flex;gap:.4rem}
.bf__r button{flex:1;min-height:48px;border:2px solid var(--linie);border-radius:10px;background:#fff;
  color:var(--navy);font:inherit;font-weight:700;cursor:pointer;transition:all .2s}
.bf__r button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.bf__zu{width:100%;min-height:48px;border:0;border-radius:10px;background:var(--sand);
  color:var(--navy);font:inherit;font-weight:700;cursor:pointer}
.bf__hin{font-size:.9rem;color:var(--kaffee);line-height:1.5;margin-top:1rem}
@media (max-width:620px){ .bf-btn{bottom:96px} .bf{bottom:168px} }

:root[data-schrift="1"]{font-size:112.5%}
:root[data-schrift="2"]{font-size:125%}
:root[data-schrift="3"]{font-size:140%}

/* ---------- Farbfilter ----------
   Bewusst als Überlagerung, nicht als CSS-filter auf <html>: ein Filter auf
   einem Vorfahren würde position:fixed brechen — Anruf-Leiste und dieses
   Panel würden mitscrollen. */
.filterlage{position:fixed;inset:0;z-index:200;pointer-events:none;
  mix-blend-mode:multiply;opacity:0;transition:opacity .3s ease}
:root[data-gelb="1"] .filterlage--gelb{background:#FFE9A8;opacity:1}
:root[data-gelb="2"] .filterlage--gelb{background:#FFDD7A;opacity:1}
:root[data-blau="1"] .filterlage--blau{background:#FFD3A0;opacity:1}
:root[data-blau="2"] .filterlage--blau{background:#FFB871;opacity:1}

/* ---------- Lesbarkeit ---------- */
:root[data-zeile="1"] body,:root[data-zeile="1"] p,:root[data-zeile="1"] li,
:root[data-zeile="1"] dd{line-height:2.1!important}
:root[data-abstand="1"] body{letter-spacing:.055em;word-spacing:.16em}
:root[data-abstand="1"] h1,:root[data-abstand="1"] h2,:root[data-abstand="1"] h3{
  letter-spacing:.02em!important}
:root[data-links="1"] main a,:root[data-links="1"] footer a{
  text-decoration:underline!important;text-underline-offset:3px;
  text-decoration-thickness:2px;background:rgba(237,73,88,.12);
  padding:.08em .2em;border-radius:3px}
:root[data-lesehilfe="1"] .lesebalken{display:block}
.lesebalken{display:none;position:fixed;left:0;right:0;height:2.6rem;z-index:88;
  pointer-events:none;border-top:2px solid rgba(13,44,92,.55);
  border-bottom:2px solid rgba(13,44,92,.55);background:rgba(255,255,255,.14)}
.lesebalken::before,.lesebalken::after{content:"";position:fixed;left:0;right:0;
  background:rgba(13,44,92,.28)}
.lesebalken::before{top:0;height:var(--lb-oben,0px)}
.lesebalken::after{top:var(--lb-unten,0px);bottom:0}

/* Panel wird größer und scrollbar */
.bf{max-height:min(78vh,44rem);overflow-y:auto}
.bf__r--drei button{padding:0 .3rem;font-size:.95rem}
.bf__gruppe{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--kaffee);margin:1.3rem 0 .7rem;padding-top:1rem;border-top:1px solid var(--linie)}
.bf__gruppe:first-of-type{margin-top:.4rem;padding-top:0;border-top:0}
:root[data-kontrast="hoch"]{
  --creme:#FFF;--papier:#FFF;--sand:#EDEDED;--navy:#00234F;--kaffee:#2A2A2A;--linie:#00234F;
  --koralle:#A8101C;--koralle-tief:#8A0D17;--hellblau:#1A4A94;--hellblau-hell:#D3E0F2;
  --sch-1:none;--sch-2:none;--sch-3:none}
:root[data-kontrast="hoch"] .karte,:root[data-kontrast="hoch"] .form,
:root[data-kontrast="hoch"] .rez,:root[data-kontrast="hoch"] .zettel,
:root[data-kontrast="hoch"] .art,:root[data-kontrast="hoch"] .kost__karte{border:2px solid var(--navy)}
:root[data-kontrast="hoch"] .kost{background:#fff}
:root[data-kontrast="hoch"] .treiber,:root[data-kontrast="hoch"] .linien{display:none}
:root[data-bewegung="aus"] *,:root[data-bewegung="aus"] *::before,:root[data-bewegung="aus"] *::after{
  animation-duration:.001ms!important;transition-duration:.001ms!important}
:root[data-bewegung="aus"] .rolle__band{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
:root[data-bewegung="aus"] .treiber{display:none}
:root[data-bewegung="aus"] .zettel{transform:none}
:root[data-bewegung="aus"] .wort,:root[data-bewegung="aus"] .stufe,
:root[data-bewegung="aus"] .hero__b,:root[data-bewegung="aus"] .rez,
:root[data-bewegung="aus"] [data-auf]{opacity:1!important;transform:none!important}

.js [data-auf]{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--e),transform .7s var(--e)}
.js [data-auf].da{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .treiber,.linien{display:none}
  .rolle__band{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .js [data-auf],.rez{opacity:1!important;transform:none!important}
}
@media (max-width:1000px){ .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero__b{order:-1}.hero__foto{aspect-ratio:16/11}
  .hero__zettel{left:auto;right:1rem;bottom:-1.5rem;max-width:14rem} }
@media (max-width:620px){ .hero__akt{flex-direction:column} .hero__akt .btn{width:100%}
  /* Auf dem Handy bleibt die Plakette einzeilig und steht links wie der
     übrige Hero-Text — „von 5" entfällt, die Sterne sagen es ohnehin. */
  .bchip{font-size:.84rem;padding:.38rem .8rem;gap:.42rem;flex-wrap:nowrap;margin-inline:0}
  .bchip__s{font-size:.78rem;letter-spacing:.8px}
  .bchip__v{display:none} }

/* ==========================================================================
   NEU: Sprunglink, KI-Hinweis, Reform-Hinweis, Newsletter, Artikelseite,
   Kontaktseite, Formular-Zustände
   ========================================================================== */
.skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--navy);color:#fff;
  padding:.8rem 1.2rem;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

.ki{position:absolute;left:.7rem;bottom:.7rem;z-index:3;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(8,24,50,.85);
  border-radius:999px;padding:.28rem .7rem;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* Über einer hellen Bildstelle blieb von der Plakette zu wenig übrig; mit
   dieser Deckung sitzt die Kennzeichnung auch auf weißem Grund sicher. */
.hero__ki{position:absolute;left:1rem;bottom:.8rem;z-index:4;font-size:.74rem;letter-spacing:.03em;
  color:rgba(255,255,255,.92);background:rgba(8,24,50,.66);border-radius:999px;padding:.25rem .65rem}
.hero--bild .hero__unten svg{width:22px;height:22px;flex:none;color:#C3D8F2}

.btn--linie{background:transparent;color:var(--navy);box-shadow:none;border:2px solid var(--linie)}
.btn--linie:hover{background:#fff;border-color:var(--navy);box-shadow:var(--sch-2)}
.band .btn--linie{color:#fff;border-color:rgba(255,255,255,.5)}
.band .btn--linie:hover{background:rgba(255,255,255,.1);border-color:#fff;box-shadow:none}
.band__akt{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.btn.wartet{opacity:.7;cursor:progress}
.btn.wartet svg{animation:dreh 1s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

.reform{display:flex;gap:.9rem;align-items:flex-start;background:#FFF6E5;border:1px solid #F0D9A8;
  border-left:4px solid #D98B00;border-radius:0 14px 14px 0;padding:1.1rem 1.3rem;margin-top:1.6rem}
.reform > svg{width:24px;height:24px;flex:none;color:#B46E00;margin-top:.15rem}
.reform > div > b{display:block;color:#7A4B00;margin-bottom:.3rem}
.reform p{font-size:1rem;line-height:1.6;color:var(--kaffee)}
.reform__l{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.6rem}
.reform__l a{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--koralle-tief);
  text-decoration:none}
.reform__l a svg{width:15px;height:15px}
.reform__l a:hover{text-decoration:underline;text-underline-offset:3px}
.rbox .reform{display:none}

/* Newsletter: Postkarte */
.nl{padding-block:var(--luft);background:var(--creme)}
.nl__k{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-radius:18px;
  overflow:hidden;box-shadow:var(--sch-3);background:#FCFAF6;
  background-image:repeating-linear-gradient(45deg,transparent 0 10px,rgba(13,44,92,.035) 10px 20px)}
.nl__t{padding:clamp(1.8rem,4vw,3rem);background:var(--navy);color:#fff;position:relative}
.nl__t .h2{color:#fff;margin:.3rem 0 1rem}
.nl__t .fliess{color:#D6DFEE}
.nl__t .fliess b{color:#fff}
.nl__hand{font-size:clamp(2rem,1.4rem + 2vw,2.9rem);color:var(--hellblau-hell);display:block}
.nl__hak{margin-top:1.6rem;gap:.6rem}
.nl__hak li{font-size:1rem;color:#D6DFEE}
.nl__hak li svg{color:var(--hellblau)}
.nl__f{padding:clamp(1.8rem,4vw,3rem);position:relative}
.nl__f .feld input{background:#fff}
.nl__wann{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 .4rem;font-size:1rem;line-height:1.55;color:var(--kaffee)}
.nl__wann svg{width:20px;height:20px;flex:none;margin-top:.25rem;color:var(--koralle-tief)}
.nl__wann b{color:var(--navy)}
.nl__wie{border:0;padding:0;margin:0 0 1.2rem}
.nl__wie legend{font-size:1.0625rem;font-weight:700;margin-bottom:.6rem;padding:0}
.opt{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem 1rem;border:2px solid var(--linie);
  border-radius:12px;background:#fff;cursor:pointer;margin-bottom:.5rem;transition:border-color .2s}
.opt:hover{border-color:var(--hellblau)}
.opt:has(input:checked){border-color:var(--koralle-tief);background:#FDF3F4}
.opt input{width:22px;height:22px;flex:none;margin-top:.15rem;accent-color:var(--koralle-tief)}
.opt span b{display:block;font-size:1.02rem}
.opt span small{display:block;font-size:.9rem;color:var(--kaffee);line-height:1.4}
.nl__doi{margin-top:.9rem;font-size:.92rem}
.nl .zust{margin:1rem 0 1.2rem}
.nl .dank{padding:1rem 0}
.nl .dank b{display:block;font-size:1.3rem;margin-bottom:.4rem}
.fehler{display:none;margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;background:#FDF3F4;
  border:1px solid #F3C5CA;color:var(--koralle-tief);font-size:1rem;line-height:1.55}
.fehler:not(:empty){display:block}
.fehler.info{background:#EEF4FB;border-color:#C3D8F2;color:var(--navy)}
.fehler a{color:inherit;font-weight:700}
@media (max-width:860px){ .nl__k{grid-template-columns:minmax(0,1fr)} }

/* Artikelseite */
.skopf--art .skopf__in{max-width:52rem;margin-inline:auto}
.skopf--art h1{max-width:none}
.skopf--art .art__mark{position:static;display:inline-block;margin-bottom:1rem}
.krumen{font-size:.95rem;color:rgba(255,255,255,.8);margin-bottom:1rem}
.krumen a{color:#fff}
.skopf--art .leser__meta{margin-top:1.2rem}
.artikel{max-width:46rem;margin-inline:auto}
.artikel__kunst{border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#EDE7F0,#DDE3EE 62%,#C6D2E6);
  aspect-ratio:3/1;margin-bottom:2.4rem;position:relative}
.artikel__kunst .artkunst{position:absolute;inset:0;width:100%;height:100%}
.artikel__in{padding:0}
.artikel__in h3{font-size:1.32rem;margin:2rem 0 .7rem}
.artikel__in p{margin-bottom:1.1rem;line-height:1.75}
.artikel__in ul{margin:0 0 1.2rem;display:grid;gap:.55rem}
.artikel__in li{padding-left:1.5rem;position:relative;line-height:1.65}
.artikel__in li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--hellblau)}
.artikel__in .zahl > b{font-size:2rem}

/* Kontakt */
.kontakt__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:clamp(2rem,5vw,4rem)}
.kontakt__tel{display:inline-flex;align-items:center;gap:.8rem;font-size:clamp(1.6rem,1.1rem + 2.2vw,2.5rem);
  font-weight:800;color:var(--navy);text-decoration:none;font-variant-numeric:tabular-nums;margin-bottom:1.5rem;
  overflow-wrap:anywhere}
.kontakt__tel svg{width:1.1em;height:1.1em;flex:none}
.zeiten{display:grid;gap:.5rem;margin-top:1.5rem;max-width:20rem}
.zeiten > div{display:flex;justify-content:space-between;gap:1rem}
.opt-l{font-weight:500;color:var(--kaffee);font-size:.95rem}
.bew__g{margin-top:.8rem;font-size:1.05rem}
.bew__g .rez__s{margin:0;display:inline}
.bildband__g--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bildband__g--2 .ph{aspect-ratio:4/5}
.bildband__g--2 > div:nth-child(2) .ph{aspect-ratio:4/5;margin-top:2rem}
@media (max-width:520px){ .bildband__g--2{grid-template-columns:minmax(0,1fr)} .bildband__g--2 > div:nth-child(2) .ph{margin-top:0} }
.rhint{color:#C9D3E4;font-size:.98rem;margin-bottom:.8rem}
.rbox:not(.gewaehlt) .rerg{display:none}
.fehler__l{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2rem}
.fehler__l a{display:inline-block;padding:.6rem 1.1rem;border:2px solid var(--linie);border-radius:999px;
  text-decoration:none;color:var(--navy);font-weight:700}
.ds dd{overflow-wrap:anywhere}
.fig{margin:0}
.leser__meta span{display:inline-flex;align-items:center;gap:.4rem}

/* ---------- Google-Karte, erst auf Klick ---------- */
/* Vor dem Laden wächst der Kasten mit seinem Text — nichts wird
   abgeschnitten. Erst wenn die Karte geladen ist, bekommt er ein festes
   Seitenverhältnis. */
.karte{position:relative;border-radius:12px;overflow:hidden;background:var(--creme);
  border:2px solid var(--linie)}
.karte.geladen{aspect-ratio:4/3;border-color:var(--hellblau)}
@media (min-width:700px){ .karte.geladen{aspect-ratio:16/11} }
.karte__vor{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;text-align:center;padding:clamp(1.4rem,5vw,2.2rem);min-height:15rem;
  background:
    radial-gradient(60% 60% at 50% 38%, rgba(138,175,230,.22), transparent 70%),
    repeating-linear-gradient(45deg,transparent 0 14px,rgba(13,44,92,.045) 14px 28px),
    var(--creme)}
.karte__pin{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:50%;
  background:var(--koralle-tief);color:#fff;box-shadow:0 6px 18px rgba(196,48,62,.3)}
.karte__pin svg{width:26px;height:26px}
.karte__vor b{font-size:1.1rem;color:var(--navy);line-height:1.35}
.karte__vor p{font-size:.98rem;line-height:1.55;color:var(--kaffee);max-width:32rem}
.karte__alt{font-size:.95rem;font-weight:700;color:var(--koralle-tief);text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem;text-align:center}
.karte__alt svg{width:15px;height:15px;flex:none}
.karte__alt:hover{text-decoration:underline;text-underline-offset:3px}
.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.karte.geladen .karte__vor{display:none}

/* Breite Bildbänder auf dem Handy nicht zu flach zuschneiden */
@media (max-width:620px){
  .bildband .ph--21x9{aspect-ratio:3/2}
  .bildband .ph--16x9{aspect-ratio:4/3}
}