/* SURA – Variante 4c: Inhalt der Präsentation (Folien 2–13) als normal scrollende Seite.
   Stilregeln aus praesentation/index.html übernommen; alle Klassen tragen das Präfix p-, damit sie
   weder den Einstieg (style.css) noch die Bühne (film.css) berühren. Kein Scroll-Snap, keine Folienhöhe. */
.inhalt{
  --tief:#00527f;--nacht:#00263a;--rot:#ba1a1a;--gruen:#0e4a28;--gruen-hell:#e3f3e9;--gruen-rand:#b5dcc4;--braun:#7a2e00;--braun-hell:#fff6ee;--braun-rand:#f0c9a8;
  --schatten:0 1px 0 rgba(0,40,60,.04),0 30px 60px -28px rgba(0,60,90,.28),0 0 0 1px rgba(0,40,60,.06);
  --schatten-klein:0 0 0 1px rgba(0,40,60,.07),0 14px 26px -14px rgba(0,50,80,.3);
  --rand:clamp(16px,4vw,56px);
  font-size:clamp(1rem,.72rem + .62vw,1.3125rem);line-height:1.45;overflow-x:clip;
}
.inhalt .p-sek{scroll-margin-top:56px}
.p-sek{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.4vw,32px);padding:clamp(80px,12vw,180px) var(--rand);position:relative}
.p-sek>*{width:100%;max-width:1240px;margin-inline:auto}
.p-sek.p-grau{background:var(--flaeche)}
.p-mitte{text-align:center}
.p-mitte>:is(.p-h1,.p-h2,.p-vorspann,.p-klein){margin-inline:auto}
.p-marke{font:600 max(.8em,.9375rem)/1.2 var(--text);color:var(--blau)}
.p-h1,.p-h2{font-family:var(--kopf);font-weight:800;color:var(--tinte);line-height:1.06;text-wrap:balance}
.p-h1{font-size:clamp(2rem,1rem + 3.6vw,4.25rem);letter-spacing:-.037em;max-width:22ch}
.p-h2{font-size:clamp(1.75rem,.9rem + 3.1vw,3.625rem);letter-spacing:-.035em;max-width:22ch}
.p-h1 em,.p-h2 em{font-style:normal;color:var(--blau)}
.p-h3{font:700 1em/1.25 var(--kopf);letter-spacing:-.015em}
.p-vorspann{font-size:1.14em;line-height:1.4;color:var(--grau);max-width:44ch;text-wrap:balance}
.p-klein{font-size:max(.8em,.875rem);color:var(--grau);max-width:60ch}
.p-pille{display:inline-flex;align-items:center;font-size:max(.72em,.875rem);line-height:1.2;color:var(--grau);background:var(--flaeche);padding:.3em .8em;border-radius:999px;white-space:nowrap}
.p-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(24px,5vw,80px);align-items:center}
.p-stapel{display:grid;gap:clamp(12px,2.2vh,22px)}
.p-raster{display:grid;gap:clamp(10px,1.2vw,18px);grid-template-columns:repeat(3,minmax(0,1fr))}
.p-vier{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Flächen: Bühne, Fenster, Karte */
.p-buehne{position:relative;border-radius:clamp(20px,2vw,28px);background:linear-gradient(180deg,#eff3f6 0%,#e2e9ee 100%);padding:clamp(14px,2.2vw,30px)}
.p-fenster{background:#fff;border-radius:clamp(16px,1.5vw,22px);box-shadow:var(--schatten);padding:clamp(14px,1.5vw,22px);text-align:left}
.p-karte{background:#fff;border-radius:clamp(18px,1.7vw,24px);padding:clamp(16px,1.6vw,24px);display:flex;flex-direction:column;gap:.35em;text-align:left;box-shadow:var(--schatten-klein)}
.p-grau .p-karte{box-shadow:none}
.p-karte p{color:var(--grau);font-size:.92em}
.p-karte.p-betont{background:var(--hell);color:var(--nacht)}
.p-karte.p-betont p{color:var(--nacht)}
.p-karte.p-voll{background:var(--blau);color:#fff;box-shadow:0 24px 48px -24px rgba(0,60,90,.5)}
.p-nr{font:800 2.1em/1 var(--kopf);letter-spacing:-.04em;color:var(--blau)}
.p-dringend{display:inline-flex;align-items:center;background:var(--rot);color:#fff;font-weight:600;font-size:.86em;line-height:1.2;padding:.18em .7em;border-radius:999px;white-space:nowrap}
.p-erledigt{display:inline-flex;background:var(--gruen-hell);color:var(--gruen);font-weight:600;font-size:max(.8em,.875rem);line-height:1.2;padding:.22em .7em;border-radius:999px}
.p-knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:2.5em;padding:0 1.2em;border-radius:999px;font:600 .94em/1 var(--text);white-space:nowrap}
.p-knopf.p-voll{background:var(--blau);color:#fff}
.p-knopf.p-rand{color:var(--blau);box-shadow:inset 0 0 0 1.5px var(--blau)}
.p-punkte{display:grid;max-width:34em}
.p-punkte li{padding:.65em 0 .65em 1.7em;border-top:1px solid var(--linie);position:relative;font-weight:500}
.p-punkte li::before{content:"";position:absolute;left:.2em;top:1.15em;width:.65em;height:.38em;border-left:2.5px solid var(--mitte);border-bottom:2.5px solid var(--mitte);transform:rotate(-45deg);transform-origin:30% 60%}
.p-punkte li span{color:var(--grau);font-weight:400}

/* Erscheinen: ruhig, federnd */
.p-js .p-sek :is(.p-marke,.p-h1,.p-h2,.p-vorspann,.p-klein,.p-karte,.p-fenster,.p-buehne,.p-punkte li,.p-kanal,.p-blase,.p-adresse){opacity:0;transform:translateY(18px);transition:opacity .3s,transform .3s}
.p-js .p-sek.p-an :is(.p-marke,.p-h1,.p-h2,.p-vorspann,.p-klein,.p-karte,.p-fenster,.p-buehne,.p-punkte li,.p-kanal,.p-blase,.p-adresse){opacity:1;transform:none;transition:opacity .7s var(--feder),transform .9s var(--feder);transition-delay:calc(var(--i,0)*70ms + 80ms)}
@keyframes ein{from{opacity:0;transform:translateY(8px)}}

/* Posteingang-Fenster (1, 5) */
.p-fkopf{display:flex;align-items:baseline;gap:.6em;font:800 1.12em/1.2 var(--kopf);letter-spacing:-.02em;padding:0 .2em .6em}
.p-fkopf span{font:400 .8em/1.2 var(--text);letter-spacing:0;color:var(--grau)}
.p-zeilen{display:grid;gap:.34em}
.p-zeilen li{display:grid;grid-template-columns:5.6em minmax(0,1fr) auto;gap:.6em;align-items:center;min-height:2.5em;padding:.3em .45em .3em .8em;border-radius:.6em;background:var(--flaeche)}
.p-zeilen li b{font:700 1em/1.2 var(--kopf);letter-spacing:-.015em}
.p-zeilen li>span{color:var(--grau);font-size:.9em}
.p-zeilen li>span:not(.p-kunde){overflow:hidden;white-space:nowrap}
.p-kunde{display:inline-flex;align-items:center;gap:.5em;min-height:1.9em;padding:.1em .8em;background:#fff;border-radius:999px;font-weight:700;font-size:.86em;box-shadow:0 0 0 1px rgba(0,40,60,.08);white-space:nowrap}
.p-kunde.p-erkannt{color:var(--tief);background:var(--hell);box-shadow:none}
.p-kunde.p-fehlt{color:var(--braun);background:var(--braun-hell);box-shadow:inset 0 0 0 1.5px var(--braun-rand);font-weight:600}
.p-kunde.p-klick{background:var(--blau);color:#fff;font-weight:600;box-shadow:0 6px 12px -6px rgba(0,50,80,.5)}
.p-sek.p-an .p-status{animation:ein .6s var(--feder) calc(1s + var(--m,0)*.45s) backwards}

/* 2 · verstreute Eingänge */
.p-streu{font-size:1.18em;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.4vw,22px);align-items:center;padding-block:clamp(26px,6vh,60px)}
.p-ding{position:relative;background:#fff;border-radius:.3em;padding:.7em .8em .65em;box-shadow:0 0 0 1px rgba(0,40,60,.08),0 16px 26px -12px rgba(0,40,60,.42);transform:translateY(var(--y,0)) rotate(var(--r,0deg));text-align:left;line-height:1.25}
.p-ding b{display:block;font:800 1.1em/1.15 var(--kopf);letter-spacing:-.02em}
.p-ding span{color:var(--grau);font-size:max(.78em,.875rem)}
.p-ding.p-fax{border-top:1.5px dashed #aab4ba}
.p-ding.p-rezept{background:#fbe4e6;box-shadow:0 0 0 1px #e3a3aa,0 16px 26px -12px rgba(0,40,60,.42)}
.p-ding.p-handy{border:.24em solid #1f2a30;border-radius:1.1em;padding-top:.9em}
.p-ding.p-handy::before{content:"";position:absolute;left:50%;top:.25em;width:1.8em;height:.24em;margin-left:-.9em;background:#1f2a30;border-radius:99px}
.p-ding.p-bild{border-radius:.5em;padding-top:1.25em}
.p-ding.p-bild::before{content:"";position:absolute;left:0;right:0;top:0;height:.75em;background:#dfe6ea;border-radius:.5em .5em 0 0}
.p-ding.p-zettel{background:#ffe680;border-radius:.15em;box-shadow:0 16px 22px -12px rgba(60,50,0,.5)}
.p-sek.p-an .p-ding{animation:streuen 1.3s var(--feder) calc(.45s + var(--n)*.09s) backwards}
@keyframes streuen{from{transform:none}}

/* 3 · Kanäle laufen zusammen */
.p-kanaele{display:flex;flex-wrap:wrap;gap:.5em .6em;align-items:center;justify-content:space-between}
.p-kanal{white-space:nowrap;font:800 clamp(1.2rem,.8rem + 1.3vw,1.95rem)/1.1 var(--kopf);letter-spacing:-.03em;background:#fff;border-radius:.6em;padding:.42em .7em .46em;box-shadow:var(--schatten-klein)}
.p-kanal.p-offen{white-space:nowrap;font:600 1em/1.2 var(--text);letter-spacing:0;color:var(--blau);background:transparent;box-shadow:none;border:1.5px dashed #8fa3ad;padding:.7em 1em}
.p-bogen{display:block;width:100%;height:clamp(34px,7vh,64px);overflow:visible}
.p-bogen path{fill:none;stroke:var(--mitte);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:3;stroke-dashoffset:0}
.p-sek.p-an .p-bogen path{animation:ziehen 1.8s var(--feder) .9s backwards}
@keyframes ziehen{from{stroke-dashoffset:3}}
.p-ziel{max-width:30em;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.1em .8em;text-align:center}
.p-ziel b{font:800 1.5em/1.15 var(--kopf);letter-spacing:-.03em}
.p-ziel span{color:var(--grau)}

@media (min-width:1100px){.p-kanaele{flex-wrap:nowrap}}
/* 4 · Rezept wird ausgelesen */
.p-lesen{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.4vw,20px);align-items:stretch}
.p-lesen .p-fenster{display:flex;flex-direction:column;gap:.7em}
.p-akte{display:flex;gap:clamp(12px,1.6vw,24px);align-items:flex-start}
.p-rezeptblatt{position:relative;flex:none;width:clamp(84px,9.5vw,138px);aspect-ratio:21/29;background:#fbe4e6 repeating-linear-gradient(180deg,transparent 0 13px,rgba(217,137,144,.35) 13px 14px);border-radius:4px;box-shadow:0 0 0 1px #e3a3aa,0 14px 22px -14px rgba(0,40,60,.4)}
.p-rezeptblatt i{position:absolute;border:1.5px solid #d98990;border-radius:3px;background:#fdf1f2}
.p-rezeptblatt i::after{content:"";position:absolute;inset:-3px;border-radius:5px;background:rgba(0,162,210,.22);box-shadow:0 0 0 2.5px var(--mitte)}
.p-rezeptblatt i:nth-child(1){left:7%;top:8%;width:62%;height:13%}
.p-rezeptblatt i:nth-child(2){left:7%;top:42%;width:86%;height:30%}
.p-rezeptblatt i:nth-child(3){left:52%;top:80%;width:41%;height:12%}
.p-sek.p-an .p-rezeptblatt i::after{animation:feld .5s var(--feder) calc(.9s + var(--m)*.55s) backwards}
@keyframes feld{from{opacity:0;transform:scale(1.25)}}
.p-angaben{display:grid;gap:.55em}
.p-angaben dt{color:var(--grau);font-size:max(.78em,.875rem);line-height:1.2}
.p-angaben dd{font-weight:600;line-height:1.25}
.p-sek.p-an .p-angaben>div{animation:ein .6s var(--feder) calc(1.1s + var(--m)*.55s) backwards}
.p-ergebnis{margin-top:auto;font-weight:600;line-height:1.3;padding:.7em .85em;border-radius:.75em;background:var(--flaeche);display:flex;flex-wrap:wrap;gap:.35em .6em;align-items:center}
.p-ergebnis.p-gut{background:var(--gruen-hell);color:var(--gruen)}
.p-lesen .p-fenster>p:not(.p-ergebnis){color:var(--grau);font-size:.92em}

/* 6 · Vorschlag und Freigabe */
.p-freigabe{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(10px,1.6vw,24px);align-items:stretch}
.p-vorschlag{border:2px dashed #8fa3ad;box-shadow:none;background:rgba(255,255,255,.75);display:grid;gap:.75em;align-content:start}
.p-vorschlag .p-pille{justify-self:start;background:var(--hauch);color:var(--tief);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--hell)}
.p-vorschlag dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7em 1.2em}
.p-vorschlag dt{color:var(--grau);font-size:.9em}
.p-vorschlag dd{font-weight:700;display:flex;flex-wrap:wrap;gap:.3em .5em;align-items:center;line-height:1.25}
.p-frage-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.6em .8em;padding-top:.2em}
.p-frage-zeile b{font:800 1.15em/1.2 var(--kopf);letter-spacing:-.02em;margin-right:.3em}
.p-klicker{position:relative;display:inline-flex}
.p-klicker::after{content:"";position:absolute;right:-.2em;bottom:-.25em;width:1.3em;height:1.3em;border-radius:50%;background:rgba(0,110,168,.3);box-shadow:inset 0 0 0 2px rgba(255,255,255,.95),0 2px 8px rgba(0,40,60,.3)}
.p-klicker small{position:absolute;left:70%;top:calc(100% + .35em);background:var(--tinte);color:#fff;font:600 max(.74em,.875rem)/1.2 var(--text);padding:.2em .7em;border-radius:999px;white-space:nowrap;z-index:1}
.p-sek.p-an .p-klicker .p-knopf{animation:druck .45s 1.5s backwards}
.p-sek.p-an .p-klicker::after{animation:tipp .9s var(--feder) 1s backwards}
@keyframes druck{50%{transform:scale(.94)}}
@keyframes tipp{from{opacity:0;transform:translate(2.5em,2em)}}
.p-vorschlag>.p-klein{padding-top:1.1em}
.p-fertig{display:grid;gap:.4em;align-content:center}
.p-fertig li{display:flex;justify-content:space-between;align-items:center;gap:.8em;padding:.5em .55em .5em .85em;border-radius:.7em;background:var(--flaeche);font-weight:600;line-height:1.25}
.p-fertig .p-schluss{background:none;padding:.5em .2em 0;font:800 1.5em/1.15 var(--kopf);letter-spacing:-.03em}
.p-sek.p-an .p-fertig>*{animation:ein .6s var(--feder) calc(2.1s + var(--m,0)*.42s) backwards}

/* 7 + 8 · Wissens-Chat */
.p-chat{font-size:1.08em;position:relative;display:flex;flex-direction:column;gap:.75em;padding:clamp(18px,2.2vw,32px)}
.p-chat .p-fkopf{padding-bottom:.2em;justify-content:space-between;align-items:center}
.p-blase{padding:.75em 1em;display:grid;gap:.5em;line-height:1.45}
.p-blase small{display:block;font-size:max(.78em,.875rem);font-weight:600;line-height:1.2}
.p-blase.p-frage{align-self:flex-end;max-width:88%;background:var(--hell);color:var(--nacht);border-radius:1.1em 1.1em .35em 1.1em;gap:.15em}
.p-blase.p-frage small{color:var(--tief)}
.p-blase.p-antwort{align-self:flex-start;max-width:95%;background:var(--flaeche);border-radius:1.1em 1.1em 1.1em .35em}
.p-blase.p-antwort small{color:var(--blau)}
.p-blase b{color:var(--blau);font-weight:700}
.p-blase ul{display:grid;gap:.2em}
.p-blase ul li{padding-left:1em;position:relative}
.p-blase ul li::before{content:"·";position:absolute;left:.25em;font-weight:700}
.p-quellen{border-top:1px solid var(--linie);padding-top:.6em;display:grid;gap:.25em;font-size:max(.84em,.875rem);color:var(--grau)}
.p-js .p-sek.p-an .p-blase.p-antwort{transition-delay:1s}
.p-feld{margin-top:.2em;min-height:2.7em;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--linie);display:flex;align-items:center;justify-content:space-between;padding:0 .4em 0 1.1em;color:var(--grau);font-size:.92em}
.p-feld i{width:1.9em;height:1.9em;border-radius:50%;background:var(--blau);position:relative;flex:none}
.p-feld i::after{content:"";position:absolute;left:50%;top:54%;width:.5em;height:.5em;border-left:2px solid #fff;border-top:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}

/* 9 · Anbindung */
.p-bruecke{display:flex;align-items:center;gap:.6em;max-width:32em;font-size:1.1em;padding-block:clamp(8px,3vh,30px)}
.p-kasten{flex:0 1 auto;min-width:0;background:#fff;border-radius:.8em;padding:.7em 1em;font:700 1em/1.2 var(--kopf);letter-spacing:-.015em;box-shadow:var(--schatten-klein)}
.p-kasten.p-sura{flex:none;background:var(--blau);color:#fff;font-weight:800;font-size:1.2em;letter-spacing:-.03em;box-shadow:0 14px 26px -14px rgba(0,60,90,.6)}
.p-leitung{flex:1 0 6.5em;text-align:center;font-size:max(.8em,.875rem);font-weight:600;color:var(--tief);display:grid;gap:.35em}
.p-leitung::after{content:"";height:3px;border-radius:2px;background:var(--mitte);transform-origin:left}
.p-sek.p-an .p-leitung::after{animation:strecke 1.2s var(--feder) 1.1s backwards}
@keyframes strecke{from{transform:scaleX(0)}}

/* 11 · Datenschutz */
.p-karte p.p-satz{font:800 clamp(1.5rem,.9rem + 2.3vw,2.9rem)/1.1 var(--kopf);letter-spacing:-.033em;color:#fff!important;max-width:24ch;text-wrap:balance}
.p-haken{padding-left:1.7em;position:relative}
.p-haken::before{content:"";position:absolute;left:.15em;top:.42em;width:.7em;height:.4em;border-left:2.5px solid var(--mitte);border-bottom:2.5px solid var(--mitte);transform:rotate(-45deg)}

/* 12 · Schritte */
.p-schiene{height:4px;border-radius:2px;background:var(--linie);overflow:hidden}
.p-schiene::after{content:"";display:block;height:100%;background:var(--mitte);transform-origin:left}
.p-sek.p-an .p-schiene::after{animation:strecke 1.8s var(--feder) .7s backwards}

/* 13 · Schluss */
.p-ruf{font:700 1.3em/1.2 var(--kopf);letter-spacing:-.02em}
.p-adresse{display:inline-block;width:auto;font:800 clamp(1.5rem,.9rem + 2.6vw,3.25rem)/1.1 var(--kopf);letter-spacing:-.035em;color:var(--blau);background:var(--hauch);box-shadow:inset 0 0 0 1.5px var(--hell);padding:.35em .8em .4em;border-radius:999px;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}

@media (max-width:900px){
  .p-streu,.p-chat,.p-bruecke{font-size:1em}
  .p-zwei,.p-lesen,.p-freigabe{grid-template-columns:minmax(0,1fr)}
  .p-raster{grid-template-columns:minmax(0,1fr)}.p-vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-streu{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-ding{--y:0!important;padding:.55em .6em}.p-ding b{font-size:1em}.p-ding span{display:block}
  .p-kanaele{justify-content:flex-start}
  .p-zeilen li{grid-template-columns:4.9em minmax(0,1fr) auto;padding-left:.6em}
  .p-karte{padding:13px 15px}
  .p-vorschlag dl{grid-template-columns:minmax(0,1fr)}
}
/* Schluss: Kontaktweg der Seite */
.p-schluss .knopf{align-self:center;width:auto}
a.p-adresse{text-decoration:none}
@media (max-width:900px){.p-sek{gap:20px}}
@media (prefers-reduced-motion:reduce){.p-js .p-sek *,.p-js .p-sek *::before,.p-js .p-sek *::after{opacity:1!important;animation:none!important;transition:none!important;transform:none}}
@media print{.p-js .p-sek *{opacity:1!important;animation:none!important;transform:none!important}}
@media (max-width:900px){.p-karte .p-h3{hyphens:auto;overflow-wrap:anywhere}}
@media (max-width:520px){.p-zeilen li{grid-template-columns:auto minmax(0,1fr) auto}.p-zeilen li>span:not(.p-kunde){visibility:hidden}}