/* Marken-Schriften (lokal, SIL Open Font License) */
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url("../fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("../fonts/zilla-slab-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("../fonts/zilla-slab-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("../fonts/zilla-slab-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
/* Dachwerk Nord – Markenfarben je Stil (überschreibt die Standardwerte aus main.css)
   A: Schiefergrau + Ziegelrot · B: Umbra + Terrakotta · C: Nacht + Signal-Ziegel / Regenblau */
[data-stil="a"],:root:not([data-stil]){
  --bg:#F1F1EF; --bg-alt:#E5E6E3; --surface:#FAFAF9;
  --ink:#15191D; --ink-soft:#3A424B; --muted:#4B535C;
  --line:#CFD2D4; --line-strong:#15191D;
  --brand:#2E3A46; --brand-hover:#1E2731; --on-brand:#F4F5F6;
  --accent:#B4532A; --accent-text:#93401D;
  --inverse-bg:#2E3A46; --inverse-ink:#FFFFFF; --inverse-soft:#D2D9E0; --inverse-line:#66717D;
  --dark-bg:#15191D; --focus:#2E3A46; --urgent:#B23A24;
  --em-color:var(--accent-text);
}
[data-stil="b"]{
  --bg:#F4EFE8; --bg-alt:#EAE1D5; --surface:#FBF8F3;
  --ink:#231F1C; --ink-soft:#4A433D; --muted:#5E5650;
  --line:#DACFC1; --line-strong:#231F1C;
  --brand:#3A3330; --brand-hover:#26211F; --on-brand:#F7F2EA;
  --accent:#A3472A; --accent-text:#8A3A20;
  --inverse-bg:#231F1C; --dark-bg:#231F1C; --focus:#3A3330;
}
[data-stil="c"]{
  --bg:#111418; --bg-alt:#171B20; --surface:#1C2127;
  --line:#2A3038; --line-strong:#4B545E;
  --brand:#EC6A3C; --brand-hover:#FF8257; --on-brand:#1B0B04;
  --accent:#EC6A3C; --accent-text:#F07C52; --accent-2:#9DB8CF;
  --dark-bg:#0B0D10; --focus:#9DB8CF;
}
[data-stil="b"] .hero__title em{color:#F0B48F}
/* Notdienst in Stil C klar vom orangen Hauptbutton absetzen */
[data-stil="c"] .btn--urgent{background:transparent;color:#fff;border-color:#fff}
[data-stil="c"] .btn--urgent:hover{background:#fff;color:#111418}
[data-stil="c"] .card--urgent{border-top-color:#fff!important}
[data-stil="c"] .callout--urgent{border-left-color:#fff}
[data-stil="c"] .cta-band p{color:#1B0B04}

/* ===================== Gewerk-Design: DACH =====================
   Schmale, technische Schriften · Dachgiebel als Formmotiv · Lattung als Linienraster */
[data-stil="a"],:root:not([data-stil]){
  --font-display:"Barlow Condensed",system-ui,sans-serif; --font-body:"Barlow",system-ui,sans-serif; --font-label:"Barlow Condensed",system-ui,sans-serif;
  --display-weight:700; --display-tracking:0; --display-leading:.94; --h-weight:700; --h-tracking:0; --label-size:14px; --label-tracking:.14em; --label-weight:600;
}
[data-stil="b"]{
  --font-display:"Zilla Slab",Georgia,serif; --font-body:"Barlow",system-ui,sans-serif; --font-label:"Barlow Condensed",system-ui,sans-serif;
  --display-weight:600; --h-weight:600; --display-tracking:-0.01em; --label-size:14px; --label-tracking:.16em; --em-style:italic;
}
[data-stil="c"]{
  --font-display:"Big Shoulders Display",system-ui,sans-serif; --font-body:"Barlow",system-ui,sans-serif; --font-label:"Barlow Condensed",system-ui,sans-serif;
  --display-weight:800; --h-weight:800; --display-tracking:.005em; --display-leading:.9; --label-size:14px; --label-tracking:.14em;
}
[data-stil="a"] .display,[data-stil="a"] .h2,[data-stil="a"] .service__title,
[data-stil="c"] .display,[data-stil="c"] .h2,[data-stil="c"] .service__title,[data-stil="c"] .logo__word{text-transform:uppercase}
[data-stil="a"] .display{font-size:clamp(46px,7vw,96px)}
/* Giebel-Chevron vor Kennzeilen */
.eyebrow::before{content:"";display:inline-block;width:11px;height:11px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(2px) rotate(45deg);margin-right:12px}
/* Bild mit Giebelkante */
[data-stil="a"] .hero__media,[data-stil="a"] .page-head__media{clip-path:polygon(0 12%,50% 0,100% 12%,100% 100%,0 100%)}
[data-stil="a"] .split__media{clip-path:polygon(0 10%,50% 0,100% 10%,100% 100%,0 100%)}
/* Dachfirst als Abschnittskante */
[data-stil="a"] .section--inverse,[data-stil="c"] .section--inverse,[data-stil="a"] .cta-band,[data-stil="c"] .cta-band{clip-path:polygon(0 clamp(24px,4vw,56px),50% 0,100% clamp(24px,4vw,56px),100% 100%,0 100%);padding-top:clamp(88px,12vw,150px)}
/* Lattung als feines Linienraster */
[data-stil="a"] .section--alt{background-image:repeating-linear-gradient(0deg,transparent 0 47px,rgba(21,25,29,.05) 47px 48px)}
[data-stil="a"] .service__nr{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--accent-text)}
/* B: Werkstatt mit Ziegel-Akzent */
[data-stil="b"] .split__media,[data-stil="b"] .page-head__media{border-bottom:8px solid var(--accent)}
/* C: Warnmarkierung beim Notdienst */
[data-stil="c"] .callout--urgent{border-left:none;border-top:12px solid transparent;border-image:repeating-linear-gradient(-45deg,#EC6A3C 0 14px,#111418 14px 28px) 12}
[data-stil="c"] .section--alt{background-image:repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.03) 47px 48px)}

/* ---------- Bewegung: Dach wird "eingedeckt" ---------- */
@media (prefers-reduced-motion: no-preference){
  .motion[data-stil="a"] .hero__media{animation:dw-roof 1.3s cubic-bezier(.65,0,.25,1) both .15s}
  .motion .eyebrow::before{animation:dw-chev .6s ease-out both .2s}
  .motion[data-stil="a"] .section--inverse,.motion[data-stil="c"] .section--inverse{animation:none}
}
@keyframes dw-roof{
  from{clip-path:polygon(0 100%,50% 100%,100% 100%,100% 100%,0 100%)}
  60%{clip-path:polygon(0 12%,50% 12%,100% 12%,100% 100%,0 100%)}
  to{clip-path:polygon(0 12%,50% 0,100% 12%,100% 100%,0 100%)}
}
@keyframes dw-chev{from{opacity:0;transform:translateY(10px) rotate(45deg)}to{opacity:1;transform:translateY(2px) rotate(45deg)}}