/* ===========================================================================
   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.
   Umbruchpunkte: 720px (Kacheln nebeneinander, volle Navigation), 1100px
   (Textbreite). 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;
  --schatten: 0 2px 10px rgba(17, 17, 17, .10);
}

* { 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;
}

.logo img { height: 46px; 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 ----------------------------------------------------------------- */

/* Am Handy stehen Bild und Text UNTEREINANDER. Uebereinander sieht schoener
   aus, bricht aber: drei Zeilen Ueberschrift plus zwei Knoepfe passen nicht in
   ein 260px hohes Bild, und der Ueberhang schiebt sich ins gelbe Band. Ab
   720px wird daraus wieder die Ueberlagerung. */
.hero { position: relative; background: var(--anthrazit); }
.hero-bild {
  width: 100%; height: 210px; object-fit: cover; opacity: .65;
}
.hero-text {
  max-width: var(--breite); margin: 0 auto; padding: 22px 18px 28px;
  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;
}
.kachel {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  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; }

/* --- Karten (Ueber uns, Preise, 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; }
.zeiten dd { margin: 0; }

.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; }

  h1 { font-size: 2.4rem; }

  .hero-bild { height: 420px; opacity: .55; }
  .hero-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 18px;
  }

  .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; }
}

@media (min-width: 1100px) {
  .hero-bild { height: 480px; }
}

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