/* Portfolio Johanna Berger */

/* ---------- Schriften, lokal (fontsource, latin) ---------- */

@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/unbounded-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/unbounded-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-latin-400-italic.woff2") format("woff2"); }

:root {
  --grund: #fdf6c3;        /* ein Gelb für die ganze Seite */
  --tinte: #2a2622;
  --tinte-leise: #5a5648;
  --wolle: #efe6d6;

  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --grotesk: "Instrument Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --display: "Unbounded", var(--grotesk);

  --spalte: 1040px;
  --rand: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

/* ---------- Kopf ---------- */

.kopf {
  padding: clamp(28px, 6vw, 72px) var(--rand) clamp(20px, 4vw, 44px);
}

.kopf-titel {
  margin: 0 auto;
  width: min(760px, 100%);
  font-weight: 400;
}

.schriftzug {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 499;
  /* das ganze Wort kommt beim Laden von oben herein und pendelt kurz links-rechts aus */
  animation: hereinrutschen 1.3s ease-out both;
  animation-play-state: paused;            /* startet, wenn alle Buchstaben geladen sind (siehe faden.js) */
}

.schriftzug.geladen { animation-play-state: running; }

/* neun einzelne Buchstaben, jeder an seiner Stelle im Wort; sie fallen beim Laden nacheinander herunter */
.schriftzug img {
  position: absolute;
  top: 0;
  left: var(--l);
  width: var(--w);
  height: 100%;
  transform: rotate(var(--dreh, 0deg));   /* kleine zufällige Drehung, bleibt stehen */
  /* nach dem Hereinrutschen wackelt jeder Buchstabe kurz und bleibt dann in seiner Drehung stehen */
  animation: wackeln-buchstabe 1.1s ease-out both;
  animation-delay: calc(0.5s + var(--n) * 40ms);
  animation-play-state: paused;
}

.schriftzug.geladen img { animation-play-state: running; }

@keyframes wackeln-buchstabe {
  0%   { transform: rotate(var(--dreh, 0deg)); }
  20%  { transform: rotate(calc(var(--dreh, 0deg) + 2.5deg)); }
  45%  { transform: rotate(calc(var(--dreh, 0deg) - 2deg)); }
  70%  { transform: rotate(calc(var(--dreh, 0deg) + 1deg)); }
  88%  { transform: rotate(calc(var(--dreh, 0deg) - 0.4deg)); }
  100% { transform: rotate(var(--dreh, 0deg)); }
}

@keyframes hereinrutschen {
  0%   { transform: translateY(-120px); opacity: 0; }
  40%  { transform: translateY(0) translateX(0); opacity: 1; animation-timing-function: ease-in-out; }
  55%  { transform: translateX(5px); }
  70%  { transform: translateX(-4px); }
  83%  { transform: translateX(2px); }
  93%  { transform: translateX(-1px); }
  100% { transform: translateX(0); opacity: 1; }
}

.kopf-name {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinte);
}

/* ---------- Foto: endet beim letzten Strich ---------- */

.foto {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* immer das ganze Foto: so breit wie das Fenster, aber nie höher als das Fenster.
   Auf breiten, niedrigen Fenstern wird es dadurch schmaler und steht mittig. */
.foto img {
  width: min(100%, calc(100vh * 1206 / 1160));
  height: auto;
}

/* ---------- Bühne: Faden, Knäuel, Anhänger, Dose ---------- */

.buehne {
  position: relative;
  padding: 0 var(--rand) 120px 120px;   /* links 120 px: Zone fürs Knäuel, dort liegt nie Inhalt */
}

.faden,
.faden-vorne {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.faden { z-index: 1; }
.faden-vorne { z-index: 4; }

.faden path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#faden-farbe path { stroke-width: 3.4; }

.faden-schatten {
  stroke: rgba(80, 60, 35, 0.14);
  stroke-width: 3.8;
  transform: translate(1.2px, 2px);
}

/* Öse */
.loch-grund { fill: var(--grund); }
.oese-ring { fill: none; stroke: #e2dccf; stroke-width: 5; }
.oese-kante { fill: none; stroke: rgba(40, 30, 20, 0.28); stroke-width: 0.9; }

.knaeuel {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--knaeuel, 150px);
  height: var(--knaeuel, 150px);
  margin: calc(var(--knaeuel, 150px) / -2) 0 0 calc(var(--knaeuel, 150px) / -2);
  z-index: 2;
  pointer-events: none;
  filter: brightness(1.07) saturate(0.82) drop-shadow(0 10px 12px rgba(70, 50, 25, 0.22));
  will-change: transform;
}

.name {
  position: relative;
  max-width: var(--spalte);
  margin: 0 auto;
  height: clamp(300px, 30vw, 340px);
}

.intro {
  position: relative;
  max-width: var(--spalte);
  margin: 0 auto;
  min-height: 220px;
}

/* ---------- Anhänger ---------- */

/* der Schatten liegt auf einer Hülle, weil Maske und Zuschnitt der Karte ihn sonst abschneiden */
.haenger {
  width: min(390px, 100%);
  filter: drop-shadow(0 5px 9px rgba(70, 55, 20, 0.2));
}

.anhaenger-liste {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--spalte);
  position: relative;
  z-index: 3;
}

.anhaenger {
  --loch: 30px;          /* Lochmitte, Abstand zur Ecke */
  --neigung: 2.5deg;
  --schrift: var(--tinte);
  display: flex;
  justify-content: flex-start;
  padding-left: 8%;
  margin-top: clamp(110px, 16vh, 150px);
}

.anhaenger:first-child { margin-top: 90px; }

/* abwechselnd links, mittig, rechts */
.anhaenger[data-pos="mitte"]  { justify-content: center; padding: 0; margin-top: clamp(120px, 18vh, 170px); }
.anhaenger[data-pos="rechts"] { justify-content: flex-end; padding-left: 0; padding-right: 4%; margin-top: clamp(120px, 18vh, 170px); }
.anhaenger[data-pos="mitte"]:first-child, .anhaenger[data-pos="rechts"]:first-child { margin-top: 90px; }

.anhaenger[data-seite="rechts"] {
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 9%;
  --neigung: -2deg;
}

.anhaenger--nach-knoten { margin-top: clamp(140px, 20vh, 190px); }

.karte {
  appearance: none;
  border: 0;
  font: inherit;
  color: var(--schrift);
  text-align: left;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 150px;
  padding: 22px 40px 22px 132px;
  background: var(--farbe);
  /* abgeschrägte Ecke auf der Lochseite */
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);
  /* Loch */
  -webkit-mask: radial-gradient(circle 7px at var(--loch) var(--loch), transparent 96%, #000 100%);
          mask: radial-gradient(circle 7px at var(--loch) var(--loch), transparent 96%, #000 100%);
  transform-origin: var(--loch) var(--loch);
  rotate: var(--neigung);
}

.anhaenger[data-seite="rechts"] .karte {
  padding: 22px 132px 22px 40px;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  -webkit-mask: radial-gradient(circle 7px at calc(100% - var(--loch)) var(--loch), transparent 96%, #000 100%);
          mask: radial-gradient(circle 7px at calc(100% - var(--loch)) var(--loch), transparent 96%, #000 100%);
  transform-origin: calc(100% - var(--loch)) var(--loch);
}

.karte-text { display: block; text-align: center; text-wrap: pretty; }

/* wie auf einem Kofferanhänger: zuerst das Ziel, groß */
.karte-ziel {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.karte-was {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.karte:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--tinte);
}

@media (hover: hover) {
  .karte:hover { animation: schwingen 1.1s ease-out; }
}

@keyframes schwingen {
  0%   { rotate: var(--neigung); }
  25%  { rotate: calc(var(--neigung) + 3.5deg); }
  55%  { rotate: calc(var(--neigung) - 2deg); }
  80%  { rotate: calc(var(--neigung) + 0.8deg); }
  100% { rotate: var(--neigung); }
}

/* ---------- Zeichen am Loch ---------- */

/* Nullpunkt des Zeichens ist die Lochmitte */
.zeichen {
  position: absolute;
  left: calc(var(--loch) + var(--zeichen-abstand, 52px));
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;     /* wackelt um die Lochmitte */
}

.anhaenger[data-seite="rechts"] .zeichen {
  left: auto;
  right: calc(var(--loch) + var(--zeichen-abstand, 52px));
}

.zeichen > * {
  position: absolute;
  overflow: visible;
  opacity: 0;
}

.erreicht .zeichen > * { opacity: 1; }

/* Büroklammer: unter das Loch geheftet */
.zeichen-klammer {
  width: 18px;
  left: -9px;
  top: -25px;
}
.zeichen-klammer path { fill: none; stroke: #1e1c1a; stroke-width: 5; stroke-linecap: round; }
.erreicht .zeichen-klammer { animation: heften 0.5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes heften {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}

/* Welle, blau wie im Original */
.zeichen-welle {
  width: 52px;
  height: 52px;
  max-width: none;
  left: -26px;
  top: -26px;
}
.erreicht .zeichen-welle { animation: wirbeln 1.1s ease-out both; }
@keyframes wirbeln {
  from { opacity: 0; transform: rotate(-140deg) scale(0.5); }
  to   { opacity: 1; transform: none; }
}

/* Berg: weiß, schwarz umrandet, schwingt am Loch herein */
.zeichen-berg {
  width: 52px;
  left: -26px;
  top: -16px;
  transform-origin: 50% -14px;
}
.zeichen-berg path { fill: #fff; stroke: #1e1c1a; stroke-width: 3; stroke-linejoin: round; }
.erreicht .zeichen-berg { animation: hereinschwingen 1.6s ease-out both; }
@keyframes hereinschwingen {
  0%   { opacity: 0; transform: rotate(-80deg); }
  12%  { opacity: 1; }
  35%  { transform: rotate(22deg); }
  55%  { transform: rotate(-11deg); }
  72%  { transform: rotate(5deg); }
  86%  { transform: rotate(-2deg); }
  100% { opacity: 1; transform: rotate(0); }
}

/* Dach: legt sich über das Loch */
.zeichen-dach {
  width: 54px;
  left: -27px;
  top: -19px;
}
.zeichen-dach path { fill: none; stroke: #1e1c1a; stroke-width: 9; stroke-linejoin: miter; }
.zeichen-dach .dach-schlot { fill: #1e1c1a; stroke: none; }
.erreicht .zeichen-dach { animation: aufsetzen 0.6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes aufsetzen {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: none; }
}

/* Maßband: baut sich vom kleinsten zum größten Strich auf */
.zeichen-massband {
  width: 58px;
  height: 58px;
  left: -29px;
  top: -29px;
  opacity: 1 !important;
}
.zeichen-massband line { stroke: #1e1c1a; stroke-linecap: butt; opacity: 0; }
.erreicht .zeichen-massband line {
  animation: strich 0.25s ease-out both;
  animation-delay: calc(var(--i) * 28ms);
}
@keyframes strich {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Pfeil: klappt vom Loch herunter wie ein Zeiger, der nicht hält */
.zeichen-pfeil {
  --r: 1;
  width: 50px;
  height: 20px;
  left: 13px;
  top: -48px;
  transform-origin: -13px 50%;
}
.zeichen-pfeil path { fill: none; stroke: #1e1c1a; stroke-width: 3.2; stroke-linejoin: round; }
.anhaenger[data-seite="rechts"] .zeichen-pfeil {
  left: auto;
  right: 13px;
  transform-origin: calc(100% + 13px) 50%;
  --r: -1;
}
.anhaenger[data-seite="rechts"] .zeichen-pfeil path { transform: scale(-1, 1); transform-origin: center; transform-box: fill-box; }
.erreicht .zeichen-pfeil { animation: zeiger 1.5s cubic-bezier(.5, 0, .7, .4) both; }
@keyframes zeiger {
  0%   { opacity: 1; transform: rotate(0); }
  38%  { transform: rotate(calc(var(--r) * 98deg)); animation-timing-function: ease-out; }
  58%  { transform: rotate(calc(var(--r) * 78deg)); animation-timing-function: ease-in-out; }
  76%  { transform: rotate(calc(var(--r) * 94deg)); }
  90%  { transform: rotate(calc(var(--r) * 87deg)); }
  100% { opacity: 1; transform: rotate(calc(var(--r) * 90deg)); }
}

/* ---------- Hände und Kontakt ---------- */

.kontakt {
  position: relative;
  z-index: 2;
  max-width: var(--spalte);
  margin: clamp(200px, 30vh, 300px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.telefon {
  width: min(190px, 60%);
  height: auto;
  /* wackelt um den Stecker */
  transform-origin: 85% 100%;
}

/* der Hörer wackelt kurz, wenn die Schnur ankommt */
.angekommen .telefon { animation: hoerer-wackeln 1.6s ease-out both; }
@keyframes hoerer-wackeln {
  0%   { rotate: 0deg; }
  14%  { rotate: 7deg; }
  32%  { rotate: -6deg; }
  50%  { rotate: 4deg; }
  66%  { rotate: -2.5deg; }
  82%  { rotate: 1.2deg; }
  100% { rotate: 0deg; }
}

.kontakt-daten {
  margin: 104px 0 0;
  display: grid;
  gap: 6px;
  justify-items: center;
  font-family: var(--mono);
  font-size: 15px;
}

.kontakt-label {
  display: inline-block;
  min-width: 5.5em;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.kontakt-daten a {
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 6px 0 1px;
}
.kontakt-daten a:hover { border-bottom-width: 2px; }

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

@media (max-width: 699px) {
  :root { --rand: 16px; }

  .buehne { padding-left: 40px; padding-right: 16px; }   /* Zone fürs Knäuel: 40 px */

  .anhaenger,
  .anhaenger[data-seite="rechts"],
  .anhaenger[data-pos="mitte"],
  .anhaenger[data-pos="rechts"] {
    justify-content: flex-start;
    padding: 0;
    --neigung: 1.5deg;
  }

  .anhaenger, .anhaenger[data-pos] { margin-top: 120px; }
  .anhaenger:first-child, .anhaenger[data-pos]:first-child { margin-top: 50px; }
  .anhaenger--nach-knoten { margin-top: 150px; }

  .haenger { width: 100%; }

  .karte,
  .anhaenger[data-seite="rechts"] .karte {
    --loch: 26px;
    width: 100%;
    min-height: 128px;
    padding: 18px 16px 18px 98px;
    --zeichen-abstand: 36px;
    clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px);
    -webkit-mask: radial-gradient(circle 7px at var(--loch) var(--loch), transparent 96%, #000 100%);
            mask: radial-gradient(circle 7px at var(--loch) var(--loch), transparent 96%, #000 100%);
    transform-origin: var(--loch) var(--loch);
  }

  .anhaenger[data-seite="rechts"] .zeichen { left: calc(var(--loch) + var(--zeichen-abstand)); right: auto; }
  .anhaenger[data-seite="rechts"] .zeichen-pfeil {
    left: 13px;
    right: auto;
    transform-origin: -13px 50%;
    --r: 1;
  }
  .anhaenger[data-seite="rechts"] .zeichen-pfeil path { transform: none; }

  .karte-ziel { font-size: 20px; }
  .karte-was { font-size: 11px; }

  .name { height: 190px; }
  .intro { min-height: 200px; }
  .kontakt { margin-top: 160px; align-items: flex-start; padding-left: 64px; }   /* rechts von der Linie */
  .telefon { width: 150px; }
  .kontakt-daten { justify-items: start; font-size: 14px; }
}

/* ---------- Ruhig ---------- */

@media (prefers-reduced-motion: reduce) {
  .karte:hover { animation: none; }
  .zeichen > *,
  .zeichen-massband line { animation: none !important; opacity: 1 !important; }
}

/* ---------- Wackeln ---------- */

@keyframes wackeln {
  0%   { rotate: 0deg; }
  20%  { rotate: 5deg; }
  45%  { rotate: -4deg; }
  65%  { rotate: 2.5deg; }
  82%  { rotate: -1deg; }
  100% { rotate: 0deg; }
}

@keyframes wackeln-lang {
  0%   { rotate: 0deg; }
  10%  { rotate: 6deg; }
  24%  { rotate: -5deg; }
  38%  { rotate: 3.8deg; }
  52%  { rotate: -2.8deg; }
  66%  { rotate: 1.8deg; }
  80%  { rotate: -1deg; }
  91%  { rotate: 0.4deg; }
  100% { rotate: 0deg; }
}
@keyframes wackeln-lang-2 { from { rotate: 0deg; } 10% { rotate: 6deg; } 24% { rotate: -5deg; } 38% { rotate: 3.8deg; } 52% { rotate: -2.8deg; } 66% { rotate: 1.8deg; } 80% { rotate: -1deg; } 91% { rotate: 0.4deg; } to { rotate: 0deg; } }

/* Klammer: wackelt bei Berührung */
@media (hover: hover) {
  .anhaenger[data-zeichen="klammer"] .karte:hover .zeichen { animation: wackeln 0.9s ease-out; }
}
.anhaenger[data-zeichen="klammer"].tipp .zeichen { animation: wackeln 0.9s ease-out; }

/* Dach: wackelt beim Ankommen und beim ersten Antippen, bis es stillsteht */
.anhaenger[data-zeichen="dach"].erreicht .zeichen { animation: wackeln-lang 2s ease-out 0.5s both; }
.anhaenger[data-zeichen="dach"].erreicht.getippt .zeichen { animation: wackeln-lang-2 2s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .schriftzug,
  .schriftzug img,
  .telefon,
  .zeichen { animation: none !important; }
}

/* ---------- Aufgeklappte Anhänger ---------- */

.anhaenger { flex-wrap: wrap; }

.projekt {
  flex-basis: 100%;
  /* mittig, mit so viel Rand, dass der Faden außen vorbeiläuft */
  max-width: min(760px, 100% - 120px);
  margin: 36px auto 0;
  padding-top: 28px;
  border-top: 2px solid var(--farbe);
  max-width: 760px;
}

.anhaenger.offen .karte { rotate: 0deg; }

.projekt-kicker {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.projekt-titel {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.projekt-rahmen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
  margin: 0 0 28px;
  padding: 18px 0;
  border-top: 1px solid rgba(42, 38, 34, 0.18);
  border-bottom: 1px solid rgba(42, 38, 34, 0.18);
  font-size: 14px;
  line-height: 1.5;
}

.projekt-rahmen dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 4px;
}

.projekt-rahmen dd { margin: 0; }

.projekt-text p {
  margin: 0 0 1em;
  max-width: 62ch;
}

.projekt-bild {
  margin: 28px 0 0;
}

.projekt-bild img { width: 100%; }

.projekt-bild figcaption,
.projekt-video figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinte-leise);
}

.projekt-video { margin: 0 0 28px; }
.projekt-video video { display: block; width: 100%; height: auto; background: #1b2a33; }

.projekt-zweispaltig {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: start;
  margin-top: 8px;
}

.projekt-auszug {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
}

.projekt-auszug .projekt-kicker { font-style: normal; }
.auszug-titel { margin: 0 0 14px; font-size: 21px; line-height: 1.3; }
.projekt-auszug p { margin: 0 0 1em; }

.projekt-bild--seite { margin-top: 0; border: 1px solid rgba(42, 38, 34, 0.12); background: #fff; }
.projekt-bild--seite figcaption { padding: 0 10px 10px; }

.projekt-link {
  margin: 24px 0 0;
  font-size: 15px;
  max-width: 62ch;
}

/* der Link steht als Ganzes in einer eigenen Zeile */
.projekt-link a {
  display: block;
  width: fit-content;
  margin-top: 4px;
}

.projekt-link a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--tinte);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 699px) {
  .projekt { margin-top: 24px; padding-top: 20px; max-width: none; margin-left: 0; margin-right: 0; width: 100%; }   /* Inhalt ab 40 px, der Faden läuft außen vorbei */
  .projekt-rahmen { grid-template-columns: 1fr; gap: 14px; }
  .projekt-zweispaltig { grid-template-columns: 1fr; gap: 24px; }
  .projekt-auszug { font-size: 17px; }
}

/* ---------- Projekt 3: Zeitleiste, Kennzahlen, Vorschläge ---------- */

.zeitleiste {
  list-style: none;
  margin: 8px 0 36px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 16px;
  position: relative;
  font-size: 14px;
  line-height: 1.45;
}

.zeitleiste::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  background: var(--farbe);
}

.zeitleiste li {
  position: relative;
  padding-top: 24px;
}

.zeitleiste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--farbe);
  box-shadow: 0 0 0 2px var(--grund), 0 0 0 3.5px var(--tinte);
}

.zeit-wann,
.zeit-was,
.zeit-text { display: block; }

.zeit-wann {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.zeit-was {
  font-weight: 400;
  font-size: 16px;
  margin: 2px 0 4px;
}

.kennzahlen,
.vorschlaege {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
  margin: 0 0 36px;
  font-size: 15px;
  line-height: 1.5;
}

.kennzahlen dt {
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.kennzahlen .zahl {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 20px);
  letter-spacing: -0.025em;
}

.vorschlaege div {
  padding-top: 12px;
  border-top: 1px solid rgba(42, 38, 34, 0.18);
}

.vorschlaege dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 6px;
}

.kennzahlen dd,
.vorschlaege dd { margin: 0; }

/* ---------- Projekt 4: zwei Aussendungen nebeneinander ---------- */

.aussendungen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(42, 38, 34, 0.18);
}

.aussendung {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
}

.aussendung h4 {
  margin: 0 0 12px;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
}

.aussendung p { margin: 0; }
.aussendung .projekt-kicker { font-style: normal; }

/* ---------- Projekte 5 und 6: Bildraster, Radiospot ---------- */

.bildraster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0;
}

/* nie beschneiden: jedes Bild liegt vollständig in einem 3:2-Feld in einer helleren Variante der Projektfarbe */
.bildraster img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  background: var(--farbe);
  background: color-mix(in srgb, var(--farbe) 30%, #fff);
}

/* ÖBB: Felder im Seitengelb statt in hellem Rot */
#projekt-6 .bildraster img { background: var(--grund); }

.radiospot {
  padding-top: 24px;
  border-top: 1px solid rgba(42, 38, 34, 0.18);
}

.spot {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 0 18px;
}

.skript {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 20px;
  max-width: 62ch;
}

.skript div { display: contents; }

.skript dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding-top: 5px;
}

.skript dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
}

.skript-stimme { font-style: italic; }

.projekt-hinweis {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinte-leise);
}

@media (max-width: 699px) {
  .zeitleiste { grid-template-columns: 1fr; gap: 16px; }
  .zeitleiste::before { left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .zeitleiste li { padding: 0 0 0 26px; }
  .zeitleiste li::before { top: 4px; }
  .kennzahlen, .vorschlaege, .aussendungen, .bildraster { grid-template-columns: 1fr; }
  .skript { grid-template-columns: 1fr; gap: 4px 0; }
  .skript dt { padding-top: 10px; }
}

/* ---------- Fußzeile: Impressum und Datenschutz ---------- */

.fuss {
  padding: 0 var(--rand) 48px;
}

.fuss-knoepfe {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.fuss-knopf {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a5648;
}

.fuss-knopf[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 4px; }
.fuss-knopf:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }

/* klappt mit animierter Höhe auf */
.fuss-text {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  max-width: 640px;
  margin: 0 auto;
}

.fuss-text.offen { grid-template-rows: 1fr; }

.fuss-innen {
  min-height: 0;
  overflow: hidden;
  text-align: left;
  font-family: "Instrument Sans", var(--grotesk);
  font-size: 14px;
  line-height: 1.5;
  color: #1c1b18;
}

.fuss-titel {
  margin: 28px 0 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.fuss-innen p { margin: 0 0 1em; }
.fuss-innen strong { font-weight: 600; }
.fuss-innen a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .fuss-text { transition: none; }
}