/* aigency.ch · Visual-Upgrade v2 (docs/design/visual-upgrade-v2.md)
   «Der Schreibtisch, nicht das Blatt»: Abschnitte laufen über die ganze Breite, Inhalt höchstens 1320 px,
   pro Abschnitt ein grosses Element, Farbe des Tages auch als Fläche. Farben, Schriften, Verbote aus 02d. */

:root{--content-max:1320px}
/* Seitenrand: links und rechts gleich, Inhalt höchstens 1320 px breit (Prozent = Breite des Abschnitts) */
body{padding:0}
.site-head,.sheet,.desk,.site-foot,.band,.ink,.wall,.fan-sec{--pad-x:max(var(--sheet-pad), calc((100% - var(--content-max)) / 2))}
.site-head{max-width:none;margin:0;padding-inline:var(--pad-x);box-shadow:none}
.sheet{max-width:none;margin:0;box-shadow:none;padding-inline:var(--pad-x)}
.desk{max-width:none;margin:0;padding-inline:var(--pad-x)}
main > *{margin-bottom:0}
.site-foot{max-width:none;padding-inline:var(--pad-x)}
body{padding-bottom:0}

/* Papierkörnung auf dem Tisch (SVG-Rauschen, kein Verlauf) */
.desk,.hero2{position:relative;isolation:isolate}
.desk::before,.hero2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Tipp-Abschnitte der Unterseiten werden zum Farbband in der Zweitfarbe (mindestens eine Fläche pro Seite) */
.sheet > .sec.tip{margin-inline:calc(-1 * var(--pad-x));padding-inline:var(--pad-x);background:var(--day2-tint);border-top:0;padding-top:var(--section-y)}
.sheet > .sec.tip + .sec{border-top:0}
.sheet > .sec.tip > .tape:first-child{left:var(--pad-x);top:calc(var(--section-y) * .5 - 14px)}
.sec.tip .lbl,.sec.tip a:not(.btn){color:var(--ink)}
.sec.tip ol.steps > li::before,.sec.tip .num-list > li::before{color:var(--ink)}
.sec.tip .underline--two path{stroke:var(--day2-deep)}
.sec.tip .calc > div{background:var(--paper)}
html[data-day="sa"] .sec.tip{border-top-color:transparent}

/* ── Start: Hero als Bühne ─────────────────────────────────── */
.hero2{--pad-x:max(var(--sheet-pad), calc((100% - var(--content-max)) / 2));background:var(--paper);padding:clamp(36px,5vw,72px) var(--pad-x) clamp(72px,8vw,120px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;min-height:min(calc(100svh - 140px),860px);overflow:hidden}
.hero2-copy{position:relative;z-index:3}
.hero2 .h1{font-size:clamp(44px,5.4vw,82px);line-height:1.02;letter-spacing:-.012em;margin-top:26px;max-width:none}
.hero2 .h1 .l{display:block;white-space:nowrap}
.hero2 .underline{width:clamp(210px,22vw,320px);max-width:80%;height:14px;margin:18px 0 28px}
.hero2 .lead{color:var(--ink-soft);max-width:44ch}
.hero2-stage{position:relative;aspect-ratio:1/.96;width:100%;z-index:1}
.hero2-stage .circle{position:absolute;border-radius:50%}
.hero2-stage .c1{width:82%;aspect-ratio:1;left:10%;top:9%;background:var(--day)}
.hero2-stage .c2{width:34%;aspect-ratio:1;right:-6%;top:2%;background:var(--day2)}
.hero2-stage .obj{position:absolute;display:block;height:auto;filter:drop-shadow(0 10px 14px rgba(40,30,15,.2));transition:transform .4s var(--ease)}
.hero2-stage .obj img{width:100%;height:auto;display:block}
.hero2-stage .o-main{width:66%;left:17%;top:8%;--rot:-3deg}
.hero2-stage .o-gears{width:23%;left:2%;top:4%;--rot:-9deg;z-index:2}
.hero2-stage .o-rocket{width:22%;right:1%;top:7%;--rot:6deg;z-index:2}
.hero2-stage .o-watch{width:20%;right:3%;bottom:6%;--rot:11deg;z-index:2}
.hero2-stage .obj{transform:translate(var(--px,0px),var(--py,0px)) rotate(var(--rot,0deg))}
.hero2-stage .doodle{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.hero2-stage .doodle path{fill:none;stroke:var(--day2-deep);stroke-width:1.4;stroke-linecap:round}
.torn{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:22px;display:block;z-index:4}
.torn path{fill:var(--next,var(--day-deep))}
@media (max-width:900px){
  .hero2{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero2-stage{max-width:560px;margin:8px auto 0}
  .hero2 .h1 .l{white-space:normal}
}
@media (prefers-reduced-motion:no-preference){
  @media (max-width:900px){
    .hero2-stage .o-gears{animation:float 7s ease-in-out infinite}
    .hero2-stage .o-rocket{animation:float 8s ease-in-out -2s infinite}
    .hero2-stage .o-watch{animation:float 9s ease-in-out -4s infinite}
  }
}
@keyframes float{50%{translate:0 -5px}}

/* Farbwähler: sieben Tage als Spielzeug (nur für den Besuch, ohne Speichern) */
.daypick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:34px;font-size:13px;color:var(--ink-soft)}
.daypick b{color:var(--ink);font-weight:600}
.daypick .dots{display:flex;gap:4px}
.daypick button{width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:50%;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.daypick button[aria-pressed="true"]{border-color:var(--ink)}
.daypick button i{position:relative;display:block;width:14px;height:14px;border-radius:50%;overflow:hidden;background:var(--day)}
.daypick button i::after{content:"";position:absolute;top:0;right:0;width:50%;height:100%;background:var(--day2)}
.no-js .daypick .dots{display:none}

/* ── Start: Farbband «Das Problem» ─────────────────────────── */
.band{background:var(--day-deep);color:var(--paper);padding:clamp(56px,7vw,104px) var(--pad-x);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;position:relative}
.band .lbl{color:var(--paper);opacity:.85}
.band{grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);align-items:start}
.band-num{position:relative;justify-self:center;align-self:center;padding:40px 52px 0 44px}
.band .big{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(56px,5.8vw,84px);line-height:1;letter-spacing:-.015em;margin:0;position:relative;z-index:1}
.band .ring{position:absolute;left:-6px;top:4px;width:calc(100% + 16px);height:auto;aspect-ratio:2/1;transform:rotate(-5deg);overflow:visible}
.band .ring path{stroke:var(--day2-tint);stroke-width:1.1;stroke-linecap:round;opacity:.8}
.band .src{margin:34px 0 0;text-align:center;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.band > div:last-child{border-left:.75px solid color-mix(in srgb,var(--paper) 35%,transparent);padding-left:clamp(28px,4vw,64px)}
@media (max-width:720px){.band > div:last-child{border-left:0;padding-left:0}.band-num{justify-self:start;margin-left:-12px}}
.band .h2{color:var(--paper);font-size:clamp(30px,3.4vw,46px);max-width:22ch}
.band p{max-width:58ch;color:var(--paper);opacity:.92}
.band strong{color:var(--paper)}
.band a{color:var(--paper)}
.band .underline path{stroke:var(--paper)}
.band{--focus:var(--paper)}
@media (max-width:720px){.band{grid-template-columns:minmax(0,1fr)}}

/* ── Start: Karteikarten auf dem Tisch ─────────────────────── */
.kcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}
.kcard{position:relative;background-color:var(--sheet);padding:28px 28px 28px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 16px 26px -18px rgba(60,40,20,.45);transform:rotate(var(--r,0deg));transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  /* Karteikarte: alle Zeilen auf einem 28-px-Raster, die Linien liegen 5 px unter jeder Zeile, damit der Text darauf sitzt */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='28'><line x1='0' y1='23.5' x2='10' y2='23.5' stroke='%23D9CFBD' stroke-width='.75'/></svg>");
  background-repeat:repeat;background-position:0 var(--rule-off,0px);background-size:10px 28px}
.kcard:nth-child(6n+1){--r:-1.6deg}.kcard:nth-child(6n+2){--r:1.2deg}.kcard:nth-child(6n+3){--r:-.6deg}
.kcard:nth-child(6n+4){--r:1.4deg}.kcard:nth-child(6n+5){--r:-1.1deg}.kcard:nth-child(6n+6){--r:.8deg}
.kcard:hover{--r:0deg;box-shadow:0 1px 0 rgba(0,0,0,.05),0 22px 34px -20px rgba(60,40,20,.5)}
.kcard > .tape:first-child{position:absolute;top:-12px;left:22px;margin:0}
.kcard .h3{position:relative;font-size:25px;line-height:28px;margin:0}
.kcard .h3 + p{margin-top:0}
.kcard .h3::after{content:"";position:absolute;left:-28px;right:-28px;bottom:4px;height:1px;background:var(--day2);opacity:.55}
.kcard p{font-size:16px;line-height:28px;margin:0}
.kcard .meta{font-size:14px;line-height:28px;margin-top:28px;font-style:normal}
.kcard .kobj{position:absolute;right:-14px;top:-26px;width:96px;transform:rotate(8deg);filter:drop-shadow(0 8px 10px rgba(40,30,15,.2))}
.kcard .clip{position:absolute;right:26px;top:-14px;width:12px;height:40px;border:2px solid #8A8274;border-radius:50%}
@media (max-width:900px){.kcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.kcards{grid-template-columns:minmax(0,1fr)}}

/* ── Start: Leistungen als Sofortbilder ────────────────────── */
.polaroids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px;align-items:start}
.polaroid{margin:0}
.polaroid .print{display:block;background:#fff;padding:14px 14px 18px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 18px 30px -18px rgba(60,40,20,.5);transform:rotate(var(--r,0deg));transition:transform .25s var(--ease);text-decoration:none;color:var(--ink)}
.polaroid:nth-child(1){--r:-2deg}.polaroid:nth-child(2){--r:1.5deg;margin-top:28px}.polaroid:nth-child(3){--r:-1deg}
.polaroid .print:hover{--r:0deg}
/* Ganze Collage zeigen statt beschneiden, mit Luft in der Papierfarbe des Bildes */
.polaroid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:3%;box-sizing:border-box;display:block;background:var(--print-bg,var(--paper))}
.polaroid .cap{display:block;font-family:var(--f-display);font-style:italic;font-size:28px;line-height:1.15;margin-top:14px}
.polaroid figcaption{margin-top:22px}
.polaroid figcaption p{margin:0 0 10px}
@media (max-width:900px){.polaroids{grid-template-columns:minmax(0,1fr);max-width:520px}.polaroid:nth-child(2){margin-top:0}}

/* ── Start: Methode als Haftzettel an der Pinnwandlinie ────── */
.pinline{position:relative;padding-top:34px}
.pinline::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--ink)}
.stickies{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:n}
.stickies > li{counter-increment:n;position:relative;background:var(--day2-tint);padding:30px 24px 28px;transform:rotate(var(--r,0deg));box-shadow:0 10px 18px -12px rgba(60,40,20,.45)}
.stickies > li:nth-child(1){--r:-1.5deg}.stickies > li:nth-child(2){--r:1deg}.stickies > li:nth-child(3){--r:-.5deg}.stickies > li:nth-child(4){--r:1.6deg}
.stickies > li::before{content:counter(n);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:38px;line-height:1;width:64px;height:64px;border:1.5px solid var(--ink);border-radius:50% 46% 52% 48%;color:var(--ink);transform:rotate(var(--step-tilt));margin-bottom:18px}
.stickies > li::after{content:"";position:absolute;left:50%;top:-10px;width:70px;height:20px;transform:translateX(-50%) rotate(-3deg);background:var(--tape)}
.stickies .h3{font-size:26px}
.stickies p{margin:8px 0 0}
@media (max-width:900px){.stickies{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stickies{grid-template-columns:minmax(0,1fr)}}

/* ── Start: dunkler Case-Abschnitt ─────────────────────────── */
.ink{background:var(--ink);color:var(--foot-link);padding:clamp(64px,8vw,120px) var(--pad-x);--focus:var(--foot-link)}
.ink .lbl{color:var(--foot-text)}
.ink .h2{color:var(--paper)}
.ink p{color:var(--foot-text);max-width:58ch}
.ink a:not(.btn){color:var(--foot-link)}
.ink .underline path{stroke:var(--day2)}
.ink .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ink .btn:hover{background:var(--day2-tint);border-color:var(--day2-tint);color:var(--ink)}
.ink-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px);align-items:center}
.ink .paper-frame{transform:rotate(-1.5deg);background:var(--paper);border-color:var(--paper)}
.ink .paper-frame > .tape{top:-14px}
.bignums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(40px,5vw,72px);border-top:1px solid #3A352E;padding-top:32px}
.bignums b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(56px,6.6vw,96px);line-height:1;color:var(--day2-tint);white-space:nowrap}
.bignums span{display:block;color:var(--foot-text);margin-top:10px;max-width:24ch}
@media (max-width:900px){.ink-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.bignums{grid-template-columns:minmax(0,1fr)}}

/* ── Start: Farbwand, die ganze Woche auf einen Blick ──────── */
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px}
.wall > div{background:var(--day-deep);color:var(--paper);padding:28px 22px 24px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.wall > div.two{background:var(--day2-deep)}
.wall > div::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-46px;top:-46px;background:var(--day);opacity:.55}
.wall > div.two::before{background:var(--day2)}
.wall b{position:relative;font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.1}
.wall span{position:relative;font-size:15px;line-height:1.45;opacity:.92}
@media (max-width:900px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.wall{grid-template-columns:minmax(0,1fr)}.wall > div{min-height:0}}

/* ── Start: grosses Porträt ────────────────────────────────── */
.about2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.about2 .sticker{max-width:560px;transform:rotate(-1.8deg)}
.about2 .quote{font-size:clamp(28px,2.8vw,40px);line-height:1.25}
@media (max-width:900px){.about2{grid-template-columns:minmax(0,1fr)}.about2 .sticker{max-width:420px}}

/* ── Start: Debriefing, aufgefächerte Ausgaben ─────────────── */
.fan-sec{background:var(--day2-tint);padding:clamp(64px,8vw,120px) var(--pad-x)}
.fan-sec .lbl,.fan-sec a:not(.btn){color:var(--ink)}
.fan-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.fan{position:relative;height:clamp(340px,32vw,430px)}
.fan .mail-card{position:absolute;left:14%;bottom:0;width:72%;max-width:470px;height:300px;overflow:hidden;transform-origin:50% 150%;transition:transform .3s var(--ease);font-size:14px;border-top:6px solid var(--day)}
.fan .mail-card .inner{padding:0 26px 22px;position:relative}
.fan .mail-card .inner::after{content:"";position:absolute;right:22px;bottom:-60px;width:140px;height:140px;border-radius:50%;background:var(--day);opacity:.9}
.fan .mail-card:last-child .inner::after{display:none}
.fan .mail-card:nth-child(1){transform:rotate(-24deg)}
.fan .mail-card:nth-child(2){transform:rotate(-15deg)}
.fan .mail-card:nth-child(3){transform:rotate(-7deg)}
.fan .mail-card:nth-child(4){transform:rotate(2deg)}
.fan .mail-card:nth-child(5){transform:rotate(-2deg) translateY(10px)}
/* Kein Einzel-Hover mehr (Karte drehte sich unter der Maus weg und flackerte). Der ganze Fächer öffnet sich ruhig. */
.fan .mail-card{transition:transform .6s var(--ease)}
@media (hover:hover){
.fan:hover .mail-card:nth-child(1){transform:rotate(-31deg) translateX(-14px)}
.fan:hover .mail-card:nth-child(2){transform:rotate(-20deg) translateX(-8px)}
.fan:hover .mail-card:nth-child(3){transform:rotate(-9deg)}
.fan:hover .mail-card:nth-child(4){transform:rotate(4deg) translateX(10px)}
.fan:hover .mail-card:nth-child(5){transform:rotate(-1deg) translateY(-6px)}}
.fan .mail-card .mast{padding-top:18px;padding-bottom:10px}
.fan .mail-card .wordmark{font-size:28px}
.fan .mail-card .mail-h{font-size:26px}
.fan .mail-card .tape{margin-top:16px}
.fan-note{font-size:var(--fs-meta);color:var(--ink-soft);margin-top:14px}
@media (max-width:900px){.fan-grid{grid-template-columns:minmax(0,1fr)}.fan{height:360px;margin-bottom:12px}}
@media (max-width:520px){.fan{height:330px}.fan .mail-card{left:6%;width:88%;height:270px}.fan .mail-card:nth-child(1){transform:rotate(-14deg)}.fan .mail-card:nth-child(2){transform:rotate(-9deg)}.fan .mail-card:nth-child(3){transform:rotate(-4deg)}}

/* ── Start: Schluss mit kleiner Collage ────────────────────── */
.end2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.end-stage{position:relative;aspect-ratio:1;max-width:420px;width:100%;justify-self:center}
.end-stage .circle{position:absolute;border-radius:50%}
.end-stage .c1{width:80%;aspect-ratio:1;left:10%;top:10%;background:var(--day)}
.end-stage .c2{width:30%;aspect-ratio:1;right:2%;top:2%;background:var(--day2)}
.end-stage img{position:absolute;width:62%;left:19%;top:18%;height:auto;transform:rotate(-6deg);filter:drop-shadow(0 10px 14px rgba(40,30,15,.22))}
@media (max-width:900px){.end2{grid-template-columns:minmax(0,1fr)}.end-stage{max-width:300px}}
.hero2-stage .ai-note{position:absolute;left:0;bottom:-26px;margin:0}
.desk,.sheet,.band,.ink,.fan-sec,.hero2{overflow-x:clip}
@media (max-width:600px){.kcard .kobj{right:-2px;width:80px}}
@media (max-width:900px){.hero2-stage .doodle{display:none}}
.fan{margin-bottom:96px}
.fan .mail-card{left:22%;width:68%}
.fan-note{position:relative;z-index:10}
@media (max-width:900px){.fan{margin-bottom:70px}.fan .mail-card{left:16%;width:76%}}
@media (max-width:520px){.fan{margin-bottom:56px}.fan .mail-card{left:12%;width:84%}}
@media (max-width:520px){.fan{height:380px}.fan .mail-card{height:330px}}

/* Hero-Loop (Stop-Motion, ersetzt Kreise und Einzelteile; Kreise sind im Bild) */
.hero2-stage--loop{aspect-ratio:1/1}
.hero2-stage--loop .loop{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
/* Hero-Loop: Papierkorn liegt über dem Loop, damit der Bildrand verschwindet */
.hero2:has(.hero2-stage--loop)::before{z-index:2}

/* Band «Das Problem»: Zweitfarbe für Kreis, Linie und Hervorhebung, je Tag so weit aufgehellt, dass sie auf --day-deep mindestens 4,5:1 erreicht */
:root{--band-accent:#CDD4CC}
html[data-day=mo]{--band-accent:#E0CC9E}html[data-day=di]{--band-accent:#DFBFAD}html[data-day=mi]{--band-accent:#CDD4CC}html[data-day=do]{--band-accent:#D4D7D5}
html[data-day=fr]{--band-accent:#B8C1AD}html[data-day=sa]{--band-accent:#D0B867}html[data-day=so]{--band-accent:#D3A793}
.band .ring path{stroke:var(--band-accent);stroke-width:1.3;opacity:1}
.band .underline path{stroke:var(--band-accent)}
.band strong{color:var(--band-accent);font-weight:600}
/* Hero ohne Papierkorn: gleiche Fläche wie die Kopfzeile, heller (Dominic 7.11.2026, Variante B) */
.hero2::before{display:none}

/* ── Werkzeugkasten v3: sechs verschiedene Papiere, Collage-Objekte, echte Büroklammern (Dominic 7.11.2026) ── */
.bench{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px 44px;margin-top:64px;align-items:start}
.tool{position:relative;padding:34px 30px 30px;color:var(--ink);transform:rotate(var(--r,0deg));transition:transform .35s var(--ease);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.06)) drop-shadow(0 14px 18px rgba(60,40,20,.18))}
.tool:nth-child(1){--r:-1.4deg}.tool:nth-child(2){--r:1.1deg;margin-top:26px}.tool:nth-child(3){--r:-.5deg}
.tool:nth-child(4){--r:.9deg}.tool:nth-child(5){--r:-1.2deg;margin-top:18px}.tool:nth-child(6){--r:1.5deg}
.tool::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-c,var(--sheet));clip-path:var(--edge,none)}
.tool::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain,.0);mix-blend-mode:multiply;clip-path:var(--edge,none);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.tool .tlbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);margin:0 0 10px}
.tool .h3{font-size:30px;line-height:1.05;margin:0 0 12px;max-width:11ch}
.tool p{font-size:16px;line-height:1.6;margin:0}
.tool .ex{margin-top:18px;padding-top:14px;border-top:.75px solid rgba(21,19,16,.35);font-family:var(--f-display);font-style:italic;font-size:19px;line-height:1.3}
.tool .ex span{display:block;font-family:var(--f-body);font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.tool .tobj{position:absolute;right:-22px;top:-58px;width:132px;height:auto;transform:rotate(7deg);z-index:2;filter:drop-shadow(0 10px 12px rgba(40,30,15,.25));pointer-events:none}
.tool .clip{position:absolute;left:-60px;top:4px;width:118px;height:auto;transform:rotate(-94deg);z-index:3;filter:drop-shadow(0 3px 3px rgba(40,30,15,.25))}
.ttape{position:absolute;top:-12px;width:96px;height:26px;background:rgba(236,226,200,.78);z-index:3;box-shadow:0 1px 2px rgba(60,40,20,.12);
  clip-path:polygon(3% 0,97% 6%,100% 52%,96% 100%,2% 94%,0 46%)}
.ttape.tape1{left:26px;transform:rotate(-4deg)}.ttape.tape2{left:50%;margin-left:-48px;transform:rotate(3deg)}
/* Papiere */
.t-index{--paper-c:#FFFDF8}
.t-index::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect width='10' height='10' fill='%23FFFDF8'/></svg>")}
.t-index .h3{padding-bottom:10px;border-bottom:1px solid var(--day2)}
.t-kraft{--paper-c:#D2BC97;--grain:.55;--edge:polygon(0.0% 2.1px,2.2% 1.0px,4.3% 4.3px,6.5% 0.5px,8.7% 3.5px,10.9% 2.4px,13.0% 0.4px,15.2% 3.3px,17.4% 0.2px,19.6% 2.9px,21.7% 0.5px,23.9% 0.6px,26.1% 2.8px,28.3% 5.5px,30.4% 0.8px,32.6% 1.5px,34.8% 4.1px,37.0% 6.3px,39.1% 3.8px,41.3% 2.6px,43.5% 6.4px,45.7% 0.3px,47.8% 5.7px,50.0% 1.9px,52.2% 1.0px,54.3% 0.8px,56.5% 2.0px,58.7% 5.4px,60.9% 1.2px,63.0% 3.8px,65.2% 4.2px,67.4% 2.5px,69.6% 3.6px,71.7% 0.4px,73.9% 0.4px,76.1% 1.4px,78.3% 4.5px,80.4% 2.8px,82.6% 2.1px,84.8% 3.9px,87.0% 3.0px,89.1% 2.0px,91.3% 5.2px,93.5% 4.6px,95.7% 1.6px,97.8% 3.8px,100.0% 3.5px,100% 100%,0 100%)}
.t-kraft .tlbl,.t-kraft .ex span{color:#3F3528}
.t-grid{--paper-c:#FBF9F2}
.t-grid::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M16 0H0V16' fill='none' stroke='%23A9C1C9' stroke-opacity='.45' stroke-width='.6'/></svg>")}
.t-receipt{--paper-c:#FDFCF7;--edge:polygon(0 0,100% 0,100.00% 100%,96.67% calc(100% - 8px),93.33% 100%,90.00% calc(100% - 8px),86.67% 100%,83.33% calc(100% - 8px),80.00% 100%,76.67% calc(100% - 8px),73.33% 100%,70.00% calc(100% - 8px),66.67% 100%,63.33% calc(100% - 8px),60.00% 100%,56.67% calc(100% - 8px),53.33% 100%,50.00% calc(100% - 8px),46.67% 100%,43.33% calc(100% - 8px),40.00% 100%,36.67% calc(100% - 8px),33.33% 100%,30.00% calc(100% - 8px),26.67% 100%,23.33% calc(100% - 8px),20.00% 100%,16.67% calc(100% - 8px),13.33% 100%,10.00% calc(100% - 8px),6.67% 100%,3.33% calc(100% - 8px),0.00% 100%);padding-bottom:40px}
.t-receipt .h3,.t-receipt .tlbl{font-family:var(--f-mono,"IBM Plex Mono",monospace)}
.t-receipt .h3{font-size:23px;letter-spacing:-.01em;max-width:none}
.t-tint{--paper-c:var(--day-tint);--grain:.25;--edge:polygon(0 0,100% 0,100.0% calc(100% - 5.8px),97.8% calc(100% - 4.8px),95.7% calc(100% - 1.9px),93.5% calc(100% - 6.5px),91.3% calc(100% - 0.8px),89.1% calc(100% - 2.8px),87.0% calc(100% - 5.0px),84.8% calc(100% - 1.0px),82.6% calc(100% - 3.2px),80.4% calc(100% - 0.3px),78.3% calc(100% - 4.4px),76.1% calc(100% - 5.0px),73.9% calc(100% - 3.8px),71.7% calc(100% - 5.8px),69.6% calc(100% - 2.1px),67.4% calc(100% - 4.6px),65.2% calc(100% - 3.9px),63.0% calc(100% - 3.8px),60.9% calc(100% - 3.0px),58.7% calc(100% - 5.5px),56.5% calc(100% - 6.2px),54.3% calc(100% - 3.1px),52.2% calc(100% - 4.4px),50.0% calc(100% - 0.4px),47.8% calc(100% - 4.6px),45.7% calc(100% - 4.3px),43.5% calc(100% - 6.6px),41.3% calc(100% - 5.4px),39.1% calc(100% - 1.9px),37.0% calc(100% - 2.5px),34.8% calc(100% - 4.4px),32.6% calc(100% - 0.1px),30.4% calc(100% - 3.0px),28.3% calc(100% - 1.1px),26.1% calc(100% - 0.8px),23.9% calc(100% - 0.4px),21.7% calc(100% - 5.1px),19.6% calc(100% - 0.9px),17.4% calc(100% - 1.6px),15.2% calc(100% - 2.6px),13.0% calc(100% - 5.8px),10.9% calc(100% - 0.5px),8.7% calc(100% - 3.0px),6.5% calc(100% - 3.6px),4.3% calc(100% - 5.8px),2.2% calc(100% - 5.4px),0.0% calc(100% - 5.7px))}
.t-tint2{--paper-c:var(--day2-tint);--grain:.25}
@media (hover:hover){.tool:hover{--r:0deg;transform:rotate(0deg) translateY(-4px)}.tool .tobj{transition:transform .6s cubic-bezier(.22,1,.36,1)}.tool:hover .tobj{transform:rotate(3deg) translateY(-6px)}}
@keyframes wiggle{0%{transform:rotate(7deg)}33%{transform:rotate(1deg) translate(-2px,-4px)}66%{transform:rotate(11deg) translate(2px,-2px)}100%{transform:rotate(7deg)}}
@media (max-width:1000px){.bench{grid-template-columns:repeat(2,minmax(0,1fr))}.tool:nth-child(n){margin-top:0}}
@media (max-width:640px){.bench{grid-template-columns:minmax(0,1fr);gap:64px}.tool .tobj{width:104px;right:-6px;top:-46px}}
@media (prefers-reduced-motion:reduce){.tool,.tool .tobj{transition:none;animation:none!important}}

/* ── Prinzipien v3: Pinnwand mit Reissnägeln, Faden, vier Zettelfarben und Kompass (Dominic 7.11.2026) ── */
.pinline{padding-top:56px;margin-top:24px}
.pinline::before{display:none}
.pinline .thread{position:absolute;left:0;top:30px;width:100%;height:60px;z-index:2;overflow:visible;pointer-events:none}
.pinline .thread path{fill:none;stroke:#8A4630;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.85}
.stickies{gap:40px;position:relative}
.stickies > li{background:var(--note,#D0B867);padding:40px 26px 34px;box-shadow:none;filter:drop-shadow(0 12px 14px rgba(60,40,20,.22));min-height:270px}
.stickies > li:nth-child(1){--note:#D0B867;--r:-2.2deg;margin-top:6px}
.stickies > li:nth-child(2){--note:#E3A98F;--r:1.6deg;margin-top:30px}
.stickies > li:nth-child(3){--note:#B8C1AD;--r:-1deg;margin-top:2px}
.stickies > li:nth-child(4){--note:#9FB4C4;--r:2.4deg;margin-top:26px}
.stickies > li::after{display:none}
.stickies > li::before{font-style:italic;font-size:46px;width:70px;height:70px;border:1px solid var(--ink);margin-bottom:22px}
.stickies .h3{font-size:28px;line-height:1.1}
.stickies p{font-size:16px;line-height:1.55}
.stickies .pin{position:absolute;left:50%;top:-30px;width:44px;height:auto;transform:translateX(-50%) rotate(-8deg);z-index:3;filter:drop-shadow(2px 6px 4px rgba(40,20,10,.3))}
/* Zettel hebt sich an der Ecke leicht: Schatten unten rechts stärker */
section[aria-labelledby="method-title"] .sec-head .prose{max-width:440px}
.compass{position:absolute;right:-8px;top:-230px;width:150px;z-index:1;pointer-events:none}
.compass img{position:relative;width:100%;height:auto;transform:rotate(14deg);filter:drop-shadow(0 12px 14px rgba(40,30,15,.25))}
.compass .cc{position:absolute;left:-40px;top:40px;width:190px;height:190px;border-radius:50%;background:var(--day)}
@media (hover:hover){.stickies > li{transition:transform .35s var(--ease)}.stickies > li:hover{transform:rotate(0deg) translateY(-6px)}}
@media (max-width:1180px){.compass{display:none}}
@media (max-width:900px){.pinline .thread{display:none}.stickies{gap:48px 28px}.stickies > li:nth-child(n){margin-top:0}}

/* ── Farbwand v3: Collage-Kacheln, Stop-Motion beim Überfahren, Klick dreht die Kachel um (Dominic 7.11.2026) ── */
.wall{gap:16px;perspective:1400px}
.wall > .tile{background:none;padding:0;min-height:0;display:block;overflow:visible;position:relative;height:250px}
.wall > .tile::before{display:none}
.tile-front,.tile-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile-front{all:unset;box-sizing:border-box;position:absolute;inset:0;cursor:pointer;background:var(--day-deep);color:var(--paper);padding:24px 22px 22px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile.two .tile-front{background:var(--day2-deep)}
.tile-front:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tile .disc{position:absolute;width:150px;height:150px;border-radius:50%;right:-26px;top:-30px;background:var(--day);transition:transform .45s var(--ease)}
.tile.two .disc{background:var(--day2)}
.tile .wobj{position:absolute;right:6px;top:4px;width:122px;height:auto;transform:rotate(-6deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));transition:transform .45s var(--ease)}
.tile b{position:relative;font-family:var(--f-display);font-weight:400;font-size:29px;line-height:1.05;max-width:12ch}
.tile .sub{position:relative;font-size:14.5px;line-height:1.4;opacity:.9;margin-top:8px;max-width:24ch}
.tile .hint{position:absolute;left:22px;top:22px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.75;padding-bottom:3px;border-bottom:.75px solid currentColor}
.tile-back{background:var(--sheet);color:var(--ink);padding:26px 22px 22px;display:flex;flex-direction:column;transform:rotateY(180deg);box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer}
.tile-back .lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--day-deep);margin:0 0 10px}
.tile-back .bx{font-family:var(--f-display);font-style:italic;font-size:21px;line-height:1.25;margin:0 0 auto}
.tile-back .more-link{font-size:14px;margin-top:12px}
.tile.is-flipped .tile-front{transform:rotateY(-180deg)}
.tile.is-flipped .tile-back{transform:rotateY(0deg)}
@media (hover:hover){
  .tile:hover .disc{transform:scale(1.12)}
  .tile .wobj{transition:transform .6s cubic-bezier(.22,1,.36,1)}.tile:hover .wobj{transform:rotate(-2deg) translate(-2px,-8px)}
}
@keyframes hop{0%{transform:rotate(-6deg)}25%{transform:rotate(-1deg) translate(-3px,-10px)}50%{transform:rotate(-10deg) translate(2px,-14px)}75%{transform:rotate(-3deg) translate(0,-4px)}100%{transform:rotate(-6deg)}}
/* Einflug beim Scrollen: Kachel für Kachel, wie von Hand hingelegt (nur mit JavaScript, sonst sofort sichtbar) */
.wall.wall-anim .tile{opacity:0;transform:translateY(18px)}
.wall.wall-anim.in .tile{animation:drop 1s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * 70ms)}
@keyframes drop{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
.wall .tile:nth-child(1){--i:0}.wall .tile:nth-child(2){--i:1}.wall .tile:nth-child(3){--i:2}.wall .tile:nth-child(4){--i:3}.wall .tile:nth-child(5){--i:4}.wall .tile:nth-child(6){--i:5}.wall .tile:nth-child(7){--i:6}.wall .tile:nth-child(8){--i:7}
@media (prefers-reduced-motion:reduce){.wall.wall-anim .tile{opacity:1;transform:none;animation:none!important}.tile-front,.tile-back,.tile .wobj,.tile .disc{transition:none;animation:none!important}}
@media (max-width:420px){.wall > .tile{height:230px}}

/* Leistungs-Polaroids: quadratisch wie ein echtes Sofortbild, Stop-Motion beim Überfahren (Dominic 7.11.2026) */
.polaroid img.pol-loop{aspect-ratio:1/1;object-fit:cover;padding:0;background:#F8E8D4}

/* ── Case: Karussell mit Prototypen (Dominic 7.11.2026) ── */
.case-car .car-stage{position:relative;aspect-ratio:1200/805;overflow:hidden;border:1px solid var(--rule);background:#1b1a18}
.case-car .car-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;opacity:0;transform:scale(1.015);transition:opacity .7s var(--ease),transform 4.8s linear}
.case-car .car-slide.is-on{opacity:1;transform:scale(1)}
.case-car figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px}
.case-car .car-dots{display:flex;gap:6px;flex:none}
.case-car .car-dot{all:unset;cursor:pointer;width:9px;height:9px;border-radius:50%;border:1px solid var(--ink-soft);transition:background .3s}
.case-car .car-dot.is-on{background:var(--ink)}
.case-car .car-dot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.case-car > .tape{z-index:3;transition:transform .3s}
.bignums b{font-size:clamp(48px,5.8vw,84px);font-style:italic}

/* ══ Leistungsseiten als Magazin (Dominic 7.11.2026): Titelbild, Inhaltsleiste, Bildstrecke, Zitat, Checkliste, Preis ══ */
.mag-cover,.mag-toc,.mag-story,.mag-quote,.mag-fit,.mag-price{--pad-x:max(var(--sheet-pad), calc((100% - var(--content-max)) / 2))}
.mag-cover{position:relative;min-height:min(92svh,860px);padding:clamp(32px,4vw,56px) var(--pad-x) 0;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:#F7E5D0}
.mag-cover-img{position:absolute;top:0;right:0;bottom:0;left:auto;width:70%;height:100%;object-fit:cover;object-position:60% 50%} /* der weiche linke Rand ist ins Bild gerechnet */
.mag-cover-in{position:relative;z-index:1;max-width:560px;padding-top:clamp(8px,3vw,40px)}
.mag-mast{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 clamp(28px,4vw,56px);padding-bottom:12px;border-bottom:.75px solid var(--ink);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.mag-mast span:first-child{font-family:var(--f-display);font-size:20px;letter-spacing:-.01em;text-transform:none;font-style:italic;line-height:1;margin-top:-6px}
.mag-title{font-family:var(--f-display);font-weight:400;font-size:clamp(52px,7vw,96px);line-height:.98;letter-spacing:-.015em;margin:0}
.mag-title em{font-style:italic;color:var(--day-deep)}
.mag-dek{font-size:18px;line-height:1.55;color:var(--ink-soft);max-width:34ch;margin:26px 0 30px}
.mag-lines{position:relative;z-index:1;border-top-color:transparent;box-shadow:inset 0 .75px 0 var(--ink);list-style:none;margin:clamp(40px,6vw,80px) calc(var(--pad-x) * -1) 0;padding:18px var(--pad-x) 22px;background:#F7E5D0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:.75px solid var(--ink);gap:24px}
.mag-lines li{display:flex;align-items:baseline;gap:10px}
.mag-lines b{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1;color:var(--day-deep)}
.mag-lines span{font-size:13px;line-height:1.3;color:var(--ink-soft);max-width:14ch;hyphens:none}
.mag-ai{position:relative;z-index:1;align-self:flex-end;margin:0 0 -30px;background:#F7E5D0;padding:2px 6px}
/* Inhaltsleiste */
.mag-toc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;padding:18px var(--pad-x);background:var(--ink);color:var(--paper);font-size:13.5px}
.mag-toc-h{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-right:10px}
.mag-toc a{color:var(--paper);text-decoration:none;border-bottom:.75px solid transparent}
.mag-toc a:hover{border-bottom-color:currentColor}
.mag-toc i{font-family:var(--f-display);font-size:18px;color:var(--day2-tint);margin-right:4px}
/* Kopf und Kicker */
.mag-kicker{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px;color:var(--ink-soft)}
.mag-kicker i{font-family:var(--f-display);font-size:22px;letter-spacing:0;text-transform:none;color:var(--day-deep);margin-right:8px;vertical-align:-3px}
.mag-head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.mag-head .h2 em{font-style:italic}
/* Bildstrecke */
.mag-story{padding:clamp(64px,8vw,120px) var(--pad-x);background:var(--paper)}
.mag-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.mag-strip li:nth-child(even){margin-top:56px}
.mag-strip figure{margin:0}
.mag-strip img{display:block;width:100%;height:auto;aspect-ratio:1;background:#F8E8D4;box-shadow:0 18px 30px -22px rgba(60,40,20,.55);transition:transform .5s var(--ease)}
.mag-strip figure:hover img{transform:translateY(-6px) rotate(-.6deg)}
.mag-strip figcaption{position:relative;padding-top:24px;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.mag-strip figcaption .tape{position:absolute;top:-14px;left:12px;margin:0}
.mag-strip figcaption b{display:block;font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.1;color:var(--ink);margin-bottom:6px}
/* Zitat */
.mag-quote{background:var(--day-deep);color:var(--paper);padding:clamp(64px,9vw,128px) var(--pad-x);text-align:center}
.mag-quote blockquote{margin:0 auto;max-width:900px}
.mag-quote p{font-family:var(--f-display);font-style:italic;font-size:clamp(34px,4.4vw,60px);line-height:1.1;margin:0}
.mag-quote p::before{content:"«"}.mag-quote p::after{content:"»"}
.mag-quote footer{margin-top:24px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
/* Für wen */
.mag-fit{padding:clamp(64px,8vw,120px) var(--pad-x);background:var(--desk)}
.mag-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.mag-checks li{border-top:.75px solid var(--ink);padding-top:22px;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.mag-checks svg{width:44px;height:44px;display:block;margin-bottom:14px}
.mag-checks svg path{fill:none;stroke:var(--day-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:0}
.mag-checks b{display:block;font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.1;color:var(--ink);margin-bottom:8px}
.mag-aside{margin:clamp(36px,4vw,56px) 0 0;font-size:15px;color:var(--ink-soft);max-width:70ch}
/* Preis */
.mag-price{padding:clamp(72px,9vw,140px) var(--pad-x);background:var(--day-tint);text-align:center}
.mag-price-big{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,5.6vw,84px);line-height:1.02;margin:0 auto;max-width:16ch;letter-spacing:-.01em}
.mag-price-big em{font-style:italic;color:var(--day-deep)}
.mag-price-f{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.mag-price-f span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border:.75px solid var(--ink)}
.mag-price-note{max-width:52ch;margin:24px auto 0;color:var(--ink-soft)}
.mag-price .mag-kicker{color:var(--ink)}
@media (max-width:900px){
  .mag-cover{min-height:auto}
  .mag-cover-img{position:relative;inset:auto;height:auto;aspect-ratio:16/9;order:2;margin:24px calc(var(--pad-x) * -1) 0;width:calc(100% + var(--pad-x) * 2);max-width:none}
  .mag-cover::after{display:none}
  .mag-lines{order:3;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
  .mag-ai{position:static;order:4;margin:0 0 12px}
  .mag-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.mag-strip li:nth-child(even){margin-top:40px}
  .mag-checks{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){.mag-strip{grid-template-columns:minmax(0,1fr)}.mag-strip li:nth-child(even){margin-top:0}}

/* ── Leistungsseiten: «Worum es geht» aus Kundensicht und Wechsel hell/dunkel (Dominic 7.11.2026, Abend) ── */
.mag-what{--pad-x:max(var(--sheet-pad), calc((100% - var(--content-max)) / 2));padding:clamp(64px,8vw,120px) var(--pad-x);background:var(--paper)}
.mag-what-h{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,3.8vw,52px);line-height:1.1;letter-spacing:-.01em;margin:0;max-width:24ch}
.mag-what-h em{font-style:italic;color:var(--day-deep)}
.mag-ba{display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);align-items:center;gap:20px;margin-top:clamp(36px,4vw,56px)}
.ba{position:relative;padding:30px 28px 26px;min-height:100%}
.ba p{margin:0;font-size:17px;line-height:1.55}
.ba-l{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;padding:5px 10px;background:var(--tape)}
.ba-before{background:var(--sheet);box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink-soft);transform:rotate(-.8deg)}

.ba-after{background:var(--day-tint);transform:rotate(.6deg);box-shadow:0 16px 26px -20px rgba(60,40,20,.5)}
.ba-after .ba-l{background:var(--day-deep);color:var(--paper)}
.ba-arrow{width:80px;height:40px;overflow:visible}
.ba-arrow path{fill:none;stroke:var(--day-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mag-ba-note{margin:18px 0 0;font-size:14px;color:var(--ink-soft)}
.mag-get-h{font-family:var(--f-body);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin:clamp(48px,6vw,80px) 0 22px;color:var(--ink-soft)}
.mag-get{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.mag-get li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;align-items:start;border-top:.75px solid var(--ink);padding-top:22px;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.mag-get img{grid-row:span 2;width:96px;height:auto;transform:rotate(-5deg);filter:drop-shadow(0 8px 10px rgba(40,30,15,.22))}
.mag-get b{display:block;font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.1;color:var(--ink);margin-bottom:6px}
@media (max-width:900px){.mag-ba{grid-template-columns:minmax(0,1fr)}.ba-arrow{transform:rotate(90deg);margin:-6px auto}.mag-get{grid-template-columns:minmax(0,1fr)}}

/* Dunkle Flächen: Tinte. Helle Variante für die Bildstrecke: Papier */
.is-ink{background:var(--ink)!important;color:var(--paper)}
.is-ink .h2,.is-ink .h3,.is-ink b,.is-ink .mag-strip figcaption b,.is-ink .mag-checks b{color:var(--paper)}
.is-ink .mag-kicker,.is-ink .mag-aside,.is-ink .mag-price-note,.is-ink .mag-strip figcaption,.is-ink .mag-checks li,.is-ink p,.is-ink .meta,.is-ink .lbl{color:rgba(247,242,232,.78)}
.is-ink .mag-kicker i,.is-ink .mag-head .h2 em,.is-ink .mag-price-big em{color:var(--day2-tint)}
.is-ink .mag-checks li{border-top-color:rgba(247,242,232,.5)}
.is-ink .mag-checks svg path{stroke:var(--day2-tint)}
.is-ink .mag-price-f span{border-color:rgba(247,242,232,.6);color:var(--paper)}
.is-ink a:not(.btn){color:var(--paper)}
.is-ink .num-list > li::before{color:var(--paper);border-color:rgba(247,242,232,.6)}
.is-ink .mag-strip img{box-shadow:0 22px 40px -24px rgba(0,0,0,.9)}
.mag-quote.is-ink blockquote p{color:var(--paper)}
.mag-quote.is-ink{padding-top:0}
.mag-story.is-ink + .mag-quote.is-ink{border-top:0}
.is-paper{background:var(--paper)!important}

/* ══ Bewegung beim Aufbau (Dominic 7.11.2026, Abend) ══
   1. Beim Laden: Hero, Magazin-Titel und Seitenköpfe bauen sich gestaffelt auf (nur CSS, kein Flackern).
   2. Beim Scrollen: site.js setzt .rv-rise (Text steigt auf), .rv-paper (Papier wird von Hand hingelegt,
      Stop-Motion in 5 Schritten), .rv-draw (Linie zeichnet sich), .rv-words (Zitat Wort für Wort).
   Animiert werden nur opacity, translate, rotate, scale: keine Konflikte mit transform, kein Layout-Sprung. */
@keyframes rvRise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes rvFade{from{opacity:0}to{opacity:1}}
@keyframes rvLay{0%{translate:0 18px;rotate:.8deg;scale:.985}100%{translate:0 0;rotate:0deg;scale:1}}
@keyframes rvSettle{from{opacity:0;scale:.97}to{opacity:1;scale:1}}
@keyframes rvCover{from{opacity:0;scale:1.03}to{opacity:1;scale:1}}
@keyframes rvDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rvLine{from{opacity:0;translate:0 .35em}to{opacity:1;translate:0 0}}

@media (prefers-reduced-motion:no-preference){
  /* 1 · Laden */
  .js .hero2-copy > *,.js .mag-cover-in > *,.js .page-hero > *{animation:rvRise 1.1s cubic-bezier(.22,1,.36,1) both}
  .js .hero2-copy > :nth-child(2),.js .mag-cover-in > :nth-child(2),.js .page-hero > :nth-child(2){animation-delay:.08s}
  .js .hero2-copy > :nth-child(3),.js .mag-cover-in > :nth-child(3),.js .page-hero > :nth-child(3){animation-delay:.5s}
  .js .hero2-copy > :nth-child(4),.js .mag-cover-in > :nth-child(4),.js .page-hero > :nth-child(4){animation-delay:.62s}
  .js .hero2-copy > :nth-child(5),.js .mag-cover-in > :nth-child(5),.js .page-hero > :nth-child(5){animation-delay:.74s}
  .js .hero2-copy > :nth-child(n+6),.js .page-hero > :nth-child(n+6){animation-delay:.86s}
  .js .hero2 .h1,.js .mag-title{animation:none}
  .js .hero2 .h1 .l{display:block;animation:rvLine 1.1s cubic-bezier(.22,1,.36,1) both}
  .js .hero2 .h1 .l:nth-child(1){animation-delay:.1s}.js .hero2 .h1 .l:nth-child(2){animation-delay:.22s}.js .hero2 .h1 .l:nth-child(3){animation-delay:.34s}
  .js .mag-title{animation:rvLine 1.2s cubic-bezier(.22,1,.36,1) .12s both}
  .js .hero2-stage{animation:rvSettle 1.4s cubic-bezier(.22,1,.36,1) .2s both}
  .js .mag-cover-img{animation:rvCover 1.8s cubic-bezier(.22,1,.36,1) both}
  .js .mag-lines li{animation:rvRise 1s cubic-bezier(.22,1,.36,1) both}
  .js .mag-lines li:nth-child(1){animation-delay:.7s}.js .mag-lines li:nth-child(2){animation-delay:.8s}.js .mag-lines li:nth-child(3){animation-delay:.9s}.js .mag-lines li:nth-child(4){animation-delay:1s}
  .js .mag-toc{animation:rvFade .6s ease 1.05s both}

  /* 2 · Scrollen */
  .rv-rise:not(.in){opacity:0}
  .rv-rise.in{animation:rvRise 1s cubic-bezier(.22,1,.36,1) var(--rv-d,0ms) both}
  .rv-paper:not(.in){opacity:0}
  .rv-paper.in{animation:rvFade .9s cubic-bezier(.22,1,.36,1) var(--rv-d,0ms) both,rvLay 1.1s cubic-bezier(.22,1,.36,1) var(--rv-d,0ms) both}
  .rv-draw{stroke-dasharray:1}
  .rv-draw:not(.in){stroke-dashoffset:1}
  .rv-draw.in{animation:rvDraw 1.4s cubic-bezier(.22,1,.36,1) calc(var(--rv-d,0ms) + .15s) both}
  .rv-words .w{display:inline-block}
  .rv-words:not(.in) .w{opacity:0}
  .rv-words.in .w{animation:rvRise .9s cubic-bezier(.22,1,.36,1) calc(var(--wi) * 45ms) both}
  /* Reissnägel stecken erst, wenn der Zettel liegt */
  .stickies > li.rv-paper.in .pin{animation:rvSettle .7s cubic-bezier(.22,1,.36,1) calc(var(--rv-d,0ms) + .35s) both}
  /* Werkzeug-Objekte hüpfen nach dem Hinlegen einmal */
  /* Fächer: zuerst ein Stapel */
  .fan.fan-closed .mail-card{transform:rotate(0deg) translateY(16px)!important}
  .fan .mail-card:nth-child(1){transition-delay:.24s}.fan .mail-card:nth-child(2){transition-delay:.18s}.fan .mail-card:nth-child(3){transition-delay:.12s}.fan .mail-card:nth-child(4){transition-delay:.06s}
  .fan:hover .mail-card{transition-delay:0s}
}

.mag-lines b{white-space:nowrap}

/* ══ Startseite: «Wer das für Sie macht» und Debriefing-Kachel (Dominic 7.11.2026, 18:44) ══ */
/* Porträt wie auf «Über mich»: Kopf ragt aus dem Kreis in der Tagesfarbe, weisser Sticker-Rand */
.uc-portrait{position:relative;margin:0}
.uc-stk{position:relative;display:block;aspect-ratio:800/1040;transform:rotate(-1.6deg);
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 22px 26px rgba(0,0,0,.35))}
.uc-disc{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1;border-radius:50%;background:var(--day)}
.uc-cut{position:absolute;inset:0;overflow:hidden;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1040' preserveAspectRatio='none'><rect width='800' height='640'/><circle cx='400' cy='640' r='400'/></svg>") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1040' preserveAspectRatio='none'><rect width='800' height='640'/><circle cx='400' cy='640' r='400'/></svg>") 0 0/100% 100% no-repeat}
.uc-cut img{display:block;width:100%;height:auto}
.uc-dot{position:absolute;right:-4%;top:14%;width:30%;aspect-ratio:1;border-radius:50%;background:var(--day2)}

.home-me{--pad-x:max(var(--sheet-pad), calc((100% - var(--content-max)) / 2));padding:clamp(72px,9vw,128px) var(--pad-x);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,104px);align-items:center;overflow-x:clip}
.home-me-pic{width:min(100%,500px);justify-self:center}
.home-me-h{font-family:var(--f-display);font-weight:400;font-size:clamp(56px,7vw,104px);line-height:.95;letter-spacing:-.015em;margin:0;color:var(--paper)}
.home-me-h em{font-style:italic;color:var(--day2-tint)}
.home-me-dek{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:40ch;margin:24px 0 0;color:rgba(247,242,232,.86)!important}
.home-me-nums{list-style:none;margin:36px 0 0;padding:18px 0 0;border-top:.75px solid rgba(247,242,232,.45);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.home-me-nums li{display:flex;flex-direction:column;gap:4px}
.home-me-nums b{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(34px,3.4vw,48px);line-height:1;color:var(--day2-tint)!important;white-space:nowrap}
.home-me-nums span{font-size:13px;line-height:1.35;color:rgba(247,242,232,.72)}
.home-me-get{grid-template-columns:minmax(0,1fr);gap:0;margin-top:30px}
.home-me-get li{grid-template-columns:64px minmax(0,1fr);column-gap:16px;padding:14px 0;border-top:.75px solid rgba(247,242,232,.25)!important;font-size:14.5px;color:rgba(247,242,232,.72)!important}
.home-me-get img{width:58px;justify-self:center;max-height:62px;object-fit:contain}
.home-me-get b{font-size:22px;margin-bottom:2px}
.home-me .actions{margin-top:32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--light:hover{background:#fff;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.js .home-me-pic.rv-paper.in{animation:rvSettle 1.4s cubic-bezier(.22,1,.36,1) both}}
@media (max-width:900px){.home-me{grid-template-columns:minmax(0,1fr)}.home-me-pic{width:min(80%,380px)}.home-me-copy{order:2}}
@media (max-width:520px){.home-me-nums{gap:12px}.home-me-nums b{font-size:30px}.home-me-nums span{font-size:12px}}

/* Debriefing-Kachel: wie die Debriefing-Seite, grosse Feierabend-Collage statt Fächer, ruhiger Tisch-Grund */
.home-deb{background:var(--desk)}
.home-deb .fan-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}
.home-deb-pic{margin:0;position:relative;background:var(--sheet);padding:12px 12px 10px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 24px 40px -26px rgba(60,40,20,.55);transform:rotate(-1deg)}
.home-deb-pic img{display:block;width:100%;height:auto}
.home-deb-pic > .tape{position:absolute;left:22px;top:-13px;margin:0;z-index:2}
.home-deb-pic figcaption{margin-top:8px}
.home-deb-sample{margin:30px 0 0;max-width:560px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.home-deb-sample .tape{margin-right:6px}
.home-deb-sample b{display:block;font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.15;color:var(--ink);margin:14px 0 6px}
@media (max-width:900px){.home-deb .fan-grid{grid-template-columns:minmax(0,1fr)}}