/* ohne-blau-2710 (v2510-57, Gman 27.10.2026 14:38): NEUTRALES dunkles Overlay (Schwarz) statt Dunkelblau, dezenter als vor v54.
   Gilt auf allen Heroes und auf Kacheln mit Text im Bild. Ueberschreibt die alten blauen Verlaeufe; Geometrie wie vorher.
   Wert anpassen = nur die rgba(0,0,0,x)-Werte hier aendern. Zuruecksetzen auf Blau = Einbindung dieser Datei loeschen.
   Navy-Flaechen ohne Bild dahinter (Seitenflaechen, Footer, Buttons, Sektionen) bleiben unveraendert. */

/* 1. Hero, Desktop (auf dem Handy bleibt es wie vor v54) */
@media (min-width:768px){
 .hero-verlauf{background:linear-gradient(to top right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.42) 38%,rgba(0,0,0,.12) 62%,rgba(0,0,0,0) 75%)!important}
 .hero-verlauf-links{background:linear-gradient(to right,rgba(0,0,0,.52) 0%,rgba(0,0,0,.30) 38%,rgba(0,0,0,0) 62%)!important}
 .hero .hero-verlauf{background:linear-gradient(to top right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.40) 38%,rgba(0,0,0,.16) 64%,rgba(0,0,0,.04) 80%)!important}
 .hero .hero-verlauf-links{background:linear-gradient(to right,rgba(0,0,0,.68) 0%,rgba(0,0,0,.60) 40%,rgba(0,0,0,.48) 66%,rgba(0,0,0,.20) 88%,rgba(0,0,0,0) 100%)!important}
 .hero-inhalt::before{background:radial-gradient(closest-side,rgba(0,0,0,.70) 0%,rgba(0,0,0,.58) 45%,rgba(0,0,0,.30) 75%,rgba(0,0,0,0) 100%)!important}
}

/* 2. Weitere Overlays ueber Bildern */
.rg-schleier{height:86%!important;background:linear-gradient(rgba(0,0,0,.78) 0%,rgba(0,0,0,.70) 52%,rgba(0,0,0,.40) 80%,rgba(0,0,0,0))!important}
@media (max-width:767px){.rg-schleier{height:min(100vw,520px)!important;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0) 30%)!important}}
.fam-verlauf,.fam-kachel:hover .fam-verlauf,.fam-kachel:focus-visible .fam-verlauf{background:linear-gradient(0deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.62) 36%,rgba(0,0,0,.14) 70%,rgba(0,0,0,0) 100%)!important}
.cap{background-image:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.70) 62%,rgba(0,0,0,.30) 88%,rgba(0,0,0,0) 100%)!important}
.ug-gross .cap{padding-top:96px!important;background-image:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.78) 55%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.15) 100%)!important}
.team-rot figcaption{background:linear-gradient(to top,rgba(0,0,0,.70),rgba(0,0,0,.30) 70%,rgba(0,0,0,0))!important}
.bs-blatt::after{background:#000!important;opacity:calc(var(--bs-p,0) * .30)!important}

/* 3. Kacheln mit Text im Bild */
.tafel-verlauf{background:linear-gradient(0deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.62) 32%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.12) 75%,rgba(0,0,0,0) 100%)!important}
.tafel-verlauf::after{background:linear-gradient(0deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,0) 70%)!important}
.folge-verlauf{background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.54) 38%,rgba(0,0,0,0) 64%),linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,0) 45%)!important}
.folge-inhalt::before{background:radial-gradient(ellipse 66% 58% at 30% 45%,rgba(0,0,0,.70),rgba(0,0,0,0) 72%)!important}
@media (max-width:767px){
 .folge-verlauf{background:linear-gradient(0deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.64) 45%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.2) 100%)!important}
 .folge-inhalt::before{background:radial-gradient(ellipse 80% 60% at 30% 70%,rgba(0,0,0,.36),rgba(0,0,0,0) 75%)!important}
}

/* 4. Ausnahmen und Feinheiten */
.bx.wahl:not(:has(>picture)) .cap{background-image:none!important}
.cap .tl-pf{color:#C65A30!important}
.hero .akzent,.hero-claim .akzent{color:#C65A30!important}
@media (min-width:768px){
 .hero .brotkrume{position:relative;z-index:1}
 .hero .brotkrume>*{position:relative;z-index:1}
 .hero .brotkrume::before{content:"";position:absolute;inset:-28px -80px -28px -50px;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.82),rgba(0,0,0,.60) 60%,rgba(0,0,0,0))}
}
@media (max-width:767px){
 .fam-kachel{min-height:150px}
 .fam-verlauf,.fam-kachel:hover .fam-verlauf,.fam-kachel:focus-visible .fam-verlauf{background:linear-gradient(0deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 55%,rgba(0,0,0,.52) 100%)!important}
 .tafel-verlauf,.tafel-verlauf::after{background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 45%,rgba(0,0,0,.60) 75%,rgba(0,0,0,.42) 100%)!important}
 .tafel-verlauf::after{background:none!important}
 #wuensche .weg-tafel .tafel-verlauf{background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 45%,rgba(0,0,0,.60) 75%,rgba(0,0,0,.42) 100%)!important}
}

/* 5. Feintuning Lesbarkeit kleiner Texte (v2510-57) */
.bx:has(>picture) .cap .ug-alt{color:rgba(246,241,232,.97)!important}
.bx:has(>picture) .cap .ug-alt,.bx:has(>picture) .cap small,.bx:has(>picture) .cap .tl-pf{text-shadow:0 1px 3px rgba(0,0,0,.75)}
.hero .brotkrume,.hero .brotkrume a{text-shadow:0 0 4px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7)}
.folge-inhalt small,.folge-inhalt .t3+*{text-shadow:0 1px 3px rgba(0,0,0,.7)}
@media (max-width:767px){.team-rot figcaption{background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.5) 75%,rgba(0,0,0,.2))!important}}
.folge-kz dt,.folge-kz dd{text-shadow:0 1px 3px rgba(0,0,0,.75)}

/* 6. Beckenplan-Heroes (hellgrauer Plan statt Foto): Bild selbst neutral abdunkeln statt Verlaeufe, Plan bleibt sichtbar */
.hero-plan .hero-img{filter:brightness(.20)}
.hero-plan .hero-verlauf,.hero-plan .hero-verlauf-links{display:none!important}
.hero-plan .hero-inhalt::before,.hero-plan .brotkrume::before{display:none!important}

/* 7. Ratgeber-Kopf: Akzentwort hell, Bildunterschrift auf dunklem Grund */
.rg-hero h1 .akzent{color:#C65A30!important}
/* v2510-58: Schleier der Ratgeber-Köpfe (Desktop) minimal dunkler, damit Terracotta im grossen Titel mindestens 3:1 erreicht */
@media (min-width:768px){.rg-schleier{background:linear-gradient(rgba(8,20,35,.97) 0%,rgba(8,20,35,.94) 55%,rgba(8,20,35,.6) 82%,rgba(8,20,35,0))!important}}
.rg-hero-fuss{background:rgba(0,0,0,.72);padding:3px 9px;border-radius:3px;text-shadow:none}

/* v2510-62 (Gman 27.10.2026): «Überflur» und «Unterflur» (nicht «Rollladen») zentral in Terracotta #C65A30, fett (4.28:1 auf Weiss).
   Klasse .ueflur im Text, nicht in Attributen/Titel/Schema. Kontrast gemessen pro Stelle (familien62/kontrast62b_roh.json), daraus die Ergänzung:
   -k: Creme/Tönung (#C65A30 nur 3.8:1) -> #A3421D (6.26 auf Weiss, 5.6 auf Creme)
   -m: mittelhelle Fläche/Foto-Beschriftung -> var(--terra-dunkel) #8B3818 (v2510-68, Palette; 5.95:1 auf Sand, 6.97:1 auf Creme)
   -d: dunkle Fläche oder helle Schrift auf Foto/Navy (#C65A30 nur 3.2:1) -> Creme #F6F1E8 (12.25:1 auf Navy #122E4D, v2510-68, kein Pfirsich) */
.ueflur{color:#C65A30;font-weight:700}
h1 .ueflur,h2 .ueflur{font-weight:inherit}
.ueflur.ueflur-k{color:#A3421D}
.ueflur.ueflur-m{color:var(--terra-dunkel,#8B3818)}
.ueflur.ueflur-d{color:#F6F1E8}

/* ===== hero-aplus-2710 (angehaengt) ===== */
/* hero-aplus-2710 (v67): Hero-Lesbarkeit "A+" (Gman 27.10.2026 20:32/20:36)
   EINE Abdunkelschicht pro Hero: gerichteter Navy-Verlauf von unten (rgb 18,46,77 = --navy #122E4D, keine neue Farbe),
   Text unten links, Bild oben frei, weicher Textschatten, Akzentwort Creme mit Terracotta-Unterstrich (#C65A30).
   Einbindung: NACH css/ohne-blau-2710.css laden (oder Inhalt ans Ende von ohne-blau-2710.css haengen). start.css/kopf-fuss.css bleiben unberuehrt.
   Zuruecksetzen: Datei entfernen. Ausgenommen: .hero-plan (Beckenplan), .hero-kompakt (Beige-Kopf ohne Bild), .hero-stage (Konfigurator). */

/* 1. Alte Schichten abschalten (ohne-blau-2710.css Z. 10 Diagonal, Z. 11 Links, Z. 12 Radial hinter Text, Z. 41 Brotkrume-Fleck) */
html body .hero:not(.hero-plan) .hero-verlauf-links{display:none!important}
html body .hero:not(.hero-plan) .hero-inhalt::before,
html body .hero:not(.hero-plan) .brotkrume::before{content:none!important;display:none!important;background:none!important}
html body .hero:not(.hero-plan) .hero-bild img,html body .hero:not(.hero-plan) img.hero-img{filter:none!important}

/* 2. Die eine Schicht */
html body .hero:not(.hero-plan) .hero-verlauf{display:block!important;opacity:1!important;
  background:linear-gradient(to top,rgba(18,46,77,.90) 0%,rgba(18,46,77,.80) 55%,rgba(18,46,77,.36) 74%,rgba(18,46,77,.10) 88%,rgba(18,46,77,0) 100%)!important}

/* 3. Text unten links, kompakter, weicher Schatten */
@media (min-width:768px){
 html body .hero:not(.hero-plan) .hero-inhalt{top:auto!important;bottom:44px!important;transform:none!important}
 html body .hero:not(.hero-plan) .hero-inhalt h1{font-size:clamp(36px,4.4vw,58px)!important;line-height:1.02!important}
 html body .hero:not(.hero-plan) .hero-fakt{margin-top:14px!important;font-size:18px!important}
 html body .hero:not(.hero-plan) .hero-aktionen{margin-top:18px!important}
}
html body .hero:not(.hero-plan) .hero-inhalt h1,
html body .hero:not(.hero-plan) .hero-inhalt .hero-fakt,
html body .hero:not(.hero-plan) .hero-inhalt .hero-unter,
html body .hero:not(.hero-plan) .hero-inhalt .vertrauen,
html body .hero:not(.hero-plan) .hero-inhalt .hero-sterne{text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 12px rgba(0,0,0,.35)!important}

/* 4. Akzentwort: Creme, ohne Unterstrich, Gman 28.10. (statt Terracotta-Schrift: Terra auf Navy nur ca. 3:1 und darunter) */
html body .hero:not(.hero-plan) .akzent,html body .hero:not(.hero-plan) h1 .akzent,html body .hero:not(.hero-plan) h1 .ueflur,html body .hero-plan h1 .akzent,html body .rg-hero h1 .akzent{
  color:#F6F1E8!important}

/* 5. Handy: Bild fuellt den Hero, Text unten; der Verlauf haengt am Textblock (immer direkt hinter dem Text, egal wie lang er ist)
      (ersetzt die blaue Flaeche aus barsetto-2310.css Z. 45-52) */
@media (max-width:767px){
 html body .hero:not(.hero-plan):has(>.hero-bild):has(.hero-inhalt){display:flex!important;flex-direction:column!important;justify-content:flex-end!important;position:relative!important;background:#122E4D!important;overflow:hidden}
 html body .hero:not(.hero-plan):has(>.hero-bild) .hero-bild{position:absolute!important;inset:0!important;aspect-ratio:auto!important;height:100%!important}
 html body .hero:not(.hero-plan):has(>.hero-bild) .hero-verlauf{display:none!important}
 html body .hero:not(.hero-plan):has(>.hero-bild) .hero-inhalt{position:relative!important;z-index:1!important;top:auto!important;bottom:auto!important;transform:none!important;padding-top:230px!important;background:none!important}
 html body .hero:not(.hero-plan):has(>.hero-bild):has(.hero-inhalt) .hero-inhalt::before{content:""!important;display:block!important;position:absolute!important;top:0!important;bottom:0!important;left:-100vw!important;right:-100vw!important;z-index:-1!important;pointer-events:none!important;
   background:linear-gradient(to bottom,rgba(18,46,77,0) 0,rgba(18,46,77,.42) 110px,rgba(18,46,77,.82) 230px,rgba(18,46,77,.88) 100%)!important}
 html body .hero:not(.hero-plan) .hero-inhalt h1{font-size:34px!important}
}

/* 6. Ratgeber-Kopf (.rg-hero, 31 Seiten): Text steht oben, Verlauf deshalb von OBEN (ersetzt ohne-blau-2710.css Z. 16/17/67 mit .97 Dunkelnavy rgb 8,20,35) */
@media (min-width:768px){
 html body .rg-hero .rg-schleier{top:0!important;bottom:auto!important;height:100%!important;
   background:linear-gradient(to bottom,rgba(18,46,77,.90) 0%,rgba(18,46,77,.80) 52%,rgba(18,46,77,.40) 72%,rgba(18,46,77,.10) 88%,rgba(18,46,77,0) 100%)!important}
}