/*
 * Anpassungen für WordPress.
 *
 * Bewusst so wenig wie möglich: WordPress' eigene Layoutregeln haben
 * keine Spezifität, unsere Klassen setzen sich also von selbst durch.
 * Zurückgenommen werden nur die Breitenbegrenzung und der Wurzelabstand.
 */

/* Volle Breite. WordPress begrenzt Inhalte sonst auf die Inhaltsbreite */
.wp-site-blocks.wp-block-post-content.wp-block-template-part,
main .wp-block-group {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Der Kopfbereich ist fest positioniert und darf nicht beschnitten werden */
.wp-site-blocks.wp-block-template-part { overflow: visible; }

/* Feste Kopfzeile unter die Adminleiste schieben */
body.admin-bar .kopf-fix { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .kopf-fix { top: 46px; }

}

/* Editor: Blöcke in voller Breite darstellen */
.editor-styles-wrapper.wp-block[data-type^="hra/"] {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/*
 * WordPress setzt für Blocklayouts eigene Außenabstände:
 *   :root :where(.is-layout-flow) > *            { margin-block: 24px 0 }
 *   :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
 * Diese haben eine höhere Spezifität als unsere Klassen. In der theme.json
 * ist blockGap deshalb abgeschaltet, sodass sie gar nicht erst entstehen.
 * Der Hero bekommt seinen negativen Abstand hier zusätzlich abgesichert, 
 * er schiebt sich damit unter die feste Kopfzeile.
 */
:root.wp-block-post-content >.hero3,
:root.wp-site-blocks .hero3 {
  margin-top: calc(-1 * var(--kopfh, 110px));
}

/*
 * Der senkrechte Fortschrittsfaden beginnt unter der Kopfzeile.
 * Die Kopfzeile verschiebt sich durch die Adminleiste, deshalb misst das
 * Skript ihre tatsächliche Unterkante und legt sie in --kopfunten ab.
 */
.faden { top: calc(var(--kopfunten, 113px) + 3px); }

/* ==========================================================================
   Blaue Menüleiste, weißes Mega-Menü
   Die Leiste bleibt im Markenblau wie bisher. Die aufklappenden Panels
   stehen dagegen auf Weiß, dadurch wirken sie leichter und die Inhalte
   sind besser lesbar.
   ========================================================================== */

/* ---------- Leiste: unverändert blau, aber nie durchsichtig ---------- */
.kopf-fix nav .kopf-fix nav.ueber{
  background:rgba(8,31,68,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.marke .logo-hell{display:block}
.marke .logo-dunkel{display:none}

/* ---------- Mega-Menüs in Weiß ---------- */
.mega{
  background:#fff;
  border-top:1px solid var(--linie);
  box-shadow:0 26px 58px rgba(8,31,68,.18);
}

/* Spaltenüberschriften in Rot */
.mega .mega-titel{color:var(--rot)}
.mega.uc-sym{background:var(--rot);color:#fff}

/* ---------- Einträge: größer und ruhiger ---------- */
.mega .mega-sp a{padding:11px 12px;margin-left:-12px;column-gap:13px}
.mega .mega-sp a b{color:var(--navy);font-size:1rem;font-weight:700;letter-spacing:-.02em}
.mega .mega-sp a small{color:var(--grau);font-size:.86rem;line-height:1.5;margin-top:3px}
.mega .mega-sp a:hover{background:var(--flaeche)}
.mega .mega-sp a:hover b{color:var(--rot)}

/* Symbole dauerhaft sichtbar.
   Emoji bringen ihre eigene Farbe mit, deshalb bleibt die Fläche neutral,
   damit nichts mit dem Symbol konkurriert. Die Schriftliste erzwingt die
   farbige Darstellung auch dort, wo eine andere Schrift greifen würde. */
.mega .mega-sp a .msym{
  width:36px;height:36px;border-radius:10px;
  background:var(--flaeche);
  border:1px solid var(--linie);
  font-size:1.02rem;
  line-height:1;
  margin-top:1px;
  opacity:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  transition:background.2s var(--e),border-color.2s var(--e),transform.2s var(--e);
}
.mega .mega-sp a:hover.msym{
  background:var(--hellblau);
  border-color:transparent;
  transform:scale(1.06);
}

/* Spaltenüberschrift etwas kräftiger */
.mega .mega-titel{font-size:.7rem;letter-spacing:.15em;margin-bottom:15px}

.mega-oben{border-bottom-color:var(--linie)}

/* Werkzeugkacheln */
.mega.wz-kachel{background:var(--flaeche);border-color:var(--linie)}
.mega.wz-kachel:hover{background:#fff;border-color:var(--rot);box-shadow:0 12px 28px rgba(8,31,68,.1)}
.mega.wz-kachel b{color:var(--navy)}
.mega.wz-kachel small{color:var(--grau)}

/* Highlight-Karten */
.mega .hl-karte{background:var(--flaeche);border-color:var(--linie)}
.mega .hl-karte:hover{background:#fff;border-color:var(--rot);box-shadow:0 12px 28px rgba(8,31,68,.1)}
.mega .hl-karte::after{background:radial-gradient(circle,rgba(227,26,62,.1),transparent 68%)}
.mega .hl-karte .hl-titel{color:var(--navy)}
.mega .hl-karte small{color:var(--grau)}
.mega .hl-datum{background:var(--navy)}
.mega .hl-karte .hl-datum b{color:#fff}
.mega .hl-karte .hl-datum span{color:#fff;opacity:.75}
.mega.hl-cover{border-color:var(--linie)}

/* ---------- Mega-Menüs: vier Spalten in einer Reihe ----------
   Die Basis blendet ab 1180 Pixel die vierte Spalte aus und schaltet auf
   zwei Spalten. Diese Regeln sind bewusst spezifischer, damit die vier
   Spalten erhalten bleiben. */
.mega[data-panel].mega-innen.res-vier.mega .mega-innen.res-vier{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,46px);
  align-items:start;
  padding-top:clamp(26px,3.2vw,40px);
  padding-bottom:clamp(26px,3.2vw,40px);
}
.mega .mega-innen.res-vier >.mega-sp{min-width:0}
.mega[data-panel].mega-innen.res-vier >.mega-hoch{display:block}

@media(max-width:1180px){
.mega[data-panel].mega-innen.res-vier.mega .mega-innen.res-vier{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(18px,2.4vw,32px);
  }
.mega[data-panel].mega-innen.res-vier >.mega-hoch{display:block}
}
@media(max-width:660px){
.mega[data-panel].mega-innen.res-vier.mega .mega-innen.res-vier{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Hinweisband: Klassenkollision aufheben ----------
   Rechner, Systemcheck und Score verwenden.balken für ihre Ergebnisbalken
   und stellen sie senkrecht. Diese Regel gilt aber nur im Inhalt, nicht
   in der Kopfzeile, deshalb hier ausdrücklich wieder waagerecht. */
.kopf-fix .balken{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:0;
  white-space:nowrap;
  overflow:hidden;
}
.kopf-fix .balken > *{flex:0 0 auto}
.kopf-fix .balken > span:not(.kennz){overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
.kopf-fix .balken{gap:7px;font-size:.72rem}
}

/* ---------- Hero beginnt unter der Leiste ---------- */
:root.wp-block-post-content >.hero3,
:root.wp-site-blocks .hero3{margin-top:0}
.hero3{height:calc(100svh - var(--kopfunten, 113px));min-height:520px}

/* ---------- Filterzeilen ----------
   Eine Reihe, ohne dass die äußeren Elemente angeschnitten wirken.
   Passt alles in die Breite, wird zentriert; sonst lässt sich die Reihe
   schieben, mit Innenabstand an beiden Rändern statt harter Kante. */
.filterband{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:6px 4px 12px;
  margin-bottom:clamp(16px,2vw,24px);
  justify-content:center;
  -webkit-mask-image:none;
  mask-image:none;
}
.filterband::-webkit-scrollbar{display:none}
.filterband > *{flex:0 0 auto;white-space:nowrap}
/* Wenn es nicht passt, beginnt die Reihe links und bekommt Rand */
@media(max-width:1240px){
.filterband{justify-content:flex-start;padding-left:2px;padding-right:24px;
    scroll-padding-inline:2px}
}
/* Knöpfe etwas kompakter, damit mehr in eine Reihe passt */
.filterband button{font-size:.83rem;padding:9px 16px}
@media(max-width:900px){.filterband button{font-size:.8rem;padding:8px 14px}}

/* ---------- Kontaktkarte im Footer ----------
   Für.avatar gab es keine Regel, deshalb verrutschte das Kürzel je nach
   Seite. Jetzt steht dort Christians Foto in fester Größe. */
.f-kontakt .person{display:flex;align-items:center;gap:13px}
.f-kontakt .person.avatar{width:48px;height:48px;border-radius:50%;flex:0 0 auto;
  object-fit:cover;display:grid;place-items:center;
  font-size:.9rem;font-weight:700;color:#fff;overflow:hidden}
.f-kontakt .person .nm{font-size:.94rem;font-weight:700;color:#fff;line-height:1.3}
.f-kontakt .person .ro{font-size:.82rem;font-weight:300;color:rgba(255,255,255,.62);
  margin-top:2px;line-height:1.4}

/* ---------- Schwebendes Kontakt-Element ----------
   Der Text steht dauerhaft neben dem Bild, nicht erst beim Überfahren. */
@media(min-width:641px){
.kw-knopf .kw-txt{max-width:230px;padding:0 18px 0 13px}
.kw-knopf:hover.kw-txt .kw-knopf.zeig .kw-txt{max-width:230px;padding:0 18px 0 13px}
.kw-knopf .av{width:52px;height:52px}
.kw-knopf .kw-txt b{font-size:.92rem}
.kw-knopf .kw-txt span{font-size:.8rem}
}

/* ---------- Scroll-Hinweis mittig ----------
   Rechts unten wurde er vom Kontakt-Element verdeckt. */
.hero3-hinweis{
  right:auto;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
}
@media(max-width:700px){
.hero3-hinweis{display:none}
}

/* ---------- Werkzeug-Schilder im Hero ----------
   Die Schilder bekommen eine farbige Fläche statt nur Text: Programme in
   Blau, Prozessarten in Grün. Dadurch sind sie auch im Vorbeifliegen als
   eigenständige Elemente erkennbar. Die Punkte behalten die Logofarben. */
.hp .nm{
  padding:5px 11px;
  border-radius:8px;
  background:rgba(15,123,79,.22);
  border:1px solid rgba(80,200,150,.30);
  color:rgba(255,255,255,.86);
  backdrop-filter:blur(3px);
  box-shadow:0 4px 16px rgba(2,16,31,.28);
}
.hp.marke .nm{
  background:rgba(42,74,215,.24);
  border-color:rgba(120,160,255,.34);
  color:#fff;
  font-weight:600;
}
.hp .nm .dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
}
.hp .nm img.hp .nm svg{filter:none;opacity:.95}

@media(max-width:760px){
.hp .nm{padding:4px 9px;font-size:.7rem;border-radius:7px}
}

/* ---------- Hero-Text anheben ----------
   Der Block hing am unteren Rand und wurde vom Scrollhinweis und vom
   Kontakt-Element überlagert. Jetzt sitzt er höher, unten bleibt Luft. */
.hero3 .h-text{
  bottom:clamp(96px, 15vh, 170px);
}
@media(max-width:820px){
.hero3 .h-text{bottom:clamp(84px, 13vh, 130px)}
}
@media(max-height:760px){
.hero3 .h-text{bottom:clamp(72px, 11vh, 110px)}
}

/* Der Scrollhinweis rückt näher an den Rand, damit er nicht mitwandert */
.hero3 .hero3-hinweis{bottom:clamp(14px, 2.4vw, 26px)}

/* ---------- Bilder aus der Mediathek ----------
   WordPress setzt width und height als Attribute. Ohne height:auto
   ignorieren Browser jedes aspect-ratio und ziehen das Bild auf
   die Originalhöhe. */
img.wp-post-image.wp-block-image img,
figure img{height:auto}

/* ---------- Unterlängen bei Verlaufstext ----------
   Zeilen mit Farbverlauf nutzen background-clip:text. Der Verlaufsrahmen
   endet an der Zeilenhöhe, bei engem Zeilenabstand werden j, g, p und q
   dadurch unten abgeschnitten.

   Der Zuschlag unten schafft Platz, der negative Außenabstand nimmt ihn
   aus dem Layout wieder heraus, damit sich die Zeilen nicht verschieben. */
.kz.z3.tt.htext h1 .tt,
h1 .tt, h2 .tt, h3 .tt{
  padding-bottom:.14em;
  margin-bottom:-.14em;
  line-height:1.18;
}

/* Die Wechselzeile im Hero braucht zusätzlich etwas mehr Zeilenhöhe,
   weil sie einzeln steht und der Verlauf dort am kräftigsten ist. */
.hero3 .kz.z3{
  line-height:1.22;
  padding-bottom:.16em;
  margin-bottom:-.16em;
}

/* Auch die Kennzahl im Werkzeugkasten hat einen Verlauf */
.kz-w{padding-bottom:.1em;margin-bottom:-.1em;line-height:1.14}

/* ---------- Waagerechter Überlauf auf kleinen Geräten ----------
   Auf schmalen Bildschirmen passten Logo, Knöpfe und Menütaste nicht
   nebeneinander. Die Leiste wurde dadurch breiter als das Fenster und
   die ganze Seite ließ sich seitlich verschieben. */
@media(max-width:560px){
  .kopf-fix .nav-r .btn-linie,
  .kopf-fix .nav-r .btn-k{display:none}
  .kopf-fix nav{padding-left:14px;padding-right:14px;gap:10px}
  .kopf-fix .nav-r{gap:8px}
  .kopf-fix .nav-r .btn-rot{padding:9px 14px;font-size:.78rem}
  .kopf-fix .marke img{height:30px}
  .kopf-fix .balken{font-size:.68rem;padding:7px 12px;text-align:center}
}
@media(max-width:400px){
  .kopf-fix .nav-r .btn-rot{padding:8px 12px;font-size:.74rem}
  .kopf-fix .marke img{height:27px}
}

/* Sicherheitsnetz: nichts darf die Seite seitlich verschiebbar machen */
html,body{overflow-x:clip}

/* ---------- Symbolflächen mit Emoji ----------
   Emoji bringen ihre eigene Farbe mit. Deshalb bleibt die Fläche neutral,
   und die Schriftliste erzwingt die farbige Darstellung auch dort, wo
   sonst eine andere Schrift greifen würde. */
.bs-sym,
.ze-w-sym,
.ze-d-sym,
.sy-sym,
[class$="-sym"]{
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  line-height:1;
}
.bs-k .bs-sym{
  background:var(--flaeche);
  border:1px solid var(--linie);
  color:inherit;
}
.bs-k:hover .bs-sym{background:var(--hellblau);border-color:transparent}