/* 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; }
  .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: 6px; padding: 0; }
.format { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 8px 0; cursor: pointer; }
.format input { accent-color: var(--accent, #ed1c24); }

/* `--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;
}

[data-layout="gross"] .head-gross {
  display: block;
  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. Kein eigener Kasten im Kopf — hier ist es die erste Zeile,
   die gelesen wird, und sie beantwortet „wann und wo", bevor die Überschrift
   „was" sagt. */
[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`. */
[data-layout="gross"] .stage-rahmen {
  display: none;
  margin: 0 0 20px;
  padding: 12px;
  border: 3px solid var(--cta, var(--accent, #273078));
  border-radius: 20px;
  background: var(--surface, #e4efce);
  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; }