@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Condensed:wght@400;700&display=swap");:root{
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head:"Roboto Condensed", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --accent:#0A4189;
  --bg:#0f1115;
  --panel:#141825;
  --panel-2:#293133;
  --anthracite:#293133;
  --line:rgba(255,255,255,.10);
  --text:#e9eef7;
  --muted:rgba(233,238,247,.72);
  --border:rgba(255,255,255,.10);
  --shadow:0 22px 70px rgba(0,0,0,.45);

  --max:1200px;
  --container: var(--max);
  --sidebar-w:320px;

  --gap:24px;
  --section-y:88px;
  --radius:14px;

  --h1:clamp(38px,4.2vw,64px);
  --h2:clamp(26px,2.4vw,40px);
  --lead:18px;
  --ls-wide:.28em;
  --ls-mid:.18em;
}*{box-sizing:border-box}html,body{margin:0;padding:0}body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}img{max-width:100%;height:auto;display:block}.page{
  min-height:100vh;
}/* Desktop: fixed sidebar, content starts exactly after sidebar *//* unwrapped: base layout previously incorrectly gated behind min-width:981px */
.page{ padding-left: var(--sidebar-w); }.sidebar{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
  padding: 32px 22px;
  border-right: none;
  background: var(--panel);
}.brand{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 6px 0 22px;
}.brand img{width: 182px; height:auto}.nav{display:flex;flex-direction:column;gap:6px;margin-top:10px}.nav a{
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}.nav a[aria-current="page"]{
  background: rgba(10,65,137,.08);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(10,65,137,.18);
}.nav a:hover{background: rgba(0,0,0,.03); color: var(--text);}.main{min-width:0}.topbar{
  display:none;
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(20,24,35,.92);
  backdrop-filter: blur(10px);
  border-bottom: none;
}.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 16px;
}.topbar__logo img{width: 170px; height:auto}.burger{
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);
  background: var(--panel);
  cursor:pointer;
  font-size:18px;
}.drawer{position:fixed;inset:0;z-index:60;pointer-events:none}.drawer.is-open{pointer-events:auto}.drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s ease}.drawer.is-open .drawer__backdrop{opacity:1}.drawer__panel{position:absolute;top:0;left:0;height:100%;width:min(86vw,380px);
  background: var(--panel); box-shadow: var(--shadow);
  transform: translateX(-104%); transition: transform .22s ease;
  padding:18px;
}.drawer.is-open .drawer__panel{transform:translateX(0)}.drawer__nav{display:flex;flex-direction:column;gap:8px;margin-top:12px}.drawer__nav a{padding:14px 12px;border-radius:12px;background:rgba(0,0,0,.03);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12px;
}.container{max-width: var(--container); margin: 0 auto; padding: 0 28px}.hero{
  position:relative;
  min-height: 72vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: url("assets/img/hero.jpg") center/cover no-repeat;
}.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
}.hero__logo{position:relative; z-index:1; display:flex; align-items:center; justify-content:center;}.hero__logo img{width: min(320px, 70vw); height:auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));}.overlap{
  position:relative;
  margin-top: -70px;
  padding-bottom: 30px;
}.kicker{
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
}.h2{
  margin: 10px 0 0;
  font-size: clamp(22px, 1.9vw, 34px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .10em;
}.lead{margin: 12px 0 0; color: var(--muted); font-size: 15px; max-width: 70ch}.card{
  border-radius: 14px;
  border:1px solid var(--line);
  padding: 18px;
  background: var(--panel);
}.section{padding: 70px 0}.section__head{margin-bottom: 22px}.grid2{display:grid; gap:24px; grid-template-columns: 1.2fr .8fr}.btn{display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--accent);
  color:#fff;
  font-weight:900;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-size:12px;
  border:0;
  cursor:pointer;
}.footer{padding: 22px 0; border-top:none; background: var(--panel)}.footer__row{display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap}.footer__copy{color: var(--muted); font-size:12px}.footer__links a{color: var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em}.footer__links a:hover{color: var(--accent)}.copyright-icon{width:14px;height:14px;vertical-align:-2px;margin-right:6px}@keyframes marquee {from { transform: translateX(0); }to { transform: translateX(-50%); }}/* Lightbox */.lb{position:fixed;inset:0;z-index:2000;display:none}.lb.is-open{display:block}/* Cookie consent */.cc{border:1px solid rgba(255,255,255,.12);position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(980px, calc(100vw - 24px));z-index:1500;display:block;border-radius:16px;opacity:0;visibility:hidden;pointer-events:none}.cc.is-open{opacity:1;visibility:visible;pointer-events:auto}.cc__inner{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;padding:16px;border-radius:16px;background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow: var(--shadow);backdrop-filter: blur(10px)}.cc__title{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px}.cc__desc{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.45}.cc__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.cc__btn{border:0;cursor:pointer;padding:12px 14px;border-radius:999px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:12px;background: var(--accent);color:#fff}.cc__btn--ghost{background:rgba(0,0,0,.03);border:1px solid var(--line);color:rgba(233,238,247,.88)}@media (max-width:720px){.cc__inner{flex-direction:column;align-items:stretch}.cc__actions{justify-content:stretch}.cc__btn{width:100%}}/* Consent modal */.ccm{position:fixed;inset:0;z-index:1600;display:block;opacity:0;visibility:hidden;pointer-events:none}.ccm.is-open{opacity:1;visibility:visible;pointer-events:auto}.ccm__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}.ccm__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px, calc(100vw - 24px));
  background: var(--panel);border-radius:16px;border:1px solid var(--line);box-shadow: var(--shadow);overflow:hidden}

/* Mobile: Cookie-Consent Modal – insgesamt niedriger + sauber scrollbar (auch Landscape) */
@media (max-width: 520px){
  .ccm__panel{
    /* Luft oben/unten */
    top: calc(20px + env(safe-area-inset-top)) !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;

    /* horizontal zentriert, kein translateY mehr */
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* Container bewusst kleiner halten */
    max-height: 75% !important;       /* <— HIER stellst du die Gesamthöhe ein (z.B. 70% / 65%) */
    overflow: hidden !important;      /* Scroll nur innen */
  }

  /* Inhalt innerhalb des Modals scrollt */
  .ccm__panels{
    max-height: calc(100% - 220px) !important; /* Reserve für Tabs/Head/Footer */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Optional: etwas kompaktere Buttons/Abstände im Modal (nur wenn nötig) */
  .ccm__foot{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* Fallback: Browser ohne Safe-Area env() */
@supports not (padding: env(safe-area-inset-top)){
  @media (max-width: 520px){
    .ccm__panel{
      top: 20px !important;
      bottom: 20px !important;
    }
  }
}

/* Optional: dezente Scrollbar nur im Consent-Panel */
@media (max-width: 520px){
  .ccm__panels{
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
  }
  .ccm__panels::-webkit-scrollbar{ width: 8px; }
  .ccm__panels::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
  .ccm__panels::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 999px; }
}

.ccm__head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px;border-bottom:1px solid var(--line)}.ccm__title{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px}.ccm__x{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background: var(--panel);cursor:pointer}.ccm__row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.02)}.ccm__row + .ccm__row{margin-top:12px}.ccm__k{font-weight:900;letter-spacing:.10em;text-transform:uppercase;font-size:12px}.ccm__d{color:var(--muted);font-size:13px;margin-top:6px;max-width:52ch}.ccm__fixed{font-weight:900;color:var(--accent);letter-spacing:.10em;text-transform:uppercase;font-size:11px}.ccm__switch input{width:22px;height:22px;accent-color: var(--accent)}.ccm__foot{display:flex;gap:10px;justify-content:flex-end;padding:16px;border-top:1px solid var(--line)}.cc-fab{position:fixed;right:18px;bottom:18px;z-index:1550;display:none;
  width:56px;height:56px;border-radius:999px;border:1px solid var(--line);
  background: var(--panel);box-shadow: var(--shadow);cursor:pointer;
  font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:11px}.cc-fab.is-visible{display:inline-flex;align-items:center;justify-content:center}/* Calendar placeholder */@media (max-width: 980px){.page{grid-template-columns: 1fr}.sidebar{display:none}.topbar{display:block}.grid2{grid-template-columns:1fr}}/* Partner strip (logos slider) */@keyframes marquee {from { transform: translateX(0);}to { transform: translateX(-50%);}}@media (max-width: 520px){.h2{letter-spacing:.08em;}.kicker{letter-spacing:.18em;}.lead{font-size:16px;}.card{padding:18px;}p,li{word-break:break-word; hyphens:auto;}}/* Brand: Dammermann + kleiner Slogan *//* Mobile: Typo nicht überlaufen lassen */@media (max-width: 520px){.h1, h1{
    letter-spacing: .08em !important;
    word-break: break-word;
    hyphens: auto;
  }.lead{
    font-size: 16px;
    line-height: 1.55;
  }.btn, .btn-primary, .cc__btn{
    white-space: normal;
  }}
  .overlap{
  position: relative;
  margin-top: -120px;
  padding-bottom: 34px;
  z-index: 5;
}.overlap__card{
  background: #f4f4f4;
  border-radius: 16px;
  box-shadow: 0 40px 90px rgba(0,0,0,.35);
  padding: 71px;
}.overlap__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 56px;
  align-items:start;
}.overlap__kicker{
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(0,0,0,.60);
}.overlap__h{
  margin: 14px 0 0;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #111;
}.overlap__left p{
  margin: 14px 0 0;
  color: rgba(0,0,0,.72);
  font-size: 16px;
  line-height: 1.75;
}.overlap__left strong{ color:#111; }.overlap__cta{
  background: var(--panel);
  border-radius: 14px;
  padding: 28px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}.overlap__cta-title{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--accent);
}.overlap__cta-sub{
  margin-top: 10px;
  color: rgba(233,238,247,.78);
  font-size: 14px;
  line-height: 1.6;
  font-size: 14px;
  line-height: 1.6;
}.overlap__cta .btn{
  margin-top: 18px;
  display:inline-flex;
}/* mobile fit */@media (max-width: 980px){.overlap{ margin-top: -80px; }.overlap__card{ padding: 34px 24px; }.overlap__grid{ grid-template-columns: 1fr; gap: 26px; }}/* --- Gallery grid (thumbnails visible, Lightbox on click) --- */.ggrid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}.gitem{
  display:block;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow: 0 18px 55px rgba(0,0,0,.30);
}.gthumb{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}/* Mobile text-fit */.h1,.h2,.lead,p{overflow-wrap:anywhere;word-break:normal;hyphens:auto;}@media (max-width: 720px){.h2{letter-spacing:.10em;}}@media (max-width: 980px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (max-width: 520px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr));}}/* Overlap kicker centered */.overlap__kicker--center{
  text-align:left;
  display:block;
  margin-bottom: 18px;
}/* === v18 fixes: no horizontal scroll === */html, body { overflow-x: hidden; max-width: 100%; }body { touch-action: manipulation; }/* === custom scrollbar === */* { scrollbar-width: thin; scrollbar-color: rgba(10,65,137,.65) rgba(255,255,255,.06); }*::-webkit-scrollbar { width: 12px; height: 12px; }*::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }*::-webkit-scrollbar-thumb { background: rgba(10,65,137,.65); border-radius: 999px; border: 2px solid rgba(255,255,255,.06); }*::-webkit-scrollbar-thumb:hover { background: rgba(10,65,137,.9); }/* === page hero + overlap (Repair2-inspired, dark) === */.page-hero{
  position: relative;
  min-height: 72vh;
  display:flex;
  align-items:flex-end;
  padding: 110px 0 150px;
  overflow:hidden;
  background: #101216;
}.page-hero__bg{
  position:absolute; inset:0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  transform: translate3d(0,0,0);
  filter: saturate(.85) contrast(1.05);
}.page-hero__bg:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(16,18,22,1) 100%);
}.page-hero__inner{
  position: relative;
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}.page-hero__title{
  margin:0;
  font-size: 56px;
  line-height: 1.05;
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
}@media (max-width: 900px){.page-hero{ min-height: 72vh; padding: 92px 0 130px; }.page-hero__title{ font-size: 40px; letter-spacing: .04em; }}@media (max-width: 520px){.page-hero{ min-height: 72vh; padding: 82px 0 120px; }.page-hero__title{ font-size: 34px; letter-spacing: .03em; }}/* overlap card */.page-overlap{
  position: relative;
  margin-top: -90px;
  padding: 0 24px 30px;
  z-index: 5;
}.page-overlap__card{
  width: min(1130px, calc(100% - 0px));
  margin: 0 auto;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  padding: 57px 61px;
}@media (max-width: 720px){.page-overlap{ padding: 0 16px 24px; margin-top:-70px; }.page-overlap__card{ padding: 28px 22px; }}/* contact overlap layout (like repair2 screenshot) *//* =========================
   V21 Override: Repair2-dark consistency
   - Keine hellen Cards / keine hellen Textfarben auf Cards
   - Form-Controls wie Repair2 (dark + subtle border)
   - Icons: muted -> hover accent
   - Mobile: kein horizontaler Scroll
   - Custom Scrollbar
========================= */html, body{
  overflow-x: hidden !important;
}body{
  overscroll-behavior-x: none;
  touch-action: pan-y;
}/* Cards / Overlap (force dark) */.card,
.tile,
.overlap__card,
.overlap__box,
.page-overlap__card,
.contact-overlap__card,
.contact-card{
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}.overlap__card,
.overlap__box,
.page-overlap__card{
  box-shadow: 0 30px 80px rgba(0,0,0,.45) !important;
}/* Text inside cards *//* Links in dark sections *//* ===== Forms (Repair2-like on dark) ===== */input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: var(--text) !important;
  padding: 18px 18px !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}input::placeholder,
textarea::placeholder{
  color: rgba(233,238,247,.38) !important;
}input:focus,
textarea:focus,
select:focus{
  border-color: rgba(10,65,137,.70) !important;
  box-shadow: 0 0 0 3px rgba(10,65,137,.20) !important;
}/* Primary buttons: blue accent */.btn,
.btn-primary,
button[type="submit"],
input[type="submit"]{
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
}/* ===== Icons (Lucide-style) ===== */.icon,
svg.icon,
.lucide,
svg.lucide{
  width: 28px;
  height: 28px;
  stroke: rgba(233,238,247,.58);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s ease, opacity .18s ease, transform .18s ease;
  opacity: .95;
}a:hover .icon,
a:focus-visible .icon,
button:hover .icon,
button:focus-visible .icon,
.card:hover .icon,
.tile:hover .icon,
.contact-card:hover .icon,
.portfolio-item:hover .icon,
.partner-chip:hover .icon{
  stroke: var(--accent);
}a:hover .icon,
button:hover .icon,
.card:hover .icon,
.tile:hover .icon{
  transform: translateY(-1px);
}/* ===== Custom Scrollbar ===== */*{
  scrollbar-width: thin;
  scrollbar-color: rgba(10,65,137,.85) rgba(255,255,255,.06);
}::-webkit-scrollbar{ width: 10px; height:10px; }::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }::-webkit-scrollbar-thumb{
  background: rgba(10,65,137,.85);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.06);
}::-webkit-scrollbar-thumb:hover{ background: rgba(10,65,137,1); }/* ===== V22 FINAL OVERRIDES (Repair2 dark + Dammermann blue) ===== */:root{
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head:"Roboto Condensed", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --accent:#0A4189;
  --bg:#141825;
  --panel:#1c2230;
  --card:#293133;
  --card2:rgba(255,255,255,.04);
  --text:rgba(233,238,247,.92);
  --muted:rgba(233,238,247,.62);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.18);
}html,body{background:var(--bg)!important;color:var(--text)!important;overflow-x:hidden!important;}*{box-sizing:border-box;}/* Sidebar fixed desktop */@media (min-width: 981px){.sidebar{
    position:fixed!important;
    top:0;left:0;
    width:var(--sidebar-w);
    height:100vh;
    overflow:auto;
    background:var(--panel)!important;
    border-right:1px solid var(--line)!important;
    z-index:50;
  }.page{
    margin-left:var(--sidebar-w)!important;
  }}@media (max-width: 980px){.sidebar{display:none!important;}.page{margin-left:0!important;}}/* remove ANY white surfaces */.sidebar, .topbar, .drawer__panel, .page-overlap__card, .overlap__card, .overlap__box, .card, .tile, .contact-card, .cookie, .cookie-consent, .cookie-banner{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}.page-overlap__card, .overlap__card, .overlap__box{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))!important;
  border:1px solid var(--line)!important;
}.card, .tile, .contact-card{
  background:rgba(255,255,255,.04)!important;
  border:1px solid var(--line)!important;
}h1,h2,h3,h4,h5,h6{color:var(--text)!important;}p,li,small, .lead{color:var(--muted)!important;}a{color:var(--text);}a:hover{color:var(--accent);}/* Inputs like Repair2 */input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="time"],select,textarea{
  background:transparent!important;
  border:1px solid var(--line2)!important;
  color:var(--text)!important;
  padding:18px 18px!important;
  border-radius:0!important;
}input::placeholder,textarea::placeholder{color:rgba(233,238,247,.38)!important;}input:focus,textarea:focus,select:focus{
  border-color:rgba(10,65,137,.70)!important;
  box-shadow:0 0 0 3px rgba(10,65,137,.20)!important;
  outline:none!important;
}/* Buttons */.btn, button[type="submit"], input[type="submit"]{
  background:var(--accent)!important;
  color:#fff!important;
  border:0!important;
}/* Mini form in home overlap */.mini-form{display:grid;gap:10px;margin-top:10px;}.f-label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(233,238,247,.65);}.f-input{width:100%;}.f-textarea{resize:vertical;min-height:110px;}/* Jump links on Leistungen overlap */.jump-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}.jump-link{display:inline-flex;padding:8px 12px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;text-decoration:none;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(233,238,247,.82);}.jump-link:hover{border-color:rgba(10,65,137,.70);color:#fff;background:rgba(10,65,137,.18);}/* Partner strip removed, but keep marquee safe *//* Scroll to top button */.scrolltop{
  position:fixed;right:18px;bottom:18px;
  width:46px;height:46px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:rgba(233,238,247,.9);
  display:flex;align-items:center;justify-content:center;
  z-index:20;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.scrolltop.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .22s ease, transform .22s ease;
}
.scrolltop.is-show{display:flex;align-items:center;justify-content:center;}.scrolltop:hover{background:rgba(10,65,137,.22);border-color:rgba(10,65,137,.55);color:#fff;}/* Lucide-style icons muted -> hover accent */.icon,svg.icon,.lucide,svg.lucide{
  width:28px;height:28px;
  stroke:rgba(233,238,247,.58);
  fill:none;
  stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .18s ease,opacity .18s ease,transform .18s ease;
}a:hover .icon,a:focus-visible .icon,button:hover .icon,button:focus-visible .icon,
.card:hover .icon,.tile:hover .icon,.contact-card:hover .icon,.portfolio-item:hover .icon{
  stroke:var(--accent);
}/* ===== V22.1 PATCH (layout + consent + overlap blur + smooth scroll) ===== */html{ scroll-behavior: auto; }@media (min-width: 981px){.page{
    grid-template-columns: 1fr !important;
    margin-left: 0 !important;
    padding-left: var(--sidebar-w) !important;
  }.main{ width: 100% !important; }}/* Overlap backdrop blur (with fallback) */.page-overlap__card,
.overlap__card,
.overlap__box{
  background: rgba(20,24,35,.58) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){.page-overlap__card,
  .overlap__card,
  .overlap__box{
    background: rgba(20,24,35,.92) !important;
  }}/* Cookie consent dark */.cc{ background: transparent !important; }.cc__inner{
  background: rgba(20,24,35,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text) !important;
}.cc__title{ color: var(--text) !important; }.cc__desc{ color: var(--muted) !important; }.ccm__panel{
  background: rgba(20,24,35,.96) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}.ccm__k{ color: var(--text) !important; }.ccm__d{ color: var(--muted) !important; }.ccm__x{ background: rgba(255,255,255,.06) !important; color: var(--text) !important; border-color: rgba(255,255,255,.14) !important; }.cc-fab{
  background: rgba(20,24,35,.72) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}/* ===== v24: Home sections (How we work / USP / Leistungen Teaser) ===== */.hw{padding:64px 0 34px;}.hw__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px;}.hw-card{position:relative;border-radius:16px;border:0;background:rgba(255,255,255,.03);box-shadow:0 18px 55px rgba(0,0,0,.30);padding:18px;overflow:hidden;}.hw-card__num{position:absolute;right:14px;top:10px;font-size:64px;line-height:1;font-weight:900;letter-spacing:.02em;color:rgba(255,255,255,.07);user-select:none;}.hw-card__k{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:rgba(233,238,247,.85);}.hw-card__d{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.6;}.hw-card svg{margin-top:6px;width:28px;height:28px;}.usp{padding:34px 0 34px;}.usp__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:18px;}.usp-tile{border-radius:16px;border:0;background:rgba(255,255,255,.03);box-shadow:0 18px 55px rgba(0,0,0,.30);padding:16px;}.usp-tile__t{font-weight:900;letter-spacing:.10em;text-transform:uppercase;font-size:12px;color:rgba(233,238,247,.88);}.usp-tile__d{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.55;}.usp-tile svg{width:26px;height:26px;margin-bottom:8px;}.svc-teaser{padding:34px 0 74px;}.svc-teaser__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;}.svc-card{display:flex;gap:12px;align-items:flex-start;text-decoration:none;border-radius:16px;border:0;background:rgba(255,255,255,.03);box-shadow:0 18px 55px rgba(0,0,0,.30);padding:16px;color:inherit;}.svc-card__t{font-weight:900;letter-spacing:.10em;text-transform:uppercase;font-size:12px;color:rgba(233,238,247,.9);}.svc-card__d{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.55;}.svc-card svg{flex:0 0 auto;margin-top:2px;}@media (max-width: 980px){.hw__grid{grid-template-columns:1fr;gap:14px;}.usp__grid{grid-template-columns:repeat(2,minmax(0,1fr));}.svc-teaser__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (max-width: 520px){.svc-teaser__grid{grid-template-columns:1fr;}}/* ===== v24: Leistungen layout (Text links, Galerie rechts) ===== */.service{padding:44px 0;}.service + .service{border-top:1px solid rgba(255,255,255,.08);}.service__grid{display:grid;grid-template-columns: minmax(0, 420px) minmax(0, 1fr);gap:22px;align-items:start;}.service__text .h2{margin:0;}.service__text p{margin:12px 0 0;color:var(--muted);line-height:1.7;}.service__media{display:block;}.service__media .ggrid{margin-top:0;}@media (max-width: 980px){.service__grid{grid-template-columns:1fr;}}/* ===== v24: Gallery pagination ===== */.pager__btn.is-active{border-color:rgba(10,65,137,.90);background:rgba(10,65,137,.28);color:#fff;}/* ===== v24: Lightbox nav ===== *//* ===== v24: Prefill note spacing (no inline styles) ===== *//* ===== v24: Weekly calendar skeleton ===== */.content-img{margin-top:14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);width:100%;height:auto;display:block;}.mt-18{margin-top:18px;}/* ===== V24 PATCH (overlap fade + slogans + footer align + section backgrounds + icon fix) ===== *//* Overlap cards: ultra-subtle fade + top shadow only; border fades out after ~50% */.overlap__card,
.page-overlap__card{
  position: relative;
  border: 0 !important;
  background: linear-gradient(to bottom,
    rgba(20,24,35,.62) 0%,
    rgba(20,24,35,.60) 52%,
    rgba(20,24,35,.58) 100%) !important;
  /* only top shadow, no bottom */
  box-shadow: 0 -18px 44px rgba(0,0,0,.30) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  width: min(1120px, calc(100% - 0px)) !important;
  margin-left: auto;
  margin-right: auto;
}
/* end unwrap */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){.overlap__card,
  .page-overlap__card{
    background: rgba(20,24,35,.92) !important;
  }}/* Border that fades out from the middle down (mask-image). */.overlap__card::after,
.page-overlap__card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.14);
  pointer-events:none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 82%);
}/* Overlap accent text (fix dark headings/bolds) */.overlap__kicker,
.overlap__cta-title{
  color: var(--accent) !important;
}.overlap__left strong,
.page-overlap__card strong,
.page-overlap__card b{
  color: var(--accent);
}/* Two-line slogan styling */.overlap__kicker .slogan-main{
  display:block;
  color: var(--accent);
}.overlap__kicker .slogan-sub{
  display:block;
  margin-top: 6px;
  color: rgba(10,65,137,.72);
  letter-spacing: .18em;
}/* Desktop footer must start exactly after sidebar column */@media (min-width: 981px){.footer{ padding-left: var(--sidebar-w); }}/* Alternating section backgrounds (global)
   JS assigns .section--soft to every other content section on each page.
*/.section--soft{
  background: rgba(41,49,51,.42);
  border-top: none;
  border-bottom: none;
}.service.section--soft{
  background: rgba(41,49,51,.42);
}/* Start page: keep explicit mapping (hw + Leistungen-Teaser are soft) */.section.hw,
.section.svc-teaser{ background: rgba(41,49,51,.30); }/* Ensure Lucide sprite icons render correctly (stroke-based, no fills) */.icon{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}/* ============================
   Motion polish (v24.2)
   Subtle, premium hover / focus transitions
   ============================ */:where(a, button, .btn, .nav a, .sidebar a, .drawer a, .topbar a, .tile, .card, .contact-card, .gallery a, .pager a, .consent button, input, textarea, select){
  transition:
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    opacity .28s ease,
    transform .28s ease,
    filter .28s ease;
  will-change: transform, opacity;
}:where(a, button, .btn, .nav a, .sidebar a, .drawer a, .topbar a):focus-visible{
  outline: 2px solid rgba(10,65,137,.85);
  outline-offset: 3px;
}/* Buttons: slight scale + soft glow on hover */:where(button, .btn, .consent button){
  transform: translateZ(0);
}:where(button, .btn, .consent button):hover{
  transform: translateZ(0) scale(1.03);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(10,65,137,.22);
}:where(button, .btn, .consent button):active{
  transform: translateZ(0) scale(1.01);
}/* Cards / tiles / thumbs: gentle lift */:where(.tile, .card, .contact-card, .gallery a):hover{
  transform: translateZ(0) translateY(-2px);
  box-shadow:
    0 14px 40px rgba(0,0,0,.50),
    0 0 0 1px rgba(10,65,137,.18);
}/* Pagination: fade + slight lift *//* Links: smooth underline fade (if underline is used anywhere) */a{
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}@media (prefers-reduced-motion: reduce){:where(a, button, .btn, .nav a, .sidebar a, .drawer a, .topbar a, .tile, .card, .contact-card, .gallery a, .pager a, .consent button, input, textarea, select){
    transition: none !important;
    scroll-behavior: auto !important;
  }}/* ===== v24.6: Cookie Consent Tabs + Overlap-like Blur/Fallback ===== */.cc__inner,
.ccm__panel{
  position: relative;
  overflow: hidden;
}/* gradient transparency like overlap */.cc__inner{
  background: linear-gradient(180deg, rgba(20,24,35,.92) 0%, rgba(20,24,35,.92) 55%, rgba(20,24,35,.62) 100%) !important;
}.ccm__panel{
  background: linear-gradient(180deg, rgba(20,24,35,.96) 0%, rgba(20,24,35,.96) 55%, rgba(20,24,35,.66) 100%) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}.cc__inner::before,
.ccm__panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.14) 40%, rgba(255,255,255,0) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){.cc__inner{ background: rgba(20,24,35,.92) !important; }.cc__inner{ border: 1px solid rgba(255,255,255,.12) !important; }.ccm__panel{ border: 1px solid rgba(255,255,255,.12) !important; }.ccm__head{ border-bottom: 1px solid rgba(255,255,255,.08) !important; }.ccm__tabs{ border-bottom: 1px solid rgba(255,255,255,.08) !important; }.ccm__panel{ background: rgba(20,24,35,.96) !important; }.cc__inner::before,
  .ccm__panel::before{ background: rgba(255,255,255,.14); opacity:.55; }}/* Tabs */.ccm__tabs{
  display:flex;
  gap:10px;
  padding: 10px 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}.ccm__tab{
  appearance:none;
  border:0;
  background:transparent;
  color: rgba(233,238,247,.72);
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  padding: 12px 10px;
  border-bottom: 2px solid transparent;
  cursor:pointer;
  transition: color .22s ease, border-color .22s ease, transform .22s ease, opacity .22s ease;
}.ccm__tab:hover{ color: rgba(233,238,247,.92); transform: translateY(-1px); }.ccm__tab.is-active{
  color: var(--accent);
  border-bottom-color: var(--accent);
}.ccm__panels{ padding: 12px 16px 4px; }.ccm__view{ display:none; }.ccm__view.is-active{ display:block; }.ccm__view[hidden]{ display:none !important; }.ccm__h{
  font-weight:900;
  letter-spacing:.02em;
  font-size:20px;
  margin: 6px 0 10px;
}.ccm__p{
  color: var(--muted);
  font-size:14px;
  line-height:1.7;
  margin: 0 0 12px;
}.ccm__link{
  color: var(--accent);
  text-decoration:none;
}.ccm__link:hover{ text-decoration: underline; }.ccm__foot{
  flex-wrap: wrap;
  gap: 10px;
}@media (max-width: 520px){.ccm__foot{ flex-direction: column; align-items: stretch; }.ccm__foot .cc__btn{ width: 100%; }}/* Start page: match Obelisk→How we work spacing for Feature→Leistungen */.section.feature.feature--mirror{ padding-bottom: clamp(64px, 7vw, 118px) !important; }.section.feature.feature--mirror + .section.svc-teaser{ padding-top: clamp(78px, 7vw, 140px) !important; }/* Obelisk feature (first section after overlap) */.section--obelisk{ padding-bottom: clamp(64px, 7vw, 118px); background: rgba(41,49,51,.30) !important; }.section--obelisk + .section.hw{ padding-top: clamp(78px, 7vw, 140px) !important; background: rgba(41,49,51,.30) !important; }.obelisk{display:grid;grid-template-columns: 1.05fr .95fr;gap: clamp(18px, 4vw, 44px);align-items:center;}.obelisk__text .kicker{font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--accent);margin-bottom:10px;}.obelisk__text .h2{margin:0 0 12px 0;}.obelisk__text .lead{font-size:16px;line-height:1.65;color:var(--text);max-width:60ch;margin:0 0 12px 0;}.obelisk__text .muted{color:var(--muted);max-width:60ch;margin:0;}.obelisk__media{position:relative;min-height: clamp(260px, 32vw, 420px);}.obelisk__img{position:absolute;right:0;top:0;width: min(460px, 92%);height:auto;border-radius:18px;box-shadow: var(--shadow);transform-origin: 80% 20%;}.obelisk__img--back{opacity:.9;filter:saturate(1.02) contrast(1.02);transform: translate(0,0) rotate(2deg);}.obelisk__img--front{width: min(520px, 96%);top: 26%;right: 10%;transform: translate(0,0) rotate(-2deg);}@media (max-width: 980px){.obelisk{grid-template-columns: 1fr;gap:16px;}.obelisk__media{min-height: 300px;}.obelisk__img{left:50%;right:auto;transform: translateX(-50%) rotate(2deg);}.obelisk__img--front{top: 22%;transform: translateX(-50%) rotate(-2deg);}}/* Mirrored feature section (between Stärken and Leistungen on Startseite) */.feature__wrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
}.feature__media{position:relative;min-height: clamp(260px, 32vw, 420px);}.feature__img{position:absolute;left:0;top:0;width: min(460px, 92%);height:auto;border-radius:18px;box-shadow: var(--shadow);transform-origin: 20% 20%;}.feature__img--back{opacity:.92;filter:saturate(1.02) contrast(1.02);transform: translate(0,0) rotate(-2deg);}.feature__img--front{width: min(520px, 96%);top: 26%;left: 10%;transform: translate(0,0) rotate(2deg);}.feature__text .kicker{font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--accent);margin-bottom:10px;}.feature__text .h2{margin:0 0 12px 0;}.feature__text .lead{font-size:16px;line-height:1.65;color:var(--text);max-width:60ch;margin:0 0 12px 0;}.feature__text .muted{color:var(--muted);max-width:60ch;margin:0;}@media (max-width: 980px){.feature__wrap{grid-template-columns: 1fr; gap: 26px;}.feature__media{min-height: 300px;}.feature__img{left:50%;transform: translateX(-50%) rotate(-2deg);}.feature__img--front{top: 22%;transform: translateX(-50%) rotate(2deg);}}/* Typography system */h1,h2,h3,.h2,.hero__tag,.cc__title,.ccm__title,.ccm__h,.overlap__cta-title{font-family: var(--font-head);}.ccm__tab:hover,.ccm__tab:focus-visible{ background: transparent !important; }/* Legal pages overlap typography: smaller but still above body */.page-overlap--legal .h2{
  /* nur minimal größer als Fließtext – wirkt klauselorientiert */
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
  font-weight: 900;
}
.page-overlap--legal .lead{
  font-size: 14px !important;
  line-height: 1.7;
  max-width: 84ch;
}
.page-overlap--legal .kicker{
  font-size: 11px !important;
  letter-spacing: .16em !important;
  opacity: .9;
}/* ===== v24.9.1 Layout lock: content starts exactly after fixed sidebar ===== */@media (min-width: 981px){.page{ margin-left: 0 !important; padding-left: var(--sidebar-w) !important; }.footer{ margin-left: 0 !important; width: 100% !important; }}/* ===== v24.9.1 Motion: premium hover for all tiles/cards (no borders) ===== */:where(.hw-card,.usp-tile,.svc-card,.tile,.card,.contact-card,.jump-link,.pager__btn,.ccm__tab,.cc__btn){
  transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease, border-color .28s ease, color .28s ease, opacity .28s ease;
  will-change: transform;
}:where(.hw-card,.usp-tile,.svc-card,.tile,.card,.contact-card):hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
}:where(.svc-card):hover{ transform: translateY(-2px) scale(1.01); }:where(.pager__btn,.jump-link):hover{ transform: translateY(-1px); }:where(.cc__btn):hover{ transform: translateY(-1px) scale(1.02); }@media (prefers-reduced-motion: reduce){:where(.hw-card,.usp-tile,.svc-card,.tile,.card,.contact-card,.jump-link,.pager__btn,.ccm__tab,.cc__btn){ transition:none !important; transform:none !important; }}/* ===== v24.9.1 Consent polish: tabs look + panel padding ===== */.ccm__panel{ border-radius: 18px !important; overflow: hidden; }.ccm__head{ padding: 18px 18px !important; }.ccm__foot{ padding: 18px !important; }.ccm__tabs{ padding: 10px 18px 0 !important; gap: 14px !important; }.ccm__panels{ padding: 14px 18px 6px !important; }.ccm__tab{ padding: 12px 6px !important; opacity: .92; }.ccm__tab:hover{ opacity: 1; }/* ============================
   v24 Stabilisierungspass
   Ziel: keine Regressionen (Section BG, Hover, Footer/Sidebar, Overlap Breite)
   ============================ *//* 1) Layout: Desktop fixed sidebar + pixelgenauer Content-Start */@media (min-width: 981px){.page{ margin-left: 0 !important; padding-left: var(--sidebar-w) !important; }.sidebar{ position: fixed !important; left: 0 !important; top: 0 !important; height: 100vh !important; }.footer{ padding-left: var(--sidebar-w) !important; margin-left: 0 !important; width: 100% !important; }}@media (max-width: 980px){.footer{ margin-left: 0 !important; width: 100% !important; padding-left: 0 !important; }}/* 2) Overlap: gleiche Breite auf allen Seiten (Vorgabe Startseite) */.overlap__card,
.page-overlap__card{
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 56px !important;
}@media (max-width: 980px){.overlap__card,
  .page-overlap__card{ padding: 34px 24px !important; }}/* 3) Overlap Border-Fade: ab ~50% ausblenden – ohne sichtbare Kante (kein Shadow unten) */.overlap__card,
.page-overlap__card{
  box-shadow: 0 -26px 64px rgba(0,0,0,.34) !important; /* top only */
}.overlap__card::after,
.page-overlap__card::after{
  /* zuverlässiger als mask-image: Gradient-Border (oben sichtbar, unten transparent) */
  border: 0 !important;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.14) 40%,
    rgba(255,255,255,0) 82%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}/* 4) Section Backgrounds: globaler Rhythmus bleibt sichtbar */.section--soft{
  background: rgba(41,49,51,.30) !important;
}/* 5) Hover/Motion: sicherstellen, dass Cards/Boxes NICHT durch spätere Overrides „tot“ werden */:where(.hw-card,.usp-tile,.svc-card,.tile,.card,.contact-card,.jump-link,.pager__btn,.ccm__tab,.cc__btn){
  transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease, color .28s ease, opacity .28s ease !important;
}:where(.hw-card,.usp-tile,.svc-card,.tile,.card,.contact-card):hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.38) !important;
}:where(.svc-card):hover{ transform: translateY(-2px) scale(1.01) !important; }:where(.pager__btn,.jump-link):hover{ transform: translateY(-1px) !important; }:where(.cc__btn):hover{ transform: translateY(-1px) scale(1.02) !important; }/* Boxen ohne Border (How we work / Stärken / Leistungen-Teaser) */:where(.hw-card,.usp-tile,.svc-card){
  border: 0 !important;
}/* 6) Consent Tabs: Premium-Typo + Spacing, kein Hover-Hintergrund */.ccm__panel{ padding: 0 !important; }.ccm__tabs{ padding: 10px 18px 0 !important; }.ccm__panels{ padding: 14px 18px 10px !important; }.ccm__tab{ background: transparent !important; }.ccm__tab:hover{ background: transparent !important; }/* Consent: kein Border-Fade wie beim Overlap (clean/solid) */.cc__inner::before,
.ccm__panel::before{
  background: rgba(255,255,255,.14) !important;
}/* === v24_FINAL_5: Service-Teaser Cards Background Image + Vignette (Startseite) === */.svc-teaser__grid .svc-card{position:relative;overflow:hidden;background:rgba(255,255,255,.03);}.svc-teaser__grid .svc-card::before{
  content:"";position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.30;filter:saturate(.95) contrast(1.05);
  transition:opacity .35s ease, transform .55s ease;
  transform:scale(1.02);
}
/* Startseite Leistungen-Kartenbilder: volle Bilder (keine Thumbnails), bewusst höher auflösende Auswahl */
.svc-card[data-bg="rund-ums-haus"]::before{background-image:url("probilder/rundumshaus/images/P8060753.jpg");}
.svc-card[data-bg="vordacher"]::before{background-image:url("probilder/hausvordach/images/ueberdachung.jpg");}
.svc-card[data-bg="treppen"]::before{background-image:url("probilder/treppengel/images/Dammermann219.jpg");}
.svc-card[data-bg="toranlagen"]::before{background-image:url("probilder/toranlagen/images/tor02.jpg");}
.svc-card[data-bg="teichanlagen"]::before{background-image:url("probilder/wasserbecken/images/beckenrundgross.jpg");}
.svc-card[data-bg="sonstiges"]::before{background-image:url("probilder/sonstiges/olghamm/images/PB090781.jpg");}
.svc-teaser__grid .svc-card::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 72%,
    rgba(14,18,26,.92) 100%);
  opacity:1;
}.svc-teaser__grid .svc-card > *{position:relative;z-index:2;}.svc-teaser__grid .svc-card:hover::before{opacity:.40;transform:scale(1.03);}/* Background bindings (no inline styles) */.svc-teaser__grid .svc-teaser__grid .svc-teaser__grid .svc-teaser__grid .svc-teaser__grid .svc-teaser__grid /* Mobile: keep readability */@media (max-width: 980px){.svc-teaser__grid .svc-card::before{opacity:.22;}}

/* ============================
   v39 – Verfassung Overrides
   (Deterministisch, ohne Redesign)
============================ */

/* IX-3: KEIN JS/CSS Smooth-Scrolling */
html{ scroll-behavior: auto !important; }

/* V: SECTION-SPACING – identisch für alle Hauptsektionen */
.section,
.service{
  padding: 70px 0 !important;
}
.section.hw,
.section.usp,
.section.svc-teaser,
.section.section--obelisk,
.section.feature,
.section.feature--mirror{
  padding: 70px 0 !important;
}

/* VI: OVERLAP – Breite wie Content-Container, Shadow vollständig sichtbar, kein Durchscheinen unten */
.overlap__card,
.page-overlap__card{
  max-width: var(--container) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: var(--panel-2) !important;
  box-shadow: var(--shadow) !important;
}
.page-overlap{
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.overlap__card::after,
.page-overlap__card::after{
  /* keine Border-/Mask-Logik, die Bottom-Shadow optisch „abschneidet“ */
  content: none !important;
}

/* VII: NAV – exakt EIN Active-State; Hover = Active-State */
.nav a,
.drawer__nav a{
  background: transparent !important;
}
.nav a[aria-current="page"],
.nav a:hover,
.drawer__nav a[aria-current="page"],
.drawer__nav a:hover{
  background: rgba(10,65,137,.08) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgba(10,65,137,.18) !important;
}

/* VII: Sidebar-Logo = Basis + 15px (Basis = Topbar 170px) */
.brand img{ width: 185px !important; }

/* VIII: BUTTON-SYSTEM – einheitliche Hover/Active/Focus-States */
:where(
  button,
  .btn,
  .cc__btn,
  .ccm__x,
  .burger,
  .scrolltop,
  .cc-fab,
  .lb__close,
  .lb__nav,
  .pager__btn
){
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease;
}
:where(
  button,
  .btn,
  .cc__btn,
  .ccm__x,
  .burger,
  .scrolltop,
  .cc-fab,
  .lb__close,
  .lb__nav,
  .pager__btn
):hover{
  transform: translateY(-1px);
}
:where(
  button,
  .btn,
  .cc__btn,
  .ccm__x,
  .burger,
  .scrolltop,
  .cc-fab,
  .lb__close,
  .lb__nav,
  .pager__btn
):active{
  transform: translateY(0px) scale(.98);
}
:where(
  button,
  .btn,
  .cc__btn,
  .ccm__x,
  .burger,
  .scrolltop,
  .cc-fab,
  .lb__close,
  .lb__nav,
  .pager__btn
):focus-visible{
  outline: 2px solid rgba(10,65,137,.85) !important;
  outline-offset: 3px !important;
}

/* IX-1: COOKIE-FAB – Icon-only, Kreis, exakt wie Scroll-to-Top (Size/Pos/Hover/Active) */
.cc-fab{
  right: 18px !important;
  bottom: 18px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
}
.cc-fab .cc-fab__icon{
  width: 22px;
  height: 22px;
  display:block;
}
.scrolltop,
.cc-fab{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--line) !important;
  color: rgba(233,238,247,.9) !important;
}
.scrolltop:hover,
.cc-fab:hover{
  background: rgba(10,65,137,.22) !important;
  border-color: rgba(10,65,137,.55) !important;
  color: #fff !important;
}

/* IX-2: COOKIE-MODAL – z-index über ALLEN Overlays */
.ccm{ z-index: 6000 !important; }
.cc{ z-index: 5900 !important; }
.cc-fab{ z-index: 5950 !important; }
.lb{ z-index: 5000 !important; }

/* X: GALERIE – Hover: nur Helligkeit, keine Positionsänderung */
.gthumb{
  transition: filter .14s ease;
}
.gitem:hover .gthumb{
  filter: brightness(1.12);
}

/* X: LIGHTBOX – kein Hover-Helligkeitseffekt; Pfeile halb außerhalb, symmetrisch; identische Button-Logik */
.lb__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
}
.lb__wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(var(--container), calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.lb__frame{
  position:relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,24,35,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.lb__img{
  width:100%;
  height:auto;
  display:block;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  filter: none !important;
}
.lb__img:hover{ filter: none !important; }

.lb__close{
  align-self:flex-end;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(20,24,35,.92);
  color: rgba(233,238,247,.92);
  cursor:pointer;
}
.lb__nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(20,24,35,.92);
  color: rgba(233,238,247,.92);
  cursor:pointer;
}
.lb__nav--prev{ left: -23px; }
.lb__nav--next{ right: -23px; }

.lb__meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  padding: 0 2px;
}
.lb__cap{ color: rgba(233,238,247,.88); font-size: 14px; line-height:1.5; }
.lb__count{ color: rgba(233,238,247,.62); font-size: 12px; letter-spacing:.08em; text-transform:uppercase; }

/* XI: FOOTER – Typografie nicht bold */
.footer__links a{ font-weight: 400 !important; }


/* ===== v39.1 TODO PATCH (Startseite + Overlaps + Galerie + UI-Offsets) ===== */

/* 1) Startseite: Material + Leistungen zusammengeführt */
.material-services__spacer{
  height: clamp(32px, 4vw, 64px);
}
.section__head.section__head--right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
}

/* 2) Overlaps: wie Cookie-Consent (Blur + Border + Bottom-Fade) */
:root{
  --overlap-bg-rgb: 20,24,35; /* entspricht #141825 (var(--panel)) */
  --ui-bottom-offset: 96px;
  --ui-stack-gap: 64px;
}
.overlap__card,
.page-overlap__card{
  background: rgba(var(--overlap-bg-rgb), .92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: var(--shadow) !important;
  position: relative;
  text-align: left;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .overlap__card,
  .page-overlap__card{
    background: rgba(var(--overlap-bg-rgb), .72) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
.overlap__card::after,
.page-overlap__card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  height: 72px !important;
  border: none !important;
  background: linear-gradient(to bottom,
    rgba(var(--overlap-bg-rgb), .92) 0%,
    rgba(var(--overlap-bg-rgb), 0) 100%
  ) !important;
  pointer-events:none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* 3) Startseite: Stärken – 4 nebeneinander */
@media (min-width: 981px){
  .usp__grid{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
}

/* Über uns: USP-Karten im Overlap sauber zentrieren (Grid bleibt linksbündig in den Tiles) */
.page-overlap__card .usp__grid{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* 4/5) Eine Box statt zwei Boxes – Layout bleibt, aber nur 1 Card-Hintergrund */
.card--merged{
  padding: 22px;
}
.card--merged .grid2--merged{
  gap: 24px;
}
@media (max-width: 980px){
  .card--merged .grid2--merged{ grid-template-columns: 1fr; }
}

/* 6) Leistungen: Galerie Hover-Zoom (nur Thumbnails) */
.gthumb{
  transition: filter .14s ease, transform .18s ease !important;
  transform: scale(1);
}
.gitem:hover .gthumb{
  transform: scale(1.06);
}

/* 6) Lightbox: Pfeile ragen raus + Hintergrund blurry + Scroll blocken */
.lb__backdrop{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lb__frame{
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.lb__media{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(var(--overlap-bg-rgb), .92);
  box-shadow: var(--shadow);
  overflow: hidden;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .lb__media{
    background: rgba(var(--overlap-bg-rgb), .92);
  }
}
html.lb-open,
body.lb-open{
  overflow: hidden !important;
}

/* 7) Scrolltop + Cookie-FAB stapeln & nach oben (Footer frei) */
.cc{
  bottom: calc(var(--ui-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
}
.cc-fab{
  bottom: calc(var(--ui-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
}
.scrolltop{
  bottom: calc(var(--ui-bottom-offset) + var(--ui-stack-gap) + env(safe-area-inset-bottom, 0px)) !important;
}
.ccm__panel{
  top: calc(50% - 40px) !important;
}


/* ============================
   v39 TODO-PATCH 01 (2025-12)
   ============================ */

/* (1) Overlap fade: nur Container+Border, Content bleibt 100% opak */
.overlap__card,
.page-overlap__card{
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
}
.overlap__card::before,
.page-overlap__card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.11) 0%,
    rgba(255,255,255,.09) 40%,
    rgba(255,255,255,0) 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index:0;
  pointer-events:none;
}
.overlap__card::after,
.page-overlap__card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.14) 40%,
    rgba(255,255,255,0) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
  z-index:1;
  pointer-events:none;
}
.overlap__card > *,
.page-overlap__card > *{
  position: relative;
  z-index:2;
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .overlap__card::before,
  .page-overlap__card::before{
    background: linear-gradient(
      180deg,
      rgba(20,24,35,.92) 0%,
      rgba(20,24,35,.88) 58%,
      rgba(20,24,35,0) 100%
    );
  }
  .overlap__card::after,
  .page-overlap__card::after{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.12) 55%,
      rgba(255,255,255,0) 100%
    );
  }
}

/* (6) Page-Overlap Breite an Content-Container koppeln (außer Startseite ist bereits container-basiert) */
.page-overlap__card{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* (2) Startseite: gleiche, größere Abstände zwischen (Wahrzeichen ↔ How we work) und (Material ↔ Leistungen) */
:root{
  --home-gap-hero: clamp(96px, 8vw, 160px);
}
.section--obelisk{
  padding-bottom: var(--home-gap-hero) !important;
}
.section--obelisk + .section.hw{
  padding-top: var(--home-gap-hero) !important;
}
.material-services__spacer{
  height: var(--home-gap-hero) !important;
}

/* (3) Startseite: Vignette bei Leistungen-Teaser entfernen */
.svc-teaser__grid .svc-card::after{
  content: none !important;
}

/* (4) Scroll-to-Top: Fade-In/Fade-Out (statt display toggling) */
.scrolltop{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  opacity:0;
  pointer-events:none;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.scrolltop.is-show{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

/* (5) Leistungen: Pagination Buttons wie das Button-System (ohne extra Styling-Fremdoptik) */
.pager{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 14px;
}
.pager__btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,247,.88);
  cursor:pointer;
  padding: 12px 14px;
  border-radius: 999px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}
.pager__btn:hover{
  border-color: rgba(10,65,137,.55);
  background: rgba(10,65,137,.18);
  color:#fff;
}

/* (8) Über uns: Bild oben links, 180px, Text kann später umlaufen */
.about-card{
  padding: 18px;
}
.about__photo{
  width: 180px;
  height: auto;
  float: left;
  margin: 0 16px 12px 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Float-Clear, falls später Text unterhalb folgt */
.about-card::after{
  content:"";
  display:block;
  clear: both;
}


/* =========================
   TODO3 PATCH (regen)
   - Overlap: visible light border + bottom fade on container/border only, top shadow only
   - Home Feature images smaller (Material section)
   - Sidebar logo container equals nav hover area
   - Page hero parallax without zoom (no scale)
========================= */

/* Sidebar logo should occupy same pill area as nav links */
.brand{ padding: 0 !important; }
.brand > a{ display:block; width:100%; padding: 12px 14px; border-radius: 10px; }
.brand > a:hover{ background: rgba(0,0,0,.03); }
.brand img{ width: 100% !important; max-width: 185px !important; height:auto; }

/* Page hero: no default scale; allow fixed-like feel via background positioning only */
.page-hero__bg{ transform: translate3d(0,0,0) !important; }

/* Overlap cards: background + border fade at bottom, content stays opaque */
.overlap__card,
.page-overlap__card,
.overlap__box{
  position: relative;
  background: transparent !important;
  border: 0 !important;
  /* top shadow only */
  box-shadow: 0 -18px 44px rgba(0,0,0,.32) !important;
  overflow: hidden;
}

/* Background (with blur) that fades out to transparent at the bottom */
.overlap__card::before,
.page-overlap__card::before,
.overlap__box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(to bottom,
    rgba(20,24,35,.72) 0%,
    rgba(20,24,35,.68) 55%,
    rgba(20,24,35,0) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 0;
}

/* Border with bottom fade (only container/border fades, not content) */
.overlap__card::after,
.page-overlap__card::after,
.overlap__box::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.16);
  pointer-events:none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  z-index: 1;
}

/* Keep real content above the pseudo-layers */
.overlap__card > *,
.page-overlap__card > *,
.overlap__box > *{
  position: relative;
  z-index: 2;
}

/* Fallback when blur unsupported */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .overlap__card::before,
  .page-overlap__card::before,
  .overlap__box::before{
    background: linear-gradient(to bottom,
      rgba(20,24,35,.92) 0%,
      rgba(20,24,35,.88) 55%,
      rgba(20,24,35,0) 100%);
  }
}

/* Startseite: Material-Bilder kleiner, damit sie nicht in Leistungen-Karten ragen */
.feature__media{ min-height: clamp(220px, 26vw, 340px) !important; }
.feature__img{ width: min(360px, 88%) !important; }
.feature__img--front{ width: min(410px, 92%) !important; top: 18% !important; }


/* ============================
   
/* === v39_TODO6_FIX: Hero separator + Overlap border/blur fixes + Lightbox stability + Cookie border thickness === */

/* 1) Hero separator line between hero and first overlap section (incl. Startseite) */
.hero,
.page-hero{
  position: relative;
}
.hero::after,
.page-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: rgba(255,255,255,.18);
  pointer-events:none;
  z-index:5;
}

/* 2) Overlap cards: ensure pseudo borders render (needs positioning), slight transparency like cookie banner */
.overlap__card,
.page-overlap__card{
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  overflow: hidden; /* required for bottom-fade border mask */
  /* Shadow only towards TOP: push further away from bottom */
  box-shadow:
    0 -120px 140px rgba(0,0,0,.34),
    0 -20px 60px rgba(0,0,0,.22) !important;
}

/* Keep overlap background tint (blur panel) on ::before, but do NOT affect content opacity */
.overlap__card::before,
.page-overlap__card::before{
  background: linear-gradient(
    180deg,
    rgba(20,24,35,.76) 0%,
    rgba(20,24,35,.66) 58%,
    rgba(20,24,35,0) 100%
  ) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 3) Ensure overlap border fades out at bottom (container+border only) */
.overlap__card::after,
.page-overlap__card::after{
  /* keep the gradient border, but make sure it actually fades out */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,0) 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,0) 100%) !important;
}

/* 4+5) Cookie banner border must read as 1px: remove decorative pseudo-border */
.cc__inner{
  border: 1px solid var(--line) !important;
}
.cc__inner::before{
  content:none !important;
}

/* 6) Lightbox: prevent collapsed frame (robust) + arrow hover like buttons */
.lb__frame{
  min-height: 320px;
}
.lb__media{
  min-height: 320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
:where(.lb__nav):hover{
  transform: translateZ(0) scale(1.03);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(10,65,137,.22);
}
:where(.lb__nav):active{
  transform: translateZ(0) scale(1.01);
}


/* ===== TRANSITIONS (GLOBAL OPEN/Fade + PAGE TRANSITION) ===== */
body.is-fade-ready{ opacity: 0; transition: opacity .18s ease; }
body.is-fade-ready.is-loaded{ opacity: 1; }
body.is-fade-ready.is-leaving{ opacity: 0; }

/* Generic fade-in for toggleable UI */
.fade-enter{ opacity: 0; transform: translateY(6px); }
.fade-enter.is-open,
.fade-enter.is-visible{ opacity: 1; transform: translateY(0); transition: opacity .18s ease, transform .18s ease; }

/* Cookie banner / modal fade */
#cc, #ccm, .lb{ transition: opacity .18s ease, transform .18s ease; }
#cc, #ccm, .lb{ opacity: 0; pointer-events: none; }
#cc.is-open, #ccm.is-open, .lb.is-open{ opacity: 1; pointer-events: auto; }
#cc{ transform: translateX(-50%) translateY(10px); }
#cc.is-open{ transform: translateX(-50%) translateY(0); }
#ccm{ transform: translateY(12px); }
#ccm.is-open{ transform: translateY(0); }
.lb{ transform: scale(.985); }
.lb.is-open{ transform: scale(1); }

/* Drawer fade */
.drawer{ transition: opacity .18s ease, transform .18s ease; }
.drawer{ opacity: 0; transform: translateX(10px); pointer-events:none; }
.drawer.is-open{ opacity: 1; transform: translateX(0); pointer-events:auto; }

/* ===== OVERLAP BORDER + BOTTOM FADE (container+border only; content stays opaque) ===== */
:root{
  --ui-border: rgba(255,255,255,.18);
  --ui-panel: rgba(20,24,35,.86);
}
.overlap__card,
.page-overlap__card{
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.overlap__card::before,
.page-overlap__card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(20,24,35,.92) 0%, rgba(20,24,35,.92) 62%, rgba(20,24,35,0) 100%);
  /* real 1px border via inset shadow */
  box-shadow:
    inset 0 0 0 1px var(--ui-border),
    0 -34px 52px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* Fade only this surface (container+border) to transparent at bottom */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  pointer-events:none;
}
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .overlap__card::before,
  .page-overlap__card::before{
    background: rgba(20,24,35,.92);
  }
}
/* Ensure overlap content stays on top and opaque */
.overlap__card > *,
.page-overlap__card > *{
  position: relative;
  z-index: 1;
}

/* Remove any lb__nav custom hover that overrides global button system */
:where(.lb__nav):hover{
  transform: translateY(-50%) translateY(-2px) scale(1.02);
}
:where(.lb__nav):active{
  transform: translateY(-50%) translateY(0px) scale(.98);
}

/* Cookie border: force real 1px, disable pseudo border layer */
.cc__inner::before,
.ccm__panel::before{ display:none !important; }
.cc__inner,
.ccm__panel{
  border: 1px solid rgba(255,255,255,.18) !important;
}



RESPONSIVE OVERRIDES (MOBILE/TABLET)
   ============================ */


/* ============================
   OVERLAP VISUAL FIXES (BORDER + TOP-SHADOW + BOTTOM FADE ON CONTAINER ONLY)
   ============================ */
:root{
  --overlap-border: rgba(233,238,247,.18);
  --overlap-bg: rgba(20,24,37,.78);
}

/* Ensure card itself is opaque and bordered; fade is applied via pseudo elements only */
.overlap__card,
.page-overlap__card,
.overlap__box{
  position: relative !important;
  border: 1px solid var(--overlap-border) !important;
  background: var(--overlap-bg) !important;
  box-shadow: 0 -60px 70px rgba(0,0,0,.28) !important; /* top-only appearance */
  overflow: visible !important;
}

/* Bottom fade on container surface (NOT on content) */
.overlap__card::before,
.page-overlap__card::before,
.overlap__box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(to bottom, var(--overlap-bg) 0%, var(--overlap-bg) 62%, rgba(20,24,37,0) 100%);
  z-index:0;
}

/* Border fade (frame only) */
.overlap__card::after,
.page-overlap__card::after,
.overlap__box::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  border: 1px solid var(--overlap-border);
  /* fade border near bottom */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  z-index:1;
}

/* Keep content above pseudo-elements */
.overlap__card > *,
.page-overlap__card > *,
.overlap__box > *{
  position: relative;
  z-index: 2;
}

/* Backdrop blur with fallback */
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .overlap__card,
  .page-overlap__card,
  .overlap__box{
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
  }
}

/* ============================
   SIDEBAR LOGO SIZE (MATCH LINK HOVER AREA)
   ============================ */
.sidebar .brand{
  padding: 0 !important;
}
.sidebar .brand > a{
  display:block;
  width:100%;
  padding: 12px 14px; /* match nav link padding */
  border-radius: 10px;
}
.sidebar .brand > a:hover{
  background: transparent;
  box-shadow: none;
}
.sidebar .brand img{
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display:block;
}

/* Mobile/Tablet layout: remove sidebar offset, prevent overflow, stack grids cleanly */
@media (max-width: 980px){
  .sidebar{ display:none !important; }
  .topbar{ display:block !important; }
  .page{ padding-left: 0 !important; margin-left: 0 !important; }
  .main{ width: 100% !important; }
  .container{ width: min(100%, 980px); padding-left: 16px; padding-right: 16px; }
  .overlap{ margin-top: -70px; }
  .overlap__card, .page-overlap__card{ width:100% !important; max-width:none !important; }
  .footer{ padding-left: 0 !important; }
}

/* Tablet */
@media (max-width: 720px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .overlap__grid{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .service__grid{ grid-template-columns: 1fr !important; }
  .hw__grid{ grid-template-columns: 1fr !important; }
  .usp__grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .svc-teaser__grid{ grid-template-columns: 1fr !important; }
  .footer__row{ flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Mobile */
@media (max-width: 520px){
  .container{ padding-left: 12px; padding-right: 12px; }
  .hero{ min-height: 320px; }
  .btn, .pager__btn, .cc__btn{ width: 100%; }
  .float-stack{ right: 14px; bottom: 92px; }
  .cc{ bottom: 92px; } /* keep off footer */
  .ccm__panel{ top: 46% !important; }
}

/* Small mobile */
@media (max-width: 360px){
  .container{ padding-left: 10px; padding-right: 10px; }
  .h1, h1{ font-size: 30px; }
}


/* =========================
   TODO5 OVERRIDES (2025-12)
   - Borders, Overlaps, Cookie Modal Tabs, Lightbox focus, Footer consistency
   ========================= */

/* 1) Border between hero and first overlap section */
.page-hero{ position:relative; }
.page-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: rgba(255,255,255,.20);
  pointer-events:none;
}

/* 2+3) Overlaps: cookie-like transparency + blur + bottom fade for CONTAINER+border only */
:root{
  --overlap-border: rgba(255,255,255,.20);
  --overlap-bg: rgba(20,24,35,.78);
}
/* normalize base overlap cards */
.overlap__card,
.page-overlap__card{
  position:relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 -60px 90px rgba(0,0,0,.38) !important; /* shadow only above (visually away from bottom) */
  overflow: visible !important;
}
/* background + blur */
.overlap__card::before,
.page-overlap__card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--overlap-bg) 0%, rgba(20,24,35,.60) 72%, rgba(20,24,35,0) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events:none;
  z-index:0;
}
/* fallback if no backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .overlap__card::before,
  .page-overlap__card::before{
    background: linear-gradient(180deg, rgba(20,24,35,.96) 0%, rgba(20,24,35,.90) 72%, rgba(20,24,35,0) 100%);
  }
}
/* border with bottom fade (border only fades out) */
.overlap__card::after,
.page-overlap__card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 1px solid var(--overlap-border);
  pointer-events:none;
  z-index:1;
  /* fade-out towards bottom for the border (not content) */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
/* keep actual content above overlays */
.overlap__card > *,
.page-overlap__card > *{
  position:relative;
  z-index:2;
}

/* 4) Cookie banner border should read as 1px (remove any "thick" look) */
.cc__inner{
  border-width:1px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.42) !important;
}

/* 5) Cookie modal tabs: no box hover, only text hover */
.ccm__tab{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.ccm__tab:hover{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 6) Lightbox focus: hide cookie FAB always; hide cookie banner/modal only when undecided */
body.is-lightbox-open .cc-fab{
  opacity:0 !important;
  pointer-events:none !important;
  transform: translateY(6px) !important;
}
body.is-lightbox-open.is-cookie-undecided #cc,
body.is-lightbox-open.is-cookie-undecided #ccm{
  opacity:0 !important;
  pointer-events:none !important;
}

/* Lightbox arrows: ensure they use the global button hover/active */
.lb__nav button,
.lb__arrow,
.lb__prev,
.lb__next{
  transition: transform .18s ease, opacity .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}
.lb__nav button:hover,
.lb__arrow:hover,
.lb__prev:hover,
.lb__next:hover{
  transform: translateY(-1px) !important;
}

/* 7) Heroes: ensure bg uses variable */
.page-hero__bg{ background-image: var(--hero-image) !important; }

/* 8+9) Footer: enforce consistent alignment and location */
footer.footer{
  width:100%;
  margin-top:auto;
}
.footer__row{
  align-items:center !important;
}


.cc__tab:hover,.cc__tab:focus-visible{background:transparent;}
.cc__tab:hover span,.cc__tab:focus-visible span{opacity:1;}

/* v39 todo8: hero separator line */
.hero{position:relative;}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.18);}
.page-hero{position:relative;}
.page-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.18);}

/* v39 todo8: cookie banner border truly 1px */
.cc__inner::before{ display:none !important; }


/* CC SINGLE BORDER FIX */
#cc, .cc{border:1px solid rgba(255,255,255,.12)!important; box-shadow:none!important; outline:0!important;}
#cc *{outline:0!important;}

@keyframes uiFadeIn{from{opacity:0}to{opacity:1}}

#cc.is-open, #ccm.is-open, .lb.is-open, .drawer.is-open{animation: uiFadeIn .18s ease both;}

/* Cookie Modal Panel Fade-In */
[data-cc-panel].is-fade-in{animation: uiFadeIn .18s ease both;}

/* Page Overlap inner centering (exclude home overlap) */
.page-overlap__card{display:flex;justify-content:center;}
.page-overlap__card > *{width:100%;max-width:980px;text-align:left;margin-left:auto;margin-right:auto;}
.page-overlap__card .usp__grid{justify-content:center;justify-items:center;margin-left:auto;margin-right:auto;}
.page-overlap__card .usp-tile{text-align:left;}


/* Cookie banner: rounded border (avoid square outer frame) */
#cc{border-radius:16px;overflow:hidden;}

/* Hide cookie UI during lightbox */
body.is-lightbox-open #cc,
body.is-lightbox-open #ccFab{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}


/* v39 todo11: unified cookie consent (banner == modal) */
.cc.cc--unified{
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:min(520px, calc(100vw - 28px)) !important;
  max-height:min(84vh, 720px);
  overflow:auto;
}

.cc.cc--unified .cc__panel{
  background:rgba(18,22,32,.78);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .cc.cc--unified .cc__panel{ background:rgba(18,22,32,.92); }
}

.cc.cc--unified .cc__tabs{
  display:flex;
  gap:14px;
  padding:16px 16px 8px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.cc.cc--unified .cc__tab{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(233,238,247,.80);
  font-weight:900;
  font-size:14px;
  letter-spacing:.02em;
  cursor:pointer;
  padding:10px 6px;
  position:relative;
}

.cc.cc--unified .cc__tab.is-active{
  color:var(--accent);
}

.cc.cc--unified .cc__tab.is-active::after{
  content:'';
  position:absolute;
  left:6px;
  right:6px;
  bottom:-9px;
  height:3px;
  border-radius:999px;
  background: var(--accent);
}

.cc.cc--unified .cc__tab:hover,
.cc.cc--unified .cc__tab:focus-visible{
  color:rgba(233,238,247,.95);
  outline:none;
  background: transparent;
}

.cc.cc--unified .cc__tab:hover::after,
.cc.cc--unified .cc__tab:focus-visible::after{
  opacity:1;
}

.cc.cc--unified .cc__body{ padding:18px 16px 8px; }

.cc.cc--unified .cc__h{ font-size:24px; font-weight:900; letter-spacing:.02em; margin:0 0 10px; }
.cc.cc--unified .cc__p{ margin:0 0 10px; color:rgba(233,238,247,.72); line-height:1.55; }

.cc.cc--unified .cc__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.08);
}
.cc.cc--unified .cc__row + .cc__row{ margin-top:12px; }
.cc.cc--unified .cc__k{ font-weight:900; letter-spacing:.10em; text-transform:uppercase; font-size:12px; }
.cc.cc--unified .cc__d{ color:rgba(233,238,247,.70); font-size:13px; margin-top:6px; max-width:52ch; }
.cc.cc--unified .cc__fixed{ font-weight:900; color:var(--accent); letter-spacing:.10em; text-transform:uppercase; font-size:11px; }

.cc.cc--unified .cc__switch{ display:inline-flex; align-items:center; gap:10px; }
.cc.cc--unified .cc__switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.cc.cc--unified .cc__switch-ui{
  width:44px;height:26px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  position:relative;
  display:inline-block;
}
.cc.cc--unified .cc__switch-ui::after{
  content:'';
  position:absolute;
  left:3px; top:3px;
  width:20px; height:20px;
  border-radius:999px;
  background:rgba(233,238,247,.86);
  transition:transform .18s ease, background .18s ease;
}
.cc.cc--unified .cc__switch input:checked + .cc__switch-ui{
  border-color:rgba(255,255,255,.22);
  background:rgba(0,0,0,.08);
}
.cc.cc--unified .cc__switch input:checked + .cc__switch-ui::after{
  transform:translateX(18px);
  background: var(--accent);
}

.cc.cc--unified .cc__cta{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cc.cc--unified .cc__cta .cc__btn{
  width:100%;
  justify-content:center;
}

.cc.cc--unified .cc__cta .cc__btn--ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(233,238,247,.88);
}


/* ===========================
   v39 PATCH: todo11 fixes
   - Cookie unified: remove double border, restore fade-out
   - Scroll-to-top visibility
   - Overlap bottom fade higher (hide bottom border wrap)
   =========================== */

/* Cookie unified: ensure ONLY the panel draws the border */
#cc.cc,
.cc#cc{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Panel border (single) */
#cc .cc__panel{
  border: 1px solid rgba(255,255,255,.12) !important;
  outline: 0 !important;
}

/* Some builds used a frame pseudo element; hard-disable it */
#cc::before, #cc::after,
#cc .cc__panel::before, #cc .cc__panel::after{
  outline: 0 !important;
}

/* Fade-in/out: base hidden, open visible, closing keeps visibility for fade-out */
#cc{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
#cc.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#cc.is-closing{
  opacity: 0;
  visibility: visible !important; /* keep visible so fade-out can be seen */
  pointer-events: none;
}

/* Lightbox state hides cookie popup and fab while open */
body.is-lightbox-open #cc,
body.is-lightbox-open #ccFab{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Scroll-to-top: ensure it can appear again */
 .fab--top,
.scrolltop{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.fab--top.is-visible,
.scrolltop.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Overlap: increase bottom fade so border does not wrap around bottom */
.overlap__card::before,
.page-overlap__card::before{
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 88%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 88%) !important;
}
.overlap__card::after,
.page-overlap__card::after{
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 88%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 88%) !important;
}


/* ===== v39 todo13 HOTFIX: ScrollTop / Cookie Transitions / Lightbox Fade-Out / Cookie Tabs Hover ===== */

/* Scroll-to-top: use is-visible (JS) and allow fade in/out */
.scrolltop{
  display:flex !important;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.scrolltop.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

/* Unified Cookie popup: ensure centered and supports fade-in AND fade-out */
#cc.cc--unified{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translate(-50%,-50%) scale(.985) !important;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
#cc.cc--unified.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translate(-50%,-50%) scale(1) !important;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
#cc.cc--unified.is-closing{
  opacity:0;
  visibility:visible !important;
  pointer-events:none;
  transform: translate(-50%,-50%) scale(.985) !important;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

/* Remove any outer frame on #cc (single border lives only on .cc__panel) */
#cc{ border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; }

/* Cookie FAB icon: larger and clearer */
#ccFab svg{ width:24px !important; height:24px !important; }

/* Cookie tabs hover: exactly like active (text + underline only), no box */
.cc.cc--unified .cc__tab,
.cc.cc--unified .cc__tab:hover,
.cc.cc--unified .cc__tab:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}
.cc.cc--unified .cc__tab:hover,
.cc.cc--unified .cc__tab:focus-visible{
  color: rgba(233,238,247,.95) !important;
}
.cc.cc--unified .cc__tab::after{
  opacity:0;
}
.cc.cc--unified .cc__tab:hover::after,
.cc.cc--unified .cc__tab:focus-visible::after,
.cc.cc--unified .cc__tab.is-active::after{
  opacity:1 !important;
}

/* Lightbox: no display none; allow fade-in and fade-out */
.lb{
  display:block !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: scale(.985);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.lb.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: scale(1);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.lb.is-closing{
  opacity:0;
  visibility:visible !important;
  pointer-events:none;
  transform: scale(.985);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}



/* CC UNIFIED: Tabs hover like active (no box) */
.cc.cc--unified .cc__tab{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.cc.cc--unified .cc__tab:hover,
.cc.cc--unified .cc__tab:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
}
.cc.cc--unified .cc__tab:hover,
.cc.cc--unified .cc__tab:focus-visible{
  color: var(--text, rgba(255,255,255,.92));
}


/* v39 cookie unified: force tab hover to match active (no box) */
.cc.cc--unified .cc__tab:hover,
.cc.cc--unified .cc__tab:focus-visible{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
  filter: none !important;
}


/* ===== v39 TODO20->TODO21 PATCH (Über uns Overlap / Legal Typo / Obelisk spacing / Active Nav / Footer links) ===== */

/* (1) Über uns Overlap: Textzeile entfernt – mehr Platz für Karten (HTML entfernt). */

/* (2) Legal Content: Überschriften im Content (z.B. "KONTAKT", "DOGADO") deutlich kleiner, klauselorientiert */
body.is-legal .card--merged .h2{
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: .07em !important;
  font-weight: 900;
}
body.is-legal .card--merged .kicker{
  font-size: 11px !important;
  letter-spacing: .16em !important;
}
body.is-legal .card--merged .lead{
  font-size: 14px !important;
  line-height: 1.75 !important;
}

/* (3) Startseite Wahrzeichen: mehr Abstand unter dem großen Bild, damit nichts in die nächste Sektion ragt */
.section--obelisk .obelisk__media{
  padding-bottom: clamp(42px, 5vw, 92px);
}
@media (max-width: 980px){
  .section--obelisk .obelisk__media{ padding-bottom: clamp(34px, 6vw, 80px); }
}

/* (4) Sidebar Active: aria-current muss visuell klar sein (wird von app.js gesetzt) */
.nav a[aria-current="page"],
.drawer__nav a[aria-current="page"]{
  background: rgba(10,65,137,.10) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgba(10,65,137,.22) !important;
}

/* (5) Footer Links (Impressum | Datenschutz) gleiche Schriftgröße wie Copyright */
.footer__links{
  font-size: inherit !important;
}
.footer__links a{ font-size: inherit !important; }


/* ===== v39 TODO22 PATCH: overlap shadow bottom removal + centered overlap + footer sizing ===== */
.page-overlap__card,
.overlap__card{
  /* shadow only upwards; remove bottom presence further */
  box-shadow: 0 -28px 78px rgba(0,0,0,.34) !important;
  text-align:left !important;
}
.page-overlap__grid,
.overlap__grid{
  justify-content:start !important;
  justify-items:start !important;
  text-align:left !important;
}
.page-overlap__left,
.page-overlap__right,
.overlap__left,
.overlap__right{
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Footer: links exactly same visual size as copyright line */
.footer__links a{
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}



/* Sidebar logo: no "box" hover */
.brand a:hover,
.brand a:focus-visible,
.topbar__logo:hover,
.topbar__logo:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.copyright-ascii{margin-right:6px; font-size:12px; line-height:1; vertical-align:baseline;}



/* ===== v39 todo23 overrides (deterministic) ===== */

/* Sidebar active state: support both aria-current and JS class */
.nav a[aria-current="page"],
.nav a.is-active{
  background: rgba(10,65,137,.08) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgba(10,65,137,.25) !important;
}

/* Overlap content: centered (including text) */
.page-overlap__card,
.overlap__card{
  text-align:left !important;
}
.page-overlap__card .kicker,
.page-overlap__card .h1,
.page-overlap__card .h2,
.page-overlap__card p,
.overlap__card .kicker,
.overlap__card .h1,
.overlap__card .h2,
.overlap__card p{
  text-align:left !important;
}

/* Overlap transparency + bottom fade/shadow control */
:root{
  --overlap-bg: rgba(255,255,255,.90); /* less transparent (more opaque) */
}
.page-overlap__card,
.overlap__card,
.overlap__box{
  background: var(--overlap-bg) !important;
  box-shadow: 0 -26px 52px rgba(0,0,0,.26) !important; /* shadow mostly up */
}

/* Bottom area slightly more transparent + hide any remaining bottom-shadow perception */
.page-overlap__card::before,
.overlap__card::before,
.overlap__box::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  /* fade starts higher so bottom border doesn't loop */
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,.10) 70%,
    rgba(255,255,255,.28) 100%);
  mix-blend-mode: normal;
}

/* First section behind overlap: subtle top shadow flowing into hero */
.page-overlap + section,
.overlap + section{
  box-shadow: 0 -22px 48px rgba(0,0,0,.16);
}

/* Legal pages: reduce headline size (including Datenschutz) + add breathing room before blue kickers */
.page-overlap--legal .h2{
  font-size: 15px !important;
  letter-spacing: .02em !important;
}
.page-overlap--legal .kicker{
  font-size: 12px !important;
  margin-top: 26px !important;
  margin-bottom: 8px !important;
}
.page-overlap--legal p + .kicker,
.page-overlap--legal ul + .kicker,
.page-overlap--legal table + .kicker{
  margin-top: 28px !important;
}
.page-overlap--legal .kicker + .h2{
  margin-top: 0 !important;
}
.page-overlap--legal .h2 + p,
.page-overlap--legal .h2 + ul,
.page-overlap--legal .h2 + table{
  margin-top: 10px !important;
}

/* Remove hover box from sidebar logo (only subtle opacity) */
.sidebar .brand a:hover,
.sidebar .brand a:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
}
.sidebar .brand img{
  transition: opacity .18s ease, transform .18s ease;
  will-change: transform, opacity;
}
.sidebar .brand a:hover img{ opacity: .92; transform: translateZ(0) scale(1.01); }

/* ===== v39 todo24 restore: overlap visual (cookie-like) + bottom fade (start @40%) ===== */
:root{
  /* Restore dark glass overlap (todo23 accidentally forced white) */
  --overlap-bg: rgba(20,24,35,.74);
  --overlap-bg-2: rgba(20,24,35,.58);
  --overlap-border: rgba(255,255,255,.22);
}

/* Overlap card uses pseudo layers so ONLY bg+border fade (content stays solid) */
.overlap__card,
.page-overlap__card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 -60px 90px rgba(0,0,0,.55) !important; /* remove bottom shadow further */
  overflow: visible !important;
}

.overlap__card::before,
.page-overlap__card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    var(--overlap-bg) 0%,
    var(--overlap-bg) 40%,
    rgba(20,24,35,0) 100%
  ) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  /* Fade only the background layer */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.overlap__card::after,
.page-overlap__card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--overlap-border);
  /* Fade only the border layer */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

/* Keep overlap content centered (requested) */
.overlap__grid,
.page-overlap__grid{ justify-content: center !important; }
.overlap__left,
.overlap__right{ text-align:left !important; }

/* Top shadow MUST be on the first section that the overlap sits on (not elsewhere) */
.page-overlap + section,
.overlap + section{ box-shadow: none !important; }
.overlap + .section--obelisk,
.page-overlap + .service,
.page-overlap + .page-content,
.page-overlap + .page-legal{
  box-shadow: 0 -22px 40px rgba(0,0,0,.45) !important;
}

/* Ensure material images are not hidden by any accidental override */
.feature__media{ display: block !important; }


/* ============================
   TODO26 FINAL PATCH (2025-12-23)
   Only To-Do 1-10 from user
   ============================ */

/* (1) Overlap rise: make page-overlap match home overlap */
.page-overlap{
  margin-top: -120px !important;
  padding-bottom: 34px !important;
}
@media (max-width: 980px){
  .page-overlap{ margin-top: -80px !important; }
}

/* (2)(7) Overlap text: all overlaps left-aligned (home exception removed) */
.overlap__card,
.page-overlap__card{
  text-align: left !important;
}
.overlap__card > *,
.page-overlap__card > *{
  text-align: left !important;
}

/* (3) About page overlap cards: align to strengths card look */
.page-overlap__card .usp__grid{
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  justify-items: stretch !important;
  gap: 16px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 980px){
  .page-overlap__card .usp__grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
.page-overlap__card .usp-tile{
  text-align: left !important; /* matches strengths tiles */
}

/* (4) Top-shadow: MUST exist on every page at the first section the overlap sits on.
   We attach it to the section behind the overlap (the section directly after the overlap).
   This guarantees identical behavior for home + all subpages, and avoids shadow drift.
*/
.overlap::before,
.page-overlap::before{ content:none !important; }
.overlap + section,
.page-overlap + section{
  /* shadow flows upward into hero */
  box-shadow: 0 -22px 55px rgba(0,0,0,.22) !important;
}

/* (5)(6) Overlap bottom: blend more (more transparent) + reduce bottom shadow further */
.overlap__card,
.page-overlap__card{
  box-shadow: 0 -26px 74px rgba(0,0,0,.32) !important; /* no bottom presence */
}
.overlap__card::before,
.page-overlap__card::before{
  /* background layer: cookie-glass look but a touch more transparent */
  background: linear-gradient(
    180deg,
    rgba(var(--overlap-bg-rgb), .86) 0%,
    rgba(var(--overlap-bg-rgb), .70) 34%,
    rgba(var(--overlap-bg-rgb), 0) 100%
  ) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,0) 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,0) 100%) !important;
}
.overlap__card::after,
.page-overlap__card::after{
  /* border layer fade */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,0) 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,0) 100%) !important;
  opacity: .78 !important;
}

/* (8) Footer: links same size as copyright */
.footer{
  font-size: 12px !important;
}
.footer__copy,
.footer__links,
.footer__links a{
  font-size: inherit !important;
}

/* Active state visibility: drawer nav must be styled too */
.drawer__nav a.is-active,
.drawer__nav a[aria-current="page"]{
  background: rgba(10,65,137,.08) !important;
  color: rgba(10,65,137,1) !important;
  box-shadow: inset 0 0 0 1px rgba(10,65,137,.25) !important;
}

/* (9) Hero shadow reduce (overlay gradient) */
.hero::before{
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35)) !important;
}

/* (10) Cookie-consent: prevent flash on reload when already decided */
#cc{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#cc.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* =========================================================
   v39 FINAL FEINSCHLIFF (todo27) — Hero Top-Shadow + Overlap Align + Lightbox/Consent
   Regeln:
   - Top-Shadow NUR am bestehenden Hero-Separator (1px Line an der Hero-Unterkante) — keine zweite Linie/kein zusätzlicher Border
   - KEIN Shadow an Folge-Sektionen (verhindert den "roten" Shadow unten)
   - Overlap Inhalte linksbündig (inkl. page-overlap)
   - Cookie-Consent UI wird bei Lightbox-Open vollständig ausgeblendet (Banner + FAB)
   ========================================================= */

/* A) HERO / TOP-SHADOW: ausschließlich am Hero-Separator (Unterkante des Hero) */
.hero::after,
.page-hero::after{
  /* bestehende Separator-Line beibehalten; Shadow NUR nach oben ins Hero */
  box-shadow: 0 -18px 44px rgba(0,0,0,.22) !important;
  z-index: 5 !important;
}

/* Startseite: gleiche Hero-Overlay-Logik wie bei .page-hero (macht den Top-Shadow sichtbar)
   - KEIN neuer Border
   - nur Angleichung der Overlay-Gradientenlogik (page-hero nutzt .page-hero__bg:after)
*/
.hero{
  overflow: hidden; /* konsistent zu .page-hero */
  background-color: #101216; /* Fallback, falls Bild nicht lädt */
}
.hero::before{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(16,18,22,1) 100%
  ) !important;
}

/* Verhindern: keine alten/alternativen Shadow-Quellen (rot markierter Shadow) */
.overlap::before,
.page-overlap::before{
  content: none !important;
}
.overlap + section,
.page-overlap + section,
.page-overlap + .service,
.page-overlap + .page-content,
.page-overlap + .page-legal,
.overlap + .section--obelisk,
.section--obelisk,
.section--obelisk + .section.hw,
.section.feature.feature--mirror,
.section.feature.feature--mirror + .section.svc-teaser,
.section.svc-teaser + .section{
  box-shadow: none !important;
}

/* B) OVERLAP CONTENT AUSRICHTUNG: final linksbündig */
.overlap__grid,
.page-overlap__grid{
  justify-content: flex-start !important;
}
.overlap__left,
.overlap__right{
  text-align: left !important;
}

/* page-overlap wird im Projekt an manchen Stellen zentral zentriert — hier final linksbündig überschreiben */
.page-overlap__card{
  justify-content: flex-start !important;
}
.page-overlap__card > *{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* E) COOKIE-CONSENT vs LIGHTBOX (leistungen) — Variante A: Banner + FAB komplett ausblenden solange Lightbox offen ist */
body.is-lightbox-open #cc,
body.is-lightbox-open .cc-fab{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Kontakt (Anti-Spam Honeypot): unsichtbar, ohne Layout-Effekt */
.hp-field{position:absolute !important;left:-10000px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important;}


/* ============================
   FEINTUNING (2025-12-24)
   To-Do:
   1) Hero-Top-Shadow Spread leicht reduzieren
   2) Overlap Bottom-Fade etwas transparenter
   3) Overlap-Text final linksbündig (inkl. Kicker/CTA/Forms)
   5) Sidebar/Drawer Active-State = Hover-Look (dauerhaft)
   ============================ */

/* Overlap kicker helper class: nicht zentrieren (final linksbündig) */
.overlap__kicker--center{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Overlap CTA/Form: Text + Labels niemals zentriert */
.overlap__cta,
.overlap__cta *{
  text-align: left !important;
}

/* Navigation Active-State: identisch zum Hover-Look (dauerhaft) */
.nav a.is-active,
.nav a[aria-current="page"],
.drawer__nav a.is-active,
.drawer__nav a[aria-current="page"]{
  background: rgba(10,65,137,.08) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgba(10,65,137,.18) !important;
}


/* =========================================================
   FINAL HOTFIX (2025-12-24) — Responsive + Hero-Shadow + Overlap Left-Align + Nav Active
   Ziel: exakt die gewünschten Effekte erzwingen (ohne Redesign, nur Korrekturen).
   ========================================================= */

/* 1) Mobile: Sidebar raus, Topbar rein (hart erzwingen) */
@media (max-width: 980px){
  .sidebar{ display:none !important; }
  .topbar{ display:block !important; }
  .page{ padding-left: 0 !important; margin-left: 0 !important; }
}

/* 2) HERO-Schatten: einheitlich auf ALLEN Seiten (nur am bestehenden 1px-Separator) */
.hero::after,
.page-hero::after{
  /* gleiche Logik wie Overlap (etwas kräftiger, +~0.1 Opacity möglich) */
  box-shadow:
    0 -90px 120px rgba(0,0,0,.28),
    0 -18px 48px rgba(0,0,0,.20) !important;
}

/* 3) Overlap: Bottom-Fade transparenter + Shadow unten reduzieren (ca. -20%) */
.overlap__card,
.page-overlap__card{
  /* weniger „unten“ (kein positiver Y-Shadow), nur nach oben */
  box-shadow:
    0 -110px 140px rgba(0,0,0,.28),
    0 -18px 48px rgba(0,0,0,.18) !important;
}

/* Hintergrund-/Border-Fade früher ausblenden → unten transparenter */
.overlap__card::before,
.page-overlap__card::before{
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 100%) !important;
}
.overlap__card::after,
.page-overlap__card::after{
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 100%) !important;
}

/* 4) Overlap Inhalte: final linksbündig (auch wenn frühere Blöcke noch zentrieren) */
.overlap__grid{
  justify-content: flex-start !important;
  justify-items: start !important;
}
.overlap__card,
.page-overlap__card{
  text-align: left !important;
}
.overlap__left,
.overlap__right,
.page-overlap__card :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,small,.lead,.kicker,.overlap__cta,.overlap__cta *,.mini-form,.mini-form *,.jump-links,.jump-links *){
  text-align: left !important;
}

/* =========================================================
   RESPONSIVE FINAL PATCH v20251224_3
   Ziel: Desktop-Look auf Mobile „schmal“ (ohne Redesign)
   WICHTIG: Active-State & Hero-Shadow bleiben unberührt.
   ========================================================= */

/* Global: kein horizontaler Overflow, Medien skalieren */
html,body{max-width:100%;}
img,svg,video,canvas{max-width:100%;height:auto;}

/* Kontakt: Form + Hinweise sauber */
#kontakt-form label{
  display:block;
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
}
#kontakt-form .grid2{gap:18px;}
.hp-field{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.recaptcha{margin-top:16px;}
.recaptcha{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
.recaptcha .g-recaptcha{display:inline-block;min-width:304px;}

/* Kontakt: Wochenübersicht */
.weekcal-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.weekcal{
  display:inline-grid;
  grid-template-columns: 120px repeat(7, minmax(72px, 1fr));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow:hidden;
  min-width: 720px;
  background: rgba(0,0,0,.02);
}
.weekcal__head,.weekcal__row{display:contents;}
.weekcal__cell{
  padding: 10px 10px;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  color: rgba(233,238,247,.80);
  text-align:center;
}
.weekcal__cell.is-label{
  text-align:left;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size: 11px;
  color: rgba(233,238,247,.88);
}
.weekcal__head .weekcal__cell{
  background: rgba(255,255,255,.04);
  font-weight: 900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size: 11px;
}
.weekcal__slot{color: rgba(233,238,247,.55);}
.weekcal__legend{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* =========================================================
   Layout: Mobile/Tablet Stacking
   ========================================================= */
@media (max-width: 980px){
  /* Grundlayout */
  .page{display:block !important; padding-left:0 !important; margin-left:0 !important;}
  .sidebar{display:none !important;}
  .topbar{display:block !important;}

  /* Container & Sections */
  .container{padding-left:16px !important; padding-right:16px !important;}
  .section{padding: 54px 0 !important;}

  /* Hero */
  .hero{min-height: 64vh;}
  .page-hero{min-height: 64vh; padding: 88px 0 118px;}

  /* Overlap: wie Desktop, nur gestackt */
  .overlap{margin-top:-64px; padding-bottom: 24px;}
  .overlap__card{padding: 34px 24px !important;}
  .overlap__grid{display:block !important;}
  .overlap__left, .overlap__right{width:100% !important;}
  .overlap__right{margin-top:22px;}

  .page-overlap{margin-top:-68px; padding: 0 0 24px;}
  .page-overlap__card{padding: 34px 24px !important;}

  /* Grids */
  .grid2{grid-template-columns:1fr !important;}
  .service__grid{grid-template-columns:1fr !important;}

  /* Home grids */
  .hw__grid{grid-template-columns:1fr !important;}
  .usp__grid{grid-template-columns: repeat(2, minmax(0,1fr)) !important;}
  .svc-teaser__grid{grid-template-columns: repeat(2, minmax(0,1fr)) !important;}

  /* Obelisk / Feature (Bilder mittig, nicht außerhalb) */
  .obelisk{grid-template-columns:1fr !important; gap:16px !important;}
  .obelisk__media{min-height: 300px !important;}
  .obelisk__img{left:50% !important; right:auto !important; transform: translateX(-50%) rotate(2deg) !important;}
  .obelisk__img--front{top:22% !important; transform: translateX(-50%) rotate(-2deg) !important;}

  .feature__wrap{grid-template-columns:1fr !important; gap:26px !important;}
  .feature__media{min-height: 300px !important;}
  .feature__img{left:50% !important; transform: translateX(-50%) rotate(-2deg) !important;}
  .feature__img--front{top:22% !important; transform: translateX(-50%) rotate(2deg) !important;}

  /* Footer */
  .footer__row{flex-direction:column; align-items:flex-start; gap:10px;}
}

@media (max-width: 720px){
  .usp__grid{grid-template-columns: 1fr 1fr !important;}
  .svc-teaser__grid{grid-template-columns: 1fr 1fr !important;}
}

@media (max-width: 520px){
  /* Typo & Spacing */
  .container{padding-left:14px !important; padding-right:14px !important;}
  .section{padding: 46px 0 !important;}
  .lead{font-size: 15px !important;}

  /* Buttons & Forms */
  .btn, button.btn, #kontakt-form button[type="submit"]{width:100% !important;}

  /* Home grids -> 1 Spalte */
  .usp__grid{grid-template-columns:1fr !important;}
  .svc-teaser__grid{grid-template-columns:1fr !important;}

  /* Gallery -> 1 Spalte (sehr schmal) */
  .ggrid{grid-template-columns:1fr !important;}

  /* Weekcal: etwas kompakter */
  .weekcal{min-width: 640px; grid-template-columns: 110px repeat(7, minmax(66px, 1fr));}
}

@media (max-width: 360px){
  .weekcal{min-width: 600px; grid-template-columns: 104px repeat(7, minmax(60px, 1fr));}
}

/* =========================
   FINAL TUNING (2025-12-24)
   - Kontakt Overlap: Karten-Layout wie "Über uns" Tiles (ohne Redesign, nur saubere Grid-Optik)
   - Overlaps: Bottom-Fade transparenter, weniger "Bottom-Schatten" (~20%)
   NOTE: Active-State & Hero-Shadow werden bewusst NICHT verändert.
========================= */

/* Overlap bottom fade: transparenter + früheres Ausblenden (nur Pseudo-Layer, Content bleibt unverändert) */
.overlap__card::before,
.page-overlap__card::before,
.overlap__box::before{
  background: linear-gradient(to bottom,
    rgba(20,24,35,.58) 0%,
    rgba(20,24,35,.54) 48%,
    rgba(20,24,35,0) 100%) !important;
}

.overlap__card::after,
.page-overlap__card::after,
.overlap__box::after{
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%) !important;
}

@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .overlap__card::before,
  .page-overlap__card::before,
  .overlap__box::before{
    background: linear-gradient(to bottom,
      rgba(20,24,35,.78) 0%,
      rgba(20,24,35,.74) 48%,
      rgba(20,24,35,0) 100%) !important;
  }
}

/* Kontakt-Overlap: sauberes Grid statt "gequetschter" Inline-Reihe */
.contact-overlap{
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 22px;
  align-items: start;
}

.contact-overlap__left{
  text-align: left !important;
}

.contact-overlap__right{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.contact-card{
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.contact-card:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

.contact-card .icon{
  width: 18px;
  height: 18px;
  opacity: .85;
  margin-top: 2px;
  grid-row: 1 / span 2;
}

.contact-card__label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}

.contact-card__value{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
  min-width: 0;
}

/* Kontakt-Overlap Responsive */
@media (max-width: 980px){
  .contact-overlap{ grid-template-columns: 1fr; }
  .contact-overlap__right{ grid-template-columns: 1fr; }
}

/* =========================================================
   ACCESSIBILITY UTILITIES
   ========================================================= */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* =========================================================
   COOKIE CONSENT / CONSENT MODAL – MOBILE VIEWPORT FIX (iOS + ANDROID)
   Ziel: Keine abgeschnittenen Bereiche, Footer/Buttons immer sichtbar.
   ========================================================= */

/* 1) Modal Panel: nicht mehr per 50%/translate zentrieren auf kleinen Viewports */
@media (max-width: 900px), (max-height: 780px){
  .ccm__panel{
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;

    transform: none !important;
    width: auto !important;
    max-width: 760px !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;

    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  /* 2) Scrollbereich im Modal: darf wachsen und scrollen */
  .ccm__panels{
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 10px !important; /* etwas Luft vor Footer */
  }

  /* 3) Kopf/Footer: immer sichtbar, keine Überlagerung */
  .ccm__head,
  .ccm__foot{
    flex: 0 0 auto !important;
  }

  .ccm__foot{
    position: sticky !important;
    bottom: 0 !important;
    background: inherit !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -10px 22px rgba(0,0,0,.22) !important; /* Schatten nach oben */
  }
}

/* 4) Fallback, falls ein anderer Wrapper scrollt */
@media (max-width: 900px), (max-height: 780px){
  .ccm__view{
    max-height: none !important;
  }
}

/* =========================================================
   v40 PATCH – PERFORMANCE + STARTSEITE SPACING
   ========================================================= */

/* (1) LIGHTBOX: Overlay/Blur ohne „Delay“ (kein display:none) */
/* Base file defines .lb{display:none} – on mobile this can cause a perceived delay
   because the first paint happens after display toggling and backdrop-filter layer
   promotion. We keep the element rendered, but hidden, so opacity/blur transitions
   start immediately.
*/
.lb{
  display: block !important;
  visibility: hidden;
}
.lb.is-open,
.lb.is-closing{
  visibility: visible;
}

/* Backdrop: fade immediately; blur stays identical across devices */
.lb__backdrop{
  opacity: 0;
  transition: opacity .18s ease;
  will-change: opacity, -webkit-backdrop-filter, backdrop-filter;
  transform: translateZ(0);
}
.lb.is-open .lb__backdrop,
.lb.is-closing .lb__backdrop{
  opacity: 1;
}

/* (2) STARTSEITE: konsistenter Abstand Bild → Text auf Mobile
   (gleiches Spacing wie sonstige Content-Gaps: var(--gap))
*/
@media (max-width: 980px){
  .feature__media,
  .obelisk__media{
    margin-bottom: var(--gap);
  }
}



/* ABOUT PAGE LAYOUT */
.about-card .about-layout{
  display:flex;
  align-items:flex-start;
}
.about-card .about__photo{
  display:block;
  margin:0 15px 15px 0;
  height:auto;
  max-width:100%;
}
.about-card .about-side{
  flex:1 1 auto;
  min-width:0;
}
.about-card .about-heading{
  margin:0;
}
.about-card .about-blank{
  height:1rem;
}
.about-card .about-below p:first-child{
  margin-top:0;
}
@media (max-width: 768px){
  .about-card .about-layout{
    flex-direction:column;
  }
  .about-card .about__photo{
    margin:0 0 15px 0;
  }
}