/*
Theme Name: ACTA Theme v19
Theme URI: https://acta.li
Author: ACTA ING.
Description: Redesign 2026 — Baumanagement, Architektur, Gebäudetechnik. Mehrseitige Struktur, Fokus Baumanagement.
Version: 19.10.1
Requires at least: 6.0
Requires PHP: 7.4
License: proprietary
Text Domain: acta-v19
*/
/* ============================================================
   ACTA ING. — Designsystem v1 (Redesign-Prototyp)
   Schwarz / Weiss / Beton-Grau, Akzent Rot, technische Linien
   ============================================================ */

:root {
  --ink: #101114;          /* Fast-Schwarz */
  --paper: #ffffff;
  --concrete: #f4f3f0;     /* Beton hell */
  --concrete-2: #e8e6e1;   /* Beton mittel */
  --line: #dedbd5;
  --line-dark: #2a2c31;
  --gray: #6b6e74;
  --gray-2: #9a9da3;
  --accent: #d92b25;       /* ACTA Rot */
  --accent-dark: #b2221d;
  --maxw: 1180px;
  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.6; font-size: 17px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Typografie ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
.lead { font-size: 1.15rem; color: var(--gray); max-width: 46em; }
.eyebrow {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--accent); }
.mono { font-family: var(--mono); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff;
  border-bottom: 1px solid var(--line-dark);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { font-weight: 800; font-size: 1.25rem; letter-spacing: 0.01em; }
.logo b { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a { font-size: 0.95rem; color: #d6d7da; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav .tel { font-family: var(--mono); font-size: 0.85rem; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 600;
  font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; transition: all .15s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--concrete-2); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-dark { border-color: #4a4c52; color: #fff; }
.btn-ghost-dark:hover { border-color: #fff; }

/* Dropdown */
.has-sub { position: relative; }
.has-sub > a::after { content: " ▾"; font-size: 0.7em; color: var(--gray-2); }
.sub {
  display: none; position: absolute; top: 100%; left: -16px; min-width: 260px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,0,.12); padding: 8px 0;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.sub a { display: block; padding: 10px 18px; color: var(--ink) !important; font-size: 0.93rem; }
.sub a:hover { background: var(--concrete); color: var(--accent) !important; }

/* Mobile Nav */
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid #4a4c52; color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 0.9rem; }
@media (max-width: 980px) {
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--ink);
         flex-direction: column; align-items: flex-start; padding: 18px 24px 26px; gap: 14px; border-bottom: 1px solid var(--line-dark); }
  .nav.open { display: flex; }
  .nav-toggle { display: block; }
  .sub { position: static; display: block; box-shadow: none; border: none; background: transparent; padding: 0 0 0 14px; }
  .sub a { color: #9a9da3 !important; padding: 6px 0; }
}

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.hero::after { /* technisches Raster */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; padding-top: 84px; padding-bottom: 84px; align-items: center; }
.hero .sub-line { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-2); margin: 18px 0 10px; }
.hero p.lead { color: #b9bbc0; margin-top: 14px; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.trustbar { border-top: 1px solid var(--line-dark); background: #16171b; color: #9a9da3; position: relative; z-index: 2;}
.trustbar .wrap { display: flex; flex-wrap: wrap; gap: 10px 34px; padding: 14px 24px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.trustbar span::before { content: "— "; color: var(--accent); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 56px; } }

/* Innenseiten-Hero */
.page-hero { background: var(--ink); color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero p.lead { color: #b9bbc0; margin-top: 16px; }
.crumbs { font-family: var(--mono); font-size: 0.78rem; color: var(--gray-2); margin-bottom: 22px; letter-spacing: 0.06em; }
.crumbs a { color: var(--gray-2); } .crumbs a:hover { color: #fff; }

/* ---------- Bild-Platzhalter ---------- */
.ph {
  position: relative; background: var(--concrete);
  background-image:
    linear-gradient(45deg, transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%),
    linear-gradient(-45deg, transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end; overflow: hidden;
}
.ph > span {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--gray);
  background: rgba(255,255,255,.92); border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 6px 10px; max-width: 100%;
}
.ph.dark { background-color: #1c1d21; border-color: var(--line-dark);
  background-image:
    linear-gradient(45deg, transparent 49.6%, #33353b 49.6%, #33353b 50.4%, transparent 50.4%),
    linear-gradient(-45deg, transparent 49.6%, #33353b 49.6%, #33353b 50.4%, transparent 50.4%); }
.ph.dark > span { background: rgba(16,17,20,.9); color: var(--gray-2); border-color: var(--line-dark); }
.r16x9 { aspect-ratio: 16/9; } .r4x3 { aspect-ratio: 4/3; } .r1x1 { aspect-ratio: 1/1; } .r3x4 { aspect-ratio: 3/4; }

/* ---------- Sektionen ---------- */
.section { padding: 84px 0; }
.section.tint { background: var(--concrete); }
.section.dark { background: var(--ink); color: #fff; }
.section.dark .lead { color: #b9bbc0; }
.section-head { max-width: 760px; margin-bottom: 46px; }
.section-head p { color: var(--gray); margin-top: 14px; }
.section.dark .section-head p { color: #b9bbc0; }
@media (max-width: 700px) { .section { padding: 56px 0; } }

/* Karten-Raster */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--line); background: #fff; padding: 30px 28px;
  display: flex; flex-direction: column; gap: 12px; transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--ink); transform: translateY(-2px); }
.card .tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.card p { color: var(--gray); font-size: 0.97rem; }
.card .more { margin-top: auto; font-weight: 600; font-size: 0.93rem; color: var(--accent); }
.card .more::after { content: " →"; }
.card ul { display: grid; gap: 7px; }
.card ul li { padding-left: 20px; position: relative; font-size: 0.95rem; color: #3c3e43; }
.card ul li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

/* Nummerierte Schritte */
.steps { counter-reset: step; }
.step { border-top: 2px solid var(--ink); padding-top: 18px; }
.step .num { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); display: block; margin-bottom: 8px; }
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { color: var(--gray); font-size: 0.94rem; }

/* Definitionstabelle (KNOW-HOW / KOSTEN ...) */
.facts { border-top: 1px solid var(--line); }
.facts .row { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts .k { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
@media (max-width: 640px) { .facts .row { grid-template-columns: 1fr; gap: 4px; } }

/* Checkliste */
.checks { display: grid; gap: 10px; }
.checks li { padding-left: 28px; position: relative; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* FAQ */
details.faq { border-bottom: 1px solid var(--line); padding: 20px 0; }
details.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.faq summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 1.3rem; line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq p { color: var(--gray); margin-top: 12px; max-width: 60em; }

/* Referenz-Karte */
.ref { border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.ref .body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ref .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ref .meta span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line); padding: 3px 9px; color: var(--gray); }
.ref h3 { font-size: 1.08rem; }
.ref p { color: var(--gray); font-size: 0.93rem; }
.ref .kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; }
.ref .kpi div { font-size: 0.85rem; color: var(--gray); }
.ref .kpi b { display: block; color: var(--ink); font-size: 0.95rem; }

/* CTA-Band */
.cta-band { background: var(--ink); color: #fff; padding: 72px 0; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none; }
.cta-band .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: center; }
.cta-band p { color: #b9bbc0; margin-top: 12px; max-width: 44em; }
.cta-band .actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta-band .mono-note { font-family: var(--mono); font-size: 0.75rem; color: var(--gray-2); letter-spacing: 0.08em; }
@media (max-width: 800px) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* Formular */
.form { display: grid; gap: 16px; }
.form label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); display: block; margin-bottom: 6px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); background: #fff;
  font-family: var(--font); font-size: 1rem; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form .two { grid-template-columns: 1fr; } }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--gray); }
.form .consent input { width: auto; margin-top: 3px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #9a9da3; border-top: 1px solid var(--line-dark); padding: 64px 0 32px; font-size: 0.92rem; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 44px; }
.site-footer h4 { color: #fff; font-size: 0.85rem; font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; font-weight: 500; }
.site-footer a:hover { color: #fff; }
.site-footer li { margin-bottom: 8px; }
.site-footer .motto { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-top: 14px; }
.site-footer .base { border-top: 1px solid var(--line-dark); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 0.8rem; }
@media (max-width: 900px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* Zweispalter Text + Bild */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split .content h2 { margin-bottom: 16px; }
.split .content p + p { margin-top: 12px; }
.split .content p { color: var(--gray); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Utility */
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 32px; } .mt-4 { margin-top: 48px; }
.center { text-align: center; }
.small { font-size: 0.85rem; color: var(--gray); }

/* ---------- Barrierefreiheit ---------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: #fff; padding: 10px 18px; font-weight: 600; }
.skip:focus { left: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav a[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* ---------- Reveal-Animation (nur mit JS, respektiert reduced motion) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Feinschliff Formular ---------- */
.form select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gray) 50%), linear-gradient(135deg, var(--gray) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}

/* ---------- Rechtsseiten / Fliesstext ---------- */
.prose { max-width: 760px; }
.prose h2 { margin: 40px 0 12px; font-size: 1.35rem; }
.prose h3 { margin: 24px 0 8px; }
.prose p, .prose li { color: #3c3e43; }
.prose ul { list-style: disc; padding-left: 22px; display: block; }
.prose ul li { margin-bottom: 6px; }
.prose .note { background: var(--concrete); border-left: 3px solid var(--accent); padding: 14px 18px; font-size: 0.9rem; color: var(--gray); margin: 22px 0; }

/* ---------- Statistik-Band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat { border-top: 2px solid var(--accent); padding-top: 14px; }
.stat b { display: block; font-size: 2rem; letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
.stat span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.section.dark .stat span { color: var(--gray-2); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Theme-spezifisch ---------- */
.accent { color: var(--accent); }
.form .msg-ok { background:#eef7ee; border:1px solid #bfe3bf; padding:14px 18px; margin-bottom:18px; }
.form .msg-err { background:#fdeeee; border:1px solid #f0c5c3; padding:14px 18px; margin-bottom:18px; }
.prose img { height:auto; }
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- Bild-Slots ---------- */
.ph-img { width: 100%; display: block; object-fit: cover; border: 1px solid var(--line); }
img.r16x9 { aspect-ratio: 16/9; } img.r4x3 { aspect-ratio: 4/3; } img.r1x1 { aspect-ratio: 1/1; } img.r3x4 { aspect-ratio: 3/4; }

/* ---------- Hausschnitt-Animation ---------- */
.haus-wrap { padding: 12px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.02); }
.haus { width: 100%; height: auto; display: block; }
.haus path { fill: none; stroke: #c9cbd0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.haus path.thin { stroke-width: 1.1; stroke: #6b6e74; }
.haus path.red { stroke: var(--accent); stroke-width: 1.4; }
.haus text { font-family: var(--mono); font-size: 11px; fill: #9a9da3; letter-spacing: 0.12em; }
.haus text.red { fill: var(--accent); }
.js .haus path {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: hausdraw 1.4s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.22s);
}
.js .haus text { opacity: 0; animation: hausfade .8s ease forwards; animation-delay: 3.4s; }
@keyframes hausdraw { to { stroke-dashoffset: 0; } }
@keyframes hausfade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .haus path { animation: none; stroke-dashoffset: 0; }
  .js .haus text { animation: none; opacity: 1; }
}

/* ============ Premium Motion (v19.3) ============ */
/* Floating Navigation */
.site-header { background: rgba(16,17,20,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .35s ease, box-shadow .35s ease; }
.site-header.scrolled { background: rgba(16,17,20,.94); box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 70; }

/* Cinematic Hero-Entrance */
.js .hero .eyebrow, .js .hero h1, .js .hero .lead, .js .hero .cta-row, .js .haus-wrap, .js .hero .ph-img {
  opacity: 0; transform: translateY(26px); animation: heroup .95s cubic-bezier(.2,.7,.2,1) forwards; }
.js .hero h1 { animation-delay: .12s; }
.js .hero .lead { animation-delay: .24s; }
.js .hero .cta-row { animation-delay: .38s; }
.js .haus-wrap, .js .hero .ph-img { animation-delay: .3s; }
@keyframes heroup { to { opacity: 1; transform: none; } }

/* Maus-Parallax Träger */
.haus-wrap { will-change: transform; transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* Mikrointeraktionen */
.btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .2s ease, border-color .2s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(217,43,37,.55); }
.btn-light:hover, .btn-ghost:hover, .btn-ghost-dark:hover { transform: translateY(-2px); }
.card { transition: border-color .3s ease, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(16,17,20,.28); }
.ref { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.ref:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(16,17,20,.25); }
.card .more::after { display: inline-block; transition: transform .25s ease; }
.card:hover .more::after { transform: translateX(5px); }

/* Eyebrow-Linie wächst beim Reveal */
.section-head .eyebrow::before { width: 0; transition: width .8s cubic-bezier(.2,.7,.2,1) .2s; }
.section-head.in .eyebrow::before, html:not(.js) .eyebrow::before { width: 34px; }

@media (prefers-reduced-motion: reduce) {
  .js .hero .eyebrow, .js .hero h1, .js .hero .lead, .js .hero .cta-row, .js .haus-wrap, .js .hero .ph-img { animation: none; opacity: 1; transform: none; }
  .btn, .card, .ref, .haus-wrap { transition: none; }
  .section-head .eyebrow::before { width: 34px; transition: none; }
}

/* ---------- Toolbox-Rechner (v19.5) ---------- */
.tool-out { border: 1px solid var(--line); background: var(--concrete); padding: 24px; }
.tool-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.93rem; }
.tool-table th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--ink); }
.tool-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.geak-scale { display: flex; gap: 4px; }
.geak-scale span { flex: 1; text-align: center; padding: 9px 0; font-weight: 700; font-family: var(--mono); background: #fff; border: 1px solid var(--line); color: var(--gray-2); }
.geak-scale span.on { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.12); }
.gantt { display: grid; gap: 10px; }
.gantt .glabel { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); display: block; margin-bottom: 3px; }
.gantt .gtrack { background: var(--concrete-2); height: 16px; }
.gantt .gbar { background: var(--ink); height: 16px; border-right: 3px solid var(--accent); min-width: 6px; }

/* ---------- Team kompakt (v19.6) ---------- */
.team-grid .team-card { padding: 18px; gap: 8px; }
.team-card img.team-foto, .team-card .ph { width: 100%; max-width: 180px; aspect-ratio: 1/1; object-fit: cover; border-radius: 2px; margin: 0 auto; }
.team-card { text-align: center; align-items: center; }
.team-card h3 { font-size: 1rem; }
.team-card p { font-size: 0.85rem; }


/* ---------- Digital-Band Startseite (v19.7) ---------- */
.digital-band { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--ink); color: #fff; padding: 22px 28px; border: 1px solid var(--ink);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.digital-band:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -24px rgba(16,17,20,.4); }
.digital-band .db-text { flex: 1; min-width: 260px; color: #b9bbc0; font-size: .97rem; }
.digital-band .db-text b { color: #fff; }
.digital-band .more { color: var(--accent); font-weight: 600; font-size: .93rem; }
.digital-band .more::after { content: " →"; }

/* ---------- PDF-/Druckbericht (v19.7) ---------- */
#print-report { display: none; }
@media print {
  .site-header, .site-footer, .page-hero, .section, .cta-band, .scroll-progress, #wpadminbar { display: none !important; }
  body { background: #fff !important; }
  #print-report { display: block; font-family: "Helvetica Neue", Arial, sans-serif; color: #101114; padding: 10mm 4mm; }
  #print-report .pr-head { display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 3px solid #101114; padding-bottom: 10px; margin-bottom: 22px; }
  #print-report .pr-logo { font-size: 24pt; font-weight: 800; }
  #print-report .pr-logo b { color: #d92b25; }
  #print-report .pr-meta { font-size: 8pt; color: #6b6e74; }
  #print-report .pr-h1 { font-weight: 800; font-size: 20pt; margin: 0 0 4px; }
  #print-report .pr-h2 { font-weight: 700; font-size: 12pt; margin: 20px 0 8px; }
  #print-report .pr-sub { color: #6b6e74; font-size: 9pt; margin-bottom: 18px; }
  #print-report .pr-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  #print-report .pr-table th, #print-report .pr-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #dedbd5; }
  #print-report .pr-table th { color: #6b6e74; font-weight: 600; width: 40%; }
  #print-report .pr-bkp-table thead th { border-bottom: 2px solid #101114; color: #101114; width: auto; }
  #print-report .pr-note { font-size: 8pt; color: #6b6e74; margin-top: 18px; line-height: 1.5; }
  #print-report .pr-foot { margin-top: 24px; border-top: 1px solid #dedbd5; padding-top: 8px;
    font-size: 8pt; color: #d92b25; letter-spacing: .08em; text-transform: uppercase; }
}

/* ============ 3D-Bauphasen-Animation (v19.8) ============ */
.h3d-scene { position: relative; height: 420px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.h3d-world { position: relative; width: 220px; height: 180px; transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(45deg); }
.h3d-scene.build .h3d-world { animation: h3dspin 46s linear infinite; }
@keyframes h3dspin { from { transform: rotateX(58deg) rotateZ(45deg); } to { transform: rotateX(58deg) rotateZ(405deg); } }

.h3d-ground { position: absolute; left: 50%; top: 50%; width: 320px; height: 280px;
  margin: -140px 0 0 -160px; border: 1px solid var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px; opacity: .6; }

/* Bausteine: Quader aus 3 sichtbaren Flächen */
.h3d-stage { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d;
  opacity: 0; transform: translateZ(calc(var(--z) + 150px));
  transition: opacity .5s ease, transform .9s cubic-bezier(.25,.9,.3,1);
  transition-delay: calc(var(--d) * .5s); }
.h3d-scene.build .h3d-stage { opacity: 1; transform: translateZ(var(--z)); }

.h3d-slab, .h3d-lvl { width: 160px; height: 120px; margin: -60px 0 0 -80px; }
.h3d-attika { width: 116px; height: 84px; margin: -42px 0 0 -58px; }
.h3d-stage i { position: absolute; display: block; backface-visibility: hidden; }

/* Bodenplatte (10px hoch) */
.h3d-slab .t { inset: 0; transform: translateZ(10px); background: #d9d6cf; border: 1px solid #b9b6ae; }
.h3d-slab .s { left: 0; top: 100%; width: 160px; height: 10px; transform-origin: top left; transform: rotateX(-90deg); background: #b9b6ae; }
.h3d-slab .e { left: 100%; top: 0; width: 120px; height: 10px; transform-origin: top left; transform: rotateZ(90deg) rotateX(-90deg); background: #a09d95; }

/* Geschosse (46px hoch) mit Fensterbändern */
.h3d-lvl .t { inset: 0; transform: translateZ(46px); background: #efece5; border: 1px solid #c9c5bc; }
.h3d-lvl .s { left: 0; top: 100%; width: 160px; height: 46px; transform-origin: top left; transform: rotateX(-90deg);
  background: linear-gradient(#cfccc4 0 8px, transparent 8px 38px, #cfccc4 38px),
    repeating-linear-gradient(90deg, #cfccc4 0 12px, #2e3138 12px 30px, #cfccc4 30px 42px); }
.h3d-lvl .e { left: 100%; top: 0; width: 120px; height: 46px; transform-origin: top left; transform: rotateZ(90deg) rotateX(-90deg);
  background: linear-gradient(#b3b0a8 0 8px, transparent 8px 38px, #b3b0a8 38px),
    repeating-linear-gradient(90deg, #b3b0a8 0 12px, #23262c 12px 28px, #b3b0a8 28px 40px); }

/* Attikageschoss (40px hoch) */
.h3d-attika .t { inset: 0; transform: translateZ(40px); background: #e5e2da; border: 1px solid #c9c5bc; }
.h3d-attika .s { left: 0; top: 100%; width: 116px; height: 40px; transform-origin: top left; transform: rotateX(-90deg);
  background: repeating-linear-gradient(90deg, #cfccc4 0 10px, #2e3138 10px 26px, #cfccc4 26px 36px); }
.h3d-attika .e { left: 100%; top: 0; width: 84px; height: 40px; transform-origin: top left; transform: rotateZ(90deg) rotateX(-90deg);
  background: repeating-linear-gradient(90deg, #b3b0a8 0 10px, #23262c 10px 24px, #b3b0a8 24px 34px); }

/* Photovoltaik-Panels */
.h3d-pv { width: 36px; height: 26px; margin-top: -30px;
  background: linear-gradient(135deg, #1d2836 0 60%, #27364a 60%);
  border: 1px solid #0f1620; border-top: 2px solid var(--accent); }

.h3d-caption { margin-top: 26px; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .16em; color: var(--gray); text-align: center; }

html:not(.js) .h3d-stage, .h3d-scene.noanim .h3d-stage { opacity: 1; transform: translateZ(var(--z)); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .h3d-stage { opacity: 1; transform: translateZ(var(--z)); transition: none; }
  .h3d-scene.build .h3d-world { animation: none; }
}
@media (max-width: 860px) { .h3d-scene { height: 360px; } }


/* 3D: Nord-/West-Waende (alle 4 Seiten sichtbar bei Rotation) */
.h3d-slab .n { left: 0; top: 0; width: 160px; height: 10px; transform-origin: top left; transform: rotateX(-90deg); background: #cfccc4; }
.h3d-slab .w { left: 0; top: 0; width: 120px; height: 10px; transform-origin: top left; transform: rotateZ(90deg) rotateX(-90deg); background: #aaa79f; }
.h3d-lvl .n { left: 0; top: 0; width: 160px; height: 46px; transform-origin: top left; transform: rotateX(-90deg);
  background: linear-gradient(#d5d2ca 0 8px, transparent 8px 38px, #d5d2ca 38px),
    repeating-linear-gradient(90deg, #d5d2ca 0 12px, #32353c 12px 30px, #d5d2ca 30px 42px); }
.h3d-lvl .w { left: 0; top: 0; width: 120px; height: 46px; transform-origin: top left; transform: rotateZ(90deg) rotateX(-90deg);
  background: linear-gradient(#aca9a1 0 8px, transparent 8px 38px, #aca9a1 38px),
    repeating-linear-gradient(90deg, #aca9a1 0 12px, #1f2228 12px 28px, #aca9a1 28px 40px); }
.h3d-attika .n { left: 0; top: 0; width: 116px; height: 40px; transform-origin: top left; transform: rotateX(-90deg);
  background: repeating-linear-gradient(90deg, #d5d2ca 0 10px, #32353c 10px 26px, #d5d2ca 26px 36px); }
.h3d-attika .w { left: 0; top: 0; width: 84px; height: 40px; transform-origin: top left; transform: rotateZ(90deg) rotateX(-90deg);
  background: repeating-linear-gradient(90deg, #aca9a1 0 10px, #1f2228 10px 24px, #aca9a1 24px 34px); }


/* ============ Hero-Animationen Unterseiten (v19.9) ============ */
.page-hero .wrap.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .page-hero .wrap.hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.hero-anim svg { width: 100%; height: auto; display: block; }
.hero-anim { border: 1px solid var(--line-dark); padding: 12px; background: rgba(255,255,255,.02); }

/* Zusatz-Effekte fuer Linien-Animationen */
.haus path.dashed { stroke-dasharray: 6 8 !important; }
.js .haus path.dashed { animation: none; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s ease; transition-delay: calc(var(--i,0) * .22s); }
.js .build-anim .haus path.dashed, .js .haus.in path.dashed { opacity: 1; }
.haus path.flow, .haus path.flowback { stroke-dasharray: 7 9 !important; stroke-dashoffset: 0 !important; animation: none; opacity: 0; transition: opacity .5s ease; transition-delay: calc(var(--i,0) * .22s); }
.js .haus.in path.flow { opacity: 1; animation: actaflow 1.1s linear infinite; }
.js .haus.in path.flowback { opacity: 1; animation: actaflow 1.4s linear infinite reverse; }
@keyframes actaflow { to { stroke-dashoffset: -32; } }
.haus circle { fill: none; stroke: #c9cbd0; stroke-width: 1.6; }
.haus circle.pt { fill: var(--accent); stroke: none; opacity: 0; }
.js .haus.in circle.pt { animation: ptin .5s ease forwards; animation-delay: calc(var(--i,0) * .14s); }
@keyframes ptin { to { opacity: .9; } }
.haus circle.dot { fill: var(--accent); stroke: none; opacity: 0; }
.js .haus.in circle.dot { animation: ptin .4s ease forwards; animation-delay: 2.4s; }
.haus circle.pulse { stroke: var(--accent); opacity: 0; }
.js .haus.in circle.pulse { animation: pulsering 2.2s ease-out infinite; animation-delay: 1s; }
.js .haus.in circle.pulse.p2 { animation-delay: 1.5s; }
.js .haus.in circle.pulse.p3 { animation-delay: 2s; }
@keyframes pulsering { 0% { opacity: 0; } 15% { opacity: .9; } 70% { opacity: 0; } 100% { opacity: 0; } }
.haus path.scanline { stroke-width: 1.2; }
.js .haus.in path.scanline { animation: hausdraw 1.2s ease forwards, scanmove 5s ease-in-out 1.6s infinite alternate; animation-delay: calc(var(--i,0) * .22s); }
@keyframes scanmove { from { transform: translateX(0); } to { transform: translateX(280px); } }
@media (prefers-reduced-motion: reduce) {
  .js .haus path.flow, .js .haus path.flowback, .js .haus circle.pt, .js .haus circle.dot, .js .haus path.dashed { opacity: 1; animation: none; }
  .js .haus circle.pulse { opacity: .6; animation: none; }
  .js .haus.in path.scanline { animation: none; }
}

/* Hero-Animationen der Unterseiten erst starten, wenn sichtbar (Klasse .in via JS) */
.js .hero-anim .haus path { animation-play-state: paused; }
.js .hero-anim .haus.in path { animation-play-state: running; }
.js .hero-anim .haus text { animation-play-state: paused; }
.js .hero-anim .haus.in text { animation-play-state: running; }


/* ============ 3D-Turmkran, korrekte Geometrie (v19.10) ============ */
/* Nutzt exakt die bewaehrten Wand-Rezepte des Gebaeudes:
   Wand entlang y-Kante: origin top left + rotateX(-90) | entlang x-Kante: rotateZ(90) rotateX(-90) */
.h3d-crane { width: 0; height: 0; margin: 0; }
.h3d-crane .cf { position: absolute; transform-origin: top left; backface-visibility: visible; }

/* Mast: 4 Gitterwaende, Querschnitt 14x14 bei (110,-95), Hoehe 240 */
.h3d-crane .m { width: 14px; height: 240px;
  background:
    linear-gradient(90deg, #9a9da3 0 1.8px, transparent 1.8px calc(100% - 1.8px), #9a9da3 calc(100% - 1.8px)),
    repeating-linear-gradient(55deg, transparent 0 6px, rgba(154,157,163,.8) 6px 7.4px),
    repeating-linear-gradient(-55deg, transparent 0 6px, rgba(154,157,163,.8) 6px 7.4px); }
.h3d-crane .mN { left: 110px; top: -95px; transform: rotateX(90deg); }
.h3d-crane .mS { left: 110px; top: -81px; transform: rotateX(90deg); }
.h3d-crane .mW { left: 110px; top: -95px; transform: rotateZ(90deg) rotateX(90deg); }
.h3d-crane .mE { left: 124px; top: -95px; transform: rotateZ(90deg) rotateX(90deg); }

/* Drehbuehne oben */
.h3d-crane .cap { left: 107px; top: -98px; width: 20px; height: 20px; transform: translateZ(240px); background: #6b6e74; }

/* Drehgruppe: Ausleger + Gegengewicht + Seil + Last (schwenkt um den Mast) */
.h3d-jib { position: absolute; left: 117px; top: -88px; width: 0; height: 0;
  transform-style: preserve-3d; transform: translateZ(240px) rotateZ(143deg); }
.h3d-scene.build .h3d-jib { animation: jibslew 16s ease-in-out infinite alternate; }
@keyframes jibslew {
  from { transform: translateZ(240px) rotateZ(118deg); }
  to   { transform: translateZ(240px) rotateZ(168deg); } }
.h3d-jib .arm { left: -22px; top: -5px; width: 172px; height: 10px;
  background:
    linear-gradient(#9a9da3 0 1.5px, transparent 1.5px calc(100% - 1.5px), #9a9da3 calc(100% - 1.5px)),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(154,157,163,.85) 7px 8.4px); }
.h3d-jib .cw { left: -36px; top: -8px; width: 16px; height: 16px; background: #4a4c52; }
.h3d-jib .rope { left: 132px; top: -0.8px; width: 1.6px; height: 30px; transform: rotateX(-90deg); background: #c9cbd0; }
.h3d-jib .last { left: 122px; top: -9px; width: 20px; height: 16px; transform: translateZ(-30px); background: var(--accent); opacity: .95; }

@media (prefers-reduced-motion: reduce) { .h3d-scene.build .h3d-jib { animation: none; } }