@font-face {
  font-family: "PPNeueMontreal";
  src: url("../fonts/PPNeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Supply-Free";
  src: url("../ressources/fonts/Supply-Free-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Supply-Free";
  src: url("../ressources/fonts/Supply-Free-Hairline.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fafafa;
  --bg-soft: #f0f0f0;
  --card: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --text: #1f1f1f;
  --muted: #5c6478;
  --accent-1: #32df22;
  --accent-2: #32df22;
  --gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --radius: 14px;
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.08); /* Schatten unter Bildern, Videos und Karten (vorher 0 20px 40px, 0.12) */
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --font: "PPNeueMontreal", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

html.js-smooth-scroll {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='11' y='11' width='2' height='2' fill='rgba(28,34,51,0.12)'/%3E%3C/svg%3E");
  color: var(--text);
  line-height: 1.6;
  font-size: 1.125rem;
}

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

.container {
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250, 250, 250, 0.9);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.site-header.scrolled {
  border-bottom-color: var(--border);
}

.site-header.hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.site-nav {
  display: flex;
  gap: 2rem;
}

.site-nav a {
  position: relative;
  color: #1F1F1F;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.375rem;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #32df22;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-nav a:hover,
.site-nav a:active {
  color: #32df22;
}

.site-nav a:hover::after,
.site-nav a:active::after {
  transform: scaleX(1);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Abstand Name – Logo (vorher 1.5rem) */
}

.site-identity {
  display: inline-block;
  font-family: "Supply-Free", var(--font);
  font-weight: 100;
  font-size: clamp(0.85rem, 1.95vw, 1.125rem); /* im selben Verhältnis verkleinert wie das Logo (32 → 24 px) */
  line-height: 1.1;
  color: #32df22;
  background: transparent;
  padding: 0;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  /* Optisch mittig zum Logo: zwischen Mitte der Kleinbuchstaben (0) und Mitte der Großbuchstaben (0.1em). */
  position: relative;
  top: 0.05em;
}

.site-identity .site-identity-text {
  display: inline-block;
}

.site-identity .char {
  display: none;
  white-space: pre;
}

.site-identity .char.typed {
  display: inline-block;
}

.site-identity .caret {
  display: inline-block;
  margin-left: 1px;
  font-family: "Supply-Free", var(--font);
  font-weight: 100;
  color: #32df22;
  animation: caretBlink 0.8s steps(2, start) infinite;
  transition: opacity 0.4s ease;
}

.site-identity .caret.done {
  opacity: 0;
  animation: none;
}

@keyframes caretBlink {
  50% {
    opacity: 0;
  }
}

.identity-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; /* Logo im Header (vorher 24px) */
  height: 32px;
  background: #32df22;
  border-radius: 0;
  flex-shrink: 0;
}
/* Logo „AN" (images/logo-an.svg) statt des weißen Punkts – dieselbe Datei ist auch das Favicon.
   Vorher: .identity-square::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: white; } */
.identity-square {
  background: #32df22 url("../images/logo-an.svg") center / 100% 100% no-repeat;
}

.site-identity.shake .site-identity-text,
.site-identity.shake .identity-square {
  animation: identityShake 0.4s ease;
}

@keyframes identityShake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-3px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}

/* ---------- Custom-Cursor ---------- */
.cursor-square {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #32df22;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, background;
  transform: translate(-100px, -100px);
  transition: background 0.15s ease;
}

.cursor-square.is-hover {
  background: #1f1f1f;
}

/* Auf dem dunklen Bild-Overlay: klickbare Fläche = helles Quadrat (schwarz wäre dort unsichtbar) */
.cursor-square.is-on-dark.is-hover {
  background: #fafafa;
}

@media (pointer: fine) {
  * {
    cursor: none;
  }
}

@media (pointer: coarse) {
  .cursor-square {
    display: none;
  }
}

/* ---------- Seiten-Navigation Previous / Next ---------- */
.dots {
  position: fixed;
  right: 32px;
  top: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 90px 0 24px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.dots.hidden {
  opacity: 0;
  pointer-events: none;
}

.dots button {
  position: relative;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 400;
  color: #1F1F1F;
  cursor: pointer;
  padding: 0 0 4px 0;
  pointer-events: auto;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dots button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #32df22;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.dots button:hover {
  color: #32df22;
}

.dots button:hover::after {
  transform: scaleX(1);
}

.dots button:disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* ---------- Slides ---------- */
.slide {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 84px 0 56px;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  background-color: var(--bg);
}

/* Punktraster nur erste zwei und letzte zwei Seiten */
#start,
#projekte,
#ueber-mich,
#kontakt {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='11' y='11' width='2' height='2' fill='rgba(28,34,51,0.12)'/%3E%3C/svg%3E");
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-2);
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  margin-bottom: 0.8rem;
}

/* ---------- Cover / Deckblatt ---------- */
.cover-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-top: -6vh;
}

.cover .eyebrow {
  font-family: "Supply-Free", var(--font);
  font-weight: 100;
  font-size: clamp(1.2rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  color: #1f1f1f;
  margin-bottom: 1rem;
  text-transform: none;
  letter-spacing: normal;
}

/* Größe des Würfels. Bei Änderung auch "half" in js/hero.js anpassen (Freiraum für die Hero-Bilder). */
.cube-wrap {
  position: relative;
  width: min(68vh, 72vw);
  height: min(68vh, 72vw);
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cube-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Schrift wie der Titel „Impressum" (.legal-title): Supply Regular, gleiche Größe in allen drei Stufen */
  font-family: "Supply-Free", var(--font);
  font-weight: 400; /* vorher 100 (Hairline) */
  font-size: clamp(3.2rem, 6.4vw, 4.8rem); /* vorher clamp(2rem, 5vw, 4rem) */
  line-height: 1;
  color: #1f1f1f;
  pointer-events: none;
  transition: opacity 0.3s ease;
  user-select: none;
}

@media (orientation: landscape) and (min-width: 901px) and (min-height: 500px) {
  .cube-label {
    font-size: clamp(2.2rem, min(6.4vw, 9vh), 4.8rem);
  }
}

@media (max-width: 600px) {
  .cube-label {
    font-size: clamp(1.3rem, 6.2vw, 3.2rem);
  }
}

.cube-label.hidden {
  opacity: 0;
}

.cube-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.hero-projects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-projects.active {
  opacity: 1;
}

.hero-projects .hero-img {
  position: absolute;
  transform-origin: center;
  object-fit: contain;
  object-position: center;
  background: transparent;
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity 0.45s ease, filter 0.4s ease, transform 0.45s ease;
}

.hero-projects.active .hero-img {
  opacity: 1;
}

.cover h1 {
  font-family: "Supply-Free", var(--font);
  font-weight: 100;
  font-size: clamp(2.4rem, 6.4vw, 4.8rem);
  line-height: 1.1;
  color: #1f1f1f;
}

.cover h1 .gradient-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: inherit;
  margin-left: 0.25em;
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  font-family: var(--font);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 10px 24px rgba(50, 223, 34, 0.35);
}

.btn-ghost {
  border-color: var(--border);
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--bg-soft);
}

.about-visual img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: bob 2s ease-in-out infinite;
}

.scroll-arrow {
  font-size: 1.1rem;
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ---------- Projekte-Übersicht ---------- */
.projects-overview {
  display: flex;
  align-items: center;
  padding: 84px 0 56px;
}

.overview-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.overview-inner h2 {
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}

.project-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
}

.project-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pt-overlay {
  position: absolute;
  inset: 0;
  padding: 1rem;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 1;
}

.pt-num {
  font-weight: 700;
  color: #32df22;
  font-size: 0.85rem;
}

.pt-title {
  font-size: 1.35rem;
  font-weight: 600;
}

.pt-cat {
  font-family: "Supply-Free", var(--font);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.pt-title {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  transition: color 0.25s ease;
}

.pt-cat {
  transition: color 0.25s ease;
}

.pt-title::after {
  display: none;
}

.project-tile {
  background: transparent;
  transition: background 0.25s ease;
}

.project-tile img {
  transition: opacity 0.25s ease;
}

.project-tile:hover {
  background: #32df22;
}

.project-tile:hover img {
  opacity: 0;
}

.project-tile:hover .pt-title,
.project-tile:hover .pt-cat {
  color: #ffffff;
}

@media (max-width: 1200px) {
  .project-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 1024px) {
  .project-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

/* Landscape: alle 9 Kacheln passen auf eine Seite */
@media (orientation: landscape) {
  .projects-overview {
    min-height: 100vh;
    height: 100vh;
    padding: 70px 0 20px;
    box-sizing: border-box;
  }
  .overview-inner {
    flex: 1;
    height: 100%;
    justify-content: center;
  }
  .overview-inner h2 {
    margin-bottom: 0.8rem;
  }
  .project-list {
    flex: 1;
    height: calc(100vh - 110px);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.6rem;
  }
  .project-tile {
    aspect-ratio: unset;
    height: 100%;
  }
}

/* ---------- Projektseiten ---------- */
.project-slide {
  background: var(--bg);
}

.project-slide:nth-child(even) {
  background: #fafafa;
}

.slide-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
}

.project-slide.flipped .slide-inner {
  direction: rtl;
}

.project-slide.flipped .slide-inner > * {
  direction: ltr;
}

.project-visual img {
  width: 100%;
  max-height: 62vh;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.project-visual video {
  display: block;
  width: 100%;
  aspect-ratio: 128 / 75;
  object-fit: cover;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.project-visual iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Erste 5 Projekte: neues Format */
.project-slide.first5 {
  background: var(--bg);
}

.first5-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 90px var(--gutter) 48px;
  box-sizing: border-box;
  gap: 1.6rem;
}

.first5-header {
  width: 100%;
  max-width: 50vw;
}

.first5-header h2 {
  font-size: clamp(3.2rem, 6.4vw, 4.8rem);
  line-height: 1.1;
  margin: 0 0 0.6rem 0;
  color: var(--text);
  font-weight: 400;
}

.first5-meta {
  font-family: "Supply-Free", var(--font);
  font-size: 0.95rem;
  color: #1F1F1F;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.first5-tags {
  display: inline;
  color: #7A7A7A;
}

.first5-year + .first5-dot {
  color: #1F1F1F;
}

.first5-desc p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 50vw;
  width: 100%;
  margin: 0 0 0.9rem 0;
}

.first5-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
}

.first5-visual video,
.first5-visual iframe,
.first5-visual img {
  width: 100%;
  max-width: 1100px;
  max-height: 62vh;
  margin: 0;
}

.first5-visual video {
  aspect-ratio: 128 / 75;
  object-fit: cover;
}

.first5-visual iframe {
  aspect-ratio: 16 / 9;
}

/* Neues Projekt-Layout: Titel oben links, Beschreibung darunter (Header-Größe), Video unten links, iPhone mittig rechts */
.project-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.8rem;
  width: 100%;
  min-height: calc(100vh - 90px - 48px);
  min-height: calc(100svh - 90px - 48px);
  align-items: stretch;
}

.project-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  justify-content: space-between;
}

.project-title {
  grid-column: 1 / -1;
  font-size: clamp(2.4rem, min(6.4vw, 10vh), 4.8rem);
  line-height: 1.1;
  margin: 0;
  color: var(--text);
  font-weight: 400;
}

.project-left-desc p {
  font-size: 1.375rem;
  line-height: 1.6;
  color: var(--text);
  max-width: none;
  width: 100%;
  margin: 0 0 0.9rem 0;
}

.project-left-bottom {
  margin-top: auto;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-top: 1.2rem;
}

.project-media {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  justify-content: flex-end;
}

.project-media .project-left-bottom {
  margin-top: 0;
  padding-top: 0;
}

.project-video-holder {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.project-image-pair {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.project-pair-img {
  flex: 1;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: none;
  box-shadow: none;
  background: #e0e0e0;
}

.project-left-bottom iframe,
.project-left-bottom video,
.project-left-bottom img,
.project-video-holder iframe,
.project-video-holder video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  max-height: none;
  height: auto;
  flex: 1;
  object-fit: cover;
}

.project-left-meta {
  margin-top: 1.2rem;
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  font-size: 0.95rem;
  color: #1F1F1F;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.project-left-meta .meta-type,
.project-left-meta .meta-year,
.project-left-meta .meta-dot {
  color: #1F1F1F;
}
.project-left-meta .meta-tag,
.project-left-meta .meta-note {
  color: #7A7A7A;
}

.project-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
}

.project-right .iphone-wrap,
.project-right .iphone {
  margin: 0;
}

.project-right img,
.project-right video,
.project-right iframe:not(.iphone .screen iframe) {
  max-width: 100%;
  max-height: 62vh;
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Awake: Text+Video links, Webapp rechts als Smartphone ohne iPhone-PNG – mittig */
.first5-inner.awake-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.65fr;
  gap: 2.8rem;
  align-items: center;
}

.awake-left {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  min-width: 0;
}

.awake-left .first5-header {
  max-width: none;
}

.awake-left .first5-desc p {
  max-width: none;
}

.awake-video-wrap {
  width: 100%;
}

.awake-video-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.awake-right {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  align-self: center;
}

/* iPhone Frame Component – ersetzt 10px-Rahmen */
.iphone {
  position: relative;
  width: 340px;
  height: 698px;
  max-width: 90vw;
  max-height: 70vh;
  background: #1a1a1a;
  border-radius: 58px;
  padding: 16px;
  box-shadow:
    0 28px 64px rgba(0,0,0,0.32),
    inset 0 0 0 2px rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.iphone::before,
.iphone::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 3px;
  background: #1a1a1a;
  border-radius: 2px 0 0 2px;
}
.iphone::before { top: 110px; height: 32px; }
.iphone::after  { top: 155px; height: 32px; }

.iphone .power-btn {
  position: absolute;
  right: -3px;
  top: 130px;
  width: 3px;
  height: 60px;
  background: #1a1a1a;
  border-radius: 0 2px 2px 0;
}

.iphone .screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #F1EAD8;
  border-radius: 44px;
  overflow: hidden;
}

.iphone .island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
}

.iphone .home-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 5px;
  background: rgba(0,0,0,0.35);
  border-radius: 5px;
  z-index: 10;
}

.iphone .screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  scrollbar-width: none;
}
.iphone .screen iframe::-webkit-scrollbar { display: none; }

/* Cross-Origin: Scrollbar der fremden Website visuell abschneiden */
.iphone--hide-scrollbar .screen {
  overflow: hidden;
}
.iphone--hide-scrollbar .screen iframe {
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  margin-right: -18px;
  margin-bottom: -18px;
}

.iphone--sm { width: 220px; height: 452px; border-radius: 40px; padding: 10px; }
.iphone--sm .screen { border-radius: 30px; }
.iphone--sm .island { width: 66px; height: 19px; top: 9px; }

.iphone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.iphone-label {
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.1;
  color: #1f1f1f;
  background: transparent;
  white-space: nowrap;
  text-align: center;
}

.iphone-label .char { display: none; white-space: pre; }
.iphone-label .char.typed { display: inline-block; color: #32df22; }
.iphone-label.finished .char.typed { color: #1f1f1f; }
.iphone-label .caret {
  display: inline-block;
  margin-left: 1px;
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  color: #1f1f1f;
  animation: caretBlink 0.8s steps(2, start) infinite;
  transition: opacity 0.4s ease;
}
.iphone-label .caret.done { opacity: 0; animation: none; }

/* iPad Frame */
.ipad {
  position: relative;
  width: 420px;
  height: 560px;
  max-width: 90vw;
  max-height: 70vh;
  background: #2b2b2d;
  border-radius: 32px;
  padding: 16px;
  box-shadow:
    0 28px 64px rgba(0,0,0,0.32),
    inset 0 0 0 2px rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.ipad .camera {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
  z-index: 10;
}

.ipad .power-btn {
  position: absolute;
  top: -3px;
  right: 70px;
  width: 40px;
  height: 3px;
  background: #2b2b2d;
  border-radius: 2px 2px 0 0;
}
.ipad .volume-rocker {
  position: absolute;
  top: -3px;
  right: 30px;
  width: 30px;
  height: 3px;
  background: #2b2b2d;
  border-radius: 2px 2px 0 0;
}

.ipad .screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #F1EAD8;
  border-radius: 18px;
  overflow: hidden;
}

.ipad .home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  z-index: 10;
}

.ipad .screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  scrollbar-width: none;
}
.ipad .screen iframe::-webkit-scrollbar { display: none; }

/* Cross-Origin: Scrollbar der fremden Website (elektro-wallenhorst.de) visuell verstecken – wird außerhalb des Screens abgeschnitten */
.ipad--hide-scrollbar .screen {
  overflow: hidden;
}
.ipad--hide-scrollbar .screen iframe {
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  margin-right: -18px;
  margin-bottom: -18px;
}

/* Landscape variant */
.ipad--landscape {
  max-width: 640px;
  aspect-ratio: 4 / 3;
}
.ipad--landscape .camera {
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
}
.ipad--landscape .power-btn {
  top: -3px; right: 24px; left: auto;
  width: 40px; height: 3px;
}
.ipad--landscape .volume-rocker {
  top: -3px; right: 74px; left: auto;
  width: 30px; height: 3px;
}

@media (max-width: 900px) {
  .first5-inner.awake-layout {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .awake-right {
    justify-content: center;
  }
  .iphone {
    width: 320px;
    height: 657px;
    border-radius: 52px;
  }
  .ipad {
    width: 380px;
    height: 500px;
    border-radius: 28px;
  }
}

.model-viewer {
  position: relative;
  width: 100%;
  height: 340px;
  margin-bottom: 1.2rem;
  border: 1px solid var(--border);
  overflow: hidden;
}

.model-viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.model-viewer .model-error {
  padding: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.project-slide.featured .slide-inner {
  align-items: flex-start;
}

.project-details .slide-num {
  display: block;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.slide-num-total {
  color: rgba(92, 100, 120, 0.45);
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
  font-family: "Supply-Free", var(--font);
  font-size: 0.95rem;
  color: #1F1F1F;
}

.project-meta .meta-type,
.project-meta .meta-year,
.project-meta .meta-dot {
  color: #1F1F1F;
}
.project-meta .meta-tag {
  color: #7A7A7A;
}

.badge {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-2);
  background: rgba(50, 223, 34, 0.12);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}

.year {
  color: #1F1F1F;
  font-size: 0.95rem;
}

.year-dot {
  color: #1F1F1F;
  font-size: 0.95rem;
  font-family: "Supply-Free", var(--font);
}
.project-tags {
  color: #7A7A7A;
  font-size: 0.95rem;
  font-family: "Supply-Free", var(--font);
}

.project-details h2 {
  font-size: clamp(3.2rem, 6.4vw, 4.8rem);
  font-weight: 400;
  line-height: 1.1;
}

.project-details p {
  color: var(--muted);
  margin-bottom: 1rem;
  max-width: 55ch;
  font-size: 0.95rem;
  line-height: 1.6;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1.2rem;
}

.tags span {
  font-size: 0.9rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
}

.links {
  display: flex;
  gap: 1.2rem;
}

.links a {
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}

.links a:hover {
  text-decoration: underline;
}

/* ---------- Über mich ---------- */
.about {
  background: var(--bg);
  padding: 0;
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 100vh;
  padding: 0;
}

.about-visual {
  /* Freier Rand rund ums Porträt, in dem der Seitenhintergrund sichtbar bleibt – größerer Wert = kleineres Bild */
  --about-inset: var(--gutter);
  width: 50vw;
  height: 100%;
  min-height: 100vh;
  padding: var(--about-inset);
  overflow: hidden;
}

.about-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
  box-shadow: none;
}

.about-text {
  padding: 84px var(--gutter) 56px 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-text p {
  color: #1F1F1F;
  margin-bottom: 1.4rem;
  font-size: 1.375rem;
  line-height: 1.6;
}

.about-hey-wrap {
  margin-bottom: 2.4rem;
}

.about-hey-label {
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  font-size: clamp(3.2rem, 6.4vw, 4.8rem);
  line-height: 1.1;
  color: #1F1F1F;
  background: transparent;
  white-space: nowrap;
}

.about-hey-label .char { display: none; white-space: pre; }
.about-hey-label .char.typed { display: inline-block; color: #32df22; }
.about-hey-label.finished .char.typed { color: #1F1F1F; }
.about-hey-label .caret {
  display: inline-block;
  margin-left: 1px;
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  color: #1F1F1F;
  animation: caretBlink 0.8s steps(2, start) infinite;
  transition: opacity 0.4s ease;
}
.about-hey-label .caret.done { opacity: 0; animation: none; }

.contact-hey-wrap {
  margin-bottom: 2.4rem;
}
.contact-hey-label {
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  font-size: clamp(3.2rem, 6.4vw, 4.8rem);
  line-height: 1.1;
  color: #1F1F1F;
  background: transparent;
  white-space: nowrap;
}
.contact-hey-label .char { display: none; white-space: pre; }
.contact-hey-label .char.typed { display: inline-block; color: #32df22; }
.contact-hey-label.finished .char.typed { color: #1F1F1F; }
.contact-hey-label .caret {
  display: inline-block;
  margin-left: 1px;
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  color: #1F1F1F;
  animation: caretBlink 0.8s steps(2, start) infinite;
  transition: opacity 0.4s ease;
}
.contact-hey-label .caret.done { opacity: 0; animation: none; }

.about-points {
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.about-points li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gradient);
  flex-shrink: 0;
}

/* ---------- Kontakt — ASCII Video Effekt (nur Video, Seite bleibt hell mit Punkteraster) ---------- */
.contact {
  background: #fafafa;
  text-align: center;
}
#kontakt {
  /* behält Punkteraster aus #start,#projekte,#ueber-mich,#kontakt oben */
}
.ascii-stage {
  position: relative;
  width: min(90vw, 900px);
  aspect-ratio: 16 / 9;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 2rem auto 0;
}
.ascii-stage video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ascii-stage pre {
  margin: 0;
  width: 100%;
  height: 100%;
  color: #1f1f1f;
  font-family: 'Courier New', monospace;
  font-size: 6px;
  line-height: 6px;
  letter-spacing: 0;
  white-space: pre;
  overflow: hidden;
  user-select: none;
}

.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* Reagierendes Punktraster (js/dot-grid.js): Zeichenflächen hinter dem Inhalt, deckungsgleich mit dem Punktraster.
   .has-dot-grid setzt das Skript auf jede Seite mit eigenem Raster – so liegt die Fläche über dem Hintergrund der Seite,
   aber unter ihrem Inhalt. Die Fläche fürs Raster des body (Footer, Impressum) steht fest im Fenster. */
.has-dot-grid {
  isolation: isolate;
}

.dot-grid-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.dot-grid-canvas--page {
  position: fixed;
}

@media print {
  .dot-grid-canvas {
    display: none;
  }
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin: 0.6rem 0 0.4rem;
}
.contact-links a {
  position: relative;
  color: #1F1F1F;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 400;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}
.contact-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #32df22;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.contact-links a:hover {
  color: #32df22;
}
.contact-links a:hover::after {
  transform: scaleX(1);
}
.btn-download {
  background: #1F1F1F;
  color: #fff;
  border: 1px solid #1F1F1F;
  border-radius: 0;
  padding: 0.5rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-download:hover,
.btn-download:active,
.btn-download:focus-visible {
  background: #32df22;
  border-color: #32df22;
  color: #fff;
}

.contact-text {
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 1.4rem;
}

.contact-hint {
  margin-top: 2rem;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 1rem;
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
}

.footer-nav a {
  color: var(--muted);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--text);
}

/* ---------- Back to top (entfernt) ---------- */
.back-to-top {
  display: none !important;
}

/* ---------- PDF-Export ---------- */
.export-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 16, 32, 0.88);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.export-overlay-box {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1.4rem 2rem;
  border-radius: var(--radius);
  font-weight: 600;
  box-shadow: var(--shadow);
}

body.exporting .gradient-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--accent-2);
}

body.exporting .cover,
body.exporting .contact {
  background: var(--bg);
}

/* ---------- Druck (Fallback) ---------- */
@media print {
  .site-header,
  .back-to-top,
  .dots,
  .scroll-hint,
  .export-overlay {
    display: none !important;
  }

  .slide {
    min-height: auto;
    padding: 0;
    page-break-after: always;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .site-nav {
    gap: 1.2rem;
  }

  .site-nav a {
    font-size: 1.125rem;
  }

  .about-text p {
    font-size: 1.125rem;
  }

  .first5-desc p,
  .project-details p {
    font-size: 0.9rem;
  }

  .overview-inner h2 {
    font-size: 1.125rem;
  }

  .cover-inner,
  .slide-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about-visual {
    width: 100vw;
    height: 50vh;
    min-height: 50vh;
    padding-bottom: 0; /* unten sorgt der Abstand des Textes für Luft */
  }

  .about-visual img {
    max-height: none;
    height: 100%;
  }

  .about-text {
    padding: 2rem var(--gutter);
  }

  .project-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .slide {
    padding: 84px 0 48px;
  }

  .about.slide {
    padding: 0;
  }

  .cube-wrap {
    width: min(54vh, 72vw);
    height: min(54vh, 72vw);
  }

  .project-visual img {
    max-height: 38vh;
  }

  .dots {
    right: 12px;
  }
}

@media (max-width: 600px) {
  .project-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =====================================================================
   Responsive
   ---------------------------------------------------------------------
   Zwei Modi:
   1) Fit-Modus  – Querformat ab 901 px Breite und 500 px Höhe (Laptop, Desktop, Tablet quer):
                   jede Seite füllt genau den Bildschirm, nichts muss gescrollt werden.
   2) Flow-Modus – alles andere (Smartphones hoch/quer, Tablet hoch, schmale Fenster):
                   Inhalte stehen untereinander, Seiten dürfen länger als der Bildschirm sein.
   Die Bedingung steht identisch als FIT_QUERY in js/main.js.
   ===================================================================== */

/* ---------- Gemeinsam: Projektseiten ---------- */
/* Der Titel sitzt ganz oben auf Höhe des Headers. Der Header ist dort ausgeblendet und legt sich
   nur beim Hochscrollen mit der Maus darüber. */
.project-slide {
  --title-top: clamp(10px, 1.8vh, 18px);
  padding-top: var(--title-top);
}

/* Smartphone-Mockup: feste Originalgröße (340 × 698), per --iphone-scale verkleinert (gesetzt in fitIphones()) */
.iphone-box {
  position: relative;
  flex: none;
  width: calc(340px * var(--iphone-scale, 1));
  height: calc(698px * var(--iphone-scale, 1));
}

.iphone-box .iphone {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 698px;
  max-width: none;
  max-height: none;
  border-radius: 58px;
  transform: scale(var(--iphone-scale, 1));
  transform-origin: top left;
}

/* YouTube-Videos: Der Player zeigt links und rechts oft schmale schwarze Streifen, weil sein Fenster nie
   pixelgenau 16:9 ist. Deshalb sitzt der Player in einem 16:9-Rahmen (.video-frame) und ist rundum etwas
   größer als dieser (--video-crop pro Seite, oben/unten zusätzlich 4 px): Das Video füllt die volle Breite,
   die Streifen liegen außerhalb und werden abgeschnitten. Rand und Schatten trägt der Rahmen. */
.video-frame {
  --video-crop: 3px;
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px var(--border), var(--shadow);
}

.project-left-bottom .video-frame iframe,
.project-video-holder .video-frame iframe {
  position: absolute;
  top: calc(-0.5625 * var(--video-crop) - 4px);
  left: calc(-1 * var(--video-crop));
  width: calc(100% + 2 * var(--video-crop));
  height: calc(100% + 1.125 * var(--video-crop) + 8px);
  max-width: none;
  aspect-ratio: auto;
  border: 0;
  box-shadow: none;
}

/* iPad-Mockup für eingebettete Web-Apps (liveDevice: "ipad-portrait" oder "ipad-landscape", z. B. Air Play).
   Hier die Maße fürs Querformat, das Hochformat (.ipad-box--portrait) folgt direkt darunter.
   Gleiche Technik wie beim Smartphone: Rahmen in fester Originalgröße (560 × 428, Bildschirm 528 × 396 = 4:3),
   per --ipad-scale verkleinert (fitIphones() in main.js). Die Web-App bekommt immer ein 1024 × 768 px
   großes Fenster, das auf den Bildschirm verkleinert wird – sie zeigt also ihr normales Tablet-Layout. */
.ipad-box {
  position: relative;
  flex: none;
  width: calc(560px * var(--ipad-scale, 1));
  height: calc(428px * var(--ipad-scale, 1));
}

.ipad-box .ipad {
  --tablet-viewport: 1024;
  --tablet-screen-w: 528;
  --tablet-screen-h: 396;
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: 428px;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  padding: 16px;
  border-radius: 30px;
  background: #1a1a1a;
  transform: scale(var(--ipad-scale, 1));
  transform-origin: top left;
}

.ipad-box .ipad .camera {
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
}

.ipad-box .ipad .screen {
  border-radius: 14px;
  background: #0b0b0b;
}

/* Hochformat: Rahmen 428 × 560, Bildschirm 396 × 528 (3:4), die Web-App bekommt ein 768 × 1024 px großes Fenster */
.ipad-box--portrait {
  width: calc(428px * var(--ipad-scale, 1));
  height: calc(560px * var(--ipad-scale, 1));
}

.ipad-box--portrait .ipad {
  --tablet-viewport: 768;
  --tablet-screen-w: 396;
  --tablet-screen-h: 528;
  width: 428px;
  height: 560px;
}

.ipad-box--portrait .ipad .camera {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.project-right .ipad-box .ipad .screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--tablet-viewport) * 1px);
  height: calc(var(--tablet-screen-h) * var(--tablet-viewport) / var(--tablet-screen-w) * 1px);
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  box-shadow: none;
  transform: scale(calc(var(--tablet-screen-w) / var(--tablet-viewport)));
  transform-origin: top left;
}

/* Wie beim Smartphone: mit zoom statt transform rendert die eingebettete Seite direkt in der Zielgröße */
@supports (zoom: 1) {
  .ipad-box .ipad {
    transform: none;
    zoom: var(--ipad-scale, 1);
  }

  .project-right .ipad-box .ipad .screen iframe {
    transform: none;
    zoom: calc(var(--tablet-screen-w) / var(--tablet-viewport));
  }
}

/* Screenshot statt Live-Seite im Geräte-Rahmen (screenshot in den Projektdaten, z. B. RenewMerch):
   ein langes Bild in voller Bildschirmbreite, das sich im Rahmen scrollen lässt. Nicht interaktiv. */
.device-shot {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: #fff;
}

.device-shot::-webkit-scrollbar {
  display: none;
}

/* Im Smartphone beginnt die Seite unter der Kamera-Aussparung, wie in einem echten Browser */
.iphone .device-shot {
  padding-top: 48px;
}

.project-right .device-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  border: 0;
  box-shadow: none;
  object-fit: fill;
}

/* Die eingebettete Website bekommt immer ein echtes Smartphone-Fenster: 390 px breit (iPhone 14/15),
   Höhe passend zum Bildschirmausschnitt (≈ 844 px). Dieses Fenster wird auf den 308 × 666 px großen
   Mockup-Bildschirm verkleinert. So zeigt die Seite im Mockup genau das Layout, das sie auf einem
   Smartphone hat – unabhängig davon, wie groß das Mockup im Portfolio gerade dargestellt wird. */
.iphone-box .iphone {
  --phone-viewport: 390;
  --phone-screen-w: 308;
  --phone-screen-h: 666;
}

.iphone-box .iphone .screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--phone-viewport) * 1px);
  height: calc(var(--phone-screen-h) * var(--phone-viewport) / var(--phone-screen-w) * 1px);
  max-width: none;
  max-height: none;
  margin: 0;
  transform: scale(calc(var(--phone-screen-w) / var(--phone-viewport)));
  transform-origin: top left;
}

/* Fremde Website mit sichtbarer Scrollleiste: Fenster um genau die Leistenbreite des Systems vergrößern
   (--scrollbar-size, gemessen in main.js; 0 px bei eingeblendeten/Overlay-Leisten), die Leiste liegt
   dann außerhalb des Bildschirms und die Seite behält ihre 390 px. */
.iphone-box .iphone--hide-scrollbar .screen iframe {
  width: calc(var(--phone-viewport) * 1px + var(--scrollbar-size, 0px));
  height: calc(var(--phone-screen-h) * var(--phone-viewport) / var(--phone-screen-w) * 1px + var(--scrollbar-size, 0px));
  margin: 0;
}

/* Verkleinert wird per zoom statt transform. Mit transform zeichnet der Browser Glas-Effekte
   (backdrop-filter) der eingebetteten Seite zunächst in Originalgröße – in Chrome erschienen dadurch
   eckige Schatten hinter runden Buttons, bis man ins Mockup klickte. Mit zoom rendert die Seite direkt
   in der Zielgröße und behält trotzdem ihr 390 px breites Fenster. Browser ohne zoom nutzen weiter transform. */
@supports (zoom: 1) {
  .iphone-box .iphone {
    transform: none;
    zoom: var(--iphone-scale, 1);
  }

  .iphone-box .iphone .screen iframe {
    --phone-zoom: calc(var(--iphone-scale, 1) * var(--phone-screen-w) / var(--phone-viewport));
    transform: none;
    zoom: calc(var(--phone-screen-w) / var(--phone-viewport));
  }

  /* Eine sichtbare Scrollleiste wird von zoom nicht mitverkleinert – ihre Breite deshalb zurückrechnen */
  .iphone-box .iphone--hide-scrollbar .screen iframe {
    width: calc(var(--phone-viewport) * 1px + var(--scrollbar-size, 0px) / var(--phone-zoom));
    height: calc(var(--phone-screen-h) * var(--phone-viewport) / var(--phone-screen-w) * 1px + var(--scrollbar-size, 0px) / var(--phone-zoom));
  }
}

/* ---------- 1) Fit-Modus: alles auf einer Bildschirmseite ---------- */
@media (orientation: landscape) and (min-width: 901px) and (min-height: 500px) {
  .slide {
    height: 100vh;
    height: 100svh;
    min-height: 0;
  }

  /* Projektseiten: Titelzeile oben, darunter zwei Spalten, die den Rest der Höhe füllen */
  .project-slide {
    align-items: stretch;
    padding-bottom: 24px;
  }

  .project-layout {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: clamp(0.25rem, 1vh, 0.6rem);
  }

  .project-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease;
  }

  /* Solange der Header eingeblendet ist, macht der Titel ihm Platz */
  .site-header:not(.hidden) ~ main .project-title {
    opacity: 0;
  }

  .project-left {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    min-height: 0;
    justify-content: flex-start;
  }

  .project-left-desc p {
    font-size: clamp(1rem, min(1.55vw, 2.9vh), 1.375rem);
    margin-bottom: 0;
  }

  /* Bilder + Video teilen sich die restliche Höhe: Die Breite wird so gewählt, dass
     Bildpaar (2 × 16:9) und Video (16:9) zusammen genau hineinpassen. */
  .project-media {
    --media-gap: clamp(0.5rem, 1.6vh, 1rem);
    flex: 1 1 0;
    min-height: 0;
    container-type: size;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--media-gap);
    margin-top: clamp(0.6rem, 2vh, 1.2rem);
  }

  .project-media > * {
    flex: none;
    width: min(100cqw, calc((100cqh - var(--media-gap) * 23 / 32) * 32 / 27));
  }

  .project-image-pair {
    gap: var(--media-gap);
  }

  .project-media .project-left-bottom {
    display: block;
    flex: none;
    width: 100%;
  }

  .project-left-meta {
    flex: none;
    margin-top: clamp(0.5rem, 1.6vh, 1.2rem);
    font-size: clamp(0.8rem, 2vh, 0.95rem);
  }

  .project-right {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    min-height: 0;
  }

  .project-right-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .project-right img,
  .project-right video {
    max-height: min(62vh, 100%);
  }

  .iphone-wrap {
    gap: clamp(0.6rem, 2vh, 1.4rem);
  }

  /* About */
  .about-inner {
    align-self: stretch;
    min-height: 0;
  }

  .about-visual {
    min-height: 0;
  }

  .about-text {
    padding-top: clamp(1.5rem, 8vh, 84px);
    padding-bottom: clamp(1.5rem, 6vh, 56px);
  }

  .about-text p {
    font-size: clamp(0.95rem, min(1.5vw, 2.6vh), 1.375rem);
    margin-bottom: 1em;
  }

  .about-hey-label {
    font-size: clamp(2.2rem, min(6.4vw, 9vh), 4.8rem);
  }

  .about-hey-wrap {
    margin-bottom: clamp(0.8rem, 3.5vh, 2.4rem);
  }

  /* Kontakt */
  .contact {
    padding: clamp(56px, 10vh, 84px) 0 clamp(28px, 6vh, 56px);
  }

  .contact-hey-label {
    font-size: clamp(2.2rem, min(6.4vw, 9vh), 4.8rem);
  }

  .contact-hey-wrap {
    margin-bottom: clamp(0.6rem, 3vh, 2.4rem);
  }

  .ascii-stage {
    width: min(90vw, 900px, calc((100svh - 23rem) * 16 / 9));
    margin-top: clamp(0.5rem, 2.5vh, 2rem);
    container-type: size;
  }

  /* ASCII-Bild (67 Zeilen) schrumpft mit der Bühne, statt unten abgeschnitten zu werden */
  .ascii-stage pre {
    font-size: min(6px, calc(100cqh / 67));
    line-height: min(6px, calc(100cqh / 67));
  }
}

/* Bilder übereinander in der rechten Spalte (sideImages in den Projektdaten, z. B. AI Risk Assessment, Forget Me Not).
   Anzahl und Format setzt main.js als --side-count / --side-ratio: zwei Bilder 4:3, ab drei Bildern 16:9.
   Leere Einträge erscheinen als grauer Platzhalter. */
.project-side-images {
  --side-count: 2;
  --side-ratio: 4 / 3;
  --side-gap: 1rem;
  --side-extra: 0px; /* Platz für die Beschriftung, siehe .project-side-images--labeled */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--side-gap);
  width: 100%;
}

/* Mit getippter Beschriftung über den Feldern (sideLabel in den Projektdaten) */
.project-side-images--labeled {
  --side-extra: 2.2rem;
}

.project-side-label {
  flex: none;
}

.project-right .project-side-img {
  display: block;
  flex: none;
  width: 100%;
  max-height: none;
  aspect-ratio: var(--side-ratio);
  object-fit: cover;
  border: 0; /* kein Rand um die Bilder; der Schatten bleibt */
  background: #e0e0e0;
}

.project-right .project-side-img--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-family: "Supply-Free", var(--font);
  font-size: 0.85rem;
  line-height: 1.3;
  color: #7A7A7A;
}

/* Drehbares 3D-Modell in einem Bildfeld (js/model-viewer.js). pan-y: auf Touch-Geräten dreht seitliches
   Wischen das Modell, senkrechtes Wischen scrollt weiter die Seite. */
.project-right .project-side-model {
  position: relative;
  overflow: hidden;
  background: transparent; /* Modell steht frei auf dem Seitenhintergrund; Helligkeit siehe toneMappingExposure in model-viewer.js */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Mit Münzwurf (data-coin) ragt die Zeichenfläche nach oben über das Feld hinaus, damit die Münze über dem
   Modell Platz hat – Höhe und Lage setzt model-viewer.js. */
.project-right .project-side-model.has-coin {
  overflow: visible;
}

/* Die Beschriftung bleibt anklickbar, auch wenn die Zeichenfläche bis über sie reicht */
.project-side-images--labeled .project-side-label {
  position: relative;
  z-index: 1;
}

.project-side-model canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-side-model.is-ready canvas {
  opacity: 1;
}

.project-side-model-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-family: "Supply-Free", var(--font);
  font-size: 0.85rem;
  color: #7A7A7A;
}

@media (orientation: landscape) and (min-width: 901px) and (min-height: 500px) {
  /* Die Bilder teilen sich die Spaltenhöhe; die Breite ergibt sich daraus (Seitenverhältnis), höchstens Spaltenbreite */
  .project-right--images {
    container-type: size;
  }

  .project-side-images {
    --side-gap: clamp(0.5rem, 1.6vh, 1rem);
    height: 100%;
  }

  .project-right .project-side-img {
    width: min(100cqw, calc((100cqh - var(--side-extra) - var(--side-gap) * (var(--side-count) - 1)) / var(--side-count) * (var(--side-ratio))));
  }
}

/* Bilder nebeneinander in der linken Spalte (leftImages in den Projektdaten, z. B. Slightly).
   Alle Bilder sind gleich hoch und behalten ihr eigenes Seitenverhältnis (--ratio, von fitLeftImages() in main.js gesetzt);
   zusammen füllen sie die Spaltenbreite bzw. im Fit-Modus die verfügbare Höhe. Leere Einträge = grauer Platzhalter (3:2). */
.project-left-images {
  --ratio-sum: 3;
  --left-count: 2;
  --left-gap: 1rem;
  display: flex;
  align-items: flex-start;
  gap: var(--left-gap);
  width: 100%;
}

.project-left-img {
  --ratio: 1.5;
  display: block;
  flex: var(--ratio) 1 0px;
  min-width: 0;
  width: auto;
  height: auto;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  border: 0;
  box-shadow: var(--shadow);
  background: #e0e0e0;
}

.project-left-img--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* kein Innenabstand: der würde die Breitenverteilung der Zeile verfälschen (Platzhalter wären ungleich hoch) */
  padding: 0;
  overflow: hidden;
  text-align: center;
  font-family: "Supply-Free", var(--font);
  font-size: 0.85rem;
  color: #7A7A7A;
}

/* Smartphone hochkant: Bilder untereinander, sonst würden sie sehr klein */
@media (max-width: 600px) {
  .project-left-images {
    --left-gap: 0.6rem;
    flex-direction: column;
  }

  .project-left-img {
    flex: none;
    width: 100%;
  }
}

/* Video-Layout (Projekte mit imagePair: false, z. B. Awake) im Fit-Modus:
   breitere linke Spalte, das Video füllt sie und steht senkrecht mittig zwischen Text und Meta-Zeile. */
@media (orientation: landscape) and (min-width: 901px) and (min-height: 500px) {
  .project-slide--video .project-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .project-slide--video .project-left-desc {
    max-width: 44rem;
  }

  .project-slide--video .project-media {
    justify-content: center;
    margin-top: clamp(0.4rem, 1.5vh, 1rem);
  }

  .project-slide--video .project-media > * {
    width: min(100cqw, calc(100cqh * 16 / 9));
  }

  /* Bilderzeile: so breit, dass die gemeinsame Höhe in die Spalte passt, höchstens Spaltenbreite */
  .project-slide--video .project-media > .project-left-images {
    --left-gap: clamp(0.5rem, 1.6vh, 1rem);
    width: min(100cqw, calc(100cqh * var(--ratio-sum) + var(--left-gap) * (var(--left-count) - 1)));
  }

  /* Mockup etwas nach links rücken, damit es Previous/Next am rechten Rand nicht berührt */
  .project-slide--video .project-right {
    padding-right: clamp(3rem, 5vw, 4.5rem);
  }
}

/* Seiten mit Geräte-Rahmen rechts (Smartphone oder iPad, Klasse von main.js): dieselbe Spaltenaufteilung und derselbe
   rechte Abstand wie im Video-Layout – auch wenn links noch Bildpaar + Video stehen (z. B. RenewMerch). So sind die
   Rahmen auf allen Seiten gleich groß und stehen an derselben Stelle. */
@media (orientation: landscape) and (min-width: 901px) and (min-height: 500px) {
  .project-slide--device .project-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .project-slide--device .project-right {
    padding-right: clamp(3rem, 5vw, 4.5rem);
  }
}

/* Seite ohne rechte Spalte (fullWidth in den Seitendaten, z. B. WeCare Hannover Seite 1):
   Die linke Spalte – Text, Bilderzeile, Meta-Zeile – nutzt die ganze Seitenbreite. */
.project-slide--full .project-layout {
  grid-template-columns: minmax(0, 1fr);
}

.project-slide--full .project-right {
  display: none;
}

/* Freigestellte Bilder in der rechten Spalte (sideImagePlain): kein grauer Hintergrund, kein Schatten, nichts beschnitten */
.project-right .project-side-images--plain .project-side-img {
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

/* Frei platziertes Bild rechts (sideImageFree in den Seitendaten, z. B. WeCare App). Nur im Fit-Modus.
   Das Bild richtet sich nicht mehr nach der rechten Spalte, sondern nach der ganzen Seite: Es steht waagerecht mittig
   zwischen dem rechten Rand der linken Spalte (dort endet das Video) und dem rechten Seitenrand, beginnt knapp unter
   dem oberen Rand und endet über dem "Next"-Knopf. Breite ergibt sich aus der Höhe (--side-ratio), höchstens die Lücke. */
@media (orientation: landscape) and (min-width: 901px) and (min-height: 500px) {
  /* Die Spalte darf hier kein eigener Bezugsrahmen sein, sonst ließe sich das Bild nicht an der Seite ausrichten */
  .project-slide--free-image .project-right--images {
    container-type: normal;
  }

  .project-slide--free-image .project-right .project-side-img {
    --free-top: 0.5rem;                    /* Abstand zum oberen Seitenrand */
    --free-bottom: calc(24px + 2.75rem);   /* Platz für "Next" unten rechts */
    --free-margin: 0.75rem;                /* Mindestabstand zu Video und Seitenrand */
    /* rechter Rand der linken Spalte: Seitenrand + 1.6 von 2.6 Teilen der Breite zwischen den Rändern (ohne Spaltenabstand 2.8rem) */
    --free-video-edge: calc(var(--gutter) + (100% - 2 * var(--gutter) - 2.8rem) * 1.6 / 2.6);
    position: absolute;
    top: var(--free-top);
    left: calc((var(--free-video-edge) + 100%) / 2);
    height: calc(100% - var(--free-top) - var(--free-bottom));
    width: auto;
    max-width: calc(100% - var(--free-video-edge) - 2 * var(--free-margin));
    transform: translateX(-50%);
  }
}

/* ---------- 2) Flow-Modus: Smartphones, Hochformat, schmale Fenster ---------- */
@media not all and (orientation: landscape) and (min-width: 901px) and (min-height: 500px) {
  /* Seiten können länger als der Bildschirm sein – nur sanft einrasten */
  html {
    scroll-snap-type: y proximity;
  }

  .project-slide {
    align-items: flex-start;
    padding-bottom: 40px;
  }

  .project-layout {
    min-height: 0;
    row-gap: 1.2rem;
  }

  .project-left {
    height: auto;
    justify-content: flex-start;
    gap: 1.2rem;
  }

  .project-left-desc p:last-child {
    margin-bottom: 0;
  }

  .project-left-meta {
    margin-top: 0;
  }

  .project-right {
    height: auto;
  }
}

/* Schmal: Projektseite einspaltig – Titel, Text, Bilder, Video, dann Mockup/Bild */
@media (max-width: 900px) {
  .project-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-left-desc p {
    font-size: 1.125rem;
  }

  .project-right img,
  .project-right video {
    max-height: none;
  }
}

/* Smartphone hochkant */
@media (max-width: 600px) {
  :root {
    --gutter: 1.25rem;
  }

  .project-title {
    font-size: clamp(2rem, 10.5vw, 2.6rem);
    overflow-wrap: anywhere;
  }

  .project-image-pair,
  .project-media {
    gap: 0.6rem;
  }

  /* Übersicht: zwei Spalten, Titel bleiben lesbar */
  .project-list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    gap: 0.6rem;
  }

  .pt-overlay {
    padding: 0.6rem;
  }

  .pt-title {
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .pt-cat {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .about-hey-label {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }

  .contact-hey-label {
    font-size: clamp(1.3rem, 6.2vw, 3.2rem);
  }

  .contact-links {
    gap: 0.8rem 1.4rem;
  }
}

/* Kleine Bildschirme: Previous/Next ausblenden (liegen sonst über dem Inhalt), geblättert wird per Wischen/Scrollen */
@media (max-width: 900px), (max-height: 499px) {
  .dots {
    display: none;
  }
}

/* Smartphone quer: Übersicht bleibt 3 × 3, Schrift kleiner */
@media (orientation: landscape) and (max-height: 499px) {
  /* About: Porträt nicht auf einen schmalen Streifen beschneiden */
  .about-visual {
    height: 90vh;
    min-height: 90vh;
  }

  .pt-overlay {
    padding: 0.5rem 0.7rem;
  }

  .pt-title {
    font-size: 1rem;
    line-height: 1.2;
  }

  .pt-cat {
    font-size: 0.7rem;
    line-height: 1.2;
  }
}

/* ---------- Bild-Overlay (vergrößerte Bilder, siehe "Bild-Overlay" in main.js) ---------- */
/* Vergrößerbare Bilder: Beim Hover legt main.js eine leicht transparente schwarze Fläche mit Lupe darüber (.zoom-hint);
   am Bild selbst und am Cursor ändert sich nichts. */
.is-zoomable:focus-visible {
  outline: 2px solid #32df22;
  outline-offset: 3px;
}

/* Hover-Fläche: liegt genau über dem Bild unter der Maus (Position und Größe setzt main.js).
   Schwarz, leicht transparent – die Stärke ist der letzte Wert in rgba(). Unten rechts die Lupe: weiß, leicht transparent, ohne Schatten. */
.zoom-hint {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 80;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.zoom-hint.is-visible {
  opacity: 1;
}

.zoom-hint svg {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.8;
}

/* Schwarze Fläche, 20 % transparent – die Seite dahinter bleibt abgedunkelt sichtbar */
.image-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  /* oben/unten Platz für das Kreuz, seitlich auf kleinen Bildschirmen weniger Rand */
  padding: 3.5rem clamp(0.75rem, 4vw, 3.5rem);
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  overscroll-behavior: contain;
}

.image-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

/* Während des Ausblendens fängt das Overlay keine Klicks und Mausbewegungen mehr ab */
.image-overlay:not(.is-open),
.image-overlay:not(.is-open) * {
  pointer-events: none;
}

/* Fläche, in die das Bild eingepasst wird; Klicks daneben gehen an das Overlay (pointer-events) */
.image-overlay-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  container-type: size;
  pointer-events: none;
}

/* So groß wie möglich, ohne das Seitenverhältnis (--image-ratio, von main.js gesetzt) zu ändern */
.image-overlay-img {
  display: block;
  flex: none;
  width: min(100cqw, calc(100cqh * var(--image-ratio, 1.5)));
  height: auto;
  aspect-ratio: var(--image-ratio, 1.5);
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

/* Schließ-Kreuz oben rechts */
.image-overlay-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fafafa;
  transition: transform 0.2s ease;
}

.image-overlay-close::before,
.image-overlay-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 2px;
  background: currentColor;
}

.image-overlay-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.image-overlay-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (hover: hover) {
  .image-overlay-close:hover {
    transform: rotate(90deg);
  }
}

.image-overlay-close:focus-visible {
  outline: 2px solid #32df22;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .image-overlay,
  .image-overlay.is-open,
  .image-overlay-close,
  .zoom-hint {
    transition: none;
  }
}

/* ---------- Impressum (impressum.html) ---------- */
/* Eigene Seite ohne Slides: Punktraster kommt vom body, Header bleibt stehen, Footer sitzt unten. */
html:has(body.legal-page) {
  scroll-snap-type: none;
}

body.legal-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.legal {
  flex: 1;
  padding: calc(68px + clamp(2.5rem, 9vh, 6rem)) 0 clamp(3rem, 8vh, 5rem);
}

.legal-title-wrap {
  margin-bottom: clamp(2.4rem, 6vh, 4rem);
}

/* Titel in derselben Größe wie „Write me a nice message" (.contact-hey-label) – wird in js/impressum.js getippt */
.legal-title {
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  font-size: clamp(3.2rem, 6.4vw, 4.8rem);
  line-height: 1.1;
  color: #1F1F1F;
  white-space: nowrap;
}

.legal-title .char { display: none; white-space: pre; }
.legal-title .char.typed { display: inline-block; color: #32df22; }
.legal-title.finished .char.typed { color: #1F1F1F; }
.legal-title .caret {
  display: inline-block;
  margin-left: 1px;
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  color: #1F1F1F;
  animation: caretBlink 0.8s steps(2, start) infinite;
  transition: opacity 0.4s ease;
}
.legal-title .caret.done { opacity: 0; animation: none; }

/* Abschnitte: links Beschriftung in Supply, rechts der Text */
.legal-section {
  display: grid;
  grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
  gap: 0.4rem clamp(1.5rem, 4vw, 4rem);
  padding: 1.6rem 0;
}

.legal-label {
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: #1F1F1F;
  margin: 0;
  padding-top: 0.15rem;
  hyphens: manual;
}

/* Supply hat kein Paragrafenzeichen – das kommt aus der Textschrift */
.legal-sign {
  font-family: var(--font);
}

.legal-body {
  max-width: 62ch;
}

.legal-body p {
  color: #1F1F1F;
  font-size: 1.125rem;
  line-height: 1.6;
}

.legal-body p + p {
  margin-top: 1rem;
}

.legal-body a {
  color: #1F1F1F;
  text-decoration: underline;
  text-decoration-color: #32df22;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
  overflow-wrap: anywhere;
}

.legal-body a:hover,
.legal-body a:focus-visible {
  color: #32df22;
}

/* Platzhalter: grün markiert, damit vor der Veröffentlichung nichts übersehen wird */
.legal-placeholder {
  font-family: "Supply-Free", var(--font);
  font-size: 0.95em;
  background: rgba(50, 223, 34, 0.28);
  padding: 0.05em 0.35em;
}

.legal-end {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 2.4rem;
}

/* Link wie die Links auf der Kontaktseite */
.legal-back {
  position: relative;
  color: #1F1F1F;
  text-decoration: none;
  font-size: 1.15rem;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}

.legal-back::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #32df22;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.legal-back:hover,
.legal-back:focus-visible {
  color: #32df22;
}

.legal-back:hover::after,
.legal-back:focus-visible::after {
  transform: scaleX(1);
}

.legal-date {
  font-family: "Supply-Free", var(--font);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--muted);
}

.footer-nav a[aria-current="page"] {
  color: var(--text);
}

@media (max-width: 900px) {
  .legal-section {
    grid-template-columns: 1fr;
    padding: 1.3rem 0;
  }

  .legal-label {
    padding-top: 0;
  }
}

/* Titelgröße wie .contact-hey-label im Fit-Modus (gleiche Bedingung wie im Abschnitt „Responsive") */
@media (orientation: landscape) and (min-width: 901px) and (min-height: 500px) {
  .legal-title {
    font-size: clamp(2.2rem, min(6.4vw, 9vh), 4.8rem);
  }
}

@media (max-width: 600px) {
  .legal {
    padding-top: calc(68px + 2rem);
  }

  .legal-title {
    font-size: clamp(1.3rem, 6.2vw, 3.2rem);
  }

  .legal-body p {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-title .caret {
    animation: none;
  }
}

@media print {
  .legal {
    padding-top: 0;
  }

  .legal-placeholder {
    background: none;
    border-bottom: 1px solid #1F1F1F;
  }
}