/* ==========================================================================
   MEDIAN Beratung — Stylesheet
   Alle Werte stammen aus dem Skill `median-beratung-ci`. Kein Hexwert, der
   nicht in der Farbtabelle steht. Keine externen Requests.
   Alle Bausteine tragen das Praefix .m- ; keine Regel auf nackten Elementen.
   ========================================================================== */

/* --- Schrift: selbst gehostet, vier Schnitte, kein Google Fonts ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/poppins-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/poppins-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/poppins-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/poppins-latin-700-normal.woff2") format("woff2")}

/* --- Token --------------------------------------------------------------- */
:root{
  --navy:#244061;
  --wmpblau:#215F9A;   /* Token-Name aus dem CI-Skill. Die Farbe bleibt, die
                          Herleitung über wmp consult trägt nicht mehr — siehe README. */
  --orange:#FF6601;
  --gold:#FFC000;
  --dunkelblau:#152740;
  --hellblau:#A8C0E0;
  --hellgrau:#F2F3F4;
  --grau:#595959;
  --schiefer:#6B7B82;
  --hellaufblau:#D6E4F0;
  --linie:#DDDDDD;
  --weiss:#FFFFFF;

  --font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-display:54px;
  --fs-h1:clamp(27px,4vw,38px);
  --fs-h2:24px;
  --fs-lead:20px;
  --fs-h3:17px;
  --fs-body:15px;
  --fs-small:13px;
  --fs-mini:11px;
  --fs-eingabe:16px;

  --r-klein:8px;
  --r-karte:14px;
  --r-pille:999px;
  --maxw:1080px;
  --gutter:20px;
  --naht:4px;
}

/* --- Seitengrundlage. Traegerklasse statt nacktem body ------------------- */
.m-seite{
  margin:0;
  background:var(--hellgrau);
  color:var(--dunkelblau);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
.m-seite *,.m-seite *::before,.m-seite *::after{box-sizing:border-box}
.m-seite img,.m-seite svg{max-width:100%}

/* --- Bahn und Inhaltsbreite ---------------------------------------------- */
.m-bahn{width:100%}
.m-bahn--hell{background:var(--weiss)}
.m-bahn--ruhig{background:var(--hellgrau)}
.m-bahn--navy{background:var(--navy);color:var(--weiss)}
.m-bahn--blau{background:var(--wmpblau);color:var(--weiss)}
.m-inner{max-width:var(--maxw);margin:0 auto;padding:44px var(--gutter)}
.m-inner--schmal{padding:30px var(--gutter)}

/* --- Typografie ---------------------------------------------------------- */
.m-h1{font-size:var(--fs-h1);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0 0 14px;color:var(--dunkelblau)}
.m-h2{font-size:var(--fs-h2);font-weight:600;line-height:1.25;letter-spacing:-.005em;margin:0 0 16px;color:var(--navy)}
.m-h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25;letter-spacing:-.005em;margin:0 0 8px;color:var(--navy)}
.m-lead{font-size:var(--fs-lead);font-weight:500;line-height:1.40;margin:0 0 18px;max-width:62ch}
.m-text{font-size:var(--fs-body);line-height:1.55;margin:0 0 12px}
.m-klein{font-size:var(--fs-small);line-height:1.55;color:var(--grau);margin:0 0 8px}
.m-label{font-size:var(--fs-mini);font-weight:600;line-height:1.30;letter-spacing:.08em;
  text-transform:uppercase;color:var(--orange);margin:0 0 10px;display:block}
.m-display{font-size:var(--fs-display);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0}

/* Auf dunklem Grund */
.m-bahn--navy .m-h1,.m-bahn--navy .m-h2,.m-bahn--navy .m-h3,
.m-bahn--blau .m-h1,.m-bahn--blau .m-h2,.m-bahn--blau .m-h3{color:var(--weiss)}
.m-bahn--navy .m-klein,.m-bahn--blau .m-klein{color:var(--hellaufblau)}
.m-bahn--navy .m-label,.m-bahn--blau .m-label{color:var(--gold)}

.m-liste{margin:0 0 12px;padding-left:20px}
.m-liste li{margin-bottom:6px}
.m-punkte{list-style:none;margin:0;padding:0;font-size:var(--fs-small);color:var(--grau)}
.m-punkte li{display:inline;white-space:nowrap}
/* Lange Eintraege duerfen umbrechen — sonst sprengen sie die Karte auf dem Telefon. */
.m-punkte--lang li{white-space:normal}
.m-punkte li + li::before{content:" · ";color:var(--schiefer)}

/* --- Verweise ------------------------------------------------------------ */
.m-link{color:var(--wmpblau);text-decoration:underline;text-underline-offset:2px}
.m-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:2px}
.m-bahn--navy .m-link,.m-bahn--blau .m-link{color:var(--weiss)}
.m-bahn--navy .m-link:focus-visible,.m-bahn--blau .m-link:focus-visible{outline-color:var(--weiss)}

/* --- Die Naht. Steht genau einmal pro Seite, unter dem Kopf. ------------- */
.m-naht{display:flex;height:var(--naht);width:100%}
.m-naht i{flex:1;display:block}
.m-naht .o{background:var(--orange)}
.m-naht .g{background:var(--gold)}

/* --- Kopf ---------------------------------------------------------------- */
.m-tagline{background:var(--navy);color:var(--hellaufblau);font-size:var(--fs-small)}
.m-tagline-inner{max-width:var(--maxw);margin:0 auto;padding:7px var(--gutter);text-align:center}

.m-kopf{background:var(--hellgrau)}
.m-kopf-inner{max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.m-kopf-logo{display:inline-flex;align-items:center;line-height:0}
.m-kopf-logo img{height:40px;width:auto;display:block}
.m-kopf-logo:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:2px}

.m-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.m-nav a{font-size:var(--fs-body);font-weight:500;color:var(--navy);text-decoration:none;padding:6px 0}
.m-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.m-nav a:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}
.m-nav .m-nav--aktiv{color:var(--navy);font-weight:600;
  border-bottom:2px solid var(--orange)}

/* --- Knoepfe ------------------------------------------------------------- */
.m-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:var(--fs-body);font-weight:600;line-height:1;
  padding:13px 22px;min-height:46px;
  border:1px solid transparent;border-radius:var(--r-pille);
  text-decoration:none;cursor:pointer;
  transition:filter .12s ease,transform .12s ease;
}
.m-btn:active{transform:translateY(1px)}
.m-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (hover:hover){.m-btn:hover{filter:brightness(.94)}}
.m-btn--primaer{background:var(--orange);color:var(--weiss)}
.m-btn--gold{background:var(--gold);color:var(--dunkelblau)}
.m-btn--navy{background:var(--navy);color:var(--weiss)}
.m-btn--geist{background:var(--weiss);color:var(--navy);border-color:var(--linie)}
.m-bahn--navy .m-btn--geist:focus-visible,.m-bahn--blau .m-btn--geist:focus-visible{outline-color:var(--weiss)}
.m-btnzeile{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* --- Flaechen ------------------------------------------------------------ */
.m-karte{background:var(--weiss);color:var(--dunkelblau);border:1px solid var(--linie);border-radius:var(--r-karte);padding:18px 20px}
.m-karte--ruhig{background:var(--hellgrau);border:0}
.m-karte--dunkel{background:var(--navy);color:var(--weiss);border:0}
.m-karte--dunkel .m-h3{color:var(--weiss)}
.m-karte--dunkel .m-text{color:var(--hellaufblau)}
.m-karte--blau{background:var(--wmpblau);color:var(--weiss);border:0}
.m-karte--blau .m-h3{color:var(--weiss)}
.m-karte--blau .m-text{color:var(--hellaufblau)}
.m-karte > :last-child{margin-bottom:0}

/* Flaechen setzen zurueck, was die Bahn gefaerbt hat, und die dunklen
   Karten setzen es danach wieder hoch. Reihenfolge entscheidet. */
.m-karte .m-h1,.m-karte .m-h2,.m-karte .m-h3,
.m-platzhalter .m-h1,.m-platzhalter .m-h2,.m-platzhalter .m-h3{color:var(--navy)}
.m-karte .m-text,.m-platzhalter .m-text{color:var(--dunkelblau)}
.m-karte .m-klein,.m-platzhalter .m-klein{color:var(--grau)}
.m-karte .m-label,.m-platzhalter .m-label{color:var(--orange)}
.m-karte--dunkel .m-h1,.m-karte--dunkel .m-h2,.m-karte--dunkel .m-h3,
.m-karte--blau .m-h1,.m-karte--blau .m-h2,.m-karte--blau .m-h3{color:var(--weiss)}
.m-karte--dunkel .m-text,.m-karte--blau .m-text{color:var(--hellaufblau)}
.m-karte--dunkel .m-klein,.m-karte--blau .m-klein{color:var(--hellaufblau)}
.m-karte--dunkel .m-label,.m-karte--blau .m-label{color:var(--gold)}
.m-karte .m-link,.m-platzhalter .m-link{color:var(--wmpblau)}
.m-karte--dunkel .m-link,.m-karte--blau .m-link{color:var(--weiss)}

/* Karte als Verweis */
.m-karte--klick{text-decoration:none;display:block;color:inherit;
  transition:filter .12s ease,transform .12s ease}
.m-karte--klick:active{transform:translateY(1px)}
@media (hover:hover){.m-karte--klick:hover{filter:brightness(.97)}}
.m-karte--klick:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.m-karte--dunkel.m-karte--klick:focus-visible{outline-color:var(--weiss)}

/* --- Raster. Einspaltig, ab 640px zweispaltig. --------------------------- */
.m-grid{display:grid;grid-template-columns:1fr;gap:16px}
.m-grid > *{min-width:0}
@media (min-width:640px){
  .m-grid--2{grid-template-columns:repeat(2,1fr)}
  .m-grid--3{grid-template-columns:repeat(2,1fr)}
  .m-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .m-grid--3{grid-template-columns:repeat(3,1fr)}
  .m-grid--4{grid-template-columns:repeat(4,1fr)}
}

/* --- Faktenzeile --------------------------------------------------------- */
.m-fakten{
  display:flex;flex-wrap:wrap;gap:0 10px;margin-top:18px;padding:10px 16px;
  background:var(--navy);border-radius:var(--r-klein);width:fit-content;max-width:100%;
}
.m-fakt{font-size:var(--fs-small);color:var(--weiss);white-space:nowrap}
.m-fakt + .m-fakt::before{content:"\00B7";margin-right:10px;color:var(--hellaufblau)}

/* --- Eingabefelder ------------------------------------------------------- */
.m-feld{
  width:100%;font-family:var(--font);font-size:var(--fs-eingabe);color:var(--dunkelblau);
  padding:11px 13px;border:1px solid var(--linie);border-radius:var(--r-klein);background:var(--weiss);
}
.m-feld:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}

/* --- Chip ---------------------------------------------------------------- */
.m-chip{display:inline-block;font-size:var(--fs-mini);font-weight:600;line-height:1.30;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pille);
  background:var(--hellblau);color:var(--dunkelblau)}

/* --- Platzhalter. Markiert, was inhaltlich noch offen ist. --------------- */
.m-platzhalter{
  border:1px dashed var(--schiefer);border-radius:var(--r-karte);
  padding:18px 20px;background:var(--weiss);color:var(--dunkelblau);
}
.m-platzhalter > :last-child{margin-bottom:0}
.m-platzhalter-marke{display:inline-block;font-size:var(--fs-mini);font-weight:600;
  line-height:1.30;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);
  border:1px solid var(--linie);border-radius:var(--r-pille);padding:4px 10px;margin-bottom:10px}

/* --- Team ---------------------------------------------------------------- */
.m-portrait{width:120px;height:120px;border-radius:var(--r-pille);overflow:hidden;
  background:var(--navy);display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;flex:0 0 auto}
.m-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.m-portrait svg{width:52px;height:52px;display:block}
.m-rolle{font-size:var(--fs-small);color:var(--grau);margin:0 0 10px}

/* --- Standort ------------------------------------------------------------ */
.m-standort{display:flex;gap:14px;align-items:flex-start}
.m-pin{flex:0 0 auto;width:26px;height:26px;margin-top:2px}

/* --- Fusszeile ----------------------------------------------------------- */
.m-fuss{background:var(--navy);color:var(--weiss)}
.m-fuss-inner{max-width:var(--maxw);margin:0 auto;padding:40px var(--gutter) 26px}
.m-fuss-logo{height:34px;width:auto;display:block;margin-bottom:18px}
.m-fuss-spalten{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:640px){.m-fuss-spalten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.m-fuss-spalten{grid-template-columns:repeat(4,1fr)}}
.m-fuss-titel{font-size:var(--fs-mini);font-weight:600;line-height:1.30;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.m-fuss-liste{list-style:none;margin:0;padding:0;font-size:var(--fs-small);color:var(--hellaufblau)}
.m-fuss-liste li{margin-bottom:5px}
.m-fuss-liste a{color:var(--hellaufblau);text-decoration:none}
.m-fuss-liste a:hover{text-decoration:underline;text-underline-offset:2px}
.m-fuss-liste a:focus-visible{outline:2px solid var(--weiss);outline-offset:2px;border-radius:2px}
.m-fuss-schluss{max-width:var(--maxw);margin:0 auto;padding:16px var(--gutter) 28px;
  border-top:1px solid var(--wmpblau);display:flex;flex-wrap:wrap;gap:8px 18px;
  align-items:center;justify-content:space-between;font-size:var(--fs-small);color:var(--hellaufblau)}
.m-fuss-schluss a{color:var(--weiss);text-decoration:underline;text-underline-offset:2px}
.m-fuss-schluss a:focus-visible{outline:2px solid var(--weiss);outline-offset:2px;border-radius:2px}

/* --- Sprungmarke fuer die Tastatur --------------------------------------- */
.m-skip{position:absolute;left:-9999px;top:0}
.m-skip:focus{left:var(--gutter);top:8px;z-index:10;background:var(--weiss);color:var(--navy);
  padding:10px 16px;border-radius:var(--r-klein);outline:2px solid var(--navy)}

/* --- Textseiten (Impressum, Datenschutz) --------------------------------- */
.m-prosa{max-width:70ch}
.m-prosa .m-h2{margin-top:30px}
.m-prosa .m-h2:first-child{margin-top:0}