/* ============================================================================
   Dachdeckerei Mustermann (Musterbetrieb) — Stylesheet, zweite Fassung 02.09.2026.
   Jede Entscheidung kommt aus der Wissensbasis, Kriterien-IDs als Kommentare.
   Null JavaScript. Mobil zuerst, ab 900 px breites Raster.
   ========================================================================== */

:root {
  /* kriterium: farbdisziplin — genau EINE Akzentfarbe, nur an klickbaren Dingen.
     Ziegel-Rot #c2410c: 5,2:1 auf Weiß, Weiß auf Akzent 5,2:1 (beides >= 4,5:1). */
  --akzent: #c2410c;
  --akzent-dunkel: #9a3412;   /* 7,4:1 auf Weiß — Hover/Fokus */
  --dunkel: #1c2a35;          /* Hero, Kontakt, Sticky-Leiste; Weiß darauf 14:1 */
  --dunkler: #14202a;         /* Fußzeile */
  --text: #1a1a1a;            /* kriterium: kontrast_4_5 — 16,7:1 auf Weiß */
  --text-leise: #444444;      /* 9,7:1 — nie heller als #595959 (4,5:1) */
  --text-hell: #e5e7eb;       /* auf --dunkel 11:1 */
  --text-hell-leise: #cbd5e1; /* auf --dunkel 9,5:1 */
  --grund: #ffffff;
  --grund-warm: #f6f4f0;
  --linie: #ddd8d0;
  --radius: 10px;

  /* kriterium: weissraum — feste Abstands-Skala, nichts dazwischen */
  --a1: 8px; --a2: 16px; --a3: 24px; --a4: 40px; --a5: 64px; --a6: 96px;

  /* kriterium: typografie_grundmass — 18px Basis, Zeilenhöhe 1,6 */
  --schrift: 1.125rem;
  --zeile: 1.6;
}

/* System-Schriften: null Ladezeit, kein Springen (kriterium: lcp_2_5s, cls_0_1) */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--schrift);
  line-height: var(--zeile);
  color: var(--text);
  background: var(--grund);
  padding-bottom: 72px; /* Platz für die Sticky-Leiste unten (mobil) */
}
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--a3); }
h3 { font-size: 1.2rem; margin-bottom: var(--a1); }
p + p { margin-top: var(--a2); }

/* Raster: ein Container für alles, Fließtext auf Lesebreite (kriterium: typografie_grundmass, ~65 Zeichen) */
.wrap { max-width: 72rem; margin: 0 auto; padding-left: var(--a3); padding-right: var(--a3); }
.text { max-width: 44rem; }
.abschnitt { padding: var(--a5) 0; }
@media (min-width: 900px) { .abschnitt { padding: var(--a6) 0; } }
.band-warm { background: var(--grund-warm); }
.band-dunkel { background: var(--dunkel); color: #fff; }
.kicker {
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: var(--a1);
}
.band-dunkel .kicker, .hero .kicker { color: var(--text-hell-leise); }

/* kriterium: a11y_tastatur — Fokus IMMER sichtbar, nie outline:none */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.band-dunkel :focus-visible, .hero :focus-visible, .sticky-leiste :focus-visible, .fuss :focus-visible { outline-color: #fff; }

.skip {
  position: absolute; left: -999px; top: 0; background: var(--akzent);
  color: #fff; padding: var(--a2); z-index: 20;
}
.skip:focus { left: 0; }

/* Muster-Kennzeichnung: eine schmale, ruhige Zeile */
.muster-hinweis {
  background: var(--grund-warm); color: var(--text-leise); border-bottom: 1px solid var(--linie);
  font-size: 0.9rem; line-height: 1.4; text-align: center; padding: 6px var(--a2);
}
.muster-hinweis a { color: var(--text-leise); text-decoration: underline; padding: 6px 2px; display: inline-block; }
.unterseite h3 { font-size: 1.05rem; margin-top: var(--a3); margin-bottom: var(--a1); }
.unterseite p + p { margin-top: var(--a2); }

/* ---------------- Kopf ---------------- */
.kopf { background: var(--grund); border-bottom: 1px solid var(--linie); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); min-height: 72px; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: inherit; text-decoration: none; }
.marke svg { width: 32px; height: 32px; flex: none; }
.kopf-tel { color: var(--dunkel); font-weight: 700; text-decoration: none; padding: var(--a1); white-space: nowrap; }
.kopf-tel:hover { text-decoration: underline; }
/* Sprungnavigation: nur Desktop, dezent, Tap-Ziele >= 44 px */
.kopf-nav { display: none; }
@media (min-width: 900px) {
  .kopf-nav { display: flex; gap: var(--a1); margin-left: auto; margin-right: var(--a3); }
  .kopf-nav a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 1rem; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 6px; }
  .kopf-nav a:hover { background: var(--grund-warm); text-decoration: underline; }
}

/* ---------------- 1. Hero — Foto mit Abdunklung, Botschaft zuerst (Gegenbeispiel: fisotec-Slider) ---------------- */
.hero { position: relative; overflow: hidden; background: var(--dunkel); color: #fff; display: flex; align-items: center; min-height: 540px; }
.hero picture { position: absolute; inset: 0; }
.hero-bild { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Text auf Foto NUR mit Abdunklung (Referenz-Galerie, Quer-Befund 3). Mobil gleichmäßig, Desktop links dicht, rechts offen. */
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(20, 32, 42, 0.76); }
@media (min-width: 900px) {
  .hero { min-height: 640px; }
  .hero::after { background: linear-gradient(90deg, rgba(20, 32, 42, 0.94) 0%, rgba(20, 32, 42, 0.86) 45%, rgba(20, 32, 42, 0.30) 100%); }
}
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-top: var(--a5); padding-bottom: var(--a5); }
.hero-inhalt { max-width: 40rem; }
.hero h1 { color: #fff; }
.hero-nutzen { margin-top: var(--a3); font-size: 1.25rem; font-weight: 700; color: var(--text-hell); }
.hero-unterzeile { margin-top: var(--a2); color: var(--text-hell-leise); }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a3); align-items: center; margin-top: var(--a3); }
.hero-aktionen .cta { margin-top: 0; }
.hero-tel { color: #fff; font-weight: 700; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }
.hero-tel:hover { text-decoration: underline; }
.hero-nebenweg { margin-top: var(--a2); font-size: 1rem; color: var(--text-hell-leise); }
.hero-fakten {
  list-style: none; padding: 0; margin-top: var(--a4); display: flex; flex-wrap: wrap; gap: var(--a1) var(--a3);
  font-size: 1rem; color: var(--text-hell);
}
.hero-fakten li { padding-left: 22px; position: relative; }
.hero-fakten li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }

/* kriterium: ein_primaerer_cta + tap_ziele (>=48px hoch) + cta_text_konkret */
.cta {
  display: inline-block; margin-top: var(--a3);
  background: var(--akzent); color: #fff;
  padding: 14px 28px; min-height: 48px;
  font-size: var(--schrift); font-weight: 700;
  text-decoration: none; border: 0; border-radius: 8px; cursor: pointer;
}
.cta:hover, .cta:focus-visible { background: var(--akzent-dunkel); }

/* ---------------- 2. Vertrauen ---------------- */
.vertrauen-grid { display: grid; gap: var(--a4); }
@media (min-width: 900px) { .vertrauen-grid { grid-template-columns: minmax(260px, 380px) 1fr; gap: var(--a5); align-items: start; } }
.inhaber img { border-radius: var(--radius); width: 100%; max-width: 380px; }
.inhaber figcaption { margin-top: var(--a2); font-size: 1rem; color: var(--text-leise); }
.beleg-liste { list-style: none; padding: 0; margin-top: var(--a2); }
.beleg-liste li { padding-left: 34px; position: relative; margin-top: var(--a2); }
.beleg-liste li::before {
  content: "✓"; position: absolute; left: 0; top: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--dunkel); color: #fff; font-size: 0.85rem; font-weight: 700;
  display: grid; place-items: center;
}
.bewertungen { margin-top: var(--a4); background: var(--grund-warm); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--a3); }
.sterne { color: var(--dunkel); }
.sterne-symbole { letter-spacing: 2px; }
.bewertungen blockquote { margin-top: var(--a2); font-style: italic; color: var(--text-leise); }
.bewertungen footer { font-style: normal; margin-top: var(--a1); font-size: 1rem; }

/* ---------------- 3. Leistungen (Kachel-Referenz: skim) ---------------- */
.kacheln { display: grid; gap: var(--a2); margin-top: var(--a3); }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kacheln { grid-template-columns: repeat(3, 1fr); gap: var(--a3); } }
.kachel { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--a3); }
.kachel h3 { color: var(--dunkel); }
.kachel p { color: var(--text-leise); }

/* ---------------- 4. Preise ---------------- */
.preise-grid { display: grid; gap: var(--a4); }
@media (min-width: 900px) { .preise-grid { grid-template-columns: 1.2fr 1fr; gap: var(--a5); align-items: start; } }
.preis-satz { font-size: 1.2rem; }
.beispiele { background: var(--grund-warm); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--a3); }
.beispiele h3 { margin-bottom: var(--a2); }
.beispiele dt { font-weight: 700; margin-top: var(--a2); }
.beispiele dt:first-child { margin-top: 0; }
.beispiele dd { margin: 0; color: var(--text-leise); }
.beispiele dd strong { color: var(--text); }

/* ---------------- 5. Ablauf ---------------- */
.schritte { counter-reset: s; list-style: none; padding: 0; margin-top: var(--a3); display: grid; gap: var(--a3); }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(3, 1fr); gap: var(--a4); } }
.schritte li { counter-increment: s; position: relative; padding-left: 64px; }
.schritte li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--dunkel); color: #fff; font-weight: 700; font-size: 1.25rem;
  display: grid; place-items: center;
}
.schritte strong { display: block; font-size: 1.2rem; line-height: 1.3; padding-top: 10px; }
.schritte p { margin-top: var(--a1); color: var(--text-leise); }

/* ---------------- 6. Referenzen ---------------- */
.galerie { display: grid; gap: var(--a3); margin-top: var(--a3); }
@media (min-width: 640px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie img { border-radius: var(--radius); width: 100%; }
.galerie figcaption { font-size: 1rem; color: var(--text-leise); margin-top: var(--a1); }

/* ---------------- 7. FAQ (details/summary = null JS) ---------------- */
.faq details { border: 1px solid var(--linie); border-radius: var(--radius); margin-top: var(--a2); background: var(--grund); }
.faq summary {
  padding: var(--a2) var(--a3); font-weight: 700; cursor: pointer;
  min-height: 48px; /* kriterium: tap_ziele */
}
.faq summary:hover { color: var(--akzent-dunkel); }
.faq details p { padding: 0 var(--a3) var(--a3); color: var(--text-leise); }

/* ---------------- 8. Kontakt (dunkles Band, Formular als helle Karte) ---------------- */
.kontakt-grid { display: grid; gap: var(--a4); }
@media (min-width: 900px) { .kontakt-grid { grid-template-columns: 1fr 1.1fr; gap: var(--a5); align-items: start; } }
.kontakt-satz { color: var(--text-hell-leise); }
.nap { margin-top: var(--a4); }
.nap p { margin-top: var(--a2); color: var(--text-hell); }
.nap strong { font-size: 1.2rem; color: #fff; }
.nap a { color: #fff; }
.formular {
  display: grid; gap: var(--a2);
  background: var(--grund); color: var(--text); border-radius: var(--radius); padding: var(--a3);
}
.formular label { font-weight: 700; font-size: 1rem; }
.formular input, .formular textarea {
  width: 100%; margin-top: 6px;
  font: inherit; padding: 12px; min-height: 48px;
  border: 2px solid var(--linie); border-radius: 8px; background: var(--grund); color: var(--text);
}
.formular input:focus, .formular textarea:focus { border-color: var(--akzent); outline: none; }
.formular .cta { margin-top: var(--a1); }
.formular-hinweis { font-size: 0.95rem; color: var(--text-leise); margin-top: 0; }
.formular-hinweis a { color: var(--akzent-dunkel); }
.formular .optional { font-weight: 400; color: var(--text-leise); }
.foerder-hinweis { font-size: 1rem; color: var(--text-leise); }
.foerder-hinweis a { color: var(--akzent-dunkel); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------- Fuß ---------------- */
.fuss { background: var(--dunkler); color: var(--text-hell-leise); text-align: center; padding: var(--a4) var(--a3); font-size: 1rem; }
.fuss a { color: var(--text-hell); }
.fuss p + p { margin-top: var(--a1); }

/* ---------------- Unterseiten (Impressum, Datenschutz, Danke) ---------------- */
.unterseite { max-width: 44rem; margin: 0 auto; padding: var(--a5) var(--a3); }
.unterseite h2 { font-size: 1.25rem; margin-top: var(--a4); margin-bottom: var(--a2); }
.unterseite ul { padding-left: 1.2em; margin-top: var(--a2); }
.unterseite li + li { margin-top: var(--a1); }
.unterseite a { color: var(--akzent-dunkel); }
.hinweis-kasten { background: var(--grund-warm); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--a2) var(--a3); margin-top: var(--a3); }

/* ---------------- Sticky Kontakt-Leiste (Referenz: diedachexperten) ---------------- */
.sticky-leiste {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: var(--dunkel);
}
.sticky-leiste a {
  flex: 1; text-align: center; color: #fff; text-decoration: none;
  padding: 14px 8px; min-height: 52px; font-weight: 700; font-size: 1rem;
  border-right: 1px solid rgba(255,255,255,.25);
}
.sticky-leiste a:last-child { border-right: 0; }
.sticky-leiste a:hover, .sticky-leiste a:focus-visible { background: var(--akzent-dunkel); }
@media (min-width: 900px) { body { padding-bottom: 0; } .sticky-leiste { display: none; } }

/* Druck: Leiste weg, Hero hell */
@media print {
  .sticky-leiste, .skip, .muster-hinweis, .hero picture, .hero::after { display: none; }
  body { padding-bottom: 0; }
  .hero, .band-dunkel, .fuss { background: none; color: var(--text); }
  .hero h1, .nap strong, .nap a { color: var(--text); }
}