/* aigency.ch · Bauteile
   Portiert aus docs/design/04_Vorlage_Goldstandard.html (Werte 1:1, Kommentar «04»).
   Web-Ergänzungen, die der Goldstandard nicht hat, sind mit «web» markiert und aus seinen
   Bauteilen abgeleitet. Keine Radien ausser Kreisen, keine Verläufe, keine Icons. */

/* ── Grundlage ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);
  padding:var(--gap-sheet) max(16px,env(safe-area-inset-right,0px)) 56px max(16px,env(safe-area-inset-left,0px));
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg,video{display:block;max-width:100%;height:auto}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em;padding-left:1.25em}
a{color:var(--day-deep);text-decoration-thickness:1px;text-underline-offset:3px}           /* 04 */
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus,var(--day-deep));outline-offset:3px}
::selection{background:var(--day-tint);color:var(--ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 14px;font-weight:600;font-size:14px;text-decoration:none}
.skip:focus{top:12px;color:var(--paper)}

/* ── Papier auf dem Tisch (Grundmetapher) ──────────────────── */
.sheet{position:relative;max-width:var(--page-max);margin:0 auto var(--gap-sheet);background:var(--paper);box-shadow:var(--shadow-paper);padding:0 var(--sheet-pad)}   /* 04 .mail */
main > .sheet:first-child{margin-top:0}
main > :last-child{margin-bottom:0}
.sec{padding-block:var(--section-y)}
.sheet > .sec + .sec{border-top:1px solid var(--ink)}   /* 04 .more/.outro: Haarlinie in Tinte */
.desk{max-width:var(--page-max);margin:0 auto var(--gap-sheet);padding:calc(var(--section-y) * .75) var(--sheet-pad)}   /* web: Abschnitt direkt auf dem Tisch */
.desk .lbl,.desk a:not(.btn){color:var(--ink)}          /* dunkle Tagesfarben haben auf dem Tisch zu wenig Kontrast */
.desk .note .lbl{color:var(--day-deep)}
.desk .note a:not(.btn){color:var(--day-deep)}
.desk .note a:not(.btn):hover{color:var(--ink)}

/* ── Typografie ────────────────────────────────────────────── */
.h1,.h2,.h3{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em}
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.h1 em,.h2 em,.h3 em{font-style:italic}
.lead{font-size:calc(var(--fs-body) + 2px);line-height:1.55;max-width:var(--measure);margin:0 0 1.2em;text-wrap:pretty}
.prose{max-width:var(--measure)}
.prose p,.prose li{text-wrap:pretty}
.prose h2{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);line-height:var(--lh-h3);margin:1.6em 0 .5em}
.prose h3{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:600;color:var(--day-deep);margin:1.8em 0 .5em}
.meta{font-size:var(--fs-meta);color:var(--ink-soft)}
.small{font-size:var(--fs-small)}
.lbl{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--day-deep);margin:0 0 6px;line-height:1.4}   /* 04 .kicker .lbl / h2 */
.lbl--ink{color:var(--ink)}
.greeting{font-family:var(--f-display);font-style:italic;font-size:21px;line-height:1.4;margin:0 0 8px;text-wrap:pretty}   /* 04 */
.sec-head{margin-bottom:40px}
.sec-head .tape{margin-bottom:18px}

/* Wortmarke: «ai» gerade, «gency» kursiv, Punkt in der Hauptfarbe (04, 02d) */
.wordmark{font-family:var(--f-display);font-weight:400;font-size:46px;line-height:1;letter-spacing:var(--ls-wordmark);color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark i{font-style:italic}
.wordmark .deb{font-style:normal;letter-spacing:-.01em}
.wordmark .dot{color:var(--day)}
a.wordmark:hover{color:var(--ink)}

/* Bleistiftlinie unter H1 und H2 (04 .underline, Strich per CSS statt fest im SVG) */
.underline{display:block;width:210px;max-width:60%;height:12px;margin:10px 0 22px;overflow:visible}
.underline path{fill:none;stroke:var(--day);stroke-width:2;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:0}
.underline--two path{stroke:var(--day2)}
.js .underline.is-pending path{stroke-dashoffset:240}
.js .underline.is-drawn path{transition:stroke-dashoffset .6s var(--ease)}

/* Klebeband-Etikett (04 .tape) */
.tape{display:inline-block;background:var(--day-tint);padding:6px 14px 5px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.5;
  transform:rotate(var(--tape-tilt));margin-left:-6px;clip-path:polygon(2% 0,98% 4%,100% 50%,97% 100%,3% 96%,0 48%);transition:transform .2s var(--ease)}
.tape--two{background:var(--day2-tint)}
.tape--plain{background:var(--tape)}

/* ── Knöpfe (web, aus 04 .copy: Tinte auf Papier, eckig, Hover in --day-deep) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:12px 22px;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
  font:600 15px/1.2 var(--f-body);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:var(--day-deep);border-color:var(--day-deep);color:var(--paper)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--small{min-height:44px;padding:10px 16px;font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.more-link{font-weight:600;font-size:15px}

/* ── Kopf (web, aus 04 .masthead) ──────────────────────────── */
.site-head{max-width:var(--page-max);margin:0 auto;background:var(--paper);padding:0 var(--sheet-pad);box-shadow:0 1px 0 rgba(0,0,0,.04);position:relative;z-index:2}
/* Kopfzeile beim Hochscrollen: schlank, fixiert, gleitet von oben herein (site.js) */
.site-head.is-fixed{position:fixed;top:0;left:0;right:0;z-index:40;transform:translateY(-110%);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s;box-shadow:none}
.site-head.is-fixed.is-shown{transform:none;box-shadow:0 14px 30px -24px rgba(30,20,10,.5)}
.site-head.is-fixed .edition{display:none}
.site-head.is-fixed .masthead{padding-top:14px;padding-bottom:12px;align-items:center;border-bottom-color:transparent}
.site-head.is-fixed .wordmark{font-size:34px}
@media (prefers-reduced-motion: reduce){.site-head.is-fixed{transition:none}}
.masthead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 28px;padding-top:34px;padding-bottom:18px;border-bottom:1px solid var(--ink)}   /* 04 */
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
.nav a{color:var(--ink);font-size:15px;font-weight:500;padding:10px 0;display:inline-block;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:transparent;transition:text-decoration-color .2s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{text-decoration-color:var(--day);color:var(--ink)}
.head-right{display:flex;align-items:flex-end;gap:28px}
.edition{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;padding:10px 0 12px;font-size:13px;color:var(--ink-soft)}   /* 04 */
.edition b{font-weight:600;color:var(--ink)}
.edition a{color:var(--ink-soft);text-decoration:none}
.edition a:hover{color:var(--ink);text-decoration:underline}
.swatch{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;margin-right:2px}   /* 04 .swatches i */
.swatch--day{background:var(--day)}
.swatch--two{background:var(--day2)}
.today::after{content:"Mittwoch"}
[data-day="mo"] .today::after{content:"Montag"}
[data-day="di"] .today::after{content:"Dienstag"}
[data-day="do"] .today::after{content:"Donnerstag"}
[data-day="fr"] .today::after{content:"Freitag"}
[data-day="sa"] .today::after{content:"Samstag"}
[data-day="so"] .today::after{content:"Sonntag"}
.nav-mobile{display:none}
.nav-mobile summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:0 2px}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile summary::after{content:"";width:12px;height:12px;border:1.5px solid var(--day);border-radius:50% 46% 52% 48%;transform:rotate(var(--step-tilt))}
.nav-mobile[open] summary::after{background:var(--day)}
.nav-mobile .panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px var(--sheet-pad) 22px;box-shadow:var(--shadow-paper)}
.nav-mobile .panel ul{list-style:none;margin:0 0 16px;padding:0}
.nav-mobile .panel li{border-bottom:1px solid var(--rule)}
.nav-mobile .panel a:not(.btn){display:block;padding:12px 0;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-size:24px;line-height:1.2}
.nav-mobile .panel a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--day);text-decoration-thickness:2px}
@media (max-width:1060px){
  .nav,.head-right > .btn{display:none}
  .nav-mobile{display:block}
}
@media (max-width:520px){
  .wordmark{font-size:40px}                       /* 04 */
  .masthead{padding-top:24px;padding-bottom:14px}
  .edition .ed-left{display:none}
}

/* ── Fuss (04 .foot, erweitert) ────────────────────────────── */
.site-foot{--focus:var(--foot-link);max-width:var(--page-max);margin:0 auto;background:var(--foot);color:var(--foot-text);padding:56px var(--sheet-pad) 22px;font-size:14px;line-height:1.6}
.site-foot a{color:var(--foot-link);text-decoration-color:rgba(240,232,218,.4)}
.site-foot a:hover{color:#fff;text-decoration-color:currentColor}
.site-foot .wordmark{color:var(--foot-link);font-size:40px}
.site-foot .lbl{color:var(--foot-text)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px 32px;padding-bottom:36px;border-bottom:1px solid #3A352E}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-grid p{margin:14px 0 0;max-width:34ch}
.foot-base{display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding-top:18px;font-size:12.5px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}.site-foot{padding-top:40px}}

/* ── Collage und Bilder ────────────────────────────────────── */
.collage{position:relative;margin:0}
.collage img{width:100%;height:auto;aspect-ratio:var(--ar,2688/1520);object-fit:cover;background:var(--paper)}   /* 04 .hero: ohne Rahmen */
.collage > .tape{position:absolute;z-index:1;left:18px;top:-12px}
.collage figcaption{margin-top:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}   /* 04 .ba figcaption */
.ai-note{font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);margin-top:6px}
.paper-frame{margin:0;background:var(--sheet);border:1px solid var(--rule);padding:10px;box-shadow:var(--shadow-note);position:relative}   /* web, aus 04 .prompt */
.paper-frame img{width:100%;height:auto;border:1px solid var(--rule)}
.paper-frame > .tape{position:absolute;left:14px;top:-12px}
.paper-frame figcaption{margin-top:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.sticker{margin:0;background:#fff;padding:8px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 28px -18px rgba(60,40,20,.45);transform:rotate(-1.4deg);position:relative;max-width:420px}   /* web, «Sticker-Rand» aus 02d */
.sticker img{width:100%;height:auto}
.sticker > .tape{position:absolute;left:50%;top:-14px;transform:translateX(-50%) rotate(2deg);margin:0;width:110px;height:28px;padding:0;background:var(--tape)}

/* ── Notizzettel (web: Zettel auf dem Tisch, statt Karten) ─── */
.note{background:var(--sheet);border:1px solid var(--rule);box-shadow:var(--shadow-note);padding:30px 26px 24px;position:relative}
.note > .tape:first-child{position:absolute;top:-12px;left:20px;margin:0}
.note h3{margin-top:4px}
a.note{display:block;color:inherit;text-decoration:none}
a.note:hover .tape,.note:hover > .tape:first-child{transform:rotate(var(--tape-tilt)) translateY(-3px)}

/* ── Raster (web, aus 04 .calc und Einseiter .cols) ────────── */
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ruled{gap:0}
.ruled > *{padding:0 28px}
.ruled > *:first-child{padding-left:0}
.ruled > *:last-child{padding-right:0}
.ruled > * + *{border-left:1px solid var(--rule)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
.split--rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:minmax(0,1fr)}
  .split,.split--rev,.split--even{grid-template-columns:minmax(0,1fr);gap:36px}
  .ruled > *{padding:22px 0}
  .ruled > *:first-child{padding-top:0}
  .ruled > *:last-child{padding-bottom:0}
  .ruled > * + *{border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:720px){.grid-2,.grid-4{grid-template-columns:minmax(0,1fr)}}

/* ── Schritte mit Kreisnummern (04 ol.steps) ───────────────── */
ol.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
ol.steps > li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;counter-increment:s}
ol.steps > li::before{content:counter(s);font-family:var(--f-display);font-size:22px;line-height:30px;width:32px;height:32px;text-align:center;border:1.5px solid var(--day);border-radius:50% 46% 52% 48%;color:var(--day-deep);transform:rotate(var(--step-tilt))}
ol.steps > li > div{min-width:0}
/* grössere Kreisnummer für Prinzipien und Phasen (web, gleiche Form) */
.num{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:30px;line-height:1;width:52px;height:52px;border:1.5px solid var(--day);border-radius:50% 46% 52% 48%;color:var(--day-deep);transform:rotate(var(--step-tilt));margin-bottom:16px}
.num-list{list-style:none;margin:0;padding:0;counter-reset:n}
.num-list > li{counter-increment:n}
.num-list > li::before{content:counter(n);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:30px;line-height:1;width:52px;height:52px;border:1.5px solid var(--day);border-radius:50% 46% 52% 48%;color:var(--day-deep);transform:rotate(var(--step-tilt));margin-bottom:16px}

/* Kreis-Aufzählung (04 ul.watch) */
ul.watch{list-style:none;margin:0;padding:0;display:grid;gap:10px}
ul.watch li{padding-left:22px;position:relative;text-wrap:pretty}
ul.watch li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border:1.5px solid var(--day);border-radius:50%}

/* ── Prompt-Kasten (04 .prompt) ────────────────────────────── */
.prompt{margin:16px 0 4px;background:var(--sheet);border:1px solid var(--rule);position:relative;box-shadow:var(--shadow-note)}
.prompt pre{margin:0;padding:18px 18px 16px;font-family:var(--f-mono);font-size:var(--fs-mono);line-height:1.6;white-space:pre-wrap;word-break:break-word}
.prompt-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px dashed var(--rule);padding:6px 8px 6px 18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.copy{font:600 12px/1 var(--f-body);letter-spacing:.04em;background:var(--ink);color:var(--paper);border:0;padding:10px 14px;min-height:44px;min-width:44px;cursor:pointer}
.copy:hover{background:var(--day-deep)}
.no-js .copy{display:none}

/* ── Stempelkasten (04 .tested) ────────────────────────────── */
.stamp-box{margin-top:28px;padding:22px 24px 20px;border:1.5px solid var(--ink);position:relative;background:var(--paper)}
.stamp-box .stamp{position:absolute;top:-11px;left:16px;background:var(--paper);padding:0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:20px}
.stamp-box ul{margin:10px 0 0;padding-left:20px}
.stamp-box li{margin:6px 0}
.stamp-box .meta{margin-top:12px}
.on-sheet{--stamp-bg:var(--sheet)}

/* ── Zahlenkacheln (04 .tip .calc) ─────────────────────────── */
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 18px}
.calc > div{background:var(--day2-tint);padding:14px 14px 12px}
.calc b{display:block;font-family:var(--f-display);font-weight:400;font-size:40px;line-height:1.05;white-space:nowrap}
.calc span{display:block;font-size:var(--fs-meta);color:var(--ink-soft);margin-top:4px;line-height:1.4}
@media (max-width:520px){.calc b{font-size:24px}}

/* Tipp-Abschnitt mit Linie in der Zweitfarbe (04 .tip) */
.tip{border-top:3px solid var(--day2)}
.sheet > .sec.tip{border-top:3px solid var(--day2)}
.tip{position:relative}
.tip > .tape:first-child{position:absolute;top:-14px;left:0}   /* 04 .tip .tape: Etikett sitzt auf der Linie */

/* ── Meldungsliste (04 .item) ──────────────────────────────── */
.items{border-top:1px solid var(--ink)}
.item{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
.item:last-child{border-bottom:0}
.item h3{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.2;margin:0}
.item p{margin:0;font-size:15.5px}
.item .for{font-size:var(--fs-meta);color:var(--ink-soft)}

/* ── FAQ (web: details/summary, Kreis aus 04 ul.watch) ─────── */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 22px;gap:16px;align-items:start;padding:18px 0;font-family:var(--f-display);font-size:23px;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:14px;height:14px;margin-top:6px;border:1.5px solid var(--day);border-radius:50% 46% 52% 48%;transform:rotate(var(--step-tilt));transition:background-color .15s}
.faq details[open] summary::after{background:var(--day)}
.faq summary:hover{color:var(--day-deep)}
.faq .answer{padding:0 38px 22px 0;max-width:var(--measure)}
.faq-group + .faq-group{margin-top:56px}

/* ── Formular (web, aus 04 .prompt: Zettel, feine Linie, gestrichelte Kopfzeile) ── */
.form{background:var(--sheet);border:1px solid var(--rule);box-shadow:var(--shadow-note);position:relative}
.form-bar{border-bottom:1px dashed var(--rule);padding:8px 18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.form-body{padding:22px 22px 24px;display:grid;gap:18px}
.field label,.field legend{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:6px;color:var(--ink)}
.field input[type="email"],.field input[type="text"]{width:100%;min-height:48px;padding:10px 14px;font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:0}
.field input:focus-visible{outline:2px solid var(--day-deep);outline-offset:1px}
fieldset.field{border:0;margin:0;padding:0}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice span{display:block;height:100%;padding:12px 14px;border:1px solid var(--rule);background:var(--paper);font-size:15px;line-height:1.35}
.choice span b{display:block;font-weight:600}
.choice input:checked + span{border:1.5px solid var(--ink);background:var(--day-tint)}
.choice input:focus-visible + span{outline:2px solid var(--day-deep);outline-offset:2px}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px;line-height:1.5;color:var(--ink)}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.form-note{font-size:var(--fs-meta);color:var(--ink-soft);margin:0}
.form-off{font-size:var(--fs-meta);background:var(--day-tint);padding:10px 12px;margin:0}
@media (max-width:520px){.choices{grid-template-columns:1fr}}

/* ── Debriefing-Vorschau: eine Ausgabe als Papierblatt (04 .mail, verkleinert) ── */
.mail-card{max-width:640px;background:var(--paper);box-shadow:var(--shadow-paper);margin:0 auto;font-size:15px}
.mail-card .inner{padding:0 40px 30px}
.mail-card .mast{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding-top:28px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.mail-card .wordmark{font-size:38px}
.mail-card .issue{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:right;line-height:1.5}
.mail-card .edition{font-size:12.5px}
.mail-card .greeting{font-size:19px;margin:22px 0 6px}
.mail-card .tape{margin-top:22px}
.mail-card .collage{margin-top:12px}
.mail-card .mail-h{font-family:var(--f-display);font-weight:400;font-size:32px;line-height:1.08;margin:20px 0 0;text-wrap:balance}
.mail-card .underline{margin:8px 0 14px}
.mail-card .kicker{display:grid;gap:12px}
.mail-card .kicker p{margin:0}
.mail-card .cut{border-bottom:1px dashed var(--rule);padding-bottom:14px}
.mail-card .foot{background:var(--foot);color:var(--foot-text);font-size:12px;padding:14px 40px}
.example-note{font-size:var(--fs-meta);color:var(--ink-soft);text-align:center;margin:14px 0 0;letter-spacing:.04em}
@media (max-width:520px){.mail-card .inner{padding:0 20px 22px}.mail-card .foot{padding:12px 20px}.mail-card .issue{text-align:left}.mail-card .mail-h{font-size:27px}.mail-card .wordmark{font-size:32px}}

/* ── Slide-in zur Anmeldung: Feierabend-Collage wie auf der Startseite, ein Satz, ein Knopf ── */
.slidein{position:fixed;z-index:30;right:28px;bottom:28px;width:330px;max-width:calc(100vw - 32px);background:var(--sheet);border:1px solid var(--rule);box-shadow:0 1px 0 rgba(0,0,0,.05),0 26px 50px -22px rgba(30,20,10,.55);padding:10px 10px 0;transform:translateY(calc(100% + 48px)) rotate(2deg);transition:transform .6s cubic-bezier(.22,1,.36,1);visibility:hidden}
.slidein.is-open{transform:rotate(-1.2deg);visibility:visible}
.slidein .si-pic{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.slidein .si-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.slidein:hover .si-pic img{transform:scale(1.05)}
.slidein .si-stamp{position:absolute;right:10px;bottom:10px;width:76px;height:76px;border-radius:50%;border:1.5px solid var(--day-deep);outline:1px solid var(--day-deep);outline-offset:-6px;background:rgba(255,253,248,.82);color:var(--day-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 15px/1 var(--f-mono);letter-spacing:.02em;transform:rotate(-14deg)}
.slidein .si-stamp small{font:500 8px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.slidein > .tape{position:absolute;top:-11px;left:22px;margin:0}
.slidein .row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 6px 14px}
.slidein .si-h{margin:0;font:400 24px/1.04 var(--f-display);color:var(--ink)}
.slidein .si-h em{display:block;color:var(--day-deep)}
.slidein .btn{flex:none}
.slidein .close{position:absolute;top:-14px;right:-14px;width:32px;height:32px;border-radius:50%;border:0;background:var(--ink);color:var(--sheet);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 10px -4px rgba(0,0,0,.4);transition:transform .25s var(--ease)}
.slidein .close::before{content:"";position:absolute;inset:-6px}
.slidein .close svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.slidein .close:hover{transform:rotate(90deg)}
.slidein .close:focus-visible{outline:2px solid var(--day-deep);outline-offset:3px}
.slidein .strip-text{display:none}
@media (max-width:720px){
  .slidein{left:0;right:0;bottom:0;width:auto;max-width:none;padding:8px max(16px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px));border-width:1px 0 0;border-color:var(--ink);box-shadow:0 -10px 24px -18px rgba(60,40,20,.5);transform:translateY(calc(100% + 40px))}
  .slidein.is-open{transform:none}
  .slidein .si-pic,.slidein > .tape,.slidein .si-h{display:none}
  .slidein .strip-text{display:block;font-size:14px;line-height:1.3}
  .slidein .row{gap:8px;padding:0 44px 0 0;align-items:center}
  .slidein .btn{min-height:40px;padding:8px 12px;font-size:14px}
  .slidein .close{top:50%;right:max(16px,env(safe-area-inset-right,0px));margin-top:-16px;transform:none}
  .slidein .close:hover{transform:none}
  body.has-strip{padding-bottom:calc(56px + 64px)}
}

/* ── Seitenbausteine ───────────────────────────────────────── */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center;margin-top:36px}
.hero h1{max-width:15ch}
.hero-pic img{--ar:2688/1520}
@media (max-width:767px){.hero-pic img{--ar:4/5}}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:20px}}
.page-hero .h1{max-width:16ch}
.page-hero .collage{margin-top:44px}
.kicker-row{display:flex;flex-wrap:wrap;gap:8px 22px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:13.5px;margin:0 0 26px}   /* 04 .facts */
.kicker-row b{font-weight:600}
.quote{font-family:var(--f-display);font-size:30px;line-height:1.3;margin:0;text-wrap:pretty}
.quote em{font-style:italic}
.sign{font-family:var(--f-display);font-size:24px;line-height:1.25;margin-top:18px}   /* 04 */
.cta-final{text-align:left}
.cta-final .h2{max-width:20ch}
.list-plain{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.list-plain li{display:grid;grid-template-columns:minmax(0,14ch) 1fr;gap:6px 24px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.list-plain li b{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.2}
.list-plain li span{color:var(--ink-soft)}
@media (max-width:520px){.list-plain li{grid-template-columns:1fr}}
.legal .prose{max-width:72ch}
.legal h2{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.2;margin:1.6em 0 .4em}
.legal h3{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:600;margin:1.6em 0 .4em;color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:600}

/* ── Bewegung: nur kleine Papierbewegung; reduced motion schaltet alles ab ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .underline.is-pending path{stroke-dashoffset:0}
  .slidein{transition:none}
}

/* ── Druck ─────────────────────────────────────────────────── */
@media print{
  body{background:#fff;padding:0}
  .site-head .nav,.nav-mobile,.slidein,.edition{display:none}
  .sheet,.site-foot{box-shadow:none;max-width:none}
}

/* Abstände (web) */
.h3 + p,.h3 + .meta{margin-top:8px}
.calc--wide{margin-top:40px}
@media (max-width:720px){.calc b{font-size:30px}}
.mt{margin-top:18px}
.hero h1{margin-top:22px;max-width:20ch}
.debriefing-teaser{align-items:center}

/* Beispielausgabe vollständig (Debriefing-Seite) */
.tip-mini{margin-top:36px;border-top:3px solid var(--day2);position:relative}   /* 04 .tip */
.mail-card .tip-mini > .tape{margin-top:0;position:relative;top:-14px}
.mail-card .sign{margin-top:28px;padding-top:20px;border-top:1px solid var(--ink)}
.mail-card .stamp-box{margin-top:26px;padding:18px 20px}
.mail-card .calc b{font-size:28px}
.mail-card .lbl--ink{margin-top:22px}
.form-actions{margin-top:4px}
.btn[disabled]{background:var(--ink-soft);border-color:var(--ink-soft);cursor:not-allowed}
.archive-empty{padding:28px 26px}
.field .choice{font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;margin:0;color:var(--ink)}
.field .choice b{font-weight:600}
/* Zahlenkacheln auf dem Handy: kleinere Ziffern, Umbruch erlaubt (Reihenfolge wichtig: nach der 720-px-Regel) */
@media (max-width:520px){.calc b{font-size:24px;white-space:nowrap}.calc > div{overflow-wrap:break-word;hyphens:manual}}

/* ── Korrekturen nach der Sichtprüfung (7.11.2026) ─────────── */
.wordmark{margin:0}
.nav-mobile .panel .btn{width:100%}
.site-foot .wordmark .dot{color:var(--day-tint)}          /* dunkle Tagesfarben nicht auf dem dunklen Fuss */
.desk .mail-card .lbl{color:var(--day-deep)}              /* die Karte ist Papier, auch auf dem Tisch */
.mail-card .kicker + .lbl{margin-top:22px}
.desk .tape--plain{background:var(--day2-tint)}           /* Etiketten auf dem Tisch sichtbar machen (04: jedes Etikett eine Tönung) */
.paper-frame .tape--plain{background:var(--tape)}
.sheet > .sec.tip{padding-top:16px}                        /* 04 .tip: Titel 22 px unter dem Etikett */
html[data-day="sa"] .sec.tip{border-top-color:var(--day2-deep)}             /* Zitrone nur als Fläche */
html[data-day="sa"] .sec.tip .underline--two path{stroke:var(--day2-deep)}
.hero h1 .l{display:block}
.sec-head > p,.cta-final p{max-width:var(--measure)}
.split > .lead{margin-bottom:0}
.split > .note{margin-top:12px}
.num-list > li > p{max-width:var(--measure)}
.ruled.num-list > li{display:flex;flex-direction:column;align-items:flex-start}
.ruled.num-list > li > .meta{margin-top:auto;padding-top:6px}
.desk .grid > .note{align-self:start}
.paper-frame figcaption,.collage figcaption,.legal h2,.legal h3{text-wrap:balance}
.meta{text-wrap:pretty}
ul.watch.mt{margin-top:12px}
.page-hero .note{display:flex;flex-direction:column}
.page-hero .note .meta{margin-top:auto}
.nobr{white-space:nowrap}
.h1 .hy,.h2 .hy,.h3 .hy{margin:0 -.06em}                  /* Bindestrich in grossen Titeln enger, sonst wirkt er wie ein Gedankenstrich */
.sheet > .sec--more{padding-top:10px}                      /* 04 .more: Haarlinie, dann gleich der Zwischentitel */
.sec--more > .lbl{color:var(--ink);margin:12px 0}
.sec--more > .list-plain{border-top:0}
.faq-group > .h3{font-size:30px}
@media (min-width:721px) and (max-width:900px){
  .desk .grid-3,.grid-3--shots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .split > div > .underline:last-child{margin-bottom:0}
  .split > .stamp-box{margin-top:16px}
}
@media (max-width:720px){
  .faq summary{font-size:20px;padding:14px 0}
  .faq-group > .h3{font-size:26px}
  .legal .h1{font-size:clamp(32px,10.5vw,var(--fs-h1))}
}
@media (max-width:520px){
  .hero h1{font-size:42px}
  .calc:not(.mail-card .calc){grid-template-columns:minmax(0,1fr);gap:8px}
  .calc:not(.mail-card .calc) > div{display:grid;grid-template-columns:7.6em 1fr;align-items:baseline;gap:0 12px}
  .calc:not(.mail-card .calc) b{font-size:28px}
  .calc:not(.mail-card .calc) span{margin-top:0}
  .mail-card .calc b{font-size:24px}
  .mail-card .calc > div{padding:12px 10px 10px}
  .desk .mail-card{margin-inline:calc(var(--sheet-pad) * -1)}
  .mail-card .prompt-bar span{white-space:nowrap}
  .page-hero .collage{padding-top:16px}
  .page-hero .collage > .tape{top:0}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{display:block;padding:12px 0;border-bottom:1px solid var(--rule)}
  .tbl td{display:block;border:0;padding:0}
  .tbl td:first-child{font-weight:600;margin-bottom:4px}
  .desk .note{padding:28px 18px 20px}
}