/* Salvi Design 2026. Seegrün vom Bielersee, Flieder als Akzent, eine Schriftfamilie. */

@font-face { font-family: "Bricolage"; font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; src: url("/fonts/bricolage-std.woff2") format("woff2"); }

:root {
  --see: #123C3F;
  --see-tief: #0B2A2C;
  --flieder: #C9B8FF;
  --flieder-hell: #EFE9FF;
  --violett: #5B3FC4;
  --nebel: #EEF3F1;
  --papier: #FFFFFF;
  --tinte: #16292B;
  --grau: #4B5F61;
  --linie: #D6E0DD;

  --font: "Bricolage", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --space: clamp(64px, 9vw, 120px);
  --radius: 20px;
  --header: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--font); font-size: 1.125rem; line-height: 1.6; font-weight: 400; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--violett); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .band-see :focus-visible, .page-head :focus-visible, .site-footer :focus-visible { outline-color: var(--flieder); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; color: var(--see); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--see); color: #fff; padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; }

/* Schriftstufen */
.h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .55em; }
.h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-bottom: .5em; }
.h4 { font-size: 1.2rem; margin: 1.6em 0 .4em; }
h3 { font-size: 1.2rem; }
.big { font-size: clamp(1.2rem, 1.8vw, 1.38rem); line-height: 1.5; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8em 1.5em; font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.btn:active { transform: translateY(1px); }
.btn-flieder { background: var(--flieder); color: var(--see-tief); }
.btn-flieder:hover { background: #D9CCFF; }
.btn-see { background: var(--see); color: #fff; }
.btn-see:hover { background: var(--see-tief); }
.btn-line { border-color: var(--see); color: var(--see); }
.btn-line:hover { background: var(--see); color: #fff; }
.btn-small { min-height: 44px; padding: .55em 1.15em; font-size: .95rem; }
.btn-big { min-height: 60px; padding: 1em 2em; font-size: 1.08rem; }
.btn-link { font-weight: 650; color: var(--violett); }
.btn-link-light { color: #fff; text-decoration-color: var(--flieder); }

/* Kopfzeile */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--linie); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.3rem; letter-spacing: -.02em; color: var(--see); text-decoration: none; margin: 0; }
.main-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.main-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.main-nav a:not(.btn) { font-weight: 550; color: var(--tinte); text-decoration: none; padding: 6px 0; font-size: 1rem; }
.main-nav a:not(.btn):hover, .main-nav a[aria-current="page"] { color: var(--see); box-shadow: inset 0 -3px 0 var(--flieder); }
.main-nav a[aria-current="page"] { font-weight: 700; }
.menu-toggle { display: none; }

/* Einstieg */
.hero { background: var(--see); color: #E6EEEC; padding-top: clamp(48px, 7vw, 96px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-title { color: #fff; font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 750; margin-bottom: .45em; }
.lead { font-size: clamp(1.15rem, 1.7vw, 1.3rem); line-height: 1.55; max-width: 36ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.facts { list-style: none; margin: clamp(48px, 7vw, 88px) auto 0; padding-block: 28px 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px; border-top: 1px solid rgba(255,255,255,.16); }
.facts strong { display: block; color: var(--flieder); font-weight: 700; font-size: 1.15rem; }
.facts span { font-size: 1rem; color: #C3D3D0; }

/* Geräte-Darstellung, das Markenzeichen */
.devices { position: relative; padding: 0 0 40px 48px; }
.browser { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.06), 0 30px 60px -20px rgba(0,0,0,.45); }
.browser-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #F5F5F5; border-bottom: 1px solid #E2E2E2; }
.browser-bar span { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.browser-bar span:nth-child(2) { background: #FEBC2E; }
.browser-bar span:nth-child(3) { background: #28C840; }
.browser-bar em { position: absolute; left: 50%; transform: translateX(-50%); min-width: 40%; font-style: normal; font-size: .78rem; font-weight: 500; line-height: 1; color: #2B2B2B; text-align: center; white-space: nowrap; background: #E7E7E7; border-radius: 7px; padding: 6px 16px; }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.devices .device-ref { position: absolute; z-index: 1; left: 0; bottom: 0; width: 27%; min-width: 118px; }
.tag { position: absolute; right: -8px; top: -16px; margin: 0; background: var(--flieder); color: var(--see-tief); font-weight: 700; font-size: .95rem; padding: 8px 16px; border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
.tag span { color: var(--violett); }

/* Abschnitte */
.section { padding-block: var(--space); }
.band-nebel { background: var(--nebel); }
.band-see { background: var(--see); color: #E6EEEC; }
.band-see .h2 { color: #fff; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

/* Ablauf: echte Reihenfolge, darum nummeriert */
.steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: schritt; }
.steps li { counter-increment: schritt; border-top: 2px solid var(--see); padding-top: 22px; }
.steps li::before { content: counter(schritt); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--flieder); color: var(--see-tief); font-weight: 750; margin-bottom: 16px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--grau); font-size: 1.02rem; margin: 0; }

/* Zweispaltig */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split-wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.split-rev.split-wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.features li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.features .ic { width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: var(--flieder-hell); color: var(--violett); }
.features h3 { margin-bottom: 4px; }
.features p { margin: 0; color: var(--grau); font-size: 1.02rem; }

/* Beispiele */
.ref-cards { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.ref-card { display: block; text-decoration: none; color: var(--tinte); }
.ref-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius); border: 1px solid var(--linie); transition: transform .25s ease, box-shadow .25s ease; }
.ref-card:hover img { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(18,60,63,.45); }
.ref-card h3 { margin: 18px 0 4px; }
.ref-card p { margin: 0; color: var(--grau); }
.kicker-line { font-weight: 600; color: var(--violett); margin-top: -.3em; }

/* Preis-Anriss */
.price-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: center; }
.price-big { margin: 0; display: grid; gap: 18px; }
.price-big div { border-top: 1px solid rgba(255,255,255,.18); padding-top: 16px; }
.price-big dt { color: #C3D3D0; font-size: 1rem; }
.price-big dd { margin: 0; color: var(--flieder); font-weight: 750; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; }
.price-big small { font-size: .4em; font-weight: 500; color: #C3D3D0; letter-spacing: 0; }

/* Porträt */
.split-photo-left { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.portrait { position: relative; isolation: isolate; }
.portrait::before { content: ""; position: absolute; inset: 24px -18px -18px 24px; background: var(--flieder); border-radius: var(--radius); z-index: -1; }
.portrait img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 35%; }

/* Aufruf */
.cta-band { background: var(--flieder); padding-block: clamp(64px, 8vw, 104px); text-align: center; }
.cta-inner { max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.cta-band .h2 { color: var(--see-tief); }
.cta-band p { font-size: 1.15rem; max-width: 46ch; color: var(--see-tief); }
.cta-band .btn { margin-top: 8px; }
.cta-note { margin-top: 20px; font-size: .98rem !important; }
.cta-note a { color: var(--see-tief); }

/* Seitenkopf der Unterseiten */
.page-head { background: var(--see); color: #E6EEEC; padding-block: 44px 40px; position: relative; overflow: hidden; }
.page-title { color: var(--flieder); font-size: clamp(2.6rem, 11vw, 5.4rem); font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; line-height: .92; letter-spacing: -.01em; margin-bottom: .3em; overflow-wrap: break-word; hyphens: auto; }
.page-intro { font-size: clamp(1.1rem, 1.6vw, 1.25rem); max-width: 44ch; margin: 0; }
/* Seitenkopf ohne Unterzeile (Beispiele): oben und unten gleich viel Luft */
.page-title:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .page-head { padding-block: 56px 52px; }
  .page-head .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 64px; align-items: end; }
  .page-title { margin: 0; }
  .page-intro { padding-bottom: .5em; border-left: 2px solid var(--flieder); padding-left: 24px; }
}

/* Angebot */
.paket-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.paket { border: 2px solid var(--see); border-radius: 28px; padding: clamp(28px, 4vw, 44px); }
.paket-price { margin: 0; font-size: 1.2rem; color: var(--grau); }
.paket-price strong { font-size: clamp(3rem, 6vw, 4.2rem); color: var(--see); letter-spacing: -.03em; font-weight: 750; margin-right: 6px; }
.paket-sub { color: var(--grau); }
.paket .btn { margin-top: 12px; }
.paket-note { font-size: .98rem; color: var(--grau); margin: 16px 0 0; }
.ticks { list-style: none; margin: 0 0 20px; padding: 0; }
.ticks li { position: relative; padding: 9px 0 9px 36px; line-height: 1.45; border-bottom: 1px solid var(--linie); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .95em; width: 16px; height: 9px; border-left: 3px solid var(--violett); border-bottom: 3px solid var(--violett); transform: rotate(-45deg); }
.price-list { margin: 0 0 40px; border-top: 2px solid var(--see); }
.price-list div { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.price-list dt { font-weight: 650; line-height: 1.3; }
.price-list dt span { display: block; font-weight: 400; color: var(--grau); font-size: .98rem; margin-top: 4px; }
.price-list dd { margin: 0; font-weight: 750; color: var(--see); text-align: right; white-space: nowrap; }
.price-list small { font-weight: 500; color: var(--grau); }
.not-title { margin-top: 8px; }

/* Fragen */
.faq details { border-bottom: 1px solid var(--linie); }
.faq details:first-child { border-top: 1px solid var(--linie); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; font-weight: 650; font-size: 1.1rem; color: var(--see); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--flieder-hell); color: var(--violett); font-size: 1.3rem; font-weight: 500; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--grau); margin: 0 0 18px; max-width: 62ch; }

/* Grundsätze */
.principles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 48px; }
.principles li { border-top: 2px solid var(--see); padding-top: 18px; }
.principles p { color: var(--grau); margin: 6px 0 0; }

/* Fliesstext */
.prose { max-width: 66ch; }
.prose p { line-height: 1.65; }
.agb p { color: #2C3E40; }

/* Fusszeile */
.site-footer { background: var(--see-tief); color: #B9CAC7; padding: 64px 0 28px; font-size: 1rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 40px; }
.wordmark-foot { color: #fff; margin-bottom: 12px; }
.foot-h { font-size: .95rem; color: var(--flieder); margin: 0 0 12px; letter-spacing: 0; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { padding: 4px 0; }
.copy { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; }

/* Tablet */
@media (max-width: 1040px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .main-nav ul { gap: 18px; }
}

/* Handy */
@media (max-width: 820px) {
  body { font-size: 1.0625rem; }
  html { scroll-padding-top: 76px; }
  .header-inner { min-height: 64px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 0 16px; background: var(--see); color: #fff; border: 0; border-radius: 999px; font: inherit; font-weight: 650; font-size: .95rem; cursor: pointer; }
  .menu-icon, .menu-icon::before { display: block; width: 16px; height: 2px; background: currentColor; position: relative; transition: transform .2s ease; }
  .menu-icon { box-shadow: 0 5px 0 currentColor; top: -2px; }
  .menu-icon::before { content: ""; position: absolute; top: 10px; }
  .nav-open .menu-icon { box-shadow: none; transform: translateY(2px) rotate(45deg); }
  .nav-open .menu-icon::before { top: 0; transform: rotate(-90deg); }
  .main-nav { position: fixed; inset: 0; z-index: -1; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--papier); padding: 96px var(--gutter) 32px; overflow-y: auto; }
  .nav-open .main-nav { display: flex; }
  .nav-open { overflow: hidden; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a:not(.btn) { display: block; font-weight: 700; font-size: 1.6rem; color: var(--see); padding: 14px 0; border-bottom: 1px solid var(--linie); box-shadow: none !important; }
  .main-nav a[aria-current="page"]::after { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--flieder); margin-left: 12px; vertical-align: middle; }
  .main-nav .btn { margin-top: 28px; min-height: 56px; font-size: 1.05rem; }

  .hero-grid, .split, .split-wide, .split-rev.split-wide, .split-photo-left, .price-teaser, .paket-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .devices { padding-left: 32px; margin-top: 8px; }
  .tag { right: 4px; }
  .facts { grid-template-columns: 1fr; }
  .steps, .ref-cards, .principles { grid-template-columns: 1fr; }
  .split-rev .devices { order: -1; }
  .split .btn, .paket .btn { width: 100%; }
  .cta-band .btn { width: 100%; }
  .price-list div { grid-template-columns: 1fr; gap: 6px; }
  .price-list dd { text-align: left; }
  .portrait::before { inset: 16px -10px -12px 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* =====================================================================
   Neue Startseite (25.09.2026): zuerst fürs Handy gebaut
   ===================================================================== */
@media (min-width: 821px) { :root { --header: 72px; } }

/* ---------- Scroll-Geschichte «Aus deinem Instagram wird deine Website» (Neubau 25.09.2026) ----------
   Ein Handy bleibt stehen, nur der Bildschirm wechselt. Alles im Handy hängt an seiner eigenen Breite
   (Container-Einheiten cqw), Schrift und Handygrösse hängen an der Bühne (cqw/cqh der Bühne).
   Die Schrift wird so berechnet, dass sie das Handy bei keiner Fenstergrösse berührt. */
@property --ph { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --pw { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --big { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --small { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --note { syntax: "<length>"; inherits: true; initial-value: 0px; }

.story { position: relative; background: var(--see); color: #fff; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.anim-only { display: none; }

/* Ruhige Fassung (ohne JavaScript oder bei «Bewegung reduzieren»): Titel und vier Paare */
.story-stage { position: relative; padding: 32px var(--gutter) 8px; }
.story-title { margin: 0; color: inherit; font-stretch: 75%; font-variation-settings: "wdth" 75; letter-spacing: -.01em; text-wrap: initial; }
.st-a, .st-b { display: block; }
.st-b { text-align: right; margin-top: .3em; }
.st-small { display: block; font-size: clamp(1.4rem, 7vw, 3.4rem); font-weight: 600; line-height: 1.15; font-stretch: 90%; font-variation-settings: "wdth" 90; }
.st-big { display: block; font-size: clamp(4.2rem, 21vw, 15rem); font-weight: 800; line-height: .88; white-space: nowrap; }
.story-static { list-style: none; margin: 0; padding: 8px var(--gutter) 48px; display: grid; gap: 28px; }
.pair { background: var(--bg); color: var(--ink); border-radius: 28px; padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pair p { grid-column: 1 / -1; margin: 0; font-weight: 650; text-align: center; }
@media (min-width: 821px) {
  .story-static { grid-template-columns: 1fr 1fr; max-width: var(--wrap); margin-inline: auto; }
  .pair { gap: 22px; padding: 32px; }
}

/* Gerät: Titankante, schwarzer Glasrand, Tasten, Bildschirm mit Dynamic Island.
   Masse in cqw der Gerätebreite; Seitenverhältnis wie ein aktuelles iPhone (Bildschirm 390 × 844). */
.device { position: relative; container-type: inline-size; aspect-ratio: .4796; }
.dev-frame {
  position: absolute; inset: 0; border-radius: 16.4cqw; border: .8cqw solid transparent;
  background: linear-gradient(#0B0B0C, #0B0B0C) padding-box, linear-gradient(140deg, #8C9096, #3B3E43 22%, #6E7278 48%, #2C2E32 72%, #7F8389) border-box;
  box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .18), 0 6cqw 12cqw -3cqw rgba(0, 0, 0, .32), 0 20cqw 34cqw -14cqw rgba(0, 0, 0, .45);
}
.dev-frame::before, .dev-frame::after { content: ""; position: absolute; width: .95cqw; background: linear-gradient(90deg, #585C62, #A2A6AC 55%, #4E5257); }
.dev-frame::before {
  left: -1.6cqw; top: 17%; height: 24%; border-radius: .7cqw 0 0 .7cqw;
  -webkit-mask: linear-gradient(#000 0 12%, transparent 0 25%, #000 0 58%, transparent 0 67%, #000 0);
  mask: linear-gradient(#000 0 12%, transparent 0 25%, #000 0 58%, transparent 0 67%, #000 0);
}
.dev-frame::after { right: -1.6cqw; top: 27%; height: 14%; border-radius: 0 .7cqw .7cqw 0; }
.screen { position: absolute; inset: 2.6cqw; border-radius: 13cqw; background: #fff; container-type: inline-size; }
.island { position: absolute; z-index: 5; top: 2.9cqw; left: 34.5cqw; width: 31cqw; height: 9.2cqw; border-radius: 99px; background: #050505; }
.device-static .screen, .device-ref .screen { overflow: hidden; }

/* Ab hier sind cqw Prozent der Bildschirmbreite */
/* Jeder Fall ist eine eigene Ebene (z-index 0): so bleiben Website und Beiträge eines Falls unter dem
   nächsten Fall, auch wenn beide voll deckend sind. Die Reihenfolge im Dokument bestimmt, wer oben liegt. */
.case { position: absolute; inset: 0; z-index: 0; opacity: 0; }
.case:first-child { opacity: 1; }
.case-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 13.95cqw; background: #fff; }

/* Statusleiste */
.sb { position: relative; height: 13.8cqw; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sb-hell { color: #fff; }
.sb-time { position: absolute; left: 0; top: 4.4cqw; width: 34.5cqw; text-align: center; font-size: 4.1cqw; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.sb-icons { position: absolute; right: 0; top: 4.5cqw; width: 34.5cqw; display: flex; justify-content: center; align-items: center; gap: 1.3cqw; }
.sb-icons svg { display: block; height: 3cqw; }
.sb-icons .i-signal { width: 4.5cqw; }
.sb-icons .i-wifi { width: 4cqw; }
.sb-icons .i-batt { width: 6.75cqw; }

/* Instagram-Profil */
.ig { position: absolute; inset: 0; background: #fff; color: #000; text-align: left; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.25; }
.ig-nav { display: flex; align-items: center; gap: 2.2cqw; height: 11cqw; padding: 0 3.8cqw 0 2.6cqw; }
.ig-nav svg { flex: none; width: 6.2cqw; height: 6.2cqw; }
.ig-handle { flex: 1; min-width: 0; font-weight: 700; font-size: 4.5cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-navr { display: flex; gap: 5cqw; }
.ig-head { display: flex; align-items: center; padding: 1.4cqw 4cqw 0; }
.ig-ring { flex: none; width: 22cqw; height: 22cqw; padding: .8cqw; border-radius: 50%; background: linear-gradient(45deg, #FEDA75, #FA7E1E 28%, #D62976 55%, #962FBF 78%, #4F5BD5); }
.ig-ring img { width: 100%; height: 100%; border-radius: 50%; border: .8cqw solid #fff; object-fit: cover; }
.ig-stats { flex: 1; display: flex; justify-content: space-around; margin: 0 0 0 3cqw; }
.ig-stats div { display: flex; flex-direction: column-reverse; align-items: center; }
.ig-stats dd { margin: 0; font-weight: 700; font-size: 4.4cqw; line-height: 1.2; }
.ig-stats dt { font-size: 3.3cqw; line-height: 1.3; }
.ig .ig-name { margin: 2.4cqw 4cqw 0; font-weight: 600; font-size: 3.5cqw; line-height: 4.6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig .ig-bio { margin: 0 4cqw; font-size: 3.4cqw; line-height: 4.5cqw; max-height: 9cqw; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ig-btns { display: flex; gap: 1.6cqw; margin: 2.8cqw 4cqw 0; }
.ig-btns span { flex: 1; display: grid; place-items: center; height: 8.2cqw; border-radius: 2.1cqw; background: #EFEFEF; font-weight: 600; font-size: 3.5cqw; }
.ig-btns .ig-follow { background: #0095F6; color: #fff; }
.ig-btns .ig-sq { flex: 0 0 8.2cqw; }
.ig-sq svg { width: 4.8cqw; height: 4.8cqw; }
.ig-tabs { display: flex; height: 10.4cqw; margin-top: 3.2cqw; }
.ig-tabs span { position: relative; flex: 1; display: grid; place-items: center; color: #8E8E8E; }
.ig-tabs .on { color: #000; }
.ig-tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .4cqw; background: #000; }
.ig-tabs svg { width: 6.2cqw; height: 6.2cqw; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45cqw; }
.ig-grid > * { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: #EFEFEF; }
.ig-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 21.3cqw; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 3.2cqw; background: #fff; border-top: .25cqw solid #DBDBDB; }
.ig-bottom svg { width: 6.6cqw; height: 6.6cqw; }
.ig-me { width: 6.8cqw; height: 6.8cqw; border-radius: 50%; background: linear-gradient(#D5D5D5, #BDBDBD); }
.home-ind { position: absolute; z-index: 1; left: 33cqw; right: 33cqw; bottom: 2.1cqw; height: 1.3cqw; border-radius: 1cqw; background: #000; }

/* Dieselbe Seite als Website im Handy-Browser; baut sich von oben nach unten auf (--wipe) */
.web { position: absolute; inset: 0; z-index: 1; background: var(--web-top); clip-path: inset(0 0 calc((1 - var(--wipe, 0)) * 100%) 0); }
.web-img { position: absolute; left: 0; top: 13.8cqw; width: 100%; height: auto; transform: translateY(calc((1 - var(--wipe, 0)) * 5cqw)); }
.web::after { content: ""; position: absolute; left: 0; right: 0; top: 13.8cqw; height: 2.5cqw; background: linear-gradient(var(--web-top), transparent); }
.safari { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 21.3cqw; background: rgba(247, 247, 247, .96); border-top: .25cqw solid rgba(0, 0, 0, .1); }
.safari-url { position: absolute; left: 4cqw; right: 4cqw; top: 2.5cqw; height: 10cqw; display: grid; place-items: center; border-radius: 3cqw; background: rgba(118, 118, 128, .14); color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 3.8cqw; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.device-static .web, .device-ref .web { --wipe: 1; }

/* Die neun Beiträge: liegen exakt über dem Raster (Lage misst app.js), heben ab (--o)
   und fliegen in die entstehende Website (--b). Unten verdeckt sie die Instagram-Leiste (--clipb). */
.tiles { position: absolute; inset: 0; z-index: 2; pointer-events: none; clip-path: inset(-150cqw -150cqw calc(var(--clipb, 21.3) * 1cqw - var(--open, 0) * 200cqw) -150cqw); }
.tile {
  position: absolute; left: calc(var(--l, 0) * 1cqw); top: calc(var(--t, 0) * 1cqw); width: calc(var(--w, 33) * 1cqw); height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  --k: calc(var(--o, 0) * (1 - var(--b, 0)));
  transform:
    translate(calc((var(--c) * var(--spread-x, 36) * var(--k) + var(--cx, 0) * var(--b, 0)) * 1cqw), calc(((var(--r) * 11 - 30) * var(--k) + var(--cy, 0) * var(--b, 0)) * 1cqw))
    rotate(calc(var(--rot) * var(--k) * 1deg))
    scale(calc(1 + .16 * var(--k) - .5 * var(--b, 0)));
  opacity: calc(1 - var(--b, 0) * var(--b, 0));
  border-radius: calc(var(--k) * 1.6cqw);
  box-shadow: 0 calc(var(--k) * 2.4cqw) calc(var(--k) * 6cqw) rgba(0, 0, 0, calc(var(--k) * .3));
  will-change: transform, opacity;
}

/* Mit Bewegung: die Bühne bleibt stehen, während man scrollt */
.story.is-anim { height: calc(100svh * (1 + var(--n, 4) * 1.1)); }
.story.is-anim .story-static { display: none; }
.story.is-anim .anim-only { display: block; }
.story.is-anim .story-stage {
  position: sticky; top: var(--header); height: calc(100svh - var(--header)); overflow: hidden; padding: 0;
  background: var(--stage-bg, var(--see)); color: var(--stage-ink, #fff);
  transition: color .35s ease;
}
.story.is-anim .stage-in { position: absolute; inset: 0; container-type: size; }
/* Handy hochkant (Standard): Titel oben, Handy in der Mitte, Titel unten */
.story.is-anim .stage-box {
  position: absolute; inset: 0;
  --px: clamp(16px, 4.5cqw, 40px);
  --py: clamp(12px, 2.2cqh, 26px);
  --bargap: clamp(10px, 2.2cqh, 20px);
  --top: calc(var(--py) + 3px + var(--bargap));
  --big: min(calc((100cqw - 2 * var(--px)) / 3.36), 12.5cqh, 15rem);
  --small: max(1.05rem, calc(var(--big) * .3));
  --note: clamp(.85rem, 2cqh, 1.05rem);
  --gap: clamp(8px, 1.8cqh, 18px);
  --block: calc(var(--small) * 1.15 + var(--big) * .94 + var(--note) * 1.5);
  --ph: max(220px, calc(100cqh - var(--top) - 2 * var(--block) - 2 * var(--gap) - var(--py)));
  --pw: calc(var(--ph) * .4796);
  --dev-top: calc(var(--top) + var(--block) + var(--gap));
  --sw: 26px;
  --swgap: 9px;
  --spread-x: 36;
}
.story.is-anim .story-bars { display: flex; position: absolute; z-index: 3; top: var(--py); left: var(--px); right: var(--px); height: 3px; gap: 5px; }
.story-bars span { flex: 1; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, currentColor 22%, transparent); }
.story-bars i { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left center; }
.story.is-anim .story-title { position: static; }
.story.is-anim .st-a { position: absolute; z-index: 3; top: var(--top); left: var(--px); }
.story.is-anim .st-b { position: absolute; z-index: 3; right: var(--px); bottom: calc(var(--py) + var(--note) * 1.5); margin: 0; }
.story.is-anim .st-small { font-size: var(--small); }
.story.is-anim .st-big { font-size: var(--big); }
.st-note { position: absolute; z-index: 3; margin: 0; font-size: var(--note); line-height: 1.5; font-weight: 650; white-space: nowrap; opacity: 0; }
.note-a { top: calc(var(--top) + var(--small) * 1.15 + var(--big) * .94); left: var(--px); }
.note-b { right: var(--px); bottom: var(--py); }
.note-b span { display: inline-block; opacity: var(--cap, 0); transform: translateY(calc((1 - var(--cap, 0)) * .5em)); }
.device-story { position: absolute; z-index: 1; top: var(--dev-top); left: calc(50% - var(--pw) / 2); width: var(--pw); height: var(--ph); aspect-ratio: auto; }
.story.is-anim .swatches { display: grid; }
.swatches { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 2; gap: var(--swgap); top: calc(var(--dev-top) + var(--ph) * .16); right: calc(50% + var(--pw) / 2 + 14px); opacity: 0; }
.swatches li { width: var(--sw); height: var(--sw); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 max(2px, calc(var(--sw) * .07)) #fff, 0 6px 14px -6px rgba(0, 0, 0, .45); opacity: var(--s, 0); transform: scale(calc(.55 + .45 * var(--s, 0))); }
.story.is-anim .story-skip { display: inline-flex; position: absolute; z-index: 6; top: calc(var(--py) + 12px); right: var(--px); align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--see-tief); font-weight: 650; font-size: .9rem; text-decoration: none; opacity: 0; pointer-events: none; }
.story.is-anim .story-skip:focus { opacity: 1; pointer-events: auto; }

/* Breite Fenster (Computer, Tablet quer): Titel links oben und rechts unten, Handy in der Mitte */
@media (min-aspect-ratio: 1/1) and (min-width: 600px) {
  .story.is-anim .stage-box {
    --px: clamp(20px, 4.2cqw, 72px);
    --py: clamp(14px, 3.4cqh, 40px);
    /* Lücke zwischen Handy und Schrift: so breit, dass die abhebenden Beiträge darin Platz haben (--spread-x) */
    --colgap: clamp(28px, calc(var(--pw) * .32), 124px);
    --spread-x: 22;
    --note: clamp(.95rem, 2.3cqh, 1.3rem);
    --ph: max(200px, min(calc(100cqh - var(--top) - var(--py)), 46cqw, 900px));
    --col: calc((100cqw - var(--pw)) / 2 - var(--px) - var(--colgap));
    --big: min(calc(var(--col) / 3.36), calc((100cqh - var(--top) - var(--py) - 3 * var(--note) - 24px) / 2.57), 15rem);
    --dev-top: calc(var(--top) + (100cqh - var(--top) - var(--py) - var(--ph)) / 2);
    --sw: clamp(26px, 6cqh, 52px);
    --swgap: clamp(10px, 1.8cqh, 16px);
  }
  /* Die Namenszeile bleibt in ihrer Spalte, auch beim längsten Namen (31 Zeichen, rund 17,5 Geviert breit) */
  .note-a { font-size: min(var(--note), calc(var(--col) / 17.5)); }
  .note-b { font-size: min(var(--note), calc(var(--col) / 14.5)); }
  /* Farben links unter dem Instagram-Namen: dort ist bei jeder Fenstergrösse Platz */
  .story.is-anim .swatches { display: flex; right: auto; left: var(--px); top: calc(var(--top) + var(--small) * 1.15 + var(--big) * .94 + var(--note) * 1.5 + var(--swgap)); }
}

/* ---------- Einleitung ---------- */
.intro { padding: clamp(48px, 9vw, 112px) 0 clamp(40px, 7vw, 88px); }
.intro-text { font-size: clamp(1.7rem, 5.2vw, 3.2rem); line-height: 1.15; font-weight: 650; color: var(--see); letter-spacing: -.02em; max-width: 30ch; margin-bottom: .8em; }
.intro-text span { color: var(--violett); }
.intro-text:has(+ .intro-sub) { margin-bottom: .35em; }
.intro-text.kurz, .intro-grid .intro-text.kurz { font-size: clamp(2.2rem, min(5.4vw, 7.5svh), 4.2rem); line-height: 1.08; }
.intro-sub { font-size: clamp(1.1rem, 2.1vw, 1.4rem); line-height: 1.5; color: var(--see); max-width: 36ch; margin: 0 0 1.4em; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
/* Kurzfilm neben dem Einstieg: am Handy darunter, am Computer rechts im Hochformat */
.intro-grid { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
/* Am Computer passt der ganze Block in die Fensterhöhe: das Video richtet sich nach der Höhe, die Schrift nach Breite und Höhe */
@media (min-width: 900px) {
  .intro { min-height: calc(100svh - var(--header)); display: flex; align-items: center; padding: 32px 0; box-sizing: border-box; }
  .intro > .wrap { width: 100%; }
  .intro-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .intro-grid .intro-text { font-size: clamp(1.5rem, min(3.1vw, 4.4svh), 2.7rem); }
  .intro-grid .spot { width: clamp(200px, calc((100svh - var(--header) - 64px) * 9 / 16), 400px); }
}
.spot { margin: 0; justify-self: center; width: min(100%, 400px); }
.spot-frame { position: relative; border-radius: 28px; overflow: hidden; background: var(--see); box-shadow: 0 24px 60px rgba(18, 60, 63, .18); }
.spot-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.spot-ton { position: absolute; top: 14px; right: 14px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .92); color: var(--see); font: 600 .95rem/1 var(--font); cursor: pointer; box-shadow: 0 2px 12px rgba(18, 60, 63, .22); }
.spot-ton:hover { background: #fff; }

/* ---------- Zwei Wege ---------- */
.paths { display: grid; }
.path { padding: clamp(40px, 8vw, 88px) var(--gutter); }
.path > * { max-width: 560px; }
.path-neu { background: var(--flieder); color: var(--see-tief); }
.path-alt { background: var(--see); color: #E6EEEC; }
.path-kicker { font-weight: 650; font-size: 1rem; margin-bottom: .6em; color: var(--violett); }
.path-alt .path-kicker { color: var(--flieder); }
.path-title { font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; margin-bottom: .45em; color: inherit; }
.path p:last-child { font-size: 1.1rem; margin: 0; }
@media (min-width: 821px) {
  .paths { grid-template-columns: 1fr 1fr; }
  .path-neu { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
}

/* ---------- Ablauf mit grossen Ziffern ---------- */
.steps-big { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: schritt; }
/* align-content: start hält Ziffer, Titel und Text oben, auch wenn eine Nachbarspalte mehr Text hat (sonst verrutschen die Titel) */
.steps-big li { counter-increment: schritt; display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: start; align-content: start; padding: 18px 0; border-top: 1px solid var(--linie); }
.steps-big li::before { content: counter(schritt); grid-row: span 2; font-size: clamp(4rem, 18vw, 7rem); line-height: .8; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; color: var(--flieder); -webkit-text-stroke: 2px var(--see); min-width: .8em; }
.steps-big h3 { font-size: 1.35rem; margin: 2px 0 4px; }
.steps-big p { margin: 0; color: var(--grau); }
/* fünf Schritte nebeneinander erst ab 1100 px, darunter untereinander wie am Handy */
@media (min-width: 1100px) {
  .steps-big { grid-template-columns: repeat(5, 1fr); gap: 28px; }
  .steps-big li { grid-template-columns: 1fr; border-top: 2px solid var(--see); }
  .steps-big li::before { grid-row: auto; margin-bottom: 14px; }
}

/* ---------- Preis-Moment ---------- */
.price-moment { overflow: hidden; }
.price-huge { margin: 0 0 .12em; font-size: clamp(8rem, 44vw, 26rem); line-height: .8; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; color: var(--flieder); letter-spacing: -.03em; }
.price-moment .big { max-width: 44ch; }

/* ---------- Beispiele zum Wischen ---------- */
.ref-swipe { list-style: none; margin: 20px 0 0; padding: 4px var(--gutter) 16px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
.ref-slide { flex: 0 0 min(78vw, 340px); scroll-snap-align: start; }
.ref-slide a { display: flex; flex-direction: column; height: 100%; background: var(--bg, var(--nebel)); color: var(--ink, var(--see)); border-radius: 28px; padding: 22px 22px 24px; text-decoration: none; }
.ref-slide .device { width: 62%; margin: 4px auto 24px; }
.ref-name { font-weight: 800; font-size: 1.4rem; font-stretch: 85%; font-variation-settings: "wdth" 85; }
.ref-sub { font-size: 1rem; opacity: .85; }
.ref-next a { background: var(--flieder); color: var(--see-tief); justify-content: flex-end; min-height: 100%; }
.ref-next .ref-name { font-size: clamp(2.4rem, 10vw, 3.4rem); line-height: 1; font-stretch: 75%; font-variation-settings: "wdth" 75; }
@media (min-width: 1200px) { .ref-swipe { padding-left: calc((100vw - var(--wrap)) / 2 + var(--gutter)); } }

/* ---------- Formular ---------- */
.form-section { background: var(--flieder-hell); }
.form-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .form-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } }
.form-alt { color: var(--grau); }
.anfrage { background: #fff; border-radius: 28px; padding: clamp(20px, 5vw, 40px); display: grid; gap: 20px; box-shadow: 0 24px 50px -30px rgba(18,60,63,.35); }
.start-form { background: #fff; border-radius: 28px; padding: clamp(20px, 5vw, 40px); display: grid; gap: 30px; box-shadow: 0 24px 50px -30px rgba(18,60,63,.35); }
.start-form fieldset.feld { gap: 12px; }
.start-form .feld-check { margin-top: -10px; }
.info-box { background: var(--flieder-hell, #F1ECFB); border-left: 4px solid var(--violett); border-radius: 12px; padding: 14px 16px; font-size: .98rem; line-height: 1.55; color: var(--tinte); }
.info-box strong { color: var(--see); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.feld label, .feld legend { font-weight: 650; color: var(--see); font-size: 1.02rem; padding: 0; }
.optional { font-weight: 400; color: var(--grau); font-size: .9rem; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--tinte); background: #fff;
  min-height: 52px; padding: 12px 14px; border: 2px solid var(--linie); border-radius: 14px; transition: border-color .15s ease;
}
.feld textarea { min-height: 96px; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--flieder); outline-offset: 1px; border-color: var(--violett); }
.feld [aria-invalid="true"] { border-color: #B42318; }
.feld-hilfe { margin: 0; font-size: .95rem; color: var(--grau); }
.feld-fehler { margin: 0; font-size: .95rem; color: #B42318; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--linie); font-weight: 600; color: var(--see); transition: background-color .15s, border-color .15s; }
.chip input:checked + span { background: var(--see); border-color: var(--see); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--violett); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-weight: 400 !important; color: var(--tinte) !important; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--see); }
.fehler-liste { background: #FEF3F2; border: 2px solid #B42318; border-radius: 14px; padding: 14px 18px; color: #7A271A; }
.fehler-liste p { margin: 0 0 6px; font-weight: 700; }
.fehler-liste ul { margin: 0; padding-left: 18px; }
.fehler-liste a { color: #7A271A; }
.btn-submit { width: 100%; }
.btn-submit:disabled { opacity: .7; cursor: progress; }
.form-status { margin: 0; color: var(--see); font-weight: 600; min-height: 1.2em; }
.form-danke { padding: 12px 4px; }
.form-danke h3 { font-size: 1.6rem; margin-bottom: .4em; }

/* ---------- Logo B «Das Band» (25.09.2026) ----------
   Beim allerersten Besuch legt sich das Band einmal in 1,2 Sekunden ins D. Die Klasse logo-erst setzt ein kleines
   Skript im Kopf der Seite, nur wenn der Browser sich den Besuch merken kann. Die Maske ändert nur die Malerei,
   nie das Layout, und ohne logo-erst steht das Zeichen sofort fertig da. */
.logo-mark { flex: none; }
.logo-spur { stroke-dasharray: calc(var(--l) * 1px) calc(var(--l) * 1px); }
.logo-erst .site-header .logo-band { mask: url(#sd-legen); }
.logo-erst .site-header .logo-spur { animation: sd-legen 1.2s cubic-bezier(.4, 0, .2, 1) .15s both; }
@keyframes sd-legen { from { stroke-dashoffset: calc(var(--l) * 1px); } to { stroke-dashoffset: 0; } }

/* Intro beim ersten Seitenaufruf pro Sitzung (28.09.2026). Das Band legt sich gross in der Mitte ins D, der Schriftzug
   erscheint, danach fliegen Zeichen und Schrift an ihren Platz in der Kopfzeile (app.js). Ein Klick, eine Taste oder
   Scrollen überspringt es. Fällt das Skript aus, blendet sich die Fläche nach 4,5 Sekunden von selbst aus. */
.sd-intro { display: none; }
.sd-intro-an .sd-intro { display: flex; position: fixed; inset: 0; z-index: 200; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vmin, 28px); background: #fff; animation: sd-intro-notaus .3s 4.5s forwards; }
.sd-intro .intro-mark { width: clamp(88px, 15vmin, 140px); height: auto; transform-origin: 0 0; }
.sd-intro .logo-band { mask: url(#sd-intro-legen); }
.sd-intro .logo-spur { animation: sd-legen 1.1s cubic-bezier(.4, 0, .2, 1) .2s both; }
.sd-intro-name { font-weight: 750; font-size: clamp(2rem, 6vmin, 3.2rem); line-height: 1.2; letter-spacing: -.02em; color: var(--see); transform-origin: 0 0; opacity: 0; animation: sd-intro-name .6s cubic-bezier(.2, .7, .2, 1) 1.1s forwards; }
.sd-intro-an .site-header .wordmark { opacity: 0; animation: sd-intro-zeigen .3s 4.5s forwards; }
@keyframes sd-intro-name { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sd-intro-notaus { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes sd-intro-zeigen { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .logo-erst .site-header .logo-band { mask: none; }
  .logo-erst .site-header .logo-spur { animation: none; }
}

/* Technik-Seite (12.10.2026) */
.code-demo { position: relative; padding-bottom: 72px; }
.code-win { background: var(--see-tief); border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(11,42,44,.55); overflow: hidden; }
.code-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: rgba(255,255,255,.06); }
.code-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.22); }
.code-bar b { margin-left: 10px; font-weight: 600; font-size: .85rem; color: #C3D3D0; }
.code-win pre { margin: 0; padding: 20px 22px 26px; overflow-x: auto; font: 500 .95rem/1.7 ui-monospace, "Cascadia Code", Consolas, monospace; color: #E6EEEC; }
.code-win i { font-style: normal; color: var(--flieder); }
.code-win u { text-decoration: none; color: #8FD3C7; }
.code-win s { text-decoration: none; color: #F3C98B; }
.code-result { position: absolute; right: -8px; bottom: 0; width: min(260px, 72%); background: var(--papier); border-radius: 16px; padding: 18px 20px 20px; box-shadow: 0 24px 50px -20px rgba(11,42,44,.45); border: 1px solid var(--linie); }
.code-result p { margin: 0; }
.code-result-k { font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--violett); margin-bottom: 8px !important; }
.code-result-t { font-weight: 700; font-size: 1.2rem; color: var(--see); line-height: 1.2; }
.code-result-s { color: var(--grau); font-size: .95rem; margin-bottom: 12px !important; }
.code-result-btn { display: inline-block; background: var(--see); color: #fff; font-weight: 650; font-size: .9rem; padding: 8px 16px; border-radius: 999px; }

.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.vgl { border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); }
.vgl h3 { font-size: 1.3rem; margin-bottom: 14px; }
.vgl-alt { background: var(--papier); border: 1px solid var(--linie); }
.vgl-alt h3 { color: var(--grau); }
.vgl-neu { background: var(--see); color: #E6EEEC; box-shadow: 0 30px 60px -34px rgba(11,42,44,.6); }
.vgl-neu h3 { color: #fff; }
.vgl-liste { list-style: none; margin: 0; padding: 0; }
.vgl-liste li { position: relative; padding: 11px 0 11px 36px; line-height: 1.45; border-top: 1px solid var(--linie); }
.vgl-neu .vgl-liste li { border-top-color: rgba(255,255,255,.14); }
.vgl-alt .vgl-liste li { color: var(--grau); }
.vgl-alt .vgl-liste li::before, .vgl-alt .vgl-liste li::after { content: ""; position: absolute; left: 6px; top: 1.15em; width: 15px; height: 2.5px; background: #9AAAA8; border-radius: 2px; transform: rotate(45deg); }
.vgl-alt .vgl-liste li::after { transform: rotate(-45deg); }
.vgl-neu .vgl-liste li::before { content: ""; position: absolute; left: 4px; top: .95em; width: 16px; height: 9px; border-left: 3px solid var(--flieder); border-bottom: 3px solid var(--flieder); transform: rotate(-45deg); }

.features-grid { grid-template-columns: 1fr 1fr; gap: 36px 56px; margin-top: 8px; }

.easy-kicker { display: inline-block; background: var(--flieder); color: var(--see-tief); font-weight: 650; font-size: .9rem; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.ticks-hell li { border-bottom-color: rgba(255,255,255,.14); }
.ticks-hell li::before { border-color: var(--flieder); }
.easy-note { color: #C3D3D0; font-size: 1rem; margin: 0; }
.ec-win { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 34px 70px -30px rgba(0,0,0,.6); color: var(--tinte); }
.ec-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--linie); font-size: .85rem; }
.ec-bar b { color: var(--violett); }
.ec-bar span { color: var(--grau); }
.ec-bar .ec-pub { margin-left: auto; background: var(--see); color: #fff; font-weight: 650; padding: 6px 12px; border-radius: 999px; }
.ec-body { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 300px; }
.ec-page { padding: 20px; display: grid; gap: 10px; align-content: start; background: var(--nebel); }
.ec-line { height: 9px; border-radius: 5px; background: #C9D6D3; }
.ec-w40 { width: 40%; } .ec-w50 { width: 50%; } .ec-w60 { width: 60%; } .ec-w70 { width: 70%; } .ec-w80 { width: 80%; }
.ec-sel { position: relative; display: grid; gap: 9px; padding: 12px; margin: 8px 0; border: 2px dashed var(--violett); border-radius: 10px; background: #fff; }
.ec-tag { position: absolute; top: -12px; left: 10px; background: var(--violett); color: #fff; font-size: .7rem; font-weight: 650; padding: 3px 9px; border-radius: 999px; }
.ec-img { height: 70px; border-radius: 6px; background: linear-gradient(135deg, var(--flieder) 0%, #8FD3C7 100%); }
.ec-panel { padding: 16px; border-left: 1px solid var(--linie); }
.ec-lab { margin: 0 0 4px; font-size: .75rem; font-weight: 650; color: var(--grau); }
.ec-field { border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; font-size: .85rem; margin-bottom: 12px; line-height: 1.4; }
.ec-area { min-height: 62px; }
.ec-foto { display: flex; align-items: center; gap: 8px; color: var(--violett); font-weight: 600; }
.ec-foto span { width: 26px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, var(--flieder), #8FD3C7); }
.ec-undo { margin: 0; font-size: .8rem; font-weight: 600; color: var(--see); text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 900px) { .principles-3 { grid-template-columns: repeat(3, 1fr); } }
.technik-link { margin: 36px 0 0; color: var(--grau); }

@media (max-width: 820px) {
  .vergleich, .features-grid { grid-template-columns: 1fr; }
  .code-demo { padding-bottom: 96px; }
  .code-result { right: 0; }
  .code-win pre { font-size: .82rem; }
  .ec-body { grid-template-columns: 1fr; }
  .ec-panel { border-left: 0; border-top: 1px solid var(--linie); }
}

/* ---------- Google und Zahlen (13.10.2026) ---------- */
.seo-intro { max-width: 52ch; margin: 0 0 8px; }
.seo-zahlen-titel { margin-top: clamp(48px, 7vw, 80px); }
.seo-kicker { display: inline-block; background: var(--flieder); color: var(--see-tief); font-weight: 650; font-size: .85rem; padding: 4px 12px; border-radius: 999px; margin: 0 0 10px !important; }
.price-seo { max-width: 44ch; margin: 0 0 28px; color: #E6EEEC; }
.price-seo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 6px 0; }

/* /technik/ neu gestaltet (13.10.2026, ui-ux-pro-max: Nutzen zuerst, Weg zum Entwurf früh, Karten statt Textraster) */
.tech-hero { padding-block: clamp(56px, 7vw, 104px); }
.tech-kicker { display: inline-block; margin: 0 0 18px; padding: 6px 13px; border-radius: 999px; background: var(--flieder-hell); color: var(--violett); font-size: .82rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.tech-hook { margin: 0 0 .28em; font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; line-height: 1; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; }
.tech-sub { margin: 0 0 18px; text-wrap: balance; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; color: var(--violett); }
.tech-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tech-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 11px; border-radius: 999px; background: var(--nebel); color: var(--see); font-size: .95rem; font-weight: 600; }
.tech-chips .ic { width: 20px; height: 20px; color: var(--violett); flex: none; }
.vgl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 32px 0 0; }
.vgl-cta span { color: var(--grau); }
.features-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.features-cards li { grid-template-columns: 1fr; align-content: start; gap: 14px; padding: 26px 24px 28px; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease; }
.features-cards li:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(11,42,44,.45); }
.features-cards .ic { width: 56px; height: 56px; padding: 13px; }
.principles-num { counter-reset: punkt; }
.principles-num li { counter-increment: punkt; }
.principles-num li::before { content: counter(punkt, decimal-leading-zero); display: block; margin-bottom: 10px; font-size: 2.4rem; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; line-height: 1; color: var(--violett); }
@media (max-width: 1000px) { .features-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .features-cards li { transition: none; } .features-cards li:hover { transform: none; } }