/* ==========================================================================
   Portfolio Vincent Paul – Styles
   Aufbau: Tokens → Fonts → Basis → Sections (Nav, Hero, Work, Filter,
   Projekt, Button, Footer) → Breakpoints Tablet (≤1023) / Mobile (≤599)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --schwarz: #0d0e12;
  --grund: #f5f5f5;
  --tag-grund: #e8e7e9;
  --linie: rgba(13, 14, 18, 0.3);
  --tag-rand: rgba(13, 14, 18, 0.5);
  --gruen: #9dffb7;
  --lila: #d59eff;
  --gelb: #ecff80;
  --blau: #a6cff5;

  --font-head: "Brockmann", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --max: 1536px;
  --rand: 64px;
  --abstand-nav-hero: 64px;
  --abstand-hero-work: 240px;
  --abstand-work-footer: 240px;
  --projekt-py: 120px;
  --titel-groesse: 38px;
  --titel-lh: 1.2;
  --ueberschrift-groesse: 64px;
  --zitat-groesse: 64px;
  --abstand-gross: 320px;        /* About: zwischen den Sections */
  --abstand-about-footer: 240px; /* About: letzte Section → Footer */

  --bild-ruhe: 0.2; /* Deckkraft der Projektbilder ohne Hover (nur Desktop) */

  /* Bewegung – Werte aus den Figma-Prototyp-Übergängen */
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --dauer-slow: 1250ms;   /* Figma-Feder „Slow“ (Hover von Projekten, Karten, Logo, Filter) */
  --dauer-gentle: 1022ms; /* Figma-Feder „Gentle“ */
  --feder-slow: cubic-bezier(0.2, 0.75, 0.25, 1);   /* Ersatz für Browser ohne linear() */
  --feder-gentle: cubic-bezier(0.3, 1.2, 0.5, 1);
  /* Bewegung – Regelwerk in main.js („Einblenden beim Scrollen“) und LIESMICH.md („Bewegung“).
     Erscheinen: langsam und ruhig (wie im ersten Stand). Wechsel: schnell, ohne Weg. Zeichnen: Grafiken. */
  --zeit-ein: 900ms;       /* Erscheinen beim Scrollen, nachladende Bilder */
  --weg-ein: 18px;         /* Weg nach oben beim Erscheinen */
  --takt-ein: 100ms;       /* Abstand zwischen Bausteinen, die zugleich in den Blick kommen (höchstens 4 Stufen) */
  --kurve-ein: cubic-bezier(0.2, 0.6, 0.2, 1);
  --zeit-wechsel: 320ms;   /* Reiter, Schritte, Spalten, Panels: nur überblenden */
  --zeit-zeichnen: 1400ms; /* Linien und Kurven, die sich zeichnen */
}
/* Exakte Federkurven (Masse 1 · Slow: Steifigkeit 80, Dämpfung 20 · Gentle: 100, 15) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --feder-slow: linear(0, 0.032, 0.105, 0.196, 0.291, 0.383, 0.467, 0.544, 0.61, 0.669, 0.719, 0.762, 0.799, 0.831, 0.857, 0.879, 0.898, 0.914, 0.928, 0.939, 0.949, 0.957, 0.964, 0.97, 0.974, 0.978, 0.982, 0.985, 0.987, 0.989, 0.991, 0.992, 0.994, 0.995, 0.995, 0.996, 0.997, 0.997, 0.998, 0.998, 1);
    --feder-gentle: linear(0, 0.029, 0.101, 0.199, 0.308, 0.421, 0.528, 0.627, 0.714, 0.79, 0.852, 0.903, 0.942, 0.973, 0.995, 1.01, 1.02, 1.025, 1.028, 1.028, 1.027, 1.024, 1.021, 1.018, 1.015, 1.012, 1.01, 1.007, 1.005, 1.004, 1.002, 1.001, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 0.999, 1);
  }
}

/* ---------- Fonts (selbst gehostet) ---------- */
/* Brockmann: lizenzierte Webfonts (atipo, Webfont-Lizenz für eine Website, 14.10.2026).
   Der Webfont-Generator hat die Höhenmaße verändert (800/200 statt 950/250); die Overrides stellen das
   Originalmaß wieder her, damit Zeilen und Pillen exakt wie vorher sitzen. */
@font-face { font-family: "Brockmann"; src: url("../assets/fonts/Brockmann-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Brockmann"; src: url("../assets/fonts/Brockmann-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Brockmann"; src: url("../assets/fonts/Brockmann-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Brockmann"; src: url("../assets/fonts/Brockmann-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: block; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Brockmann"; src: url("../assets/fonts/Brockmann-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Brockmann"; src: url("../assets/fonts/Brockmann-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: block; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Brockmann"; src: url("../assets/fonts/Brockmann-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Brockmann"; src: url("../assets/fonts/Brockmann-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: block; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--grund);
  color: var(--schwarz);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 20; padding: 8px 12px; background: var(--schwarz); color: var(--grund); }
.skip-link:focus { top: 16px; }

br.umbruch-schmal, br.umbruch-mobil { display: none; }

.meta { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; }
.fliesstext { font-size: 18px; line-height: 1.6; }

/* ---------- Seitenwechsel ----------
   Weiche Überblendung zwischen den Seiten (Chrome, Edge, Safari; nur über http/https, nicht per Doppelklick).
   Die Nav bekommt einen eigenen Namen, damit sie stehen bleibt und nur ihr Zustand überblendet. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; }
.footer:empty { display: none; } /* vor dem Rendern kein grüner Streifen */

/* ---------- Nav ---------- */
.nav { view-transition-name: hauptnav; }
.nav {
  position: sticky; top: 0; z-index: 10;
  height: 120px; padding: 24px var(--rand);
  display: flex; align-items: center;
  background: rgba(245, 245, 245, 0.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nav__inhalt {
  width: 100%; max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
/* Logo als ein Inline-SVG (js/main.js): beim Hover fahren die vier Formen auseinander und der Rahmen wächst mit
   (Figma: Smart Animate „In → Out“, Feder Slow 1250 ms). Nur transform → keine Layout-Arbeit, nichts muss nachladen. */
.logo { position: relative; display: block; width: 95px; height: 42px; }
.logo__svg { display: block; overflow: visible; }
.logo__teil { transition: transform var(--dauer-slow) var(--feder-slow); }
/* Mittelstück = obere und untere Rahmenlinie: wächst von links aus (32 → 135 px) */
.logo__teil--mitte { transform-box: fill-box; transform-origin: 0 50%; }

.hauptnav { display: flex; gap: 32px; font-family: var(--font-head); font-size: 20px; line-height: 1.2; white-space: nowrap; }
.hauptnav__link { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
/* Pfeil gleitet von links herein (Figma: Smart Animate 500 ms, Ease in and out) */
.hauptnav__link::before {
  content: "→"; font-weight: 600; font-style: italic; opacity: 0; transform: translateX(-16px);
  transition: opacity 500ms var(--ease-in-out), transform 500ms var(--ease-in-out);
}
.hauptnav__link.is-aktiv { font-weight: 600; font-style: italic; }
.hauptnav__link.is-aktiv::before { opacity: 1; transform: none; }

/* ---------- Hero: ein Panorama, mehrere Fenster ---------- */
.hero { margin-top: var(--abstand-nav-hero); padding: 0 var(--rand); }
.hero__inhalt {
  max-width: var(--max); height: 640px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 40px;
}
.hero__fenster { position: relative; overflow: hidden; flex-shrink: 0; }
.hero__fenster img { position: absolute; max-width: none; width: auto; }

.hero__fenster--links { width: 160px; height: 320px; border-radius: 0 120px 0 100px; }
.hero__fenster--links img { height: 640px; top: -320px; left: -516px; }

.hero__fenster--mitte { flex: 1 1 0; min-width: 0; height: 100%; border-radius: 160px 0 240px 0; }
.hero__fenster--mitte img { height: 100%; top: 0; left: -716px; }

.hero__spalte {
  flex: 1 1 0; min-width: 0; max-width: 480px; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero__oben { display: flex; flex-direction: column; gap: 16px; }
.hero__fenster--rechts { width: 100%; height: 306px; border-radius: 0 240px 0 0; }
.hero__fenster--rechts img { width: 1536px; height: auto; top: 0; right: 0; }
.hero__mail:hover { text-decoration: underline; }
.hero__zeit:empty { display: none; }

.hero__intro { display: flex; flex-direction: column; gap: 8px; }
.hero__titel { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 25px; line-height: 1.5; }

/* ---------- Work: Überschrift + Filter ---------- */
.work { margin-top: var(--abstand-hero-work); }
.work__kopf { padding: 0 var(--rand); border-bottom: 1px solid var(--linie); }
.work__kopf-inhalt {
  max-width: var(--max); margin: 0 auto; padding-bottom: 24px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.work__titel { font-family: var(--font-head); font-weight: 400; font-size: var(--ueberschrift-groesse); line-height: 1; }
.work__titel em { font-weight: 600; }

.filter {
  width: 280px; min-height: 64px; padding-top: 22px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
/* Gewählter Eintrag als Pille (wie der Use-Case-Schalter), Hover als heller Rand derselben Pille.
   Ein System statt zwei: keine Pfeile mehr (Pfeil in der Pille kollidierte mit dem Rand). */
.filter-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: none; border: 1.5px solid transparent; border-radius: 999px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 18px; line-height: 1.2;
  transition: border-color 300ms var(--ease-in-out);
}
.filter-item:hover { border-color: rgba(13, 14, 18, 0.25); }
.filter-item.is-gewaehlt { border-color: var(--schwarz); }
.filter-item:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 2px; }
.filter-item[hidden] { display: none; }
.filter-item__titel { position: relative; display: flex; align-items: center; gap: 12px; height: 32px; }
.filter-item__titel img { width: 32px; height: 26px; }
.filter.is-offen .filter-item:not(.is-gewaehlt) { animation: einblenden 250ms var(--ease-out) both; }
@keyframes einblenden { from { opacity: 0; } }

/* ---------- Projekt (Standard + Hauptprojekt) ---------- */
.projekt { padding: var(--projekt-py) var(--rand); border-bottom: 1px solid var(--linie); }
.projekt[hidden] { display: none; }
.projekt > * { max-width: var(--max); margin-inline: auto; }

.projekt__info {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 32px; align-items: center;
  margin-bottom: 16px;
  font-family: var(--font-head); font-weight: 500; font-style: italic; font-size: 14px; line-height: 1.2;
}
.projekt__icon { grid-column: -2; width: 32px; height: 26px; }

.projekt__inhalt { display: flex; align-items: flex-start; gap: 64px; }
.projekt__bild {
  display: block; flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden;
  transition: border-radius var(--dauer-slow) var(--feder-slow);
}
.projekt__bild picture { display: block; width: 100%; height: 100%; }
.projekt__bild img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dauer-slow) var(--feder-slow); }

.projekt__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.projekt__kopf { display: flex; flex-direction: column; gap: 8px; }
.projekt__titel { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: var(--titel-groesse); line-height: var(--titel-lh); }
.projekt__bereich { display: flex; flex-direction: column; gap: 8px; }
.projekt__bereich .meta { line-height: 26px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 4px 8px; background: var(--tag-grund); border: 1px solid var(--tag-rand);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.5; white-space: nowrap;
}
.projekt__auszeichnung { max-width: 480px; font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 16px; line-height: 1.5; }
.projekt__aktion { display: flex; align-items: center; gap: 24px; }
.projekt__nummer { font-family: var(--font-head); font-weight: 400; font-size: 64px; line-height: 1.2; }

/* Hauptprojekt: Text links (max. 480), Bild rechts */
.projekt--haupt .projekt__text { order: -1; max-width: 480px; }

/* Hover: Bild wird voll sichtbar und bekommt die Hero-Radien (nur Desktop mit Maus) */
@media (hover: hover) and (min-width: 1024px) {
  .projekt:not(.projekt--haupt) .projekt__bild img { opacity: var(--bild-ruhe); }
  .projekt:hover .projekt__bild,
  .projekt:focus-within .projekt__bild { border-radius: 80px 0 160px 0; }
  .projekt:hover .projekt__bild img,
  .projekt:focus-within .projekt__bild img { opacity: 1; }

}

/* Logo und Nav reagieren auf Hover, sobald eine Maus da ist (Figma: Desktop und Tablet) */
@media (hover: hover) {
  /* .is-offen: Nach einem Klick aufs Logo startet die neue Seite mit offenem Logo und schließt erst,
     wenn die Maus sich bewegt (js/main.js). Sonst springt es beim Seitenwechsel zu. */
  :is(.logo:hover, .logo:focus-visible, .logo.is-offen) .logo__teil--2 { transform: translateX(32px); }
  :is(.logo:hover, .logo:focus-visible, .logo.is-offen) .logo__teil--3 { transform: translateX(64px); }
  :is(.logo:hover, .logo:focus-visible, .logo.is-offen) .logo__teil--4 { transform: translateX(96px); }
  :is(.logo:hover, .logo:focus-visible, .logo.is-offen) .logo__teil--rechts { transform: translateX(98px); }
  :is(.logo:hover, .logo:focus-visible, .logo.is-offen) .logo__teil--mitte { transform: scaleX(4.21875); }

  /* Hover auf den anderen Punkt: Markierung wandert, der aktive Pfeil bleibt blass stehen */
  .hauptnav__link:not(.is-aktiv):hover { font-weight: 600; font-style: italic; }
  .hauptnav__link:not(.is-aktiv):hover::before { opacity: 1; transform: none; }
  .hauptnav:has(.hauptnav__link:not(.is-aktiv):hover) .hauptnav__link.is-aktiv { font-weight: 500; font-style: normal; }
  .hauptnav:has(.hauptnav__link:not(.is-aktiv):hover) .hauptnav__link.is-aktiv::before { opacity: 0.2; transform: translateX(-16px); }
}

/* ---------- Button „Zum Projekt →“ ---------- */
.button-pfeil {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px 12px 0; overflow: hidden; white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.2;
}
/* Figma: Hover → Zustand 2 (800 ms, Ease in and out), danach pendelt der Strich zwischen
   Pfeil und Textanfang hin und her, solange der Zeiger bleibt; Verlassen → Feder Slow 1250 ms */
.button-pfeil__pfeil { transition: transform var(--dauer-slow) var(--feder-slow); }
.button-pfeil::after {
  content: ""; position: absolute; bottom: 1.5px; left: -16px;
  width: 16px; height: 2.5px; background: var(--schwarz);
  transition: left var(--dauer-slow) var(--feder-slow);
}
.button-pfeil:hover, .button-pfeil:focus-visible { font-style: italic; }
.button-pfeil:hover .button-pfeil__pfeil, .button-pfeil:focus-visible .button-pfeil__pfeil {
  transform: translateX(16px); transition: transform 800ms var(--ease-in-out);
}
.button-pfeil:hover::after, .button-pfeil:focus-visible::after {
  left: calc(100% - 16px); transition: left 800ms var(--ease-in-out);
  animation: strich-pendel 800ms var(--ease-in-out) 800ms infinite alternate;
}
@keyframes strich-pendel { from { left: calc(100% - 16px); } to { left: 0; } }

/* ---------- Footer ---------- */
.footer {
  margin-top: var(--abstand-work-footer);
  padding: 80px var(--rand) 40px;
  background: var(--gruen);
  display: flex; flex-direction: column; gap: 64px;
}
.footer > * { width: 100%; max-width: var(--max); margin-inline: auto; }
.footer__inhalt { display: flex; flex-direction: column; gap: 80px; }
.footer__zitat {
  max-width: 699px;
  font-family: var(--font-head); font-weight: 500; font-size: var(--zitat-groesse); line-height: 1.3;
  color: rgba(13, 14, 18, 0.8);
}
.footer__zitat .leise { font-weight: 400; color: rgba(13, 14, 18, 0.6); }
.footer__kontakt {
  display: flex; flex-direction: column; gap: 16px;
  font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 18px; line-height: 1.2;
  color: rgba(13, 14, 18, 0.8);
}
.footer__kontakt p { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__kontakt a:hover { text-decoration: underline; }
.footer__leiste {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: rgba(13, 14, 18, 0.7);
}
.footer__leiste > * { white-space: nowrap; } /* lieber zwei Zeilen als umbrochene Einträge (schmale Handys) */
.footer__leiste a { font-weight: 500; text-decoration: underline; }

/* ---------- About: Kopf (Text, Bild, Zierelement) ---------- */
.about-kopf { margin-top: var(--abstand-nav-hero); padding: 0 var(--rand); }
.about-kopf__inhalt {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.about-kopf__haupt { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 120px; }
.about-kopf__text { flex-shrink: 0; width: 480px; display: flex; flex-direction: column; gap: 8px; }
.about-kopf__betont { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 18px; line-height: 1.2; }
/* Flattersatz im Kopf: keine einzelnen Wörter in der letzten Zeile, Bindestrich-Wörter bleiben zusammen */
.about-kopf__text .fliesstext { text-wrap: pretty; }
.ganz { white-space: nowrap; }
.about-kopf__bild {
  flex: 1 1 0; min-width: 0; max-width: 640px; height: 400px;
  overflow: hidden; border-radius: 160px 0 240px 0;
}
.about-kopf__bild img { width: 100%; height: 100%; object-fit: cover; }

.zier { flex-shrink: 0; height: 400px; padding-left: 40px; }
.zier__streifen { display: flex; }
.zier__streifen img { width: 50px; height: 400px; }
.zier__links { transform: scaleY(-1); }

/* ---------- About: Ansatz ---------- */
.ansatz { margin-top: var(--abstand-gross); padding: 0 var(--rand); }
.ansatz__liste { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.ansatz__zeile { display: flex; align-items: flex-start; gap: 120px; max-width: 1112px; }
.ansatz__zeile dt {
  flex-shrink: 0; width: 480px; text-align: right;
  font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 18px; line-height: 1.6;
}
.ansatz__zeile dt::after { content: " →"; }
.ansatz__zeile dd { flex: 1 1 0; min-width: 0; }
.ansatz__zeile dd { text-wrap: pretty; }
.ansatz__zeile dd p + p { margin-top: 8px; }

/* ---------- About: Animation (eigene Datei im iframe) ---------- */
.animation { margin-top: var(--abstand-gross); padding: 0 var(--rand); }
.animation__rahmen { display: block; width: 100%; max-width: var(--max); margin: 0 auto; aspect-ratio: 3 / 2; border: 0; }

/* ---------- About: Lebenslauf ---------- */
.lebenslauf { margin-top: var(--abstand-gross); padding: 0 var(--rand); }
.lebenslauf__inhalt { max-width: var(--max); margin: 0 auto; display: flex; justify-content: center; gap: 120px; }
.lebenslauf__spalte { flex: 1 1 0; min-width: 0; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
.lebenslauf__titel { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 25px; line-height: 1.5; }

[data-seite="about"] .footer { margin-top: var(--abstand-about-footer); }

/* ---------- Datenschutz (datenschutz.html) ----------
   Abstände Desktop / Tablet / Mobile: Nav → Titel 64/40/40, Titel → erster Abschnitt 120/120/64,
   zwischen Abschnitten 120/80/64, Überschrift → Text 24, letzter Abschnitt → Footer 160/120/80 */
.recht {
  --recht-start: 64px; --recht-titel: 120px; --recht-abschnitt: 120px;
  margin-top: var(--recht-start); padding: 0 var(--rand);
}
.recht__inhalt { max-width: var(--max); margin: 0 auto; }
.recht__titel { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 60px; line-height: 1.2; }
.recht__abschnitt { margin-top: var(--recht-abschnitt); display: flex; flex-direction: column; gap: 24px; }
.recht__titel + .recht__abschnitt { margin-top: var(--recht-titel); }
/* Zweiter Teil (Datenschutzerklärung nach dem Impressum): Abstand wie zum Footer, damit die beiden Teile klar getrennt sind */
.recht__titel--folge { margin-top: var(--recht-teil, 160px); }
.recht__h2 { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 31px; line-height: 1.5; }
.recht__h3 { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 18px; line-height: 1.2; }
.recht__dienste { display: flex; flex-direction: column; gap: 24px; }
.recht__block { display: flex; flex-direction: column; gap: 8px; }
.recht__text, .recht__grundlage, .recht__liste { max-width: 560px; font-size: 18px; line-height: 1.6; }
.recht a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.recht__liste { list-style: none; }
.recht__liste li { position: relative; padding-left: 1em; }
.recht__liste li::before { content: "•"; position: absolute; left: 0; }
[data-seite="datenschutz"] .footer { margin-top: 160px; }
@media (max-width: 1023px) {
  .recht { --recht-start: 40px; --recht-abschnitt: 80px; --recht-teil: 120px; }
  .recht__titel { font-size: 48px; }
  .recht__h2 { font-size: 25px; }
  [data-seite="datenschutz"] .footer { margin-top: 120px; }
}
@media (max-width: 599px) {
  .recht { --recht-titel: 64px; --recht-abschnitt: 64px; --recht-teil: 80px; }
  .recht__titel { font-size: 31px; line-height: 1.5; }
  .recht__text, .recht__grundlage, .recht__liste { max-width: none; }
  /* Figma Mobile: Rechtsgrundlagen und Rechte-Liste als Brockmann SemiBold Italic 16 */
  .recht__grundlage, .recht__liste--rechte { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 16px; line-height: 1.5; }
  .recht__liste--rechte { display: flex; flex-direction: column; gap: 24px; }
  [data-seite="datenschutz"] .footer { margin-top: 80px; }
}

/* ==========================================================================
   Tablet (600–1023)
   ========================================================================== */
@media (max-width: 1023px) {
  :root {
    --rand: 32px;
    --abstand-nav-hero: 40px;
    --abstand-hero-work: 160px;
    --projekt-py: 80px;
    --titel-groesse: 31px;
    --titel-lh: 1.5;
    --ueberschrift-groesse: 40px;
    --zitat-groesse: 48px;
    --abstand-gross: 240px;
    --abstand-about-footer: 160px;
  }
  br.umbruch-schmal { display: inline; }

  .about-kopf__haupt { flex-direction: column; gap: 40px; max-width: 640px; }
  .about-kopf__bild { order: -1; flex: none; width: 100%; max-width: none; }
  .about-kopf__text { width: 100%; }

  .ansatz__liste { gap: 24px; }
  .ansatz__zeile { gap: 40px; max-width: none; }
  .ansatz__zeile dt { flex: 1 0 120px; width: auto; max-width: 480px; }
  .ansatz__zeile dd { flex: 0 1 480px; }

  .lebenslauf__inhalt { flex-direction: column; justify-content: flex-start; gap: 40px; }
  .lebenslauf__spalte { flex: none; }

  .hero__inhalt { height: 480px; gap: 24px; }
  .hero__fenster--links { display: none; }
  .hero__fenster--mitte { border-radius: 160px 0 200px 0; }
  .hero__fenster--mitte img { left: -543px; }
  .hero__spalte { justify-content: flex-start; gap: 40px; }
  .hero__fenster--rechts { height: 200px; border-radius: 0 160px 0 0; }
  .hero__fenster--rechts img { width: auto; height: 481px; left: -995px; right: auto; }
  .hero__mail { text-decoration: underline; }

  .filter { min-height: 80px; padding-top: 32px; }

  .projekt__info { grid-template-columns: repeat(3, minmax(0, 1fr)) 32px; }
  .projekt__icon { height: 24px; }

  .projekt--haupt .projekt__inhalt { flex-direction: column; }
  .projekt--haupt .projekt__bild { flex: none; width: 100%; }
  .projekt--haupt .projekt__text { order: 0; flex: none; width: 100%; max-width: 640px; }

  .footer { padding: 64px var(--rand) 32px; }
  .footer__inhalt { gap: 64px; }
  .footer__zitat { max-width: none; }
}

/* ==========================================================================
   Mobile (≤599)
   ========================================================================== */
@media (max-width: 599px) {
  :root {
    --rand: 24px;
    --abstand-nav-hero: 24px;
    --abstand-hero-work: 120px;
    --projekt-py: 64px;
    --titel-groesse: 25px;
    --zitat-groesse: 32px;
    --abstand-gross: 160px;
    --abstand-about-footer: 120px;
  }
  br.umbruch-mobil { display: inline; }

  .about-kopf__inhalt { flex-direction: column; gap: 40px; }
  .about-kopf__haupt { width: 100%; max-width: none; }
  .about-kopf__bild { height: 354px; border-radius: 120px 0 160px 0; } /* wie das Hero-Bild der Startseite */
  .about-kopf__text { max-width: 480px; }
  /* Zierelement liegt auf Mobile quer: Streifen gedreht und auf 40-px-Blätter skaliert */
  .zier { position: relative; width: 320px; height: 80px; padding-left: 0; }
  .zier__streifen { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: translateY(80px) rotate(-90deg) scale(0.8); }

  .ansatz__liste { gap: 40px; }
  .ansatz__zeile { flex-direction: column; gap: 8px; }
  .ansatz__zeile dt { flex: none; max-width: none; text-align: left; }
  .ansatz__zeile dt::after { content: none; }
  .ansatz__zeile dd { flex: none; }

  .lebenslauf__inhalt { gap: 80px; }

  .hauptnav { gap: 16px; }

  .hero__inhalt { flex-direction: column; align-items: stretch; height: auto; gap: 16px; }
  .hero__fenster--mitte { flex: none; height: 354px; border-radius: 120px 0 160px 0; }
  .hero__fenster--mitte img { height: 360px; left: -351px; }
  .hero__fenster--rechts { display: none; }
  .hero__spalte { height: auto; }
  .hero__intro { gap: 4px; }

  .work__kopf-inhalt { flex-direction: column; align-items: stretch; }
  .work__titel { min-height: 80px; }
  .filter { width: 100%; padding-top: 32px; }

  .projekt__info { grid-template-columns: minmax(0, 1fr) auto 32px; gap: 24px; }

  .projekt__inhalt { flex-direction: column; gap: 32px; }
  .projekt__bild { flex: none; width: 100%; }
  .projekt__text { flex: none; width: 100%; }
  .projekt--haupt .projekt__text { max-width: 480px; }

  .footer { padding: 40px var(--rand) 24px; gap: 32px; }
  .footer__inhalt { gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Einblenden beim Scrollen (main.js setzt .einblenden, beim Erscheinen .ist-ein) ---------- */
.einblenden { opacity: 0; transform: translateY(var(--weg-ein)); }
.einblenden.ist-ein {
  opacity: 1;
  transform: none;
  transition: opacity var(--zeit-ein) var(--kurve-ein) var(--ein-verzug, 0ms), transform var(--zeit-ein) var(--kurve-ein) var(--ein-verzug, 0ms);
}
/* Bilder, die nach dem Erscheinen fertig laden (main.js setzt .bild-laedt / .bild-da) */
img.bild-laedt { opacity: 0; }
img.bild-da { transition: opacity var(--zeit-ein) var(--kurve-ein); }
@media (prefers-reduced-motion: reduce) { .einblenden, img.bild-laedt { opacity: 1; transform: none; } }

/* Sehr schmale Telefone (≤ 359 px, z. B. iPhone SE 1. Gen.): Nav und Zierelement passen sonst nicht in die Breite */
@media (max-width: 359px) {
  .hauptnav { gap: 10px; font-size: 17px; }
  .hauptnav__link { gap: 6px; }
  .hauptnav__link:not(.is-aktiv)::before { display: none; } /* unsichtbarer Pfeil braucht sonst Platz */
  .logo, .logo__svg { width: 76px; height: 34px; }
  .zier { width: 100%; overflow: hidden; }
  .zier__streifen { transform: translateY(80px) rotate(-90deg) scale(0.68); }
}
/* Projektzeilen 600–767: Bild über dem Text, sonst wird die Textspalte zu schmal und „Zum Projekt →“ abgeschnitten */
@media (min-width: 600px) and (max-width: 767px) {
  .projekt__inhalt { flex-direction: column; gap: 32px; }
  .projekt__bild { flex: none; width: 100%; }
  .projekt__text { flex: none; width: 100%; }
}
/* Sicherheitsnetz: nichts darf seitlich scrollen lassen (clip statt hidden, damit sticky weiter funktioniert) */
html, body { overflow-x: clip; }