/*
Theme Name: Mentoring DHBW Mannheim
Theme URI: https://mentoring.example.de
Author: Studiengang Digitale Medien, DHBW Mannheim
Description: Theme fuer das Mentoring-Programm des Studiengangs Digitale Medien.
Version: 1.0.0
Text Domain: mentoring-theme
*/

/* ===================== DESIGN TOKENS (aus dem CD abgeleitet) ============ */
:root {
  /* Hausfarben */
  --grey-100: #5C6971;   /* HKS 92 – Überschriften & Flächen */
  --grey-75:  #858F94;
  --grey-50:  #AEB4B8;
  --grey-25:  #D6DADC;
  --grey-10:  #EEF0F1;
  --red:      #E2001A;   /* HKS 14 – Akzent, nur 100% */
  --overlap:  #7A2A2E;   /* Multiplikation Rot x Grau 60% (nur Bildmarke) */
  --black:    #000000;
  --white:    #FFFFFF;

  /* Schriften – Hausschriften mit CD-Ersatzschriften als Fallback */
  --font-sans:  "Generis Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-serif: "Generis Serif", "Times New Roman", Times, serif;

  /* Radius – Anlehnung an die Eckrundung der Bildmarke */
  --radius: 3px;

  /* Weißraum-Skala */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  --maxw: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  /* iOS vergrößert sonst beim Drehen ins Querformat eigenmächtig die Schrift */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  /* Nichts darf seitlich aus dem Viewport ragen */
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headline-Prinzip: Versalien mit Spationierung, in DHBW-Grau */
h1, h2, h3 { color: var(--grey-100); font-weight: 700; margin: 0; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  font-weight: 700;
  color: var(--grey-75);
}
.lead {
  font-family: var(--font-serif);
  color: var(--grey-100);
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.5;
}
a { color: inherit; }

/* Logo (offizielle Wort-Bild-Marke als Bild) – Höhe je Kontext, Breite proportional */
img.logo { display: block; width: auto; max-width: 100%; }
/* logo--neg wurde entfernt: das DHBW-Logo wird jetzt farbig, unveraendert
   angezeigt (keine Weiss-Konvertierung mehr im Footer). */

/* Die Website besteht aus einzelnen HTML-Seiten; der Entry-Screen ist die
   Startseite. Kein Ein-/Ausblenden per JavaScript mehr. */

/* ===================== ENTRY (Kopfband + New-Yorker-Split) ============
   Der Entry-Screen ist eine Spalte: oben das Kopfband mit Wort-Bild-Marke,
   großer Programm-Überschrift und Claim, darunter die beiden Auswahlfelder,
   die den restlichen Platz füllen. Dadurch steht der Programmname prominent
   über der Auswahl, statt als kleine Plakette darüber zu schweben. */
#entry {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* ---- Kopfband ---- */
.entry-top {
  text-align: center;
  background: var(--white);
  padding: clamp(20px, 4vh, 52px) clamp(16px, 4vw, 48px) clamp(18px, 3vh, 36px);
}
.entry-top .logo { height: clamp(36px, 4.6vw, 50px); margin: 0 auto clamp(14px, 2.4vh, 26px); }
.entry-kicker {
  text-transform: uppercase; letter-spacing: .22em;
  font-size: clamp(10px, 1.2vw, 12px); font-weight: 700; color: var(--grey-75);
  margin: 0;
}
.entry-title {
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--grey-100);
  margin: clamp(8px, 1.4vh, 14px) 0 0;
}
.entry-claim {
  font-family: var(--font-serif);
  font-size: clamp(19px, 3vw, 36px);
  line-height: 1.25;
  color: var(--grey-100);
  margin: clamp(10px, 1.6vh, 18px) 0 0;
}
.entry-claim .accent { color: var(--red); }
.entry-sub {
  font-size: clamp(14px, 1.5vw, 16.5px); color: #222;
  max-width: 58ch; margin: clamp(10px, 1.6vh, 16px) auto 0;
}

/* ---- Kooperationen (erst nach offizieller Bestätigung einblenden) ---- */
.entry-partners { margin: clamp(16px, 2.4vh, 28px) auto 0; }
.entry-partners[hidden] { display: none; }
.entry-partners .k {
  display: block; text-transform: uppercase; letter-spacing: .18em;
  font-size: 10.5px; font-weight: 700; color: var(--grey-75); margin-bottom: 10px;
}
.entry-partners ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 36px);
  justify-content: center; align-items: center;
}
.entry-partners li { display: flex; align-items: center; }
/* Logos auf einheitliche optische Hoehe bringen, Seitenverhaeltnis bleibt */
.entry-partners img {
  display: block; width: auto;
  height: clamp(48px, 5.5vw, 66px);
  max-width: 320px; object-fit: contain;
}

/* ---- Auswahlfelder ---- */
.entry-panels { display: flex; flex: 1 1 auto; min-height: min(44vh, 400px); }
.panel {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  align-items: flex-end;
  padding: var(--s-6) var(--s-5);
  cursor: pointer;
  transition: flex-grow .55s cubic-bezier(.7,0,.2,1), background-color .4s ease;
  overflow: hidden;
  text-decoration: none;
  border: none;
  font: inherit;
  text-align: left;
}
.panel--studies { background: var(--grey-100); color: var(--white); }
.panel--mentors { background: var(--grey-10); color: var(--grey-100); }

/* Hover-Dualität: aktives Feld wächst.
   Nur für echte Zeigegeräte – auf Touch bliebe der Effekt nach dem Tippen
   hängen und das Feld verzerrt. */
@media (hover: hover) and (pointer: fine) {
  #entry:hover .panel      { flex-grow: .82; }
  #entry .panel:hover      { flex-grow: 1.36; }
  .panel--studies:hover { background: #4c565d; }
  .panel--mentors:hover { background: var(--grey-25); }
}

.panel__inner { position: relative; z-index: 2; max-width: 460px; }
.panel__role {
  display: block;
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
.panel--studies .panel__role { color: var(--white); }
.panel__sub { display: block; font-size: 16px; opacity: .9; margin: 0 0 var(--s-4); max-width: 34ch; }
/* "Ich bin" sitzt ueber dem grossen Wort und ist dauerhaft rot unterstrichen -
   der rote Pfeil ist der Blickfang, der in den Bereich hineinfuehrt. */
.panel__cta {
  display: inline-flex; align-items: center; gap: 12px;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: clamp(12px, 1.3vw, 14px); font-weight: 700;
  padding-bottom: 8px;
  margin: 0 0 var(--s-3);
  border-bottom: 3px solid var(--red);
  transition: gap .3s ease;
}
.panel__cta .arrow {
  color: var(--red); font-size: clamp(22px, 2.4vw, 30px); line-height: 1;
  transform: translateX(0); transition: transform .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .panel:hover .panel__cta { gap: 20px; }
  .panel:hover .panel__cta .arrow { transform: translateX(6px); }
}
.panel:active .panel__cta .arrow { transform: translateX(6px); }

/* großflächige, dezente Bildmarke als Wasserzeichen (Dualität) */
.panel__watermark { position: absolute; right: -40px; top: -30px; width: 260px; opacity: .10; z-index: 1; pointer-events: none; }
.panel--mentors .panel__watermark { opacity: .12; }

/* Trennkante zwischen den beiden Auswahlfeldern */
.entry-panels .panel + .panel { border-left: 1px solid rgba(0,0,0,.10); }

/* ===================== HEADER (Inhaltsseiten) ========================= */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: 14px clamp(16px, 4vw, 48px);
  background: var(--white);
  border-bottom: 1px solid var(--grey-25);
}
.site-header .logo { height: 40px; }
.header-left { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 18px); min-width: 0; }

/* Zurueck-Pfeil: fuehrt zur zuletzt besuchten Seite */
.backbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  background: none; border: 1px solid var(--grey-25); border-radius: var(--radius);
  color: var(--grey-100); font-size: 20px; line-height: 1; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.backbtn:hover { border-color: var(--red); color: var(--red); }
.backbtn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.brand-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; min-width: 0; }
.brand-link .pt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--grey-75); font-weight: 700; line-height: 1.3; text-align: left;
}
.brand-link .pt b { color: var(--grey-100); display: block; }
nav.main { display: flex; align-items: center; gap: clamp(8px, 2vw, 28px); }
nav.main a {
  text-decoration: none;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--grey-100);
  padding: 8px 2px; border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
nav.main a:hover { color: var(--black); }
nav.main a.active { border-color: var(--red); }

/* ---- Hamburger (nur mobil sichtbar, siehe Responsive-Sektion) ---- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--grey-100);
}
.nav-toggle__bars { display: block; position: relative; width: 24px; height: 16px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }
/* geöffnet: die drei Balken werden zum Kreuz */
.nav-toggle[aria-expanded="true"] { color: var(--red); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ===================== INHALT-BAUSTEINE =============================== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
section.block { padding: clamp(48px, 8vw, 112px) 0; }
.hero { padding-top: clamp(56px, 9vw, 120px); }
.hero h1 {
  font-size: clamp(34px, 6vw, 68px); line-height: 1.03;
  text-transform: uppercase; letter-spacing: .02em; margin: var(--s-3) 0 var(--s-4);
}
.hero .accent { color: var(--red); }
.hero .lead { max-width: 62ch; }

.rule { height: 3px; width: 56px; background: var(--red); border: 0; margin: 0 0 var(--s-4); }

.section-head { max-width: 68ch; margin-bottom: var(--s-5); }
.section-head h2 {
  font-size: clamp(24px, 3.4vw, 40px); text-transform: uppercase;
  letter-spacing: .03em; margin: var(--s-2) 0 var(--s-3);
}

/* Karten-Grid */
.grid { display: grid; gap: var(--s-4); }
/* cols-3 darf frei umbrechen: 3 → 2 → 1, ohne Breakpoint.
   Mehr als 3 Spalten entstehen nicht, weil .wrap auf 1120px begrenzt ist. */
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }
/* cols-2 bleibt bei genau zwei Spalten (2×2-Raster), sonst würde daraus
   auf breiten Schirmen ein 3+1-Raster. */
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
  .grid.cols-2 { grid-template-columns: 1fr; }
}
.card {
  background: var(--white);
  border: 1px solid var(--grey-25);
  border-top: 3px solid var(--grey-100);
  border-radius: var(--radius);
  padding: var(--s-4);
}
.card.accent { border-top-color: var(--red); }
.card h3 { font-size: 18px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.card p { margin: 0; font-size: 15px; color: #222; }

/* Ablauf / Schritte */
.steps { counter-reset: step; display: grid; gap: var(--s-3); }
.step {
  display: grid; grid-template-columns: 64px 1fr; align-items: start; gap: var(--s-4);
  padding: var(--s-4) 0; border-top: 1px solid var(--grey-25);
}
.step:last-child { border-bottom: 1px solid var(--grey-25); }
.step .num {
  counter-increment: step; font-family: var(--font-serif);
  font-size: 40px; font-weight: 700; color: var(--grey-50); line-height: 1;
}
.step h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.step p { margin: 0; font-size: 15px; color: #222; }

/* Hinweis-/Regelkasten – für verbindliche Aussagen (z. B. Matching-Regel).
   Roter Balken links = Akzent nach CD, Fläche im hellen Grau-Raster. */
.notice {
  background: var(--grey-10);
  border: 1px solid var(--grey-25);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-top: var(--s-4);
}
.notice h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.notice p { margin: 0; font-size: 15px; color: #222; }
.notice p + p { margin-top: 10px; }
.notice ul { margin: 10px 0 0; padding-left: 20px; font-size: 15px; color: #222; }
.notice li { margin-bottom: 6px; }

/* Zitat – authentische Stimmen von Mentor:innen */
.quote {
  border-top: 3px solid var(--red);
  background: var(--white);
  border-right: 1px solid var(--grey-25);
  border-bottom: 1px solid var(--grey-25);
  border-left: 1px solid var(--grey-25);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin: 0;
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
  color: var(--grey-100);
}
.quote figcaption {
  margin-top: var(--s-3);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--grey-75);
}
/* Noch nicht freigegebene Zitate deutlich als Platzhalter kennzeichnen */
.quote--todo { border-top-color: var(--grey-50); border-style: dashed; }
.quote--todo blockquote { color: var(--grey-75); font-style: italic; }

/* Ansprechpersonen */
.persons { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.person {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--s-3); align-items: start;
  background: var(--white);
  border: 1px solid var(--grey-25); border-top: 3px solid var(--grey-100);
  border-radius: var(--radius); padding: var(--s-4);
}
.person__photo {
  position: relative; width: 84px; aspect-ratio: 1 / 1;
  border-radius: var(--radius); overflow: hidden; background: var(--grey-10);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.person__photo.is-fallback::after {
  content: attr(data-initials); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--grey-50);
}
.person h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.person p { margin: 0; font-size: 14px; color: #222; line-height: 1.5; }
.person a { color: var(--grey-100); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.person a:hover { color: var(--red); }
.person--todo { border-top-style: dashed; border-top-color: var(--grey-50); }

/* Panel-Fläche (DHBW-Grau als Flächenfarbe) */
.fill {
  background: var(--grey-100); color: var(--white);
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 64px);
}
.fill h2, .fill h3 { color: var(--white); }
.fill .lead { color: rgba(255,255,255,.92); }
.fill ul { margin: var(--s-3) 0 0; padding-left: 20px; }
.fill li { margin-bottom: 10px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; font-size: 13px;
  padding: 15px 28px; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: #c30017; }
.btn--ghost { background: transparent; color: var(--grey-100); border-color: var(--grey-50); }
.btn--ghost:hover { border-color: var(--grey-100); }
.btn--onfill { background: var(--white); color: var(--grey-100); }
.btn--onfill:hover { background: var(--grey-10); }

/* Button-Reihe (z. B. Download + Kontakt nebeneinander).
   Die Knöpfe teilen sich die Zeile zu gleichen Teilen und springen
   gemeinsam auf volle Breite, sobald sie nebeneinander nicht mehr passen.
   Dadurch stehen sie nie versetzt und mit ungleicher Breite untereinander –
   unabhängig von der Textlänge, ganz ohne Breakpoint. */
.btn-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: stretch; justify-content: center;
  max-width: 720px; margin-left: auto; margin-right: auto;
}

.btn-row > .btn { flex: 1 1 260px; justify-content: center; }
.dl-meta {
  margin: var(--s-3) 0 0;
  font-size: 12.5px; color: var(--grey-75);
}

.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(26px, 4vw, 44px); text-transform: uppercase; letter-spacing: .03em; }
.cta-band .lead { margin: var(--s-3) auto var(--s-5); max-width: 52ch; }

/* ===================== FAQ (Akkordeon) =============================== */
.faq { max-width: 860px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--grey-25);
  padding: var(--s-3) 0;
}
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-4);
  align-items: center; font-weight: 700; color: var(--grey-100);
  font-size: clamp(16px, 2vw, 19px); letter-spacing: .01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { color: var(--red); font-size: 26px; line-height: 1; transition: transform .25s ease; flex: none; }
.faq .answer { padding-top: var(--s-3); color: #222; font-size: 15.5px; max-width: 72ch; }
.faq .tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--white); background: var(--grey-50);
  border-radius: var(--radius); padding: 2px 8px; margin-right: 10px; vertical-align: middle;
}
.faq .tag.studies { background: var(--grey-100); }
.faq .tag.mentors { background: var(--red); }

/* ===================== MENTOR-STECKBRIEFE ============================ */
.profiles { align-items: stretch; }
.profile {
  display: flex; flex-direction: column; text-align: left; gap: var(--s-3);
  font: inherit; cursor: pointer;
  background: var(--white);
  border: 1px solid var(--grey-25);
  border-top: 3px solid var(--grey-100);
  border-radius: var(--radius);
  padding: var(--s-4);
  transition: transform .2s ease, box-shadow .2s ease, border-top-color .2s ease;
}
.profile:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.profile__photo {
  display: block; position: relative;
  width: 100%; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: var(--radius);
  background: var(--grey-10);
}
.profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.profile__photo.is-fallback::after,
.pm-photo.is-fallback::after {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 44px; font-weight: 700;
  color: var(--grey-50); letter-spacing: .04em;
}
.profile--empty .profile__photo { background: repeating-linear-gradient(135deg, var(--grey-10) 0 10px, #f7f8f8 10px 20px); }
.profile--empty { border-top-style: dashed; border-top-color: var(--grey-50); }
.profile--empty .profile__name, .profile--empty .profile__role { color: var(--grey-75); }

.profile__body { display: block; }
.profile__name {
  display: block; font-weight: 700; color: var(--grey-100);
  font-size: 18px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2;
}
.profile__role { display: block; margin-top: 6px; font-size: 14px; color: #222; line-height: 1.45; }
.profile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.chip {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey-100); background: var(--grey-10);
  border-radius: var(--radius); padding: 3px 8px;
}
.profile__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-3);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-75);
}
.profile__more .arrow { color: var(--red); font-size: 15px; transition: transform .25s ease; }

/* ---- Dialog ---- */
.pm-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 5vh, 64px) clamp(12px, 4vw, 40px);
  overflow-y: auto;
}
.pm-overlay[hidden] { display: none; }
.pm-dialog {
  position: relative;
  background: var(--white);
  border-top: 4px solid var(--red);
  border-radius: var(--radius);
  max-width: 760px; width: 100%;
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  animation: pmIn .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes pmIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pm-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--grey-75); padding: 4px 8px;
}
.pm-close:hover { color: var(--red); }

.pm-head { display: grid; grid-template-columns: 190px 1fr; gap: var(--s-4); align-items: start; }
.pm-photo {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: var(--radius); background: var(--grey-10);
}
.pm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.pm-dialog h2 { font-size: clamp(22px, 3vw, 32px); text-transform: uppercase; letter-spacing: .03em; margin: 6px 0 8px; }
.pm-role { margin: 0 0 var(--s-3); font-size: 15px; color: #222; line-height: 1.5; }
.pm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-dialog .rule { margin: var(--s-4) 0; }

.pm-text p { margin: 0 0 var(--s-3); font-size: 15.5px; color: #222; line-height: 1.65; }
.pm-facts { margin-top: var(--s-4); border-top: 1px solid var(--grey-25); }
.pm-fact {
  display: grid; grid-template-columns: 210px 1fr; gap: var(--s-3);
  padding: 12px 0; border-bottom: 1px solid var(--grey-25); font-size: 14.5px;
}
.pm-fact .k { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--grey-75); padding-top: 3px; }
.pm-fact .v { color: #222; }
.pm-fact .v a { color: var(--grey-100); text-decoration: underline; text-underline-offset: 3px; }
.pm-fact .v a:hover { color: var(--red); }
.pm-contact { margin-top: var(--s-5); }
.pm-contact h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-2); }
.pm-note { margin: var(--s-3) 0 0; font-size: 12.5px; color: var(--grey-75); line-height: 1.5; }

/* ---- Zitat im Steckbrief ---- */
.pm-quote { margin: var(--s-4) 0 0; }
.pm-quote:empty { display: none; }

/* ---- Video-Vorstellung im Steckbrief ----
   Die Mentor:innen gestalten ihr Video selbst; eingebettet wird es erst,
   wenn eine Datei bzw. ein Embed-Link im Profil hinterlegt ist. */
.pm-video { margin-top: var(--s-5); }
.pm-video h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-2); }
.pm-video__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--grey-10); border-radius: var(--radius); overflow: hidden;
}
.pm-video__frame video,
.pm-video__frame iframe { width: 100%; height: 100%; display: block; border: 0; }
/* Platzhalter, solange kein Video vorliegt */
.pm-video__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: var(--s-3);
  border: 1px dashed var(--grey-50); border-radius: var(--radius);
  color: var(--grey-75);
}
.pm-video__placeholder .play {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--grey-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--grey-50);
}
.pm-video__placeholder span { font-size: 12.5px; max-width: 40ch; line-height: 1.5; }

/* ---- Social-Media-Links im Steckbrief ---- */
.pm-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-3); }
.pm-social:empty { display: none; }
.pm-social a {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--grey-25); border-radius: var(--radius);
  padding: 7px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--grey-100);
  transition: border-color .2s, color .2s;
}
.pm-social a:hover { border-color: var(--red); color: var(--red); }

/* Lange E-Mail-Adressen und URLs dürfen den Dialog nicht sprengen */
.pm-fact .v, .pm-fact .v a, .faq .answer { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .pm-head { grid-template-columns: 1fr; }
  .pm-photo { max-width: 200px; aspect-ratio: 1 / 1; }
  .pm-fact { grid-template-columns: 1fr; gap: 2px; }
  /* Schließen-Kreuz auf mindestens 44px Tap-Fläche bringen */
  .pm-close { top: 6px; right: 8px; padding: 8px 14px; }
  .pm-overlay { padding: 0; }
  .pm-dialog { min-height: 100%; border-radius: 0; }
}

/* ===================== FOOTER ======================================== */
footer.site {
  background: var(--grey-100); color: rgba(255,255,255,.86);
  padding: var(--s-6) 0 var(--s-5);
  margin-top: var(--s-6);
}
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-5); }
footer.site h4 { color: var(--white); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; margin: 0 0 var(--s-3); }
footer.site a { color: rgba(255,255,255,.86); text-decoration: none; }
footer.site a:hover { color: var(--white); }
footer.site .logo { height: 64px; margin-bottom: var(--s-3); }
footer.site .fine { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.18); font-size: 12px; opacity: .8; display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

.backlink { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-5); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--grey-75); text-decoration: none; }
.backlink:hover { color: var(--grey-100); }

/* ===================== RESPONSIVE =================================== */

/* ---- Entry-Screen ----------------------------------------------------
   Der Split-Screen braucht Breite UND Höhe. Ein großes Handy im Querformat
   (z. B. 932 × 430) ist breiter als 860px, hat aber viel zu wenig Höhe –
   deshalb löst auch geringe Höhe das Stapeln aus. Gestapelt wandert die
   Wort-Bild-Marke aus der festen Position in den Fluss, sonst verdeckt sie
   auf flachen Displays das erste Feld. */
@media (max-width: 900px), (max-height: 620px) {
  #entry:hover .panel, #entry .panel:hover { flex-grow: 1; }

  .entry-panels { flex-direction: column; min-height: 0; }
  .entry-panels .panel + .panel { border-left: none; border-top: 1px solid rgba(0,0,0,.10); }

  .panel {
    padding: var(--s-5) var(--s-4);
    align-items: flex-end;
    min-height: max(190px, 30vh);
  }
  .panel__watermark { width: 190px; right: -30px; top: -20px; }
  .panel__inner { max-width: none; }
}

/* Sehr flache Displays (Handy quer): jede Zeile Höhe zählt. */
@media (max-height: 560px) {
  .entry-top { padding: var(--s-3) var(--s-3) var(--s-2); }
  .entry-top .logo { height: 30px; margin-bottom: var(--s-2); }
  .entry-title { font-size: clamp(28px, 6vw, 40px); }
  .entry-claim { font-size: clamp(16px, 2.4vw, 22px); }
  .entry-sub { display: none; }

  .panel { min-height: 0; padding: var(--s-4); }
  .panel__role { font-size: clamp(24px, 4vw, 34px); margin-bottom: var(--s-2); }
  .panel__sub { font-size: 14px; margin-bottom: var(--s-3); max-width: 46ch; }
}

/* ---- Kopfzeile -------------------------------------------------------
   Unter 560px hatte die Navigation vorher display:none – auf dem Handy war
   damit kein Wechsel zwischen den Bereichen mehr möglich. Stattdessen:
   Programmtitel neben dem Logo ausblenden, „Start“ entfällt (dafür ist das
   Logo da), Navigation bleibt bedienbar. */
@media (max-width: 860px) {
  nav.main { gap: 14px; }
  nav.main .lbl-long { display: none; }
}
/* Ab hier klappt die Navigation hinter dem Hamburger auf. Nebeneinander
   würden die vier Einträge sonst mit dem Logo um den Platz konkurrieren. */
@media (max-width: 700px) {
  .site-header { padding: 8px 16px; gap: var(--s-3); }
  .site-header .logo { height: 32px; }
  .brand-link .pt { display: none; }

  .nav-toggle { display: inline-flex; }

  nav.main {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--grey-25);
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
    padding: var(--s-2) 16px var(--s-3);
  }
  nav.main.is-open { display: flex; }

  nav.main a {
    text-align: left;
    font-size: 14px; letter-spacing: .1em;
    padding: 16px 0 16px 14px;          /* 50px Tap-Höhe */
    border-bottom: 1px solid var(--grey-10);
    border-left: 3px solid transparent;
    transition: border-left-color .2s, color .2s;
  }
  nav.main a:last-child { border-bottom: none; }
  nav.main a.active {
    border-bottom-color: var(--grey-10);
    border-left-color: var(--red);
    color: var(--black);
  }
  nav.main .lbl-long { display: inline; }
}

/* ---- Inhalt ---------------------------------------------------------- */
/* Gestapelt sollen die beiden Aufzählungen im grauen Kasten als eine
   durchgehende Liste lesen, nicht durch die Grid-Lücke getrennt wirken. */
@media (max-width: 700px) {
  .fill .grid.cols-2 { gap: 0; }
}

@media (max-width: 620px) {
  .step { grid-template-columns: 40px 1fr; gap: var(--s-3); }
  .step .num { font-size: 30px; }
  .fill ul { padding-left: 18px; }
  /* Einzelne Buttons außerhalb einer .btn-row auf volle Breite */
  .cta-band .btn { width: 100%; justify-content: center; }
}

/* Auf Touch keine Schwebe-Effekte, die nach dem Tippen hängen bleiben */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { transform: translateY(-1px); }
  .profile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.09); border-top-color: var(--red); }
  .profile:hover .profile__more { color: var(--grey-100); }
  .profile:hover .profile__more .arrow { transform: translateX(4px); }
}

/* ===================== RECHTSTEXTE (Datenschutz / Impressum) ==========
   Fliesstext-Seiten: schmales Mass fuer gute Lesbarkeit, klare Hierarchie.
   Farben und Schriften wie im uebrigen CD. */
.legal { max-width: 780px; }
.legal h2 {
  font-size: clamp(18px, 2.2vw, 23px);
  text-transform: uppercase; letter-spacing: .04em;
  margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--grey-25);
}
.legal h2:first-of-type { margin-top: var(--s-4); }
.legal h3 {
  font-size: 15px; text-transform: uppercase; letter-spacing: .06em;
  margin: var(--s-4) 0 6px;
}
.legal p { margin: 0 0 var(--s-3); font-size: 15.5px; color: #222; line-height: 1.7; }
.legal ul { margin: 0 0 var(--s-3); padding-left: 20px; font-size: 15.5px; color: #222; }
.legal li { margin-bottom: 8px; line-height: 1.65; }
.legal a { color: var(--grey-100); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { color: var(--red); }
.legal dl { margin: 0 0 var(--s-3); }
.legal dt {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--grey-75); margin-top: var(--s-3);
}
.legal dd { margin: 4px 0 0; font-size: 15.5px; color: #222; line-height: 1.6; }

/* Noch einzutragende Pflichtangabe – vor dem Livegang unuebersehbar machen.
   Wenn alle Markierungen verschwunden sind, ist die Seite vollstaendig. */
.todo {
  background: #FFF0F1; color: var(--red);
  border: 1px dashed var(--red); border-radius: var(--radius);
  padding: 1px 7px; font-weight: 700; font-size: .92em;
  overflow-wrap: anywhere;
}

/* Rechtszeile auf dem Entry-Screen – Impressum und Datenschutz muessen
   aus jeder Ansicht unmittelbar erreichbar sein (§ 5 DDG). */
.entry-legal {
  background: var(--white);
  text-align: center;
  padding: 14px var(--s-3);
  display: flex; justify-content: center; gap: 10px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--grey-75);
  border-top: 1px solid var(--grey-25);
}
.entry-legal a { color: var(--grey-75); text-decoration: none; }
.entry-legal a:hover { color: var(--red); }

/* ===================== KONTAKTFORMULAR ===============================
   Ruhige Felder, roter Akzent nur im Fokus und bei Fehlern - wie im CD. */
.cform { max-width: 760px; }
.cform__grid { display: grid; gap: 0 var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.field { margin: 0 0 var(--s-4); }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--grey-75);
}
.field .req { color: var(--red); }
.field .opt { color: var(--grey-50); font-weight: 400; letter-spacing: .06em; text-transform: none; }

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font-family: var(--font-sans); font-size: 15.5px; color: var(--black);
  background: var(--white);
  border: 1px solid var(--grey-50);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--grey-50); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--grey-100);
  box-shadow: 0 0 0 3px rgba(92,105,113,.14);
}
/* Fehlerzustand */
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--red); }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(226,0,26,.14); }
.field__err { display: none; margin-top: 6px; font-size: 13px; color: var(--red); }
.field.is-invalid .field__err { display: block; }

/* Einwilligungs-Checkbox */
.field--check { margin-top: var(--s-2); }
/* Spezifisch genug, um die Versalien-Regel von `.field label` zu schlagen -
   der Einwilligungstext muss als normaler Fliesstext lesbar bleiben. */
.field label.check {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  margin-bottom: 0;
  font-size: 14.5px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: #222; line-height: 1.55;
}
.check input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--red); }
.check a { color: var(--grey-100); text-decoration: underline; text-underline-offset: 3px; }
.check a:hover { color: var(--red); }
.field--check.is-invalid .check span { color: var(--red); }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein Koeder.
   Nicht display:none - manche Bots ignorieren ausgeblendete Felder. */
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform__note { margin: var(--s-3) 0 var(--s-4); font-size: 13px; color: var(--grey-75); line-height: 1.6; max-width: 70ch; }
.cform__note a { color: var(--grey-75); text-decoration: underline; text-underline-offset: 3px; }
.cform__note a:hover { color: var(--red); }

.cform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.cform__req { font-size: 12px; color: var(--grey-75); }
.cform__req .req { color: var(--red); font-weight: 700; }
button.btn { font-family: var(--font-sans); }
button.btn[disabled] { opacity: .55; cursor: progress; }

/* Rueckmeldung nach dem Absenden */
.cform__status { margin-top: var(--s-4); }
.cform__status:empty { display: none; }
.cform__status .msg {
  border: 1px solid var(--grey-25); border-left: 4px solid var(--grey-100);
  border-radius: var(--radius); background: var(--grey-10);
  padding: var(--s-4); font-size: 15px; color: #222;
}
.cform__status .msg h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.cform__status .msg p { margin: 0; }
.cform__status .msg p + p { margin-top: 10px; }
.cform__status .msg a { color: var(--grey-100); text-decoration: underline; text-underline-offset: 3px; }
.cform__status .msg--ok { border-left-color: var(--red); }
.cform__status .msg--err { border-left-color: var(--red); background: #FFF0F1; }

@media (max-width: 620px) {
  .cform__actions .btn { width: 100%; justify-content: center; }
}

/* ===================== VERFUEGBARKEIT ================================
   Reine Statusanzeige, kein Bedienelement: nicht klickbar, kein Fokus.
   Farbigkeit bleibt im CD - Grau in zwei Rasterstufen, kein Gruen/Gelb. */
.avail {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: var(--radius);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: default; pointer-events: none;
  white-space: nowrap;
}
.avail--yes  { background: var(--grey-100); color: var(--white); }
.avail--no   { background: var(--grey-25);  color: var(--grey-75); }
.avail--soon { background: var(--white); color: var(--grey-75); border: 1px dashed var(--grey-50); }

/* Im Steckbrief-Dialog etwas groesser, direkt unter dem Namen */
#pmAvail { margin: -2px 0 10px; }
#pmAvail .avail { margin-top: 0; font-size: 11px; padding: 4px 12px; }

/* Nicht verfuegbar: ganze Kachel zuruecknehmen, damit auf einen Blick
   erkennbar ist, wer gerade anfragbar ist. Der Steckbrief bleibt lesbar. */
.profile--unavailable { border-top-color: var(--grey-50); background: #FBFBFC; }
.profile--unavailable .profile__photo img { filter: grayscale(1); opacity: .55; }
.profile--unavailable .profile__name,
.profile--unavailable .profile__role,
.profile--unavailable .profile__more { color: var(--grey-75); }
.profile--unavailable .chip { opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .profile--unavailable:hover { border-top-color: var(--grey-50); }
}

/* partner--invert wurde entfernt: die Kooperationslogos werden jetzt
   unverändert angezeigt, wie geliefert - keine Filter-Konvertierung mehr. */