/* eeziframes Betriebsbereich · Gestaltung. Tokens und gemeinsame Bausteine kommen aus gemeinsam.css (lädt davor).
   Seitenleiste ab 880 px, darunter Tableiste. Sie-Tonlage, dieselbe Werkzeug-Familie wie die App.
   Rollen der Schrift: 44 Hero · 30 Titel · 22 Zwischentitel · 17 Text · 15 Nebentext · 13 Label. */
:root { --bezel: #1d1d1f; --chat: #efeae2; --bub-out: #d9fdd3; --bub-in: #ffffff; --bub-fg: #1d1d1f; --bub-fg2: #6e6e73; --wa: #1faa59 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bezel: #3a3a3c; --chat: #0b141a; --bub-out: #144d37; --bub-in: #1f2c34; --bub-fg: #f2f1ed; --bub-fg2: #b9b8b2 } }
:root[data-theme="dark"] { --bezel: #3a3a3c; --chat: #0b141a; --bub-out: #144d37; --bub-in: #1f2c34; --bub-fg: #f2f1ed; --bub-fg2: #b9b8b2 }
html, body { height: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; padding-top: env(safe-area-inset-top, 0px) }
img { max-width: 100% }
[hidden] { display: none !important }
button, input, select, textarea { font-size: inherit }
a { color: var(--ink) }
.app { min-height: 100%; display: grid; grid-template-columns: 248px minmax(0, 1fr) }
.app.is-out { grid-template-columns: minmax(0, 1fr) }

/* ---------- Seitenleiste ---------- */
.side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 6px; padding: 20px 14px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-right: 1px solid var(--line) }
.logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; font-size: 22px; font-weight: 900; letter-spacing: -.03em; border: 0; background: none; color: var(--ink); text-align: left }
.logo small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transform: scale(.9); transform-origin: left center }
.nav { display: flex; flex-direction: column; gap: 2px }
.nav button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--r2); background: none; color: var(--ink2); font-size: 15px; font-weight: 600; text-align: left; width: 100%; transition: background var(--t2), color var(--t2) }
.nav button svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted) }
.nav button[aria-current="page"] { background: var(--surface2); color: var(--ink); font-weight: 700 } .nav button[aria-current="page"] svg { color: var(--ink) }
.nav .cnt { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums }
.side .me { margin-top: auto; padding: 10px 8px 10px 12px; border-radius: var(--r2); background: var(--surface2); display: flex; align-items: center; gap: 10px; font-size: 15px }
.side .me b { display: block; font-size: 15px } .side .me small { color: var(--muted); font-size: 13px }
.av { width: 38px; height: 38px; border-radius: var(--r2); display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; flex: 0 0 auto; font-size: 15px }
.me-t { min-width: 0; flex: 1 } .me-t b, .me-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.me .ibtn.out { width: 40px; height: 40px; flex: 0 0 auto; box-shadow: none; background: transparent; color: var(--muted); border-radius: var(--r1) }
@media (hover: hover) { .me .ibtn.out:hover { background: var(--surface3); color: var(--ink) } }
.tour-side { width: 100%; margin-top: 8px; gap: 8px; color: var(--ink2) }

/* ---------- Inhalt ---------- */
.main { min-width: 0; padding: 0 0 calc(90px + env(safe-area-inset-bottom, 0px)) }
.app.is-out .main { padding-bottom: 0 }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 20px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line); transition: box-shadow var(--t3) }
.top.scrolled { box-shadow: 0 8px 24px rgba(20, 20, 20, .06) }
.top h1, .top .top-h { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.top .back { display: inline-flex; min-height: 44px; border: 0; background: none; color: var(--ink); font-weight: 700; padding: 0 8px 0 2px; font-size: 15px; align-items: center; gap: 6px; flex: 0 0 auto; border-radius: var(--r1) }
.top .btn.small { min-height: 40px }
.ibtn { width: 44px; height: 44px; border: 0; border-radius: var(--r2); background: var(--surface); box-shadow: var(--ring); color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; position: relative }
.ibtn .dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--mo); box-shadow: 0 0 0 2px var(--surface) }
.lm { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto }
.logo .lm { width: 36px; height: 36px }
/* Umschalter Hauseigentümer / Fensterbauer (öffentliche Seiten): am Schreibtisch neben dem Logo, darunter als eigene Zeile */
.top .ansicht { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 13px }
.top .ansicht > button { padding: 0 16px }
@media (max-width: 879px) {
  .top.mit-ansicht { flex-wrap: wrap; row-gap: 6px }
  .top.mit-ansicht .ansicht { order: 9; flex: 1 0 100%; max-width: 560px }
  .app.is-out .story-stage { top: 122px }
}
.logo-s { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; padding: 4px 2px; font-size: 17px; font-weight: 900; letter-spacing: -.025em; color: var(--ink); flex: 0 0 auto; min-height: 44px }
@media (min-width: 880px) { .only-s { display: none !important } }
@media (max-width: 520px) { .hide-s { display: none !important } }
.only-xs { display: none } @media (max-width: 520px) { .only-xs { display: inline } }
.wrap { max-width: 1040px; margin: 0 auto; padding: 24px 20px; display: flex; flex-direction: column; gap: 24px }
.wrap.narrow { max-width: 680px }
.h { display: flex; flex-direction: column; gap: 6px }
.h h2 { margin: 0; font-size: clamp(26px, 3.4vw, 30px); line-height: 1.1; font-weight: 900; letter-spacing: -.03em; text-wrap: balance }
.h p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink2); max-width: 62ch; text-wrap: pretty }
.h.hrow { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap }
.h.hbild { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px } .h.hbild > div { display: flex; flex-direction: column; gap: 6px; min-width: 0 } .hbild-l { flex: 0 0 168px; width: 168px; height: 168px; border-radius: var(--r4); background: var(--surface); box-shadow: var(--ring); padding: 8px; box-sizing: border-box }
.hrow > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 340px }
.sec { display: flex; flex-direction: column; gap: 12px }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.sec-head h2, .sec-head h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em }
.sec-head .sub { margin: 0; color: var(--muted); font-size: 15px }
.sub { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45 }
.center { text-align: center }
.sel { -webkit-user-select: all; user-select: all }
.km-s { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45 }
.kt { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.5 }
.card { position: relative; background: var(--surface); border-radius: var(--r3); box-shadow: var(--ring); padding: 18px 20px }
.grid { display: grid; gap: 14px } .grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.row.between { justify-content: space-between }
.form > .row.between, .wrap > .row.between { align-items: center }
.linkbtn { border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; padding: 10px 2px; min-height: 44px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; text-decoration-thickness: 1.5px }
.linkbtn:hover { text-decoration-color: var(--ink) }
.chip.small { min-height: 36px; padding: 0 12px; font-size: 13px }
.scrollchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px }
.scrollchips::-webkit-scrollbar { display: none } .scrollchips .chip { flex: 0 0 auto }
.seg .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface3); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums }
.seg > button[aria-pressed="true"] .n { background: var(--paper); color: var(--ink) }
.f .seg, .f .chips { align-self: flex-start } .f .chips { margin-top: 2px }
.seg > button { min-width: 64px; padding: 0 14px }
/* Filter mit sehr verschieden langen Beschriftungen: Segmente in Inhaltsbreite, gleiche Höhe (auf 360 px gehen drei gleich breite nicht auf) */
.seg.fit > button { flex: 0 1 auto; padding: 0 12px }
.seg > button .n { margin-left: 2px }

/* ---------- Kennzahlen ---------- */
.stat { position: relative; padding: 16px 18px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring); display: flex; flex-direction: column; gap: 2px; --t: var(--ink); min-height: 104px }
.stat.tone-acc { --t: var(--accent) } .stat.tone-ok { --t: var(--ok) } .stat.tone-warn { --t: var(--warn) } .stat.tone-lead { --t: var(--mo) } .stat.tone-gold { --t: var(--warn) } .stat.tone-bad { --t: var(--bad) }
.stat small { font-size: 13px; font-weight: 700; color: var(--muted); padding-right: 44px } .stat b { font-size: clamp(26px, 3.4vw, 30px); line-height: 1.1; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink) } .stat span { font-size: 13px; color: var(--ink2) }
.stat .stat-ic { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: var(--r2); background: var(--surface2); color: var(--t); display: flex; align-items: center; justify-content: center }
.stat .stat-ic svg { width: 20px; height: 20px; flex: 0 0 auto }
.stat > span:not(.stat-ic) { position: relative }

/* ---------- Listen und Karten ---------- */
.list { display: flex; flex-direction: column; gap: 10px }
.item { position: relative; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring); border: 0; width: 100%; text-align: left; font: inherit; color: var(--ink); text-decoration: none; transition: transform var(--t2) var(--e-out), box-shadow var(--t2) }
button.item:active { transform: scale(.995) }
@media (hover: hover) { button.item:hover { box-shadow: var(--lift), var(--ring); transform: translateY(-1px) } }
.item .ic { width: 56px; height: 56px; border-radius: var(--r2); background: var(--surface2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-weight: 900; color: var(--ink2); font-size: 17px }
.item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.item .ti { font-size: 17px; font-weight: 800; letter-spacing: -.01em }
.item .di { font-size: 15px; color: var(--ink2) } .item .me { font-size: 13px; color: var(--muted) }
.item .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto }
.item .rt b { font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums }
.item.cur { box-shadow: inset 0 0 0 2px var(--ink) !important }
.item.dashed { background: transparent; box-shadow: none; border: 1.5px dashed var(--line2); color: var(--ink) }
.item.dashed > svg { color: var(--muted); flex: 0 0 auto }
.chev { width: 8px; height: 14px; color: var(--line2); flex: 0 0 auto }
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; font-size: 15px }
.kv > span:nth-child(odd) { color: var(--muted) } .kv > span:nth-child(even) { font-weight: 600 }
.empty { padding: 32px 20px; text-align: center; color: var(--muted); border-radius: var(--r3); border: 1.5px dashed var(--line2); font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1.45 }
.empty b { color: var(--ink); font-size: 17px } .empty span { max-width: 46ch } .empty .btn { margin-top: 8px }
.empty-l { width: 128px; height: 128px; margin: -8px auto 2px }
.banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring); font-size: 15px; line-height: 1.45 }
.banner > span { flex: 1 1 260px; min-width: 0 }
.banner.warn { background: var(--warn-soft); box-shadow: none } .banner.warn b { color: var(--warn) }
.banner.vonpdf { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); align-items: center } .banner.vonpdf > .row { gap: 8px; flex: 0 0 auto }
.note { padding: 14px 16px; border-radius: var(--r3); background: var(--surface2); font-size: 15px; line-height: 1.5 } .note.warn { background: var(--warn-soft); color: var(--warn) } .note.ok { background: var(--ok-soft); color: var(--ok) } .note.acc { background: var(--surface2); color: var(--ink) }
.col-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0 }

/* ---------- Formulare ---------- */
.form { display: flex; flex-direction: column; gap: 14px }
.f { display: flex; flex-direction: column; gap: 6px } .f label { font-size: 13px; font-weight: 700; color: var(--ink2) }
.f input, .f select, .f textarea, .sharecard textarea { min-height: 48px; border-radius: var(--r2); border: 1.5px solid var(--line2); background: var(--surface); color: var(--ink); padding: 10px 14px; font-size: 17px; transition: border-color var(--t2), box-shadow var(--t2) }
.f input:focus, .f select:focus, .f textarea:focus, .sharecard textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface2) }
.f textarea { min-height: 90px; resize: vertical }
.f small { color: var(--muted); font-size: 13px }
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.form .fgh { margin: 4px 0 -6px; padding-top: 12px; border-top: 1px solid var(--line) }
.form .fgh:first-child { border-top: 0; padding-top: 0; margin-top: 0 }
.fgh span { margin-left: 6px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--muted) }
.stepbar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden } .stepbar > span { display: block; height: 100%; border-radius: 2px; background: var(--ink); transition: width .4s var(--e-out) }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r3); border: 2px solid var(--line); background: var(--surface); text-align: left; font: inherit; color: var(--ink); width: 100%; transition: border-color var(--t2), background var(--t2) }
.opt[aria-pressed="true"] { border-color: var(--ink) }
.opt b { display: block; font-size: 17px } .opt small { color: var(--muted); font-size: 13px; line-height: 1.35 }
.opt em { display: block; margin-top: 7px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--ink) }
.sw-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); min-height: 60px } .sw-row:last-child { border-bottom: 0 }
.sw-row .t { flex: 1; min-width: 0 } .sw-row .t b { font-size: 15px; font-weight: 600 } .sw-row .t small { display: block; color: var(--muted); font-size: 13px }
.err { color: var(--bad); font-size: 13px; font-weight: 700 }
.f small.err { color: var(--bad); font-weight: 700 }
.f.has-err label { color: var(--bad) }
.f.has-err input, .f.has-err select, .f.has-err textarea, input.bad, textarea.bad { border-color: var(--bad); background: var(--bad-soft) }
.f.has-err .chip { border-color: var(--bad) }
.err-sum { margin: 0; padding: 12px 16px; border-radius: var(--r2); background: var(--bad-soft); color: var(--bad); font-weight: 700; font-size: 15px }
.form.shake { animation: shake .3s var(--e-io) }
.agree { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r3); background: var(--surface2); font-size: 15px; line-height: 1.5; cursor: pointer }
.agree input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--ink) }
.agree.has-err { background: var(--bad-soft); box-shadow: inset 0 0 0 2px var(--bad) }
.agree + .err { margin-top: -6px; padding-left: 4px }
.fillbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r2); background: var(--surface2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700 }
.formnav { flex-wrap: nowrap }
.colors { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-height: 46px }
.colors .col { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform var(--t2), box-shadow var(--t2); position: relative }
.colors .col::before { content: ''; position: absolute; inset: -4px }
.colors .col[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink) }
.preview { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r3); background: var(--surface2) }
.pv-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r2); background: var(--surface); box-shadow: var(--ring) }
.pv-card b { display: block; font-size: 15px } .pv-card small { display: block; font-size: 13px; font-weight: 700; color: var(--muted) }
.pv-t { margin: 6px 0 0; font-size: 22px; font-weight: 900; letter-spacing: -.02em; text-align: center }
.pv-s { display: block; text-align: center; color: var(--ink2); font-size: 13px; line-height: 1.45 }
.nl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 24px; align-items: start }
.nl-grid > div:first-child { display: flex; flex-direction: column; gap: 14px } .nl-grid .h { margin: 0 }
.pv { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center }
.pv .phone { text-align: left }

/* ---------- Blatt (Modal), Meldung ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(20, 20, 20, .42); border: 0; animation: fx-fade var(--t2) var(--e-out) both }
.sheet { position: fixed; z-index: 51; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); max-height: 88vh; overflow: auto; background: var(--surface); border-radius: var(--r4) var(--r4) 0 0; padding: 12px 22px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--float); display: flex; flex-direction: column; gap: 14px; animation: up var(--t3) var(--e-out) }
@keyframes up { from { transform: translate(-50%, 28px); opacity: 0 } to { transform: translateX(-50%); opacity: 1 } }
@media (min-width: 880px) {
  .sheet { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: var(--r4); max-height: 86vh; padding: 22px 24px 24px; animation: up-mid var(--t3) var(--e-out) }
  .sheet .grip { display: none }
  @keyframes up-mid { from { transform: translate(-50%, calc(-50% + 12px)); opacity: 0 } to { transform: translate(-50%, -50%); opacity: 1 } }
}
.sheet .grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto }
.sheet h3 { margin: 0; padding-right: 48px; font-size: 22px; font-weight: 900; letter-spacing: -.02em }
.sheet .list .item { box-shadow: inset 0 0 0 1.5px var(--line) }
.xclose { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: var(--r2); border: 0; background: var(--surface2); color: var(--ink2); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0 0 2px }
.toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 70; width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--r2); background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; box-shadow: var(--lift); opacity: 0; transform: translate(-50%, 12px); transition: opacity var(--t2), transform var(--t3) var(--e-out); pointer-events: none }
.toast.show { opacity: 1; transform: translate(-50%, 0) }
.app.is-out ~ .toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)) }
@media (min-width: 880px) { .app:not(.is-out) ~ .toast { left: calc(50% + 124px); bottom: 28px } }
.scr { animation: none } .scr.anim { animation: fade var(--t3) var(--e-out) both }
@keyframes fade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.pop { animation: fx-einrasten var(--t2) var(--e-out) }
.switch.just > span { transition-duration: var(--t2) }
.ibtn.ring { animation: bell .9s cubic-bezier(.3, .7, .3, 1) } @keyframes bell { 0%, 100% { transform: rotate(0) } 15% { transform: rotate(14deg) } 30% { transform: rotate(-12deg) } 45% { transform: rotate(9deg) } 60% { transform: rotate(-6deg) } 75% { transform: rotate(3deg) } }
/* Listen und Raster erscheinen gestaffelt, nur beim Aufbau eines Bildschirms */
.scr.anim .list > *, .scr.anim .grid > *, .scr.anim .form > * { animation: itemin var(--t3) var(--e-out) both; animation-delay: calc(var(--i, 0) * 40ms) }
@keyframes itemin { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ---------- Tableiste unten (Telefon) ---------- */
.tabs { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-top: 1px solid var(--line) }
.tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; padding: 6px 2px; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 700; position: relative; border-radius: var(--r2) } .tabs button svg { width: 24px; height: 24px } .tabs button[aria-current="page"] { color: var(--ink) }
.tabs .cnt { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--paper); font-size: 13px; display: flex; align-items: center; justify-content: center; transform: scale(.85) }

/* ---------- Startseite ---------- */
.hero { position: relative; padding: clamp(28px, 6vw, 56px) 0 10px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center }
.hero h1, .hero h2 { margin: 0; font-size: clamp(36px, 5vw, 44px); line-height: 1; font-weight: 900; letter-spacing: -.04em }
.hero p { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink2); max-width: 54ch }
.hero .cta { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap }
.hero p.hint { margin: 14px 0 0; font-size: 15px; color: var(--muted) }
.hero h1 .w, .hero h2 .w { display: inline-block; opacity: 0; transform: translateY(8px); animation: wordin var(--t3) var(--e-out) forwards; animation-delay: calc(var(--i) * 50ms + 50ms) }
@keyframes wordin { to { opacity: 1; transform: none } }
.hero .lead { opacity: 0; animation: wordin var(--t3) .3s var(--e-out) forwards } .hero .cta { opacity: 0; animation: wordin var(--t3) .4s var(--e-out) forwards } .hero p.hint { opacity: 0; animation: wordin var(--t3) .5s var(--e-out) forwards }
.hero-visual { display: flex; justify-content: center }
.hero.b2c { padding-bottom: 18px }
.hero.b2b { padding-top: clamp(28px, 6vw, 56px) }
.b2c-visual { display: flex; justify-content: center }
.b2c-card { width: min(100%, 380px); padding: 20px 20px 18px; border-radius: var(--r4); background: var(--surface); box-shadow: var(--ring); display: flex; flex-direction: column; gap: 14px }
.b2c-win { position: relative; display: flex; justify-content: center; padding: 26px 52px 32px; border-radius: var(--r3); background: var(--surface2); perspective: 900px }
.b2c-win svg { transform: rotateY(calc((0.5 - var(--sp, 0.5)) * 14deg)) translateY(calc((var(--sp, 0.5) - 0.5) * -14px)); transform-origin: 50% 50%; will-change: transform }
.b2c-win svg { width: 220px; height: 220px }
.b2c-win .dim { position: absolute; padding: 3px 9px; border-radius: var(--r1); font-size: 13px; font-weight: 800; color: var(--on-accent); white-space: nowrap; opacity: 0; animation: dimin var(--t3) var(--e-out) forwards }
.b2c-win .dim-h { left: 4px; top: 46%; background: var(--mo); animation-delay: .9s } .b2c-win .dim-w { left: 50%; bottom: 6px; transform: translateX(-50%); background: var(--mo); animation-delay: 1.2s }
.b2c-win .dim-eh { right: 4px; top: 56%; background: var(--el); animation-delay: 1.5s } .b2c-win .dim-ew { left: 50%; top: 4px; transform: translateX(-50%); background: var(--el); animation-delay: 1.8s }
@keyframes dimin { from { opacity: 0; translate: 0 8px } to { opacity: 1; translate: 0 0 } }
.b2c-chips { display: flex; flex-wrap: wrap; gap: 6px } .b2c-chips .badge { opacity: 0; animation: wordin var(--t3) var(--e-out) forwards } .b2c-chips .badge:nth-child(1) { animation-delay: 2.1s } .b2c-chips .badge:nth-child(2) { animation-delay: 2.25s } .b2c-chips .badge:nth-child(3) { animation-delay: 2.4s } .b2c-chips .badge:nth-child(4) { animation-delay: 2.7s }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.strip .st { padding: 18px 20px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring); display: flex; flex-direction: column; gap: 2px }
.strip b { font-size: clamp(26px, 3.4vw, 30px); font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1 } .strip b small { font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: 0 } .strip b span { font-size: inherit; color: inherit } .strip span { font-size: 15px; color: var(--ink2) }
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.cap { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring) }
.ci { width: 40px; height: 40px; border-radius: var(--r2); background: var(--surface2); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto }
.cap .ci { margin-bottom: 4px }
.cap b { font-size: 15px; letter-spacing: -.01em } .cap > span:last-child { font-size: 13px; color: var(--ink2); line-height: 1.45 }
.phone { position: relative; width: min(100%, 320px); margin: 0 auto; padding: 9px; border-radius: 38px; background: var(--bezel); box-shadow: var(--lift) }
.phone.small { width: min(100%, 300px) }
.hero-ph { width: min(100%, 330px) }
.ph-top { display: flex; gap: 10px; align-items: center; padding: 14px 14px 10px; background: var(--surface); border-radius: 30px 30px 0 0; border-bottom: 1px solid var(--line) }
.ph-av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; flex: 0 0 auto }
.ph-top b { display: block; font-size: 15px; line-height: 1.2 } .ph-top small { font-size: 13px; color: var(--muted) }
.ph-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 18px; background: var(--chat); border-radius: 0 0 30px 30px; min-height: 330px }
.phone.small .ph-body { min-height: 0 }
.bub { max-width: 88%; padding: 8px 10px 6px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: var(--bub-fg); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); overflow-wrap: anywhere }
.bub.out { align-self: flex-end; background: var(--bub-out); border-top-right-radius: 4px }
.bub.in { align-self: flex-start; background: var(--bub-in); border-top-left-radius: 4px }
.bub i { display: block; text-align: right; font-style: normal; font-size: 13px; color: var(--bub-fg2); margin-top: 3px; transform: scale(.85); transform-origin: right }
.lp { display: flex; flex-direction: column; gap: 1px; margin: 7px 0 3px; padding: 8px 10px; border-radius: 9px; background: rgba(20, 20, 20, .07); border-left: 3px solid var(--ink) }
.lp b { font-size: 13px; line-height: 1.3 } .lp small { font-size: 13px; color: var(--bub-fg2) }
.ph-note { display: flex; gap: 11px; align-items: center; margin-top: auto; padding: 11px 13px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--lift) }
.ph-note b { display: block; font-size: 13px } .ph-note small { font-size: 13px; color: var(--muted) }
.ph-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: 0 0 auto }
.hero-ph .b1, .hero-ph .b2, .hero-ph .b3 { opacity: 0; transform: translateY(10px) }
.hero.in .hero-ph .b1, .scr:not(.anim) .hero:not(.rv) .hero-ph .b1 { animation: bubin var(--t3) .6s var(--e-out) forwards } .hero.in .hero-ph .b2, .scr:not(.anim) .hero:not(.rv) .hero-ph .b2 { animation: bubin var(--t3) 1.6s var(--e-out) forwards } .hero.in .hero-ph .b3, .scr:not(.anim) .hero:not(.rv) .hero-ph .b3 { animation: bubin var(--t3) 2.6s var(--e-out) forwards }
@keyframes bubin { to { opacity: 1; transform: none } }
.bub.show { opacity: 1; transform: none }
/* So läuft es: Schritte links, klebende Bühne rechts */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start }
.story-stage { position: sticky; top: 84px; height: 440px; border-radius: var(--r4); background: var(--surface); box-shadow: var(--ring); overflow: hidden }
.story-stage .sc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 52px 24px 24px; opacity: 0; transform: translateY(16px); transition: opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out); pointer-events: none }
.story-stage[data-step="0"] .sc-proj, .story-stage[data-step="1"] .sc-msg, .story-stage[data-step="2"] .sc-mess, .story-stage[data-step="3"] .sc-in { opacity: 1; transform: none; pointer-events: auto }
.story-stage .cap { font-size: 15px; font-weight: 700; color: var(--ink2); text-align: center; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0 }
.story-stage .pill { position: absolute; top: 16px; left: 16px; min-height: 28px; padding: 4px 10px; border-radius: var(--r1); background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase }
.story-steps { display: flex; flex-direction: column; gap: 10vh; padding: 10vh 0 20vh }
.story-step { padding: 22px 24px; border-radius: var(--r3); border: 2px solid transparent; background: var(--surface); box-shadow: var(--ring); opacity: .5; transition: opacity var(--t3), border-color var(--t3) }
.story-step.on { opacity: 1; border-color: var(--ink) }
.story-step .n { width: 32px; height: 32px; border-radius: var(--r1); background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-weight: 900; margin-bottom: 10px; font-variant-numeric: tabular-nums }
.story-step h3 { margin: 0 0 6px; font-size: 22px; font-weight: 900; letter-spacing: -.02em } .story-step p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.5 }
.form-mini { width: min(100%, 340px); padding: 16px 18px; border-radius: var(--r3); background: var(--paper); box-shadow: var(--ring); display: flex; flex-direction: column; gap: 9px; text-align: left }
.fm { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line2) }
.fm small { font-size: 13px; font-weight: 700; color: var(--muted); transform: scale(.9); transform-origin: left }
.fm .ty { display: inline-block; align-self: flex-start; font-size: 15px; clip-path: inset(0 100% 0 0) }
.story-stage[data-step="0"] .fm .ty { animation: typing .9s steps(var(--n, 12)) forwards; animation-delay: var(--d, .3s) }
@keyframes typing { to { clip-path: inset(0 0 0 0) } }
.fm-chips { display: flex; gap: 6px; flex-wrap: wrap } .fm-chips .badge { opacity: 0 }
.story-stage[data-step="0"] .fm-chips .badge { animation: wordin var(--t3) forwards } .story-stage[data-step="0"] .fm-chips .badge:nth-child(1) { animation-delay: 1.9s } .story-stage[data-step="0"] .fm-chips .badge:nth-child(2) { animation-delay: 2.1s } .story-stage[data-step="0"] .fm-chips .badge:nth-child(3) { animation-delay: 2.3s }
.fm-btn { align-self: flex-start; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 13px; opacity: 0 }
.story-stage[data-step="0"] .fm-btn { animation: wordin var(--t3) 2.7s both }
.sc-msg .phone.small { width: min(100%, 290px) } .sc-msg .bub { opacity: 0 }
.story-stage[data-step="1"] .sc-msg .bub { animation: bubin .45s .3s var(--e-out) forwards }
.sc-mess svg { width: min(100%, 290px); height: auto; overflow: visible }
.sc-mess .dim { stroke-dasharray: 600; stroke-dashoffset: 600 } .story-stage[data-step="2"] .sc-mess .dim { animation: dimdraw 1.1s .3s var(--e-out) forwards } .story-stage[data-step="2"] .sc-mess .dim.h { animation-delay: .9s }
@keyframes dimdraw { to { stroke-dashoffset: 0 } }
.sc-mess .lab { opacity: 0 } .story-stage[data-step="2"] .sc-mess .lab { animation: wordin var(--t3) 1.2s forwards } .story-stage[data-step="2"] .sc-mess .lab.h { animation-delay: 1.8s }
.in-mini { width: min(100%, 360px); padding: 16px 18px; border-radius: var(--r3); background: var(--ok-soft); display: flex; flex-direction: column; gap: 8px; text-align: left; position: relative }
.in-mini .unlock { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 800 } .in-mini .unlock svg { width: 22px; height: 22px }
.in-mini .ring { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 3px solid var(--ok); opacity: 0; pointer-events: none }
.story-stage[data-step="3"] .in-mini .ring { animation: okring 1s .2s ease-out } @keyframes okring { 0% { opacity: .6; transform: scale(1) } 100% { opacity: 0; transform: scale(12) } }
.in-row { display: flex; gap: 10px; align-items: center; padding: 7px 9px; border-radius: var(--r2); background: var(--surface); opacity: 0 }
.in-row b { display: block; font-size: 13px } .in-row small { display: block; font-size: 13px; color: var(--muted) } .in-row svg { flex: 0 0 auto }
.story-stage[data-step="3"] .in-row { animation: wordin var(--t3) forwards } .story-stage[data-step="3"] .in-row:nth-of-type(1) { animation-delay: .5s } .story-stage[data-step="3"] .in-row:nth-of-type(2) { animation-delay: .75s }
.mini .mt, .in-mini .mt { margin: 0; font-size: 17px; font-weight: 900; letter-spacing: -.015em }
.mini .ms { margin: 0; font-size: 15px; color: var(--ink2); line-height: 1.5 } .mini .mf, .in-mini .mf { margin: 0; font-size: 13px; color: var(--muted) }
/* Beispiel-Aufmaß, Vertrauen, Rechner, Eigentümer */
.sample { display: flex; flex-direction: column; gap: 10px }
.sample-h { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-bottom: 2px }
.sample-h b { font-size: 17px; letter-spacing: -.01em }
.trust .tcard { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring) }
.tcard .ci { margin-bottom: 4px } .tcard b { font-size: 17px; letter-spacing: -.01em } .tcard p { margin: 0; font-size: 15px; color: var(--ink2); line-height: 1.5 }
.roi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 26px; padding: clamp(20px, 3.5vw, 30px); align-items: center }
.roi h3 { margin: 6px 0 8px; font-size: clamp(26px, 3.4vw, 30px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1 }
.roi-in { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.roi-r { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink2) }
.roi-r > span { display: flex; justify-content: space-between; gap: 12px } .roi-r b { color: var(--ink); font-variant-numeric: tabular-nums } .roi-r input { width: 100%; accent-color: var(--ink); margin: 0 }
.roi-out { display: grid; gap: 10px; min-width: 0 }
.ro { padding: 14px 16px; border-radius: var(--r3); background: var(--surface2); display: flex; flex-direction: column; gap: 2px }
.ro small { font-size: 13px; font-weight: 700; color: var(--muted) } .ro b { font-size: 30px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15 } .ro span { font-size: 13px; color: var(--ink2) }
.ro.hi { background: var(--ok-soft) } .ro.hi b { color: var(--ok) }
.roi-note { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45 }
.owner { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 22px 24px; border-radius: var(--r4); background: var(--ink); color: var(--paper) }
.owner h2, .owner h3 { margin: 6px 0 8px; font-size: clamp(26px, 3.4vw, 30px); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance }
.owner > div:first-child { flex: 1 1 420px; min-width: 0 } .owner p:not(.eyebrow) { margin: 0; color: rgba(255, 255, 255, .78); max-width: 62ch } .owner .eyebrow { color: rgba(255, 255, 255, .6) }
.owner .btn.primary { background: var(--paper); color: var(--ink) }
.owner.wechsel { background: var(--surface); color: var(--ink); box-shadow: var(--ring) }
.owner.wechsel p:not(.eyebrow) { color: var(--ink2) } .owner.wechsel .eyebrow { color: var(--muted) }
.owner.wechsel .btn.primary { background: var(--ink); color: var(--paper) }
a.tcard { color: var(--ink); text-decoration: none; transition: box-shadow var(--t2) var(--e-out), transform var(--t2) var(--e-out) }
@media (hover: hover) { a.tcard:hover { box-shadow: var(--lift), var(--ring); transform: translateY(-1px) } } .owner .btn.ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4) }
.kcost { display: flex; gap: 14px; align-items: flex-start } .kcost b { display: block; font-size: 17px } .kcost p { margin: 4px 0 0; color: var(--ink2); font-size: 15px; line-height: 1.5 }
.faq { display: flex; flex-direction: column; gap: 8px }
.fq { border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring) }
.fq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 16px; font-weight: 700; cursor: pointer; min-height: 52px }
.fq summary::-webkit-details-marker, .posc summary::-webkit-details-marker { display: none }
.fq p { margin: 0; padding: 0 16px 16px; color: var(--ink2); font-size: 15px; line-height: 1.55 }
.price { padding: 20px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring); display: flex; flex-direction: column; gap: 8px } .price.hi { box-shadow: inset 0 0 0 2px var(--ink) }
.price .p { font-size: clamp(26px, 3.4vw, 30px); font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums } .price .p small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0 }
.price ul { margin: 0; padding-left: 18px; font-size: 15px; color: var(--ink2); display: flex; flex-direction: column; gap: 4px }
.pricegrid { align-items: stretch } .pricegrid .price .btn { margin-top: auto; align-self: flex-start } .pricegrid .price ul { margin-bottom: 6px }
.foot { margin-top: 28px; border-top: 1px solid var(--line); background: var(--surface) }
.foot .wrap { gap: 10px; padding-top: 22px; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)) }
.lm-foot { display: inline-flex; gap: 8px; align-items: center; font-weight: 900; letter-spacing: -.02em }
.foot-links { gap: 2px 16px }
.foot-links button, .foot .foot-links a { border: 0; background: none; padding: 10px 0; color: var(--ink2); font-size: 15px; font-weight: 600; text-decoration: none; min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center }
.foot-links button:hover, .foot .foot-links a:hover { color: var(--ink) }
/* „Vertrag widerrufen“ hervorgehoben (Widerrufsfunktion, § 356a BGB) */
.foot .foot-links a.foot-widerruf { padding: 0 16px; border-radius: 999px; color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--ink) }
.foot p { margin: 0; font-size: 13px; color: var(--muted); max-width: 72ch }

/* ---------- Für Fensterbauer: Projekte, Aufmaß ---------- */
.pcard { --t: var(--muted); box-shadow: inset 3px 0 0 var(--t), var(--ring); padding-left: 18px }
.pcard.st-eingegangen { --t: var(--ok) } .pcard.st-locked { --t: var(--warn) } .pcard.st-arbeit { --t: var(--warn) } .pcard.st-gesendet, .pcard.st-geoeffnet { --t: var(--accent) } .pcard.st-abgelaufen, .pcard.st-deaktiviert { --t: var(--line2); opacity: .72 }
.pcard.is-new { box-shadow: inset 3px 0 0 var(--t), 0 0 0 1.5px var(--ok) }
.pcard .neu { position: absolute; top: -9px; right: 16px; padding: 3px 9px; border-radius: var(--r1); background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.2; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; transform: scale(.9); transform-origin: right top }
.pvis { width: 64px; height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; position: relative }
.pcard .lst { gap: 8px; margin-top: 4px; align-items: center; flex-wrap: wrap } .pcard .lst .me { font-size: 13px }
.pcard .rt small { font-size: 13px; color: var(--muted) }
.litem .lst { gap: 8px; margin-top: 3px; align-items: center }
.lst small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.litem.is-new { box-shadow: inset 3px 0 0 var(--ok), var(--ring) }
.mprog { width: 72px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: inline-block }
.mprog span { display: block; height: 100%; background: var(--warn); border-radius: 3px; transition: width .4s var(--e-out) }
.rt-m { display: none; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap } .rt-m b { font-size: 15px; font-weight: 800 }
/* Gefächerter Fensterstapel */
.winstack { position: relative; width: 64px; height: 60px; display: block }
.winstack i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 10px; background: var(--surface); box-shadow: var(--ring); display: flex; align-items: center; justify-content: center; transform: translate(calc((var(--k) - 1) * 9px), calc((1 - var(--k)) * 2px)) rotate(calc((var(--k) - 1) * 8deg)); z-index: calc(3 - var(--k)); transition: transform var(--t3) var(--e-out) }
.winstack.n1 i { transform: none } .winstack.n2 i { transform: translate(calc(var(--k) * 10px - 5px), 0) rotate(calc(var(--k) * 8deg - 4deg)) }
.winstack svg { width: 34px; height: 34px }
.winstack em { position: absolute; right: -2px; bottom: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 800 13px/20px var(--font); font-style: normal; text-align: center; z-index: 4; transform: scale(.9) }
@media (hover: hover) { .pcard:hover .winstack i { transform: translate(calc((var(--k) - 1) * 14px), calc((1 - var(--k)) * 3px)) rotate(calc((var(--k) - 1) * 11deg)) } .pcard:hover .winstack.n1 i { transform: scale(1.04) } .pcard:hover .winstack.n2 i { transform: translate(calc(var(--k) * 14px - 7px), 0) rotate(calc(var(--k) * 10deg - 5deg)) } }
/* Fortschrittsring */
.pring { position: relative; width: 56px; height: 56px; display: block } .pring svg { width: 56px; height: 56px; transform: rotate(-90deg) }
.pring circle { fill: none; stroke: var(--line); stroke-width: 4.5 } .pring circle.val { stroke: var(--warn); stroke-linecap: round; transition: stroke-dashoffset .6s var(--e-out) }
.pring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; letter-spacing: -.02em } .pring b small { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 3px }
/* Zustandskachel ohne Fenster: angelegt, gesendet, geöffnet, abgelaufen */
.pini { width: 52px; height: 52px; border-radius: var(--r2); background: var(--surface2); color: var(--t); display: flex; align-items: center; justify-content: center; position: relative }
.pini.erstellt { background: none; box-shadow: inset 0 0 0 2px var(--line2); color: var(--muted) }
.pini .live { position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 2px var(--surface) }
.pcard.st-geoeffnet .pini .live { background: var(--warn) }
/* Schrittpunkte */
.pstep { display: inline-flex; align-items: center; flex: 0 0 auto }
.pstep i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); position: relative; display: block }
.pstep i + i { margin-left: 14px } .pstep i + i::before { content: ""; position: absolute; right: 100%; top: 4px; width: 14px; height: 2px; background: var(--line2) }
.pstep i.done { background: var(--ok) } .pstep i.done + i::before, .pstep i.now::before { background: var(--ok) }
.pstep i.now { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft) }
.pcard.st-gesendet .pstep i.now, .pcard.st-geoeffnet .pstep i.now { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.pstep.dead i, .pstep.dead i + i::before { background: var(--line) }
.kstep i.now { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
/* Projektseite */
.hero-link { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; padding: 24px }
.hl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100% }
.hl-steps > div { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: var(--r3); background: var(--surface2) }
.hl-steps .n { width: 32px; height: 32px; border-radius: var(--r1); background: var(--ink); color: var(--paper); font-weight: 900; display: flex; align-items: center; justify-content: center; margin-bottom: 8px }
.hl-steps b { font-size: 15px } .hl-steps small { color: var(--muted); font-size: 13px }
.sharecard { display: flex; flex-direction: column; gap: 14px }
.sharecard textarea { min-height: 96px; font-size: 15px; line-height: 1.5 }
.sharecard.nbcard { box-shadow: inset 0 0 0 1.5px var(--warn), var(--ring) } .sharecard.nbcard > .row .eyebrow { color: var(--warn) } .nbhint { margin: -4px 0 2px; line-height: 1.5 }
.linkbox { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; border-radius: var(--r2); background: var(--surface2); min-width: 0 }
.linkbox code { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink2) }
.share { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.sbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 78px; padding: 10px 6px; border-radius: var(--r3); border: 0; background: var(--surface2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; text-align: center; transition: transform var(--t1), filter var(--t2) }
.sbtn:active { transform: scale(.97) }
.sbtn svg { width: 26px; height: 26px }
.sbtn.wa svg { color: var(--wa) }
@media (hover: hover) { .sbtn:hover { background: var(--surface3) } }
.created { display: flex; gap: 14px; align-items: center; background: var(--ok-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 35%, transparent) }
.burst-ok { width: 56px; height: 56px; flex: 0 0 auto; margin: -4px 0 -4px -4px } .burst-ok .lottie-still { display: flex; width: 48px; height: 48px; margin: 4px; border-radius: 50%; background: var(--ok); color: var(--on-accent); align-items: center; justify-content: center }
.burst-ok .lottie-still svg { width: 26px; height: 26px } .burst-ok .lottie-still svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: fx-haken .5s var(--e-out) .2s forwards }
.created b { display: block; font-size: 17px } .created div span { display: block; color: var(--ink2); font-size: 15px }
.okcard { background: var(--ok-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 35%, transparent); display: flex; flex-direction: column; gap: 12px }
.okcard .eyebrow { color: var(--ok) }
.card.eigen { display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 1.5px var(--line2) } .card.eigen > b { font-size: 17px } .card.eigen .kt { margin: 0 }
.amhead .row { margin-top: 12px }
.amhead .amnote { font-style: italic; color: var(--ink) }
/* Mit dem Kunden zu klären: über dem Aufmaß, Pflichtthemen fett; Status als Wort, nicht als Fläche */
.klaer { margin-bottom: 12px; box-shadow: inset 3px 0 0 var(--warn), var(--ring) }
.klaer .eyebrow { color: var(--warn); margin: 0 0 10px }
.klaer .kv > span:nth-child(even) { font-weight: 500 } .klaer .kv > span.pflicht { font-weight: 700 }
.amacts .btn { flex: 1 1 auto; justify-content: center } .poshead { margin-top: 4px } .poshead .eyebrow { margin: 0 }
.eyebrow.pos-h { margin-top: 16px; margin-bottom: 2px }
/* Position im Aufmaß: aufklappbar */
.posc { border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring) }
.sample .posc { box-shadow: inset 0 0 0 1.5px var(--line) }
.poslist { display: flex; flex-direction: column; gap: 10px }
.posc summary { list-style: none; display: flex; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; border-radius: var(--r3); min-height: 60px }
.pic { width: 58px; height: 58px; border-radius: var(--r2); background: var(--surface2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto }
.pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .pt b { font-size: 15px; letter-spacing: -.01em } .pt span { font-size: 15px; color: var(--ink2); font-variant-numeric: tabular-nums } .pt small { font-size: 13px; color: var(--muted) }
.pchev { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--t2); margin: 0 6px 4px 0; flex: 0 0 auto }
details[open] > summary .pchev { transform: rotate(-135deg); margin: 4px 6px 0 0 }
.pbody { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; animation: fade var(--t2) var(--e-out) }
.best { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: var(--r2); background: var(--surface2); border-left: 3px solid var(--ink) }
.best span { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) } .best b { font-size: 17px; font-variant-numeric: tabular-nums } .best small { font-size: 13px; color: var(--muted) }
.posc .kv { grid-template-columns: 130px minmax(0, 1fr); font-size: 15px; gap: 6px 12px }
/* Fotos des Kunden je Position: zwei gleich große Felder, Bild eingepasst, Beschriftung unten; laden erst beim Aufklappen */
.pos-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.pfoto { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: var(--r2); background: var(--surface2); overflow: hidden; color: var(--muted); font: inherit; cursor: zoom-in }
.pfoto img { width: 100%; height: 100%; object-fit: contain; display: block }
.pfoto img:not([src]) { visibility: hidden }
.pfoto .pf-tag { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: var(--ring) }
.pfoto.laedt::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line2); border-top-color: var(--ink); animation: spin 0.8s linear infinite }
.pfoto.fehlt { cursor: default; flex-direction: column; gap: 4px }
.pfoto.fehlt small { font-size: 13px; color: var(--muted) }
.pfoto.fehlt .pf-tag { position: static; box-shadow: none; background: none; padding: 0; color: var(--ink2) }
.pos-fotos-weg { margin: 0 }
.foto-gross { display: flex; justify-content: center; border-radius: var(--r2); background: var(--surface2); overflow: hidden; min-height: 200px }
.foto-gross img { max-width: 100%; max-height: 70vh; object-fit: contain; display: block }
.foto-gross.laedt { align-items: center }
@media (prefers-reduced-motion: reduce) { .pfoto.laedt::after { animation: none } }
/* Stand des Projekts: fünf Stufen als Chips, gewählt in Tinte */
.pipe { display: flex; flex-wrap: wrap; gap: 8px }
.pipe > button { min-height: var(--h1); padding: 0 16px; border-radius: var(--r2); border: 1.5px solid var(--line2); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: background var(--t2), border-color var(--t2), color var(--t2) }
.pipe > button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper) }
.pipe > button:active { transform: scale(.98) }
@media (hover: hover) { .pipe > button:not([aria-pressed="true"]):hover { border-color: var(--ink) } }
/* Verlauf als Leiste */
.tlh { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 }
.tlh li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0 }
.tlh li::before { content: ''; position: absolute; top: 8px; left: 50%; right: -50%; height: 2px; background: var(--line) }
.tlh li:last-child::before { display: none } .tlh li.done::before { background: var(--ok) }
.tlh .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line2); background: var(--surface); position: relative; z-index: 1 }
.tlh li.done .dot { background: var(--ok); border-color: var(--ok) } .tlh li.now .dot { border-color: var(--warn); background: var(--warn-soft); box-shadow: 0 0 0 4px var(--warn-soft) } .tlh li.fresh .dot { animation: fx-einrasten var(--t2) var(--e-out) }
.tlh small { display: block; font-size: 13px; line-height: 1.2; color: var(--muted); max-width: 100% } .tlh li.done small, .tlh li.now small { color: var(--ink); font-weight: 700 }
.tlh small.ts { font-weight: 500; color: var(--muted) } .tlh li:not(.done):not(.now) small.ts { display: none }
.tl-now { margin: 12px 0 0; text-align: center } .tl-now b { color: var(--ink) } .tlcard { padding: 16px 12px 14px }
/* Einklappbare Karte */
details.fold { padding: 0 } details.fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; font-weight: 800; font-size: 15px; min-height: 52px }
details.fold > summary::-webkit-details-marker { display: none } details.fold > summary > span { min-width: 0 } details.fold > summary small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
details.fold > summary::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--t2) }
details.fold[open] > summary::after { transform: rotate(-135deg) } details.fold > .fold-body { padding: 0 16px 16px }
/* Gesperrtes Aufmaß, Zahlungsart, Abrechnung */
.lockcard { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; box-shadow: inset 0 0 0 1.5px var(--warn), var(--ring) }
.lockcard .lk-ic { width: 52px; height: 52px; border-radius: var(--r2); background: var(--warn-soft); color: var(--warn); display: flex; align-items: center; justify-content: center }
.lockcard h3 { margin: 4px 0 6px; font-size: 17px } .lockcard p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.5 } .lockcard .row { margin-top: 12px }
.paycard b { display: block; font-size: 17px; overflow-wrap: anywhere } .paycard small { display: block; color: var(--muted); margin-top: 2px; font-size: 13px } .paycard .eyebrow { margin: 0 0 4px }
.paycard .row { gap: 12px } .paycard .row > span { flex: 1 1 auto; min-width: 0 } .paycard .row > .btn { flex: 0 0 auto; white-space: nowrap }
.ledger { padding-top: 6px; padding-bottom: 6px }
.lrow { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line) }
.lrow:last-child { border-bottom: 0 }
.lt { min-width: 0 } .lt b { display: block; font-size: 15px; font-weight: 700 } .lt small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px }
.la { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto } .la b { font-size: 15px; font-variant-numeric: tabular-nums }
.fcard { display: flex; flex-direction: column; gap: 14px }
.rcard { display: flex; flex-direction: column; gap: 6px; padding: 15px 18px }
.nitem.is-new { box-shadow: inset 3px 0 0 var(--mo), var(--ring) }
.nitem .ic { width: 46px; height: 46px; border-radius: var(--r2); color: var(--ink2) }
.nitem.is-new .ic { background: var(--mo-soft); color: var(--mo) }
.kcard { display: flex; flex-direction: column; gap: 11px }
.who { display: flex; gap: 12px; align-items: center; border: 0; background: none; padding: 0; text-align: left; color: var(--ink); min-width: 0; font: inherit }
.who b { display: block; font-size: 17px; letter-spacing: -.01em } .who small { display: block; color: var(--muted); font-size: 13px }

/* ---------- Telefonbreite ---------- */
@media (max-width: 879px) {
  .app { grid-template-columns: minmax(0, 1fr) } .side { display: none } .tabs { display: flex }
  .hero, .hero.b2c, .hero.b2b { grid-template-columns: minmax(0, 1fr) } .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  /* Telefon: Titel, Knöpfe, dann das Bild, dann der Text; so steht das Fenster auf dem ersten Bildschirm */
  .hero.b2c > div:not(.b2c-visual) { display: contents } .hero.b2c .eyebrow { order: 1 } .hero.b2c h1 { order: 2 } .hero.b2c .cta { order: 3; margin-top: 18px } .hero.b2c .b2c-visual { order: 4; margin-top: 4px } .hero.b2c .lead { order: 5; margin-top: 6px } .hero.b2c .hint { order: 6 }
  .hero.b2c { gap: 10px }
  .kv { grid-template-columns: 110px minmax(0, 1fr) } .f2 { grid-template-columns: minmax(0, 1fr) }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .roi { grid-template-columns: minmax(0, 1fr) }
  .nl-grid { grid-template-columns: minmax(0, 1fr) } .pv { position: static } .nl-grid .pv { display: none }
  .hl-steps { grid-template-columns: minmax(0, 1fr) }
  .h.hbild { flex-direction: column; align-items: flex-start } .hbild-l { align-self: center; flex-basis: auto; width: 150px; height: 150px }
  .b2c-win svg { width: 180px; height: 180px }
  .story { grid-template-columns: minmax(0, 1fr); gap: 0 } .story-stage { order: -1; top: 62px; height: 330px; z-index: 5 } .story-stage .sc { gap: 8px; padding: 46px 14px 14px } .story-stage .cap { display: none }
  .story-stage .form-mini, .story-stage .in-mini { padding: 12px 14px; gap: 7px } .story-stage .fm { padding: 6px 10px } .story-stage .in-row { padding: 5px 8px } .story-stage .in-mini .mf { display: none }
  .sc-msg .phone.small { width: min(100%, 270px) } .sc-msg .ph-top { padding: 10px 12px 8px } .sc-msg .ph-body { padding: 10px 10px 12px } .story-stage .sc-mess svg { max-height: 190px; width: auto }
  .story-steps { gap: 24px; padding: 20px 0 30px } .story-step { opacity: 1 }
  .strip { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 520px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: minmax(0, 1fr) } .item .rt { display: none } .rt-m { display: flex }
  .wrap { padding: 16px 16px; gap: 18px } .top { padding: 8px 14px } .top h1, .top .top-h { font-size: 15px } .app.is-out .top h1, .app.is-out .top .top-h { visibility: hidden }
  .card { padding: 16px }
  .hero .cta { flex-direction: column; align-items: stretch } .hero .cta .btn { width: 100% } .scrollchips { margin: 0 -16px; padding: 2px 16px }
  .share { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hero-link { padding: 18px } .h.hrow .btn.big { width: 100% }
  .grid.stats { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .stats .stat { display: grid; grid-template-columns: 40px auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; align-items: center; padding: 10px 14px 10px 12px; min-height: 64px; border-radius: var(--r2) }
  .stats .stat .stat-ic { position: static; grid-row: 1 / span 2; width: 40px; height: 40px }
  .stats .stat > small { grid-column: 2 / 4; padding-right: 0; line-height: 1.2 } .stats .stat > b { font-size: 22px; line-height: 1.15 } .stats .stat > span:not(.stat-ic) { line-height: 1.3; padding-left: 2px }
  .nitem .badge { display: none }
  .kcard .row .btn.ok { flex: 1 1 100% } .kcard .row .btn.danger, .kcard .row .btn.ghost { flex: 1 1 0; padding: 0 10px }
  .formnav .btn { flex: 1 1 0 }
  .lt b { font-size: 15px }
  .cap { padding: 14px } .cap > span:last-child { font-size: 13px }
  .posc .kv { grid-template-columns: 100px minmax(0, 1fr); font-size: 13px } .pic { width: 50px; height: 50px }
  .owner .row .btn { flex: 1 1 auto }
  .lockcard { grid-template-columns: minmax(0, 1fr) } .lockcard .row .btn { flex: 1 1 auto; justify-content: center }
  .pcard .neu { top: -7px; right: 12px } .pvis { width: 56px } .winstack { width: 56px }
  .tlh small.ts { display: none }
}

/* ---------- Tour für Fensterbauer: der Ablauf in acht Schritten ---------- */
.tourw { gap: 20px; padding-bottom: 0 }
.tour-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px }
.tour-kopf .tk-t { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.tour-kopf h2 { margin: 0; font-size: clamp(26px, 3.4vw, 30px); line-height: 1.1; font-weight: 900; letter-spacing: -.03em; text-wrap: balance }
.tour-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
.tour-schritte button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: var(--r2); background: var(--surface2); color: var(--ink2); font: inherit; font-size: 13px; font-weight: 700; text-align: left; line-height: 1.2 }
.tour-schritte .n { flex: 0 0 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 900; box-shadow: var(--ring) }
.tour-schritte .n svg { width: 14px; height: 14px }
.tour-schritte .tx { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.tour-schritte button.fertig .n { background: var(--ok); color: #fff; box-shadow: none }
.tour-schritte button[aria-current="step"] { background: var(--ink); color: var(--paper) }
.tour-schritte button[aria-current="step"] .n { background: var(--paper); color: var(--ink); box-shadow: none }
@media (hover: hover) { .tour-schritte button:not([aria-current="step"]):hover { background: var(--surface3) } }
.tour-raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: 'buehne oben' 'buehne unten'; grid-template-rows: auto 1fr; gap: 16px 36px; align-items: start }
.tour-oben { grid-area: oben; display: flex; flex-direction: column; gap: 8px; padding-top: 8px }
.tour-oben h3 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -.03em }
.tour-oben .lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink2); text-wrap: pretty }
.tour-unten { grid-area: unten; display: flex; flex-direction: column; gap: 14px }
.tour-buehne { grid-area: buehne; position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 24px; border-radius: var(--r4); background: var(--surface2); min-height: 460px; justify-content: center }
.tour-buehne > .card { width: min(100%, 460px) }
.tour-merk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.tour-merk li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink2) }
.tour-merk li svg { flex: 0 0 auto; margin-top: 3px; color: var(--ok) }
/* Gut zu wissen */
.tour-fakt { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 13px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring); border-left: 3px solid var(--ok) }
.tour-fakt .eyebrow { color: var(--ok) }
.tf-satz { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink2); text-wrap: pretty }
.tf-satz b { display: block; margin-bottom: 2px; font-size: 22px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums }
.tf-mit { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink) } .tf-mit span { font-weight: 800 }
.tf-q { margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted) }
/* Weiter und Zurück: bleiben beim Scrollen erreichbar */
.tour-nav { position: sticky; bottom: 0; z-index: 15; display: flex; gap: 10px; justify-content: flex-end; margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-top: 1px solid var(--line) }
.tour-nav .btn { min-width: 140px }
/* Vorgegeben: Schloss, gedämpft, antippen erklärt */
.schloss { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted) }
.tf-feld { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px 36px 8px 11px; border-radius: 10px; background: var(--surface2); text-align: left }
.tf-feld small { font-size: 13px; font-weight: 700; color: var(--muted) }
.tf-feld > span:not(.schloss) { font-size: 15px; font-weight: 700; color: var(--ink2); overflow-wrap: anywhere }
.tf-feld.mono > span:not(.schloss) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 500 }
.tf-feld .schloss { position: absolute; top: 10px; right: 11px }
.chip.gesperrt { color: var(--muted); background: var(--surface2); border-style: dashed; gap: 6px; cursor: not-allowed }
.seg > button.gesperrt { color: var(--muted); gap: 6px; cursor: not-allowed }
.tf-zeile { display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.tf-zeile small { font-size: 13px; font-weight: 700; color: var(--muted) }
.tour-formular { width: min(100%, 380px); gap: 10px; background: var(--surface); box-shadow: var(--lift) }
.tour-formular .btn { align-self: stretch; margin-top: 4px }
.tour-regler { width: min(100%, 380px); display: flex; flex-direction: column; gap: 12px }
.tour-regler .seg { width: 100% }
/* Kundenansicht im Telefon */
.phone.app-ansicht .ph-body { background: var(--paper) }
.tour-kunde { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center }
.tour-kunde b { font-size: 17px; font-weight: 900 }
.tour-mess { width: 100%; max-width: 240px; height: auto; margin: 6px 0 2px }
.tk-stand { display: flex; align-items: center; gap: 10px } .tk-stand .mprog.fertig span { background: var(--ok) } .tk-stand small { font-size: 13px; font-weight: 700; color: var(--ink2) }
.tour-verlauf { width: min(100%, 460px) }
.tour-note { width: min(100%, 360px) }
.tour-nochmal { gap: 6px }
.tour-eingang { width: min(100%, 520px) !important }
/* Bestellmaß und PDF */
.tour-bestell { display: flex; flex-direction: column; gap: 12px }
.tbm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.tbm > span:not(.tbm-pfeil) { display: flex; flex-direction: column; gap: 2px }
.tbm small { font-size: 13px; font-weight: 700; color: var(--muted) } .tbm b { font-size: 22px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.tbm-pfeil { font-size: 22px; color: var(--muted) }
/* Kundenschutz (Startseite der Betriebe, „So funktioniert es“): Zusage aus den Nutzungsbedingungen § 11 */
.schutz { gap: 18px; padding: 24px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring) }
.schutz-kopf { display: flex; gap: 16px; align-items: flex-start }
.schutz-kopf h2 { margin: 2px 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15 }
.schutz-kopf p:not(.eyebrow) { margin: 0; font-size: 17px; color: var(--ink2); line-height: 1.5; max-width: 62ch }
.schutz-kopf .eyebrow { color: var(--ok) }
.schutz-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--ok-soft); color: var(--ok); display: flex; align-items: center; justify-content: center; flex: 0 0 auto }
.schutz-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px }
.schutz-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink2); line-height: 1.5 }
.schutz-liste li b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 2px }
.schutz-haken { width: 24px; height: 24px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px }
.schutz-fuss { align-self: flex-start }
.pv-schutz { display: flex; gap: 8px; align-items: flex-start; color: var(--ink2) } .pv-schutz svg { flex: 0 0 auto; color: var(--ok); margin-top: 1px }
.tour-pdfkarte { display: flex; flex-direction: column; padding: 0; overflow: hidden }
/* Echter Ausschnitt des Aufmaßblatts (scripts/tour-bild.mjs): ein Blatt auf einem zweiten, unten ausgeblendet */
.tpk-blatt { position: relative; margin: 0; padding: 18px 18px 0; background: var(--surface2); isolation: isolate }
.tpk-blatt::before { content: ''; position: absolute; z-index: 0; top: 10px; left: 30px; right: 9px; bottom: 0; border-radius: 6px 6px 0 0; background: #fff; box-shadow: var(--lift); opacity: .7 }
.tpk-blatt img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 6px 6px 0 0; background: #fff; box-shadow: var(--lift) }
.tpk-blatt::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 19%; background: linear-gradient(to bottom, transparent, var(--surface2) 96%); pointer-events: none }
.tpk-tx { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px 20px 20px; border-top: 1px solid var(--line) }
.tpk-tx b { font-size: 17px }
.tour-nb, .tour-code { display: flex; flex-direction: column; gap: 12px; align-items: flex-start }
.tour-nb .tf-feld, .tour-code .tf-feld { align-self: stretch }
.tour-ergebnis { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r2); background: var(--ok-soft); color: var(--ok); align-self: stretch }
.tour-ergebnis b { display: block; font-size: 15px; color: var(--ink) } .tour-ergebnis small { display: block; font-size: 13px; color: var(--ink2) } .tour-ergebnis svg { flex: 0 0 auto; margin-top: 1px }
.tbi { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.tbi li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.4 } .tbi b { font-size: 15px } .tbi span { color: var(--ink2) }
/* Preise */
.tour-preise { width: min(100%, 460px); display: flex; flex-direction: column; gap: 10px }
.tpr { display: grid; grid-template-columns: 90px auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 14px 16px; border-radius: var(--r3); background: var(--surface); box-shadow: var(--ring) }
.tpr.hi { box-shadow: inset 0 0 0 2px var(--ink) }
.tpr b { font-size: 22px; font-weight: 900; letter-spacing: -.02em; white-space: nowrap } .tpr b small { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0 }
.tpr span { font-size: 15px; line-height: 1.4; color: var(--ink2) }
@media (max-width: 879px) {
  .tour-schritte { display: flex; overflow-x: auto; margin: 0 -20px; padding: 0 20px 2px; scrollbar-width: none } .tour-schritte::-webkit-scrollbar { display: none }
  .tour-schritte li { flex: 0 0 auto } .tour-schritte button { width: auto } .tour-schritte button:not([aria-current="step"]) .tx { display: none }
  .tour-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'oben' 'buehne' 'unten'; gap: 16px }
  .tour-oben { padding-top: 0 } .tour-oben h3 { font-size: 26px }
  .tour-buehne { min-height: 0; padding: 22px 16px }
  .app:not(.is-out) .tour-nav { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) }
}
@media (max-width: 520px) {
  .tour-kopf { align-items: flex-start; flex-direction: column; gap: 10px }
  .tour-schritte { margin: 0 -16px; padding: 0 16px 2px }
  .tour-nav { margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) } .tour-nav .btn { flex: 1 1 0; min-width: 0 }
  .tour-buehne { padding: 18px 12px; border-radius: var(--r3) }
  .schutz { padding: 18px } .schutz-kopf { flex-direction: column; gap: 12px } .schutz-kopf h2 { font-size: 26px } .schutz-liste { grid-template-columns: minmax(0, 1fr) }
  .tpk-blatt { padding: 12px 12px 0 } .tpk-blatt::before { top: 6px; left: 20px; right: 6px } .tpk-tx { padding: 14px 16px 16px }
  .tpr { grid-template-columns: minmax(0, 1fr) auto; } .tpr span { grid-column: 1 / -1 }
  .tbi li { grid-template-columns: 84px minmax(0, 1fr) }
  .tbm { flex-direction: column; align-items: flex-start; gap: 2px } .tbm-pfeil { transform: rotate(90deg); line-height: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .w, .hero h2 .w, .hero .lead, .hero .cta, .hero p.hint, .hero-ph .b1, .hero-ph .b2, .hero-ph .b3, .sc-msg .bub, .in-row, .fm-chips .badge, .fm-btn, .b2c-win .dim, .b2c-chips .badge { animation: none !important; opacity: 1; transform: none }
  .scr, .sheet, .sheet-bg, .scr.anim .list > *, .scr.anim .grid > *, .scr.anim .form > *, .form.shake, .burst-ok .lottie-still svg path, .tlh li.fresh .dot, .pop, .ibtn.ring { animation: none !important }
  .fm .ty { clip-path: none; animation: none !important } .sc-mess .dim { stroke-dashoffset: 0 } .sc-mess .lab { opacity: 1 } .burst-ok .lottie-still svg path { stroke-dashoffset: 0 }
  .toast { transition: opacity .2s } .winstack i { transition: none }
  a.tcard { transition: none } a.tcard:hover { transform: none }
}