/* ==========================================================================
   Netzwerkhub - gemeinsames Design-System
   --------------------------------------------------------------------------
   Diese Datei wird von allen Seiten eingebunden und sorgt für ein
   einheitliches Erscheinungsbild (Farben, Kopf- und Fussbereich, Reiter,
   Buttons, Gamification-Leiste, Toasts, Quiz-Karten, Druckansicht).

   Seitenspezifische Styles stehen weiterhin im <style>-Block der
   jeweiligen Seite und dürfen diese Regeln gezielt überschreiben.
   ========================================================================== */

/* ---------- Design-Token ---------- */
:root {
    --nh-primary: #6d4aff;
    --nh-primary-dark: #5a3dd9;
    --nh-primary-light: #9b7dff;
    --nh-primary-soft: #f9f7ff;
    --nh-primary-tint: #e8e3ff;
    --nh-chip-bg: #f0eaff;
    --nh-chip-border: #d8ccff;

    --nh-ink: #333;
    --nh-muted: #666;
    --nh-border: #ddd;
    --nh-surface: #fff;
    --nh-surface-alt: #f9f9f9;

    --nh-ok: #2e7d32;
    --nh-ok-ink: #006600;
    --nh-ok-bg: #e0ffe0;
    --nh-bad: #cc0000;
    --nh-bad-bg: #ffe0e0;
    --nh-warn: #ff9800;
    --nh-warn-bg: #fff3e0;
    --nh-streak: #ff6d00;

    --nh-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --nh-radius: 15px;
    --nh-radius-sm: 8px;
    --nh-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    --nh-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --nh-mono: 'Courier New', Consolas, monospace;
}

/* ---------- Grundlayout ---------- */
* { box-sizing: border-box; font-family: var(--nh-font); }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--nh-gradient);
    background-attachment: fixed;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    color: var(--nh-ink);
    line-height: 1.45;
}
code, kbd, pre, samp { font-family: var(--nh-mono); }
a { color: var(--nh-primary); }
.hidden { display: none !important; }

.container {
    max-width: 1300px;
    margin: 0 auto;
    background: var(--nh-surface);
    border-radius: var(--nh-radius);
    padding: 30px;
    box-shadow: var(--nh-shadow);
}

h1 { color: var(--nh-primary); text-align: center; margin: 0 0 10px; font-size: 2.2em; line-height: 1.2; }
h2 { color: var(--nh-ink); border-bottom: 2px solid var(--nh-primary); padding-bottom: 6px; }
h3 { color: var(--nh-primary); }
.subtitle { text-align: center; color: var(--nh-muted); margin: 0 0 20px; font-style: italic; }

/* ---------- Kopfbereich jeder Seite ---------- */
.page-header { text-align: center; margin-bottom: 22px; }
.page-header h1 { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.page-icon {
    display: inline-grid; place-items: center;
    width: 54px; height: 54px; border-radius: 16px;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--nh-primary), var(--nh-primary-light));
    box-shadow: 0 9px 22px rgba(109, 74, 255, 0.35);
}
.page-header .subtitle { margin-bottom: 10px; }
.version-badge {
    display: inline-block;
    background: var(--nh-chip-bg); color: var(--nh-primary);
    border: 1px solid var(--nh-chip-border);
    font-size: 0.78em; font-weight: bold;
    padding: 4px 12px; border-radius: 999px;
}

/* Zurück-Button (oben links, auf schmalen Bildschirmen im Fluss) */
.back-btn {
    position: fixed; top: 20px; left: 20px; z-index: 100;
    display: inline-block;
    background: rgba(255, 255, 255, 0.92); color: var(--nh-primary);
    border: none; padding: 10px 18px; border-radius: var(--nh-radius-sm);
    font-size: 15px; font-weight: bold; text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s; cursor: pointer;
}
.back-btn:hover { background: #fff; transform: translateY(-2px); }
.back-btn + .container { margin-top: 46px; }
.back-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Fussbereich (unterhalb des weissen Containers) */
.site-footer {
    max-width: 1300px; margin: 28px auto 6px;
    text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 0.9em;
}
.site-footer a { color: #fff; font-weight: bold; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .sep { margin: 0 8px; opacity: 0.6; }

/* ---------- Reiter ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.tab {
    background: #f0f0f0; color: var(--nh-ink);
    border: 2px solid var(--nh-border);
    padding: 12px 26px; font-size: 16px; font-weight: bold;
    border-radius: var(--nh-radius-sm); cursor: pointer; transition: all 0.3s;
}
.tab:hover { background: #e0e0e0; }
.tab.active { background: var(--nh-primary); color: #fff; border-color: var(--nh-primary); }
.tab:disabled { opacity: 0.4; cursor: not-allowed; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---------- Buttons ---------- */
button.primary-btn, .primary-btn {
    background: var(--nh-primary); color: #fff; border: none;
    padding: 12px 30px; font-size: 16px; border-radius: var(--nh-radius-sm);
    cursor: pointer; transition: all 0.3s; margin-right: 10px;
}
button.primary-btn:hover:not(:disabled) { background: var(--nh-primary-dark); transform: translateY(-2px); }
button.primary-btn:disabled { background: #b3a3e8; cursor: default; transform: none; }

button.secondary-btn, .secondary-btn {
    background: #f0f0f0; color: var(--nh-ink); border: 2px solid var(--nh-border);
    padding: 12px 30px; font-size: 16px; border-radius: var(--nh-radius-sm);
    cursor: pointer; transition: all 0.3s; margin-right: 10px;
}
button.secondary-btn:hover:not(:disabled) { background: #e0e0e0; }
button.secondary-btn:disabled { opacity: 0.5; cursor: default; }

button.hint-btn {
    background: #ffeb3b; color: var(--nh-ink); border: 1px solid #fbc02d;
    padding: 8px 16px; font-size: 14px; border-radius: 6px;
    cursor: pointer; transition: all 0.2s; margin-right: 8px;
}
button.hint-btn:hover { background: #fff176; }

button.copy-btn {
    background: #2196f3; color: #fff; border: none;
    padding: 6px 14px; font-size: 13px; border-radius: 5px;
    cursor: pointer; transition: all 0.2s;
}
button.copy-btn:hover { background: #1976d2; transform: translateY(-1px); }

button.danger-btn, button.danger {
    background: #f44336; color: #fff; border: none;
    padding: 10px 20px; font-size: 14px; border-radius: var(--nh-radius-sm); cursor: pointer;
}
button.danger-btn:hover, button.danger:hover { background: #d32f2f; }

button.reset-game-btn {
    background: #eee; color: var(--nh-muted); border: 1px solid #ccc;
    padding: 6px 12px; font-size: 12px; border-radius: 5px;
    cursor: pointer; margin-left: auto;
}
button.reset-game-btn:hover { background: #e0e0e0; }

button:focus-visible, .tab:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
    outline: 3px solid rgba(109, 74, 255, 0.45); outline-offset: 2px;
}

/* ---------- Gamification-Leiste ---------- */
.game-bar {
    display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
    background: var(--nh-primary-soft); border: 2px solid var(--nh-primary);
    border-radius: 12px; padding: 12px 18px; margin-bottom: 25px;
}
.game-bar:empty { display: none; }
.game-level { background: var(--nh-primary); color: #fff; font-weight: bold; padding: 8px 16px; border-radius: 20px; white-space: nowrap; }
.xp-bar-container { flex: 1; min-width: 180px; height: 26px; background: var(--nh-primary-tint); border-radius: 13px; position: relative; overflow: hidden; }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--nh-primary), var(--nh-primary-light)); width: 0%; transition: width 0.6s ease; }
.xp-bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: var(--nh-ink); }
.streak-display { font-weight: bold; color: var(--nh-streak); font-size: 15px; white-space: nowrap; }
.boost-display { background: var(--nh-streak); color: #fff; font-weight: bold; padding: 6px 12px; border-radius: 20px; font-size: 13px; animation: nh-pulse 1.2s infinite; }
.badge-count { font-size: 14px; font-weight: bold; color: #555; }
.game-stat { font-size: 14px; font-weight: bold; color: #555; white-space: nowrap; }
@keyframes nh-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- Toasts ---------- */
.toast {
    position: fixed; right: 25px; bottom: 25px; z-index: 9999;
    background: #333; color: #fff;
    padding: 14px 22px; border-radius: 10px;
    font-weight: bold; font-size: 15px; max-width: 380px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    opacity: 0; transform: translateX(30px); transition: all 0.4s;
    pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { background: var(--nh-ok); }
.toast.info { background: var(--nh-primary); }
.toast.warning { background: var(--nh-warn); color: var(--nh-ink); }

/* ---------- Hinweise, Ergebnisse, Quiz ---------- */
.hint-text { color: var(--nh-muted); font-style: italic; font-size: 14px; margin-top: 10px; display: none; }
.hint-text.visible { display: block; }

.score-display { text-align: center; font-size: 18px; font-weight: bold; padding: 15px; margin: 20px 0; border-radius: var(--nh-radius-sm); }
.score-good { background: var(--nh-ok-bg); color: var(--nh-ok-ink); }
.score-ok { background: var(--nh-warn-bg); color: #b26a00; }
.score-bad { background: var(--nh-bad-bg); color: var(--nh-bad); }

.quiz-card { background: var(--nh-surface-alt); border-radius: 10px; border-left: 5px solid var(--nh-primary); padding: 20px; margin-bottom: 20px; }
.quiz-question { font-weight: bold; font-size: 17px; margin-bottom: 15px; }
.quiz-option {
    display: block; width: 100%; text-align: left;
    background: #fff; border: 2px solid var(--nh-border); border-radius: var(--nh-radius-sm);
    padding: 12px 16px; margin: 8px 0; cursor: pointer; font-size: 15px; transition: all 0.2s;
    color: var(--nh-ink);
}
.quiz-option:hover { border-color: var(--nh-primary); }
.quiz-option.correct { background: var(--nh-ok-bg); border-color: var(--nh-ok-ink); }
.quiz-option.wrong { background: var(--nh-bad-bg); border-color: var(--nh-bad); }
.quiz-option.locked { cursor: default; }
.quiz-progress { font-weight: bold; color: var(--nh-muted); margin-bottom: 10px; }

.rfc { font-style: italic; font-size: 0.85em; color: var(--nh-muted); }

/* Einheitliche Tabelle */
.nh-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.nh-table th, .nh-table td { border: 1px solid var(--nh-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.nh-table th { background: #f0f0f0; }
.nh-table tr:nth-child(even) td { background: #fafafa; }

/* ---------- Druckansicht ---------- */
@media print {
    body { background: #fff; padding: 0; }
    .container { box-shadow: none; border: 1px solid #ccc; max-width: none; }
    .back-btn, .site-footer, .toast, .tabs, .game-bar, button { display: none !important; }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 768px) {
    body { padding: 12px; }
    .back-btn { position: static; display: inline-block; margin-bottom: 12px; }
    .back-btn + .container { margin-top: 0; }
    .container { padding: 18px; }
    h1 { font-size: 1.7em; }
    .tabs { flex-direction: column; }
    .tab { width: 100%; text-align: center; }
    .toast { left: 12px; right: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}