/* ============================================================
   steffen-broszeit.me
   Look = Bewerbungsunterlagen: Navy #163853, Text grau, Poppins/Lato.
   Einziger Zusatz gegenüber dem CV: warmer Akzent aus dem Rost-Hintergrund der Fotos.
   ============================================================ */

:root{
  --navy:        #163853;
  --navy-tief:   #0e2638;
  --navy-hell:   #46617a;
  --text:        #4f5459;
  --dunkel:      #23282c;
  --linie:       #dfe4e8;
  --flaeche:     #f3f6f8;
  --akzent:      #e0a458;
  --akzent-text: #95591d;   /* dunkler, damit auf Weiss lesbar (Kontrast > 4.5:1) */
  --radius:      14px;
  --schatten:    0 10px 30px rgba(14, 38, 56, .07);
  --breite:      1140px;
  --nav-hoehe:   72px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: var(--nav-hoehe); scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  font-family: "Lato", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--navy); }
h1, h2, h3, h4{ font-family: "Poppins", "Segoe UI", sans-serif; color: var(--dunkel); line-height: 1.25; margin: 0; }
figure{ margin: 0; }

:focus-visible{ outline: 3px solid var(--navy-tief); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; border-radius: 4px; }
/* Auf dunklem Grund trägt das Navy nicht, dort ist der Rahmen gold (über 5:1 gegen Navy).
   Gegen Weiss erreicht Gold nur 2,2:1, darum nicht überall. */
.hero :focus-visible, .dunkel-bereich :focus-visible, .kontakt :focus-visible, .fuss :focus-visible,
.nav:not(.gescrollt):not(.offen) :focus-visible{ outline-color: var(--akzent); box-shadow: none; }

/* Bindestrich-Begriffe zusammenhalten (sonst "IT-" am Zeilenende) */
.nobr{ white-space: nowrap; }
.sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung{ position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 8px; }
.sprung:focus{ top: 12px; }

.container{ max-width: var(--breite); margin-inline: auto; padding-inline: 20px; }

section{ padding-block: clamp(64px, 9vw, 110px); }
.flaeche{ background: var(--flaeche); }

/* ---------- Abschnittskopf ---------- */
.kopf{ max-width: 760px; margin-bottom: 44px; }
/* Die gelbe Zeile ist der einzige Ort, an dem der Kapitelname steht -- die h2
   darunter sind Sätze. Darum trägt sie beim Scrollen die Orientierung und ist
   bewusst grösser als der übliche Kleinsatz. */
.eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--akzent-text); margin-bottom: 14px;
}
.eyebrow::before{ content: ""; width: 34px; height: 3px; background: var(--akzent); }
.kopf h2{ font-size: clamp(1.7rem, 3.2vw, 2.45rem); font-weight: 600; color: var(--navy); }
.kopf p{ margin: 16px 0 0; font-size: 1.1rem; }

/* ---------- Symbole ---------- */
svg.i{ fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.voll{ fill: currentColor; }

/* ---------- Knöpfe ---------- */
.knoepfe{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.knopf{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .95rem;
  text-decoration: none; transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.knopf svg{ width: 18px; height: 18px; }
.knopf:hover{ transform: translateY(-2px); }
.knopf-voll{ background: var(--akzent); color: var(--navy-tief); }
.knopf-voll:hover{ background: #eab573; }
.knopf-rand{ border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.knopf-rand:hover{ border-color: #fff; background: rgba(255,255,255,.08); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{ position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .25s ease, box-shadow .25s ease; }
.nav-innen{ display: flex; align-items: center; justify-content: space-between; height: var(--nav-hoehe); }

.logo{ font-family: "Poppins", sans-serif; font-size: 1.15rem; color: #fff; text-decoration: none; text-transform: uppercase; }
.logo b{ font-weight: 700; }
.logo span{ font-weight: 400; opacity: .8; }

.menue{ display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menue a{
  display: block; padding: 8px 12px; border-radius: 8px;
  font-family: "Poppins", sans-serif; font-size: .9rem; font-weight: 500;
  color: rgba(255,255,255,.85); text-decoration: none;
}
.menue a:hover{ color: #fff; }
.menue a.aktiv{ color: #fff; box-shadow: inset 0 -2px 0 var(--akzent); border-radius: 0; }

.nav.gescrollt, .nav.offen{ background: rgba(255,255,255,.97); box-shadow: 0 2px 20px rgba(0,0,0,.07); }
.nav.gescrollt .logo, .nav.offen .logo{ color: var(--navy); }
.nav.gescrollt .menue a{ color: var(--text); }
.nav.gescrollt .menue a:hover, .nav.gescrollt .menue a.aktiv{ color: var(--navy); }

.nav-knopf{
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer;
}
.nav-knopf span{ display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav.gescrollt .nav-knopf span, .nav.offen .nav-knopf span{ background: var(--navy); }
.nav.offen .nav-knopf span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav.offen .nav-knopf span:nth-child(2){ opacity: 0; }
.nav.offen .nav-knopf span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px){
  .nav-knopf{ display: flex; }
  .menue{
    display: none; position: absolute; top: var(--nav-hoehe); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px 20px 20px;
    background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .nav.offen .menue{ display: flex; }
  .menue a, .nav.gescrollt .menue a{ color: var(--text); padding: 12px 4px; border-bottom: 1px solid var(--linie); }
  .menue a.aktiv{ color: var(--navy); box-shadow: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: calc(var(--nav-hoehe) + 40px) 80px;
  color: #fff;
  background: var(--navy-tief) url("../img/hero.jpg") 30% 22% / cover no-repeat;
  /* AVIF für Browser, die es können. Wer image-set() mit type() nicht kennt,
     verwirft die Zeile und bleibt beim JPEG darüber. */
  background-image: image-set(url("../img/hero.avif") type("image/avif"), url("../img/hero.jpg") type("image/jpeg"));
}
/* Verlauf: links bleibt das Gesicht sichtbar, rechts trägt das Navy den Text.
   Er dunkelt bewusst erst spät ab -- im weiteren Bildausschnitt steht Steffen
   näher an der Mitte, ein früher Verlauf würde ihm ins Gesicht laufen. */
.hero::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(14,38,56,.02) 0%, rgba(14,38,56,.14) 30%, rgba(14,38,56,.55) 46%,
    rgba(14,38,56,.90) 60%, rgba(14,38,56,.96) 100%);
}
.hero .container{ width: 100%; }
.hero-text{ margin-left: auto; max-width: 540px; }

.ort{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Poppins", sans-serif; font-size: .85rem;
  padding: 6px 14px; margin-bottom: 22px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
}
.ort svg{ width: 16px; height: 16px; color: var(--akzent); }

.hero h1{ color: #fff; font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.05; text-transform: uppercase; }
.hero h1 b{ font-weight: 700; }
.hero h1 span{ font-weight: 400; color: rgba(255,255,255,.78); }
.hero .rolle{ font-family: "Poppins", sans-serif; font-size: clamp(.92rem, 1.5vw, 1.05rem); color: rgba(255,255,255,.82); margin: 12px 0 0; }

.fokus{ font-family: "Poppins", sans-serif; font-size: clamp(1.25rem, 2.5vw, 1.7rem); font-weight: 500; margin: 30px 0 0; min-height: 1.5em; }
#wechselwort{ color: var(--akzent); }
.cursor{ display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.14em; background: var(--akzent); animation: blinken 1s steps(1) infinite; }
@keyframes blinken{ 50%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .cursor{ display: none; } }
.fokus.fertig .cursor{ display: none; }

.hero .lead{ margin: 16px 0 0; font-size: 1.1rem; color: rgba(255,255,255,.88); }

/* Schmales Querformat (kleines Notebookfenster, Tablet quer): das Bild ist kaum breiter
   als das Fenster, das Gesicht rutscht unter den Text. Bild ganz nach links, Textspalte schmaler. */
@media (min-width: 761px) and (max-width: 1100px){
  .hero{ background-position: 100% 22%; }
  .hero-text{ max-width: 470px; }
}

@media (max-width: 760px), (max-width: 1000px) and (orientation: portrait){
  /* Eigener Zuschnitt fürs Handy und fürs Tablet hoch. Weil es eine Media Query ist,
     lädt der Browser genau eine der beiden Dateien, nie beide. Bis 1000 px nur im
     Hochformat: dort lag der Name sonst quer über dem Gesicht. Ein breites, niedriges
     Fenster gleicher Breite bleibt beim Querformat, sonst liegt der Text dort darauf.
     Der Umbruch muss zu den zwei Preloads im <head> von index.html passen. */
  .hero{
    align-items: flex-end; padding-bottom: 56px;
    background-image: url("../img/hero-hoch.jpg");
    background-image: image-set(url("../img/hero-hoch.avif") type("image/avif"), url("../img/hero-hoch.jpg") type("image/jpeg"));
    background-position: center top;
  }
  .hero::before{
    background: linear-gradient(180deg,
      rgba(14,38,56,.0) 0%, rgba(14,38,56,.35) 30%, rgba(14,38,56,.88) 55%, rgba(14,38,56,.97) 100%);
  }
  .hero-text{ margin-left: 0; }
}

/* Handy: Der Textblock ist hier fast so hoch wie der Bildschirm. Als Überlagerung
   rutschte er übers Gesicht. Deshalb steht das Bild oben in voller Breite, und der
   Text beginnt erst unter dem Kinn (im Bild bei rund 53 % der Breite). Der Hero darf
   dafür etwas höher werden als der Bildschirm. Unter dem Bild trägt die Grundfarbe,
   der Verlauf ist dort schon deckend, deshalb gibt es keine Kante. */
@media (max-width: 760px){
  .hero{
    display: block; min-height: 0;
    padding: 60vw 0 48px;
    background-size: 100% auto;
  }
  .hero::before{
    background: linear-gradient(180deg,
      rgba(14,38,56,0) 0, rgba(14,38,56,.2) 38vw, rgba(14,38,56,.86) 70vw,
      rgba(14,38,56,.97) 105vw, rgba(14,38,56,.97) 100%);
  }
  .hero h1{ font-size: min(2.4rem, 7.6vw); }        /* Name auf einer Zeile */
  .hero .knoepfe{ gap: 10px; margin-top: 26px; }
  .hero .knopf{ padding: 12px 18px; font-size: .9rem; }
}

/* ============================================================
   PROFIL
   ============================================================ */
.profil-raster{ display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.portrait{
  width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 8px solid #fff; box-shadow: 0 0 0 1px var(--linie), var(--schatten);
}
.fakten{ list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; }
.fakten li{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: .97rem; line-height: 1.5; }
.fakten svg{ width: 20px; height: 20px; color: var(--navy); margin-top: 2px; }
.fakten b{ display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--dunkel); }

.profil-text .kopf{ margin-bottom: 28px; }
.profil-text .kopf h2{ font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.profil-text p{ margin: 0 0 18px; }
.profil-text .bruecke{ margin-top: 26px; padding: 20px 24px; background: var(--flaeche); border-left: 3px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0; color: var(--dunkel); }

@media (max-width: 860px){
  .profil-raster{ grid-template-columns: minmax(0, 1fr); }
  .profil-seite{ display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; }
  .fakten{ margin: 0; gap: 12px; }
}
@media (max-width: 520px){
  .profil-seite{ grid-template-columns: minmax(0, 1fr); }
  .portrait{ max-width: 200px; }
}

/* ============================================================
   KARTEN / RASTER
   ============================================================ */
.raster-3{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 980px){ .raster-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .raster-3{ grid-template-columns: minmax(0, 1fr); } }

.karte{ position: relative; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 28px; box-shadow: var(--schatten); }
.karte h3{ font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; }
.karte p{ margin: 0; }

.symbol{ width: 48px; height: 48px; border-radius: 12px; background: var(--flaeche); color: var(--navy); display: grid; place-items: center; margin-bottom: 18px; flex-shrink: 0; }
.symbol svg{ width: 24px; height: 24px; }
.flaeche .karte .symbol{ background: #e8eef3; }

.karte-schwerpunkt{ border-top: 3px solid var(--akzent); }
.marke{
  position: absolute; top: 18px; right: 18px;
  font-family: "Poppins", sans-serif; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--akzent-text); background: #fbf1e4; padding: 4px 10px; border-radius: 999px;
}

.hinweiszeile{ display: flex; gap: 10px; align-items: flex-start; margin: 28px 0 0; font-size: .98rem; }
.hinweiszeile svg{ width: 20px; height: 20px; color: var(--navy); flex-shrink: 0; margin-top: 3px; }
.hinweiszeile b{ color: var(--dunkel); }
.hinweiszeile + .hinweiszeile{ margin-top: 10px; }

/* ============================================================
   PROJEKTE
   ============================================================ */

/* Sicherheitskacheln im 2er-Raster. Wie im 3er-Raster sind die Kacheln einer Reihe gleich
   hoch, der Knopf sitzt per margin-top:auto unten und die Details-Zeilen stehen auf einer Linie. */
.raster-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 640px){ .raster-2{ grid-template-columns: minmax(0, 1fr); } }
/* doppelt so breite Kacheln: Signet flacher, sonst wird es rund 300 px hoch.
   min-height:0 ist nötig, sonst setzt die Grundhöhe des SVG (16:9) die alte Höhe wieder durch. */
@media (min-width: 641px){ .raster-2 .projekt-bild{ aspect-ratio: 2 / 1; min-height: 0; overflow: hidden; } }
/* Aufmacher-Kachel über die ganze Breite: Signet links, genau so breit wie eine Kachel darunter,
   damit seine Kante mit der Rasterfuge fluchtet. Die Höhe gibt der Text vor, nicht das Seitenverhältnis.
   Am Handy steht sie wie jede andere Kachel. */
@media (min-width: 641px){
  .raster-2 .projekt-breit{ grid-column: 1 / -1; flex-direction: row; }
  .raster-2 .projekt-breit .projekt-bild{ flex: 0 0 calc(50% - 12px); aspect-ratio: auto; min-height: 250px; }
}

/* Planungskachel: gestrichelter Rand statt einer dritten Farbe, Marke oben rechts über dem Signet */
.projekt-plan{ border-style: dashed; border-color: #b9c4ce; }
.projekt .marke{ z-index: 1; }

/* Aufklapper für die Automations- und Softwareprojekte, zu Beginn geschlossen */
.mehr-projekte{ margin-top: 32px; }
.mehr-projekte > summary{
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding: 18px 22px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche);
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--navy);
}
.mehr-projekte > summary::-webkit-details-marker{ display: none; }
.mehr-projekte > summary .anzahl{ font-weight: 500; font-size: .88rem; color: var(--akzent-text); }
.mehr-projekte > summary::after{ content: "+"; margin-left: auto; font-size: 1.5rem; line-height: 1; transition: transform .2s ease; }
.mehr-projekte[open] > summary::after{ transform: rotate(45deg); }
.mehr-projekte > summary:hover{ border-color: var(--navy-hell); }
.mehr-projekte > .projekte{ margin-top: 24px; }
.projekt{ display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.projekt:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(14,38,56,.12); }
/* Gemeinsamer Untergrund beider Projektgrafiken -- die Kachel und das grosse Schema
   stehen auf demselben Verlauf, damit das Popup wie eine Vergrösserung wirkt. */
.projekt-bild, .projekt-gross{
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 80% 20%, rgba(224,164,88,.28), transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-hell) 100%);
}
.projekt-bild{
  aspect-ratio: 16 / 9; display: grid; place-items: center; align-content: center; gap: 10px;
}
/* Eine gezeichnete Szene füllt die Kachel ganz aus, das Platzhalter-Icon (.i) bleibt klein. */
.projekt-bild svg.szene{ width: 100%; height: 100%; }
/* Das grosse Schema steht im Quelltext im <details>. Ohne JavaScript klappt es dort auf,
   mit JavaScript wird es stattdessen ins Popup geklont (siehe main.js). */
.projekt-gross{ margin: 18px 0 0; border-radius: 8px; overflow: hidden; }
.projekt-gross svg{ width: 100%; height: auto; display: block; }
.projekt-bild svg{ width: 52px; height: 52px; stroke-width: 1.4; }
.projekt-bild span{ font-family: "Poppins", sans-serif; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.projekt-inhalt{ padding: 22px 24px 20px; display: flex; flex-direction: column; flex: 1; }

.tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tags span{ font-family: "Poppins", sans-serif; font-size: .72rem; font-weight: 500; color: var(--navy); background: var(--flaeche); padding: 3px 10px; border-radius: 999px; }
.projekt .kurz{ margin: 0 0 16px; }

.projekt details{ margin-top: auto; border-top: 1px solid var(--linie); padding-top: 14px; }
.projekt summary{
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .9rem; color: var(--navy);
}
.projekt summary::-webkit-details-marker{ display: none; }
.projekt summary::after{ content: "+"; font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
.projekt details[open] summary::after{ transform: rotate(45deg); }
.projekt dl, .pd-koerper dl{ margin: 18px 0 0; }
.projekt dt, .pd-koerper dt{ font-family: "Poppins", sans-serif; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--akzent-text); margin-top: 14px; }
.projekt dd, .pd-koerper dd{ margin: 3px 0 0; font-size: .96rem; line-height: 1.6; }

/* Aufzählung innerhalb eines Abschnitts, etwa die Befunde des Monitorings */
.projekt dd ul, .pd-koerper dd ul{ margin: 8px 0 10px; padding-left: 1.2em; }
.projekt dd li + li, .pd-koerper dd li + li{ margin-top: 6px; }

/* Kennzahlen über dem Text: grosse Zahl, darunter was sie bedeutet.
   Bewusst eine Liste und keine <dl>, damit die Abschnitte der Kachel allein die <dt> stellen. */
.kennzahlen{ margin: 20px 0 0; }
.kennzahlen h4{
  margin: 0 0 10px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--akzent-text);
}
.kennzahlen ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kennzahlen li{ background: var(--flaeche); border-radius: 8px; padding: 12px 14px; }
.kennzahlen b{ display: block; font-family: "Poppins", sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--navy); }
.kennzahlen span{ display: block; margin-top: 2px; font-size: .84rem; line-height: 1.4; }
/* Am Handy würde die dritte Zahl allein in einer Reihe stehen -- dort Zeilen, Zahl links, Text rechts */
@media (max-width: 560px){
  .kennzahlen ul{ grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kennzahlen li{ display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
  .kennzahlen b{ flex: 0 0 4.4em; font-size: 1.3rem; }
  .kennzahlen span{ margin-top: 0; }
}

/* Kachel mit zwei Fällen: je eine Zwischenüberschrift, darunter der eigene Ablauf */
.fall + .fall{ margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); }
.fall h4{ margin: 18px 0 0; font-size: 1rem; font-weight: 600; color: var(--navy); }
.fall + .fall h4{ margin-top: 0; }
.fall dl{ margin-top: 4px; }

/* ---------- Screenshot-Galerie ----------
   Steht im Quelltext im <details> der Kachel und wird ins Popup geklont.
   Ein Klick öffnet das Bild in voller Grösse in einem neuen Tab -- bewusst
   ohne zweites Popup im Popup, das wäre für Fokus und Tastatur ein Eigentor. */
.projekt-bilder{ margin: 22px 0 0; }
.projekt-bilder h4{
  margin: 0 0 12px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--akzent-text);
}
/* Die Bilder teilen sich die Breite, hören aber bei 200 px auf zu wachsen.
   Ohne Deckel würden zwei Hochformate im Popup fast die ganze Höhe fressen. */
.pb-reihe{ display: flex; flex-wrap: wrap; gap: 14px; }
.pb-reihe figure{ flex: 1 1 145px; max-width: 200px; min-width: 0; }
.projekt-bilder h4 span{ font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); }
.pb-reihe figure{ margin: 0; }
/* Alle Vorschaubilder im selben Format, sonst stehen die Bildunterschriften
   auf verschiedenen Höhen. 9:20 liegt nahe an den Handy-Screenshots (0,42 bis 0,48),
   es fehlt also höchstens ein schmaler Rand unten. Die Lupe zeigt, dass es
   das ganze Bild einen Klick weiter gibt. */
.pb-reihe a{
  position: relative; display: block; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--linie); background: var(--flaeche);
  aspect-ratio: 9 / 20;
}
.pb-reihe a:hover{ border-color: var(--akzent); }
.pb-reihe picture{ display: contents; }
.pb-reihe img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pb-reihe a::after{
  content: ""; position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(14, 38, 56, .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.pb-reihe figcaption{ margin-top: 7px; font-size: .78rem; line-height: 1.35; }

/* Am Handy nebeneinander zu schmal -- deshalb wischbar statt gestapelt,
   gestapelt wäre die Galerie länger als der ganze Text darüber. */
@media (max-width: 560px){
  .pb-reihe{
    flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  }
  .pb-reihe figure{ flex: 0 0 52%; max-width: none; scroll-snap-align: start; }
}

/* ============================================================
   PROJEKT-POPUP
   Entsteht erst im Browser (siehe main.js). Ohne JavaScript oder ohne
   <dialog> bleiben die Details als aufklappbares <details> in der Kachel.
   ============================================================ */
.projekt.klickbar{ cursor: pointer; }
.projekt-knopf{
  margin-top: auto; width: 100%; padding: 14px 0 0; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--linie); background: transparent;
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .9rem; color: var(--navy);
}
.projekt-knopf::after{ content: "+"; font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
.projekt.klickbar:hover .projekt-knopf{ color: var(--akzent-text); }
.projekt.klickbar:hover .projekt-knopf::after{ transform: rotate(90deg); }

.projekt-dialog{
  width: min(720px, calc(100vw - 32px));
  max-height: 86vh; max-height: 86dvh;
  padding: 0; border: 0; border-radius: var(--radius);
  background: #fff; color: var(--text);
  box-shadow: 0 30px 80px rgba(14, 38, 56, .35);
  overflow: hidden;                      /* hält die runden Ecken über der Grafik */
  display: flex; flex-direction: column;
}
/* Muss sein: das display oben schlägt die Browserregel dialog:not([open]){display:none}
   und das geschlossene Popup stünde sonst sichtbar am Seitenende. */
.projekt-dialog:not([open]){ display: none; }
/* Der Hintergrund verschwimmt. Die leichte Einfärbung bleibt trotzdem, sonst
   verliert das weisse Popup auf hellen Stellen seine Kante. Kennt der Browser
   backdrop-filter nicht, dunkelt die erste Regel wie bisher ab. */
.projekt-dialog::backdrop{ background: rgba(14, 38, 56, .72); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .projekt-dialog::backdrop{
    background: rgba(14, 38, 56, .34);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
}

/* Klon der Kachel-Grafik: das 16:9 der Kachel würde im Popup halbe Höhe fressen.
   Gilt für alle Projekte, die noch kein eigenes Schema haben. */
.projekt-dialog .projekt-bild{ aspect-ratio: auto; height: clamp(110px, 20vh, 170px); flex-shrink: 0; }
.projekt-dialog .projekt-bild img{ width: 100%; height: 100%; object-fit: cover; }
/* Liegt ein grosses Schema vor, tritt es an die Stelle des Klons. Es behält sein
   Seitenverhältnis (2:1), wird also nicht auf einen Streifen beschnitten. */
.projekt-dialog .projekt-gross{ margin: 0; border-radius: 0; flex-shrink: 0; }

.pd-zu{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(14, 38, 56, .55); color: #fff; display: grid; place-items: center;
}
.pd-zu svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pd-zu:hover{ background: rgba(14, 38, 56, .8); }

.pd-koerper{
  padding: 24px 28px 28px;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* Schatten am oberen und unteren Rand, solange dort Text weitergeht.
     Die beiden weissen Verläufe scrollen mit (local) und schieben sich über
     die feststehenden Schatten (scroll) -- am Anfang und Ende bleibt es glatt. */
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) top    / 100% 26px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0,    rgba(14,38,56,.16), rgba(14,38,56,0)) top    / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(14,38,56,.16), rgba(14,38,56,0)) bottom / 100% 12px no-repeat scroll;
  background-color: #fff;
}
.pd-koerper h3{ font-size: clamp(1.2rem, 2.4vw, 1.45rem); margin: 0 0 8px; }
.pd-kurz{ margin: 0; color: var(--dunkel); }

@media (max-width: 560px){
  /* Am Handy als ganzflächige Karte, sonst wird der Text zu schmal */
  .projekt-dialog{ width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .pd-koerper{ padding: 20px 20px 32px; }
}

/* Sobald die Kacheln untereinander stehen, fällt der Kurztext weg: Grafik, Tags,
   Titel und Knopf reichen zum Überfliegen. Der Text bleibt im Quelltext und im Popup --
   dorthin wird er als Text geklont, display:none ändert daran nichts. */
@media (max-width: 640px){
  .projekt .kurz{ display: none; }
  .projekt-knopf{ margin-top: 10px; }
}

/* Hintergrund nicht mitscrollen. Der Platz für die Scrollleiste bleibt
   reserviert (scrollbar-gutter oben), deshalb springt das Layout nicht. */
html.popup-offen, html.popup-offen body{ overflow: hidden; }

@media (prefers-reduced-motion: no-preference){
  .projekt-dialog[open]{ animation: pd-auf .22s ease-out; }
  .projekt-dialog[open]::backdrop{ animation: pd-blende .22s ease-out; }
  @keyframes pd-auf{ from{ opacity: 0; transform: translateY(14px) scale(.98); } }
  @keyframes pd-blende{ from{ opacity: 0; } }
}

/* ============================================================
   ARBEITSWEISE (dunkler Abschnitt)
   ============================================================ */
.dunkel-bereich{ background: var(--navy); color: rgba(255,255,255,.82); }
.dunkel-bereich .kopf h2{ color: #fff; }
.dunkel-bereich .eyebrow{ color: var(--akzent); }
.prinzip{ padding: 28px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.prinzip .nr{ font-family: "Poppins", sans-serif; font-weight: 700; font-size: .9rem; color: var(--akzent); }
.prinzip h3{ color: #fff; font-size: 1.12rem; font-weight: 600; margin: 8px 0 10px; }
.prinzip p{ margin: 0; }

/* Dieselbe Mechanik wie im Werdegang: am Handy klappt der Text weg, sechs Grundsätze
   stehen dann als Liste da. Offen im Quelltext, zugeklappt erst durch main.js. */
.prinzip-mehr > summary{ display: none; }
@media (max-width: 760px){
  .prinzip{ padding: 20px; }
  .prinzip-mehr{ margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); }
  .prinzip-mehr > summary{
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; list-style: none;
    font-family: "Poppins", sans-serif; font-weight: 600; font-size: .88rem; color: #fff;
  }
  .prinzip-mehr > summary::-webkit-details-marker{ display: none; }
  .prinzip-mehr > summary::after{ content: "+"; font-size: 1.4rem; line-height: 1;
    color: var(--akzent); transition: transform .2s ease; }
  .prinzip-mehr[open] > summary::after{ transform: rotate(45deg); }
  .prinzip-mehr p{ margin-top: 10px; }
}

/* ============================================================
   KENNTNISSE
   ============================================================ */
.kenntnisse{ align-items: start; }
.stufe{ margin-top: 18px; }
.stufe h4{ font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--akzent-text); margin-bottom: 8px; }
.chips{ display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.chips li{ background: var(--flaeche); color: var(--dunkel); border-radius: 8px; padding: 5px 11px; font-size: .9rem; line-height: 1.4; }
.chips-akzent li{ background: #fbf1e4; }
/* Absatz unter den Kenntnissen: Praxis und Sicherheitsfrage der Feldbusse, gleicher Look wie .bruecke im Profil */
.landschaft{ max-width: 860px; margin: 28px 0 0; padding: 20px 24px; background: var(--flaeche); border-left: 3px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0; color: var(--dunkel); }
.landschaft b{ display: block; font-family: "Poppins", sans-serif; font-weight: 600; margin-bottom: 4px; }

/* ============================================================
   WERDEGANG
   ============================================================ */
.werdegang-raster{ display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }

.zeitleiste{ list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 2px solid #cfd8e0; }
.station{ position: relative; padding-bottom: 36px; }
.station:last-child{ padding-bottom: 0; }
.station::before{
  content: ""; position: absolute; left: -36px; top: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--flaeche); border: 3px solid var(--navy);
}
.station:first-child::before{ background: var(--akzent); border-color: var(--akzent); }
.zeit{ display: block; font-family: "Poppins", sans-serif; font-size: .82rem; font-weight: 600; color: var(--akzent-text); }
.station h3{ font-size: 1.15rem; font-weight: 600; margin: 4px 0 2px; }
.station .funktion{ margin: 0; color: var(--navy-hell); font-weight: 700; }
.station p{ margin: 8px 0 0; }
.station ul{ margin: 10px 0 0; padding-left: 20px; }
.station li{ margin-bottom: 6px; }
.station li::marker{ color: var(--navy); }
.branchen{ font-size: .93rem; color: #6b737a; }
.branchen b{ color: var(--dunkel); }

.werdegang-seite{ display: grid; gap: 20px; }
.werdegang-seite .karte{ padding: 24px; }

/* Foto diffus hinter dem Werdegang, rechte Seite. Erst ab 900px: am Handy läge
   es direkt unter dem Text. Als background-image in der Media Query wird es dort
   gar nicht erst geladen, anders als ein ausgeblendetes <img>. */
@media (min-width: 900px){
  #werdegang{ position: relative; isolation: isolate; overflow: hidden; }

  /* Das Foto an der Unterkante verankert und als ganze Figur (contain statt cover):
     unterhalb der Karten bleibt Platz, dort ist Steffen komplett zu sehen. */
  #werdegang::after{
    content: ""; position: absolute; z-index: -1;
    inset: auto 0 0 auto; width: min(44%, 600px); height: min(92%, 1000px);
    background: url("../img/werdegang.jpg") right bottom / contain no-repeat;
    background-image: image-set(url("../img/werdegang.avif") type("image/avif"), url("../img/werdegang.jpg") type("image/jpeg"));
    opacity: .30;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  }

  /* Karten wie Milchglas, damit das Foto dahinter durchscheinen darf,
     ohne dass die Angaben darauf an Lesbarkeit verlieren. */
  .werdegang-seite .karte{
    background: rgba(255, 255, 255, .68);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, .8);
  }
}
.werdegang-seite h3{ margin-bottom: 14px; }
.eintrag{ margin-bottom: 14px; line-height: 1.45; }
.eintrag:last-child{ margin-bottom: 0; }
.eintrag b{ display: block; color: var(--dunkel); }
.eintrag > span:not(.zeit){ display: block; font-size: .93rem; }

@media (max-width: 900px){ .werdegang-raster{ grid-template-columns: minmax(0, 1fr); } }

/* Am Handy fällt die zweite Spalte weg und die Stationen stehen als reine Textsäule
   untereinander -- genau das las sich in der Testrunde als Fliesstext. Dort wird jede
   Station deshalb zur Karte, wie in "Persönlich" und bei den Kenntnissen. Die Zeitschiene
   bleibt stehen, sie trägt die Chronologie. */
@media (max-width: 760px){
  .zeitleiste{ padding: 0 0 0 22px; display: grid; gap: 16px; }
  .station{ padding: 22px 20px; background: #fff; border: 1px solid var(--linie);
            border-radius: var(--radius); box-shadow: var(--schatten); }
  .station, .station:last-child{ padding-bottom: 22px; }
  .station::before{ left: -30px; top: 24px; width: 14px; height: 14px; }
  .station h3{ margin-top: 0; }

  /* Das Datum als Marke: der Anker fürs Auge, den anderswo die Symbolkachel gibt */
  .zeit{ display: inline-block; margin-bottom: 8px; padding: 3px 10px;
         background: #fbf1e4; border-radius: 999px; font-size: .76rem; letter-spacing: .04em; }
}

/* Aufgabenlisten: am Handy eingeklappt, am Rechner offen und ohne Bedienelement.
   Im Quelltext stehen sie offen -- zugeklappt wird erst im Browser (main.js),
   ohne JavaScript bleibt damit alles lesbar. */
.station-mehr > summary{ display: none; }
@media (max-width: 760px){
  .station-mehr{ margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
  .station-mehr > summary{
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; list-style: none;
    font-family: "Poppins", sans-serif; font-weight: 600; font-size: .88rem; color: var(--navy);
  }
  .station-mehr > summary::-webkit-details-marker{ display: none; }
  .station-mehr > summary::after{ content: "+"; font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
  .station-mehr[open] > summary::after{ transform: rotate(45deg); }
  .station-mehr ul{ margin-top: 10px; }
}

/* ============================================================
   PERSÖNLICH
   ============================================================ */
.persoenlich-raster{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
.persoenlich-bild{ border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.persoenlich-bild img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.persoenlich-raster .kopf{ margin-bottom: 28px; }

.hobbys{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; list-style: none; padding: 0; margin: 0; }
.hobby{ display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.hobby .symbol{ width: 44px; height: 44px; margin: 0; }
.hobby .symbol svg{ width: 22px; height: 22px; }
.hobby b{ display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .98rem; color: var(--dunkel); }
.hobby span{ display: block; font-size: .94rem; line-height: 1.5; margin-top: 2px; }

@media (max-width: 900px){ .persoenlich-raster{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px){ .hobbys{ grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   KONTAKT + FUSS
   ============================================================ */
.kontakt{ background: var(--navy-tief); color: rgba(255,255,255,.82); text-align: center; }
.kontakt .kopf{ margin-inline: auto; margin-bottom: 0; }
.kontakt .kopf h2{ color: #fff; }
.kontakt .eyebrow{ color: var(--akzent); }
.kontakt .knoepfe{ justify-content: center; }
.mailtext{ margin: 22px 0 0; font-family: "Poppins", sans-serif; font-size: .95rem; color: rgba(255,255,255,.7); }

.fuss{ background: #0a1c2a; color: rgba(255,255,255,.55); font-size: .88rem; padding-block: 22px; }
.fuss .container{ display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.fuss a{ color: rgba(255,255,255,.8); }

/* ============================================================
   RECHTSTEXT (datenschutz.html)
   ============================================================ */
.rechtstext{ padding-block: calc(var(--nav-hoehe) + 48px) 80px; }
.rechtstext .container{ max-width: 780px; }
.rechtstext h1{ font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--navy); margin-bottom: 8px; }
.rechtstext h2{ font-size: 1.2rem; margin: 36px 0 8px; color: var(--dunkel); }
.rechtstext p, .rechtstext li{ margin: 0 0 12px; }
.rechtstext .stand{ margin-top: 36px; color: #6b737a; }

/* ============================================================
   DRUCK
   main.js klappt vor dem Drucken alle <details> auf (auch die Projektdetails,
   die sonst nur im Popup erscheinen). Hier fällt weg, was auf Papier nichts
   taugt: Navigation, Knöpfe, Aufklapp-Zeichen und die Grafiken auf Navy-Grund,
   weil Browser Hintergründe standardmässig nicht drucken.
   ============================================================ */
@media print{
  .nav, .sprung, .knoepfe, .projekt-knopf, .fokus, .projekt-bild, .projekt-gross, .projekt-bilder,
  .projekt summary, .station-mehr > summary, .prinzip-mehr > summary, .mehr-projekte > summary::after{ display: none !important; }
  body{ font-size: 10.5pt; }
  section{ padding-block: 18px; }
  .hero{ min-height: 0; padding: 0 0 12px; background: none; color: var(--dunkel); }
  .hero::before, #werdegang::after{ display: none; }
  .hero-text{ margin: 0; max-width: none; }
  .hero h1, .hero h1 span, .hero .rolle, .hero .lead{ color: var(--dunkel); }
  .ort{ border-color: var(--linie); background: none; }
  .dunkel-bereich, .kontakt{ background: none; color: var(--text); }
  .dunkel-bereich .kopf h2, .kontakt .kopf h2, .prinzip h3{ color: var(--dunkel); }
  .prinzip{ border-color: var(--linie); }
  .karte, .station{ box-shadow: none; }
  .projekt:hover{ transform: none; }
  .projekt details{ border-top: 0; padding-top: 0; }
  .mehr-projekte > summary{ border: 0; background: none; padding: 0; }
  .fuss{ background: none; color: var(--text); }
  a{ text-decoration: none; }
}

/* Datenschutzseite: nur ein Link zurück, auch am Handy immer sichtbar
   (vorher als style-Attribut im HTML, das die Content-Security-Policy blockiert) */
.menue.menue-einfach, .nav.offen .menue.menue-einfach{
  display: flex; position: static; flex-direction: row; box-shadow: none; padding: 0; background: none;
}
.menue-einfach a, .nav.gescrollt .menue-einfach a{ border: 0; }

/* ============================================================
   FIREWALL-MATRIX (Segmentierungskachel)
   Steht im <details> der Kachel und wird mit dem Text ins Popup geklont.
   Spaltenköpfe senkrecht, damit acht Ziele auch im Popup nebeneinander passen.
   Am Handy scrollt nur die Tabelle seitlich, nicht die Seite.
   ============================================================ */
.matrix{ margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); }
.matrix h4{ margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--navy); }
.matrix p{ margin: 0; font-size: .92rem; }
.mx-rahmen{ margin: 14px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix table{ border-collapse: collapse; font-size: .86rem; }
.matrix thead th{ vertical-align: bottom; padding: 0 0 8px; }
.matrix thead th span:not(.sr){
  display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; font-family: "Poppins", sans-serif; font-weight: 500; font-size: .78rem; color: var(--dunkel);
}
.matrix tbody th{ text-align: left; font-weight: 700; color: var(--dunkel); padding: 5px 14px 5px 0; white-space: nowrap; }
.matrix .mx-unter th{ font-weight: 400; padding-left: 14px; color: var(--text); }
.matrix td{ width: 36px; height: 32px; text-align: center; border: 1px solid var(--linie); }
.matrix td.mx-gleich, .mx-gleich-muster{
  background: repeating-linear-gradient(135deg, var(--flaeche) 0 4px, #e6ebef 4px 8px);
}
.mx-ja, .mx-nein, .mx-teil, .mx-gleich-muster{ display: inline-block; vertical-align: middle; }
.mx-ja{ width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); }
.mx-nein{ width: 10px; height: 2px; background: #b9c4ce; }
.mx-teil{
  width: 20px; height: 20px; line-height: 17px; border-radius: 50%; border: 1.5px solid var(--akzent);
  font-family: "Poppins", sans-serif; font-size: .7rem; font-weight: 600; color: var(--akzent-text);
}
.mx-gleich-muster{ width: 16px; height: 16px; border: 1px solid var(--linie); }
.mx-legende{ list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; }
.mx-legende li{ display: flex; align-items: center; gap: 7px; }
.mx-ausnahmen{ margin: 14px 0 12px; padding-left: 22px; font-size: .9rem; }
.mx-ausnahmen li{ margin-bottom: 4px; }
.mx-ausnahmen li::marker{ color: var(--akzent-text); font-weight: 700; }
.mx-legende .mx-teil, .mx-legende .mx-ja, .mx-legende .mx-nein, .mx-legende .mx-gleich-muster{ flex-shrink: 0; }
.mx-teil{ text-align: center; }

/* Querformat in der Galerie (Auswertungen): volle Breite, eigenes Seitenverhältnis statt 9:20 */
.pb-reihe figure.pb-quer{ flex: 1 1 100%; max-width: none; }
.pb-reihe .pb-quer a{ aspect-ratio: auto; }
.pb-reihe .pb-quer img{ height: auto; object-fit: contain; }
@media (max-width: 560px){ .pb-reihe figure.pb-quer{ flex: 0 0 100%; } }