/* ===============================
   Dark Theme: Schwarz/Anthrazit + Rot
================================= */
:root{
  --brand:#e21d2f;          /* Primär – Rot */
  --brand-2:#ff4b5f;        /* Hellere Rotnuance für Hover/Glows */
  --bg:#0b0c0f;             /* Seitenhintergrund (sehr dunkel) */
  --bg-2:#121418;           /* Karten/Paneele (anthrazit) */
  --ink:#f3f4f6;            /* Primärtext (hell) */
  --muted:#b8bdc7;          /* Sekundärtext */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.14);
  --shadow:0 16px 40px rgba(0,0,0,.5);
  --radius:18px;

  /* Hotspots (rot) */
  --hotspot-normal:#ff2f45;
  --hotspot-hover:#ff5a6b;

  /* Status */
  --ok:#19c37d;
  --warn:#ffbe45;

  /* Logo-Größe (min, fluid, max) */
  --logo-h: clamp(64px, 9vw, 128px);
}

/* ===============================
   Reset / Basics
================================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
a{ color:inherit; text-decoration:none; }

/* Container (Unterseiten) */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:24px 16px 56px;
}

/* ===============================
   Slider (kompakt, Startseite)
================================= */
.slider{ margin:10px auto 18px; }
.slider-viewport{
  position:relative; max-width:980px; margin:0 auto;
  border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#16181d,#101218);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.slider-track{ display:flex; transition:transform .5s ease; will-change:transform; }
.slide{ flex:0 0 100%; }
.slide img{
  width:100%;
  height: clamp(160px, 24vw, 320px);
  object-fit:cover; display:block;
  filter:saturate(1.05) contrast(1.02);
}
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border:none; border-radius:999px;
  background:rgba(0,0,0,.55); box-shadow:0 8px 20px rgba(0,0,0,.45);
  color:#fff; font-size:20px; line-height:38px; text-align:center; cursor:pointer;
  backdrop-filter: blur(4px);
}
.slider-btn:hover{ background:rgba(0,0,0,.7); }
.slider-btn.prev{ left:10px; }
.slider-btn.next{ right:10px; }
.slider-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:8px; justify-content:center; align-items:center;
}
.slider-dots .dot{
  width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  background:transparent; cursor:pointer;
}
.slider-dots .dot[aria-selected="true"]{ background:var(--brand); border-color:transparent; }
@media (max-width:640px){
  .slider-viewport{ max-width:100%; }
  .slide img{ height:180px; }
  .slider-btn{ width:40px; height:40px; font-size:21px; }
}
@media (prefers-reduced-motion: reduce){
  .slider-track{ transition:none; }
}

/* ===============================
   Header + Hauptnavigation
================================= */
.site-top{
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:#0f1115;
  border-bottom:1px solid var(--line);
}
.brand{ max-width:1200px; margin:0 auto; padding:10px 16px; }
.brand-link{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:inherit; text-decoration:none;
}

/* Logo als Badge */
.brand-logo{
  display:block;
  height: var(--logo-h);
  width:auto; max-height:none !important; object-fit:contain;
  background:#fff;
  border-radius:14px;
  padding:6px;
  border:2px solid #e50914;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text h1{
  margin:0; font-weight:800; text-align:center;
  font-size: clamp(18px, 2.2vw, 26px);
}
.brand-text .tagline{
  margin-top:3px; opacity:.9; text-align:center;
  font-size: clamp(12px, 1.3vw, 14px);
}

/* roter CTA unter dem Brand */
.auftrag-banner{
  display:flex; justify-content:center; align-items:center;
  padding:0 16px 6px;
}
.auftrag-btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  font-weight:700; text-align:center; white-space:nowrap;
  background:var(--brand); color:#fff; border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 26px rgba(226,29,47,.35);
}
.auftrag-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 16px 32px rgba(226,29,47,.4); }
@media (max-width:860px){ .auftrag-btn{ white-space:normal; } }

/* Navigation */
.main-nav{ background:#0f1115; }
.main-nav ul{
  max-width:1200px; margin:0 auto; padding:0 16px 12px;
  list-style:none; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.main-nav a{
  display:block; padding:10px 14px; border-radius:999px;
  color:#fff; font-weight:750; letter-spacing:.2px;
  background:transparent; border:1px solid transparent;
}
.main-nav a:hover{
  background:rgba(226,29,47,.10);
  border-color: rgba(226,29,47,.25);
  box-shadow:0 8px 22px rgba(226,29,47,.20);
}

/* ===============================
   Bühne + Haus-Layout
================================= */
.stage{ max-width:1200px; margin:0 auto; padding:18px 16px 40px; }

/* Haus-Panel (roter Hintergrund) */
.haus-layout{
  background:#e50914;
  border-radius:16px;
  padding:20px;
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.haus-layout h2,
.haus-layout .pv-label{
  color:#fff; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; text-align:center;
}

/* Kacheln */
.haus-layout .tile{
  background:#fff;
  border:2px solid #e50914;
  border-radius:12px;
  overflow:hidden; text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.haus-layout .tile img{ display:block; width:100%; height:auto; }
.haus-layout .tile span{
  display:block; font-weight:600; padding:6px; color:#e50914;
}

/* Haus mit Hotspots */
.house-map{
  position:relative; width:min(1100px,95vw); aspect-ratio:5 / 3;
  margin:0 auto;
  background-image:var(--bg); /* via style="--bg:url('.../Haus.png')" */
  background-size:contain; background-repeat:no-repeat; background-position:center;
  border-radius:18px; box-shadow:var(--shadow); overflow:hidden;
  background-color:#0f1115; border:1px solid var(--line);
}
.hotspot{ position:absolute; display:block; outline:none; z-index:2; }
.hotspot::after{
  content:""; position:absolute; inset:0; clip-path:inherit;
  border:2px solid var(--hotspot-normal); border-radius:12px;
  background:transparent; box-shadow:0 0 10px rgba(255,47,69,.35);
  transition:all .18s ease; pointer-events:none;
}
.hotspot:hover::after,
.hotspot:focus-visible::after{
  border-color:var(--hotspot-hover);
  background:rgba(255,90,107,.14);
  box-shadow:0 0 14px rgba(255,90,107,.55);
}
.rect{ clip-path: inset(0 round 12px); }

/* Hotspot-Koordinaten */
.roof{ left:12.6%; top:6.6%; width:66%; height:27.8%; clip-path: polygon(0% 100%, 50% 0%, 100% 100%); z-index:2; }
.rect.baeder{      left:17.2%; top:35.2%; width:28.1%; height:25.6%; }
.rect.lueftung{    left:45.7%; top:35.2%; width:27.8%; height:25.6%; }
.rect.heizung{     left:17.2%; top:66.9%; width:28.1%; height:25.5%; }
.rect.waermepumpe{ left:45.7%; top:66.9%; width:27.8%; height:25.5%; }

/********************
* Auftrags-Banner
********************/
.auftrag-banner-row{
  display:flex; justify-content:center; align-items:center;
  padding:10px 16px; background:#0f1115; border-bottom:1px solid var(--line);
}

/* ===============================
   Screenshots / Abnahme
================================= */
.screen-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:1000px){ .screen-grid{ grid-template-columns:1fr 1fr; } }

.screen-card{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:12px; padding:16px; box-shadow:var(--shadow);
}
.screen-card h3{ margin:0 0 12px; font-size:18px; }

.shot-row{ display:flex; flex-wrap:wrap; gap:12px; }
.shot{
  flex:0 0 260px; max-width:100%;
  border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:#0d0f13;
}
.shot img{ display:block; width:100%; height:auto; }
.shot figcaption{ font-size:12px; color:var(--muted); padding:6px 8px; text-align:center; }

.note{ display:block; margin-top:12px; }
.note span{ display:block; font-weight:700; margin-bottom:6px; color:#fff; }
.note textarea{
  width:100%; padding:10px 12px;
  border:1px solid var(--line-2); border-radius:10px;
  background:#0c0e12; color:var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/********************
* Dokumentationsseite
********************/
.auftrag-head h1{ margin:0 0 8px; }
.notice{
  border-radius:12px; padding:12px 14px; margin:12px 0;
  background:#0f1512; border:1px solid var(--line);
}
.notice.success{ background:rgba(25,195,125,.08); border-color:rgba(25,195,125,.35); color:#dcffe3; }
.notice.warn{ background:rgba(255,190,69,.10); border-color:rgba(255,190,69,.35); color:#fff1d8; }

.doc-section{ margin:32px 0; }
.doc-media{ position:relative; border-radius:var(--radius); background:#0f1115; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line); }
.doc-media img{ display:block; width:100%; height:auto; }
.doc-media.missing{ outline:2px dashed rgba(255,255,255,.35); background:#0d0f13; min-height:160px; }
.doc-media .missing-hint{ display:none; padding:12px; color:var(--muted); }
.doc-media.missing .missing-hint{ display:block; }

.doc-text{ margin-top:12px; color:var(--muted); }

/* Code-Auszüge */
.code-drop{ margin:14px 0; border:1px solid var(--line); border-radius:12px; background:#0f1115; }
.code-drop > summary{ cursor:pointer; padding:12px 14px; font-weight:700; }
.code{
  margin:0; padding:14px; overflow:auto; max-height:520px;
  background:#0b0c10; border-top:1px solid var(--line);
}
.code code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:13px; display:block; white-space:pre; color:#eaeef7;
}

/* Formular (Kundendaten & Abnahme) */
.doc-form{
  margin-top:8px; padding:16px; border-radius:16px;
  background:#0f1115; box-shadow:var(--shadow); border:1px solid var(--line);
}
.doc-form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.doc-form .grid .full{ grid-column:1/-1; }
.doc-form label span{ display:block; font-weight:700; margin-bottom:6px; }
.doc-form input[type="text"],
.doc-form input[type="email"],
.doc-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line-2);
  border-radius:12px; background:#0c0e12; color:var(--ink);
}
.doc-form input:focus,
.doc-form textarea:focus{
  outline:none; border-color:rgba(226,29,47,.5);
  box-shadow:0 0 0 3px rgba(226,29,47,.25);
}
.doc-form .check{ display:flex; gap:10px; align-items:center; margin:12px 0; color:var(--muted); }
.doc-form .form-actions{ display:flex; gap:10px; align-items:center; }

/* ===============================
   Buttons (einheitlich)
================================= */
.btn,
.btn-primary,
.contact-form button,
.contact-form input[type="submit"]{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:220px; height:44px; padding:0 16px;
  background:var(--brand) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important;
  font:inherit; font-weight:800; letter-spacing:.2px; white-space:nowrap;
  cursor:pointer; box-shadow:0 12px 26px rgba(226,29,47,.35) !important; text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover,
.btn-primary:hover,
.contact-form button:hover,
.contact-form input[type="submit"]:hover{
  transform:translateY(-2px); box-shadow:0 18px 34px rgba(226,29,47,.45) !important;
}
.btn.ghost{
  background:transparent !important; color:#fff !important;
  border:1.5px solid rgba(226,29,47,.55);
  box-shadow:none;
}
.btn.ghost:hover{ background:rgba(226,29,47,.10) !important; }

/* ===============================
   Leistungen: Heading & Einleitung
================================= */

.section-leistungen .h1,
.section-leistungen .title-lg{
  margin: 8px 0 18px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(28px, 5.2vw, 56px);
  color: #fff;
}
.section-leistungen .intro{
  margin: 6px 0 22px;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--muted);
}

/* ===============================
   Leistungen-Subnav – kompakt & mobil
   (Horizontales Wischen mit Snap + Edge-Fade via CSS-Mask)
================================= */
.leistungen-subnav{ margin:10px 0 18px; }
.leistungen-subnav ul{
  --gap: 10px;
  --fade: 24px;                         /* Breite des Fade-Rands */
  display:flex; gap:var(--gap); list-style:none; margin:0; padding:0 8px 6px;
  flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none;
  /* Edge-Fade (ohne JS) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.leistungen-subnav ul::-webkit-scrollbar{ display:none; }
.leistungen-subnav li{ flex:0 0 auto; scroll-snap-align:start; }

.leistungen-subnav li a{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; min-height:44px; border-radius:999px;
  background:#fff; color:#0e1116;
  border:1px solid var(--line);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
  font-weight:800; letter-spacing:.2px; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
  touch-action:pan-x;
}
.leistungen-subnav li a:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.24);
  border-color:rgba(226,29,47,.35);
}
.leistungen-subnav li.active a{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 28px rgba(226,29,47,.35);
}

/* Icon-Größen + Färbung aktiv */
.leistungen-subnav li a .pill-ic,
.leistungen-subnav li a img,
.leistungen-subnav li a svg{
  width:18px; height:18px; display:block; flex:0 0 18px; filter:none;
}
.leistungen-subnav li.active a .pill-ic,
.leistungen-subnav li.active a img,
.leistungen-subnav li.active a svg{
  filter:brightness(0) invert(1);
}

/* Tastatur-Fokus */
.leistungen-subnav li a:focus-visible{
  outline:4px solid rgba(226,29,47,.30);
  outline-offset:2px;
}

/* Kompakter auf schmalen Screens */
@media (max-width:520px){
  .leistungen-subnav ul{ --gap:8px; padding-bottom:4px; }
  .leistungen-subnav li a{ padding:9px 12px; min-height:42px; gap:8px; font-size:14px; }
}

/* ===============================
   Rechte Symbol-Leiste (weiße Icons)
================================= */
.symbol-liste,
.symbol-liste ul{ list-style:none; margin:0; padding:0; }
.symbol-liste{
  background:var(--bg-2); border-radius:18px; box-shadow:var(--shadow);
  padding:10px; border:1px solid var(--line);
}
.symbol-liste li+li{ margin-top:12px; }

.symbol-link{
  display:grid; grid-template-columns:48px 1fr; align-items:center; gap:12px;
  padding:10px 12px;
  border:1px solid var(--line); border-radius:12px; background:#0f1115;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  color:#fff;
}
.symbol-liste li a{ color:#fff; }
.symbol-liste li img,
.symbol-liste li svg{
  width:26px; height:26px; flex-shrink:0;
  filter: brightness(0) invert(1); /* -> weiß */
}
.symbol-liste li a:hover{
  background:rgba(255,255,255,0.1);
  color:#e50914;
}
.symbol-link:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(226,29,47,.25);
  border-color:rgba(226,29,47,.45);
  background:rgba(226,29,47,.10);
}
.symbol-liste img,
.symbol-link img{ width:48px !important; height:48px !important; display:block; object-fit:contain; }
.symbol-link span{ font-weight:800; letter-spacing:.2px; }

@media (max-width:520px){
  .symbol-liste{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px; }
  .symbol-liste li{ margin:0; }
  .symbol-link{ padding:12px; grid-template-columns:36px 1fr; }
  .symbol-link img{ width:36px !important; height:36px !important; }
  .symbol-link span{ font-size:0.95rem; }
}

/* ===============================
   Karten (Leistungen)
================================= */
.leistungen-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:22px; margin:24px 0 54px;
}
@media (max-width:900px){ .leistungen-grid{ grid-template-columns:1fr; } }

.card{
  background:#101318; border-radius:18px; border:1px solid var(--line);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 44px rgba(0,0,0,.6);
  border-color: rgba(226,29,47,.35);
}
.card-media{
  position:relative; display:block; aspect-ratio:16 / 9;
  background:linear-gradient(180deg, #181b21, #111318); overflow:hidden;
}
.card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); transition:transform .35s ease, filter .35s ease;
}
.card:hover .card-media img{ transform:scale(1.05); filter:contrast(1.06) saturate(1.06); }
.card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45)); opacity:0; transition:opacity .35s ease;
}
.card:hover .card-media::after{ opacity:1; }
.card-media .tag{
  position:absolute; left:12px; top:12px;
  background:var(--brand); color:#fff; font-weight:800; letter-spacing:.2px;
  padding:6px 10px; border-radius:999px; font-size:.85rem;
  box-shadow:0 10px 22px rgba(226,29,47,.35);
}
.card-body{ padding:16px 16px 18px; }
.card-body h2{ font-size:1.25rem; margin:2px 0 8px; letter-spacing:.2px; }
.card-body p{ margin:0 0 12px; color:var(--muted); }
.bullets{ margin:0 0 14px 0; padding:0 0 0 18px; color:#cfd5df; }
.bullets li{ margin:4px 0; }

/* ===============================
   Kontakt-CTA & Formular
================================= */
.kontakt-cta{
  text-align:center; background:#0f1115;
  border-radius:18px; border:1px solid var(--line);
  box-shadow:var(--shadow); padding:28px 18px;
}
.kontakt-cta h3{ margin:0 0 6px; font-size:1.35rem; }
.kontakt-cta p{ margin:6px 0; color:var(--muted); }
.kontakt-cta .btn{ margin-top:8px; }

/* Formular – jetzt mit WEISSEN Feldern */
.contact-form{
  max-width:720px; margin:18px auto 40px; padding:20px 18px 22px;
  background:#0f1115; border-radius:18px; border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.contact-form p{ margin:14px 0; color:var(--muted); }
.contact-form label{ font-weight:800; display:block; margin:0 0 6px; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="file"],
.contact-form textarea{
  width:100%;
  background:#fff;
  color:#141a23;
  border:1px solid #d6dae1;
  border-radius:12px;
  padding:12px 14px;
  font:inherit; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--brand);
  box-shadow:0 0 0 4px rgba(226,29,47,.22);
}

.privacy-check{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--muted); }
.privacy-check input{ margin-top:2px; width:18px; height:18px; accent-color:var(--brand); }

/* ===============================
   Footer
================================= */
.page-foot{
  text-align:center; padding:28px 16px 56px;
  color:var(--muted); font-size:0.92rem; border-top:1px solid var(--line);
}
.page-foot .legal-links{ margin-top:8px; }
.page-foot .legal-links a{ color:#e7e7ea; margin:0 6px; }
.page-foot .legal-links a:hover{ text-decoration:underline; color:var(--brand-2); }

/* ===============================
   Mobile-Nav Essentials (ohne Untermenü)
================================= */
.site-nav{ position:relative; z-index:100; }
.nav-toggle{
  position:absolute; top:8px; right:12px;
  width:44px; height:44px; border:0; background:transparent; cursor:pointer;
}
.nav-toggle .bar{
  display:block; width:24px; height:2px; margin:6px auto;
  background:#fff; border-radius:2px; transition:transform .2s, opacity .2s;
}
.nav-toggle.active .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.active .bar:nth-child(2){ opacity:0; }
.nav-toggle.active .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.site-nav .nav-list{
  display:none !important;
  position:absolute; top:100%; left:0; right:0;
  flex-direction:column; gap:6px;
  background:#0f1115; padding:12px;
  border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow);
}
.site-nav .nav-list.open{ display:flex !important; }
.site-nav .nav-list > li > a{ padding:12px 10px; border-radius:10px; }

@media (min-width:768px){
  .nav-toggle{ display:none; }
  .site-nav .nav-list{
    display:flex !important; position:static;
    flex-direction:row; gap:14px; background:transparent;
    padding:0; border:0; box-shadow:none;
  }
}

/* ===============================
   Touch-Feedback
================================= */
@media (hover:none){
  .hotspot:active::after{
    background:rgba(255,90,107,.28);
    border-color:var(--hotspot-hover);
    box-shadow:0 0 0 3px rgba(255,90,107,.5);
  }
  .symbol-link:active{
    transform: scale(.98);
    background:rgba(226,29,47,.12);
    border-color: rgba(226,29,47,.45);
  }
}


.section-leistungen h1{
  font-size: clamp(28px, 3.8vw, 44px);  /* vorher max 56px */
  line-height: 1.1;
}

/* === Header: Logo über der Headline und zentriert === */
.brand { text-align:center; }
.brand-link { flex-direction:column; align-items:center; gap:8px; }
.brand-logo { margin:0 auto; }

/* === Mobile-Navi: Sicherheitsnetz (falls Styles überschrieben wurden) === */
.site-nav { position: relative; z-index: 100; }
.nav-toggle { position:absolute; top:8px; right:12px; width:44px; height:44px; background:transparent; border:0; }
.nav-toggle .bar{ display:block; width:24px; height:2px; margin:6px auto; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s; }
.nav-toggle.active .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.active .bar:nth-child(2){ opacity:0; }
.nav-toggle.active .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.site-nav .nav-list{
  display:none !important;
  position:absolute; top:100%; left:0; right:0;
  flex-direction:column; gap:6px; padding:12px;
  background:#0f1115; border:1px solid var(--line); border-radius:12px;
  box-shadow: var(--shadow);
}
.site-nav .nav-list.open{ display:flex !important; }
@media (min-width:768px){
  .nav-toggle{ display:none; }
  .site-nav .nav-list{ display:flex !important; position:static; flex-direction:row; gap:14px; background:transparent; padding:0; border:0; box-shadow:none; }
}

/* === Haus-Bereich: nicht über den roten Rahmen hinaus === */
.haus-layout{ overflow:hidden; }                    /* schneidet Überstände (Schatten) ab */
.haus-layout .house-map{
  width:100%; max-width:100%;
  border-radius:12px;          /* Innenradius passend zum roten Container */
  border:1px solid var(--line);
  box-shadow:none;             /* Schatten entfernt, sonst ragt optisch raus */
  margin:0 auto;
}

/* ===== Simple, wrap-fähige Hauptnavigation unter der Tagline ===== */
.simple-nav{
  max-width:1200px;
  margin: 8px auto 10px;         /* Abstand zur Tagline & zum Slider */
  padding: 0 16px 6px;
  display:flex;
  justify-content:center;        /* mittig 👍 */
  gap:12px;
  flex-wrap:wrap;                /* bricht auf Handy um */
  border-bottom: 1px solid var(--line); /* dezente Trennlinie */
}
.simple-nav a{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.30);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.simple-nav a:hover{
  transform: translateY(-1px);
  background: rgba(226,29,47,.12);
  border-color: rgba(226,29,47,.30);
  box-shadow: 0 10px 24px rgba(226,29,47,.25);
}
.simple-nav a.active,
.simple-nav a[aria-current="page"]{
  background: var(--brand);
  border-color: transparent;
  color:#fff;
  box-shadow: 0 12px 28px rgba(226,29,47,.35);
}
/* Fokus sichtbar für Tastatur */
.simple-nav a:focus-visible{
  outline: 3px solid rgba(226,29,47,.45);
  outline-offset: 2px;
}

/* Kompakter auf sehr schmalen Screens */
@media (max-width:520px){
  .simple-nav{ gap:10px; }
  .simple-nav a{ padding:9px 14px; font-size:15px; }
}
@media (max-width:380px){
  .simple-nav a{ padding:8px 12px; font-size:14px; }
}

/* ===============================
   Legal-Seiten (Impressum / Datenschutz)
   Rote Außenbox + weiße Karte
   - Deckt 2 Markup-Varianten ab (neu & Fallback)
================================= */

/* Gemeinsamer Außenabstand */
.section-legal,
.container.legal{
  max-width:1200px;
  margin:0 auto;
  padding:18px 16px 40px;
}

/* === VARIANTE A: Neu mit .legal-wrap + .legal-card === */

.section-legal .legal-wrap{
  background:#e50914;                 /* rote Außenbox */
  border-radius:16px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}

.section-legal .legal-card{
  background:#fff;                    /* weiße Innenkarte */
  color:#0f1115;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:22px 18px;
}

/* Kopfbereich (Titel + Datum) */
.section-legal .legal-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
  margin:0 0 10px;
}
.section-legal .legal-head h1{
  margin:0; font-weight:900; letter-spacing:.2px;
  font-size:clamp(24px,3.2vw,34px);
  color:#0b0c0f;
}
.section-legal .legal-head .stamp{ margin-left:auto; font-size:.9rem; color:#6b7280; }

/* Zwei-Spalten-Grid für Abschnitte (optional) */
.section-legal .legal-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:880px){ .section-legal .legal-grid{ grid-template-columns:1fr 1fr; } }

.section-legal .legal-box{
  background:#fff; border:1px solid #eef1f5; border-radius:12px; padding:14px 16px;
}
.section-legal .legal-box h2{ margin:0 0 8px; font:800 1.1rem/1.2 system-ui; color:#111827; }
.section-legal .legal-box p,
.section-legal .legal-box li,
.section-legal .legal-card p{ margin:6px 0; color:#1f2937; line-height:1.55; }
.section-legal .legal-box ul{ margin:6px 0 0 0; padding:0 0 0 18px; }

.section-legal .legal-card a{ color:#e21d2f; text-decoration:none; }
.section-legal .legal-card a:hover{ text-decoration:underline; }

.section-legal .legal-notes{ margin-top:16px; padding-top:12px; border-top:1px dashed #e5e7eb; color:#374151; }

/* === VARIANTE B: Fallback (kein Wrapper, nur <main class="container legal">) === */
/* baut die rote Außenbox + weiße Fläche automatisch via :has() */

.container.legal:not(:has(.legal-wrap)){
  background:#e50914;
  border-radius:16px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}

/* direkte Kinder werden zur weißen Karte */
.container.legal:not(:has(.legal-wrap)) > *{
  background:#fff;
  color:#0f1115;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:22px 18px;
  margin:0;               /* verhindert doppelten Außenabstand */
}

/* kosmetische Details im Fallback */
.container.legal:not(:has(.legal-wrap)) > h1:first-child{ margin-top:0; }
.container.legal:not(:has(.legal-wrap)) a{ color:#e21d2f; }
.container.legal:not(:has(.legal-wrap)) a:hover{ text-decoration:underline; }