/* MBM-Website — Stylesheet
 *
 * Grundlage ist der Seitenaufbau von michel.plus (Passepartout-Rahmen,
 * Fotobanner, Textspalte, Akkordeons, Projektkacheln, Zitatband, zentrierter
 * Footer). Farben, Schrift und Logo folgen den MBM Design Standards v1.0
 * (JOS/creative, 2026-03-13). Was sich gegenüber michel.plus geändert hat,
 * steht in AENDERUNGEN.md im Repo-Wurzelverzeichnis.
 *
 * Farbregeln aus dem CD (Kontrast nach WCAG 2.1):
 *   Dunkelblau auf Weiß 11,3:1  -> Headlines, Links, Labels
 *   Orange auf Weiß      2,6:1  -> NIE für Text; nur Linien, Flächen, Icons
 *   Orange auf Dunkelblau 4,3:1 -> nur große, fette Schrift (z. B. Nummern)
 */

/* ---------------------------------------------------------------------------
 * Schrift: DM Sans (SIL Open Font License), lokal ausgeliefert — keine
 * Verbindung zu Google-Servern. Variable Font, deckt Light bis Bold ab.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("../fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* CD-Farben (Design Standards v1.0) */
  --mbm-dunkelblau: #003f5c;
  --mbm-orange: #ff7a00;
  /* Helle Töne der CD-Farben — laut Alex ausdrücklich zulässig; Werte aus den
     internen MBM-Vorlagen übernommen */
  --mbm-blau-mittel: #6690a3;
  --mbm-flaeche: #e8edf1;
  --mbm-linie: #e0e6ed;
  --text: #1d1d1b;
  --text-leise: #4a5358;
  --weiss: #ffffff;

  --schrift: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --leinwand-breite: 1400px;
  --inhalt-breite: 1100px;
  --text-breite: 800px;
  --seitenrand: clamp(20px, 7vw, 150px);
  --rahmen: clamp(0px, 4.5vw, 72px);
  --abstand: clamp(48px, 7vw, 90px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: clamp(16px, 0.9rem + 0.35vw, 19px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  /* Passepartout wie auf michel.plus — jetzt in MBM-Dunkelblau */
  background: var(--mbm-dunkelblau);
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--mbm-dunkelblau);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
a:hover { text-decoration-color: var(--mbm-orange); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--mbm-orange);
  outline-offset: 3px;
}

h1, h2, h3 {
  color: var(--mbm-dunkelblau); line-height: 1.2; margin: 0 0 0.6em;
  /* Lange Komposita auf schmalen Bildschirmen: Trennstellen gezielt per ­ im
     Text setzen (automatische Trennung trennt auch dort, wo es hässlich wird) */
  hyphens: manual; overflow-wrap: break-word;
}
h1 { font-size: clamp(30px, 1.2rem + 2.2vw, 46px); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(24px, 1rem + 1.3vw, 34px); font-weight: 700; }
h3 { font-size: clamp(18px, 0.95rem + 0.5vw, 22px); font-weight: 500; }
p, ul, ol { margin: 0 0 1.1em; }
strong { font-weight: 700; }

.unsichtbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.sprunglink {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--weiss); padding: 0.6rem 1rem; border-radius: var(--radius);
}
.sprunglink:focus { top: 1rem; }

.entwurf-hinweis {
  background: var(--mbm-orange);
  color: #1d1d1b;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  padding: 0.4rem 1rem;
}

/* ---------------------------------------------------------------------------
 * Kopf: Dunkelblau mit Logo „Negativ, oranges Icon" — laut Alex die
 * bevorzugte Variante für Kopfzeilen. Wird beim Scrollen kompakter
 * (Verhalten wie auf michel.plus).
 * ------------------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mbm-dunkelblau);
}
.kopf__innen {
  max-width: var(--leinwand-breite);
  margin-inline: auto;
  padding: 26px calc(var(--rahmen) + var(--seitenrand) * 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: padding 0.3s;
}
.kopf__logo { display: block; flex-shrink: 0; }
.kopf__logo img { width: 250px; transition: width 0.3s; }
.kopf__logo-kurz { display: none !important; }
.ist-gescrollt .kopf__innen { padding-block: 14px; }
.ist-gescrollt .kopf__logo img { width: 180px; }

.kopf__nav ul {
  display: flex; flex-wrap: wrap; gap: 0.4rem clamp(1.4rem, 2.2vw, 2.4rem);
  list-style: none; margin: 0; padding: 0;
}
.kopf__nav a {
  color: var(--weiss);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  /* Größer als im ersten Wurf (0.85rem) – Feedback Alex 2026-09-15:
     „Die Leiste geht im Gesamtbild der Seite unter.“ */
  font-size: clamp(1rem, 0.85rem + 0.35vw, 1.15rem);
  font-weight: 600;
  padding-block: 0.4rem;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s;
}
.kopf__nav a:hover { border-bottom-color: rgba(255, 122, 0, 0.6); }
.kopf__nav a[aria-current="page"] { font-weight: 700; border-bottom-color: var(--mbm-orange); }

.kopf__menueknopf {
  display: none;
  background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer;
}
.kopf__menueknopf-linien,
.kopf__menueknopf-linien::before,
.kopf__menueknopf-linien::after {
  display: block; width: 26px; height: 2px; background: var(--weiss);
  transition: transform 0.3s, opacity 0.3s;
}
.kopf__menueknopf-linien { position: relative; }
.kopf__menueknopf-linien::before,
.kopf__menueknopf-linien::after { content: ""; position: absolute; left: 0; }
.kopf__menueknopf-linien::before { top: -8px; }
.kopf__menueknopf-linien::after { top: 8px; }
.kopf__menueknopf[aria-expanded="true"] .kopf__menueknopf-linien { background: transparent; }
.kopf__menueknopf[aria-expanded="true"] .kopf__menueknopf-linien::before { transform: translateY(8px) rotate(45deg); }
.kopf__menueknopf[aria-expanded="true"] .kopf__menueknopf-linien::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .kopf__innen { padding: 16px 20px; }
  .kopf__logo img, .ist-gescrollt .kopf__logo img { width: 128px; }
  .kopf__logo-voll { display: none !important; }
  .kopf__logo-kurz { display: block !important; }
  .js .kopf__menueknopf { display: block; }
  .js .kopf__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--mbm-dunkelblau);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem 20px 1.6rem;
    display: none;
  }
  .js .kopf__nav.ist-offen { display: block; }
  .js .kopf__nav ul { flex-direction: column; gap: 0; }
  .js .kopf__nav a { display: inline-block; font-size: 1.05rem; padding-block: 0.7rem; }
}

/* ---------------------------------------------------------------------------
 * Leinwand: weiße Fläche im dunkelblauen Rahmen (michel.plus-Prinzip).
 * ------------------------------------------------------------------------- */
.leinwand {
  max-width: calc(var(--leinwand-breite));
  margin: 0 var(--rahmen) var(--rahmen);
  background: var(--weiss);
}
@media (min-width: 1545px) {
  .leinwand { margin-inline: auto; }
}

.container {
  max-width: calc(var(--inhalt-breite) + 2 * var(--seitenrand));
  margin-inline: auto;
  padding-inline: var(--seitenrand);
}
.textspalte { max-width: var(--text-breite); margin-inline: auto; }

.sektion { padding-block: var(--abstand) 0; }
.sektion:last-child { padding-bottom: var(--abstand); }

/* Fotobanner */
.banner { padding-top: clamp(20px, 3vw, 40px); }
.banner img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: var(--fokus, 50% 40%);
}
@media (max-width: 700px) {
  .banner { padding-top: 0; }
  .banner .container { padding-inline: 0; }
  .banner img { aspect-ratio: 4 / 3; }
}

/* Seitentitel mit kleinem Kicker darüber (Muster aus den MBM-Vorlagen) */
.seitenkopf { padding-top: clamp(36px, 5vw, 64px); }
.kicker {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--mbm-dunkelblau);
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 0.9rem;
}
.kicker::before { content: ""; width: 32px; height: 3px; background: var(--mbm-orange); flex-shrink: 0; }
.untertitel { font-size: 1.15em; font-weight: 500; color: var(--text-leise); margin-top: -0.3em; }

.lead { font-size: 1.12em; font-weight: 300; line-height: 1.6; }
.lead strong { font-weight: 700; }

/* ---------------------------------------------------------------------------
 * Leistungsbereiche (Startseite): dunkelblaue Fläche, Nummern in Orange
 * ------------------------------------------------------------------------- */
.bereiche {
  background: var(--mbm-dunkelblau);
  color: var(--weiss);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 52px);
}
.bereiche h2 { color: var(--weiss); }
.bereiche__liste {
  list-style: none; margin: 1.5rem 0 1.8rem; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 1.6rem;
}
@media (max-width: 1100px) { .bereiche__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bereiche__liste { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.bereiche__liste a {
  display: block; color: var(--weiss); text-decoration: none; font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 0.9rem; line-height: 1.35;
}
.bereiche__liste a:hover { border-top-color: var(--mbm-orange); }
.bereiche__nummer {
  display: block; color: var(--mbm-orange); font-weight: 700; font-size: 1.6rem;
  line-height: 1; margin-bottom: 0.45rem;
}
.textlink-hell { color: var(--weiss); font-weight: 500; }

.pfeillink { font-weight: 500; text-decoration: none; }
.pfeillink::after { content: " →"; color: var(--mbm-orange); }
.pfeillink:hover { text-decoration: underline; text-decoration-color: var(--mbm-orange); }

/* ---------------------------------------------------------------------------
 * Akkordeon (natives <details>, wie auf michel.plus)
 * ------------------------------------------------------------------------- */
.akkordeon { border-bottom: 1px solid var(--mbm-dunkelblau); }
.akkordeon details { border-top: 1px solid var(--mbm-dunkelblau); }
.akkordeon summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 0;
  color: var(--mbm-dunkelblau);
  font-size: clamp(21px, 0.9rem + 1vw, 30px);
  font-weight: 700;
  line-height: 1.25;
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after {
  content: "";
  flex-shrink: 0;
  width: 22px; height: 22px;
  background:
    linear-gradient(var(--mbm-orange), var(--mbm-orange)) center / 100% 3px no-repeat,
    linear-gradient(var(--mbm-orange), var(--mbm-orange)) center / 3px 100% no-repeat;
  transition: transform 0.2s;
}
.akkordeon details[open] > summary::after {
  background: linear-gradient(var(--mbm-orange), var(--mbm-orange)) center / 100% 3px no-repeat;
}
.akkordeon__inhalt { padding: 0.6rem 0 2.2rem; }
.akkordeon__inhalt h3 { margin-top: 1.6rem; }
.akkordeon__inhalt h3:first-child { margin-top: 0.4rem; }

/* Aufzählungen mit runden orangen Punkten */
.liste { list-style: none; padding: 0; }
.liste li { position: relative; padding-left: 1.4em; margin-bottom: 0.45em; }
.liste li::before {
  content: ""; position: absolute; left: 0.1em; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--mbm-orange);
}

/* Stationen (Werdegang) */
.stationen { list-style: none; margin: 0; padding: 0; }
.stationen li { padding: 1rem 0 1rem 1.4rem; border-left: 3px solid var(--mbm-linie); position: relative; }
.stationen li::before {
  content: ""; position: absolute; left: -7px; top: 1.45rem;
  width: 11px; height: 11px; border-radius: 50%; background: var(--mbm-orange);
}
.stationen__zeit { display: block; font-size: 0.85em; font-weight: 700; color: var(--mbm-dunkelblau); letter-spacing: 0.04em; }
.stationen__titel { display: block; font-weight: 700; }
.stationen p { margin: 0.2rem 0 0; }

/* ---------------------------------------------------------------------------
 * Projektkacheln
 * ------------------------------------------------------------------------- */
.kacheln {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px 30px; list-style: none; margin: 0; padding: 0;
}
@media (max-width: 787px) { .kacheln { grid-template-columns: 1fr; gap: 48px; } }
.kachel__bild { display: block; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.kachel__bild img { width: 100%; height: clamp(200px, 23vw, 300px); object-fit: cover; transition: transform 0.4s; }
.kachel__bild:hover img { transform: scale(1.06); }
.kachel__titel {
  position: relative; margin: -34px 24px 0 24px;
  background: var(--mbm-dunkelblau);
  border-left: 6px solid var(--mbm-orange);
  padding: 12px 16px;
  font-size: clamp(17px, 0.8rem + 0.7vw, 23px);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.kachel__titel a { color: var(--weiss); text-decoration: none; }
.kachel__titel a:hover { text-decoration: underline; text-decoration-color: var(--mbm-orange); }

.eckdaten { margin: 1rem 24px 0; font-size: 0.92em; line-height: 1.5; }
.eckdaten div { margin-bottom: 0.3rem; }
.eckdaten dt {
  display: inline; font-weight: 700; color: var(--mbm-dunkelblau);
  text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.06em; margin-right: 0.4em;
}
.eckdaten dd { display: inline; margin: 0; }
.projektkopf .eckdaten { margin-inline: 0; }
.projektkopf + .sektion { padding-top: clamp(28px, 3vw, 40px); }

/* ---------------------------------------------------------------------------
 * Zitatband: volle Breite, Dunkelblau
 * ------------------------------------------------------------------------- */
.zitatband {
  background: var(--mbm-dunkelblau);
  color: var(--weiss);
  /* Das Band liegt in der Leinwand; weil der Rahmen dieselbe Farbe hat, wirkt
     es wie auf michel.plus über die volle Fensterbreite. */
  padding: clamp(44px, 6vw, 80px) var(--seitenrand);
  margin-top: var(--abstand);
}
.zitatband blockquote { max-width: 900px; margin: 0 auto; }
.zitatband p {
  font-size: clamp(21px, 0.9rem + 1.2vw, 32px);
  font-weight: 300;
  line-height: 1.35;
  margin-bottom: 1.2rem;
}
.zitatband blockquote::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--mbm-orange);
  margin-bottom: 1.4rem;
}
.zitatband footer { font-size: 1rem; font-weight: 500; }
.zitatband footer span { display: block; font-weight: 300; opacity: 0.85; }
.zitatband--zentriert blockquote { text-align: center; }
.zitatband--zentriert blockquote::before { margin-inline: auto; }

/* Hinweisbox (helle Fläche, ohne Rahmen) */
.hinweis {
  background: var(--mbm-flaeche);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  font-size: 0.92em;
}
.hinweis p:last-child { margin-bottom: 0; }
.hinweis--entwurf { border-left: 6px solid var(--mbm-orange); }

.platzhalter { background: #fff0e0; padding: 0 0.25em; border-radius: 3px; font-weight: 500; }

.zurueck { margin-top: 2rem; }

/* Bild mit Unterschrift */
.abbildung { max-width: 520px; margin: 0 auto; }
.abbildung img { border: 1px solid var(--mbm-linie); }
.abbildung figcaption { font-size: 0.85em; color: var(--text-leise); margin-top: 0.7rem; }

/* ---------------------------------------------------------------------------
 * Team
 * ------------------------------------------------------------------------- */
.team {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 70px) clamp(28px, 4vw, 56px);
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 787px) { .team { grid-template-columns: 1fr; } }

.person__bild {
  aspect-ratio: 4 / 5;
  background: var(--mbm-flaeche);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  max-width: 460px;
}
.person__bild img { width: 100%; height: 100%; object-fit: cover; }
.person__bild::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 6px; background: var(--mbm-orange);
}
.person__bild--platzhalter {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
}
.person__initialen {
  font-size: clamp(64px, 9vw, 120px); font-weight: 700; color: var(--mbm-dunkelblau);
  letter-spacing: -0.02em; line-height: 1;
}
/* Kennzeichnung des KI-Kollegen: kleines dunkelblaues Schild oben links im Bild */
.person__kennzeichen {
  position: absolute; top: 14px; left: 14px;
  background: var(--mbm-dunkelblau); color: var(--weiss);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.35rem 0.6rem; border-radius: 4px;
}
.person__name { margin: 1.4rem 0 0.2rem; font-size: clamp(22px, 1rem + 0.8vw, 28px); }
.person__funktion {
  color: var(--mbm-dunkelblau); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.8rem; margin-bottom: 1rem;
}
.person__abschnitt { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mbm-dunkelblau); margin: 1.2rem 0 0.4rem; }
.person details { border-top: 1px solid var(--mbm-linie); margin-top: 1.2rem; }
.person summary {
  cursor: pointer; padding: 0.7rem 0; font-weight: 500; color: var(--mbm-dunkelblau);
}
.person summary::marker { color: var(--mbm-orange); }
.person .stationen { font-size: 0.92em; }

/* Profilseite: Porträt + Kurzprofil nebeneinander */
.profil {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 70px); align-items: start;
}
@media (max-width: 787px) { .profil { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
 * Rechtstexte
 * ------------------------------------------------------------------------- */
.rechtstext h2 { font-size: clamp(19px, 0.9rem + 0.6vw, 24px); margin-top: 2.2rem; }

/* ---------------------------------------------------------------------------
 * Fuß: weiße Leinwand, Logo, drei Spalten mit dünnen orangen Trennlinien
 * (Motiv aus dem MBM-Briefpapier)
 * ------------------------------------------------------------------------- */
.fuss {
  border-top: 1px solid var(--mbm-linie);
  margin-top: var(--abstand);
  padding: clamp(48px, 6vw, 90px) var(--seitenrand) clamp(56px, 7vw, 100px);
  text-align: center;
  font-size: 0.92em;
}
.fuss__logo { display: inline-block; margin-bottom: 2.4rem; }
.fuss__logo img { width: 210px; }
.fuss__spalten { display: flex; justify-content: center; flex-wrap: wrap; }
.fuss__spalte { padding: 0.2rem 2.2rem; text-align: left; }
.fuss__spalte + .fuss__spalte { border-left: 1px solid var(--mbm-orange); }
.fuss__spalte p { margin: 0; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
@media (max-width: 787px) {
  .fuss__spalten { flex-direction: column; align-items: center; gap: 1.2rem; }
  .fuss__spalte { text-align: center; padding: 0; }
  .fuss__spalte + .fuss__spalte { border-left: 0; border-top: 1px solid var(--mbm-orange); padding-top: 1.2rem; }
}

/* 404 */
.fehlerseite { text-align: center; padding-block: clamp(60px, 10vw, 140px); }
.fehlerseite__code { font-size: clamp(90px, 16vw, 160px); font-weight: 700; color: var(--mbm-dunkelblau); line-height: 1; margin: 0; }
.fehlerseite__code::after {
  content: ""; display: block; width: 72px; height: 6px; background: var(--mbm-orange); margin: 1.2rem auto 2rem;
}