/**
 * Beer'N'Breakdown - Publikumsumfrage
 *
 * Handgeschriebenes CSS wie public/bar/assets/css/bar.css und
 * public/crew/assets/css/crew.css, nicht aus der SCSS-Pipeline: package.json
 * ist gitignored, ein weiteres npm-Script muesste auf jeder Dev-Maschine von
 * Hand nachgezogen werden.
 *
 * Diese Datei folgt DESIGN.md. Sie kann die Variablen der Hauptseite nicht
 * benutzen (kein @use ausserhalb der Pipeline), deshalb steht die Palette hier
 * noch einmal — unter den Namen, die DESIGN.md vergibt. Der GEMEINSAME KERN des
 * :root-Blocks — 24 Variablen — ist zeichengleich mit bar.css, crew.css und
 * helfer.css zu halten; die Seiten sollen nicht auseinanderlaufen. Wer hier
 * einen Wert aendert, aendert ihn erst in
 * public/assets/sass/abstracts/_variables.scss und dann in allen vieren.
 * Eigene Zusaetze sind erlaubt — hier das Ampelgruen der Notenskala.
 *
 * Die Notenskala ist kein Sternchen-Widget, sondern fuenf gekappte Kacheln mit
 * Zahlen. Zwei Gruende: glaenzende Sterne sind ein Fremdkoerper in einem
 * System, dessen Charakter "gestanzt wie Blech und Fahrkarte" ist — und als
 * <input type="radio"> mit <label> markiert :checked die Auswahl ohne eine
 * Zeile JavaScript. Die Seite kommt dadurch ganz ohne JS aus.
 */

:root {
    /* Bordeaux-Stufen — --modern-bg-primary / -secondary / -tertiary */
    --bnb-bordeaux-schwarz: #2b050c;
    --bnb-bordeaux-tief: #3a0712;
    --bnb-bordeaux-hell: #4a0c18;

    /* RGB-Tripel: die einzige Quelle fuer Transparenz */
    --bnb-gelb-rgb: 255, 213, 74;
    --bnb-gold-rgb: 255, 179, 71;
    --bnb-rot-rgb: 255, 81, 47;
    --bnb-koralle-rgb: 255, 122, 89;
    --bnb-weiss-rgb: 255, 247, 243;
    --bnb-dunkel-rgb: 43, 5, 12;

    /* Der einzige kalte Ton der Seite, und er ist seitenspezifisch: die
       Notenskala braucht eine Ampel, und eine Ampel braucht ein Gruen. Er steht
       NICHT im gemeinsamen Kern mit bar.css und crew.css — keine der beiden hat
       eine gut/schlecht-Skala, und ein ungenutzter Fremdton in zwei weiteren
       Dateien waere nur eine Stelle mehr, an der er auseinanderlaufen kann.
       Derselbe Wert wie --status-success im Admin und in _variables.scss;
       erfunden ist er also nicht, nur hierher uebernommen. */
    --bnb-gruen-rgb: 106, 191, 105;

    --bnb-flammengelb: rgb(var(--bnb-gelb-rgb));
    --bnb-messinggold: rgb(var(--bnb-gold-rgb));
    --bnb-signalrot: rgb(var(--bnb-rot-rgb));
    --bnb-glutkoralle: rgb(var(--bnb-koralle-rgb));
    --bnb-ampelgruen: rgb(var(--bnb-gruen-rgb));

    --bnb-buehnenweiss: #fff7f3;
    --bnb-sandrosa: #f6c8b0;
    --bnb-ausgebranntes-rosa: #b98177;

    /* Der Standardrand des Systems: 1px, 8 % Buehnenweiss. Er ersetzt Schatten. */
    --bnb-rand: rgba(var(--bnb-weiss-rgb), 0.08);
    --bnb-rand-hover: rgba(var(--bnb-gold-rgb), 0.6);

    --bnb-glow-knopf: 0 0 20px rgba(var(--bnb-gelb-rgb), 0.3);

    /* Drei Schriften, drei Aufgaben, die sich nie ueberschneiden. */
    --bnb-font-display: 'Bebas Neue', 'Impact', sans-serif;
    --bnb-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --bnb-font-mono: 'Space Mono', monospace;

    --bnb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --bnb-uebergang: 220ms var(--bnb-ease-out);

    --bnb-z-kopf: 90;
    --bnb-z-korn: 9999;

    --bnb-schnitt-klein: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    --bnb-schnitt: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

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

body {
    background: var(--bnb-bordeaux-schwarz);
    color: var(--bnb-buehnenweiss);
    font-family: var(--bnb-font-body);
    font-size: 16px;
    line-height: 1.6;
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-text-size-adjust: 100%;
}

/* Filmkorn — dieselbe Textur wie auf der Hauptseite, darf nicht weg. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: var(--bnb-z-korn);
}

.umfrage-kopf {
    padding: 2.5rem 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bnb-rand);
}

.umfrage-marke {
    display: block;
    font-family: var(--bnb-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bnb-flammengelb);
}

.umfrage-titel {
    margin-top: 0.5rem;
    font-family: var(--bnb-font-display);
    font-size: clamp(2.75rem, 12vw, 4.5rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.umfrage-inhalt {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.umfrage-einleitung {
    max-width: 58ch;
    color: var(--bnb-sandrosa);
    margin-bottom: 2rem;
}

.umfrage-block {
    margin-bottom: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bnb-rand);
}

.umfrage-block:first-of-type { border-top: 0; padding-top: 0; }

.umfrage-block-titel {
    font-family: var(--bnb-font-display);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.umfrage-block-text {
    font-size: 0.9rem;
    color: var(--bnb-ausgebranntes-rosa);
    margin-bottom: 1.25rem;
}

.umfrage-frage { border: 0; margin-bottom: 1.75rem; }

.umfrage-frage legend,
.umfrage-label {
    display: block;
    font-family: var(--bnb-font-body);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.6rem;
}

.umfrage-stern { color: var(--bnb-glutkoralle); }

.umfrage-freiwillig {
    font-weight: 400;
    color: var(--bnb-ausgebranntes-rosa);
}

/* Fuenf gekappte Kacheln. Das echte <input> liegt visuell verborgen, aber
   fokussierbar — display: none nimmt es aus der Tastaturreihenfolge. */
.umfrage-skala { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.umfrage-skala-feld,
.umfrage-radio { position: relative; cursor: pointer; }

.umfrage-skala-feld input,
.umfrage-radio input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
}

.umfrage-skala-feld span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    min-height: 44px;
    padding: 0 0.5rem;
    background: var(--bnb-bordeaux-tief);
    border: 1px solid var(--bnb-rand);
    clip-path: var(--bnb-schnitt);
    font-family: var(--bnb-font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bnb-buehnenweiss);
    transition: background var(--bnb-uebergang), color var(--bnb-uebergang),
                border-color var(--bnb-uebergang);
}

.umfrage-skala-feld--leer span {
    min-width: auto;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bnb-ausgebranntes-rosa);
}

.umfrage-skala-feld input:checked + span {
    background: var(--bnb-flammengelb);
    border-color: var(--bnb-flammengelb);
    color: var(--bnb-bordeaux-schwarz);
}

/* clip-path schneidet die Outline ab — deshalb Helligkeit statt Rahmen,
   dieselbe dokumentierte Ausnahme wie bei .modern-btn. */
.umfrage-skala-feld input:focus-visible + span,
.umfrage-radio input:focus-visible + span {
    filter: brightness(1.35);
    border-color: var(--bnb-rand-hover);
}

/* --- Ampelrampe -----------------------------------------------------------

   Die Richtung der Skala steht an drei Stellen: im Wort auf den Randkacheln, in
   der Blocklegende und hier in der Farbe. Drei, weil "Note" mit 5 als bestem
   Wert monatelang falsch gelesen wurde — und weil Farbe allein nichts tragen
   darf, wer sie nicht unterscheiden kann, liest Zahl und Wort.

   Vier der fuenf Stufen sind die vorhandenen warmen Akzente in ihrer
   natuerlichen Reihenfolge: Gelb, Gold, Koralle, Rot. Nur die 1 brauchte einen
   neuen Wert. Deshalb ist hier auch nichts gemischt oder aufgehellt — jede
   Stufe ist ein Wert, den die Palette schon kennt.

   Die Farbe je Kachel steht in --note-farbe/--note-rgb und nicht in fuenf
   ausgeschriebenen Regelsaetzen: so gibt es Grundzustand, Auswahl und Glow
   jeweils EINMAL statt fuenfmal fast gleich. */
.umfrage-skala-feld[data-note="1"] { --note-farbe: var(--bnb-ampelgruen);  --note-rgb: var(--bnb-gruen-rgb); }
.umfrage-skala-feld[data-note="2"] { --note-farbe: var(--bnb-flammengelb); --note-rgb: var(--bnb-gelb-rgb); }
.umfrage-skala-feld[data-note="3"] { --note-farbe: var(--bnb-messinggold); --note-rgb: var(--bnb-gold-rgb); }
.umfrage-skala-feld[data-note="4"] { --note-farbe: var(--bnb-glutkoralle); --note-rgb: var(--bnb-koralle-rgb); }
.umfrage-skala-feld[data-note="5"] { --note-farbe: var(--bnb-signalrot);   --note-rgb: var(--bnb-rot-rgb); }

/* Ruhezustand: Farbe auf ZAHL und RAND, die Flaeche bleibt eine Tuchung.
   Erster Versuch war nur die Tuchung — bei den 4-15 %, die die
   Bordeaux-Grund-Regel fuer Flaechen vorsieht, war die Rampe auf dem Bordeaux
   praktisch unsichtbar, und damit war der ganze Zweck weg. Statt die Flaeche
   ueber die Regel hinaus aufzudrehen, tragen jetzt Ziffer und 1px-Rand die
   Farbe: beides sind im System ohnehin die Traeger von Schichtung und Zustand,
   und die Kachel bleibt flach. */
.umfrage-skala-feld[data-note] span {
    background: rgba(var(--note-rgb), 0.1);
    border-color: rgba(var(--note-rgb), 0.55);
    color: var(--note-farbe);
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.1;
}

/* Das Wort unter der Zahl, nur auf den Randkacheln. */
.umfrage-skala-feld span small {
    /* 0.65rem ist der dokumentierte Data-/Badge-Schritt aus DESIGN.md, nicht
       ein frei gewaehltes Kleinergemachtes. */
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Ausgewaehlt: volle Farbe und Glow — Glow ist im System fuer Auswahl, Fokus
   und Bewegung reserviert, und hier ist er genau das. Staerker als die
   generische Gelb-Regel darueber, weil das Attribut mitzaehlt. */
.umfrage-skala-feld[data-note] input:checked + span {
    background: var(--note-farbe);
    border-color: var(--note-farbe);
    color: var(--bnb-bordeaux-schwarz);
    box-shadow: 0 0 18px rgba(var(--note-rgb), 0.45);
}

.umfrage-skala-legende {
    display: flex;
    justify-content: space-between;
    max-width: 18rem;
    margin-top: 0.5rem;
    font-family: var(--bnb-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bnb-ausgebranntes-rosa);
}

.umfrage-radios { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.umfrage-radio span {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    background: var(--bnb-bordeaux-tief);
    border: 1px solid var(--bnb-rand);
    clip-path: var(--bnb-schnitt);
    font-family: var(--bnb-font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bnb-buehnenweiss);
    transition: background var(--bnb-uebergang), color var(--bnb-uebergang),
                border-color var(--bnb-uebergang);
}

.umfrage-radio input:checked + span {
    background: var(--bnb-flammengelb);
    border-color: var(--bnb-flammengelb);
    color: var(--bnb-bordeaux-schwarz);
}

@media (hover: hover) and (pointer: fine) {
    .umfrage-skala-feld:hover span,
    .umfrage-radio:hover span { border-color: var(--bnb-rand-hover); }
}

.umfrage-textfeld,
.umfrage-eingabe {
    width: 100%;
    padding: 1rem;
    background: var(--bnb-bordeaux-schwarz);
    border: 1px solid var(--bnb-rand);
    border-radius: 0;
    color: var(--bnb-buehnenweiss);
    font-family: var(--bnb-font-body);
    font-size: 16px; /* darunter zoomt Safari beim Fokus in die Seite */
    line-height: 1.6;
}

.umfrage-textfeld { min-height: 7rem; resize: vertical; }

/* Kommentar zu einer Note: kuerzer als ein Freitextfeld, es ist ein Satz und
   kein Aufsatz. */
.umfrage-textfeld--kurz { min-height: 4.5rem; }

/* --- Kommentar ab einer schlechten Note -----------------------------------

   Das Feld erscheint, sobald eine Kachel mit data-schlecht gewaehlt ist — also
   ab Survey::KOMMENTAR_AB_NOTE. Die Schwelle steht NICHT hier: das Attribut
   setzt PHP, das CSS fragt nur, ob eine so markierte Kachel gewaehlt ist. Beim
   naechsten Umbau der Skala gibt es damit keine zweite Stelle, die still
   veraltet.

   Kein JavaScript, und das ist hier keine Sparsamkeit: die Seite kommt ganz
   ohne aus, weil sie im In-App-Browser von Instagram laufen muss, und ueber
   Instagram kommen die meisten.

   VERSTECKT wird nur hinter @supports, ANGEZEIGT nicht. Ein Browser ohne
   :has() zeigt das Feld also dauerhaft — sichtbar zu viel ist ein Schoenheits-
   fehler, unsichtbar und unerreichbar waere ein verlorenes Feld. Andersherum
   herum gebaut waere es genau das. */
.umfrage-kommentar {
    margin-top: 0.9rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--bnb-rand);
}

.umfrage-kommentar .umfrage-label {
    font-weight: 400;
    font-size: 0.95rem;
}

@supports selector(:has(*)) {
    .umfrage-frage .umfrage-kommentar { display: none; }

    .umfrage-frage:has(input[data-schlecht]:checked) .umfrage-kommentar { display: block; }
}

.umfrage-textfeld:focus,
.umfrage-eingabe:focus {
    outline: none;
    border-color: var(--bnb-flammengelb);
    box-shadow: 0 0 0 3px rgba(var(--bnb-gelb-rgb), 0.1);
}

.umfrage-feldhinweis {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--bnb-ausgebranntes-rosa);
}

.umfrage-knopf {
    width: 100%;
    padding: 1.15rem 2rem;
    background: linear-gradient(135deg, var(--bnb-flammengelb), var(--bnb-messinggold));
    border: 0;
    border-radius: 0;
    clip-path: var(--bnb-schnitt);
    box-shadow: var(--bnb-glow-knopf);
    color: var(--bnb-bordeaux-schwarz);
    font-family: var(--bnb-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 100ms var(--bnb-ease-out), box-shadow var(--bnb-uebergang);
}

.umfrage-knopf:active { transform: scale(0.97); }
.umfrage-knopf:focus-visible { filter: brightness(1.35); }

.umfrage-meldung {
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: rgba(var(--bnb-koralle-rgb), 0.12);
    border: 1px solid rgba(var(--bnb-koralle-rgb), 0.4);
    color: var(--bnb-glutkoralle);
}

.umfrage-hinweis {
    padding: 1.25rem;
    background: var(--bnb-bordeaux-tief);
    border: 1px solid var(--bnb-rand);
    color: var(--bnb-sandrosa);
}

.umfrage-hinweis--fehler {
    background: rgba(var(--bnb-rot-rgb), 0.12);
    border-color: rgba(var(--bnb-rot-rgb), 0.4);
    color: var(--bnb-glutkoralle);
}

.umfrage-datenschutz {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--bnb-ausgebranntes-rosa);
}

.umfrage-datenschutz a,
.umfrage-danke-klein a,
.umfrage-hinweis a { color: var(--bnb-flammengelb); }

/* Wie bar.css: einfache Links haben sonst keinen sichtbaren Fokusring. */
.umfrage-datenschutz a:focus-visible,
.umfrage-danke-klein a:focus-visible,
.umfrage-hinweis a:focus-visible {
    outline: 2px solid var(--bnb-flammengelb);
    outline-offset: 3px;
}

/* Selektor mit vorangestelltem Elternteil, nicht nur .umfrage-danke-gross:
   .umfrage-danke-gross ist selbst ein <p> und wuerde sonst von der
   allgemeinen Regel .umfrage-danke p (Klasse + Typ, hoehere Spezifitaet als
   eine einzelne Klasse) unabhaengig von der Reihenfolge im Stylesheet
   ueberschrieben — die Ueberschrift waere dann Sandrosa statt Flammengelb. */
.umfrage-danke .umfrage-danke-gross {
    font-family: var(--bnb-font-display);
    font-size: clamp(3rem, 14vw, 5rem);
    line-height: 0.88;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bnb-flammengelb);
    margin-bottom: 1rem;
}

.umfrage-danke p { max-width: 58ch; color: var(--bnb-sandrosa); }
.umfrage-danke-klein { margin-top: 2rem; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}