/* ==========================================================================
   Meister IT — Stylesheet
   Kitzscher · Stand 09/2026

   AUFBAU DIESER DATEI
   1. Marken-Tokens ...... Farben und Schriften. NUR HIER ANPASSEN.
   2. Grundlagen ......... Reset, Typografie
   3. Bausteine .......... Kopf, Navigation, Fußzeile
   4. Elemente ........... Schaltflächen, Karten, Preise, Listen
   5. Hilfsklassen ....... u. a. .todo für offene Platzhalter

   Keine Google Fonts, keine externen Requests: Die Einbindung von Google
   Fonts über Google-Server hat das LG München I (20.01.2022, 3 O 17493/20)
   als Verstoß gegen das Recht auf informationelle Selbstbestimmung gewertet.
   Systemschriften laden schneller und erzeugen kein Datenschutzrisiko.
   ========================================================================== */

/* ==========================================================================
   1. MARKEN-TOKENS — hier deine echten Werte eintragen
   ========================================================================== */

:root {
  /* --- Markenfarben, abgeleitet aus logo.png ---------------------------
     Gemessenes Markenblau: #035EBA. Daraus:
       marke        = etwas dunklere Variante für Text, Links, Überschriften
       akzent       = das Markenblau selbst, für Schaltflächen
     Die Marke ist bewusst einfarbig: Hierarchie entsteht über Helligkeit und
     Fläche, nicht über eine zweite Farbe. Alle Werte sind auf WCAG-AA-Kontrast
     geprüft (niedrigster Wert 5,4:1). */
  --marke:          #03509E;
  --marke-dunkel:   #023A73;   /* Reserve für eigene Anpassungen */
  --marke-hell:     #E8F1FB;
  --akzent:         #035EBA;
  --akzent-dunkel:  #024A96;
  /* --- Ende Markenfarben ------------------------------------------------ */

  /* Neutrale Töne, leicht zur Hauptfarbe hin abgestimmt.
     --text-leise ist bewusst dunkler als ein übliches "Sekundärgrau": Auf Weiß
     und auf --flaeche liegt der Kontrast bei ≥ 8:1 (AAA fordert 7:1) — kein
     Grau-auf-Grau, das unter Kontrastvorgaben rutscht. */
  --text:           #14181D;
  --text-leise:     #3E4757;
  --grund:          #FFFFFF;
  --flaeche:        #F2F5F9;
  --flaeche-stark:  #E3E9F1;
  --linie:          #D3DBE5;
  --linie-stark:    #A5B1C0;

  /* Kopfleiste — dunkler Grund, damit das Logo trägt */
  --kopf-grund:     #0D1926;
  --kopf-linie:     #223244;
  --kopf-text:      #DFE7EF;
  --kopf-leise:     #9BACBD;
  --kopf-hervor:    #7FBCF6;

  /* Zustandsfarben */
  --hinweis:        #8A5A00;
  --hinweis-flaeche:#FFF4DC;
  --gruen:          #155C29;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
  --schrift-zahl: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
                  "Liberation Mono", monospace;

  --breite:    1080px;
  --lesebreite: 68ch;
  --rand:      clamp(1.1rem, 4vw, 2.5rem);
  --luft:      clamp(2.75rem, 7vw, 5rem);
  --radius:    3px;
}

/* Kein Dark Mode: Die Seite bleibt für alle Betrachter hell, unabhängig vom
   Systemschema. Die gezielt dunklen Flächen (Fußzeile, Kontaktband,
   Preise-CTA) sind über die Klasse ".dunkel" fest verdrahtet, nicht über
   prefers-color-scheme — die bleiben also unverändert dunkel. */

/* ==========================================================================
   2. GRUNDLAGEN
   ========================================================================== */

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

/* Das hidden-Attribut muss auch gegen display:flex/grid einzelner Bausteine
   gewinnen — sonst bleibt z. B. ein eingeklapptes Formular sichtbar. */
[hidden] { display: none !important; }

/* Wurzel-Schriftgröße bewusst über dem Browser-Standard (16px): 1rem = 20px,
   damit Fließtext durchgängig bei mindestens 18px liegt — auch dort, wo
   Komponenten in rem etwas kleiner skalieren (z. B. 0.94rem = 18,8px). Gilt
   für alle Bildschirmgrößen, auch mobil — kleinere Schrift auf dem Handy
   wäre der falsche Ort zum Sparen. */
html { font-size: 20px; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  line-height: 1.18;
  margin: 0 0 0.6rem;
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(1.9rem, 5.2vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 3.6vw, 1.95rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p, ul, ol { margin: 0 0 1rem; }
p { max-width: var(--lesebreite); }

a { color: var(--marke); text-underline-offset: 3px; }
a:hover { color: var(--akzent); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.huelle {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Nur für die Leistungs-Kartenreihe: breiterer Rahmen, damit auf großen
   Bildschirmen drei volle Karten nebeneinanderstehen statt zwei. */
.huelle-breit { max-width: 1400px; }

.springlink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marke);
  color: #fff;
  padding: 0.7rem 1.1rem;
  z-index: 100;
}
.springlink:focus { left: 0; }

/* ==========================================================================
   3. BAUSTEINE
   ========================================================================== */

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}

.kopf-oben {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  padding-block: 0.9rem;
}

.marke-block {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: inherit;
}

/* --- Logo -----------------------------------------------------------------
   logo.png hat einen transparenten Hintergrund und enthält bereits Wortmarke
   und Slogan. Höhe hier steuern, Breite ergibt sich automatisch.

   Falls das Logo auf hellem Grund zu blass wirkt: die auskommentierte Regel
   ".kopf { background: ... }" weiter unten aktivieren — dann bekommt die
   Kopfleiste den dunklen Grund, für den das Logo gestaltet wurde. */
.marke-block img.logo {
  display: block;
  height: 58px;
  width: auto;
}

/* Fallback-Textmarke: wird nur angezeigt, wenn kein Logo eingebunden ist. */
.wortmarke {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.wortmarke .name {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--marke);
  line-height: 1.1;
}
.wortmarke .zusatz {
  font-size: 0.76rem;
  color: var(--text-leise);
  letter-spacing: 0.04em;
}

/* --- Dunkle Kopfleiste ----------------------------------------------------
   logo.png ist für dunklen Grund gestaltet: Die Wortmarke „MEISTER IT" ist so
   hell, dass sie auf Weiß nur einen Kontrast von rund 1,5:1 erreicht — sie wäre
   praktisch unsichtbar. Die Kopfleiste bekommt deshalb den Grund, für den das
   Logo gemacht ist. Der übrige Seitenkörper bleibt hell.

   Wenn Sie später eine Logovariante für helle Hintergründe haben, können Sie
   diesen ganzen Block löschen — der Rest der Seite funktioniert unverändert. */
.kopf {
  background: var(--kopf-grund);
  border-bottom: 1px solid var(--kopf-linie);
}

/* Mitlaufender Kopf (nur ab Tablet-Breite — auf dem Handy übernimmt die feste
   Anruf-Leiste unten). Nach etwas Scrollweg wird er kompakt, damit Telefon und
   Navigation auf der langen Seite immer erreichbar bleiben. */
@media (min-width: 641px) {
  .kopf { position: sticky; top: 0; z-index: 50; }
  .marke-block img.logo { transition: height 0.2s ease; }
  .kopf.kompakt .marke-block img.logo { height: 38px; }
  .kopf.kompakt .kopf-oben { padding-block: 0.45rem; }
  .kopf.kompakt .zeiten { display: none; }
  .kopf.kompakt .nav a { padding-block: 0.5rem; }
  section[id] { scroll-margin-top: 6.5rem; }
}
.kopf .nav { border-top-color: var(--kopf-linie); }
.kopf .nav a { color: var(--kopf-text); }
.kopf .nav a:hover { color: var(--kopf-hervor); border-bottom-color: var(--kopf-hervor); }
.kopf .nav a[aria-current="page"] {
  color: var(--kopf-hervor);
  border-bottom-color: var(--kopf-hervor);
}
.kopf .telefon { color: #FFFFFF; }
.kopf .telefon:hover { color: var(--kopf-hervor); }
.kopf .telefon .vorsatz,
.kopf .zeiten { color: var(--kopf-leise); }
.kopf .springlink { color: #FFFFFF; }

.kopf-kontakt {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.4rem;
  flex-wrap: wrap;
}

.telefon {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.telefon:hover { color: var(--akzent); text-decoration: underline; }
.telefon .vorsatz {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.zeiten {
  font-size: 0.8rem;
  color: var(--text-leise);
  line-height: 1.35;
}

/* --- Navigation --------------------------------------------------------- */

.nav {
  border-top: 1px solid var(--linie);
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.nav a {
  display: block;
  padding: 0.8rem 0;
  margin-right: 1.6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.97rem;
  border-bottom: 3px solid transparent;
}

.nav a:hover { color: var(--akzent); border-bottom-color: var(--linie-stark); }

.nav a[aria-current="page"] {
  color: var(--marke);
  border-bottom-color: var(--marke);
}

/* --- Fußzeile ----------------------------------------------------------- */

.fuss {
  margin-top: var(--luft);
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding-block: 2.5rem 1.5rem;
  font-size: 0.94rem;
}

.fuss-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.8rem 2.5rem;
}

.fuss h2 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-leise);
  margin-bottom: 0.7rem;
  font-weight: 700;
}

.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.42rem; }
.fuss p { margin-bottom: 0.42rem; max-width: none; }

.fuss-unten {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-leise);
}

/* --- Dunkle Akzentflächen ------------------------------------------------
   Gezielt eingesetzt statt flächendeckend: Fußzeile, das Kontaktband vor
   "So erreichen Sie mich" und eine Zwischensektion (Erstgespräch-CTA vor dem
   Preis-Rechner). Nutzt dieselbe Palette wie der echte Dark-Mode — dadurch
   bereits kontrastgeprüft — unabhängig vom Systemschema des Betrachters. */
.dunkel,
.abschnitt.dunkel,
.fuss.dunkel {
  --marke:          #72B4F1;
  --marke-dunkel:   #96CAF8;
  --marke-hell:     #12202F;
  --akzent:         #5AA5EC;
  --akzent-dunkel:  #7DBAF3;
  --text:           #E4E9EF;
  --text-leise:     #A3AFBC;
  --grund:          #10151A;
  --flaeche:        #181E25;
  --flaeche-stark:  #212932;
  --linie:          #2C3540;
  --linie-stark:    #47535F;
  --gruen:          #4ABE6C;
  background: var(--grund);
  color: var(--text);
}

/* Gefüllte Schaltflächen brauchen auf dem helleren Akzentblau dunklen statt
   weißen Text — sonst kippt der Kontrast, sobald die Fläche selbst dunkel wird. */
.dunkel .knopf,
.dunkel .knopf:hover { color: #08111C; }
.dunkel .rechner-option.ist-aktiv { color: #08111C; }

/* ==========================================================================
   4. ELEMENTE
   ========================================================================== */

/* --- Abschnitte --------------------------------------------------------- */

main { display: block; }

.abschnitt { padding-block: var(--luft); }
.abschnitt.eng { padding-block: calc(var(--luft) * 0.62); }
.abschnitt.flaeche { background: var(--flaeche); }
.abschnitt.getrennt { border-top: 1px solid var(--linie); }

.abschnitt-kopf { margin-bottom: 1.8rem; }
.abschnitt-kopf p { color: var(--text-leise); font-size: 1.04rem; }

.vorsatz {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--akzent);
  display: block;
  margin-bottom: 0.55rem;
}

/* --- Einstieg (Hero) ---------------------------------------------------- */

.einstieg {
  padding-block: clamp(2.4rem, 6vw, 4rem);
}

/* Mobil einspaltig, Bild zuerst; ab 900px nebeneinander. Dazwischen wäre die
   Textspalte zu schmal — dort brachen Überschrift und Häkchenliste um. */
.einstieg-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
}

.einstieg h1 { margin-bottom: 1.4rem; }

.einstieg-portraet {
  width: min(240px, 60vw);
  aspect-ratio: 4 / 5;
  order: -1;
}

@media (min-width: 900px) {
  .einstieg-raster {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
    gap: clamp(2rem, 5vw, 4rem);
  }
  .einstieg h1 { max-width: 18ch; }
  .einstieg-portraet { width: 100%; order: 0; justify-self: end; }
}

.einstieg-haken {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40ch;
}

.einstieg-haken li {
  position: relative;
  padding-left: 2rem;
}

.einstieg-haken li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--gruen);
  font-weight: 700;
  font-size: 1.3rem;
}

.einstieg-haken-titel {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
}

.einstieg-haken-text {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-leise);
}

/* --- Kennzahlen (Vertrauensanker unter dem Einstieg) -------------------- */

.kennzahlen { padding-block: 1.6rem; }

.kennzahlen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem 2.5rem;
}

.kennzahlen-liste li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 1rem;
  border-left: 3px solid var(--marke);
}

.kennzahl {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.kennzahl-text {
  font-size: 0.9rem;
  color: var(--text-leise);
}

.herkunft {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--marke);
  background: var(--marke-hell);
  padding: 0.35rem 0.7rem;
  margin-bottom: 1.2rem;
  border-radius: var(--radius);
}

/* --- Schaltflächen ------------------------------------------------------ */

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.9rem;
  align-items: center;
  margin-block: 1.2rem;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  font-family: inherit;   /* <button> erbt die Schrift sonst nicht */
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid var(--akzent);
  border-radius: var(--radius);
  line-height: 1.3;
  cursor: pointer;
}
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }

.knopf.zweit {
  background: transparent;
  color: var(--marke);
  border-color: var(--linie-stark);
}
.knopf.zweit:hover { background: var(--marke-hell); color: var(--marke); border-color: var(--marke); }

/* --- Die beiden Wege (Weiche) ------------------------------------------- */

.wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.weg {
  border: 1px solid var(--linie);
  border-top: 4px solid var(--marke);
  background: var(--grund);
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.weg h3 { font-size: 1.32rem; margin-bottom: 0.2rem; }
.weg > p { color: var(--text-leise); margin-bottom: 0.3rem; }

.weg ul {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  font-size: 0.97rem;
}

.weg ul li { padding-left: 1.35rem; position: relative; }
.weg ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--marke);
  border-radius: 50%;
}

.weg .abschluss { margin-top: auto; padding-top: 0.7rem; }
.weg .ab-preis {
  font-size: 0.9rem;
  color: var(--text-leise);
  margin-bottom: 0.8rem;
}
.weg .ab-preis b { color: var(--text); font-family: var(--schrift-zahl); font-weight: 600; }

/* --- Ablauf in Stufen --------------------------------------------------- */

.stufen {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stufe;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.4rem;
}

.stufen li {
  border-top: 1px solid var(--linie-stark);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stufen li::before {
  counter-increment: stufe;
  content: "Schritt " counter(stufe);
  font-family: var(--schrift-zahl);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent);
}

.stufen h3 { margin: 0; }
.stufen p { margin: 0; color: var(--text-leise); font-size: 0.97rem; }

.stufen .preisnotiz {
  font-family: var(--schrift-zahl);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

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

.preisgruppe { margin-bottom: 2.6rem; }
.preisgruppe:last-child { margin-bottom: 0; }

.preistabelle-huelle { overflow-x: auto; }

.preistabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  min-width: 460px;
}

.preistabelle caption {
  text-align: left;
  font-weight: 700;
  font-size: 1.15rem;
  padding-bottom: 0.6rem;
  color: var(--text);
}

.preistabelle th {
  text-align: left;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-leise);
  padding: 0.55rem 1rem 0.55rem 0;
  border-bottom: 2px solid var(--linie-stark);
  white-space: nowrap;
}

.preistabelle td {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

.preistabelle td:last-child, .preistabelle th:last-child { padding-right: 0; }

.preistabelle .betrag {
  font-family: var(--schrift-zahl);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.preistabelle .leistung b { display: block; }
.preistabelle .leistung span { color: var(--text-leise); font-size: 0.9rem; }

/* --- Kasten ------------------------------------------------------------- */

.kasten {
  background: var(--flaeche);
  border-left: 4px solid var(--marke);
  padding: 1.2rem 1.4rem;
  margin-block: 1.4rem;
  max-width: var(--lesebreite);
}
.kasten > :last-child { margin-bottom: 0; }
.kasten h2, .kasten h3, .kasten h4 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.kasten p { font-size: 0.97rem; }

/* --- Leistungsblöcke ----------------------------------------------------- */

/* Alle vier Karten stehen nebeneinander — vollständig, nicht als Anreißer.
   Passen sie nicht nebeneinander, scrollt die Reihe horizontal statt
   umzubrechen. Bedient wird das über die Pfeil-Schaltflächen (.schieber-pfeil,
   siehe unten) statt über eine sichtbare Scrollleiste — die native Leiste ist
   deshalb ausgeblendet, Wischen/Ziehen bleibt weiterhin möglich. */
.leistungsbloecke {
  display: flex;
  align-items: stretch;
  gap: 1.8rem;
  margin-top: 1.8rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--rand);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.leistungsbloecke::-webkit-scrollbar { display: none; }

.leistungsblock {
  flex: 1 1 380px;
  min-width: 380px;
  scroll-snap-align: start;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  background: var(--grund);
}

.leistungsblock .kasten { max-width: none; }

.leistungsblock h3 { margin-bottom: 0.6rem; }
.leistungsblock h4 { margin-top: 1.4rem; }

/* --- Schieber (Pfeil-Bedienung für horizontal scrollende Kartenreihen) --- */

.schieber { position: relative; }

/* Fester Abstand von oben statt top:50% — die Karten sind unterschiedlich
   lang, .schieber also sehr hoch. Bei top:50% läge der Pfeil irgendwo tief
   im Text der längsten Karte, weit außerhalb des sichtbaren Bereichs. Der
   feste Wert richtet die Pfeile stattdessen an der Kartenüberschrift aus —
   dort, wo die Reihe zuerst ins Bild kommt. */
.schieber-pfeil {
  position: absolute;
  top: 2rem;
  translate: 0 -50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: rgba(13, 25, 38, 0.82);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.schieber-pfeil:hover { background: rgba(13, 25, 38, 0.95); }
.schieber-pfeil:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* Sitzt bündig an der Außenkante der Seitenspalte (derselbe Abstand --rand,
   den .huelle als Innenabstand nutzt — negativ hebt ihn wieder auf). Dadurch
   liegt der Pfeil außerhalb der Karten statt über ihnen, wächst aber nie über
   den Viewport-Rand hinaus, weil er exakt den ohnehin vorhandenen Rand nutzt. */
.schieber-pfeil-links { left: calc(var(--rand) * -1); }
.schieber-pfeil-rechts { right: calc(var(--rand) * -1); }

/* Auf dem Handy übernimmt der native Wisch-Scroll — Pfeile würden dort nur
   Kartentext verdecken. */
@media (max-width: 640px) {
  .schieber-pfeil { display: none; }
}

/* --- Preis-Rechner -------------------------------------------------------- */

.rechner {
  margin-top: 2.5rem;
  padding: 1.8rem 2rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--grund);
}

.rechner-schritt { margin-top: 1.6rem; }
.rechner-schritt:first-child { margin-top: 0; }

.rechner-label {
  font-weight: 600;
  margin-bottom: 0.7rem;
}

.rechner-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.rechner-option {
  font: inherit;
  padding: 0.6rem 1rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rechner-option:hover { border-color: var(--marke); }

/* Preis am Paket — Text und Zahl in einer Schaltfläche, Zahl abgesetzt */
.rechner-option-preis {
  display: inline-block;
  margin-left: 0.55em;
  padding-left: 0.55em;
  border-left: 1px solid currentColor;
  font-family: var(--schrift-zahl);
  font-size: 0.86em;
  opacity: 0.85;
  white-space: nowrap;
}

.rechner-option.ist-aktiv {
  border-color: var(--marke);
  background: var(--marke);
  color: #fff;
}

/* Bei Mehrfachauswahl zeigt ein Häkchen, dass mehrere gleichzeitig „an" sein
   können — sonst liest man die blauen Flächen als exklusiv. */
.rechner-option[aria-pressed]::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.5em;
  vertical-align: -0.08em;
  border: 2px solid currentColor;
  border-radius: 2px;
  opacity: 0.55;
}
.rechner-option[aria-pressed="true"]::before {
  content: "✓";
  font-size: 0.7em;
  line-height: 1.1;
  text-align: center;
  color: var(--marke);
  background: #fff;
  border-color: #fff;
  opacity: 1;
  width: 1.2em;
  height: 1.2em;
}

.rechner-sonstiges {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 28rem;
}

.rechner-label-klein { font-size: 0.86rem; font-weight: 600; }

.rechner-sonstiges input[type="text"] {
  font: inherit;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  width: 100%;
}

/* --- Schieberegler Kündigungsfrist + Haken -------------------------------- */

.rechner-regler {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.rechner-regler input[type="range"] {
  flex: 1 1 16rem;
  max-width: 24rem;
  accent-color: var(--marke);
  height: 1.6rem;
  cursor: pointer;
}

.rechner-regler input[type="range"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rechner-regler input[type="range"]:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}

.rechner-regler-wert {
  font-family: var(--schrift-zahl);
  font-weight: 700;
  color: var(--marke);
  white-space: nowrap;
}

/* Der Haken bekommt eine großzügige Klickfläche — auf dem Handy ist ein
   nacktes Kontrollkästchen zu klein zum sicheren Treffen. */
.rechner-haken {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.9rem;
  cursor: pointer;
  max-width: 34rem;
}

.rechner-haken input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--marke);
  flex: none;
  cursor: pointer;
}

.rechner-ergebnis {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}

/* Postenliste bei mehreren gewählten Paketen: Text links, Spanne rechts */
.rechner-posten {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
  max-width: 34rem;
}
.rechner-posten li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--linie);
  font-size: 0.94rem;
}
.rechner-posten li > span:first-child { display: flex; flex-direction: column; }
.rechner-posten small { font-size: 0.82rem; color: var(--text-leise); }
.rechner-posten-preis {
  font-family: var(--schrift-zahl);
  white-space: nowrap;
  color: var(--text-leise);
}

.rechner-mehrfach { margin: -0.4rem 0 0.7rem; }

/* Projektliste: eine Gruppe je aktivem Bereich, mit Zwischenüberschrift */
.rechner-gruppen { display: flex; flex-direction: column; gap: 1rem; }
.rechner-gruppe-titel {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 0 0 0.45rem;
}

/* Mehrere Summenzeilen (monatlich + einmalig) untereinander */
.rechner-preis-zeile { display: block; }
.rechner-preis-zeile + .rechner-preis-zeile { margin-top: 0.15em; }

.rechner-preis-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 0.2rem;
}

.rechner-preis {
  font-family: var(--schrift-zahl);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--marke);
  margin-bottom: 0.9rem;
  line-height: 1.15;
}

/* „im Monat" / „einmalig" steht direkt neben der Zahl, muss aber deutlich
   kleiner sein — sonst liest sich der Zusatz wie Teil des Betrags. */
.rechner-preis-zusatz,
.rechner-preis-vorsatz {
  font-family: var(--schrift);
  font-size: 0.42em;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.rechner-preis-vorsatz { margin-right: 0.3em; }

/* Hinweis unter dem Regler (z. B. „mehr als 25 Arbeitsplätze") */
.rechner-regler + p { margin-top: 0.3rem; }

.kasten.warnung {
  background: var(--hinweis-flaeche);
  border-left-color: var(--hinweis);
}

/* --- Fälle / Beispiele -------------------------------------------------- */

.faelle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem 2rem;
}

.fall { border-top: 3px solid var(--linie-stark); padding-top: 0.9rem; }
.fall h3 { font-size: 1.03rem; margin-bottom: 0.35rem; }
.fall p { font-size: 0.96rem; color: var(--text-leise); margin-bottom: 0; }


/* --- Anruf-Leiste (nur Handy, fest am unteren Rand) --------------------- */

.anruf-leiste { display: none; }

/* --- Über mich ---------------------------------------------------------- */

.person {
  display: grid;
  grid-template-columns: minmax(180px, 250px) 1fr;
  gap: 2rem 2.5rem;
  align-items: start;
}

.portraet {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;   /* Kopf im oberen Drittel halten */
  display: block;
  background: var(--flaeche-stark);
  border: 1px solid var(--linie);
}

.fakten {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.fakten li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.2rem 1.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.97rem;
}

.fakten dt, .fakten .bez {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
  padding-top: 0.18rem;
}

/* --- Kontaktwege -------------------------------------------------------- */

.kontaktwege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.kontaktweg {
  border: 1px solid var(--linie);
  padding: 1.3rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.kontaktweg h2, .kontaktweg h3 { font-size: 1.15rem; margin-bottom: 0.15rem; }
.kontaktweg p { font-size: 0.94rem; color: var(--text-leise); margin: 0; }

.kontaktweg .gross {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--marke);
  text-decoration: none;
  word-break: break-word;
}
.kontaktweg .gross:hover { color: var(--akzent); text-decoration: underline; }

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

.formular {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 34rem;
}

.feld { display: flex; flex-direction: column; gap: 0.35rem; }

.feld label { font-weight: 600; font-size: 0.94rem; }
.feld .hilfe { font-size: 0.84rem; color: var(--text-leise); font-weight: 400; }

.feld input, .feld textarea, .feld select {
  font: inherit;
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  width: 100%;
}

.feld textarea { min-height: 8rem; resize: vertical; }

/* Schrift und Cursor kommen von .knopf; hier nur die Ausrichtung */
.formular button { align-self: flex-start; }

/* Anrede und Nachname nebeneinander; auf dem Handy untereinander. */
.feld-reihe {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.feld-reihe .feld { flex: 1 1 12rem; }
.feld-reihe .feld-schmal { flex: 0 1 10rem; }

/* Angebotsformular im Preisrechner: klappt unter dem Ergebnis auf */
.rechner-angebot-formular {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}
.rechner-angebot-formular .rechner-label { margin-bottom: 0; }
.rechner-angebot-formular textarea { min-height: 5rem; }

/* --- Listen ------------------------------------------------------------- */

ul.haken { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; max-width: var(--lesebreite); }
ul.haken li { padding-left: 1.7rem; position: relative; }
ul.haken li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--marke);
  font-weight: 700;
}

ul.strich { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; max-width: var(--lesebreite); }
ul.strich li { padding-left: 1.2rem; position: relative; }
ul.strich li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--text-leise);
}

/* --- Fragen (FAQ) ------------------------------------------------------- */

.fragen { max-width: var(--lesebreite); border-top: 1px solid var(--linie); }

.fragen details {
  border-bottom: 1px solid var(--linie);
}

.fragen summary {
  padding: 0.95rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.fragen summary::-webkit-details-marker { display: none; }

.fragen summary::after {
  content: "+";
  font-family: var(--schrift-zahl);
  font-size: 1.15rem;
  color: var(--akzent);
  flex-shrink: 0;
}

.fragen details[open] summary::after { content: "–"; }

.fragen details > :not(summary) { margin-bottom: 0.95rem; font-size: 0.97rem; color: var(--text-leise); }

/* ==========================================================================
   5. HILFSKLASSEN
   ========================================================================== */

/* Offene Platzhalter. Sichtbar markiert, damit nichts unbemerkt online geht.
   Nach dem Eintragen der echten Daten: Klasse "todo" entfernen.
   Alle Fundstellen findest du mit: grep -rn "todo" *.html          */
.todo {
  background: var(--hinweis-flaeche);
  color: var(--hinweis);
  border-bottom: 2px dotted var(--hinweis);
  padding: 0 0.2rem;
  font-weight: 600;
}

.leise { color: var(--text-leise); }
.klein { font-size: 0.88rem; }
.zahl  { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; }
.nurleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Kleine Bildschirme
   ========================================================================== */

/* Tablet und kleine Laptops: Personenblock und Fakten einspaltig, sonst läuft
   die feste Bezeichner-Spalte über den Rand. */
@media (max-width: 760px) {
  .person { grid-template-columns: 1fr; }
  .portraet { max-width: 220px; }
  .fakten li { grid-template-columns: 1fr; gap: 0.1rem; }
  .kennzahlen-liste { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { padding-bottom: 4.5rem; }   /* Platz für die Anruf-Leiste */

  .kopf-oben { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .kopf-kontakt { width: 100%; justify-content: space-between; }
  .kopf .zeiten { display: none; }

  .nav ul { flex-wrap: wrap; column-gap: 1.2rem; }
  .nav a { margin-right: 0; padding-block: 0.55rem; font-size: 0.92rem; }

  .einstieg-portraet { width: 180px; }

  .anruf-leiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--kopf-grund);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    border-top: 1px solid var(--kopf-linie);
  }
  .anruf-leiste .vorsatz { color: var(--kopf-leise); margin: 0; }
}

@media print {
  .nav, .springlink, .knopfreihe { display: none; }
  body { font-size: 11pt; }
  .fuss { background: none; }
}