/* ═════════════════════════════════════════════════════════════════
   DACHWERK HALLE · Umsetzung nach GESTALTUNG.md (25.08.2026)
   Duotone Ziegel/Schiefer · Barlow Condensed + Barlow · harte Kanten
   ═════════════════════════════════════════════════════════════════ */
@layer reset, tokens, basis, komponenten, effekte, abfragen, vorfuehrung;

/* ─── Schriften: lokal, drei Schnitte, kein Fremdserver ─── */
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  ul[class], ol[class] { list-style: none; }
  a { color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --ziegel:        oklch(0.731 0.176 49.2);   /* #FD802E */
    --ziegel-tief:   oklch(0.681 0.171 49.3);   /* #E9721F  nur Ring-Glow/Verlaufskante */
    --schiefer:      oklch(0.346 0.041 235.0);  /* #233D4C */
    --schiefer-tief: oklch(0.259 0.027 233.9);  /* #16262F */
    --schiefer-hell: oklch(0.415 0.043 231.7);  /* #33505F  Haarlinien, Ziffern-Kontur */
    --papier:        oklch(0.955 0.004 214.3);  /* #EDF1F2  Tinte, nie Fläche */
    --nebel:         oklch(0.798 0.023 230.6);  /* #AFC0C9  Nebentext, Formular-Ränder */

    --display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --text: "Barlow", system-ui, sans-serif;
    --fs-display: clamp(3.25rem, 1.8rem + 7.5vw, 7rem);
    --fs-ziffer:  clamp(4.5rem, 3rem + 9vw, 10rem);
    --fs-h2:      clamp(2rem, 1.4rem + 3.2vw, 3.75rem);
    --fs-h3:      clamp(1.375rem, 1.2rem + 1vw, 1.75rem);
    --fs-body:    clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --fs-label:   0.8125rem;
    --fs-tel:     clamp(2rem, 1.2rem + 4.5vw, 4.5rem);

    --rand: clamp(1.25rem, 4vw, 4rem);
    --takt: clamp(5rem, 10vw, 9rem);
    --breite: 1440px;

    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

    /* Dachschräge: die eine begründete Diagonale */
    --neigung: 35deg;
  }
}

@layer basis {
  body {
    font-family: var(--text);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
    background: var(--schiefer);
    color: var(--papier);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; max-width: 65ch; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .sprunglink {
    position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200;
    background: var(--ziegel); color: var(--schiefer-tief);
    padding: 0.7rem 1.2rem; border-radius: 999px;
    font-weight: 500; text-decoration: none;
    translate: 0 -300%;
  }
  .sprunglink:focus-visible { translate: 0 0; }
  :focus-visible { outline: 3px solid var(--ziegel); outline-offset: 3px; }
  .flaeche-ziegel :focus-visible { outline-color: var(--schiefer-tief); }
  ::selection { background: var(--ziegel); color: var(--schiefer-tief); }

  .zeile { display: block; overflow: clip; }
  .zeile > span { display: inline-block; }
}

/* ═════════════════ KOMPONENTEN ═════════════════ */
@layer komponenten {

  /* ─── Preloader: Glut-Ring, min 600 ms, Deckel 1400 ms, 1× je Session ─── */
  .preloader {
    position: fixed; inset: 0; z-index: 150;
    display: grid; place-items: center;
    background: var(--schiefer-tief);
    transition: clip-path 0.5s var(--ease-in-out);
    clip-path: inset(0 0 0 0);
  }
  .preloader.ist-fertig { clip-path: inset(0 0 100% 0); }
  .preloader__dach { width: clamp(200px, 30vw, 300px); }
  .preloader__dach-spur { fill: none; stroke: var(--schiefer-hell); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
  .preloader__ring-wert {
    fill: none; stroke: var(--ziegel); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 100; stroke-dashoffset: 100;
    filter: drop-shadow(0 0 12px var(--ziegel-tief));
    transition: stroke-dashoffset 0.2s linear;
  }
  .preloader__zahl {
    position: absolute;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-variant-numeric: tabular-nums;
    min-width: 4ch; text-align: center;
  }
  .preloader__wort {
    position: absolute; bottom: 13vh;
    font-size: var(--fs-label); font-weight: 500;
    letter-spacing: 0.4em; text-indent: 0.4em; text-transform: uppercase;
    color: var(--nebel);
  }

  /* ─── Ring-Wortmarke (System-Ring Nr. 2) ─── */
  .marke__ring {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2.5px solid var(--ziegel); display: inline-block;
  }

  /* ─── Kopf & Nav: statisch, nur Farbwechsel ─── */
  .kopf { position: sticky; top: 0; z-index: 100; container-type: scroll-state; }
  .nav {
    display: flex; align-items: center; gap: 1.4rem;
    max-width: var(--breite); margin-inline: auto;
    padding: 1rem var(--rand);
  }
  .kopf::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--schiefer-tief);
    opacity: 0; transition: opacity 0.15s linear;
  }
  @container scroll-state((stuck: top)) {
    .kopf::before { opacity: 1; }
    .nav { border-bottom: 1px solid var(--schiefer-hell); }
  }
  .nav__marke {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--display); font-weight: 700; font-size: 1.25rem;
    letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
    view-transition-name: marke;
  }
  .nav__liste {
    display: flex; align-items: center; gap: 2rem; margin-left: auto;
    font-weight: 500; font-size: 0.95rem;
  }
  .nav__liste a { text-decoration: none; transition: color 0.15s linear; }
  .nav__liste a:hover, .nav__liste a[aria-current="page"] { color: var(--ziegel); }
  .nav__notruf a {
    display: inline-flex; align-items: center; gap: 0.55rem;
  }
  .nav__notruf .marke__ring { width: 10px; height: 10px; border-width: 2px; }
  .nav__knopf { display: none; }

  /* ─── Hero: Split — Content links, Haus rechts mit Dachschräge-Kante.
     Höhe = ein Bildschirm minus Vorführband, nichts läuft über. ─── */
  .hero {
    height: calc(100dvh - var(--band-h, 0px));
    min-height: 520px;
    background: var(--schiefer-tief);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    overflow: clip;
  }
  .hero__inhalt {
    display: grid; align-content: center; justify-items: start;
    padding: 5rem var(--rand) 2.5rem;
    max-width: 46rem; justify-self: end; width: 100%;
  }
  .hero__titel {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(3rem, 1.6rem + 6.5vw, 6.25rem);
    text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9;
  }
  .hero__titel .zeile:last-child { color: var(--ziegel); }
  .hero__schraege {
    width: min(11rem, 30vw); height: 1px;
    background: var(--schiefer-hell);
    rotate: var(--neigung);
    transform-origin: left center;
    margin: 1.1rem 0 0.4rem 0.15rem;
  }
  .hero__satz { margin-top: 1rem; max-width: 42ch; color: var(--nebel); }
  .hero__handlung {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
    padding: 1.5rem 0 0;
  }
  .hero__bild { position: relative; min-height: 100%; }
  .hero__bild picture, .hero__bild img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
  }
  .hero__bild {
    clip-path: polygon(clamp(2rem, 16%, 9rem) 0, 100% 0, 100% 100%, 0 100%);
  }
  .hero__bild::after { /* leiser Anschluss an die Grundfläche */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, oklch(from var(--schiefer-tief) l c h / 0.55) 0%, transparent 34%);
  }

  /* ─── CTA-Pill: ein Intent, ein Wortlaut ─── */
  .cta {
    display: inline-flex; align-items: center; gap: 0.7rem;
    min-height: 56px; padding: 0 1.9rem;
    background: var(--ziegel); color: var(--schiefer-tief);
    border: none; border-radius: 999px;
    font-weight: 500; font-size: 1.05rem; text-decoration: none;
    cursor: pointer; position: relative;
    transition: scale 0.12s var(--ease-out), box-shadow 0.2s var(--ease-out);
  }
  .cta::after {
    content: ""; position: absolute; inset: -5px;
    border: 1px solid var(--ziegel); border-radius: 999px;
    opacity: 0; transition: opacity 0.2s var(--ease-out);
  }
  .cta__pfeil { transition: translate 0.2s var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .cta:hover::after { opacity: 1; }
    .cta:hover .cta__pfeil { translate: 4px 0; }
  }
  .cta:active { scale: 0.97; }
  .cta--sekundaer {
    background: none; color: var(--papier); min-height: 44px;
    padding: 0; border-radius: 0;
    text-decoration: underline; text-underline-offset: 5px;
    text-decoration-color: var(--schiefer-hell);
    transition: text-decoration-color 0.15s linear;
  }
  .cta--sekundaer::after { content: none; }
  .cta--sekundaer:hover { text-decoration-color: var(--ziegel); }

  /* ─── Sektionen-Grundform ─── */
  .sektion { padding: var(--takt) var(--rand); }
  .sektion__innen { max-width: var(--breite); margin-inline: auto; }
  .sektion--tief { background: var(--schiefer-tief); }
  .sektion__h2 {
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-h2); text-transform: uppercase;
    letter-spacing: -0.01em; line-height: 0.92;
    margin-bottom: clamp(1.6rem, 4vw, 3rem);
  }

  /* Riesenziffer mit angeschnittenem Ringbogen (System-Ring Nr. 3) */
  .ziffer {
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-ziffer); line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--schiefer-hell);
    position: relative; display: inline-block;
  }
  .ziffer::before {
    content: ""; position: absolute;
    width: 1.1em; height: 1.1em;
    border: 1px solid var(--schiefer-hell);
    border-radius: 50%;
    top: -0.18em; left: -0.42em;
    clip-path: inset(0 0 42% 0);
    pointer-events: none;
  }

  /* ─── 01 Betrieb: Text + Materialbild-Split ─── */
  .betrieb .sektion__innen {
    display: grid; gap: 3rem 5rem;
    grid-template-columns: 1.1fr 0.9fr; align-items: center;
  }
  .betrieb__meister { margin-top: 1.6rem; color: var(--nebel); font-size: 0.95rem; }
  .betrieb__bild {
    aspect-ratio: 4 / 3;
    background:
      repeating-linear-gradient(0deg, transparent 0 62px, oklch(0 0 0 / 0.35) 62px 64px),
      repeating-linear-gradient(90deg, transparent 0 146px, oklch(0 0 0 / 0.22) 146px 148px),
      linear-gradient(180deg, var(--schiefer-hell), var(--schiefer));
    position: relative;
  }
  .betrieb__bild::after { /* Versatz jeder zweiten Ziegelreihe */
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 64px, transparent 64px 126px, oklch(0 0 0 / 0.1) 126px 128px);
    background-position: 74px 0;
  }
  .betrieb__bildzeile { margin-top: 0.8rem; font-size: var(--fs-label); color: var(--nebel); }

  /* ─── 02 Gewerke: Vollbreiten-Bänder ─── */
  .baender { border-top: 1px solid var(--schiefer-hell); }
  .band {
    border-bottom: 1px solid var(--schiefer-hell);
  }
  .band a {
    display: grid; align-items: center; gap: 0.4rem 2.5rem;
    grid-template-columns: minmax(7rem, 0.25fr) 1fr auto;
    padding: clamp(1.4rem, 3.5vw, 2.6rem) 0;
    text-decoration: none;
    transition: translate 0.2s var(--ease-out);
  }
  .band__ziffer {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(3rem, 2rem + 5vw, 6.5rem); line-height: 0.85;
    color: transparent; -webkit-text-stroke: 1.5px var(--schiefer-hell);
    transition: color 0.2s var(--ease-out);
  }
  .band__name {
    display: block;
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: 0.01em;
  }
  .band__klartext { display: block; margin-top: 0.3rem; color: var(--nebel); font-size: 0.98rem; max-width: 52ch; }
  .band__pfeil { color: var(--schiefer-hell); transition: color 0.2s, translate 0.2s var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .band a:hover { translate: 8px 0; }
    .band a:hover .band__ziffer { color: var(--ziegel); -webkit-text-stroke-color: var(--ziegel); }
    .band a:hover .band__pfeil { color: var(--ziegel); translate: 4px 0; }
  }

  /* ─── 03 Ablauf: Linien-Timeline mit Ring-Markern (System-Ring Nr. 4) ─── */
  .ablauf {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem; position: relative;
    padding-top: 1.4rem;
  }
  .ablauf::before {
    content: ""; position: absolute; top: 0; left: 0.7rem; right: 12%;
    height: 1px; background: var(--schiefer-hell);
  }
  .schritt { position: relative; }
  .schritt::before {
    content: ""; position: absolute; top: -1.4rem; left: 0;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    border: 2.5px solid var(--ziegel);
    background: var(--schiefer-tief);
    translate: 0 -50%;
  }
  .schritt h3 {
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-h3); text-transform: uppercase;
    margin: 0.6rem 0 0.5rem;
  }
  .schritt p { color: var(--nebel); font-size: 0.98rem; }
  .ablauf__endpreis { margin-top: 2.8rem; color: var(--nebel); }
  .ablauf__endpreis strong { color: var(--papier); font-weight: 500; }

  /* ─── Notdienst-Band: die EINE Ziegel-Fläche, komplett statisch ─── */
  .notband {
    background: var(--ziegel); color: var(--schiefer-tief);
  }
  .notband .sektion__innen {
    display: grid; gap: 1.4rem 3rem;
    grid-template-columns: 1fr auto; align-items: center;
  }
  .notband__h2 {
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-h2); text-transform: uppercase; line-height: 0.92;
  }
  .notband__satz { margin-top: 0.7rem; color: var(--schiefer-tief); font-weight: 500; }
  .notband .cta {
    background: var(--schiefer-tief); color: var(--papier);
  }
  .notband .cta::after { border-color: var(--schiefer-tief); }

  /* ─── Footer ─── */
  .fuss { background: var(--schiefer-tief); padding: var(--takt) var(--rand) 2.5rem; }
  .fuss__innen { max-width: var(--breite); margin-inline: auto; display: grid; gap: 3rem; }
  .fuss__stimme { max-width: 46ch; }
  .fuss__stimme blockquote { font-size: 1.15rem; line-height: 1.55; }
  .fuss__stimme cite { display: block; margin-top: 0.7rem; font-style: normal; color: var(--nebel); font-size: 0.9rem; }
  .fuss__viertel { color: var(--nebel); font-size: 0.95rem; max-width: 60ch; }
  .fuss__zeilen {
    display: flex; flex-wrap: wrap; gap: 1rem 3rem;
    justify-content: space-between; align-items: baseline;
    border-top: 1px solid var(--schiefer-hell); padding-top: 1.8rem;
    font-size: var(--fs-label); color: var(--nebel);
  }
  .fuss__zeilen a { text-underline-offset: 3px; }
  .fuss__zeilen a:hover { color: var(--papier); }
  .fuss address { font-style: normal; display: inline; }

  /* ─── Mobiler Anruf-Knopf (System-Ring Nr. 5) ─── */
  .rufknopf {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 120;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ziegel); color: var(--schiefer-tief);
    display: none; place-items: center;
    box-shadow: 0 0 0 5px oklch(from var(--schiefer-tief) l c h / 0.55);
    opacity: 0; translate: 0 12px;
    transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out);
  }
  .rufknopf.ist-da { opacity: 1; translate: 0 0; }
  .rufknopf:active { scale: 0.97; }

  /* ─── Unterseiten: Hero-mini ─── */
  .kopfband {
    background: var(--schiefer-tief);
    min-height: 60dvh; display: grid; align-content: end;
    padding: 6rem var(--rand) clamp(2.5rem, 6vw, 4rem);
    position: relative; overflow: clip;
  }
  .kopfband__innen { max-width: var(--breite); margin-inline: auto; width: 100%; }
  .kopfband__titel {
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-display); text-transform: uppercase;
    letter-spacing: -0.01em; line-height: 0.92;
  }
  .kopfband__satz { margin-top: 1.4rem; color: var(--nebel); max-width: 50ch; }
  .kopfband__schraege {
    position: absolute; right: 8%; top: 22%;
    width: min(26vw, 340px); height: 1px;
    background: var(--schiefer-hell);
    rotate: var(--neigung);
  }

  /* ─── Leistungs-Kapitel ─── */
  .gewerk .sektion__innen {
    display: grid; gap: 2.5rem 5rem;
    grid-template-columns: 1.05fr 0.95fr; align-items: center;
  }
  .gewerk--bildlinks .sektion__innen > .gewerk__figur { order: -1; }
  .gewerk__figur { aspect-ratio: 4 / 3; position: relative; }
  .gewerk__figur--ziegelraster {
    background:
      repeating-linear-gradient(0deg, transparent 0 58px, oklch(0 0 0 / 0.35) 58px 60px),
      repeating-linear-gradient(90deg, transparent 0 138px, oklch(0 0 0 / 0.22) 138px 140px),
      linear-gradient(165deg, var(--schiefer-hell), var(--schiefer));
  }
  .gewerk__figur--bahnen {
    background:
      repeating-linear-gradient(90deg, transparent 0 110px, oklch(0 0 0 / 0.3) 110px 113px),
      linear-gradient(180deg, var(--schiefer-hell), var(--schiefer-tief));
  }
  .gewerk__figur--sparren {
    background:
      repeating-linear-gradient(calc(90deg - var(--neigung)), transparent 0 74px, oklch(0 0 0 / 0.32) 74px 77px),
      linear-gradient(200deg, var(--schiefer-hell), var(--schiefer));
  }
  .gewerk__saetze { color: var(--papier); }
  .gewerk__saetze p + p { margin-top: 1rem; }
  .gewerk__material { margin-top: 1.6rem; color: var(--nebel); font-size: 0.95rem; }
  .gewerk__material strong { color: var(--papier); font-weight: 500; }

  .gewerk--notdienst { background: var(--ziegel); color: var(--schiefer-tief); }
  .gewerk--notdienst .ziffer { -webkit-text-stroke-color: var(--schiefer-tief); }
  .gewerk--notdienst .ziffer::before { border-color: var(--schiefer-tief); }
  .gewerk--notdienst .gewerk__saetze, .gewerk--notdienst .gewerk__material { color: var(--schiefer-tief); }
  .gewerk--notdienst .gewerk__material strong { color: var(--schiefer-tief); }
  .gewerk--notdienst .cta { background: var(--schiefer-tief); color: var(--papier); }
  .gewerk--notdienst .cta::after { border-color: var(--schiefer-tief); }

  .schluss { text-align: center; }
  .schluss .sektion__h2 { margin-bottom: 1rem; }
  .schluss__satz { margin: 0 auto 2.2rem; color: var(--nebel); }

  /* ─── Kontakt ─── */
  .kontakt .sektion__innen {
    display: grid; gap: 4rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  }
  .kontakt__ruf {
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-tel); line-height: 1;
    color: var(--ziegel); text-decoration: none; letter-spacing: 0.01em;
    display: inline-block;
  }
  .kontakt__zeiten { margin-top: 1rem; color: var(--nebel); }
  .kontakt__anschrift { margin-top: 2rem; font-style: normal; line-height: 1.8; }
  .kontakt__anschrift a { color: var(--ziegel); text-underline-offset: 3px; }
  .kontakt__anfahrt { margin-top: 1.8rem; color: var(--nebel); font-size: 0.95rem; max-width: 46ch; }

  .formular { display: grid; gap: 1.4rem; align-content: start; }
  .feld { display: grid; gap: 0.5rem; }
  .feld label { font-weight: 500; font-size: 0.92rem; }
  .feld input, .feld textarea {
    background: var(--schiefer-tief);
    border: 1px solid var(--nebel);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    min-height: 3.4rem;
    transition: border-color 0.15s linear;
  }
  .feld textarea { field-sizing: content; min-height: 7rem; resize: vertical; }
  .feld input:focus-visible, .feld textarea:focus-visible {
    outline: none; border-color: var(--ziegel); border-width: 2px;
  }
  .feld__fehler { font-size: 0.88rem; color: var(--papier); display: none; }
  .feld__fehler::before { content: "⚠ "; }
  .feld.hat-fehler input, .feld.hat-fehler textarea { border-color: var(--ziegel); border-width: 2px; }
  .feld.hat-fehler .feld__fehler { display: block; }

  /* Submit: Zustandswechsel mit Blur-Brücke (Muster aus ThreeUI sliding-text-cta) */
  .formular__senden { justify-self: start; display: inline-grid; place-items: center; }
  .formular__senden > span { grid-area: 1 / 1; transition: opacity 0.2s ease, filter 0.2s ease; }
  .formular__senden .zustand--fertig { opacity: 0; filter: blur(2px); }
  .formular__senden.ist-fertig .zustand--start { opacity: 0; filter: blur(2px); }
  .formular__senden.ist-fertig .zustand--fertig { opacity: 1; filter: blur(0); }
  .formular__senden:disabled { cursor: default; }
  .formular__hinweis {
    border-left: 3px solid var(--ziegel);
    padding: 0.85rem 1.1rem;
    background: var(--schiefer-tief);
    font-size: 0.95rem;
    transition: opacity 0.4s var(--ease-out), translate 0.4s var(--ease-out);
  }
  @starting-style { .formular__hinweis { opacity: 0; translate: 0 10px; } }

  .impressum .sektion__innen {
    border: 1px solid var(--schiefer-hell); padding: 2.2rem;
    color: var(--nebel); font-size: 0.95rem;
  }
  .impressum h2 {
    font-family: var(--display); font-weight: 700; font-size: var(--fs-h3);
    text-transform: uppercase; color: var(--papier); margin-bottom: 1rem;
  }
  .impressum strong { color: var(--papier); font-weight: 500; }
}

/* ═════════════════ EFFEKTE ═════════════════ */
@layer effekte {

  /* Bitumenkorn-Grain, fixed, nie auf scrollenden Containern */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 90;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: overlay;
  }

  /* Hero-Eintritt: rise+fade per @starting-style, Stagger 80 ms (kein SplitText) */
  .hero__titel .zeile > span,
  .hero__satz, .hero__handlung {
    opacity: 1; translate: 0 0;
    transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out);
  }
  .hero__titel .zeile:nth-child(1) > span { transition-delay: 0.05s; }
  .hero__titel .zeile:nth-child(3) > span { transition-delay: 0.13s; }
  .hero__satz { transition-delay: 0.25s; transition-duration: 0.4s; }
  .hero__handlung { transition-delay: 0.32s; transition-duration: 0.4s; }
  @starting-style {
    .hero__titel .zeile > span { opacity: 0; translate: 0 0.55em; }
    .hero__satz, .hero__handlung { opacity: 0; translate: 0 12px; }
  }

  /* Ziffern-Parallax: rein CSS scroll-driven, ±24 px */
  @supports (animation-timeline: view()) {
    .ziffer, .band__ziffer {
      animation: ziffer-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
  @keyframes ziffer-parallax {
    from { transform: translateY(24px); }
    to   { transform: translateY(-24px); }
  }

  /* Reveal-Grundzustand (nur wenn JS da: html.hat-reveal, im Head gesetzt).
     Seit 25.08.2026 hauseigen statt GSAP+ScrollTrigger, nach dem Scrollwerk-
     Prinzip: der Kern rechnet selbst, CSS macht die Bewegung. Gespart:
     115,6 kB roh / 45,7 kB gzip. Dauern und Kurven wie vorher (GESTALTUNG.md
     Kap. 5: nur transform, opacity, clip-path; ease-in ist verboten). */
  .hat-reveal .revealt {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .hat-reveal .revealt.ist-da { opacity: 1; transform: none; }

  .hat-reveal .band {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
    transition-delay: calc(var(--reihe, 0) * 60ms);
  }
  .hat-reveal .band.ist-da { opacity: 1; transform: none; }

  .hat-reveal .wipe {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.7s var(--ease-in-out);
  }
  .hat-reveal .wipe.ist-da { clip-path: inset(0 0 0 0); }
}

/* ═════════════════ ABFRAGEN ═════════════════ */
@layer abfragen {

  /* Cross-Document View Transition: Crossfade + 8 px Rise, 300 ms */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-raus 0.3s var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-rein 0.3s var(--ease-out) both; }
  @keyframes vt-raus { to { opacity: 0; } }
  @keyframes vt-rein { from { opacity: 0; transform: translateY(8px); } }

  @media (max-width: 860px) {
    .nav { gap: 1rem; }
    .nav__knopf {
      display: inline-flex; align-items: center; gap: 0.6rem;
      margin-left: auto;
      background: none; border: 1px solid var(--schiefer-hell);
      border-radius: 999px; padding: 0.6rem 1.1rem;
      font-size: 0.9rem; font-weight: 500; cursor: pointer;
      min-height: 44px;
    }
    .nav__knopf-linie {
      width: 1rem; height: 2px; background: var(--ziegel);
      box-shadow: 0 5px 0 var(--ziegel), 0 -5px 0 var(--ziegel);
      transition: box-shadow 0.15s linear;
    }
    .nav__knopf[aria-expanded="true"] .nav__knopf-linie { box-shadow: none; }
    .nav__liste {
      position: fixed; inset: 0; z-index: -1;
      flex-direction: column; justify-content: center; gap: 2.4rem;
      background: var(--schiefer-tief);
      font-family: var(--display); font-weight: 700;
      font-size: 1.7rem; text-transform: uppercase;
      opacity: 0; visibility: hidden;
      transition: opacity 0.3s var(--ease-out), visibility 0.3s;
    }
    .nav-offen .nav__liste { opacity: 1; visibility: visible; }
    .nav-offen body { overflow: hidden; }
    .rufknopf { display: grid; }
    .betrieb .sektion__innen, .gewerk .sektion__innen { grid-template-columns: 1fr; }
    .gewerk--bildlinks .sektion__innen > .gewerk__figur { order: 0; }
    .band a { grid-template-columns: minmax(4.5rem, auto) 1fr auto; }
    .ablauf { grid-template-columns: 1fr; gap: 2rem; padding-top: 0; padding-left: 2.2rem; }
    .ablauf::before { top: 0.35rem; bottom: 0.35rem; left: 0.7rem; right: auto; width: 1px; height: auto; }
    .schritt::before { top: 0.35rem; left: -2.2rem; translate: -50% 0; }
    .notband .sektion__innen { grid-template-columns: 1fr; }
    .hero {
      height: auto; min-height: calc(100svh - var(--band-h, 0px));
      grid-template-columns: 1fr;
      grid-template-rows: minmax(200px, 34svh) auto;
    }
    .hero__bild { order: -1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.8rem), 0 100%); }
    .hero__inhalt { padding: 1.6rem var(--rand) 2.2rem; justify-self: start; max-width: none; }
    .hero__schraege { margin-left: 0.15rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001s !important;
      animation-delay: 0s !important;
      transition-duration: 0.2s !important;
      transition-delay: 0s !important;
    }
    .hero__titel .zeile > span, .hero__satz, .hero__handlung { translate: 0 0; }
    @starting-style {
      .hero__titel .zeile > span { translate: 0 0; opacity: 0; }
      .hero__satz, .hero__handlung { translate: 0 0; opacity: 0; }
    }
    .ziffer, .band__ziffer { animation: none; }
    .hat-reveal .revealt, .hat-reveal .band { opacity: 1; transform: none; transition: none; }
    .hat-reveal .wipe { clip-path: none; transition: none; }
    ::view-transition-old(root), ::view-transition-new(root) {
      animation-duration: 0.15s !important;
    }
    ::view-transition-new(root) { animation-name: vt-rein-ruhig !important; }
  }
  @keyframes vt-rein-ruhig { from { opacity: 0; } }

  @media print {
    .preloader, .rufknopf, body::after { display: none; }
    body { background: white; color: black; }
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VORFÜHRUNG · Klammer von AI Media Halle um die Musterseite.
   Gehört NICHT zum Gestaltungsdirektiv von Dachwerk (GESTALTUNG.md) und
   nutzt bewusst eine eigene, zurückgenommene Fläche, damit die Regel
   "genau zwei Farbflächen" für die Seite selbst unberührt bleibt.
   Wird beim Umbau auf einen echten Betrieb komplett entfernt.
   ══════════════════════════════════════════════════════════════════════ */
@layer vorfuehrung {

  :root { --band-h: 2.5rem; --band-flaeche: oklch(0.208 0.021 234); }

  body { padding-top: var(--band-h); }

  .musterband {
    position: fixed; inset: 0 0 auto 0; z-index: 140;
    min-height: var(--band-h);
    display: flex; align-items: center; justify-content: center;
    gap: 0.55rem 1.1rem; flex-wrap: wrap;
    padding: 0.4rem 1rem;
    background: var(--band-flaeche);
    border-bottom: 1px solid color-mix(in oklch, var(--nebel) 22%, transparent);
    font-family: var(--text); font-size: 0.83rem; line-height: 1.35;
    color: var(--nebel); text-align: center;
    view-transition-name: musterband;
  }
  .musterband__marke {
    width: 11px; height: 11px; flex: none; border-radius: 999px;
    border: 2.5px solid var(--ziegel);
  }
  .musterband p { margin: 0; max-width: none; }
  .musterband strong { color: var(--papier); font-weight: 500; }
  .musterband__weg {
    color: var(--papier); font-weight: 500;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--ziegel); text-decoration-thickness: 2px;
    border-radius: 4px;
  }
  @media (hover: hover) and (pointer: fine) {
    .musterband__weg:hover { color: var(--ziegel); }
  }

  /* Sticky-Kopf und mobiler Rufknopf rutschen unter das Band. */
  .kopf { top: var(--band-h); }
  .sprunglink:focus { top: calc(var(--band-h) + 0.5rem); }

  /* ── Anruf-Attrappe ──────────────────────────────────────────────────
     Die Musterseite trägt keine wählbare Rufnummer: für das Ortsnetz 0345
     hat die Bundesnetzagentur keine Filmrufnummern reserviert (Mitteilung
     148/2021 nennt nur Berlin, Frankfurt, Hamburg, Köln, München). Statt
     einer erfundenen Nummer im vergebenen Raum steht eine technisch nicht
     wählbare Musternummer, und der Knopf öffnet ein Popover statt zu
     wählen, genau wie das Formular nichts versendet. */
  .anrufhinweis {
    max-width: 30rem; margin: auto; padding: 2rem 1.9rem 1.7rem;
    background: var(--schiefer-tief); color: var(--papier);
    border: 1px solid color-mix(in oklch, var(--nebel) 30%, transparent);
    border-radius: 2px;
  }
  .anrufhinweis::backdrop { background: oklch(0.15 0.02 234 / 0.72); }
  .anrufhinweis h2 {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 1.6rem; line-height: 1.05; margin: 0 0 0.7rem;
  }
  .anrufhinweis p { color: var(--nebel); margin: 0 0 0.8rem; font-size: 0.98rem; }
  .anrufhinweis__handlung { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
  .anrufhinweis__zu {
    min-height: 44px; padding: 0 1.2rem; background: none;
    border: 1px solid var(--nebel); border-radius: 999px;
    color: var(--nebel); font-family: var(--text); font-weight: 500;
    font-size: 0.95rem; cursor: pointer;
  }
  .anrufhinweis, .anrufhinweis::backdrop { transition: opacity 0.22s, display 0.22s allow-discrete; }
  .anrufhinweis:popover-open { opacity: 1; }
  .anrufhinweis:popover-open::backdrop { opacity: 1; }
  @starting-style {
    .anrufhinweis:popover-open, .anrufhinweis:popover-open::backdrop { opacity: 0; }
  }
  .anrufhinweis:not(:popover-open) { opacity: 0; }

  /* Die Musternummer als solche lesbar machen. */
  .musternummer { white-space: nowrap; }

  /* Textstufen: gemessen bricht der lange Satz unterhalb von 1100 px um,
     und dann stimmt die reservierte Hoehe nicht mehr mit der echten ueberein. */
  .nur-schmal { display: none; }
  @media (max-width: 68.75rem) {
    :root { --band-h: 3.5rem; }
    .nur-breit { display: none; }
    .nur-schmal { display: inline; }
    .musterband { font-size: 0.8rem; gap: 0.25rem 0.7rem; }
  }
  @media (max-width: 24rem) {
    :root { --band-h: 4.4rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .anrufhinweis, .anrufhinweis::backdrop { transition: none; }
  }
  @media print { .musterband { display: none; } body { padding-top: 0; } }
}

@layer vorfuehrung {
  /* Die drei Anruf-Elemente sind jetzt <button> statt <a>. Der Reset erbt
     zwar die Schrift, aber nicht den Browser-Rahmen und die Grundfläche. */
  .rufknopf { border: none; cursor: pointer; padding: 0; }
  .kontakt__ruf {
    border: none; background: none; padding: 0;
    cursor: pointer; text-align: left;
  }
}

@layer vorfuehrung {
  .impressum__h3 {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 1.25rem; line-height: 1.1; margin: 2rem 0 0.6rem;
    color: var(--papier);
  }
  .impressum__anbieter { line-height: 1.9; }
  .impressum__anbieter a { color: var(--ziegel); text-underline-offset: 3px; }
}

@layer vorfuehrung {
  /* ── Bildebene ────────────────────────────────────────────────────────
     Seit 25.08.2026 tragen fuenf Duotone-Bilder die Bildwelt (vorher reine
     CSS-Illustration). Die Duotone-Leiter liegt bewusst KOMPLETT in der
     Schiefer-Familie: GESTALTUNG.md erlaubt Ziegel als Flaeche exakt einmal
     je Seite (das Notdienst-Band), ein orangefarbenes Bild wuerde das
     sprengen. Erzeugt mit Higgsfield, nach Art. 50 EU-KI-VO im Fuss
     gekennzeichnet. */
  .hero { isolation: isolate; }
  .hero__grund {
    position: absolute; inset: 0; z-index: 0;
    background-image: image-set(
      url("../bilder/dachhaus.avif") type("image/avif"),
      url("../bilder/dachhaus.webp") type("image/webp"));
    background-size: cover; background-position: 50% 30%;
    /* 0.55 war zu wenig: gemessen lag die Flaeche dann bei Helligkeit 33
       gegen 35 der leeren Grundflaeche, das Bild war unsichtbar. */
    opacity: 0.7;
  }
  /* Verlauf nach unten, damit die Headline auf ruhigem Grund sitzt. */
  .hero__grund::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      color-mix(in oklch, var(--schiefer-tief) 55%, transparent) 0%,
      color-mix(in oklch, var(--schiefer-tief) 78%, transparent) 55%,
      var(--schiefer-tief) 100%);
  }

  .hero__grund--mini { opacity: 0.4; background-position: 50% 45%; }
  .kopfband { position: relative; isolation: isolate; }
  .kopfband__innen { position: relative; z-index: 1; }

  /* Inhaltsbilder: fuellen ihren 4:3-Rahmen, harte Kante wie gefalztes Blech */
  .betrieb__bild, .gewerk__figur {
    display: block; width: 100%; height: 100%;
    object-fit: cover; background: var(--schiefer-tief);
  }
  picture { display: block; }
  picture:has(.gewerk__figur) { aspect-ratio: 4 / 3; }
  picture:has(.betrieb__bild) { aspect-ratio: 4 / 3; }
}

@layer vorfuehrung {
  /* Startseite ohne zweites Bild (Ansage des Inhabers 25.08.2026): die
     Sektion 01 Betrieb ist jetzt ein reiner Textblock. Der Bild-Text-Split
     entfaellt damit als Layoutfamilie, die Zeilenlaenge bleibt im Rahmen
     von GESTALTUNG.md (max. 65ch). */
  .betrieb .sektion__innen { grid-template-columns: 1fr; }
  .betrieb .revealt { max-width: 62ch; }
}

/* Sehr schmale Schirme: Nav kompakt, damit der Menü-Knopf nie über den
   geclippten Rand rutscht (bei 390 px fehlten ihm wenige Pixel). */
@media (max-width: 440px) {
  .nav { gap: 0.6rem; padding-inline: 1rem; }
  .nav__marke { font-size: 1rem; gap: 0.4rem; }
  .nav__knopf { padding: 0.45rem 0.75rem; font-size: 0.8rem; }
}