/* =========================================================================
   JUBA BAU — Website Design-System
   Gemeinsames Stylesheet für alle Seiten. Exakt nach Mockup.
   ========================================================================= */

/* ---------------- SCHRIFT: Inter lokal (kein Google Fonts) ----------------
   Die 6 woff2-Dateien gehören nach  assets/fonts/  (siehe fonts/LIESMICH.txt).
   Solange sie fehlen, greift automatisch die System-Schrift im Stack unten. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/inter-900.woff2') format('woff2');}

:root{
  --bg:#0c0c0e;
  --bg-2:#0f0f12;
  --panel:#161619;
  --panel-2:#1c1c21;
  --panel-3:#222228;
  --border:#27272d;
  --line:#34343c;
  --txt:#f5f5f7;
  --txt-mut:#9a9aa3;
  --txt-dim:#6c6c75;
  --orange:#f47a1f;
  --orange-2:#ff8c2e;
  --orange-soft:#f47a1f1a;
  --green:#4ade80;
  --cream:#f4f3f0;
  --sidebar-w:158px;
  --radius:16px;
  --radius-sm:11px;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;overscroll-behavior-x:none}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;position:relative;width:100%;max-width:100%;
}
/* Visuell verstecktes Feld (Honeypot) — OHNE horizontalen Überlauf zu erzeugen */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;left:0;top:0;opacity:0;pointer-events:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.muted{color:var(--txt-mut)}

/* ---------------- BUTTONS ---------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;
  padding:13px 21px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:.16s;
  font-family:inherit;white-space:nowrap}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-primary{background:var(--orange);color:#190f04}
.btn-primary:hover{background:var(--orange-2)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:#55555f;background:#ffffff0a}
.btn-dark{background:#111114;color:#fff}
.btn-dark:hover{background:#000}
.btn-light{background:#fff;color:#111}
.btn-sm{padding:10px 16px;font-size:13.5px}

/* ---------------- LAYOUT: SIDEBAR + MAIN ---------------- */
.layout{display:flex;min-height:100vh}
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:#09090b;
  border-right:1px solid var(--border);display:flex;flex-direction:column;padding:22px 16px;z-index:60;overflow-y:auto}
.sb-brand{display:flex;justify-content:center;align-items:center;margin:14px 0 24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.sb-brand .logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--orange),#c4560d);
  display:grid;place-items:center;color:#160d03;font-weight:900;font-size:15px;flex:0 0 auto}
.sb-brand b{font-size:14px;font-weight:800;letter-spacing:.02em;line-height:1.1}
.sb-brand small{display:block;font-size:7.5px;letter-spacing:.18em;color:var(--txt-mut);font-weight:600;margin-top:1px}
/* Marken-Logo (Bild) */
.sb-brand .brand-logo{width:100%;max-width:96px;height:auto;display:block;margin:0 auto}
.topbar .brand .brand-logo{height:30px;width:auto;display:block}
.footer-logo{width:110px;height:auto;margin-bottom:12px;opacity:.8}
.sb-nav{display:flex;flex-direction:column;gap:3px}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--txt-mut);
  font-size:13.5px;font-weight:500;transition:.14s}
.sb-nav a svg{width:17px;height:17px;flex:0 0 auto}
.sb-nav a:hover{color:var(--txt);background:#ffffff08}
.sb-nav a.active{color:var(--orange);background:var(--orange-soft)}
.sb-calc{margin-top:22px;background:var(--orange);border-radius:11px;padding:13px;color:#190f04}
.sb-calc b{font-size:13px;font-weight:800;display:block;line-height:1.2}
.sb-calc span{font-size:11px;font-weight:600;opacity:.8;display:flex;align-items:center;justify-content:space-between;margin-top:3px}
.sb-contact{display:block;margin-top:18px;border:1px solid var(--border);border-radius:10px;padding:11px 12px;transition:.14s}
.sb-contact:hover{border-color:#55555f;background:#ffffff06}
.sb-contact .lbl{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim);font-weight:700}
.sb-contact .lbl svg{width:12px;height:12px;flex:0 0 auto}
.sb-contact .num{display:block;font-size:13.5px;font-weight:700;color:var(--txt);white-space:nowrap;margin:5px 0 2px}
.sb-contact:hover .num{color:var(--orange)}
.sb-contact .hours{display:block;font-size:10.5px;color:var(--txt-dim)}
.sb-social{margin-top:auto;padding-top:20px;display:flex;gap:12px}
.sb-social a{color:var(--txt-dim);transition:.14s}
.sb-social a:hover{color:var(--orange)}
.sb-social svg{width:17px;height:17px}

.main{flex:1;margin-left:var(--sidebar-w);min-width:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 30px}

/* Mobile topbar (hidden on desktop) */
.topbar{display:none}

/* ---------------- HERO ---------------- */
.hero{position:relative;min-height:640px;display:flex;align-items:center;background:var(--bg);padding-bottom:120px;overflow:hidden;transition:min-height .3s ease}
/* Foto IMMER vollflächig im Hintergrund — der dunkle Links-Verlauf erzeugt die „Spalte links",
   das Gebäude bleibt rechts sichtbar. Keine Breiten-Sprünge mehr beim Verkleinern. */
.hero-photo{position:absolute;top:0;right:0;bottom:0;left:auto;width:62%;height:100%;object-fit:cover;object-position:center 35%;z-index:0;transition:object-position .35s ease,width .35s ease}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* links -> rechts: Inhalt auf voll dunkler Spalte, Foto klar abgesetzt rechts */
    linear-gradient(to right,
      var(--bg) 50%,
      rgba(12,12,14,.84) 59%,
      rgba(12,12,14,.5) 67%,
      rgba(12,12,14,.24) 77%,
      rgba(12,12,14,.07) 87%,
      rgba(12,12,14,0) 94%),
    /* unten -> oben: sanftes Auslaufen nach unten */
    linear-gradient(to top,
      var(--bg) 0%,
      rgba(12,12,14,.9) 7%,
      rgba(12,12,14,.45) 17%,
      rgba(12,12,14,.15) 30%,
      rgba(12,12,14,0) 44%)}
.hero-left{position:relative;z-index:2;padding:60px 46px;max-width:600px;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:48px;line-height:1.04;font-weight:800;letter-spacing:-.02em;margin:16px 0 18px}
.hero h1 .o{color:var(--orange)}
.hero .sub{color:var(--txt-mut);font-size:16px;max-width:430px;margin-bottom:26px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.hero-b2b{margin-top:16px;font-size:13.5px;color:var(--txt-mut)}
.hero-b2b a{color:var(--orange);font-weight:600;text-decoration:none;white-space:nowrap}
.hero-b2b a:hover{text-decoration:underline}
.lv-card{margin-top:18px}
.hero-trust{margin-top:36px}
.hero-trust .lbl{font-size:11px;letter-spacing:.06em;color:var(--txt-dim);font-weight:600;margin-bottom:13px}
.hero-trust .row{display:flex;gap:24px;flex-wrap:wrap;align-items:center;color:var(--txt-mut);font-weight:700;font-size:12px;letter-spacing:.03em}
.hero-trust .row span{display:flex;align-items:center;gap:7px;opacity:.85}
.hero-trust .row svg{width:15px;height:15px;color:var(--txt-mut)}
/* ---- Partner-Logo-Leiste (rollende Animation) ---- */
.partner-strip{margin-top:10px;max-width:480px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}
.partner-track{display:flex;align-items:center;gap:14px;width:max-content;animation:partnerScroll 26s linear infinite}
.partner-strip:hover .partner-track{animation-play-state:paused}
.partner-logo{flex:0 0 auto;height:58px;padding:9px 18px;background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center}
.partner-logo img{height:100%;width:auto;max-width:120px;object-fit:contain;display:block}
@keyframes partnerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.partner-track{animation:none}}

/* ---------------- SECTION ---------------- */
.section{padding:64px 0}
.section.tight{padding:48px 0}
.sec-head{margin-bottom:34px}
.sec-head.center{text-align:center}
.sec-head h2{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-top:9px}
.sec-head p{color:var(--txt-mut);margin-top:9px;max-width:560px;font-size:15.5px}
.sec-head.center p{margin-left:auto;margin-right:auto}
.sec-head .top-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}

/* ---------------- CALCULATOR (full styles in calculator.js scope, base here) ---------------- */
#rechner{background:transparent;border:none;padding-top:0;position:relative;z-index:3}
#rechner .container{margin-top:-150px}
#rechner .sec-head.center{display:none}      /* Card bringt eigene Überschrift mit */
@media(max-width:860px){
  .hero{padding-bottom:36px}
  #rechner .container{margin-top:0}
  #rechner .sec-head.center{display:block}
}

/* ---------------- STATS ---------------- */
.stats{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:48px 0}
.stat .ic{color:var(--orange);margin-bottom:13px}
.stat .ic svg{width:26px;height:26px}
.stat b{font-size:38px;font-weight:800;letter-spacing:-.02em;display:block;line-height:1}
.stat .t{font-weight:600;margin-top:9px;font-size:15px}
.stat .s{color:var(--txt-dim);font-size:12.5px;margin-top:2px}
/* zentrierte Kennzahlen (z. B. Über-uns) — Desktop & Mobil */
.stat-grid.center .stat{text-align:center}
.stat-grid.center .stat .ic{display:flex;justify-content:center}

/* ---------------- CARDS GRID (referenzen/projekte) ---------------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.rcard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.rcard:hover{border-color:#45454f;transform:translateY(-3px)}
.rcard[data-project]{cursor:pointer}
.rcard .img{height:200px;position:relative;background:linear-gradient(160deg,#2a2a32,#16161a)}
.rcard .img:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(132deg,#ffffff07 0 2px,transparent 2px 22px)}
.rcard .body{padding:18px;display:flex;flex-direction:column;flex:1}
.rcard .kicker{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--orange);text-transform:uppercase}
.rcard h4{font-size:16px;font-weight:700;margin:8px 0 5px}
.rcard p{color:var(--txt-mut);font-size:13px;margin-bottom:16px}
.rcard .arrow{margin-top:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--txt-mut);transition:.15s}
.rcard:hover .arrow{border-color:var(--orange);color:var(--orange)}
.rcard .arrow svg{width:15px;height:15px}

/* ---------------- VORTEILE ---------------- */
.adv-wrap{display:grid;grid-template-columns:.8fr 1.6fr;gap:30px;align-items:center}
.adv-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:32px}
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.adv-item .ic{width:42px;height:42px;border-radius:10px;background:var(--orange-soft);display:grid;place-items:center;margin-bottom:13px}
.adv-item .ic svg{width:20px;height:20px;color:var(--orange)}
.adv-item h4{font-size:15px;font-weight:700;margin-bottom:5px}
.adv-item p{color:var(--txt-mut);font-size:13px}

/* ---------------- CTA BAR ---------------- */
.cta-bar{background:var(--cream);color:#15151a}
.cta-bar .inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:38px 0}
.cta-bar h2{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.cta-bar .feats{display:flex;gap:30px;flex-wrap:wrap}
.cta-bar .feat{display:flex;align-items:center;gap:11px}
.cta-bar .feat svg{width:24px;height:24px;color:#15151a;flex:0 0 auto}
.cta-bar .feat b{font-size:13.5px;display:block}
.cta-bar .feat small{color:#666;font-size:12px}
/* zentrierte CTA-Zeile (z. B. Über-uns „Lernen wir uns kennen") */
.cta-bar.center .inner{flex-direction:column;justify-content:center;text-align:center;gap:18px}

/* ---------------- FOOTER ---------------- */
footer.site{background:#0a0a0c;border-top:1px solid var(--border);padding:34px 0 26px;color:var(--txt-dim);font-size:12.5px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
footer.site b{color:var(--txt-mut);display:block;margin-bottom:8px;font-size:11.5px;font-weight:600;letter-spacing:.04em}
footer.site .brandcol{color:var(--txt-dim)}
footer.site a{color:var(--txt-mut)}
footer.site .brandcol .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--orange),#c4560d);display:grid;place-items:center;color:#160d03;font-weight:900;margin-bottom:12px}
footer.site a:hover{color:var(--txt)}
footer.site .legal{margin-top:26px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--txt-dim)}
footer.site .legal a{margin-left:16px}

/* ---------------- PAGE HEADER (inner pages) ---------------- */
.page-head{padding:56px 0 40px;border-bottom:1px solid var(--border);
  background:radial-gradient(700px 320px at 80% -20%,#f47a1f1a,transparent 60%)}
.page-head h1{font-size:42px;font-weight:800;letter-spacing:-.02em;margin-top:12px}
.page-head p{color:var(--txt-mut);font-size:16px;margin-top:12px;max-width:600px}
.breadcrumb{font-size:12.5px;color:var(--txt-dim);font-weight:600}
.breadcrumb a:hover{color:var(--orange)}
/* Zurück-Button (zur vorherigen Menü-Rubrik) */
.backlink{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--txt-mut);border:1px solid var(--line);border-radius:30px;padding:7px 14px;margin-bottom:16px;transition:.15s}
.backlink:hover{border-color:var(--orange);color:var(--orange)}
.backlink svg{width:15px;height:15px}

/* ---------------- FAQ / RATGEBER (Accordion) ---------------- */
.faq-group + .faq-group{margin-top:44px}
.faq-q{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:border-color .15s}
.faq-q[open]{border-color:#3a3a44}
.faq-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 22px}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary h3{font-size:16.5px;font-weight:700;margin:0;line-height:1.35}
.faq-q summary:hover h3{color:var(--orange)}
.faq-plus{flex:0 0 auto;color:var(--orange);display:grid;place-items:center;transition:transform .2s}
.faq-plus svg{width:20px;height:20px}
.faq-q[open] .faq-plus{transform:rotate(180deg)}
.faq-a{padding:0 22px 20px}
.faq-a p{color:var(--txt-mut);font-size:14.5px;line-height:1.65;margin-bottom:10px}
.faq-a p:last-child{margin-bottom:0}
.faq-a a{color:var(--orange);font-weight:600}
.faq-a strong{color:var(--txt);font-weight:700}
.faq-inline-cta{margin-top:18px}

/* ---------------- RATGEBER / ARTIKEL ---------------- */
.article{max-width:760px}
.article .lead{font-size:18px;color:var(--txt);line-height:1.6;margin-bottom:8px}
.article-meta{color:var(--txt-dim);font-size:13px;margin:0 0 24px}
.article h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:38px 0 12px}
.article h3{font-size:18px;font-weight:700;margin:24px 0 8px}
.article p{color:var(--txt-mut);font-size:15.5px;line-height:1.7;margin-bottom:14px}
.article ul{list-style:none;margin:0 0 16px}
.article ul li{position:relative;padding:6px 0 6px 26px;color:var(--txt-mut);font-size:15px;line-height:1.55}
.article ul li:before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.article a{color:var(--orange);font-weight:600}
.article strong{color:var(--txt);font-weight:700}
.price-table{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:15px}
.price-table th,.price-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border)}
.price-table th{color:var(--txt-dim);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.price-table td:last-child,.price-table th:last-child{text-align:right;white-space:nowrap}
.price-table td:last-child{font-weight:700;color:var(--txt)}
.callout{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:12px;padding:16px 20px;margin:6px 0 22px}
.callout p{margin:0;font-size:14.5px}
/* Ratgeber-Übersicht: Artikel-Karten (nutzen .rcard-Struktur, hier nur Textkarte) */
.rg-card .body h4{font-size:17px}
.rg-card .body .kicker{margin-bottom:2px}

/* ---------------- CONTENT BLOCKS (inner pages) ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split .visual{height:300px;border-radius:var(--radius);background:linear-gradient(160deg,#2a2a32,#16161a);position:relative;overflow:hidden;border:1px solid var(--border)}
/* Hochformat-Bild (z. B. Über uns: Mitarbeiter komplett, Kopf bis Füße sichtbar) */
.split .visual.visual-full{height:auto;aspect-ratio:3/4}
.split .visual:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(132deg,#ffffff07 0 2px,transparent 2px 22px)}
.feature-list{list-style:none;margin-top:18px}
.feature-list li{display:flex;gap:11px;padding:9px 0;color:var(--txt-mut);font-size:14.5px}
.feature-list li svg{width:19px;height:19px;color:var(--orange);flex:0 0 auto;margin-top:2px}
.prose h3{font-size:21px;font-weight:700;margin:8px 0 10px}
.prose p{color:var(--txt-mut);margin-bottom:14px;font-size:15px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.contact-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:30px}
.info-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.info-row:last-child{border-bottom:none}
.info-row .ic{width:42px;height:42px;border-radius:10px;background:var(--orange-soft);display:grid;place-items:center;flex:0 0 auto}
.info-row .ic svg{width:19px;height:19px;color:var(--orange)}
.info-row .lbl{font-size:12px;color:var(--txt-dim);font-weight:600}
.info-row b{font-size:15.5px}
/* Anklickbare Info-Zeilen (Adresse/Telefon/E-Mail): ganze Zeile als Link */
a.info-row{cursor:pointer}
a.info-row .ic,a.info-row b{transition:.15s}
a.info-row:hover .ic{background:var(--orange)}
a.info-row:hover .ic svg{color:#190f04}
a.info-row:hover b{color:var(--orange)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field-full{margin-bottom:14px}
.inp{width:100%;background:var(--panel-2);border:1.5px solid var(--border);border-radius:10px;padding:13px 15px;
  color:var(--txt);font-family:inherit;font-size:15px}
.inp:focus{outline:none;border-color:var(--orange)}
label.fl{display:block;font-size:13px;font-weight:600;margin-bottom:7px}

/* job cards */
.job{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px;transition:.15s}
.job:hover{border-color:#45454f}
.job h4{font-size:18px;font-weight:700}
.job .tags{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.job .tag{font-size:12px;color:var(--txt-mut);border:1px solid var(--border);padding:5px 11px;border-radius:30px}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.value{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.value .ic{width:44px;height:44px;border-radius:10px;background:var(--orange-soft);display:grid;place-items:center;margin-bottom:15px}
.value .ic svg{width:21px;height:21px;color:var(--orange)}
.value h4{font-size:17px;font-weight:700;margin-bottom:7px}
.value p{color:var(--txt-mut);font-size:14px}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1024px){
  .hero{min-height:560px}
  .hero h1{font-size:38px}
  /* Zusätzlicher Abdunkler von unten, damit der Text auch bei schmalerem Hero
     (Foto vollflächig) klar lesbar bleibt — OHNE den Links-Verlauf zu ändern,
     daher kein sichtbarer „Sprung" der hellen/dunklen Seite beim Verkleinern. */
  .hero-shade{background:
    linear-gradient(to right,
      var(--bg) 44%,
      rgba(12,12,14,.86) 54%,
      rgba(12,12,14,.55) 64%,
      rgba(12,12,14,.26) 78%,
      rgba(12,12,14,.07) 90%,
      rgba(12,12,14,0) 100%),
    linear-gradient(to top,
      var(--bg) 0%,
      rgba(12,12,14,.55) 12%,
      rgba(12,12,14,.16) 30%,
      rgba(12,12,14,0) 46%)}
  .adv-wrap{grid-template-columns:1fr}
  .adv-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-100%);transition:transform .25s;width:240px}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .topbar{display:flex;align-items:center;justify-content:flex-start;position:sticky;top:0;z-index:55;
    background:#0c0c0eee;backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:12px 18px}
  .topbar .burger{order:-1}
  .topbar .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px}
  .topbar .brand .logo{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--orange),#c4560d);display:grid;place-items:center;color:#160d03;font-weight:900;font-size:13px}
  .topbar .brand b{font-size:15px;font-weight:800}
  .burger{background:none;border:1px solid var(--border);border-radius:8px;padding:8px;color:var(--txt);cursor:pointer;display:grid;place-items:center}
  .burger svg{width:20px;height:20px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .card-grid,.card-grid.cols-3{grid-template-columns:1fr 1fr}
  .adv-grid{grid-template-columns:1fr 1fr}
  .split,.contact-grid,.values-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .hero-left{padding:38px 24px}
  .container{padding:0 20px}
}
@media(max-width:680px){
  .section{padding:46px 0}
  .section.tight{padding:34px 0}
  .sec-head{margin-bottom:24px}
  .page-head{padding:40px 0 30px}
  .page-head h1{font-size:32px}
  .page-head p{font-size:15px}
  .hero-left{padding:34px 20px}
  .hero .sub{font-size:15px}
  .cta-bar .inner{padding:30px 0;gap:20px}
  .cta-bar h2{font-size:22px}
  .cta-bar .feats{gap:18px}
  .adv-panel{padding:24px}
  .contact-card{padding:22px}
  .job{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 22px}
  .stat-grid{gap:26px;padding:40px 0}
  .stat b{font-size:32px}
}
@media(max-width:520px){
  .card-grid,.card-grid.cols-3,.adv-grid{grid-template-columns:1fr}
  /* Kennzahlen bleiben als kompaktes 2×2-Raster (statt langer Einzelspalte) */
  .stat-grid{grid-template-columns:1fr 1fr;gap:24px 18px;padding:36px 0}
  .stat b{font-size:27px}
  .stat .t{font-size:14px}
  .hero h1{font-size:31px}
  .sec-head h2{font-size:26px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  /* Footer: eine zentrierte Spalte */
  footer.site .cols{grid-template-columns:1fr;gap:22px}
  footer.site .legal a{margin:0 8px}
}
@media(max-width:400px){
  .hero h1{font-size:27px}
  .page-head h1{font-size:27px}
  .sec-head h2{font-size:23px}
  .container{padding:0 16px}
  .topbar{padding:11px 14px}
}

/* ===== MOBIL (≤860): Inhalte durchgängig ZENTRIERT =====
   Auf dem Handy werden Überschriften UND der zugehörige Text mittig gesetzt
   (wie der „Prinzipien"-Block). Bewusst NICHT zentriert: der Hero (Bild-Bühne, Text
   unten linksbündig) sowie Rechtstexte (Impressum/Datenschutz nutzen `.container.prose`,
   nicht `.split` – daher hier gezielt nur `.split` zentriert, damit lange Texte lesbar
   linksbündig bleiben) und funktionale Blöcke (Formular, Kontakt-Zeilen). */
@media(max-width:860px){
  /* Hero: Foto als Hintergrund, Text unten linksbündig – kompakter (kein Leerraum oben) */
  .hero{display:flex;align-items:flex-end;min-height:560px;padding:0;overflow:hidden}
  /* Mobil: vollflächig – nur Breite (rechts verankert) + Ausschnitt ändern, damit der Übergang weich animiert (kein harter Sprung) */
  .hero-photo{width:100%;object-position:center 28%}
  .hero-shade{display:block;position:absolute;inset:0;z-index:1;background:
    linear-gradient(to top,
      var(--bg) 6%,
      rgba(12,12,14,.96) 32%,
      rgba(12,12,14,.82) 56%,
      rgba(12,12,14,.4) 80%,
      rgba(12,12,14,.06) 100%)}
  .hero-left{position:relative;z-index:2;max-width:none;width:100%;padding:0 20px 34px;
    text-shadow:0 1px 16px rgba(0,0,0,.45)}

  /* Seitenkopf zentriert (h1 + Beschreibung) */
  .page-head{text-align:center}
  .page-head p{margin-left:auto;margin-right:auto}

  /* Abschnitts-Kopf zentriert (Eyebrow + Überschrift + Button darunter) */
  .sec-head{text-align:center}
  .sec-head .top-row{flex-direction:column;align-items:center;gap:18px}
  .sec-head p{margin-left:auto;margin-right:auto}

  /* Fließtext-Sektionen mit Bild („Warum Juba Bau", Leistungen) zentriert.
     Aufzählungen bleiben als zentrierter Block, Text darin aber linksbündig lesbar. */
  .split{text-align:center}
  .split .feature-list{display:inline-block;text-align:left;margin-top:18px}

  /* Kennzahlen zentriert */
  .stat{text-align:center}
  .stat .ic{display:flex;justify-content:center}

  /* Vorteile + Werte-Karten zentriert */
  .adv-wrap{text-align:center}
  .adv-item{text-align:center}
  .adv-item .ic{margin-left:auto;margin-right:auto}
  .value{text-align:center}
  .value .ic{margin-left:auto;margin-right:auto}

  /* Referenz-/Projekt-Karten: Inhalt zentriert */
  .rcard .body{text-align:center}
  .rcard .arrow{margin-left:auto;margin-right:auto}

  /* CTA-Balken zentriert + gestapelt */
  .cta-bar .inner{flex-direction:column;align-items:center;text-align:center;gap:20px}
  .cta-bar .feats{flex-direction:column;align-items:center;gap:14px}
  .cta-bar .feat{justify-content:center}

  /* Footer zentriert */
  footer.site{text-align:center}
  footer.site .footer-logo{margin-left:auto;margin-right:auto}
  footer.site .legal{flex-direction:column;align-items:center;gap:10px}
}
/* ---------------- FOTOS / BILD-EINBAU ---------------- */
.rcard .img.photo:after{display:none}
.rcard .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}

/* Sanftes Einblenden von Bildern (kein hartes Pop-in beim Laden) */
.img-fade{opacity:0}
.img-fade.img-in{opacity:1;transition:opacity .55s ease}
.split .visual{position:relative}
.split .visual.photo:after{display:none}
.split .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* mobile overlay */
.sb-overlay{display:none;position:fixed;inset:0;background:#000a;z-index:58}
.sb-overlay.show{display:block}
@media(min-width:861px){.sb-overlay{display:none!important}}

/* ---------------- PROJEKT-GALERIE (Bilder-Ordner pro Projekt) ---------------- */
.gal{position:fixed;inset:0;z-index:200;background:#0b0b0df7;backdrop-filter:blur(8px);display:none;overflow-y:auto}
.gal.open{display:block}
.gal-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:18px 30px 14px;
  background:linear-gradient(to bottom,#0b0b0d 55%,rgba(11,11,13,0))}
.gal-back{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);
  color:var(--txt-mut);border-radius:30px;padding:9px 15px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;flex:0 0 auto}
.gal-back:hover{border-color:var(--orange);color:var(--orange)}
.gal-back svg{width:16px;height:16px}
.gal-meta{min-width:0}
.gal-meta .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.gal-meta h3{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin-top:2px}
.gal-grid{max-width:var(--maxw);margin:0 auto;padding:8px 30px 72px;column-width:300px;column-gap:14px}
.gal-grid figure{margin:0 0 14px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--panel);break-inside:avoid}
.gal-grid figure{cursor:zoom-in}
.gal-grid img{display:block;width:100%;height:auto}
body.gal-lock{overflow:hidden}
/* Lightbox – einzelnes Foto im Vollbild */
.gal-lb{position:fixed;inset:0;z-index:210;background:#070708f5;display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.gal-lb.open{display:flex}
.gal-lb img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.gal-lb-close{position:fixed;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#0b0b0dcc;color:var(--txt);display:grid;place-items:center;cursor:pointer;transition:.15s}
.gal-lb-close:hover{border-color:var(--orange);color:var(--orange)}
.gal-lb-close svg{width:20px;height:20px}
@media(max-width:680px){.gal-bar{padding:14px 18px 12px}.gal-grid{padding:6px 18px 60px;column-width:100%}.gal-meta h3{font-size:17px}.gal-lb{padding:16px}}