/* 01.11.2026 Foto frei, Text auf hellem Grund.
   Ratgeber-Kopf, Modellkarten (wie Compass), Bauarten ab 1024 px,
   Projektstreifen auf allen Seiten. Helden und Beckenpläne bleiben. */

/* --- Ratgeber: Schleier weg, Titel auf Creme --- */
html body .rg-hero .rg-schleier{display:none!important;background:none!important}
html body .rg-hero{color:#122E4D!important}
html body .rg-hero .rg-hero-t{
  background:rgba(246,241,232,.97)!important;color:#122E4D!important;
  border-radius:16px;box-shadow:0 14px 44px rgba(18,46,77,.22);z-index:2
}
html body .rg-hero .rg-kicker{color:#A3421D!important;text-shadow:none!important}
html body .rg-hero h1,
html body .rg-hero .rg-unter,
html body .rg-hero .rg-brot,
html body .rg-hero .rg-brot a{color:#122E4D!important;text-shadow:none!important}
html body .rg-hero .rg-unter{color:#2B3642!important}
html body .rg-hero h1 .akzent,
html body .rg-hero h1 .ueflur{color:#A3421D!important}
html body .rg-hero .rg-brot a{border-bottom-color:rgba(18,46,77,.35)!important}
@media (min-width:768px){
  html body .rg-hero{background:#122E4D}
  html body .rg-hero .rg-hero-t{
    top:auto!important;bottom:44px!important;left:48px!important;right:auto!important;
    max-width:min(640px,calc(100% - 240px))!important;padding:28px 36px!important
  }
  html body .rg-hero .rg-hero-fuss{
    position:absolute!important;right:28px!important;bottom:28px!important;left:auto!important;top:auto!important;
    margin:0!important;z-index:3;background:rgba(246,241,232,.92)!important;color:#122E4D!important;
    padding:4px 10px!important;border-radius:4px;text-shadow:none!important
  }
}
@media (max-width:767px){
  html body .rg-hero{
    display:block!important;height:auto!important;min-height:0!important;
    padding:0!important;background:#F6F1E8!important;overflow:hidden
  }
  html body .rg-hero .rg-hero-bild{
    position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;
    left:auto!important;right:auto!important;width:100%!important;height:min(118vw,560px)!important;
    object-fit:cover!important
  }
  html body .rg-hero svg.z{
    position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;
    width:100%!important;height:min(118vw,560px)!important;pointer-events:none
  }
  html body .rg-hero .rg-hero-t{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    max-width:none!important;margin:0!important;padding:24px 24px 8px!important;
    background:transparent!important;border-radius:0;box-shadow:none
  }
  html body .rg-hero .rg-hero-fuss{
    position:relative!important;right:auto!important;bottom:auto!important;left:auto!important;
    margin:0!important;padding:0 24px 28px!important;background:transparent!important;
    color:#55606E!important;text-shadow:none!important
  }
}

/* --- Modellkarten: Foto oben, Name darunter. Compass-Übersicht hat die gleiche Regel genauer. --- */
html body a.fam-kachel{
  display:flex!important;flex-direction:column!important;aspect-ratio:auto!important;
  height:auto!important;min-height:0!important;overflow:hidden;border-radius:14px;
  background:#fff!important;color:#122E4D!important;border:1px solid rgba(18,46,77,.1);text-decoration:none
}
html body a.fam-kachel .fam-verlauf{display:none!important;background:none!important}
html body a.fam-kachel .fam-bild{
  position:relative!important;inset:auto!important;width:100%!important;height:auto!important;
  aspect-ratio:16/10;flex:none;overflow:hidden
}
html body a.fam-kachel .fam-bild picture,
html body a.fam-kachel .fam-bild img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
html body a.fam-kachel .fam-bild img{object-fit:cover;transform:none!important;filter:none!important;opacity:1!important}
html body a.fam-kachel .fam-inhalt{
  position:relative!important;inset:auto!important;left:auto!important;right:auto!important;
  top:auto!important;bottom:auto!important;padding:14px 16px 16px;background:#fff;color:#122E4D;
  display:flex;flex-direction:column;gap:4px
}
html body a.fam-kachel .fam-name{color:#122E4D!important;font-size:1.15rem;margin:0;text-shadow:none}
html body a.fam-kachel .fam-mass,
html body a.fam-kachel .fam-alt{color:#55606E!important;font-size:.9rem;line-height:1.35;margin:0;text-shadow:none}
html body a.fam-kachel .fam-satz{
  max-height:none!important;opacity:1!important;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;color:#55606E!important;
  font-size:.9rem;line-height:1.35;margin:0!important;text-shadow:none
}
html body a.fam-kachel .fam-chips{max-height:none!important;opacity:1!important;overflow:visible;margin-top:8px}
html body a.fam-kachel .fam-chips li{color:#122E4D;border-color:rgba(18,46,77,.28)}
html body a.fam-kachel .tl{color:#A3421D!important}
html body a.fam-kachel .kt-mehr{color:#A3421D!important;opacity:1}
@media (max-width:767px){
  html body a.fam-kachel .fam-inhalt{padding:10px 12px 12px}
  html body a.fam-kachel .fam-name{font-size:.98rem!important}
  html body a.fam-kachel .fam-mass{font-size:.8rem!important}
  html body a.fam-kachel .fam-satz,
  html body a.fam-kachel .fam-chips,
  html body a.fam-kachel .kt-mehr{display:none!important}
}

/* --- Bauarten, Desktop: Foto 16:10, Name darunter --- */
@media (min-width:1024px){
  html body #bauarten .tafeln{height:auto!important;min-height:0!important;align-items:stretch!important}
  html body #bauarten .weg-tafel{
    display:flex!important;flex-direction:column!important;aspect-ratio:auto!important;
    height:auto!important;min-height:0!important;flex-grow:1!important;overflow:hidden!important;
    background:#F6F1E8!important;color:#122E4D!important;border-radius:12px!important
  }
  html body #bauarten .tafeln:hover .weg-tafel,
  html body #bauarten .weg-tafel:hover,
  html body #bauarten .weg-tafel:focus-visible{flex-grow:1!important}
  html body #bauarten .weg-tafel .tafel-bild{
    position:relative!important;inset:auto!important;flex:none!important;width:100%!important;
    height:auto!important;aspect-ratio:16/10!important;overflow:hidden!important
  }
  html body #bauarten .weg-tafel .tafel-bild picture,
  html body #bauarten .weg-tafel .tafel-bild img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important
  }
  html body #bauarten .weg-tafel .tafel-bild img{transform:none!important}
  html body #bauarten .tafel-verlauf,
  html body #bauarten .tafel-verlauf::after{display:none!important;background:none!important}
  html body #bauarten .tafel-inhalt{
    position:static!important;left:auto!important;right:auto!important;bottom:auto!important;
    padding:14px 18px 18px!important;background:transparent!important
  }
  html body #bauarten .tafel-inhalt .t3{
    color:#122E4D!important;text-shadow:none!important;white-space:normal!important;margin:0!important
  }
}

/* --- Projektstreifen ab 1024 px: dieselbe Creme-Karte wie die Startseite --- */
@media (min-width:1024px){
  html body #projekte{background:#F6F1E8!important}
  html body #projekte .folge-panel{
    height:calc(100svh - var(--menue-h, 64px))!important;min-height:0!important;background:#F6F1E8!important
  }
  html body #projekte .folge-panel .folge-bild{
    position:absolute!important;inset:auto!important;
    top:calc((100% - 75svh) / 2)!important;bottom:auto!important;height:75svh!important;
    left:max(var(--rand,64px),calc((100% - 1280px) / 2 + var(--rand,64px)))!important;
    right:max(var(--rand,64px),calc((100% - 1280px) / 2 + var(--rand,64px)))!important;
    width:auto!important;border-radius:16px!important;overflow:hidden!important
  }
  html body #projekte .folge-panel .folge-bild picture,
  html body #projekte .folge-panel .folge-bild img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important
  }
  html body #projekte .folge-verlauf,
  html body #projekte .folge-inhalt::before{display:none!important;background:none!important}
  html body #projekte .folge-inhalt{
    position:absolute!important;z-index:2;
    left:calc(max(var(--rand,64px),calc((100% - 1280px) / 2 + var(--rand,64px))) + 28px)!important;
    right:auto!important;top:auto!important;
    bottom:calc((100% - 75svh) / 2 + 28px)!important;
    height:auto!important;width:min(460px,calc(100% - 64px))!important;max-width:460px!important;
    margin:0!important;padding:18px 22px 16px!important;
    background:rgba(246,241,232,.96)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    border-radius:8px;justify-content:flex-start!important
  }
  html body #projekte .folge-ort{color:#122E4D!important;font-size:40px!important;line-height:1.05!important;margin:0!important;text-shadow:none!important}
  html body #projekte .folge-meta{color:#2B3642!important;text-shadow:none!important;opacity:1!important}
  html body #projekte .folge-nr,
  html body #projekte .folge-kz,
  html body #projekte .folge-kz dt,
  html body #projekte .folge-kz dd{color:#122E4D!important;text-shadow:none!important}
  html body #projekte .folge-inhalt .tl,
  html body #projekte .folge-inhalt .tl.tl-hell{color:#A3421D!important;text-shadow:none!important}
}

/* --- Projektstreifen unter 1024 px: Foto oben, Text auf Creme darunter --- */
@media (max-width:1023px){
  html body #projekte .folge-panel{background:#F6F1E8!important}
  html body #projekte .folge-link{display:flex!important;flex-direction:column;height:auto!important;color:#122E4D!important}
  html body #projekte .folge-panel .folge-bild{
    position:relative!important;inset:auto!important;flex:none!important;
    height:min(400px,58svh)!important;min-height:200px!important;
    width:100%!important;overflow:hidden
  }
  html body #projekte .folge-panel .folge-bild picture,
  html body #projekte .folge-panel .folge-bild img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important
  }
  html body #projekte .folge-verlauf,
  html body #projekte .folge-inhalt::before{display:none!important;background:none!important}
  html body #projekte .folge-inhalt{
    position:relative!important;height:auto!important;flex:none;
    padding:16px 16px 18px!important;justify-content:flex-start!important;
    background:#F6F1E8!important;color:#122E4D!important
  }
  html body #projekte .folge-inhalt>*{opacity:1!important}
  html body #projekte .folge-ort,
  html body #projekte .folge-nr,
  html body #projekte .folge-kz,
  html body #projekte .folge-kz dt,
  html body #projekte .folge-kz dd{color:#122E4D!important;text-shadow:none!important}
  html body #projekte .folge-meta{color:#55606E!important;text-shadow:none!important;opacity:1!important}
  html body #projekte .folge-inhalt .tl,
  html body #projekte .folge-inhalt .tl.tl-hell{color:#A3421D!important;text-shadow:none!important}
}

/* K4 2026-11-11: Konfigurator-Knopf im Hero immer weiss auf Terra (Kontrast 6.3:1) */
html body .hero .hero-aktionen .btn:first-child,
html body .hero .hero-aktionen .btn:first-child *,
html body .hero .hero-aktionen .btn.konf-knopf,
html body .hero .hero-aktionen .btn.konf-knopf *,
html body #kopf.hero .hero-inhalt .hero-aktionen .btn:first-child,
html body #kopf.hero .hero-inhalt .hero-aktionen .btn:first-child *,
html body #kopf.hero .hero-inhalt .hero-aktionen .btn.konf-knopf,
html body #kopf.hero .hero-inhalt .hero-aktionen .btn.konf-knopf *{color:#fff!important}