/* =========================================================================
   VC Elektrotechnik — app.css  ·  "Bold Industrial" (monochrom S/W)
   Hell-dominant mit invertierten schwarzen Statement-Sektionen.
   Archivo (Display/Body) + Space Mono (technische Labels). Pures CSS.
   Theme-Wechsel via .is-dark (invertiert die Tokens).
   ========================================================================= */

/* 1. Fonts ------------------------------------------------------------- */
@font-face { font-family:'Archivo'; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url('../fonts/archivo-var.woff2') format('woff2-variations'); }
@font-face { font-family:'SpaceMono'; font-weight:400; font-display:swap; src:url('../fonts/spacemono-400.woff2') format('woff2'); }
@font-face { font-family:'SpaceMono'; font-weight:700; font-display:swap; src:url('../fonts/spacemono-700.woff2') format('woff2'); }

/* 2. Tokens — hell default, invertiert via .is-dark -------------------- */
:root {
    --bg:    #fafafa;
    --card:  #ffffff;
    --fg:    #0a0a0a;   /* Schwarz: Headlines, Flächen, Buttons */
    --text:  #181818;
    --sec:   #525252;
    --meta:  #8a8a8a;
    --line:  #e4e4e2;
    --line-2:#d2d2cf;
    --grid:  rgba(10,10,10,.045);   /* technisches Raster */
    --tick:  #c8c8c4;                /* Crop-Mark-Ecken */

    --f-display:'Archivo', system-ui, sans-serif;
    --f-body:   'Archivo', system-ui, sans-serif;
    --f-mono:   'SpaceMono', ui-monospace, monospace;

    --maxw: 1280px;
    --pad:  clamp(1.25rem, 4vw, 3.25rem);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --cut:  12px;   /* Fasen-Ecke (Schaltschrank-Blech) */
}
.is-dark {
    --bg:    #0a0a0a;
    --card:  #141414;
    --fg:    #fafafa;   /* invertiert: Weiß wird zum "Schwarz" */
    --text:  #e7e7e5;
    --sec:   #9a9a9a;
    --meta:  #6f6f6f;
    --line:  #262626;
    --line-2:#363636;
    --grid:  rgba(250,250,250,.05);
    --tick:  #3a3a3a;
    background: var(--bg); color: var(--text);
}

/* 3. Reset & Base ------------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip; }
body { font-family:var(--f-body); font-size:1.0625rem; line-height:1.6; color:var(--text); background:var(--bg); overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
h1,h2,h3,h4 { font-family:var(--f-display); font-weight:800; line-height:.98; letter-spacing:-.03em; color:var(--fg); text-transform:uppercase; }
h1,h2,h3 { text-wrap:balance; }

/* 4. Layout ------------------------------------------------------------ */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section { padding-block:clamp(4rem,9vw,7.5rem); position:relative; background:var(--bg); }
.section--card { --bg:var(--card); }

.eyebrow { font-family:var(--f-mono); font-size:.74rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--sec); display:inline-flex; align-items:center; gap:.6rem; }
.eyebrow::before { content:''; width:1.6rem; height:1px; background:currentColor; }

.section-head { max-width:54rem; }
.section-head h2 { font-size:clamp(2.4rem,6vw,4.5rem); margin-top:1.1rem; }
.section-head p { color:var(--sec); margin-top:1.25rem; font-size:1.15rem; max-width:42rem; text-transform:none; }
.lead { color:var(--sec); font-size:1.15rem; }
.stroke { color:transparent; -webkit-text-stroke:1.5px var(--fg); }

/* Headline-Vielfalt (statt Outline-Trick in jedem H2) */
/* Modus "mark": Akzentwort mit solidem Balken darunter */
.mark { box-shadow:inset 0 -.18em 0 var(--fg); padding:0 .04em; }
/* Modus "duo": Display-Caps + kleiner Inline-Text gemischt (Größenkontrast) */
.duo__big { display:block; }
.duo__small { display:inline-block; font-family:var(--f-mono); font-weight:400; text-transform:uppercase; font-size:clamp(.95rem,1.5vw,1.2rem); letter-spacing:.06em; color:var(--sec); margin-top:.4rem; }
/* Modus "side": Eyebrow als seitliches Label, Headline rechts daneben */
.section-head--side { display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:baseline; max-width:none; }
.section-head--side .eyebrow { writing-mode:vertical-rl; transform:rotate(180deg); align-self:start; white-space:nowrap; }
.section-head--side .eyebrow::before { display:none; }
.section-head--side .eyebrow::after { content:''; width:1px; height:2.2rem; background:var(--meta); margin-top:.6rem; }
@media(max-width:760px){ .section-head--side{grid-template-columns:1fr;gap:1rem} .section-head--side .eyebrow{writing-mode:initial;transform:none} .section-head--side .eyebrow::after{display:none} .section-head--side .eyebrow::before{display:inline-block} }

/* S/W-Foto */
.bw { position:relative; overflow:hidden; background:#111; }
.bw img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.07); display:block; }

/* 5. Buttons — Fasen-Ecke (Schaltschrank-Blech) + Strom-Flicker -------- */
.btn { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-mono); font-size:.85rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:1rem 1.6rem; border:1.5px solid var(--fg); cursor:pointer; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition:background-color .25s var(--ease), color .25s var(--ease); }
.btn .ic { width:1.15em; height:1.15em; }
/* Einschalt-Flicker: kurzes Kontakt-Flackern wie beim Stromschließen */
@keyframes btnFlicker { 0%{opacity:1} 18%{opacity:.35} 30%{opacity:1} 42%{opacity:.6} 55%,100%{opacity:1} }
.btn:hover { animation:btnFlicker .32s steps(1,end) 1; }
.btn--solid { background:var(--fg); color:var(--bg); }
.btn--out { background:transparent; color:var(--fg); }
.btn--out:hover { background:var(--fg); color:var(--bg); }
/* Aliase (Template-Kompatibilität) */
.btn--accent, .btn--contrast, .btn--light { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn--outline { background:transparent; color:var(--fg); border-color:var(--fg); }
.btn--outline:hover { background:var(--fg); color:var(--bg); }
/* Outline-Buttons: Fasen-Diagonale nachziehen (clip-path kappt dort den Rahmen) */
.btn--out, .btn--outline {
    background-image:
        linear-gradient(45deg, transparent calc(50% - .8px), var(--fg) calc(50% - .8px), var(--fg) calc(50% + .8px), transparent calc(50% + .8px)),
        linear-gradient(45deg, transparent calc(50% - .8px), var(--fg) calc(50% - .8px), var(--fg) calc(50% + .8px), transparent calc(50% + .8px));
    background-position:top right, bottom left;
    background-size:var(--cut) var(--cut);
    background-repeat:no-repeat;
    background-origin:border-box;
}
@media(prefers-reduced-motion:reduce){ .btn:hover{animation:none} }

/* 6. Topbar + Header --------------------------------------------------- */
.topbar { background:#0a0a0a; color:#9a9a9a; font-family:var(--f-mono); font-size:.76rem; }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; min-height:42px; gap:1.5rem; }
.topbar a { color:#9a9a9a; transition:color .2s; } .topbar a:hover { color:#fff; }
.topbar .group { display:flex; gap:1.6rem; align-items:center; }
.topbar .ic { width:13px; height:13px; display:inline-block; vertical-align:-2px; margin-right:.4rem; }

.site-header { position:sticky; top:0; z-index:100; background:rgba(250,250,250,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:1.5rem; }
.brand img { height:30px; width:auto; }
.nav { display:flex; align-items:center; gap:.1rem; }
.nav a { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--f-display); font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.015em; color:var(--text); padding:.55rem .9rem; transition:color .2s; position:relative; }
.nav a:hover { color:var(--fg); }
.nav a.active { color:var(--fg); }
.nav a.active::after { content:''; position:absolute; left:.9rem; right:.9rem; bottom:.3rem; height:2px; background:var(--fg); }
.nav .caret { width:13px; height:13px; transition:transform .25s var(--ease); }

.has-menu { position:relative; display:flex; align-items:center; }
.has-menu:hover > a .caret, .has-menu:focus-within > a .caret { transform:rotate(180deg); }
/* Hover-Brücke: schließt die Lücke zwischen Trigger und Panel (kein vorzeitiges Schließen) */
.has-menu::after { content:''; position:absolute; top:100%; left:0; right:0; height:.6rem; }
/* Mega-Menü — schlicht, 2 Spalten, durchnummeriert 01–10 (inkl. "Alle Leistungen") */
.megamenu { position:absolute; top:calc(100% + .35rem); left:50%; width:min(38rem,92vw); display:grid; grid-template-columns:1fr 1fr; gap:0 .3rem; padding:.6rem; background:var(--card); border:1px solid var(--line); opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px); transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s; box-shadow:0 22px 50px -28px rgba(0,0,0,.25); z-index:120; }
.has-menu:hover .megamenu,.has-menu:focus-within .megamenu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.megamenu a { display:flex; align-items:baseline; gap:.85rem; padding:.6rem .75rem; color:var(--text); font-family:var(--f-display); font-weight:600; font-size:.96rem; letter-spacing:-.01em; transition:background-color .15s var(--ease),color .15s var(--ease); }
.megamenu a .num { font-family:var(--f-mono); font-size:.7rem; font-weight:400; color:var(--meta); min-width:1.3rem; transition:color .15s var(--ease); }
.megamenu a:hover { background:var(--bg); color:var(--fg); }
.megamenu a:hover .num { color:var(--fg); }
.megamenu__all { font-weight:700; }

.header-cta { display:flex; align-items:center; gap:.75rem; }
.burger { display:none; width:46px; height:46px; align-items:center; justify-content:center; background:transparent; border:1.5px solid var(--fg); color:var(--fg); cursor:pointer; }
.burger .ic { width:22px; height:22px; }

.drawer { position:fixed; inset:0; z-index:200; background:var(--bg); transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; padding:var(--pad); visibility:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.drawer.open { transform:translateX(0); visibility:visible; }
.drawer__top { display:flex; justify-content:space-between; align-items:center; min-height:74px; }
.drawer nav { display:flex; flex-direction:column; margin-top:1.5rem; }
.drawer nav a, .drawer__group summary { font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.3rem,7vw,1.7rem); padding:1rem 0; border-bottom:1px solid var(--line); color:var(--fg); display:flex; align-items:baseline; gap:1rem; }
.drawer nav a span, .drawer__group summary span { flex:1; min-width:0; overflow-wrap:break-word; }
.drawer .btn { margin-top:2rem; justify-content:center; }
.drawer__close { width:46px; height:46px; background:transparent; border:1.5px solid var(--fg); color:var(--fg); cursor:pointer; }

/* Drawer — aufklappbare Leistungsgruppe (statt 9 Einzeleinträge) */
.drawer__group { border-bottom:1px solid var(--line); }
.drawer__group summary { border-bottom:0; cursor:pointer; list-style:none; }
.drawer__group summary::-webkit-details-marker { display:none; }
.drawer__caret { flex:none; width:20px; height:20px; transition:transform .25s var(--ease); }
.drawer__group[open] .drawer__caret { transform:rotate(180deg); }
.drawer .drawer__sublist { display:flex; flex-direction:column; margin:.15rem 0 1.1rem 1.35rem; padding-left:1.25rem; border-left:1px solid var(--line); }
.drawer .drawer__sublist a { font-family:var(--f-mono); font-weight:600; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sec); padding:.85rem 0; display:flex; align-items:center; gap:.7rem; }
.drawer .drawer__sublist a::before { content:''; width:5px; height:5px; flex:none; background:var(--meta); transition:background-color .15s var(--ease); }
.drawer .drawer__sublist a:hover { color:var(--fg); }
.drawer .drawer__sublist a:hover::before { background:var(--fg); }
/* Aktive Seite im Drawer markieren */
.drawer nav > a.active span, .drawer__group summary.active span { text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:3px; }
.drawer .drawer__sublist a.active { color:var(--fg); font-weight:700; }
.drawer .drawer__sublist a.active::before { background:var(--fg); }

/* 7. Hero — Headline invertiert sich über dem Foto (mix-blend) --------- */
.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero .wrap { position:relative; }
.hero__inner { padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,3.75rem); }
.hero h1 { font-size:clamp(3rem,11.5vw,10rem); line-height:.88; letter-spacing:-.045em; color:#fff; mix-blend-mode:difference; position:relative; z-index:3; white-space:nowrap; }
.hero h1 .stroke { -webkit-text-stroke-color:#fff; }
/* Treppenversatz: Zeile 2 und 3 laufen bewusst ins Foto und invertieren dort */
.hero .clip:nth-child(2) { margin-left:clamp(1.5rem,6vw,6rem); }
.hero .clip:nth-child(3) { margin-left:clamp(3rem,12vw,12rem); }
/* Archivo-Breitenachse: gemischte Laufweiten als typografische Signatur */
.wide { font-stretch:125%; }
.tight { font-stretch:72%; }
.hero .clip { display:block; overflow:hidden; padding-block:.04em; }
.hero .clip>span { display:block; transform:translateY(106%); }
.has-js .hero .clip>span { transition:transform 1s var(--ease); }
.hero.in .clip>span { transform:translateY(0); }
.hero .clip:nth-child(2)>span { transition-delay:.08s; }
.hero__sub { color:var(--sec); font-size:clamp(1.1rem,1.8vw,1.35rem); max-width:32rem; margin-top:1.75rem; position:relative; z-index:2; }
.hero__actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; position:relative; z-index:2; }
.hero__trust { display:flex; align-items:center; gap:1rem; margin-top:2.4rem; }
.trust-avatars { display:flex; }
.trust-avatars span { width:2.4rem; height:2.4rem; border-radius:50%; background:var(--fg); color:var(--bg); display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:800; font-size:.85rem; border:2px solid var(--bg); margin-left:-.7rem; }
.trust-avatars span:first-child { margin-left:0; }
.trust-text { display:flex; flex-direction:column; gap:.2rem; }
.trust-stars { display:inline-flex; gap:.12rem; color:var(--fg); }
.trust-stars .ic { width:15px; height:15px; }
.trust-label { font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--sec); }
.hero__photo { position:absolute; top:0; right:0; width:46%; height:100%; z-index:1; border-left:1.5px solid var(--fg); }
.hero__photo .bw { height:120%; }
.hero__photo .bw img { will-change:transform; }
@media(max-width:820px){ .hero__photo{display:none} .hero h1{color:var(--fg);mix-blend-mode:normal;white-space:normal;font-size:clamp(3rem,13vw,5rem)} .hero h1 .stroke{-webkit-text-stroke-color:var(--fg)} .hero .clip:nth-child(2),.hero .clip:nth-child(3){margin-left:0} }

/* Schematic-Ribbon — Eckdaten als einzeiliger Stromlauf (Pins auf Leitung) */
.schem--ribbon { background:var(--bg); border-bottom:1px solid var(--line); }
.schem__nodes { position:relative; display:grid; grid-template-columns:repeat(4,1fr); padding:clamp(1.3rem,2.4vw,1.85rem) 0; }
/* durchgehende Leitung durch alle Pins */
.schem__nodes::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line-2); }
.schem__node { position:relative; display:flex; flex-direction:column; gap:.35rem; padding:0 clamp(1rem,2vw,2rem); border-left:1px solid var(--line); }
.schem__node:first-child { border-left:0; padding-left:0; }
.schem__k { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); }
.schem__v { font-family:var(--f-display); font-weight:700; font-size:clamp(.92rem,1.3vw,1.1rem); text-transform:uppercase; letter-spacing:-.01em; line-height:1.12; color:var(--fg); }
@media(max-width:760px){ .schem__nodes{grid-template-columns:repeat(2,1fr);row-gap:1.4rem} .schem__nodes::before{display:none} .schem__node{border-left:0;padding-left:0} .schem__node:nth-child(n+3){border-top:1px solid var(--line);padding-top:1.4rem} }
/* Mobil: Eckdaten als vertikale Schiene (Leitlinie + Pins statt gestreckter Stapel) */
@media(max-width:430px){
  .schem__nodes{grid-template-columns:1fr;row-gap:0}
  .schem__node:nth-child(n){border-top:0;margin-top:0;border-left:1px solid var(--line);padding:.55rem 0 .55rem 1.2rem;position:relative}
  .schem__node:first-child{border-left:1px solid var(--line);padding-left:1.2rem}
  .schem__node::before{content:'';position:absolute;left:-3px;top:.85rem;width:5px;height:5px;background:var(--fg)}
}

/* 8. Kennzahlen — Schaltplan (Messpunkte auf einer Leitung) ----------- */
.circuit__cap { margin-bottom:clamp(1.5rem,3vw,2.2rem); }
.circuit__row { position:relative; display:grid; grid-template-columns:repeat(3,1fr); align-items:start; }
/* Sammelschiene: durchgehende Leitung, Knoten sitzen zentriert darauf */
.circuit__row::before { content:''; position:absolute; left:0; right:0; top:6px; height:1px; background:var(--line-2); }
.circuit__node { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 1.5rem; }
.circuit__pin { order:-1; width:13px; height:13px; background:var(--fg); position:relative; z-index:1; margin-bottom:clamp(1.3rem,3vw,2rem); }
.circuit__n { font-family:var(--f-display); font-weight:800; font-size:clamp(2.2rem,5.5vw,3.8rem); line-height:.9; letter-spacing:-.04em; color:var(--fg); }
.circuit__l { font-family:var(--f-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sec); margin-top:.7rem; max-width:14rem; }
@media(max-width:680px){
  .circuit__row{grid-template-columns:1fr;gap:2rem}
  .circuit__row::before{display:none}
  .circuit__node{align-items:flex-start;text-align:left}
}

/* 9. Leistungen — Card-Grid (Hover invertiert zu Schwarz) ------------- */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.svc-card { background:var(--card); padding:clamp(1.5rem,2.5vw,2.1rem); display:flex; flex-direction:column; min-height:13.5rem; position:relative; overflow:hidden; isolation:isolate; transition:background-color .3s var(--ease); }
.svc-card:hover { background:var(--fg); }
.svc-card__img { position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s var(--ease); }
.svc-card__img img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.svc-card__img::after { content:''; position:absolute; inset:0; background:rgba(10,10,10,.6); }
.svc-card.has-img:hover .svc-card__img { opacity:1; }
/* Leistungen ohne Foto: iso-Motiv der Leistung statt Foto als Hover-Reveal */
.svc-card__iso { position:absolute; right:-8%; bottom:-8%; width:62%; z-index:-1; opacity:0; color:var(--bg); transition:opacity .4s var(--ease); pointer-events:none; }
.svc-card__iso svg { width:100%; height:auto; display:block; }
.svc-card.has-iso:hover .svc-card__iso { opacity:.16; }
.svc-card__icon .ic { width:34px; height:34px; color:var(--fg); transition:color .3s var(--ease); }
.svc-card:hover .svc-card__icon .ic { color:var(--bg); }
.svc-card h3 { font-size:1.3rem; margin:1.1rem 0 .5rem; transition:color .3s var(--ease); }
.svc-card:hover h3 { color:var(--bg); }
.svc-card p { color:var(--sec); font-size:.92rem; line-height:1.5; flex:1; transition:color .3s var(--ease); }
.svc-card:hover p { color:rgba(255,255,255,.72); }
.svc-card__go { margin-top:1.1rem; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg); transition:color .3s var(--ease),gap .25s var(--ease); }
.svc-card:hover .svc-card__go { color:var(--bg); gap:.8rem; }
.svc-card__go .ic { width:15px; height:15px; }
@media(max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .svc-grid{grid-template-columns:1fr} }

/* 10. Split / Trust ---------------------------------------------------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.split--media { grid-template-columns:1.05fr .95fr; }
.split__media .bw { aspect-ratio:4/5; }
.checklist li { display:flex; gap:1rem; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.checklist li:last-child { border-bottom:0; }
.checklist .ic { width:24px; height:24px; color:var(--fg); flex:none; margin-top:2px; }
.checklist strong { display:block; font-family:var(--f-display); font-size:1.15rem; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; }
.checklist span { color:var(--sec); font-size:.95rem; }

/* 11. CTA-Band (invertiert/schwarz) ----------------------------------- */
.cta-band .wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:2.5rem; align-items:center; }
.cta-band h2 { font-size:clamp(2.4rem,5.5vw,4.5rem); margin-top:1rem; }
.cta-band p { color:var(--sec); margin-top:1rem; text-transform:none; }
.cta-band .actions { display:flex; flex-direction:column; gap:1rem; }

/* 12. Footer (invertiert/schwarz) ------------------------------------- */
.area-strip { --bg:var(--card); background:var(--bg); border-block:1px solid var(--line); }
.area-strip .wrap { padding-block:1.6rem; }
.area-strip .label { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--sec); }
.area-strip p { color:var(--sec); font-size:.9rem; margin-top:.5rem; line-height:1.8; }

.footer { padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer img { height:58px; width:auto; margin-bottom:1.25rem; }
.footer h4 { font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); margin-bottom:1.25rem; }
.footer ul { display:flex; flex-direction:column; gap:.7rem; }
.footer a { color:var(--sec); font-size:.95rem; transition:color .2s; } .footer a:hover { color:var(--fg); }
.footer .contact li { display:flex; gap:.6rem; color:var(--sec); font-size:.95rem; margin-bottom:.85rem; }
.footer .contact .ic { width:17px; height:17px; color:var(--fg); flex:none; margin-top:3px; }
.footer__bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:3.5rem; padding-top:1.75rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--meta); }
.footer__bottom a { color:var(--meta); font-size:inherit; font-family:inherit; } .footer__bottom a:hover { color:var(--fg); }

/* 12b. Über uns — full-bleed Layout-Bruch ----------------------------- */
.about-full { position:relative; overflow:hidden; min-height:min(86vh,40rem); display:flex; align-items:flex-end; padding-block:clamp(3rem,7vw,6rem); }
.about-full__bg { position:absolute; inset:0; z-index:0; }
.about-full__bg .bw { height:122%; background:#0a0a0a; }
.about-full__bg .bw img { will-change:transform; }
.about-full__bg::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.74) 46%, rgba(8,8,8,.28) 100%); }
.about-full .wrap { position:relative; z-index:1; width:100%; }
.about-full__inner { max-width:42rem; }
.about-full__inner h2 { font-size:clamp(2.4rem,5.5vw,4.5rem); margin:1.1rem 0 1.5rem; }
.about-full__inner .lead { color:#d2d2d0; text-transform:none; max-width:38rem; }
.about-full__badge { position:absolute; right:0; bottom:0; background:var(--fg); color:var(--bg); padding:1.05rem 1.6rem; display:flex; flex-direction:column; gap:.25rem; }
.about-full__badge .n { font-family:var(--f-display); font-weight:800; font-size:1.6rem; line-height:1; }
.about-full__badge .t { font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }
@media(max-width:680px){ .about-full__badge{ display:none; } }

/* 12c. Werte (Warum wir) ---------------------------------------------- */
.values { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(2.5rem,5vw,3.5rem); }
.value { background:var(--bg); padding:clamp(1.5rem,2.5vw,2.1rem); }
.value .ic { width:30px; height:30px; color:var(--fg); }
.value h3 { font-size:1.15rem; margin:1.1rem 0 .55rem; }
.value p { color:var(--sec); font-size:.92rem; line-height:1.5; text-transform:none; }
@media(max-width:860px){ .values{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .values{grid-template-columns:1fr} }

/* 12d. Testimonials — editorial (großes Zitat, Wechsel) --------------- */
.quotes { max-width:64rem; }
.quotes__stack { display:grid; }
.quote { grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .5s var(--ease); }
.quote.is-active { opacity:1; visibility:visible; }
.quote__stars { display:inline-flex; gap:.15rem; color:var(--fg); margin-bottom:1.5rem; }
.quote__stars .ic { width:18px; height:18px; }
.quote blockquote { font-family:var(--f-display); font-weight:800; font-size:clamp(1.45rem,3.3vw,2.6rem); line-height:1.18; letter-spacing:-.02em; color:var(--fg); text-transform:none; }
.quote figcaption { margin-top:1.8rem; font-family:var(--f-mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sec); }
.quotes__nav { display:flex; align-items:center; gap:1.5rem; margin-top:2.75rem; }
.quotes__btn { width:3rem; height:3rem; border:1.5px solid var(--line-2); background:transparent; color:var(--fg); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background-color .2s var(--ease),color .2s var(--ease); }
.quotes__btn .ic { width:18px; height:18px; }
.quotes__btn[data-q-prev] .ic { transform:rotate(180deg); }
.quotes__btn:hover { background:var(--fg); color:var(--bg); }
.quotes__count { font-family:var(--f-mono); font-size:.85rem; color:var(--meta); letter-spacing:.05em; }

/* 12e. Credibility-Strip ---------------------------------------------- */
.creds { display:flex; flex-wrap:wrap; gap:.75rem; }
.cred { font-family:var(--f-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fg); border:1px solid var(--line-2); padding:.55rem .9rem; }

/* 12f. Einsatzgebiet — Hauptgebiet-Statement + Orte-Tags -------------- */
.areas { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.areas__head h2 { font-size:clamp(2.2rem,4.5vw,3.6rem); margin-top:1.1rem; line-height:.98; }
.areas__core { margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.areas__core-label { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); margin-bottom:.7rem; }
.areas__core-label .ic { width:15px; height:15px; color:var(--fg); }
.areas__core strong { display:block; font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem,3.2vw,2.6rem); letter-spacing:-.02em; line-height:1; color:var(--fg); }
.areas__list-label { display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); margin-bottom:1.1rem; }
.areas__tags { display:flex; flex-wrap:wrap; gap:.55rem; }
.area-tag { font-family:var(--f-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text); border:1px solid var(--line-2); padding:.5rem .8rem; transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); }
.area-tag:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }
@media(max-width:820px){ .areas{grid-template-columns:1fr;gap:2rem} }

/* 12g. FAQ — Split (Head + Akkordeon via <details>) ------------------- */
.faq__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.faq__head { position:sticky; top:5.5rem; }
.faq__head h2 { font-size:clamp(2.2rem,4.5vw,3.4rem); margin-top:1.1rem; }
.faq__list { border-top:1px solid var(--line); }
.faq__item { border-bottom:1px solid var(--line); }
.faq__item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:clamp(1.1rem,2vw,1.5rem) .25rem; font-family:var(--f-display); font-weight:700; font-size:clamp(1.05rem,1.8vw,1.3rem); letter-spacing:-.01em; line-height:1.25; color:var(--fg); transition:color .2s var(--ease); }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary:hover { color:var(--sec); }
.faq__q { flex:1; }
/* +/- Indikator (zwei Balken → bei offen zum −) */
.faq__icon { position:relative; width:18px; height:18px; flex:none; }
.faq__icon::before, .faq__icon::after { content:''; position:absolute; top:50%; left:50%; background:var(--fg); transition:transform .25s var(--ease),opacity .25s var(--ease); }
.faq__icon::before { width:18px; height:2px; transform:translate(-50%,-50%); }
.faq__icon::after  { width:2px;  height:18px; transform:translate(-50%,-50%); }
.faq__item[open] .faq__icon::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq__item[open] summary { color:var(--fg); }
.faq__answer { padding:0 .25rem clamp(1.1rem,2vw,1.5rem); color:var(--sec); font-size:1rem; line-height:1.6; max-width:42rem; overflow:hidden; animation:faqOpen .3s var(--ease); }
@keyframes faqOpen { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media(max-width:820px){ .faq__grid{grid-template-columns:1fr} .faq__head{position:static} }
@media(prefers-reduced-motion:reduce){ .faq__answer{animation:none} }

/* 13. Sticky Mobile-CTA ------------------------------------------------ */
.mcta { position:fixed; inset:auto 0 0 0; z-index:150; display:none; grid-template-columns:1fr 1fr; }
.mcta a { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:1rem; min-height:56px; font-family:var(--f-mono); font-weight:700; text-transform:uppercase; font-size:.8rem; }
.mcta .call { background:#0a0a0a; color:#fff; }
.mcta .wa { background:#fff; color:#0a0a0a; border-left:1px solid #0a0a0a; }
.mcta .ic { width:18px; height:18px; }

/* 14. Animationen — Reveal-Varianten (bewusste Regie statt überall gleich) */
.has-js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease); }
.has-js .reveal.in { opacity:1; transform:none; filter:none; }
.has-js .reveal--left  { transform:translateX(-30px); }
.has-js .reveal--right { transform:translateX(30px); }
.has-js .reveal--scale { transform:scale(.94); }
.has-js .reveal--fade  { transform:none; }
.has-js .reveal--clip  { transform:translateY(12px); filter:blur(7px); }
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}

/* Kind-Stagger: Cards & Werte steigen reihenweise ein (statt als Block) */
.has-js .svc-grid .svc-card, .has-js .values .value { opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease),transform .5s var(--ease); }
.has-js .svc-grid.in .svc-card, .has-js .values.in .value { opacity:1; transform:none; }
.has-js .svc-grid.in .svc-card:nth-child(-n+3), .has-js .values.in .value:nth-child(-n+2){transition-delay:.06s}
.has-js .svc-grid.in .svc-card:nth-child(n+4):nth-child(-n+6), .has-js .values.in .value:nth-child(n+3){transition-delay:.16s}
.has-js .svc-grid.in .svc-card:nth-child(n+7){transition-delay:.26s}
/* Fallback: falls main.js nicht lädt, bleiben alle Inhalte sichtbar (kein dauerhaftes Invisible) */
.vc-nojs .reveal, .vc-nojs .svc-grid .svc-card, .vc-nojs .values .value, .vc-nojs .hero .clip>span { opacity:1!important; transform:none!important; filter:none!important; }

/* 16. Feinschliff — Blueprint/Engineering-Signatur --------------------- */
/* 16a. Technisches Hairline-Raster als Atmosphäre (sehr dezent) */
.hero, .section {
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center 0;
}
/* Karten-/Statement-Sektionen behalten ihr Raster auf der Card-Fläche */
.section--card { background-color: var(--card); }

/* 16b. Korn-Overlay für Tiefe (liegt über allem, nicht klickbar) */
body::after {
    content:''; display:none; position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 16d. Leitsystem — vertikale Strom-Leitung verbindet die Sektionen ---- */
.section > .wrap { position:relative; }
.section > .wrap::before {
    content:''; position:absolute; left:calc(var(--pad)/2); width:1px;
    top:calc(-1 * clamp(4rem,9vw,7.5rem)); bottom:calc(-1 * clamp(4rem,9vw,7.5rem));
    background:var(--line-2); pointer-events:none;
}
/* Abzweig-Knoten am Sektionsanfang (speist die Eyebrow-Linie) */
.section > .wrap::after {
    content:''; position:absolute; left:calc(var(--pad)/2); top:.42rem; width:7px; height:7px;
    background:var(--fg); transform:translateX(-50%); pointer-events:none;
}
@media(max-width:900px){ .section > .wrap::before, .section > .wrap::after { display:none; } }

/* 16e. Warnschraffur — industrielles Signal am CTA-Band */
.cta-band { position:relative; }
.cta-band::before { content:''; position:absolute; top:0; left:0; right:0; height:8px; background:repeating-linear-gradient(-45deg, var(--fg) 0 8px, transparent 8px 16px); opacity:.55; pointer-events:none; }

/* 16f. Eyebrow technischer — Tick-Punkt statt nur Linie */
.eyebrow::after { content:''; width:.3rem; height:.3rem; background:currentColor; border-radius:50%; display:inline-block; }

/* 16h. Fasen-Ecke auf Tags/Badges (gleiche Formsprache wie Buttons) */
.cred, .area-tag, .quotes__btn, .about-full__badge { clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
/* Outline-Varianten: Fasen-Diagonale nachziehen (clip-path kappt den Rahmen) */
.cred, .area-tag, .quotes__btn {
    background-image:
        linear-gradient(45deg, transparent calc(50% - .6px), var(--line-2) calc(50% - .6px), var(--line-2) calc(50% + .6px), transparent calc(50% + .6px)),
        linear-gradient(45deg, transparent calc(50% - .6px), var(--line-2) calc(50% - .6px), var(--line-2) calc(50% + .6px), transparent calc(50% + .6px));
    background-position:top right, bottom left;
    background-size:8px 8px;
    background-repeat:no-repeat;
    background-origin:border-box;
}

/* 16g. Fokus-Sichtbarkeit für Tastatur-Navigation (A11y) */
:focus-visible { outline:2px solid var(--fg); outline-offset:3px; }
.topbar :focus-visible { outline-color:#fff; }

/* 15. Responsive ------------------------------------------------------- */
@media(max-width:960px){
  .nav,.header-cta .btn{display:none}
  .burger{display:inline-flex}
  .split,.split--media,.cta-band .wrap,.footer__grid{grid-template-columns:1fr}
  .mcta{display:grid}
  body{padding-bottom:56px}

  /* Seitliche Reveals mobil von unten einblenden: die 30px-X-Verschiebung ragte
     vor dem Reveal über den Viewportrand und erzeugte den Gap rechts */
  .has-js .reveal--left,.has-js .reveal--right{transform:translateY(22px)}

  /* Überschriften: wortweise umbrechen; Langtitel brechen kontrolliert
     per <wbr> an der Wortfuge (title_wbr in config.php), ohne Trennstrich */
  h1,h2,h3{overflow-wrap:break-word}
  .section-head h2,.cta-band h2,.about-full__inner h2{font-size:clamp(2.2rem,8vw,4.5rem)}
  /* Kurze Display-Titel mobil einzeilig ("Alles aus einer Hand", "Projekt besprechen?");
     Desktop behält Größe und ggf. Zweizeiler per <br> */
  h2.h2--compact{font-size:clamp(1.4rem,6.5vw,4.5rem)}
  .h2--compact br{display:none}

  /* Footer mobil: Hairline-Blöcke im Schaltplan-Duktus statt langer Einzelspalte */
  .footer__grid{gap:0}
  .footer__col{border-top:1px solid var(--line);padding-block:1.6rem}
  .footer__col--brand{order:1;border-top:0;padding-top:0}
  .footer__col--contact{order:2}
  .footer__col--services{order:3}
  .footer__col--company{order:4;padding-bottom:1.9rem}
  .footer img{height:44px;margin-bottom:.9rem}
  .footer h4{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
  .footer h4::before{content:'';width:5px;height:5px;background:var(--meta)}
  .footer__col--services ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.65rem .9rem}
  .footer a{overflow-wrap:break-word}
  .footer__col--company ul{flex-direction:row;flex-wrap:wrap;gap:.65rem 1.6rem}
  .footer .contact li:last-child{margin-bottom:0}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:1rem;margin-top:0}
  .footer__bottom span{flex-wrap:wrap}
  .footer__bottom a{white-space:nowrap}
}
@media(max-width:560px){
  .topbar{display:none}
  /* Badge "Elektrotechnik-Meisterbetrieb" liegt bei 360px sonst an der Umbruchkante */
  .cred--big{font-size:.85rem;letter-spacing:.03em;padding:.75rem 1.05rem}
}
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} .has-js .reveal{opacity:1;transform:none;filter:none} .has-js .svc-grid .svc-card,.has-js .values .value{opacity:1;transform:none} .has-js .hero .clip>span{transform:none} }

/* 17. Unterseiten — Hero slim, Iso-Panels, Detail-Raster ---------------- */
/* 17a. Schlanker Unterseiten-Hero (ohne Foto-Blend der Startseite) */
.hero--slim .wrap { padding-block:clamp(3.25rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem); }
.hero--slim h1 { color:var(--fg); mix-blend-mode:normal; white-space:normal; font-size:clamp(2.1rem,6.5vw,5.5rem); overflow-wrap:break-word; }
.hero--slim h1 .stroke { -webkit-text-stroke-color:var(--fg); }
.hero--slim .hero__sub { max-width:40rem; }
.hero--slim .hero__actions { margin-top:2rem; }

/* Iso-Motiv rechts im Hero (Bauplan-Signatur, rein dekorativ) */
.hero__iso { position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); width:clamp(170px,21vw,300px); color:var(--fg); opacity:.5; pointer-events:none; z-index:1; }
.hero__iso svg { width:100%; height:auto; display:block; }
@media(max-width:900px){ .hero__iso{display:none} }

/* 17b. Iso-Panel: Grafikfläche im Blueprint-Stil (wo kein Foto existiert) */
.iso-panel { position:relative; aspect-ratio:4/5; border:1.5px solid var(--fg); display:grid; place-items:center; }
.iso-panel::before { content:''; position:absolute; inset:14px; border:1px solid var(--line-2); pointer-events:none; }
.iso-panel svg { width:min(56%,280px); height:auto; color:var(--fg); }
.iso-cap { position:absolute; left:1.15rem; bottom:.95rem; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); }

/* 17c. Detail-Raster der Leistungssektionen (Balken-Motiv statt Nummern) */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.25rem,4.5vw,3.75rem) clamp(2.5rem,5vw,4.5rem); }
.detail-block h3 { font-size:clamp(1rem,1.65vw,1.3rem); }
.detail-block h3::before { content:''; display:block; width:2.4rem; height:3px; background:var(--fg); margin-bottom:1rem; }
.detail-block p { color:var(--sec); margin-top:.7rem; text-transform:none; }
@media(max-width:760px){ .detail-grid{grid-template-columns:1fr} }

/* 17d. Ergänzungen für Unterseiten-Bausteine */
.cred--big { font-size:.92rem; font-weight:700; padding:.85rem 1.35rem; border-color:var(--fg); }
.cta--simple { text-align:center; max-width:46rem; margin-inline:auto; }
.cta--simple h2 { font-size:clamp(2.2rem,5vw,3.75rem); }
.cta--simple p { text-transform:none; }
.faq__section { margin-bottom:clamp(2.25rem,4.5vw,3.25rem); }
.faq__section:last-child { margin-bottom:0; }
.faq__section > h3 { font-family:var(--f-mono); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--meta); margin-bottom:.4rem; }

/* 17e. Werdegang-Stationen (Unternehmensseite) */
.timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.timeline__item { background:var(--bg); padding:clamp(1.5rem,3vw,2.1rem); }
.timeline__y { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); }
.timeline__item h3 { margin-top:.9rem; font-size:clamp(1.2rem,1.9vw,1.5rem); }
.timeline__item p { margin-top:.6rem; color:var(--sec); font-size:.95rem; text-transform:none; }
.timeline__item--active { background:var(--fg); }
.timeline__item--active h3 { color:var(--bg); }
.timeline__item--active .timeline__y { color:var(--bg); opacity:.78; }
.timeline__item--active p { color:var(--bg); opacity:.94; }
@media(max-width:760px){ .timeline{grid-template-columns:1fr} }

/* 18. Kontakt & Formular ------------------------------------------------ */
.contact-rows { display:grid; margin-top:1.5rem; }
.contact-row { display:flex; gap:1rem; align-items:flex-start; padding:1.15rem 0; border-bottom:1px solid var(--line); }
.contact-row:last-child { border-bottom:0; }
.contact-row > span .ic { width:22px; height:22px; margin-top:2px; }
.contact-row small { display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); margin-bottom:.25rem; }
.contact-row a, .contact-row address, .contact-row p { font-weight:600; font-size:1.05rem; font-style:normal; }

.form { display:grid; gap:1.25rem; border:1.5px solid var(--fg); padding:clamp(1.5rem,3vw,2.25rem); background:var(--bg); position:relative; }
.form::before { content:'Anfrage · unverbindlich'; position:absolute; top:-.62em; left:1.25rem; padding:0 .5rem; background:var(--bg); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form__group { display:grid; gap:.45rem; align-content:start; }
.form__group label { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--meta); }
.form__group input, .form__group select, .form__group textarea { width:100%; border:1px solid var(--line-2); background:var(--bg); padding:.8rem .9rem; font:inherit; font-size:.98rem; color:var(--fg); border-radius:0; }
.form__group input:focus, .form__group select:focus, .form__group textarea:focus { border-color:var(--fg); }
.form__group textarea { resize:vertical; min-height:130px; }
.checkbox { display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:var(--sec); text-transform:none; cursor:pointer; }
.checkbox input { width:17px; height:17px; margin-top:2px; accent-color:var(--fg); flex:none; }
.checkbox a { text-decoration:underline; text-underline-offset:2px; color:var(--fg); }
.btn--full { width:100%; justify-content:center; }
.form__hint { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--meta); }
.form__success, .form__error { border:1.5px solid var(--fg); padding:1.15rem 1.3rem; display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; row-gap:.3rem; align-items:start; }
.form__success > span, .form__error > span { grid-row:span 2; }
.form__success .ic, .form__error .ic { width:22px; height:22px; }
.form__success strong, .form__error strong { font-family:var(--f-display); text-transform:uppercase; letter-spacing:-.01em; }
.form__success p, .form__error p { grid-column:2; color:var(--sec); text-transform:none; font-size:.95rem; }
.form__error { background:var(--fg); color:var(--bg); }
.form__error strong { color:var(--bg); }
.form__error p { color:var(--bg); opacity:.75; }
@media(max-width:560px){ .form__row{grid-template-columns:1fr} }

/* Standort-Karte: Click-to-Load (kein externer Request ohne Zutun) */
.map-embed iframe { display:block; width:100%; height:420px; border:1.5px solid var(--fg); background:var(--bg); filter:grayscale(1) contrast(1.04); }
.map-consent { border:1.5px solid var(--fg); min-height:420px; display:grid; place-content:center; justify-items:center; gap:1.1rem; text-align:center; padding:2.5rem; position:relative; }
.map-consent::before { content:''; position:absolute; inset:14px; border:1px solid var(--line-2); pointer-events:none; }
.map-consent .ic { width:38px; height:38px; }
.map-consent p { color:var(--sec); text-transform:none; max-width:34rem; }
.map-consent small { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--meta); max-width:36rem; }
.map-embed__link { margin-top:.9rem; }
.map-embed__link a { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.map-embed__link .ic { width:16px; height:16px; }
.faq__section { max-width:56rem; }

/* 19. Rechtsseiten (Impressum, Datenschutz) ----------------------------- */
.legal { max-width:56rem; }
.legal > .lead { text-transform:none; }
.legal h2 { font-size:clamp(1.5rem,2.8vw,2.1rem); }
.legal__section { margin-top:clamp(2rem,4vw,2.75rem); }
.legal__section h3 { font-size:1.12rem; margin-bottom:.7rem; }
.legal__section h3::before { content:''; display:block; width:2.4rem; height:3px; background:var(--fg); margin-bottom:.85rem; }
.legal p, .legal li, .legal address, .legal dd { color:var(--sec); text-transform:none; font-style:normal; line-height:1.65; }
.legal ul { list-style:none; padding:0; }
.legal ul li { position:relative; padding-left:1.2rem; margin-top:.4rem; }
.legal ul li::before { content:''; position:absolute; left:0; top:.62em; width:7px; height:2px; background:var(--fg); }
.legal a { color:var(--fg); text-decoration:underline; text-underline-offset:2px; }
.legal__list { display:grid; gap:1.1rem; }
.legal__list dt { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--meta); }
.legal__list dd { margin:.25rem 0 0; font-weight:600; color:var(--fg); }

/* 20. Cookie-Consent ----------------------------------------------------- */
.cookie-consent { position:fixed; inset:0; z-index:200; display:none; align-items:flex-end; justify-content:center; background:rgba(10,10,10,.55); padding:1.25rem; }
.cookie-consent.is-visible { display:flex; }
.cookie-consent__inner { width:100%; max-width:64rem; background:var(--bg); border:1.5px solid var(--fg); padding:clamp(1.5rem,3vw,2.25rem); position:relative; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cookie-consent__title { font-size:clamp(1.3rem,2.4vw,1.7rem); }
.cookie-consent__text { color:var(--sec); text-transform:none; margin-top:.75rem; max-width:52rem; line-height:1.65; }
.cookie-consent__text a, .cookie-consent__link { color:var(--fg); text-decoration:underline; text-underline-offset:2px; }
.cookie-consent__groups { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; }
.cookie-consent__group { border:1px solid var(--line-2); padding:1.1rem 1.2rem; }
.cookie-consent__group-header { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
.cookie-consent__checkbox { width:17px; height:17px; accent-color:var(--fg); flex:none; }
.cookie-consent__label { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg); }
.cookie-consent__hint { font-family:var(--f-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--meta); margin-left:auto; }
.cookie-consent__group-desc { color:var(--sec); text-transform:none; font-size:.86rem; line-height:1.55; margin-top:.6rem; }
.cookie-consent__actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.75rem; }
@media(max-width:820px){ .cookie-consent__groups{grid-template-columns:1fr} }
@media(max-width:560px){ .cookie-consent__actions{flex-direction:column} .cookie-consent__actions .btn{width:100%; justify-content:center;} }
.todo-badge { display:inline-block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; border:1px dashed var(--fg); padding:.3rem .55rem; color:var(--fg); }