/* ==========================================================================
   Gianluca Celant – Portfolio
   Ein Stylesheet für alle Seiten. Farben, Schriften und Abstände stehen als
   Variablen ganz oben in :root – dort änderst du das Erscheinungsbild zentral.
   ========================================================================== */

/* ---------- Schriften (lokal, DSGVO-freundlich) ----------
   Archivo ist auf das Genutzte zugeschnitten: Gewicht 400, Breite 100–112 % (variabel).
   Andere Gewichte oder Breiten brauchen wieder die volle Datei von Google Fonts. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-stretch: 100% 112%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-stretch: 100% 112%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("../fonts/host-grotesk-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("../fonts/host-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Gestaltungs-Variablen ---------- */
:root {
  /* Farbe: ein dunkler Raum, in dem nur die Arbeiten farbig sind */
  --bg: #0b0b0b;                     /* fast Schwarz */
  --bg-raise: #161616;               /* leicht angehobene Flächen */
  --ink: #f2f2ef;                    /* gebrochenes Weiß */
  --ink-2: rgb(242 242 239 / 0.68);  /* Nebentext, ca. 8 : 1 */
  --ink-3: rgb(242 242 239 / 0.56);  /* leiser Text, ca. 5,6 : 1 */
  --line: rgb(242 242 239 / 0.22);
  --line-strong: rgb(242 242 239 / 0.5);
  --live: #4ad98a;                   /* einzig funktionale Farbe: „frei für Projekte“ */
  --error: #ff8a7a;
  --glass: rgb(11 11 11 / 0.66);     /* Grund der Kopfzeilen-Pillen: hält 4,5 : 1 auch über Weiß */

  /* Schrift */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --stretch-display: 112%;
  --fit: 0.8; /* Breite eines Archivo-Versals in em (bei 112 %): Titel passen ihr längstes Wort in die Spalte */

  /* Raster und Abstände. Links und rechts nie enger als die Safe Area
     (iPhone im Querformat: Notch bzw. Dynamic Island auf einer Seite). */
  --margin: clamp(1rem, 3.5vw, 3.125rem);
  --gutter-l: max(var(--margin), env(safe-area-inset-left));
  --gutter-r: max(var(--margin), env(safe-area-inset-right));
  --gap: clamp(1rem, 2.5vw, 2.25rem);
  --section-space: clamp(6rem, 14vw, 13rem);
  --radius-img: clamp(0.875rem, 2.2vw, 2.25rem);

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* Pfeil-Icons als Masken: gleiche Strichstärke 1.4 wie die SVG-Icons im HTML */
  --icon-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h10M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='1.4'/></svg>");
  --icon-arrow-out: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 11.5l7-7M5.5 4.5h6v6' fill='none' stroke='black' stroke-width='1.4'/></svg>");
  --icon-arrow-back: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13 8H3M7.5 3.5 3 8l4.5 4.5' fill='none' stroke='black' stroke-width='1.4'/></svg>");

  color-scheme: dark;
}
.service__proof::after,
.socials a::after,
.back::before {
  display: inline-block;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

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

/* Das hidden-Attribut gewinnt immer, auch gegen display-Regeln der Komponenten */
[hidden] { display: none !important; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
  scrollbar-color: rgb(242 242 239 / 0.35) var(--bg);
  scrollbar-width: thin;
  -webkit-tap-highlight-color: transparent; /* Rückmeldung beim Tippen kommt aus den :active-Zuständen */
}
/* Offenes Menü: die Seite darunter scrollt nicht mit (hält auf iOS ab Safari 26.4, davor greift overscroll-behavior am Menü) */
html:has(dialog.menu[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--ink);
  overflow-x: clip;
}

/* Lichtkegel oben rechts und Filmkorn: ruhend, über die ganze Seite */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 92% 4%, rgb(58 58 58 / 0.55), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgb(36 36 36 / 0.35), transparent 70%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Licht und Korn laufen zum oberen Rand hin aus: Safari färbt seine Statusleiste in --bg, so gibt es keine Kante */
body::before,
body::after {
  -webkit-mask-image: linear-gradient(transparent, #000 3rem);
  mask-image: linear-gradient(transparent, #000 3rem);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--ink); color: var(--bg); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 99px;
  font-size: 0.875rem;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.icon { flex: none; }

/* Wiederkehrende Kleinschrift: Labels, Zähler, Metadaten */
.label,
.hero__count,
.hero__status,
.section-head,
.card__meta,
.meta dt,
.tag {
  font-family: var(--font-text);
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.dash {
  display: inline-block;
  width: 1.5em;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-inline: 0.35em;
}

/* ---------- Knöpfe ----------
   Hover-Zustände gelten nur mit Maus oder Trackpad (hover: hover); auf dem Handy blieben sie nach dem
   Tippen stehen. Dort übernimmt :active die Rückmeldung (site.js hängt dafür einen touchstart-Listener an). */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 2.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: transparent;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
@media (hover: hover) {
  .pill:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
}
.pill:active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill--lg { min-height: 3.25rem; padding-inline: 1.6rem; font-size: 0.875rem; }
.pill--sm { min-height: 2rem; padding: 0.35rem 0.8rem; font-size: 0.6875rem; }
/* Trefferfläche mindestens 44 px hoch, ohne die Pille größer zu zeichnen */
.pill::after { content: ""; position: absolute; inset: calc(-0.125rem - 1px) -1px; } /* der 1-px-Rahmen zählt mit */
.pill--sm::after { inset: calc(-0.375rem - 1px) -1px; }
/* Langes Drücken markiert sonst die Beschriftung (iOS) */
button, .pill, .circle-btn, .filter, .choice span { -webkit-user-select: none; user-select: none; }

.dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--live);
}

.circle-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  align-content: center;
  gap: 0.4rem;
  width: clamp(6rem, 9vw, 7.5rem);
  aspect-ratio: 1;
  padding: 0.75rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.45s var(--ease-out);
}
.circle-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ink);
  transform: scale(0);
  transition: transform 0.55s var(--ease-out);
}
@media (hover: hover) {
  .circle-btn:hover { color: var(--bg); }
  .circle-btn:hover::before { transform: scale(1); }
}
.circle-btn:active { color: var(--bg); }
.circle-btn:active::before { transform: scale(1); transition-duration: 0.25s; }
.circle-btn span { max-width: 100%; padding-inline: 0.25rem; }
.circle-btn--solid { color: var(--bg); }
.circle-btn--solid::before { transform: scale(1); }
@media (hover: hover) {
  .circle-btn--solid:hover::before { transform: scale(0.92); }
}
.circle-btn--solid:active::before { transform: scale(0.92); }
.circle-btn[disabled] { opacity: 0.5; cursor: progress; }

/* ---------- Kopfzeile ----------
   Logo, Navigation und Pillen sitzen einzeln auf dunklem Glas und bleiben so über jedem Projektbild lesbar.
   Bewusst kein durchgehender Balken: Safari 26+ färbt seine Statusleiste sonst nach dem Balken (Schwarz statt --bg). */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 2.1rem) var(--gutter-r) clamp(1rem, 2.4vw, 2.1rem) var(--gutter-l);
  transition: transform 0.6s var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-110%); }
.site-header .logo,
.site-header .nav ul,
.site-header .pill {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
@media (hover: hover) {
  .site-header .pill:hover { background: var(--ink); }
}
.site-header .pill:active { background: var(--ink); }
/* Logo als Kapsel, in der Kopfzeile und gleich im Menü (beim Öffnen springt nichts) */
.site-header .logo,
.menu__top .logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  height: 2.5rem;
  padding-inline: 0.55em;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  transition: border-color 0.35s var(--ease-out);
}
@media (hover: hover) {
  .site-header .logo:hover { border-color: var(--ink); }
}
.site-header .logo:active { border-color: var(--ink); }
/* Wird es eng (Safari-Textzoom ab etwa 175 %), gibt das Logo nach, der Menü-Knopf bleibt ganz sichtbar.
   Abgeschnitten wird innen, damit die Trefferfläche des Links (::after) erhalten bleibt. */
.site-header .logo > span,
.menu__top .logo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.site-header .pill,
.menu__top .pill { flex: none; }
/* Ab 900 px: Navigation genau in der Mitte, Logo links, Status rechts */
@media (min-width: 900px) {
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .site-header .logo { justify-self: start; }
  .site-header .pill--status { justify-self: end; }
}

.logo {
  position: relative;
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-size: clamp(1.25rem, 2.2vw, 2.1rem);
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
a.logo::after { content: ""; position: absolute; inset: calc(-0.125rem - 1px) -1px; } /* Trefferfläche 44 px */

.nav ul {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 99px;
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: calc(2.5rem - 2px);
  padding: 0.55rem 1rem;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 99px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.35s var(--ease-out);
}
.nav a::after { content: ""; position: absolute; inset: calc(-0.1875rem - 1px) -1px; }
@media (hover: hover) {
  .nav a:hover { border-color: var(--line-strong); }
}
.nav a:active { border-color: var(--line-strong); }
.nav a[aria-current="true"],
.nav a[aria-current="page"] { border-color: var(--ink-2); }

.menu-toggle { display: none; }

@media (max-width: 899px) {
  .nav, .pill--status { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- Menü (Handy) ---------- */
.menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: contain;
}
.menu::backdrop { background: var(--bg); }
.menu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  /* 1 px höher als das Menü: so ist es immer eine Scrollbox, und overscroll-behavior hält Wischgesten
     im Menü fest, statt sie an die Seite darunter weiterzugeben (Safari wertet es sonst nicht aus). */
  min-height: calc(100% + 1px);
  padding: 1rem var(--gutter-r) calc(1.5rem + env(safe-area-inset-bottom)) var(--gutter-l);
}
.menu__inner:focus { outline: none; } /* Startpunkt beim Öffnen (autofocus), kein Bedienelement */
.menu__top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.menu__inner > nav { align-self: center; }
.menu__links {
  display: grid;
  gap: 0.25rem;
}
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 2.75rem; /* auch bei starkem Textzoom eine volle Trefferfläche */
  padding-block: 0.35rem;
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  /* Längstes Wort (--wort, vom Admin gesetzt) passt samt Nummer in die Breite, alle Links passen in die Höhe (Querformat) */
  font-size: min(4.5rem, 14svh, calc((100vw - var(--gutter-l) - var(--gutter-r) - 2rem) / (var(--wort, 10) * 0.72)));
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) {
  .menu__links a:hover { transform: translateX(0.12em); }
}
.menu__links a:active { transform: translateX(0.12em); }
.menu__links span {
  font-family: var(--font-text);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; color: var(--ink-2); font-size: 0.875rem; }
.menu__foot a { padding-block: 0.7rem; margin-block: -0.7rem; color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--line-strong); overflow-wrap: anywhere; }
/* Verfügbarkeit: unter 900 px gibt es die Status-Pille der Kopfzeile nicht, deshalb steht sie hier.
   Als Textzeile statt Pille, damit das Menü im Querformat weiter ohne Scrollen passt. */
.menu__foot .menu__status a { display: inline-flex; align-items: center; gap: 0.55em; text-decoration: none; }
@media (max-width: 599px) and (orientation: portrait) {
  .menu__foot { row-gap: 1.4rem; } /* die 44-px-Trefferflächen übereinanderliegender Links überlappen nicht */
  .menu__status { flex-basis: 100%; } /* Hochformat: eigene Zeile über Mail und Ort */
}

@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__links li { animation: rise 0.8s var(--ease-out) both; }
  .menu[open] .menu__links li:nth-child(2) { animation-delay: 0.05s; }
  .menu[open] .menu__links li:nth-child(3) { animation-delay: 0.1s; }
  .menu[open] .menu__links li:nth-child(4) { animation-delay: 0.15s; }
}

/* ---------- Abschnitte allgemein ---------- */
.section {
  padding: var(--section-space) var(--gutter-r) 0 var(--gutter-l);
}
.section-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.section-head h2 {
  font: inherit;
  color: var(--ink);
}
.section-head > span:last-child { justify-self: end; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head {
      border-top-color: transparent;
      background: linear-gradient(var(--line), var(--line)) top left / 100% 1px no-repeat;
      animation: draw-line linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}
@keyframes draw-line {
  from { background-size: 0% 1px; }
  to { background-size: 100% 1px; }
}

.lede {
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 400;
  max-width: 24ch;
  text-wrap: balance;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lede,
    .about__statement,
    .contact__title {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }
  }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { transform: translateY(105%); }
  to { transform: none; }
}

/* ---------- 01 · Start ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2rem;
  padding: 7.5rem var(--gutter-r) 2rem var(--gutter-l);
}
.hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.hero__count {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-2);
}
/* Verfügbarkeit im ersten Bildschirm, nur unter 900 px (darüber steht die Status-Pille in der Kopfzeile) */
.hero__status { position: relative; display: inline-flex; align-items: center; gap: 0.55em; color: var(--ink); }
.hero__status::after { content: ""; position: absolute; inset: -0.9rem -0.5rem; } /* Trefferfläche 44 px */
.hero__status:active { color: var(--ink-2); }
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-stretch: 100%;
  font-size: clamp(2.1rem, 13vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.hero__lines { display: block; }
.line { display: block; overflow: hidden; padding-block: 0.16em 0.06em; margin-block: -0.16em -0.06em; }
.line > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero .line > span { animation: rise 1.1s var(--ease-out) both; }
  .hero .line:nth-child(2) > span { animation-delay: 0.08s; }
  .hero .line:nth-child(3) > span { animation-delay: 0.16s; }
  .hero__side, .hero__actions, .latest { animation: fade-in 1.2s 0.45s var(--ease-out) both; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.hero__side {
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.latest {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  justify-self: start;
  padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgb(22 22 22 / 0.6);
  font-size: 0.8125rem;
  line-height: 1.3;
  transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
@media (hover: hover) {
  .latest:hover { border-color: var(--line-strong); background: var(--bg-raise); }
}
.latest:active { border-color: var(--line-strong); background: var(--bg-raise); }
.latest img {
  width: 3.25rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.55rem;
}
.latest__meta { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.br-phone { display: inline; }
@media (min-width: 640px) {
  .br-phone { display: none; }
  .hero__title { font-stretch: var(--stretch-display); font-size: clamp(2.4rem, 7.2vw, 6.5rem); }
  .line--in { padding-left: 1.25em; }
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr auto;
    column-gap: var(--gap);
    row-gap: 0;
    align-content: stretch;
    padding-top: 0;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }
  .hero__top { grid-column: 1 / 6; grid-row: 1; align-self: end; padding-bottom: clamp(1.25rem, 2.5vw, 2.25rem); }
  .hero__status { display: none; }
  .hero__title { grid-column: 1 / -1; grid-row: 2; }
  .hero__side { grid-column: 9 / 13; grid-row: 3; align-self: start; margin-top: -4.6em; }
  /* .hero davor: die 404-Seite nutzt .hero__actions in ihrem einspaltigen Raster */
  .hero .hero__actions { grid-column: 4 / 10; grid-row: 4; justify-content: center; align-self: center; padding-block: 2rem; }
  .latest { grid-column: 1 / 6; grid-row: 5; }
}
@media (min-width: 1200px) {
  .hero__side { grid-column: 9 / 12; }
}

/* ---------- 02 · Arbeiten ---------- */
.work__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 900px) {
  .work__intro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.filter sup { font-size: 0.65em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .filter:hover { border-color: var(--line-strong); }
}
.filter:active { border-color: var(--line-strong); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filter[aria-pressed="true"] sup { color: inherit; opacity: 0.7; }

.work__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3.5rem, 8vw, 6rem) var(--gap);
  margin-top: clamp(3rem, 7vw, 6rem);
}
@media (min-width: 900px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 7rem); }
  .work__grid > li:nth-child(even) { margin-top: clamp(6rem, 18vw, 16rem); }
}

.card { display: block; position: relative; }
.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--bg-raise);
  aspect-ratio: 4 / 5;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), opacity 0.4s;
}
@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.045); }
}

.card__body {
  position: relative;
  z-index: 2; /* über der WebGL-Ebene, falls sich das Bild beim Scrollen durchbiegt */
  container-type: inline-size; /* Bezug für die Titelgröße (cqi) */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.card__title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 400;
  /* nie größer, als das längste Wort (--wort, vom Admin gesetzt) in die Spalte passt */
  font-size: min(clamp(1.75rem, 0.4rem + 3.55vw, 4.2rem), 100cqi / (var(--wort, 6) * var(--fit)));
  /* Getrennt wird nur an weichen Trennstellen aus den Projektdaten (\u00AD), nie automatisch */
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: pretty;
}
.card__title span { display: inline-block; transition: transform 0.6s var(--ease-out); }
@media (hover: hover) {
  .card:hover .card__title span { transform: translateX(0.12em); }
}
.card:active .card__title span { transform: translateX(0.12em); }
.card__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--ink-2);
}
.card__num { color: var(--ink); }
.card__rule { flex: 1; height: 1px; background: var(--line); transition: background-color 0.4s; }
@media (hover: hover) {
  .card:hover .card__rule { background: var(--line-strong); }
}
.card:active .card__rule { background: var(--line-strong); }
.card__new {
  padding: 0.3rem 0.6rem;
  border-radius: 99px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.6875rem;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card__media {
      animation: unveil linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes unveil {
  from { clip-path: inset(18% 0 0 0 round var(--radius-img)); }
  to { clip-path: inset(0 0 0 0 round var(--radius-img)); }
}

.empty { padding-block: 4rem; color: var(--ink-2); }
.noscript { margin-top: 3rem; color: var(--ink-2); }

/* WebGL-Verbiegung: Ist sie aktiv, zeichnet die Leinwand die Bilder, das <img> bleibt für Screenreader und als Ersatz.
   Die Leinwand ist ein Band im Dokument (Höhe und Lage setzt bend.js), nicht fest am Bildschirm: So scrollt sie
   mit den Karten, auch wenn iOS die Seite schneller bewegt, als das Skript zeichnet. Bilder ziehen nicht nach. */
.gl-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  pointer-events: none;
}
.gl-on [data-bend].is-gl { opacity: 0; }
.gl-on .card__media, .gl-on .figure__media { background: transparent; }

/* Mauszeiger-Etikett über Projektbildern (nur mit Maus) */
.cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 6.5rem;
  aspect-ratio: 1;
  margin: -3.25rem 0 0 -3.25rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.3s var(--ease-out), scale 0.45s var(--ease-out);
}
.cursor-label.is-on { opacity: 1; scale: 1; }
@media (hover: none), (pointer: coarse) { .cursor-label { display: none; } }

/* ---------- Ansichten der Arbeiten ab 900 px (Einstellung „Ansicht“ im Admin) ---------- */
@media (min-width: 900px) {
  /* Liste: eine Spalte, Bilder abwechselnd links und rechts, Titel riesig daneben an der Bildunterkante.
     Titel und Nummer stehen bewusst neben dem Bild, nie darauf: nur die Arbeiten tragen Farbe. */
  .ansicht-liste .work__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(7rem, 13vw, 12rem); }
  .ansicht-liste .work__grid > li:nth-child(even) { margin-top: 0; }
  .ansicht-liste .card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .ansicht-liste .card__media { grid-column: 1 / 7; grid-row: 1; }
  .ansicht-liste .card__body { grid-column: 7 / 13; grid-row: 1; margin: 0; }
  .ansicht-liste li:nth-child(even) .card__media { grid-column: 7 / 13; }
  .ansicht-liste li:nth-child(even) .card__body { grid-column: 1 / 7; }
  .ansicht-liste .card__title { font-size: min(clamp(3rem, 0.5rem + 4.6vw, 6.2rem), 100cqi / (var(--wort, 6) * var(--fit))); }

  /* Raster: zwei Spalten im Versatz, Titel groß unter dem Bild */
  .ansicht-raster .card__title { font-size: min(clamp(2.6rem, 0.4rem + 4.3vw, 5rem), 100cqi / (var(--wort, 6) * var(--fit))); }
}

/* ---------- 03 · Über mich ---------- */
.about__stage {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: clamp(3rem, 8vw, 7rem);
}
.marquee {
  grid-area: 1 / 1;
  align-self: center;
  width: 100vw;
  margin-inline: calc(var(--gutter-l) * -1) calc(var(--gutter-r) * -1);
  overflow: hidden;
  position: relative;
  z-index: 3;
  mix-blend-mode: difference;
  color: #fff;
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-size: clamp(4.5rem, 16vw, 15rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track > span { padding-inline: 0.18em; }
.marquee__dash { width: 0.6em; height: 0.06em; background: currentColor; }
/* Der Name wandert mit dem Scrollen, statt endlos zu laufen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .marquee__track {
      animation: marquee linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes marquee { from { transform: translateX(4%); } to { transform: translateX(-38%); } }

/* Ohne Scroll-Animation (oder bei weniger Bewegung): der Name steht ruhig und vollständig */
.marquee__track { justify-content: center; }
@supports not (animation-timeline: view()) {
  .marquee__track { width: 100%; font-size: calc((100vw - var(--gutter-l) - var(--gutter-r)) / 9.8); }
  .marquee__track > :nth-child(n + 2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { width: 100%; font-size: calc((100vw - var(--gutter-l) - var(--gutter-r)) / 9.8); animation: none !important; }
  .marquee__track > :nth-child(n + 2) { display: none; }
}

.about__stage--name { min-height: clamp(9rem, 20vw, 16rem); }
.about__portrait {
  grid-area: 1 / 1;
  width: min(72vw, 26rem);
  position: relative;
  z-index: 2;
}
.about__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-img);
}

.about__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: clamp(3rem, 8vw, 7rem);
}
.about__statement {
  font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  max-width: 18ch;
  text-wrap: balance;
}
.about__text { display: grid; gap: 1.25rem; max-width: 60ch; color: var(--ink-2); font-size: 1rem; }
.about__text > p:first-child { color: var(--ink); }
.about__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}
.about__lists h3 {
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.about__lists li { padding-block: 0.3rem; color: var(--ink); font-size: 0.9375rem; }
@media (min-width: 900px) {
  .about__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .about__statement { grid-column: 1 / 7; align-self: start; position: sticky; top: 7rem; }
  .about__text { grid-column: 8 / 13; padding-top: 0.6rem; }
}

/* ---------- 04 · Leistungen ---------- */
.services__lede { margin-top: clamp(2.5rem, 6vw, 5rem); }
.services__list { margin-top: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 2rem;
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}
.service__title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) {
  .service:hover .service__title { transform: translateX(0.25rem); }
}
.service__text { color: var(--ink-2); max-width: 46ch; }
.service__proof {
  position: relative;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.2rem;
  transition: border-color 0.3s;
}
.service__proof::after { content: ""; --icon: var(--icon-arrow); transition: transform 0.4s var(--ease-out); }
@media (hover: hover) {
  .service__proof:hover { border-color: var(--ink); }
  .service__proof:hover::after { transform: translateX(0.25em); }
}
.service__proof:active { border-color: var(--ink); }
.service__proof::before { content: ""; position: absolute; inset: -0.6rem 0 -0.65rem; } /* Trefferfläche 44 px */
/* Bis 1199 px ist eine dritte Spalte schmaler als „Beispiel: Fundl App →“: Link unter den Text */
@media (min-width: 900px) {
  .service { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
  .service__title { grid-row: span 2; }
  .service__text { grid-column: 2; padding-top: 0.35rem; }
  .service__proof { grid-column: 2; margin-top: 0.5rem; }
}
@media (min-width: 1200px) {
  .service { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) minmax(0, 2fr); }
  .service__title { grid-row: auto; }
  .service__proof { grid-column: 3; grid-row: 1; justify-self: end; margin-top: 0.45rem; }
}

/* ---------- 05 · Stimmen ---------- */
.voices__list {
  display: grid;
  gap: clamp(3rem, 7vw, 5.5rem);
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
.voice blockquote p {
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  max-width: 26ch;
  text-wrap: balance;
}
.voice figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.tag {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 0.6875rem;
  color: var(--ink-2);
}
@media (min-width: 900px) {
  .voices__list > li:nth-child(2) { padding-left: 25%; }
  .voices__list > li:nth-child(3) { padding-left: 50%; }
}

/* ---------- 06 · Kontakt ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 5rem);
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
.contact__title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-size: clamp(2.3rem, 1rem + 5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.contact__text { margin-top: 1.75rem; max-width: 40ch; color: var(--ink-2); }
.contact__mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 2.25rem;
}
.contact__mail a {
  position: relative;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .contact__mail a:hover { border-color: var(--ink); }
}
.contact__mail a:active { border-color: var(--ink); }
.contact__mail a::before { content: ""; position: absolute; inset: -0.4rem 0; }
.copy-status { font-size: 0.8125rem; color: var(--live); min-height: 1em; }
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.3s;
}
.socials a::after { content: ""; --icon: var(--icon-arrow-out); }
@media (hover: hover) {
  .socials a:hover { color: var(--ink); }
}
.socials a:active { color: var(--ink); }
.contact__place { margin-top: 1.5rem; color: var(--ink-3); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

@media (min-width: 1000px) {
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 8rem); align-items: start; }
}

/* Formular */
.form { display: grid; gap: 1.75rem; }
.field { display: grid; gap: 0.5rem; }
.field label, .field legend {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  padding: 0.85rem 0 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  font-size: 1.125rem;
  line-height: 1.4;
  transition: border-color 0.3s;
}
.field textarea { resize: vertical; min-height: 8rem; }
@media (hover: hover) {
  .field input:hover, .field textarea:hover { border-bottom-color: var(--ink-2); }
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--ink);
  box-shadow: 0 1px 0 0 var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field__error { display: none; font-size: 0.8125rem; color: var(--error); }
.field input:user-invalid,
.field textarea:user-invalid,
.field input.is-invalid,
.field textarea.is-invalid { border-bottom-color: var(--error); }
.field input:user-invalid ~ .field__error,
.field textarea:user-invalid ~ .field__error,
.field input.is-invalid ~ .field__error,
.field textarea.is-invalid ~ .field__error { display: block; }

.field-row { display: grid; gap: 1.75rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field--choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.field--choice legend { padding: 0; margin-bottom: 0.75rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; display: inline-flex; cursor: pointer; }
/* Safari dehnt ein absolut gesetztes Radio nicht per inset: Breite und Höhe ausdrücklich, sonst bleibt es 12 px groß */
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; appearance: none; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 0.875rem;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s;
}
@media (hover: hover) {
  .choice input:hover + span { border-color: var(--line-strong); }
}
.choice input:active + span { border-color: var(--line-strong); }
.choice input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.85rem; }
.field--check input {
  appearance: none;
  width: 1.25rem; height: 1.25rem;
  margin: 0.1rem 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 0.3rem;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.field--check input::after {
  content: "";
  width: 0.65rem; height: 0.65rem;
  border-radius: 0.15rem;
  background: var(--ink);
  transform: scale(0);
  transition: transform 0.25s var(--ease-out);
}
.field--check input:checked::after { transform: scale(1); }
.field--check input:user-invalid, .field--check input.is-invalid { border-color: var(--error); }
.field--check label { text-transform: none; letter-spacing: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.field--check label a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line-strong); }
.field--check .field__error { grid-column: 2; }
.field--check input:user-invalid ~ .field__error, .field--check input.is-invalid ~ .field__error { display: block; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.form__status { max-width: 38ch; font-size: 0.9375rem; color: var(--ink-2); }
.form__status.is-error { color: var(--error); }
.form__status a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.form-done {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-img);
}
.form-done p:first-child { font-family: var(--font-display); font-stretch: var(--stretch-display); font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }
.form-done p + p { color: var(--ink-2); }

/* ---------- Fußzeile ---------- */
.site-footer {
  margin-top: var(--section-space);
  padding: 0 var(--gutter-r) calc(1.5rem + env(safe-area-inset-bottom)) var(--gutter-l);
  overflow: hidden;
}
.footer__mark {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  /* passt „Gianluca Celant“ genau in die Breite zwischen den Rändern */
  font-size: calc((100vw - var(--gutter-l) - var(--gutter-r)) / 9.8);
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: -0.04em;
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.footer__legal { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
.footer__legal a, .footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (hover: hover) {
  .footer__legal a:hover, .footer__top:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}
.footer__legal a:active, .footer__top:active { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Hinweis auf Beispielinhalte ---------- */
.has-demo .site-footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.demo-note {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgb(22 22 22 / 0.94);
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.35;
  transform: translateX(-50%);
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.45);
}
.demo-note strong { color: var(--ink); font-weight: 500; }
.demo-note button {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem; height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
}
@media (hover: hover) {
  .demo-note button:hover { background: rgb(242 242 239 / 0.1); }
}
.demo-note button:active { background: rgb(242 242 239 / 0.1); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .demo-note { background: rgb(22 22 22 / 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}

/* ==========================================================================
   Projektseite
   ========================================================================== */
.project { padding: clamp(7rem, 14vw, 11rem) var(--gutter-r) 0 var(--gutter-l); }
.project__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.back::before { content: ""; --icon: var(--icon-arrow-back); transition: transform 0.4s var(--ease-out); }
@media (hover: hover) {
  .back:hover::before { transform: translateX(-0.25em); }
}
.back:active::before { transform: translateX(-0.25em); }
.project__index { color: var(--ink-2); }

.project__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
.project__title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 400;
  font-size: min(clamp(2.1rem, 1rem + 6.4vw, 7rem), 100cqi / (var(--wort, 6) * var(--fit)));
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-wrap: pretty;
  /* Getrennt wird nur an weichen Trennstellen aus den Projektdaten (\u00AD), nie automatisch */
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}
.project__lede {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 34ch;
  text-wrap: pretty;
}
.meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.meta dt { color: var(--ink-2); margin-bottom: 0.4rem; }
.meta dd { font-size: 0.9375rem; }
.project__live { justify-self: start; }
.project__cover { position: relative; }
.project__intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; container-type: inline-size; }
.figure__media {
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--bg-raise);
}
.figure__media img { width: 100%; height: 100%; object-fit: cover; }
.project__cover .figure__media { aspect-ratio: 4 / 5; }

@media (min-width: 900px) {
  .project__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .project__intro { grid-column: 1 / 7; display: grid; gap: 2.25rem; position: sticky; top: 7rem; }
  .project__cover { grid-column: 7 / 13; }
  .meta { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .meta { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 3rem; }
}

.story { margin-top: var(--section-space); display: grid; gap: clamp(4rem, 10vw, 8rem); }
.story__block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.story__label { color: var(--ink-2); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.story__text { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.45; letter-spacing: -0.01em; max-width: 52ch; text-wrap: pretty; }
.story__credit { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; max-width: 64ch; text-wrap: pretty; }
@media (min-width: 900px) {
  .story__block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .story__label { grid-column: 1 / 5; }
  .story__text, .story__credit, .story__block .tools { grid-column: 5 / 12; }
}

.gallery { display: grid; gap: var(--gap); }
.gallery__item .figure__media { aspect-ratio: var(--ratio, 16 / 10); }
.gallery__pair { display: grid; gap: var(--gap); }
.gallery__single { width: min(100%, 52rem); margin-inline: auto; }
@media (min-width: 700px) {
  .gallery__pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .gallery__pair > :nth-child(2) { margin-top: clamp(3rem, 10vw, 9rem); }
}

.tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tools li {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 0.8125rem;
  color: var(--ink);
}

.next {
  display: block;
  margin-top: var(--section-space);
}
.next__label { display: grid; }
.next__label > span:nth-child(2) { color: var(--ink); }
.next__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: end; margin-top: clamp(2rem, 5vw, 3.5rem); container-type: inline-size; }
.next__title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  /* eine Stufe unter der Projektüberschrift: der Hinweis auf das nächste Projekt ist nie größer als der Titel der Seite */
  font-size: min(clamp(2.1rem, 0.5rem + 4.6vw, 6.2rem), 100cqi / (var(--wort, 6) * var(--fit)), 100cqi / (var(--wort-seite, 1) * var(--fit)));
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-wrap: pretty;
  /* Getrennt wird nur an weichen Trennstellen aus den Projektdaten (\u00AD), nie automatisch */
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
  transition: transform 0.7s var(--ease-out);
}
@media (hover: hover) {
  .next:hover .next__title { transform: translateX(0.08em); }
}
.next:active .next__title { transform: translateX(0.08em); }
.next__title, .next .figure__media { display: block; }
.next .figure__media { aspect-ratio: 16 / 10; }
.next .figure__media img { transition: transform 1.1s var(--ease-out); }
@media (hover: hover) {
  .next:hover .figure__media img { transform: scale(1.04); }
}
@media (min-width: 900px) {
  .next__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* eigene Spalte (7 von 12) und höchstens so groß wie die Projektüberschrift in ihrer Spalte (6 von 12) */
  .next__title { font-size: min(clamp(2.1rem, 0.5rem + 4.6vw, 6.2rem), (100cqi - var(--gap)) * 7 / 12 / (var(--wort, 6) * var(--fit)), (100cqi - var(--gap)) / 2 / (var(--wort-seite, 1) * var(--fit))); }
}
@media (max-width: 639px) {
  /* Auf dem Handy etwas schmaler laufen lassen, damit lange Wörter ohne Trennung passen. Steht nach den
     Grundregeln von Karten-, Projekt- und Folgetitel, sonst überschreiben die die schmale Breite wieder.
     Schmal und eng gesetzt schrumpft das Leerzeichen so weit, dass „FUNDL APP“ wie ein Wort aussieht
     (offenes L vor schrägem A oder W); der Wortabstand gleicht das aus. */
  .card__title, .next__title, .project__title { font-stretch: 100%; word-spacing: 0.1em; --fit: 0.7; }
}

.project-cta { margin-top: var(--section-space); padding-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.project-cta__body { display: grid; gap: 2rem; align-items: center; }
h2.contact__title { font-weight: 400; }
@media (min-width: 900px) { .project-cta__body { grid-template-columns: 1fr auto; } }

.missing { min-height: 70svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1.5rem; padding: 8rem var(--gutter-r) 0 var(--gutter-l); }
.missing h1 { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 400; font-size: clamp(2.1rem, 1rem + 6.4vw, 7rem); line-height: 0.95; letter-spacing: -0.045em; text-transform: uppercase; text-wrap: balance; }
.missing p { color: var(--ink-2); max-width: 44ch; }
/* Projekt-nicht-gefunden: die Pille ist direktes Rasterkind und würde sonst die ganze Breite füllen */
.missing > .pill { justify-self: start; }

/* ==========================================================================
   Rechtstexte (Impressum, Datenschutz)
   ========================================================================== */
.legal { padding: clamp(7rem, 14vw, 11rem) var(--gutter-r) 0 var(--gutter-l); container-type: inline-size; }
.legal__title {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 400;
  font-size: min(clamp(2.1rem, 1rem + 6.4vw, 7rem), 100cqi / (var(--wort, 6) * var(--fit)));
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.legal__notice {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  max-width: 68ch;
  color: var(--ink);
  font-size: 0.9375rem;
}
.legal__body { margin-top: clamp(3rem, 7vw, 5rem); max-width: 68ch; color: var(--ink-2); }
.legal__body h2 {
  margin-top: 3rem;
  margin-bottom: 0.75rem;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.legal__body h3 { margin-top: 1.75rem; margin-bottom: 0.5rem; color: var(--ink); font-size: 1rem; font-weight: 500; }
.legal__body p, .legal__body ul { margin-bottom: 1rem; }
.legal__body ul { list-style: disc; padding-left: 1.25rem; }
.legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line-strong); }
.legal__body address { font-style: normal; color: var(--ink); }

/* ==========================================================================
   Seitenübergänge (Chrome, Edge, Safari 18.2+; andere Browser wechseln normal)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: 0.45s var(--ease-inout) both vt-out; }
::view-transition-new(root) { animation: 0.6s var(--ease-out) both vt-in; }
::view-transition-group(*) { animation-duration: 0.7s; animation-timing-function: var(--ease-out); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ==========================================================================
   Weniger Bewegung, wenn im System gewünscht
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Sehr schmale Ansicht (Safari-Textzoom ab etwa 150 %): lange Wörter in Text und
   Leistungen dürfen getrennt werden. Große Titel passen sich über --wort an.
   ========================================================================== */
@media (max-width: 300px) {
  main :is(p, li, dd, h2, h3) { -webkit-hyphens: auto; hyphens: auto; }
  /* „Schließen“ ist breiter als „Menü“: Für das dekorative Logo im Menü bleibt dann kein Platz mehr */
  .menu__top .logo { visibility: hidden; }
}

/* ==========================================================================
   Mehr Kontrast, wenn im System gewünscht (iOS/macOS „Kontrast erhöhen“)
   ========================================================================== */
@media (prefers-contrast: more) {
  :root {
    --ink-2: rgb(242 242 239 / 0.82);
    --ink-3: rgb(242 242 239 / 0.72);
    --line: rgb(242 242 239 / 0.4);
    --line-strong: rgb(242 242 239 / 0.7);
    --glass: rgb(11 11 11 / 0.82);
  }
}

/* ==========================================================================
   Druck: site.js setzt beim Drucken die Klasse .is-print auf <html>.
   Browser drucken Hintergründe standardmäßig nicht, daher dunkle Schrift.
   ========================================================================== */
.is-print body::before,
.is-print body::after,
.is-print .site-header,
.is-print .demo-note,
.is-print .cursor-label,
.is-print .gl-canvas,
.is-print .marquee { display: none !important; }
.is-print body,
.is-print body * { color: #000 !important; }
.is-print [data-bend].is-gl { opacity: 1 !important; }