/* Creator-Bereich. Baut auf board.css auf (Farben, Schrift, Grundformen) und
   ergaenzt nur, was der Bereich eigen hat. Kein Inline-Stil, die Seite laeuft
   unter einer strengen Inhaltsrichtlinie. */

body.creator { max-width: 60rem; margin: 0 auto; padding: 0 1rem 3rem; }
body.creator .kopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 0; border-bottom: 1px solid var(--linie, #222); }
body.creator .marke { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
body.creator .marke img { height: 2.4rem; }
body.creator .marke span { color: var(--leise, #888); font-size: 0.875rem; }
body.creator .nav { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-left: auto; }
body.creator .nav button { background: none; border: 0; color: var(--leise, #999); padding: 0.5rem 0.7rem; cursor: pointer; border-radius: 0.4rem; font: inherit; }
body.creator .nav button.an { color: var(--gelb, #F4CE14); }
body.creator .rechts { display: flex; align-items: center; gap: 0.6rem; }
body.creator .wer { color: var(--leise, #888); font-size: 0.8125rem; }
body.creator .inhalt { padding-top: 1.5rem; }
body.creator .fuss { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linie, #222); display: flex; gap: 1rem; justify-content: space-between; color: var(--leise, #777); font-size: 0.8125rem; flex-wrap: wrap; }
body.creator .fuss a { color: inherit; }

.karte { background: var(--karte, #141414); border: 1px solid var(--linie, #222); border-radius: 0.75rem; padding: 1.25rem; margin: 0 0 1rem; max-width: 34rem; }
.karte h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
/* Vertragspaket (03.09. abends): aufklappbare Dokumente, ein Formular. */
.dokumente { display: grid; gap: 0.4rem; margin: 1rem 0; }
.dokumente details.dok { border: 1px solid var(--linie, #222); border-radius: 0.6rem; background: #0f0f0f; }
.dokumente details.dok > summary { cursor: pointer; padding: 0.75rem 0.9rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; list-style: none; }
.dokumente details.dok > summary::-webkit-details-marker { display: none; }
.dokumente details.dok > summary::before { content: '›'; color: var(--gelb, #F4CE14); margin-right: 0.5rem; display: inline-block; transition: transform 0.15s; }
.dokumente details.dok[open] > summary::before { transform: rotate(90deg); }
.dokumente details.dok.fertig > summary b { color: var(--leise, #999); font-weight: 500; }
.dokumente .vertrag-lesen.offen { margin: 0 0.9rem 0.9rem; max-height: 60vh; }
.paket { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linie, #222); }
/* Rueckfrage vor der Kuendigung, unter dem ersten Knopf statt an seiner
   Stelle (K3, 22.09.). */
.kuend-frage { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie, #222); }
.kuend-frage > p { margin: 0; }
/* Eine Kuendigung steht auf der Startseite ganz oben (K3, 22.09.). */
.karte.gekuendigt { border-color: #b3261e; }
.karte.gekuendigt p { margin: 0 0 0.8rem; }
.paket h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
/* Zugeklappte Karte (Vertraege unter Konto seit 03.09. nachmittags). */
details.karte > summary { cursor: pointer; font-size: 1.25rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
details.karte > summary::before { content: '›'; display: inline-block; color: var(--gelb, #F4CE14); transition: transform 0.15s; }
details.karte[open] > summary::before { transform: rotate(90deg); }
details.karte > summary::-webkit-details-marker { display: none; }
details.karte[open] > summary { margin-bottom: 0.5rem; }
.karte p { margin: 0.4rem 0; line-height: 1.5; max-width: 65ch; }
.karte label { display: block; margin: 0.9rem 0 0; }
.karte label span { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise, #888); margin-bottom: 0.3rem; }
.karte input[type=text], .karte input[type=password], .karte input[type=email], .karte textarea {
  width: 100%; box-sizing: border-box; padding: 0.7rem 0.8rem; background: #0b0b0b; color: #fff; border: 1px solid #333; border-radius: 0.5rem; font: inherit;
}
.karte input:focus, .karte textarea:focus { outline: 2px solid var(--gelb, #F4CE14); outline-offset: 1px; }
.karte .zeile { display: flex; gap: 0.6rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.karte .haken { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.8rem; color: var(--leise, #aaa); font-size: 0.9rem; }
.knopf { background: var(--gelb, #F4CE14); color: #000; border: 0; padding: 0.7rem 1.1rem; border-radius: 0.5rem; font: inherit; font-weight: 600; cursor: pointer; }
.knopf.leise { background: transparent; color: var(--gelb, #F4CE14); border: 1px solid var(--gelb, #F4CE14); }
.knopf.rot { background: #b3261e; color: #fff; }
.knopf:disabled { opacity: 0.5; cursor: default; }
.klein { background: none; border: 1px solid #333; color: #ccc; padding: 0.35rem 0.6rem; border-radius: 0.4rem; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.fehler { color: #ff7b72; margin-top: 0.6rem; }
/* Bestaetigung nach einer gelungenen Aktion (04.09.). Ohne sie sah eine
   Freigabe, die schon bestand, aus wie ein toter Knopf. */
.gelungen { color: #7ee787; margin-top: 0.6rem; }
.gut { color: #7ee787; margin-top: 0.6rem; }
.leer { color: var(--leise, #888); }

.qr { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0; }
.qr svg { width: 200px; height: 200px; background: #fff; border-radius: 0.5rem; padding: 0.5rem; box-sizing: content-box; }
.qr code { font-size: 1rem; letter-spacing: 0.08em; word-break: break-all; }

.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 1.2rem; margin: 1rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: 0.05em; }
@media (max-width: 30rem) { .codes { grid-template-columns: 1fr; } }

.info h3 { margin: 1.3rem 0 0.3rem; font-size: 1rem; }
.info p { white-space: pre-line; line-height: 1.55; max-width: 65ch; }
.info .hinweis { color: var(--leise, #999); font-size: 0.875rem; }

.profil dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.6rem 1rem; margin: 0.5rem 0 0; }
.profil dt { color: var(--leise, #888); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; }
.profil dd { margin: 0.15rem 0 0; word-break: break-word; }
.profil .text { white-space: pre-line; max-width: 65ch; line-height: 1.5; }

.liste { list-style: none; padding: 0; margin: 0.5rem 0; }
.liste li { display: flex; justify-content: space-between; gap: 0.8rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--linie, #222); flex-wrap: wrap; }
.liste .meta { color: var(--leise, #888); font-size: 0.8125rem; }

/* Die Leiste ist im HTML mit hidden angelegt; ohne diese Regel gewinnt ihr
   display gegen das Attribut, und Unangemeldete sehen alle Reiter. */
/* Mit body.creator davor, sonst verliert die Regel gegen „body.creator .nav
   { display: flex }" und die Leiste bleibt sichtbar, obwohl sie hidden traegt.
   Genau so kam Jakob am 03.09. an den Vertraegen vorbei auf die Galerien. */
body.creator .nav[hidden], body.creator .rechts[hidden] { display: none !important; }
/* Dasselbe fuer alles andere, das per Attribut versteckt wird und eine eigene
   display-Regel traegt (Auswahlleiste, Albumverwaltung, Formulare). */
body.creator [hidden] { display: none !important; }
.karte.breit { max-width: none; }
/* Vertraege: Lesekasten mit eigenem Scrollbereich, Ende-Marke fuer den Beobachter */
.vertrag-lesen { max-height: 60vh; overflow-y: auto; padding: 1rem 1.2rem; margin: 0.8rem 0; background: #0b0b0b; border: 1px solid var(--linie, #333); border-radius: 0.5rem; line-height: 1.55; }
.vertrag-lesen h3 { margin: 1.1rem 0 0.3rem; font-size: 0.9375rem; color: var(--gelb, #F4CE14); }
.vertrag-lesen p { margin: 0.4rem 0; max-width: 70ch; }
.vertrag-ende { height: 1px; }
body.quittung { max-width: 46rem; margin: 2rem auto; padding: 0 1rem; background: #fff; color: #111; }
body.quittung .vertrag-druck h1 { font-size: 1.4rem; margin: 0.5rem 0 1rem; }
body.quittung .vertrag-druck h2 { font-size: 1rem; margin: 1.2rem 0 0.3rem; }
body.quittung .vertrag-druck p { line-height: 1.5; }
body.quittung .unterschrift { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #999; }
@media print { body.quittung { margin: 0; } }
/* Profil-Editor: das Raster wie im Bewerbungsformular, drei Spalten rechts. */
.profil-editor h3 { margin: 1.4rem 0 0.3rem; font-size: 1rem; }
.profil-editor h4.pr-gruppe { margin: 1rem 0 0.2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gelb, #F4CE14); }
.profil-editor .pr-block { border: 1px solid var(--linie, #222); border-radius: 0.5rem; overflow: hidden; }
.profil-editor .pr-kopf, .profil-editor .pr-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem 6.5rem; align-items: center; padding: 0.35rem 0.7rem; }
.profil-editor .pr-kopf { background: #0b0b0b; color: var(--leise, #888); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.profil-editor .pr-kopf span, .profil-editor .pr-wahl { text-align: center; }
.profil-editor .pr-zeile:nth-child(odd) { background: #111; }
.profil-editor .pr-name { font-size: 0.9375rem; }
.profil-editor .pr-wahl { display: block; margin: 0; cursor: pointer; }
.profil-editor .pr-wahl input { width: 1.1rem; height: 1.1rem; accent-color: var(--gelb, #F4CE14); }
.profil-editor .reihe { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.4rem 0; }
.profil-editor .reihe label.haken { display: flex; gap: 0.4rem; align-items: center; margin: 0; padding: 0.35rem 0.6rem; border: 1px solid var(--linie, #333); border-radius: 2rem; cursor: pointer; }
.profil-editor .reihe label.haken:has(input:checked) { border-color: var(--gelb, #F4CE14); color: var(--gelb, #F4CE14); }
.profil-editor label small { display: block; margin: 0.15rem 0 0.3rem; }
.profil-editor textarea, .profil-editor input[type="text"], .profil-editor input[type="number"] { display: block; width: 100%; box-sizing: border-box; background: #0b0b0b; color: inherit; border: 1px solid var(--linie, #333); border-radius: 0.4rem; padding: 0.5rem 0.7rem; font: inherit; }
.profil-editor .reihe label { flex: 1 1 8rem; }
@media (max-width: 40rem) {
  .profil-editor .pr-kopf, .profil-editor .pr-zeile { grid-template-columns: minmax(0, 1fr) 3.2rem 3.2rem 3.2rem; }
  .profil-editor .pr-kopf span { font-size: 0.6rem; }
}
.kacheln .leer { grid-column: 1 / -1; margin: 0; }
.beispiele { margin: 0.8rem 0; padding: 0.7rem 0.9rem; border: 1px dashed var(--linie, #333); border-radius: 0.5rem; }
.beispiele h4 { margin: 0 0 0.3rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--leise, #888); }
.beispiele ul { margin: 0; padding-left: 1.1rem; line-height: 1.5; }
.schritte { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.schritte li { display: flex; gap: 0.8rem; align-items: center; justify-content: space-between; padding: 0.55rem 0; border-top: 1px solid var(--linie, #222); }
.schritte li:first-child { border-top: 0; }
.schritte li.fertig { color: var(--leise, #888); }
/* Galerien nach dem Vorbild der Fotos-App (03.09.): Alben mit Titelbild,
   darin ein dichtes Raster ohne Rahmen, Auswahl mit Haken, grosse Ansicht. */
.alben-kopf .kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.alben-kopf .kopfzeile h2 { margin: 0; font-size: 1.75rem; letter-spacing: -0.01em; }
.alben-kopf details.beispiele { border: 0; padding: 0; margin: 0.4rem 0 0; }
.alben-kopf details.beispiele summary { cursor: pointer; color: var(--leise, #999); font-size: 0.875rem; }
.alben-kopf details.beispiele ul { margin: 0.4rem 0 0; padding-left: 1.1rem; line-height: 1.55; color: #ccc; font-size: 0.9375rem; }
.alben-kopf .neu-form { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--linie, #222); }
.alben { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1.4rem 1rem; margin: 0.4rem 0 1.5rem; }
.album { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; display: flex; flex-direction: column; gap: 0.35rem; }
.album .deckel { aspect-ratio: 1; border-radius: 0.8rem; overflow: hidden; background: #171717; }
.album .deckel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s; }
.album:hover .deckel img { transform: scale(1.03); }
.album .leerdeckel { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, #222, #111); }
.album .name { font-weight: 500; font-size: 0.9375rem; line-height: 1.25; }
.album .meta { color: var(--leise, #888); font-size: 0.8125rem; }
.album:focus-visible { outline: 2px solid var(--gelb, #F4CE14); outline-offset: 3px; border-radius: 0.8rem; }

.album-seite { padding-bottom: 0.5rem; }
.album-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.album-kopf .rechts { display: flex; gap: 0.4rem; }
.album-kopf .zurueck { background: none; border: 0; color: var(--gelb, #F4CE14); font: inherit; font-size: 0.9375rem; cursor: pointer; padding: 0.3rem 0; }
.album-kopf .plus { font-size: 1.15rem; line-height: 1; padding: 0.25rem 0.6rem; font-weight: 500; }
.album-seite h2 { margin: 0; font-size: 1.75rem; letter-spacing: -0.01em; }
.album-seite > .meta { margin: 0.1rem 0 0.8rem; }
.album-mehr { display: flex; gap: 0.5rem; margin: 0 0 0.8rem; }
.klein.rot { border-color: #b3261e; color: #ff7b72; }
.upload-stand { margin: 0.2rem 0; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); gap: 3px; margin: 0.2rem 0 0; border-radius: 0.5rem; overflow: hidden; }
.raster .leer { grid-column: 1 / -1; margin: 0.4rem 0 1rem; }
.foto { position: relative; aspect-ratio: 1; background: #111; border: 0; padding: 0; overflow: hidden; cursor: pointer; display: block; }
.foto img, .foto video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.15s; }
.foto:focus-visible { outline: 2px solid var(--gelb, #F4CE14); outline-offset: -2px; }
.foto .abzeichen { position: absolute; right: 0.4rem; top: 0.35rem; color: #fff; font-size: 0.7rem; text-shadow: 0 0 4px rgba(0,0,0,0.8); }
.foto.frei::before { content: ''; position: absolute; left: 0.45rem; top: 0.45rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gelb, #F4CE14); box-shadow: 0 0 0 2px rgba(0,0,0,0.6); z-index: 1; }
.foto .haken { display: none; position: absolute; right: 0.4rem; bottom: 0.4rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,0.35); box-sizing: border-box; z-index: 1; }
.raster.wahl .foto .haken { display: block; }
/* Aus unserem Shooting (22.09.): im Auswahlmodus nicht waehlbar. */
.raster.wahl .foto.fest { opacity: 0.4; cursor: default; }
.raster.wahl .foto.fest .haken { display: none; }
.foto.gewaehlt img, .foto.gewaehlt video { transform: scale(0.88); }
.foto.gewaehlt .haken { background: var(--gelb, #F4CE14); border-color: var(--gelb, #F4CE14); }
.foto.gewaehlt .haken::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #000; font-size: 0.8rem; font-weight: 700; }
.auswahl-leiste { position: sticky; bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: rgba(20,20,20,0.92); backdrop-filter: blur(8px); border: 1px solid var(--linie, #222); border-radius: 0.75rem; padding: 0.6rem 0.9rem; margin-top: 1rem; z-index: 5; }
.fortschritt { height: 0.25rem; background: #222; border-radius: 0.2rem; overflow: hidden; margin: 0.3rem 0 0.6rem; }
.fortschritt div { height: 100%; background: var(--gelb, #F4CE14); width: 0; transition: width 0.2s; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.97); z-index: 50; display: flex; flex-direction: column; }
body.lb-offen { overflow: hidden; }
.lb-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 1rem; color: #ccc; }
.lb-kopf .rechts { display: flex; gap: 0.4rem; }
.lb-mitte { flex: 1; display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; justify-items: center; min-height: 0; padding: 0 0.5rem 1rem; }
.lb-mitte img, .lb-mitte video { max-width: 100%; max-height: calc(100vh - 6rem); object-fit: contain; border-radius: 0.3rem; }
.lb-pfeil { background: rgba(255,255,255,0.08); color: #fff; border: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lb-pfeil:disabled { opacity: 0.2; cursor: default; }
@media (max-width: 40rem) {
  .raster { grid-template-columns: repeat(3, 1fr); }
  .alben { grid-template-columns: repeat(2, 1fr); }
  .lb-mitte { grid-template-columns: 2.2rem 1fr 2.2rem; }
}

.anfrage { border-left: 3px solid var(--gelb, #F4CE14); }
.anfrage.offen { border-left-color: var(--gelb, #F4CE14); }
.anfrage.angenommen { border-left-color: #7ee787; }
.anfrage.abgelehnt, .anfrage.zurueckgezogen { border-left-color: #555; }
.anfrage .art { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; color: var(--leise, #888); }
.verlauf { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.verlauf li { padding: 0.6rem 0.8rem; border-radius: 0.5rem; margin: 0.4rem 0; max-width: 85%; white-space: pre-line; line-height: 1.45; }
.verlauf li.raus { background: #1b1b1b; }
.verlauf li.rein { background: #24230f; margin-left: auto; }
.verlauf .meta { display: block; color: var(--leise, #888); font-size: 0.75rem; margin-top: 0.3rem; }

.auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.4rem; margin: 0.6rem 0; }
.auswahl label { position: relative; aspect-ratio: 1; border-radius: 0.4rem; overflow: hidden; border: 2px solid transparent; cursor: pointer; margin: 0; }
.auswahl label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auswahl input { position: absolute; top: 0.3rem; left: 0.3rem; }
.auswahl label.an { border-color: var(--gelb, #F4CE14); }
.zitat { border-left: 3px solid #333; padding-left: 0.8rem; color: #ccc; white-space: pre-line; }

/* Profilbild oben im Profil (Jakob, 04.09.). */
.pb-kopf { display: flex; align-items: center; gap: 1rem; margin: 0.4rem 0 1.2rem; flex-wrap: wrap; }
.pb-avatar { width: 5.5rem; height: 5.5rem; border-radius: 50%; background: #1c1c1c; display: flex; align-items: center; justify-content: center; color: var(--gelb, #F4CE14); font-weight: 700; font-size: 2rem; overflow: hidden; border: 2px solid #2a2a2a; flex: 0 0 auto; }
.pb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-text { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.pb-text .meta { margin: 0; }
.pb-knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pb-wahl { margin: 0.4rem 0 1rem; padding: 0.8rem; border: 1px dashed #333; border-radius: 0.6rem; }
.pb-wahl h4 { margin: 0 0 0.5rem; font-size: 0.9rem; color: #bbb; }
.pb-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0.4rem; }
.pb-raster button { padding: 0; border: 2px solid transparent; border-radius: 0.4rem; background: #111; aspect-ratio: 1; overflow: hidden; cursor: pointer; }
.pb-raster button.an { border-color: var(--gelb, #F4CE14); }
.pb-raster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-stand { font-size: 0.85rem; color: #bbb; margin: 0.4rem 0 0; }

/* Bedienkraft (04.09., nach Kowalski und Impeccable): jede druckbare Flaeche
   im Creator-Bereich antwortet sofort und kurz, nur ueber transform und
   opacity, ease-out unter 200 ms. Hover nur mit Maus. */
body.creator button, body.creator .knopf, body.creator .nav button { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease; }
body.creator button:active, body.creator .knopf:active { transform: scale(0.97); }
body.creator button:focus-visible, body.creator .knopf:focus-visible, body.creator input:focus-visible, body.creator textarea:focus-visible, body.creator select:focus-visible { outline: 2px solid var(--gelb, #F4CE14); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .pb-raster button:not(.an):hover { border-color: #555; }
}
/* Auswahl und Avatar erscheinen weich, nicht mit einem Ruck. */
.pb-wahl { transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
@starting-style { .pb-wahl { opacity: 0; transform: translateY(-4px); } }
.pb-avatar img { transition: opacity 200ms ease; }
@starting-style { .pb-avatar img { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.creator button, body.creator .knopf, body.creator .nav button, .pb-wahl, .pb-avatar img { transition: none; }
  body.creator button:active, body.creator .knopf:active { transform: none; }
}

/* Ein Auswahlfeld wächst mit seiner längsten Option. Beim Ausstieg heißt die
   „Alles: Konto, Aufnahmen, Kontaktdaten, Nachrichten", und das Feld stand am
   Handy 675 Punkte breit in einem 375 Punkte breiten Fenster, also rechts
   abgeschnitten (Sichtprüfung 03.10.2026). Schieben ließ sich die Seite
   nicht, weil overflow-x an html und body gesperrt ist, zu lesen war die
   Auswahl trotzdem nicht. */
body.creator select, body.creator input, body.creator textarea { max-width: 100%; }

/* ---------- Zweites Kleid: STR8HUNTER (Jakob, 03.10.2026) ----------
   „wenns geht auch ein Creator board auf str8hunter gebrandet". Dieselbe
   Lösung wie in der Bewerbungsstrecke seit dem 02.10.: eine Klasse am
   html-Element, die die Variablen aus board.css umdefiniert. Kein zweiter
   Bereich und keine zweite Datei, die auseinanderlaufen könnte.

   Die Schriften liegen schon im Haus, sie tragen seit dem 02.10. die
   Bewerbungsstrecke. */
@font-face {
  font-family: 'League Gothic';
  src: url('/assets/hunter/fonts/leaguegothic-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/hunter/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/hunter/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
html.kleid-hunter {
  --gelb: #0A7FCC;
  --ink: #0B0B0D;
  --flaeche: #141417;
  --flaeche2: #1A1A1E;
  --flaeche3: #212126;
  --papier: #F2F0EA;
  --stumm: rgba(242, 240, 234, 0.6);
  --leise: rgba(242, 240, 234, 0.4);
  --linie: rgba(242, 240, 234, 0.14);
}
html.kleid-hunter body { font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif; }
/* League Gothic ist schmal und hoch. Ohne mehr Sperrung kleben die Versalien
   aneinander, dieselbe Messung wie in der Strecke am 02.10. */
html.kleid-hunter h1, html.kleid-hunter h2 {
  font-family: 'League Gothic', 'Poppins', system-ui, sans-serif;
  letter-spacing: 0.045em;
}
/* Das STR8HUNTER-Zeichen ist breiter und flacher als das von STR8CASTING. */
html.kleid-hunter body.creator .marke img { height: 1.9rem; }
@media (max-width: 520px) { html.kleid-hunter body.creator .marke img { height: 1.6rem; } }
/* Gemessen am 02.10.: #0A7FCC auf #0B0B0D ergibt 4,61 zu 1, das Gelb des
   ersten Kleids liegt bei rund 11. Als Fläche hinter schwarzer Schrift trägt
   das Blau, als Schrift auf dunklem Grund nur knapp. Der aktive Reiter
   bekommt deshalb zusätzlich eine Kante statt allein der Farbe. */
html.kleid-hunter body.creator .nav button.an {
  color: var(--papier);
  box-shadow: inset 0 -2px 0 var(--gelb);
  border-radius: 0.4rem 0.4rem 0 0;
}