/*--------------------------------------------------
	Brand-Stylesheet — Typografisches Grundgerüst
	Geladen nach main.css, überschreibt gezielt dessen
	Font-Variablen. main.css selbst bleibt unangetastet.
---------------------------------------------------*/

/* 01. Self-hosted Webfonts (kein Google-Fonts-Link, DSGVO) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-600.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-700.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces/fraunces-400.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces/fraunces-600.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces/fraunces-400italic.woff2") format("woff2");
}

/* 02. Design-Tokens */
:root {
  --brand: #FF002E;
  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;

  /* bestehende Template-Variablen (css/main.css) auf die neuen Tokens umleiten */
  --font-primary: var(--font-body);
  --font-secondary: var(--font-display);
  --accent-color: var(--brand);
}

/* 03. Typografische Basis — reduziert, editorial */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
}

em, .-italic {
  font-style: italic;
}

p {
  max-width: 65ch;
}

/* Hauptmenü (Overlay-Nav) — großformatige Menüpunkte als Display-Type */
.navList li a,
.subnav-list li a {
  font-family: var(--font-display);
}

/* Hauptmenü "Arbeiten" — Ausgewählte Arbeiten (Standardgröße, s.o.)
   vs. Weitere Arbeiten (etwas kleiner), gleiches Verhältnis wie auf der
   Startseite. main.css' .subnav-list li a-Tiers: 2.75rem / 2.25rem
   (<=991px) / 2rem (<=575px) / 2.84vw (>=1600px). */
.subnav-list li.subnav-item--secondary a {
  font-size: 1.9rem;
}

@media (max-width: 991px) {
  .subnav-list li.subnav-item--secondary a {
    font-size: 1.55rem;
  }
}

@media (max-width: 575px) {
  .subnav-list li.subnav-item--secondary a {
    font-size: 1.4rem;
  }
}

@media (min-width: 1600px) {
  .subnav-list li.subnav-item--secondary a {
    font-size: 1.95vw;
  }
}

/* Sprachweiche (Root-Index) — schlanke Zwischenseite, leitet per Skript
   anhand der Browsersprache weiter; dieser Inhalt ist der no-JS-/Bot-
   Fallback und blitzt bei aktivem JS bestenfalls kurz auf. */
.lang-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-gate__inner {
  text-align: center;
  padding: 2rem;
}

.lang-gate__logo {
  width: 9rem;
  height: auto;
}

/* Sprachumschalter (Header) — Farbverhalten spiegelt exakt main.css'
   .header__menu .icon-Regeln für jeden Theme-/Sticky-Zustand, damit der
   Link auf hellen wie dunklen Heros und im gescrollten Zustand denselben
   Kontrast hat wie das Menü-Icon daneben. */
.header__menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header__lang {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--font-dark);
}

.header__lang:hover {
  color: var(--brand);
}

.header.-dark .header__lang {
  color: white;
}

.header.-sticky-initial.-sticky-light .header__lang,
.header.is-sticky.-sticky-light .header__lang {
  color: black;
}

.header.-sticky-initial.-sticky-dark .header__lang,
.header.is-sticky.-sticky-dark .header__lang {
  color: white;
}

/* Logo — Header: .header__logo hat in main.css keine eigene Breite/Höhe.
   Die Cross-Fade-Bilder sind absolut positioniert mit width:100% — ohne
   eine definierte Containergröße fällt das auf die volle Intrinsic-Größe
   der SVG zurück (346×116px), daher wirkte das Logo riesig. Container
   jetzt fest dimensioniert (Seitenverhältnis 346:116), Bild passt sich
   darüber automatisch ein; die bestehende Sitzung zentriert es vertikal
   im Header, das ergibt die optische Luft rundherum. */
.header__logo {
  width: 7rem;
  height: 2.375rem;
}

@media (max-width: 767px) {
  .header__logo {
    width: 5.5rem;
    height: 1.875rem;
  }
}

/* Logo — Footer: main.css setzt hier nur "height: 44%" (bezieht sich auf
   keine definierte Elternhöhe) — gleiche Größe wie im Header, plus etwas
   Innenabstand */
.footer__logo {
  padding: 0.375rem 0;
}

.footer__logo img {
  width: 7rem;
  height: auto;
}

@media (max-width: 767px) {
  .footer__logo img {
    width: 5.5rem;
  }
}

/* main.css definiert die x-gap-/y-gap-Utility-Skala nur ab 32px (16px-Stufe
   fehlt) — dadurch hatte die Hero-CTA-Reihe keinen Abstand, wenn die Buttons
   auf schmalen Viewports untereinander umbrechen. */
.x-gap-16 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.x-gap-16 > * {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.y-gap-16 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.y-gap-16 > * {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Hero-CTAs (z.B. Über mich): auf sehr schmalen Viewports volle Breite und
   damit für Links- und Rechtshänder gleichermaßen gut erreichbar, statt
   schmaler, aneinandergeklebter Buttons. */
@media (max-width: 575px) {
  .hero-cta-row > .col-auto {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .hero-cta-row .button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* Kennzahlen-Kacheln (Case Studies) — große Fraunces-Ziffer mit schmaler
   Akzentlinie als Marker, Label darunter. Wiederverwendbar. */
.stat__figure {
  position: relative;
  display: inline-block;
  padding-top: 1.25rem;
}

.stat__figure::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2px;
  background-color: var(--brand);
}

.stat__label {
  max-width: 22ch;
}

/* Impact-Statement (Case Studies) — abgesetzt über Fraunces kursiv,
   nicht über Schriftstärke; schmale Akzentlinie als Marker */
.impact-statement {
  margin: 3.5rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--brand);
  border-radius: 0;
}

.impact-statement p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.91rem, 1.95vw, 1.235rem);
  line-height: 1.35;
  color: var(--font-dark);
  margin: 0;
}

@media (max-width: 767px) {
  .impact-statement {
    padding-left: 1rem;
  }

  .impact-statement p {
    font-size: 1.1rem;
  }
}

/* Case-Study Lead-Absatz (Einstieg/Geschäftswert direkt unterm Masthead)
   — line-height 10% enger als main.css' .leading-4xl (1.8 -> 1.62).
   Konvention für alle Case Studies: statt leading-4xl diese Klasse
   verwenden. */
.case-study-lead {
  line-height: 1.62;
}

/* Startseite-Hero — statischer Ersatz für den bisherigen Slider. Auf
   Tablet Hochformat und Mobil (<=991px) wird statt des breiten Desktop-
   Headerbilds dasselbe Porträt wie im "Über mich"-Hero gezeigt (eigenes
   Markup mit Modifier-Klassen, da main.css keine sm:-Variante für ein
   Bild-Austauschen bietet); in voller Breite unterhalb des Texts, feste
   Höhe statt 100vh-Spalte neben dem Text. Ab 992px bleibt die bisherige
   Desktop-Darstellung (volle Höhe, Header-Bild neben dem Text) unverändert. */
.hero-static__media--mobile {
  display: none;
}

@media (max-width: 991px) {
  .hero-static {
    height: auto;
  }

  .hero-static__media--desktop {
    display: none;
  }

  .hero-static__media--mobile {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
    height: 70vh;
  }

  .hero-static__text {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Startseite-Hero — H1 auf Mobil 30% kleiner als .text-6xl (main.css,
   3.75rem), damit sie dort nicht zu wuchtig wirkt */
@media (max-width: 767px) {
  .hero-static__title {
    font-size: 2.625rem;
  }
}

/* Startseite — "Ausgewählte Arbeiten": Case-Titel-Größe */
#ausgewaehlte-arbeiten .portfolioCard__title {
  font-size: 1.25rem;
}

/* Startseite — "Schwerpunkte": Headline auf Hero-H1-Größe (main.css'
   .sectionHeading.-lg setzt sonst 4.25rem, hier wie --text-6xl/3.75rem),
   damit "Vier Kompetenzfelder," in der Spalte nicht selbst umbricht.
   Zusätzlich um 8px verkleinert, siehe .home-section-title unten. */
.sectionHeading__title.schwerpunkte-title {
  font-size: 3.25rem;
}

/* Startseite — alle Zwischen-Headlines (Section-H2) 8px kleiner als
   main.css' .sectionHeading.-lg-Standard (4.25rem/3.5rem/3.125rem je
   Breakpoint). Nur auf index.html verwendet (eigene Klasse statt
   Eingriff in die main.css-Komponente, damit ueber.html/
   index_alternativ.html unangetastet bleiben). */
.sectionHeading__title.home-section-title {
  font-size: 3.75rem;
}

@media (max-width: 991px) {
  .sectionHeading__title.home-section-title {
    font-size: 3rem;
  }
}

@media (max-width: 767px) {
  .sectionHeading__title.home-section-title {
    font-size: 2.01rem;
  }

  .sectionHeading__title.schwerpunkte-title {
    font-size: 2.48rem;
  }
}

/* Startseite — "Weitere Arbeiten": auf Mobil eine kompakte Tap-Teaser-
   Liste statt Bildkarten-Grid. Grund: main.css' .col-lg-3/.col-sm-6
   greifen erst ab 576px; darunter hatte die Karte kein Breiten-Limit
   und ihr .ratio-3:4-Bild wirkte dadurch sogar größer als die 16:9-Bilder
   der "Ausgewählte Arbeiten"-Cards. */
.portfolioCard__arrow {
  display: none;
}

@media (max-width: 767px) {
  #weitere-arbeiten .row.x-gap-32.y-gap-32,
  #more-work .row.x-gap-32.y-gap-32 {
    margin: 0;
    padding-top: 0;
  }

  #weitere-arbeiten .row.x-gap-32.y-gap-32 > [class*="col-"],
  #more-work .row.x-gap-32.y-gap-32 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
  }

  #weitere-arbeiten .portfolioCard,
  #more-work .portfolioCard {
    position: relative;
    display: block;
    padding: 1rem 2.5rem 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  #weitere-arbeiten .portfolioCard__img,
  #more-work .portfolioCard__img {
    display: none;
  }

  #weitere-arbeiten .portfolioCard__content,
  #more-work .portfolioCard__content {
    padding: 0;
  }

  #weitere-arbeiten .portfolioCard__title,
  #more-work .portfolioCard__title {
    margin-top: 0.125rem;
  }

  #weitere-arbeiten .portfolioCard__arrow,
  #more-work .portfolioCard__arrow {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    color: var(--brand);
  }
}

/* Case Studies — interaktive Demo als iFrame eingebettet (aktuell nur
   schako.html). Nur ab echtem Desktop (>=1260px, main.css/vendors.css'
   xl-Breakpoint) — auf Tablet (Hoch- und Querformat) und Mobil (Hoch-
   und Querformat) wird der komplette Abschnitt inkl. Text ausgeblendet. */
.case-embed-section {
  display: none;
}

@media (min-width: 1260px) {
  .case-embed-section {
    display: block;
  }
}

.case-embed {
  display: block;
  width: 90%;
  margin: 0 auto;
  height: 80vh;
  min-height: 32rem;
  max-height: 56.25rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  box-shadow: 0 6px 24px -2px rgba(119, 139, 165, 0.2);
}

/* Case Studies — eingebettetes BPMN-Prozessdiagramm (aktuell nur
   schako.html), als horizontal scrollbares Inline-SVG statt Bild, damit
   es am Desktop frei explorierbar ist (Hover hebt einzelne Schritte
   hervor, native Tooltips zeigen Details). Gleiche Desktop-only-Regel
   wie .case-embed-section. */
.bpmn-embed-section {
  display: none;
}

@media (min-width: 1260px) {
  .bpmn-embed-section {
    display: block;
  }
}

.bpmn-card {
  width: 90%;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  box-shadow: 0 6px 24px -2px rgba(119, 139, 165, 0.2);
  overflow: hidden;
  background: #fff;
}

.bpmn-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.375rem;
  padding: 1.25rem 1.5rem 0;
  font-size: 0.8rem;
  color: var(--font-dark);
}

.bpmn-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.bpmn-legend-item svg {
  flex-shrink: 0;
}

.bpmn-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.5rem 1.5rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.bpmn-scroll::-webkit-scrollbar {
  height: 10px;
}

.bpmn-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.bpmn-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 8px;
}

.bpmn-hint {
  padding: 0 1.5rem 1rem;
  font-size: 0.8rem;
  color: var(--font-dark);
  opacity: 0.7;
}

/* Einzelne BPMN-Elemente: Hover hebt Form + Beschriftung leicht an und
   färbt den Rahmen in der Signature-Akzentfarbe; SVG-<title> liefert den
   nativen Tooltip mit Detailtext. */
.bpmn-node {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.bpmn-node:hover {
  transform: scale(1.045);
  filter: drop-shadow(0 6px 14px rgba(255, 0, 46, 0.28));
}

.bpmn-node .bpmn-shape {
  transition: stroke 0.18s ease;
}

.bpmn-node:hover .bpmn-shape {
  stroke: var(--brand) !important;
}

/* Hauptmenü — "Impressum" / "Datenschutz": deutlich kleiner und gedämpfter
   als "Arbeiten" / "Über mich" gehalten, damit der Fokus im Menü auf den
   inhaltlichen Punkten liegt. */
.navList li.navList-item--meta a {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 991px) {
  .navList li.navList-item--meta a {
    font-size: 1.05rem;
  }
}

@media (max-width: 575px) {
  .navList li.navList-item--meta a {
    font-size: 1rem;
  }
}

@media (min-width: 1600px) {
  .navList li.navList-item--meta a {
    font-size: 1.1vw;
  }
}

/* Über mich — "Beruflicher Werdegang" / "Ausbildungen & Zertifikate":
   Listen-Zeilen mit dünnem Trennstrich */
.werdegang-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.werdegang-item:first-child {
  padding-top: 0;
}

.werdegang-item:last-child {
  border-bottom: 0;
}