/* ============ Grundlayout ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Inter", -apple-system, sans-serif;
  background: #000;
}

/* ============ Landing-Ebene ============ */
#landing {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #f4f4f1;
  /* clip-path wird von peel.js gesetzt */
}

.landing-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

/* Hero: Vollbild, bleibt beim Scrollen stehen (sticky) */
.landing-canvas {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  background: #f4f4f1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Nächste Sektion: schiebt sich als weiße Karte über den Hero */
.landing-next {
  position: relative;
  z-index: 2;
  margin-top: -6vh;
  min-height: 92vh;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 44px rgba(20, 20, 30, 0.12);
  padding: 72px 56px;
}

.landing-next h2 {
  font-family: "Trovical", Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  color: #111;
  margin-bottom: 14px;
}

.landing-next p { font-size: 14.5px; color: #777; }

/* ============ Navigation ============ */
.landing-nav {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 20;
}

.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e5e3dc;
  background: #fff;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid #e5e3dc;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.nav-pill a {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  color: #1a1a1a;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.nav-pill a:hover { background: #f2f0ea; }

.nav-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #333;
}

.nav-mail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffd233;
  color: #1a1a1a;
  text-decoration: none;
  border: 1px solid #f0c010;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.15s;
}
.nav-mail:hover { transform: scale(1.08) rotate(-6deg); }

/* Auf breiten Schirmen ist .nav-right nur eine Klammer ums Markup —
   display:contents lässt Mail-Button und Burger direkt in der Nav-Flexbox sitzen,
   damit die Desktop-Reihenfolge exakt bleibt (Logo · Pille · Mail). */
.nav-right { display: contents; }
.nav-burger { display: none; }

/* ---- Handy: Burger-Menü ----
   Unter 600px passt die 501px breite Pille nicht mehr neben Logo und Mail-Button.
   Dann wird sie zur aufklappbaren Karte unter der Leiste.
   (Alternative, falls die Wörter doch wegsollen: .nav-lbl ausblenden und
   die Pille als reine Icon-Leiste stehen lassen.) */
@media (max-width: 600px) {
  .landing-nav {
    left: 16px;
    right: 16px;
    transform: none;
    justify-content: space-between;
  }
  .nav-right { display: flex; align-items: center; gap: 10px; }

  .nav-burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e5e3dc;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    width: 17px;
    height: 1.7px;
    border-radius: 2px;
    background: #1a1a1a;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-burger span + span { margin-top: 4.5px; }
  .landing-nav.is-open .nav-burger span:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
  .landing-nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
  .landing-nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }

  /* Die Pille wird zur Karte unter der Leiste */
  .nav-pill {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(20, 20, 30, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .landing-nav.is-open .nav-pill {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-pill a {
    padding: 13px 14px;
    border-radius: 14px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-pill, .nav-burger span { transition: none; }
}

/* ============ Hero ============ */
/* Der Innenabstand unten hält den Bereich frei, in dem sich die Skill-Pillen
   auf der Kartenkante stapeln — sonst läge der Scroll-Hinweis darunter. */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  padding: 0 24px 40px;
}

/* Die Zeile hält von Anfang an so viel Höhe frei, wie das Porträt beim
   Hovern braucht — so springt beim Vergrößern nichts, und der Kreis stößt
   weder an die Navigation noch an die Headline. */
.hero-hello {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  color: #555;
}

/* Der Avatar ist nur der PLATZHALTER in der Textzeile: seine Breite wächst,
   dadurch rücken „Hello" und „I'm Nicklas" auseinander. Der Kreis selbst liegt
   absolut darüber und wächst nach OBEN aus der Zeile heraus — so bleibt die
   Headline darunter genau da, wo sie ist. */
.hero-avatar {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  vertical-align: middle;
  transition: width 0.38s cubic-bezier(0.3, 1.05, 0.4, 1);
}

.ha-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #6a5acd, #b44fd0);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(20, 20, 30, 0.10);
  transition: width 0.38s cubic-bezier(0.3, 1.05, 0.4, 1),
              height 0.38s cubic-bezier(0.3, 1.05, 0.4, 1),
              box-shadow 0.38s ease;
}

.ha-circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nur auf Geräten mit echtem Zeiger: Auf dem Touchscreen gibt es kein Hover,
   dort bliebe die reservierte Höhe (min-height 120px, s. .hero-hello) ungenutzt —
   und genau die braucht der Pillenhaufen, um auf der Kartenkante zu landen. */
@media (hover: hover) and (pointer: fine) {
  .hero-hello { min-height: 120px; }
  .hero-hello:hover .hero-avatar { width: 120px; }
  .hero-hello:hover .ha-circle {
    width: 120px;
    height: 120px;
    box-shadow: 0 18px 46px rgba(20, 20, 30, 0.20);
  }
}

/* Touchgeräte: Dort gibt es kein Hover, dafür Antippen. Ein Tipp aufs Porträt
   vergrößert es, ein zweiter Tipp — oder ein Tipp irgendwo anders — macht es
   wieder klein (Logik am Ende von js/peel.js, Klasse .is-tapped).

   Der Kreis wächst hier NACH OBEN statt nach allen Seiten: Über der Zeile sind
   103px frei, darunter nur 24px bis zur Headline — symmetrisches Wachsen würde
   also in die Überschrift schneiden. Dafür hängt der Kreis mit seiner Unterkante
   an der Zeile (bottom statt top/translateY). Im kleinen Zustand steht er damit
   exakt wie vorher, beim Wachsen schiebt sich nichts, und der Pillenhaufen
   behält den Platz, den er seit v32 hat. */
@media (hover: none), (pointer: coarse) {
  .ha-circle {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
  }
  .hero-avatar { cursor: pointer; }
  .hero-hello.is-tapped .hero-avatar { width: 120px; }
  .hero-hello.is-tapped .ha-circle {
    width: 120px;
    height: 120px;
    box-shadow: 0 18px 46px rgba(20, 20, 30, 0.20);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-avatar, .ha-circle { transition: none; }
  .scroll-cue .sc-arrow { animation: none; opacity: 0.8; }
}

.hero-title {
  font-family: "Trovical", Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 6.6vw, 82px);
  line-height: 1.1;
  color: #111;
  letter-spacing: -0.01em;
}

.hero-title em { font-style: italic; }

/* Scroll-Hinweis: sitzt auf der sichtbaren Oberkante der ersten Karte und sagt
   leise, dass es hier weitergeht. Er hängt im .stack (nicht im Hero), damit er
   ÜBER den Karten liegt und beim Scrollen mitgeht statt stehen zu bleiben. */
.scroll-cue {
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #9b9b93;
  user-select: none;
  pointer-events: none;
}
.scroll-cue .sc-arrow {
  display: inline-block;
  animation: cueNudge 2.4s ease-in-out infinite;
}
@keyframes cueNudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Gelber Marker (wie Textmarker) */
.hl {
  background: #ffd233;
  border-radius: 0.35em;
  padding: 0.02em 0.18em 0.06em;
  margin: 0 0.02em;
}

/* final_final: gepunktete Linie signalisiert die versteckte Interaktion */
.final-word {
  position: relative;
  display: inline-block;
  cursor: default;
  text-decoration: underline dotted rgba(20, 20, 30, 0.45);
  text-decoration-thickness: 0.045em;
  text-underline-offset: 0.14em;
}

/* Ordner erscheint unten rechts neben dem Wort (dort ist kein Text) */
.folder-pop {
  position: absolute;
  left: 86%;
  top: 68%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: scale(0) rotate(12deg);
  transform-origin: top left;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
  text-decoration: none;
  cursor: pointer;
}

.final-word:hover .folder-pop,
.folder-pop:hover,
.folder-pop:focus-visible {
  transform: scale(1) rotate(-4deg);
}

.folder-pop img {
  width: 1.15em;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18));
  transition: transform 0.15s;
}
.folder-pop:hover img { transform: scale(1.06); }

.folder-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0;
  color: #555;
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* Touch kennt kein Hover: dort steht der Ordner dauerhaft rechts hinter dem
   Punkt, kleiner, damit er auf 375px neben der Zeile Platz hat, und so hoch,
   dass er nicht in den Untertitel ragt. Antippen scrollt zum MacBook am Ende
   der Seite (data-mac-open). Muss NACH .folder-label stehen, sonst gewinnen
   die Grundregeln (gleiche Spezifität, spätere Regel zählt). */
@media (hover: none), (pointer: coarse) {
  .folder-pop {
    left: calc(100% + 0.2em);
    top: 12%;
    transform: scale(1) rotate(-4deg);
  }
  .folder-pop img { width: 0.85em; }
  .folder-label { font-size: 8px; padding: 1px 4px; }
}

.hero-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: #6b6b6b;
}
.hero-sub strong { color: #333; font-weight: 600; }

/* ============ Skill-Pillen (Physik) ============ */
#pill-field {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none; /* nur die Pillen selbst sind greifbar */
  overflow: visible;
}

.skill-pill {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  /* em-basiert: die Grundgröße setzt pills.js einmalig passend zur Fenstergröße */
  padding: 1.2em 1.7em;
  border-radius: 999px;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;

  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #16161c;

  background: var(--c, #eee);
  box-shadow: 0 2px 8px rgba(20, 20, 30, 0.10);
}

/* runde Pillen nur mit Icon */
.skill-pill.round { padding: 1.05em; }

.skill-pill svg {
  width: 1.35em;
  height: 1.35em;
  flex-shrink: 0;
}

.skill-pill:active { cursor: grabbing; }

/* ============ Peel-Ecke ============ */
#peel-back {
  position: fixed;
  inset: 0;
  z-index: 52;
  pointer-events: none;
  background: linear-gradient(315deg, #ffffff 0%, #f2f0ea 35%, #cfccc2 78%, #b3b0a6 100%);
  filter: drop-shadow(-4px 4px 8px rgba(0,0,0,0.35));
  /* clip-path wird von peel.js gesetzt */
}

/* v16: Ecke versteckt — Zugang zum OS über Nav, Ordner-Easter-Egg und More-Work */
#peel-hotspot { display: none !important; }
#peel-hint { display: none !important; }

#peel-hotspot {
  position: fixed;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  z-index: 53;
  cursor: pointer;
}

#peel-hint {
  position: fixed;
  top: 118px;
  right: 26px;
  z-index: 53;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #8a8778;
  transform: rotate(-4deg);
  pointer-events: none;
  transition: opacity 0.3s;
}

/* Während/nach dem Abziehen ausblenden */
body.peeling #peel-hint,
body.peeled #peel-hint { opacity: 0; }
body.peeled #landing,
body.peeled #peel-back,
body.peeled #peel-hotspot { display: none; }

/* ============ Case-Study-Stack: Karten schieben sich übereinander ============ */
/* Der Stapel schiebt sich ein Stück in den Hero hinein, damit die Oberkante
   der ersten Karte schon vor dem Scrollen zu sehen ist — und damit die
   Skill-Pillen sichtbar darauf landen (Boden dafür in js/pills.js). */
.stack {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--card-peek, 54px));
}

.stack-panel {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

/* Feste Höhe (nicht nur min-height), damit .cc-media als flex:1 eine
   eindeutige Höhe hat — nur so kann die Kachel darin height:100% auflösen. */
.case-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background: #fff;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 44px rgba(20, 20, 30, 0.14);
  padding: 44px 52px 14px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.cc-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

/* Kundenlogo statt des früheren farbigen Vierecks (.cc-dot).
   Quellen und Ersatz-Anleitung: assets/logos/README.txt */
.cc-logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
}

/* Das Velomar-V ist ein freigestellter Buchstabe ohne Kachel und füllt seine
   Datei bis fast an den Rand aus. Der Eckenradius von .cc-logo schnitt genau
   dort die Serifen ab — hier gibt es also nichts zu runden. Ohne Radius und
   ohne Innenabstand steht der Buchstabe vollständig und in voller Größe. */
.cc-logo-velomar {
  border-radius: 0;
  padding: 0;
}

/* Adobes Favicon ist ein freigestelltes rotes A — es braucht eine helle
   Kachel unter sich, so wie es auch im Browser-Tab aussieht. */
.cc-logo-adobe {
  background: #fff;
  border: 1px solid #ececea;
  padding: 3px;
}



.cc-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #111;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 999px;
  transition: transform 0.18s, background 0.18s;
}

.cc-arrow { font-size: 16px; line-height: 1; transition: transform 0.18s; }
/* Ein <a> ist von Haus aus ziehbar: beim Wischen über die Visuals startete der
   Browser einen Link-Drag der ganzen Karte. Der dragstart entsteht auf der
   Karte, nicht auf dem Streifen darin — er kann dort also auch nicht
   abgefangen werden, deshalb hier. */
.case-card {
  -webkit-user-drag: none;
  user-select: none;
}

.case-card:hover .cc-cta { background: #000; transform: scale(1.04); }
.case-card:hover .cc-arrow { transform: translateX(3px); }

.cc-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #111;
  margin-bottom: 10px;
  /* Eine Zeile, wenn sie passt; sonst zwei etwa gleich lange (kein einzelnes
     Wort in der zweiten Zeile) */
  max-width: none;
  text-wrap: balance;
}

/* Kategorien mit Trennpunkten (v21 ohne, seit v40 auf Nicklas' Wunsch wieder mit) */
.cc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 14px;
  color: #8a8a85;
  margin-bottom: 26px;
}
.cc-facts span + span::before {
  content: "·";
  margin-right: 12px;
  color: #b5b5b0;
}

/* Media-Streifen: läuft unten aus der Karte heraus */
/* Filmstreifen: die Visuals liegen im Querformat nebeneinander, so hoch wie
   auf der Karte Platz ist. Das mittlere steht mittig, die beiden äußeren laufen
   über die Kartenkante hinaus — angeschnitten, wie ein Streifen, in dem es
   weitergeht. Die Karte selbst ist der Link zur ganzen Case Study. */
.cc-media {
  --tile-h: clamp(240px, 56vh, 520px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1;
  min-height: 0;
  margin: 0 -52px;
  overflow: hidden;
}

/* Sobald js/marquee.js übernommen hat, liegen die Kacheln in .cc-track und der
   Streifen läuft. Ohne JS bleibt .cc-media die zentrierte Reihe von oben. */
.cc-media.has-marquee { justify-content: flex-start; cursor: grab; }
.cc-media.is-dragging { cursor: grabbing; }

.cc-track {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 18px;
  flex: 0 0 auto;
  will-change: transform;
}

/* Bilder dürfen den Zeiger nicht abfangen, sonst startet beim Ziehen der
   native Bild-Drag des Browsers statt unserer Bewegung. */
/* Kein einzelnes Bild soll greifbar sein: weder anklickbar, noch aus der Seite
   herausziehbar. Gezogen wird immer der ganze Streifen. */
.cc-media img,
.cc-media video {
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.cc-media.has-marquee { user-select: none; -webkit-user-select: none; }

/* Der Hinweis hängt am Zeiger und ersetzt ihn, solange man über dem
   Streifen ist. Erst wenn das Skript ihn bewegt, wird der echte Cursor
   ausgeblendet — sonst stünde man ohne Zeiger da. */
.cc-media.has-cursor { cursor: none; }

.cc-drag-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.88);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.cc-media.is-hovering .cc-drag-cursor { opacity: 1; }
.cc-media.is-dragging .cc-drag-cursor { background: var(--accent, #1a7cf7); }

/* Alle Kacheln sind gleich HOCH und füllen die Karte bis zur Unterkante;
   die Breite hängt am Inhalt. */
.cc-tile {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--tint, #eee);
}

/* Fotos füllen ihre 16:10-Kachel und werden mittig beschnitten. „top center"
   war auf die alten hochformatigen Kacheln gemünzt und zeigte im Querformat
   nur noch den oberen Bildrand. */
.cc-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* UI-Screenshots dürfen nicht beschnitten werden — sie sind zwischen 1,33:1 und
   3,09:1 breit. Diese Kacheln geben deshalb nur die Höhe vor und werden vom
   Bild selbst so breit gemacht, wie es ist: kein Beschnitt, keine tote Fläche. */
/* Nicklas' eigene Mockups aus assets/projects/previews/.
   Die Höhe gibt die Karte vor, die BREITE kommt aus dem Bild selbst — es gibt
   bewusst KEINE max-width. Eine Breitenbegrenzung wäre genau der Fehler: die
   Kachel behielte ihre volle Höhe, würde aber schmaler gedeckelt und schnitte
   das Bild dann links und rechts ab. So bleibt das Seitenverhältnis immer exakt
   und nichts wird beschnitten.

   Ecken: Die Design-System-Datei bringt eine eigene Rundung von rund 23px bei
   2160px Bildhöhe mit. Damit ALLE Kacheln genauso gerundet aussehen (und der
   CSS-Radius bei dieser Datei nicht in den Inhalt schneidet), wird er aus der
   Kachelhöhe hochgerechnet: 23/2160 davon. Das erledigt js/marquee.js und legt
   das Ergebnis in --tile-radius ab — ein fester Pixelwert ginge nicht, weil die
   Kacheln je nach Fenstergröße unterschiedlich groß dargestellt werden. */
.cc-tile-preview {
  aspect-ratio: auto;
  width: auto;
  height: 100%;
  max-width: none;
  background: none;
  border-radius: var(--tile-radius, 7px);
  overflow: hidden;
}
.cc-tile-preview img,
.cc-tile-preview video {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.cc-tile-pad {
  aspect-ratio: auto;
  width: auto;
  max-width: min(74vw, 1040px);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-tile-pad img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============ More Work: aufklappender macOS-Ordner ============ */
.more-work {
  position: relative;
  z-index: 2;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vw, 90px);
  padding: 130px 24px 150px;
}

.mw-word {
  font-family: "Trovical", Georgia, serif;
  font-size: clamp(44px, 6vw, 78px);
  color: #111;
}

.mw-folder {
  position: relative;
  width: 230px;
  height: 175px;
  flex-shrink: 0;
  text-decoration: none;
}

/* Ordner-Rückseite mit Tab */
.mwf-back,
.mwf-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  border-radius: 14px;
}

.mwf-back {
  background: linear-gradient(180deg, #4795ef, #2f7ce0);
}

.mwf-back::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 84px;
  height: 26px;
  border-radius: 10px 12px 0 0;
  background: #3f8ceb;
}

/* Fotos, die beim Hover herausfahren */
.mwf-photo {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 108px;
  height: 108px;
  object-fit: cover;
  border: 5px solid #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(20, 20, 30, 0.18);
  transform: translateX(-50%) translateY(24px) rotate(0deg) scale(0.55);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.25s;
}

/* Ordner-Vorderseite: klappt beim Hover leicht auf */
.mwf-front {
  background: linear-gradient(180deg, #7fbdf8, #4f9cf3);
  border-radius: 12px 14px 14px 14px;
  transform-origin: bottom center;
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.35) inset;
}

.mw-folder:hover .mwf-front,
.mw-folder:focus-visible .mwf-front {
  transform: perspective(700px) rotateX(-32deg) scaleY(0.92);
}

.mw-folder:hover .mwf-photo,
.mw-folder:focus-visible .mwf-photo {
  opacity: 1;
}

.mw-folder:hover .mwf-p1,
.mw-folder:focus-visible .mwf-p1 { transform: translateX(-118%) translateY(-72px) rotate(-13deg) scale(1); }
.mw-folder:hover .mwf-p2,
.mw-folder:focus-visible .mwf-p2 { transform: translateX(-50%) translateY(-96px) rotate(2deg) scale(1.06); }
.mw-folder:hover .mwf-p3,
.mw-folder:focus-visible .mwf-p3 { transform: translateX(18%) translateY(-66px) rotate(12deg) scale(1); }

/* Gelber View-Button auf dem Ordner */
.mw-view {
  position: absolute;
  right: -28px;
  bottom: -22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffd233;
  border: 1px solid #f0c010;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(20, 20, 30, 0.14);
  transition: transform 0.18s;
}

.mw-folder:hover .mw-view { transform: scale(1.06) rotate(-3deg); }

/* ============ Footer ============ */

@media (max-width: 820px) {
  .case-card { padding: 28px 22px 14px; min-height: 94vh; }
  /* Schmal ist für einen Streifen kein Platz: die Kacheln stehen untereinander
     und behalten ihr Querformat — so füllen sie die Karte, statt in der Mitte
     zu schweben. Die dritte passt nicht mehr dazu und entfällt. */
  /* Kein Laufband auf schmalen Schirmen — dort steht der Stapel still */
  .cc-media,
  .cc-media.has-marquee {
    --tile-h: auto;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    margin: 0;
    cursor: default;
  }
  .cc-track { display: contents; }
  .cc-drag-cursor { display: none; }
  /* Auf dem Handy ist auf der schmalen Kartenkante kein Platz für den Hinweis,
     und weiter oben läge er im Pillenhaufen. Dort führt Wischen ohnehin. */
  .scroll-cue { display: none; }
  .cc-tile {
    height: auto;
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 10;
  }
  .cc-track { height: auto; }
  .case-card { height: auto; min-height: 100vh; }
  .cc-tile-pad { padding: 14px; }
  /* Auch hier wird nichts beschnitten: das Bild skaliert auf die volle Breite,
     höchstens aber auf 34vh — so passen zwei untereinander in die Karte. */
  .cc-tile-preview {
    width: auto;
    height: auto;
    max-width: 100%;
    aspect-ratio: auto;
    display: flex;
    justify-content: center;
  }
  .cc-tile-preview img,
  .cc-tile-preview video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 34vh;
    object-fit: contain;
  }
  .cc-media .cc-tile:nth-child(n + 3) { display: none; }
  .cc-cta { display: none; }
  .more-work { flex-wrap: wrap; padding: 90px 24px 120px; }
}

/* ============ Recent Projects (Selected-Work-Karte) ============ */
.landing-next h2 { margin-bottom: 28px; }

.rp-card {
  display: block;
  border: 1px solid #ececea;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 18px rgba(20, 20, 30, 0.06);
  margin-bottom: 22px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

a.rp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(20, 20, 30, 0.10);
}

.rp-media {
  position: relative;
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, #e7ecf6, #dbe3f2 55%, #eef1fa);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rp-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rp-hint {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #97a1b5;
}

/* Transparente Produkt-Visuals: einpassen statt beschneiden */
.rp-media-pad { background: linear-gradient(135deg, #eef1f6, #e3e8f2 55%, #f2f4fa); }
.rp-media-pad img { object-fit: contain; padding: 28px 34px 0; }

.rp-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 24px 20px;
}
.rp-text h3 {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
}
.rp-text p { font-size: 13.5px; color: #777; }

.rp-tag {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #222;
  border: 1px solid #e2e2de;
  border-radius: 999px;
  padding: 8px 16px;
  background: #fafaf8;
}

.rp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.rp-row .rp-media { aspect-ratio: 16 / 10; }
.rp-row .rp-text h3 { font-size: 17px; }