@charset "UTF-8";
/* ==========================================================================
   Layout „Werkbank“ (seit 1.11.2026): Bau, Dach, Zimmerei, Kfz, Metall, Elektro, Sanitär, Heizung, Maler, Garten- und Landschaftsbau.
   Liegt ÜBER basis.css und ändert nur das Aussehen (dieselben Abschnitte, seite.json, Lightbox, Bento-Hover, Kontaktdaten, Prüfungen).
   Eingebunden über page/layout/muster_werkbank.html.twig, wenn seite.json → "layout": "werkbank". Firmenfarben/-schriften gehen vor.
   Leitidee: wie ein gut gemachtes Baustellenschild. Schmale Versalien, klare Kanten, eine kräftige Akzentfarbe, schräge Abschnittskanten,
   Fotos der Arbeit groß und dicht, Telefonnummer immer im Kopf (KopfTelefon, legt bauen.php für dieses Layout an).
   ========================================================================== */

:root {
	--schrift-titel: "Barlow Condensed", "Arial Narrow", sans-serif;
	--schrift-text: "Work Sans", system-ui, sans-serif;
	--titel-gewicht: 700;
	--titel-transform: uppercase;
	--titel-abstand: .01em;
	--radius: 2px;
	--radius-klein: 2px;
	--flaeche: #f2f2ef;
	--linie: #dcdcd6;
	--dunkel: #1c1f22;
	--schatten: 0 1px 0 rgb(0 0 0 / .06);
	--schatten-hoch: 0 18px 40px rgb(0 0 0 / .18);
	--schraege: clamp(24px, 4vw, 56px);
	--nav-font-size: 16px;
	--nav-font-weight: 600;
}

/* ---------- Schrift ---------- */
h1, h2, h3 { text-transform: var(--titel-transform); letter-spacing: var(--titel-abstand); line-height: 1.02; }
h1 { font-size: clamp(2.6rem, 5.4vw + .5rem, 5.4rem); }
h2 { font-size: clamp(2.1rem, 3.2vw + .7rem, 3.6rem); }
h3 { font-size: clamp(1.3rem, .7vw + 1.05rem, 1.65rem); }
/* Oberzeile: Akzentbalken davor */
.Oberzeile { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .12em; font-weight: 700; color: var(--primaer-text); }
.Oberzeile::before { content: ""; width: 28px; height: 6px; background: var(--akzent); }
.Abschnitt .content-text p.Oberzeile { font-size: .78rem; }

/* ---------- Kopf: Versalien, Telefon als eigener Knopf ---------- */
.Kopf { border-bottom: 4px solid var(--akzent); }
body.nav-is-desktop .navigation-main .level_1 > li > :is(a, strong) { font-family: var(--schrift-titel); text-transform: uppercase; letter-spacing: .04em; font-size: 18px; border-radius: var(--radius-klein); }
body.nav-is-desktop .navigation-main .NaviFläche { border-radius: var(--radius-klein); }
body.nav-is-desktop .navigation-main .level_1 > li > strong::after { left: 14px; right: 14px; height: 3px; border-radius: 0; background: var(--akzent); }
body.nav-is-desktop .navigation-main .level_1 > li:last-child > :is(a, strong) { background: var(--dunkel); color: #fff; }
body.nav-is-desktop .navigation-main .level_1 > li:last-child > a:hover { background: var(--primaer); color: var(--auf-primaer); }
.Kopf > .innen { justify-content: flex-start; gap: 16px; }
.Kopf .mod_navigation { margin-left: auto; }
.KopfTelefon a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--akzent); color: var(--auf-akzent); font: 700 18px/1 var(--schrift-titel); letter-spacing: .03em; text-decoration: none; white-space: nowrap; border-radius: var(--radius-klein); transition: transform .2s var(--weich), box-shadow .2s; }
/* Symbol aus der Kartensymbol-Klasse IconTelefon (symbole.mjs) */
.KopfTelefon a::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
.KopfTelefon a:hover { color: var(--auf-akzent); transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--akzent) 40%, transparent); }
/* Handy: nur das Symbol, links vom Menüknopf */
body.nav-is-mobile .KopfTelefon { order: 2; margin-left: auto; }
body.nav-is-mobile .Kopf .mod_navigation { order: 3; margin-left: 0; }
body.nav-is-mobile .KopfTelefon a, body.nav-is-desktop.kopfSchmal .KopfTelefon a { padding: 11px; font-size: 0; gap: 0; }
body.nav-is-mobile .KopfTelefon a::before { width: 20px; height: 20px; }
/* sehr schmale Desktops: Nummer ausblenden, bevor das Menü umbricht */
@media (min-width: 1024px) and (max-width: 1180px) { body.nav-is-desktop .KopfTelefon a { font-size: 0; gap: 0; padding: 11px; } }

/* ---------- Knöpfe: eckig, schmale Versalien ---------- */
.Knopf, a.Knopf, .KnopfLink a, .Kontaktformular button.submit, .content-hyperlink:not(:has(img)) > a { border-radius: var(--radius-klein); font-family: var(--schrift-titel); text-transform: uppercase; letter-spacing: .05em; font-size: 1.08rem; font-weight: 700; }
a.Knopf.zweit { box-shadow: inset 0 0 0 2px currentColor; }

/* ---------- Hero: untere Kante schräg ---------- */
.Abschnitt.Hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%); }
.Hero:not(.geteilt) .content-image::after { background: linear-gradient(100deg, rgb(12 14 16 / .86) 0%, rgb(12 14 16 / .6) 48%, rgb(12 14 16 / .1) 100%); }
.Hero:not(.geteilt) .content-text { padding-bottom: calc(clamp(96px, 12vw, 160px) + var(--schraege)); }
.Hero:not(.geteilt) .content-text h1 { text-shadow: none; }
.Hero .Oberzeile { color: #fff; }
.Abschnitt.Hero.geteilt { background: var(--flaeche); padding-bottom: calc(clamp(48px, 7vw, 96px) + var(--schraege)); }
.Hero.geteilt .content-image img { border-radius: 0; box-shadow: 14px 14px 0 var(--akzent); }
.Abschnitt.Hero.geteilt::before { display: none; }

/* ---------- Seitenkopf: dunkel mit feinen Diagonalstreifen, schräge Unterkante ---------- */
.Abschnitt.Seitenkopf { background: var(--dunkel); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%); padding-bottom: calc(clamp(40px, 6vw, 72px) + var(--schraege)); }
.Abschnitt.Seitenkopf::before { inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; margin: 0; background: repeating-linear-gradient(-45deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 18px); animation: none; }
.Seitenkopf h1 { color: #fff; }
.Seitenkopf p { color: rgb(255 255 255 / .78); }
.Seitenkopf .Oberzeile { color: var(--akzent); }

/* ---------- Karten: Akzentkante links, eckig; Bento-Hover bleibt aus basis.css ---------- */
.Karte { border-radius: var(--radius); border: 0; border-left: 5px solid var(--akzent); background: var(--karte-flaeche); box-shadow: var(--schatten); }
.Fläche .Karte { border-left-color: var(--akzent); }
.Abschnitt:not(.Fläche) .Karte { background: var(--flaeche); }
.Karte h3 { font-size: clamp(1.35rem, .8vw + 1.05rem, 1.75rem); }
.Karte a { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }
.Karte:hover { box-shadow: var(--schatten-hoch); }

/* ---------- Zahlen: Akzentband mit schrägen Kanten, Ziffern groß und schmal ---------- */
.Abschnitt.Zahlen { background: var(--akzent); color: var(--auf-akzent); clip-path: polygon(0 var(--schraege), 100% 0, 100% calc(100% - var(--schraege)), 0 100%); padding-top: calc(clamp(40px, 5vw, 64px) + var(--schraege)); padding-bottom: calc(clamp(40px, 5vw, 64px) + var(--schraege)); margin-top: calc(-1 * var(--schraege)); position: relative; z-index: 1; }
.Zahl h3 { font-size: clamp(3rem, 5vw, 4.8rem); letter-spacing: 0; }
.Zahl p { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .85em; opacity: .85; }

/* ---------- Text + Bild: Akzentfläche versetzt hinter dem Bild ---------- */
.TextBild .content-image img { border-radius: 0; box-shadow: none; }
.TextBild .content-image::before { border-radius: 0; width: 70%; height: 70%; background: var(--akzent); opacity: 1; inset: auto -14px -14px auto; }
.TextBild.BildLinks .content-image::before { inset: auto auto -14px -14px; }
.TextBild .content-text li::before { border-radius: 0; background: var(--akzent); }
.TextBild .content-text li::after { background: var(--auf-akzent); }

/* ---------- Ablauf: große Nummern, Balken statt Linie ---------- */
.Schritt::before { font-family: var(--schrift-titel); font-weight: 700; color: var(--primaer-text); -webkit-text-stroke: 0; font-size: 3.4rem; }
.Schritt::after { top: 26px; height: 6px; background: repeating-linear-gradient(90deg, var(--akzent) 0 14px, transparent 14px 22px); }

/* ---------- Galerie: dicht, ohne Rundung ---------- */
.content-gallery ul { gap: 4px; }
.content-gallery li { border-radius: 0; }
@media (min-width: 760px) { .content-gallery li:first-child { grid-column: span 2; grid-row: span 2; } .content-gallery li:first-child img { aspect-ratio: auto; height: 100%; } .content-gallery li:first-child :is(figure, a) { height: 100%; } }

/* ---------- Zitat / Aufruf ---------- */
.Abschnitt.Zitat blockquote, .Abschnitt.Zitat .content-text p:first-child { font-family: var(--schrift-titel); text-transform: uppercase; font-weight: 700; letter-spacing: .01em; font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem); line-height: 1.15; }
/* Schräge Kanten (Niels 02.11.2026, Autobedarf Böcker): der abgeschnittene Keil zeigte den weißen Seitengrund statt der Farbe des Nachbarn.
   Der schräge Abschnitt schiebt sich deshalb um die Schräge über den Nachbarn (der Keil liegt dann über dessen Fläche). */
.Abschnitt.Aufruf { clip-path: polygon(0 var(--schraege), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--abschnitt) + var(--schraege)); margin-top: calc(-1 * var(--schraege)); z-index: 1; }
:is(.Abschnitt.Hero, .Abschnitt.Seitenkopf, .Abschnitt.Zahlen):has(+ .Abschnitt:not(.Zahlen, .Aufruf)) { margin-bottom: calc(-1 * var(--schraege)); z-index: 2; }
:is(.Abschnitt.Hero, .Abschnitt.Seitenkopf, .Abschnitt.Zahlen) + .Abschnitt:not(.Zahlen, .Aufruf) { padding-top: calc(var(--abschnitt) + var(--schraege)); }
.Abschnitt.Aufruf::before { inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; background: repeating-linear-gradient(-45deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 18px); }

/* ---------- Tabellen und FAQ ---------- */
.content-table table { border-radius: 0; }
.FAQ .content-text:not(.AbschnittKopf) h3 { font-size: 1.35rem; }

/* ---------- Fuß: Akzentbalken oben ---------- */
.Fuß { border-top: 6px solid var(--akzent); }
.Fuß h3 { font-family: var(--schrift-titel); font-size: 1.1rem; letter-spacing: .06em; color: var(--akzent); opacity: 1; }
.Fuß .FußMarke { text-transform: uppercase; font-size: 1.8rem; }
.SocialLinks a { border-radius: var(--radius-klein); }

@media (max-width: 700px) { :root { --schraege: 20px; } }