/* Halbei IT-Service – gemeinsame Basis für die Unterseiten.
   Farben und Typografie sind aus der Startseite übernommen. */
@import url("/assets/fonts.7a8c231580.css");

:root {
  --gruen:        #0f4c46;
  --gruen-dunkel: #0a3a35;
  --papier:       #faf9f5;
  --karte:        #fffdf9;
  --kopf:         rgba(247, 242, 234, .94);
  --rand:         #e6ddcd;
  --rand-kopf:    #e2d9c9;
  --text:         #1a2523;
  --text-weich:   #44514d;
  --text-leise:   #5f6c67;   /* 5,4:1 auf der Kartenfarbe (vorher 3,4:1) */
  --fuss-leise:   #94a19b;   /* 6,2:1 auf dem dunklen Fuss */
  --fuss:         #16211f;
  --fuss-text:    #d6ded9;
  --akzent:       #f0b45f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--papier);
  color: var(--text);
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--gruen); }
a:hover { color: var(--gruen-dunkel); }

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--kopf);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand-kopf);
}
.kopf-innen {
  max-width: 1180px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px;
}
.marke { margin-right: auto; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke-text { display: grid; gap: 1px; }
.marke-name {
  font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 22px;
  letter-spacing: -.01em; color: var(--gruen); line-height: 1.2;
}
.marke-zeile { font-size: 14px; color: #5c6763; line-height: 1.2; }
.hit-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; }
.kopf a.link { font-size: 17px; color: #3c4a46; text-decoration: none; }
.kopf a.link:hover { color: var(--gruen); }
.knopf {
  background: var(--gruen); color: #fff; text-decoration: none;
  padding: 12px 22px; border-radius: 8px; font-weight: 500; font-size: 18px;
  min-height: 50px; display: inline-flex; align-items: center;
}
.knopf:hover { background: var(--gruen-dunkel); color: #fff; }

/* --- Inhalt ------------------------------------------------------------- */
main { max-width: 820px; margin: 0 auto; padding: 64px 28px 88px; }

h1 {
  font-family: Bitter, Georgia, serif; font-weight: 700;
  font-size: clamp(32px, 4vw, 44px); line-height: 1.15;
  letter-spacing: -.015em; margin-bottom: 14px;
}
.vorspann { font-size: 20px; color: var(--text-weich); margin-bottom: 48px; }

h2 {
  font-family: Bitter, Georgia, serif; font-weight: 600;
  font-size: 26px; line-height: 1.25; letter-spacing: -.01em;
  margin: 48px 0 14px;
}
h3 { font-family: Bitter, Georgia, serif; font-weight: 600; font-size: 20px; margin: 28px 0 8px; }
p, ul, ol { color: var(--text-weich); }
p + p { margin-top: 14px; }
ul, ol { margin: 12px 0 12px 24px; }
li + li { margin-top: 8px; }

.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 12px; padding: 26px 28px; margin: 20px 0;
}
.karte p { color: var(--text); }
.hinweis {
  background: #fbeee4; border: 1px solid #e2b489;
  border-radius: 10px; padding: 18px 22px; margin: 20px 0;
  font-size: 17px; color: #7a3f0a;
}
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 4px 0; }
dl.daten dt { color: var(--text-leise); font-size: 16px; font-weight: 500; }
dl.daten dd { color: var(--text); }
@media (max-width: 560px) {
  dl.daten { grid-template-columns: 1fr; gap: 2px; }
  dl.daten dd { margin-bottom: 10px; }
}
.stand { margin-top: 56px; font-size: 16px; color: var(--text-leise); }

/* --- Fußzeile ----------------------------------------------------------- */
.fuss { background: var(--fuss); color: var(--fuss-text); padding: 64px 28px 40px; }
.fuss-innen { max-width: 1180px; margin: 0 auto; }
.fuss-spalten {
  display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding-bottom: 36px; border-bottom: 1px solid #2b3a37;
}
.fuss h2, .fuss .titel {
  font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 22px;
  color: #eef5f2; margin: 0 0 8px;
}
.fuss .label {
  color: var(--fuss-leise); font-size: 15px;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px;
}
.fuss p, .fuss a { color: var(--fuss-text); }
.fuss p.leise { color: #9aa8a3; font-size: 16px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--akzent); }
.fuss-unten {
  display: flex; flex-wrap: wrap; gap: 20px; padding-top: 24px;
  font-size: 16px; color: var(--fuss-leise);
}
.fuss-unten span { margin-right: auto; }
.fuss-unten a { color: #a6b3ae; }


/* =========================================================================
   Kopfzeile: blendet beim Herunterscrollen aus, beim Hochscrollen wieder ein.
   Gesteuert von assets/verhalten.js ueber html[data-kopf="weg"].

   Nur auf Touch-Geraeten: dort zaehlt jeder Pixel Bildschirm. Am Rechner
   bleibt die Kopfzeile stehen, damit die Rufnummer beim Lesen im Bild bleibt
   (Audit 09/2026: zwischen Startbereich und Kontaktblock war sonst auf drei
   Vierteln der Seite keine Nummer zu sehen).
   ========================================================================= */

header {
  transition: transform .26s cubic-bezier(.2, .7, .3, 1) !important;
}

@media (hover: none) {
  html[data-kopf="weg"] header {
    transform: translateY(-100%) !important;
  }
}

/* Sehr niedrige Fenster (Laptop mit 200 % Zoom, Handy quer): nichts
   festkleben, sonst bleiben zwischen Kopfzeile und Leiste drei Zeilen Text. */
@media (max-height: 520px) {
  header { position: static !important; }
}

/* Sprungziele nicht unter die Kopfzeile rutschen lassen */
section[id],
main[id],
[id]:target {
  scroll-margin-top: 92px;
}
@media (hover: none) {
  section[id], [id]:target { scroll-margin-top: 104px; }
}
/* Der Anfrage-Assistent: am Rechner unter der stehenden Kopfzeile, am Handy
   (Kopfzeile beim Schrittwechsel ausgeblendet) knapp unter dem Rand. */
#anfrage { scroll-margin-top: 100px; }
@media (hover: none) { #anfrage { scroll-margin-top: 20px; } }

/* Sprunglink fuer Tastatur und Vorlesehilfe: unsichtbar, bis er Fokus hat */
.hit-sprung {
  position: absolute; left: -9999px; top: 10px; z-index: 1000;
  background: #0f4c46; color: #fff; padding: 12px 18px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.hit-sprung:focus { left: 12px; }

/* Navigation in der Kopfzeile: ein <nav>, das sich wie die einzelnen Links
   davor verhaelt (gleiche Abstaende, gleicher Umbruch) */
.hit-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  header { transition: none !important; }
  html   { scroll-behavior: auto; }
}

/* =========================================================================
   Handlungsknoepfe im Hero-Bereich: geraeteabhaengig, aber nach Eingabegeraet
   statt nach Fensterbreite (ein gezoomter Laptop ist kein Handy).

   Ueberall: "Anrufen: 0156 3011 1427" - der Knopf traegt die Nummer als
   Text. Wer vom Festnetz anruft oder sie aufschreibt, findet sie so im
   ersten Bildschirm; am Handy klingelt es beim Antippen.

   Touch (hover: none): dazu "Per WhatsApp schreiben".
   Maus (hover + feiner Zeiger): dazu "Anfrage schreiben", der zum
   Assistenten springt - WhatsApp gibt es am Rechner meist nicht.
   ========================================================================= */

.hit-hero-kontakt { display: none; }
.hit-hero-tel svg { flex: none; margin-right: 10px; }
.hit-hero-schreiben a { color: #0f4c46; font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .hit-hero-wa { display: none !important; }
  .hit-hero-schreiben { display: none !important; }

  .hit-hero-kontakt {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    background: #fffdf9;
    color: #0f4c46;
    border: 1.5px solid #0f4c46;
    text-decoration: none;
    padding: 18px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 20px;
    min-height: 60px;
    transition: background .18s ease;
  }
  .hit-hero-kontakt:hover { background: #dfeae6; color: #0f4c46; }
  .hit-hero-kontakt svg { flex: none; }
}

/* =========================================================================
   Wiederverwendbare Knoepfe fuer Handlungsaufrufe (Ablauf, Person, Rechner,
   Betrugsabschnitt, Erfolgsmeldung, 404). Immer mit Nummer im Text.
   ========================================================================= */
.hit-cta-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  margin: 28px 0 0;
}
.hit-cta-frage { font-size: 19px; font-weight: 600; color: #263330; margin-right: 6px; }
.hit-knopf, .hit-knopf-sekundaer {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 24px; border-radius: 10px;
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600; font-size: 19px; line-height: 1.2; text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.hit-knopf { background: #0f4c46; color: #fff; }
.hit-knopf:hover { background: #0a3a35; color: #fff; }
.hit-knopf-sekundaer { background: #fffdf9; color: #0f4c46; border: 1.5px solid #0f4c46; }
.hit-knopf-sekundaer:hover { background: #dfeae6; color: #0f4c46; }
.hit-knopf svg, .hit-knopf-sekundaer svg { flex: none; }
@media (max-width: 560px) {
  .hit-cta-frage { flex: 1 1 100%; margin: 0; }
  .hit-knopf, .hit-knopf-sekundaer { width: 100%; }
}

/* Startbereich am Rechner: die Textspalte bekommt mehr Platz als das Foto,
   damit "Anrufen" und "Anfrage schreiben" nebeneinander stehen und mit den
   Kostenzusagen auch auf einem 1366x768-Laptop ohne Scrollen sichtbar sind. */
@media (min-width: 821px) {
  main > section:has(> .hit-portrait) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
  }
  main > section:has(> .hit-portrait) h1 { font-size: clamp(36px, 4.4vw, 52px) !important; }
}

/* Kasten "So gehe ich mit Ihren Daten um" im Abschnitt ueber die Person */
.hit-datenkasten {
  background: #fffdf9; border: 1px solid #e6ddcd; border-radius: 12px;
  padding: 22px 24px; margin: 0 0 26px;
}
.hit-datenkasten h3 { font-size: 21px; font-weight: 600; margin: 0 0 12px; }
.hit-datenkasten ul { margin: 0; padding-left: 22px; font-size: 18px; color: #3c4a46; line-height: 1.55; }
.hit-datenkasten li + li { margin-top: 8px; }

/* Erklaerpanel: Schliessen-Knopf */
.hit-panel-schliessen {
  margin-top: 18px; min-height: 44px; padding: 10px 16px;
  background: none; border: 1.5px solid #cfc4b1; border-radius: 8px;
  font-size: 16px; color: #3c4a46; cursor: pointer;
}
.hit-panel-schliessen:hover { border-color: #0f4c46; color: #0f4c46; }

/* Anfrage-Assistent: sichtbare Beschriftungen, Hinweise, Fehlermarkierung */
.hit-feld {
  display: grid; gap: 6px; min-width: 0;
  font-size: 16px; font-weight: 600; color: #3c4a46;
}
.hit-feldhilfe { font-size: 15px; font-weight: 400; color: #5c6763; }
.hit-schritthinweis { font-size: 17px; color: #5c6763; margin: -8px 0 18px; line-height: 1.5; }
.hit-themahinweis {
  background: #dfeae6; color: #0f4c46; border-radius: 8px;
  padding: 10px 14px; font-size: 16px; margin: 0 0 16px;
}
#kontakt input::placeholder, #kontakt textarea::placeholder { color: #6a7570; opacity: 1; }
#kontakt [aria-invalid="true"] {
  border-color: #b4560f !important;
  box-shadow: 0 0 0 3px rgba(180, 86, 15, .18) !important;
}
/* Unsichtbares Feld gegen Bots (kontakt.php verwirft gefuellte Anfragen) */
.hit-firma { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.hit-anfrage-karte h3:focus { outline: none; }

/* Fusszeile: Impressum und Datenschutz bleiben zusammen in einer Zeile */
.hit-fuss-links { display: inline-flex; flex-wrap: wrap; gap: 20px; }

/* Portraet am Rechner: duenne dunkelgruene Linie mit schmalem Abstand zum Foto
   (Passepartout, 05.10.2026). !important, weil der Export Rand und Radius inline setzt.
   Am Handy (startseite-mobil.css) bekommt der runde Ausschnitt denselben Ring. */
@media (min-width: 561px) {
  .hit-portrait img {
    border: 2px solid #0f4c46 !important;
    padding: 6px !important;
    background: #fffdf9 !important;
    border-radius: 16px !important;
  }
}

/* Bildunterschrift unter dem Portraet */
.hit-portrait { margin: 0; }
.hit-bildzeile { font-size: 16px; color: #5c6763; margin: 10px 0 0; line-height: 1.4; }

/* Hinweis, der nur am Rechner Sinn hat ("Am besten vom Handy aus") */
.hit-nur-rechner { display: none; }
@media (hover: hover) and (pointer: fine) { .hit-nur-rechner { display: inline; } }

/* Einblend-Animation der Betrugsfaelle und Ablaufschritte: kuerzer, und auf
   Touch-Geraeten sowie bei "Bewegung reduzieren" gar nicht - Text, der beim
   tastenden Scrollen erst nach einer Sekunde erscheint, wirkt wie "da fehlt
   etwas". !important schlaegt die Inline-Werte, die das Skript setzt. */
[data-reveal] { transition-duration: .3s !important; transition-delay: 0s !important; }
@media (max-width: 820px), (hover: none), (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* =========================================================================
   Abschnitt "Was ist bei Ihnen gerade das Problem?"

   Die Erklaerung liegt im selben Raster wie die Kacheln (siehe build.py) und
   nimmt immer die volle Breite ein - am Rechner sieht das genauso aus wie
   vorher, naemlich als Zeile unter allen Kacheln.

   Auf Telefon und Tablet bekommt jede Kachel ihre Position als order-Wert,
   die Erklaerung uebernimmt den Wert der ausgewaehlten Kachel. Bei gleichem
   order-Wert entscheidet die Reihenfolge im Bauplan, und dort steht die
   Erklaerung hinter den Kacheln - sie landet also direkt hinter der
   gewaehlten. Den Wert setzt assets/verhalten.js auf dem <html>-Element.
   ========================================================================= */

.hit-problempanel {
  grid-column: 1 / -1;
  margin-top: 12px;          /* zusammen mit gap: 14px wieder die alten 26px */
  order: 99;
}

@media (max-width: 820px) {
  .hit-problemraster > button:nth-child(1) { order: 1; }
  .hit-problemraster > button:nth-child(2) { order: 2; }
  .hit-problemraster > button:nth-child(3) { order: 3; }
  .hit-problemraster > button:nth-child(4) { order: 4; }
  .hit-problemraster > button:nth-child(5) { order: 5; }
  .hit-problemraster > button:nth-child(6) { order: 6; }
  .hit-problemraster > button:nth-child(7) { order: 7; }
  .hit-problemraster > button:nth-child(8) { order: 8; }
  .hit-problemraster > button:nth-child(9) { order: 9; }
  .hit-problemraster > button:nth-child(10) { order: 10; }
  .hit-problemraster > button:nth-child(11) { order: 11; }
  .hit-problemraster > button:nth-child(12) { order: 12; }

  .hit-problempanel {
    order: var(--hit-problem, 99);
    margin-top: 0;
    scroll-margin-top: 100px;
  }
}

/* =========================================================================
   Sichtbarer Tastaturfokus.
   Zwei Elemente (Telefonknopf in der Kopfzeile, "Kontakt aufnehmen") hatten
   beim Ansteuern mit der Tabulatortaste keine erkennbare Markierung. Wer die
   Seite ohne Maus bedient, sieht sonst nicht, wo er gerade ist.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f0b45f !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

/* =========================================================================
   Einzugsgebiet im Kontaktbereich.

   Bewusst typografisch statt als Karte: Die Seite lebt von Ruhe und Schrift,
   ein Kartenbild wirkte darin wie ein Fremdkoerper und kostete am Handy einen
   halben Bildschirm. Gesetzt ist die Liste wie die Preistabelle weiter oben -
   Name links, Zahl rechts, Haarlinie dazwischen.
   ========================================================================= */
.hit-gebiet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 44px;
  align-items: start;
  margin: 30px 0 0;
  padding: 30px 32px;
  background: #16544d;
  border: 1px solid #2c6b63;
  border-radius: 14px;
}
/* Trennt das Einzugsgebiet vom Formular darueber - es steht danach und
   soll nicht als dessen Fortsetzung gelesen werden. */
.hit-gebiet-trenner {
  height: 1px;
  background: #2c6b63;
  margin: 56px 0 0;
}

.hit-gebiet-kopf  { grid-column: 1; }
.hit-orte         { grid-column: 2; grid-row: 1 / span 2; }
.hit-gebiet-frage { grid-column: 1; align-self: start; }

.hit-gebiet-label {
  font-size: 15px; text-transform: uppercase; letter-spacing: .08em;
  color: #b6ccc6; margin-bottom: 10px;
}
.hit-gebiet-satz {
  font-size: 20px; color: #eef5f2; line-height: 1.5; margin: 0 0 18px;
}
.hit-gebiet-frage {
  font-size: 18px; color: #b6ccc6; line-height: 1.55; margin: 0;
}
.hit-gebiet-frage a { color: #f0b45f; font-weight: 600; }
.hit-gebiet-maps { display: block; margin-top: 12px; }

.hit-orte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.hit-orte li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid #2c6b63;
}
.hit-orte li:last-child { border-bottom: 0; }
.hit-ort-name { font-size: 18px; color: #eef5f2; }
.hit-ort-km {
  font-size: 18px; font-weight: 600; color: #f0b45f;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 820px) {
  .hit-gebiet {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
    padding: 24px 18px;
  }
  .hit-gebiet-trenner { margin-top: 40px; }
  .hit-gebiet-kopf, .hit-orte, .hit-gebiet-frage { grid-column: 1; grid-row: auto; }
  .hit-gebiet-satz { font-size: 19px; margin-bottom: 0; }
  .hit-orte li { padding: 12px 0; }
}

/* =========================================================================
   Themenliste "Was ist bei Ihnen gerade das Problem?"

   Eine Liste, zwei Gewichte: die ersten sechs Eintraege sind grosse Kacheln
   fuer die haeufigsten Faelle, ab dem siebten werden es Stichwoerter. Beide
   oeffnen dieselbe Erklaerung, die per order direkt hinter dem gewaehlten
   Eintrag landet (verhalten.js setzt --hit-problem auf Nummer x 10 + 1).

   Das Raster ist bewusst Flexbox und kein Grid: nur so koennen grosse Kacheln,
   schmale Stichwoerter und die Zwischenueberschrift in einem Container liegen.
   ========================================================================= */
.hit-problemraster {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
}

/* Die ersten sechs: grosse Kacheln, drei je Reihe.
   Feste Breite statt flex-grow - sonst zieht Flexbox die letzte Reihe auf
   volle Breite auseinander, und aus 3+3 wird 4+2. */
.hit-problemraster > button:nth-of-type(-n+6) {
  flex: 0 1 calc(33.333% - 10px);
}
@media (max-width: 1000px) and (min-width: 561px) {
  .hit-problemraster > button:nth-of-type(-n+6) {
    flex: 0 1 calc(50% - 7px);
  }
}

/* Zwischenueberschrift, sitzt zwischen dem sechsten und siebten Eintrag */
.hit-auch {
  order: 65;
  flex: 1 1 100%;
  margin: 18px 0 0;
  font-size: 18px;
  color: #b6ccc6;
}

/* Ab dem siebten: Stichwoerter als gleich breite, flache Felder (04.10.2026).
   Vorher waren es Pillen in Textbreite - das ergab ausgefranste Reihen und
   wirkte unruhig. Jetzt vier je Reihe, auf mittleren Schirmen zwei, am Handy
   eines; Flexbox streckt die Felder einer Reihe auf dieselbe Hoehe.
   Vier Spalten erst ab 1181px: darunter braeche fast jeder Text um
   (gemessen: bei 1024px alle acht, einer dreizeilig). */
.hit-problemraster > button:nth-of-type(n+7) {
  flex: 0 1 calc(25% - 10.5px) !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 60px !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-size: 17px !important;
  gap: 0 !important;
}
@media (max-width: 1180px) and (min-width: 701px) {
  .hit-problemraster > button:nth-of-type(n+7) {
    flex: 0 1 calc(50% - 7px) !important;
  }
}
@media (max-width: 700px) {
  .hit-problemraster > button:nth-of-type(n+7) {
    flex: 1 1 100% !important;
  }
}
/* Der Teaser gehoert nur auf die grossen Kacheln */
.hit-problemraster > button:nth-of-type(n+7) > span:nth-child(1) {
  white-space: normal !important;
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
.hit-problemraster > button:nth-of-type(n+7) > span:nth-child(2) {
  display: none !important;
}

.hit-problempanel {
  flex: 1 1 100%;
  order: var(--hit-problem, 999);
}

  .hit-problemraster > button:nth-of-type(1) { order: 10; }
  .hit-problemraster > button:nth-of-type(2) { order: 20; }
  .hit-problemraster > button:nth-of-type(3) { order: 30; }
  .hit-problemraster > button:nth-of-type(4) { order: 40; }
  .hit-problemraster > button:nth-of-type(5) { order: 50; }
  .hit-problemraster > button:nth-of-type(6) { order: 60; }
  .hit-problemraster > button:nth-of-type(7) { order: 70; }
  .hit-problemraster > button:nth-of-type(8) { order: 80; }
  .hit-problemraster > button:nth-of-type(9) { order: 90; }
  .hit-problemraster > button:nth-of-type(10) { order: 100; }
  .hit-problemraster > button:nth-of-type(11) { order: 110; }
  .hit-problemraster > button:nth-of-type(12) { order: 120; }
  .hit-problemraster > button:nth-of-type(13) { order: 130; }
  .hit-problemraster > button:nth-of-type(14) { order: 140; }
  .hit-problemraster > button:nth-of-type(15) { order: 150; }
  .hit-problemraster > button:nth-of-type(16) { order: 160; }
  .hit-problemraster > button:nth-of-type(17) { order: 170; }
  .hit-problemraster > button:nth-of-type(18) { order: 180; }
  .hit-problemraster > button:nth-of-type(19) { order: 190; }
  .hit-problemraster > button:nth-of-type(20) { order: 200; }

@media (max-width: 560px) {
  .hit-problemraster { gap: 10px; }
  .hit-problemraster > button:nth-of-type(-n+6) { flex: 1 1 100%; }
  .hit-auch { font-size: 17px; margin-top: 14px; }
  .hit-problemraster > button:nth-of-type(n+7) {
    min-height: 52px !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
  }
  .hit-problemraster > button:nth-of-type(n+7) > span:nth-child(1) {
    font-size: 16px !important;
  }
}

/* =========================================================================
   Auswahlfeld im Kostenrechner.

   Es bleibt ein echtes <select>: Auf dem iPhone oeffnet das den vertrauten
   Auswahlkegel, auf Android die Systemliste, und mit der Tastatur funktioniert
   es ohne Zutun. Ein nachgebautes Menue waere huebscher zu gestalten, aber auf
   genau den Geraeten schlechter, die hier zaehlen.

   Geaendert ist deshalb nur das Aussehen des geschlossenen Feldes: eigener
   Pfeil, mehr Luft, klarer Fokus. Die 22 Eintraege sind zusaetzlich in acht
   Gruppen unterteilt (neue_calc.py) - das hilft mehr als jede Optik.
   ========================================================================= */
.hit-auswahl {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 60px !important;
  padding: 16px 52px 16px 18px !important;
  border: 1.5px solid #cfc4b1 !important;
  border-radius: 10px !important;
  background-color: #fffdf9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230f4c46' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  /* !important ist noetig: Der Export setzt am Feld inline "background: #f7f2ea"
     als Kurzform - die loescht background-image mit. Ohne den eigenen Pfeil
     saehe das Feld wie ein Textfeld aus, weil appearance: none den
     Systempfeil entfernt. */
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 19px;
  color: #1a2523;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hit-auswahl:hover { border-color: #0f4c46 !important; }
.hit-auswahl:focus-visible {
  border-color: #0f4c46 !important;
  box-shadow: 0 0 0 3px rgba(15, 76, 70, .18);
}

/* Gruppenueberschriften: in manchen Browsern kursiv, das passt hier nicht */
.hit-auswahl optgroup {
  font-style: normal;
  font-weight: 600;
  color: #0f4c46;
}
.hit-auswahl option {
  font-weight: 400;
  color: #1a2523;
  padding: 6px 0;
}

@media (max-width: 560px) {
  .hit-auswahl {
    /* !important, weil gemeinsam-mobil.css allen Feldern 16px vorgibt
       (iOS-Zoomschwelle). 17px liegt darueber und ist besser lesbar. */
    font-size: 17px !important;
    padding: 15px 46px 15px 16px !important;
    background-position: right 13px center !important;
  }
}

/* =========================================================================
   Notfallkarte zum Herunterladen (Betrugsabschnitt).
   Ein Knopf, kein Textlink: Die Zielgruppe erkennt "hier kann ich etwas
   bekommen" an einer Flaeche mit Symbol besser als an unterstrichenem Text.
   ========================================================================= */
.hit-notfallkarte {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 22px 14px 18px;
  background: #fffdf9;
  border: 1.5px solid #cfc4b1;
  border-radius: 12px;
  color: #1a2523;
  text-decoration: none;
  line-height: 1.3;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hit-notfallkarte:hover { border-color: #0f4c46; box-shadow: 0 2px 10px rgba(15,76,70,.10); }
.hit-notfallkarte svg { flex: none; color: #a8560f; }
.hit-notfallkarte span { display: grid; gap: 2px; }
.hit-notfallkarte strong { font-size: 18px; font-weight: 600; color: #0f4c46; }
.hit-notfallkarte small { font-size: 15px; color: #6a7570; }

@media (max-width: 560px) {
  .hit-notfallkarte { width: 100%; padding: 14px 16px; }
}

/* =========================================================================
   Kundenstimmen (patch_bewertungen.py): die Google-Bewertungen als stehende
   Karten. Bewusst kein Slider - Text darf der Zielgruppe nicht davonlaufen -
   und kein Fremd-Widget (Datenschutzversprechen: keine fremden Server).
   ========================================================================= */
.hit-stimmen-schnitt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 20px; color: #44514d; margin: 0 0 40px;
}
.hit-stimmen-schnitt strong { color: #1a2523; }
.hit-stimme-sterne { display: inline-flex; gap: 2px; }
.hit-stimme-sterne svg { flex: none; }

.hit-stimmen-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.hit-stimme {
  margin: 0;
  display: flex; flex-direction: column; gap: 14px;
  /* Creme auf dem warmweissen Abschnitt - Umkehrung des Datenkastens */
  background: #f7f2ea; border: 1px solid #e6ddcd; border-radius: 14px;
  padding: 26px 28px;
}
.hit-stimme blockquote {
  margin: 0; font-size: 19px; line-height: 1.6; color: #263330;
  flex: 1 1 auto;                 /* Fusszeilen der Karten auf gleicher Hoehe */
}
.hit-stimme figcaption { display: flex; align-items: center; gap: 12px; }
.hit-stimme-initial {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #dfeae6; color: #0f4c46;
  font-family: Bitter, Georgia, serif; font-size: 20px; font-weight: 700;
}
.hit-stimme-wer { display: grid; line-height: 1.35; }
.hit-stimme-wer strong { font-size: 17px; color: #1a2523; }
.hit-stimme-wer > span { font-size: 15px; color: #5c6763; }
.hit-stimmen-hinweis { font-size: 15px; color: #5c6763; margin: 18px 0 0; max-width: 46em; }

@media (max-width: 820px) {
  .hit-stimmen-raster { grid-template-columns: 1fr; gap: 14px; }
  .hit-stimme { padding: 20px 18px; }
  .hit-stimme blockquote { font-size: 18px; }
  .hit-stimmen-schnitt { margin-bottom: 26px; }
}

/* ======================================================================
   Gestraffte Startseite (patch_straffen.py, 10/2026)
   ====================================================================== */

/* Aufklapp-Zeilen (<details>): Inhalt bleibt im Dokument, Seite wird kürzer */
.hit-klappe { border: 1.5px solid #cfc4b1; border-radius: 12px; background: #fffdf9; margin: 22px 0 0; }
.hit-klappe > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 60px; padding: 14px 20px; border-radius: 10px;
  font-size: 19px; font-weight: 600; line-height: 1.35; color: #0f4c46;
}
.hit-klappe > summary::-webkit-details-marker { display: none; }
.hit-klappe > summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin: -5px 6px 0 0;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.hit-klappe[open] > summary::after { transform: rotate(-135deg); margin-top: 6px; }
.hit-klappe > summary:hover { background: rgba(15, 76, 70, .05); }
.hit-klappe > summary:focus-visible { outline: 3px solid #f0b45f; outline-offset: 2px; }
.hit-klappe > summary > span { display: block; }
.hit-klappe > summary h3 { font: inherit; color: inherit; margin: 0; }
.hit-klappe > summary small { display: block; margin-top: 2px; font-size: 16px; font-weight: 400; color: #5c6763; }
.hit-klappe-inhalt { padding: 6px 20px 20px; }

.hit-preis-kern { font-size: 18px; color: #3c4a46; margin: 0; }
.hit-klappe-maschen { margin-top: 0; }
.hit-klappe-maschen .hit-klappe-inhalt { padding-top: 14px; }
.hit-klappe-daten { margin: 0; }
.hit-datenliste ul { margin: 0; padding-left: 22px; font-size: 18px; color: #3c4a46; line-height: 1.55; }
.hit-datenliste li + li { margin-top: 8px; }

/* Rechner: die weiße Karte bleibt, nur ihr Inhalt klappt auf */
.hit-klappe-rechner { border: 0; background: transparent; margin: 0; }
.hit-klappe-rechner > summary { padding: 0; min-height: 52px; }
.hit-klappe-rechner > summary:hover { background: transparent; }
.hit-klappe-rechner > summary h3 { font-family: Bitter, Georgia, serif; font-size: 23px; font-weight: 600; color: #1a2523; }
.hit-klappe-rechner > summary small { font-size: 18px; color: #545f5b; }
.hit-klappe-rechner[open] > summary { margin-bottom: 24px; }

/* Weitere Bewertungen */
.hit-klappe-stimmen { border: 0; background: transparent; margin: 16px 0 0; }
.hit-klappe-stimmen > summary { border: 1.5px solid #cfc4b1; background: #f7f2ea; }
.hit-klappe-stimmen[open] > summary { margin-bottom: 16px; }

@media (min-width: 821px) {
  /* Am Rechner stehen alle Bewertungen im Raster, die Zeile dazwischen stört nur */
  .hit-klappe-stimmen[data-auf-breit][open] > summary { display: none; }
  .hit-klappe-stimmen[data-auf-breit][open] { margin-top: 16px; }
}

@media (max-width: 820px) {
  /* Ablauf: Nummer links, Titel und Text rechts - vier kurze Zeilen statt vier Blöcke */
  #ablauf > p { margin-bottom: 28px !important; }
  .hit-ablauf-raster { gap: 22px !important; }
  .hit-ablauf-schritt { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; align-items: start; }
  .hit-ablauf-schritt .hit-ablauf-nr { grid-row: 1 / span 2; margin-bottom: 0 !important; }
  .hit-ablauf-schritt .hit-ablauf-nr > span:last-child { display: none; }
  .hit-ablauf-schritt h3 { margin: 2px 0 4px !important; font-size: 20px !important; }
}

/* ======================================================================
   Kontaktwege (Inhaber, 03.10.2026): Am Handy trägt die feste Leiste unten
   (Anrufen · WhatsApp), am Rechner die Kopfzeile (Rufnummer · Anfrage
   schreiben). In den Abschnitten stehen keine weiteren Kontaktknöpfe; das
   Formular gibt es nur im Kontaktbereich. Einzige Ausnahme am Rechner: das
   große Knopfpaar im Start.
   ====================================================================== */
/* Dreifache Klasse: muss die Handy-Regel „header a:not(tel):not(.marke) { display: inline-flex !important }“
   aus gemeinsam-mobil.css schlagen, die später im Stylesheet steht. */
header a.hit-kopf-anfrage.hit-kopf-anfrage.hit-kopf-anfrage { display: none !important; }
/* Ab 1160px passt die Kopfzeile mit beiden Knöpfen in eine Zeile (gemessen); 1200px lässt Platz für den Rollbalken. */
@media (min-width: 1200px) {
  header a.hit-kopf-anfrage.hit-kopf-anfrage.hit-kopf-anfrage {
    display: inline-flex !important; align-items: center; min-height: 50px; padding: 11px 20px; margin-left: -14px;
    border: 1.5px solid #0f4c46; border-radius: 8px; background: #fffdf9; color: #0f4c46;
    font-size: 18px; font-weight: 500; text-decoration: none; white-space: nowrap;
  }
  header a.hit-kopf-anfrage.hit-kopf-anfrage.hit-kopf-anfrage:hover { background: #dfeae6; color: #0f4c46; }
}
/* Dieselbe Bedingung wie die feste Leiste (.hit-cta in gemeinsam-mobil.css) */
@media (max-width: 820px) and (hover: none) {
  .hit-hero-knoepfe { display: none !important; }
}
/* Antwortfeld der Kacheln: keine Kontaktknöpfe mehr. Bis 820px sind die Kostentexte ausgeblendet
   (startseite-mobil.css), der Kasten wäre leer; darüber endet er mit dem Kostenlink. */
@media (max-width: 820px) { .hit-panel-kosten { display: none !important; } }
.hit-panel-kosten > .hit-panel-kostentext:last-child { margin-bottom: 0 !important; }

/* Start: das Versprechen hebt sich vom übrigen Kleintext ab */
.hit-hero-versprechen { font-weight: 600; color: #1a2523; }


/* =========================================================================
   Mobile Regeln fuer ALLE Seiten: Tippziele, Bilder und die feste
   Aktionsleiste am unteren Rand.
   Wird von build.py sowohl in das Bundle der Startseite eingebettet als
   auch an assets/site.css angehaengt (Impressum, Datenschutz, 404).
   ========================================================================= */

/* --- 3. Tippziele: mindestens 44px hoch (Apple/WCAG-Richtwert) ---------- */
@media (max-width: 820px) {
  /* Die Marke ist ausgenommen: sie ist ein Grid aus Name und Zeile darunter.
     Ein pauschales display: inline-flex wuerde beide nebeneinander setzen. */
  header a:not([href^="tel:"]):not(.marke) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  header a.marke { min-height: 44px !important; align-content: center !important; }
  footer a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Schieberegler des Kostenrechners griffiger machen */
  input[type="range"] {
    height: 44px !important;
    padding: 14px 0 !important;
    box-sizing: content-box !important;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 28px !important;
    height: 28px !important;
  }
  input[type="range"]::-moz-range-thumb {
    width: 28px !important;
    height: 28px !important;
  }
  /* Formularfelder: 16px verhindert das automatische Hineinzoomen in iOS */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 48px !important;
  }
  textarea { min-height: 110px !important; }
}

/* --- 5b. Kopfzeile auf schmalen Schirmen ------------------------------- */
@media (max-width: 560px) {
  /* Marke bekommt die volle Zeile, sonst quetscht der Name sich um. */
  .marke { flex: 1 1 100% !important; }
  .kopf-innen { gap: 6px 16px !important; padding: 10px 16px !important; }
  .kopf a.link { font-size: 16px !important; }
  /* Untertitel und grosses Zeichen kosten am Handy nur Hoehe: der Satz steht
     ohnehin in der Ueberschrift und in der Fusszeile. */
  header .marke-zeile, header a.marke > div > span:nth-child(2) { display: none !important; }
  header a.marke svg { width: 36px !important; height: 36px !important; }
  header > div { padding: 8px 16px !important; }
  header a.marke { min-height: 40px !important; }
  .hit-nav { flex: 1 1 100%; gap: 2px 16px !important; }
  .hit-nav a { min-height: 40px !important; }
}
/* Der Telefonknopf oben ist auf Touch-Geraeten ueberfluessig, sobald die
   feste Leiste unten steht. Am gezoomten Rechner (kein Touch, keine Leiste)
   bleibt er der einzige Anruf-Knopf in der Kopfzeile - also stehen lassen. */
@media (max-width: 560px) and (hover: none) {
  header a[href^="tel:"] { display: none !important; }
}
@media (max-width: 560px) and (hover: hover) {
  header a[href^="tel:"] { padding: 8px 14px !important; font-size: 16px !important; min-height: 40px !important; }
}
/* Tablet hoch: Leiste unten und Knopf oben gleichzeitig sind doppelt */
@media (min-width: 561px) and (max-width: 820px) and (hover: none) {
  header a[href^="tel:"] { display: none !important; }
}

/* --- 6. Bilder und lange Woerter -------------------------------------- */
@media (max-width: 820px) {
  img { max-width: 100% !important; height: auto !important; }
  /* E-Mail-Adresse und aehnlich lange Zeichenketten duerfen umbrechen */
  a[href^="mailto:"] { overflow-wrap: anywhere !important; }
}

/* =========================================================================
   7. Feste Aktionsleiste unten (nur Touch-Geraete bis 820 px). Ein
   gezoomtes Rechnerfenster bekommt sie nicht - dort haette sie zusammen mit
   der Kopfzeile die Haelfte des Fensters belegt.
   ========================================================================= */
.hit-cta {
  display: none;
}

@media (max-width: 820px) and (hover: none) {
  .hit-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 8px 12px max(12px, env(safe-area-inset-bottom, 0px));
    background: rgba(247, 242, 234, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid #d9cfbd;
    box-shadow: 0 -2px 14px rgba(15, 76, 70, .10);
  }

  .hit-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    border-radius: 10px;
    font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.1;
  }

  .hit-cta .hit-anruf {
    background: #0f4c46;
    color: #fff;
  }
  .hit-cta .hit-anruf:active { background: #0a3a35; }

  .hit-cta .hit-whatsapp {
    background: #fffdf9;
    color: #0f4c46;
    border: 1.5px solid #0f4c46;
  }
  .hit-cta .hit-whatsapp:active { background: #eef5f2; }

  .hit-cta svg { flex: none; }

  /* Anrufknopf mit Nummer in zweiter Zeile. vw-basierte Groesse, damit die
     Nummer auch bei grosser Systemschrift in einer Zeile bleibt. */
  .hit-anruf-text { display: grid; gap: 1px; text-align: left; line-height: 1.15; }
  .hit-anruf-wort { font-size: clamp(13px, 3.8vw, 15px); font-weight: 600; }
  .hit-anruf-nummer {
    font-size: clamp(14px, 4.4vw, 17px); font-weight: 700; white-space: nowrap;
    letter-spacing: .01em; font-variant-numeric: tabular-nums;
  }
  .hit-cta a { min-width: 0; overflow: hidden; }
  .hit-cta .hit-whatsapp { font-size: clamp(13px, 3.8vw, 18px); white-space: nowrap; }

  /* Platz schaffen, damit die Leiste nichts verdeckt.
     Achtung: Der Wurzel-Container der Startseite hat overflow-x: hidden.
     Dadurch scrollt dieser Container und nicht der body - ein
     padding-bottom am body landet ausserhalb des Scrollbereichs und
     bleibt wirkungslos. Der Abstand muss deshalb an den Footer selbst.
     Das [style]-Attribut hebt die Spezifitaet ueber die
     [style*="padding: ..."]-Regeln weiter oben. */
  footer[style] { padding-bottom: 96px !important; }   /* Startseite, Inline-Styles */
  footer.fuss   { padding-bottom: 96px !important; }   /* Impressum, Datenschutz, 404 */
  body { padding-bottom: 0 !important; }
  /* Fokussierte Felder landen ueber der Leiste, nicht darunter */
  html { scroll-padding-bottom: 100px; }
}

/* Wer Bewegung reduziert haben will, bekommt keine Weichzeichnung */
@media (prefers-reduced-motion: reduce) {
  .hit-cta { backdrop-filter: none; background: #f7f2ea; }
}