/* ==========================================
   SHK-MATE - Grundlagen: Schriften, Farbvariablen, Reset, Grundlayout und Karten
   Teil von style.css - die Reihenfolge der <link>-Tags
   in index.html entspricht der urspruenglichen Datei.
   ========================================== */

@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --primary: #adc6ff;
    --accent: #fe9400;
    --bg: #131315;
    --surface: #1f1f21;
    --text: #e4e2e4;
    --text-secondary: #c1c6d7;
    --input-bg: #2a2a2c;
    --border-color: #414755;
    --success: #22C55E;
    --error: #EF4444;
    --warning: #f97316;
    --status-bar-height: env(safe-area-inset-top, 0px);
    --nav-bar-height: env(safe-area-inset-bottom, 0px);
}

/* Skip Link für Accessibility (WCAG) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    font-weight: bold;
    z-index: 9999;
}

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

/* Screen Reader Only (für Accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Hint Text für besseres Verständnis */
.hint-text {
    font-size: 0.85rem;
    color: #b0b0b0;
    margin-top: -10px;
    margin-bottom: 10px;
    display: block;
}

/* "Resette" alle Elemente, damit Breiten stimmen */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  
}

body {
    font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    /* Zurück zu overflow: hidden - wichtig für fixed containers */
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    line-height: 1.6;
    min-height: 100dvh;
    overscroll-behavior: none;
}

main {
    position: fixed;
    top: calc(65px + var(--status-bar-height, 25px));
    left: 0;
    right: 0;
    bottom: calc(60px + var(--nav-bar-height)); /* Platz für Navigation */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0 120px 0;
}

header {
    background: #131315;
    padding: 15px 20px;
    padding-top: calc(15px + var(--status-bar-height, 25px));
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 65px;
}

header h1 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
}

.header_logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.container {
    padding: 15px 20px 20px;
    display: none;
    animation: fadeIn 0.3s;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: transparent;
    /* Relative positioning statt fixed - Container sind jetzt in main */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    overflow-y: visible;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 50;
}

.container.active {
    display: block;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.card {
    width: 100%;
    background-color: var(--surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s, transform 0.2s;
}

.card:not(:last-child) {
    margin-bottom: 16px;
}

.card:active {
    /* Entfernt das Zucken beim Touch */
    transform: none;
    opacity: 0.98;
}

.card h3 {
    margin-top: 0;
    color: var(--accent);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========== GEMEINSAME BAUSTEINE ========== */
/* Ersetzen Inline-Styles, die vorher im HTML bzw. in JS-Templates standen */

.empty-hint {
    color: #aaa;
    text-align: center;
}

/* Zwei Felder nebeneinander (z.B. Vorlauf / Ruecklauf) */
.field-row {
    display: flex;
    gap: 10px;
}

.u-flex-1 {
    flex: 1;
}

/* Erklaerender Text unter einer Karten-Ueberschrift */
.card-hint {
    margin-top: -10px;
    font-size: 0.8rem;
    color: #aaa;
}