/* ==========================================================================
   visualaized — Design System
   Verbindliche Umsetzung von Brand Book v1.0, Kapitel 9 + 10.
   Änderungen an Farben, Typo, Radien oder Motion nur über Art Direction.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens (Brand Book 10.1)
   -------------------------------------------------------------------------- */
:root {
  /* Fläche */
  --canvas:        #F7F6F3;
  --canvas-raised: #FFFFFF;
  --ink:           #101012;
  --ink-text:      #232323;

  /* Akzent — es gibt keine zweite Akzentfarbe (Regel 4) */
  --signal:        #0055FE;
  --signal-deep:   #074BD3;
  --signal-dusk:   #153679;
  --signal-grad:   radial-gradient(circle at 30% 110%, #0055FE 0%, #074BD3 57%, #153679 79%, #101012 100%);

  /* Neutral */
  --ink-600:       #5C5C60;
  --ink-400:       #8E8E92;
  --ink-300:       #A9A8A4;
  --line:          rgba(16, 16, 18, .10);
  --line-dark:     rgba(255, 255, 255, .12);

  /* Typo */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Labels, Eyebrows und Meta laufen bewusst in der Textschrift — nur Versalien,
     Laufweite und Größe tragen den Ton, nicht eine zweite Schrift. */
  --font-mono:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Radius */
  --r-frame: 40px;
  --r-xl:    32px;
  --r-l:     20px;
  --r-m:     12px;
  --r-pill:  999px;

  /* Raster */
  --container: 1296px;
  --gutter:    64px;
  --section-y: 120px;
  --nav-h:     64px;
  /* Die Leiste schwebt: Abstand zur Rahmenkante oben und seitlich. */
  --nav-edge:  8px;
  --nav-top:   18px;

  /* Schatten */
  --shadow-s: 0 1px 2px rgba(16,16,18,.04), 0 2px 8px rgba(16,16,18,.04);
  --shadow-m: 0 2px 4px rgba(16,16,18,.03), 0 12px 32px rgba(16,16,18,.06);
  --shadow-l: 0 4px 8px rgba(16,16,18,.04), 0 24px 64px rgba(16,16,18,.10);
  --glow:     0 0 80px rgba(0,85,254,.18);

  /* Motion */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  200ms;
  --dur-base:  400ms;
  --dur-slow:  800ms;
}

@media (max-width: 1023px) {
  :root { --gutter: 40px; --nav-top: 14px; }
}
@media (max-width: 767px) {
  :root { --gutter: 24px; --section-y: 72px; --r-frame: 24px; }
  :root { --nav-h: 56px; --nav-edge: 0px; --nav-top: 10px; }
}

/* --------------------------------------------------------------------------
   2. Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-edge) + var(--nav-top) + var(--nav-h) + 24px);
}

body {
  margin: 0;
  /* Die Seite sitzt als gerahmte Fläche (Brand Book 9.5) */
  padding: 8px;
  background: #060607;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -.012em;
  color: var(--ink-text);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) { body { padding: 0; } }

.frame {
  background: var(--canvas);
  border-radius: var(--r-frame);
  overflow: clip;
}
@media (max-width: 767px) { .frame { border-radius: 0; } }

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

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--signal); color: #fff; }

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

.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;
}

/* --------------------------------------------------------------------------
   3. Typografie (Brand Book 9.4)
   Headlines: Instrument Serif, nie Versalien (Regel 5).
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  margin: 0;
  color: var(--ink-text);
}

.display-xxl { font-size: clamp(56px, 12vw, 128px); line-height: .94; letter-spacing: -.04em; }
.display-xl  { font-size: clamp(42px, 6.2vw, 76px);  line-height: 1.05; letter-spacing: -.035em; }
.display-l   { font-size: clamp(34px, 4.4vw, 56px);  line-height: 1.07; letter-spacing: -.035em; }
.display-m   { font-size: clamp(28px, 3.1vw, 40px);  line-height: 1.15; letter-spacing: -.03em; }
.display-s   { font-size: clamp(21px, 2.1vw, 28px);  line-height: 1.21; letter-spacing: -.02em; }

.body-l { font-size: 17px;   line-height: 27px; letter-spacing: -.015em; }
.body-m { font-size: 15px;   line-height: 24px; letter-spacing: -.012em; }
.body-s { font-size: 13.5px; line-height: 20px; letter-spacing: -.01em; }

p { margin: 0; max-width: 68ch; }

.lead { font-size: 17px; line-height: 27px; letter-spacing: -.015em; color: var(--ink-600); }

/* Kursiv nur für Zitate und einzelne betonte Worte in Headlines (Regel 5) */
.em { font-style: italic; }

.label, .meta {
  max-width: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.label {
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.meta {
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ink-400);
}

/* Eyebrow: Mono-Versalien mit 6-px-Punkt in Signal (Brand Book 10.2) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  max-width: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
}
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }

/* Dunkle Sektionen sind Zäsuren — max. zweimal pro Seite (Regel Farbe 3) */
.section--ink {
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .eyebrow { color: rgba(255, 255, 255, .55); }
.section--ink .lead { color: rgba(255, 255, 255, .68); }
.section--ink .meta { color: rgba(255, 255, 255, .45); }

.section-head { max-width: 720px; margin-bottom: 64px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 40px; }
}

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. Buttons (Brand Book 10.2)
   Signature-Hover: Text schiebt nach oben aus, identischer Text schiebt nach.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding-inline: 26px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }

.btn__swap { position: relative; display: block; overflow: hidden; height: 20px; }
.btn__swap span {
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn__swap span:last-child { position: absolute; inset: 0; transform: translateY(100%); }
.btn:hover .btn__swap span:first-child { transform: translateY(-100%); }
.btn:hover .btn__swap span:last-child  { transform: translateY(0); }

.btn--invert    { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--ink-text); --btn-bd: var(--line); }
.btn--secondary:hover { --btn-bd: rgba(16,16,18,.28); }
.section--ink .btn--secondary { --btn-fg: #fff; --btn-bd: var(--line-dark); }
.section--ink .btn--secondary:hover { --btn-bd: rgba(255,255,255,.34); }

.btn--wide { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link:hover { border-bottom-color: currentColor; }
.link--signal { color: var(--signal); }
.section--ink .link { color: #fff; }

.link__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.link:hover .link__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Karte / Tag (Brand Book 10.2)
   -------------------------------------------------------------------------- */
.card {
  background: var(--canvas-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 32px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.card { text-decoration: none; display: block; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--ink-600); }

.section--ink .card {
  background: rgba(255,255,255,.04);
  border-color: var(--line-dark);
}
.section--ink .card p { color: rgba(255,255,255,.66); }

.tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.section--ink .tag { border-color: var(--line-dark); color: rgba(255,255,255,.66); }

/* --------------------------------------------------------------------------
   7. Navigation (Brand Book 10.2)
   -------------------------------------------------------------------------- */
/* Schwebende Glasleiste: sie liegt ueber dem Inhalt, nicht auf ihm. Die
   Tiefe entsteht aus drei Lagen — Unschaerfe, Lichtkante, Schlagschatten. */
.nav {
  position: fixed;
  top:   calc(var(--nav-edge) + var(--nav-top));
  left:  calc(var(--nav-edge) + var(--gutter));
  right: calc(var(--nav-edge) + var(--gutter));
  z-index: 100;
  /* Gleiche Kanten wie .container — die Leiste steht auf der Inhaltsbreite. */
  max-width: var(--container);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: clamp(16px, 2.4vw, 26px);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.16) 52%, rgba(255,255,255,.30) 100%),
    rgba(247, 246, 243, .62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 0 0 1px rgba(16,16,18,.05),
    0 2px 6px -2px rgba(16,16,18,.10),
    0 18px 40px -18px rgba(16,16,18,.34);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/* Reflex an der oberen Kante — das, was Glas von Milchscheibe unterscheidet. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.10) 34%, rgba(255,255,255,0) 62%);
}
.nav > * { position: relative; z-index: 1; }

/* Ohne Backdrop-Filter bleibt nur Deckkraft — dann lieber richtig deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(247, 246, 243, .97); }
}

.nav.is-hidden {
  transform: translateY(calc(-100% - var(--nav-edge) - var(--nav-top) - 12px));
  box-shadow: none;
}

.nav__logo { display: block; height: 17.6px; }
.nav__logo img { height: 100%; width: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__menu a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__menu a:hover { color: var(--signal); }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
}

@media (max-width: 1023px) {
  .nav__menu, .nav .btn { display: none; }
  .nav__burger { display: inline-flex; }
}

.nav-panel {
  position: fixed;
  inset: 8px;
  z-index: 200;
  background: var(--canvas);
  border-radius: var(--r-frame);
  padding: 24px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
@media (max-width: 767px) { .nav-panel { inset: 0; border-radius: 0; } }
.nav-panel.is-open { opacity: 1; visibility: visible; }
.nav-panel__top { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.nav-panel__list {
  list-style: none;
  margin: auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-panel__list a {
  display: block;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.14;
  letter-spacing: -.03em;
  text-decoration: none;
  color: var(--ink-text);
}

/* --------------------------------------------------------------------------
   8. Marquee (Brand Book 12.2)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
  /* Dauer und Strecke setzt site.js aus der gemessenen Breite — so läuft das
     Band auf jedem Gerät gleich schnell. Ohne JavaScript greifen die Werte
     hier. */
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-1 * var(--marquee-zyklus, 50%))); } }

.marquee img {
  height: 30px;
  width: auto;
  opacity: .48;
  filter: grayscale(1);
  transition: opacity var(--dur-base) var(--ease-out);
}
.marquee img:hover { opacity: .8; }

/* --------------------------------------------------------------------------
   9. Kennzahlen (Brand Book 12.2 — Count-up)
   -------------------------------------------------------------------------- */
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink-text);
  font-variant-numeric: tabular-nums;
}
.section--ink .stat__value { color: #fff; }
.stat__label { margin-top: 14px; color: var(--ink-600); }
.section--ink .stat__label { color: rgba(255,255,255,.62); }

/* --------------------------------------------------------------------------
   10. Akkordeon / FAQ (Brand Book 10.2)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.21;
  letter-spacing: -.02em;
  color: var(--ink-text);
}
.accordion__icon {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-600);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.accordion__item.is-open .accordion__icon {
  transform: rotate(45deg);
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; }
.accordion__inner > p {
  padding-bottom: 26px;
  color: var(--ink-600);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   11. Formular
   Statusfarben nur hier, bewusst gedämpft (Brand Book 9.3, Regel 2).
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; }

.field > label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-m);
  color: #fff;
  font-size: 15px;
  letter-spacing: -.012em;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
textarea.input { height: auto; padding: 14px 16px; min-height: 104px; resize: vertical; line-height: 24px; }
select.input { appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
select.input option { background: #1a1a1e; color: #fff; }
.input::placeholder { color: rgba(255,255,255,.30); }
.input:hover { border-color: rgba(255,255,255,.22); }
.input:focus { outline: none; border-color: var(--signal); background: rgba(255,255,255,.07); }

.file-drop {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-text);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.012em;
  padding: 16px;
  border: 1px dashed var(--line-dark);
  border-radius: var(--r-m);
  cursor: pointer;
  color: rgba(255,255,255,.62);
  font-size: 14px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.file-drop:hover, .file-drop.is-over { border-color: var(--signal); background: rgba(0,85,254,.07); }
.file-drop__icon {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.62);
}
.file-drop__icon svg { display: block; }
.file-drop__thumb {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: cover;
  display: none;
  background: rgba(255,255,255,.06);
}
.file-drop.has-file .file-drop__thumb { display: block; }
.file-drop.has-file .file-drop__icon { display: none; }
/* Der Dateiname darf das Formular nie breiter machen: er kuerzt, statt zu schieben. */
.file-drop [data-file-label] { min-width: 0; }
.file-drop.has-file [data-file-label] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.form-status[data-state="error"]   { color: #E2A0A0; }
.form-status[data-state="success"] { color: #9DC4A8; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(255,255,255,.62); padding-block: 88px 40px; }
.footer a { color: rgba(255,255,255,.62); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.footer a:hover { color: #fff; }
.footer h4 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14px; }

/* Wortmarke klein über dem Absatz — die Trennlinie trägt jetzt die Fußzeile. */
.footer__mark {
  display: block;
  height: 20px;
  width: auto;
  margin-bottom: 22px;
  opacity: .9;
}

.footer__base {
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
}

/* --------------------------------------------------------------------------
   13. Motion (Brand Book 12.2 — Rise-in)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   14. Seitenbausteine
   Gemeinsam genutzt von Startseite, Leistungs- und Projektseiten. Der per
   fetch nachgeladene Projektinhalt braucht dieselben Regeln wie die
   eigenständige Projektseite — deshalb stehen sie hier und nicht inline.
   ========================================================================== */

/* -- Hero ---------------------------------------------------------------- */
.hero, .lp-hero { padding-top: calc(var(--nav-edge) + var(--nav-top) + var(--nav-h) + 56px); padding-bottom: var(--section-y); }
.hero__grid, .lp-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
.hero__lead { margin-top: 24px; max-width: 46ch; }
.hero__actions, .lp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__note { margin-top: 20px; }
.hero__media, .lp-hero__media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-l), var(--glow);
  aspect-ratio: 4 / 5;
}
.hero__media video, .lp-hero__media img, .lp-hero__media video {
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 1023px) {
  .hero__grid, .lp-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__media, .lp-hero__media { aspect-ratio: 16 / 10; }
}

.crumb { display: flex; gap: 8px; margin-bottom: 20px; }
.crumb a { color: var(--ink-400); text-decoration: none; }
.crumb a:hover { color: var(--signal); }

/* -- Showreel ------------------------------------------------------------ */
.showreel { margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-l); }
.showreel video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* -- Arbeiten ------------------------------------------------------------ */
.work__media { display: block; border-radius: var(--r-l); overflow: hidden; background: var(--ink); }
.work__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.work__media:hover img { transform: scale(1.02); }
.work__body { padding-top: 28px; }
.work__body h3 { margin: 12px 0 14px; }
.work__body h3 a { text-decoration: none; }
.work__body h3 a:hover { color: var(--signal); }
.work__body p { color: var(--ink-600); }
.work__facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--ink-600); }
.work__facts .label { display: inline-block; min-width: 52px; color: var(--ink-text); }
/* Weg zur vollstaendigen Uebersicht — steht fuer sich, nicht in einer Kachel. */
.work-all { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); display: flex; justify-content: center; }

/* -- Listen, Raster, Schritte -------------------------------------------- */
.card--wide { grid-column: 1 / -1; }
@media (max-width: 767px) { .card--wide { grid-column: auto; } }

.foundation {
  margin-top: 40px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  color: var(--ink-600);
  max-width: none;
}
.foundation .label { display: block; color: var(--signal); margin-bottom: 10px; }
.foundation strong { color: var(--ink-text); font-weight: 500; }

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--ink-600); }
.ticks li { position: relative; padding-left: 20px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--signal); opacity: .5;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 1023px) { .split { grid-template-columns: 1fr; gap: 40px; } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (max-width: 767px)  { .steps { grid-template-columns: 1fr; gap: 32px; } }
.step { padding-top: 24px; border-top: 1px solid var(--line); }
.step__no { display: block; color: var(--signal); margin-bottom: 16px; }
.step h3 { margin-bottom: 12px; }
.step p { color: var(--ink-600); }

.pakete .card { display: flex; flex-direction: column; }
.card--marked { border-color: rgba(0,85,254,.34); box-shadow: var(--shadow-s); }
.price { margin: 0 0 6px; white-space: nowrap; font-size: clamp(28px, 2.6vw, 36px); }

/* Zitat: eigenständige Zäsur, nicht nur ein größerer Absatz.
   Anführungszeichen als Signal-Akzent, Text zentriert, Haarlinien als Rahmen. */
.quote {
  margin: 0;
  padding-block: 56px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.quote__eyebrow { justify-content: center; margin-bottom: 36px; }
.quote__text {
  position: relative;
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-text);
  text-wrap: balance;
}
.quote__text::before,
.quote__text::after {
  font-style: normal;
  color: var(--signal);
}
.quote__text::before { content: "\201E"; }
.quote__text::after  { content: "\201C"; }
.quote__text .em { font-style: italic; }
@media (max-width: 767px) {
  .quote { padding-block: 40px; }
  .quote__text { max-width: none; }
}

.faq-wrap { max-width: 900px; }

/* -- Kontakt ------------------------------------------------------------- */
.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.kontakt > * { min-width: 0; }
@media (max-width: 1023px) { .kontakt { grid-template-columns: 1fr; gap: 48px; } }
.kontakt__direct { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.kontakt__direct li { display: flex; flex-direction: column; gap: 6px; }
.kontakt__direct .label { color: rgba(255,255,255,.42); }
.kontakt__direct .body-m { color: rgba(255,255,255,.72); }
.kontakt__form {
  min-width: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  padding: 36px;
}
@media (max-width: 767px) { .kontakt__form { padding: 24px; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.sent .eyebrow { color: rgba(255,255,255,.55); }
.sent h3 { color: #fff; }

.footer .grid-4 { gap: 40px 24px; }

/* -- Projektseite -------------------------------------------------------- */
.pj { padding-bottom: 96px; }
.pj__head { max-width: 820px; margin-bottom: 56px; }
.pj__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; }
.pj__hero { border-radius: var(--r-xl); overflow: hidden; background: var(--ink); }
.pj__hero img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.pj__text { max-width: 68ch; display: flex; flex-direction: column; gap: 20px; color: var(--ink-600); }
.pj__results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
@media (max-width: 767px) { .pj__results { grid-template-columns: 1fr; } }
.pj__results li { position: relative; padding-left: 20px; color: var(--ink-600); }
.pj__results li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--signal); opacity: .5;
}
.pj__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1023px) { .pj__gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pj__gallery { grid-template-columns: 1fr; } }
.pj__gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-m); background: var(--ink); }
.pj__video { border-radius: var(--r-xl); overflow: hidden; background: var(--ink); }
.pj__video video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.pj__block { margin-top: 72px; }
.pj__block > h2 { margin-bottom: 28px; }
.pj__cta {
  margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}

/* -- Einwilligung: schwebende Karte unten links -------------------------- */
.consent {
  position: fixed;
  left: clamp(10px, 2vw, 24px);
  right: clamp(10px, 2vw, 24px);
  bottom: clamp(10px, 2vw, 24px);
  z-index: 400;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}
.consent__karte {
  pointer-events: auto;
  width: 100%;
  max-width: 480px;
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: 28px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 64px rgba(6, 6, 7, .40);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.consent.is-open .consent__karte { opacity: 1; transform: none; }

.consent__titel {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  color: #fff;
}
.consent__text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
  margin: 0 0 12px;
}
.consent__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.consent__body > .consent__text:last-child { margin-bottom: 0; }

.consent__kats { display: flex; flex-direction: column; gap: 6px; }
.consent__kat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-m);
  cursor: pointer;
}
.consent__kat--fest { cursor: default; background: rgba(255, 255, 255, .04); }
.consent__kat input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--signal); }
.consent__pflicht { flex: none; width: 16px; margin-top: 1px; color: var(--signal); font-size: 13px; }
.consent__kat-name { display: block; font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.consent__kat-name em { font-style: normal; color: rgba(255, 255, 255, .45); font-weight: 400; }
.consent__kat .consent__text { margin: 0; font-size: 13px; }
.consent__dienste { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.consent__dienste span { color: rgba(255, 255, 255, .42); }

/* Ablehnen muss so leicht fallen wie Annehmen — gleiche Größe, gleiche Zeile. */
.consent__aktionen {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 420px) { .consent__aktionen { grid-template-columns: 1fr; } }
.consent__aktionen .btn { justify-content: center; width: 100%; }
.btn--geist { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .34); }
.btn--geist:hover { --btn-bd: #fff; }

.consent__mehr {
  margin-top: 14px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent__mehr:hover { color: #fff; }

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

/* -- Erstgespräch: abgesetztes Panel auf dem Canvas ---------------------- */
.termin {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 4.5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .62);
  box-shadow: var(--shadow-m);
}
@media (max-width: 900px) { .termin { grid-template-columns: 1fr; } }
.termin__copy { min-width: 0; }
.termin__copy .lead { color: var(--ink-600); }

.termin__facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-600);
}
.termin__facts .label {
  display: inline-block;
  min-width: 64px;
  color: var(--ink-text);
}

.termin__action {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.termin__action .btn { justify-content: center; }
.termin__action .meta { color: var(--ink-400); max-width: 34ch; }
.termin__action .link { margin-top: 4px; }

/* -- Terminbuchung (eigene Oberfläche vor Microsoft Bookings) ------------ */
.booking {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(6, 6, 7, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.booking.is-open { opacity: 1; visibility: visible; }

.booking__card {
  width: 100%;
  max-width: 760px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  box-shadow: 0 32px 80px rgba(6, 6, 7, .42);
  transform: translateY(16px) scale(.98);
  transition: transform var(--dur-base) var(--ease-out);
}
.booking.is-open .booking__card { transform: none; }

.booking__bar {
  flex: none;
  height: 60px;
  padding-inline: clamp(20px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-dark);
}
.booking__bar .label { color: rgba(255, 255, 255, .5); }
.booking__bar .projekt-modal__close { border-color: var(--line-dark); color: #fff; }
.booking__bar .projekt-modal__close:hover { border-color: rgba(255, 255, 255, .34); }

.booking__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(24px, 4vw, 36px);
}
.booking__head { margin-bottom: 28px; }
.booking__head .eyebrow { color: rgba(255, 255, 255, .55); }
.booking__head h2 { color: #fff; margin-bottom: 12px; }
.booking__head .meta { color: rgba(255, 255, 255, .45); }
.booking__note { color: rgba(255, 255, 255, .62); font-size: 14px; margin: 0 0 20px; }

/* Tagesleiste: waagerecht scrollbar, damit auch drei Wochen hineinpassen. */
.booking__days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 24px;
  scrollbar-width: thin;
}
.booking__day {
  flex: none;
  width: 66px;
  padding: 10px 0 12px;
  display: grid;
  gap: 2px;
  justify-items: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-m);
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.booking__day:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.booking__day.is-active { background: #fff; border-color: #fff; color: var(--ink); }
.booking__day-wd { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.booking__day-nr { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.booking__day-mo { font-size: 11px; opacity: .7; }

.booking__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.booking__slot {
  padding: 12px 8px;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-pill);
  color: #fff;
  font-family: var(--font-text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.booking__slot:hover { background: #fff; border-color: #fff; color: var(--ink); }

.booking__chosen {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .05);
  font-size: 14px;
  color: #fff;
}
.booking__foot {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
}
.booking__foot .link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 14px;
  color: rgba(255, 255, 255, .62);
}
.booking__foot .link:hover { color: #fff; }

.booking__done h3 { color: #fff; margin-bottom: 12px; }
.booking__done .eyebrow { color: rgba(255, 255, 255, .55); }
.booking__done .body-m { color: rgba(255, 255, 255, .72); }
.booking__error .body-m { color: rgba(255, 255, 255, .72); margin-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  .booking__card { transform: none; }
}

/* -- Projektkarte (fährt von unten ein) ---------------------------------- */
.projekt-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(6, 6, 7, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.projekt-modal.is-open { opacity: 1; visibility: visible; }

.projekt-modal__card {
  position: absolute;
  inset: 56px 8px 0;
  max-width: 1200px;
  margin-inline: auto;
  background: var(--canvas);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -24px 64px rgba(6,6,7,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.projekt-modal.is-open .projekt-modal__card { transform: translateY(0); }
@media (max-width: 767px) { .projekt-modal__card { inset: 40px 0 0; } }

.projekt-modal__bar {
  flex: none;
  height: 64px;
  padding-inline: clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(247,246,243,.84);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.projekt-modal__bar .label { color: var(--ink-400); }
.projekt-modal__close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.projekt-modal__close:hover { border-color: var(--signal); color: var(--signal); }

.projekt-modal__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-block: 56px;
}
.projekt-modal__body .pj__cta { margin-bottom: 0; }

/* Buehne im Scrollbereich: nur sie blendet beim Projektwechsel um, der
   Scrollcontainer bleibt ruhig stehen. */
.projekt-modal__stage {
  transition: opacity 240ms var(--ease-soft), transform 240ms var(--ease-soft);
}
.projekt-modal__stage.is-swapping { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  .projekt-modal__card { transform: none; }
  .projekt-modal__stage { transition: none; }
  .projekt-modal__stage.is-swapping { transform: none; }
}

/* -- Naechstes Projekt: Vorschau am Fuss der Karte ----------------------- */
.pj__next {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .5);
  text-decoration: none;
  color: var(--ink-text);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.pj__next:hover {
  border-color: rgba(16, 16, 18, .20);
  background: #fff;
  box-shadow: var(--shadow-m);
}
.pj__next-text { display: block; min-width: 0; }
.pj__next-label { display: block; color: var(--signal); margin-bottom: 12px; }
.pj__next-title { display: block; margin-bottom: 8px; }
.pj__next .meta { display: block; color: var(--ink-400); }

.pj__next-media {
  display: block;
  width: clamp(88px, 11vw, 132px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--ink);
}
.pj__next-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.pj__next:hover .pj__next-media img { transform: scale(1.05); }

.pj__next-arrow {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 15px;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pj__next:hover .pj__next-arrow {
  transform: translateX(4px);
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

@media (max-width: 640px) {
  .pj__next { grid-template-columns: 1fr auto; gap: 20px; padding: 20px; }
  .pj__next-arrow { display: none; }
}

/* -- Rechtstexte --------------------------------------------------------- */
.recht { max-width: 820px; }
.recht__block { margin-bottom: 44px; }
.recht__block h2 { margin-bottom: 16px; }
.recht__block p { color: var(--ink-600); margin-bottom: 14px; }
.recht__block p:last-child { margin-bottom: 0; }
.recht__block a { color: var(--signal); text-decoration: none; }
.recht__block a:hover { text-decoration: underline; }

/* -- Terminbuchung neben dem Formular ------------------------------------ */
.kontakt__termin {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Bedingter Hinweis im Formular
   Erscheint nur, wenn im Feld „Worum geht es?" die KI-Bildproduktion gewählt
   ist. Signalblau hier als Flächenakzent auf kleiner Fläche — bewusst die
   einzige eingefärbte Fläche im Formular. */
.hint-slot {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              margin-top var(--dur-base) var(--ease-out);
}
.hint-slot > div { overflow: hidden; }
.hint-slot.is-shown { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }

.hint-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(0, 85, 254, .45);
  border-radius: var(--r-m);
  background: rgba(0, 85, 254, .15);
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -.01em;
  max-width: none;
}
.hint-box__mark {
  flex: none;
  width: 6px; height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(0, 85, 254, .20);
}

/* Abschluss der Zusammenarbeits-Sektion: Aussage links, Handlung rechts */
.modell-abschluss {
  margin-top: 40px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.modell-abschluss > div { max-width: 62ch; }
.modell-abschluss p { color: var(--ink-600); }

/* --------------------------------------------------------------------------
   15. Dauerhafter Seitenrahmen
   Die gerahmte Fläche (Brand Book 9.5) hat ihre Ecken nur am Anfang und Ende
   des Dokuments — beim Scrollen wäre sie kantig. Diese fixierte Maske malt
   den Außenrand und die vier Eckkerben über den Viewport, sodass die Rundung
   durchgehend steht. Sie fängt keine Klicks ab und liegt über allem, damit
   auch die Projektkarte innerhalb des Rahmens bleibt.
   -------------------------------------------------------------------------- */
.frame-mask {
  position: fixed;
  inset: 8px;
  z-index: 500;
  border-radius: var(--r-frame);
  pointer-events: none;
  box-shadow: 0 0 0 100vmax #060607;
}
/* Auf dem Telefon ohne Außenrand — die volle Breite bleibt dem Inhalt.
   Gerundet wird nur oben: unten liegt in mobilen Browsern die eingeblendete
   Adress- und Werkzeugleiste über der Seite. Eine Rundung dahinter schneidet
   sichtbar in den Text, statt eine Kante zu zeichnen. Oben gibt es diesen
   Konflikt nicht — dort sitzt die Rundung sauber unter der Statusleiste. */
@media (max-width: 767px) {
  .frame-mask { inset: 0; border-radius: var(--r-frame) var(--r-frame) 0 0; }
}

/* --------------------------------------------------------------------------
   16. Mobil: Bewegtbild führt
   Auf dem Telefon steht die Aufnahme über der Headline — sie trägt dort mehr
   als die Zeile darüber. Und statt Querformat quadratisch: ein 16:10-Streifen
   auf 375 px Breite ist kaum größer als eine Zeile Text.
   Die DOM-Reihenfolge bleibt unangetastet (Überschrift zuerst), nur die
   visuelle Position dreht sich.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero__grid > .hero__media,
  .lp-hero__grid > .lp-hero__media { order: -1; }

  .hero__grid, .lp-hero__grid { gap: 32px; }
  .hero, .lp-hero { padding-top: calc(var(--nav-edge) + var(--nav-top) + var(--nav-h) + 24px); }

  .hero__media, .lp-hero__media { aspect-ratio: 1 / 1; }
  .showreel video,
  .pj__video video { aspect-ratio: 1 / 1; }
}