/* Ein gemeinsamer, nahtloser Bildverlauf für Startseite und Unterseiten.
   Bildgröße, Bildausschnitt und Position bleiben bei den jeweiligen Heros. */
:root{
 --fl-hero-navy:#071522;
 --fl-hero-fade:linear-gradient(90deg,#071522 0%,rgba(7,21,34,.98) 32%,rgba(7,21,34,.90) 47%,rgba(7,21,34,.22) 68%,rgba(7,21,34,.08) 100%);
}
#inhalt .unified-hero.unified-hero--background:before{
 background:var(--fl-hero-fade)!important;
 pointer-events:none;
}
#inhalt .unified-hero.unified-hero--background img.unified-backdrop{
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%)!important;
 mask-image:linear-gradient(90deg,transparent 0%,#000 12%)!important;
}
#start.claude-hero .hero-shade{
 background:var(--fl-hero-fade)!important;
 pointer-events:none;
}
@media(max-width:900px){
 #inhalt .unified-hero.unified-hero--background{
  --fl-hero-art-height:min(390px,calc(100vw / var(--hero-ratio)));
 }
 #inhalt .unified-hero.unified-hero--couple{--fl-hero-art-height:390px}
 #inhalt .unified-hero.unified-hero--background:not(.unified-hero--simple):before{
  background:linear-gradient(180deg,#071522 0%,#071522 calc(100% - var(--fl-hero-art-height) - 12px),rgba(7,21,34,.35) calc(100% - var(--fl-hero-art-height) + 64px),rgba(7,21,34,.06) 100%)!important;
 }
 #inhalt .unified-hero.unified-hero--background:not(.unified-hero--simple) img.unified-backdrop{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%)!important;
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%)!important;
 }
}
@media(max-width:600px){
 #inhalt .unified-hero.unified-hero--couple{--fl-hero-art-height:325px}
}
@media(max-width:760px){
 #start.claude-hero .hero-shade{
  background:linear-gradient(90deg,rgba(7,21,34,.96),rgba(7,21,34,.86) 58%,rgba(7,21,34,.68))!important;
 }
}