/* ==========================================================================
   Theme "Qualitaetsschorle" - Feinschliff der Komponenten.

   Die Farb-/Radius-/Schatten-Tokens liegen in tokens.css. Diese Datei
   ergaenzt AUSSCHLIESSLICH gestalterische Details, die sich nicht ueber
   Tokens ausdruecken lassen: Typo-Rhythmus, Mikro-Interaktionen,
   Materialwirkung (Glas), Hairlines.

   Alles ist auf :root[data-theme="qualitaetsschorle"] gescoped und laesst
   die anderen vier Themes vollstaendig unberuehrt. Die Datei wird als
   LETZTES Stylesheet geladen; die hoehere Spezifitaet durch das
   Attribut-Praefix gewinnt gegen die Basiskomponenten.

   Leitlinien (Apple HIG):
   - Ruhige Flaechen, Inhalt traegt die Hierarchie, nicht die Dekoration.
   - Optischer Ausgleich bei grossen Schriftgraden (negatives Tracking).
   - Bewegung bestaetigt Aktionen, sie unterhaelt nicht.
   - Fokus ist immer sichtbar, 2px, mit Abstand zum Element.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Textqualitaet
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
    letter-spacing: -0.01em;
}

/* Grosse Schrift wirkt ohne negatives Tracking auseinandergezogen.
   Halbfett statt fett - Gewicht entsteht durch Groesse, nicht durch Strichstaerke. */
:root[data-theme="qualitaetsschorle"] h1,
:root[data-theme="qualitaetsschorle"] .hero__title {
    letter-spacing: -0.022em;
    font-weight: var(--fw-semibold);
    line-height: 1.08;
}

:root[data-theme="qualitaetsschorle"] .hero__title {
    font-size: clamp(2.125rem, 6vw, 3rem);
}

:root[data-theme="qualitaetsschorle"] h2,
:root[data-theme="qualitaetsschorle"] .section-title {
    letter-spacing: -0.024em;
    font-weight: var(--fw-semibold);
    line-height: 1.12;
}

:root[data-theme="qualitaetsschorle"] h3,
:root[data-theme="qualitaetsschorle"] h4 {
    letter-spacing: -0.018em;
    font-weight: var(--fw-semibold);
}

:root[data-theme="qualitaetsschorle"] .hero__lede,
:root[data-theme="qualitaetsschorle"] .section-title + p,
:root[data-theme="qualitaetsschorle"] .doc-intro {
    letter-spacing: -0.01em;
    color: var(--color-text-soft);
    line-height: 1.5;
    font-size: var(--fs-18);
}

:root[data-theme="qualitaetsschorle"] .article-body,
:root[data-theme="qualitaetsschorle"] .content-body {
    letter-spacing: -0.006em;
    line-height: var(--lh-relaxed);
}

/* Kleine Meta-Zeilen: leichte Sperrung erhoeht die Lesbarkeit. */
:root[data-theme="qualitaetsschorle"] .card__meta,
:root[data-theme="qualitaetsschorle"] .event-card__meta,
:root[data-theme="qualitaetsschorle"] .admin-nav__group,
:root[data-theme="qualitaetsschorle"] .admin-tile__label {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    color: var(--color-text-soft);
}

/* --------------------------------------------------------------------------
   2. Buttons - praezise Mikro-Interaktion
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .btn {
    border-radius: var(--radius-full);
    font-weight: var(--fw-medium);
    letter-spacing: -0.01em;
    box-shadow: none;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color     var(--dur-fast) var(--ease-out),
        color            var(--dur-fast) var(--ease-out),
        transform        var(--dur-fast) var(--ease-out),
        box-shadow       var(--dur-base) var(--ease-out);
}

:root[data-theme="qualitaetsschorle"] .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Druckpunkt: kurzes Einsinken bestaetigt den Klick haptisch. */
:root[data-theme="qualitaetsschorle"] .btn:active {
    transform: translateY(0) scale(0.975);
    box-shadow: none;
    transition-duration: 60ms;
}

:root[data-theme="qualitaetsschorle"] .btn--ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

:root[data-theme="qualitaetsschorle"] .btn--ghost:hover {
    background: var(--color-surface-soft);
    border-color: var(--color-border-strong);
}

:root[data-theme="qualitaetsschorle"] .btn--lg {
    padding-inline: var(--sp-8);
}

/* --------------------------------------------------------------------------
   3. Formularelemente
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .input,
:root[data-theme="qualitaetsschorle"] .textarea,
:root[data-theme="qualitaetsschorle"] input[type="text"],
:root[data-theme="qualitaetsschorle"] input[type="email"],
:root[data-theme="qualitaetsschorle"] input[type="password"],
:root[data-theme="qualitaetsschorle"] input[type="number"],
:root[data-theme="qualitaetsschorle"] input[type="search"],
:root[data-theme="qualitaetsschorle"] input[type="date"],
:root[data-theme="qualitaetsschorle"] input[type="tel"],
:root[data-theme="qualitaetsschorle"] input[type="url"],
:root[data-theme="qualitaetsschorle"] select,
:root[data-theme="qualitaetsschorle"] textarea {
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    background-color: var(--color-surface);
    letter-spacing: -0.008em;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        box-shadow   var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out);
}

:root[data-theme="qualitaetsschorle"] .input:hover,
:root[data-theme="qualitaetsschorle"] .textarea:hover,
:root[data-theme="qualitaetsschorle"] select:hover {
    border-color: var(--color-border-strong);
}

/* Fokus: farbiger Rahmen + weicher Halo statt harter Outline. */
:root[data-theme="qualitaetsschorle"] .input:focus,
:root[data-theme="qualitaetsschorle"] .textarea:focus,
:root[data-theme="qualitaetsschorle"] input:focus,
:root[data-theme="qualitaetsschorle"] select:focus,
:root[data-theme="qualitaetsschorle"] textarea:focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16);
}

:root[data-theme="qualitaetsschorle"] .form-field__label,
:root[data-theme="qualitaetsschorle"] .admin-form__row > label,
:root[data-theme="qualitaetsschorle"] .sys-form__row > label {
    font-weight: var(--fw-medium);
    letter-spacing: -0.008em;
    color: var(--color-text);
}

:root[data-theme="qualitaetsschorle"] .checkbox input {
    accent-color: var(--color-primary);
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   4. Sichtbarer Fokus fuer Tastaturnutzung (WCAG 2.1 AA)
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] a:focus-visible,
:root[data-theme="qualitaetsschorle"] .btn:focus-visible,
:root[data-theme="qualitaetsschorle"] button:focus-visible,
:root[data-theme="qualitaetsschorle"] [tabindex]:focus-visible,
:root[data-theme="qualitaetsschorle"] .admin-nav__link:focus-visible,
:root[data-theme="qualitaetsschorle"] .main-nav__link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   5. Flaechen und Karten
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .card,
:root[data-theme="qualitaetsschorle"] .sys-card,
:root[data-theme="qualitaetsschorle"] .event-card,
:root[data-theme="qualitaetsschorle"] .doc-card,
:root[data-theme="qualitaetsschorle"] .gallery-card,
:root[data-theme="qualitaetsschorle"] .attach-card,
:root[data-theme="qualitaetsschorle"] .admin-tile {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    transition:
        transform  var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

/* Anheben nur bei tatsaechlich klickbaren Karten. */
:root[data-theme="qualitaetsschorle"] .card--link:hover,
:root[data-theme="qualitaetsschorle"] .event-card:hover,
:root[data-theme="qualitaetsschorle"] .doc-card:hover,
:root[data-theme="qualitaetsschorle"] .gallery-card:hover,
:root[data-theme="qualitaetsschorle"] .attach-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

:root[data-theme="qualitaetsschorle"] .sys-card__head {
    border-bottom: 1px solid var(--color-border);
    background: transparent;
}

:root[data-theme="qualitaetsschorle"] .sys-card__head h2 {
    letter-spacing: -0.018em;
    font-size: var(--fs-18);
}

/* Bewusst KEIN Wechselstreifen: die Seite bleibt durchgehend eine ruhige
 * Flaeche, auf der die weissen Karten schweben. Gegliedert wird ueber
 * Weissraum, nicht ueber Hintergrundwechsel. */
:root[data-theme="qualitaetsschorle"] .section--alt {
    background: transparent;
}

/* --------------------------------------------------------------------------
   5b. Hero - zurueckhaltender Auftakt

   Die Basis legt zwei kraeftige Radialverlaeufe (Gold + Bordeaux) uebereinander.
   Auf der kuehlen Neutralpalette wirkt das stumpf. Stattdessen: ein sehr
   leiser Bordeaux-Hauch oben rechts ueber einem ruhigen Weiss-zu-Grau-Verlauf.
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .hero {
    background:
        radial-gradient(ellipse 70% 55% at 78% 0%,
            color-mix(in srgb, var(--color-bordeaux) 7%, transparent) 0%,
            transparent 70%),
        var(--color-bg);
}

:root[data-theme="qualitaetsschorle"] .hero__visual {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   6. Kopfzeile als Glasflaeche
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .site-header {
    background: rgba(245, 245, 247, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

/* Nur anwenden, wenn der Browser echtes Blur kann - sonst bliebe die
   Leiste halbtransparent und der Text darunter schwer lesbar. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-theme="qualitaetsschorle"] .site-header {
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        background: rgba(245, 245, 247, 0.85);
    }
}

:root[data-theme="qualitaetsschorle"] .main-nav__link {
    letter-spacing: -0.01em;
    font-weight: var(--fw-medium);
    border-radius: var(--radius-full);
    transition:
        color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out);
}

:root[data-theme="qualitaetsschorle"] .main-nav__link:hover {
    background: var(--color-surface-soft);
    color: var(--color-primary);
}

:root[data-theme="qualitaetsschorle"] .brand {
    letter-spacing: -0.022em;
    font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   7. Admin-Oberflaeche
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .admin-sidebar {
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
}

:root[data-theme="qualitaetsschorle"] .admin-nav__link {
    border-radius: var(--radius-md);
    letter-spacing: -0.01em;
    font-weight: var(--fw-medium);
    transition:
        background-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

:root[data-theme="qualitaetsschorle"] .admin-nav__link:hover {
    background: var(--color-surface-soft);
}

:root[data-theme="qualitaetsschorle"] .admin-nav__link--active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-xs);
}

:root[data-theme="qualitaetsschorle"] .admin-page-head h1 {
    letter-spacing: -0.028em;
}

:root[data-theme="qualitaetsschorle"] .admin-page-head__sub {
    color: var(--color-text-soft);
    letter-spacing: -0.006em;
}

:root[data-theme="qualitaetsschorle"] .admin-table-wrap {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

:root[data-theme="qualitaetsschorle"] .admin-table th {
    background: var(--color-surface-soft);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    color: var(--color-text-soft);
}

:root[data-theme="qualitaetsschorle"] .admin-table td,
:root[data-theme="qualitaetsschorle"] .admin-table th {
    border-bottom: 1px solid var(--color-border);
}

:root[data-theme="qualitaetsschorle"] .admin-table tbody tr {
    transition: background-color var(--dur-fast) var(--ease-out);
}

:root[data-theme="qualitaetsschorle"] .admin-table tbody tr:hover {
    background: var(--color-surface-soft);
}

:root[data-theme="qualitaetsschorle"] .admin-tile__value {
    letter-spacing: -0.03em;
    font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   8. Badges, Chips, Hinweise
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .badge,
:root[data-theme="qualitaetsschorle"] .sys-badge,
:root[data-theme="qualitaetsschorle"] .status-badge {
    border-radius: var(--radius-full);
    font-weight: var(--fw-medium);
    letter-spacing: 0.005em;
    font-size: var(--fs-12);
    padding: 3px 10px;
}

:root[data-theme="qualitaetsschorle"] .alert,
:root[data-theme="qualitaetsschorle"] .sys-alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
    letter-spacing: -0.008em;
}

/* --------------------------------------------------------------------------
   9. Theme-Picker
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .theme-picker__trigger {
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out);
}

:root[data-theme="qualitaetsschorle"] .theme-picker__trigger:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-soft);
}

:root[data-theme="qualitaetsschorle"] .theme-picker__popover {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

:root[data-theme="qualitaetsschorle"] .theme-picker__option {
    border-radius: var(--radius-md);
}

:root[data-theme="qualitaetsschorle"] .theme-picker__option-swatch,
:root[data-theme="qualitaetsschorle"] .theme-picker__trigger-swatch {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   10. Bildmaterial
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .card__media,
:root[data-theme="qualitaetsschorle"] .event-card__image,
:root[data-theme="qualitaetsschorle"] .gallery-thumb,
:root[data-theme="qualitaetsschorle"] .gallery-photos__item img {
    border-radius: var(--radius-md);
}

:root[data-theme="qualitaetsschorle"] .gallery-thumb,
:root[data-theme="qualitaetsschorle"] .gallery-photos__item img {
    transition: transform var(--dur-slow) var(--ease-out);
}

:root[data-theme="qualitaetsschorle"] .gallery-photos__item:hover img {
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   11. Grosszuegigkeit - Weissraum als Gestaltungsmittel

   Das praegendste Merkmal der Vorlage ist nicht die Farbe, sondern der Raum:
   schmale Lesespalte, viel Luft nach oben und unten, ruhige Flaechen.
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .section {
    padding-block: var(--sp-20);
}
:root[data-theme="qualitaetsschorle"] .section--sm {
    padding-block: var(--sp-12);
}
:root[data-theme="qualitaetsschorle"] .section--lg {
    padding-block: var(--sp-24);
}

:root[data-theme="qualitaetsschorle"] .hero {
    padding-block: var(--sp-24) var(--sp-20);
}

/* Fliesstext auf angenehme Zeilenlaenge begrenzen. */
:root[data-theme="qualitaetsschorle"] .article-body,
:root[data-theme="qualitaetsschorle"] .content-body,
:root[data-theme="qualitaetsschorle"] .legal {
    max-width: 68ch;
}

:root[data-theme="qualitaetsschorle"] .section-title {
    margin-bottom: var(--sp-3);
}

/* --------------------------------------------------------------------------
   12. Erscheinen von Listeneintraegen

   Karten und Zeilen blenden beim Laden kurz von unten ein. Das ordnet die
   Reihenfolge visuell und wirkt wertiger als ein hartes Erscheinen.
   -------------------------------------------------------------------------- */

@keyframes qs-row-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

:root[data-theme="qualitaetsschorle"] .idea-card,
:root[data-theme="qualitaetsschorle"] .event-card,
:root[data-theme="qualitaetsschorle"] .doc-card,
:root[data-theme="qualitaetsschorle"] .gallery-card {
    animation: qs-row-in var(--dur-slow) cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* --------------------------------------------------------------------------
   13. Kraeftigere Reaktion auf Hover

   Der Schatten ist bordeaux getoent statt neutral - dadurch wirkt das
   Anheben als Teil der Farbwelt und nicht wie ein grauer Schlagschatten.
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .card--link:hover,
:root[data-theme="qualitaetsschorle"] .event-card:hover,
:root[data-theme="qualitaetsschorle"] .doc-card:hover,
:root[data-theme="qualitaetsschorle"] .gallery-card:hover,
:root[data-theme="qualitaetsschorle"] .attach-card:hover,
:root[data-theme="qualitaetsschorle"] .idea-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(76, 17, 34, 0.13);
    border-color: rgba(76, 17, 34, 0.18);
}

/* --------------------------------------------------------------------------
   14. Segmented Control

   Vertiefte Spur, aktives Segment als aufliegende weisse Platte.
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .segmented {
    background: rgba(0, 0, 0, 0.05);
    padding: 3px;
}
:root[data-theme="qualitaetsschorle"] .segmented__item {
    transition: all var(--dur-base) var(--ease-in-out);
}
:root[data-theme="qualitaetsschorle"] .segmented__item--active {
    background: var(--color-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   15. Zahlen gross setzen

   Kennzahlen sind der eigentliche Inhalt - sie duerfen dominieren.
   -------------------------------------------------------------------------- */

:root[data-theme="qualitaetsschorle"] .idea-stat__value,
:root[data-theme="qualitaetsschorle"] .admin-tile__value {
    font-size: var(--fs-30);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   16. Reduzierte Bewegung respektieren
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    :root[data-theme="qualitaetsschorle"] .btn:hover,
    :root[data-theme="qualitaetsschorle"] .btn:active,
    :root[data-theme="qualitaetsschorle"] .card--link:hover,
    :root[data-theme="qualitaetsschorle"] .event-card:hover,
    :root[data-theme="qualitaetsschorle"] .doc-card:hover,
    :root[data-theme="qualitaetsschorle"] .gallery-card:hover,
    :root[data-theme="qualitaetsschorle"] .attach-card:hover,
    :root[data-theme="qualitaetsschorle"] .idea-card:hover,
    :root[data-theme="qualitaetsschorle"] .gallery-photos__item:hover img {
        transform: none;
    }

    :root[data-theme="qualitaetsschorle"] .idea-card,
    :root[data-theme="qualitaetsschorle"] .event-card,
    :root[data-theme="qualitaetsschorle"] .doc-card,
    :root[data-theme="qualitaetsschorle"] .gallery-card {
        animation: none;
    }
}