/* Werte aus dem PokalExpress-Design-System (pokalexpress.de, ThemeWare Modern) */

@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Regular-Roman.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-SemiBold-Roman.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Bold-Roman.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    --blau: #183f74;
    --rot: #e52822;
    --weiss: #ffffff;
    --hintergrund: #fafafa;
    --hintergrund-grau: #eeeeee;
    --hintergrund-blaugrau: #eef2f5;
    --linie: #eaeaf0;
    --linie-feld: #e4e7ea;
    --text: #111111;
    --text-sekundaer: #333333;
    --text-gedaempft: #666666;
    --deaktiviert: #bcc1c7;
    --fehler: #e74c3c;
    --stern: #fedc70;
    --fokus-ring: 0 0 0 0.2rem #183f7499 inset;
    --font-sans: "Inter", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--hintergrund);
    color: var(--text);
    font: 400 12.6px/18.9px var(--font-sans);
}

a { color: var(--blau); text-decoration: none; }
a:hover { opacity: .7; }

/* Header: weiß mit Logo, darunter die blaue Leiste der Hauptnavigation */
.site-header { background: var(--weiss); }
.site-header .logo { display: block; max-width: 520px; margin: 0 auto; padding: 16px; }
.site-header .logo img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.site-header .nav-bar { height: 8px; background: var(--blau); }

main {
    flex: 1;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 0;
    padding: 40px 48px;
    text-align: center;
}

h1 {
    margin: 0 0 12px;
    color: var(--blau);
    font: 700 31.728px/35.25px var(--font-sans);
    text-wrap: balance;
}
p { margin: 0 0 12px; font-size: 14.4px; line-height: 21.6px; }
.hint { font-size: 12.6px; line-height: 18.9px; color: var(--text-gedaempft); }

/* Sterne: DOM-Reihenfolge 5..1, Anzeige 1..5 -> Hover färbt alle links davon */
.stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 8px;
}
.stars a,
.stars label {
    font-size: 64px;
    line-height: 1;
    color: var(--deaktiviert);
    cursor: pointer;
    transition: color .1s, transform .1s;
}
.stars a:hover { opacity: 1; transform: scale(1.12); }
.stars a:hover,
.stars a:hover ~ a,
.stars label:hover,
.stars label:hover ~ label,
.stars input:checked ~ label {
    color: var(--stern);
}
.stars a:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars-input { margin: 0 0 4px; gap: 4px; }
.stars-input label { font-size: 32px; }

/* Sterne mit Skala darunter */
.rating { display: inline-block; margin: 24px 0 8px; }
.scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12.6px;
    line-height: 18.9px;
    color: var(--text-gedaempft);
}

@media (max-width: 480px) {
    main { justify-content: flex-start; padding-top: 24px; }
    .card { padding: 24px 20px; }
    h1 { font-size: 24.864px; line-height: 1.2; }
    .stars a { font-size: 48px; }
    .stars { gap: 4px; }
}

/* Formular */
form { text-align: left; margin-top: 16px; }
form > label { display: block; font-weight: 700; margin: 14px 0 4px; }
input[type=text], input[type=email], textarea {
    width: 100%;
    padding: 8.1px;
    border: 1px solid var(--linie-feld);
    border-radius: 2px;
    background: var(--weiss);
    color: var(--text-sekundaer);
    font: 400 12.6px/18.9px var(--font-sans);
}
input:focus, textarea:focus { outline: none; box-shadow: var(--fokus-ring); }

.btn {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 2px 12px;
    border: 1px solid var(--blau);
    border-radius: 0;
    background: var(--blau);
    color: var(--weiss);
    font: 600 14.4px/30.6px var(--font-sans);
    min-height: 44px;
    cursor: pointer;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem #ffffff99 inset; }

.errors {
    margin: 12px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--fehler);
    border-radius: 2px;
    text-align: left;
}
.errors p { margin: 0; font-size: 12.6px; line-height: 18.9px; }

form .hint { margin-top: 12px; }

.hp { position: absolute; left: -9999px; }

/* Schlusszeile wie im Shop-Footer */
.site-footer {
    background: var(--hintergrund-blaugrau);
    color: var(--text-gedaempft);
    padding: 12px 16px;
    text-align: center;
}
.site-footer a { margin: 0 6px; }