/* Abometer Startseite und Verkaufsunterlage. Eigenständig, ohne Build. Schrift: Figtree (OFL), selbst gehostet. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --teal: #0f766e;
  --teal-700: #0b5f58;
  --teal-900: #073f3a;
  --teal-300: #7fd0c6;
  --teal-100: #d8efeb;
  --paper: #f6f7f5;
  --white: #ffffff;
  --ink: #14201d;
  --ink-2: #4f5d59;
  --ink-3: #6b7874;
  --night: #0d1412;
  --night-2: #161f1d;
  --line: #e3e7e4;
  --amber: #f2b544;
  --saving: #15803d;
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --wrap: 1240px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.125rem)/1.6 var(--font); font-feature-settings: 'tnum' 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--amber); color: var(--night); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
html { scrollbar-color: var(--teal) var(--paper); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
main { overflow-x: clip; }

/* Typografie */
.display { font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; font-size: clamp(2.7rem, 1.3rem + 5.4vw, 5.6rem); }
.h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.7rem); }
.h3 { font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.55rem); }
.lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.5; color: var(--ink-2); max-width: 38em; text-wrap: pretty; }
.prose { max-width: 62ch; text-wrap: pretty; color: var(--ink-2); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 750 1rem/1 var(--font); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .25s var(--ease), background-color .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-light { background: var(--white); color: var(--teal-900); }
.btn-light:hover { background: var(--amber); }
.btn-ghost-light { color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
.btn-teal { background: var(--teal); color: var(--white); }
.btn-teal:hover { background: var(--teal-700); }
.btn-ghost { color: var(--teal-900); border-color: var(--teal); }
.btn-ghost:hover { background: var(--teal-100); }
.btn-amber { background: var(--amber); color: var(--night); }
.btn-amber:hover { background: #ffd37a; }
.btn[aria-disabled='true'] { opacity: 1; cursor: default; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 50; transition: background-color .3s, box-shadow .3s, color .3s; color: var(--white); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav.solid { background: color-mix(in srgb, var(--teal) 94%, transparent); backdrop-filter: blur(14px); box-shadow: 0 6px 24px rgba(7,63,58,.28); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.nav ul { display: flex; gap: 6px; margin-left: auto; }
.nav ul a { display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .98rem; opacity: .92; }
.nav ul a:hover { background: rgba(255,255,255,.14); opacity: 1; }
.nav .btn { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav ul { display: none; }
  .nav .btn { margin-left: auto; }
}

/* Hero */
.hero { position: relative; background: var(--teal); color: var(--white); overflow: clip; margin-top: -72px; padding-top: 72px; isolation: isolate; }
.hero-contours { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: rgba(255,255,255,.13); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 5vw, 80px); min-height: min(100svh, 920px); padding-block: clamp(48px, 9vh, 110px); }
.hero h1 { max-width: 11.5ch; }
.hero .lead { color: rgba(255,255,255,.88); margin-top: clamp(20px, 3vh, 32px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 4vh, 40px); }
.fineprint { margin-top: 22px; font-size: .95rem; color: rgba(255,255,255,.78); }
.fineprint a { text-decoration-color: rgba(255,255,255,.5); }
.hero-stage { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1 / 1.3; }
.hero-stage .phone { position: absolute; left: 50%; top: 50%; width: 58%; transform: translate(-50%, -50%) rotate(2.5deg); }
.zone { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.zone i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); }
.zone i:nth-child(1) { inset: 12%; border-style: dashed; border-color: rgba(255,255,255,.7); }
.zone i:nth-child(2) { animation: pulse 4s var(--ease) infinite; }
.zone i:nth-child(3) { animation: pulse 4s var(--ease) 2s infinite; }
@keyframes pulse { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.walker { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 6px rgba(242,181,68,.28); offset-path: path('M 20 430 C 120 400, 160 330, 250 300'); offset-rotate: 0deg; animation: walk 9s linear infinite; }
@keyframes walk { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 52%, 90% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.path-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Hinweis-Ticket (Benachrichtigung) */
.ticket-wrap { filter: drop-shadow(0 18px 24px rgba(0,0,0,.32)) drop-shadow(0 2px 3px rgba(0,0,0,.22)); }
.ticket { --r: 13px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: var(--white); color: var(--ink); padding: 16px 26px 16px 22px; mask: radial-gradient(circle var(--r) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--r) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; -webkit-mask: radial-gradient(circle var(--r) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--r) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; border-radius: 18px; }
.ticket .pct { width: 46px; height: 46px; border-radius: 13px; background: var(--teal); display: grid; place-items: center; }
.ticket .pct img { width: 30px; height: 30px; }
.ticket small { display: block; font-size: .78rem; font-weight: 650; color: var(--ink-3); letter-spacing: .01em; }
.ticket b { display: block; font-size: 1.02rem; font-weight: 750; line-height: 1.25; margin: 1px 0; }
.ticket span { display: block; font-size: .9rem; color: var(--ink-2); line-height: 1.3; }
.ticket em { font-style: normal; font-weight: 750; color: var(--teal-700); }
.hero-ticket { position: absolute; z-index: 3; left: -4%; top: 6%; width: 78%; animation: ticket-in 9s var(--ease) infinite; }
@keyframes ticket-in { 0%, 52% { opacity: 0; transform: translateY(22px) scale(.96); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; }
  .hero-stage { width: min(100%, 440px); margin-top: 8px; }
  .hero-ticket { left: 0; top: 0; width: 90%; }
  .hero-stage .phone { width: 64%; top: 56%; }
}
@media (max-width: 520px) { .btn { width: 100%; } .cta-row { gap: 10px; } .hero-ticket .ticket { padding: 12px 20px 12px 18px; } }

/* Handy-Rahmen */
.phone { position: relative; aspect-ratio: 1206 / 2622; border-radius: 13.5% / 6.2%; padding: 2.6%; background: #101614; box-shadow: 0 2px 4px rgba(7,20,18,.25), 0 24px 50px -8px rgba(7,20,18,.4), inset 0 0 0 1.5px #2a3532; }
.phone img, .phone .screen { width: 100%; height: 100%; border-radius: 11% / 5.1%; object-fit: cover; object-position: top; background: var(--paper); }
.phone::after { content: ''; position: absolute; left: 50%; top: 2.1%; width: 26%; height: 2.2%; translate: -50% 0; border-radius: 99px; background: #050908; }
.phone.sm { border-radius: 14% / 6.4%; }

/* Kapitel: So läuft's (klebendes Handy) */
.story { background: var(--paper); padding-block: clamp(72px, 12vh, 150px); position: relative; }
.story-head { max-width: 22em; }
.story-head .h2 { margin-bottom: 18px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(32px, 7vw, 120px); margin-top: clamp(40px, 8vh, 90px); align-items: start; }
.steps { display: grid; gap: 0; }
.step { min-height: 62vh; display: grid; align-content: center; gap: 14px; padding-block: 3vh; opacity: .35; transition: opacity .5s var(--ease); max-width: 30em; }
.step.on { opacity: 1; }
.step .num-dot { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--teal-100); color: var(--teal-900); }
.step .num-dot svg { width: 22px; height: 22px; }
.step-shot { display: none; }
.sticky-phone { position: sticky; top: max(88px, 12vh); width: min(100%, 360px); justify-self: end; }
.sticky-phone .screen-stack { position: relative; width: 100%; height: 100%; }
.screen-stack > * { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease), transform .7s var(--ease); transform: scale(1.02); }
.sticky-phone[data-step='1'] .s1, .sticky-phone[data-step='2'] .s2, .sticky-phone[data-step='3'] .s3, .sticky-phone[data-step='4'] .s4 { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .sticky-phone { display: none; }
  .step { min-height: 0; opacity: 1; padding-block: 28px 56px; gap: 18px; max-width: none; }
  .step-shot { display: block; width: min(72%, 280px); margin-top: 8px; }
}

/* Lockscreen-Nachbau */
.lock { position: relative; background: radial-gradient(120% 70% at 50% 0%, #1d6e68 0%, #0c2f2c 55%, #08201e 100%); color: var(--white); border-radius: 11% / 5.1%; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding: 14% 7% 8%; }
.lock .clock { text-align: center; }
.lock .clock small { font-size: clamp(.7rem, 1.5vw, .9rem); font-weight: 600; opacity: .85; }
.lock .clock b { display: block; font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 4px; }
.lock .notifs { align-self: start; margin-top: 20%; display: grid; gap: 10px; }
.lock .ticket { grid-template-columns: auto 1fr; padding: 12px 20px 12px 16px; --r: 10px; }
.lock .ticket .pct { width: 38px; height: 38px; border-radius: 11px; }
.lock .ticket .pct img { width: 24px; height: 24px; }
.lock .ticket b { font-size: clamp(.78rem, 1.9vw, .95rem); }
.lock .ticket span, .lock .ticket small { font-size: clamp(.68rem, 1.5vw, .82rem); }

/* Funktionen */
.features { background: var(--white); }
.feat { padding-block: clamp(64px, 11vh, 140px); }
.feat + .feat { border-top: 1px solid var(--line); }
.feat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 110px); align-items: center; }
.feat.flip .feat-copy { order: 2; }
.feat-copy { display: grid; gap: 20px; justify-items: start; }
.feat-copy .h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
.facts { display: grid; gap: 12px; margin-top: 6px; }
.facts li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.facts svg { width: 22px; height: 22px; color: var(--teal); margin-top: 2px; }
.facts b { font-weight: 750; }
.feat-visual { position: relative; justify-self: center; width: 100%; display: grid; place-items: center; }
.duo { position: relative; width: min(100%, 520px); aspect-ratio: 1 / 1.45; }
.duo .phone { position: absolute; width: 56%; }
.duo .phone:first-child { left: 0; top: 0; transform: rotate(-4deg); }
.duo .phone:last-child { right: 0; bottom: 0; transform: rotate(3deg); }
.solo { width: min(72%, 340px); }
.tint-berg { background: #e4ecf4; } .tint-kultur { background: #efe8f3; } .tint-bad { background: #e1eff2; } .tint-gastro { background: #f5ebdf; }
.glow { position: absolute; inset: 8% 4%; border-radius: 40px; z-index: 0; }
.feat-visual > * { position: relative; z-index: 1; }
.window { width: min(100%, 560px); border-radius: 14px; background: var(--white); box-shadow: 0 2px 4px rgba(7,20,18,.1), 0 30px 60px -12px rgba(7,20,18,.35); overflow: hidden; }
.window .bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #eceeed; }
.window .bar i { width: 11px; height: 11px; border-radius: 50%; background: #c9cecb; }
.window .bar span { margin-left: 10px; flex: 1; background: var(--white); border-radius: 8px; padding: 4px 12px; font-size: .8rem; color: var(--ink-3); }
.window img { width: 100%; height: auto; aspect-ratio: 4 / 3.1; object-fit: cover; object-position: top; }
@media (max-width: 900px) {
  .feat-grid { grid-template-columns: 1fr; }
  .feat.flip .feat-copy { order: 0; }
  .duo { width: min(100%, 420px); }
}

/* Datenschutz */
.privacy { background: var(--night); color: #e9efed; padding-block: clamp(72px, 12vh, 150px); position: relative; overflow: clip; }
.privacy .grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 110px); align-items: start; }
.privacy .lead { color: #a9b6b2; margin-top: 22px; }
.promises { display: grid; }
.promises > div { padding-block: 26px; position: relative; }
.promises > div + div::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: radial-gradient(circle, #31403c 1.2px, transparent 1.6px) 0 0 / 14px 2px repeat-x; }
.promises dt { font-weight: 800; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); letter-spacing: -0.02em; color: var(--white); }
.promises dd { color: #a9b6b2; margin-top: 8px; max-width: 36em; }
.privacy a { color: var(--teal-300); }
.shield { width: 56px; height: 56px; color: var(--teal-300); margin-bottom: 22px; }
@media (max-width: 900px) { .privacy .grid { grid-template-columns: 1fr; } }

/* Für Betriebe */
.biz { background: var(--teal-900); color: var(--white); padding-block: clamp(72px, 12vh, 150px); position: relative; overflow: clip; isolation: isolate; }
.biz .contours { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: rgba(127,208,198,.1); }
.biz .head { max-width: 30em; }
.biz .lead { color: rgba(255,255,255,.82); margin-top: 22px; }
.biz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 100px); align-items: center; margin-top: clamp(40px, 8vh, 80px); }
.diagram { width: min(100%, 520px); justify-self: center; }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.offers { display: grid; }
.offers li { display: grid; grid-template-columns: 28px 1fr auto; gap: 16px; padding-block: 22px; align-items: start; position: relative; }
.offers li + li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: radial-gradient(circle, rgba(255,255,255,.28) 1.2px, transparent 1.6px) 0 0 / 14px 2px repeat-x; }
.offers svg { width: 26px; height: 26px; color: var(--amber); margin-top: 2px; }
.offers b { display: block; font-weight: 750; font-size: 1.15rem; letter-spacing: -0.01em; }
.offers p { color: rgba(255,255,255,.78); margin-top: 4px; font-size: .98rem; max-width: 34em; }
.pill { font-size: .8rem; font-weight: 700; padding: 5px 12px; border-radius: 99px; white-space: nowrap; margin-top: 2px; }
.pill.ok { background: rgba(127,208,198,.18); color: var(--teal-300); }
.pill.soon { background: rgba(242,181,68,.2); color: #ffd37a; }
.pill.plan { background: rgba(255,255,255,.14); color: #fff; }
.biz .cta-row { margin-top: clamp(32px, 6vh, 56px); }
@media (max-width: 900px) { .biz-grid { grid-template-columns: 1fr; } .offers li { grid-template-columns: 28px 1fr; } .offers .pill { grid-column: 2; justify-self: start; } }

/* Download */
.get { background: var(--paper); padding-block: clamp(72px, 12vh, 140px); }
.get .head { max-width: 24em; }
.get .lead { margin-top: 18px; }
.ways { margin-top: clamp(32px, 6vh, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.way { display: grid; align-content: start; gap: 10px; padding: 8px clamp(18px, 3vw, 40px) 8px 0; position: relative; }
.way + .way { padding-left: clamp(18px, 3vw, 40px); }
.way + .way::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: radial-gradient(circle, #b9c3bf 1.2px, transparent 1.6px) 0 0 / 2px 14px repeat-y; }
.way svg { width: 34px; height: 34px; color: var(--teal); }
.way .btn { justify-self: start; margin-top: 8px; }
.soon-tag { font-size: .82rem; font-weight: 700; color: var(--ink-2); background: #e8ecea; border-radius: 99px; padding: 4px 12px; justify-self: start; }
@media (max-width: 860px) {
  .ways { grid-template-columns: 1fr; gap: 28px; }
  .way, .way + .way { padding: 0; }
  .way + .way::before { display: none; }
}

/* FAQ */
.faq { background: var(--white); padding-block: clamp(64px, 10vh, 120px); }
.faq .grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 7vw, 100px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 700; font-size: 1.1rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); translate: 0 -70%; rotate: 45deg; transition: rotate .3s var(--ease); }
.faq details[open] summary::after { rotate: 225deg; translate: 0 -30%; }
.faq details p { padding: 0 0 24px; max-width: 52ch; color: var(--ink-2); }
@media (max-width: 860px) { .faq .grid { grid-template-columns: 1fr; } }

/* Fuß */
.foot { background: var(--night); color: #a9b6b2; padding-block: 56px; font-size: .96rem; }
.foot .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.foot .brand { color: var(--white); margin-bottom: 14px; }
.foot h2 { font-size: .95rem; color: var(--white); margin-bottom: 12px; font-weight: 700; }
.foot li { margin-bottom: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--white); text-decoration: underline; }
@media (max-width: 700px) { .foot .wrap { grid-template-columns: 1fr; } }

/* Einblenden (nur mit JS) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-ticket { opacity: 1; transform: none; animation: none; }
  .walker { animation: none; offset-distance: 100%; }
  .js .rv { opacity: 1; transform: none; }
  .step { opacity: 1; }
}

/* ========== Verkaufsunterlage (betriebe/) ========== */
.deck-top { background: var(--teal); color: var(--white); position: sticky; top: 0; z-index: 40; }
.deck-top .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.deck-top .btn { min-height: 40px; padding: 0 18px; font-size: .92rem; margin-left: auto; }
.deck-top .back { opacity: .85; font-size: .95rem; text-decoration: none; }
@media (max-width: 560px) { .deck-top .back { display: none; } }
.sheet { padding-block: clamp(56px, 9vh, 110px); position: relative; }
.sheet + .sheet { border-top: 1px solid var(--line); }
.sheet.dark { background: var(--teal-900); color: var(--white); border: 0; }
.sheet.dark .prose, .sheet.dark .lead { color: rgba(255,255,255,.82); }
.sheet.alt { background: var(--white); }
.cover { background: var(--teal); color: var(--white); position: relative; overflow: clip; isolation: isolate; padding-block: clamp(64px, 14vh, 160px) clamp(56px, 10vh, 120px); }
.cover .hero-contours { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: rgba(255,255,255,.13); }
.cover .display { max-width: 14ch; }
.cover .lead { color: rgba(255,255,255,.88); margin-top: 26px; }
.cover .meta { margin-top: 44px; display: flex; gap: 22px; flex-wrap: wrap; font-weight: 650; color: rgba(255,255,255,.85); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: center; }
.two.top { align-items: start; }
.steps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); margin-top: 40px; counter-reset: s; }
.steps-row > div { position: relative; padding-top: 22px; }
.steps-row > div::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: radial-gradient(circle, var(--teal) 1.2px, transparent 1.6px) 0 0 / 14px 2px repeat-x; }
.steps-row b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 6px; }
.steps-row p { color: var(--ink-2); }
.dark .steps-row > div::before { background: radial-gradient(circle, var(--teal-300) 1.2px, transparent 1.6px) 0 0 / 14px 2px repeat-x; }
.dark .steps-row p { color: rgba(255,255,255,.8); }
.contact { display: grid; gap: 8px; font-size: 1.25rem; font-weight: 700; margin-top: 26px; }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.callouts { position: relative; width: min(100%, 360px); justify-self: center; }
.callouts .tag { position: absolute; background: var(--white); color: var(--ink); font-size: .82rem; font-weight: 700; padding: 6px 12px; border-radius: 99px; box-shadow: 0 6px 18px rgba(7,20,18,.22); white-space: nowrap; }
.callouts .tag::before { content: ''; position: absolute; top: 50%; width: 34px; height: 2px; background: var(--teal); }
.callouts .l { right: 100%; margin-right: 34px; } .callouts .l::before { left: 100%; }
.callouts .r { left: 100%; margin-left: 34px; } .callouts .r::before { right: 100%; }
@media (max-width: 1100px) { .callouts .tag { display: none; } }
@media (max-width: 860px) { .two, .steps-row { grid-template-columns: 1fr; } }

@media print {
  @page { size: A4; margin: 12mm; }
  html { scroll-behavior: auto; }
  body { background: #fff; font-size: 10.5pt; }
  .deck-top, .nav, .no-print { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cover, .sheet { break-inside: avoid; page-break-inside: avoid; padding-block: 12mm; }
  .cover { break-after: page; min-height: 250mm; display: grid; align-content: center; }
  .sheet { break-after: page; }
  .js .rv { opacity: 1; transform: none; }
  .display { font-size: 38pt; } .h2 { font-size: 24pt; }
  .phone { box-shadow: none; }
  a { text-decoration: none; }
}