/* Die eine Oberfläche, die gut aussehen muss. Ruhig, viel Weißraum, keine
   Spielereien — die Zielgruppe entscheidet über Seriosität. Alle Farben und
   Schriften kommen aus /theme.css.

   Statisch aus public/ ausgeliefert und nicht über den Vite-Bundle: per
   JavaScript nachgeladenes CSS erzeugt einen Blitz ungestylten Inhalts, und
   diese Seite ist das Produkt. */

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

/* Keine Bildlaufleiste. Nicht aus Ziererei: die Seite wird auf Telefonen
   benutzt, wo das System ohnehin keine anzeigt, und auf dem Onepager steckt sie
   in einem gezeichneten Gerät, in dem ein Betriebssystem-Balken den Eindruck
   sofort bricht. Gescrollt wird weiter, nur ohne Leiste.

   Auf `html`, nicht auf `body`: den Bildlauf des Dokuments führt in allen
   aktuellen Browsern das Wurzelelement. */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--bg, #0b0b0c);
  color: var(--text, #fff);
  font-family: var(--font-body, system-ui), sans-serif;
  font-weight: var(--font-body-weight, 400);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Kopf und Inhalt teilen sich dieselbe Spalte: gleiche Maximalbreite, gleiche
   Zentrierung, gleiches Innenmaß. Nur so steht die linke Logokante exakt über
   der linken Kante der Überschrift — an der Ansichtskante ausgerichtet stünde
   es auf einem breiten Bildschirm weit daneben. */
.head,
.wrap { max-width: 560px; margin: 0 auto; }

/* Logo links, Pille rechts. `wrap` mit `gap`, weil beide zusammen auf einem
   schmalen Telefon nicht nebeneinander passen — dann rutscht die Pille unter
   das Logo, statt eines von beiden zu quetschen. */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px clamp(16px, 5vw, 48px);
}
.wrap { padding: 8px clamp(16px, 5vw, 48px) 64px; }

/* Höhe aus `--logo-height` (kommt aus theme.css), Breite aus dem
   Seitenverhältnis. **Nicht als style-Attribut am Bild**: in Produktion gilt
   `style-src 'self'`, und der Browser verwirft Inline-Styles dann kommentarlos.
   `min-width: 0` erlaubt dem Logo, in der Flex-Zeile zu schrumpfen, statt die
   Pille umzubrechen. */
.logo {
  display: block;
  height: var(--logo-height, 40px);
  width: auto;
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
}
.brand { display: flex; min-width: 0; }
.logo-text { font-size: 20px; font-weight: 600; }

.head-rechts { display: flex; align-items: center; }

.langs { display: flex; gap: 2px; justify-content: center; }

/* Kürzel statt Flaggen: eine Flagge steht für ein Land, nicht für eine Sprache,
   und „welche Flagge für Englisch" hat keine richtige Antwort. */
.lang {
  padding: 2px 6px;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--muted, #a1a1aa);
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.lang:hover { color: var(--text, #111); }
.lang.is-active { color: var(--text, #111); font-weight: 600; }
.lang:focus-visible { outline: 2px solid var(--accent, #ed1c24); outline-offset: 1px; }

/* Termin und Ort. Farbe und Textfarbe kommen aus dem Theme, damit die Pille
   beim nächsten Kunden nicht rot ist, nur weil ICR es war. */
.badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--accent, #ed1c24);
  color: var(--cta-text, #fff);
  font-size: clamp(11px, 3vw, 13px);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.badge strong { font-weight: 700; }

/* Auf schmalen Telefonen fehlen dem Gespann sonst rund zwölf Pixel und die
   Pille bricht unter das Logo. `max-height` statt `height`, weil die Höhe als
   Inline-Stil aus theme.json kommt und eine CSS-`height` dagegen verlöre —
   eine Obergrenze greift trotzdem. */
@media (max-width: 430px) {
  .head { gap: 12px; padding-left: 16px; padding-right: 16px; }
  /* Die Deckelung gilt dem **kompakten** Kopf: dort teilen Marke und Pille eine
     enge Zeile, und ein 80er Logo drängte die Pille aus dem Bild. Im großen
     Layout bricht die Pille in eine eigene Kopfzeile um, die Marke hat ihre
     Zeile für sich, und 34px wären dort grundlos klein.

     Negativ formuliert, weil die Anmeldeseite gar kein `data-layout` trägt und
     die Deckelung dort weiter greifen muss.

     **`body:not(…)` und nicht `:not(…)`.** Ohne den Typ trifft die Regel jedes
     Logo: `<html>`, `<header>` und `<span class="brand">` sind allesamt
     Vorfahren, die das Attribut nicht tragen, und einer genügt. */
  body:not([data-layout="gross"]) .logo { max-height: 34px; }
  .badge { padding: 5px 13px; }
}

/* Klein genug, dass eine Überschrift von der Länge „Ihr Profilbild für den ICR
   2026" auf jeder realistischen Breite in eine Zeile passt — auf einem 375er
   Telefon wie auf dem Desktop.

   `text-wrap: balance` statt `white-space: nowrap`: die Copy kommt aus
   theme.json und ist pro Kunde anders. Ein erzwungenes nowrap schöbe eine
   längere Überschrift aus dem Bild; so bricht sie im Zweifel um, aber
   ausgewogen statt mit einem einzelnen Wort in der zweiten Zeile. */
h1 {
  font-family: var(--font-heading, var(--font-body, system-ui)), sans-serif;
  font-weight: var(--font-heading-weight, 600);
  font-size: clamp(18px, 5.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 16px 0 8px;
}

.intro { color: var(--muted, #a1a1aa); margin: 0 0 28px; }

/* Die Leinwand erscheint erst, wenn ein Foto da ist. Vorher zeigte sie nur
   einen leeren Rahmen mit einem roten Balken — das sieht nach kaputt aus und
   nicht nach „hier kommt Ihr Bild hin". Die Klasse setzt main.js. */
/* Der Ring als `box-shadow` und nicht als `border`: die Höhe des Rahmens setzt
   main.js aus der Szenenhöhe, und bei `box-sizing: border-box` fräße ein echter
   Rand zwei Pixel davon ab — die Leinwand wäre unten beschnitten. Ein Schatten
   liegt außerhalb des Kastens und lässt die Rechnung in Ruhe.

   Nötig ist er, weil viele Vorlagen unten auf einer weißen Fläche enden. Ohne
   Ring liefe die Bildkante in den weißen Seitenhintergrund, und niemand sähe,
   wo das Bild aufhört. */
.stage-frame {
  display: none;
  overflow: hidden;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 28px;
  background: var(--surface, rgba(127, 127, 127, 0.1));
  box-shadow: 0 0 0 1px var(--border, rgba(127, 127, 127, 0.35));
}
body.has-photo .stage-frame { display: block; }
#stage { transform-origin: top left; }

.controls { margin-top: 28px; }
.field { margin: 0 0 18px; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--muted, #a1a1aa); }

.field input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  background: var(--surface, rgba(127, 127, 127, 0.1));
  border: 1px solid var(--border, rgba(127, 127, 127, 0.4));
  border-radius: 3px;
}
.field input[type="text"]:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--accent, #ed1c24);
  outline-offset: 2px;
}

/* Auswahlfeld wie die Textzeile, damit die Spalte eine Kante behält. Das
   native Aufklappmenü bleibt: es ist auf jedem System bedienbar, und ein
   nachgebautes wäre auf einem Telefon schlechter. */
.field select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  background: var(--surface, rgba(127, 127, 127, 0.1));
  border: 1px solid var(--border, rgba(127, 127, 127, 0.4));
  border-radius: 3px;
}

/* Beim Umschalter steht die Beschriftung hinter dem Kasten: erst die Marke,
   dann wofür sie steht. */
.field-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}
.field-toggle input { width: 18px; height: 18px; accent-color: var(--accent, #ed1c24); flex: none; }
.field-toggle label { margin-bottom: 0; cursor: pointer; }

/* Das native Dateifeld ist auf jedem System anders und nie schön. Das Label
   trägt die Gestaltung, das Feld selbst bleibt für Tastatur und Screenreader
   erreichbar statt display:none — und steht deshalb im Markup davor, damit
   der Fokusring über den Geschwisterselektor am Label sichtbar wird. */
#photo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.upload {
  display: block;
  padding: 20px;
  margin-bottom: 0;
  text-align: center;
  font-size: 15px;
  color: var(--text, #fff);
  border: 1px dashed var(--border, rgba(127, 127, 127, 0.5));
  border-radius: 3px;
  cursor: pointer;
}
.upload:hover,
#photo:focus-visible + .upload { border-color: var(--accent, #ed1c24); }
#photo:focus-visible + .upload { outline: 2px solid var(--accent, #ed1c24); outline-offset: 2px; }

.formats { border: 0; padding: 0; margin: 0 0 20px; }
.formats legend { font-size: 14px; color: var(--muted, #a1a1aa); margin-bottom: 8px; padding: 0; }

/* Kacheln statt einer Zeile Radios. Der Grund ist das LinkedIn-Titelbild: aus
   „4:1" allein erschließt niemand, dass es ein schmaler Streifen ohne Platz
   für ein Gesicht ist, aus dem Rechteck daneben sofort.

   `auto-fit` statt einer festen Spaltenzahl: die Zahl der Formate steht im
   Template und ändert sich pro Kunde. */
/* Eine Zeile, keine Spalten.

   Ein Raster gibt jeder Kachel eine gleich breite Spalte und verteilt sie damit
   über die ganze Kolumne: bei zwei Formaten standen 250 px Luft dazwischen,
   obwohl die Kacheln gedeckelt sind. Die Kacheln gehören nebeneinander, und was
   rechts übrig bleibt, bleibt übrig. */
.format-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Selbst ein Raster, damit die Karte die volle Zeilenhöhe bekommt. Ohne das
   bleibt eine Karte mit einzeiliger Beschriftung kürzer als eine mit
   umbrechender, und die Reihe steht unten ausgefranst.

   `flex: 1 1 96px` mit Deckel: bei vier Formaten wachsen die Kacheln auf die
   verfügbare Breite und füllen die Zeile, bei einem oder zwei hören sie bei
   160 px auf, statt sich über die halbe Kolumne zu ziehen. */
.format { display: grid; flex: 1 1 96px; max-width: 160px; cursor: pointer; }

/* Auf dem Telefon zwei je Zeile. Vier Kacheln zu 96 px passen dort nicht in
   eine Reihe, und ohne diese Regel bräche die vierte allein um. */
@media (max-width: 28rem) {
  .format { flex-basis: calc(50% - 4px); max-width: none; }
}

/* Nicht `display: none`: ein ausgeblendetes Radio ist nicht mehr fokussierbar,
   und die Formatwahl wäre per Tastatur unerreichbar. */
.format input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.format-karte {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 2px;
  padding: 10px 6px 8px;
  border: 1px solid var(--border, #27272a);
  border-radius: 3px;
  text-align: center;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.format-skizze {
  inline-size: 34px;
  block-size: 34px;
  color: var(--muted, #a1a1aa);
}

/* Umriss statt Fläche: gefüllt sähen die Rechtecke aus wie Knöpfe, und die
   Aussage ist das Verhältnis, nicht das Gewicht. */
.format-skizze rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.format-titel { font-size: 14px; line-height: 1.3; }
.format-mass {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted, #a1a1aa);
  font-variant-numeric: tabular-nums;
}

.format:hover .format-karte { border-color: var(--accent, #ed1c24); }

/* Geschwisterselektor und **nicht** `:has(input:checked)`: `setFormat` in
   app/main.js hakt das Radio programmatisch an, und darauf rechnet `:has()`
   nicht zuverlässig neu. Siehe den Kommentar an formatChoicesHtml. */
.format input:checked ~ .format-karte {
  border-color: var(--accent, #ed1c24);
  background: color-mix(in srgb, var(--accent, #ed1c24) 10%, transparent);
}
.format input:checked ~ .format-karte .format-skizze { color: var(--accent, #ed1c24); }
.format input:checked ~ .format-karte .format-skizze rect {
  fill: color-mix(in srgb, var(--accent, #ed1c24) 22%, transparent);
}

.format input:focus-visible ~ .format-karte {
  outline: 2px solid var(--accent, #ed1c24);
  outline-offset: 2px;
}

/* `--cta` fällt auf den Akzent zurück. Zwei Tokens, weil beides
   auseinanderfallen kann: beim Büdchentag ist der Knopf blau und der Akzent in
   der Überschrift orange. Wo nur `--accent` gesetzt ist, ändert sich nichts. */
.cta {
  width: 100%;
  padding: 14px 20px;
  font: inherit;
  font-weight: 600;
  color: var(--cta-text, #fff);
  background: var(--cta, var(--accent, #ed1c24));
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
/* Ohne Foto gäbe es nur den Platzhalter zu exportieren. Der Knopf ist deshalb
   gesperrt, bis eines da ist — nicht versteckt, damit sichtbar bleibt, worauf
   die Seite hinausläuft. */
.cta:disabled { opacity: 0.45; cursor: not-allowed; }
.cta:disabled:active { pointer-events: none; }
.cta:focus-visible { outline: 2px solid var(--text, #fff); outline-offset: 2px; }

/* Unter dem Knopf zentriert. Der Knopf nimmt die volle Breite, und ein
   linksbündiges Icon darunter hinge an einer Kante, die es sonst nirgends gibt. */
.shares {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.share { color: var(--muted, #a1a1aa); }

/* Ein Icon ohne Text braucht trotzdem eine Fläche, die sich mit dem Daumen
   treffen lässt: 24 px Grafik plus Innenabstand ergibt 44 px, das Mindestmaß
   für ein Tap-Target. */
.share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 3px;
}
.share-icon:hover { color: var(--accent, #ed1c24); }
.share-icon:focus-visible { outline: 2px solid var(--accent, #ed1c24); outline-offset: 0; }

.legal { font-size: 13px; color: var(--muted, #a1a1aa); margin-top: 24px; }

/* Anmeldung und Ablaufhinweis teilen sich das Layout der Kundenseite, tragen
   aber kein Werkzeug. Der Inhalt sitzt weiter oben, weil unter ihm nichts
   folgt — sonst hinge ein Satz allein am oberen Rand einer leeren Seite. */
.ist-hinweis .wrap { padding-top: 48px; }
.ist-hinweis .controls { max-width: 320px; }

/* Der Fehlerhinweis am Anmeldeformular. Rot ist hier nicht die Akzentfarbe des
   Kunden: die kann selbst Rot sein, und dann wäre der Fehler nicht vom Rest zu
   unterscheiden. */
.fehler {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-radius: 3px;
  background: rgba(200, 30, 30, 0.1);
  color: #b3261e;
  font-size: 14px;
}

/* Die Datenschutzzusage steht im Fuß und braucht dort keinen eigenen Abstand —
   den setzt der Fuß über `gap`. Schmaler als die Spalte, damit der Satz auf
   einem breiten Bildschirm nicht als eine sehr lange Zeile dasteht. */
.privacy {
  max-width: 42ch;
  margin: 0;
  font-size: 13px;
  color: var(--muted, #a1a1aa);
  text-wrap: balance;
}

/* Sprachwahl und Hinweis untereinander, beide zentriert. Der Umschalter steht
   oben: er ist eine Handlung, der Hinweis nur eine Angabe. */
.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px clamp(16px, 5vw, 48px);
  text-align: center;
  font-size: 13px;
}
.foot a { color: var(--muted, #a1a1aa); }

/* ==========================================================================
   Layout „gross"

   Die zweite von zwei festen Anordnungen, gewählt über `theme.layout`. Alles
   hier ist unter `[data-layout="gross"]` gekapselt — das kompakte Layout darf
   sich nicht ändern, weil dieses dazukam.

   Der Unterschied ist nicht die Farbe, sondern die Gliederung: Termin und Ort
   stehen als Eyebrow über einer sehr großen Überschrift, das Upload-Feld ist
   der Blickfang statt einer Zeile, und alles Kleingedruckte läuft in einer
   zweiten Schriftrolle (`--font-mono`). Der Ton kommt trotzdem aus den Tokens:
   dieselbe Anordnung trägt einen Kongress genauso wie ein Stadtfest.
   ========================================================================== */

[data-layout="gross"] {
  /* Zurückhaltend gestapelt statt am oberen Rand klebend: die Seite besteht
     aus einem Gedanken und einem Feld, und beides darf mittig stehen. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Marke links, Termin-Pille rechts. `flex-wrap`, weil beides zusammen auf einem
   Telefon nicht in eine Zeile passt: die Pille trägt Datum und Ort, und ein
   erzwungenes Nebeneinander presste entweder das Logo klein oder schöbe die
   Zeile seitlich aus dem Bild. Umgebrochen steht sie unter der Marke, also da,
   wo sie vorher stand. */
[data-layout="gross"] .head-gross {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 24px clamp(20px, 5vw, 32px) 0;
}

[data-layout="gross"] .wrap-gross {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  max-width: 640px;
  padding: 32px clamp(20px, 5vw, 32px) 48px;
}

/* Termin und Ort, im Kopf rechts neben der Marke. Sie beantwortet „wann und
   wo", bevor die Überschrift „was" sagt, und steht deshalb über allem anderen.

   **Kein `white-space: nowrap`.** Es wäre der Reflex, damit Datum und Ort in
   einer Zeile bleiben, und auf dem Desktop unnötig: dort ist ohnehin Platz.
   Eng wird es auf dem Telefon, und dort richtet es Schaden an. Gemessen sind
   es 319 px Pille gegen 335 px Spalte auf einem 375er Gerät, also 16 px Luft;
   ein längerer Ort schöbe die Seite seitlich aus dem Bild.

   Ohne die Sperre greift stattdessen `flex-wrap` oben: passt die Pille nicht
   mehr neben die Marke, rutscht sie ganz in die nächste Kopfzeile und hat dort
   die volle Breite. Erst wenn auch die nicht reicht, bricht ihr Text um. */
[data-layout="gross"] .eyebrow {
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface, #e4efce);
  font-family: var(--font-mono, var(--font-body, ui-monospace)), ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}

[data-layout="gross"] h1 {
  margin: 0;
  font-family: var(--font-heading, var(--font-body, system-ui)), sans-serif;
  font-weight: var(--font-heading-weight, 900);
  font-size: clamp(2.5rem, 13vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Das hervorgehobene Teilstück der Überschrift. Der Renderer setzt den Span
   um die Wörter aus `copy.titleAccent` — im Kundentext steht kein Markup. */
[data-layout="gross"] h1 .akzent { color: var(--accent, #d8672e); }

[data-layout="gross"] .intro {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-mono, var(--font-body, ui-monospace)), ui-monospace, monospace;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text, #273078);
  opacity: 0.85;
}

[data-layout="gross"] .controls { width: 100%; margin-top: 0; }

/* Das Upload-Feld **wird** zur Vorschau: beide stehen an derselben Stelle, und
   sobald ein Foto da ist, tritt das eine an die Stelle des anderen. Untereinander
   waere die aufgeraeumte Seite ploetzlich zwei Kaesten hoch, und der obere haette
   seine Aufgabe erledigt.

   **Rahmen und Polsterung traegt ein eigener Kasten drumherum.** Am `.stage-frame`
   selbst duerfen sie nicht haengen: `main.js` rechnet den Massstab aus dessen
   `clientWidth` und setzt seine Hoehe aus der Szenenhoehe. Ein Padding zaehlt in
   `clientWidth` mit, ein Rand bei `box-sizing: border-box` gegen die Hoehe - die
   Buehne bekommt dadurch einen zu grossen Massstab und laeuft aus ihrem Kasten
   heraus. Genau derselbe Grund, aus dem der Ring im kompakten Layout ein
   `box-shadow` ist und kein `border`. */
/* Sobald ein Foto da ist, steht das Bild für sich. Polsterung, Rand und Fläche
   sind hier raus: der gerahmte Zustand konkurrierte mit dem Bild, das er
   zeigen soll, und das Bild ist das Ergebnis der Seite.

   Der Kasten bleibt trotzdem stehen. Er trägt den Abstand nach unten und
   `line-height: 0` gegen die Unterlänge unter der Leinwand — und vor allem
   darf beides **nicht** an `.stage-frame`: dort zählt Polsterung in
   `clientWidth` mit, aus dem main.js den Maßstab rechnet. Siehe CLAUDE.md. */
[data-layout="gross"] .stage-rahmen {
  display: none;
  margin: 0 0 20px;
  line-height: 0;
}
[data-layout="gross"].has-photo .stage-rahmen { display: block; }
[data-layout="gross"] .stage-frame {
  margin: 0;
  border-radius: 12px;
  box-shadow: none;
  background: none;
}
[data-layout="gross"].has-photo .upload-gross { display: none; }

/* Das Upload-Feld. Im kompakten Layout eine Zeile, hier das, worauf die Seite
   hinausläuft — und deshalb groß genug, dass man es auf einem Telefon mit dem
   Daumen trifft, ohne zu zielen. */
[data-layout="gross"] .upload-gross {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 16px;
  background: var(--surface, #e4efce);
  border: 3px dashed var(--cta, var(--accent, #273078));
  border-radius: 20px;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
[data-layout="gross"] .upload-gross:hover { background: var(--accent-weich, var(--surface, #b4ff7a)); }
[data-layout="gross"] .upload-icon { display: block; line-height: 0; color: var(--cta, var(--accent, #273078)); }
[data-layout="gross"] .upload-titel {
  font-family: var(--font-heading, var(--font-body, system-ui)), sans-serif;
  font-weight: var(--font-heading-weight, 900);
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
}
[data-layout="gross"] .upload-hinweis {
  font-family: var(--font-mono, var(--font-body, ui-monospace)), ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Knöpfe und Beschriftungen in der Mono-Rolle, versal und gesperrt — das ist
   der Ton, den die Anordnung trägt. */
[data-layout="gross"] .cta {
  min-height: 52px;
  border-radius: 999px;
  font-family: var(--font-mono, var(--font-body, ui-monospace)), ui-monospace, monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
[data-layout="gross"] .field label,
[data-layout="gross"] .formats legend {
  font-family: var(--font-mono, var(--font-body, ui-monospace)), ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-layout="gross"] .field input[type="text"],
[data-layout="gross"] .field select { border-radius: 12px; border-width: 2px; }

/* Der Fuss bleibt schlicht und mittig - wie im kompakten Layout. Er traegt
   Angaben, keine Handlungen; ein versaler Link mit farbigem Unterstrich zoege
   Aufmerksamkeit auf die Stelle, an der die Seite zu Ende ist. */
[data-layout="gross"] .foot { max-width: 640px; margin: 0 auto; }