/* Beinhauer IT & audiSys.de – gemeinsames Stylesheet
   Layout-Idee: ruhige, linksbündige Spalten im Logo-Grau und Weiß; Akzente kommen aus den Logos
   (Signet-Formen, Pixel-Quadrate, Dreiklang Grün/Grau/Dunkelblau). */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff") format("woff");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: optional;
}

/* CI aus den Logos: Dunkelblau und Grün aus Signet und Schriftzug, dazu das helle Signet-Grau
   und die kühlen Grautöne der audiSys-Unterzeile. */
:root {
  --paper: #ffffff;
  --band: #f1f2f3;
  --surface: #ffffff;
  --ci-gray: #dadada;
  --ci-gray-cool: #c5cfd8;
  --ink: #1d2933;
  --head: #0a3c5f;
  --muted: #5d6a75;
  --line: #dadada;
  --blue: #0a3c5f;
  --blue-ink: #06283f;
  --blue-soft: #e6edf2;
  --green: #88bd24;
  --green-soft: #eef5dd;
  --cyan: #4d7a0a;
  --ear-r: #c4352b;
  --ear-l: #1e5cbc;
  --on-blue: #ffffff;
  --foot-bg: #0a3c5f;
  --foot-ink: #d7e2ea;
  --ok: #1d7a4a;
  --warn: #9a5b00;
  --logo-bg: #ffffff;
  --logo-ink: #2c3e50;

  --font: "Archivo", Arial, "Helvetica Neue", system-ui, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.7rem;
  --step-3: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.6vw, 4rem);
  --radius: 10px;
  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1820; --band: #13222d; --surface: #172836; --ci-gray: #3a4650; --ci-gray-cool: #46586a;
    --ink: #e4ebf0; --head: #eef3f7; --muted: #9fb0bd; --line: #2b3b48;
    --blue: #8cbbe0; --blue-ink: #c3ddf2; --blue-soft: #17324a; --green: #9fd43a; --green-soft: #24361a;
    --cyan: #a9dc55; --ear-r: #f2776c; --ear-l: #7eabf3; --on-blue: #06121d;
    --foot-bg: #071c2b; --foot-ink: #b9c8d3;
    --ok: #5cc98d; --warn: #e3a64a; --logo-bg: #e8eef4; --logo-ink: #2c3e50;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1820; --band: #13222d; --surface: #172836; --ci-gray: #3a4650; --ci-gray-cool: #46586a;
  --ink: #e4ebf0; --head: #eef3f7; --muted: #9fb0bd; --line: #2b3b48;
  --blue: #8cbbe0; --blue-ink: #c3ddf2; --blue-soft: #17324a; --green: #9fd43a; --green-soft: #24361a;
  --cyan: #a9dc55; --ear-r: #f2776c; --ear-l: #7eabf3; --on-blue: #06121d;
  --foot-bg: #071c2b; --foot-ink: #b9c8d3;
  --ok: #5cc98d; --warn: #e3a64a; --logo-bg: #e8eef4; --logo-ink: #2c3e50;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
}
img, svg { max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-ink); }
a.tel { white-space: nowrap; }  /* Telefonnummern nicht umbrechen, Klick wählt direkt */
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

h1, h2, h3 { line-height: 1.12; text-wrap: balance; margin: 0; }
h1, h2 { font-stretch: 100%; font-weight: 700; letter-spacing: -0.015em; color: var(--head); }
h3 { color: var(--head); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 680; }
p { margin: 0; max-width: 64ch; }
.lead { font-size: var(--step-1); color: var(--muted); line-height: 1.5; }
.small { font-size: var(--step--1); color: var(--muted); }
.stack { display: grid; gap: 1rem; }
.stack-lg { display: grid; gap: 1.6rem; }

/* Wortmarken – bei Bedarf durch <img src="assets/logo-….svg"> ersetzen */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; height: 40px; width: auto; max-width: 100%; }
.brand-logo--audisys { height: 48px; }
.topbar .brand-logo { height: 34px; }
.topbar .brand-logo--audisys { height: 42px; }
/* Logos sind für hellen Grund gestaltet: im Dunkelmodus auf heller Fläche zeigen */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo { background: #f3f6f8; border-radius: 8px; padding: 4px 8px; box-sizing: content-box; } }
:root[data-theme="dark"] .brand-logo { background: #f3f6f8; border-radius: 8px; padding: 4px 8px; box-sizing: content-box; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.25rem; border-radius: 999px;
  font: inherit; font-weight: 650; font-size: var(--step-0);
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--blue); background: var(--blue); color: var(--on-blue);
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--blue-ink); border-color: var(--blue-ink); color: var(--on-blue); }
.btn--ghost { background: transparent; color: var(--blue); }
.btn--ghost:hover { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Kopfzeile Unterseiten */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 550; font-size: var(--step--1); }
.nav a:hover { color: var(--blue); }
.nav .switch { color: var(--muted); border-left: 1px solid var(--line); padding-left: 1.4rem; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: var(--step--1); padding: .45rem .8rem; cursor: pointer; }
@media (max-width: 820px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: .5rem 1rem; }
  .nav.open { display: flex; }
  .nav a { padding: .7rem 0; font-size: var(--step-0); border-bottom: 1px solid var(--line); }
  .nav .switch { border-left: 0; padding-left: 0; }
}

/* Abschnitte */
section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
section + section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: .8rem; margin-bottom: 2.2rem; }
.band { background: var(--band); }

/* Hero */
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.hero-grid > * { min-width: 0; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .stack-lg { align-content: start; }

/* Leistungen */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.services > div { padding: 1.5rem 1.5rem 1.7rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; align-content: start; }
.services > div:not(:nth-child(3n+1)) { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.services svg { width: 30px; height: 30px; color: var(--green); }
.services p { color: var(--muted); font-size: var(--step--1); }
@media (max-width: 860px) {
  .services { grid-template-columns: 1fr; }
  .services > div, .services > div:not(:nth-child(3n+1)) { padding: 1.3rem 0; border-left: 0; }
}

/* Ablauf */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: .4rem; align-content: start; }
.steps li::before { content: counter(step); font-stretch: 125%; font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--green); }
.steps p { color: var(--muted); font-size: var(--step--1); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* Zitate */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.quotes figure { margin: 0; display: grid; gap: .8rem; align-content: start; }
.quotes blockquote { margin: 0; font-size: var(--step-0); line-height: 1.55; border-left: 3px solid var(--blue); padding-left: 1.1rem; }
.quotes figcaption { font-size: var(--step--1); color: var(--muted); padding-left: 1.4rem; }
.quotes figcaption strong { color: var(--ink); font-weight: 650; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }

/* Referenz-Logos */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: .8rem; margin-bottom: 2.5rem; }
.logo-tile { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 1rem; background: var(--logo-bg); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; text-align: center; }
.logo-tile img { max-height: 48px; max-width: 100%; width: auto; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.logo-tile:hover img { filter: none; opacity: 1; }
.logo-tile { font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.logo-tile:hover { border-color: var(--blue); }
.logo-tile[aria-expanded="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.logo-tile[aria-expanded="true"] img { filter: none; opacity: 1; }
.ref-panel { background: var(--surface); border: 1px solid var(--blue); border-radius: var(--radius); padding: clamp(1.1rem, .8rem + 1.5vw, 2rem); display: grid; gap: .9rem; max-width: 860px; }
.ref-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ref-meta { font-size: var(--step--1); color: var(--cyan); font-weight: 600; }
.ref-head h3 { font-size: var(--step-2); font-stretch: 112%; }
.ref-close { font: inherit; font-size: 1.6rem; line-height: 1; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.ref-title { font-size: var(--step-1); font-weight: 650; }
.ref-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ref-tags li { font-size: .82rem; font-weight: 600; color: var(--cyan); background: var(--green-soft); border-radius: 999px; padding: .2rem .7rem; }
.ref-panel blockquote { margin: .3rem 0 0; border-left: 3px solid var(--blue); padding-left: 1.1rem; display: grid; gap: .4rem; }
.ref-panel cite { font-style: normal; font-size: var(--step--1); color: var(--muted); }
.logo-name { hyphens: auto; overflow-wrap: anywhere; min-width: 0; font-weight: 700; font-stretch: 110%; font-size: .98rem; line-height: 1.25; color: var(--logo-ink); }

.partners { display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-weight: 650; font-stretch: 112%; color: var(--muted); font-size: var(--step-1); }

.partner-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: .7rem; }
.partner { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: .9rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--logo-bg); }
.partner img { max-height: 30px; max-width: 100%; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.partner--square img { max-height: 42px; }
.partner--badge img { max-height: 46px; }
.partner:hover img { filter: none; opacity: 1; }

/* Grafiken */
.figure-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(.8rem, .5rem + 1vw, 1.4rem); }
.figure-card figcaption { font-size: var(--step--1); color: var(--muted); margin-top: .6rem; }
.map text, .audiogram text { font-family: var(--font); fill: var(--muted); }
.map .city { fill: var(--surface); stroke: var(--blue); stroke-width: 2; }
.map .city.home { fill: var(--blue); }
.map .ray { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.map .label { font-size: 13px; fill: var(--ink); }
.map .label.home { font-size: 15px; font-weight: 750; }
.map .river { fill: none; stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
.audiogram .grid { stroke: var(--line); stroke-width: 1; }
.audiogram .grid.major { stroke-width: 1.4; }
.audiogram .axis { font-size: 11px; }
.audiogram .right { stroke: var(--ear-r); fill: none; stroke-width: 2; }
.audiogram .left { stroke: var(--ear-l); fill: none; stroke-width: 2; stroke-dasharray: 5 4; }
.audiogram .band-normal { fill: var(--blue-soft); }

/* Kennzahlen-Leiste */
.trust { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: .9rem 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--muted); }
.trust strong { display: block; color: var(--ink); font-size: var(--step-0); font-weight: 680; }

/* Vergleich ohne / mit */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare > div { border-radius: var(--radius); padding: 1.4rem; display: grid; gap: .8rem; align-content: start; }
.compare .without { border: 1px dashed var(--line); }
.compare .with { background: var(--blue-soft); }
.compare ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.compare li { padding-left: 1.6rem; position: relative; }
.compare .without li::before { content: "–"; position: absolute; left: .2rem; color: var(--muted); font-weight: 700; }
.compare .with li::before { content: "✓"; position: absolute; left: .1rem; color: var(--cyan); font-weight: 700; }

/* Pakete */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier { display: grid; grid-template-rows: auto auto 1fr auto; gap: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; min-width: 0; }
.tier.featured { border: 2px solid var(--blue); }
.tier .for { font-size: var(--step--1); color: var(--muted); }
.tier .price { font-stretch: 112%; font-weight: 720; font-size: var(--step-1); }
.tier .price small { font-stretch: 100%; font-weight: 400; font-size: var(--step--1); color: var(--muted); }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: var(--step--1); align-content: start; }
.tier li { padding-left: 1.5rem; position: relative; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.tier li.plus { font-weight: 600; }
.tier li.plus::before { content: "+"; }
.tier .badge { justify-self: start; font-size: .78rem; font-weight: 650; color: var(--on-blue); background: var(--blue); border-radius: 999px; padding: .15rem .65rem; }

/* Zwei-Spalten-Text */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split > div { display: grid; gap: .8rem; align-content: start; }
.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.checklist li { padding-left: 1.6rem; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .45em; width: .8rem; height: .8rem; border-radius: 3px; border: 2px solid var(--green); }
.callout { background: var(--blue-soft); border-radius: var(--radius); padding: 1.3rem 1.4rem; display: grid; gap: .6rem; }

/* Branchen */
.industries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; }
@media (max-width: 860px) { .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .industries { grid-template-columns: 1fr; } }
.industries > div { display: grid; gap: .3rem; border-top: 3px solid var(--green); padding-top: .8rem; }
.industries p { font-size: var(--step--1); color: var(--muted); }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; font-weight: 650; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: .85rem; font-size: 1.4rem; font-weight: 400; color: var(--blue); }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: 1.1rem; color: var(--muted); }

/* Geplante Produkte */
.soon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
@media (max-width: 860px) { .soon { grid-template-columns: 1fr; } }
.soon > div { display: grid; gap: .5rem; align-content: start; border-top: 3px solid var(--green); padding-top: 1rem; }
.status-pill { justify-self: start; font-size: .78rem; font-weight: 650; color: var(--warn); border: 1px solid currentColor; border-radius: 999px; padding: .1rem .6rem; }

.soon--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .soon--two { grid-template-columns: 1fr; } }

/* Wegweiser */
section.guide-band { padding-block: clamp(2.2rem, 1.8rem + 2vw, 3.2rem); border-top: 0; }
.guide-q { font-size: var(--step-2); margin-bottom: 1.1rem; }
.guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 860px) { .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .guide { grid-template-columns: 1fr; } }
.guide a { display: grid; gap: .15rem; padding: .95rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); min-width: 0; transition: border-color .15s, background .15s; }
.guide a:hover { border-color: var(--green); background: var(--green-soft); color: var(--ink); }
.guide strong { font-weight: 680; }
.guide span { font-size: var(--step--1); color: var(--muted); }

/* Kontakt */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
.contact-grid > * { min-width: 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.2rem; margin: 0; }
.facts dt { color: var(--muted); font-size: var(--step--1); padding-top: .15rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts a { color: var(--blue); }  /* Telefon und E-Mail im Kontaktblock als Link erkennbar */

form.contact { display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, .7rem + 1.5vw, 1.8rem); }
.field { display: grid; gap: .35rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
label { font-size: var(--step--1); font-weight: 600; }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; width: 100%;
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--muted); }
.consent input { width: auto; margin-top: .3rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: var(--step--1); min-height: 1.4em; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--ear-r); }

/* Fußzeile */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; font-size: var(--step--1); color: var(--muted); }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer a { color: var(--muted); }

/* Rechtstexte */
.legal { max-width: 72ch; }
.legal h1 { font-size: var(--step-3); margin-bottom: 1.5rem; }
.legal h2 { font-size: var(--step-1); font-stretch: 100%; margin-top: 2rem; margin-bottom: .5rem; }
.legal p, .legal ul { margin-bottom: .8rem; }
.todo { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border-left: 3px solid var(--warn); padding: .1rem .4rem; }


/* ---------- CI-Elemente aus den Logos ---------- */

/* Dreiklang wie im Signet: Grün, Grau, Dunkelblau */
.topbar { border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.topbar::after, .ci-stripe { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--green) 0 34%, var(--ci-gray) 34% 66%, #0a3c5f 66% 100%); }
.topbar::after { position: absolute; left: 0; right: 0; bottom: -4px; }

/* Überschrift von Abschnitten mit kurzem grünem Strich */
.section-head h2::after, .split > div > h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: .8rem; background: var(--green); border-radius: 2px; }

/* Hero mit Logo-Motiv im Hintergrund */
.hero { position: relative; overflow: hidden; background: var(--band); }
.hero > .wrap { position: relative; z-index: 1; }
.hero--bh::before { content: ""; position: absolute; z-index: 0; right: -6%; bottom: -18%; width: min(560px, 70vw); aspect-ratio: 146 / 133; background: url("signet-beinhauer.svg") no-repeat center / contain; opacity: .14; }
.hero--au::before { content: ""; position: absolute; z-index: 0; right: -3%; top: -6%; width: min(560px, 80vw); aspect-ratio: 420 / 240; background: url("pixel-audisys.svg") no-repeat left top / contain; transform: scaleX(-1); opacity: .3; }
.hero .figure-card { position: relative; }
.trust { border-top-color: var(--ci-gray); }
.trust strong { color: var(--head); }

/* Karten und Kacheln: Grauton der Logos statt kühlem Blau */
.figure-card, .tier, .item, form.contact, .guide a, .logo-tile, .ref-panel { border-color: var(--line); }
.band .tier, .band .item, .band form.contact, .band .figure-card, .band .guide a { background: var(--surface); }
.tier.featured { border-color: var(--green); border-width: 2px; }
.tier .badge { background: var(--green); color: #12200a; }
.callout { background: var(--surface); border-left: 4px solid var(--green); }
.compare .with { background: var(--green-soft); }
.compare .without { border-color: var(--ci-gray); background: transparent; }
.ref-panel { border-color: var(--green); }

/* Footer in Dunkelblau mit Dreiklang-Kante */
.footer { position: relative; background: var(--foot-bg); color: var(--foot-ink); border-top: 0; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--green) 0 34%, var(--ci-gray) 34% 66%, var(--foot-bg) 66% 100%); }
.footer a { color: var(--foot-ink); }
.footer a:hover { color: #ffffff; }

/* Kennzahlen (audisys: Zahlen statt Superlative) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1rem; }
.stats > div { display: grid; gap: .4rem; align-content: start; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: var(--radius); padding: 1.2rem 1.2rem 1.3rem; }
.stats strong { font-size: var(--step-3); line-height: 1; font-weight: 750; color: var(--head); font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: var(--step--1); }
.stats-note { margin-top: 1rem; color: var(--muted); font-size: var(--step--1); }

/* Kleingedrucktes unter den Paketen, ausklappbar */
.terms { margin-top: 1.2rem; border-top: 1px solid var(--line); font-size: var(--step--1); }
.terms summary { cursor: pointer; list-style: none; padding: .9rem 2rem .9rem 0; color: var(--muted); font-weight: 600; position: relative; }
.terms summary::-webkit-details-marker { display: none; }
.terms summary::after { content: "+"; position: absolute; right: .3rem; top: .65rem; font-size: 1.3rem; font-weight: 400; color: var(--blue); }
.terms[open] summary::after { content: "–"; }
.terms summary:hover { color: var(--ink); }
.terms dl { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .7rem 1.4rem; margin: 0 0 1.2rem; color: var(--muted); }
.terms dt { font-weight: 650; color: var(--ink); }
.terms dd { margin: 0; }
@media (max-width: 640px) { .terms dl { grid-template-columns: 1fr; gap: .2rem; } .terms dd { margin-bottom: .6rem; } }

/* ---------- Extras: Finder, MTK-Rechner, Selbsttest, Portal, Karte ---------- */
.finder { display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-bottom: 1.4rem; }
.band .finder { background: var(--surface); }
.finder h3 { font-size: var(--step-1); }
.finder-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1.2rem; align-items: center; }
.finder-q p { margin: 0; }
.finder-a, .check-a { display: flex; flex-wrap: wrap; gap: .4rem; }
.finder-a button, .check-a button {
  font: inherit; font-size: var(--step--1); cursor: pointer; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--ci-gray-cool); background: var(--paper); color: var(--ink);
}
.finder-a button:hover, .check-a button:hover { border-color: var(--blue); }
.finder-a button[aria-pressed="true"], .check-a button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.finder-result { display: grid; gap: .8rem; justify-items: start; border-top: 1px solid var(--line); padding-top: 1rem; }
.finder-result p { margin: 0; }
.tier.match { border: 2px solid var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.tier { transition: box-shadow .2s, border-color .2s; }
@media (max-width: 760px) { .finder-q { grid-template-columns: 1fr; } }

.ampel { border-radius: var(--radius); padding: 1rem 1.2rem; display: grid; gap: .7rem; justify-items: start; border: 1px solid var(--line); border-left-width: 5px; background: var(--surface); }
.ampel p, .ampel ul { margin: 0; }
.ampel ul { padding-left: 1.2rem; display: grid; gap: .3rem; }
.ampel--gruen { border-left-color: var(--ok); }
.ampel--gelb { border-left-color: var(--warn); }
.ampel--rot { border-left-color: #c4352b; }

.mtk-calc { display: grid; gap: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; margin-top: .6rem; }
.mtk-calc label { font-size: var(--step--1); color: var(--muted); }
.mtk-calc input[type=date] { font: inherit; padding: .55rem .7rem; border: 1px solid var(--ci-gray-cool); border-radius: 8px; background: var(--paper); color: var(--ink); max-width: 14rem; }
.mtk-calc .small { margin: 0; }

.selftest { margin-top: 2.2rem; display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, .8rem + 1.2vw, 1.8rem); }
.selftest-head { display: grid; gap: .3rem; }
.selftest-head p { margin: 0; color: var(--muted); font-size: var(--step--1); }
.check-progress { display: inline-block; margin-left: .4rem; font-weight: 650; color: var(--head); }
.check-list { margin: 0; padding: 0; list-style: none; counter-reset: q; display: grid; }
.check-list li { counter-increment: q; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--line); }
.check-list li::before { content: counter(q); font-weight: 750; color: var(--green); font-variant-numeric: tabular-nums; }
.check-list li p { margin: 0; }
.check-list li[data-antwort="ja"] p { color: var(--muted); }
@media (max-width: 760px) { .check-list li { grid-template-columns: 1.6rem minmax(0, 1fr); } .check-list .check-a { grid-column: 2; } }

.dark-band { background: #0a3c5f; color: #d7e2ea; }
.dark-band h2, .dark-band h3 { color: #ffffff; }
.dark-band .lead { color: #e6eef4; }
.dark-band .section-head h2::after, .dark-band .split > div > h2::after { background: var(--green); }
.dark-band .checklist li::before { border-color: #9fd43a; }
.dark-band .small { color: #b9c8d3; }
.dark-band .btn { background: #88bd24; color: #12200a; border-color: #88bd24; }
.portal { align-items: center; }
.portal-mock { margin: 0; display: grid; gap: .5rem; }
.portal-mock figcaption { font-size: .8rem; color: #b9c8d3; text-align: right; }
.pm-bar { display: flex; gap: .35rem; padding: .55rem .7rem; background: #e4eaef; border-radius: 12px 12px 0 0; }
.pm-bar span { width: .6rem; height: .6rem; border-radius: 50%; background: #b9c4cd; }
.pm-body { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); background: #f6f8fa; color: #1d2933; border-radius: 0 0 12px 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); font-size: .82rem; }
.pm-nav { display: grid; align-content: start; gap: .15rem; background: #ffffff; border-right: 1px solid #e3e7eb; padding: .9rem .6rem; }
.pm-nav b { font-size: .85rem; color: #0a3c5f; padding: 0 .5rem .6rem; }
.pm-nav span { padding: .35rem .5rem; border-radius: 6px; color: #5d6a75; }
.pm-nav span.on { background: #eef5dd; color: #1d2933; font-weight: 650; }
.pm-main { display: grid; gap: .8rem; padding: 1rem; align-content: start; }
.pm-hello { margin: 0; font-weight: 650; color: #0a3c5f; }
.pm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pm-tiles div { background: #ffffff; border: 1px solid #e3e7eb; border-radius: 8px; padding: .55rem .65rem; display: grid; gap: .1rem; }
.pm-tiles small { color: #5d6a75; font-size: .72rem; }
.pm-tiles strong { font-size: 1.05rem; color: #1d2933; }
.pm-tiles span { font-size: .72rem; color: #5d6a75; }
.pm-tiles .ok, .pm-list i.ok { color: #1d7a4a; }
.pm-tiles .warn, .pm-list i.warn { color: #9a5b00; }
.pm-list { display: grid; background: #ffffff; border: 1px solid #e3e7eb; border-radius: 8px; }
.pm-list div { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border-top: 1px solid #eef1f4; }
.pm-list div:first-child { border-top: 0; }
.pm-list i { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: none; }
@media (max-width: 640px) { .pm-body { grid-template-columns: 1fr; } .pm-nav { display: none; } }

.item--lager { border-color: var(--green); }
.item--lager .cat { color: var(--cyan); font-weight: 700; }

.karte { margin: 2rem 0 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.karte svg { width: 100%; max-width: 440px; height: auto; justify-self: center; }
.karte .land { fill: var(--surface); stroke: var(--ci-gray-cool); stroke-width: 1; stroke-linejoin: round; }
.karte .land--nb { fill: var(--band); }
.karte .pt-filiale { fill: var(--blue); opacity: .35; }
.karte .pt-kunde { fill: var(--green); stroke: var(--surface); stroke-width: 1; }
.karte .pt-home { fill: #c4352b; stroke: #ffffff; stroke-width: 2; }
.karte figcaption { display: grid; gap: .9rem; }
.legende { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.legende li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .7rem; align-items: center; }
.legende b { font-size: var(--step-1); color: var(--head); margin-right: .25rem; font-variant-numeric: tabular-nums; }
.legende .pt { width: .9rem; height: .9rem; border-radius: 50%; justify-self: center; }
.legende .pt-kunde { background: var(--green); }
.legende .pt-filiale { background: var(--blue); opacity: .45; width: .6rem; height: .6rem; }
.legende .pt-home { background: #c4352b; border: 2px solid #fff; box-shadow: 0 0 0 1px #c4352b; }
@media (max-width: 760px) { .karte { grid-template-columns: 1fr; } }
.stats strong { font-size: clamp(1.9rem, 1.3rem + 1.4vw, 2.6rem); white-space: nowrap; }
.check-progress { display: block; margin: .2rem 0 0; }

/* Karte: Filialen gut sichtbar, Legende als Schalter */
.karte .pt-filiale { fill: #2f6fa8; opacity: .7; }
.karte svg.ohne-filiale .pt-filiale, .karte svg.ohne-kunde .pt-kunde { display: none; }
.legende .pt-filiale { background: #2f6fa8; opacity: .8; width: .65rem; height: .65rem; }
.legende button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .7rem; align-items: center; width: 100%; cursor: pointer; padding: .3rem .5rem; margin: -.3rem -.5rem; border-radius: 8px; }
.legende button:hover { background: var(--blue-soft); }
.legende button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.legende button[aria-pressed="false"] { opacity: .45; }
.legende button[aria-pressed="false"] .pt { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .karte .pt-filiale { fill: #7fb2de; opacity: .75; } :root:not([data-theme="light"]) .legende .pt-filiale { background: #7fb2de; } }
:root[data-theme="dark"] .karte .pt-filiale { fill: #7fb2de; opacity: .75; }
:root[data-theme="dark"] .legende .pt-filiale { background: #7fb2de; }
.legende li.schalter { display: block; }
.mtk-form { display: grid; gap: .8rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.mtk-form[hidden] { display: none; }
.mtk-form h4 { margin: 0; font-size: var(--step-0); }
.mtk-form .small { margin: 0; }
.mtk-form textarea { min-height: 4.5rem; }
.mtk-form .btn { justify-self: start; }

/* Ausstattungs-Planer (audiSys) */
.planer { display: grid; gap: 1.2rem; }
.pl-modus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pl-modus button { font: inherit; text-align: left; cursor: pointer; display: grid; gap: .2rem; padding: 1rem 1.2rem; border-radius: var(--radius);
  border: 2px solid var(--line); background: var(--surface); color: var(--ink); }
.pl-modus button span { font-size: var(--step--1); color: var(--muted); }
.pl-modus button[aria-pressed="true"] { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; }
.planer fieldset { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1rem 1.2rem 1.2rem; display: grid; gap: .55rem; align-content: start; min-width: 0; }
.planer legend { font-weight: 700; color: var(--head); padding: 0 .4rem; }
.pl-num { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.pl-num label { font-weight: 600; }
.pl-num label small { display: block; font-weight: 400; color: var(--muted); }
.pl-num--klein label { font-weight: 500; font-size: var(--step--1); }
.pl-step { display: inline-flex; align-items: center; border: 1px solid var(--ci-gray-cool); border-radius: 999px; overflow: hidden; background: var(--paper); }
.pl-step button { font: inherit; width: 2.2rem; height: 2.2rem; border: 0; background: transparent; color: var(--head); cursor: pointer; font-size: 1.15rem; }
.pl-step button:hover { background: var(--blue-soft); }
.pl-step input { width: 2.8rem; text-align: center; border: 0; border-radius: 0; padding: .3rem 0; background: transparent; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.pl-step input::-webkit-outer-spin-button, .pl-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl-audio { display: grid; gap: .45rem; }
.pl-extras { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; border-top: 1px solid var(--line); padding-top: .8rem; font-size: var(--step--1); }
.pl-extras label { display: inline-flex; gap: .4rem; align-items: center; font-weight: 500; }
.pl-extras input { width: auto; }
.pl-lager { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--cyan); background: var(--green-soft); border-radius: 999px; padding: .05rem .45rem; vertical-align: middle; }
.pl-ergebnis { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 1.2rem 1.4rem; display: grid; gap: 1rem; }
.pl-ergebnis-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.pl-ergebnis-head p { margin: 0; }
.pl-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 1rem 2rem; }
.pl-liste h4 { margin: 0 0 .35rem; font-size: var(--step-0); color: var(--head); }
.pl-liste ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: var(--step--1); }
.pl-liste li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .3rem; }
.pl-n { font-weight: 700; color: var(--head); font-variant-numeric: tabular-nums; }
.pl-ergebnis .small { margin: 0; }
@media (max-width: 860px) { .pl-grid, .pl-modus { grid-template-columns: 1fr; } }
.planer[data-aktiv="unternehmer"] .pl-audio .pl-lager { display: none; }
.pl-extras--liste { flex-direction: column; border-top: 0; padding-top: 0; gap: .7rem; font-size: var(--step-0); }

/* Google-Bewertungen (Link, kein Widget) */
.g-bewertung { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .9rem; font-size: var(--step--1); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem; background: var(--surface); }
.g-bewertung:hover { border-color: var(--blue); }
.g-bewertung[hidden] { display: none; }
.g-sterne { letter-spacing: 1px; font-size: 1.05rem; }
.g-sterne .st { color: var(--ci-gray-cool); }
.g-sterne .st.on { color: #f4b400; }
.g-sterne .st.halb { background: linear-gradient(90deg, #f4b400 50%, var(--ci-gray-cool) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-bewertung { justify-self: start; width: max-content; max-width: 100%; }
.pl-select { width: auto; min-width: 11rem; padding: .45rem .7rem; }

/* Terminbuchung */
.termin-box { display: grid; gap: .6rem; justify-items: start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.termin-box[hidden] { display: none; }
.termin-box h3, .termin-box p { margin: 0; }
[data-termin-nur][hidden] { display: none; }

/* Referenz-Logos ohne Klick (nur Logos, keine Projektbeschreibung) */
.logo-tile--fest { cursor: default; }
.logo-tile.logo-tile--fest:hover { transform: none; box-shadow: none; border-color: var(--line); }
.logo-tile--fest .logo-name { overflow-wrap: normal; word-break: normal; hyphens: manual; text-align: center; }

/* Logo- und Partnerkacheln: gleiche Breite wie im Raster, unvollständige letzte Reihe mittig (David, 21.10.2026) */
.logos, .partner-row { display: flex; flex-wrap: wrap; justify-content: center; --spalten: 6; --abstand: .8rem; gap: var(--abstand); }
.partner-row { --abstand: .7rem; }
.logos > *, .partner-row > * { flex: 0 0 calc((100% - (var(--spalten) - 1) * var(--abstand)) / var(--spalten)); min-width: 0; }
@media (max-width: 1100px) { .logos, .partner-row { --spalten: 5; } }
@media (max-width: 920px) { .logos, .partner-row { --spalten: 4; } }
@media (max-width: 740px) { .logos, .partner-row { --spalten: 3; } }
@media (max-width: 560px) { .logos, .partner-row { --spalten: 2; } }