/* audiSys Web (hoerakustik-homepage.de) – Ergänzungen zu site.css */

/* Wortmarke: audiSys-Logo + „Web“ */
.brand { gap: .55rem; }
.brand-web { font-weight: 750; font-size: 1.35rem; letter-spacing: -.01em; color: var(--head); padding: .1rem .55rem; border-radius: 6px; background: var(--green-soft); line-height: 1.2; }
.topbar .brand-logo--audisys { height: 40px; }

/* Hero mit Geräte-Ansicht */
.hero--web { background: var(--band); }
.devices { position: relative; padding: 0 0 2.5rem 0; }
.frame { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(10, 30, 50, .45); }
.frame-bar { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line); background: var(--band); font-size: .75rem; color: var(--muted); }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ci-gray); display: inline-block; }
.frame-bar span { margin-left: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame img { display: block; width: 100%; height: auto; }
.frame--scroll .frame-view { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
.phone { position: absolute; right: -4%; bottom: 0; width: 28%; min-width: 120px; border: 6px solid #1b232b; border-radius: 22px; overflow: hidden; background: #1b232b; box-shadow: 0 18px 40px -18px rgba(10, 30, 50, .6); }
.phone img { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 860px) { .phone { right: 0; } }

/* Kennzahlen unter dem Hero */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.kpis strong { display: block; font-size: var(--step-2); color: var(--head); line-height: 1.1; }
.kpis span { font-size: var(--step--1); color: var(--muted); }
@media (max-width: 620px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Problem → Lösung */
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pairs { grid-template-columns: 1fr; } }
.pair { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; display: grid; gap: .6rem; align-content: start; }
.pair .problem { font-style: italic; color: var(--muted); }
.pair .problem::before { content: "„"; }
.pair .problem::after { content: "“"; }
.pair h3 { font-size: var(--step-1); }
.pair p:last-child { font-size: var(--step--1); }
.pair .mod { font-size: .78rem; font-weight: 650; color: var(--cyan); text-transform: uppercase; letter-spacing: .04em; }

/* Rundgang */
.tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1.2rem, 1rem + 2vw, 2.5rem); align-items: start; }
@media (max-width: 900px) { .tour { grid-template-columns: 1fr; } }
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.tab { font: inherit; font-size: var(--step--1); font-weight: 600; padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.tour-text ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; counter-reset: p; }
.tour-text li { position: relative; padding-left: 2.4rem; }
.tour-text li::before { counter-increment: p; content: counter(p); position: absolute; left: 0; top: -.05rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--green); color: #14240a; font-weight: 750; display: grid; place-items: center; font-size: .9rem; }
.tour-text li strong { display: block; }
.tour-text li span { color: var(--muted); font-size: var(--step--1); }

/* Vorschau-Generator */
.builder { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.2rem, 1rem + 2vw, 2.5rem); align-items: start; }
@media (max-width: 960px) { .builder { grid-template-columns: 1fr; } }
.builder form { display: grid; gap: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.builder fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.builder legend { font-weight: 650; margin-bottom: .3rem; }
.lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.line-opt { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; cursor: pointer; font-size: var(--step--1); }
.line-opt input { margin: 0; width: auto; }
.line-opt:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.sw { display: inline-flex; gap: 2px; }
.sw i { width: 12px; height: 18px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.12); }
.builder .hint { font-size: .82rem; color: var(--muted); }
.preview-wrap { position: sticky; top: 84px; }
@media (max-width: 960px) { .preview-wrap { position: static; } }

/* Die Vorschau selbst: eigene Farben/Schriften je Designlinie, unabhängig vom Seiten-Thema */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinsonhyperlegible-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinsonhyperlegible-normal-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-500-700.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolagegrotesque-normal-500-800.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
.pv { --b: #fff; --c: #1e2b26; --p: #1f5c4a; --op: #fff; --a: #9a6d24; --s: #eef3f0; --l: #d2ddd8; --m: #4f5d57; --hf: Literata, Georgia, serif; --hw: 700;
  background: var(--b); color: var(--c); font-family: "Atkinson Hyperlegible", Verdana, sans-serif; font-size: 13px; line-height: 1.45; }
.pv[data-line="klarton"] { --b: #fff; --c: #0b1f3a; --p: #0050b3; --op: #fff; --a: #8a5a00; --s: #eaf1fb; --l: #c9d7ec; --m: #3f526b; --hf: "Atkinson Hyperlegible", Verdana, sans-serif; --hw: 700; }
.pv[data-line="salbei"] { --b: #fafbf8; --c: #263229; --p: #3f6e4c; --op: #fff; --a: #a84e26; --s: #ecf1ea; --l: #d3dcd0; --m: #4e5a52; --hf: "Bricolage Grotesque", "Segoe UI", sans-serif; --hw: 700; }
.pv[data-line="buehne"] { --b: #14171d; --c: #f1f0ec; --p: #e8b04a; --op: #14171d; --a: #7fc8d6; --s: #1f242d; --l: #363d4a; --m: #b4b9c2; --hf: "Bricolage Grotesque", "Segoe UI", sans-serif; --hw: 800; }
.pv-service { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; padding: .4rem .9rem; background: var(--dark, var(--c)); color: var(--b); font-size: 11.5px; }
.pv[data-line="buehne"] .pv-service { --dark: #0b0d11; color: var(--c); }
.pv-service b { font-weight: 700; text-decoration: underline; }
.pv-pill { display: inline-block; background: var(--s); color: var(--c); border-radius: 999px; padding: .05rem .5rem; font-weight: 700; }
.pv-a11y { display: inline-flex; align-items: center; gap: .25rem; }
.pv-a11y i { font-style: normal; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 .3rem; font-size: 10.5px; }
@media (max-width: 520px) { .pv-a11y u { display: none; } }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .9rem; border-bottom: 1px solid var(--l); }
.pv-logo { font-family: var(--hf); font-weight: var(--hw); font-size: 16px; color: var(--c); line-height: 1.1; }
.pv-logo small { display: block; font-family: "Atkinson Hyperlegible", Verdana, sans-serif; font-weight: 400; font-size: 10.5px; color: var(--m); }
.pv-menu { display: flex; gap: .8rem; font-size: 11.5px; color: var(--m); }
@media (max-width: 520px) { .pv-menu { display: none; } }
.pv-btn { display: inline-block; background: var(--p); color: var(--op); border-radius: 6px; padding: .45rem .9rem; font-weight: 700; font-size: 12px; white-space: nowrap; }
.pv-btn--ghost { background: transparent; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--l); }
.pv-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1rem; padding: 1.6rem .9rem 1.3rem 1.4rem; background: var(--b); align-items: center; }
@media (max-width: 520px) { .pv-hero { grid-template-columns: 1fr; } }
.pv-hero h4 { font-family: var(--hf); font-weight: var(--hw); font-size: clamp(18px, 2.4vw, 24px); line-height: 1.15; margin: .2rem 0 .5rem; color: var(--c); }
.pv-kicker { font-size: 11px; font-weight: 700; color: var(--p); text-transform: uppercase; letter-spacing: .05em; }
.pv-hero p { margin: 0 0 .8rem; color: var(--m); }
.pv-hero .pv-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.pv-photo { aspect-ratio: 9 / 10; border-radius: 12px; background: var(--s); position: relative; overflow: hidden; }
.pv-photo::before { content: ""; position: absolute; left: 31%; top: 20%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--l); }
.pv-photo::after { content: ""; position: absolute; left: 17%; right: 17%; bottom: 10%; height: 30%; border-radius: 999px 999px 0 0; background: var(--l); }
.pv-photo span { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-size: 10.5px; color: var(--m); z-index: 1; }
.pv-open { display: inline-flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 700; margin-top: .7rem; }
.pv-open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #2e8b57); }
.pv-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: .9rem; }
@media (max-width: 520px) { .pv-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-quick span { border: 1px solid var(--l); border-radius: 10px; padding: .55rem .6rem; font-weight: 700; font-size: 11.5px; background: var(--b); }
.pv-quick span small { display: block; font-weight: 400; color: var(--m); }
.pv-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; padding: .7rem .9rem; border-top: 1px solid var(--l); font-size: 11px; color: var(--m); }

/* Module */
.mod-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .mod-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mod-groups { grid-template-columns: 1fr; } }
.mod-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.mod-group h3 { font-size: var(--step-0); margin-bottom: .6rem; }
.mod-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.mod-group li { font-size: var(--step--1); color: var(--muted); padding-left: 1.1rem; position: relative; }
.mod-group li::before { content: ""; position: absolute; left: 0; top: .5em; width: .45rem; height: .45rem; border-radius: 2px; background: var(--green); }
.mod-group li b { color: var(--ink); font-weight: 650; }
.mod-group li em { font-style: normal; font-size: .75rem; font-weight: 650; color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 0 .45rem; margin-left: .3rem; white-space: nowrap; }

/* Pakete */
.tiers3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 900px) { .tiers3 { grid-template-columns: 1fr; } }
.tier3 { display: grid; grid-template-rows: auto auto 1fr auto; gap: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; position: relative; }
.tier3.hl { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.tier3 .for { color: var(--muted); font-size: var(--step--1); }
.tier3 ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: var(--step--1); }
.tier3 li { padding-left: 1.4rem; position: relative; }
.tier3 li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan); font-weight: 800; }
.tier3 li.plus { font-weight: 650; }
.tier3 .badge { position: absolute; top: -.75rem; left: 1.4rem; background: var(--blue); color: var(--on-blue); font-size: .75rem; font-weight: 700; padding: .15rem .65rem; border-radius: 999px; }
.vergleich-wrap { overflow-x: auto; margin-top: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.vergleich { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 560px; }
.vergleich th, .vergleich td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: center; }
.vergleich th:first-child, .vergleich td:first-child { text-align: left; }
.vergleich thead th { background: var(--band); font-weight: 700; }
.vergleich td.y { color: var(--cyan); font-weight: 800; }
.vergleich td.n { color: var(--muted); }
.vergleich tr:last-child td { border-bottom: 0; }

/* Wir / Sie */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }
.duo > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.duo h3 { margin-bottom: .6rem; }
.duo ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; color: var(--muted); font-size: var(--step--1); }

/* Ablauf */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: s; }
@media (max-width: 900px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps4 { grid-template-columns: 1fr; } }
.steps4 > div { border-top: 4px solid var(--green); padding-top: .9rem; }
.steps4 > div::before { counter-increment: s; content: "Schritt " counter(s); display: block; font-size: .78rem; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.steps4 h3 { font-size: var(--step-0); margin-bottom: .3rem; }
.steps4 p { color: var(--muted); font-size: var(--step--1); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hint { font-size: var(--step--1); color: var(--muted); }
.note-box { background: var(--green-soft); border-radius: 10px; padding: .9rem 1.1rem; font-size: var(--step--1); }