/* =========================================================
   Falke Systems GmbH — Basis-Stylesheet
   Design-System nach Corporate Design (Brand Guideline 2026)
   ========================================================= */

/* Lokal eingebundene Schriftarten (kein externer Aufruf mehr an Google Fonts,
   dadurch keine Übertragung der Besucher-IP an Google, siehe DSGVO-Hinweis
   in security_review.md). Variable Fonts, daher genügt je eine Datei für
   alle genutzten Schriftschnitte. Lizenz: SIL Open Font License 1.1,
   siehe assets/fonts/LICENSES/. */
@font-face {
  font-family: "Host Grotesk";
  src: url("../fonts/host-grotesk-variable.woff2") format("woff2-variations"),
    url("../fonts/host-grotesk-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-variable.woff2") format("woff2-variations"),
    url("../fonts/montserrat-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primärfarben */
  --color-mint: #7bc89e;
  --color-teal: #14a295;
  --color-white: #ffffff;

  /* Sekundärfarben */
  --color-sage: #b7d9c1;
  --color-cream: #f4e9e1;
  --color-lilac: #ead0e8;

  /* Hintergründe (dunkle Basis lt. Corporate Design) */
  --bg-base: #0b1410;
  --bg-elevated: #101d17;
  --bg-card: #13221b;
  --border-subtle: rgba(255, 255, 255, 0.12);

  /* Textfarben */
  --text-primary: #ffffff;
  --text-muted: #c7d6cd;
  --text-faint: #8ea298;

  /* Typografie */
  --font-heading: "Host Grotesk", "Arial Narrow", Arial, sans-serif;
  --font-body: "Montserrat", "Segoe UI", Arial, sans-serif;

  /* Abstände */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max-width: 1180px;

  /* Verlauf für Akzente (Icon-Farbverlauf des Logos) */
  --gradient-brand: linear-gradient(135deg, #70d9a3 0%, #19a295 100%);

  /* Signalfarbe für Notfall-Elemente */
  --color-alert: #e2574c;

  /* Text-Akzentfarben (getrennt von Flächenfarben, wegen Kontrast im hellen Modus) */
  --accent-text: var(--color-mint);
  --alert-text: var(--color-alert);

  color-scheme: dark;
}

/* ---------- Heller Modus ---------- */

[data-theme="light"] {
  --bg-base: #f5f8f6;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border-subtle: rgba(11, 20, 16, 0.12);

  --text-primary: #0b1410;
  --text-muted: #3c4a42;
  --text-faint: #63756b;

  --accent-text: #0f766e;
  --alert-text: #b8392e;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; }

p {
  margin: 0 0 1em;
  color: var(--text-muted);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.9em;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.section--alt {
  background-color: var(--bg-elevated);
  background-image: url("../img/patterns/wave-band-soft.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--gradient-brand);
  color: #06120d;
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.btn-secondary:hover {
  border-color: var(--color-mint);
  color: var(--accent-text);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--bg-base);
  background-image: url("../img/patterns/wave-band-soft.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  /* Eigene, etwas größere Breite als der Standard-Content-Container: die
     Hauptnavigation braucht seit der Ergänzung um "Cloud-Telefonie" mehr Platz
     als die 1180px-Textspalte hergibt. Ohne diese Ausnahme quetscht Flexbox
     sonst das Logo zusammen (siehe Umschaltpunkt unten). Bewusst nur knapp
     über dem tatsächlichen Platzbedarf (rund 1336px auf der englischen Seite),
     damit Logo und Menü nah beieinander bleiben statt durch space-between
     auseinandergezogen zu werden. */
  max-width: 1400px;
}

.brand {
  display: flex;
  align-items: center;
  /* Logo darf durch die Flex-Berechnung nie schrumpfen, auch wenn die
     Navigation eng wird. */
  flex-shrink: 0;
}

.brand img {
  height: 64px;
  width: auto;
}

/* Logo-Variante je Farbschema: hell hinterlegtes Logo nur im hellen Modus zeigen */
.site-logo--light { display: none; }
[data-theme="light"] .site-logo--dark { display: none; }
[data-theme="light"] .site-logo--light { display: block; }

.header-right {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1rem);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: clamp(0.5rem, 1.2vw, 1rem);
  padding-left: clamp(0.5rem, 1.2vw, 1rem);
  border-left: 1px solid var(--border-subtle);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--color-mint);
  color: var(--accent-text);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 0.9em;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  border-color: var(--color-mint);
  color: var(--accent-text);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  width: 42px;
  height: 42px;
  color: var(--text-primary);
  font-size: 1.3rem;
  cursor: pointer;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.6rem);
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--accent-text);
}

.main-nav .btn {
  margin-left: 0.5rem;
  padding: 0.75em 1.2em;
  white-space: nowrap;
}

@media (max-width: 1400px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .main-nav {
    position: fixed;
    inset: 68px 0 0 0;
    background: var(--bg-base);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem var(--gutter);
    gap: 1.4rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .main-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav a {
    font-size: 1.1rem;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 5rem);
  background-image: url("../img/patterns/wave-band-soft.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 60%;
  background: radial-gradient(60% 60% at 70% 20%, rgba(20, 162, 149, 0.28), transparent 70%);
  pointer-events: none;
}

[data-theme="light"] .hero::before {
  background: radial-gradient(60% 60% at 70% 20%, rgba(20, 162, 149, 0.16), transparent 70%);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 42ch;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.hero__panel {
  border: 1px solid var(--border-subtle);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-elevated));
  border-radius: 20px;
  padding: 2rem;
}

.hero__panel dl {
  display: grid;
  gap: 1.4rem;
  margin: 0;
}

.hero__panel dt {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--accent-text);
}

.hero__panel dd {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Cards / Grid ---------- */

.grid {
  display: grid;
  gap: 1.5rem;
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.8rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
  border-color: rgba(123, 200, 158, 0.5);
  transform: translateY(-2px);
}

.card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.1rem;
}

.card__icon img {
  width: 100%;
  height: 100%;
}

.card__icon--lg {
  width: 140px;
  height: 140px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.leistung-heading {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  position: sticky;
  top: 6rem;
}

.leistung-heading h2 {
  position: static;
  margin: 0;
}

@media (max-width: 480px) {
  .leistung-heading {
    gap: 1.25rem;
  }

  .card__icon--lg {
    width: 96px;
    height: 96px;
  }
}

.card h3 {
  margin-bottom: 0.5em;
  color: var(--text-primary);
}

.card p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

.card__subtitle {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: -0.3em 0 0.7em;
}

/* ---------- Branchenkarten (Themenliste innerhalb einer Card) ---------- */

.topic-list {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.topic-list li {
  position: relative;
  padding-left: 1.2em;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.topic-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-mint);
}

/* ---------- Zielgruppen-Streifen ---------- */

.audience-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.audience-strip li {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0.55em 1.2em;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ---------- Zwei-Spalten Textblock (Technik-Fundament + Nutzen Stil) ---------- */

.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

.split h2 {
  position: sticky;
  top: 6rem;
}

/* ---------- Prozess-Schritte ---------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
}

.steps li {
  counter-increment: step;
  background: var(--bg-card);
  padding: 1.6rem clamp(1.2rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: baseline;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--accent-text);
}

.steps h3 {
  margin-bottom: 0.3em;
}

.steps p {
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- Trust-Leiste ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: left;
}

@media (max-width: 700px) {
  .stat-row { grid-template-columns: 1fr; }
}

.stat-row .stat dt {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--accent-text);
}

.stat-row .stat dd {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---------- Formular ---------- */

.form-grid {
  display: grid;
  gap: 1.2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4em;
}

input,
textarea,
select {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.8em 1em;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-mint);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.form-note {
  font-size: 0.85rem;
  color: var(--text-faint);
}

.form-status {
  display: none;
  border-radius: 10px;
  padding: 0.9em 1.1em;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-success {
  background: rgba(123, 200, 158, 0.15);
  border: 1px solid var(--color-mint);
  color: var(--accent-text);
}

.form-status.is-error {
  background: rgba(234, 208, 232, 0.1);
  border: 1px solid var(--color-lilac);
  color: var(--color-lilac);
}

/* ---------- Kontakt-Infoblock ---------- */

.contact-info {
  display: grid;
  gap: 1.4rem;
}

.contact-info dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 0.3em;
}

.contact-info dd {
  margin: 0;
  font-size: 1.05rem;
}

/* ---------- CTA-Band ---------- */

.cta-band {
  background: url("../img/patterns/wave-band.svg") center/cover no-repeat,
    linear-gradient(120deg, #0f2a20, #0b1410 70%);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  color: var(--color-white);
}

/* Fester dunkler Hintergrund, unabhängig vom Farbschema: Text bleibt immer hell */
.cta-band .eyebrow { color: var(--color-mint); }
.cta-band p { color: rgba(255, 255, 255, 0.78); }

.cta-band h2 {
  max-width: 24ch;
  margin-inline: auto;
}

.cta-band .btn {
  margin-top: 1rem;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 3rem 0 2rem;
  background: var(--bg-elevated);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 1em;
}

.footer-grid ul {
  display: grid;
  gap: 0.6rem;
}

.footer-grid a {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.footer-grid a:hover {
  color: var(--accent-text);
}

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.footer-bottom .legal-links {
  display: flex;
  gap: 1.2rem;
}

/* ---------- Seiten-Hero (Unterseiten) ---------- */

.page-hero {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--border-subtle);
  background-image: url("../img/patterns/wave-band-soft.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.page-hero .eyebrow { margin-bottom: 0.6em; }

.page-hero p {
  max-width: 60ch;
  font-size: 1.05rem;
}

/* ---------- Legal-Text-Seiten ---------- */

.legal-content h2 {
  margin-top: 2em;
  font-size: 1.3rem;
}

.legal-content p,
.legal-content li {
  color: var(--text-muted);
  font-size: 0.98rem;
}

.legal-content ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
  list-style: disc;
}

.placeholder {
  color: var(--color-lilac);
  background: rgba(234, 208, 232, 0.12);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

.notice-box {
  border: 1px solid rgba(234, 208, 232, 0.4);
  background: rgba(234, 208, 232, 0.08);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  font-size: 0.9rem;
  color: var(--color-lilac);
  margin-bottom: 2rem;
}

/* ---------- Callbar (Kontakt-Schnellzugriff) ---------- */

.callbar {
  position: fixed;
  top: 50%;
  right: clamp(0.75rem, 2vw, 1.5rem);
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.callbar__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0.65em 1.1em 0.65em 0.75em;
  color: var(--text-primary);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.callbar__item:hover,
.callbar__item:focus-visible {
  border-color: var(--color-mint);
  background: var(--bg-elevated);
  transform: translateX(-2px);
}

.callbar__icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
}

.callbar__icon svg {
  width: 100%;
  height: 100%;
}

.callbar__label {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.callbar__item--emergency {
  border-color: rgba(226, 87, 76, 0.55);
  color: var(--alert-text);
  background: rgba(226, 87, 76, 0.08);
}

.callbar__item--emergency:hover,
.callbar__item--emergency:focus-visible {
  border-color: var(--color-alert);
  background: rgba(226, 87, 76, 0.16);
}

@media (max-width: 780px) {
  .callbar {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    transform: none;
    flex-direction: row;
    gap: 0;
    padding: 0.4rem calc(var(--gutter) * 0.4);
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
  }

  .callbar__item {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.2rem;
    box-shadow: none;
    text-align: center;
  }

  .callbar__item--emergency {
    background: none;
  }

  .callbar__icon {
    margin: 0 auto;
  }

  .callbar__label {
    font-size: 0.68rem;
    white-space: normal;
    line-height: 1.2;
  }

  body {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
}

/* ---------- Notfallseite ---------- */

.emergency-callout {
  border: 1px solid rgba(226, 87, 76, 0.4);
  background: rgba(226, 87, 76, 0.08);
  border-radius: 16px;
  padding: 1.8rem clamp(1.4rem, 4vw, 2.2rem);
  margin-bottom: 2.5rem;
}

.emergency-callout .eyebrow {
  color: var(--alert-text);
}

.emergency-callout h2 {
  margin-bottom: 0.4em;
}

.emergency-callout p {
  margin-bottom: 1.2em;
}

.emergency-callout .btn-primary {
  background: var(--color-alert);
  color: var(--color-white);
}

/* ---------- Preisrechner ---------- */

.price-slider {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 2.5rem;
}

.price-slider__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.price-slider__row label {
  font-weight: 600;
  color: var(--text-primary);
}

.price-slider__value {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-text);
}

.price-slider input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border-subtle);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.price-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-mint);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--color-mint);
  cursor: pointer;
}

.price-slider input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-mint);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--color-mint);
  cursor: pointer;
}

.price-slider__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 860px) {
  .price-cards { grid-template-columns: 1fr; }
}

.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.8rem clamp(1.4rem, 3vw, 2rem) 2rem;
  display: flex;
  flex-direction: column;
}

.price-card__tagline {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.3rem;
  height: 6.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.price-card__rate {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-bottom: 0.2em;
}

.price-card__total {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.price-card__total span {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-faint);
}

.price-card__gross {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 1.4rem;
}

.price-note {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-top: 1.2rem;
}

/* ---------- Leistungsvergleich (Tabelle) ---------- */

.compare-category {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.compare-category:first-of-type {
  margin-top: 0;
}

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9rem;
  min-width: 700px;
}

.compare-table th,
.compare-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.compare-table th:not(:first-child),
.compare-table td:not(:first-child) {
  width: 130px;
  text-align: center;
}

.compare-table thead th {
  background: var(--bg-elevated);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-primary);
  position: sticky;
  top: 0;
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody tr:hover {
  background: var(--bg-elevated);
}

.compare-table td:first-child {
  color: var(--text-muted);
}

.compare-table .yes {
  color: var(--accent-text);
  font-weight: 700;
}

.compare-table .partial {
  color: var(--text-faint);
  font-size: 0.82rem;
}

.compare-table .no {
  color: var(--text-faint);
}

/* ---------- Zubuchbare Leistungen ---------- */

.addon-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 2rem;
  margin-top: 1.5rem;
}

@media (max-width: 700px) {
  .addon-list { grid-template-columns: 1fr; }
}

.addon-list li {
  position: relative;
  padding-left: 1.2em;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.92rem;
  color: var(--text-muted);
}

.addon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-mint);
}