/* ==========================================================================
   NOVERA STUDIO
   Webseiten fuer lokale Betriebe

   Aufbau dieser Datei
   -------------------
   1  Schriften          6  Hero              11  Ueber
   2  Design-Tokens      7  Laufband          12  FAQ
   3  Reset              8  Problem           13  Kontakt
   4  Bausteine          9  Leistungen        14  Footer
   5  Header            10  Portfolio         15  Responsiv & Bewegung

   Farbwelt: Tiefschwarz, Chrom, Weiss — dazu eine helle Fassung auf Klick.
   Kein Gold: Gold klingt nach Salon, Chrom klingt nach Praezision. Ein sehr
   kuehler Blauton kommt ausschliesslich in Lichtschimmern vor, nie in Text
   oder Flaechen.
   ========================================================================== */

/* ----------------------------------------------------------- 1 Schriften -- */
/* Lokal eingebunden, nicht ueber das Google-Fonts-CDN. Ein CDN-Einbau
   uebertraegt die IP jedes Besuchers an Google und ist ohne Einwilligung
   angreifbar (LG Muenchen I, 3 O 17493/20). */

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  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;
}

/* ------------------------------------------------------ 2 Design-Tokens -- */

/* Die Seite kennt zwei Fassungen. Gesteuert wird ueber data-theme am
   <html>-Element; ohne Angabe gilt die dunkle. Beide sind eigenstaendig
   gestaltet, nicht bloss ineinander umgerechnet: ein simples Invertieren
   sieht immer billig aus, weil Schatten und Lichtkanten auf hellem und
   dunklem Grund verschieden funktionieren.

   Die Systemeinstellung wird bewusst nicht ausgewertet — die Seite hat eine
   Grundfassung, und wer lieber die andere moechte, schaltet oben um. Die
   Wahl bleibt gespeichert. */

:root {
  color-scheme: dark;

  /* Flaechen, von tief nach hoch */
  --void:        #08090B;
  --carbon:      #0C0E12;
  --slate:       #12151A;
  --elevated:    #171B21;

  /* Schrift */
  --platinum:    #E9ECEF;
  --silver:      #98A1AD;
  /* Beide Toene muessen 4.5:1 nicht nur auf den vier Flaechen erreichen
     (void, carbon, slate, elevated), sondern auch dort, wo eine Lichtwolke
     oder ein Strahl den Grund aufhellt — an der hellsten Stelle liegt der
     bei rgb(40, 46, 52). Mit den frueheren Werten #7A838F und #788492 waren
     es dort nur 3.6:1: Kleine Beschriftungen wie das "STUDIO" im Kopf
     standen genau ueber so einer Stelle. */
  --muted:       #939CA8;
  --dim:         #929BA7;

  /* Linien */
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-glow:   rgba(190, 210, 235, 0.28);

  /* Der kuehle Schimmer. Nur fuer Licht, nie fuer Text. */
  --glow:        rgba(150, 180, 215, 0.30);
  --glow-soft:   rgba(150, 180, 215, 0.15);
  --raster:      rgba(255, 255, 255, .038);
  --korn:        .035;

  /* Chrom als Textverlauf */
  --chrome: linear-gradient(112deg,
              #FFFFFF 0%, #D6DCE4 22%, #8C949F 44%,
              #FFFFFF 62%, #B4BCC6 82%, #E8ECF1 100%);

  /* Flaeche der Karten. Im Hellmodus liegt hier ein anderer Verlauf. */
  --karte-flaeche: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,0) 55%);
  --karte-innen:   rgba(255, 255, 255, .03);
  --feld-grund:    rgba(0, 0, 0, .28);
  --feld-grund-fokus: rgba(0, 0, 0, .42);
  --kopf-grund:    rgba(8, 9, 11, .72);
  --menue-grund:   rgba(8, 9, 11, .96);

  /* Violett aus dem Shader. Die vier Shaderfarben sind #11092B, #211056,
     #401097 und #1D0E4B — diese Toene fuehren sie in der uebrigen Seite
     weiter, damit der Hero kein Fremdkoerper ist. Als Flaeche und Licht,
     nie als Textfarbe: #7C5CFF auf dunklem Grund ergibt nur 3.9:1. */
  --violett:      #401097;
  --violett-hell: #7C5CFF;
  --violett-tief: #11092B;
  --violett-glow:  rgba(124, 92, 255, .38);
  --violett-hauch: rgba(124, 92, 255, .12);
  --violett-saum:  rgba(124, 92, 255, .26);
  /* Fuer Text auf dunklem Grund. 7.4:1 auf --void. */
  --violett-text: #B9A8FF;

  --btn-hover:  #FFFFFF;
  --btn-glanz:  rgba(255, 255, 255, .42);
  --fokus:      #9FB8D4;
  --akzent:     #D8E2EC;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5), 0 50px 110px rgba(0, 0, 0, .55);

  /* Typografie */
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Masse */
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --header-h: 78px;
  --radius: 6px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}


/* ---------------------------------------------------------------- 3 Reset -- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Statisch und an den Blick geheftet: kostet einmal Farbe, nichts je
     Bild. Sichtbar ist davon nur der Streifen links und rechts neben der
     Inhaltsflaeche. */
  background:
    radial-gradient(60% 40% at 84% 2%, rgba(124, 92, 255, .16), transparent 62%),
    radial-gradient(52% 34% at 6% 28%, rgba(64, 16, 151, .13), transparent 60%),
    radial-gradient(70% 44% at 50% 102%, rgba(33, 16, 86, .18), transparent 64%),
    var(--void);
  background-attachment: fixed;
  color: var(--silver);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.72;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Waagerechten Ueberlauf abschneiden.
   Bisher stand hier nur overflow-x:hidden auf dem body — das wirkt nicht:
   steht html auf visible, reicht der body seinen Wert an den Viewport
   weiter und klippt selbst gar nichts. Die Seite scrollte dadurch auf
   schmalen Schirmen um bis zu 40 Pixel seitwaerts, und die feste
   Hintergrundebene wuchs mit, was den Shader unnoetig gross rechnen liess.

   clip statt hidden, weil hidden einen Scrollcontainer erzeugt und damit
   position:sticky im Inneren ausser Kraft setzt. */
html {
  overflow-x: clip;
}

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

/* Muss nach den display-Regeln der Komponenten stehen, sonst gewinnen
   Klassen wie .nav (display:flex) gegen das hidden-Attribut. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }

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

::selection { background: var(--line-glow); color: var(--void); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .85rem 1.4rem;
  background: var(--platinum);
  color: var(--void);
  font-size: .9rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

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

/* ----------------------------------------------------------- 4 Bausteine -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(5rem, 11vw, 9rem);
}

.section--tight { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

/* Feine Trennlinie, die zu den Raendern hin ausblendet. Wirkt ruhiger als
   eine durchgezogene Kante. */
.section--edge::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}

/* Ueberschriften ------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.35rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-glow));
}

.eyebrow--center::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-glow), transparent);
}

.title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--platinum);
  /* Ziffern und Satzzeichen sauber ausrichten */
  font-variant-numeric: oldstyle-nums proportional-nums;
  hyphens: auto;          /* deutsche Komposita auf schmalen Displays */
  text-wrap: balance;
}

.title--xl { font-size: clamp(2.7rem, 7.5vw, 5.25rem); }
.title--lg { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.title--md { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* Chrom-Text. background-clip braucht einen Fallback, sonst steht bei
   fehlender Unterstuetzung unsichtbarer Text auf der Seite. */
.chrome {
  color: var(--platinum);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .chrome {
    background: var(--chrome);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.lead {
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.75;
  color: var(--silver);
}

.head { max-width: 60ch; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head--center .lead { margin-inline: auto; }

/* Buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--btn-bg);
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--platinum);
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease),
              background-color .4s var(--ease), color .4s var(--ease),
              box-shadow .4s var(--ease);
}

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

/* Weiss auf Schwarz ist die teuerste Kombination, die es gibt. */
.btn--primary {
  --btn-bg: var(--platinum);
  border-color: var(--platinum);
  color: var(--void);
  font-weight: 600;
}
.btn--primary:hover {
  --btn-bg: var(--btn-hover);
  box-shadow: var(--shadow-md);
}

.btn--ghost:hover {
  border-color: var(--line-glow);
  background: var(--karte-innen);
}

/* Tritt zurueck, solange der schwebende Knopf sichtbar ist: pro Ansicht
   soll es nur einen hervorgehobenen Handlungsaufruf geben. */
.btn--zurueckhaltend {
  --btn-bg: transparent;
  border-color: var(--line-strong);
  color: var(--platinum);
  font-weight: 500;
}
.btn--zurueckhaltend:hover {
  --btn-bg: var(--karte-innen);
  border-color: var(--line-glow);
  box-shadow: none;
}

.btn--sm { padding: .68rem 1.3rem; font-size: .86rem; }
.btn--lg { padding: 1.1rem 2.3rem; font-size: 1rem; }

/* Lichtreflex, der einmal ueber den Button faehrt. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 30%, var(--btn-glanz) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .85s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn--primary::after {
  background: linear-gradient(105deg,
    transparent 30%, rgba(0,0,0,.16) 50%, transparent 70%);
}

.btn__arrow {
  transition: transform .25s var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Zustand waehrend des Absendens: der Pfeil weicht einem drehenden Ring. */
.btn--laedt { pointer-events: none; opacity: .75; }
.btn--laedt .btn__arrow { display: none; }

.btn--laedt::before {
  content: "";
  width: 15px; height: 15px;
  margin-right: .1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: knopfDreht .7s linear infinite;
}

@keyframes knopfDreht { to { transform: rotate(360deg); } }

button:disabled { cursor: not-allowed; }

/* Karten --------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 2.6vw, 2.3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--karte-flaeche), var(--slate);
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease-out),
              background-color .5s var(--ease);
}

.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

/* Lichtkante, die sich beim Ueberfahren von links aufzieht. */
.card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-glow), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.card:hover::before { transform: scaleX(1); }

.card__title {
  margin-bottom: .7rem;
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--platinum);
}

.card__text { font-size: .95rem; line-height: 1.7; }

/* Chip ----------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--karte-innen);
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--silver);
}

.chip__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8FB4D9;
  box-shadow: 0 0 0 3px rgba(143, 180, 217, .16);
}

/* -------------------------------------------- Hintergrund-Atmosphaere -- */

@keyframes auroraDrift {
  from { transform: translateX(-50%) translateY(0) scale(1); }
  to   { transform: translateX(-44%) translateY(6vh) scale(1.18); }
}
@keyframes auroraDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-9vw, -11vh) scale(1.24); }
}
@keyframes auroraDrift3 {
  from { transform: translate(0, 0) scale(1.08); }
  to   { transform: translate(12vw, -8vh) scale(1); }
}

/* --------------------------------------------------------------- 5 Header -- */

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
  isolation: isolate;
  height: var(--header-h);
  transition: height .45s var(--ease), background-color .45s var(--ease),
              border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  height: 64px;
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mark {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
}

.mark__emblem {
  width: 38px;
  height: 38px;
  transition: width .45s var(--ease), height .45s var(--ease);
}
.header.is-stuck .mark__emblem { width: 32px; height: 32px; }

.mark__text { display: flex; flex-direction: column; line-height: 1; }

.mark__name {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .17em;
  color: var(--platinum);
}

.mark__claim {
  margin-top: .3rem;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .34em;
  color: var(--muted);
}

.nav__list { display: flex; align-items: center; gap: 2.1rem; }

.nav__link {
  position: relative;
  font-size: .9rem;
  color: var(--silver);
  transition: color .35s var(--ease);
}
.nav__link:hover { color: var(--platinum); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--line-glow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.header__cta { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

/* Der Button im Menue ist nur fuer die mobile Ansicht gedacht — auf breiten
   Schirmen uebernimmt .header__cta, sonst stuende er doppelt in der Zeile. */
.nav__cta { display: none; }

/* Hell/Dunkel-Umschalter ------------------------------------------------ */

/* Zwei Symbole liegen uebereinander; sichtbar ist immer das der Fassung, in
   die geschaltet wuerde. Ein Klick zeigt also, was passiert — nicht, was ist. */

/* Grundzustand ist dunkel: dann bietet der Schalter die Sonne an. */


/* Marke in zwei Fassungen ----------------------------------------------- */

/* Das Logo ist ein Chrom-Verlauf und damit an die Fassung gebunden: auf
   hellem Grund verschwaende die helle Marke. Beide Dateien sind winzig,
   deshalb liegen sie beide im Markup und werden per CSS getauscht. */
.marke-hell { display: none; }


/* Burger --------------------------------------------------------------- */

.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--karte-innen);
}

.burger span,
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 16px; height: 1.5px;
  background: var(--platinum);
  transform: translateX(-50%);
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
.burger span   { top: 50%; margin-top: -.75px; }
.burger::before { top: 16px; }
.burger::after  { bottom: 16px; }

.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { top: 50%; margin-top: -.75px; transform: translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"]::after  { bottom: 50%; margin-bottom: -.75px; transform: translateX(-50%) rotate(-45deg); }

/* ------------------------------------------------------------------ 6 Hero -- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  /* Platz unten fuer den Uebergang, damit der Inhalt nicht unter die
     aufsteigende Kante rutscht. */
  padding-top: calc(var(--header-h) + 5.5rem);
  padding-bottom: clamp(8.5rem, 13vh, 11rem);
  overflow: hidden;
  isolation: isolate;
  /* Liegt schon da, bevor WebGL startet — und bleibt auf Geraeten ohne
     WebGL. Der Hero hat damit nie ein schwarzes Loch. */
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(64, 16, 151, .55), transparent 62%),
    radial-gradient(90% 80% at 12% 88%, rgba(33, 16, 86, .62), transparent 58%),
    var(--violett-tief);
}

/* Die WebGL-Leinwand. Ohne diese Regel bestimmt das width/height-Attribut
   die Darstellungsgroesse — die Leinwand war dadurch 1182 Pixel breit auf
   einem 390 Pixel schmalen Schirm. */
.hero__shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__shader[data-shader="an"] { opacity: 1; }

/* Schleier zwischen Shader und Schrift. Ohne ihn laeuft der Grund an
   manchen Stellen auf #401097 hoch, und dort erreicht --silver keine
   4.5:1 mehr. Links deckt er staerker — dort steht der Text. */
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(8, 6, 20, .80) 0%, rgba(8, 6, 20, .56) 38%,
                    rgba(8, 6, 20, 0) 66%, rgba(8, 6, 20, .08) 100%),
    radial-gradient(140% 100% at 50% 122%, rgba(8, 9, 11, .88), transparent 58%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 3.4rem;
}

.hero__text { text-align: center; }

/* Doppelte Klasse, weil der Chip ein <p> und letztes Kind seiner Huelle
   ist: p:last-child{margin-bottom:0} gewinnt sonst nach Spezifitaet, und
   Chip und Ueberschrift beruehrten sich. */
.hero__chip.chip { margin-bottom: 1.75rem; }

.hero__title {
  margin-bottom: 1.9rem;
  font-size: clamp(2.7rem, 8.2vw, 6.1rem);
}

.hero__title .chrome,
.hero__title .leuchten { display: inline-block; }

/* Die zweite Zeile bekommt den wandernden Reflex. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__title .chrome { animation: chromeSweep 7.5s var(--ease) infinite; }
  .hero__title .leuchten {
    background: linear-gradient(104deg,
      #FFFFFF 0%, #D9CFFF 26%, #A78BFA 46%,
      #FFFFFF 64%, #C4B5FD 84%, #F2EEFF 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: chromeSweep 7.5s var(--ease) infinite;
  }
}

@keyframes chromeSweep {
  0%, 62%  { background-position: 0% 50%; }
  100%     { background-position: 100% 50%; }
}

.hero__lead {
  max-width: 52ch;
  margin: 0 auto 2.8rem;
  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
  line-height: 1.7;
  color: var(--silver);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-bottom: 3.4rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.6rem;
  font-size: .84rem;
  color: var(--muted);
}

.hero__proof li { display: flex; align-items: center; gap: .55rem; }
.hero__proof svg { flex-shrink: 0; opacity: .55; }

/* ---------------------------------------------------------- Hero-Buehne --- */

/* Bildschirm und Handy auf zwei Z-Ebenen. Die Neigung setzt novera.js
   ueber --neig-x / --neig-y; ohne Zeiger oder ohne Bewegungswunsch
   bleiben die auf 0 und die Buehne steht ruhig da. */
.hero__buehne {
  position: relative;
  margin-inline: auto;
  width: min(100%, 560px);
  aspect-ratio: 16 / 11.4;
  perspective: 1400px;
  perspective-origin: 62% 40%;
}

.buehne__glanz {
  position: absolute;
  inset: -22% -14% -10%;
  pointer-events: none;
  background: radial-gradient(52% 46% at 56% 42%, var(--violett-glow), transparent 70%);
  filter: blur(26px);
}

.buehne__schirm,
.buehne__handy {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--slate);
  border: 1px solid var(--line-strong);
  transform-style: preserve-3d;
  will-change: transform;
}

.buehne__schirm {
  inset: 0 0 12% 0;
  border-radius: 14px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .06) inset,
    0 32px 70px -28px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(124, 92, 255, .12);
  transform: translate3d(var(--schub-x, 0), var(--schub-y, 0), 0)
             rotateY(calc(var(--neig-y, 0deg) * .6))
             rotateX(calc(var(--neig-x, 0deg) * .6));
}

.buehne__leiste {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .85rem;
  background: rgba(12, 14, 18, .92);
  border-bottom: 1px solid var(--line);
}
.buehne__leiste span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .17);
}
.buehne__adresse {
  flex: 1;
  margin: 0 0 0 .5rem;
  padding: .18rem .7rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .05);
  font-size: .7rem;
  color: var(--muted);
  text-align: center;
}

.buehne__schirm img {
  display: block;
  width: 100%;
  height: auto;
}

.buehne__handy {
  right: -3%;
  bottom: 0;
  width: 27%;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, .2);
  box-shadow:
    0 26px 48px -18px rgba(0, 0, 0, .86),
    0 0 0 1px rgba(124, 92, 255, .18);
  transform: translate3d(var(--schub-x, 0), var(--schub-y, 0), 70px)
             rotateY(calc(var(--neig-y, 0deg) * 1.5))
             rotateX(calc(var(--neig-x, 0deg) * 1.5));
}
.buehne__handy img { display: block; width: 100%; height: auto; }

.buehne__etikett {
  position: absolute;
  left: 4%;
  bottom: 5%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .5rem .95rem;
  border-radius: 99px;
  border: 1px solid var(--violett-saum);
  background: #12101F;
  font-size: .76rem;
  color: var(--platinum);
  white-space: nowrap;
  transform: translate3d(var(--schub-x, 0), var(--schub-y, 0), 110px)
             rotateY(calc(var(--neig-y, 0deg) * 1.9));
}
.buehne__punkt {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violett-hell);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .18);
}

/* Ab Tablet steht der Text links und die Buehne rechts — asymmetrisch,
   die Buehne bekommt mehr Platz als der Text. */
@media (min-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 5rem); }

  .hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  .hero__text { text-align: left; }
  .hero__lead { margin-inline: 0; }
  .hero__actions,
  .hero__proof { justify-content: flex-start; }
  .hero__proof { gap: 1rem 1.8rem; }
  .hero__buehne { width: 100%; margin-inline: 0; }
}

/* Scroll-Hinweis: eine Linie, in der ein heller Abschnitt nach unten laeuft. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  z-index: 2;
  transform: translateX(-50%);
  width: 1px;
  height: 54px;
  background: var(--line);
  overflow: hidden;
}

.hero__scroll::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -60%;
  height: 60%;
  background: linear-gradient(180deg, transparent, var(--akzent));
  animation: scrollHint 2.6s var(--ease) infinite;
}

@keyframes scrollHint {
  0%   { transform: translateY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(280%); opacity: 0; }
}

/* Ohne WebGL zeichnet CSS denselben Farbraum — ruhiger, aber nie leer. */
.hero[data-shader-rueckfall] .hero__schleier {
  background:
    linear-gradient(105deg, rgba(8, 6, 20, .86) 0%, rgba(8, 6, 20, .62) 38%,
                    rgba(8, 6, 20, .2) 66%, rgba(8, 6, 20, .3) 100%),
    radial-gradient(140% 100% at 50% 118%, rgba(8, 9, 11, .92), transparent 60%);
}

/* -------------------------------------------------------------- 7 Laufband -- */

.marquee {
  position: relative;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
  background: var(--karte-innen);
  overflow: hidden;
  /* Raender ausblenden, damit die Schrift nicht hart abgeschnitten wirkt. */
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeRun 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-inline: 1.2rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

/* Der Track enthaelt zwei identische Gruppen. Um genau eine Gruppenbreite
   zu verschieben, sind das -50% der Gesamtbreite — dadurch ist der Sprung
   am Ende unsichtbar. */
@keyframes marqueeRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------- 8 Problem -- */

.problem { background: var(--carbon); }

.problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.problem__stats {
  display: grid;
  gap: 1rem;
}

.stat {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--karte-flaeche);
}

.stat__num {
  flex-shrink: 0;
  min-width: 4.2ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 2.7rem);
  /* Auf die erste Textzeile daneben ausgerichtet statt auf die Grundlinie —
     bei so grossem Groessenunterschied wirkt das ruhiger. */
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--platinum);
  font-variant-numeric: tabular-nums lining-nums;
}

.stat__text { font-size: .92rem; line-height: 1.6; }
.stat__source { display: block; margin-top: .4rem; font-size: .76rem; color: var(--dim); }

/* ------------------------------------------------------------ 9 Leistungen -- */

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-top: 3.8rem;
}

.service__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  /* Deutlicher als der Kartengrund, sonst verschwinden die Symbole. */
  background: var(--karte-flaeche), var(--elevated);
  color: var(--platinum);
  transition: color .5s var(--ease), border-color .5s var(--ease),
              background-color .5s var(--ease);
}

.card:hover .service__icon {
  color: var(--platinum);
  border-color: var(--line-glow);
  background: var(--karte-innen);
}

/* ------------------------------------------------------------- 10 Portfolio -- */

.portfolio { background: var(--carbon); }

/* Bei vier Beispielen wirkt ein 2x2-Raster ruhiger als eine Reihe zu viert —
   und die Bildschirmfotos bleiben gross genug, um etwas zu erkennen. */
.works {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 3.8rem;
}

.work {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--slate);
  overflow: hidden;
  transition: border-color .5s var(--ease), box-shadow .6s var(--ease),
              transform .6s var(--ease-out);
  /* Die Neigung setzt js/novera.js ueber diese beiden Variablen. */
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
}

.work:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.work__shot {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--void);
  border-bottom: 1px solid var(--line);
}

.work__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.1s var(--ease-out);
}
.work:hover .work__shot img { transform: scale(1.045); }

/* Lichtschein, der der Maus folgt. --mx/--my kommen aus dem JavaScript. */
.work__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(190, 215, 240, .13), transparent 62%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.work:hover .work__shot::after { opacity: 1; }

.work__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.6rem 1.7rem;
}

.work__branch {
  margin-bottom: .55rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.work__name {
  margin-bottom: .5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--platinum);
}

.work__text {
  margin-bottom: 1.4rem;
  font-size: .89rem;
  line-height: 1.65;
}

.work__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  font-size: .87rem;
  font-weight: 500;
  color: var(--platinum);
}

.work__link svg { transition: transform .4s var(--ease-out); }
.work:hover .work__link svg { transform: translateX(4px); }

/* Der Link deckt die ganze Karte ab, ohne dass die Karte selbst ein
   <a> sein muss — so bleibt das Markup semantisch sauber. */
.work__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.works-note {
  margin-top: 2.6rem;
  font-size: .84rem;
  color: var(--dim);
  text-align: center;
}

/* ---------------------------------------------------------------- 11 Ablauf -- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 3.8rem;
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 2.6rem;
  counter-increment: step;
}

/* Nummer und Linie darueber. Die Linie verbindet die Schritte optisch. */
.step::before {
  content: "0" counter(step);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--muted);
}

.step::after {
  content: "";
  position: absolute;
  top: 1.9rem; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.step__title {
  margin-bottom: .6rem;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--platinum);
}

.step__text { font-size: .91rem; line-height: 1.65; }

/* ----------------------------------------------------------------- 12 Ueber -- */

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.about__points { display: grid; gap: 1.5rem; margin-top: 2.4rem; }

.point {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.point__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--karte-innen);
  color: var(--silver);
}

.point__title {
  margin-bottom: .25rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--platinum);
}

.point__text { font-size: .9rem; line-height: 1.6; }

/* Bildseite. Ein eigenes Foto vom Arbeitsplatz waere hier noch besser als
   das Stockbild — sobald eines da ist, einfach die Datei austauschen. */
.about__visual {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.about__visual img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
}
/* Kein Zoom beim Ueberfahren: dieses Bild bewegt sich bereits mit dem
   Scrollen, und beide wuerden sich dieselbe transform-Eigenschaft teilen. */

/* Feiner Schleier, damit das Foto sich in die Farbwelt der Seite einfuegt
   statt herauszustechen. */
.about__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, transparent 35%, rgba(8, 9, 11, .38));
  pointer-events: none;
}


/* ------------------------------------------------------------------- 13 FAQ -- */

.faq { background: var(--carbon); }

.faq__list {
  max-width: 820px;
  margin: 3.4rem auto 0;
  border-top: 1px solid var(--line);
}

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 1.5rem 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: 1.04rem;
  font-weight: 500;
  color: var(--platinum);
  transition: color .35s var(--ease);
}
.faq__q:hover { color: var(--platinum); opacity: .78; }

.faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: .35rem;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--silver);
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease-out), opacity .3s var(--ease);
}
.faq__sign::before { width: 14px; height: 1.5px; }
.faq__sign::after  { width: 1.5px; height: 14px; }

.faq__q[aria-expanded="true"] .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* grid-template-rows von 0fr auf 1fr ist der einzige Weg, auf eine
   unbekannte Inhaltshoehe zu animieren, ohne die Hoehe in JS zu messen. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }

.faq__a p {
  padding-bottom: 1.6rem;
  max-width: 68ch;
  font-size: .95rem;
  line-height: 1.72;
}

/* --------------------------------------------------------------- 14 Kontakt -- */

.contact__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.contact__aside { position: sticky; top: calc(var(--header-h) + 2rem); }

.contact__direct { display: grid; gap: 1.3rem; margin-top: 2.4rem; }

.contact__row {
  display: flex;
  align-items: center;
  gap: .95rem;
  font-size: .95rem;
  color: var(--platinum);
}

.contact__row svg { flex-shrink: 0; color: var(--muted); }
.contact__row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Formular ------------------------------------------------------------- */

.form {
  padding: clamp(1.7rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--karte-flaeche), var(--slate);
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }

.field__label {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--silver);
}

.field__req { color: var(--muted); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  /* min-height sichert das 44px-Mindestmass fuer Beruehrung ab — mit reinem
     Innenabstand fiele es je nach Schriftgroesse knapp darunter. */
  min-height: 44px;
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--feld-grund);
  font-family: inherit;
  font-size: .95rem;
  color: var(--platinum);
  transition: border-color .35s var(--ease), background-color .35s var(--ease),
              box-shadow .35s var(--ease);
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--dim); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--line-glow);
  background: var(--feld-grund-fokus);
  box-shadow: 0 0 0 3px var(--glow);
}

.field__textarea { min-height: 148px; resize: vertical; }

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236C7580' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.field__select option { background: var(--slate); color: var(--platinum); }

/* Fehlermeldung pro Feld. Wird von js/novera.js gefuellt. */
.field__error {
  font-size: .8rem;
  color: #E8A0A0;
}

.field.is-invalid .field__input,
.field.is-invalid .field__select,
.field.is-invalid .field__textarea {
  border-color: rgba(232, 160, 160, .55);
}

/* Einwilligung --------------------------------------------------------- */

.consent-field {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-top: .3rem;
}

.consent-field input {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin: .18rem 0 0;
  accent-color: var(--akzent);
  cursor: pointer;
}

.consent-field label { font-size: .85rem; line-height: 1.6; color: var(--silver); }
.consent-field a { color: var(--platinum); text-decoration: underline; text-underline-offset: 2px; }

/* Honigtopf: fuer Menschen unsichtbar, fuer viele Bots verlockend.
   Bewusst nicht display:none — manche Bots ueberspringen versteckte Felder. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.9rem;
}

.form__hint { font-size: .82rem; color: var(--dim); }

/* Sammelmeldung ueber dem Formular */
.form__status {
  margin-bottom: 1.4rem;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(232, 160, 160, .4);
  border-radius: 10px;
  background: rgba(232, 160, 160, .07);
  font-size: .88rem;
  color: #E8B4B4;
}

/* ---------------------------------------------------------------- 15 Footer -- */

.footer {
  padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem;
  border-top: 1px solid var(--line);
  background: var(--void);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer__brand { max-width: 34ch; }
.footer__logo { width: 168px; margin-bottom: 1.3rem; }
.footer__claim { font-size: .9rem; line-height: 1.65; color: var(--muted); }

.footer__title {
  margin-bottom: 1.2rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--silver);
}

.footer__list { display: grid; gap: .75rem; font-size: .9rem; }
.footer__list a { color: var(--muted); transition: color .35s var(--ease); }
.footer__list a:hover { color: var(--platinum); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--dim);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__legal a:hover { color: var(--silver); }

/* --------------------------------------------- Unterseiten (Recht, Danke) -- */

.seite {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.seite__kopf {
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

.seite__kopf .title { margin-bottom: 1rem; }

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.8rem;
  font-size: .87rem;
  /* --muted lag hier bei 3.98:1 — fuer einen Navigationslink zu wenig. */
  color: var(--silver);
  transition: color .3s var(--ease);
}
.zurueck:hover { color: var(--platinum); }

.recht {
  max-width: 760px;
  margin-inline: auto;
  /* Lange deutsche Komposita wie "Verbraucherstreitbeilegung" schieben die
     Seite auf schmalen Displays sonst seitlich heraus. */
  hyphens: auto;
}

.recht h2 {
  margin: 2.8rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  color: var(--platinum);
}
.recht h2:first-child { margin-top: 0; }

.recht h3 {
  margin: 1.9rem 0 .7rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--platinum);
}

.recht p, .recht li { font-size: .96rem; line-height: 1.78; }

.recht ul, .recht ol {
  display: grid;
  gap: .5rem;
  margin: 0 0 1em;
  padding-left: 1.3rem;
}
.recht ul li { list-style: disc; }
.recht ol li { list-style: decimal; }

/* Knoepfe mit :not(.btn) ausnehmen — sonst faerbt diese Regel auch Knoepfe
   innerhalb der Rechtstexte um. Im Aufruf-Block auf fuer-kunden.html stand
   dadurch heller Text auf hellem Grund: der Knopf war unlesbar. */
.recht a:not(.btn) {
  color: var(--platinum);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color .3s var(--ease);
}
.recht a:not(.btn):hover { text-decoration-color: var(--line-glow); }

.recht dl { display: grid; gap: .4rem; margin-bottom: 1em; }
.recht dt { font-weight: 600; color: var(--platinum); }
.recht dd { margin: 0 0 .6rem; font-size: .96rem; }

/* Kasten fuer Hinweise, die vor dem Livegang zu erledigen sind. */
.merker {
  margin: 2rem 0;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--line-glow);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--karte-innen);
  font-size: .92rem;
}
.merker strong { color: var(--platinum); }

.stand { margin-top: 3rem; font-size: .85rem; color: var(--dim); }

/* Leistungsseite ------------------------------------------------------- */

/* Grosse Bloecke im Wechsel: Bild links, Text rechts — und umgekehrt. */
.block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
}
.block:last-child { margin-bottom: 0; }

.block--gedreht .block__bild { order: 2; }

.block__bild {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.block__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.block__bild:hover img { transform: scale(1.04); }

.block__nr {
  display: block;
  margin-bottom: .9rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--muted);
}

.block h2 { margin-bottom: 1.2rem; }

.block__liste { display: grid; gap: .75rem; margin-top: 1.6rem; }

.block__liste li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .93rem;
  line-height: 1.6;
}
.block__liste svg { flex-shrink: 0; margin-top: .35rem; color: var(--silver); }

/* Gegenueberstellung zweier Bauformen */
.wahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  margin-top: 3.4rem;
}

.wahl__karte {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--karte-flaeche), var(--slate);
  transition: border-color .5s var(--ease), transform .5s var(--ease-out),
              box-shadow .5s var(--ease);
}
.wahl__karte:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.wahl__marke {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .3rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.wahl__karte h3 {
  margin-bottom: .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--platinum);
}

.wahl__fuer {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .89rem;
}

/* Der Knopf zum echten Beispiel — er macht aus der Erklaerung einen Beweis. */
.wahl__beispiel { margin-top: 1.3rem; }
.wahl__fuer strong { color: var(--platinum); font-weight: 600; }

/* Skizze, die den Unterschied der Bauformen zeigt — reines CSS, kein Bild.
   Links eine schmale, hohe Flaeche: das liest sich als "eine lange Seite".
   Rechts drei niedrige nebeneinander: mehrere Seiten mit Menue. */
.skizze {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  height: 118px;
  margin-bottom: 1.7rem;
}

.skizze__seite {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  height: 100%;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--karte-innen);
}

/* Eine einzelne, lange Seite: schmal und randvoll mit Inhalt. */
.skizze--lang .skizze__seite {
  flex: 0 0 88px;
}

/* Mehrere Seiten: niedriger, dafuer nebeneinander. */
.skizze--mehrere .skizze__seite {
  height: 74px;
}

.skizze__zeile {
  height: 5px;
  border-radius: 2px;
  background: var(--line-strong);
}

/* Die oberste Zeile steht fuer den Kopfbereich und ist deshalb kraeftiger. */
.skizze__zeile--breit {
  height: 15px;
  background: var(--line-glow);
}

.skizze__zeile--fuellen { flex: 1; min-height: 5px; }

/* Zusatzleistungen als schlichte Liste mit Trennlinien */
.extras { margin-top: 3.4rem; border-top: 1px solid var(--line); }

.extra {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.4rem;
  align-items: start;
  padding-block: 1.7rem;
  border-bottom: 1px solid var(--line);
  transition: background-color .4s var(--ease);
}
.extra:hover { background: var(--karte-innen); }

.extra__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--karte-innen);
  color: var(--silver);
}

.extra h3 { margin-bottom: .35rem; font-size: 1.03rem; font-weight: 600; color: var(--platinum); }
.extra p { font-size: .92rem; line-height: 1.62; max-width: 62ch; }

.extra__wann {
  padding-top: .5rem;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}

/* Abschliessender Aufruf */
.aufruf {
  margin-top: clamp(4rem, 8vw, 6rem);
  padding: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background: var(--karte-flaeche), var(--elevated);
  text-align: center;
}

.aufruf .lead { margin-inline: auto; margin-top: 1.2rem; }

.aufruf__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2.2rem;
}

/* Danke-Seite ---------------------------------------------------------- */

.danke {
  display: grid;
  place-items: center;
  min-height: 78svh;
  padding-top: var(--header-h);
  text-align: center;
}

.danke__innen { max-width: 620px; padding-inline: var(--gutter); }

.danke__haken {
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  margin: 0 auto 2rem;
  border: 1px solid var(--line-glow);
  border-radius: 50%;
  background: var(--karte-innen);
  color: var(--platinum);
}

/* Der Haken zeichnet sich einmal selbst. */
.danke__haken path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: hakenZeichnen .9s var(--ease-out) .25s forwards;
}

@keyframes hakenZeichnen {
  to { stroke-dashoffset: 0; }
}

.danke__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2.4rem;
}

/* ------------------------------------------- Anfrage-Band im Seitenlauf -- */

/* Steht direkt hinter den Beispielen. Dort ist die Bereitschaft am
   groessten: Wer gerade gesehen hat, wie seine Seite aussehen koennte,
   soll nicht erst 4000 Pixel bis zum Formular scrollen muessen. */
.band-cta {
  position: relative;
  overflow: hidden;
  /* Vorher eine eigene helle Flaeche mit zwei durchgehenden Linien — auf
     der Glasplatte sah das aus wie ein aufgeklebter Streifen. Jetzt ein
     eigenes Glasstueck, das zur Platte gehoert. */
  margin-inline: var(--gutter);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: clamp(18px, 2.4vw, 26px);
  background:
    radial-gradient(ellipse 70% 130% at 50% 0%, rgba(150, 120, 255, .16), transparent 68%),
    linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 46%, transparent),
    #14161F;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 24px 60px -28px rgba(0, 0, 0, .8);
}

.band-cta::before {
  content: "";
  position: absolute;
  inset-inline: 14%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(214, 203, 255, .5) 50%, transparent);
}

.band-cta__innen {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 3.6rem) var(--gutter);
}

.band-cta__text { max-width: 52ch; }

.band-cta h2 {
  margin-bottom: .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--platinum);
}

.band-cta p { font-size: .96rem; color: var(--silver); }

.band-cta__aktion { flex-shrink: 0; }

/* ------------------------------------------------ Schwebender Anfrage-Knopf */

/* Begleitet den Besucher ab dem Ende des Hero und verschwindet wieder,
   sobald das Formular selbst im Bild ist — sonst stuende er doppelt.
   js/novera.js setzt dafuer .is-da. */
.schweber {
  position: fixed;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 80;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.96);
  transition: opacity .3s var(--ease), transform .3s var(--ease-out),
              visibility .3s;
}

.schweber.is-da {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Der Punkt pulst leicht — er zieht den Blick, ohne zu blinken. */
.schweber__punkt {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8FB4D9;
  animation: schweberPuls 2.6s var(--ease) infinite;
}

@keyframes schweberPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 180, 217, .5); }
  60%      { box-shadow: 0 0 0 7px rgba(143, 180, 217, 0); }
}

@media (max-width: 720px) {
  /* Auf dem Handy als Leiste ueber die volle Breite — dort ist ein
     kleiner Knopf in der Ecke zu leicht zu verfehlen. */
  .schweber {
    right: 1rem;
    left: 1rem;
    bottom: 1rem;
    justify-content: center;
  }
}

@media (max-width: 940px) {
  .band-cta__innen { flex-direction: column; align-items: flex-start; }
  .band-cta__aktion { width: 100%; }
  .band-cta__aktion .btn { width: 100%; }
}

/* ------------------------------------------------------- Leseleiste oben -- */

.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--akzent));
}

/* ------------------------------------------------------- Feinheiten (JS) -- */

/* Magnetische Knoepfe: der Zeiger zieht den Knopf ein paar Pixel zu sich.
   Ein sehr kleiner Effekt, der eine Seite sofort teurer wirken laesst —
   aber nur an Geraeten mit echtem Zeiger, auf Touch waere er sinnlos.
   --mx/--my kommen aus js/novera.js. */
.btn {
  --mx: 0px;
  --my: 0px;
}

@media (hover: hover) and (pointer: fine) {
  .btn.magnet {
    transform: translate3d(var(--mx), var(--my), 0);
    transition: transform .25s var(--ease-out), border-color .4s var(--ease),
                background-color .4s var(--ease), color .4s var(--ease),
                box-shadow .4s var(--ease);
  }
  /* Waehrend der Zeiger draufliegt, folgt der Knopf ohne Verzoegerung. */
  .btn.magnet.folgt { transition: transform .08s linear; }

  .btn.magnet:hover { transform: translate3d(var(--mx), calc(var(--my) - 2px), 0); }
}

/* Licht, das dem Zeiger ueber die Karte folgt. Gibt den Flaechen Tiefe,
   ohne dass etwas blinkt. */
.card, .wahl__karte, .extra {
  position: relative;
  isolation: isolate;
}

.card::after,
.wahl__karte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--zx, 50%) var(--zy, 50%),
              var(--glow), transparent 68%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.card:hover::after,
.wahl__karte:hover::after { opacity: 1; }

/* Sanftes Gegenlaufen beim Scrollen. --schub setzt js/novera.js.
   Das Bild ist leicht ueberskaliert, sonst blitzen beim Verschieben die
   Raender des Rahmens durch. Bewusst ohne transition: die Bewegung folgt
   dem Scrollen und wuerde sonst hinterherhinken. */
.parallax { will-change: transform; }

.parallax img {
  transform: translate3d(0, var(--schub, 0px), 0) scale(1.09);
  transition: none;
}

/* ------------------------------------------------------ Einblenden (JS) -- */

/* js/novera.js setzt .is-in, sobald das Element weit genug im Bild ist.

   Wichtig: Versteckt wird nur unter html.js — diese Klasse setzt das
   Skript im <head> als Allererstes. Bleibt das Skript aus (Fehler,
   abgeschaltetes JavaScript, blockierte Datei), fehlt die Klasse, und
   der gesamte Inhalt steht ganz normal sichtbar da. Ohne diese
   Absicherung waere die halbe Seite im Fehlerfall unsichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Ueberschriften erscheinen Wort fuer Wort — und zwar hinter einer Kante
   hervor statt bloss eingeblendet. */
/* Die Huelle ist die Kante, hinter der das Wort hervorfaehrt.
   Das padding unten gibt Unterlaengen (g, p, j) und den Schwuengen der
   Serifenschrift Raum; das gleich grosse negative margin nimmt diesen Raum
   im Layout wieder heraus, damit die Zeilenabstaende stimmen. */
.js .word-huelle {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}

.js .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(105%);
  transition: opacity .35s var(--ease-out),
              transform .55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 32ms);
}

.js .is-in .word {
  opacity: 1;
  transform: none;
}

/* Beim schnellen Scrollen gesetzt: kein Aufbau, sofort fertig. */
.js .sofort,
.js .sofort .word,
.js .sofort.reveal {
  transition: none !important;
  transition-delay: 0s !important;
}

/* Fliesstext, der beim Scrollen Wort fuer Wort aufhellt. Der Absatz liegt
   zunaechst gedaempft da und wird hell, waehrend er durchs Bild wandert —
   das zieht den Blick mit, ohne dass etwas blinkt.
   js/novera.js setzt --fortschritt beim Scrollen. */
.aufhellen { color: var(--dim); }

.aufhellen .hell-wort {
  display: inline-block;
  color: var(--dim);
  transition: color .35s var(--ease);
}
.aufhellen .hell-wort.an { color: var(--platinum); }

/* --------------------------------------------------------------- Responsiv -- */

@media (max-width: 1080px) {
  .services,
  .works { grid-template-columns: repeat(2, 1fr); }

  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
}

@media (max-width: 1080px) {
  .wahl { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  .block { grid-template-columns: 1fr; }
  /* Auf schmalen Schirmen steht das Bild immer oben — sonst haengt es je
     nach Block mal vor, mal hinter dem Text. */
  .block__bild,
  .block--gedreht .block__bild { order: -1; }

  .extra { grid-template-columns: auto 1fr; }
  .extra__wann { grid-column: 2; padding-top: .5rem; }
}

@media (max-width: 940px) {
  .nav {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    background: var(--menue-grund);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility .45s;
  }

  /* Der Weichzeichner gilt nur im offenen Zustand — sonst haelt der
     Browser dafuer dauerhaft eine Ebene vor, die niemand sieht. */
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }

  .nav__list {
    flex-direction: column;
    gap: 2.2rem;
    text-align: center;
  }

  .nav__link { font-size: 1.45rem; font-family: var(--font-display); }

  .burger { display: block; z-index: 96; }

  /* Der CTA-Button verschwindet mobil — Wortmarke, Burger und Button passen
     unter 940px nicht nebeneinander. Er steht stattdessen im geoeffneten
     Menue. Der Umschalter fuer hell/dunkel bleibt aber sichtbar: er waere
     sonst auf dem Handy gar nicht erreichbar. */
  .header__cta {
    order: 2;
    margin-left: auto;
    gap: .5rem;
  }
  .header__cta .btn { display: none; }

  .burger { order: 3; }

  .nav__cta { display: block; margin-top: 1rem; }

  .problem__grid,
  .about__grid,
  .contact__grid { grid-template-columns: 1fr; }

  .contact__aside { position: static; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --header-h: 68px; }

  .services,
  .works,
  .steps { grid-template-columns: 1fr; }

  .form__grid { grid-template-columns: 1fr; }

  /* min-height:auto, weil 100svh auf dem Telefon mit eingeblendeter
     Browserleiste den Inhalt nach unten schiebt. Der Kopfabstand bleibt
     derselbe wie oben — vorher stand hier ein kleinerer Wert und hat ihn
     stillschweigend ueberschrieben. */
  .hero {
    min-height: auto;
    padding-block: calc(var(--header-h) + 5.5rem) 7.5rem;
  }

  .mark__claim { display: none; }

  .hero__proof { gap: .8rem 1.6rem; font-size: .8rem; }

  .stat { flex-direction: column; gap: .5rem; }

  .footer__top { grid-template-columns: 1fr; gap: 2.2rem; }

  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }
}

@media (max-width: 420px) {
  .btn { padding-inline: 1.4rem; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

/* ----------------------------------------------- Bewegung reduzieren -- */

/* Wer im Betriebssystem "Bewegung reduzieren" gewaehlt hat, sieht die Seite
   vollstaendig — nur ohne Bewegung. Dauerlaeufer werden ganz abgeschaltet
   statt auf 0s gesetzt: bei 0s wuerden sie flackern statt zu ruhen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .marquee__track,
  .hero__scroll::after { animation: none !important; }

  .hero__scroll::after { opacity: .5; top: 20%; }

  .hero__title .chrome { animation: none !important; background-position: 0 50%; }

  /* Inhalte muessen ohne Animation trotzdem sichtbar sein. */
  .reveal,
  .word {
    opacity: 1 !important;
    transform: none !important;
  }
  .hell-wort { color: var(--platinum) !important; }

  .work { transform: none !important; }
}

/* ------------------------------------------------------------------ Druck -- */

@media print {
  .bg, .header, .marquee, .hero__scroll, .progress, .burger { display: none !important; }

  body { background: #fff; color: #111; }
  .title, .card__title { color: #111; }
  .card, .form { border-color: #ccc; background: #fff; }
  a { text-decoration: underline; }
}


/* ========================================================= 21b Lichtstrahlen -- */

/* Im Hellmodus wuerde ein helles Leuchten auf hellem Grund verschwinden und
   nur den Text aufweichen. Dort bleibt die Leinwand leer. */

/* ============================================================ 22 Zeichnungen -- */

/* Eigene Vektorgrafiken statt gekaufter Stockfotos. Drei Gruende:
   Erstens passen sie exakt in die Farbwelt — ein warmes Holztischfoto neben
   Chrom auf Schwarz sieht immer nach Fremdkoerper aus. Zweitens sind es
   wenige Kilobyte statt mehrerer hundert. Drittens ist die Zeichnung selbst
   ein Arbeitsnachweis: Wer sie sieht, sieht, dass hier jemand gestalten kann.

   Sie liegen inline im HTML, damit sie die Farbvariablen der Seite lesen und
   beim Umschalten zwischen hell und dunkel automatisch mitgehen. Als externe
   Datei ginge das nicht. */

.zeichnung {
  display: block;
  width: 100%;
  height: auto;
}

/* Flaechen und Linien der Zeichnung, in Tokens statt fester Werte. */
.zeichnung .zf-grund   { fill: var(--carbon); }
.zeichnung .zf-flaeche { fill: var(--slate); }
.zeichnung .zf-hoch    { fill: var(--elevated); }
.zeichnung .zl-fein    { stroke: var(--line); stroke-width: 1; fill: none; }
.zeichnung .zl-kraeftig{ stroke: var(--line-strong); stroke-width: 1.2; fill: none; }
.zeichnung .zb-hell    { fill: var(--platinum); }
.zeichnung .zb-silber  { fill: var(--silver); }
.zeichnung .zb-matt    { fill: var(--muted); opacity: .55; }
.zeichnung .zb-raster  { fill: var(--line); }

/* Der Chromverlauf der Marke liegt nicht hier, sondern als <linearGradient>
   im jeweiligen SVG — mit einer eigenen ID je Zeichnung. Zwei Grafiken auf
   derselben Seite duerfen sich keine Verlaufs-ID teilen, sonst greift die
   zweite auf die Definition der ersten zu. */

/* Im Hellmodus traegt der dunkle Rahmen nicht mehr — die Zeichnung bekommt
   eine eigene, hellere Abstufung statt einer bloss invertierten. */

/* Der Rahmen um die Zeichnung ist derselbe wie beim Foto vorher, nur ohne
   den Schleier: Eine Vektorgrafik braucht keine Angleichung an die Farbwelt,
   sie ist schon darin gebaut. */
.about__visual:has(.zeichnung)::after,
.block__bild:has(.zeichnung)::after { display: none; }

.about__visual .zeichnung { aspect-ratio: 4 / 3.2; }
.block__bild   .zeichnung { aspect-ratio: 4 / 3; }

/* Kein Zoom beim Ueberfahren — bei einer Strichzeichnung wirkt das billig. */
.block__bild:hover .zeichnung { transform: none; }

/* Der Lichtbalken wandert langsam ueber die Zeichnung, wie der Reflex auf
   der Hero-Ueberschrift. Sehr langsam und sehr schwach: Er soll auffallen,
   wenn man hinsieht, und nicht, wenn man liest. */
@keyframes zeichnungGlanz {
  from { transform: translateX(-38%); }
  to   { transform: translateX(138%); }
}

.zeichnung .glanz {
  animation: zeichnungGlanz 9s var(--ease) infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .zeichnung .glanz { animation: none; opacity: .25; }
}

/* =========================================================== 23 Referenzen -- */

/* Der Schaukasten fuer gebaute Projekte. Er steht weit oben auf der Seite,
   weil ein sichtbares Ergebnis schneller ueberzeugt als jede Beschreibung.

   Gezeigt werden zwei Ansichten in einem Bild: der grosse Bildschirm im
   angedeuteten Browserfenster und davor das Handy. Das belegt in einem Blick,
   was sonst zwei Absaetze behaupten muessten — naemlich dass die Seite auf
   beiden Geraeten funktioniert. */

.referenz { background: var(--carbon); }

.referenz__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.referenz__knopf {
  margin-top: 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

/* ------------------------------------------------------------ Schaukasten -- */

.referenz__schau {
  position: relative;
  /* Platz fuer das ueberstehende Handy an der unteren linken Ecke. */
  padding: 0 0 3.5rem 3rem;
}

.referenz__desktop {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--slate);
  box-shadow: var(--shadow-lg);
}

/* Angedeutete Fensterleiste — sie macht aus dem Bildschirmfoto ein Geraet
   und nimmt ihm das Flache. */
.referenz__leiste {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  background: var(--elevated);
  border-bottom: 1px solid var(--line);
}

.referenz__leiste span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  flex: none;
}

.referenz__adresse {
  margin: 0 0 0 .8rem;
  padding: .18rem .8rem;
  flex: 1;
  max-width: 15rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.referenz__desktop img {
  display: block;
  width: 100%;
  height: auto;
}

/* Das Handy sitzt vor dem Bildschirm und ragt links heraus. */
.referenz__handy {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(124px, 25%, 196px);
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: var(--slate);
  box-shadow: var(--shadow-lg);
}

.referenz__handy img {
  display: block;
  width: 100%;
  height: auto;
}

/* Beim Ueberfahren hebt sich der Kasten leicht — dieselbe Geste wie bei den
   Karten weiter unten, damit die Seite sich einheitlich anfuehlt. */
.referenz__schau .referenz__desktop,
.referenz__schau .referenz__handy {
  transition: transform .7s var(--ease-out);
}
.referenz__schau:hover .referenz__desktop { transform: translateY(-6px); }
.referenz__schau:hover .referenz__handy   { transform: translateY(-10px); }

/* ---------------------------------------------------------------- Schmal -- */

@media (max-width: 900px) {
  .referenz__grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Auf schmalen Schirmen wuerde das ueberlappende Handy den Bildschirm
     verdecken statt ihn zu ergaenzen. Es rueckt darum an den Rand und wird
     kleiner. */
  .referenz__schau { padding: 0 0 2.5rem 2rem; }
  .referenz__handy { width: clamp(96px, 26%, 132px); }
}

@media (max-width: 560px) {
  /* Ganz schmal traegt die Ueberlagerung nicht mehr: Das Handy verschwindet,
     der Bildschirm bekommt die volle Breite. */
  .referenz__schau { padding: 0; }
  .referenz__handy { display: none; }
  .referenz__adresse { max-width: 9rem; font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .referenz__schau:hover .referenz__desktop,
  .referenz__schau:hover .referenz__handy { transform: none; }
}

/* ==========================================================================
   Leistungen und Fallstudie
   ==========================================================================

   Beide Abschnitte arbeiten mit demselben Mittel: eine Lichtwolke hinter
   dem Inhalt, Glas darueber, und ein Raster, das absichtlich nicht
   aufgeht. Fuenf gleich grosse Kacheln waeren eine Tabelle; eine grosse
   und vier kleine sind eine Aussage darueber, was Novera hauptsaechlich
   macht.
   ========================================================================== */

.leistungen,
.referenz { position: relative; isolation: isolate; overflow-x: clip; }

.leistungen__licht,
.referenz__licht {
  position: absolute;
  inset-inline: 0;
  z-index: -1;
  pointer-events: none;
  height: 70%;
  background: radial-gradient(58% 60% at 74% 0%, var(--violett-hauch), transparent 68%);
}
.leistungen__licht { top: 0; }
.referenz__licht {
  top: 10%;
  background: radial-gradient(52% 54% at 22% 10%, var(--violett-hauch), transparent 68%);
}

/* ------------------------------------------------------------ Leistungen -- */

.leistungen__gitter {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}

.leistung {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--karte-flaeche), var(--karte-innen);
  overflow: hidden;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}

/* Der Lichtsaum oben. Er liegt in einem ::before, damit er beim Zeigen
   ueberblendet werden kann, ohne die Flaeche selbst anzufassen. */
.leistung::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(70% 100% at 50% 0%, var(--violett-hauch), transparent 70%);
  transition: opacity .45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .leistung:hover { border-color: var(--violett-saum); transform: translateY(-3px); }
  .leistung:hover::before { opacity: 1; }
}

.leistung__nr {
  position: absolute;
  top: clamp(1.4rem, 2.4vw, 1.9rem);
  right: clamp(1.4rem, 2.4vw, 1.9rem);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.leistung__ikon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.2rem;
  border-radius: 13px;
  border: 1px solid var(--violett-saum);
  background: rgba(124, 92, 255, .10);
  color: var(--violett-text);
}

.leistung__titel {
  margin: 0 0 .7rem;
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--platinum);
}

.leistung__text {
  margin: 0;
  max-width: 44ch;
  font-size: .94rem;
  line-height: 1.7;
  color: var(--silver);
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .leistungen__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistung--gross { grid-column: 1 / -1; }
  .leistung--gross .leistung__titel { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
  .leistung--gross .leistung__text { max-width: 52ch; font-size: 1rem; }
}

@media (min-width: 1000px) {
  .leistungen__gitter { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Eine breite Kachel oben, darunter vier — das Raster geht absichtlich
     nicht glatt auf, sonst liest es sich wie eine Preisliste. */
  .leistung--gross {
    grid-column: span 6;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 2rem;
    align-items: start;
    padding-block: clamp(2rem, 3vw, 2.6rem);
  }
  .leistung--gross .leistung__ikon { grid-row: span 2; margin-bottom: 0; }
  .leistung--gross .leistung__titel { align-self: center; margin-bottom: .5rem; }
  .leistung:not(.leistung--gross) { grid-column: span 3; }
}

@media (min-width: 1200px) {
  .leistung:not(.leistung--gross) { grid-column: span 3; }
  .leistungen__gitter > .leistung:nth-child(4),
  .leistungen__gitter > .leistung:nth-child(5) { grid-column: span 3; }
}

/* ----------------------------------------------------------- Fallstudie -- */

.fall__buehne {
  position: relative;
  margin-top: clamp(3.2rem, 6vw, 4.5rem);
  aspect-ratio: 16 / 10.4;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

.fall__glanz {
  position: absolute;
  inset: -16% 0 -6%;
  pointer-events: none;
  background: radial-gradient(50% 44% at 50% 44%, var(--violett-glow), transparent 72%);
  filter: blur(34px);
}

.fall__schirm,
.fall__handy {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--slate);
  border: 1px solid var(--line-strong);
  transform-style: preserve-3d;
  will-change: transform;
}

.fall__schirm {
  inset: 0 0 8% 0;
  border-radius: 16px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .06) inset,
    0 44px 90px -32px rgba(0, 0, 0, .86),
    0 0 0 1px rgba(124, 92, 255, .12);
  transform: translate3d(var(--schub-x, 0), var(--schub-y, 0), 0)
             rotateY(calc(var(--neig-y, 0deg) * .55))
             rotateX(calc(var(--neig-x, 0deg) * .55));
}
.fall__schirm img { display: block; width: 100%; height: auto; }

.fall__handy {
  right: 2%;
  bottom: 0;
  width: 19%;
  border-radius: 22px;
  border-color: rgba(255, 255, 255, .2);
  box-shadow:
    0 30px 54px -20px rgba(0, 0, 0, .88),
    0 0 0 1px rgba(124, 92, 255, .2);
  transform: translate3d(var(--schub-x, 0), var(--schub-y, 0), 90px)
             rotateY(calc(var(--neig-y, 0deg) * 1.5))
             rotateX(calc(var(--neig-x, 0deg) * 1.5));
}
.fall__handy img { display: block; width: 100%; height: auto; }

.fall__unten {
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(3.2rem, 5vw, 4.2rem);
}

.fall__fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--line);
  overflow: hidden;
}
.fall__fakten > div {
  padding: 1.1rem 1.2rem;
  background: var(--carbon);
}
.fall__fakten dt {
  margin-bottom: .35rem;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
}
.fall__fakten dd {
  margin: 0;
  font-size: .94rem;
  line-height: 1.5;
  color: var(--platinum);
}

.fall__hinweis {
  margin: clamp(2.4rem, 4vw, 3.2rem) 0 0;
  font-size: .94rem;
  color: var(--muted);
}
.fall__hinweis a { color: var(--platinum); }

@media (min-width: 900px) {
  .fall__unten { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .fall__fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------- Ruhe statt Bewegung ------- */

@media (prefers-reduced-motion: reduce) {
  .hero__title .chrome,
  .hero__title .leuchten { animation: none; }
  .hero__scroll::after { animation: none; opacity: .5; }
  .leistung { transition: none; }
  .fall__schirm, .fall__handy,
  .buehne__schirm, .buehne__handy, .buehne__etikett { transition: none; }
}

/* --------------------------------------------------- Geraeterahmen ------- */

/* Aus dem Screenshot wird ein Geraet: Rahmen, Hoehrmuschel, tiefe Rundung.
   Ohne das wirkt ein hochkantes Bild neben einem Browserfenster wie ein
   zweiter Screenshot, nicht wie ein Telefon. */

.buehne__handy,
.fall__handy {
  padding: 5px;
  background: linear-gradient(160deg, #2A2E36, #0D0F13 46%, #1A1D23);
}

.buehne__handy img,
.fall__handy img {
  border-radius: 15px;
}

.geraet__ohr {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  width: 26%;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .22);
}

/* Das Handy im Portfolio darf groesser sein — dort ist es das Argument,
   nicht die Beigabe. */
.fall__handy {
  right: 3%;
  bottom: -2%;
  width: 24%;
  border-radius: 26px;
}
.fall__handy img { border-radius: 21px; }

.fall__notiz {
  position: absolute;
  right: 29%;
  bottom: 4%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .5rem .95rem;
  border-radius: 99px;
  border: 1px solid var(--violett-saum);
  background: #12101F;
  font-size: .76rem;
  color: var(--platinum);
  white-space: nowrap;
  transform: translate3d(var(--schub-x, 0), var(--schub-y, 0), 120px);
}

@media (max-width: 719px) {
  /* Auf schmalen Schirmen steht das Handy neben dem Bildschirm statt
     darauf — uebereinander waere beides zu klein zum Erkennen. */
  .fall__handy { width: 30%; right: 0; bottom: -4%; }
  .fall__notiz { display: none; }
  .buehne__handy { width: 30%; right: 0; }
  .buehne__etikett { font-size: .7rem; padding: .42rem .8rem; }
}

/* ==========================================================================
   Nachschaerfung: Header, Buttons, Tiefe, Spotlight
   ========================================================================== */

/* ------------------------------------------------------------- Header ---- */

/* Der Kopf ist keine Folie ueber dem Hero, sondern eine eigene Leiste.
   Durchsichtig sah der bewegte Shader durch die Navigation hindurch —
   die Beschriftungen standen dann auf wandernden Farbflecken.

   Flaeche und Weichzeichner liegen in einem ::before, NICHT auf .header
   selbst. Ein backdrop-filter macht sein Element zum Bezugsrahmen fuer
   position:fixed darin — das Mobilmenue liegt in der Kopfleiste und
   spannte sich dadurch ueber deren 67 Pixel statt ueber den Bildschirm.
   Es klappte auf und blieb leer. */
.header {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, .07);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #0B0C10, #0A0B0F);
  transition: background .45s var(--ease);
}

/* Ein feiner Lichtsaum an der Unterkante — die Leiste bekommt dadurch
   eine Oberflaeche statt nur eine Grenze. */
.header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(124, 92, 255, .22) 24%, rgba(196, 181, 253, .34) 50%,
    rgba(124, 92, 255, .22) 76%, transparent);
  opacity: .7;
}

.header.is-stuck { border-bottom-color: rgba(255, 255, 255, .10); }
.header.is-stuck::before {
  background: linear-gradient(180deg, #08090C, #07080B);
}
.header.is-stuck::after { opacity: 1; }

/* Der Handlungsaufruf im Kopf bekommt einen eigenen Schein. */
.header__cta .btn--primary,
.nav__cta .btn--primary {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06),
    0 6px 20px -8px rgba(124, 92, 255, .5);
}

/* -------------------------------------------------------------- Buttons -- */

/* Mehr Koerper: eine Lichtkante oben, ein Schatten unten, und beim
   Zeigen ein Schein in der Markenfarbe statt nur einer Verschiebung. */
.btn {
  padding: 1rem 1.95rem;
  border-radius: 14px;
  font-weight: 550;
  transition: transform .45s var(--ease-out), border-color .45s var(--ease),
              background-color .45s var(--ease), color .45s var(--ease),
              box-shadow .45s var(--ease);
}

.btn--sm { padding: .72rem 1.35rem; border-radius: 11px; }
.btn--lg { padding: 1.15rem 2.4rem; border-radius: 16px; font-size: 1.02rem; }

.btn--primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(0, 0, 0, .3),
    0 10px 30px -12px rgba(0, 0, 0, .8);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 4px rgba(0, 0, 0, .3),
    0 18px 44px -14px rgba(124, 92, 255, .55),
    0 0 0 1px rgba(196, 181, 253, .3);
}

/* Der zweite Knopf ist Glas, nicht Umriss: dadurch stehen beide klar
   auseinander, ohne dass der zweite billig wirkt. */
.btn--ghost {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.btn--ghost:hover {
  transform: translateY(-3px);
  border-color: var(--violett-saum);
  background: rgba(124, 92, 255, .10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 16px 38px -16px rgba(124, 92, 255, .45);
}

.btn__arrow { transition: transform .45s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --------------------------------------------- Spotlight ueber dem Showcase */

/* Ein weicher Lichtspot ueber dem Portfolio-Mockup. Er folgt am Zeiger
   (novera.js setzt --spot-x/--spot-y) und steht sonst mittig. Bewusst
   sehr weich: ein harter Kegel sieht nach Buehnenlicht aus, nicht nach
   Fotografie. */
.fall__buehne { --spot-x: 50%; --spot-y: 34%; }

.fall__spot {
  position: absolute;
  inset: -20% -12% -10%;
  z-index: 3;
  pointer-events: none;
  opacity: .9;
  background:
    radial-gradient(38% 42% at var(--spot-x) var(--spot-y),
      rgba(255, 255, 255, .14), rgba(196, 181, 253, .07) 42%, transparent 70%);
  mix-blend-mode: screen;
  transition: opacity .6s var(--ease);
}

/* ------------------------------------------------------ Mehr Raumtiefe --- */

/* Die Showcases bekommen die staerkste Perspektive, die Karten nur eine
   Andeutung. Ueberall gleich viel 3D waere Jahrmarkt. */
.fall__buehne { perspective: 1200px; }
.hero__buehne { perspective: 1150px; }

.fall__schirm {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .07) inset,
    0 10px 24px -12px rgba(0, 0, 0, .7),
    0 54px 110px -36px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(124, 92, 255, .14),
    0 0 80px -30px rgba(124, 92, 255, .4);
}

.buehne__schirm {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .07) inset,
    0 8px 20px -10px rgba(0, 0, 0, .7),
    0 40px 84px -30px rgba(0, 0, 0, .86),
    0 0 0 1px rgba(124, 92, 255, .14),
    0 0 70px -28px rgba(124, 92, 255, .34);
}

/* Schwebendes Ein- und Ausatmen. Sehr langsam und sehr klein — man soll
   es eher spueren als sehen. */
@keyframes schweben {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
.fall__handy { animation: schweben 7.5s var(--ease) infinite; }
.buehne__handy { animation: schweben 8.5s var(--ease) infinite .6s; }

@media (prefers-reduced-motion: reduce) {
  .fall__handy, .buehne__handy { animation: none; }
  .btn:hover, .btn--primary:hover, .btn--ghost:hover { transform: none; }
  .fall__spot { transition: none; }
}

/* ------------------------------------------------------ iPhone-Mockup ---- */

/* Ein Geraet statt eines hochkanten Bildes: Titanrahmen mit Lichtkante,
   Dynamic Island, Seitentasten, Home-Strich. Der Unterschied zum blossen
   Screenshot ist der Rahmen — er sagt "so sieht es in der Hand aus". */

.iphone {
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.iphone .iphone__schirm {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 30px;
  /* Titanrahmen: aussen heller Grat, innen tiefe Fase. */
  box-shadow:
    0 0 0 2px #0B0D11,
    0 0 0 6px #23262D,
    0 0 0 7px rgba(255, 255, 255, .20),
    0 0 0 8px rgba(0, 0, 0, .55),
    0 30px 60px -20px rgba(0, 0, 0, .9),
    0 0 0 9px rgba(124, 92, 255, .14);
}

.iphone .iphone__schirm img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Dynamic Island */
.iphone__insel {
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  aspect-ratio: 5.2 / 1;
  border-radius: 99px;
  background: #06070A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Home-Strich */
.iphone__strich {
  position: absolute;
  bottom: 1.1%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .62);
}

/* Seitentasten. Sie sitzen auf dem Rahmen, nicht auf dem Bild. */
.iphone__knopf {
  position: absolute;
  z-index: 2;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #31353D, #171A1F);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
}
.iphone__knopf--stumm  { left: -9px; top: 15%;   height: 4%; }
.iphone__knopf--lauter { left: -9px; top: 23%;   height: 8%; }
.iphone__knopf--leiser { left: -9px; top: 33.5%; height: 8%; }
.iphone__knopf--seite  { right: -9px; top: 26%;  height: 12%; }

/* Der Rahmen braucht etwas mehr Luft als der frühere flache Ausschnitt. */
.fall__handy.iphone { right: 4%; bottom: 1%; width: 23%; }
.buehne__handy.iphone { right: -1%; bottom: 3%; width: 25%; }

@media (max-width: 719px) {
  .fall__handy.iphone { width: 30%; right: 1%; bottom: 0; }
  .buehne__handy.iphone { width: 30%; right: 0; bottom: 2%; }
  .iphone .iphone__schirm { border-radius: 20px; }
  .iphone__knopf { display: none; }
}

/* ==========================================================================
   Liquid Glass — die Inhaltsoberflaeche
   ==========================================================================

   Eine einzige zusammenhaengende Flaeche statt vieler kleiner Glaskarten.
   Sie liegt ueber der bewegten Leinwand und daempft sie: der Shader bleibt
   als Atmosphaere spuerbar, tritt aber hinter den Inhalt zurueck.

   Drei Dinge machen den Unterschied zu gewoehnlichem Glassmorphism:
   die Lichtkante oben (eine Glasplatte hat eine Kante, keinen Rand), der
   innere Schimmer direkt darunter, und dass die Flaeche gross ist — Glas
   wirkt erst als Flaeche wie Glas.
   ========================================================================== */

.glas {
  position: relative;
  z-index: 2;
  /* So breit wie der Textsatz; links und rechts bleibt der Grund frei. */
  width: min(100% - 2 * var(--gutter), calc(var(--wrap) + 2 * var(--gutter)));
  margin-inline: auto;
  /* Greift in den Hero hinein — der Inhalt setzt sichtbar auf. */
  margin-top: clamp(-5rem, -7vh, -3.5rem);
  padding-top: clamp(3.5rem, 6vh, 5.5rem);
  border-radius: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(255, 255, 255, .07);
  /* Deckend statt durchscheinend. Vorher stand hier ein
     backdrop-filter ueber die volle Plattenhoehe — der wird bei jedem
     Scrollbild neu gerechnet und war der mit Abstand teuerste Posten
     der Seite. Eine Farbe kostet nichts und liest sich besser. */
  background:
    linear-gradient(180deg, rgba(124, 92, 255, .07) 0%, transparent 26%),
    linear-gradient(180deg, #0D0F15 0%, #0A0B10 42%, var(--void) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 -24px 60px -34px rgba(0, 0, 0, .7),
    0 40px 110px -50px rgba(0, 0, 0, .85);
}

/* Der Auslauf im Hero trifft die Glaskante — zusammen ergibt das die
   Uebergangszone von rund 160 Pixeln. */
.hero__auslauf {
  height: clamp(6rem, 14vh, 10rem);
  background: linear-gradient(180deg,
    rgba(8, 9, 11, 0) 0%,
    rgba(8, 9, 11, .24) 48%,
    rgba(8, 9, 11, .50) 80%,
    rgba(8, 9, 11, .62) 100%);
}

/* Die Abschnitte im Glas brauchen keine eigene Flaeche mehr. */
/* Innerhalb des Glases traegt die Platte den Rinnstein, nicht mehr
   jeder Abschnitt fuer sich. */
.glas .section--edge { background: transparent; }
.glas .wrap { max-width: var(--wrap); }

/* Das Laufband bringt sonst eine eigene Flaeche und zwei harte Linien
   mit — quer ueber das Glas sieht das nach aufgeklebtem Band aus. */
.glas .marquee {
  background: rgba(255, 255, 255, .022);
  border-block-color: rgba(255, 255, 255, .07);
}

@media (max-width: 719px) {
  .glas {
    width: calc(100% - 2 * var(--gutter));
    margin-top: clamp(-4.5rem, -6vh, -3rem);
    padding-top: clamp(2.5rem, 5vh, 4rem);
    border-radius: 22px;
  }
}


/* Unterseiten haben keinen Hero, unter dem die Platte hervorkommen
   koennte. Sie setzt dort unter dem Kopf an — mit Abstand, damit man
   sieht, dass sie schwebt, und mit Rundung auch unten. */
.glas--seite {
  margin-top: calc(var(--header-h) + clamp(2.5rem, 4vw, 3.5rem));
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3.2rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
}

/* Der Kopfabstand steckt jetzt in der Platte, nicht mehr im Abschnitt. */
.glas--seite > .section:first-of-type,
.glas--seite > .section--edge:first-of-type { padding-top: 0; }

/* ==========================================================================
   Glas: Dicke, Glanz, Raum
   ==========================================================================

   Eine Flaeche mit Weichzeichner sieht aus wie Milchglas. Damit sie wie
   eine Platte aussieht, braucht sie drei Dinge, die eine Flaeche nicht
   hat: eine Seitenflaeche, einen gerichteten Glanz und eine Ecke, an der
   sich das Licht faengt.
   ========================================================================== */

.glas {

/* Mehr Tiefe unter der Platte. Der Schatten faellt jetzt gerichtet und
   weiter — dadurch schwebt sie hoeher ueber dem Shader. */
.glas {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    inset 0 30px 60px -38px rgba(214, 203, 255, .36),
    inset 0 -50px 80px -60px rgba(0, 0, 0, .6),
    0 -24px 60px -34px rgba(0, 0, 0, .6),
    0 30px 60px -30px rgba(0, 0, 0, .55),
    0 70px 160px -60px rgba(0, 0, 0, .9),
    0 0 110px -50px rgba(150, 120, 255, .38);
}

/* Die Abschnitte im Glas bekommen eine leichte eigene Ebene, damit
   Inhalt und Platte nicht auf derselben Hoehe kleben. */
.glas > .section { position: relative; z-index: 2; }

/* Auf dem Telefon bleibt die Dicke, der wandernde Glanz entfaellt —
   ohne Zeiger bewegt er sich ohnehin nicht, und der Filter kostet. */
@media (max-width: 719px) {
  .glas__glanz::before { display: none; }
  .glas__dicke { inset: -2px -2px auto -2px; height: 30%; }
  .glas {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .11),
      inset 0 24px 48px -34px rgba(214, 203, 255, .3),
      0 30px 70px -34px rgba(0, 0, 0, .8);
  }
}

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

/* Der zurueckgetretene Knopf bekommt dieselbe Glasbehandlung wie
   .btn--ghost. Als reiner Umriss sah er auf der dunklen Kopfleiste
   hohl aus — als waere die Beschriftung nicht geladen. */
.btn--zurueckhaltend {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.btn--zurueckhaltend:hover {
  border-color: var(--violett-saum);
  background: rgba(124, 92, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 12px 30px -14px rgba(124, 92, 255, .45);
}