/* ============================================================================
   GESTALTUNG heyanja.de
   ----------------------------------------------------------------------------
   Alle Werte stammen aus der Originalseite (im Browser ausgemessen).
   Ganz oben stehen die Grundwerte. Wer die aendert, aendert die ganze Seite.

   DREI REGELN, die ueberall gelten:
     - Ecken: Bedienelemente sind Pillen (--pille), Flaechen bekommen alle
       denselben weichen Radius (--radius). Rund sind nur die Pfeilknoepfe.
     - Mausueber: gruenes Glas - heller Verlauf, gruene Kante, weicher Schein.
     - Schriftgroessen kommen ausschliesslich aus den Werten --t-* oben.
   ============================================================================ */

/* ----------------------------------------------------------------- Schrift
   Plus Jakarta Sans liegt im Ordner assets/fonts und wird vom eigenen Server
   ausgeliefert. Dadurch besteht keine Verbindung zu Google - wichtig fuer den
   Datenschutz. "font-display: swap" sorgt dafuer, dass der Text sofort
   sichtbar ist und die Schrift nachgeladen wird.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500;
  src: url("../assets/fonts/plus-jakarta-sans-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600;
  src: url("../assets/fonts/plus-jakarta-sans-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700;
  src: url("../assets/fonts/plus-jakarta-sans-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800;
  src: url("../assets/fonts/plus-jakarta-sans-800.woff2") format("woff2"); font-display: swap; }

:root {
  /* --- Farben (aus dem Original) ----------------------------------------- */
  --hintergrund: #000000;
  --schrift:     #f0f0f0;   /* kein reines Weiss */
  --leise:       #8f8f8f;   /* graue Nebentexte und Label */
  --akzent:      #c8f000;   /* das Neongruen */
  --akzent-hell: #eaff9c;   /* helle Variante fuer den Verlauf */
  --linie:       #2b2b2b;   /* feine Trennlinien */
  --karte:       #131313;   /* Karten und Knopfflaechen */
  --karte-rand:  #232323;   /* Kontur im Ruhezustand */

  /* --- Schrift ----------------------------------------------------------- */
  --font: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;

  /* --- Masse ------------------------------------------------------------- */
  --breite:  min(1350px, 84.5vw);
  --abstand: clamp(56px, 5.85vw, 100px);
  --fuge:    10px;
  /* Zwei Radien, konsequent: Bedienelemente sind Pillen, Flaechen bekommen
     denselben weichen Radius. */
  --radius:  16px;          /* Bilder, Kacheln, Karten, Panels */
  --pille:   999px;         /* Knoepfe, Dropdowns, Chips */
  --kopf-hoehe: 66px;       /* Hoehe der festen Kopfzeile */

  /* --- Schriftgroessen (bei 1710 px Fensterbreite wie im Original) -------- */
  --t-riesig: clamp(38px, 5.26vw, 90px);
  --t-gross:  clamp(30px, 2.93vw, 50px);
  --t-mittel: clamp(19px, 1.61vw, 27.5px);
  --t-klein:  clamp(17px, 1.46vw, 25px);
  --t-basis:  clamp(15px, 1.05vw, 18px);
  --t-karte:  clamp(19px, 1.52vw, 26px);
  --t-punkt:  clamp(17px, 1.29vw, 22px);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0; background: var(--hintergrund); color: var(--schrift);
  font-family: var(--font); font-size: var(--t-basis); font-weight: 500; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  /* "clip" statt "hidden": verhindert waagerechtes Scrollen, ohne dass die
     mitlaufende Filterleiste ihre Verankerung verliert. */
  overflow-x: clip;
}
body.starr { overflow: hidden; }

[hidden] { display: none !important; }   /* gilt auch fuer Knoepfe mit eigenem display */

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.26; letter-spacing: -.01em; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: var(--radius); }

.gruen { color: var(--akzent); }

/* Ueberschrift mit Farbverlauf von Weiss nach Gruen.
   Wo das Gruen ankommt, steuert --stopp (wird von app.js gesetzt). */
.verlauf {
  display: inline-block;
  /* Das Weiss haelt bis etwa zur Haelfte des Wegs, erst danach geht es
     ins Gruene ueber - dadurch wirkt die Zeile heller. */
  background-image: linear-gradient(100deg,
      var(--akzent-hell) 0%,
      var(--akzent-hell) calc(var(--stopp, 100%) * 0.42),
      var(--akzent) var(--stopp, 100%));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .06em;
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 300;
        background: var(--akzent); color: #000; padding: 12px 20px; font-weight: 700; }
.skip:focus { left: 0; }

.mitte { width: var(--breite); margin-inline: auto; }

/* ---------------------------------------------------------------- Auftritt
   Elemente steigen beim Hereinscrollen leise auf und blenden ein. Der
   Versatz (--verzug) laesst Gruppen nacheinander erscheinen. Wer in den
   Systemeinstellungen weniger Bewegung eingestellt hat, bekommt sie sofort. */
.auftritt {
  opacity: 0; transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22,.7,.25,1),
              transform .75s cubic-bezier(.22,.7,.25,1);
  transition-delay: var(--verzug, 0ms);
  will-change: opacity, transform;
}
.auftritt.da { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .auftritt { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   BAUSTEINE, die ueberall gleich aussehen
   ============================================================================ */

/* --- Glas-Optik -----------------------------------------------------------
   Knoepfe wirken wie mattiertes Glas: ein heller Verlauf von oben nach unten,
   eine feine Glanzkante innen und ein weichgezeichneter Hintergrund. Beim
   Draufzeigen wechselt das Glas ins Gruene. */
.glas {
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 12px rgba(0,0,0,.35);
}
.glas-gruen {
  background: linear-gradient(180deg, rgba(200,240,0,.26), rgba(200,240,0,.07));
  border-color: rgba(200,240,0,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 20px rgba(200,240,0,.20);
}

/* Knopf: Erfahrungen, Downloads, "Mehr ansehen", Filter - alle identisch */
.knopf {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: var(--pille);
  font-size: var(--t-basis); font-weight: 500; color: var(--schrift);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 12px rgba(0,0,0,.35);
  transition: background .25s, border-color .25s, box-shadow .25s, transform .2s;
}
.knopf:hover, .knopf:focus-visible {
  background: linear-gradient(180deg, rgba(200,240,0,.26), rgba(200,240,0,.07));
  border-color: rgba(200,240,0,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 20px rgba(200,240,0,.20);
}
.knopf img, .knopf svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* Knopf, bei dem beim Draufzeigen ein gruener Pfeil herauswaechst.
   Im Ruhezustand nimmt der Pfeil keinen Platz ein - der negative Aussenabstand
   hebt die Knopf-Fuge auf. Dadurch schiebt sich der Knopf beim Draufzeigen
   auf, und die Knoepfe daneben ruecken nach. */
.knopf-pfeil::after {
  content: "→"; color: var(--akzent);
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  margin-left: -9px;
  transition: max-width .28s cubic-bezier(.3,.1,.2,1), margin-left .28s cubic-bezier(.3,.1,.2,1), opacity .2s;
}
.knopf-pfeil:hover::after, .knopf-pfeil:focus-visible::after {
  max-width: 1.4em; margin-left: 0; opacity: 1;
}

/* Download-Symbol: der Pfeil im gefalteten Blatt wandert beim Draufzeigen
   nach unten, wie bei einem Download. */
.icon-download { fill: none; stroke: var(--akzent); stroke-width: 1.5;
                 stroke-linecap: round; stroke-linejoin: round; }
.icon-download .pfeil { transition: transform .2s; }
.knopf:hover .icon-download .pfeil,
.knopf:focus-visible .icon-download .pfeil,
.station-zeugnis:hover .icon-download .pfeil { animation: herunterladen .95s ease-in-out infinite; }

@keyframes herunterladen {
  0%   { transform: translateY(-2.2px); opacity: 0; }
  25%  { opacity: 1; }
  70%  { transform: translateY(2.4px); opacity: 1; }
  100% { transform: translateY(2.4px); opacity: 0; }
}

/* Runder Knopf: alle Pfeile - ebenfalls in Glas-Optik */
.rund {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 12px rgba(0,0,0,.35);
  transition: background .25s, border-color .25s, box-shadow .25s, opacity .2s;
}
.rund:hover, .rund:focus-visible {
  background: linear-gradient(180deg, rgba(200,240,0,.26), rgba(200,240,0,.07));
  border-color: rgba(200,240,0,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 20px rgba(200,240,0,.20);
}
.rund svg { width: 22px; height: 22px; fill: none; stroke: var(--schrift);
            stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rund[disabled] { opacity: .3; pointer-events: none; }
.rund-klein { width: 40px; height: 40px; }
.rund-klein svg { width: 19px; height: 19px; }

/* Runde Knoepfe, die auf einem Bild liegen: leicht grau und durchscheinend,
   damit sie auf hellen wie dunklen Bildern lesbar bleiben. */
.auf-bild { background: rgba(40, 40, 40, .55); border-color: rgba(255, 255, 255, .28);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.auf-bild:hover, .auf-bild:focus-visible { background: rgba(40, 40, 40, .8); border-color: var(--akzent); }

/* ---------------------------------------------------------------- Kopfzeile */
/* Ganz oben unsichtbar, beim Scrollen legt sich mattiertes Glas darunter -
   der Seiteninhalt scheint weichgezeichnet hindurch. */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 16px 0;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s, backdrop-filter .35s, border-color .35s;
}
.kopf.fest {
  background: rgba(22, 22, 22, .55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: rgba(255,255,255,.09);
}
.kopf .mitte { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo { font-size: clamp(15px, 1.05vw, 18px); font-weight: 700; letter-spacing: -.01em; }
.logo:hover { opacity: .8; }

/* Waagerechtes Menue - nur auf groesseren Bildschirmen */
.nav-oben { display: flex; gap: clamp(20px, 2.2vw, 38px); }
.nav-oben a {
  position: relative; font-size: var(--t-basis); font-weight: 500; color: var(--schrift);
  padding-bottom: 3px; transition: color .2s;
}
.nav-oben a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--akzent); transition: right .28s cubic-bezier(.3,.1,.2,1);
}
.nav-oben a:hover, .nav-oben a.aktiv { color: var(--akzent); }
.nav-oben a:hover::after, .nav-oben a.aktiv::after { right: 0; }

/* Logo links, alles Uebrige rechts */
.kopf-rechts { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }

/* Sprachwahl: zwei kleine Knoepfe, die gewaehlte Sprache leuchtet gruen */
.sprachwahl {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--linie); border-radius: var(--pille);
  background: rgba(255,255,255,.04);
}
.sprachwahl button {
  padding: 4px 11px; border: 0; border-radius: var(--pille);
  background: transparent; color: var(--leise);
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; transition: color .2s, background .25s;
}
.sprachwahl button:hover { color: var(--schrift); }
.sprachwahl button.aktiv { background: var(--akzent); color: #0d0d0d; }

.burger { display: none; width: 34px; height: 26px; padding: 0; align-content: center; gap: 7px; }
.burger span {
  display: block; height: 2px; width: 100%; margin-left: auto;
  background: var(--schrift); border-radius: 2px;
  transition: background .2s, width .3s cubic-bezier(.3,.1,.2,1),
              transform .35s cubic-bezier(.3,.1,.2,1), opacity .2s;
}
/* Beim Draufzeigen faechern die Striche leicht auf */
.burger:hover span { background: var(--akzent); }
.burger:hover span:nth-child(1) { width: 70%; }
.burger:hover span:nth-child(3) { width: 85%; }

/* Geoeffnet wird daraus ein Kreuz */
.burger[aria-expanded="true"] span { width: 100%; background: var(--akzent); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Menue, das von rechts hereinfaehrt */
.menue { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.menue.offen { visibility: visible; }
.menue-schleier { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .35s; }
.menue.offen .menue-schleier { opacity: 1; }

.menue-tafel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(288px, 78vw);
  background: #4b4b4b; padding: 56px 34px; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .38s cubic-bezier(.3,.1,.2,1);
}
.menue.offen .menue-tafel { transform: none; }
.menue-zu { position: absolute; top: 14px; right: 18px; background: none; border-color: transparent; }
.menue-zu svg { stroke: #d8d8d8; }
.menue-tafel a { font-size: clamp(17px, 1.17vw, 20px); font-weight: 500; color: #d8d8d8;
                 padding: 12px 0; transition: color .2s; }
.menue-tafel a:hover, .menue-tafel a.aktiv { color: var(--akzent); }

/* ---------------------------------------------------------------- Abschnitte */
/* Zwischen den Bereichen keine Linien - nur unter den Labels. */
.block { padding: var(--abstand) 0; }

/* Sprungziele halten Abstand zur festen Kopfzeile, damit beim Klick im
   Menue nicht die erste Zeile darunter verschwindet. */
section[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 10px); }

.label { font-size: var(--t-basis); font-weight: 500; color: var(--leise);
         margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.gross { font-size: var(--t-gross); margin: 26px 0 0; }
.unterzeile { font-size: var(--t-punkt); font-weight: 600; margin: 14px 0 0; }

/* ---------------------------------------------------------------- Startbereich */
.start { padding: clamp(96px, 8vw, 130px) 0 0; }
/* Das Foto bekommt mehr Platz und rueckt nach links an den Text heran. */
.start .mitte { display: grid; grid-template-columns: minmax(0, 1fr) 50%;
                gap: clamp(12px, 1.6vw, 30px); align-items: end;
                min-height: clamp(440px, 36vw, 640px); }
.start-text { padding-bottom: clamp(40px, 6vw, 96px); }
.start h1 { font-size: var(--t-riesig); line-height: 1.3; letter-spacing: -.02em; }
/* Die Begruessung bleibt immer auf einer Zeile */
.start h1 .verlauf { white-space: nowrap; }
.start-unterzeile { font-size: var(--t-mittel); font-weight: 600; line-height: 1.3;
                    margin: 18px 0 0; max-width: 20ch; }

/* Gleiche Schriftgroesse wie die Zeile darueber, deshalb auch etwas groesser */
.portfolio-link { margin-top: clamp(22px, 2.6vw, 36px); color: var(--akzent); font-weight: 700;
                  font-size: var(--t-mittel); padding: 13px 24px; }

.start-dateien { display: flex; gap: 12px; margin-top: clamp(20px, 2.2vw, 30px); flex-wrap: wrap; }

/* groesser als die Spalte und nach links gezogen, damit es am Text entlangfliesst */
.start-bild { align-self: end; }
.start-bild img { width: 118%; max-width: none; margin-left: -18%; height: auto;
                  transform: translate3d(0, var(--tiefe, 0px), 0); will-change: transform; }

/* ---------------------------------------------------------------- Faehigkeiten */
.punkte { display: grid; grid-template-columns: 1fr 1fr;
          gap: clamp(26px, 3.4vw, 58px) clamp(30px, 4.2vw, 72px);
          margin-top: clamp(38px, 4.4vw, 72px); }
.punkt { display: flex; gap: clamp(16px, 1.6vw, 28px); align-items: flex-start; }
/* Ruhig gehalten wie die Knoepfe: dunkelgraue Flaeche, hellgraue Kontur,
   kein Mausueber-Effekt. */
.punkt-icon {
  flex: 0 0 auto; width: clamp(62px, 5.6vw, 96px); aspect-ratio: 1;
  border-radius: var(--radius); display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 12px rgba(0,0,0,.35);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.punkt:hover .punkt-icon {
  background: linear-gradient(180deg, rgba(200,240,0,.24), rgba(200,240,0,.06));
  border-color: rgba(200,240,0,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 4px 18px rgba(200,240,0,.18);
}
.punkt-icon img { width: 46%; height: 46%; }
.punkt h3 { font-size: var(--t-punkt); font-weight: 700; color: var(--akzent); line-height: 1.3; }
.punkt p { margin: 8px 0 0; font-size: var(--t-basis); font-weight: 500; }

.logos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.2vw, 72px);
         margin-top: clamp(46px, 5.6vw, 92px); }
.logos-titel { font-size: var(--t-basis); font-weight: 700; color: var(--akzent);
               margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }

.logo-reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
              align-items: center; gap: clamp(14px, 1.4vw, 24px); }
.logo-reihe li { position: relative; }
.logo-reihe img { height: clamp(38px, 3.3vw, 56px); width: auto; opacity: .92;
                  transition: transform .2s, opacity .2s; }
/* Jedes Logo bekommt einen eigenen Faktor, damit die Wortmarken optisch
   gleich gross wirken - sonst dominiert das sehr breite Zalando-Logo. */
.logo-reihe-breit img { height: calc(clamp(21px, 1.85vw, 30px) * var(--faktor, 1)); }
.logo-reihe li:hover img, .logo-reihe li:focus-within img { transform: translateY(-3px); opacity: 1; }

/* Sprechblase: dunkles Glas mit gruener Kante, ohne Spitze. */
.logo-name {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px); white-space: nowrap;
  pointer-events: none; z-index: 20;
  color: var(--schrift); font-size: calc(var(--t-basis) * .8); font-weight: 600;
  padding: 7px 14px; border-radius: var(--pille);
  background: linear-gradient(180deg, rgba(30,30,30,.92), rgba(18,18,18,.92));
  border: 1px solid rgba(200,240,0,.55);
  backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: 0 6px 22px rgba(0,0,0,.55);
  opacity: 0; transition: opacity .18s, transform .18s;
}
.logo-reihe li:hover .logo-name, .logo-reihe li:focus-within .logo-name { opacity: 1; transform: translateX(-50%); }

.erfahrung { margin-top: clamp(40px, 5vw, 84px); }
.schlagworte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.schlagwort[disabled] { cursor: default; color: var(--leise); }
.schlagwort[disabled]::after { content: none; }
.schlagwort[disabled]:hover { border-color: var(--karte-rand); }

/* ---------------------------------------------------------------- Werdegang */
.stationen { display: grid; grid-template-columns: 1fr 1fr;
             gap: clamp(16px, 1.6vw, 26px); margin-top: clamp(38px, 4.4vw, 72px); }

.station { perspective: 2000px; transition: transform .25s ease; cursor: pointer; }
.station:hover { transform: translateY(-5px); }

/* Beide Kartenseiten liegen im selben Rasterfeld uebereinander. Dadurch ist
   die Karte automatisch so hoch wie ihre laengere Seite - ohne Scrollbalken
   und ohne dass etwas herausragt. Karten nebeneinander gleicht das Raster an. */
.station-innen { display: grid; transform-style: preserve-3d; height: 100%;
                 transition: transform .7s cubic-bezier(.4,.15,.2,1); }
.station.gedreht .station-innen { transform: rotateY(180deg); }

.station-seite {
  grid-area: 1 / 1; min-width: 0; border-radius: var(--radius);
  padding: clamp(22px, 2vw, 34px); display: flex; flex-direction: column;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* Glas wie bei den Knoepfen */
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 14px rgba(0,0,0,.4);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.station-hinten { transform: rotateY(180deg); }
.station:hover .station-seite {
  background: linear-gradient(180deg, rgba(200,240,0,.14), rgba(200,240,0,.035));
  border-color: rgba(200,240,0,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 34px rgba(200,240,0,.14);
}

.station-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.station-zeit { font-size: var(--t-basis); font-weight: 600; }
.station-firma, .station-ort { font-size: var(--t-basis); font-weight: 500; color: var(--leise); }
.station-logo { flex: 0 0 auto; width: clamp(58px, 4.4vw, 76px); aspect-ratio: 1;
                border-radius: var(--radius); overflow: hidden; background: #fff; }
.station-logo img { width: 100%; height: 100%; object-fit: cover; }

.station h3 { font-size: var(--t-karte); font-weight: 700; white-space: pre-line;
              margin-top: clamp(24px, 2.4vw, 40px); }
.station-hook { font-size: var(--t-basis); color: var(--schrift); margin: 16px 0 0; line-height: 1.5; }

/* Die gruenen Stichworte sitzen unten, direkt ueber "Mehr dazu" -
   dadurch stehen nebeneinanderliegende Karten auf gleicher Hoehe. */
/* Umbrochen wird nur zwischen den Stichworten, nie mitten im Wort.
   Der Trennpunkt haengt am Wort davor (geschuetztes Leerzeichen), der
   Zeilenumbruch passiert danach. */
.station-tags { font-size: var(--t-basis); color: var(--akzent); line-height: 1.6;
                margin: clamp(18px, 2vw, 30px) 0 clamp(16px, 1.8vw, 26px); margin-top: auto;
                min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.station-tags .tag:not(:last-child)::after { content: "\00a0•"; color: var(--leise); }

.station-lang { font-size: var(--t-basis); line-height: 1.55;
                margin: clamp(20px, 2vw, 30px) 0 clamp(16px, 1.8vw, 26px); }

.station-fuss { margin-top: auto; padding-top: clamp(18px, 1.8vw, 26px);
                border-top: 1px solid var(--karte-rand);
                display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.station-schalter { display: inline-flex; align-items: center; gap: 7px;
                    font-size: var(--t-basis); font-weight: 500; transition: color .2s; pointer-events: none; }
.station:hover .station-schalter { color: var(--akzent); }

/* Das Plus dreht sich beim Draufzeigen ein Stueck,
   der Pfeil auf der Rueckseite schiebt sich kurz nach links. */
.zeichen { display: inline-block; transition: transform .35s cubic-bezier(.3,.1,.2,1); }
.station:hover .zeichen-plus { transform: rotate(90deg); }
.station:hover .zeichen-pfeil { animation: zurueckSchieben .65s ease-in-out; }

@keyframes zurueckSchieben {
  0%   { transform: none; }
  45%  { transform: translateX(-6px); }
  100% { transform: none; }
}
.station-zeugnis { display: inline-flex; align-items: center; gap: 8px;
                   font-size: var(--t-basis); color: var(--leise); transition: color .2s; }
.station-zeugnis .icon-download { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.station-zeugnis:hover { color: var(--akzent); }

/* ---------------------------------------------------------------- Portfolio */
.portfolio-kopf { margin-bottom: 4px; }

/* Die Filterleiste bleibt beim Scrollen unter der Kopfzeile stehen, solange
   das Portfolio zu sehen ist. Der weiche schwarze Verlauf sorgt dafuer, dass
   die Kacheln sauber darunter durchlaufen. */
/* Nur das Dropdown laeuft mit - ohne Balken dahinter. Es traegt seine
   eigene Glasflaeche und laesst die Kacheln durchscheinen. */
.filter-leiste {
  position: sticky; top: calc(var(--kopf-hoehe) + 12px); z-index: 55;
  display: flex; justify-content: flex-start;
  padding: 0; pointer-events: none;
}
.filter-leiste > * { pointer-events: auto; }

.auswahl { position: relative; width: 240px; flex: 0 0 auto; }
/* Dunkles Glas: der Knopf liegt ueber den Kacheln, hier zeichnet der
   Weichzeichner tatsaechlich etwas weich. */
.auswahl-knopf {
  width: 100%; justify-content: space-between;
  background: linear-gradient(180deg, rgba(24,24,24,.82), rgba(12,12,12,.82));
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 22px rgba(0,0,0,.5);
}
.auswahl-knopf:hover, .auswahl-knopf:focus-visible {
  background: linear-gradient(180deg, rgba(200,240,0,.20), rgba(200,240,0,.05));
  border-color: rgba(200,240,0,.55);
}
.auswahl-knopf svg { width: 17px; height: 17px; fill: none; stroke: var(--schrift);
                     stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
                     transition: transform .25s; }
.auswahl-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }

.auswahl-liste {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, rgba(30,30,30,.86), rgba(18,18,18,.86));
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.55);
}
.auswahl-liste li {
  padding: 10px 14px; border-radius: var(--pille); font-size: var(--t-basis); cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.auswahl-liste li:hover, .auswahl-liste li[aria-selected="true"] {
  color: var(--akzent);
  background: linear-gradient(180deg, rgba(200,240,0,.24), rgba(200,240,0,.06));
  border-color: rgba(200,240,0,.5);
}

/* Collage-Raster: die Arbeiten liegen untereinander, die Hoehe des Abschnitts
   richtet sich nach der Anzahl - dadurch wandert der Kontaktbereich mit. */
.galerie { position: relative; margin-top: clamp(18px, 2vw, 30px); }

.kachel {
  position: absolute; top: 0; left: 0; padding: 0; overflow: hidden;
  border-radius: var(--radius); background: #101010; cursor: pointer;
  /* feine Glaskante aussen, beim Draufzeigen legt sich gruenes Glas darueber */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 14px rgba(0,0,0,.4);
  transition: box-shadow .3s, transform .3s;
}
.kachel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: linear-gradient(180deg, rgba(200,240,0,.20), rgba(200,240,0,.04));
  box-shadow: inset 0 0 0 1px rgba(200,240,0,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.kachel:hover::after, .kachel:focus-visible::after { opacity: 1; }
.kachel:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(200,240,0,.16); }
.kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.3,.1,.2,1); }
.kachel:hover img { transform: scale(1.05); }

.kachel-schleier {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px; padding: 18px; text-align: left; opacity: 0; transition: opacity .28s;
  background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.3) 48%, transparent 76%);
}
.kachel:hover .kachel-schleier, .kachel:focus-visible .kachel-schleier { opacity: 1; }
.kachel-kategorie { font-size: .78em; font-weight: 700; color: var(--akzent);
                    letter-spacing: .1em; text-transform: uppercase; }
.kachel-titel { font-size: 1em; font-weight: 700; line-height: 1.25; }

.kachel-anzahl { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 5px;
                 padding: 5px 11px; border-radius: var(--pille); background: rgba(0,0,0,.62);
                 font-size: .78em; font-weight: 600; backdrop-filter: blur(5px); }
.kachel-anzahl svg { width: 12px; height: 12px; fill: currentColor; }

.kachel-abspielen { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px;
                    display: grid; place-items: center; border-radius: var(--radius);
                    background: rgba(255,255,255,.9); pointer-events: none; }
.kachel-abspielen svg { width: 22px; height: 22px; fill: #000; margin-left: 3px; }

.galerie-fuss { display: flex; flex-direction: column; align-items: center; gap: 14px;
                margin-top: clamp(30px, 3.4vw, 52px); }
.mehr-knopf::after { content: "↓"; color: var(--akzent); }
.mehr-knopf[hidden] { display: none; }
.treffer { margin: 0; font-size: var(--t-basis); color: var(--leise); }

/* ---------------------------------------------------------------- Kontakt */
.kontakt-name { font-size: var(--t-klein); font-weight: 700; margin-top: 26px; }
.kontakt-daten { margin: 16px 0 0; font-size: var(--t-basis); color: var(--leise); line-height: 1.7; }
.kontakt-daten a:hover { color: var(--akzent); }
.kontakt-icons { display: flex; gap: 18px; margin-top: clamp(22px, 2.4vw, 36px); }
.kontakt-icons a { width: 44px; height: 44px; display: grid; place-items: center; transition: transform .2s; }
.kontakt-icons a:hover { transform: translateY(-3px); }
.kontakt-icons svg, .kontakt-icons img { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- Fusszeile */
.fuss-zeile { display: flex; align-items: center; justify-content: space-between; gap: 24px;
              padding: clamp(24px, 2.6vw, 40px) 0; font-size: var(--t-basis); color: var(--leise); }
.fuss-schalter-gruppe { display: flex; gap: clamp(18px, 2vw, 32px); flex-wrap: wrap; }
.fuss-schalter { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.fuss-schalter:hover { color: var(--akzent); }
.fuss-schalter:hover .zeichen-plus { transform: rotate(90deg); }
.fuss-schalter[aria-expanded="true"] .zeichen-plus { transform: rotate(45deg); }
.fuss-schalter[aria-expanded="true"]:hover .zeichen-plus { transform: rotate(135deg); }

/* ------------------------------------------------------- Zurueck nach oben
   Erscheint erst, wenn man ein Stueck gescrollt hat. */
.nach-oben {
  position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 2.4vw, 34px);
  z-index: 90;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.3,.1,.2,1), background .25s, border-color .25s;
}
.nach-oben.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben svg { transition: transform .28s cubic-bezier(.3,.1,.2,1); }
.nach-oben:hover svg { transform: translateY(-3px); }

/* ---------------------------------------------------------------- Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 250; background: #000;
            display: flex; flex-direction: column; opacity: 0; transition: opacity .28s; }
.lightbox.sichtbar { opacity: 1; }
.lightbox[hidden] { display: none; }

.lb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px;
           padding: 16px max(16px, calc((100vw - var(--breite)) / 2)); flex: 0 0 auto; }
.lb-kopf .auswahl { width: min(240px, 100%); flex: 0 1 auto; min-width: 0; }

/* Schliessen: schlichtes weisses Kreuz, dreht sich beim Draufzeigen */
.lb-zu { flex: 0 0 auto; padding: 6px; font-size: var(--t-klein); line-height: 1; color: var(--schrift); }
.lb-zu .zeichen-x { display: inline-block; transition: transform .35s cubic-bezier(.3,.1,.2,1), color .2s; }
.lb-zu:hover .zeichen-x, .lb-zu:focus-visible .zeichen-x { transform: rotate(90deg); color: var(--akzent); }

/* Festes Zeilenraster: Buehne bekommt den Rest, Leiste und Text stehen
   immer. Dadurch kann kein Bildformat den Text nach unten schieben. */
.lb-koerper {
  flex: 1; min-height: 0; display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto; gap: 14px;
  padding: 0 max(16px, calc((100vw - var(--breite)) / 2)) 22px;
}

/* Die Buehne bekommt ihre Hoehe vom Raster. Der innere Bereich liegt
   darueber und kann sie deshalb nicht auseinanderdruecken. */
.lb-oben { position: relative; min-height: 0; }
.lb-buehne-innen {
  position: absolute; inset: 0; display: flex; gap: 16px;
  align-items: flex-start; justify-content: center;
}

.lb-mini { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px;
           overflow: hidden; scrollbar-width: none; }
.lb-mini::-webkit-scrollbar { display: none; }
.lb-mini:empty { display: none; }
.lb-mini button {
  flex: 0 0 auto; width: var(--mini, 64px); aspect-ratio: 1; padding: 0; border: 0;
  border-radius: var(--radius); overflow: hidden; background: #101010;
  opacity: .45; outline: 1.5px solid transparent; outline-offset: -1.5px;
  transition: opacity .2s, outline-color .2s;
}
.lb-mini button:hover { opacity: .85; outline-color: rgba(200,240,0,.5); }
.lb-mini button.aktiv { opacity: 1; outline-color: var(--akzent); }
.lb-mini img { width: 100%; height: 100%; object-fit: cover; }

/* Der Rahmen bekommt vom Skript genau die Masse des angezeigten Bildes.
   Dadurch sitzt die Lupe immer in der Bildecke und die Miniaturen genau
   an der Bildkante - egal welches Format. */
.lb-rahmen { position: relative; flex: 0 0 auto; max-width: 100%; max-height: 100%; }
.lb-medium { position: absolute; inset: 0; display: grid; place-items: center; }
.lb-medium img, .lb-medium video { width: 100%; height: 100%;
                                   object-fit: contain; border-radius: var(--radius); }
.lb-medium img { cursor: zoom-in; }

/* Lupe ohne Rahmen. Der Mischmodus laesst sie auf hellen Bildern dunkel und
   auf dunklen hell erscheinen. Beim Draufzeigen schieben die Pfeile auseinander. */
.lb-lupe {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  mix-blend-mode: difference;
}
.lb-lupe svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.9;
               stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.lb-lupe .pf-a, .lb-lupe .pf-b { transition: transform .28s cubic-bezier(.3,.1,.2,1); }
.lb-lupe:hover .pf-a, .lb-lupe:focus-visible .pf-a { transform: translate(2.2px, -2.2px); }
.lb-lupe:hover .pf-b, .lb-lupe:focus-visible .pf-b { transform: translate(-2.2px, 2.2px); }

/* Glasleiste unter dem Bild - wie eine schwebende Pille */
.lb-leiste {
  justify-self: center; display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: var(--pille);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 22px rgba(0,0,0,.45);
}
.lb-leiste-pfeil { width: 34px; height: 34px; display: grid; place-items: center;
                   border-radius: 50%; transition: background .2s; }
.lb-leiste-pfeil:hover { background: rgba(255,255,255,.12); }
.lb-leiste-pfeil svg { width: 18px; height: 18px; fill: none; stroke: var(--schrift);
                       stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Positionsanzeige: der aktive Punkt wird zum Balken */
.lb-punkte { display: flex; align-items: center; gap: 7px; padding: 0 8px; }
.lb-punkte button {
  width: 7px; height: 7px; padding: 0; border-radius: var(--pille);
  background: rgba(255,255,255,.42); transition: width .3s cubic-bezier(.3,.1,.2,1), background .2s;
}
.lb-punkte button:hover { background: rgba(255,255,255,.75); }
.lb-punkte button.aktiv { width: 30px; background: var(--schrift); }

/* Texte unter dem Bild */
/* Lange Beschreibungen scrollen, statt der Buehne die Hoehe wegzunehmen. */
.lb-info { max-width: 78ch; margin-inline: auto; text-align: center;
           max-height: min(30vh, 260px); overflow-y: auto; }
.lb-kategorie { font-size: var(--t-basis); font-weight: 700; color: var(--akzent); margin: 0 0 6px; }
.lb-titel { font-size: var(--t-karte); font-weight: 700; margin-bottom: 8px; }
.lb-text { font-size: var(--t-basis); line-height: 1.6; margin: 0; color: #cfcfcf; }
.lb-info-fuss { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.lb-zaehler { font-size: var(--t-basis); color: var(--leise); margin-left: 4px; }

/* ------------------------------------------------- Vollbild ueber der Lightbox */
/* Randlos: das Bild nutzt das ganze Browserfenster */
.voll { position: fixed; inset: 0; z-index: 280; background: #000;
        display: grid; place-items: center; padding: 0;
        opacity: 0; transition: opacity .25s; }
.voll.sichtbar { opacity: 1; }
.voll[hidden] { display: none; }

/* Auch hier ein Quadrat, dessen Kantenlaenge app.js setzt */
.voll-rahmen { position: relative; }
.voll-inhalt { position: absolute; inset: 0; display: grid; place-items: center; }
.voll-inhalt img, .voll-inhalt video { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.voll-inhalt img { cursor: zoom-out; }
/* Schliessen im Vollbild: schlichtes Kreuz ohne Rahmen. Der Mischmodus
   macht es auf hellen Bildern schwarz und auf dunklen weiss. */
.voll-zu {
  position: fixed; top: 18px; right: 22px; z-index: 8;
  padding: 6px; font-size: var(--t-klein); line-height: 1; color: #fff;
  background: none; border: 0; box-shadow: none;
  mix-blend-mode: difference;
}
.voll-zu .zeichen-x { display: inline-block; transition: transform .35s cubic-bezier(.3,.1,.2,1); }
.voll-zu:hover .zeichen-x, .voll-zu:focus-visible .zeichen-x { transform: rotate(90deg); }

/* ---------------------------------------------------------------- Impressum */
/* Impressum und Datenschutz klappen nach unten auf - die Seite wird einfach
   laenger. Der Wechsel von 0fr auf 1fr laesst die Hoehe von selbst
   mitwachsen, ohne dass irgendwo eine feste Hoehe eingetragen werden muss. */
.klapptext { display: grid; grid-template-rows: 0fr;
             transition: grid-template-rows .45s cubic-bezier(.3,.1,.2,1); }
.klapptext.offen { grid-template-rows: 1fr; }
.klapptext-innen { overflow: hidden; }
.klapptext-innen pre {
  font-family: var(--font); font-size: var(--t-basis); line-height: 1.75;
  white-space: pre-wrap; margin: 0; color: var(--leise);
  border-top: 1px solid var(--linie);
  padding: clamp(26px, 2.8vw, 42px) 0 clamp(40px, 4.5vw, 72px);
  max-width: 78ch;
}

/* ============================================================================
   KLEINERE BILDSCHIRME
   ============================================================================ */

@media (max-width: 900px) {
  :root { --breite: min(1350px, 88vw); }

  /* Waagerechtes Menue weicht dem Burger */
  .nav-oben { display: none; }
  .burger  { display: grid; }
  .kopf-rechts { gap: 16px; }
  .sprachwahl button { padding: 4px 9px; }

  .start .mitte { grid-template-columns: 1fr; min-height: 0; }
  .start-text { padding-bottom: 30px; }
  .start-unterzeile { max-width: none; }
  .start-bild { max-width: 460px; margin-inline: auto; }

  .punkte, .logos, .stationen { grid-template-columns: 1fr; }

  /* nur der Filter im Portfolio wird breit - der in der Lightbox nicht,
     sonst schiebt er den Schliessen-Knopf aus dem Bild */
  .filter-leiste .auswahl { width: 100%; }

  /* Auf dem Handy sind die Miniaturen zu klein, um zu helfen - dort genuegt
     die Leiste mit den Punkten unter dem Bild. */
  .lb-mini { display: none; }

  /* Auf dem Handy haengt alles direkt am Bild: die Buehne bekommt keine
     feste Hoehe mehr, sondern waechst mit dem Bild. Leiste und Text folgen
     unmittelbar darunter, statt unten am Rand zu kleben. */
  .lb-koerper { grid-template-rows: auto auto auto; align-content: start;
                overflow-y: auto; gap: 12px; }
  .lb-oben { height: auto; }
  .lb-buehne-innen { position: static; }
  .lb-rahmen { width: auto !important; height: auto !important; }
  .lb-medium { position: static; }
  .lb-medium img, .lb-medium video {
    width: auto; height: auto; max-width: 100%; max-height: 58vh;
  }
  .lb-info { max-height: none; overflow: visible; padding-bottom: 8px; }
  .rund { width: 42px; height: 42px; }
  .rund svg { width: 19px; height: 19px; }

  /* Bild rutscht unter den Text und steht wieder gerade */
  .start-bild img { width: 100%; margin-left: 0; }
  .fuss-zeile { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 560px) {
  .start-dateien .knopf { flex: 1 1 100%; justify-content: center; }
  .portfolio-link { width: 100%; justify-content: center; }
}

@media (max-width: 440px) {
  /* auf sehr schmalen Geraeten schrumpft der Filter, damit der
     Schliessen-Knopf daneben sicher Platz behaelt */
  .lb-kopf { gap: 10px; padding-inline: 14px; }
  .lb-kopf .auswahl { width: min(180px, 100%); }
  .lb-kopf .auswahl-knopf { padding-inline: 13px; }
  .lb-koerper { padding-inline: 14px; }
  .lb-punkte { padding: 0 4px; gap: 6px; }
}