/* Caps & Collars, Liquid Glass.
   Bausteine der Website. Farben, Abstände, Radien, Schatten, Glaswerte und Dauer
   kommen aus tokens.css; hier steht nur, wie sie zusammengesetzt werden.
   Schrift über die Stilklassen display, headline, title, title-s, numeral, lead,
   question, body, body-s, ui, label. Bausteine heißen cc-*.
   Verhalten (Drift, Messinglicht, Linse) liefert components/bundle.js.

   Stufen. Umbrüche fragen die Inhaltsbreite von .cc-page ab (Container Queries). Es gibt sieben
   Schwellen; jede Abfrage nennt ihre Stufe im Kommentar davor, werkzeuge/pruefe_stufen.py prüft das.
     Stufe             Inhalt bis  Fenster bis
     stufe-schmal          320         360    Darstellung im Menü, kleinere Überschriften
     stufe-klein           480         533    Porträt über dem Text, Unterseiten ohne Link zur Startseite
     stufe-telefon         660         733    alles einspaltig, Telefonschrift, Glas 24 innen, Sprache im Menü
     stufe-tafel           900        1000    Schreibtischschrift, Listen einspaltig mit Zeilenmaß, Glas 32 innen
     stufe-tafel-quer     1040        1155    Köpfe untereinander, Menü statt Navigation, Verzeichnis zweispaltig
     stufe-nav            1100        1222    Navigation enger, Verlauf zweispaltig
     stufe-laptop         1150        1277    Überschrift 42px, Ventures als Zeilen
   Fenster = Inhalt + 2 mal page-margin (clamp(20px, 5vw, 64px)), zwischen 400 und 1280px also Inhalt / 0,9.
   CSS erlaubt keine Variablen in Containerabfragen; die Werte stehen deshalb hier und als Token
   stufe-* in tokens.json. Eine Abfrage über zwei Stufen heißt im Kommentar „stufe-a bis stufe-b“,
   eine Abfrage nach oben „über stufe-x“. Nach oben wird mit „width >“ gefragt, nie mit min-width:
   Inhaltsbreiten haben Nachkommastellen (734px Fenster ergeben 660,6 Inhalt), min-width: 661px
   ließe diese Breite zwischen zwei Stufen fallen. Fensterbreiten gelten ohne feste Scrollleiste;
   mit klassischer Scrollleiste (Windows) greifen die Stufen rund 17px Fenster später.
   Drei weitere Schwellen fragen das Fenster ab, nicht den Inhalt:
     Querformat   @media (orientation: landscape) and (max-height: 500px)   Kapsel 48, Auftakt kompakt
     Leistung     @media (max-width: 760px), (pointer: coarse)              weniger Unschärfe, Lichtfeld schmaler
     Zeigerlicht  bundle.js: Maus (hover und pointer fine) und ab 1024px    Messinglicht und Linse */

:root {
  --grain: url("data:image/png;base64,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");
}

/* ---------- Grundlage ---------- */

html { scroll-padding-top: calc(var(--band-height) + var(--nav-offset) + var(--nav-height) + var(--space-5)); }
body {
  margin: 0;
  isolation: isolate; /* Lichtfeld (z-index -1) liegt so immer über dem Grund, auch wenn html und body einen Hintergrund haben */
  background: var(--bg);
  color: var(--text-light);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

::selection { background: var(--action); color: var(--on-action); }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

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

.cc-skip {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-10)); z-index: 1000;
  background: var(--action); color: var(--on-action); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill); text-decoration: none;
}
.cc-skip:focus { top: var(--space-4); }

/* ---------- Lichtfeld ----------
   Vier weiche Lichter aus Messing und drei Farben der Wortmarke, warm links (Messing,
   Koralle), kühl rechts (Lavendel, Teal), damit sich Gold und Teal nie zu Oliv mischen.
   Jedes Licht wandert langsam auf eigener Bahn, wird dabei größer und kleiner und atmet
   in der Helligkeit. Das Glas darüber wirkt dadurch mal klarer, mal dichter, wie echtes
   Glas vor wechselndem Licht. Nur transform und opacity: der Compositor bewegt die Lichter,
   kein JavaScript, kein filter: blur. Auf der Website liegt genau ein .cc-light fest hinter
   allem; .cc-light--local beleuchtet einen einzelnen Abschnitt oder eine Vorschau. */

.cc-light {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.cc-light--local { position: absolute; z-index: 0; }
.cc-light i {
  position: absolute;
  width: min(56vmax, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform, opacity;
  animation-timing-function: var(--ease-drift);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.cc-light i:nth-child(1) { top: -24%; left: -14%; background: radial-gradient(closest-side, var(--light-gold), transparent); animation-name: cc-drift-1; animation-duration: var(--drift-1); }
.cc-light i:nth-child(2) { top: -16%; right: -18%; background: radial-gradient(closest-side, var(--light-lavender), transparent); animation-name: cc-drift-2; animation-duration: var(--drift-2); }
.cc-light i:nth-child(3) { bottom: -28%; right: -12%; background: radial-gradient(closest-side, var(--light-teal), transparent); animation-name: cc-drift-3; animation-duration: var(--drift-3); }
.cc-light i:nth-child(4) { bottom: -26%; left: -12%; background: radial-gradient(closest-side, var(--light-coral), transparent); animation-name: cc-drift-4; animation-duration: var(--drift-4); }
/* Bahnen in Prozent der eigenen Größe: gleich ruhig auf dem Telefon und auf dem großen Bildschirm. */
@keyframes cc-drift-1 {
  0%   { transform: translate(0, 0) scale(1); opacity: .6; }
  30%  { transform: translate(16%, 10%) scale(1.08); opacity: 1; }
  65%  { transform: translate(6%, 24%) scale(.94); opacity: .45; }
  100% { transform: translate(22%, 6%) scale(1.04); opacity: .95; }
}
@keyframes cc-drift-2 {
  0%   { transform: translate(0, 0) scale(1); opacity: .9; }
  35%  { transform: translate(-18%, 12%) scale(.95); opacity: .45; }
  70%  { transform: translate(-6%, 26%) scale(1.08); opacity: 1; }
  100% { transform: translate(-20%, 4%) scale(1); opacity: .85; }
}
@keyframes cc-drift-3 {
  0%   { transform: translate(0, 0) scale(1); opacity: .85; }
  40%  { transform: translate(-16%, -14%) scale(1.06); opacity: 1; }
  75%  { transform: translate(-4%, -24%) scale(.95); opacity: .5; }
  100% { transform: translate(-20%, -8%) scale(1.03); opacity: .9; }
}
@keyframes cc-drift-4 {
  0%   { transform: translate(0, 0) scale(1); opacity: .5; }
  30%  { transform: translate(14%, -16%) scale(1.07); opacity: .95; }
  60%  { transform: translate(24%, -4%) scale(.96); opacity: 1; }
  100% { transform: translate(8%, -22%) scale(1.02); opacity: .8; }
}

.cc-cursor {
  position: fixed; left: 0; top: 0; z-index: -1;
  width: 600px; height: 600px; margin: -300px 0 0 -300px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cursor-light), transparent);
  pointer-events: none; opacity: 0;
  transition: opacity var(--duration-lift) var(--ease-lift);
  will-change: transform;
}
.cc-cursor-on .cc-cursor { opacity: 1; }

/* ---------- Glas ----------
   Ein Material, drei Dichten. Aufbau von hinten nach vorn: backdrop-filter (Unschärfe,
   Sättigung), Füllung, Glanzverlauf, Korn; ::after der 1px-Rand mit Licht- und
   Schattenkante; ::before die Glanzlinie oben mit feiner Lichtbrechung in den Farben
   der Wortmarke; box-shadow für Dicke und Abstand. Kein Glas in Glas. */

.cc-glass {
  position: relative;
  border-radius: var(--radius-l);
  background-color: var(--glass-fill);
  background-image: linear-gradient(180deg, var(--glass-sheen-top), var(--glass-sheen-bottom)), var(--grain), var(--grain);
  background-size: auto, 48px 48px, 61px 61px; /* zwei Kachelgrößen: das Korn wiederholt sich nicht sichtbar */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow);
}
.cc-glass::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: var(--line-hair);
  background:
    linear-gradient(180deg, var(--glass-rim), transparent 38% 70%, var(--glass-rim-low)),
    linear-gradient(90deg, color-mix(in srgb, var(--glass-rim) 45%, transparent), transparent 20%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.cc-glass::before {
  content: "";
  position: absolute; top: 0; left: var(--radius-l); right: var(--radius-l);
  height: var(--line-hair);
  background:
    linear-gradient(90deg, transparent, var(--specular) 18%, color-mix(in srgb, var(--specular) 35%, transparent) 62%, transparent 92%),
    linear-gradient(90deg, transparent 8%,
      color-mix(in srgb, var(--pastel-lavender) 70%, var(--spectrum-base)) 22%,
      color-mix(in srgb, var(--pastel-blue) 70%, var(--spectrum-base)) 34%,
      color-mix(in srgb, var(--pastel-teal) 70%, var(--spectrum-base)) 46%,
      color-mix(in srgb, var(--pastel-sage) 70%, var(--spectrum-base)) 56%,
      color-mix(in srgb, var(--pastel-sand) 70%, var(--spectrum-base)) 66%,
      color-mix(in srgb, var(--pastel-coral) 70%, var(--spectrum-base)) 78%,
      transparent 92%);
  pointer-events: none;
}
.cc-glass--strong { background-color: var(--glass-fill-strong); }
.cc-glass--pill { border-radius: var(--radius-pill); }
.cc-glass--pill::before { left: var(--space-7); right: var(--space-7); }
.cc-glass--lift {
  transition: transform var(--duration-lift) var(--ease-lift), box-shadow var(--duration-lift) var(--ease-lift);
}
.cc-glass--lift:hover, .cc-glass--lift:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-raised);
}

/* Innenleben einer Glasfläche bekommt nie ein eigenes backdrop-filter. */
.cc-glass :where(.cc-glass, .cc-btn--secondary) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.cc-panel { padding: var(--space-7); }

/* ---------- Satzspiegel ---------- */

.cc-page {
  container: page / inline-size;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--page-margin));
  margin-inline: auto;
  padding-left: max(var(--page-margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-margin), env(safe-area-inset-right, 0px));
  hyphens: manual;
}

.cc-section { position: relative; }
.cc-section > .cc-page { position: relative; z-index: 1; }
.cc-frame { padding-block: var(--space-9); }
.cc-frame--tight { padding-block: var(--space-8); }

.cc-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

:where(.cc-page) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, address) { margin: 0; }
:where(.cc-page) address { font-style: normal; }
/* Umbrüche: Namen, Überschriften und Beschriftungen trennen nie; nur Fließtext trennt,
   und nur lange Wörter. Markennamen stehen mit geschützten Leerzeichen, Komposita in cc-nobr. */
.display, .headline, .title, .title-s { text-wrap: balance; }
.lead { text-wrap: balance; }
.question { text-wrap: pretty; }
.body, .body-s { text-wrap: pretty; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
.cc-nobr { white-space: nowrap; }

/* ---------- Kapitalband ---------- */

.cc-band {
  display: block;
  height: var(--band-height);
  background: linear-gradient(90deg,
    var(--pastel-lavender) 0 12.5%, var(--pastel-blue) 12.5% 25%,
    var(--pastel-teal) 25% 37.5%, var(--pastel-sage) 37.5% 50%,
    var(--pastel-sand) 50% 62.5%, var(--pastel-coral) 62.5% 75%,
    var(--pastel-blue) 75% 87.5%, var(--pastel-purple) 87.5% 100%);
}

/* ---------- Wortmarke ----------
   Immer vollständig: Schriftzug und VENTURES, nie zerlegt, nie gekürzt, nie nachgesetzt.
   Das SVG nutzt die enge viewBox 25 63 1947 352, damit die Marke bündig auf der Achse steht. */

.cc-mark { display: block; color: var(--text); }
.cc-mark svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Kopfleiste: schwebende Glaskapsel ---------- */

.cc-masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: calc(var(--band-height) + var(--nav-offset) + env(safe-area-inset-top, 0px));
}
.cc-masthead > .cc-band { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
/* Kante beim Scrollen: Inhalt verschwindet weich hinter Band und Kapsel, statt darüber sichtbar zu bleiben. */
.cc-masthead::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + var(--space-5));
  background: linear-gradient(180deg, var(--bg) 0, color-mix(in srgb, var(--bg) 92%, transparent) calc(var(--band-height) + var(--nav-offset)), color-mix(in srgb, var(--bg) 60%, transparent) 70%, transparent);
  pointer-events: none;
}
.cc-masthead > .cc-page { position: relative; z-index: 1; }
/* Wo der Browser scrollgebundene Animationen kann, erscheint die Kante erst beim Scrollen. */
@supports (animation-timeline: scroll()) {
  .cc-masthead::before { animation: cc-scrim linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  @keyframes cc-scrim { from { opacity: 0; } to { opacity: 1; } }
}
/* Der Name steht einmal im Bild: solange die Wortmarke im Auftakt sichtbar ist, bleibt die Kapsel ohne. */
.cc-bar__brand { transition: opacity var(--duration-ui) var(--ease-standard), visibility var(--duration-ui); }
.cc-mark-in-view .cc-bar__brand { opacity: 0; visibility: hidden; }
.cc-bar {
  display: flex; align-items: center; gap: var(--space-6);
  height: var(--nav-height);
  padding-inline: var(--space-6) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--glass-fill-strong);
  background-image: linear-gradient(180deg, var(--glass-sheen-top), var(--glass-sheen-bottom)), var(--grain);
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturate));
  box-shadow: var(--control-shadow);
  position: relative;
}
.cc-bar__brand { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--text); margin-right: auto; }
.cc-bar__brand svg { display: block; height: 36px; width: auto; }
.cc-nav { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.cc-nav a {
  display: inline-flex; align-items: center; min-height: var(--target-min); white-space: nowrap;
  color: var(--text-light); text-decoration: none;
  padding-inline: var(--space-1);
  text-decoration-color: transparent; text-decoration-thickness: var(--line-strong); text-underline-offset: 7px;
  transition: color var(--duration-ui) var(--ease-standard), text-decoration-color var(--duration-ui) var(--ease-standard);
}
.cc-nav a:hover { color: var(--text); }
.cc-nav a[aria-current] { color: var(--text); text-decoration-line: underline; text-decoration-color: var(--gold); }
.cc-tools { display: flex; align-items: center; gap: var(--space-1); }
/* Unterseiten: Link zur Startseite in der Kapsel, 44px hoch; bis 533px Fenster blendet stufe-klein ihn aus.
   Eigene Regeln mit display an diesem Link setzen die Ausblendung außer Kraft. */
.cc-bar__home { display: inline-flex; align-items: center; min-height: var(--target-min); }
.cc-lang { display: flex; padding: 3px; border-radius: var(--radius-pill); background: var(--field-fill); box-shadow: var(--field-shadow); }
.cc-lang button {
  min-width: var(--target-min); min-height: var(--target-min); padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-pill); background: none;
  color: var(--text-light); cursor: pointer;
  transition: color var(--duration-ui) var(--ease-standard), background-color var(--duration-ui) var(--ease-standard);
}
.cc-lang button:hover { color: var(--text); }
.cc-lang button[aria-pressed="true"] { color: var(--text); background: var(--glass-sheen-top); box-shadow: var(--control-shadow); }
.cc-iconbtn {
  min-width: var(--target-min); min-height: var(--target-min);
  display: inline-grid; place-items: center;
  border: 0; border-radius: var(--radius-pill); background: none;
  color: var(--text-light); cursor: pointer; padding: 0;
  transition: color var(--duration-ui) var(--ease-standard), background-color var(--duration-ui) var(--ease-standard);
}
.cc-iconbtn:hover { color: var(--text); background: var(--glass-sheen-top); }
.cc-iconbtn svg { width: 20px; height: 20px; display: block; }
.cc-bar__menu { display: none; }
/* Darstellung: die Sonne bietet Papier an, der Mond die Nacht. */
.cc-theme__moon { display: none; }
[data-theme="light"] .cc-theme__sun { display: none; }
[data-theme="light"] .cc-theme__moon { display: block; }
/* Ohne eigene Wahl folgt die Seite der Systemeinstellung, wie tokens.css der Website. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cc-theme__sun { display: none; }
  :root:not([data-theme="dark"]) .cc-theme__moon { display: block; }
}

/* stufe-nav */
@container page (max-width: 1100px) {
  .cc-nav { gap: var(--space-4); }
}
/* stufe-tafel-quer: das ganze nav verschwindet, nicht nur die Liste; ein leeres nav kostete als
   Flex-Element einen Abstand (8px auf dem Telefon, 32px auf der Tafel). */
@container page (max-width: 1040px) {
  .cc-nav, .cc-bar > nav:has(.cc-nav) { display: none; }
  .cc-bar__menu { display: inline-grid; }
}
/* stufe-telefon */
@container page (max-width: 660px) {
  .cc-bar { height: 56px; gap: var(--space-2); padding-inline: var(--space-5) var(--space-2); }
  .cc-bar__brand svg { height: 30px; }
  .cc-bar .cc-lang { display: none; }
}
/* stufe-klein: Kapseln ohne Menü (Unterseiten) zeigen Marke, Darstellung und den Link zur Startseite.
   Zusammen brauchen sie mindestens 364px Inhalt; bis 533px Fenster entfällt darum der Link, die Marke
   führt zur Startseite. */
@container page (max-width: 480px) {
  .cc-bar__home { display: none; }
}
/* stufe-schmal: Marke 166 plus Darstellung und Menü passen bis 360px Fenster nicht in die Kapsel.
   Die Darstellung wandert ins Menü wie zuvor die Sprache; die Marke bleibt 30px hoch. Kapseln ohne
   Menü (Unterseiten) behalten die Darstellung. */
@container page (max-width: 320px) {
  .cc-bar:has(.cc-bar__menu) .cc-theme { display: none; }
}

/* Menü: Glasfläche unter der Kapsel. Was man bedient, steht in Inter. */
.cc-sheet { box-sizing: border-box; margin-top: var(--space-3); padding: var(--space-3) var(--space-6) var(--space-6); border-radius: var(--radius-l); }
.cc-sheet__list { list-style: none; margin: 0; padding: 0; }
.cc-sheet__list a {
  display: block; color: var(--text); text-decoration: none;
  padding-block: var(--space-4);
  border-bottom: var(--line-hair) solid var(--line);
}
.cc-sheet__list a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: var(--line-strong); text-underline-offset: 7px; }
.cc-sheet__lang { display: inline-flex; margin-top: var(--space-6); }
/* Werkzeuge im Menü: Sprache bis 733px Fenster, Darstellung bis 360px. */
.cc-sheet__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.cc-sheet__tools .cc-sheet__lang { margin-top: 0; }
.cc-sheet__tools .cc-theme { display: none; }
.cc-sheet[hidden] { display: none; }
/* In der Kopfleiste liegt das Menü über dem Inhalt, statt ihn zu verschieben. Die Höhe rechnet
   Band, Abstand, Kapsel, den eigenen Außenabstand und 16px Luft zur unteren Kante ab. */
.cc-masthead .cc-sheet {
  position: absolute; top: 100%;
  left: max(var(--page-margin), env(safe-area-inset-left, 0px));
  right: max(var(--page-margin), env(safe-area-inset-right, 0px));
  max-height: calc(100dvh - var(--band-height) - var(--nav-offset) - var(--nav-height) - var(--space-3) - var(--space-4) - env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
/* stufe-schmal: Einträge 12px statt 16px oben und unten (54px hoch), damit das Menü bei 320 mal 568
   ganz in den Bildschirm passt. */
@container page (max-width: 320px) {
  .cc-sheet__tools .cc-theme { display: inline-grid; }
  .cc-sheet__list a { padding-block: var(--space-3); }
  .cc-sheet__tools { margin-top: var(--space-5); }
}
/* über stufe-telefon: auf Tafel und Laptop hängt das Menü als schmale Fläche rechts unter dem
   Menüknopf; Sprache und Darstellung stehen dort in der Kapsel. */
@container page (width > 660px) {
  .cc-masthead .cc-sheet { left: auto; width: min(100%, var(--menu-width)); }
  .cc-sheet__tools { display: none; }
}
/* stufe-telefon: das offene Menü liegt über der ganzen Breite und verdeckt die Marke im Auftakt;
   dann trägt die Kapsel sie. Auf der Tafel hängt es rechts, die Marke im Auftakt bleibt sichtbar. */
@container page (max-width: 660px) {
  .cc-masthead:has(.cc-sheet:not([hidden])) .cc-bar__brand { opacity: 1; visibility: visible; }
}
/* Menüknopf: drei Striche zu, Kreuz offen. */
.cc-bar__menu-close { display: none; }
.cc-bar__menu[aria-expanded="true"] .cc-bar__menu-open { display: none; }
.cc-bar__menu[aria-expanded="true"] .cc-bar__menu-close { display: block; }

/* ---------- Auftakt ----------
   Links Wortmarke, Satz und Aktionen auf einer Achse; rechts die Belege als Glasfläche. */

.cc-hero__inner {
  display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap); align-items: end;
  padding-block: var(--space-9);
}
.cc-hero__mark { grid-column: 1 / span 8; grid-row: 1; width: min(100%, 760px); }
.cc-hero__copy { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--space-8); max-width: var(--measure-lead); }
.cc-hero__lead { color: var(--text-light); margin-bottom: var(--space-7); }
.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.cc-proof {
  grid-column: 9 / -1; grid-row: 2;
  list-style: none; margin: 0;
  padding: var(--space-2) var(--space-6);
}
.cc-proof li { color: var(--text-light); padding-block: var(--space-4); border-top: var(--line-hair) solid var(--line); }
.cc-proof li:first-child { border-top-color: transparent; }

/* stufe-tafel-quer */
@container page (max-width: 1040px) {
  .cc-hero__inner { display: block; }
  .cc-proof { margin-top: var(--space-8); }
}
/* stufe-telefon */
@container page (max-width: 660px) {
  .cc-hero__inner { padding-block: var(--space-8); }
  .cc-hero__copy { margin-top: var(--space-7); }
  .cc-proof { padding: var(--space-1) var(--space-5); }
}
/* stufe-tafel-quer: die Belege als Leiste aus drei Spalten unter den Aktionen. Schmaler als 900
   Inhalt bleiben sie eine Liste; drei Spalten hätten dort im Mittel nur 17 Zeichen je Zeile. */
@container page (900px < width <= 1040px) {
  .cc-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-5) 0; }
  .cc-proof li { padding: 0 var(--space-5); border-top: 0; }
  .cc-proof li + li { border-left: var(--line-hair) solid var(--line); }
}
/* Niedrige Fenster im Querformat (Telefon quer): Kapsel 52px (Sprachwahl 50 passt hinein), kleinere
   Marke und weniger Luft, damit Satz und Hauptaktion in den ersten Bildschirm passen. */
@media (orientation: landscape) and (max-height: 500px) {
  html { scroll-padding-top: calc(var(--band-height) + var(--space-2) + var(--target-min) + var(--space-2) + var(--space-5)); }
  .cc-masthead { padding-top: calc(var(--band-height) + var(--space-2) + env(safe-area-inset-top, 0px)); }
  .cc-bar { height: calc(var(--target-min) + var(--space-2)); }
  .cc-bar__brand svg { height: 30px; }
  .cc-masthead .cc-sheet { max-height: calc(100dvh - var(--band-height) - var(--space-2) - var(--target-min) - var(--space-2) - var(--space-3) - var(--space-4) - env(safe-area-inset-top, 0px)); }
  .cc-hero__inner { padding-block: var(--space-5) var(--space-7); }
  .cc-hero__mark { width: min(100%, 760px, 120vh); }
  .cc-hero__copy { margin-top: var(--space-5); max-width: none; }
  .cc-hero__lead { margin-bottom: var(--space-5); max-width: var(--measure-text); }
}

/* ---------- Naht: der Name, erklärt ----------
   Caps und Collars als zwei Hälften einer Glasfläche, getrennt von einer Naht aus Messing.
   Die Namen laufen in Inter im Satz mit, nie als Wortmarke und nie in Cinzel. */

.cc-naht {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--line-hair) minmax(0, 1fr);
  column-gap: var(--space-8);
}
.cc-naht__text { min-width: 0; color: var(--text-light); }
.cc-naht__word { color: var(--text); font-weight: 500; }
.cc-naht__seam { background: linear-gradient(180deg, transparent, var(--gold) 16%, var(--gold) 84%, transparent); }
/* stufe-tafel-quer */
@container page (max-width: 1040px) {
  .cc-naht { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .cc-naht__seam { height: var(--line-hair); background: linear-gradient(90deg, var(--gold), transparent); }
}

/* ---------- Abschnittskopf ---------- */

/* Rubrik und Überschrift links auf der Achse der Glasfläche, der Lead rechts auf Höhe der
   letzten Überschriftzeile. Unter 1040px steht alles untereinander. */
.cc-head {
  display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  column-gap: var(--grid-gap);
  margin-bottom: var(--space-8);
}
.cc-head__rubric { grid-column: 1 / span 7; grid-row: 1; align-self: end; color: var(--text-light); margin-bottom: var(--space-3); }
.cc-head__title { grid-column: 1 / span 7; grid-row: 2; align-self: end; color: var(--text); max-width: var(--measure-headline); }
.cc-head__lead { grid-column: 8 / -1; grid-row: 1 / 3; align-self: end; color: var(--text-light); max-width: var(--measure-lead); }
.cc-head--sub { margin-top: var(--space-9); }
/* Kopf mit Aktion (Karriere): Lead, weitere Absätze und Pille in der Spalte des Leads.
   Rubrik, Überschrift und Lead beginnen oben auf einer Linie, weil die rechte Spalte lang ist. */
.cc-head--more { grid-template-rows: auto 1fr; }
.cc-head--more > * { align-self: start; }
.cc-head__lead--more { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.cc-head__lead--more > .body { color: var(--text-light); }
.cc-head__lead--more > .cc-actions { margin-top: var(--space-2); }
/* stufe-laptop */
@container page (max-width: 1150px) {
  .cc-page .headline { font-size: 42px; line-height: 50px; }
}
/* stufe-tafel-quer */
@container page (max-width: 1040px) {
  .cc-head { display: block; }
  .cc-head__lead { margin-top: var(--space-5); }
}

/* stufe-telefon */
@container page (max-width: 660px) {
  .cc-head { margin-bottom: var(--space-7); }
  .cc-head--sub { margin-top: var(--space-8); }
  .cc-page .display { font-size: 56px; line-height: 60px; }
  .cc-page .headline { font-size: 30px; line-height: 38px; }
  .cc-page .title { font-size: 26px; line-height: 34px; }
  .cc-page .lead { font-size: 19px; line-height: 30px; }
  .cc-page .body { font-size: 16px; line-height: 26px; }
  .cc-frame { padding-block: var(--space-7); }
  .cc-panel { padding: var(--space-5); }
}
/* stufe-schmal: sehr schmale Telefone (bis 360px Fenster), kleinere Überschriften, Komposita dürfen am Bindestrich brechen. */
@container page (max-width: 320px) {
  .cc-page .headline { font-size: 26px; line-height: 34px; }
  .cc-page .title-s { font-size: 18px; line-height: 26px; }
  .cc-nobr { white-space: normal; }
}
/* stufe-tafel bis stufe-tafel-quer: Schreibtischschrift, Glas 32 innen statt 48 (Telefon 24). */
@container page (660px < width <= 1040px) {
  .cc-frame { padding-block: var(--space-8); }
  .cc-panel { padding: var(--space-6); }
}

/* ---------- Ventures: drei Glasflächen ---------- */

.cc-ventures {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.cc-venture { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cc-venture__meta { color: var(--text-light); }
.cc-venture__name { color: var(--text); white-space: nowrap; }
.cc-venture__text { color: var(--text-light); flex: 1 1 auto; }
.cc-venture .cc-link { align-self: flex-start; }
/* Drei schmale Karten: 32 innen statt 48, damit die Zeilen nicht unter 30 Zeichen fallen. */
.cc-ventures .cc-panel { padding: var(--space-6); }
/* stufe-laptop: bis 1150 Inhalt stehen die Ventures untereinander, als Zeile mit Kategorie und
   Name links und Text rechts. Drei Spalten hätten hier 21 Zeichen je Zeile, eine volle Breite bis 100. */
@container page (max-width: 1150px) {
  .cc-ventures { grid-template-columns: minmax(0, 1fr); }
  .cc-venture { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr auto; column-gap: var(--space-6); row-gap: var(--space-2); }
  .cc-venture__meta { grid-column: 1; grid-row: 1; }
  .cc-venture__name { grid-column: 1; grid-row: 2; }
  .cc-venture__text { grid-column: 2; grid-row: 1 / span 2; max-width: var(--measure-text); }
  .cc-venture .cc-link { grid-column: 2; grid-row: 3; justify-self: start; }
}
/* stufe-tafel: bis 900 Inhalt wieder gestapelt, der Text höchstens measure-text breit; als Zeile
   hätte die Textspalte hier nur 38 Zeichen. */
@container page (max-width: 900px) {
  .cc-venture { display: flex; flex-direction: column; gap: var(--space-4); }
}
/* stufe-telefon */
@container page (max-width: 660px) {
  .cc-ventures .cc-panel { padding: var(--space-5); }
}

/* ---------- Register: Zeilen in einer Glasfläche ---------- */

.cc-register { list-style: none; margin: 0; padding: 0; }
.cc-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
  column-gap: var(--grid-gap);
  padding-block: var(--space-5);
  border-top: var(--line-hair) solid var(--line);
}
.cc-row:first-child { border-top-color: transparent; padding-top: 0; }
.cc-row:last-child { padding-bottom: 0; }
.cc-row__meta { color: var(--text-light); padding-top: var(--space-1); }
.cc-row__meta span { display: block; }
.cc-row__name { color: var(--text); min-width: 0; }
.cc-row__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cc-row__text { color: var(--text-light); max-width: var(--measure-text); }
/* stufe-tafel-quer: Rolle, Zeitraum und Name links, Text rechts; einspaltig wäre der Text bis 100 Zeichen breit. */
@container page (max-width: 1040px) {
  .cc-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; row-gap: var(--space-2); }
  .cc-row__meta { grid-column: 1; grid-row: 1; }
  .cc-row__name { grid-column: 1; grid-row: 2; }
  .cc-row__body { grid-column: 2; grid-row: 1 / span 2; }
}
/* stufe-tafel: bis 900 Inhalt einspaltig, der Text höchstens measure-text breit. */
@container page (max-width: 900px) {
  .cc-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .cc-row__meta, .cc-row__name, .cc-row__body { grid-column: 1; grid-row: auto; }
}

/* Verzeichnis: zweispaltige Liste kurzer Einträge in einer Glasfläche */
.cc-index {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-8);
}
.cc-index__item {
  border-top: var(--line-hair) solid var(--line);
  padding-block: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  min-width: 0;
}
.cc-index__item:nth-child(-n+2) { border-top-color: transparent; padding-top: 0; }
.cc-index__item:last-child, .cc-index__item:nth-last-child(2):nth-child(odd) { padding-bottom: 0; }
.cc-index__name { color: var(--text); }
.cc-index__text { color: var(--text-light); }
.cc-index__item .cc-link { align-self: flex-start; margin-top: var(--space-1); }
.cc-index__item > * { max-width: var(--measure-text); }
/* stufe-tafel: zweispaltig erst über 900 Inhalt (über 1000px Fenster); darunter hätte jede Spalte nur 6 bis 35 Zeichen. */
@container page (max-width: 900px) {
  .cc-index { grid-template-columns: minmax(0, 1fr); }
  .cc-index__item:nth-child(2) { border-top-color: var(--line); padding-top: var(--space-5); }
  .cc-index__item:nth-last-child(2):nth-child(odd) { padding-bottom: var(--space-5); }
}

/* ---------- Verlauf ---------- */

.cc-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-7); row-gap: var(--space-7);
}
.cc-step { min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.cc-steps--trio .cc-step { grid-row: span 2; }
.cc-step__num { display: block; color: var(--gold); margin-bottom: var(--space-4); }
.cc-step__title { color: var(--text); margin-bottom: var(--space-2); }
.cc-step__text { color: var(--text-light); max-width: var(--measure-text); }
/* stufe-nav: dreispaltig erst über 1100 Inhalt, darunter zwei Spalten; die drei Grundsätze bleiben über 1040 dreispaltig. */
@container page (max-width: 1100px) {
  .cc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-steps--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* stufe-tafel-quer */
@container page (max-width: 1040px) {
  .cc-steps--trio { grid-template-columns: minmax(0, 1fr); }
}
/* stufe-tafel: einspaltig bis 900 Inhalt */
@container page (max-width: 900px) { .cc-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); } }

/* ---------- Person ----------
   Porträts klein und scharf neben dem Text: die Bilder haben 144px, größer werden sie weich. */

.cc-people {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-8); row-gap: var(--space-7);
}
.cc-person { display: flex; align-items: flex-start; gap: var(--space-6); min-width: 0; }
.cc-person__img {
  flex: 0 0 auto; display: block;
  width: 112px; height: 140px;
  object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(.86) brightness(.97);
  background: var(--bg3);
  border-radius: var(--radius-m);
}
.cc-person__body { min-width: 0; }
.cc-person__name { color: var(--text); }
.cc-person__role { color: var(--text-light); margin-top: var(--space-1); }
.cc-person__bio { color: var(--text-light); margin-top: var(--space-3); max-width: var(--measure-text); }
.cc-person .cc-link { display: inline-block; margin-top: var(--space-3); }
/* stufe-tafel-quer */
@container page (max-width: 1040px) { .cc-people { grid-template-columns: minmax(0, 1fr); } }
/* stufe-telefon */
@container page (max-width: 660px) {
  .cc-person { gap: var(--space-5); }
  .cc-person__img { width: 88px; height: 110px; }
}
/* stufe-klein: Porträt über dem Text, damit Namen und Bios die volle Breite haben. */
@container page (max-width: 480px) {
  .cc-person { flex-direction: column; gap: var(--space-4); }
}

/* ---------- Fragen ---------- */

.cc-faq__item { border-top: var(--line-hair) solid var(--line); }
.cc-faq__item:first-child { border-top-color: transparent; }
.cc-faq__q {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-6);
  padding-block: var(--space-5);
  color: var(--text);
}
.cc-faq__item:first-child .cc-faq__q { padding-top: 0; }
.cc-faq__q::-webkit-details-marker { display: none; }
.cc-faq__icon {
  position: relative; flex: 0 0 var(--space-4);
  width: var(--space-4); height: var(--space-4); margin-top: 7px;
  color: var(--text-light);
  transition: color var(--duration-ui) var(--ease-standard);
}
.cc-faq__icon::before, .cc-faq__icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--line-hair); background: currentColor;
  transition: transform var(--duration-open) var(--ease-standard);
}
.cc-faq__icon::after { transform: rotate(90deg); }
.cc-faq__item[open] .cc-faq__icon::after { transform: rotate(0deg); }
.cc-faq__q:hover .cc-faq__icon, .cc-faq__item[open] .cc-faq__icon { color: var(--gold); }
.cc-faq__a { color: var(--text-light); max-width: var(--measure-text); padding-bottom: var(--space-6); }
.cc-faq__item:last-child .cc-faq__a { padding-bottom: 0; }
.cc-faq__item:last-child:not([open]) .cc-faq__q { padding-bottom: 0; }

/* ---------- Aktion ---------- */

.cc-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: var(--space-7);
  padding: 0 var(--space-6);
  border: 0; border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer;
  transition: transform var(--duration-lift) var(--ease-lift), background-color var(--duration-ui) var(--ease-standard), box-shadow var(--duration-lift) var(--ease-lift);
}
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn:active { transform: translateY(0) scale(0.98); }
.cc-btn--primary {
  color: var(--on-action);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--action-glint) 55%, transparent), transparent 46%),
    linear-gradient(180deg, var(--action-hover), var(--action) 52%, var(--action-deep));
  box-shadow: var(--action-shadow);
}
.cc-btn--primary:hover {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--action-glint) 70%, transparent), transparent 50%),
    linear-gradient(180deg, var(--action-hover), var(--action-hover) 40%, var(--action));
}
.cc-btn--secondary {
  color: var(--text);
  background-color: var(--glass-fill);
  background-image: linear-gradient(180deg, var(--glass-sheen-top), var(--glass-sheen-bottom));
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturate));
  box-shadow: var(--control-shadow);
}
.cc-btn--secondary:active { background-color: var(--bg3); }

.cc-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: var(--line-hair);
  text-underline-offset: 5px;
  transition: text-decoration-color var(--duration-ui) var(--ease-standard);
}
.cc-link:hover { text-decoration-color: var(--gold-light); text-decoration-thickness: var(--line-strong); }
/* Links unter Einträgen: 44px Trefferfläche, ohne die Zeile zu verschieben. */
.cc-venture .cc-link, .cc-index__item .cc-link, .cc-person .cc-link, .cc-row__body .cc-link {
  display: inline-flex; align-items: center; min-height: var(--target-min); margin-block: -10px; align-self: flex-start;
}
/* Links im Fließtext (Systemregel): Steht ein Link allein in seinem Absatz, macht eine unsichtbare
   Fläche hinter ihm die Trefferfläche target-min hoch. Zeile, Umbruch und Fokusring bleiben, wie sie
   sind. Beispiel: der Link zur Datenschutzerklärung in der Formularnotiz. Stehen mehrere Links in
   einem Absatz, bleibt es bei der Zeilenhöhe: ihre Flächen würden sich überlappen. Links im Satz
   sind von der Mindestgröße ausgenommen (WCAG 2.5.8). */
p .cc-link:only-of-type { position: relative; }
p .cc-link:only-of-type::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--target-min); transform: translateY(-50%); }
/* Briefkopf: E-Mail und Telefon stehen untereinander. Jede Zeile wird target-min hoch, sonst
   überlappten sich die beiden Flächen und der untere Link finge Klicks auf den oberen ab. */
.cc-letterhead .cc-link { display: inline-flex; align-items: center; min-height: var(--target-min); }
.cc-letterhead .cc-link::after { content: none; }

/* ---------- Formular: vertiefte Felder in Glas ---------- */

.cc-form { display: grid; gap: var(--space-5); }
.cc-field { display: grid; gap: var(--space-2); position: relative; min-width: 0; }
.cc-field__label { color: var(--text-light); }
.cc-field__input {
  appearance: none; -webkit-appearance: none;
  box-sizing: border-box; width: 100%;
  min-height: var(--space-7); margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--field-fill);
  color: var(--text);
  border: 0; border-radius: var(--radius-s);
  box-shadow: var(--field-shadow);
  transition: box-shadow var(--duration-ui) var(--ease-standard);
}
.cc-field__input::placeholder { color: var(--text-dim); opacity: 1; }
.cc-field__input:focus, .cc-field__input:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--field-shadow), var(--focus-ring);
}
textarea.cc-field__input { min-height: var(--space-10); resize: none; }
select.cc-field__input { padding-right: var(--space-7); cursor: pointer; }
select.cc-field__input option { background: var(--bg2); color: var(--text); }
.cc-field--select::after {
  content: ""; position: absolute; right: var(--space-5); bottom: 21px;
  width: 7px; height: 7px;
  border-right: var(--line-hair) solid var(--text-light);
  border-bottom: var(--line-hair) solid var(--text-light);
  transform: rotate(45deg); pointer-events: none;
}
.cc-field__input[aria-invalid="true"] { box-shadow: var(--field-shadow), 0 0 0 var(--line-strong) var(--error); }
.cc-field__error { color: var(--error); }
.cc-form__note { color: var(--text-light); max-width: var(--measure-text); }
.cc-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }

.cc-contact { row-gap: var(--space-7); }
.cc-letterhead { grid-column: 9 / -1; display: grid; gap: var(--space-6); align-content: start; min-width: 0; }
.cc-letterhead__label { color: var(--text-light); margin-bottom: var(--space-1); }
.cc-letterhead p:not(.cc-letterhead__label) { color: var(--text); }
/* Das Formular steht im Markup vor dem Briefkopf: wer „Gespräch anfragen“ wählt, landet am Formular;
   die Tab-Reihenfolge folgt der Anzeige. */
.cc-contact .cc-form { grid-column: 1 / span 7; }
/* stufe-tafel-quer */
@container page (max-width: 1040px) {
  .cc-contact { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cc-letterhead, .cc-contact .cc-form { grid-column: 1; }
}

/* ---------- Fußzeile ---------- */

.cc-footer { position: relative; background: var(--bg2); }
.cc-footer__grid { padding-block: var(--space-9) var(--space-7); row-gap: var(--space-7); }
.cc-footer__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--space-5); color: var(--text); }
.cc-footer__mark { display: inline-block; color: var(--text); }
.cc-footer__mark svg { display: block; width: 280px; max-width: 100%; height: auto; }
.cc-footer__brand address { color: var(--text-light); }
.cc-footer__col { grid-column: span 2; min-width: 0; }
.cc-footer__col:first-of-type { grid-column: 7 / span 2; }
.cc-footer__head { color: var(--text-light); margin-bottom: var(--space-3); }
.cc-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cc-footer__list a {
  color: var(--text); text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: var(--line-hair); text-underline-offset: 5px;
  display: inline-flex; align-items: center; min-height: var(--target-min);
  transition: text-decoration-color var(--duration-ui) var(--ease-standard);
}
.cc-footer__list a:hover { text-decoration-color: var(--gold); }
.cc-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  border-top: var(--line-hair) solid var(--line);
  padding-block: var(--space-5) var(--space-7);
  color: var(--text-light);
}
/* stufe-tafel-quer */
@container page (max-width: 1040px) {
  .cc-footer__brand { grid-column: 1 / -1; }
  .cc-footer__col, .cc-footer__col:first-of-type { grid-column: span 4; }
}
/* stufe-telefon */
@container page (max-width: 660px) {
  .cc-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .cc-footer__col, .cc-footer__col:first-of-type { grid-column: 1 / -1; }
}

/* ---------- Leistung und Rückfall ---------- */

/* Mobil und Touch: weniger Unschärfe, Pillen ohne eigenes backdrop-filter. */
@media (max-width: 760px), (pointer: coarse) {
  .cc-glass { -webkit-backdrop-filter: blur(var(--glass-blur-mobile)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-mobile)) saturate(var(--glass-saturate)); }
  /* Über dem ruhenden Lichtfeld sieht man die Unschärfe nicht; diese Flächen sparen sie. */
  .cc-btn--secondary, .cc-venture { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cc-btn--secondary { background-color: var(--glass-fill-strong); }
  .cc-light i { width: 110vw; }
  .cc-light i:nth-child(1), .cc-light i:nth-child(4) { left: -55vw; right: auto; }
  .cc-light i:nth-child(2), .cc-light i:nth-child(3) { right: -55vw; left: auto; }
  .cc-light i:nth-child(1), .cc-light i:nth-child(2) { top: -20vw; bottom: auto; }
  .cc-light i:nth-child(3), .cc-light i:nth-child(4) { bottom: -20vw; top: auto; }
  /* Die Drift läuft auch hier. Fällt ein Testgerät unter 60 Bilder je Sekunde, genügt: .cc-light i { animation: none; } */
}

/* Ohne backdrop-filter, bei reduzierter Transparenz und bei erhöhtem Kontrast wird Glas deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cc-glass, .cc-bar, .cc-btn--secondary { background-color: var(--bg2); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .cc-glass, .cc-bar, .cc-btn--secondary {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--bg2);
  }
  .cc-light, .cc-cursor { display: none; }
}
@media (prefers-contrast: more) {
  .cc-glass, .cc-bar { box-shadow: 0 0 0 var(--line-hair) var(--text-light); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-light i { animation: none; }
  .cc-cursor { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}