/* hilfmirmal v11 · Unterseiten (alles, was tools/seiten.py baut): Grundtypografie und Inhaltsbausteine.
   Kopf, Menü, Brotkrumen und Fuß stehen in schale.css (wird immer davor geladen, bringt auch die Schriften).
   Farben nur aus designsystem/tokens.json. Bausteine: Statusbühne (404, 500, Danke), Prosa, Karte, Autorenkasten,
   Oktopus- und Erik-Blase, Erstgespräch-Karte, Knöpfe, Felder, Platzhalter- und Prüfkasten, FAQ.
   Seitenspezifisches gehört in eigene Dateien (Frontmatter css:), nicht hierher. */

:root{
  --greige:#e7e4e0;
  --sand:#f1efec;
  --cream:#f7f6f4;
  --paper:#fdfdfc;
  --sky:#cfe7f8;
  --sky-2:#9fcdee;
  --sky-pale:#e8f4fd;
  --sky-air:#f3f9fe;
  --ink:#1d2b36;
  --ink-2:#3e4f5b;
  --ink-3:#5f6e79;
  --blue:#3f6f8f;
  --blue-deep:#2f5a76;
  --line:rgba(29,43,54,.12);
  --card-shadow:0 40px 90px -50px rgba(29,43,54,.38);
  --bubble-shadow:0 18px 40px -24px rgba(29,43,54,.5);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(20px,6vw,110px);
  --rail:0px;
  --big:clamp(2.6rem,1rem + 4.4vw,6.2rem);
  --say:clamp(1.05rem,.95rem + .45vw,1.3rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Auf der Startseite steht hier die Mitarbeiter-Leiste; der Text bleibt an derselben Stelle. */
@media (min-width:1100px){:root{--rail:170px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--cream);scroll-padding-top:5.5rem}
/* Himmel wie oben auf der Startseite: zartes Hellblau, nach unten warmes Weiß */
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--sky-pale) 0,var(--sky-air) 22rem,var(--cream) 46rem) no-repeat,var(--cream);color:var(--ink);font-family:var(--sans);font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
em{font-style:italic;color:var(--blue)}
::selection{background:var(--sky);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
main{flex:1}

/* ---------- Grundbausteine ---------- */
.inner{width:100%;padding-inline:calc(var(--gutter) + var(--rail)) var(--gutter)}
.kicker{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:1.6rem}
/* Häkchen wie in der Leiste („erledigt“) */
.kicker.ok::before{content:"";flex:none;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fdfdfc' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.big{font-family:var(--serif);font-size:var(--big);letter-spacing:-.01em;line-height:1.02;max-width:11em;text-wrap:balance;overflow-wrap:break-word}
.say{font-size:var(--say);line-height:1.6;max-width:30em;color:var(--ink-2);margin-top:1.8rem}
.say p+p{margin-top:.8em}
.say a:not(.btn),.prosa a:not(.btn){color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.say a:not(.btn):hover,.prosa a:not(.btn):hover{color:var(--blue)}
.entwurf-hinweis{margin:0;padding:.55rem var(--gutter);background:var(--sand);color:var(--blue-deep);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-align:center}

/* Statusbühne: 404, 500 und Danke */
.stage{position:relative;flex:1;display:flex;align-items:center;padding:clamp(48px,10vh,120px) 0 clamp(64px,12vh,140px);overflow:clip;isolation:isolate}
.stage .big{max-width:9.5em}
.stage .say{max-width:26em;font-size:clamp(1rem,.92rem + .38vw,1.22rem)}
/* Große, kaum sichtbare Zahl hinter dem Text */
.zahl{position:absolute;right:var(--gutter);bottom:-.1em;z-index:-1;margin:0;font-family:var(--serif);font-size:clamp(10rem,3rem + 20vw,22rem);line-height:.8;letter-spacing:-.02em;color:rgba(29,43,54,.06);pointer-events:none;user-select:none}

/* ---------- Sprechblasen (wie auf der Startseite) ---------- */
/* Der digitale Mitarbeiter spricht: Emblem-Oktopus, Blase in paper, Ecke am Gesicht 6 px */
.dm{display:flex;align-items:flex-end;gap:.75rem;margin-top:2.2rem;max-width:34rem}
.dm-face{position:relative;display:block;flex:none;width:1em;height:1em;font-size:54px;background:url('../brand/emblem-oktopus-128.webp?v=e51106d3') center/contain no-repeat;filter:drop-shadow(0 .08em .12em rgba(29,43,54,.18))}
.dm-bubble{display:block;background:var(--paper);color:var(--ink);border-radius:20px 20px 20px 6px;padding:.8rem 1.15rem;font-size:clamp(1rem,.95rem + .3vw,1.18rem);font-weight:500;line-height:1.4;text-align:left;box-shadow:var(--bubble-shadow)}
/* Erik spricht nur dort, wo er selbst handelt: gezeichneter Avatar, Name darüber */
.dm-avatar{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--paper),0 10px 24px -12px rgba(29,43,54,.5)}
.dm-col{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0}
.dm-name{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink-3);padding-left:.5rem}

/* ---------- Knöpfe (ein gefüllter pro Abschnitt, daneben höchstens eine Kontur) ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:44px;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:1rem 1.6rem;font:inherit;font-weight:600;font-size:1.02rem;line-height:1.2;cursor:pointer;text-decoration:none;transition:background-color .3s,border-color .3s,color .3s,transform .3s var(--ease)}
.btn::after{content:"";flex:none;width:.42rem;height:.42rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.btn:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.btn:focus-visible{border-radius:999px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost::after{display:none}
.btn.ghost:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ---------- Inhaltsseiten ---------- */
.seite-kopf{padding-top:clamp(28px,6vh,72px);padding-bottom:clamp(20px,4vh,40px)}
.prosa{padding-bottom:clamp(48px,8vh,96px)}
.prosa>*{max-width:40rem}
.prosa>*+*{margin-top:1.1em}
.prosa h2{font-family:var(--serif);font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1.1;margin-top:2.2em;text-wrap:balance}
.prosa h3{font-weight:600;font-size:1.12em;line-height:1.3;margin-top:1.8em}
.prosa h2+*,.prosa h3+*{margin-top:.7em}
.prosa ul,.prosa ol{padding-left:1.3em}
.prosa li+li{margin-top:.35em}
.prosa strong{font-weight:600;color:var(--ink)}
.prosa blockquote{margin-left:0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--sky-2);font-family:var(--serif);font-size:1.3em;line-height:1.3;color:var(--ink)}
.prosa code{font-family:var(--mono);font-size:.88em;background:var(--sand);border-radius:6px;padding:.1em .35em}
.prosa pre{max-width:100%;overflow-x:auto;background:var(--paper);border-radius:12px;padding:1rem 1.2rem;box-shadow:var(--bubble-shadow)}
.prosa pre code{background:none;padding:0}
.prosa table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.92em}
.prosa th,.prosa td{padding:.55rem .8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prosa th{font-weight:600;color:var(--blue-deep);font-size:.8em;letter-spacing:.08em;text-transform:uppercase}
.prosa hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.say{overflow-wrap:break-word}
.prosa{overflow-wrap:break-word;hyphens:auto}
.stand{padding-bottom:3rem;color:var(--ink-3);font-size:.88rem}

/* Karte: Ausweis-Stil, weicher tiefer Schatten statt Rahmen */
.karte{background:var(--paper);border-radius:26px;padding:clamp(1.4rem,1rem + 1.6vw,2.2rem);box-shadow:var(--card-shadow)}
.karte h2,.karte h3{margin-top:0}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:1.4rem}

/* Autorenkasten: nur belegte Fakten, „Zuletzt geprüft am“ */
.autor{display:flex;gap:1rem;align-items:flex-start;max-width:40rem;padding:1.2rem 1.4rem;background:var(--paper);border-radius:24px;box-shadow:var(--bubble-shadow)}
.autor .dm-avatar{width:64px;height:64px}
.autor-name{font-weight:600}
.autor-text{color:var(--ink-2);font-size:.95em}

/* Erstgespräch-Karte mit Eriks Avatar („15 Minuten mit Erik“) */
.erstgespraech{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1rem 1.2rem;max-width:40rem;margin-top:2.4rem;padding:1.4rem 1.6rem;background:var(--sky-air);border-radius:26px;box-shadow:var(--card-shadow)}
.erstgespraech .dm-avatar{width:64px;height:64px}
.erstgespraech-titel{font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.1;color:var(--ink)}
.erstgespraech-text p+p{margin-top:.3rem}
.erstgespraech-text{color:var(--ink-2);font-size:.98rem}
.erstgespraech .btn{grid-column:1/-1;justify-self:start}

/* Felder (Formulare der Unterseiten) */
.feld{display:flex;flex-direction:column;gap:.4rem;max-width:28rem}
.feld label,.feld-label{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
.feld input,.feld textarea,.feld select{width:100%;min-height:48px;padding:.75rem 1rem;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-size:1rem}
.feld input:focus-visible,.feld textarea:focus-visible,.feld select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);border-radius:12px}
.feld-hinweis{font-size:.86rem;color:var(--ink-3)}

/* Platzhalter: hier fehlen Fakten oder Freigaben (im Release-Bau fatal) */
.platzhalter{max-width:40rem;padding:1rem 1.2rem;border:1.5px dashed var(--ink-3);border-radius:12px;background:var(--paper);color:var(--ink-2);font-size:.95em}
.platzhalter-titel,.pruefen-titel{margin-bottom:.4rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.platzhalter>*+*,.pruefen>*+*{margin-top:.5em}
/* Prüfkasten: rechtliche Prüfung offen (im Release-Bau fatal) */
.pruefen{max-width:40rem;padding:1rem 1.2rem;border-left:4px solid var(--blue);border-radius:0 12px 12px 0;background:var(--sky-pale);color:var(--ink-2);font-size:.95em}

/* FAQ als aufklappbare Fragen */
.faq{padding-bottom:3rem}
.faq h2{font-family:var(--serif);font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1.1;margin-bottom:1rem}
.faq-punkt{max-width:40rem;border-top:1px solid var(--line)}
.faq-punkt:last-of-type{border-bottom:1px solid var(--line)}
.faq-punkt summary{display:flex;align-items:center;min-height:48px;padding:.6rem 0;font-weight:600;cursor:pointer}
.faq-antwort{padding:0 0 1rem;color:var(--ink-2)}

@media (max-width:900px){
  .inner{padding-inline:calc(22px + var(--rail)) 20px}
}
@media (max-width:760px){
  .dm-face{font-size:46px}
  .actions{margin-top:2.2rem}
  .erstgespraech{padding:1.2rem}
}
@media (prefers-reduced-motion:no-preference){
  .dm-face{animation:hover-geist 4.5s ease-in-out infinite}
}
@keyframes hover-geist{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover{transition:none;transform:none}
}
@media print{
  body{background:none}
  .entwurf-hinweis{display:none}
}