/* Good Repeats — Astra 06.
   Farbe: die Originalpalette der Marke. Paper, Ink, Orange, Air.
   Jede Farbe laeuft ueber Variablen, damit die Design-Vorschau unten links
   Hintergrund, Text und Akzent live tauschen kann — auch fuer Augen und Dom.
   Form: rechteckig mit kleinem Radius, harte Umrisse, flacher Versatzblock.
   Keine Schatten mit Weichzeichnung, keine Verlaeufe, kein letter-spacing.
   Regel aus dem Markenhandbuch: Weiss auf Orange ist nie Text (2.68:1),
   Orange auf Paper ist Dekoration, nie ein alleinstehender Fokusring. */

@font-face{
 font-family:Figtree;
 src:url('./assets/fonts/Figtree-Variable.woff2') format('woff2-variations'),
     url('./assets/fonts/Figtree-Variable.ttf') format('truetype-variations');
 font-weight:300 900;
 font-style:normal;
 font-display:swap;
}

:root{
 color-scheme:light;

 /* Die drei Regler der Design-Vorschau. Standard: Original Good Repeats. */
 --gr-bg:#F4F1E8;
 --gr-ink:#2B2222;
 --gr-accent:#FF7445;

 /* Was auf dem Akzent lesbar ist. Das Skript rechnet den Wert bei jedem
    Farbwechsel neu; ohne Skript gilt Ink auf Orange (5.78:1). */
 --on-accent:var(--gr-ink);

 --bg:var(--gr-bg);
 --ink:var(--gr-ink);
 --accent:var(--gr-accent);
 --surface:#fff;
 --air:#DCE8ED;

 --muted:color-mix(in srgb,var(--gr-ink) 74%,var(--gr-bg));
 --line:color-mix(in srgb,var(--gr-ink) 22%,var(--gr-bg));
 --line-soft:color-mix(in srgb,var(--gr-ink) 12%,var(--gr-bg));
 --wash:color-mix(in srgb,var(--gr-ink) 5%,var(--gr-bg));
 /* Die Augen tragen den Akzent, in jeder Palette. */
 --gr-eyes-color:var(--gr-accent);
 /* Akzent als Schrift: nur in einer Mischung, die wirklich lesbar ist.
    Orange auf Paper waere 2.37:1 und bleibt darum Dekoration.
    Das Skript rechnet beide Werte bei jedem Farbwechsel exakt nach. */
 --accent-text:color-mix(in srgb,var(--gr-accent) 55%,var(--gr-ink));
 --accent-text-ink:color-mix(in srgb,var(--gr-accent) 94%,var(--gr-bg));

 --sans:Figtree,system-ui,Arial,sans-serif;
 --header:74px;
 --radius:6px;
 --edge:4px;
}

/* Dunkle Baender: dieselbe Marke, Grund und Schrift getauscht.
   Abgeleitete Werte muessen hier neu stehen, sie erben sonst die hellen. */
.on-ink{
 --bg:var(--gr-ink);
 --ink:var(--gr-bg);
 --surface:color-mix(in srgb,var(--gr-bg) 8%,var(--gr-ink));
 --air:color-mix(in srgb,var(--gr-bg) 14%,var(--gr-ink));
 --muted:color-mix(in srgb,var(--gr-bg) 74%,var(--gr-ink));
 --line:color-mix(in srgb,var(--gr-bg) 26%,var(--gr-ink));
 --line-soft:color-mix(in srgb,var(--gr-bg) 15%,var(--gr-ink));
 --wash:color-mix(in srgb,var(--gr-bg) 7%,var(--gr-ink));
 --accent-text:var(--accent-text-ink);
 --gr-eyes-color:var(--accent-text-ink);
 background:var(--bg);
 color:var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 26px)}
body{margin:0;padding-top:calc(var(--header) + 10px);background:var(--bg);color:var(--ink);font:400 19px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:700;line-height:1.05}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
textarea,input{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}

/* Fokus traegt Bedeutung, also nie allein in Orange. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;font-size:19px}

.wrap{width:calc(100% - 36px);margin-inline:auto}
@media(min-width:601px){.wrap{width:min(1180px,100% - 80px)}}
@media(min-width:1280px){.wrap{width:min(1180px,100% - 190px)}}

.skip{position:absolute;top:-200px;left:20px;z-index:100;background:var(--ink);color:var(--bg);padding:16px 20px;border-radius:var(--radius)}
.skip:focus{top:12px}

.eyebrow{font-size:15px;font-weight:500;color:var(--muted);margin-bottom:18px}

/* Wortmarke und Zeichen als Maske: echte Markenpfade, Farbe aus der Palette. */
.mark{display:block;background:currentColor;
 -webkit-mask:url('./assets/logo/mark.svg') no-repeat center/contain;
 mask:url('./assets/logo/mark.svg') no-repeat center/contain}
.wordmark{display:block;background:currentColor;aspect-ratio:5890/913;
 -webkit-mask:url('./assets/logo/wordmark.svg') no-repeat left center/contain;
 mask:url('./assets/logo/wordmark.svg') no-repeat left center/contain}

/* ---------- Header ---------- */
/* Fixiert statt sticky: bleibt garantiert oben, egal was um die Seite herum scrollt. */
.header{position:fixed;top:0;left:0;right:0;z-index:40}
/* Die ganze Kopfzeile als ein schwebender Kasten: bleibt beim Scrollen oben stehen. */
.header-inner{width:calc(100% - 36px);margin:10px auto 0;min-height:var(--header);display:flex;align-items:center;gap:20px;
 padding:0 14px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--surface);box-shadow:var(--edge) var(--edge) 0 var(--line)}
@media(min-width:601px){.header-inner{width:min(1180px,100% - 80px)}}
@media(min-width:1280px){.header-inner{width:min(1180px,100% - 190px)}}
.brand{flex:none;display:flex;align-items:center;min-height:44px;padding:6px 0}
.brand .wordmark,.brand .wordmark-live{width:152px}
/* Kopf-Wortmarke als echtes SVG: die beiden o leben (eyes.css), darum keine Maske. */
.brand .wordmark-live{color:var(--ink)}
.desktop-nav{display:flex;gap:2px;margin-inline:auto;font-size:16px;font-weight:500}
.desktop-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border:2px solid transparent;border-radius:var(--radius);transition:background-color .15s ease,color .15s ease}
.desktop-nav a:hover{border-color:var(--ink)}
/* Aktueller Abschnitt: gefuellter Chip in Knopfsprache, Markierung kommt aus script.js. */
.desktop-nav a[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Zugang fuer bestehende Kunden: leiser als der orange Knopf, aber sichtbar. */
.header-login{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;font-size:16px;font-weight:500;
 border:2px solid var(--line);border-radius:var(--radius);transition:background-color .15s ease,border-color .15s ease}
.header-login:hover{border-color:var(--ink);background:var(--wash)}
.menu-toggle{display:none}
.mobile-nav{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding:6px 14px 16px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--surface);box-shadow:var(--edge) var(--edge) 0 var(--line)}
.mobile-nav a{display:block;padding:13px 0;font-size:19px;font-weight:500}
.mobile-nav a[aria-current="true"]{background:var(--ink);color:var(--bg)}
.mobile-nav__login{margin-top:8px;padding-top:16px;border-top:2px solid var(--line)}

/* ---------- Bausteine ---------- */
.lead{font-size:19px;line-height:1.55;max-width:32em;color:var(--muted)}
.section-head{max-width:820px}
.section-head h2{font-size:clamp(34px,4.6vw,62px)}
.section-head .lead{margin-top:20px}

/* Knopf, Oddit-Schule in Markenfarben: Rechteck mit kleinem Radius,
   zwei Pixel Umriss, flacher Versatzblock ohne Weichzeichnung.
   Beim Druecken faehrt der Knopf auf seinen Block. */
.button{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:12px 22px;
 font-size:17px;font-weight:700;line-height:1.25;text-align:left;
 border:2px solid var(--ink);border-radius:var(--radius);
 background:var(--ink);color:var(--bg);
 box-shadow:var(--edge) var(--edge) 0 var(--accent);
 transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
.button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent)}
.button:active{transform:translate(var(--edge),var(--edge));box-shadow:0 0 0 var(--accent)}
.button .icon{font-size:20px}
.button-outline{background:transparent;color:var(--ink);box-shadow:var(--edge) var(--edge) 0 var(--ink)}
.button-outline:hover{background:var(--accent);color:var(--on-accent);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.button-outline:active{box-shadow:0 0 0 var(--ink)}

.secondary-cta{display:inline-flex;flex-direction:column;gap:2px;padding:8px 0;justify-content:center}
.secondary-cta__label{font-size:16px;font-weight:500;color:var(--muted)}
.secondary-cta__action{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.secondary-cta:hover .secondary-cta__action{text-decoration-thickness:2px}
.secondary-cta--compact{padding:0}
.secondary-cta--compact .secondary-cta__label{font-size:14px}
.secondary-cta--compact .secondary-cta__action{font-size:15px}

.link-button{font-weight:700;text-decoration:underline;text-underline-offset:5px;padding:0}

.chip{display:inline-flex;align-items:center;min-height:42px;padding:9px 15px;
 border:2px solid var(--line);border-radius:var(--radius);background:transparent;
 font-size:15px;font-weight:500;text-align:left;line-height:1.35}
.chip:hover{border-color:var(--ink);background:var(--wash)}

/* Quadratische Bedienflaechen statt runder Plaettchen. */
.icon-button{display:grid;place-items:center;flex:none;border:2px solid var(--ink);border-radius:var(--radius);background:transparent;color:var(--ink)}
.icon-button:hover{background:var(--ink);color:var(--bg)}

/* ---------- Augenplätze ---------- */
[data-eyes]{pointer-events:none}
[data-eyes] img,[data-eyes] svg{width:100%;height:auto}
.section-figure{width:58px;margin-bottom:18px}
.guide-col{display:none}
@media(min-width:1280px){
 .section-figure{display:none}
 .guide-col{display:block;position:absolute;left:10px;top:0;bottom:0;width:84px;z-index:6;pointer-events:none}
 .guide-figure{position:sticky;top:160px;width:84px}
}
.guide-rail{position:relative}

/* ---------- Hero ---------- */
/* Der Dom laeuft ueber den rechten Seitenrand, Text nie. */
.hero{position:relative;overflow:hidden;padding-block:30px 54px}
.hero-art{position:absolute;z-index:0;pointer-events:none;top:0;bottom:calc(-1 * min(9vh,72px));right:calc(-1 * min(5vw,64px));
 display:flex;justify-content:flex-end;align-items:stretch;
 --dom-accent:var(--accent);--dom-ink:var(--ink);--dom-paper:var(--bg)}
.hero-art svg{height:100%;width:auto;max-width:none}
.hero-inner{position:relative;z-index:1}
.hero-text{max-width:min(100%,660px)}
.hero h1{font-size:clamp(44px,6.6vw,92px);line-height:.99}
.hero h1.hero-sales-title{font-size:clamp(36px,5vw,72px)}
.hero .lead{margin-top:24px;max-width:26em}
.hero-mock-results{margin-top:24px}
.hero-mock-results ul{display:grid;gap:10px;padding-left:20px;margin:0;font-size:17px;line-height:1.45}
.hero-mock-results li::marker{color:var(--accent)}
.price-line{margin-top:22px;font-size:17px;font-weight:500;color:var(--muted)}
.price-line b{font-weight:700;color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:30px}
.hero-link{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.hero-link:hover{text-decoration-thickness:2px}
.hero-link .icon{font-size:18px}
.hero-note{margin-top:14px;font-size:15px;color:var(--muted)}

@media(min-width:1000px){
 .hero{padding-block:48px 88px;min-height:clamp(560px,74vh,760px);display:flex;align-items:center}
 .hero-text{max-width:min(100%,58%)}
}
@media(max-width:999px){
 /* Die Grafik steht neben der Kopfzeile und ueber der Schlagzeile,
    nie dahinter: der Text bleibt in jeder Breite frei. */
 .hero{--hero-art:min(66vw,360px)}
 .hero-art{top:-8px;bottom:auto;height:var(--hero-art);right:-9%}
 .hero h1{margin-top:calc(var(--hero-art) - 54px)}
}

/* ---------- Fakten ---------- */
.facts{padding-bottom:10px}
.fact-row{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px;color:var(--muted)}
.fact-row li{display:flex;align-items:center;gap:10px}
.fact-row li::before{content:'';width:9px;height:9px;flex:none;background:var(--accent)}

/* ---------- Mails: die echte Arbeit ---------- */
.mails{padding-block:58px}
.mail-list{margin-top:38px;display:grid;gap:22px}
.mail-link{display:flex;flex-direction:column;height:100%;overflow:hidden;
 border:2px solid var(--ink);border-radius:var(--radius);background:var(--surface);color:var(--gr-ink);
 box-shadow:var(--edge) var(--edge) 0 transparent;
 transition:transform .12s ease,box-shadow .12s ease}
.mail-link:hover{transform:translate(-2px,-2px);box-shadow:var(--edge) var(--edge) 0 var(--accent)}
.mail-frame{display:block;height:300px;overflow:hidden;background:#fff;border-bottom:2px solid var(--ink)}
.mail-frame img{width:100%;height:100%;object-fit:cover;object-position:top center}
.mail-body{display:block;padding:16px 16px 0}
.mail-kind{display:block;font-size:13px;font-weight:700;color:color-mix(in srgb,#202922 62%,#fff)}
.mail-title{display:block;margin-top:8px;font-size:19px;font-weight:700;line-height:1.2}
.mail-text{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:color-mix(in srgb,#202922 70%,#fff)}
.mail-open{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:14px 16px;min-height:52px;font-size:14px;color:color-mix(in srgb,#202922 66%,#fff)}
.mail-date{font-weight:500}
.mail-open__action{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--gr-ink);
 text-decoration:underline;text-underline-offset:5px}
.mail-open .icon{font-size:16px}
.mail-link:hover .mail-open__action{text-decoration-thickness:2px}
.mail-hint{margin-top:20px;font-size:15px;color:var(--muted)}
@media(min-width:700px){.mail-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
 .mails{padding-block:88px}
 .mail-list{grid-template-columns:repeat(3,1fr);gap:26px}
 .mail-frame{height:340px}
}

/* ---------- Automatische Mails ---------- */
.flows{padding-block:58px;border-top:1px solid var(--line)}
.flow-legend{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--muted)}
.flow-legend li{display:flex;align-items:center;gap:8px}
.flow-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;background:var(--bg);
 border:2px solid var(--line);border-radius:var(--radius);font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.flow-badge--lite{border-color:var(--ink);color:var(--ink)}
.flow-badge--max{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.flow-badge--own{border-color:var(--accent);color:var(--ink)}
@media(min-width:800px){
 .flows{padding-block:88px}
}

/* ---------- Versand ---------- */
.shipping{position:relative;overflow:hidden;padding-block:58px 66px;border-radius:var(--radius)}
/* Das grosse oo darf ueber den Seitenrand laufen, Text nie. */
.shipping-mark{position:absolute;z-index:0;pointer-events:none;
 right:calc(-1 * min(16vw,190px));bottom:calc(-1 * min(11vw,130px));
 width:min(62vw,700px);aspect-ratio:1005/516;background:var(--accent);
 -webkit-mask:url('./assets/logo/mark.svg') no-repeat center/contain;
 mask:url('./assets/logo/mark.svg') no-repeat center/contain}
.shipping-inner{position:relative;z-index:1}
.shipping-grid{margin-top:38px;display:grid;gap:18px}
.shipping-grid li{padding:24px 22px;border:2px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.shipping-package{font-size:14px;font-weight:700;color:var(--accent-text)}
.shipping-figure{margin-top:10px;font-size:clamp(34px,4.4vw,54px);font-weight:700;line-height:1.02}
.shipping-unit{font-size:20px;font-weight:500}
.shipping-note{margin-top:12px;font-size:16px;color:var(--muted)}
.shipping-truth{margin-top:34px;padding:24px 22px;border:2px solid var(--ink);border-radius:var(--radius);max-width:52em;background:var(--bg)}
.shipping-truth h3{font-size:19px}
.shipping-truth ul{margin-top:14px;display:grid;gap:10px}
.shipping-truth li{position:relative;padding-left:24px;font-size:16px;line-height:1.55;color:var(--muted)}
.shipping-truth li::before{content:'';position:absolute;left:0;top:10px;width:12px;height:2px;background:var(--accent)}
@media(min-width:800px){
 .shipping{padding-block:88px 104px}
 .shipping-grid{grid-template-columns:1fr 1fr;gap:22px}
 .shipping-grid li{padding:30px 28px}
 .shipping-truth{padding:28px 30px}
}

/* ---------- Ablauf ---------- */
.onboarding{padding-block:58px}
.step-list{margin-top:38px;border-top:2px solid var(--ink)}
.step-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding-block:22px;border-bottom:1px solid var(--line)}
.step-number{display:grid;place-items:center;width:38px;height:38px;
 border:2px solid var(--ink);border-radius:var(--radius);font-size:17px;font-weight:700}
.step-list h3{font-size:clamp(20px,2.1vw,26px)}
.step-list p{margin-top:9px;font-size:17px;line-height:1.55;color:var(--muted);max-width:42em}
.need-grid{margin-top:34px;display:grid;gap:18px}
.need{padding:22px 20px;border:2px solid var(--line);border-radius:var(--radius)}
.need h3{font-size:18px}
.need ul{margin-top:14px;display:grid;gap:9px}
.need li{position:relative;padding-left:24px;font-size:16px;color:var(--muted)}
.need li::before{content:'';position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--accent)}
@media(min-width:800px){
 .onboarding{padding-block:88px}
 .step-list li{grid-template-columns:60px minmax(0,26em) minmax(0,1fr);gap:26px;padding-block:28px;align-items:start}
 .step-list li>div{display:contents}
 .step-list p{margin-top:0}
 .need-grid{grid-template-columns:1fr 1fr;gap:22px}
 .need{padding:26px 26px}
}

/* ---------- KI-Berater ---------- */
.advisor-band{padding-block:14px 58px}
.advisor{max-width:min(100%,660px);padding:26px 24px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--wash)}
.advisor-head{display:flex;align-items:center;gap:14px}
.advisor-eyes{width:52px;flex:none}
.advisor-head h2{margin-top:6px;font-size:clamp(22px,2.4vw,30px)}
.advisor-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:3px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700}
.advisor-form{margin-top:20px;display:flex;align-items:center;gap:8px;
 border:2px solid var(--ink);border-radius:var(--radius);background:var(--surface);padding:5px 5px 5px 14px}
.advisor-form:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.advisor-form input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;font-size:16px;color:var(--gr-ink)}
.advisor-form input:focus-visible{outline:none}
.advisor-send{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:4px;background:var(--ink);color:var(--bg)}
.advisor-send:hover{background:color-mix(in srgb,var(--ink) 82%,var(--accent))}
.advisor-suggestions{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.advisor-fallback{margin-top:14px;font-size:15px;color:var(--muted)}
.advisor-fallback a{text-decoration:underline;text-underline-offset:4px}
@media(min-width:800px){.advisor-band{padding-block:20px 88px}.advisor{padding:34px 32px}}

/* Eine Zeile Offenlegung, Details auf Wunsch. Kein Absatz voller Warnungen. */
.disclosure{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted)}
.disclosure summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:32px}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary::after{content:'Details';text-decoration:underline;text-underline-offset:4px;font-weight:500;color:var(--ink)}
.disclosure[open] summary::after{content:'Weniger'}
.disclosure p{margin-top:6px;max-width:46em}

/* ---------- Preise ---------- */
.prices{padding-block:58px;border-top:1px solid var(--line)}
.package-grid{margin-top:38px;display:grid;gap:20px}
.package{padding:26px 24px 30px;display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:var(--radius);background:var(--surface)}
.package-max{background:var(--air)}
.package h3{font-size:28px}
.package-price{margin-top:8px;font-size:clamp(34px,4vw,50px);font-weight:700;line-height:1.05}
.package-price span{font-size:19px;font-weight:400;color:var(--muted)}
.package-list{margin-top:20px;display:grid;gap:11px;font-size:17px}
.package-list li{padding-left:24px;position:relative}
.package-list li::before{content:'';position:absolute;left:0;top:11px;width:12px;height:2px;background:var(--accent)}
.package-first{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:17px;font-weight:500}
.package .button{margin-top:24px;align-self:flex-start}
.price-note{margin-top:30px;font-size:15px;line-height:1.65;color:var(--muted);max-width:54em}
.price-ask{margin-top:14px;font-size:16px}
@media(min-width:900px){
 .prices{padding-block:88px}
 .package-grid{grid-template-columns:1fr 1fr;gap:24px}
 .package{padding:34px 32px 38px}
}

/* ---------- Fragen ---------- */
.questions{padding-block:56px}
.faq{margin-top:32px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px 0;min-height:44px;font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border:2px solid var(--line);border-radius:var(--radius)}
.faq details[open] .faq-icon{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.faq details[open] .faq-icon .icon{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;font-size:17px;line-height:1.6;color:var(--muted);max-width:44em}
@media(min-width:900px){.questions{padding-block:88px}.faq{margin-top:40px}}

/* ---------- Kontakt ---------- */
.contact{padding-block:58px;border-radius:var(--radius) var(--radius) 0 0}
.contact-actions{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.contact-address{font-size:19px;font-weight:500;text-decoration:underline;text-underline-offset:6px;padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.copy-button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:12px 0;font-size:16px;font-weight:500;color:var(--muted)}
.copy-button:hover{color:var(--ink)}
.contact-hint{margin-top:16px;font-size:15px;color:var(--muted)}
.copy-status{font-size:15px;color:var(--muted);min-height:1.5em}
.contact .secondary-cta{margin-top:10px}
@media(min-width:900px){.contact{padding-block:88px}}

/* ---------- Footer ---------- */
.footer{padding-block:44px 34px}
.footer-mark{padding-bottom:26px;color:var(--ink)}
.footer-mark .wordmark{width:100%}
.footer-inner{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.footer-top{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--ink);min-height:44px;padding:10px 0;text-decoration:underline;text-underline-offset:5px}
.footer .icon{font-size:16px}
.footer-credit{margin-top:20px;font-size:13px;line-height:1.6;color:var(--muted);max-width:62em}
.footer-credit a{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}

/* ---------- Chat-Starter ---------- */
.chat-launcher{position:fixed;right:16px;bottom:16px;z-index:50;display:inline-flex;align-items:center;gap:10px;min-height:52px;
 padding:8px 18px 8px 12px;border:2px solid var(--gr-ink);border-radius:var(--radius);
 background:var(--gr-ink);color:var(--gr-bg);font-size:16px;font-weight:700;
 box-shadow:var(--edge) var(--edge) 0 var(--gr-accent);
 --gr-eyes-color:var(--accent-text-ink);
 transition:transform .12s ease,box-shadow .12s ease}
.chat-launcher:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gr-accent)}
.chat-launcher__eyes{display:block;width:34px;flex:none}
.chat-launcher__eyes img,.chat-launcher__eyes svg{width:100%;height:auto}
@media(max-width:520px){
 .chat-launcher{right:14px;bottom:14px;padding:8px 16px 8px 10px;font-size:15px}
 .chat-launcher__eyes{width:28px}
}

/* ---------- Chat-Panel ---------- */
/* Bewusst hoch: das Gespraech bekommt den Platz, alles andere ist schmal. */
.chat-panel{padding:0;border:2px solid var(--gr-ink);border-radius:var(--radius);background:var(--bg);color:var(--ink);
 width:min(460px,calc(100% - 24px));max-width:none;
 height:min(780px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);
 margin:0;position:fixed;right:16px;bottom:16px;left:auto;top:auto;
 display:none;flex-direction:column;overflow:hidden}
.chat-panel[open]{display:flex}
.chat-panel::backdrop{background:color-mix(in srgb,#202922 34%,transparent)}

.chat-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px}
.chat-identity{display:flex;align-items:center;gap:12px}
.chat-identity__eyes{display:block;width:38px;flex:none}
.chat-identity__eyes img,.chat-identity__eyes svg{width:100%;height:auto}
.chat-top h2{margin-top:4px;font-size:18px}
.chat-close{width:44px;height:44px;flex:none;display:grid;place-items:center;border:2px solid var(--line);border-radius:var(--radius)}
.chat-close:hover{border-color:var(--ink);background:var(--wash)}
.chat-close .icon{font-size:20px}

.chat-disclosure{padding:0 16px 10px;font-size:12px;line-height:1.5;color:var(--muted)}
.chat-disclosure summary{min-height:24px}
.chat-disclosure p{margin-top:6px}

.chat-log{flex:1 1 auto;min-height:120px;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px;display:flex;flex-direction:column;gap:12px;background:var(--surface);border-block:2px solid var(--line-soft)}
.chat-empty p{font-size:15px;color:var(--muted)}
.chat-chips{margin-top:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.chat-chips .chip{width:100%}

.bubble{max-width:88%;padding:11px 15px;border-radius:var(--radius);font-size:15px;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
.bubble>*+*{margin-top:8px}
.bubble ul,.bubble ol{padding-left:18px;list-style:disc}
.bubble ol{list-style:decimal}
.bubble li+li{margin-top:2px}
.bubble code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.bubble a{text-decoration:underline;text-underline-offset:3px}
.bubble a:hover{text-decoration-thickness:2px}
.bubble-user{align-self:flex-end;background:var(--ink);color:var(--bg)}
.bubble-bot{align-self:flex-start;background:var(--wash);border:1px solid var(--line-soft)}
.bubble-user.is-failed{background:var(--air);color:var(--ink)}
.bubble-flag{display:block;margin-top:6px;font-size:12px;font-weight:700}
.bubble-thinking{align-self:flex-start;display:flex;align-items:center;gap:10px;background:var(--wash);border-radius:var(--radius);padding:9px 15px 9px 10px;font-size:14px;font-weight:500;color:var(--muted)}
.bubble-thinking__eyes{display:block;width:30px;flex:none}
.bubble-thinking__eyes img,.bubble-thinking__eyes svg{width:100%;height:auto}

.chat-error{align-self:stretch;background:var(--air);border-radius:var(--radius);padding:12px 14px;font-size:14px;line-height:1.5}
.chat-error__buttons{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.chat-error button{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--bg);font-size:14px;font-weight:700}
.chat-error button:hover{background:transparent;color:var(--ink)}

.chat-status{margin:0;padding:8px 16px 0;font-size:13px;color:var(--muted);background:var(--surface)}
.chat-status:empty{display:none}

.chat-form{display:flex;align-items:flex-end;gap:8px;padding:12px 16px;background:var(--surface)}
.chat-form textarea{flex:1;min-width:0;min-height:46px;max-height:140px;resize:none;padding:12px 14px;border:2px solid var(--line);border-radius:var(--radius);font-size:15px;line-height:1.45;background:var(--bg)}
.chat-form textarea:focus-visible{outline-offset:1px}
.chat-count{align-self:center;font-size:12px;font-weight:500;color:var(--muted)}
.chat-count:empty{display:none}
.chat-send{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:4px;background:var(--ink);color:var(--bg)}
.chat-send:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 82%,var(--accent))}
.chat-send:disabled{opacity:.4;cursor:default}

/* Beide Wege bleiben, brauchen aber nur noch eine Zeile. */
.chat-actions{padding:12px 16px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.chat-primary{min-height:44px;padding:9px 16px;font-size:15px;gap:10px;--edge:3px}
.chat-primary .icon{font-size:17px}
.chat-actions__hint{flex-basis:100%;font-size:12px;line-height:1.45;color:var(--muted)}

@media(max-width:640px){
 .chat-panel{right:0;bottom:0;left:0;width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
 .bubble{max-width:92%}
}
/* Flache Fenster: Kopf und Fuss ruecken zusammen, der Rest scrollt.
   Eingabe, Menschen-Weg und Schliessen bleiben so immer erreichbar. */
@media(max-height:620px){
 .chat-panel{overflow-y:auto;overscroll-behavior:contain}
 .chat-log{min-height:84px}
 .chat-top{padding:10px 16px 6px}
 .chat-top h2{margin-top:2px;font-size:17px}
 .chat-disclosure{padding:0 16px 8px;font-size:11px}
 .chat-form{padding:10px 16px}
 .chat-actions{padding:8px 16px 10px}
 .chat-primary{min-height:42px}
}

/* ---------- Maildialog ---------- */
.mail-dialog{padding:0;border:2px solid var(--gr-ink);border-radius:var(--radius);background:var(--bg);color:var(--ink);width:calc(100% - 24px);max-width:760px;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.mail-dialog::backdrop{background:color-mix(in srgb,#202922 72%,transparent)}
.dialog-top{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;background:var(--bg);border-bottom:2px solid var(--line-soft)}
.dialog-source{display:block;font-size:13px;font-weight:700;color:var(--accent-text)}
.dialog-top h2{font-size:23px;margin-top:7px}
.dialog-date{display:block;font-size:15px;color:var(--muted);margin-top:6px}
.dialog-close{width:46px;height:46px;flex:none;display:grid;place-items:center;border:2px solid var(--line);border-radius:var(--radius)}
.dialog-close:hover{border-color:var(--ink);background:var(--wash)}
.dialog-close .icon{font-size:21px}
.dialog-body{padding:20px}
.dialog-note{font-size:15px;line-height:1.6;color:var(--muted);max-width:44em}
.dialog-image{width:100%;max-width:390px;height:auto;margin:20px auto 0;background:#fff;border:2px solid var(--line)}
.dialog-end{margin-top:16px;text-align:center;font-size:15px;color:var(--muted)}
.dialog-bottom{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--bg);border-top:2px solid var(--line-soft)}
.dialog-count{font-size:14px;color:var(--muted)}
.dialog-step{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;font-size:16px;font-weight:500;border:2px solid var(--line);border-radius:var(--radius)}
.dialog-step:hover{border-color:var(--ink);background:var(--wash)}
@media(min-width:900px){.dialog-body{padding:28px}.dialog-top{padding:22px 28px}.dialog-bottom{padding:16px 28px}}

/* ---------- Design-Vorschau (kein Teil der Seite) ----------
   Bewusst in festen Farben: das Werkzeug muss lesbar bleiben,
   auch wenn die Palette gerade auf etwas Unmoegliches steht. */
.preview{position:fixed;left:12px;bottom:12px;z-index:60;width:min(300px,calc(100% - 24px));
 font-family:var(--sans);font-size:13px;color:#111;background:#fff;border:2px solid #111;border-radius:6px}
.preview>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;font-weight:700}
.preview>summary::-webkit-details-marker{display:none}
.preview>summary::before{content:'';width:11px;height:11px;background:var(--gr-accent);border:1px solid #111;flex:none}
.preview[open]>summary{border-bottom:2px solid #111}
.preview-body{padding:10px 12px 12px}
.preview-note{color:#555;line-height:1.45}
.preview-fields{margin-top:10px;display:grid;gap:8px}
.preview-field{display:flex;align-items:center;justify-content:space-between;gap:10px}
.preview-field input{width:44px;height:30px;padding:0;border:1px solid #111;border-radius:4px;background:#fff;cursor:pointer}
.preview-presets{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.preview-presets button{min-height:34px;padding:6px 12px;border:2px solid #111;border-radius:4px;font-size:12px;font-weight:700;background:#fff;color:#111}
.preview-presets button:hover{background:#111;color:#fff}
.preview a:focus-visible,.preview button:focus-visible,.preview summary:focus-visible,.preview input:focus-visible{outline:3px solid #111;outline-offset:2px}
@media(max-width:640px){
 .preview{left:8px;bottom:8px;width:min(268px,calc(100% - 16px))}
 /* Offener Regler und Chat-Knopf sollen sich unten nicht ins Gehege kommen. */
 body.preview-open .chat-launcher{bottom:auto;top:calc(var(--header) + 10px)}
}

/* ---------- Mobiles Menü ---------- */
@media(max-width:1099px){
 :root{--header:66px}
 .desktop-nav{display:none}
 .header-cta{display:none}
 .header-login{display:none}
 .menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-left:auto;width:46px;height:46px;border:2px solid var(--ink);border-radius:var(--radius);flex:none}
 .menu-toggle span{width:18px;height:2px;background:currentColor}
 .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
 .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
 .brand .wordmark,.brand .wordmark-live{width:138px}
}
@media(min-width:1100px){
 .mobile-nav{display:none!important}
 .header-cta{min-height:44px;padding:9px 16px;font-size:15px;--edge:3px}
 .header-cta .icon{font-size:17px}
}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
 .button:hover,.mail-link:hover,.chat-launcher:hover{transform:none}
}

/* Large, selectable real-work presentation (v34 reference). */
.archive-enhanced[hidden]{display:none!important}
.mail-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(30px,7vw,100px);align-items:start;margin-top:36px;padding:32px;border:1px solid var(--ink);background:var(--wash)}
.mail-choices{display:flex;flex-wrap:wrap;gap:8px}
.mail-choices button{padding:11px 14px;min-height:44px;border:1px solid var(--ink);border-radius:5px;background:var(--bg);color:var(--ink);font-weight:600;font-size:14px}
.mail-choices button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.mail-choices button:hover{border-color:var(--accent);box-shadow:0 2px 0 var(--accent)}
.mail-stage__detail{margin-top:38px}
.mail-stage__detail h3{font-size:clamp(28px,3vw,42px);line-height:1.08;margin-top:14px;max-width:15ch}
.mail-stage__description{font-size:18px;line-height:1.55;margin-top:18px;max-width:33em}
.mail-stage__date{font-size:14px;color:var(--muted);margin-top:16px}
.mail-stage__detail .button{margin-top:28px}
.mail-stage__screen{display:block;width:100%;padding:0;background:#fff;color:#202922;text-align:left;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:6px 6px 0 var(--accent)}
.mail-stage__top,.mail-stage__bottom{display:block;padding:14px 16px;font-size:13px;font-weight:650;background:#fff}
.mail-stage__top{border-bottom:1px solid #ddd}
.mail-stage__bottom{border-top:1px solid #ddd}
.mail-stage__viewport{display:block;height:560px;overflow:hidden;background:#fff}
.mail-stage__viewport img{display:block;width:100%;height:auto;max-width:none}
.mail-stage__screen:hover .mail-stage__bottom{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){
 .mail-stage{grid-template-columns:minmax(0,1fr);gap:24px;padding:18px 14px;margin-top:24px}
 .mail-stage__detail{margin-top:22px}
 .mail-stage__detail h3{max-width:22ch;font-size:28px}
 .mail-stage__description{font-size:16px}
 .mail-stage__detail .button{display:none}
 .mail-stage__viewport{height:440px}
 .mail-stage__screen{max-width:420px;justify-self:center}
 .mail-choices{gap:6px}
 .mail-choices button{padding:9px 11px;font-size:13px}
}

@media(max-width:640px){body:not(.preview-open) .chat-launcher{bottom:64px}}

/* Campaign calendar: the month view Lea chose from v34. */
.campaign-year{display:flex;gap:12px;align-items:end;overflow-x:auto;margin:36px -14px 0;padding:14px 14px 24px;scroll-snap-type:x proximity;scrollbar-color:var(--ink) var(--wash)}
.campaign-month{flex:1 0 38px;min-width:38px;display:flex;flex-direction:column;justify-content:end;position:relative;border-bottom:1px solid var(--ink);padding-bottom:16px;min-height:400px;scroll-snap-align:start}
.campaign-month.has-mail{flex:2 0 156px;min-width:156px}
.calendar-mail{height:360px;transform:rotate(-1deg);background:#fff}
.campaign-month:nth-child(2n) .calendar-mail{transform:rotate(1deg)}
.calendar-mail .mail-frame{height:222px;flex:none;border-bottom:1px solid var(--ink)}
.calendar-mail .mail-body{padding:10px}
.calendar-mail .mail-title{font-size:14px;margin:0;line-height:1.3}
.calendar-mail .mail-text,.calendar-mail .mail-kind,.calendar-mail .mail-open__action{display:none}
.calendar-mail .mail-open{padding:8px 10px;font-size:12px;justify-content:start}
.month-label{margin-top:18px;font-size:13px;font-weight:650}
.campaign-month.has-mail .month-label::before{content:'';display:inline-block;width:7px;height:7px;background:var(--accent);margin-right:7px}
.flow-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:26px;margin-top:30px}
.flow-lane{min-width:0;padding:22px 20px 26px;border:1px solid var(--line);background:var(--wash);border-radius:var(--radius)}
.flow-lane>h3{font-size:20px;line-height:1.2;min-height:2.4em}
.flow-event{position:relative;margin-top:14px;padding:12px 14px;background:var(--ink);color:var(--bg);border-radius:var(--radius);font-size:15px;font-weight:650;line-height:1.3}
.flow-event span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.flow-event::after{content:'';position:absolute;left:20px;bottom:-16px;height:16px;border-left:2px solid var(--ink)}
.flow-catalog{margin:16px 0 0 20px;padding-left:22px;border-left:2px solid var(--ink)}
.flow-catalog li{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;padding:11px 0}
.flow-icon{position:absolute;left:-35px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;background:var(--wash);color:var(--accent)}
.flow-icon .icon{font-size:20px}
.flow-catalog h4{grid-column:1;grid-row:1;margin:0;font-size:17px;font-weight:700;line-height:1.25}
.flow-catalog .flow-badge{grid-column:2;grid-row:1;align-self:center}
.flow-catalog::after{content:'';position:absolute;left:-6px;bottom:-10px;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.flow-catalog{position:relative}
.flow-extra{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px;color:var(--muted)}
.flow-extra li{display:flex;align-items:center;gap:10px}
.flow-extra li::before{content:'';width:9px;height:9px;flex:none;background:var(--accent)}
/* Schmale Bildschirme: die drei Abläufe liegen nebeneinander und werden gewischt,
   statt untereinander die ganze Seitenlänge zu belegen. */
@media(max-width:1000px){.flow-map{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:18px;margin:36px -18px 0;padding:0 18px 14px;scrollbar-color:var(--ink) var(--wash)}.flow-lane{flex:0 0 min(86%,340px);scroll-snap-align:start;padding:22px 20px 26px}.flow-lane>h3{min-height:0}}
@media(max-width:640px){.campaign-month.has-mail{flex-basis:200px}.calendar-mail{height:410px}.calendar-mail .mail-frame{height:275px}.flow-lane{padding:20px 16px 24px}}
#onboarding-dialog{position:fixed;inset:0;margin:auto;width:calc(100% - 32px);max-width:540px;max-height:calc(100dvh - 32px);padding:36px 28px;background:var(--bg);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius);overflow:auto}
#onboarding-dialog::backdrop{background:#0006}
#onboarding-dialog h2{font-size:36px;line-height:1.1;margin:12px 0 20px}
#onboarding-dialog p{line-height:1.6}
#onboarding-dialog form{display:grid;gap:12px;margin:24px 0}
#onboarding-dialog label{font-size:15px;font-weight:700;margin-bottom:-6px}
#onboarding-dialog label:not(:first-child){margin-top:6px}
#onboarding-dialog input{width:100%;min-height:52px;padding:12px;border:1px solid var(--ink);background:var(--surface);color:var(--ink);border-radius:4px;font-size:17px}
.onboarding-close{position:absolute;right:12px;top:8px;width:44px;height:44px;font-size:28px}
.first-mail-note,.onboarding-preview-note{font-size:13px;color:var(--muted);margin-top:16px}
.chat-onboarding{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left;flex-shrink:0;font-size:14px}
@media(min-width:1100px){.campaign-year{display:grid;grid-template-columns:var(--month-cols);gap:10px;overflow:visible}.campaign-month,.campaign-month.has-mail{min-width:0}.calendar-mail{height:375px}.calendar-mail .mail-frame{height:210px}.calendar-mail .mail-title{font-size:13px}.calendar-mail .mail-body{padding:8px}.calendar-mail .mail-open{padding:8px;font-size:11px}}

/* Local origin: own Good Repeats mark, circular lettering inspired by reference. */
.footer-origin{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 0 48px}
.origin-seal{width:clamp(180px,22vw,260px);flex:none;color:var(--accent)}
.origin-seal svg{display:block;width:100%;height:auto}
.footer-origin>p{font-size:clamp(28px,4vw,56px);font-weight:700;line-height:1.05;letter-spacing:-.035em;margin:0;text-align:right}
@media(max-width:540px){.footer-origin{flex-direction:column;align-items:flex-start;gap:24px}.footer-origin>p{text-align:left}}

.hero-origin-seal{position:absolute;z-index:2;right:clamp(20px,4vw,64px);top:22px;width:clamp(138px,14vw,200px);color:var(--accent);background:var(--bg);border-radius:50%;transform:rotate(8deg);pointer-events:none}
.hero-origin-seal svg{display:block;width:100%;height:auto}
@media(max-width:999px){.hero-origin-seal{top:20px;right:clamp(18px,5vw,48px);width:clamp(112px,19vw,155px)}}
@media(max-width:540px){
 .hero-art{height:280px;right:12px;top:8px}
 .hero-origin-seal{top:86px;right:126px;width:112px}
 .hero h1{margin-top:252px}
}

/* Large C pixel facade under the A cathedral seal. */
.hero-art{top:0;bottom:auto;right:-4vw;width:48vw;height:auto;opacity:.72}
.hero-art svg{display:block;width:100%;height:auto}
.hero-art svg path[stroke-width]{stroke-width:4}
@media(min-width:1000px){.hero-origin-seal{top:46px;right:clamp(28px,5vw,80px)}}
@media(max-width:999px){
 .hero-art{width:290px;height:auto;right:-12px;top:45px}
 .hero-origin-seal{top:76px;right:220px;width:140px}
 .hero h1{margin-top:370px}
}
@media(max-width:540px){
 .hero-art{width:248px;right:-24px;top:65px}
 .hero-origin-seal{top:116px;right:178px;width:120px}
 .hero h1{margin-top:350px}
 .hero-art{mask-image:linear-gradient(#000 0%,#000 45%,transparent 66%)}
}

/* Two physical devices; original campaigns move inside clipped screens. */
.hero-phones{position:absolute;z-index:1;right:2%;top:94px;width:44%;height:570px}
.phone-stage{position:relative;height:520px;perspective:1200px}
.hero-phone{position:absolute;display:block;width:222px;height:454px;padding:7px;background:linear-gradient(125deg,#979c99,#1b201e 24%,#606663 55%,#121614);border:1px solid #767b77;border-radius:39px;box-shadow:9px 12px 0 #252b27,15px 24px 35px #20292235;transform-style:preserve-3d;will-change:transform}
.phone-one{left:5%;top:0;--tilt:-12deg;--yaw:18deg;animation:device-float 13s ease-in-out infinite alternate}
.phone-two{right:2%;top:58px;--tilt:10deg;--yaw:-16deg;animation:device-float 16s ease-in-out -6s infinite alternate}
.phone-screen{height:100%;position:relative;border-radius:32px;overflow:hidden;background:#faf9f5;isolation:isolate}
.phone-status{height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font:600 10px Arial;color:#111;background:#faf9f5;position:relative;z-index:2}
.phone-island{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:65px;height:18px;border-radius:20px;background:#111;z-index:3}
.phone-mail{height:calc(100% - 32px);overflow:hidden;background:#fff}
.phone-mail img{display:block;width:100%;height:auto;max-width:none;animation:campaign-scroll 40s ease-in-out infinite alternate;will-change:transform}
.phone-two .phone-mail img{animation-duration:34s;animation-delay:-9s}
.phone-home{position:absolute;bottom:5px;left:33%;right:33%;height:4px;background:#111;border:1px solid #fff9;border-radius:10px}
.phone-caption{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding-top:10px}
.phone-motion{font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:8px;min-height:36px}
.hero-phones.is-paused .hero-phone,.hero-phones.is-paused img,.hero-phones.is-offscreen .hero-phone,.hero-phones.is-offscreen img,.phone-stage:hover .hero-phone,.phone-stage:hover img,.phone-stage:focus-within .hero-phone,.phone-stage:focus-within img{animation-play-state:paused}
.hero-phone:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
@keyframes device-float{from{transform:rotateZ(var(--tilt)) rotateY(var(--yaw)) rotateX(5deg) translateY(0)}to{transform:rotateZ(calc(var(--tilt) + 5deg)) rotateY(calc(var(--yaw) - 10deg)) rotateX(-3deg) translateY(-16px)}}
@keyframes campaign-scroll{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(var(--mail-travel,0px))}}
.hero .hero-origin-seal{z-index:3;top:20px;right:3%;width:130px}
@media(min-width:1000px){.hero{min-height:760px}.hero-text{max-width:53%}}
@media(min-width:1000px) and (max-width:1200px){.hero-phone{width:185px;height:385px}.hero-phones{top:145px}.phone-stage{height:450px}.phone-one{left:0}}
@media(max-width:999px){
 .hero-phones{top:94px;left:50%;right:auto;transform:translateX(-50%);width:min(560px,90%);height:450px}
 .phone-stage{height:395px}.hero-phone{width:180px;height:365px;border-radius:34px}.phone-screen{border-radius:27px}
 .phone-one{left:12%;top:0}.phone-two{right:12%;top:24px}
 .hero h1{margin-top:515px}.hero .hero-origin-seal{top:14px;right:5%;width:104px}
}
@media(max-width:540px){
 .hero-phones{width:94%;top:105px;height:385px}.hero-phone{width:156px;height:322px;padding:6px;border-radius:30px}.phone-screen{border-radius:24px}
 .phone-one{left:6%}.phone-two{right:5%;top:30px}.phone-stage{height:358px}
 .phone-caption{gap:0;font-size:11px}.hero h1{margin-top:475px}.hero .hero-origin-seal{top:42px;right:6%;width:90px}
}
@media(prefers-reduced-motion:reduce){.hero-phone{animation:none;transform:rotateZ(var(--tilt))}.phone-mail img{animation:none}}
.hero-phones{z-index:2}
/* Mobile FIRST photographic frame; calm, nearly frontal pair. */
.hero-phone{width:215px;height:auto;aspect-ratio:393/800;padding:0;background:none;border:0;border-radius:38px;box-shadow:0 14px 26px -12px #20292238;transform-style:flat}
.hero-phone::after{content:"";position:absolute;inset:0;z-index:5;background:url('./assets/devices/iphone-16.png') center/100% 100% no-repeat;pointer-events:none}
.phone-screen{position:absolute;inset:1.1% 2.1%;height:auto;border-radius:34px}
.phone-island{display:none}
.phone-status{height:34px;padding:0 16px;font-size:9px}
.phone-mail{height:calc(100% - 34px)}
.phone-one{left:auto;right:43%;top:8px;--tilt:-3deg;--yaw:4deg;animation-duration:22s;z-index:1}
.phone-two{right:8%;top:56px;--tilt:3deg;--yaw:-4deg;animation-duration:26s;animation-delay:-5s;z-index:2}
.phone-mail img{animation-duration:58s}
.phone-two .phone-mail img{animation-duration:52s;animation-delay:-5s}
@keyframes device-float{from{transform:rotateZ(var(--tilt)) rotateY(var(--yaw)) rotateX(1deg) translateY(0)}to{transform:rotateZ(calc(var(--tilt) + 1deg)) rotateY(calc(var(--yaw) - 2deg)) rotateX(-1deg) translateY(-5px)}}
@media(min-width:1000px) and (max-width:1200px){.hero-phone{width:183px;height:auto}.phone-one{right:44%;left:auto}.phone-two{right:4%}}
@media(max-width:999px){.hero-phone{width:176px;height:auto;padding:0;border-radius:32px}.phone-screen{border-radius:28px}.phone-one{left:auto;right:43%;top:0}.phone-two{right:15%;top:26px}}
@media(max-width:540px){.hero-phone{width:153px;height:auto;padding:0;border-radius:28px}.phone-screen{border-radius:24px}.phone-one{right:44%;left:auto}.phone-two{right:8%;top:26px}.phone-status{height:29px;font-size:8px}.phone-mail{height:calc(100% - 29px)}}
/* Soft depth and a diffuse contact shadow below each floating device. */
.hero-phone{box-shadow:0 8px 14px -7px rgba(20,28,23,.22),8px 24px 38px -17px rgba(20,28,23,.28)}
.hero-phone::before{content:"";position:absolute;left:7%;right:1%;top:calc(100% + 12px);height:16px;border-radius:50%;background:rgba(20,28,23,.17);filter:blur(11px);pointer-events:none}
@media(max-width:540px){.hero-phone::before{top:calc(100% + 9px);height:12px;filter:blur(9px)}}

/* Centre the complete right-hand composition in the hero's content column. */
.hero-showcase{display:contents}
@media(min-width:1000px){
 .hero-showcase{display:block;position:absolute;z-index:2;top:50%;right:max(24px,calc((100% - 1180px)/2));width:min(43%,520px);height:610px;transform:translateY(-50%)}
 .hero-showcase .hero-phones{left:0;right:0;top:80px;transform:none;width:100%;height:530px}
 .hero-showcase .phone-stage{height:505px}
 .hero-showcase .phone-one{left:calc(50% - 214px);right:auto;top:8px}
 .hero-showcase .phone-two{left:calc(50% + 1px);right:auto;top:56px}
 .hero-showcase .hero-origin-seal{right:28px;top:0}
}
@media(min-width:1000px) and (max-width:1200px){
 .hero-showcase{height:540px}
 .hero-showcase .hero-phones{height:460px}
 .hero-showcase .phone-stage{height:440px}
 .hero-showcase .phone-one{left:calc(50% - 183px)}
 .hero-showcase .phone-two{left:calc(50% + 1px)}
}