/* ════════════════════════════════════════════════════════
   LULALI · gemeinsame Gestaltung für alle öffentlichen Seiten (DE + EN)
   Kapitel: jede Sektion ist ein flaches Farbfeld (data-tone). Das feste Panel
   rechts bleibt rot, trägt Anker zu den Abschnitten und das Logo; am Handy
   öffnet es sich über einen runden Knopf als ganze Fläche.
   Formen: Ellipse, Kreis, Zackenstern. Bilder sitzen in Formen, nie in Rahmen.
   ════════════════════════════════════════════════════════ */

/* Schrift: eine Familie, zwei Schnitte. Montserrat (SIL Open Font License, fonts/Montserrat-OFL.txt):
   Regular 400 für Fließtext, ExtraBold 800 für Überschriften, Preise, Labels und Menü. Keine Serifen, kein Kursiv. */
@font-face{font-family:'Montserrat Web';src:url('fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat Web';src:url('fonts/montserrat-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  /* Palette nur aus zwei Plakaten: „Sprint“ (Ultramarin mit glühender Kante)
     und „day 435“ (Orangen auf Mint). crayon.js liest --paper als Papiertönung. */
  --paper:#edf2ee;                       /* Tüte, fast weiß mit Mint */
  --ink:#101a40;                         /* Ultramarin, ganz dunkel */
  --blue:#3463dc;                        /* Ultramarin */
  --blue-deep:#2a50c8;
  --peach:#f2c8b6;                       /* Glühkante */
  --salmon:#e19ca1;
  --violet:#9d84c6;
  --mint:#c7ddd0;                        /* Grund der Orangen */
  --red:#e4653c;                         /* Orangenschale */
  --orange:#f08221;
  --apricot:#e0b77f;
  --green:#388e5d;                       /* Stielansatz */
  /* Textvarianten auf hellem Grund (≥ 3:1 für große Schrift) */
  --red-text:#b8401f;
  --violet-text:#6b4fa0;

  /* Seitenplan: Buchrücken, Startseite, Footer. Schrift der Rücken auf ≥ 3:1 abgedunkelt */
  --about:#e3d6ae;  --about-fg:#4b7aba;
  --order:#d3ced4;  --order-fg:#4c7d60;
  --faqc:#bcd8c8;   --faq-fg:#a66444;
  --hero:#e5eae5;
  --work-1:#d5e0e2; --work-2:#e7d7c9; --work-3:#dac9b8; --work-4:#a4cbb6;
  --end-l:#e0d9d4;  --end-r:#d3ced4;
  --nl-bar:#d3ced4; --nl-bar-fg:#a46343;
  --mq-bar:#a7c1df; --mq-fg:var(--blue-deep); --pac:#d74894;   /* Ultramarin der CI, 3,7:1 auf der Leiste */

  --sans:'Montserrat Web','Helvetica Neue',Helvetica,Arial,sans-serif;
  --heavy:var(--sans);

  /* fünf Größen */
  --fs-display:clamp(44px,5.4vw,100px);
  --fs-head:clamp(30px,3vw,48px);
  --fs-statement:clamp(20px,1.8vw,26px);
  --fs-body:17px;
  --fs-small:14px;

  --m:32px;                              /* Außenrand */
  --gap:24px;
  --panel-w:clamp(300px,28vw,440px);
  --bar-h:calc(var(--menu-fs) + 36px);
  --sp:clamp(64px,6vw,112px);            /* Buchrücken */
  --ow:max(min(660px,62vw),calc(50vw + var(--sp)));   /* aufgezogenes Buch: gut die halbe Breite wie bei boook.land */
  --menu-fs:clamp(20px,2vw,32px);        /* alle Menüpunkte: Rücken, NEWSLETTER, Leiste oben */
  --lang-fs:clamp(11px,.8vw,13px);        /* DE · EN: bewusst klein, soll nicht mit den Reitern konkurrieren */
  --endbar-h:clamp(64px,9vh,96px);       /* Leiste unten: Newsletter + Pacman */
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* ganze Pixel für die Rücken, damit Linien nicht zwischen zwei Pixeln liegen (Safari) */
@supports (width:round(1.5px,1px)){:root{--sp:round(clamp(64px,6vw,112px),1px)}}

/* Kapitelfarben: Grund, Schrift, Hover-Folge (je ≥ 3:1 zum Grund) */
[data-tone="paper"]{--bg:var(--paper);--fg:var(--ink);--hv:#2a50c8 #b8401f #6b4fa0 #388e5d}
[data-tone="blue"]{--bg:var(--blue);--fg:var(--paper);--hv:#f2c8b6 #c7ddd0 #e0b77f}
[data-tone="blue-deep"]{--bg:var(--blue-deep);--fg:var(--paper);--hv:#f2c8b6 #c7ddd0 #e0b77f #e19ca1}
[data-tone="mint"]{--bg:var(--mint);--fg:var(--ink);--hv:#2a50c8 #b8401f #6b4fa0}
[data-tone="peach"]{--bg:var(--peach);--fg:var(--ink);--hv:#2a50c8 #6b4fa0 #b8401f}
[data-tone="apricot"]{--bg:var(--apricot);--fg:var(--ink);--hv:#2a50c8 #6b4fa0}
[data-tone="salmon"]{--bg:var(--salmon);--fg:var(--ink);--hv:}
[data-tone="violet"]{--bg:var(--violet);--fg:var(--ink);--hv:}
[data-tone="red"]{--bg:var(--red);--fg:var(--ink);--hv:}
[data-tone="ink"]{--bg:var(--ink);--fg:var(--paper);--hv:#e4653c #f08221 #f2c8b6 #c7ddd0 #e0b77f}
[data-tone]{background:var(--bg);color:var(--fg)}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* kein Gummiband an den Enden: die Seite steht, wo sie aufhört */
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{overscroll-behavior:none;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;
     cursor:none;user-select:none;-webkit-user-select:none;font-kerning:normal}
h1,h2,h3,h4{font-weight:800}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:none}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Aquarell + Cursor (crayon.js) ── */
canvas#crayon{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}
.cursor{position:fixed;pointer-events:none;z-index:1000;top:0;left:0}
.cursor-ring{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--ink);
  box-shadow:0 0 0 1.5px rgba(237,242,238,.9);/* taste-skill-ignore: Cursor schwebt */transform:translate(-50%,-50%);transition:border-color .25s,transform .1s}
body.pressing .cursor-ring{transform:translate(-50%,-50%) scale(.65)}
.cursor.waiting{opacity:0}
.cursor.ghost{opacity:0;transition:opacity .35s ease}
.cursor.ghost.on{opacity:1}
.cursor.ghost.down .cursor-ring{transform:translate(-50%,-50%) scale(.65)}
@media (hover:none){.cursor:not(.ghost){display:none}}

/* ── Silberkette am Logo (kette.js): über dem Aquarell, unter Cursor, Büchern und Leiste ── */
/* Schatten: der Compositor wirft ihn aus dem Alphakanal, ohne Rücklesen der Grafikkarte */
#kette{position:fixed;top:0;left:0;z-index:999;pointer-events:none;opacity:0;transition:opacity .5s ease;
  filter:drop-shadow(2px 5px 2.5px rgba(27,36,64,.28))}
body.chain-on #kette{opacity:1}
body.ordered #kette{visibility:hidden}
@media (prefers-reduced-motion:reduce){#kette{transition:none}}

/* ── Typografie ── */
.display{font-weight:800;font-size:var(--fs-display);line-height:.95;letter-spacing:-.025em}
.head{font-weight:800;font-size:var(--fs-head);line-height:1;letter-spacing:-.02em}
.statement{font-weight:800;font-size:var(--fs-statement);line-height:1.22;letter-spacing:-.01em;max-width:24em}
.lead{font-size:var(--fs-body);line-height:1.55;max-width:34em}
.small{font-size:var(--fs-small);line-height:1.5}
.caption{font-size:var(--fs-small)}
p+p{margin-top:.8em}
strong{font-weight:800}

/* Wort-Hover: Wörter färben sich beim Überfahren und laufen langsam zurück */
.w{transition:color 1.2s ease}
.w.on{transition:color .2s ease}

/* ── Buttons: eckig, eine Füllung ── */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;padding:18px 28px;background:var(--red);color:var(--ink);text-decoration:none;
  transition:background .2s,color .2s,transform .15s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px) scale(.98)}
[data-tone="ink"] .btn:hover{background:var(--paper);color:var(--ink)}
.link{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1.5px}
.link:hover{text-decoration-thickness:3px}

/* ════════ Unterseiten: schmale Leiste oben (Logo, drei Buchfarben, Sprache) ════════
   Bestellen, Abnahme, Danke, AGB: Formular, Checkout und 3D-Viewer behalten die ganze Breite. */
.site{position:relative;z-index:1}
body.bar .site{padding-top:var(--bar-h)}
.panel{position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:40;display:flex;align-items:center;gap:24px;padding:0 var(--m);
  background:var(--bg);color:var(--fg);transition:background-color .45s ease,color .45s ease}
.logo-mark{display:block;width:100%;aspect-ratio:1758.76/606.35;background:currentColor;
  -webkit-mask:url('images/lulali.svg') no-repeat center/contain;mask:url('images/lulali.svg') no-repeat center/contain}
.panel-top{flex:0 0 auto}
.panel-top>a{display:block;width:120px}
.panel-nav{margin-left:auto}
.panel-nav ul{list-style:none;display:flex;gap:6px}
.panel-nav a{display:block;padding:.45em .7em .4em;font-family:var(--heavy);font-weight:800;font-size:var(--menu-fs);line-height:1;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;box-shadow:inset 0 0 0 2px currentColor;transition:letter-spacing .3s var(--ease)}
.panel-nav a:hover{letter-spacing:.3em}
.panel-nav .to-about{background:var(--about);color:var(--about-fg)}
.panel-nav .to-order{background:var(--order);color:var(--order-fg)}
.panel-nav .to-faq{background:var(--faqc);color:var(--faq-fg)}
.panel-foot{display:flex;align-items:center}
.lang{display:flex;gap:.9em;font-family:var(--heavy);font-weight:600;font-size:var(--lang-fs);line-height:1;letter-spacing:.16em}
/* Sprache: klein und leise, die andere Sprache halb sichtbar, beim Zeigen ganz */
.lang a,.ap-lang a{text-decoration:none;padding:4px 0;opacity:.5;transition:opacity .2s ease}
.lang a:hover,.lang a:focus-visible,.lang a[aria-current],.ap-lang a:hover,.ap-lang a:focus-visible,.ap-lang a[aria-current]{opacity:1}
.lang a[aria-current],.ap-lang a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
@media (max-width:640px){
  .panel{gap:10px;padding:0 10px}
  .panel-top>a{width:64px}
  .panel-nav ul{gap:4px}
  .panel-nav a{padding:.5em .45em .45em;letter-spacing:.08em}
  .panel-nav a:hover{letter-spacing:.08em}
  .panel .lang a[aria-current]{display:none}              /* am Handy nur die andere Sprache */
}

/* ════════ Startseite: drei Buchrücken (boook.land) ════════
   ABOUT links, ORDER und FAQ rechts. Ein Klick zieht das Buch auf gut die halbe Breite auf (.5 s),
   beim Überfahren sperrt nur die Schrift. Senkrechte Linien in der Farbe der Schrift; FAQ hat nur rechts eine,
   links grenzt die von ORDER an (sonst doppelt so dick). Kommt die Leiste unten, schiebt sie die Bücher hoch.
   Die Bücher liegen deckend über dem Aquarell (z > 999), gemalt wird nur auf der Seite.
   Der Inhalt passt ohne Scrollen: site.js setzt --k (Schriftmaß) so, dass alles in die Höhe passt. */
.home .site{padding:0 calc(var(--sp) * 2) 0 var(--sp)}
.book{position:fixed;top:0;bottom:0;z-index:1100;width:var(--sp);display:flex;overflow:hidden;overflow:clip;
  background:var(--bg);color:var(--ink);cursor:auto;user-select:text;-webkit-user-select:text;
  box-shadow:inset 2px 0 0 var(--fg),inset -2px 0 0 var(--fg);
  transition:width .5s var(--ease),right .5s var(--ease),transform .35s var(--ease)}
.book-faq{box-shadow:inset -2px 0 0 var(--fg)}
body.bar-up:not([data-open]) .book{transform:translateY(calc(-1 * var(--endbar-h)))}
.book-about{left:0;--bg:var(--about);--fg:var(--about-fg);--hv:#2a50c8 #b8401f #6b4fa0}
.book-order{right:var(--sp);--bg:var(--order);--fg:var(--order-fg);--hv:#2a50c8 #b8401f #6b4fa0}
.book-faq{right:0;--bg:var(--faqc);--fg:var(--faq-fg);--hv:#2a50c8 #b8401f #6b4fa0}
.book.open{width:var(--ow);z-index:1101}
body[data-open="faq"] .book-order{right:var(--ow)}
.book a,.book button{cursor:pointer}
.spine-col,.book>.spine{position:relative;flex:none;width:var(--sp);height:100%}
/* Trennlinie Rücken | Inhalt nur am offenen Buch: zu liegt sie auf dem Rand (Safari zeigte sonst beim Zuklappen zwei Linien) */
.book.open .spine-col,.book.open>.spine{box-shadow:inset -2px 0 0 var(--fg)}
.spine{width:var(--sp);height:100%;display:flex;align-items:center;justify-content:center;color:var(--fg);
  -webkit-tap-highlight-color:transparent}
.spine span{writing-mode:vertical-rl;font-family:var(--heavy);font-weight:800;font-size:var(--menu-fs);line-height:1;
  letter-spacing:.2em;text-transform:uppercase;transition:letter-spacing .3s ease}
.spine:hover span,.book.open .spine span{letter-spacing:.32em}
.spine:focus-visible{outline-offset:-8px}
.spine-lang{position:absolute;left:0;right:0;bottom:22px;flex-direction:column;align-items:center;gap:.7em;color:var(--fg)}
.spine-lang a[aria-current]{color:var(--ink)}
.book-body{--k:1;flex:none;width:calc(var(--ow) - var(--sp));height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(52px * var(--k)) 48px calc(48px * var(--k)) 40px;display:flex;flex-direction:column;gap:calc(26px * var(--k));
  font-size:calc(17px * var(--k));line-height:1.5}
.book-body:focus{outline:none}
.book-body .head{font-size:calc(clamp(28px,2.6vw,44px) * var(--k))}
.book-body .lead{font-size:calc(17px * var(--k));max-width:36em}
.book-body .btn{align-self:flex-start;background:var(--ink);color:var(--paper);font-size:calc(15px * var(--k));padding:calc(18px * var(--k)) 26px}
.book-body .btn:hover{background:var(--paper);color:var(--ink)}
.book-caps{font-family:var(--heavy);font-weight:800;font-size:calc(12px * var(--k));letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.book-pair{display:grid;grid-template-columns:1fr 1fr;gap:calc(28px * var(--k))}
.book-sub h3{font-size:calc(17px * var(--k));line-height:1.25;margin-bottom:6px}
.book-hint{font-size:calc(14px * var(--k))}
.book-legal{display:flex;flex-wrap:wrap;gap:.3em 1.2em;margin-top:auto}
.book-legal a{text-decoration:underline;text-underline-offset:.2em}
.book-legal a:hover{text-decoration-thickness:3px}
.book-price{font-weight:800;font-size:calc(clamp(56px,5.4vw,96px) * var(--k));line-height:.9;letter-spacing:-.03em}
.order-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:calc(40px * var(--k));align-items:start}
.order-grid>div{display:flex;flex-direction:column;gap:calc(22px * var(--k))}
.steps{list-style:none;border-bottom:1px solid rgba(16,26,64,.25)}
.steps li{display:grid;grid-template-columns:calc(40px * var(--k)) minmax(0,1fr);gap:8px;padding:calc(14px * var(--k)) 0;border-top:1px solid rgba(16,26,64,.25)}
.step-n{font-family:var(--heavy);font-weight:800;font-size:calc(13px * var(--k));line-height:1.9;color:#3a614a}
.steps h3{font-size:calc(17px * var(--k));line-height:1.3;margin-bottom:2px}
.steps p{font-size:calc(15px * var(--k));line-height:1.45}
/* Mauszeiger: über Büchern und Leiste der normale, der Malring verschwindet */
body:has(.book:hover,.endbar:hover) .cursor{opacity:0}
@media (prefers-reduced-motion:reduce){.book{transition:none}}
@media (max-width:999px){
  .order-grid,.book-pair{grid-template-columns:1fr}
}

/* Handy wie boook.land: schmale Rücken, ein offenes Buch nimmt die ganze Breite bis auf einen Rücken */
@media (max-width:640px){
  :root{--sp:44px;--ow:calc(100vw - var(--sp));--menu-fs:13px;--lang-fs:12px}
  .lang a,.ap-lang a{padding:8px 0}                       /* klein, aber gut zu treffen */
  .spine span{letter-spacing:.16em}
  .spine:hover span,.book.open .spine span{letter-spacing:.16em}
  .spine-lang{bottom:16px}
  .book-body{padding:calc(28px * var(--k)) 18px calc(28px * var(--k)) 16px}
  .book-body .head{font-size:calc(24px * var(--k));overflow-wrap:break-word;hyphens:auto}
  .book-price{font-size:calc(48px * var(--k))}
  .book-hint{display:none}                            /* Maus-Hinweis, am Handy malt der Finger im Hero */
  .book-body .lead{font-size:calc(17px * var(--k))}
}

/* Handy: die drei Bücher liegen als Reiter oben nebeneinander (ABOUT, FAQ, ORDER) und klappen nach unten auf.
   Das Buch ist so breit wie der Bildschirm, aber durchsichtig: zu sieht man nur seinen Reiter an seinem Platz,
   offen wächst es von der Reiterhöhe auf die ganze Höhe, darunter liegt der Inhalt auf seiner Farbe */
@media (max-width:640px){
  :root{--tab-h:48px;--menu-fs:13px}
  .home .site{padding:0}
  .book{left:0;right:0;width:auto;height:var(--tab-h);bottom:auto;display:block;background:none;box-shadow:none;pointer-events:none;
    transition:height .5s var(--ease)}
  .book.open{width:auto;height:100svh}
  body[data-open="faq"] .book-order{right:0}
  body.bar-up:not([data-open]) .book{transform:none}
  .book-about{--slot:0}.book-faq{--slot:1}.book-order{--slot:2}
  .spine-col,.book>.spine{position:absolute;z-index:2;top:0;left:calc(var(--slot) * 100% / 3);width:calc(100% / 3);height:var(--tab-h);
    background:var(--bg);pointer-events:auto;box-shadow:inset 0 -2px 0 var(--fg),inset -2px 0 0 var(--fg)}
  .book-order>.spine{box-shadow:inset 0 -2px 0 var(--fg)}
  .book.open .spine-col,.book.open>.spine{box-shadow:inset -2px 0 0 var(--fg)}   /* offen geht der Reiter in seinen Inhalt über */
  .book-order.open>.spine{box-shadow:none}
  .spine-col .spine{width:100%}
  .spine span{writing-mode:horizontal-tb}
  .book-body{position:absolute;top:var(--tab-h);left:0;right:0;width:auto;height:calc(100svh - var(--tab-h));
    background:var(--bg);pointer-events:auto}
  /* Sprache: im offenen ABOUT oben rechts (der Reiter ist zu schmal dafür) */
  .spine-lang{display:none}
  .book-about.open .spine-lang{display:flex;flex-direction:row;top:calc(var(--tab-h) + 22px);bottom:auto;left:auto;right:calc(-200% + 18px)}
  .book-about .book-body{padding-top:calc(28px * var(--k) + 30px)}
}

/* ════════ Kapitel ════════ */
.ch{position:relative;min-height:90svh;padding:120px var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}

/* Papierkorn: sehr leises Rauschen auf den Farbfeldern, nie über Formularen */
.grain{isolation:isolate}
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.grain>*{position:relative;z-index:1}

/* Einstieg: Überschrift, Text, Bild nacheinander (nur mit JS, nie dauerhaft versteckt) */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);
    transition-delay:calc(min(var(--i,0),8) * 80ms)}
  html.js [data-reveal].in>*{opacity:1;transform:none}
}

/* ════════ Hero ════════ */
/* --hero-extra: Platz unter dem Logo für die Kette; das Logo bleibt mittig im ersten Bildschirm */
.hero{--bg:var(--hero);--hero-extra:12svh;position:relative;min-height:calc(100svh + var(--hero-extra));padding:64px var(--m) calc(64px + var(--hero-extra));
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.lulali{position:relative;aspect-ratio:1758.76/606.35}
.lulali img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.lulali.static img{opacity:1}
.hero-name{width:min(calc(var(--name-w,820px) * .9),100%)}

/* ════════ Werke: ein Farbfeld pro Werk ════════
   Links die Zeichnung (Linien direkt auf der Farbe oder gerahmt), rechts der freigestellte Render des Silbers
   mit Schatten auf der Farbfläche; er blendet beim Scrollen ein und hebt sich (site.js --p). Jedes zweite Werk gespiegelt. */
/* Übergänge: jedes Werk ist eine ganze Seite. Die nächste schiebt sich mit einer Freiform als
   Oberkante über die stehende vorige (Hügel, Bögen, Zacken, eine große Wölbung; site.js bewegt sie). */
.work{position:relative;height:300svh;background:var(--bg);color:var(--fg)}
.work+.work{margin-top:-100svh}
.work:last-of-type{height:200svh}
.work:nth-of-type(1){z-index:2}.work:nth-of-type(2){z-index:3}.work:nth-of-type(3){z-index:4}.work:nth-of-type(4){z-index:5}
.work-edge{position:absolute;left:0;bottom:100%;width:100%;height:var(--edge-h,clamp(90px,20svh,220px));margin-bottom:-1px;display:block;
  fill:var(--bg);pointer-events:none}
.work-stage{position:sticky;top:0;height:100svh;overflow:hidden;--p:1}
.work-top,.work-foot{position:absolute;left:var(--m);right:var(--m);z-index:3;text-align:center;
  font-size:var(--fs-small);font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.work-top{top:36px}
.work-foot{bottom:36px}
.work-lines{position:absolute;z-index:1;left:4%;top:50%;width:min(52%,calc(64svh * (var(--ar))));aspect-ratio:var(--ar);
  background:var(--line,var(--fg));-webkit-mask:var(--src) no-repeat center/contain;mask:var(--src) no-repeat center/contain;
  transform:translateY(calc(-50% + (.5 - var(--p)) * 10svh))}
/* Rahmen wie die Tabs: Passepartout in einer Tab-Farbe, eine dünne Linie in deren Schriftfarbe, kein Schatten
   (--frame-bg / --frame-line am Rahmen in index.html; Springende Figur, Kopf) */
.work-frame{position:absolute;z-index:1;left:8%;top:50%;width:min(32%,calc(56svh * var(--ar,1)));padding:clamp(16px,2.2vw,32px);background:var(--frame-bg);
  border:2px solid var(--frame-line);
  transform:translateY(calc(-50% + (.5 - var(--p)) * 10svh))}
.work-frame img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.work:nth-of-type(n) .work-frame .work-lines{position:relative;left:auto;right:auto;top:auto;width:100%;transform:none}
.work-silver{position:absolute;z-index:2;right:4%;top:50%;width:min(39%,74svh);height:auto;aspect-ratio:1;object-fit:contain;
  filter:drop-shadow(8px 16px 14px rgba(30,20,10,.3));
  opacity:clamp(0,calc(var(--p) * 2.5 - .2),1);transform:translateY(calc(-50% + (1 - var(--p)) * 8svh)) scale(calc(.92 + .08 * var(--p)))}
.work:nth-of-type(even) .work-lines{left:auto;right:4%}
.work:nth-of-type(even) .work-frame{left:auto;right:8%}
.work:nth-of-type(even) .work-silver{right:auto;left:4%}
@media (prefers-reduced-motion:reduce){.work,.work:last-of-type{height:auto}.work+.work{margin-top:0}.work-stage{position:relative}}

/* ════════ Abzüge (Bestellen, Danke): Zeichnung und Silber in einer Ellipse ════════ */
.print{position:relative;width:clamp(140px,14vw,220px);transform:rotate(var(--r,0deg));transition:transform .3s var(--ease)}
.print:hover,.print:focus-visible,.print.flip{transform:rotate(0deg)}
.print-img{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:50%;background:#fff}
.print-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
.print-img .s{opacity:0}
.print:hover .s,.print:focus-visible .s,.print.flip .s,.print.solo .s{opacity:1}
.print figcaption{margin-top:14px;text-align:center;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}

/* ════════ Footer aus Kacheln ════════ */
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding:8px}
.tile{padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;text-decoration:none}
.tile ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.tile ul a{text-decoration:none}
.tile ul a:hover{text-decoration:underline}
.t-state{grid-column:1/5}
.t-nav{grid-column:5/8}
.t-place{grid-column:8/10}
.t-mail{grid-column:10/13}
.t-word{grid-column:1/9;min-height:320px;justify-content:center;align-items:center}
.t-word .logo-mark{max-width:none;width:78%}
.t-go{grid-column:9/13;min-height:320px;font-weight:800;font-size:var(--fs-statement);line-height:1.1;transition:background .2s}
.t-go:hover{--bg:var(--ink);--fg:var(--paper)}
.t-go svg{align-self:flex-end;width:64px;height:64px}

/* ════════ Bestellen im ORDER-Buch ════════
   #upload zieht ORDER bis an ABOUT auf. Drei Spalten mit Linien in der ORDER-Farbe:
   Ablauf und Tipps · Zeichnung · Anzahlung (Express-Buttons, sonst Adresse und Stripe Payment Element). */
.order-flow{display:none}
body.ordering .book-order{width:calc(var(--inner-w,100vw) - 2 * var(--sp));box-shadow:inset -2px 0 0 var(--fg)}   /* links liegt die Linie von ABOUT */
body.ordering .book-order .book-body{width:calc(var(--inner-w,100vw) - 3 * var(--sp));padding:44px 0 40px;overflow-y:auto}
body.ordering .order-grid{display:none}
body.ordering .order-flow{display:grid}
.order-flow{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.1fr);min-height:100%;align-items:stretch}
.of-col{display:flex;flex-direction:column;gap:18px;padding:0 36px;min-width:0}
.of-col+.of-col{box-shadow:inset 2px 0 0 var(--fg)}
.of-back{align-self:flex-start;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.of-back:hover{text-decoration:underline;text-underline-offset:.3em}
.of-info .head{font-size:clamp(26px,2.2vw,38px);hyphens:manual}
.of-info .lead{font-size:16px}
.of-h{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.of-steps{list-style:none;border-bottom:1px solid rgba(16,26,64,.25)}
.of-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:6px;padding:11px 0;border-top:1px solid rgba(16,26,64,.25);font-size:15px;line-height:1.45}
.of-tips{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45}
.order-flow .upload-zone{flex:1;min-height:240px;justify-content:center;background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 2px var(--fg)}
.order-flow .upload-zone.drag-over{background:var(--mint)}
.order-flow .upload-zone.has-file{background:var(--paper);outline:none}
.order-flow .uz-label{font-weight:800;font-size:20px}
.order-flow .preview-img{width:min(100%,260px);height:auto;max-height:260px;object-fit:contain}
.order-flow .field{margin-bottom:14px}
.order-flow .field textarea{height:72px}
.order-flow .field-error{margin-top:4px}
.promo{display:flex;gap:10px;align-items:flex-end}
.promo input{flex:1;min-width:0;padding:8px 0;background:transparent;border:none;border-bottom:2px solid var(--ink);border-radius:0;
  font-size:15px;color:var(--ink);outline:none;cursor:text;text-transform:uppercase;letter-spacing:.06em}
.promo input::placeholder{color:#55607e;text-transform:none;letter-spacing:0}
.promo button{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:8px 0}
.promo button:hover{text-decoration:underline;text-underline-offset:.3em}
.promo-msg{font-size:14px;min-height:0}
.promo-msg:empty{display:none}
.promo-msg.bad{color:#b8401f}
.of-or{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.of-or::before,.of-or::after{content:'';flex:1;height:2px;background:var(--fg)}
.of-or[hidden]{display:none}
.order-flow #checkoutPanel{display:none;flex-direction:column;gap:14px;width:100%}
.order-flow.paying #addressStep{display:none}
.order-flow.paying #checkoutPanel{display:flex}
.order-flow #stripeMount{padding:0;max-width:none;margin:0}
.order-flow .checkout-back-btn{align-self:flex-start;font-size:14px}
.order-flow .submit-note{margin-top:auto;font-size:13px}
@media (max-width:999px){
  .order-flow{grid-template-columns:1fr}
  .of-col{padding:24px 0}
  .of-col+.of-col{box-shadow:inset 0 2px 0 var(--fg)}
  body.ordering .book-order .book-body{padding:28px 18px 32px 16px}
  .order-flow .upload-zone{min-height:200px}
}
@media (max-width:640px){
  /* Handy: wie jedes offene Buch ein Reiter, der über die ganze Breite nach unten aufklappt */
  body.ordering .book-order{width:auto}
  body.ordering .book-order .book-body{width:auto}
}

/* ════════ FAQ im Buch: eine Antwort offen ════════ */
.faq-list{border-bottom:1px solid rgba(16,26,64,.25)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:calc(16px * var(--k,1)) 0;border-top:1px solid rgba(16,26,64,.25);
  text-align:left;font-weight:800;font-size:calc(17px * var(--k,1));line-height:1.35}
.faq-icon{flex:none;font-size:1.15em;line-height:1;transition:transform .25s var(--ease)}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-q:hover>span:first-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq-a.open{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{max-width:36em;padding:0 0 calc(20px * var(--k,1));font-size:calc(16px * var(--k,1))}
.faq-a p:not(:last-child){padding-bottom:calc(10px * var(--k,1))}   /* mehrere Absätze in einer Antwort: enger */
@media (prefers-reduced-motion:reduce){.faq-a{transition:none}}

/* ════════ Ende der Startseite: Aufruf links, Bestellung rechts ════════
   Zwei Felder wie zwei Tabs: gerade Kante mit einer Linie oben, eine Linie dazwischen (nie doppelt) */
/* Spalten so geteilt, dass die Mittellinie genau in der Bildschirmmitte liegt, auf einer Linie mit der Leiste unten */
.endpage{position:relative;z-index:6;min-height:100svh;display:grid;grid-template-columns:calc(50% + var(--sp) / 2) minmax(0,1fr);color:var(--ink);
  border-top:2px solid var(--ink);--hv:#2a50c8 #b8401f #6b4fa0}
.end-col{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:28px;
  padding:clamp(72px,12vh,140px) 48px calc(var(--endbar-h) + 56px)}
.end-cta{justify-content:center;background:var(--end-l)}
.end-cta .display{font-size:clamp(40px,4.6vw,84px)}
.end-order{justify-content:center;background:var(--end-r);box-shadow:inset 2px 0 0 var(--ink)}
/* statt Preis: was das Stück ausmacht; der Preis steht klein darunter */
.end-claim{font-weight:800;font-size:clamp(36px,3.6vw,64px);line-height:.98;letter-spacing:-.02em}
.end-sum li>span:last-child{text-align:right}
.end-sum{list-style:none;width:100%;max-width:30em;border-bottom:1px solid rgba(16,26,64,.25)}
.end-sum li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(16,26,64,.25)}
@media (max-width:640px){.end-sum li{flex-direction:column;gap:4px}.end-sum li>span:first-child{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.end-sum li>span:last-child{text-align:left}}
.end-order .btn{background:var(--ink);color:var(--paper)}
.end-order .btn:hover{background:var(--paper);color:var(--ink)}

/* ════════ Leiste unten: NEWSLETTER | Pacman (nathan.tokyo) ════════
   Liegt über allem, auch über den Rücken, und fährt am Seitenende hoch. NEWSLETTER wird beim
   Überfahren zum Eingabefeld. Gefressene Buchstaben fliegen über die Leiste hinaus, darum schneidet
   nur die Laufband-Box seitlich ab. */
.endbar{position:fixed;left:0;right:0;bottom:0;z-index:1200;height:var(--endbar-h);display:flex;cursor:auto;
  transition:transform .35s var(--ease)}
html.js .endbar:not(.up),html.js body[data-open] .endbar{transform:translateY(105%)}
.endbar a{cursor:pointer;text-decoration:none}
/* Linien wie bei den Tabs in der Schriftfarbe: oben über die ganze Leiste, eine zwischen NEWSLETTER und Pacman */
.endbar-nl{position:relative;flex:0 0 50%;display:flex;align-items:center;justify-content:center;background:var(--nl-bar);color:var(--nl-bar-fg);
  box-shadow:inset 0 2px 0 var(--nl-bar-fg);
  font-family:var(--heavy);font-weight:800;font-size:var(--menu-fs);letter-spacing:.2em;text-transform:uppercase;cursor:text}
.nl-label,.nl-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .25s ease}
.nl-done{opacity:0}
.nl-field{display:flex;align-items:center;gap:.6em;width:min(86%,640px);opacity:0;transition:opacity .25s ease}
.nl-field input{flex:1;min-width:0;height:1.9em;padding:0;background:transparent;border:none;border-bottom:2px solid currentColor;border-radius:0;
  font:inherit;letter-spacing:.08em;text-transform:uppercase;color:inherit;outline:none;cursor:text;-webkit-appearance:none;appearance:none}
.nl-field input::placeholder{color:inherit;opacity:.55}
.nl-field button{flex:none;display:flex;align-items:center;justify-content:center;padding:.25em 0 .25em .35em;background:none;border:none;border-radius:0;
  color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Pfeil in der Strichstärke der Schrift (Montserrat 800), so hoch wie die Großbuchstaben */
.nl-field button svg{display:block;width:1.3em;height:1.08em;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:butt;stroke-linejoin:miter;
  transition:transform .2s var(--ease)}
.nl-field button:hover svg,.nl-field button:focus-visible svg{transform:translateX(.15em)}
.nl-field button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* Hover nur mit Maus: am Handy würde iOS den ersten Tipp sonst nur als Hover werten und das Feld erst beim zweiten öffnen */
.endbar-nl:focus-within .nl-field{opacity:1}
.endbar-nl:focus-within .nl-label{opacity:0}
@media (hover:hover){.endbar-nl:hover .nl-field{opacity:1}.endbar-nl:hover .nl-label{opacity:0}}
.endbar-nl.sent .nl-field,.endbar-nl.sent .nl-label{opacity:0;pointer-events:none}
.endbar-nl.sent .nl-done{opacity:1}
/* Instagram ganz rechts, so breit wie ein Rücken (der Pacman rückt um diese Breite nach links); Farben von ABOUT.
   2 px breiter, damit die Linie genau unter der zwischen ORDER und FAQ liegt (die sitzt innen am Rand von ORDER) */
.endbar-ig{flex:0 0 calc(var(--sp) + 2px);display:flex;align-items:center;justify-content:center;background:var(--about);color:var(--about-fg);
  box-shadow:inset 0 2px 0 var(--about-fg),inset 2px 0 0 var(--about-fg);-webkit-tap-highlight-color:transparent;transition:background .2s}
.endbar-ig:hover{background:var(--paper)}
.endbar-ig svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}
.endbar-ig .dot{fill:currentColor;stroke:none}
body.ordered .endbar .endbar-ig{display:none}
.pacman{position:relative;flex:1 1 auto;background:var(--mq-bar);color:var(--mq-fg);--pm:2.1875rem;
  box-shadow:inset 0 2px 0 var(--mq-fg),inset 2px 0 0 var(--mq-fg);
  font-family:var(--heavy);font-weight:800;font-size:var(--menu-fs);letter-spacing:.08em;text-transform:uppercase}
.pacman__clip{position:absolute;left:0;right:0;bottom:0;top:-60vh;overflow:hidden;pointer-events:none}
.pacman__text{position:absolute;bottom:0;height:var(--endbar-h);display:flex;align-items:center;white-space:pre;will-change:transform}
.pacman__phrase{display:flex;flex:none}
.pacman__phrase span{display:inline-block;white-space:pre}
.pacman__remove{position:absolute;inset:0}
.pacman__remove span{position:absolute;white-space:pre;will-change:transform}
.pacman__man{width:var(--pm);height:calc(var(--pm) * 2);background:var(--pac);position:absolute;right:1.25rem;top:50%;
  transform:translateY(-50%);border-radius:0 calc(var(--pm) * 1.15) calc(var(--pm) * 1.15) 0;z-index:2}
.pacman__man::before,.pacman__man::after{content:"";position:absolute;inset:0;background:inherit;border-radius:inherit;transform-origin:left center}
.pacman__man::before{transform:rotate(-45deg)}
.pacman__man::after{transform:rotate(45deg)}
@keyframes chomp-top{0%{transform:rotate(-45deg)}70%,100%{transform:rotate(-90deg)}}
@keyframes chomp-bottom{0%{transform:rotate(45deg)}70%,100%{transform:rotate(90deg)}}
.pacman--chomp .pacman__man::before{animation:chomp-top .1s steps(3) infinite alternate}
.pacman--chomp .pacman__man::after{animation:chomp-bottom .1s steps(3) infinite alternate}
@media (prefers-reduced-motion:reduce){
  .endbar{transition:none}
  .pacman__man::before{transform:rotate(-90deg)}                 /* Mund zu */
  .pacman__man::after{transform:rotate(90deg)}
}

/* ════════ Handy ════════ */
@media (max-width:999px){
  :root{--fs-display:clamp(30px,8vw,56px);--fs-head:clamp(26px,6.2vw,40px)}
  .ch{padding:88px var(--m)}
  .hero{padding:40px 20px calc(40px + var(--hero-extra))}
  .hero-name{width:90%}
  .tiles{grid-template-columns:1fr 1fr;gap:6px;padding:6px}
  .tile{padding:20px;min-height:160px}
  .t-word{grid-column:1/-1;order:-2;min-height:160px}
  .t-go{grid-column:1/-1;order:-1;min-height:160px}
  .t-nav,.t-place{grid-column:span 1}
  .t-mail{grid-column:1/-1}
  .t-state{grid-column:1/-1}
  .t-mail a{word-break:break-all}
  .endpage{grid-template-columns:1fr}
  .end-col{padding:56px 24px 48px}
  .end-order{box-shadow:inset 0 2px 0 var(--ink)}                  /* untereinander: die Linie liegt quer */
  .end-order{padding-bottom:calc(var(--endbar-h) + 40px)}
}
@media (max-width:999px){
  .work-edge{--edge-h:clamp(70px,13svh,130px)}
  .work-top{top:28px}
  .work-foot{bottom:24px}
  .work-lines,.work:nth-of-type(even) .work-lines{left:50%;right:auto;top:34%;width:min(86%,calc(30svh * (var(--ar))));
    transform:translate(-50%,calc(-50% + (.5 - var(--p)) * 8svh))}
  .work-frame,.work:nth-of-type(even) .work-frame{left:50%;right:auto;top:34%;width:min(66%,calc(30svh * var(--ar,1)));
    transform:translate(-50%,calc(-50% + (.5 - var(--p)) * 8svh))}
  .work-silver,.work:nth-of-type(even) .work-silver{left:50%;right:auto;top:auto;bottom:9svh;width:min(86%,40svh);
    transform:translate(-50%,calc((1 - var(--p)) * 5svh)) scale(calc(.92 + .08 * var(--p)))}
}
@media (max-width:640px){
  .endbar-nl{flex-basis:40%;letter-spacing:.14em}
  .pacman{--pm:1.4rem}
  .pacman__man{right:12px}
}
/* ════════ Handy-Start: Logo oben, darunter die große Kette, unten 16 % runder Übergang ins erste Werk (orange) mit START ════════
   Der Hero füllt den Bildschirm, das erste Werk beginnt darunter; nur seine Kante reicht herauf
   Im Hero malt der Finger (crayon data-touch=".hero"), deshalb scrollt man über START oder im Band */
.work-start{display:none}
@media (max-width:640px){
  .work:first-of-type{--bg:var(--apricot)!important}            /* schlägt die Werkfarbe im style-Attribut */
  .hero{--hero-extra:0px;height:100svh;min-height:0;padding:calc(var(--tab-h) + 22svh) 20px 0;align-items:flex-start;touch-action:none}
  .hero-name{width:86%}
  .work:first-of-type .work-edge{--edge-h:16svh}
  .work-start{display:block;position:absolute;z-index:4;left:50%;top:-8svh;transform:translate(-50%,-50%);padding:14px 26px;
    font-weight:800;font-size:15px;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);text-decoration:none;
    -webkit-tap-highlight-color:transparent}
  .work-start::after{content:' ↓'}
  .work-top{top:calc(var(--tab-h) + 20px)}
}

/* ════════ Bestellen ════════ */
.order-section{display:grid;grid-template-columns:5fr 7fr;min-height:calc(100svh - var(--bar-h))}
.order-left{padding:72px var(--m) 64px;display:flex;flex-direction:column;justify-content:space-between;gap:96px}
.order-note{margin-top:28px}
.order-left h1{margin-bottom:24px}
.order-prints{display:flex;gap:16px}
.order-prints .print{position:relative;left:auto;top:auto;width:min(42%,220px)}
.order-list{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:40px;max-width:30em}
.order-tips h2{margin-bottom:14px}
.order-tips ul{padding-left:1.1em;display:flex;flex-direction:column;gap:8px;max-width:30em}
.order-price .display{line-height:1}
.order-right{padding:72px var(--m) 64px;display:flex;flex-direction:column;align-items:flex-start}
.form-inner{width:100%}
.form-section{margin-bottom:40px;border:none}
.form-h{display:block;font-weight:800;font-size:var(--fs-statement);line-height:1.1;margin-bottom:20px}
.field{margin-bottom:22px;position:relative}
.field label{display:block;font-size:var(--fs-small);margin-bottom:6px}
.field.required label::after{content:' *'}
.field input,.field textarea,.field select{width:100%;background:transparent;border:none;border-bottom:2px solid var(--ink);
  padding:8px 0;font-size:var(--fs-body);color:var(--ink);outline:none;border-radius:0;-webkit-appearance:none;appearance:none;cursor:text}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--blue-deep);box-shadow:0 2px 0 var(--blue-deep)} /* taste-skill-ignore: Fokuszustand */
.field input::placeholder,.field textarea::placeholder{color:#55607e}
.field textarea{resize:none;height:84px;line-height:1.5}
.field select{cursor:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23101a40'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.field-row{display:grid;grid-template-columns:140px 1fr;gap:20px}
.field-row.field-row-child{grid-template-columns:minmax(0,1fr) 96px}
/* Bot-Falle im Bestellformular: für Menschen unsichtbar, nicht anwählbar */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.upload-zone{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 24px;text-align:center;
  background:var(--mint);transition:background .2s}
.upload-zone:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.upload-zone.drag-over{background:var(--peach)}
.upload-zone.has-file{background:var(--paper);outline:2px solid var(--ink);outline-offset:-2px}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:none;width:100%;height:100%}
.uz-label{font-weight:800;font-size:var(--fs-statement);line-height:1.1}
.uz-sm{font-size:var(--fs-small)}
.upload-progress{display:none;flex-direction:column;align-items:center;gap:10px;width:100%}
.progress-bar-wrap{width:100%;height:6px;background:var(--paper);overflow:hidden}
.progress-bar{height:100%;background:var(--ink);width:0%;transition:width .2s}
.progress-text{font-size:var(--fs-small)}
.upload-preview{display:none;flex-direction:column;align-items:center;gap:10px}
.preview-img{width:120px;height:120px;object-fit:cover}
.preview-name{font-size:var(--fs-small);word-break:break-all;max-width:260px}
.preview-change{font-size:var(--fs-small);text-decoration:underline}
.field-error{font-size:var(--fs-small);color:#b8401f;margin-top:6px;display:none;font-weight:800}
.btn-submit{width:100%;justify-content:center;margin-top:8px;padding:20px 28px}
.btn-submit:disabled{opacity:.5}
.btn-submit .spinner{width:16px;height:16px;border:2px solid rgba(16,26,64,.3);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-submit.loading .spinner{display:block}
.submit-note{font-size:var(--fs-small);margin-top:12px}
.success-screen{position:fixed;inset:0;background:var(--apricot);color:var(--ink);z-index:1300;display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:var(--m) 10vw}
.success-screen.show{display:flex}
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:14px 24px;
  font-size:var(--fs-small);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s;z-index:1300;max-width:calc(100vw - 40px)}
.toast.show{opacity:1;visibility:visible;transition:opacity .3s}
#checkoutPanel{display:none;flex-direction:column;width:100%}
.checkout-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--m);background:var(--mint)}
.checkout-back-btn{text-decoration:underline;text-underline-offset:.2em}
#stripeMount{flex:1;padding:24px 0;width:100%;max-width:1000px;margin:0 auto}
.order-right.checkout-mode{padding:0;align-items:stretch}
/* im Checkout bekommt Stripe die ganze Breite */
.order-section:has(.checkout-mode){grid-template-columns:1fr}
.order-section:has(.checkout-mode) .order-left{display:none}
@media (max-width:899px){
  .order-section{grid-template-columns:1fr}
  .order-left,.order-right{padding:48px var(--m)}
  .field-row{grid-template-columns:110px 1fr}
  .field-row.field-row-child{grid-template-columns:minmax(0,1fr) 84px}
}

/* ════════ Abnahme: drei Tabs wie die Buchrücken der Startseite, 3D-Modell → Extras → Bezahlen ════════
   Immer nur einer offen, die anderen liegen als Rücken daneben (Farben von ABOUT, ORDER, FAQ).
   Linien in der Schriftfarbe, nie doppelt. Keine Leiste oben. Am Handy liegen die Rücken als
   Kopfzeilen untereinander, offen ist nur einer. */
body.approval{height:100svh;overflow:hidden}
.ap{display:flex;height:100svh}
.ap-tab{flex:none;width:var(--sp);display:flex;overflow:hidden;overflow:clip;background:var(--bg);color:var(--ink);
  transition:width .5s var(--ease)}
.ap-tab+.ap-tab{box-shadow:inset 2px 0 0 var(--fg)}
.ap-tab.open{width:calc(100% - 2 * var(--sp))}
.ap-view{--bg:var(--about);--fg:var(--about-fg)}
.ap-extras{--bg:var(--mq-bar);--fg:var(--mq-fg)}
.ap-pay{--bg:var(--order);--fg:var(--order-fg)}                /* Bezahlen in den Farben von ORDER auf der Startseite */
.ap-spine-col{position:relative;flex:none;width:var(--sp);height:100%}
.ap-tab.open .ap-spine-col{box-shadow:inset -2px 0 0 var(--fg)}
.ap-spine{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--fg);-webkit-tap-highlight-color:transparent}
.ap-spine span{writing-mode:vertical-rl;font-weight:800;font-size:var(--menu-fs);line-height:1;letter-spacing:.2em;text-transform:uppercase;
  transition:letter-spacing .3s ease}
.ap-spine:hover span,.ap-tab.open .ap-spine span{letter-spacing:.32em}
.ap-spine:focus-visible{outline-offset:-8px}
.ap-lang{position:absolute;left:0;right:0;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:.7em;
  font-weight:600;font-size:var(--lang-fs);letter-spacing:.16em;line-height:1;color:var(--fg)}
.ap-lang a[aria-current]{color:var(--ink)}
.ap-body{flex:none;width:calc(100vw - 3 * var(--sp));height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:48px 56px 40px;display:flex;flex-direction:column;gap:24px}
.ap-body:focus{outline:none}
.ap .head{font-size:clamp(28px,2.6vw,44px);overflow-wrap:break-word}
.ap-lead{font-size:16px;line-height:1.5;max-width:34em}
.order-sub{margin-top:6px;font-weight:800}
.ap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.ap-head .ap-lead{margin-top:10px}
.ap-original{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ap-original[hidden]{display:none}
.ap-original img{width:72px;height:72px;object-fit:cover;display:block}
.ap .btn{background:var(--ink);color:var(--paper)}
.ap .btn:hover{background:var(--paper);color:var(--ink)}
/* 3D-Modell: schwebt ohne Schatten über die ganze Breite des Tabs */
.ap-stage{position:relative;flex:1;min-height:0;margin:0 -56px}
model-viewer{width:100%;height:100%;--progress-bar-color:transparent;--progress-mask:transparent;background:transparent}
.ap-stage model-viewer{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.viewer-hint{position:absolute;left:56px;bottom:12px;font-size:var(--fs-small);z-index:2;animation:fadeHint 3s ease 3s forwards}
@keyframes fadeHint{to{opacity:0}}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;background:var(--bg,var(--mint));transition:opacity .8s ease}
.loading.hidden{opacity:0;pointer-events:none}
.loading-text{font-weight:800;font-size:var(--fs-statement)}
.ap-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.btn-change{text-decoration:underline;text-underline-offset:.2em;align-self:flex-start;padding:10px 0;font-weight:800}
.ap-actions .btn-change{align-self:auto}
.btn-change:hover{text-decoration-thickness:3px}
/* Extras und Bezahlen: eine ruhige Spalte in der Mitte */
.ap-col{width:min(100%,500px);margin:auto;display:flex;flex-direction:column;gap:22px}
.ap-col .btn{align-self:flex-start}
.ap-options{display:flex;flex-direction:column;box-shadow:inset 0 2px 0 var(--fg)}
.ap-option{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px 0;
  box-shadow:inset 0 -2px 0 var(--fg);cursor:pointer}
.ap-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ap-check{width:22px;height:22px;margin-top:1px;box-shadow:inset 0 0 0 2px var(--ink);transition:background .2s}
.ap-option input:checked+.ap-check{background:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 5px var(--bg)}
.ap-option input:focus-visible+.ap-check{outline:2px solid var(--blue-deep);outline-offset:3px}
.ap-option-text{display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.4}
.ap-option-text strong{font-size:17px;transition:letter-spacing .3s ease}
.ap-option:hover .ap-option-text strong{letter-spacing:.04em}
.ap-option-price{font-weight:800;font-size:17px;white-space:nowrap}
/* Kette: Länge wählen, wie Reiter mit Linien in der Tabfarbe */
fieldset.ap-option{display:flex;flex-direction:column;gap:14px;border:none;margin:0;min-width:0;cursor:auto}
.ap-chain legend{float:left;width:100%;padding:0}
.ap-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.ap-choice{position:relative;cursor:pointer}
.ap-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ap-choice span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;padding:8px 4px;
  font-size:14px;line-height:1.3;text-align:center;box-shadow:inset 0 0 0 2px var(--fg);transition:background .2s,color .2s}
.ap-choice+.ap-choice span{margin-left:-2px}
.ap-choice strong{font-size:16px}
.ap-choice:hover span{background:rgba(255,255,255,.35)}
.ap-choice input:checked+span{position:relative;background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.ap-choice input:focus-visible+span{outline:2px solid var(--blue-deep);outline-offset:3px}
.ap-sub{position:relative;width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:center;font-size:15px;cursor:pointer}
.ap-sub input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ap-sub input:checked+.ap-check{background:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 5px var(--bg)}
.ap-sub input:focus-visible+.ap-check{outline:2px solid var(--blue-deep);outline-offset:3px}
.ap-sub:has(input:disabled){opacity:.4;cursor:auto}
.ap-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:8px;font-size:15px}
.ap-sum dd{text-align:right;font-weight:800;padding-left:16px}
.ap-sum .ap-total{padding-top:10px;box-shadow:inset 0 2px 0 var(--fg);font-size:20px;font-weight:800}
.ap-pay #stripeMount{padding:0;max-width:none;margin:0}
.ap-pay .btn-submit{margin-top:0;align-self:stretch}
.ap-promo summary{display:inline-block;cursor:pointer;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;list-style:none}
.ap-promo summary::-webkit-details-marker{display:none}
.ap-promo summary:hover{text-decoration:underline;text-underline-offset:.3em}
.ap-promo .promo{margin-top:12px}
/* wie die Kartenfelder von Stripe: Papier-Fläche, Eingetipptes fett */
.ap-pay .promo input{background:var(--paper);padding:12px 14px;font-weight:800;border-bottom-color:var(--fg)}
.ap-pay .promo input::placeholder{font-weight:400}
.ap-pay .small{font-size:13px}
/* Hinweis Einzelanfertigung: leise, mit feiner Linie links, vor den Zahlknöpfen */
.ap-custom{margin:0;max-width:34em;padding:2px 0 2px 12px;border-left:2px solid var(--fg);font-size:13px;line-height:1.5;opacity:.85;text-wrap:pretty}
.ap-custom strong{font-weight:800}
/* Nach der Zahlung: die Tabs ziehen nacheinander nach links weg und geben eine farbige Fläche frei,
   auf der sich DANKE malt (approval.js). NEWSLETTER schiebt sich nach 5 s von unten herein. */
.ap{position:relative;z-index:1}
.ap-tab{transition:width .5s var(--ease),transform .9s cubic-bezier(.7,0,.25,1)}
body.approval.paid{height:100svh;overflow:hidden}
body.paid .ap-tab{transform:translateX(calc(-100vw - 100%))}
body.paid .ap-tab:nth-child(2){transition-delay:0s,.09s}
body.paid .ap-tab:nth-child(3){transition-delay:0s,.18s}
.ap-done{position:fixed;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(24px,4vh,48px);
  padding:var(--m) var(--m) calc(var(--endbar-h) + var(--m));background:var(--work-2);color:var(--ink)}
.ap-done[hidden]{display:none}
.ap-danke{width:min(var(--danke-w,1000px),88vw);aspect-ratio:1235/468}
.ap-danke.herz{aspect-ratio:864.9/931.3;width:min(var(--danke-w,300px),56vw,calc(38svh * 864.9 / 931.3))}
.ap-done-text{max-width:30em;text-align:center;font-size:var(--fs-body)}
/* Text unter DANKE / Herz: Zeile für Zeile weich herein, leicht von unten */
.ap-done-text>*{opacity:0;transform:translateY(10px);transition:opacity 1.6s cubic-bezier(.22,.61,.36,1),transform 1.6s cubic-bezier(.22,.61,.36,1)}
.ap-done-text>:nth-child(2){transition-delay:.45s}
.ap-done-text>:nth-child(n+3){transition-delay:.9s}
.ap-done.written .ap-done-text>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ap-done-text>*{transform:none;transition:opacity .4s ease}}
/* schöne Umbrüche: Zeilen etwa gleich lang, keine einzelnen Wörter am Ende */
.ap-done-text{max-width:min(30em,100%);text-wrap:pretty}
.ap-done-lead{font-weight:800;font-size:calc(var(--fs-body) * 1.35);line-height:1.25;text-wrap:balance}
.ap-done-text .ap-done-lead+p{margin-top:10px}
.ap-done-mail{display:inline-block;max-width:100%;overflow-wrap:anywhere;font-weight:700}
/* nach der Freigabe: Bestellnummer und was jetzt passiert */
.ap-done-text p+p,.ap-done-text p+ol,.ap-done-text ol+p{margin-top:14px}
.ap-done-no{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ap-done-steps{list-style:none;counter-reset:s;display:inline-flex;flex-direction:column;gap:8px;text-align:left;max-width:30em}
.ap-done-steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr}
.ap-done-steps li::before{content:"0" counter(s);font-weight:800;font-size:12px;padding-top:3px}
/* Vorschau abgelaufen oder schon bezahlt: keine Zahlung mehr anbieten */
.ap-expired{border:2px solid currentColor;padding:16px 18px;max-width:34em}
.ap.ap-closed #expressMount,.ap.ap-closed #expressOr,.ap.ap-closed #addressMount,.ap.ap-closed #stripeMount,.ap.ap-closed #payBtn,.ap.ap-closed .ap-promo,.ap.ap-closed #promoMsg{display:none}
.ap-address{margin-bottom:18px}
/* zweiter Änderungswunsch: Hinweis statt Formular */
.modal-bg.limit #changeText,.modal-bg.limit label[for="changeText"],.modal-bg.limit #btnSend{display:none}
.change-limit{font-size:16px;line-height:1.5;max-width:34em}
.endbar[hidden]{display:none}
.endbar-solo{transition-duration:.6s}
.endbar-solo .endbar-nl{flex-basis:100%}

/* Startseite nach der Anzahlung: ORDER zieht sich über die ganze Breite auf, Inhalt und Rücken
   blenden aus, darunter liegt dieselbe Farbe als Fläche (unter dem Aquarell, z 998), auf der sich
   DANKE malt. NEWSLETTER kommt nach 5 s von unten, ohne Pacman (order.js). */
.order-done{z-index:998;background:var(--order)}
body.ordered{overflow:hidden}
body.ordered .book.book-order{right:0;width:var(--inner-w,100vw);z-index:1150;transform:none}
body.ordered .book-order>*{opacity:0;transition:opacity .3s ease}
body.ordered-done .book{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
html.js body.ordered .endbar{transform:translateY(105%);transition-duration:.6s}
html.js body.ordered .endbar.nl-in{transform:none}
body.ordered .endbar .pacman{display:none}
body.ordered .endbar-nl{flex-basis:100%}
@media (prefers-reduced-motion:reduce){.ap-tab{transition:none}.ap-stage model-viewer{animation:none}}
@media (max-width:760px){
  body.approval{height:auto;overflow:visible}
  /* iOS 26 Safari: oben füllt es den Streifen unter der Statusleiste mit der Farbe, die am oberen Rand festsitzt
     (hier ein Haarstrich in der Farbe des ersten Reiters), unten zeigt es unter der Werkzeugleiste die Seitenfarbe:
     die des letzten Reiters (Bezahlen). So gehen beide Ränder ohne Kante in die Reiter über */
  body.approval{background:var(--order)}
  body.approval:not(.paid)::before{content:'';position:fixed;z-index:5;top:0;left:0;right:0;height:1px;background:var(--about);pointer-events:none}
  body.approval.paid{background:var(--work-2)}
  .ap{flex-direction:column;height:auto;min-height:100svh}
  .ap-tab,.ap-tab.open{width:auto;flex-direction:column;overflow:visible;transition:transform .9s cubic-bezier(.7,0,.25,1)}
  .ap-tab.open{flex:1}
  .ap-tab+.ap-tab{box-shadow:inset 0 2px 0 var(--fg)}
  .ap-spine-col{width:auto;height:auto}
  .ap-tab.open .ap-spine-col{box-shadow:inset 0 -2px 0 var(--fg)}
  .ap-spine{justify-content:flex-start;padding:18px;scroll-margin-top:0}
  .ap-spine span{writing-mode:horizontal-tb;font-size:15px;letter-spacing:.16em}
  .ap-spine:hover span,.ap-tab.open .ap-spine span{letter-spacing:.16em}
  .ap-lang{left:auto;right:18px;top:0;bottom:0;flex-direction:row;gap:.9em}
  .ap-body{display:none;width:auto;height:auto;overflow:visible;padding:24px 18px 32px}
  .ap-tab.open .ap-body{display:flex}
  .ap-stage{flex:none;height:58svh;margin:0 -18px}
  .viewer-hint{left:18px}
  .ap-head{gap:16px}
  .ap-original img{width:56px;height:56px}
  .ap-col{margin:0}
}
.overlay{position:fixed;inset:0;background:rgba(16,26,64,.55);z-index:150;display:none;align-items:center;justify-content:center}
.overlay.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}}
.dialog{background:var(--paper);color:var(--ink);width:min(560px,94vw);max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(16,26,64,.25)} /* taste-skill-ignore: Dialog schwebt */
.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;background:var(--mint)}
.dialog-close{font-size:var(--fs-statement);line-height:1;padding:4px 8px}
#checkoutMount{padding:8px 0}
.modal{padding:32px;gap:16px}
.modal textarea{width:100%;height:120px;border:none;border-bottom:2px solid var(--ink);background:transparent;padding:8px 0;resize:none;outline:none;cursor:text}
.modal textarea:focus{border-bottom-color:var(--blue-deep)}
.modal-actions{display:flex;gap:16px;align-items:center;margin-top:8px}
.success{position:fixed;inset:0;background:var(--apricot);color:var(--ink);z-index:200;display:flex;flex-direction:column;justify-content:center;
  gap:20px;padding:var(--m) 10vw;display:none}
.success.show{display:flex;animation:fadeIn .4s ease}

/* Seiten ohne Aquarell (Abnahme, AGB): normaler Mauszeiger, Text markierbar */
body.plain{cursor:auto;user-select:auto;-webkit-user-select:auto}
body.plain a,body.plain button,body.plain select{cursor:pointer}
body.plain textarea,body.plain input{cursor:text}

/* ════════ Danke ════════ */
.thanks{min-height:calc(100svh - var(--bar-h));display:flex;flex-direction:column;justify-content:center;gap:48px}
.thanks h1{max-width:12em}
.thanks{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-content:center}
.thanks>*{grid-column:1}
.thanks>.print{grid-column:2;grid-row:1/4;align-self:center;position:relative;left:auto;top:auto;width:clamp(180px,18vw,280px)}
.steps-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.steps-next h2{margin-bottom:8px}
@media (max-width:899px){.steps-next{grid-template-columns:1fr}.thanks{display:flex}.thanks>.print{width:60%}}

/* ════════ AGB ════════ */
.agb-wrap{padding:96px var(--m) 120px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.agb-wrap>h1{grid-column:1/-1;margin-bottom:24px}
.agb-lead{grid-column:1/9;margin-bottom:72px}
.agb-section{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:56px 0}
.agb-section>h2{grid-column:1/5;font-weight:800;font-size:var(--fs-statement);line-height:1.15;margin-bottom:24px;padding-right:16px;hyphens:auto;overflow-wrap:break-word}
.agb-section>*:not(h2){grid-column:5/13;max-width:68ch}
.agb-section h3{font-weight:800;font-size:var(--fs-statement);margin:32px 0 12px}
.agb-section p,.agb-section li{margin-bottom:12px}
.agb-section ul,.agb-section ol{padding-left:1.2em}
.agb-section a{text-decoration:underline}
.agb-warning{background:var(--apricot);padding:20px 24px;margin-bottom:24px}
@media (max-width:899px){
  .agb-section>h2,.agb-section>*:not(h2){grid-column:1/-1}
  .agb-lead{grid-column:1/-1}
  .agb-section h3{font-size:var(--fs-body);font-family:var(--sans);font-weight:800}
}

/* Handy: auf den Unterseiten liegt jede Farbfläche wie die Footer-Kacheln mit gleichem Papierrand
   unter der Leiste, nichts läuft an den Bildschirmrand */
@media (max-width:999px){
  :root{--frame:6px}
  .order-left{padding-top:48px}
  body.bar .site:not(.shell){display:flex;flex-direction:column;gap:var(--frame);padding:calc(var(--bar-h) + var(--frame)) var(--frame) var(--frame)}
  .tiles{padding:0;gap:var(--frame)}
  .thanks{min-height:calc(100svh - var(--bar-h) - 2 * var(--frame))}
  .success-screen,.success{inset:var(--frame);outline:var(--frame) solid var(--paper)}
}

/* ════════ Handy: Werke ohne Festhalten ════════
   Die Werke laufen in normaler Höhe durch (kein sticky, keine Überlappung); die Kante des nächsten Werks
   liegt im unteren Rand des vorigen. Das Silber blendet einmal ein, sobald es ins Bild kommt (site.js .work.in). */
@media (max-width:640px){
  .work,.work:last-of-type{height:auto;padding-bottom:clamp(70px,13svh,130px)}
  .work:last-of-type{padding-bottom:0}
  .work+.work{margin-top:0}
  .work-stage{position:relative}
  .work:nth-of-type(n) .work-silver{opacity:0;transform:translate(-50%,5svh) scale(.9);transition:opacity .9s ease,transform 1.1s var(--ease)}
  .work.in:nth-of-type(n) .work-silver{opacity:1;transform:translate(-50%,0)}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.work:nth-of-type(n) .work-silver{transition:none}}

/* ════════ Handy: Leiste unten in zwei Reihen ════════
   Oben NEWSLETTER (2/3) und Instagram (1/3), geteilt wie die Tabs oben, darunter der Pacman über die ganze Breite.
   iOS 26 Safari malt unter seine Werkzeugleiste die Farbe dessen, was unten am Rand festsitzt, als eine Fläche:
   die unterste Reihe ist darum einfarbig, so läuft der Pacman ohne Kante unter der Leiste weiter */
@media (max-width:640px){
  .home{--bar-row:50px;--endbar-h:calc(var(--bar-row) * 2)}
  .home .endbar{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:var(--bar-row) var(--bar-row)}
  .home .pacman{grid-column:1/-1;grid-row:2;box-shadow:inset 0 2px 0 var(--mq-fg)}
  .home .pacman__text{height:var(--bar-row)}
  .home .pacman{--pm:1.15rem}
  .home .endbar-nl{grid-row:1;letter-spacing:.2em}
  .endbar-ig{grid-row:1;box-shadow:inset 0 2px 0 var(--about-fg)}
  .home .endbar-nl{box-shadow:inset 0 2px 0 var(--nl-bar-fg),inset -2px 0 0 var(--about-fg)}   /* Linie genau unter der zwischen FAQ und ORDER */
  .endbar-ig svg{width:24px;height:24px}
  body.ordered .endbar .endbar-ig{display:flex}
  body.ordered{--endbar-h:var(--bar-row)}
  body.ordered .endbar{grid-template-rows:var(--bar-row)}
  body.ordered .endbar-nl,body.ordered .endbar-ig{grid-row:1}
  /* Tippen ins Newsletter-Feld: es wächst über den Platz von Instagram, beim Verlassen zieht es sich zurück */
  .home .endbar{transition:transform .35s var(--ease),grid-template-columns .35s var(--ease),visibility 0s}
  /* unten weggefahren ist sie auch unsichtbar: sonst nimmt Safari ihre Farbe für den Streifen unter der Werkzeugleiste,
     mitten in Hero und Werken */
  html.js .home .endbar:not(.up):not(.nl-in),html.js body.home[data-open] .endbar,html.js body.ordered .endbar:not(.nl-in){visibility:hidden;
    transition:transform .35s var(--ease),grid-template-columns .35s var(--ease),visibility 0s linear .35s}
  /* oben: den Streifen unter der Statusleiste füllt Safari flach mit der Seitenfarbe. Die ist am Handy die des Heros,
     und der Hero ohne Korn, damit Streifen und Hero eine Fläche sind */
  body.home{background:var(--hero)}
  .home .hero.grain::after{content:none}
  .home .endbar-ig{min-width:0;overflow:hidden}
  .home .endbar:has(.endbar-nl:focus-within){grid-template-columns:1fr 0fr}
  .home .endbar:has(.endbar-nl:focus-within) .endbar-nl{box-shadow:inset 0 2px 0 var(--nl-bar-fg)}
  .nl-field{width:calc(100% - 28px)}
  .nl-field button{min-width:48px;height:44px;justify-content:flex-end;padding:0 2px 0 12px}
}

/* ════════ Zoom sperren (Touch): kein Pinch- oder Doppeltipp-Zoom auf Seiten mit maximum-scale im Viewport ════════ */
@media (pointer:coarse){html:has(meta[name="viewport"][content*="maximum-scale"]){touch-action:pan-x pan-y}}
/* Danke-Ansichten (Startseite nach der Anzahlung, Abnahme nach dem Bezahlen) stehen am Handy ganz fest:
   kein Zoomen, kein Verschieben, kein Nachfedern */
@media (pointer:coarse){
  html:has(body.ordered):has(meta[name="viewport"]),html:has(body.paid):has(meta[name="viewport"]){touch-action:none;overscroll-behavior:none}
  body.ordered,body.approval.paid{position:fixed;inset:0;width:100%}
}
@media (max-width:640px){.order-done{touch-action:none}}

/* ════════ Abnahme: Größe S · M · L ════════ */
.ap-size{display:flex;align-items:center;gap:20px;border:none;margin:0;padding:0;min-width:0}
.ap-size legend{float:left;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.ap-size .ap-choices{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,420px)}
.ap-size .ap-choice span{min-height:56px;font-size:13px}
.ap-size .ap-choice strong{font-size:18px}
@media (max-width:760px){
  .ap-size{flex-direction:column;align-items:stretch;gap:10px}
  .ap-size .ap-choices{width:100%}
}

/* ════════ Abnahme · Extras: offener, mehr Luft ════════ */
.ap-extras .ap-col{width:min(100%,600px);gap:34px}
.ap-extras .ap-option{padding:28px 0;gap:18px}
.ap-extras fieldset.ap-option{gap:20px}
.ap-extras .ap-option-text{gap:8px}
.ap-extras .ap-option-text span{max-width:30em}

/* ════════ Abnahme · Änderungswunsch: ein Tab, der von rechts hereinkommt (CI der Tabs, keine Schatten) ════════ */
.modal-bg{z-index:1300;background:rgba(16,26,64,.28);justify-content:flex-end;align-items:stretch}
.modal-bg.open{animation:fadeIn .25s ease}
.dialog.modal{width:min(600px,100%);max-height:none;height:100%;padding:56px 48px 40px;gap:22px;justify-content:center;
  background:var(--work-2);color:var(--ink);box-shadow:inset 2px 0 0 var(--ink);animation:tabIn .45s var(--ease)}
@keyframes tabIn{from{transform:translateX(100%)}}
.modal h2{font-weight:800;font-size:clamp(28px,2.6vw,44px);line-height:1.05;letter-spacing:-.02em;max-width:none}
.modal label{font-size:16px;line-height:1.5;max-width:34em}
.modal textarea{height:160px;font-size:16px;line-height:1.5}
.modal textarea::placeholder{color:#55607e}
.modal .btn-send{background:var(--ink);color:var(--paper)}
.modal .btn-send:hover{background:var(--paper);color:var(--ink)}
.modal-actions{gap:28px}
.success{z-index:1400;background:var(--work-2);padding:var(--m) max(48px,10vw)}
@media (max-width:760px){.dialog.modal{padding:40px 18px 32px;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.dialog.modal{animation:none}}

/* Abnahme: „Änderung wünschen“ klein und zurückhaltend neben dem Hauptknopf */
.ap-actions .btn-change{font-size:13px;font-weight:400;letter-spacing:.02em;text-decoration-thickness:1px;opacity:.7;transition:opacity .2s}
.ap-actions .btn-change:hover{opacity:1;text-decoration-thickness:1px}
/* Extras: die Linie über der Silberkette sitzt näher am Text darüber, mehr Luft darunter. Der Abstand kommt
   aus dem Container, nicht aus dem Fieldset: Safari setzt die Legende sonst direkt an die Linie */
.ap-extras .ap-options{margin-top:-16px;padding-top:44px}
.ap-extras .ap-options>.ap-option:first-child{padding-top:0}
.ap-extras .ap-chain .ap-choices{margin:14px 0 16px}         /* Luft nach „Made in Germany“ und nach den Kettenlängen */

/* ════════ Knöpfe: Papier des Intro-Canvas, Linie und Schrift in der Linienfarbe des Felds, wie die Tabs ════════
   Nie dunkel gefüllt. Beim Überfahren laufen die Buchstaben auseinander wie bei den Rücken. --btn setzt die Farbe,
   wo das Feld keine eigene Linienfarbe hat. */
.end-order{--btn:var(--order-fg)}
.modal{--btn:var(--about-fg)}
.btn,.book-body .btn,.end-order .btn,.ap .btn,.modal .btn-send,
.btn:hover,.book-body .btn:hover,.end-order .btn:hover,.ap .btn:hover,.modal .btn-send:hover,[data-tone="ink"] .btn:hover{
  background:var(--hero);color:var(--btn,var(--fg,var(--ink)));box-shadow:inset 0 0 0 2px var(--btn,var(--fg,var(--ink)))}
.btn{transition:letter-spacing .3s ease,transform .15s var(--ease)}
.btn:hover:not(:disabled){letter-spacing:.18em}
/* Auswahl (Größe, Kettenlänge): gewählt = Papier des Intro-Canvas, Schrift dunkel, Linie bleibt */
.ap-choice:hover span{background:none}
.ap-choice:hover strong{letter-spacing:.06em}
.ap-choice strong{transition:letter-spacing .3s ease}
.ap-choice input:checked+span{background:var(--hero);color:var(--ink);box-shadow:inset 0 0 0 2px var(--fg)}

/* ════════ Abnahme: Größe in einem Raster, die Knöpfe darunter genauso breit (siehe unten) ════════ */
.ap-size{display:block}
.ap-size legend{float:none;display:block;margin-bottom:10px}
.ap-size .ap-choices{width:min(100%,420px)}

/* ════════ Hauptaktion und Nebenaktion klar getrennt (in der CI) ════════
   Hauptaktion (Weiter, Zahlen, Vorschau anfordern): gefüllt in der Linienfarbe des Felds, Schrift Papier.
   Nebenaktion (Mit Karte zahlen): Papier mit Linie, wie die Auswahlfelder; Änderung wünschen bleibt ein Textlink. */
.btn,.book-body .btn,.end-order .btn,.ap .btn,.modal .btn-send,
.btn:hover,.book-body .btn:hover,.end-order .btn:hover,.ap .btn:hover,.modal .btn-send:hover,[data-tone="ink"] .btn:hover{
  background:var(--btn,var(--fg,var(--blue-deep)));color:var(--hero);box-shadow:inset 0 0 0 2px var(--btn,var(--fg,var(--blue-deep)))}
.btn-submit .spinner{border-color:rgba(229,234,229,.35);border-top-color:currentColor}
.btn-alt{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sans);font-weight:800;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:16px 20px;color:var(--fg);background:transparent;
  box-shadow:inset 0 0 0 2px var(--fg);transition:letter-spacing .3s ease,background .2s ease}
.btn-alt:hover{letter-spacing:.18em;background:var(--hero)}
.btn-alt:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* Abnahme: „Gefällt mir, weiter“ so breit wie S · M · L, „Änderung wünschen“ mit Abstand darunter */
.ap-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:min(100%,420px)}
.ap-actions .btn{width:100%;justify-content:center}
.ap-actions .btn-change{align-self:flex-start;justify-self:auto;text-align:left;padding:2px 0}
.ap-extras .ap-col>.btn{width:100%;justify-content:center}
/* Bezahlen: Karte zugeklappt, erst auf Wunsch */
.ap-card{display:flex;flex-direction:column;gap:14px}
.ap-card[hidden],.ap-card-toggle[hidden]{display:none}
.ap.ap-closed #cardBox{display:none}

/* DE · EN nur in CI-Farben: gewählt in der Linienfarbe des Felds, die andere halb durchsichtig */
.spine-lang a[aria-current],.ap-lang a[aria-current]{color:inherit}
.lang:not(.spine-lang){color:var(--blue-deep)}

/* Bestellen: die hochgeladene Zeichnung so groß wie möglich */
.order-flow .upload-zone.has-file{padding:12px;justify-content:flex-start}
.order-flow .upload-preview{width:100%;flex:1;justify-content:center}
.order-flow .preview-img{width:100%;height:auto;max-height:min(60vh,620px);object-fit:contain}
@media (max-width:999px){.order-flow .preview-img{max-height:72svh}}

/* Bestellen: erst sehen, dann zahlen */
.of-promise{padding:16px 18px;background:var(--hero);box-shadow:inset 0 0 0 2px var(--fg)}
.of-promise-h{font-weight:800;font-size:clamp(20px,1.6vw,24px);line-height:1.15;color:var(--fg);margin-bottom:8px}
.of-promise p+p{font-size:15px;line-height:1.45}
.of-step-pay strong{color:var(--fg)}

/* ════════ Abnahme: „Nachricht gesendet“ mit gemaltem Smiley ════════
   Unter dem Aquarell (999), damit man darauf malen kann; Text erst, wenn der Smiley steht. */
.success{z-index:998;align-items:center;justify-content:center;text-align:center;gap:clamp(16px,3vh,28px);padding:var(--m) 24px}
.success-smiley{flex:none;aspect-ratio:1057/1396;width:min(var(--smiley-w,260px),46vw,calc(36svh * 1057 / 1396))}
.success-title{font-weight:800;font-size:clamp(30px,4.2vw,56px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance;max-width:14em}
.success-sub{font-size:var(--fs-body);line-height:1.5;max-width:min(26em,100%);text-wrap:pretty}
.success-title,.success-sub{opacity:0;transition:opacity .8s ease}
.success.written .success-title,.success.written .success-sub{opacity:1}

/* ════════ Vorab-Seite (/bald, /en/soon): ein Bildschirm ════════
   Oben das gemalte Logo mit Kette und Anhänger (kette.js), oben rechts klein Impressum, Datenschutz und DE/EN,
   unten links der Claim, darunter die Leiste: NEWSLETTER und Instagram (quadratisch).
   Claim und Leiste kommen, wenn das Logo fertig ist (teaser.js) */
.teaser{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --tb:max(calc(100lvh - 100svh),var(--sab));   /* was unter Safaris Werkzeugleiste liegt (iOS 26), sonst der Home-Balken */
  --out:cubic-bezier(.16,1,.3,1)}               /* schnell los, lang auslaufend: fürs Hereinkommen */
/* iOS 26 Safari füllt den Streifen unter der Statusleiste flach mit der Hintergrundfarbe der Seite. Darum am Handy
   flaches Papier ohne Korn (dieselbe Farbe, keine Kante), am Desktop Papier mit Korn wie im Hero der Startseite */
@media (min-width:641px){body.teaser{background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .063 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}}
/* Nichts ist am Bildschirmrand festgeheftet (position:fixed an der Unterkante lässt Safari dort eine einzige Farbe
   malen). Die Seite ist so hoch wie der große Viewport und reicht unter die Werkzeugleiste; Hero und Leiste liegen
   absolut darin und messen von derselben Unterkante. Die Leiste reicht bis ganz unten, Schrift über der Werkzeugleiste */
/* Ein Bildschirm, kein Scrollen: html und body schneiden ab, Wischen schiebt nichts (teaser.js verhindert touchmove) */
html:has(body.teaser){overflow:hidden;overscroll-behavior:none}
body.teaser{position:relative;height:100lvh;overflow:hidden;overscroll-behavior:none}
.teaser .site{position:absolute;inset:0}
.teaser .hero{position:absolute;inset:0;height:auto;min-height:0;padding:0;display:block;touch-action:none}
/* Logo näher an der Mitte, die Kette dafür kürzer (--loop: Anteil der Kettenlänge, kette.js), damit der Anhänger über dem Claim endet */
.teaser .hero-name{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);--loop:1.15}
/* oben rechts: Impressum und Datenschutz sehr klein, daneben DE/EN */
.teaser-top{position:absolute;z-index:2;top:calc(var(--m) + var(--sat));right:var(--m);display:flex;align-items:center;
  gap:clamp(18px,2vw,28px);color:var(--blue-deep)}
/* Rechtliches: kleiner und leiser als DE/EN, normale Stärke, gedämpftes Tintenblau */
.teaser-legal{display:flex;gap:1.4em;font-weight:400;font-size:8.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.teaser-legal a{text-decoration:none;padding:6px 0;opacity:.38;cursor:pointer;transition:opacity .2s ease}
.teaser-legal a:hover,.teaser-legal a:focus-visible{opacity:.8}
.teaser-copy{position:absolute;left:var(--m);bottom:calc(var(--endbar-h) + var(--tb) + clamp(28px,5svh,56px));max-width:min(62vw,980px);
  --hv:#2a50c8 #b8401f #6b4fa0 #388e5d}
.teaser-claim{font-weight:800;font-size:clamp(30px,3.7vw,64px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.teaser-sub{margin-top:.9em;max-width:30em;font-size:var(--fs-body);line-height:1.5}
/* jede Zeile ein Block; beim Hereinkommen schiebt sie sich aus ihrer eigenen Unterkante hoch, eine nach der anderen,
   danach die Leiste (erst NEWSLETTER, dann Instagram) und oben rechts Rechtliches und Sprache */
.teaser .ln{display:block}
.teaser-claim .ln:nth-child(2){--d:.09s}
.teaser-sub .ln:nth-child(1){--d:.3s}
.teaser-sub .ln:nth-child(2){--d:.38s}
.teaser-sub .ln:nth-child(3){--d:.46s}
@media (prefers-reduced-motion:no-preference){
  html.js .teaser .ln{overflow:clip;padding-bottom:.18em;margin-bottom:-.18em}
  html.js .teaser .ln>span{display:block;transform:translateY(calc(100% + .25em)) rotate(1.5deg);transform-origin:0 100%;opacity:0;
    transition:transform 1.2s var(--out) var(--d,0s),opacity .7s ease var(--d,0s)}
  html.js .teaser-in .ln>span{transform:none;opacity:1}
  html.js .teaser-top{opacity:0;translate:0 -12px;transition:opacity .9s ease .75s,translate 1.1s var(--out) .75s}
  html.js .teaser-in .teaser-top{opacity:1;translate:0 0}
}

/* Leiste: NEWSLETTER (FAQ-Farben) und Instagram (ABOUT-Farben, quadratisch), Linie oben und dazwischen.
   Die Farben reichen bis zum Rand, Schrift und Symbol sitzen über Werkzeugleiste und Home-Balken */
.teaser .endbar{position:absolute;height:calc(var(--endbar-h) + var(--tb))}
/* nicht die Leiste als Ganzes fährt hoch, sondern jeder Reiter für sich, Instagram einen Tick später */
html.js .teaser .endbar:not(.up){transform:none}
.teaser .endbar>*{padding-bottom:var(--tb);
  transition:transform 1.1s var(--out) var(--bd,.5s),height .45s var(--ease),flex-basis .45s var(--ease),background .2s}
.teaser .endbar-ig{--bd:.62s}
html.js .teaser .endbar:not(.up)>*{transform:translateY(calc(100% + 4px))}
.teaser .endbar-nl{flex:1 1 auto;--nl-bar:var(--faqc);--nl-bar-fg:var(--faq-fg);box-shadow:inset 0 2px 0 var(--nl-bar-fg)}
.teaser .nl-label,.teaser .nl-done{bottom:var(--tb)}             /* mittig im sichtbaren Reiter, nicht unter der Werkzeugleiste */
.teaser .endbar-ig{position:relative;flex:0 0 var(--endbar-h);box-shadow:inset 0 2px 0 var(--about-fg),inset 2px 0 0 var(--about-fg)}
/* Reiter nach unten verlängert: zieht man die Seite über das Ende hinaus, laufen die Farben weiter */
.teaser .endbar>*::after{content:'';position:absolute;left:0;right:0;top:100%;height:60vh;background:inherit;pointer-events:none}
.teaser .endbar-ig::after{box-shadow:inset 2px 0 0 var(--about-fg)}

/* Desktop: die Leiste fährt beim Überfahren (und solange man tippt) nach oben, Instagram bleibt quadratisch,
   der Claim rückt mit (translate, damit es nicht mit dem Einblenden über transform kollidiert) */
@media (hover:hover) and (min-width:641px){
  .teaser{--nl-lift:clamp(44px,7svh,76px)}
  .teaser .endbar{align-items:flex-end}
  .teaser .endbar>*{height:100%}
  .teaser .endbar:is(:hover,:focus-within)>*{height:calc(var(--endbar-h) + var(--tb) + var(--nl-lift))}
  .teaser .endbar:is(:hover,:focus-within) .endbar-ig{flex-basis:calc(var(--endbar-h) + var(--nl-lift))}
  .teaser-copy{transition:translate .45s var(--ease)}
  .teaser:has(.endbar:is(:hover,:focus-within)) .teaser-copy{translate:0 calc(-1 * var(--nl-lift))}
}
@media (prefers-reduced-motion:reduce){.teaser .endbar,.teaser .endbar>*,.teaser-copy{transition:none}}

@media (max-width:640px){
  .teaser{--endbar-h:60px}
  .teaser .hero-name{top:29%;width:86%;--loop:.6}
  .teaser-top{top:calc(16px + var(--sat));right:20px;gap:18px}
  .teaser-legal a{padding:10px 0}                                /* klein, aber gut zu treffen */
  .teaser-copy{left:20px;right:20px;max-width:none;bottom:calc(var(--endbar-h) + var(--tb) + 26px)}
  .teaser-claim{font-size:clamp(26px,7.4vw,34px)}
  .teaser-sub{font-size:15px}
  /* Tippen auf NEWSLETTER: der Reiter fährt hoch bis auf die Tastatur (teaser.js misst --kb), wird etwas höher und
     nimmt die ganze Breite (Instagram tritt zur Seite); seine Farbe reicht nach unten hinter die Tastatur. Logo und
     Kette bleiben stehen, der Claim blendet solange aus. Tippen daneben schließt. Feld 18 px, damit iOS nicht zoomt */
  .teaser .endbar{translate:0 calc(-1 * var(--kb,0px));transition:translate .55s var(--out),height .45s var(--out)}
  .teaser .endbar:focus-within{height:calc(var(--endbar-h) + var(--tb) + 20px)}
  .teaser-copy{transition:opacity .35s ease}
  .teaser:has(.endbar:focus-within) .teaser-copy{opacity:0}
  .teaser .endbar:focus-within .endbar-ig{display:none}
  .teaser .endbar:focus-within .nl-field{font-size:18px;width:calc(100% - 32px)}
}
/* kurze Handys (iPhone SE): Logo kleiner und höher, damit Kette und Anhänger (wachsen mit dem Logo) über dem Claim enden */
@media (max-width:640px) and (max-height:740px){
  .teaser .hero-name{top:24%;width:70%;--loop:.6}
  .teaser-claim{font-size:24px}
  .teaser-sub{font-size:14px;margin-top:.7em}
  .teaser-copy{bottom:calc(var(--endbar-h) + var(--tb) + 22px)}
}