/*
Theme Name: DKF 2026
Theme URI: https://dkf-bautechnik.com
Author: Max Böhm
Description: Schlankes Theme für DKF Bautechnik – ohne Page-Builder, ohne jQuery, Schriften lokal. Inhalte liegen als normale Blöcke in den Seiten.
Version: 1.3.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: dkf
*/

/* ---------- Schriften (lokal, variable Fonts) ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300 800;font-display:swap;src:url(assets/fonts/montserrat-latin.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/source-sans-3-latin.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --gelb:#FECD3B; --gelb-tief:#E9B100; --schiefer:#16191D; --schiefer-2:#22272D; --schiefer-3:#3A424B;
  --ziegel:#F3F1EB; --weiss:#FFFFFF; --text:#1B1F24; --text-leise:#59616B; --linie:#E1DED4; --hell-auf-dunkel:#C9CED4;
  --display:"Montserrat","Avenir Next","Segoe UI",sans-serif; --body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1180px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--weiss);color:var(--text);font:400 17px/1.6 var(--body)}
img,svg{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gelb-tief);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.1}
h2{font-weight:800;font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.01em}
h3{font-weight:700;font-size:1.15rem;line-height:1.25}
p,ul,ol,figure,blockquote{margin:0}
/* WordPress setzt in Gruppen automatische Abstände zwischen Blöcken – hier regelt das Layout (gap) die Abstände. */
body .is-layout-flow>*{margin-block-start:0;margin-block-end:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--gelb);padding:10px 14px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.eyebrow{font:700 .78rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";flex:none;width:22px;height:12px;background:
  linear-gradient(135deg,transparent 45%,var(--gelb-tief) 45% 55%,transparent 55%) left/50% 100% no-repeat,
  linear-gradient(225deg,transparent 45%,var(--gelb-tief) 45% 55%,transparent 55%) right/50% 100% no-repeat}

/* Buttons (Core-Block + eigene) */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
.btn,.wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .95rem/1 var(--display);text-decoration:none;padding:16px 24px;border-radius:4px;border:2px solid var(--gelb);background:var(--gelb);color:var(--schiefer);cursor:pointer;transition:transform .15s,background .15s}
.btn:hover,.wp-block-button .wp-block-button__link:hover{background:var(--gelb-tief);border-color:var(--gelb-tief);transform:translateY(-1px)}
.btn-linie,.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;border-color:currentColor;color:inherit}
.btn-linie:hover,.wp-block-button.is-style-outline .wp-block-button__link:hover{background:transparent;border-color:var(--gelb);color:var(--gelb-tief)}
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover{color:var(--gelb)}

/* ---------- Header ---------- */
.head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linie)}
.admin-bar .head{top:32px}
@media (max-width:782px){.admin-bar .head{top:46px}}
@media (max-width:600px){.admin-bar .head{top:0}}
.head .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;flex-shrink:0;white-space:nowrap}
.logo .signet{height:40px;width:77px;display:block}
.logo span{font:300 1.05rem/1.05 var(--display);letter-spacing:.04em}
.logo span b{font-weight:700}
.logo small{display:block;font:500 .6rem/1 var(--display);letter-spacing:.22em;margin-top:4px;color:var(--text-leise)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;white-space:nowrap;font:500 .92rem/1 var(--display)}
.nav a{text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;display:block}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{border-color:var(--gelb)}
.tel{font:700 .95rem/1 var(--display);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tel svg{width:16px;height:16px;flex:none}
.head .btn{padding:12px 18px;font-size:.85rem}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger i{display:block;width:26px;height:3px;background:var(--schiefer);margin:5px 0;border-radius:2px}
@media (max-width:1160px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--weiss);border-bottom:1px solid var(--linie);padding:8px clamp(16px,4vw,32px) 16px}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;font-size:1rem}
  .nav a{padding:14px 0;border-bottom:1px solid var(--linie)}
  .burger{display:block}
  .head .btn{display:none}
}
@media (max-width:560px){.tel span{display:none}.tel{border:2px solid var(--schiefer);border-radius:4px;padding:9px 11px}.logo small{display:none}.head .wrap{gap:8px}.logo{gap:8px}.logo .signet{height:30px;width:58px}.logo span{font-size:.88rem;letter-spacing:.02em}.burger{padding:8px 4px}}

/* ---------- Hero (Startseite) ---------- */
.hero{background:var(--schiefer);color:var(--weiss);position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 4vw),0 100%);padding-bottom:4vw}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 84px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 52px);-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 90%);mask-image:linear-gradient(100deg,transparent 35%,#000 90%)}
.hero>.wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-block:clamp(48px,7vw,96px)}
.hero h1{font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,5.4vw,4.1rem);line-height:1;letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:var(--gelb)}
.hero .ort{font:700 .78rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gelb);margin-bottom:20px}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#D5D9DE;max-width:34em;margin-top:22px}
.hero .wp-block-buttons{margin-top:32px}
.dach{width:100%;height:auto;display:block}
.dach .signetpfad{fill:#fecd3b;fill-rule:evenodd}
.dach .pv rect{fill:#2F3A46;stroke:#73808E;stroke-width:3}
@media (max-width:820px){.hero>.wrap{grid-template-columns:1fr}.hero .bild{max-width:420px;order:-1;margin-inline:auto;width:70%}}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf{background:var(--schiefer);color:var(--weiss);clip-path:polygon(0 0,100% 0,100% calc(100% - 2.5vw),0 100%);padding-bottom:2.5vw}
.seitenkopf .wrap{padding-block:clamp(40px,6vw,80px);display:grid;gap:18px}
.seitenkopf h1{font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.02;letter-spacing:-.015em}
.seitenkopf .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#D5D9DE;max-width:38em}
.seitenkopf .brot{font:700 .78rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gelb)}
.seitenkopf .brot a{text-decoration:none}

/* ---------- Zusagen ---------- */
.zusagen{margin-top:-1vw;padding-block:28px 8px}
.zusagen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px}
.zusagen li{border-top:3px solid var(--gelb);padding-top:14px;color:var(--text-leise);font-size:.95rem;line-height:1.45}
.zusagen li strong{display:block;font:700 1rem/1.25 var(--display);color:var(--text);margin-bottom:4px}
@media (max-width:860px){.zusagen ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.zusagen ul{grid-template-columns:1fr}}

/* ---------- Sektionen ---------- */
.sek{padding-block:clamp(56px,8vw,104px)}
.sek.hell{background:var(--ziegel)}
.sek.dunkel{background:var(--schiefer);color:var(--weiss)}
.sek.dunkel .eyebrow{color:#AEB5BD}
.kopf{display:grid;gap:14px;max-width:46em}
body .wrap>.kopf{margin-bottom:clamp(28px,4vw,48px)}
.kopf p:not(.eyebrow){color:var(--text-leise);font-size:1.1rem}
.sek.dunkel .kopf p:not(.eyebrow){color:var(--hell-auf-dunkel)}

/* Leistungskarten */
.leist{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.l-karte{grid-column:span 6;background:var(--ziegel);padding:28px;display:flex;flex-direction:column;gap:12px;border-radius:4px;position:relative;transition:background .15s}
.l-karte:hover{background:#ECE9E0}
.l-karte.gross{grid-column:span 3;background:var(--schiefer);color:var(--weiss);padding:36px}
.l-karte.gross:hover{background:var(--schiefer-2)}
.l-karte p{color:var(--text-leise);font-size:1rem;line-height:1.5}
.l-karte.gross p{color:var(--hell-auf-dunkel)}
.l-karte.gross h3{font-size:1.5rem}
.l-karte h3 a{text-decoration:none}
.l-karte h3 a::after{content:"";position:absolute;inset:0}
.l-karte ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.l-karte li{font:500 .76rem/1 var(--display);border:1px solid var(--schiefer-3);color:#E4E7EA;padding:7px 10px;border-radius:999px}
.l-karte .mehr{margin-top:auto;padding-top:12px;font:700 .85rem/1 var(--display);color:inherit}
.l-karte .mehr::after{content:" →"}
.l-karte.gross .mehr{color:var(--gelb)}
.l-karte.neu::after{content:"NEU";position:absolute;top:0;right:24px;background:var(--gelb);color:var(--schiefer);font:800 .68rem/1 var(--display);letter-spacing:.14em;padding:8px 10px;border-radius:0 0 3px 3px}
.l-karte::before{content:"";width:40px;height:40px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.l-karte.gross::before{background:var(--gelb)}
.ico-pv{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 30 16 8h18L25 30Z'/%3E%3Cpath d='M10.5 19h18M21 8l-8 22M27.5 8 19 30'/%3E%3C/svg%3E")}
.ico-dach{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22 20 8l16 14'/%3E%3Cpath d='M9 18v14h22V18'/%3E%3Cpath d='M16 32v-8h8v8'/%3E%3C/svg%3E")}
.ico-tropfen{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 26 20 10l16 16'/%3E%3Cpath d='M20 18c3 4 4.5 6 4.5 8.5a4.5 4.5 0 0 1-9 0c0-2.5 1.5-4.5 4.5-8.5Z'/%3E%3C/svg%3E")}
.l-karte.breit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 24px}
.l-karte.breit::before{grid-row:1/3}
.l-karte.breit h3,.l-karte.breit p{grid-column:2}
.l-karte.breit .mehr{grid-column:3;grid-row:1/3;margin:0;padding:0}
@media (max-width:700px){.l-karte.breit{display:flex;align-items:flex-start}.l-karte.breit .mehr{margin-top:auto;padding-top:12px}}
@media (max-width:600px){.l-karte.gross{grid-column:span 6}}

/* Zwei Spalten: Text + Zeilenliste */
.dz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.dz .text{display:grid;gap:18px}
.dz .text p:not(.eyebrow){color:var(--text-leise)}
.zeilen{border-top:1px solid var(--linie)}
.zeile{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:8px 20px;padding:16px 0;border-bottom:1px solid var(--linie)}
.zeile h3{font-size:.98rem;line-height:1.3;hyphens:auto;overflow-wrap:break-word}
.zeile p{color:var(--text-leise);font-size:1rem;line-height:1.5}
@media (max-width:960px){.dz{grid-template-columns:1fr}}
@media (max-width:480px){.zeile{grid-template-columns:1fr}}

/* Zielgruppen / Kachelreihe */
.ziel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--linie);border-radius:4px}
.z-karte{padding:32px 28px;display:grid;gap:10px;align-content:start;border-right:1px solid var(--linie);position:relative}
.z-karte:last-child{border-right:0}
.z-karte h3 a{text-decoration:none}
.z-karte h3 a::after{content:"";position:absolute;inset:0}
.z-karte:hover h3{text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:3px;text-underline-offset:5px}
.z-karte .kw{font:800 2rem/1 var(--display);color:var(--gelb-tief);font-variant-numeric:tabular-nums}
.z-karte .kw small{font:500 .8rem/1 var(--display);color:var(--text-leise);letter-spacing:.04em}
.z-karte p:not(.kw){color:var(--text-leise);font-size:1rem;line-height:1.5}
@media (max-width:760px){.ziel{grid-template-columns:1fr}.z-karte{border-right:0;border-bottom:1px solid var(--linie)}.z-karte:last-child{border-bottom:0}}

/* Vorteile-Raster (Unterseiten) */
.raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.raster>.wp-block-group{display:grid;gap:8px;align-content:start;border-top:3px solid var(--gelb);padding-top:16px}
.raster p{color:var(--text-leise);font-size:1rem;line-height:1.5}
.sek.dunkel .raster p{color:var(--hell-auf-dunkel)}
@media (max-width:860px){.raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.raster{grid-template-columns:1fr}}

/* Ablauf */
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:s}
.schritte li{counter-increment:s;border-top:1px solid var(--schiefer-3);padding-top:20px;color:var(--hell-auf-dunkel);font-size:1rem;line-height:1.5}
.schritte li::before{content:counter(s);display:block;font:800 2.4rem/1 var(--display);color:var(--gelb);margin-bottom:10px}
.schritte li strong{display:block;font:700 1.15rem/1.25 var(--display);color:var(--weiss);margin-bottom:8px}
@media (max-width:900px){.schritte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.schritte{grid-template-columns:1fr}}

/* Kundenstimmen */
.stimmen{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.stimmen .wp-block-quote{margin:0;padding:28px;border:1px solid var(--linie);border-radius:4px;display:flex;flex-direction:column;gap:16px;font-size:1.05rem;line-height:1.55}
.stimmen .wp-block-quote::before{content:"★★★★★";letter-spacing:3px;font-size:1rem;color:var(--gelb-tief)}
.stimmen .wp-block-quote:first-child{background:var(--gelb);border-color:var(--gelb)}
.stimmen .wp-block-quote:first-child::before{color:var(--schiefer)}
.stimmen .wp-block-quote:first-child p{font:500 1.2rem/1.45 var(--display)}
.stimmen cite{margin-top:auto;font:700 .88rem/1.3 var(--display);font-style:normal}
.stimmen cite::after{content:"Google-Bewertung";display:block;font:400 .85rem/1.3 var(--body);opacity:.75;margin-top:3px}
.stimmen.eigen .wp-block-quote::before{content:none}
.stimmen.eigen .sterne{letter-spacing:3px;font-size:1rem;color:var(--gelb-tief);line-height:1}
.stimmen.eigen .wp-block-quote:first-child .sterne{color:var(--schiefer)}
.stimmen.eigen cite::after{content:none}
.stimmen.eigen cite span{display:block;font:400 .85rem/1.3 var(--body);opacity:.75;margin-top:3px}
.stimmen-kopf{margin-bottom:20px;color:var(--text-leise)}
.stimmen-kopf strong{font:800 1.3rem/1 var(--display);color:var(--text)}
.stimmen-kopf .sterne{color:var(--gelb-tief);letter-spacing:2px;margin-inline:6px}
.stimmen-kopf a{text-decoration-color:var(--gelb-tief);text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:900px){.stimmen{grid-template-columns:1fr}}

/* Kontakt */
.kt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px)}
.kt .links{display:grid;gap:14px;align-content:start}
.kt .k-label{font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);margin-top:10px}
.k-wert{font:700 1.15rem/1.35 var(--display)}
.k-wert a{text-decoration:none}
.k-wert a:hover{text-decoration:underline;text-decoration-color:var(--gelb-tief);text-decoration-thickness:3px}
.dkf-form{background:var(--weiss);padding:clamp(20px,3vw,36px);border-radius:4px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sek:not(.hell) .dkf-form{background:var(--ziegel)}
.dkf-form label{display:grid;gap:6px;font:700 .82rem/1 var(--display)}
.dkf-form .voll{grid-column:1/-1}
.dkf-form input,.dkf-form select,.dkf-form textarea{font:400 1rem/1.3 var(--body);padding:13px 12px;border:1px solid #C9C5B8;border-radius:4px;background:var(--weiss);color:var(--text);width:100%}
.dkf-form textarea{min-height:110px;resize:vertical}
.dkf-form .hin{font-size:.85rem;color:var(--text-leise);line-height:1.45}
.dkf-form .falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dkf-meldung{grid-column:1/-1;padding:14px 16px;border-radius:4px;font:700 .95rem/1.4 var(--display)}
.dkf-meldung.ok{background:#E3F3E8;color:#1F6B3A}
.dkf-meldung.fehler{background:#FBE6E3;color:#9A2B1E}
@media (max-width:860px){.kt{grid-template-columns:1fr}}
@media (max-width:480px){.dkf-form{grid-template-columns:1fr}}

/* Fließtext-Seiten (Impressum, Karriere …) */
.prosa{max-width:46em}
body .prosa>*+*{margin-top:1em}
body .prosa h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:2em}
body .prosa h3,body .prosa h4{margin-top:1.8em}
.prosa ul,.prosa ol{padding-left:1.2em}
.prosa li+li{margin-top:.35em}
.prosa a{text-decoration-color:var(--gelb-tief);text-decoration-thickness:2px;text-underline-offset:3px}
body .prosa .stelle{border:1px solid var(--linie);border-radius:4px;margin-top:16px}
.stelle summary{cursor:pointer;padding:20px 24px;font:700 1.1rem/1.3 var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
.stelle summary::after{content:"+";font-weight:500;color:var(--gelb-tief);font-size:1.4rem;line-height:1}
.stelle[open] summary::after{content:"–"}
.stelle summary::-webkit-details-marker{display:none}
.stelle>*:not(summary){margin-inline:24px;margin-top:1em}
.stelle>*:last-child{margin-bottom:24px}
.stelle h4{font-size:1rem}

/* CTA-Band */
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.cta-band h2{font-size:clamp(1.4rem,2.8vw,2rem);max-width:22em}

/* ---------- Footer ---------- */
.fuss{background:var(--schiefer);color:var(--hell-auf-dunkel);padding-block:48px 110px;font-size:.95rem}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.fuss a{text-decoration:none}.fuss a:hover{color:var(--gelb)}
.fuss .claim{font:700 .78rem/2.4 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gelb)}
@media (min-width:721px){.fuss{padding-block:48px}}

/* Mobile Anrufleiste */
.ruf{display:none}
@media (max-width:720px){
  .ruf{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--weiss);border-top:1px solid var(--linie);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:10px}
  .ruf .btn{padding:14px 10px;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}