/* ==========================================================================
   Design-System „Revier“ (Beinhauer IT · audiSys.de · audiSys Web)
   Liegt über site.css: gleiche Bausteine, neue Gestalt.
   Farben aus der CI: Nachtblau (aus #0a3c5f vertieft), CI-Grün als Signal,
   Logo-Grau, warmes Papierweiß. Kanten scharf, Schatten hart versetzt.
   Schriften: Fraunces (Überschriften, OFL) + Archivo (Text, OFL), lokal.
   ========================================================================== */

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  --night: #061c2c;          /* tiefes Nachtblau */
  --night-2: #0a3c5f;        /* CI-Dunkelblau Beinhauer IT */
  --acid: #88bd24;           /* CI-Grün Beinhauer IT */
  --acid-ink: #142303;       /* Text auf Grün */
  --steel: #dadada;          /* CI-Grau */
  --cream: #f3efe6;          /* Papier */
  --cream-2: #e9e3d6;

  --paper: var(--cream);
  --band: var(--night);
  --surface: #fbf9f4;
  --ink: #0b1a26;
  --head: var(--night);
  --muted: #4c5a66;
  --line: #0b1a26;
  --blue: var(--night-2);
  --blue-ink: var(--night);
  --blue-soft: #dfe7ec;
  --green: var(--acid);
  --green-soft: #e7f0d3;
  --cyan: #3f6a07;
  --on-blue: #ffffff;
  --foot-bg: var(--night);
  --radius: 0px;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --edge: 2px;               /* Kantenstärke */
  --shift: 6px;              /* Versatz harter Schatten */
  --step-5: clamp(3rem, 1.2rem + 7.6vw, 8.4rem);
  --step-4: clamp(2.6rem, 1.4rem + 4.8vw, 5.6rem);
  --step-3: clamp(2.1rem, 1.3rem + 3vw, 3.9rem);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.p-au, body.p-web { --night-2: #173f64; --acid: #95c11f; --blue-soft: #dde6ee; }

/* Dunkle Flächen: dieselben Bausteine, umgedrehte Werte */
.band, .hero, .dark-band, .footer, .marquee {
  --paper: #0f2b40; --surface: #0d2537; --ink: #eef1ee; --head: #ffffff; --muted: #a9bac6;
  --line: rgba(238, 241, 238, .55); --blue: var(--acid); --blue-ink: #c9ec7d; --blue-soft: #15364f;
  --green-soft: #1f3a18; --cyan: #b5e05a; --on-blue: var(--acid-ink); --logo-bg: #f3efe6;
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #08131c; --surface: #0e1e2b; --ink: #e9ece8; --head: #ffffff; --muted: #a2b2bd; --line: rgba(233,236,232,.5);
    --blue: var(--acid); --blue-ink: #c9ec7d; --blue-soft: #14324a; --green-soft: #1d3618; --cyan: #b5e05a; --on-blue: var(--acid-ink); --cream-2: #0c1b27; }
  :root:not([data-theme="light"]) .band, :root:not([data-theme="light"]) .hero { --paper: #0d2537; --surface: #102c42; }
}

/* ---------- Grundlagen ---------- */
html { background: var(--paper); }
body { background: var(--paper); counter-reset: abschnitt; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; background-image: var(--grain); opacity: .07; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; opacity: .05; } }
::selection { background: var(--acid); color: var(--acid-ink); }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; border-radius: 0; }

h1, h2, h3 { font-family: var(--serif); font-optical-sizing: auto; letter-spacing: -.02em; font-stretch: 100%; }
h1 { font-weight: 800; font-size: var(--step-5); line-height: .92; letter-spacing: -.035em; }
h2 { font-weight: 750; font-size: var(--step-3); line-height: 1; }
h3 { font-weight: 650; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--acid); }
.lead { color: var(--muted); font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.5; }
a { text-decoration-thickness: 1.5px; }

/* ---------- Kopfzeile ---------- */
.topbar { background: var(--paper); box-shadow: none; border-bottom: var(--edge) solid var(--ink); }
.topbar::after { height: 5px; bottom: -7px; }
.nav a { text-transform: uppercase; letter-spacing: .09em; font-size: .76rem; font-weight: 650; color: var(--ink);
  background: linear-gradient(var(--acid), var(--acid)) no-repeat left bottom / 0 3px; padding-block: .35rem; transition: background-size .25s ease; }
.nav a:hover { color: var(--ink); background-size: 100% 3px; }
.nav { gap: 1.15rem; }
.nav a { white-space: nowrap; }
@media (min-width: 821px) and (max-width: 1180px) { .nav a { font-size: .68rem; letter-spacing: .06em; } .nav { gap: .85rem; } .nav .switch { font-size: .85rem; } }
.nav .switch { border-left: var(--edge) solid var(--ink); text-transform: none; letter-spacing: 0; font-family: var(--serif); font-style: italic; font-size: .95rem; font-weight: 500; white-space: nowrap; }
.nav-toggle { border: var(--edge) solid var(--ink); border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .75rem; }
@media (max-width: 820px) { .nav { background: var(--paper); border-bottom: var(--edge) solid var(--ink); } .nav a { font-size: .9rem; } }

/* ---------- Knöpfe: eckig, harter Schatten, Pfeil läuft mit ---------- */
.btn { border-radius: 0; border: var(--edge) solid var(--ink); background: var(--acid); color: var(--acid-ink); font-weight: 750;
  letter-spacing: .01em; padding: .95rem 1.35rem; box-shadow: var(--shift) var(--shift) 0 var(--ink);
  transition: transform .18s cubic-bezier(.3,.7,.4,1.4), box-shadow .18s, background .18s; position: relative; }
.btn::after { content: "→"; display: inline-block; transition: transform .25s cubic-bezier(.3,.7,.4,1.4); font-weight: 400; }
.btn:hover { background: var(--acid); color: var(--acid-ink); border-color: var(--ink); transform: translate(-3px, -3px); box-shadow: calc(var(--shift) + 3px) calc(var(--shift) + 3px) 0 var(--ink); }
.btn:hover::after { transform: translateX(5px); }
.btn:active { transform: translate(var(--shift), var(--shift)); box-shadow: 0 0 0 var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); box-shadow: var(--shift) var(--shift) 0 var(--acid); }
.band .btn, .hero .btn, .dark-band .btn { border-color: var(--acid); box-shadow: var(--shift) var(--shift) 0 rgba(255,255,255,.18); }
.band .btn:hover, .hero .btn:hover, .dark-band .btn:hover { box-shadow: calc(var(--shift) + 3px) calc(var(--shift) + 3px) 0 rgba(255,255,255,.28); }
.band .btn--ghost, .hero .btn--ghost { border-color: var(--ink); color: var(--ink); }
.band .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--ink); color: var(--night); box-shadow: var(--shift) var(--shift) 0 var(--acid); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- Abschnitte: Nummer am Rand, asymmetrischer Kopf ---------- */
section { position: relative; }
section + section { border-top: var(--edge) solid var(--ink); }
.band { background: var(--night) var(--grain); background-blend-mode: soft-light; }
.section-head { counter-increment: abschnitt; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 1rem clamp(1.5rem, 1rem + 3vw, 4rem); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.4rem); }
.section-head::before { content: counter(abschnitt, decimal-leading-zero) " ——"; grid-column: 1 / -1; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.05rem; color: var(--cyan); letter-spacing: .02em; }
.section-head > h2 { grid-column: 1; }
.section-head > :not(h2) { grid-column: 2; }
.section-head > h2:last-child { grid-column: 1 / -1; }
.section-head h2::after, .split > div > h2::after { display: none; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } .section-head > * { grid-column: 1 !important; } }

/* ---------- Hero: dunkel, riesige Serifen, überlappende Grafik ---------- */
.hero { background: radial-gradient(70% 90% at 92% 8%, color-mix(in srgb, var(--acid) 32%, transparent) 0%, transparent 55%),
                    radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--night-2) 90%, transparent) 0%, transparent 60%),
                    var(--night); padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(4rem, 2rem + 8vw, 9rem); overflow: visible; overflow-x: clip; isolation: isolate; }
html, body { overflow-x: clip; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--grain); opacity: .18; mix-blend-mode: overlay; pointer-events: none; }
.hero--bh::before, .hero--au::before { opacity: .09; filter: invert(1) grayscale(1) brightness(2); }
.hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.hero h1 { color: #fff; max-width: 13ch; }
.hero .lead { color: #c6d3dc; max-width: 46ch; }
.hero .figure-card { background: var(--cream); color: #0b1a26; border: var(--edge) solid #000; box-shadow: 14px 14px 0 var(--acid);
  transform: rotate(-1.6deg) translateY(clamp(2rem, 6vw, 6rem)); --surface: var(--cream); --line: #b9b2a3; --ink: #0b1a26; --muted: #4c5a66; --blue: var(--night-2); }
.hero .figure-card figcaption { color: #4c5a66; }
.hero .trust { border-top: var(--edge) solid rgba(255,255,255,.35); color: #b8c7d1; }
.hero .trust strong { color: #fff; font-family: var(--serif); font-weight: 650; font-size: 1.15rem; }
.hero .trust a { color: var(--acid); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero .figure-card { transform: rotate(-1deg) translateY(2rem); } }
.p-web .hero h1 { font-size: clamp(2.8rem, 1rem + 5.6vw, 6.8rem); max-width: 15ch; }
.hero .devices .frame { border: var(--edge) solid #000; box-shadow: 14px 14px 0 var(--acid); transform: rotate(1.4deg); --surface: #fff; --band: #ece8de; --line: #b9b2a3; --muted: #4c5a66; }
.hero .devices .phone { border-radius: 0; border-color: #000; box-shadow: -10px 10px 0 var(--cream); transform: rotate(-3deg); }
.hero .devices .phone img { border-radius: 0; }
.hero .kpis { border-top: var(--edge) solid rgba(255,255,255,.35); }
.hero .kpis strong { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); color: var(--acid); }
.hero .kpis span { color: #c6d3dc; }

/* Laufband mit Leistungen unter dem Hero */
.marquee { background: var(--acid); color: var(--acid-ink); border-block: var(--edge) solid #000; overflow: hidden; padding: 0; white-space: nowrap; position: relative; z-index: 2; }
section + .marquee, .marquee + section { border-top: 0; }
.marquee-track { display: inline-flex; gap: 2.4rem; padding: 1rem 0; animation: lauf 38s linear infinite; font-family: var(--font); font-size: clamp(1rem, .85rem + .7vw, 1.45rem);
  font-weight: 800; font-stretch: 115%; text-transform: uppercase; letter-spacing: .06em; }
.marquee-track span::after { content: "■"; margin-left: 2.4rem; font-size: .55em; vertical-align: .25em; }
@keyframes lauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Kacheln, Karten, Formulare: scharfe Kanten ---------- */
.tier, .item, .figure-card, form.contact, .guide a, .logo-tile, .ref-panel, .stats > div, .finder, .selftest, .mtk-calc, .ampel,
.planer fieldset, .pl-ergebnis, .pl-modus button, .callout, .termin-box, .compare > div, .partner, .pair, .mod-group, .tier3, .duo > div,
.builder form, .frame, .vergleich-wrap, .g-bewertung {
  border-radius: 0; border: var(--edge) solid var(--line); box-shadow: none;
}
.tier, .item, .guide a, .pair, .mod-group, .tier3, .logo-tile, .stats > div, .pl-modus button {
  transition: transform .2s cubic-bezier(.3,.7,.4,1.4), box-shadow .2s, background .2s;
}
.tier:hover, .item:hover, .guide a:hover, .pair:hover, .mod-group:hover, .tier3:hover, .logo-tile:hover, .stats > div:hover {
  transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--acid);
}
.tier.featured, .tier3.hl { border-width: 3px; border-color: var(--acid); box-shadow: 10px 10px 0 var(--ink); }
.tier .badge, .tier3 .badge { border-radius: 0; background: var(--ink); color: var(--paper); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.band .tier .badge, .band .tier3 .badge { background: var(--acid); color: var(--acid-ink); }
.tier h3, .tier3 h3, .pair h3, .mod-group h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.tier li::before, .tier3 li::before { color: var(--cyan); }
.stats > div { border-top-width: 6px; border-top-color: var(--acid); }
.stats strong { font-family: var(--serif); font-weight: 800; letter-spacing: -.03em; }

/* Leistungen als Raster mit kräftigen Linien und großen Nummern */
.services { border-top: var(--edge) solid var(--line); counter-reset: leistung; }
.services > div { border-bottom: var(--edge) solid var(--line); counter-increment: leistung; position: relative; }
.services > div:not(:nth-child(3n+1)) { border-left: var(--edge) solid var(--line); }
.services > div::before { content: counter(leistung, decimal-leading-zero); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--acid); opacity: .9; }
.services h3 { font-size: 1.45rem; }
.services svg { color: var(--acid); }

/* Ablauf: riesige Ziffern */
.steps li::before, .steps4 > div::before { font-family: var(--serif); font-weight: 800; font-style: italic; font-size: clamp(3rem, 2rem + 3vw, 5rem); color: var(--acid); line-height: .9; }
.steps4 > div { border-top: var(--edge) solid var(--ink); }
.steps4 > div::before { content: counter(s, decimal-leading-zero); text-transform: none; letter-spacing: -.03em; margin-bottom: .2rem; }

/* Wegweiser: große, scharfe Kacheln mit Pfeil */
section.guide-band { background: var(--cream-2); }
.guide-q { font-size: var(--step-3); }
.guide a { position: relative; padding: 1.2rem 3rem 1.2rem 1.2rem; background: var(--surface); }
.guide a::after { content: "↗"; position: absolute; right: 1rem; top: 1rem; font-size: 1.3rem; transition: transform .2s; }
.guide a:hover { background: var(--acid); color: var(--acid-ink); border-color: var(--ink); }
.guide a:hover span { color: var(--acid-ink); }
.guide a:hover::after { transform: translate(3px, -3px); }
.guide strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 650; }

/* FAQ */
.faq { border-top: var(--edge) solid var(--line); }
.faq details { border-bottom: var(--edge) solid var(--line); }
.faq summary { font-family: var(--serif); font-weight: 600; font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); padding-block: 1.3rem; }
.faq summary::after { color: var(--acid); font-family: var(--font); font-weight: 300; font-size: 2rem; top: .8rem; transition: transform .25s; }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }

/* Eingaben */
input, select, textarea { border-radius: 0; border: var(--edge) solid var(--line); background: var(--surface); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--acid); outline-offset: 0; border-color: var(--ink); }
.consent input, .line-opt input { accent-color: var(--acid); }
.chip, .tab, .finder-a button, .check-a button, .item .add, .pl-step, .status-pill, .ref-tags li, .pl-lager, .here-chip, .brand-web, .mod-group li em {
  border-radius: 0 !important;
}
.chip[aria-pressed="true"], .tab[aria-selected="true"], .finder-a button[aria-pressed="true"], .check-a button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.band .chip[aria-pressed="true"], .band .tab[aria-selected="true"] { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); }

/* Vergleich ohne/mit */
.compare .with { background: var(--acid); color: var(--acid-ink); border-color: var(--ink); --muted: #2c3d10; }
.compare .with h3, .compare .with li::before { color: var(--acid-ink); }
.compare .without { border-style: dashed; }

/* Referenzen */
.logo-tile { background: var(--cream); }
.ref-panel { border-width: 3px; border-color: var(--acid); box-shadow: 10px 10px 0 var(--ink); }
.ref-close { border-radius: 0; border: var(--edge) solid var(--ink); }
.ref-panel[hidden], .termin-box[hidden], .finder-result[hidden] { display: none; }

/* Dunkles Portal-Band bleibt dunkel, in Nachtblau */
.dark-band { background: var(--night-2) var(--grain); background-blend-mode: soft-light; }
.pm-body { border-radius: 0; border: var(--edge) solid #000; box-shadow: 14px 14px 0 var(--acid); }
.pm-bar { border-radius: 0; }

/* Fußzeile: groß, dunkel */
.footer { padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2.5rem; background: var(--night); }
.footer::before { height: 6px; }

/* Rechtstexte */
.legal h1 { font-size: var(--step-4); }

/* Google-Bewertung: Hinweis nach § 5b UWG, Links zu sozialen Netzwerken */
.g-hinweis { flex-basis: 100%; font-size: .72rem; opacity: .75; }
.footer .sozial { display: inline-flex; gap: 1.2rem; }