/* ============================================================
   Seitenkopf – Breadcrumb + Hero : geteilte Komponenten.
   Genutzt von landesvorstand.php (immer) und page.php (optionaler
   Hero, nur wenn blocks.hero gepflegt ist).
   Baut auf style.css (Design-Tokens, Header, Footer, Buttons) auf.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.breadcrumb .wrap{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-top:11px;padding-bottom:11px;
  font-family:var(--ff-body);font-size:14px;color:var(--text-mid);
}
.breadcrumb a{display:inline-flex;align-items:center;gap:7px;color:var(--text-mid);transition:color .15s ease;}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb svg{width:15px;height:15px;}
.breadcrumb .sep{color:#b8c1d2;font-size:13px;}
.breadcrumb .here{color:var(--blue);font-weight:600;}

/* ---------- Hero (Seiten-/Über-Hero) ---------- */
.ueber-hero{position:relative;background:var(--bg-soft);overflow:hidden;border-bottom: 1px solid var(--line);}
.ueber-hero .wrap{position:relative;z-index:3;}
.ueber-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:center;gap:10px;min-height:430px;
}
.ueber-hero-content{padding:58px 40px 62px 0;max-width:560px;}
/* "Über uns" als schräges Banner-Schild – gleicher Effekt/Winkel wie die
   Hero-Banner (.banner) auf der Startseite: orangefarbenes Schild, weiße
   fette Schrift, rotate(-2.5deg) skewX(-9deg) plus Schatten. Der innere
   <span> macht den Skew per Gegen-Skew rückgängig, damit der Text aufrecht
   und unverzerrt bleibt; display:table hält die Box auf Textbreite.
   Bewusst kleiner als die .banner-Headlines, da Eyebrow über dem Titel. */
.ueber-eyebrow{
  display:table;
  font-family:var(--ff-head);font-weight:900;color:#fff;
  background:var(--orange);
  font-size:40px;line-height:1;text-transform:none;letter-spacing:0;
  padding:7px 40px 9px;margin:0 0 22px 2px;
  transform:rotate(0deg) skewX(-9deg);
  box-shadow:0 12px 26px -12px rgba(16,42,82,.55);
}
.ueber-eyebrow > span{display:block;transform:skewX(9deg);}
.ueber-title{
  margin:0 0 22px;font-family:var(--ff-head);font-weight:900;font-style:italic;
  line-height:1.04;letter-spacing:-.015em;font-size:clamp(30px,3.4vw,46px);
  /* nowrap erzwingt beide Titelzeilen je auf eine Zeile – "Nordrhein-
     Westfalen." bricht so nie am Bindestrich um. Die Schriftgröße ist so
     gewählt, dass die längere Zeile in die (schmalere) Textspalte passt. */
  white-space:nowrap;
}
.ueber-title .l1{display:block;color:var(--blue);}
.ueber-title .l2{display:block;color:var(--orange);}
.ueber-lead{
  font-size:18px;line-height:1.55;color:var(--text-mid);
  max-width:430px;margin:0 0 30px;
}
.ueber-cta{display:flex;gap:14px;flex-wrap:wrap;}
.ueber-cta .btn{padding:14px 24px;letter-spacing:.06em;text-transform:uppercase;font-size:14px;}
.btn-outline{
  background:#fff;color:var(--blue);border-color:#cdd6e6;
}
.btn-outline:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(20,80,163,.4);}

/* Foto rechts mit diagonaler Kante + Orange-Akzent */
.ueber-hero-photo{
  position:absolute;top:0;right:0;bottom:0;
  width:54vw;max-width:none;z-index:1;
  clip-path:polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}
/* --hero-focus-y (optional, aus blocks.hero.image_position) steuert den
   vertikalen Bildausschnitt; ohne Wert bleibt der bisherige Default 28 %. */
.ueber-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% var(--hero-focus-y, 28%);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ueber-hero-grid{grid-template-columns:1fr;min-height:0;}
  .ueber-hero-photo{position:relative;width:100%;height:300px;clip-path:none;order:-1;
    margin:0 -28px;width:calc(100% + 56px);}
  .ueber-hero-content{padding:38px 0 44px;max-width:none;}
}
@media (max-width:600px){
  /* Einspaltig ist die Spalte ~viewport-breit; mit vw skaliert bleibt
     "Nordrhein-Westfalen." auch auf schmalen Phones (bis ~320px) einzeilig. */
  .ueber-title{font-size:clamp(24px,7.2vw,40px);}
  .ueber-hero-photo{margin:0 -18px;width:calc(100% + 36px);height:240px;}
  .ueber-cta{flex-direction:column;align-items:stretch;}
  .ueber-cta .btn{justify-content:center;}
}

/* ---------- Hero-Foto: Korridor 901–1900px ----------
   Die rechte 54vw-Spalte ist hier zu schmal/hoch fürs breite Gruppenfoto –
   würde das Foto die Höhe füllen (object-fit:cover/contain bei breiter Spalte),
   entstünde links ein heller Rand, in dem die diagonale clip-path-Kante
   unsichtbar wäre ("Strich fehlt" nahe 1900px, baut sich zur Mitte des
   Korridors von oben rechts nach unten links auf).
   Lösung: Das Foto füllt IMMER die volle Spaltenbreite (width:100%, height:auto)
   und ist kleiner skaliert als im >1900px-cover-Layout. So verläuft die
   Diagonale durchgehend durch das Bild und bleibt als Strich sichtbar. Der
   geringe Höhenüberschuss bei breiten Viewports wird vom clip-path oben/unten
   beschnitten – nie eine Person seitlich. Vertikale Zentrierung hält die
   Köpfe im Bild. Der weiße Container-Hintergrund trägt schmale Einpass-Ränder
   bei schmalen Viewports (oben/unten) im Foto-Hellton mit.
   Ab 1901px greift wieder das formatfüllende cover-Layout. */
@media (min-width:901px) and (max-width:1900px){
  /* Vertikale Zentrierung als Default (50 %). --hero-focus-y verschiebt den
     sichtbaren Ausschnitt: top:F % + translateY(-F %) verankert das Bild so,
     dass bei 0 % der obere, bei 100 % der untere Bildrand am Container-Rand
     sitzt – die überstehende Höhe beschneidet der clip-path oben/unten. */
  .ueber-hero-photo img{
    position:absolute;top:var(--hero-focus-y, 50%);left:0;
    width:100%;height:auto;
    transform:translateY(calc(-1 * var(--hero-focus-y, 50%)));
  }
}