/* Globale Hero-Basis: gemeinsamer Vertrag, flexible Varianten. */
.lhb-hero {
  position: relative;
  min-width: 0;
  isolation: isolate;
}
.lhb-hero__content,
.lhb-hero__media { min-width: 0; }
.lhb-hero__media img,
.lhb-hero__media video,
.lhb-hero__media iframe { display: block; max-width: 100%; }
.lhb-hero__content > :first-child { margin-top: 0; }
.lhb-hero__content > :last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .lhb-hero { width: 100%; }
  .lhb-hero__content,
  .lhb-hero__media { width: 100%; }
}

/* Komponentenvertrag 1.1: Rollen statt Seitennamen. */
.lhb-hero__primary,
.lhb-hero__secondary {
  min-width: 0;
  min-height: 0;
}
.lhb-hero--split {
  overflow: hidden;
}
.lhb-hero__media,
.lhb-hero__secondary.lhb-hero__media {
  position: relative;
}
/* Nur das eigentliche Medium darf die Medienflaeche fuellen. Captions,
   Navigationen und Steuerelemente bleiben eigenstaendige Ebenen. */
.lhb-hero__media > img,
.lhb-hero__media > picture,
.lhb-hero__media > video,
.lhb-hero__media > iframe,
.lhb-hero__media > picture > img {
  max-width: 100%;
}
.lhb-hero--workfield-home .lhb-hero__media > img,
.lhb-hero--workfield-home .lhb-hero__media > picture,
.lhb-hero--workfield-home .lhb-hero__media > video,
.lhb-hero--workfield-home .lhb-hero__media > picture > img {
  height: 100%;
  object-fit: cover;
}

/* Komponentenvertrag 1.2: kompakter Uebersichts-Hero.
   Publikationen, Archiv und Veranstaltungen verwenden dieselbe Struktur,
   Typografie und responsive Logik. Seitenspezifische Abweichungen sind
   innerhalb dieser Variante unzulaessig. */
.lhb-hero--overview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  height: 252px;
  min-height: 252px;
  border-bottom: var(--linie) solid var(--lhb-line-color);
  overflow: hidden;
}
.lhb-hero--overview > .lhb-hero__primary,
.lhb-hero--overview > .lhb-hero__secondary {
  padding: 24px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}
.lhb-hero--overview > .lhb-hero__primary {
  border-right: var(--linie) solid var(--lhb-line-color);
}
.lhb-hero--overview .lhb-heading--hero {
  margin: 0;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: .94;
  text-transform: uppercase;
}
.lhb-hero--overview .lhb-hero__lead {
  margin: 0;
  max-width: 680px;
  font-family: var(--lhb-font-body);
  font-size: 17px;
  line-height: 1.58;
  color: var(--schwarz);
}
@media (max-width: 900px) {
  .lhb-hero--overview {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .lhb-hero--overview > .lhb-hero__primary {
    border-right: 0;
    border-bottom: var(--linie) solid var(--lhb-line-color);
  }
  .lhb-hero--overview > .lhb-hero__primary,
  .lhb-hero--overview > .lhb-hero__secondary {
    padding: 26px 22px;
  }
  .lhb-hero--overview .lhb-hero__lead {
    max-width: none;
  }
}
@media (max-width: 600px) {
  .lhb-hero--overview .lhb-heading--hero {
    font-size: clamp(36px, 11vw, 50px);
  }
}



/* Organisations-Hero v1.0 – offizielle Variante der Verbandsstartseite.
   Ersetzt die ehemalige lokale Hero-Schicht in ueber-uns.html. */
.lhb-hero--organization{
  display:grid;
  grid-template-columns:2fr 1fr;
  min-height:520px;
  border-bottom:var(--linie) solid var(--lhb-line-color);
}
.lhb-hero--organization .lhb-hero-left{
  padding:48px 36px;
  border-right:var(--linie) solid var(--lhb-line-color);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:30px;
}
.lhb-hero--organization .lhb-kicker{
  font-family:var(--lhb-font-display);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lila);
  margin-bottom:14px;
}
.lhb-hero--organization .lhb-title{
  font-family:var(--lhb-font-display);
  font-size:clamp(40px,4.7vw,70px);
  font-weight:800;
  letter-spacing:0;
  line-height:.93;
  text-transform:uppercase;
  max-width:660px;
}
.lhb-hero--organization .lhb-title :where(em,.hero-title-accent){
  font-style:italic;
  color:var(--flieder);
  display:block;
}
.lhb-hero--organization .lhb-lead{
  font-family:var(--lhb-font-body);
  font-size:18px;
  line-height:1.62;
  color:var(--lhb-neutral-900);
  max-width:760px;
  margin-top:24px;
}
.lhb-hero--organization .lhb-quote{
  padding:48px 36px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  background:var(--lila);
  color:var(--weiss);
}
.lhb-hero--organization .lhb-quote blockquote{
  font-family:var(--lhb-font-display);
  font-size:clamp(22px,2.35vw,36px);
  font-weight:800;
  letter-spacing:0;
  line-height:1.02;
  text-transform:uppercase;
  margin:0;
  max-width:560px;
}
.lhb-hero--organization .lhb-quote p{
  font-family:var(--lhb-font-body);
  font-size:15px;
  line-height:1.7;
  color:var(--lhb-overlay-light-90);
  max-width:620px;
}
.lhb-hero--organization .lhb-actions,
.lhb-hero--organization .lhb-quick-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.lhb-hero--organization .lhb-quick-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  justify-content:stretch;
  width:100%;
}
.lhb-hero--organization .lhb-quick-actions .lhb-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  min-height:72px;
  white-space:normal;
  text-align:left;
  line-height:1.15;
}
.lhb-hero--organization .lhb-quick-actions .lhb-button i{flex:0 0 auto}
@media(max-width:900px){
  .lhb-hero--organization{grid-template-columns:1fr}
  .lhb-hero--organization .lhb-hero-left{border-right:0;border-bottom:var(--linie) solid var(--lhb-line-color)}
  .lhb-hero--organization .lhb-title{font-size:clamp(30px,9.5vw,42px);letter-spacing:-.035em;line-height:.96}
}
@media(max-width:640px){
  .lhb-hero--organization .lhb-quick-actions{grid-template-columns:1fr}
  .lhb-hero--organization .lhb-quick-actions .lhb-button{min-height:0}
}


/* v202 – globales Hero-Punkteraster.
   Das Raster gehoert zur primaeren Textflaeche aller Standard-Heros; farbige
   Sekundaer- und Medienflaechen bleiben unveraendert. */
.lhb-hero > .lhb-hero__primary{
  background-color:var(--weiss);
  background-image:radial-gradient(circle at center,var(--lhb-overlay-accent-13) 0 1px,transparent 1.45px);
  background-size:15px 15px;
  background-position:0 0;
}


/* v240 – globale obere Hero-Ausrichtung.
   Textspalten beginnen grundsätzlich oben. Dies gilt für die primäre
   Titelspalte ebenso wie für eine textuelle Sekundärspalte. Medienflächen
   behalten ihre eigene, kontextabhängige Ausrichtung. */
.lhb-hero--overview > .lhb-hero__primary,
.lhb-hero--overview > .lhb-hero__secondary {
  justify-content: flex-start;
  align-items: flex-start;
}
.lhb-hero--workfield-home > .lhb-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}


/* Komponentenvertrag 1.3: datenbasierter Karten-Hero.
   Seiten wie die Vereinsdatenbank duerfen Karte, Kennzahlen und Einleitung
   kombinieren, verwenden aber dieselbe Displaytypografie und primaere
   Rasterflaeche wie andere Standard-Heros. */
.lhb-hero--directory-map > .lhb-hero__primary {
  background-color: var(--weiss);
  background-image: radial-gradient(circle at center, var(--lhb-overlay-accent-13) 0 1px, transparent 1.45px);
  background-size: 15px 15px;
  background-position: 0 0;
}
.lhb-hero--directory-map .lhb-heading--hero {
  margin: 0 0 14px;
  font-size: clamp(44px, 4.6vw, 70px);
  line-height: .95;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .lhb-hero--directory-map .lhb-heading--hero {
    font-size: clamp(38px, 9.8vw, 56px);
  }
}
@media (max-width: 600px) {
  .lhb-hero--directory-map .lhb-heading--hero {
    font-size: clamp(34px, 9.2vw, 46px);
  }
}


/* Update v240 – semantische obere Ausrichtung aller Hero-Textspalten.
   :has() ist im Bestand bereits Bestandteil der globalen Architektur. Die
   Selektoren erkennen die Textrolle anhand des tatsächlichen Inhalts und
   vermeiden zusätzliche Seitennamen oder Breakpoint-Sonderklassen. */
.lhb-hero > .lhb-hero__content:has(h1),
.lhb-hero > .lhb-hero__primary:has(h1),
.lhb-hero > .lhb-hero__secondary:has(:is(p, blockquote, .lhb-hero__lead)):not(:has(:is(img, picture, figure, video, iframe, canvas, svg))) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
}

/* Update v240 – kompakte textbasierte Übersichtsheros.
   Die Regel greift ausschließlich, wenn die linke Primärspalte nur Kicker
   und Hauptüberschrift enthält, die rechte Spalte weder Medium noch Aktion
   führt und beide Spalten damit reine Einführungsflächen sind. Die Höhe ist
   in diesem Fall inhaltsgetrieben und besitzt nur eine ruhige Mindesthöhe.
   Mehrzeilige Titel dürfen den Hero automatisch vergrößern. */
@media (min-width: 901px) {
  .lhb-hero--split:has(> .lhb-hero__primary h1):not(:has(> .lhb-hero__primary :is(p, a, button, form, ul, ol, figure, img, picture, video, iframe))):not(:has(> .lhb-hero__secondary :is(img, picture, figure, video, iframe, canvas, svg))):not(:has(> .lhb-hero__secondary :is(a, button, form))) {
    height: auto !important;
    min-height: 210px !important;
  }
  .lhb-hero--split:has(> .lhb-hero__primary h1):not(:has(> .lhb-hero__primary :is(p, a, button, form, ul, ol, figure, img, picture, video, iframe))):not(:has(> .lhb-hero__secondary :is(img, picture, figure, video, iframe, canvas, svg))):not(:has(> .lhb-hero__secondary :is(a, button, form)))
    > :is(.lhb-hero__primary, .lhb-hero__secondary) {
    box-sizing: border-box;
    padding-top: var(--lhb-hero-text-padding-block) !important;
    padding-bottom: var(--lhb-hero-text-padding-block) !important;
  }
}


/* Update v241 - shared top edge for every textual hero column.
   Both columns use the same block-start inset. A secondary column is only
   treated as text when it contains no visual medium. */
.lhb-hero > :is(.lhb-hero__primary,.lhb-hero__content):has(h1),
.lhb-hero > .lhb-hero__secondary:not(:has(:is(img,picture,figure,video,iframe,object,embed,canvas,svg))){
  box-sizing:border-box;
  padding-top:var(--lhb-hero-text-padding-block)!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  align-content:flex-start!important;
}
.lhb-hero > :is(.lhb-hero__primary,.lhb-hero__content):has(h1) > :first-child,
.lhb-hero > .lhb-hero__secondary:not(:has(:is(img,picture,figure,video,iframe,object,embed,canvas,svg))) > :first-child{
  margin-top:0!important;
}
.lhb-hero > .lhb-hero__secondary:not(:has(:is(img,picture,figure,video,iframe,object,embed,canvas,svg))) :is(p,.lhb-hero__lead){
  line-height:var(--lhb-hero-secondary-leading)!important;
}
.lhb-hero--statement blockquote{
  line-height:var(--lhb-hero-statement-leading)!important;
}

/* Update v241 - paired action baseline and compact closing edge.
   When both text columns have a direct action group, the groups share the
   bottom baseline. The hero grows only as much as its content requires. */
.lhb-hero:has(> .lhb-hero__primary > [class*="actions"]):has(> .lhb-hero__secondary > [class*="actions"]):not(:has(> .lhb-hero__secondary :is(img,picture,figure,video,iframe,object,embed,canvas,svg))){
  height:auto!important;
  min-height:0!important;
  align-items:stretch!important;
}
.lhb-hero:has(> .lhb-hero__primary > [class*="actions"]):has(> .lhb-hero__secondary > [class*="actions"]):not(:has(> .lhb-hero__secondary :is(img,picture,figure,video,iframe,object,embed,canvas,svg)))
  > :is(.lhb-hero__primary,.lhb-hero__secondary){
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  min-height:0!important;
  height:auto!important;
  padding-top:var(--lhb-hero-text-padding-block)!important;
  padding-bottom:var(--lhb-hero-text-padding-block)!important;
}
.lhb-hero:has(> .lhb-hero__primary > [class*="actions"]):has(> .lhb-hero__secondary > [class*="actions"]):not(:has(> .lhb-hero__secondary :is(img,picture,figure,video,iframe,object,embed,canvas,svg)))
  > :is(.lhb-hero__primary,.lhb-hero__secondary) > [class*="actions"]{
  margin-top:auto!important;
  padding-top:var(--lhb-hero-action-gap)!important;
}

/* v252 – einteiliger Uebersichts-Hero.
   Diese Variante nutzt eine durchgehende Primaerflaeche ohne optische
   Zweiteilung. Titelgruppe und Einleitung duerfen auf breiten Viewports
   nebeneinander stehen; mobil werden sie in derselben Flaeche gestapelt. */
.lhb-hero--overview-single{
  min-height:252px;
  border-bottom:var(--linie) solid var(--lhb-line-color);
  overflow:hidden;
}
.lhb-hero--overview-single > .lhb-hero__primary{
  box-sizing:border-box;
  min-height:252px;
  padding:28px 36px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:clamp(36px,6vw,96px);
  align-items:center!important;
  justify-content:normal!important;
}
.lhb-hero--overview-single .lhb-hero__title-group{
  min-width:0;
}
.lhb-hero--overview-single .lhb-hero__kicker{
  margin:0 0 10px;
  font-family:var(--lhb-font-body);
  font-size:16px;
  line-height:1.35;
  color:var(--schwarz);
}
.lhb-hero--overview-single .lhb-heading--hero{
  width:100%;
  margin:0;
  font-size:clamp(48px,6vw,82px);
  line-height:.92!important;
  text-transform:uppercase;
}
.lhb-hero--overview-single .lhb-hero__lead{
  align-self:center;
  margin:0;
  max-width:680px;
  font-family:var(--lhb-font-body);
  font-size:18px;
  line-height:1.62;
  color:var(--schwarz);
}
@media(max-width:900px){
  .lhb-hero--overview-single{
    min-height:0;
  }
  .lhb-hero--overview-single > .lhb-hero__primary{
    min-height:0;
    padding:28px 22px!important;
    grid-template-columns:1fr;
    gap:18px;
  }
  .lhb-hero--overview-single .lhb-heading--hero{
    font-size:clamp(38px,11vw,56px);
  }
  .lhb-hero--overview-single .lhb-hero__lead{
    max-width:none;
    font-size:16px;
  }
}



/* Komponentenvertrag v275 – horizontale Rasterfamilien.
   Arbeitsfeld-Startseiten besitzen eine etwas ausgewogenere 52.5/47.5-Teilung;
   zweispaltige Arbeitsfeld-Unterseiten nutzen eine ruhige 40/60-Achse. */
.lhb-hero--workfield-home{
  grid-template-columns:var(--lhb-grid-workfield-hero);
}
.lhb-hero--workfield-subpage{
  grid-template-columns:var(--lhb-grid-subpage-hero);
}
@media(max-width:980px){
  .lhb-hero--workfield-home,
  .lhb-hero--workfield-subpage{
    grid-template-columns:1fr;
  }
}


/* v345 – Zwischenbreitenvertrag fuer zweispaltige Arbeitsfeld-Heros.
   Textkinder nehmen hoechstens die reale Breite ihrer Spalte ein. Dadurch
   misst das globale Font-Fit gegen den tatsaechlichen Layoutcontainer statt
   gegen eine fruehere intrinsische Maximalbreite. Die Hero-Ueberschrift
   skaliert zusaetzlich containerbezogen, solange die Spalte vor der globalen
   Stapelung schmaler wird. */
.lhb-hero--workfield-home > .lhb-hero__content{
  container-type:inline-size;
  container-name:lhb-workfield-hero-copy;
}
.lhb-hero--workfield-home > .lhb-hero__content > *{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
@container lhb-workfield-hero-copy (max-width:850px){
  .lhb-heading--hero{
    font-size:clamp(42px,8cqw,64px)!important;
  }
}
@media(max-width:980px){
  .lhb-hero--workfield-home > .lhb-hero__content{
    container-type:normal;
  }
}