/* =========================================
   HCG WISSEN - Hockey-Wissensplattform
   Farbschema & Grundstile
   ========================================= */

/* Google Fonts Import (fallback für offline) */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
    /* HCG Farbschema */
    --hcg-background: #0b0b0e;
    --hcg-surface: #131318;
    --hcg-surface-elevated: #1a1a21;
    --hcg-surface-hover: #222229;
    --hcg-accent: #CC1520;
    --hcg-accent-hover: #e01c28;
    --hcg-accent-dark: #991117;
    --hcg-text: #f0eff5;
    --hcg-text-muted: #a0a0a8;
    --hcg-text-dim: #707078;
    --hcg-border: #2a2a32;
    --hcg-success: #2d9c5a;
    --hcg-warning: #d4a021;
    --hcg-info: #3498db;

    /* Feld/Halle Farben */
    --hcg-feld: #4CAF50;
    --hcg-halle: #FF9800;

    /* Schwierigkeitsgrade */
    --diff-easy: #4CAF50;
    --diff-medium: #FFC107;
    --diff-hard: #f44336;

    /* Typografie */
    --font-headline: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-text: 'Barlow', 'Arial', sans-serif;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Radien */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* Focus Ring */
    --focus-ring: 0 0 0 3px rgba(204, 21, 32, 0.5);
}

/* Reset & Basis */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-text);
    font-weight: 400;
    line-height: 1.6;
    color: var(--hcg-text);
    background-color: var(--hcg-background);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fokus-Stile für Tastaturnavigation */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Skip Link für Accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--hcg-accent);
    color: var(--hcg-text);
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: 9999;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* =========================================
   TYPOGRAFIE
   ========================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 600;
    line-height: 1.2;
    color: var(--hcg-text);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--hcg-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover, a:focus {
    color: var(--hcg-accent-hover);
    text-decoration: underline;
}

/* =========================================
   LAYOUT
   ========================================= */

.wissen-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.wissen-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.wissen-grid--2col {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.wissen-grid--3col {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* =========================================
   HEADER & NAVIGATION
   ========================================= */

.wissen-header {
    background: var(--hcg-surface);
    border-bottom: 1px solid var(--hcg-border);
    padding: var(--spacing-md) var(--spacing-lg);
    position: sticky;
    top: 0;
    z-index: 100;
}

.wissen-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.wissen-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hcg-text);
    text-decoration: none;
}

.wissen-logo:hover {
    color: var(--hcg-accent);
    text-decoration: none;
}

.wissen-logo__icon {
    width: 40px;
    height: 40px;
}

.wissen-nav {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.wissen-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    color: var(--hcg-text-muted);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.wissen-nav__link:hover,
.wissen-nav__link:focus {
    background: var(--hcg-surface-hover);
    color: var(--hcg-text);
    text-decoration: none;
}

.wissen-nav__link--active {
    background: var(--hcg-accent);
    color: var(--hcg-text);
}

.wissen-nav__link--active:hover {
    background: var(--hcg-accent-hover);
}

/* =========================================
   FILTER-LEISTE
   ========================================= */

.wissen-filters {
    background: var(--hcg-surface);
    border-bottom: 1px solid var(--hcg-border);
    padding: var(--spacing-md) var(--spacing-lg);
}

.wissen-filters__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.wissen-filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.wissen-filter-group__label {
    font-weight: 500;
    color: var(--hcg-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Feld/Halle Toggle */
.spielform-toggle {
    display: flex;
    background: var(--hcg-surface-elevated);
    border-radius: var(--radius-md);
    padding: 2px;
    border: 1px solid var(--hcg-border);
}

.spielform-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: transparent;
    color: var(--hcg-text-muted);
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.spielform-toggle__btn:hover {
    color: var(--hcg-text);
}

.spielform-toggle__btn--active {
    color: var(--hcg-text);
}

.spielform-toggle__btn[data-spielform="feld"].spielform-toggle__btn--active {
    background: var(--hcg-feld);
}

.spielform-toggle__btn[data-spielform="halle"].spielform-toggle__btn--active {
    background: var(--hcg-halle);
}

.spielform-toggle__btn[data-spielform="beide"].spielform-toggle__btn--active {
    background: var(--hcg-accent);
}

/* Altersstufen-Filter */
.alter-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.alter-filter__btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--hcg-border);
    background: var(--hcg-surface-elevated);
    color: var(--hcg-text-muted);
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.alter-filter__btn:hover {
    border-color: var(--hcg-accent);
    color: var(--hcg-text);
}

.alter-filter__btn--active {
    background: var(--hcg-accent);
    border-color: var(--hcg-accent);
    color: var(--hcg-text);
}

/* =========================================
   KARTEN
   ========================================= */

.wissen-card {
    background: var(--hcg-surface);
    border: 1px solid var(--hcg-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

.wissen-card:hover {
    border-color: var(--hcg-accent);
    transform: translateY(-2px);
}

.wissen-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.wissen-card--link:hover {
    text-decoration: none;
}

.wissen-card__icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.wissen-card__title {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.wissen-card__desc {
    color: var(--hcg-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
}

.wissen-card__meta {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* =========================================
   BADGES & TAGS
   ========================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge--feld {
    background: rgba(76, 175, 80, 0.2);
    color: var(--hcg-feld);
    border: 1px solid var(--hcg-feld);
}

.badge--halle {
    background: rgba(255, 152, 0, 0.2);
    color: var(--hcg-halle);
    border: 1px solid var(--hcg-halle);
}

.badge--alter {
    background: rgba(204, 21, 32, 0.2);
    color: var(--hcg-accent);
    border: 1px solid var(--hcg-accent);
}

.badge--diff-easy {
    background: rgba(76, 175, 80, 0.2);
    color: var(--diff-easy);
}

.badge--diff-medium {
    background: rgba(255, 193, 7, 0.2);
    color: var(--diff-medium);
}

.badge--diff-hard {
    background: rgba(244, 67, 54, 0.2);
    color: var(--diff-hard);
}

/* =========================================
   ÜBUNGSKARTEN
   ========================================= */

.uebung-card {
    background: var(--hcg-surface);
    border: 1px solid var(--hcg-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.uebung-card__header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--hcg-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.uebung-card__title {
    font-family: var(--font-headline);
    font-size: 1.2rem;
    margin: 0;
}

.uebung-card__badges {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.uebung-card__body {
    padding: var(--spacing-lg);
}

.uebung-card__section {
    margin-bottom: var(--spacing-lg);
}

.uebung-card__section:last-child {
    margin-bottom: 0;
}

.uebung-card__section-title {
    font-family: var(--font-headline);
    font-size: 0.9rem;
    color: var(--hcg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

.uebung-card__lernziel {
    background: var(--hcg-surface-elevated);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--hcg-accent);
}

.uebung-card__aufbau,
.uebung-card__ablauf {
    line-height: 1.7;
}

.uebung-card__liste {
    list-style: none;
    padding: 0;
}

.uebung-card__liste li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: var(--spacing-sm);
}

.uebung-card__liste li::before {
    content: "•";
    color: var(--hcg-accent);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.uebung-card__fehler {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.uebung-card__fehler-title {
    color: #f44336;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

/* =========================================
   DETAILS/VERTIEFUNG
   ========================================= */

details.vertiefung {
    background: var(--hcg-surface-elevated);
    border: 1px solid var(--hcg-border);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
}

details.vertiefung summary {
    padding: var(--spacing-md);
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    list-style: none;
}

details.vertiefung summary::-webkit-details-marker {
    display: none;
}

details.vertiefung summary::before {
    content: "▶";
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

details.vertiefung[open] summary::before {
    transform: rotate(90deg);
}

details.vertiefung > div {
    padding: 0 var(--spacing-md) var(--spacing-md);
    border-top: 1px solid var(--hcg-border);
}

/* =========================================
   SCHNELLVERSION (60 Sekunden)
   ========================================= */

.schnellversion {
    background: linear-gradient(135deg, var(--hcg-accent-dark), var(--hcg-accent));
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.schnellversion__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-headline);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
}

.schnellversion__content {
    font-size: 1rem;
    line-height: 1.7;
}

.schnellversion__content ul {
    list-style: none;
    padding: 0;
}

.schnellversion__content li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: var(--spacing-sm);
}

.schnellversion__content li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* =========================================
   VORAUSSETZUNGEN
   ========================================= */

.voraussetzungen {
    background: var(--hcg-surface);
    border: 1px solid var(--hcg-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.voraussetzungen__title {
    font-family: var(--font-headline);
    font-size: 0.9rem;
    color: var(--hcg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

.voraussetzungen__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.voraussetzungen__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--hcg-surface-elevated);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.voraussetzungen__item a {
    color: var(--hcg-text);
}

/* =========================================
   LERNPFAD-NAVIGATION
   ========================================= */

.lernpfad {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg) 0;
    border-top: 1px solid var(--hcg-border);
    border-bottom: 1px solid var(--hcg-border);
}

.lernpfad__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--hcg-surface);
    border: 1px solid var(--hcg-border);
    border-radius: var(--radius-md);
    color: var(--hcg-text);
    text-decoration: none;
    transition: all var(--transition-fast);
    max-width: 45%;
}

.lernpfad__link:hover {
    border-color: var(--hcg-accent);
    text-decoration: none;
}

.lernpfad__link--prev {
    flex-direction: row;
}

.lernpfad__link--next {
    flex-direction: row-reverse;
    text-align: right;
    margin-left: auto;
}

.lernpfad__label {
    font-size: 0.8rem;
    color: var(--hcg-text-muted);
    text-transform: uppercase;
}

.lernpfad__title {
    font-family: var(--font-headline);
    font-weight: 600;
}

/* =========================================
   TABELLEN
   ========================================= */

.wissen-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
}

.wissen-table th,
.wissen-table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--hcg-border);
}

.wissen-table th {
    background: var(--hcg-surface-elevated);
    font-family: var(--font-headline);
    font-weight: 600;
    color: var(--hcg-text);
}

.wissen-table tr:hover td {
    background: var(--hcg-surface-hover);
}

.wissen-table--striped tr:nth-child(even) td {
    background: var(--hcg-surface);
}

/* =========================================
   BREADCRUMB
   ========================================= */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    font-size: 0.875rem;
    color: var(--hcg-text-muted);
}

.breadcrumb__sep {
    color: var(--hcg-text-dim);
}

.breadcrumb__current {
    color: var(--hcg-text);
    font-weight: 500;
}

/* =========================================
   HINWEIS-BOXEN
   ========================================= */

.hinweis {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
    display: flex;
    gap: var(--spacing-md);
}

.hinweis__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.hinweis--info {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.hinweis--info .hinweis__icon {
    color: var(--hcg-info);
}

.hinweis--warnung {
    background: rgba(212, 160, 33, 0.1);
    border: 1px solid rgba(212, 160, 33, 0.3);
}

.hinweis--warnung .hinweis__icon {
    color: var(--hcg-warning);
}

.hinweis--erfolg {
    background: rgba(45, 156, 90, 0.1);
    border: 1px solid rgba(45, 156, 90, 0.3);
}

.hinweis--erfolg .hinweis__icon {
    color: var(--hcg-success);
}

.hinweis--regel {
    background: rgba(204, 21, 32, 0.1);
    border: 1px solid rgba(204, 21, 32, 0.3);
}

.hinweis--regel .hinweis__icon {
    color: var(--hcg-accent);
}

/* =========================================
   HERO SECTION
   ========================================= */

.wissen-hero {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-lg);
    background: linear-gradient(180deg, var(--hcg-surface) 0%, var(--hcg-background) 100%);
    border-bottom: 1px solid var(--hcg-border);
}

.wissen-hero__title {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.wissen-hero__subtitle {
    font-size: 1.25rem;
    color: var(--hcg-text-muted);
    max-width: 600px;
    margin: 0 auto var(--spacing-lg);
}

/* =========================================
   SPIELFORM-CONTENT (Feld/Halle Trennung)
   ========================================= */

[data-spielform-content="feld"],
[data-spielform-content="halle"] {
    display: none;
}

[data-spielform-content="feld"].spielform--active,
[data-spielform-content="halle"].spielform--active,
[data-spielform-content="beide"] {
    display: block;
}

/* Wenn "beide" aktiv ist, zeige alles */
body.spielform-beide [data-spielform-content="feld"],
body.spielform-beide [data-spielform-content="halle"],
body.spielform-beide [data-spielform-content="beide"] {
    display: block;
}

body.spielform-feld [data-spielform-content="feld"],
body.spielform-feld [data-spielform-content="beide"] {
    display: block;
}

body.spielform-halle [data-spielform-content="halle"],
body.spielform-halle [data-spielform-content="beide"] {
    display: block;
}

/* Altersstufen-Filter */
[data-alter] {
    display: none;
}

[data-alter].alter--active {
    display: block;
}

body.alter-alle [data-alter] {
    display: block;
}

/* =========================================
   PRINT STYLES
   ========================================= */

@media print {
    :root {
        --hcg-background: #fff;
        --hcg-surface: #fff;
        --hcg-text: #000;
        --hcg-text-muted: #333;
    }

    body {
        background: white;
        color: black;
        font-size: 11pt;
    }

    .wissen-header,
    .wissen-filters,
    .wissen-nav,
    .skip-link,
    .spielform-toggle,
    .alter-filter,
    .lernpfad,
    details.vertiefung summary::before {
        display: none !important;
    }

    details.vertiefung {
        border: 1px solid #ccc;
    }

    details.vertiefung[open] > div {
        display: block !important;
    }

    .wissen-card,
    .uebung-card {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
    }

    .schnellversion {
        background: #f5f5f5 !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    .badge {
        border: 1px solid currentColor;
        background: transparent !important;
    }

    /* Schnellreferenz Druckformat */
    .print-only {
        display: block !important;
    }

    .no-print {
        display: none !important;
    }

    @page {
        margin: 2cm;
    }
}

.print-only {
    display: none;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {
    :root {
        font-size: 14px;
    }

    .wissen-header__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .wissen-nav {
        justify-content: center;
    }

    .wissen-filters__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .wissen-hero__title {
        font-size: 2rem;
    }

    .lernpfad {
        flex-direction: column;
    }

    .lernpfad__link {
        max-width: 100%;
    }

    .lernpfad__link--next {
        flex-direction: row;
        text-align: left;
    }
}

/* TV/Fernbedienungs-Modus (große Fokus-Elemente) */
@media (min-width: 1920px) {
    .wissen-nav__link,
    .spielform-toggle__btn,
    .alter-filter__btn,
    .wissen-card {
        min-height: 48px;
        font-size: 1.1rem;
    }

    :focus-visible {
        box-shadow: 0 0 0 4px var(--hcg-accent);
    }
}