/* Design-System über main.css (der Vite-Quellcode fehlt, deshalb hier zentral überschrieben).
   Jede Regel ist einmal definiert und wird von allen passenden Stellen benutzt. Übersicht: /styleguide/ */

/* ---------- Tokens ---------- */
:root {
    /* Sekundärtext auf AA-Kontrast: #6f6f6a schaffte auf --bg-soft nur 4,4:1, #5f5f5a schafft 5,6:1.
       Dark Mode bleibt #9b9b95 (dessen Regeln sind spezifischer). */
    --muted: #5f5f5a;
    /* Ein Rot für alle Fehlermeldungen (vorher #c4302b und #c0392b) */
    --danger: #c0392b;
    /* Button-Größen: Standard wie .sz-button, klein wie die Menüpunkte */
    --btn-h: calc(var(--s-32) + 2 * var(--s-4) + var(--s-2));
    --btn-h-sm: var(--s-32);
}

:root[data-theme="dark"] {
    --danger: #ff8a80;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --danger: #ff8a80;
    }
}

/* ---------- Grundregeln ---------- */
/* Formular-Elemente erben die Schrift (vorher Arial in „Open“, Slider, Panorama, Schließen) */
button,
input,
select,
textarea {
    font: inherit;
    letter-spacing: inherit;
}

button {
    color: inherit;
}

/* Fett im Text in derselben Stärke wie Prinzipien und Notiz-Titel (vorher 700) */
.sz-prose :is(strong, b),
.sz-note__text :is(strong, b) {
    font-weight: 600;
}

/* Labels in einer Größe wie .sz-label (vorher 11 und 11,52 px) */
.sz-pn__label,
.sz-slider__count {
    font-size: var(--fs-label);
}

/* Hochkant-Bilder im Slider: Fläche aus dem Token statt fest #f7f7f5 (war im Dark Mode hell) */
.sz-slider__track > .is-portrait {
    background: var(--bg-soft);
}

/* Fehlermeldungen */
.sz-lock__error,
.sz-ask__error {
    color: var(--danger);
}

/* Eingabefeld im Passwortschutz so hoch wie die Buttons */
.sz-lock__input {
    min-height: var(--btn-h);
}

/* ---------- Schrift: gleiche Rolle, gleicher Stil ---------- */
/* Accordion überall wie Interface-Text (UX Check war 20 px, Contact 16 px) */
.wp-block-details summary {
    font-size: var(--step-0);
}

/* Projektkachel-Titel wie die Einleitung (vorher Light 300, fest 20 px). Farbe bleibt dunkel, weil das Overlay immer hell ist. */
.sz-card__title {
    font-size: var(--step-1);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.75rem;
}

/* 32-px-Überschriften mit derselben Laufweite wie der Footer-Aufruf (vorher −0.03em) */
.sz-ux__h2,
.sz-price {
    letter-spacing: -.025em;
}

/* 20-px-Zwischentitel wie .sz-ux__h3 (Pakete hatten Zeilenhöhe 1.0 und −0.025em) */
.sz-packages h3 {
    line-height: 1.4;
    letter-spacing: -.01em;
}

/* Einleitung im UX Check wie die normale Einleitung: schwarz und mit Laufweite */
.sz-ux .sz-ux__intro,
.sz-ux .sz-ux__intro p {
    color: var(--fg);
    letter-spacing: -.01em;
}

/* Projekt-Fakten wie Fließtext */
.sz-project__facts dd {
    letter-spacing: normal;
}

/* ---------- Flächen ---------- */
/* Dunkler Bereich im UX Check: Hintergrund der dunklen Palette statt Schwarz, im Dark Mode leicht abgesetzt.
   Lokales --bg, damit auch Primary-Buttons darin richtig aussehen. */
.sz-ux__dark {
    --bg: #0f0f0e;
    background: var(--bg);
}

:root[data-theme="dark"] .sz-ux__dark {
    --bg: var(--bg-soft);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sz-ux__dark {
        --bg: var(--bg-soft);
    }
}

/* ---------- Buttons ---------- */
/* Gemeinsame Basis: Pille, 16 px in 500, gleiche Übergänge. Hover ändert die Fläche, Klick drückt leicht ein. */
.sz-button,
.sz-embed__btn,
.sz-skip,
.sz-cookie button,
.sz-pn__btn,
.sz-modal__close,
.sz-theme-toggle,
.sz-ask__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-8);
    min-height: var(--btn-h);
    padding: 0 var(--s-16);
    border: 0;
    border-radius: var(--radius);
    font: 500 var(--nav-size) / 1.5 var(--font);
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--hover), box-shadow var(--hover), color var(--hover), transform var(--hover);
}

.sz-button:active,
.sz-embed__btn:active,
.sz-cookie button:active,
.sz-pn__btn:active,
.sz-modal__close:active,
.sz-theme-toggle:active,
.sz-ask__icon:not(:disabled):active {
    transform: scale(.98);
}

/* Größe klein (32 px): Cookie-Hinweis und alles mit --small */
.sz-button--small,
.sz-cookie button {
    min-height: var(--btn-h-sm);
}

/* Icon-Buttons: quadratisch, klein */
.sz-modal__close,
.sz-theme-toggle,
.sz-ask__icon {
    width: var(--btn-h-sm);
    min-height: var(--btn-h-sm);
    height: var(--btn-h-sm);
    padding: 0;
}

/* Primary: dunkle Fläche */
.sz-button,
.sz-embed__btn,
.sz-skip,
.sz-cookie button {
    background: var(--fg);
    color: var(--bg);
}

.sz-button:hover,
.sz-embed__btn:hover,
.sz-skip:hover,
.sz-cookie button:hover {
    background: color-mix(in srgb, var(--fg) 82%, var(--bg));
    opacity: 1;
    transform: none;
}

/* Secondary: Glas wie Header und Menü */
.sz-button--secondary,
.sz-pn__btn,
.sz-modal__close {
    background: var(--glass-bg);
    color: var(--fg);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.sz-button--secondary:hover,
.sz-pn__btn:hover,
.sz-modal__close:hover {
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow), inset 0 0 0 100px var(--pill);
    opacity: 1;
}

.sz-modal__close {
    font-size: var(--step-1);
    line-height: 1;
}

/* Ghost: ohne Fläche, beim Hover die graue Pille wie im Menü */
.sz-button--ghost,
.sz-theme-toggle,
.sz-ask__icon {
    background: transparent;
    color: inherit;
}

.sz-button--ghost:hover,
.sz-theme-toggle:hover,
.sz-ask__icon:not(:disabled):hover {
    background: var(--pill);
    opacity: 1;
}

.sz-button--ghost {
    min-height: var(--btn-h-sm);
}