/* ==========================================================================
   CSF ERP² – Produktseite
   Farbschema abgeleitet aus der ERP-Oberflaeche (public/style/style.css)
   und dem Handbuch-Theme (erp2-docs/docs/stylesheets/erp.css).
   Keine externen Ressourcen: keine Webfonts, keine CDNs.
   ========================================================================== */

:root {
  /* Marke */
  --rot:            #dd0000;
  --rot-dunkel:     #a80000;   /* Textfarbe auf Weiss – #dd0000 kontrastiert zu schwach */
  --rot-hell:       #ff3b3b;
  --anthrazit:      #282828;
  --anthrazit-hell: #3e3e3e;

  /* Flaechen und Text */
  --bg:             #ffffff;
  --bg-gedaempft:   #f7f7f8;
  --bg-karte:       #ffffff;
  --linie:          #e3e3e6;
  --linie-stark:    #cfcfd4;
  --text:           #26262b;
  --text-leise:     #5f5f6b;

  /* Typografie */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Abstaende */
  --gutter:   16px;
  --breite:   1140px;
  --sektion:  72px;

  /* Form */
  --radius:      10px;
  --radius-klein: 6px;
  --schatten:      0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05);
  --schatten-hoch: 0 2px 6px rgba(0,0,0,.07), 0 12px 32px rgba(0,0,0,.10);
}

/* --------------------------------------------------------------- Basis --- */

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

html {
  scroll-behavior: smooth;
  /* Sticky-Header darf Ankerziele nicht verdecken */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

a { color: var(--rot-dunkel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rot); }

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

:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: var(--gutter); z-index: 200;
  background: #fff; color: var(--anthrazit);
  padding: 10px 16px; border-radius: var(--radius-klein);
  transition: top .15s ease;
}
.skip-link:focus { top: 10px; }

/* ------------------------------------------------------------- Layout --- */

.container {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--sektion); }
section.gedaempft { background: var(--bg-gedaempft); }
section.dunkel { background: var(--anthrazit); color: #f0f0f2; }
section.dunkel h2 { color: #fff; }
section.dunkel a { color: #ffb3b3; }

.sektionskopf { max-width: 720px; margin-bottom: 44px; }
.sektionskopf.mittig { margin-inline: auto; text-align: center; }
.sektionskopf p { color: var(--text-leise); font-size: 1.1rem; margin-bottom: 0; }
section.dunkel .sektionskopf p { color: #c4c4cc; }

.augenbraue {
  display: block;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rot-dunkel);
  margin-bottom: 10px;
}
section.dunkel .augenbraue { color: var(--rot-hell); }

.raster { display: grid; gap: 22px; }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px;
  font: inherit; font-weight: 600; line-height: 1.2;
  border: 2px solid transparent; border-radius: var(--radius-klein);
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-primaer { background: var(--rot); color: #fff; border-color: var(--rot); }
.btn-primaer:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: #fff; }

.btn-sekundaer { background: transparent; color: var(--anthrazit); border-color: var(--linie-stark); }
.btn-sekundaer:hover { border-color: var(--anthrazit); color: var(--anthrazit); background: #fff; }

.btn-block { width: 100%; }
.btn-klein { padding: 9px 16px; font-size: .92rem; }

.btn svg { flex: none; }

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

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--anthrazit);
  color: #fff;
  border-bottom: 3px solid var(--rot);
}
.kopf .container {
  display: flex; align-items: center; gap: 20px;
  min-height: 72px;
}

/* Wortmarke: das SVG traegt den CSF-Schriftzug, "ERP²" steht als Text
   daneben – zusammen ergibt das "CSF ERP²". */
.marke {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; text-decoration: none;
  margin-right: auto;
}
.marke svg { height: 22px; width: auto; color: #fff; }
.marke-wort { font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em; line-height: 1; }
.marke-wort sup { font-size: .58em; line-height: 0; }
.marke .marke-zusatz {
  display: none;
  margin-left: 10px; padding-left: 10px;
  border-left: 1px solid #55555e;
  font-weight: 400; font-size: .82rem; color: #b6b6c0;
  align-self: center;
}

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid #55555e; border-radius: var(--radius-klein);
  color: #fff; cursor: pointer;
}
.nav-toggle .balken, .nav-toggle .balken::before, .nav-toggle .balken::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle .balken { position: relative; }
.nav-toggle .balken::before, .nav-toggle .balken::after { content: ""; position: absolute; left: 0; }
.nav-toggle .balken::before { top: -6px; }
.nav-toggle .balken::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] .balken { background: transparent; }
.nav-toggle[aria-expanded="true"] .balken::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .balken::after  { transform: translateY(-6px) rotate(-45deg); }

.nav { display: none; }
.nav.offen {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--anthrazit-hell);
  border-bottom: 1px solid #55555e;
  padding: 8px var(--gutter) 20px;
}
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 12px 4px;
  color: #e6e6ea; text-decoration: none; font-weight: 500;
  border-bottom: 1px solid #4b4b55;
}
.nav a:hover, .nav a.aktiv { color: #fff; }
.nav .nav-cta { margin-top: 16px; }
.nav .nav-cta a { border-bottom: 0; }

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

.hero {
  background: linear-gradient(170deg, #fdf3f3 0%, #ffffff 58%);
  border-bottom: 1px solid var(--linie);
  padding-block: 56px 64px;
}
.hero h1 { margin-bottom: 20px; }
.hero h1 .akzent { color: var(--rot-dunkel); }
.hero-text { max-width: 680px; }
.hero-lead {
  font-size: clamp(1.05rem, .98rem + .35vw, 1.28rem);
  color: var(--text-leise);
  margin-bottom: 28px;
}
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.hero-belege {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  list-style: none; margin: 0; padding: 0;
  font-size: .95rem; color: var(--text-leise);
}
.hero-belege li { display: flex; align-items: center; gap: 8px; }
.hero-belege svg { color: var(--rot); flex: none; }

/* --------------------------------------------------------- Nutzenbox --- */

.nutzen {
  background: var(--bg-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.nutzen h3 { margin-bottom: 8px; font-size: 1.1rem; }
.nutzen p { margin: 0; color: var(--text-leise); font-size: .98rem; }
.nutzen-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: var(--radius-klein);
  background: #fdecec; color: var(--rot-dunkel);
}

/* --------------------------------------------- Funktionsmatrix --- */
/* Ersetzt die frueheren Modulkarten UND die Vergleichstabelle: eine Zeile
   je Funktionsbereich, die Spalten sagen in welcher Edition er steckt, der
   Klick zeigt die Einzelheiten. <details> braucht dafuer kein JavaScript. */

.matrix {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}

.matrix-kopf {
  display: none;
  background: var(--anthrazit); color: #fff;
  padding: 14px 18px;
  font-size: .95rem; font-weight: 600;
}
.matrix-kopf small {
  display: block;
  font-weight: 400; font-size: .78rem; color: #b6b6c0;
  margin-top: 2px;
}

.matrix-zeile { border-top: 1px solid var(--linie); }
.matrix-zeile:first-of-type { border-top: 0; }

.matrix-zeile summary {
  list-style: none; cursor: pointer;
  display: grid; gap: 10px 12px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 14px 18px;
}
.matrix-modul { grid-column: 1 / -1; }
.matrix-zeile summary::-webkit-details-marker { display: none; }
.matrix-zeile summary:hover { background: #fafafb; }
.matrix-zeile[open] summary { background: #fafafb; }

.matrix-modul { display: flex; align-items: center; gap: 12px; min-width: 0; }
.matrix-wert { justify-content: flex-start; }
.matrix-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-klein);
  background: #fdecec; color: var(--rot-dunkel);
}
.matrix-titel { font-weight: 600; }

/* Aufklapp-Pfeil rechts neben dem Titel */
.matrix-modul::after {
  content: ""; flex: none;
  width: 8px; height: 8px; margin-left: 4px;
  border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.matrix-zeile[open] .matrix-modul::after { transform: rotate(-135deg) translate(-2px, -2px); }

.matrix-wert { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
/* Schmale Schirme haben keine Spaltenkoepfe – dort steht die Edition am Wert. */
.matrix-wert::before {
  content: attr(data-ed);
  font-size: .82rem; color: var(--text-leise);
}

.matrix-detail { padding: 0 18px 18px; }
.matrix-detail ul { list-style: none; margin: 0; padding: 0; font-size: .96rem; color: var(--text-leise); }
.matrix-detail li { position: relative; padding-left: 18px; margin-bottom: 7px; }
.matrix-detail li:last-child { margin-bottom: 0; }
.matrix-detail li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rot);
}

.matrix-fuss {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 28px;
}

.ja   { color: #1c7a44; }
.nein { color: #8a8a93; }

/* ------------------------------------------------------- E-Rechnung --- */

.erechnung-inhalt { display: grid; gap: 34px; align-items: center; }
.erechnung-liste { list-style: none; padding: 0; margin: 0; }
.erechnung-liste li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid #45454f;
}
.erechnung-liste li:first-child { border-top: 0; }
.erechnung-liste svg { flex: none; color: var(--rot-hell); margin-top: 3px; }
.erechnung-liste strong { display: block; color: #fff; }
.erechnung-liste span { color: #c4c4cc; font-size: .95rem; }

.formate {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; padding: 0; margin: 20px 0 0;
}
.formate li {
  padding: 7px 14px;
  border: 1px solid #55555e; border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: #e6e6ea;
}

/* -------------------------------------------------------- Preise --- */

/* Umschalter fuer die Zahlweise. Ohne JavaScript waere er wirkungslos, daher
   ist er dann ausgeblendet – die Karten zeigen den beworbenen Jahrespreis. */
.zahlweise-wrap { text-align: center; margin-bottom: 34px; }
.zahlweise { display: none; }
.js .zahlweise {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: #fff; border: 1px solid var(--linie); border-radius: 999px;
}
.zahl-btn {
  padding: 9px 20px;
  font: inherit; font-size: .95rem; font-weight: 600;
  background: transparent; color: var(--text);
  border: 0; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.zahl-btn[aria-pressed="true"] { background: var(--anthrazit); color: #fff; }
.zahlweise-hinweis {
  max-width: 460px; margin: 14px auto 0;
  font-size: .92rem; color: var(--text-leise);
}

.preis-einrichtung {
  font-size: .9rem; color: var(--text-leise);
  margin: 0 0 8px;
}

.preis-kuendigung {
  font-size: .9rem; font-weight: 600;
  color: var(--rot-dunkel);
  margin: 0 0 22px;
}

.preise { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); max-width: 820px; margin-inline: auto; }

.preiskarte {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--schatten);
}
.preiskarte.empfohlen {
  border-color: var(--rot);
  box-shadow: var(--schatten-hoch), inset 0 0 0 1px var(--rot);
}
.preis-tipp {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  background: var(--rot); color: #fff;
  padding: 4px 14px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.preiskarte h3 { font-size: 1.35rem; margin-bottom: 4px; }
.preiskarte .fuer { color: var(--text-leise); font-size: .95rem; margin-bottom: 20px; min-height: 3em; }

.preis-zahl { display: flex; align-items: baseline; gap: 6px; }
.preis-zahl .betrag { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.preis-zahl .waehrung { font-size: 1.4rem; font-weight: 700; }
.preis-zahl .preis-stern { font-size: 1.1rem; font-weight: 700; color: var(--text-leise); align-self: flex-start; margin-left: -2px; }
.preis-takt { color: var(--text-leise); font-size: .92rem; line-height: 1.45; margin: 10px 0 8px; }

.preis-umfang {
  font-size: .96rem; color: var(--text-leise);
  padding-top: 18px; border-top: 1px solid var(--linie);
  margin: 0 0 18px;
}
.preis-umfang a { display: inline-block; margin-top: 4px; font-weight: 600; }

.preis-liste { list-style: none; margin: 0 0 26px; padding: 0; font-size: .96rem; }
.preis-liste li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.preis-liste svg { flex: none; color: #1c7a44; margin-top: 4px; }
.preis-liste .aus { color: var(--text-leise); }
.preis-liste .aus svg { color: #8a8a93; }
.preiskarte .btn { margin-top: auto; }

/* Gleiche vertikale Hoehe in beiden Preiskarten: Die Beschreibungstexte
   ueber dem Preis sind unterschiedlich lang (Lite drei Zeilen, Komplett
   zwei), wodurch Betrag, Kuendigungshinweis und Leistungsliste sonst
   gegeneinander verrutschen. Mit subgrid teilen sich beide Karten die
   Zeilen des aeusseren Rasters, jede Zeile ist damit so hoch wie ihr
   hoechster Inhalt – und alles steht auf einer Linie.
   Greift erst, wenn zwei Spalten sicher nebeneinander passen; darunter
   stehen die Karten untereinander, dort gibt es nichts auszurichten. Der
   Flex-Aufbau bleibt als Rueckfall fuer Browser ohne subgrid bestehen.

   ACHTUNG: Die 9 ist die Anzahl der Kindelemente je Karte (h3, .fuer,
   .preis-zahl, .preis-takt, .preis-einrichtung, .preis-kuendigung,
   .preis-umfang, .preis-liste, .btn – .preis-tipp ist absolut
   positioniert und zaehlt nicht mit). Kommt eine Zeile dazu oder faellt
   eine weg, muss sie hier an beiden Stellen mitgezogen werden, sonst
   rutscht das letzte Element aus dem Raster und ueberlappt. */
@media (min-width: 660px) {
  @supports (grid-template-rows: subgrid) {
    .preise { grid-template-rows: repeat(9, auto); row-gap: 0; }

    .preiskarte {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 9;
      gap: 0;
    }

    /* Die Zeilenhoehe kommt jetzt aus dem Raster, nicht mehr aus
       Mindesthoehe und automatischem Aussenabstand. */
    .preiskarte .fuer { min-height: 0; }
    .preiskarte .btn { margin-top: 0; align-self: end; }
  }
}

.preis-fussnote { text-align: center; color: var(--text-leise); font-size: .92rem; margin: 26px auto 0; max-width: 640px; }

/* ---------------------------------------------------------- Demo --- */

.demokarte {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden;
}
.demokarte-text { padding: 24px 22px; display: flex; flex-direction: column; flex: 1; }
.demokarte h3 { margin-bottom: 6px; }
.demokarte p { color: var(--text-leise); font-size: .97rem; }
.demokarte .btn { margin-top: auto; align-self: flex-start; }

/* Browser-Attrappe: reines CSS, kein Bild noetig.
   Austauschpunkt fuer einen echten Screenshot ist .mockup-bild im Markup. */
.mockup { background: #e9e9ee; border-bottom: 1px solid var(--linie); }
.mockup-leiste {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: #dcdce2;
}
.mockup-punkte { display: flex; gap: 5px; }
.mockup-punkte i { width: 9px; height: 9px; border-radius: 50%; background: #b6b6c0; }
.mockup-url {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #fff; border-radius: 4px;
  padding: 3px 10px; font-size: .74rem; color: var(--text-leise);
}
.mockup-buehne { aspect-ratio: 16 / 10; background: #fff; position: relative; overflow: hidden; }
.mockup-bild { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

/* Angedeutete ERP-Oberflaeche hinter dem Bild – sichtbar, solange kein
   Screenshot hinterlegt ist (das img traegt dann kein src-Attribut). */
.mockup-skizze { position: absolute; inset: 0; display: flex; flex-direction: column; }
.mockup-topbar {
  height: 15%; background: var(--anthrazit);
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border-bottom: 3px solid var(--rot);
}
.mockup-topbar .logo { color: #fff; font-weight: 700; font-size: .7rem; letter-spacing: .02em; }
.mockup-topbar .tab { height: 6px; width: 34px; border-radius: 3px; background: #55555e; }
.mockup-koerper { flex: 1; display: flex; }
.mockup-seite { width: 22%; background: #f2f2f5; border-right: 1px solid var(--linie); padding: 8px 7px; }
.mockup-seite i, .mockup-zeile i { display: block; border-radius: 3px; background: #d8d8de; }
.mockup-seite i { height: 6px; margin-bottom: 7px; }
.mockup-seite i:nth-child(1) { width: 80%; background: var(--rot); opacity: .75; }
.mockup-seite i:nth-child(2) { width: 65%; }
.mockup-seite i:nth-child(3) { width: 74%; }
.mockup-seite i:nth-child(4) { width: 58%; }
.mockup-seite i:nth-child(5) { width: 70%; }
.mockup-seite i:nth-child(6) { width: 50%; }
.mockup-inhalt { flex: 1; padding: 10px; }
.mockup-kachelreihe { display: flex; gap: 7px; margin-bottom: 10px; }
.mockup-kachelreihe span {
  flex: 1; height: 26px; border-radius: 4px;
  background: #f2f2f5; border: 1px solid var(--linie);
  border-left: 3px solid var(--rot);
}
.mockup-zeile { display: flex; gap: 7px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eeeef1; }
.mockup-zeile i:nth-child(1) { width: 18%; height: 6px; }
.mockup-zeile i:nth-child(2) { width: 42%; height: 6px; }
.mockup-zeile i:nth-child(3) { width: 14%; height: 6px; margin-left: auto; }

.demo-hinweis {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 760px; margin: 30px auto 0; padding: 16px 18px;
  background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--rot);
  border-radius: var(--radius-klein);
  font-size: .95rem; color: var(--text-leise);
}
.demo-hinweis svg { flex: none; color: var(--rot-dunkel); margin-top: 3px; }
.demo-hinweis p { margin: 0; }

/* ----------------------------------------------------------- FAQ --- */

.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  margin-bottom: 12px;
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .antwort { padding: 0 20px 18px; color: var(--text-leise); }
.faq .antwort p:last-child { margin-bottom: 0; }

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

.kontakt-raster { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: start; }

.formular {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 26px 24px;
}
.feldreihe { display: grid; gap: 16px; grid-template-columns: 1fr; }
.feld { display: flex; flex-direction: column; margin-bottom: 16px; }
.feld label { font-weight: 600; font-size: .93rem; margin-bottom: 6px; }
/* Pflichtfeld-Markierung: rotes Sternchen an der Beschriftung.
   #a80000 statt #dd0000, weil das Sternchen auf Weiss sonst zu schwach
   kontrastiert. */
.pflicht { color: var(--rot-dunkel); font-weight: 700; }
.pflicht-legende { font-size: .88rem; color: var(--text-leise); margin: 0 0 18px; }

.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem;
  padding: 11px 13px;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  background: #fff; color: var(--text);
}
.feld textarea { resize: vertical; min-height: 130px; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(221,0,0,.15);
}

.einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--text-leise); margin-bottom: 20px; }
.einwilligung input { margin-top: 4px; flex: none; width: 17px; height: 17px; accent-color: var(--rot); }

/* Honeypot – fuer Menschen unsichtbar, fuer Bots ein ausfuellbares Feld */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  padding: 14px 18px; border-radius: var(--radius-klein);
  margin-bottom: 22px; font-size: .96rem;
}
.meldung-fehler { background: #fdecec; border: 1px solid #f3bcbc; color: #8c1414; }

.kontakt-direkt { font-size: .97rem; }
.kontakt-direkt ul { list-style: none; padding: 0; margin: 0 0 24px; }
.kontakt-direkt li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.kontakt-direkt li svg { flex: none; color: var(--rot-dunkel); margin-top: 4px; }
.kontakt-direkt .bezeichnung { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); }

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

.fuss { background: var(--anthrazit); color: #b6b6c0; padding-block: 44px 28px; font-size: .94rem; }
.fuss a { color: #e6e6ea; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-raster { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 32px; }
.fuss h4 { color: #fff; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { padding: 5px 0; }
.fuss .marke svg { height: 18px; }
.fuss .marke-wort { font-size: 1.02rem; }
.fuss-schluss {
  border-top: 1px solid #45454f; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: .88rem;
}

/* ------------------------------------------------- Rechtsseiten --- */

.rechtstext { max-width: 780px; }
.rechtstext h2 { font-size: 1.4rem; margin-top: 2em; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { margin-top: 1.6em; font-size: 1.1rem; }
.rechtstext dl { margin: 0 0 1.4em; }
.rechtstext dt { font-weight: 600; margin-top: .8em; }
.rechtstext dd { margin: 0 0 .2em; }

/* Danke-Seite */
.zentriert-schmal { max-width: 620px; margin-inline: auto; text-align: center; }
.erfolg-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin-bottom: 24px;
  border-radius: 50%; background: #e6f4ec; color: #1c7a44;
}

/* -------------------------------------------------- Scroll-Effekt --- */

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.sichtbar { opacity: 1; transform: none; }

/* ==================================================== Breakpoints === */

@media (min-width: 640px) {
  .feldreihe { grid-template-columns: 1fr 1fr; }
  .preiskarte { padding: 34px 30px; }
}

@media (min-width: 900px) {
  :root { --sektion: 96px; --gutter: 24px; }

  .nav-toggle { display: none; }
  .nav { display: block; }
  .nav ul { display: flex; align-items: center; gap: 4px; }
  .nav a { border-bottom: 0; padding: 8px 12px; border-radius: var(--radius-klein); font-size: .97rem; }
  .nav a:hover { background: var(--anthrazit-hell); }
  .nav a.aktiv { background: var(--anthrazit-hell); color: #fff; }
  .nav .nav-cta { margin: 0 0 0 10px; }
  .marke .marke-zusatz { display: inline-block; }

  .hero { padding-block: 88px 96px; }
  .erechnung-inhalt { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  .kontakt-raster { grid-template-columns: 1.4fr 1fr; gap: 48px; }
}

/* Ab hier ist Platz fuer echte Spalten samt Kopfzeile. */
@media (min-width: 640px) {
  .matrix-kopf {
    display: grid;
    grid-template-columns: 1fr 130px 130px;
    gap: 12px;
  }
  .matrix-kopf span:not(:first-child) { text-align: center; }

  .matrix-zeile summary { grid-template-columns: 1fr 130px 130px; gap: 12px; }
  .matrix-modul { grid-column: auto; }
  .matrix-wert { justify-content: center; }
  .matrix-wert::before { display: none; }
  .matrix-detail { padding-left: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .kopf, .nav, .hero-aktionen, .formular { display: none; }
  body { font-size: 12pt; }
}