/* CSS Variables */
:root {
    --color-section: #e9e9e9;
    --color-number: #000000;
    --color-text: #000000;
    --color-tab-stroke: #989898;
    --color-tab-bg: #f1f1f1;
    --color-tab-anti: #ffcfed;
    --color-tab-lang: #d5eaff;
    --color-tab-kurz: #c8ffe9;
    --radius-box: 8px;
    --gap-s: 10px;
    --gap-m: 20px;
    --gap-l: 30px;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inclusive Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0.1px;
    color: var(--color-text);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* iOS Safe Area */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Container */
.container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
    padding: var(--gap-s);
    max-width: 600px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Header */
.header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    padding: 0 var(--gap-s);
}

.header .emoji {
    font-size: 32px;
    line-height: 32px;
}

.header h1 {
    font-size: 42px;
    font-weight: 700;
    line-height: 42px;
}

.header .subtitle {
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0.1px;
}

/* Content Sections */
.content-section {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Section Number Badge */
.section-number {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.section-number span {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: var(--color-section);
    padding: 15px 20px 0 20px;
    border-radius: var(--radius-box) var(--radius-box) 0 0;
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    color: var(--color-number);
}

/* Section Content */
.section-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
    background-color: var(--color-section);
    padding: var(--gap-m) var(--gap-s);
    border-radius: var(--radius-box) 0 var(--radius-box) var(--radius-box);
}

.section-content h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
}

.section-content p {
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.1px;
}

.section-content strong {
    font-weight: 700;
}

/* Lists */
.section-content ul,
.section-content ol {
    padding-left: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-content ul ul {
    margin-top: 8px;
    list-style-type: disc;
}

.section-content li {
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0.1px;
}

.section-content ol {
    list-style-type: decimal;
}

/* Section Color Modifiers */
.section-anti .section-number span,
.section-anti .section-content {
    background-color: var(--color-tab-anti);
}

.section-lang .section-number span,
.section-lang .section-content {
    background-color: var(--color-tab-lang);
}

.section-kurz .section-number span,
.section-kurz .section-content {
    background-color: var(--color-tab-kurz);
}

/* Spickzettel Section */
.spickzettel-section {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    width: 100%;
}

.spickzettel-section h3 {
    font-size: 21px;
    font-weight: 700;
    line-height: 28px;
    padding-bottom: var(--gap-l);
}

/* Table */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0.1px;
}

th,
td {
    padding: 6px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--color-tab-stroke);
}

th {
    font-weight: 500;
    background-color: #ffffff;
    border-bottom: none;
}

tbody tr:nth-child(odd) {
    background-color: var(--color-tab-bg);
}

tbody tr:nth-child(even) {
    background-color: #ffffff;
}

td strong {
    font-weight: 700;
}

/* Footer */
.footer {
    padding: var(--gap-s);
}

.footer p {
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.1px;
}

/* iOS PWA Optimizations */
@supports (-webkit-touch-callout: none) {

    /* Disable text selection on tap */
    body {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Allow text selection in content areas */
    .section-content,
    .spickzettel-section,
    .footer {
        -webkit-user-select: text;
        user-select: text;
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent pull-to-refresh when not needed */
    body {
        overscroll-behavior-y: contain;
    }
}

/* Prevent tap highlight */
a,
button {
    -webkit-tap-highlight-color: transparent;
}

/* Responsive adjustments for very small screens */
@media screen and (max-width: 360px) {
    :root {
        --gap-l: 20px;
        --gap-m: 15px;
    }

    .header h1 {
        font-size: 28px;
        line-height: 30px;
    }

    .section-content h2 {
        font-size: 21px;
        line-height: 26px;
    }

    table {
        font-size: 14px;
        line-height: 20px;
    }

    th,
    td {
        padding: 4px;
    }
}

/* Dark mode support (optional, respects system preference) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-section: #313131;
        --color-text: #f5f5f5;
        --color-tab-bg: #2a2a2a;
        --color-tab-stroke: #555555;
    }

    body {
        background-color: #1a1a1a;
    }

    .section-anti .section-content,
    .section-lang .section-content,
    .section-kurz .section-content {
        color: #000000;
    }

    .section-material .section-number span,
    .section-gesetz .section-number span {
        color: #f5f5f5;
    }

    th {
        background-color: #1a1a1a;
    }

    tbody tr:nth-child(even) {
        background-color: #1a1a1a;
    }

    tbody tr:nth-child(odd) {
        background-color: #313131;
    }
}
/* End of styles.css */