/* =========================================================
   Redesign Oktober 2026 (Prüfung redesign-pruefung.md, Punkte 1 bis 5)
   Ergänzt stil.css. Farben und Schriften bleiben nach Brandguide.
   ========================================================= */

/* ---------- 1. Bildflächen: Markengrafik statt Platzhaltertext ---------- */

.bildflaeche,
.bildflaeche-portrait {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--farbe-blau);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.22), transparent 45%),
    linear-gradient(140deg, #3575E5 0%, #2A5CC4 55%, #1C3F94 100%);
}

/* Großes Bildzeichen, angeschnitten in der Ecke */
.bildflaeche::after,
.bildflaeche-portrait::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -18%;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1 / 1;
  background: url("logo-mark.png") no-repeat center / contain;
  opacity: 0.16;
  transform: rotate(-8deg);
}

.bildflaeche .symbol-gross {
  width: 96px;
  height: 96px;
  opacity: 0.95;
}

/* Alter Platzhaltertext wird nicht mehr angezeigt */
.bildflaeche-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 2. Schwerpunkt-Karten (Startseite) ---------- */

.karte-schwerpunkt {
  --titel-farbe: var(--farbe-weiss);
  --text-farbe: var(--farbe-weiss);
  --link-farbe: var(--farbe-weiss);
  flex: 1 1 calc(50% - var(--abstand-m));
  padding: var(--abstand-l);
  background-color: var(--farbe-dunkelblau);
  background-image: radial-gradient(circle at 100% 0%, rgba(53, 117, 229, 0.35), transparent 55%);
  box-shadow: 0 10px 30px rgba(3, 7, 51, 0.22);
}

.karte-schwerpunkt .symbol {
  width: 44px;
  height: 44px;
  color: var(--farbe-rot);
}

.karte-schwerpunkt .ueberschrift-3 {
  font-size: 30px;
  line-height: var(--zeilenhoehe-eng);
  letter-spacing: var(--laufweite-h2);
}

.karte-schwerpunkt .text-normal {
  font-size: var(--schrift-text-gross);
}

/* ---------- 2. Ablauf als Zeitstrahl statt Karten (alle Seiten) ---------- */

.schritt {
  position: relative;
  padding: var(--abstand-null) var(--abstand-m) var(--abstand-null) var(--abstand-null);
  border-top: none;
  border-radius: var(--abstand-null);
  background-color: transparent;
  box-shadow: none;
  --titel-farbe: inherit;
  --text-farbe: inherit;
}

.abschnitt-dunkel .schritt {
  --titel-farbe: var(--farbe-weiss);
  --text-farbe: var(--farbe-weiss);
}

/* Verbindungslinie zum nächsten Schritt */
.schritt::before {
  content: "";
  position: absolute;
  top: calc(var(--nummer-groesse) / 2 - 1px);
  left: calc(var(--nummer-groesse) + var(--abstand-s));
  right: calc(var(--abstand-m) * -1 + var(--abstand-s));
  height: 2px;
  background-image: linear-gradient(90deg, var(--farbe-blau), rgba(53, 117, 229, 0.25));
}

.schritt:last-child::before {
  display: none;
}

.schritt-nummer {
  border: none;
  background-color: var(--farbe-blau);
  color: var(--farbe-weiss);
  box-shadow: 0 0 0 6px rgba(53, 117, 229, 0.15);
  font-variant-numeric: tabular-nums;
}

/* ---------- 3. Dachzeilen in normaler Schreibweise ---------- */

.dachzeile {
  text-transform: none;
  letter-spacing: 0.01em;
}

.dachzeile-gross {
  text-transform: uppercase;
  letter-spacing: var(--laufweite-dachzeile);
}

/* ---------- 4. Mehr Tiefe im dunkelblauen Einstieg ---------- */

.abschnitt-einstieg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image:
    radial-gradient(ellipse at 85% 0%, rgba(53, 117, 229, 0.35), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(254, 73, 78, 0.10), transparent 45%);
}

.abschnitt-einstieg::before {
  content: "";
  position: absolute;
  left: -6%;
  bottom: -30%;
  z-index: -1;
  width: 520px;
  max-width: 70vw;
  aspect-ratio: 1 / 1;
  background: url("logo-mark.png") no-repeat center / contain;
  opacity: 0.05;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* ---------- 5. Kopfbereich wird beim Scrollen kompakter ---------- */

.kopf-inhalt {
  transition: padding var(--dauer-uebergang) var(--kurve-aus);
}

.kopf-kompakt .kopf-inhalt {
  padding-top: var(--abstand-xs);
  padding-bottom: var(--abstand-xs);
}

.kopf-huelle {
  transition: min-height var(--dauer-uebergang) var(--kurve-aus);
}

.kopf-kompakt {
  min-height: 0;
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
  .karte-schwerpunkt {
    flex-basis: var(--voll);
  }
}

/* ---------- Handy ---------- */

@media (max-width: 767px) {
  /* Lange Kartenreihen seitlich wischen statt endlos scrollen */
  .kartenreihe:has(> .karte:nth-child(4)) {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-left: calc(var(--inhalt-rand-mobile) * -1);
    margin-right: calc(var(--inhalt-rand-mobile) * -1);
    padding: var(--abstand-xs) var(--inhalt-rand-mobile) var(--abstand-m);
    scroll-padding-left: var(--inhalt-rand-mobile);
    scrollbar-width: thin;
  }

  .kartenreihe:has(> .karte:nth-child(4)) > .karte {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .karte-schwerpunkt {
    padding: var(--karte-innen-mobile);
  }

  .karte-schwerpunkt .ueberschrift-3 {
    font-size: 24px;
  }

  /* Zeitstrahl senkrecht */
  .kartenreihe:has(> .schritt) {
    flex-direction: column;
    gap: var(--abstand-l);
  }

  .schritt {
    flex: 0 0 auto;
    padding: var(--abstand-null) var(--abstand-null) var(--abstand-null) calc(var(--nummer-groesse) + var(--abstand-m));
  }

  .schritt-nummer {
    position: absolute;
    top: 0;
    left: 0;
  }

  .schritt::before {
    top: calc(var(--nummer-groesse) + var(--abstand-xs));
    bottom: calc(var(--abstand-l) * -1 + var(--abstand-xs));
    left: calc(var(--nummer-groesse) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
    background-image: linear-gradient(180deg, var(--farbe-blau), rgba(53, 117, 229, 0.25));
  }

  .abschnitt-einstieg::before {
    width: 320px;
    bottom: -12%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kopf-inhalt,
  .kopf-huelle {
    transition: none;
  }
}

/* ---------- Video Banner Startseite ---------- */

.abschnitt-video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 640px;
  align-items: center;
}

.banner-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--farbe-dunkelblau);
}

.banner-video-film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Abdunklung: links kräftig für den Text, rechts leichter, damit das Video wirkt */
.banner-video-abdunklung {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(3, 7, 51, 0.93) 0%, rgba(3, 7, 51, 0.82) 42%, rgba(3, 7, 51, 0.55) 100%),
    linear-gradient(0deg, rgba(3, 7, 51, 0.55) 0%, transparent 35%);
}

.banner-video-pause {
  position: absolute;
  right: var(--inhalt-rand);
  bottom: var(--abstand-m);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--rahmen-duenn) solid rgba(255, 255, 255, 0.5);
  border-radius: var(--rundung-rund);
  background-color: rgba(3, 7, 51, 0.55);
  color: var(--farbe-weiss);
  cursor: pointer;
  transition: background-color var(--dauer-uebergang);
}

.banner-video-pause[hidden] {
  display: none;
}

.banner-video-pause:hover {
  background-color: rgba(3, 7, 51, 0.85);
}

.banner-video-pause:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

.banner-video-symbol {
  width: 18px;
  height: 18px;
}

.banner-video-symbol-play,
.banner-video-pause[aria-pressed="true"] .banner-video-symbol-pause {
  display: none;
}

.banner-video-pause[aria-pressed="true"] .banner-video-symbol-play {
  display: inline;
}

@media (max-width: 1024px) {
  .abschnitt-video {
    min-height: 0;
  }

  .banner-video-pause {
    right: var(--inhalt-rand-tablet);
  }
}

@media (max-width: 767px) {
  .banner-video-abdunklung {
    background-image: linear-gradient(180deg, rgba(3, 7, 51, 0.80) 0%, rgba(3, 7, 51, 0.88) 100%);
  }

  .banner-video-pause {
    right: var(--inhalt-rand-mobile);
    bottom: var(--abstand-s);
  }
}

/* ---------- Häufige Fragen über die volle Breite, zweispaltig ---------- */

.fragenliste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--abstand-xl);
  row-gap: var(--abstand-m);
}

.fragenliste .text-normal {
  max-width: none;
}

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

/* ---------- Teamkarten: Namen immer zwei Zeilen hoch, damit die Funktionen auf einer Linie stehen ---------- */

.karte:has(> .portrait-foto) {
  padding: var(--abstand-m);
}

.karte:has(> .portrait-foto) .ueberschrift-3 {
  font-size: 20px;
  min-height: calc(2em * 1.3);
}

/* Breite Ansicht: alle Namen passen in eine Zeile */
@media (min-width: 1280px) {
  .karte:has(> .portrait-foto) .ueberschrift-3 {
    min-height: 0;
  }
}

/* Sprungziele nicht unter dem festen Kopfbereich verstecken */
.abschnitt[id] {
  scroll-margin-top: 100px;
}

/* ---------- Überschriften einheitlich zweizeilig ---------- */

/* Platz für zwei ausgewogene Zeilen, Fließtext bleibt schmal (eigene Maximalbreite) */
.stapel:has(> .ueberschrift-1),
.stapel:has(> .ueberschrift-2) {
  max-width: 960px;
}

.stapel:has(> .ueberschrift-2) > .text-klein {
  max-width: var(--text-max);
}

/* Am Handy bricht der Text natürlich um */
@media (max-width: 767px) {
  .umbruch {
    display: none;
  }
}

/* Reihen mit genau sechs Karten: zwei gleichmäßige Reihen mit je drei Karten statt 4 + 2 */
@media (min-width: 1025px) {
  .kartenreihe:not(.kartenreihe-zweispaltig):not(:has(.karte-schwerpunkt)):has(> .karte:nth-child(6)):not(:has(> :nth-child(7))) > .karte {
    flex: 1 1 calc((100% - 2 * var(--abstand-m)) / 3);
    max-width: calc((100% - 2 * var(--abstand-m)) / 3);
  }
}

/* Lange deutsche Wörter in Kartentiteln sauber trennen statt mitten im Wort abzubrechen */
.karte .ueberschrift-3 {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- Microsoft-Spezialisierung (Startseite, November 2026) ----------
   Band unter dem Einstieg im Stil des LinkedIn-Visuals: dunkle Karte, Spezialisierungsname groß, offizielles Badge rechts. */

.spezialisierung-karte {
  --titel-farbe: var(--farbe-weiss);
  --text-farbe: var(--farbe-weiss);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--abstand-xl);
  padding: var(--abstand-xl);
  border-radius: var(--rundung-karte);
  background-color: var(--farbe-dunkelblau);
  background-image:
    radial-gradient(ellipse 85% 120% at 92% 0%, rgba(53, 117, 229, 0.48), transparent 62%),
    radial-gradient(ellipse 60% 90% at 0% 100%, rgba(254, 73, 78, 0.14), transparent 65%);
}

/* Bildzeichen dezent angeschnitten, wie im Einstieg */
.spezialisierung-karte::before {
  content: "";
  position: absolute;
  left: -6%;
  bottom: -55%;
  z-index: -1;
  width: 420px;
  max-width: 60%;
  aspect-ratio: 1 / 1;
  background: url("logo-mark.png") no-repeat center / contain;
  opacity: 0.06;
  transform: rotate(-12deg);
  pointer-events: none;
}

.spezialisierung-karte .stapel {
  max-width: none;
}

.spezialisierung-titel {
  font-size: var(--schrift-h1);
  line-height: var(--zeilenhoehe-eng);
  letter-spacing: var(--laufweite-h1);
}

.spezialisierung-badge {
  display: block;
  width: 300px;
  height: auto;
}

@media (max-width: 1024px) {
  .spezialisierung-karte {
    gap: var(--abstand-l);
  }

  .spezialisierung-titel {
    font-size: var(--schrift-h1-tablet);
  }

  .spezialisierung-badge {
    width: 240px;
  }
}

@media (max-width: 767px) {
  .spezialisierung-karte {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--karte-innen-mobile);
  }

  .spezialisierung-titel {
    font-size: var(--schrift-h1-mobile);
  }

  .spezialisierung-badge {
    width: 220px;
  }
}