/* DealDonner — gemeinsames Stylesheet fuer alle Seiten.
   Farben und Abstaende nur ueber die Tokens unten aendern. */

:root {
    --ink: #14171f;
    --ink-2: #1b1f29;
    --ink-3: #242936;
    --linie: #2e3442;
    --amber: #ffb224;
    --amber-dunkel: #e59a0c;
    --weiss: #ffffff;
    --text: #e6e8ec;
    --text-2: #c8ccd4;
    --grau: #9ba2ae;
    --grau-2: #6d7482;
    --gruen: #3ecf8e;
    --rot: #ff6b5e;

    --radius: 14px;
    --radius-s: 9px;
    --breite: 1180px;
    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* hidden muss auch gegen display:flex/grid gewinnen */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
    border-radius: 4px;
}

.nur-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.springen {
    position: absolute;
    left: 16px; top: -60px;
    z-index: 100;
    background: var(--amber);
    color: var(--ink);
    padding: 10px 16px;
    border-radius: var(--radius-s);
    font-weight: 700;
}
.springen:focus { top: 12px; }

.rahmen {
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 720px) { .rahmen { padding: 0 28px; } }

/* ---------------------------------------------------------------- Ankuendigung */

.ankuendigung { background: var(--amber); color: var(--ink); }
.ankuendigung-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.ankuendigung-inner p { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.ankuendigung-blitz { width: 14px; height: auto; flex: none; }
.ankuendigung-link {
    color: var(--ink) !important;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.ankuendigung-link:hover { text-decoration: none; }

/* ---------------------------------------------------------------- Kopf */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(20, 23, 31, 0.86);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }

.kopf .rahmen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 16px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--weiss);
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -0.03em;
}
.logo:hover { text-decoration: none; }
.logo svg { width: 19px; height: auto; color: var(--amber); }
.logo span { color: var(--amber); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
    color: var(--text-2);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-s);
}
.nav a:hover { color: var(--weiss); background: var(--ink-3); text-decoration: none; }
.nav .knopf { margin-left: 6px; }

@media (max-width: 719px) {
    .nav a:not(.knopf) { display: none; }
}

/* ---------------------------------------------------------------- Knoepfe */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 0;
    background: var(--amber);
    color: var(--ink) !important;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 150ms, transform 150ms;
    white-space: nowrap;
}
.knopf:hover { background: #ffc04d; text-decoration: none; }
.knopf:active { transform: scale(0.97); }
.knopf svg { width: 18px; height: 18px; flex: none; }

.knopf-leise {
    background: var(--ink-3);
    color: var(--weiss) !important;
    border: 1px solid var(--linie);
}
.knopf-leise:hover { background: #2c3240; }

/* ---------------------------------------------------------------- Hero */

.held {
    position: relative;
    padding: 64px 0 48px;
    text-align: center;
    overflow: hidden;
}
.held::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    width: min(900px, 140vw);
    height: min(900px, 140vw);
    transform: translateX(-50%);
    background: radial-gradient(circle closest-side, rgba(255, 178, 36, 0.16), transparent);
    pointer-events: none;
}
.held > * { position: relative; }

.held .blitz {
    width: 40px;
    height: auto;
    color: var(--amber);
    margin: 0 auto 22px;
}
@media (prefers-reduced-motion: no-preference) {
    .held .blitz { animation: schlag 1100ms ease-out 200ms both; }
    @keyframes schlag {
        0%   { opacity: 0; transform: translateY(-14px); }
        35%  { opacity: 1; transform: translateY(0); }
        48%  { opacity: 0.35; }
        60%  { opacity: 1; }
        72%  { opacity: 0.6; }
        100% { opacity: 1; }
    }
}

.dachzeile {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--grau);
    text-transform: uppercase;
}

.held h1 {
    margin: 0 auto;
    max-width: 16ch;
    color: var(--weiss);
    font-size: clamp(36px, 8vw, 64px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.held h1 em { font-style: normal; color: var(--amber); }

.held .unterzeile {
    margin: 20px auto 0;
    max-width: 52ch;
    color: var(--text-2);
    font-size: clamp(16px, 2.4vw, 19px);
}

.held .aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.kennzahlen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin: 40px auto 0;
    padding: 0;
    list-style: none;
    color: var(--grau);
    font-size: 14px;
}
.kennzahlen strong {
    color: var(--weiss);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}

/* ---------------------------------------------------------------- Abschnitte */

.abschnitt { padding: 56px 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }

.abschnitt-kopf { margin-bottom: 28px; }
.abschnitt-kopf h2 {
    margin: 0;
    color: var(--weiss);
    font-size: clamp(26px, 4.4vw, 36px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.abschnitt-kopf p {
    margin: 10px 0 0;
    max-width: 62ch;
    color: var(--grau);
}

/* ---------------------------------------------------------------- Filterleiste */

.werkzeuge {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.suche {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
}
.suche svg {
    position: absolute;
    left: 14px; top: 50%;
    width: 18px; height: 18px;
    transform: translateY(-50%);
    color: var(--grau-2);
    pointer-events: none;
}
.suche input,
.sortierung select {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--linie);
    background: var(--ink-2);
    color: var(--weiss);
    font: inherit;
    font-size: 15px;
}
.suche input { padding: 0 16px 0 42px; }
.suche input::placeholder { color: var(--grau-2); }
.suche input:focus,
.sortierung select:focus { outline: none; border-color: var(--amber); }

.sortierung { flex: 0 0 auto; }
.sortierung select {
    padding: 0 40px 0 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba2ae' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.chips {
    display: flex;
    gap: 8px;
    margin: 0 -16px 24px;
    padding: 2px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 720px) {
    .chips { flex-wrap: wrap; margin: 0 0 24px; padding: 2px 0; overflow: visible; }
}

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--linie);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.chip:hover { border-color: var(--grau-2); color: var(--weiss); }
.chip[aria-pressed="true"] {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--ink);
    font-weight: 700;
}
.chip .anzahl {
    font-size: 12px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Deal-Karten */

.raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

.karte {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ink-2);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 180ms, transform 180ms;
}
.karte:hover { border-color: #454d5f; transform: translateY(-2px); }
.karte.alt { opacity: 0.72; }

.karte-bild {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.karte-bild img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
}
.karte-bild .ersatz {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(145deg, #262b38, #1b1f29);
    color: var(--grau);
}
.karte-bild .ersatz .emoji { font-size: 44px; line-height: 1; }
.karte-bild .ersatz .marke-gross {
    color: var(--weiss);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.badge-rabatt {
    position: absolute;
    top: 12px; left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--rot);
    color: var(--weiss);
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.badge-best {
    position: absolute;
    top: 12px; right: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--amber);
    font-weight: 700;
    font-size: 12px;
}

.karte-inhalt {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 18px;
}

.karte-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--grau);
}
.karte-meta .marke {
    color: var(--amber);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
}

.karte h3 {
    margin: 6px 0 10px;
    color: var(--weiss);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sterne {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-2);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.sterne svg { width: 14px; height: 14px; color: var(--amber); }

.preise {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: auto;
    padding-top: 12px;
}
.preis {
    color: var(--weiss);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.uvp {
    color: var(--grau);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.uvp s { text-decoration-color: var(--rot); }
.ersparnis {
    width: 100%;
    color: var(--gruen);
    font-size: 13px;
    font-weight: 600;
}
.tief {
    margin-top: 6px;
    font-size: 12px;
    color: var(--grau);
}

.karte .knopf {
    margin-top: 14px;
    width: 100%;
    border-radius: var(--radius-s);
}
/* ganze Karte klickbar, Knopf bleibt das eigentliche Ziel */
.karte .knopf::after {
    content: "";
    position: absolute;
    inset: 0;
}

.leer {
    grid-column: 1 / -1;
    padding: 56px 16px;
    text-align: center;
    color: var(--grau);
    border: 1px dashed var(--linie);
    border-radius: var(--radius);
}
.leer strong { display: block; color: var(--weiss); font-size: 18px; margin-bottom: 6px; }

.skelett {
    min-height: 380px;
    background: linear-gradient(100deg, var(--ink-2) 30%, var(--ink-3) 50%, var(--ink-2) 70%);
    background-size: 300% 100%;
    animation: schimmer 1.4s linear infinite;
}
@keyframes schimmer { to { background-position: -150% 0; } }

.mehr { display: flex; justify-content: center; margin-top: 28px; }

.preis-hinweis {
    margin: 24px 0 0;
    font-size: 13px;
    color: var(--grau-2);
}

/* ---------------------------------------------------------------- Pruefung */

.kriterien {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: k;
}
.kriterien li {
    position: relative;
    padding: 22px 20px;
    background: var(--ink-2);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    counter-increment: k;
}
.kriterien li::before {
    content: counter(k, decimal-leading-zero);
    display: block;
    margin-bottom: 12px;
    color: var(--amber);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.08em;
}
.kriterien h3 { margin: 0 0 6px; color: var(--weiss); font-size: 17px; }
.kriterien p { margin: 0; color: var(--grau); font-size: 15px; }
.kriterien .wert {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 178, 36, 0.12);
    color: var(--amber);
    font-size: 13px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- Vergleich */

.zwei {
    display: grid;
    gap: 32px;
    align-items: center;
}
@media (min-width: 880px) { .zwei { grid-template-columns: 1fr 1fr; gap: 56px; } }

.zwei .text p { color: var(--text-2); }
.zwei .text p + p { margin-top: 14px; }

.vergleich {
    padding: 24px;
    background: var(--ink-2);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}
.vergleich-titel { margin: 0 0 18px; color: var(--grau); font-size: 13px; }
.balken { margin: 0 0 16px; }
.balken:last-child { margin-bottom: 0; }
.balken-kopf {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-2);
}
.balken-kopf strong { color: var(--weiss); font-variant-numeric: tabular-nums; }
.balken-spur {
    height: 10px;
    background: var(--ink-3);
    border-radius: 999px;
    overflow: hidden;
}
.balken-fuell { height: 100%; border-radius: 999px; background: var(--grau-2); }
.balken.jetzt .balken-fuell { background: var(--amber); }
.balken.jetzt .balken-kopf strong { color: var(--amber); }
.vergleich-fazit {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--linie);
    font-size: 14px;
    color: var(--text-2);
}
.vergleich-fazit strong { color: var(--gruen); }

/* ---------------------------------------------------------------- Kanal-CTA */

.kanal {
    position: relative;
    overflow: hidden;
    padding: 44px 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffb224, #ff9a1f);
    color: var(--ink);
    text-align: center;
}
.kanal::after {
    content: "";
    position: absolute;
    right: -40px; bottom: -70px;
    width: 220px; height: 320px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 64'%3E%3Cpath d='M26 0 L2 36 L17 36 L12 64 L42 24 L25 24 Z' fill='%2314171f' fill-opacity='0.08'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: rotate(12deg);
    pointer-events: none;
}
.kanal h2 {
    margin: 0 auto;
    max-width: 22ch;
    font-size: clamp(26px, 4.6vw, 38px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
}
.kanal p { margin: 12px auto 0; max-width: 46ch; font-size: 17px; color: #3b2a07; }
.kanal .aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
    position: relative;
    z-index: 1;
}
.kanal .knopf { background: var(--ink); color: var(--weiss) !important; }
.kanal .knopf:hover { background: #262b38; }

/* ---------------------------------------------------------------- FAQ */

.faq { max-width: 780px; }
.faq details {
    border-bottom: 1px solid var(--linie);
}
.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    color: var(--weiss);
    font-weight: 600;
    font-size: 17px;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    flex: none;
    width: 28px; height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink-3);
    color: var(--amber);
    font-size: 20px;
    font-weight: 400;
    transition: transform 200ms;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--text-2); max-width: 66ch; }

/* ---------------------------------------------------------------- Fuss */

.fuss {
    margin-top: 24px;
    padding: 40px 0 48px;
    border-top: 1px solid var(--linie);
    color: var(--grau-2);
    font-size: 14px;
}
.fuss-oben {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}
.fuss-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fuss-links a { color: var(--text-2); }
.fuss-hinweis { margin: 24px 0 0; max-width: 80ch; line-height: 1.55; }

/* ---------------------------------------------------------------- Rechtstexte */

.recht {
    max-width: 760px;
    padding: 48px 0 32px;
}
.recht h1 {
    margin: 0 0 8px;
    color: var(--weiss);
    font-size: clamp(30px, 6vw, 44px);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.recht .stand { margin: 0 0 32px; color: var(--grau); font-size: 14px; }
.recht h2 { margin: 36px 0 10px; color: var(--weiss); font-size: 21px; letter-spacing: -0.01em; }
.recht h3 { margin: 24px 0 6px; color: var(--weiss); font-size: 17px; }
.recht p, .recht li { color: var(--text-2); }
.recht ul { padding-left: 20px; }
.recht address { font-style: normal; color: var(--text-2); }

/* ---------------------------------------------------------------- 404 */

.fehlerseite {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 48px 16px;
}
.fehlerseite .code {
    color: var(--amber);
    font-size: clamp(72px, 18vw, 120px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
}
.fehlerseite h1 { margin: 12px 0 8px; color: var(--weiss); font-size: 26px; }
.fehlerseite p { margin: 0 0 28px; color: var(--grau); }

/* ---------------------------------------------------------------- Kontakt */

.kontakt { max-width: 820px; padding-top: 48px; padding-bottom: 32px; }
.kontakt-kopf h1 {
    margin: 0 0 10px;
    color: var(--weiss);
    font-size: clamp(34px, 7vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.kontakt-kopf p:not(.dachzeile) { margin: 0; color: var(--text-2); max-width: 58ch; }

.reiter {
    display: flex;
    gap: 6px;
    margin: 32px 0 0;
    padding: 5px;
    background: var(--ink-2);
    border: 1px solid var(--linie);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
}
.reiter-knopf {
    min-height: 42px;
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.reiter-knopf:hover { color: var(--weiss); }
.reiter-knopf[aria-selected="true"] { background: var(--amber); color: var(--ink); }
@media (max-width: 420px) { .reiter-knopf { padding: 8px 12px; font-size: 14px; } }

.formular-karte {
    margin-top: 16px;
    padding: 28px 20px;
    background: var(--ink-2);
    border: 1px solid var(--linie);
    border-radius: 18px;
}
@media (min-width: 720px) { .formular-karte { padding: 36px; } }

.formular-intro h2 { margin: 0 0 6px; color: var(--weiss); font-size: 22px; letter-spacing: -0.015em; }
.formular-intro p { margin: 0 0 24px; color: var(--grau); }

.feld { position: relative; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.feld > label, .feld > legend {
    display: block;
    margin-bottom: 8px;
    padding: 0;
    color: var(--weiss);
    font-size: 15px;
    font-weight: 600;
}
.pflicht { color: var(--amber); }
.optional { color: var(--grau-2); font-weight: 400; font-size: 13px; margin-left: 4px; }

.feld input[type="text"],
.feld input[type="email"],
.feld select,
.feld textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    border: 1px solid var(--linie);
    background: var(--ink);
    color: var(--weiss);
    font: inherit;
    font-size: 16px;
}
.feld textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.feld select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba2ae' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(255, 178, 36, 0.18);
}
.feld ::placeholder { color: var(--grau-2); }
.feld [aria-invalid="true"] { border-color: var(--rot); }
.feld-fehler { display: block; margin-top: 6px; color: var(--rot); font-size: 14px; }
.zaehler { position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: var(--grau-2); }

.feld-reihe { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .feld-reihe { grid-template-columns: 1fr 1fr; } }

.auswahl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.auswahl-chips label { position: relative; cursor: pointer; }
.auswahl-chips input { position: absolute; opacity: 0; pointer-events: none; }
.auswahl-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--linie);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    transition: background 150ms, border-color 150ms, color 150ms;
}
.auswahl-chips label:hover span { border-color: var(--grau-2); color: var(--weiss); }
.auswahl-chips input:checked + span { background: rgba(255, 178, 36, 0.14); border-color: var(--amber); color: var(--amber); font-weight: 700; }
.auswahl-chips input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Sterne: rueckwaerts im DOM, damit ~ die "vorigen" Sterne trifft */
.sterne-wahl { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.sterne-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.sterne-wahl label {
    font-size: 32px;
    line-height: 1;
    padding: 2px;
    color: var(--ink-3);
    cursor: pointer;
    transition: color 120ms, transform 120ms;
    -webkit-text-stroke: 1px var(--linie);
}
.sterne-wahl label:hover,
.sterne-wahl label:hover ~ label,
.sterne-wahl input:checked ~ label { color: var(--amber); -webkit-text-stroke: 0; }
.sterne-wahl label:hover { transform: scale(1.12); }
.sterne-wahl input:focus-visible + label { outline: 2px solid var(--amber); border-radius: 4px; }

.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hinweis-box {
    margin: 4px 0 20px;
    padding: 14px 16px;
    border-left: 3px solid var(--amber);
    background: rgba(255, 178, 36, 0.07);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    color: var(--text-2);
    font-size: 14px;
}
.hinweis-box strong { color: var(--weiss); }

.einwilligung {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 4px 0 24px;
    color: var(--grau);
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}
.einwilligung input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--amber); cursor: pointer; }
.einwilligung.fehlt span { color: var(--rot); }

.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.formular-fuss .knopf { min-width: 200px; }
.formular-fuss .knopf:disabled { opacity: 0.6; cursor: progress; }
.meldung { margin: 0; font-size: 15px; }
.meldung.schlecht { color: var(--rot); }

.erfolg { padding: 24px 0 8px; text-align: center; outline: none; }
.erfolg-symbol {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 178, 36, 0.14);
    font-size: 30px;
}
.erfolg h2 { margin: 0 0 8px; color: var(--weiss); }
.erfolg p { margin: 0 auto 24px; max-width: 44ch; color: var(--text-2); }

/* Feedback-Teaser auf der Startseite */
.feedback-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px;
    border: 1px solid var(--linie);
    border-radius: 18px;
    background: var(--ink-2);
}
.feedback-band h2 { margin: 0 0 4px; color: var(--weiss); font-size: 22px; letter-spacing: -0.015em; }
.feedback-band p { margin: 0; color: var(--grau); max-width: 56ch; }
.feedback-band .aktionen { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- Merkliste */

.merken {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 23, 31, 0.78);
    color: var(--weiss);
    cursor: pointer;
    transition: transform 150ms, background 150ms;
}
.merken:hover { transform: scale(1.08); background: var(--ink); }
.merken svg { width: 20px; height: 20px; }
.merken[aria-pressed="true"] { color: var(--rot); }
.merken[aria-pressed="true"] svg path { fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
    .merken.puls { animation: puls 380ms ease-out; }
    @keyframes puls { 40% { transform: scale(1.3); } }
}

.badge-neu {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--amber);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.wecker-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 178, 36, 0.35);
    background: rgba(255, 178, 36, 0.08);
    border-radius: var(--radius);
    color: var(--text-2);
    font-size: 15px;
}
.wecker-leiste strong { color: var(--amber); }
.wecker-leiste .knopf { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.wecker-leiste .zu {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--grau);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
}

.wecker-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: 18px;
    background: var(--ink-2);
    color: var(--text);
}
.wecker-dialog::backdrop { background: rgba(8, 10, 14, 0.7); backdrop-filter: blur(3px); }
.wecker-dialog form { padding: 24px; }
.wecker-dialog h2 { margin: 0 0 6px; color: var(--weiss); font-size: 22px; }
.wecker-dialog p { margin: 0 0 18px; color: var(--grau); font-size: 15px; }
.wecker-marken {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 46vh;
    overflow-y: auto;
    margin-bottom: 20px;
}
.wecker-dialog .aktionen { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Mediadaten */

.medien-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.medien-zahlen li {
    padding: 22px 20px;
    background: var(--ink-2);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}
.medien-zahlen strong {
    display: block;
    color: var(--weiss);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.medien-zahlen span { color: var(--grau); font-size: 14px; }

.formate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}
.format {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--ink-2);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}
.format .symbol { font-size: 28px; margin-bottom: 12px; }
.format h3 { margin: 0 0 6px; color: var(--weiss); font-size: 19px; }
.format p { margin: 0 0 14px; color: var(--grau); font-size: 15px; }
.format ul { margin: 0 0 18px; padding-left: 18px; color: var(--text-2); font-size: 15px; }
.format .knopf { margin-top: auto; align-self: flex-start; }

.grundsaetze { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 760px; }
.grundsaetze li {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: var(--ink-2);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    color: var(--text-2);
}
.grundsaetze li::before { content: "✓"; color: var(--gruen); font-weight: 800; }
.grundsaetze strong { color: var(--weiss); }

/* ---------------------------------------------------------------- Deal des Tages */

#tagesdeal { margin-bottom: 32px; }
.tagesdeal {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(255, 178, 36, 0.45);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 178, 36, 0.12), transparent 55%),
        var(--ink-2);
    box-shadow: 0 0 0 4px rgba(255, 178, 36, 0.05);
}
@media (min-width: 760px) { .tagesdeal { grid-template-columns: minmax(260px, 2fr) 3fr; } }

.tagesdeal-bild { aspect-ratio: auto; min-height: 240px; }
.tagesdeal-bild img { padding: 28px; }
.tagesdeal-bild .badge-rabatt { font-size: 18px; padding: 6px 14px; top: 16px; left: 16px; }

.tagesdeal-inhalt { display: flex; flex-direction: column; padding: 24px 22px 26px; }
@media (min-width: 760px) { .tagesdeal-inhalt { padding: 32px 36px; } }

.tagesdeal-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 0 0 14px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: var(--amber);
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tagesdeal-label svg { width: 11px; height: auto; }
.tagesdeal .karte-meta { margin: 0; }
.tagesdeal h3 {
    margin: 8px 0 14px;
    color: var(--weiss);
    font-size: clamp(21px, 3vw, 28px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.tagesdeal-gruende { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 6px; }
.tagesdeal-gruende li { display: flex; gap: 8px; color: var(--text-2); font-size: 15px; }
.tagesdeal-gruende li::before { content: "✓"; color: var(--gruen); font-weight: 800; }
.tagesdeal .preis { font-size: 34px; }
.tagesdeal .knopf { margin-top: 20px; align-self: flex-start; min-width: 240px; }
@media (max-width: 759px) { .tagesdeal .knopf { width: 100%; } }

/* ---------------------------------------------------------------- Kategorie-Seiten */

.held-kompakt { padding: 40px 0 28px; }
.held-kompakt h1 { max-width: none; font-size: clamp(32px, 6vw, 52px); }
.brotkrumen { margin-bottom: 18px; font-size: 14px; color: var(--grau); }
.brotkrumen a { color: var(--text-2); }
a.chip { text-decoration: none; }
a.chip[aria-current="page"] {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--ink);
    font-weight: 700;
}

.fuss-kategorien {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--linie);
    font-size: 14px;
}
.fuss-kategorien span { color: var(--grau-2); }
.fuss-kategorien a { color: var(--text-2); }
.fuss-kategorien:not(:has(a)) { display: none; }

/* ---------------------------------------------------------------- Newsletter */

.nl-formular { margin-top: 0; }
.nl-formular .formular-fuss .knopf { min-width: 160px; }
.nl-marken { max-height: 220px; overflow-y: auto; padding: 2px; }
.nl-hinweis { margin: 14px 0 0; color: var(--grau-2); font-size: 13px; }
#newsletter .grundsaetze { margin-top: 20px; }
#newsletter .dachzeile { margin-bottom: 10px; }
.wecker-mail { margin: -6px 0 18px !important; font-size: 14px !important; }

/* ---------------------------------------------------------------- Soziale Netzwerke */

.fuss-sozial { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.fuss-sozial a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
}
.fuss-sozial a:hover { border-color: var(--amber); color: var(--weiss); text-decoration: none; }
.fuss-sozial svg { width: 18px; height: 18px; }