/* ==========================================================================
   Alltagshilfe Wenzl – Angelbachtal
   Zentrales Stylesheet · alle Seiten binden nur diese Datei ein
   --------------------------------------------------------------------------
   Aufbau:
   1. Design-Tokens (Farben, Typo, Abstände)
   2. Basis / Reset
   3. Layout-Bausteine (Container, Sections)
   4. Kopfleiste: Kopfbereich + Navigation (scrollen mit, kein Burger-Menü)
   5. Typografie-Elemente
   6. Komponenten (Buttons, Karten, Listen, Tabelle, Platzhalter)
   7. Fußbereich
   8. Responsive Anpassungen
   ========================================================================== */

/* 1. Design-Tokens ======================================================== */

:root {
  /* Farben – direkt aus dem Logo abgeleitet: Blattgrün, Gold, Orange.
     Bewusst kein Grau in Kopf- und Fußbereich. */
  --papier:        #FBF8F1;   /* Seitenhintergrund, warmes Papierweiß       */
  --papier-warm:   #F2EDE0;   /* abgesetzte Flächen, Fußbereich             */
  --weiss:         #FFFFFF;
  --tanne:         #3A6210;   /* Primärfarbe, dunkles Blattgrün (Schriftzug)*/
  --tanne-hell:    #4E8317;   /* Grün für Hover-Zustände                    */
  --gruen-frisch:  #73A529;   /* frisches Grün aus dem Logo-Kreis           */
  --tanne-tint:    #EBF2E0;   /* sehr helle Grünfläche                      */
  --honig:         #F2A01A;   /* Gold aus dem Logo, für Flächen             */
  --honig-dunkel:  #A85B05;   /* dunkles Orange, für farbige Schrift        */
  --honig-tint:    #FDF1DB;
  --tinte:         #22302C;   /* Fließtext                                  */
  --tinte-weich:   #4B5C56;   /* Sekundärtext                               */
  --linie:         #E4DCCB;
  --herz:          #C4406A;   /* Rosa des Herzens im Logo (dunklerer Ton)   */

  /* Typografie – bewusst größer als üblich (Grundgröße 21px)
     Überschriftenschrift: Source Serif 4. Eine klassische Serifenschrift in
     der Anmutung von Times New Roman – ruhig und sachlich, aber warm. Sie ist
     die Schwesterschrift von Source Sans 3 (Fließtext), deshalb passen die
     beiden ohne Nachjustieren zusammen.
     Zum Tauschen genügt diese eine Zeile plus die <link>-Zeile im <head>. */
  --schrift-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --schrift-text:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Einheitliche Fließtextgröße: gilt für ALLE Fließtexte auf allen Seiten.
     Hier zentral ändern, dann passt es überall. */
  --text: 1.16rem;

  /* Abstände */
  --raum-xs: 0.5rem;
  --raum-s:  1rem;
  --raum-m:  1.75rem;
  --raum-l:  3rem;
  --raum-xl: 5rem;

  /* Feste Höhe der Menüleiste auf Handy und Tablet. Sie ist bewusst fest:
     dadurch ändert sich die Seitenhöhe beim Scrollen nicht mehr (siehe
     Abschnitt 8). */
  --navhoehe: 3.1rem;

  --breite: 76rem;      /* max. Inhaltsbreite */
  --breite-text: 44rem; /* max. Lesebreite für Fließtext */

  --radius:    14px;
  --radius-s:  8px;
  --schatten:  0 2px 4px rgba(34, 48, 44, .05), 0 8px 24px rgba(34, 48, 44, .07);
  --schatten-s: 0 1px 3px rgba(34, 48, 44, .08);
}

/* 2. Basis / Reset ======================================================== */

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

html {
  font-size: 21px;              /* Grundgröße bewusst groß */
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;     /* Platz für die stehende Menüleiste */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--text);   /* einheitliche Fließtextgröße */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--tanne); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tanne-hell); }

/* Lange E-Mail-Adressen und Verweise dürfen umbrechen, damit auf schmalen
   Handys keine Zeile seitlich aus der Seite herausragt. */
a[href^="mailto:"], a[href^="http"] { overflow-wrap: anywhere; }

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

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tanne);
  color: #fff;
  padding: var(--raum-s) var(--raum-m);
  z-index: 200;
  border-radius: 0 0 var(--radius-s) 0;
}
.sprunglink:focus {
  left: 0;
  color: #fff;
}

/* 3. Layout-Bausteine ===================================================== */

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

.abschnitt { padding-block: var(--raum-xl); }
.abschnitt--schmal { padding-block: var(--raum-l); }
.abschnitt--warm { background: var(--papier-warm); }
.abschnitt--gruen { background: var(--tanne-tint); }

.lesebreite { max-width: var(--breite-text); }

/* Auf dem Container angewendet: volle Breite behalten, Inhalte auf Lesebreite */
.container.lesebreite { max-width: var(--breite); }
.container.lesebreite > * { max-width: var(--breite-text); }

/* Seitenkopf (Augenbraue + H1) – schließt enger an den folgenden Abschnitt an */
.seitenkopf { padding-block: var(--raum-l) var(--raum-m); }

/* 4. Kopfleiste: Kopfbereich + Navigation ================================== */

/* Kopfbereich und Menü liegen in einer gemeinsamen Leiste .kopfleiste.
   Das Mitscroll-Verhalten ist nach Gerätegröße getrennt:

   · Handy und Tablet (bis 992 px):  Kopfbereich mit der Anruf-Schaltfläche
     scrollt weg, nur die Menüleiste bleibt oben stehen und staucht sich
     dabei in eine Zeile zusammen (Klasse .ist-kompakt aus js/script.js).
   · Desktop (ab 992 px):  die komplette Kopfleiste bleibt oben stehen,
     die Anruf-Schaltfläche ist also immer sichtbar – in voller Größe.

   Die Grenze steht unten in den Media Queries (62rem = 992 px). */
.kopfleiste {
  /* Handy und Tablet: die Hülle löst sich auf (display: contents), damit die
     Menüleiste darin frei am oberen Bildschirmrand kleben kann. Bliebe die
     Hülle ein eigener Kasten, würde das Menü zusammen mit dem Kopfbereich
     nach oben hinausgescrollt. Am Desktop wird sie unten wieder zum Kasten. */
  display: contents;
}

.kopf {
  background: var(--weiss);
}

.kopf__oben {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-m);
  padding-block: 0.85rem;
}

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

/* Logo: quadratisch 1:1 */
.marke__logo {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  object-fit: contain;
}

.marke__text { display: flex; flex-direction: column; }
.marke__name {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--tanne);
  letter-spacing: -0.01em;
}
.marke__zusatz {
  font-size: 0.72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}

/* Navigation: alle Punkte sichtbar, umbricht bei wenig Platz – kein Burger.
   Bleibt auf Handy und Tablet allein oben stehen (Grundeinstellung);
   am Desktop übernimmt das die umgebende .kopfleiste. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--papier);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 2px 10px rgba(34, 48, 44, .06);
}
.nav__liste {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.35rem;
}
.nav__link {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--tinte);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav__link:hover { background: var(--tanne-tint); color: var(--tanne); }
.nav__link[aria-current="page"] {
  background: var(--tanne);
  color: var(--weiss);
}

/* 5. Typografie =========================================================== */

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 600;
  color: var(--tanne);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 var(--raum-s);
  overflow-wrap: break-word;   /* lange Wörter sprengen die Seite nicht */
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.1rem); margin-top: 0; }
h3 { font-size: 1.25rem; color: var(--tinte); }

p { margin: 0 0 var(--raum-s); }
p:last-child { margin-bottom: 0; }

/* Einleitungsabsatz: gleiche Größe wie der übrige Fließtext,
   nur etwas weicher in der Farbe. */
.vorspann {
  font-size: var(--text);
  line-height: 1.6;
  color: var(--tinte-weich);
}
/* Variante für Seiten, auf denen der ganze Text in einer Farbe stehen soll
   (im Einsatz auf „Über mich“). */
.vorspann--dunkel { color: var(--tinte); }

.augenbraue {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--honig-dunkel);
  margin-bottom: var(--raum-xs);
}

.hinweis {
  font-style: italic;
  color: var(--tinte-weich);
}

strong { font-weight: 700; color: var(--tinte); }

/* 6. Komponenten ========================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn--haupt {
  background: var(--tanne);
  color: var(--weiss);
  box-shadow: var(--schatten-s);
}
.btn--haupt:hover { background: var(--tanne-hell); color: var(--weiss); }

.btn--rand {
  border-color: var(--tanne);
  color: var(--tanne);
  background: transparent;
}
.btn--rand:hover { background: var(--tanne-tint); }

.btn--gross { padding: 0.9rem 1.7rem; font-size: 1.05rem; }

.btn__telefon { font-variant-numeric: tabular-nums; }

/* Anruf-Schaltfläche: Symbol + zweizeilige Beschriftung.
   Wird im Kopfbereich UND im Seiteninhalt verwendet – überall identisch. */
.anrufen {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.15rem 0.5rem 0.6rem;
  border-radius: 999px;
  background: var(--tanne);
  color: var(--weiss);
  text-decoration: none;
  box-shadow: var(--schatten-s);
  transition: background-color .15s ease, transform .15s ease;
}
.anrufen:hover { background: var(--tanne-hell); color: var(--weiss); transform: translateY(-2px); }
.anrufen__symbol {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--honig);
  color: var(--tanne);
  display: grid;
  place-items: center;
}
.anrufen__symbol svg { width: 1.15rem; height: 1.15rem; display: block; }
.anrufen__text { display: flex; flex-direction: column; line-height: 1.2; }
.anrufen__label {
  font-size: 0.72rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
}
.anrufen__nummer {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Helle Variante für den grünen Handlungsaufruf am Seitenende */
.anrufen--hell {
  background: var(--honig);
  color: var(--tinte);
}
.anrufen--hell:hover { background: #E9A527; color: var(--tinte); }
.anrufen--hell .anrufen__symbol { background: var(--weiss); color: var(--tanne); }
.anrufen--hell .anrufen__label { color: rgba(34, 48, 44, .7); }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-s);
  margin-top: var(--raum-m);
}

/* --- Startseiten-Auftakt ---
   Der obere Abstand ist derselbe wie bei .seitenkopf (var(--raum-l)). Dadurch
   beginnt der Text auf der Startseite auf genau derselben Höhe wie auf
   „Unsere Leistungen“ – beim Durchklicken springt nichts. */
.auftakt {
  padding-block: var(--raum-l);
  background:
    radial-gradient(120% 90% at 92% 0%, var(--honig-tint) 0%, rgba(251,239,210,0) 55%),
    var(--papier);
}
.auftakt__raster > *,
.duo > * { min-width: 0; }

/* Oben ausgerichtet, nicht zentriert: sonst schiebt die höhere Spalte
   (der Notizzettel) den Text nach unten. */
.auftakt__raster {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--raum-l);
  align-items: start;
}
/* Der Notizzettel darf dafür etwas tiefer hängen. */
.auftakt .versprechen { margin-top: var(--raum-m); }
.auftakt h1 { margin-bottom: var(--raum-s); }
.auftakt__unterzeile {
  font-family: var(--schrift-display);
  font-size: 1.25rem;
  color: var(--tinte-weich);
  margin-bottom: var(--raum-m);
  line-height: 1.35;
}

/* --- Bilder ---
   .bild ersetzt die früheren Platzhalter. Das Seitenverhältnis wird per
   Klasse vorgegeben, das Bild wird passend beschnitten (object-fit).
   So ist es egal, wie groß die gelieferte Datei genau ist. */
.bild {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  object-fit: cover;
  background: var(--tanne-tint);
}
.bild--quadrat { aspect-ratio: 1 / 1; }
.bild--breit   { aspect-ratio: 16 / 9; }
.bild--hoch    { aspect-ratio: 4 / 5; }
.bild--karte   { aspect-ratio: 21 / 9; }

/* Rahmen um ein Bild in zweispaltigen Abschnitten */
.bildrahmen {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

/* Kurze Zeile unter einem Bild (z. B. unter der Karte auf der Standort-Seite) */
.bild__unterschrift {
  margin-top: var(--raum-xs);
  font-size: 0.85rem;
  color: var(--tinte-weich);
}

/* --- Bild-Platzhalter (nur noch als Reserve, aktuell nicht mehr im Einsatz) --- */
.platzhalter {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--raum-m);
  background:
    repeating-linear-gradient(135deg,
      var(--tanne-tint) 0 14px,
      #dfeae5 14px 28px);
  border: 1px dashed var(--tanne-hell);
  border-radius: var(--radius);
  color: var(--tanne);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
.platzhalter--quadrat { aspect-ratio: 1 / 1; }
.platzhalter--breit   { aspect-ratio: 16 / 9; }
.platzhalter--hoch    { aspect-ratio: 4 / 5; }
.platzhalter--karte   { aspect-ratio: 21 / 9; }
.platzhalter span { display: block; font-weight: 400; color: var(--tinte-weich); }

/* Die Karte auf der Standort-Seite ist ein ganz normales Bild
   (img.bild.bild--karte) und liegt auf dem eigenen Server. Die frühere
   OpenStreetMap-Einbindung mit Zwei-Klick-Lösung ist entfallen – damit
   entfällt auch der Datenschutz-Hinweis dazu. */

/* --- Karten (Inhaltskästen) --- */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--raum-m);
  margin-top: var(--raum-m);
}
/* Ein einziger Kasten-Typ für die ganze Seite: weiß, feiner Rand ringsum,
   links der kräftige orangene Streifen. .karte und .leistung sind bewusst
   identisch – so sehen die Kästen auf „Unsere Leistungen“, „Wir bieten mehr“,
   „Jobs“ und „Kontakt“ gleich aus. */
.karte,
.leistung {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--honig);
  border-radius: var(--radius);
  padding: var(--raum-m);
  box-shadow: var(--schatten-s);
}
.karte h3,
.leistung h3 {
  margin: 0 0 0.4rem;
  color: var(--tanne);
  font-size: 1.2rem;
}
.karte p,
.leistung p { margin: 0; color: var(--tinte); }
.karte p + p,
.leistung p + p { margin-top: var(--raum-s); }

/* --- Signatur: WENZL-Qualitätsversprechen (Notizzettel) ---
   Der Zettel liegt leicht schief auf der Seite und ist mit einer Stecknadel
   angepinnt. Die Nadel besteht aus zwei Teilen: dem Schaft (::before) und dem
   Kopf (::after) in der Herzfarbe des Logos. Der Schaft ist um 40° gedreht,
   sticht also von oben rechts nach unten links ein. */
.versprechen {
  background: var(--honig-tint);
  border-radius: var(--radius);
  padding: var(--raum-l) var(--raum-m);
  box-shadow: var(--schatten);
  transform: rotate(-2.6deg);
  max-width: 25rem;
  margin-inline: auto;
  position: relative;
}
.versprechen::before {   /* Nadelschaft */
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 8px);
  width: 3px;
  height: 34px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, #d9dee2 0%, #9aa2a9 55%, #6d757c 100%);
  transform-origin: top center;
  rotate: 40deg;   /* Einstich von oben rechts nach unten links */
}
.versprechen::after {    /* Nadelkopf in der Herzfarbe */
  content: "";
  position: absolute;
  top: 4px;
  left: calc(50% - 1.5px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
              #E88BA6 0%, var(--herz) 48%, #8C2748 100%);
  box-shadow: 0 2px 5px rgba(34, 48, 44, .3);
}
.versprechen__titel {
  text-align: center;
  font-family: var(--schrift-display);
  font-size: 1.15rem;
  color: var(--tanne);
  margin: 0 0 var(--raum-m);
}
.versprechen__liste { list-style: none; margin: 0; padding: 0; }
.versprechen__liste li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: baseline;
  gap: var(--raum-s);
  padding-block: 0.35rem;
}
.versprechen__liste li + li { border-top: 1px solid rgba(216, 150, 22, .3); }
/* Buchstabe: gleiche Schrift wie das Wort daneben, nur größer –
   und in der Herzfarbe aus dem Logo. */
.versprechen__buchstabe {
  font-family: var(--schrift-text);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--herz);
  text-align: center;
}
.versprechen__wort { font-size: 1.05rem; font-weight: 600; color: var(--tanne); }

/* --- Aufzählungen mit Häkchen --- */
.liste-haken { list-style: none; margin: 0; padding: 0; }
.liste-haken li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--raum-s);
}
.liste-haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.8rem;
  height: 0.45rem;
  border-left: 3px solid var(--honig);
  border-bottom: 3px solid var(--honig);
  rotate: -45deg;
}

/* --- Ortsliste mit Initialen (alphabetisch geordnet) --- */
.orte {
  list-style: none;
  margin: var(--raum-m) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem var(--raum-m);
}
.orte li {
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--linie);
  font-size: var(--text);
}
/* Anfangsbuchstabe: gleiche Schrift wie der restliche Ortsname,
   nur größer – und in der Herzfarbe aus dem Logo. */
.orte b {
  font-family: inherit;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--herz);
  font-weight: 700;
}

/* --- Preistabelle --- */
.tabelle-huelle { margin-top: var(--raum-m); }

.tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.tabelle th, .tabelle td {
  padding: var(--raum-s) var(--raum-m);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
  font-size: var(--text);
}
.tabelle thead th {
  background: var(--tanne);
  color: var(--weiss);
  font-family: var(--schrift-text);
  font-size: 0.85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody th { color: var(--tanne); font-weight: 700; }
.tabelle .paragraf {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--tinte-weich);
}

/* --- Preis-Blickfang --- */
.preis {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: var(--honig-tint);
  border-radius: var(--radius);
  padding: var(--raum-m);
  margin-bottom: var(--raum-m);
}
.preis__zahl {
  font-family: var(--schrift-display);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 600;
  color: var(--tanne);
}
.preis__einheit { font-weight: 600; color: var(--tinte-weich); }

/* --- Frage/Antwort --- */
.fa + .fa { margin-top: var(--raum-m); }
.fa h3 { color: var(--tanne); margin-bottom: 0.3rem; }

/* --- Kontaktzeilen --- */
.kontaktliste { list-style: none; margin: var(--raum-m) 0 0; padding: 0; }
.kontaktliste li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: var(--raum-s) 0;
  border-bottom: 1px solid var(--linie);
  font-size: var(--text);
}
.kontaktliste li:last-child { border-bottom: 0; }
.kontaktliste span { min-width: 0; overflow-wrap: anywhere; }
.kontaktliste .symbol { font-size: 1.3rem; line-height: 1; }
.kontaktliste a { font-weight: 700; text-decoration: none; }
.kontaktliste a:hover { text-decoration: underline; }

/* --- Handlungsaufruf am Seitenende --- */
.aufruf {
  background: var(--tanne);
  color: var(--weiss);
  border-radius: var(--radius);
  padding: var(--raum-l) var(--raum-m);
  text-align: center;
}
.aufruf h2 { color: var(--weiss); }
.aufruf p { color: rgba(255,255,255,.88); max-width: 34rem; margin-inline: auto; }
.aufruf .btn--haupt { background: var(--honig); color: var(--tinte); }
.aufruf .btn--haupt:hover { background: #E9A527; color: var(--tinte); }
.aufruf .btn--rand { border-color: rgba(255,255,255,.6); color: var(--weiss); }
.aufruf .btn--rand:hover { background: rgba(255,255,255,.12); }
.aufruf .knopfreihe { justify-content: center; }

/* --- Weiterführende Verweise (statt Wiederholung ganzer Inhalte) --- */
.weiter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--raum-s);
  margin-top: var(--raum-m);
}
.weiter a {
  display: block;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-s) var(--raum-m);
  text-decoration: none;
  font-weight: 700;
  color: var(--tanne);
  box-shadow: var(--schatten-s);
  transition: transform .15s ease, border-color .15s ease;
}
.weiter a:hover { transform: translateY(-2px); border-color: var(--tanne-hell); }
.weiter span {
  display: block;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--tinte-weich);
}

/* --- Zwei Spalten Text/Bild --- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raum-l);
  align-items: center;
}
.duo--schmalBild { grid-template-columns: 1.3fr 0.7fr; }

/* Im Seitenkopf steht der Text immer oben – auf gleicher Höhe wie auf den
   Seiten ohne Bild. Sonst würde ein hohes Bild daneben den Text nach unten
   schieben, und die Überschrift säße auf jeder Seite woanders.
   .duo--oben macht dasselbe für zweispaltige Abschnitte weiter unten. */
.seitenkopf .duo,
.duo--oben { align-items: start; }

/* Kontakt-Seite: der Kasten rechts startet auf derselben Höhe wie die
   Kontaktzeilen links (die haben oben denselben Abstand). */
.duo--oben > * > .karte,
.duo--oben > .karte { margin-top: var(--raum-m); }

/* Dafür rückt das Bild ein Stück nach unten, damit es nicht bündig
   an der Überschrift klebt. */
.seitenkopf .duo .bildrahmen { margin-top: var(--raum-m); }

/* 7. Fußbereich =========================================================== */

.fuss {
  font-size: 1rem;   /* Fußbereich bewusst etwas kompakter als der Fließtext */
  background: var(--papier-warm);
  border-top: 4px solid var(--gruen-frisch);
  padding-block: var(--raum-l) var(--raum-m);
  margin-top: var(--raum-xl);
}
.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--raum-m);
}
.fuss h2 {
  font-size: 1.05rem;
  font-family: var(--schrift-text);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  margin-bottom: 0.6rem;
}
.fuss__logo {
  width: 150px;
  height: auto;
  margin-bottom: var(--raum-s);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.4rem; }
.fuss a { color: var(--tinte); text-decoration: none; }
.fuss a:hover { color: var(--tanne); text-decoration: underline; }
.fuss__schluss {
  margin-top: var(--raum-m);
  padding-top: var(--raum-s);
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-s) var(--raum-m);
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--tinte-weich);
}

/* 8. Responsive =========================================================== */

/* ---- Desktop (ab 992 px): komplette Kopfleiste scrollt mit ----
   Der Kopfbereich samt Anruf-Schaltfläche bleibt oben stehen und behält
   seine volle Größe. Das Menü braucht dann keine eigene Fixierung mehr. */
@media (min-width: 62.01rem) {
  html { scroll-padding-top: 10rem; }   /* Platz für die ganze Kopfleiste */
  .kopfleiste {
    display: block;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--weiss);
    box-shadow: 0 2px 10px rgba(34, 48, 44, .06);
  }
  .nav {
    position: static;
    box-shadow: none;
  }
}

@media (max-width: 62rem) {
  .auftakt__raster,
  .duo,
  .duo--schmalBild { grid-template-columns: 1fr; }
  .auftakt__bild,
  .bildrahmen { max-width: 24rem; margin-inline: auto; }

  /* ---- Menüleiste (Handy und Tablet) ----
     Der Kopfbereich mit der Anruf-Schaltfläche scrollt hier weg; stehen
     bleibt nur das Menü. Es liegt IMMER in einer einzigen, seitlich
     schiebbaren Zeile – alle Punkte bleiben erreichbar, kein Burger-Menü.

     Wichtig für ein ruhiges Scrollen: Die Leiste hat eine feste Höhe
     (--navhoehe). Früher wechselte das Menü beim Scrollen vom mehrzeiligen
     Umbruch in eine Zeile. Dadurch wurde die Seite in genau diesem Moment
     kürzer, der Browser korrigierte die Scrollposition, sie fiel wieder
     unter die Umschaltschwelle – und das Menü klappte zurück. Dieses Hin
     und Her ließ die Seite springen und kaum noch scrollen. Jetzt ändert
     sich beim Scrollen nur noch die Schriftgröße INNERHALB der festen
     Höhe; die Seitenhöhe bleibt unverändert. */
  html { scroll-padding-top: calc(var(--navhoehe) + 0.75rem); }

  .nav {
    height: var(--navhoehe);
    display: flex;
    align-items: center;
  }
  .nav__liste {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;

    /* Senkrechtes Wischen über dem Menü scrollt weiterhin die Seite,
       waagrechtes schiebt das Menü. Ohne diese Zeile fängt die schiebbare
       Zeile den Finger ab und die Seite lässt sich dort nicht scrollen.
       overscroll-behavior verhindert außerdem, dass am Ende der Menüzeile
       die Zurück-Geste des Browsers ausgelöst wird. */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }
  .nav__liste::-webkit-scrollbar { display: none; }

  /* Gestauchter Zustand: nur Schrift und Innenabstände werden kleiner.
     Die Höhe der Leiste bleibt gleich – deshalb springt nichts mehr. */
  .kopfleiste.ist-kompakt .nav__link {
    font-size: 0.82rem;
    padding: 0.3rem 0.6rem;
  }
}

@media (max-width: 46rem) {
  html { font-size: 20px; scroll-padding-top: calc(var(--navhoehe) + 0.75rem); }
  .kopf__oben {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem var(--raum-s);
    padding-block: 0.7rem;
  }
  .kopf__oben .anrufen { width: auto; }
  /* Beschriftungen dürfen auf schmalen Geräten umbrechen statt zu überlaufen */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .btn__telefon { white-space: nowrap; }
  .nav__link { font-size: 0.88rem; padding: 0.45rem 0.7rem; }
  .abschnitt { padding-block: var(--raum-l); }
  .marke__logo { width: 64px; height: 64px; }
  .versprechen { transform: none; }

}

@media (max-width: 34rem) {
  .container { padding-inline: var(--raum-s); }
  .marke__name { font-size: 1.15rem; }
  .marke__logo { width: 56px; height: 56px; }

  /* Auf schmalen Handys dürfen lange deutsche Wörter in Überschriften
     getrennt werden – sonst ragt z. B. „Datenschutzerklärung“ seitlich
     aus der Seite heraus. */
  h1, h2, h3 { hyphens: auto; }


  /* Tabelle wird zu Karten – bleibt auf kleinen Geräten gut lesbar */
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle th, .tabelle td { display: block; width: 100%; }
  .tabelle thead { display: none; }
  .tabelle tr {
    border-bottom: 1px solid var(--linie);
    padding-block: var(--raum-xs);
  }
  .tabelle tbody tr:last-child { border-bottom: 0; }
  .tabelle td::before {
    content: attr(data-titel);
    display: block;
    font-size: 0.75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinte-weich);
  }
  .tabelle th, .tabelle td { border-bottom: 0; padding-block: 0.35rem; }
}

/* Bewegungsreduzierung respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .weiter a:hover { transform: none; }
}

/* Druckausgabe */
@media print {
  .nav, .aufruf, .weiter { display: none; }
  .kopfleiste, .nav { position: static; box-shadow: none; }
  body { background: #fff; font-size: 12pt; }
}