/* ===========================================================================
   KFZ Jung - site.css
   Ein Stylesheet, keine Rahmenwerke, keine Schrift von einem fremden Server.
   Mobil zuerst: die haeufigste Nutzung ist jemand unterwegs, der Adresse oder
   Telefonnummer sucht.
   Ein Umbruchpunkt: 720px (Kacheln nebeneinander, volle Navigation). Die
   Textbreite begrenzt --breite (1100px). Mehr braucht diese Seite nicht.
   =========================================================================== */

:root {
  /* RAL 1028 Melonengelb / RAL 7016 Anthrazitgrau, siehe SPEZIFIKATION.md 3.
     Gelb ist Flaeche, Anthrazit ist Schrift, Weiss ist Grund.
     Gelb NIE als Schriftfarbe auf Weiss: Kontrast 2.11:1. */
  --gelb:        #ff9b00;
  --gelb-dunkel: #e08800;
  --gelb-leise:  #fff4e2;
  --anthrazit:   #383e42;
  --anthrazit-2: #2b3033;
  --schwarz:     #111111;
  --grund:       #ffffff;
  --grund-leise: #f5f5f4;
  --linie:       #e2e2e0;

  --breite:  1100px;
  --radius:  10px;
  --radius-gross: 16px;
  --schatten: 0 2px 10px rgba(17, 17, 17, .10);

  /* Hoehen, aus denen der Hero seine Bildschirmhoehe rechnet. Der Kopf ist
     so hoch wie das Logo plus Innenabstand (2x10px) plus Unterkante (3px) -
     das Logo ist das hoechste Element darin. Die Handleiste: 56px + 3px. */
  --logo-h:   52px;
  --kopf-h:   calc(var(--logo-h) + 23px);
  --leiste-h: 59px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Systemschriften: laden sofort, brauchen keine Fremdverbindung. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--anthrazit);
  background: var(--grund);
  /* Platz fuer die feste Leiste am Handy. */
  padding-bottom: 64px;
}

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

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

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

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 18px; }

section.abschnitt { padding: 40px 0; }
section.abschnitt.leise { background: var(--grund-leise); }

/* --- Sprungmarke ---------------------------------------------------------- */

.sprung {
  position: absolute; left: -9999px;
  background: var(--schwarz); color: #fff; padding: 12px 18px; z-index: 100;
}
.sprung:focus { left: 8px; top: 8px; }

/* --- Kopf: das gelbe Band ("Heritage") ------------------------------------ */

.kopf {
  background: var(--gelb);
  color: var(--schwarz);
  border-bottom: 3px solid var(--anthrazit);
}

.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
}

/* Das Hauslogo ist seit 2026-09-22 ein freigestelltes SVG vom Besitzer und
   steht direkt auf dem Band. Es traegt dunkle Schrift - auf Anthrazit
   (Fussbereich) waere es nicht lesbar. */
.logo img {
  height: var(--logo-h); width: auto;
}

.kopf a { color: var(--schwarz); text-decoration: none; }

.nav-liste, .nav-liste-schmal {
  list-style: none; margin: 0; padding: 0;
}

.nav-breit { display: none; }         /* erst ab 720px */
.nav-liste { display: flex; gap: 4px; }

.nav-liste a {
  display: block;
  padding: 10px 12px;
  font-weight: 600;
  border-radius: 6px;
}
.nav-liste a:hover { background: rgba(17, 17, 17, .10); }
.nav-liste a[aria-current="page"] { background: var(--schwarz); color: var(--gelb); }

/* Eingeklapptes Menue am Handy - ohne eine Zeile JavaScript. */
.nav-schmal summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 14px;
  font-weight: 700;
  border: 2px solid var(--schwarz);
  border-radius: 8px;
}
.nav-schmal summary::-webkit-details-marker { display: none; }

.burger-strich {
  width: 20px; height: 2px; background: var(--schwarz);
  box-shadow: 0 6px 0 var(--schwarz), 0 -6px 0 var(--schwarz);
}

.nav-schmal[open] > nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--gelb);
  border-bottom: 3px solid var(--anthrazit);
  padding: 6px 18px 14px;
  z-index: 50;
}
.nav-liste-schmal a {
  display: block; padding: 14px 4px; font-weight: 600;
  border-top: 1px solid rgba(17, 17, 17, .18);
}
.nav-liste-schmal a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

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

/* Der Hero fuellt den Bildschirm unter dem Kopf (Wunsch des Besitzers
   2026-09-11, wie bei der Referenzseite). Am Handy bleibt die feste Leiste
   frei, ihre Hoehe wird abgezogen.
   Weil das Bild jetzt immer hoch genug ist, liegt der Text auch am Handy UEBER
   dem Bild. Gestapelt war er nur, solange das Bild ein 210px-Streifen war und
   der Ueberhang ins gelbe Band ragte. min-height statt height: reicht der
   Platz nicht (Handy quer), waechst der Hero mit dem Text.
   100vh zuerst als Rueckfall; svh zaehlt die eingeblendete Adressleiste am
   Handy nicht mit. */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: calc(100vh - var(--kopf-h) - var(--leiste-h));
  min-height: calc(100svh - var(--kopf-h) - var(--leiste-h));
  background: var(--anthrazit);
  overflow: hidden;
}
.hero-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: .55;
}
.hero-text {
  position: relative;
  width: 100%; max-width: var(--breite); margin: 0 auto; padding: 40px 18px;
  color: #fff;
}
.hero-text h1 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  max-width: 18em;
}
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* --- Knoepfe -------------------------------------------------------------- */

.knopf, .knopf-leise {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 20px;
  font-weight: 700; text-decoration: none;
  border-radius: 8px;
}
.knopf { background: var(--gelb); color: var(--schwarz); }
.knopf:hover { background: var(--gelb-dunkel); color: var(--schwarz); }
.knopf-leise { background: rgba(255, 255, 255, .12); color: #fff; border: 2px solid #fff; }
.knopf-leise:hover { background: #fff; color: var(--anthrazit); }

/* --- Band als Abschnittstrenner ------------------------------------------- */

.band {
  background: var(--gelb);
  color: var(--schwarz);
  padding: 18px 0;
  border-top: 3px solid var(--anthrazit);
  border-bottom: 3px solid var(--anthrazit);
}
.band h1, .band h2 { margin: 0; letter-spacing: .02em; font-size: 1.45rem; }
.band p  { margin: .3em 0 0; }

/* --- Kacheln -------------------------------------------------------------- */

.kacheln {
  display: grid; gap: 20px; grid-template-columns: 1fr;
  padding: 30px 0;
}
/* Rundung 16px und ein kraeftigerer Rand: mit 10px, Linienfarbe und leisem
   Schatten war die untere Ecke - weiss auf weiss - nicht zu sehen und die
   Kachel wirkte eckig (gemessen am Bildschirmfoto 2026-09-11). */
.kachel {
  background: var(--grund);
  border: 1px solid #d3d3d0;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(17, 17, 17, .13);
  display: flex; flex-direction: column;
}
.kachel-bild { width: 100%; height: 190px; object-fit: cover; }
.kachel-text { padding: 16px 18px 20px; }
.kachel h3 { margin-bottom: .4em; }
.kachel h3 a { text-decoration: none; }
.kachel h3 a:hover { text-decoration: underline; }

/* Hakenliste */
.haken { list-style: none; margin: 0; padding: 0; }
.haken li { padding-left: 26px; position: relative; margin-bottom: 6px; }
.haken li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 10px; height: 5px;
  border-left: 3px solid var(--gelb-dunkel);
  border-bottom: 3px solid var(--gelb-dunkel);
  transform: rotate(-45deg);
}

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

.leistung { padding: 30px 0; border-bottom: 1px solid var(--linie); }
.leistung:last-of-type { border-bottom: 0; }
.leistung-kopf { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.leistung-bild { width: 100%; max-width: 320px; border-radius: var(--radius); }

.posten { list-style: none; margin: 14px 0 0; padding: 0; }
.posten li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 12px 2px; border-bottom: 1px solid var(--linie);
}
.posten li:last-child { border-bottom: 0; }
.preis {
  white-space: nowrap; font-weight: 700;
  background: var(--gelb); color: var(--schwarz);
  padding: 2px 10px; border-radius: 6px;
}
.aufwand { white-space: nowrap; color: #6b7075; font-size: .92rem; }

/* BestDrive-Partnerlogo: deckendes dunkles Rechteck aus der Vorlage. 180px
   Anzeige bei 325px Datei - scharf auch auf doppelt aufloesenden Schirmen. */
.partner-logo { width: 180px; height: auto; border-radius: 6px; margin: 16px 0 6px; }

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

.sprungleiste { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 26px; }

.preisliste { padding: 30px 0 4px; }
.preisliste-kopf { margin-bottom: 14px; }
.preisliste-kopf h2 { margin-bottom: .2em; }
.preisliste-kopf small { font-size: .95rem; font-weight: 400; color: #55595d; white-space: nowrap; }
.pdf-link { font-weight: 600; }

/* Zwei Spalten, auch am Handy: die Beschreibung steht UNTER der Leistung
   statt in einer eigenen Spalte - so muss niemand seitlich schieben.
   Die gelbe Kopfzeile nimmt das Bild der PDF-Liste auf. */
.preistabelle { width: 100%; border-collapse: collapse; margin: 0 0 22px; }
.preistabelle caption {
  caption-side: top; text-align: left;
  background: var(--gelb); color: var(--schwarz);
  font-weight: 700; padding: 8px 12px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.preistabelle th, .preistabelle td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
.preistabelle thead th {
  font-size: .85rem; font-weight: 600; color: #55595d;
  background: var(--grund-leise);
}
.preistabelle thead th:last-child, .preistabelle td { text-align: right; }
.preistabelle tbody th { font-weight: 400; }
.preistabelle td { white-space: nowrap; font-weight: 700; }
.preistabelle small { color: #55595d; font-size: .9rem; }

/* --- Karten (Ueber uns, Kontakt, News) ------------------------------------ */

.karten { display: grid; gap: 18px; grid-template-columns: 1fr; }
.karte {
  background: var(--grund); border: 1px solid var(--linie);
  border-left: 5px solid var(--gelb);
  border-radius: var(--radius); padding: 18px 20px;
}

.meldung { border-bottom: 1px solid var(--linie); padding: 26px 0; }
.meldung:last-child { border-bottom: 0; }
.meldung time { color: #6b7075; font-size: .92rem; }

/* --- Anfahrtsskizze ------------------------------------------------------- */

.anfahrt { margin: 24px 0; }
/* Nur der Kartenverweis ist ein Block - "alle a in .anfahrt" hatte auch den
   Nachweis-Link umgebrochen (gesehen 2026-09-10). */
.karte-link { display: block; }
/* karte-bild, NICHT karte: .karte ist die Info-Karte auf Kontakt und Preise.
   Die kurze Fassung hatte denen den gelben Rand genommen (gesehen 2026-09-10). */
.karte-bild {
  width: 100%; height: auto;
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.anfahrt a:hover .karte-bild, .anfahrt a:focus-visible .karte-bild { border-color: var(--gelb-dunkel); }
.anfahrt figcaption { font-size: .95rem; color: #55595d; margin-top: 10px; }
/* Die Namensnennung ist Lizenzbedingung, nicht Zierrat - sie bleibt lesbar. */
.nachweis { font-size: .88rem; }
.nachweis a { color: #55595d; }

/* --- Fussbereich ---------------------------------------------------------- */

.fuss { background: var(--anthrazit); color: #e9eaeb; margin-top: 20px; }
.fuss a { color: #fff; }
.fuss a:hover { color: var(--gelb); }
.fuss h2 { font-size: 1.05rem; color: var(--gelb); margin-bottom: .4em; }

.fuss-innen {
  max-width: var(--breite); margin: 0 auto; padding: 34px 18px;
  display: grid; gap: 26px; grid-template-columns: 1fr;
}
.fuss-block p { margin: 0 0 .6em; }

.schlicht { list-style: none; margin: 0; padding: 0; }
.schlicht li { margin-bottom: 8px; }

.zeiten { margin: 0; display: grid; grid-template-columns: auto auto; gap: 4px 16px; }
.zeiten dt { font-weight: 600; }
/* Zeit nie umbrechen: "7.30 -" und "16.30 Uhr" auf zwei Zeilen las sich im
   vierspaltigen Fuss wie zwei Angaben (gesehen 2026-09-11). */
.zeiten dd { margin: 0; white-space: nowrap; }

.leise { color: #cfd3d6; }

.fuss-fein {
  background: var(--anthrazit-2);
  font-size: .86rem; color: #b9bdc0;
}
.fuss-fein p { max-width: var(--breite); margin: 0 auto; padding: 10px 18px; }

/* --- Feste Leiste am Handy ------------------------------------------------ */

.handleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex;
  border-top: 3px solid var(--anthrazit);
}
.handleiste a {
  flex: 1 1 50%;
  min-height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gelb); color: var(--schwarz);
  font-weight: 700; text-decoration: none;
}
.handleiste a + a { border-left: 2px solid var(--anthrazit); }
.handleiste a:hover { background: var(--gelb-dunkel); }

/* --- Fehlender Inhalt: nur auf der Entwicklungsmaschine sichtbar ---------- */

.fehlt {
  background: repeating-linear-gradient(45deg, #ffe9b8, #ffe9b8 8px, #ffdb8f 8px, #ffdb8f 16px);
  color: var(--schwarz);
  border-bottom: 2px dotted #b26a00;
  padding: 0 3px;
}

/* ===========================================================================
   Ab 720px: Navigation ausgeklappt, Kacheln nebeneinander, keine Handleiste.
   =========================================================================== */

@media (min-width: 720px) {
  body { padding-bottom: 0; font-size: 17.5px; }

  .nav-breit  { display: block; }
  .nav-schmal { display: none; }
  .handleiste { display: none; }

  :root { --logo-h: 64px; --leiste-h: 0px; }

  h1 { font-size: 2.4rem; }

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

  .leistung-bild { width: 320px; }
}

/* Wer weniger Bewegung will, bekommt weniger Bewegung. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}