/* =========================================================
   Responsive + Print Styles für deine Tanz-Checkliste
   - Mobile: 1 Spalte
   - Tablet: 2 Spalten
   - Desktop: 3 Spalten
   - Druck: A4 quer, 3 Spalten, saubere Umbrüche
   Erwartete HTML-Struktur:
     .dance-checklist
       .dance
         h2
         ul > li
   Optional (für perfekte Checkbox-Ausrichtung):
     <li data-check="☑">Text</li> / <li data-check="☐">Text</li>
   ========================================================= */

:root {
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --text: #111;
    --muted: #444;
    --rule: #d6d6d6;

    /* Layout */
    --gap: 16px;
    --card-pad: 12px;
    --card-radius: 10px;

    /* Typo */
    --base-size: 16px;
    --line: 1.35;

    /* Checkbox */
    --check-col: 1.2em;
    --check-gap: 0.55em;

    /* Print */
    --page-margin: 12mm;
    --print-col-gap: 8mm;
    --print-row-gap: 1.6mm;
    --print-heading-gap: 1.8mm;
}

/* Reset / Base */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--base-size);
    line-height: var(--line);
    background: #fff;
}

.document-header {
    padding: 20px 16px 0;
    width: min(1100px, 100%);
    margin: 0 auto;
    display: block;
    text-align: left;
}

.document-header .logo {
    display: block;
    max-height: 48px;
    margin-bottom: 12px;
}

.document-header h1 {
    margin: 0 0 6px 0;
    font-size: 1.4rem;
}

.document-header .note {
    margin: 0;
    font-size: 0.95rem;
    color: #444;
}

.dance-checklist {
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* Responsive grid: 1 -> 2 -> 3 columns */
.dance-checklist {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
}

@media (min-width: 720px) {
    .dance-checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .dance-checklist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Dance blocks */
.dance {
    border: 1px solid var(--rule);
    border-radius: var(--card-radius);
    padding: var(--card-pad);
    break-inside: avoid;
}

.dance > h2 {
    margin: 0 0 8px 0;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: 0.2px;
    font-weight: 650;
}

.dance > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dance > ul > li {
    margin: 0 0 6px 0;
    color: var(--muted);

    display: grid;
    grid-template-columns: var(--check-col) 1fr;
    column-gap: var(--check-gap);
    align-items: baseline;
}

.dance > ul > li:last-child {
    margin-bottom: 0;
}

/* Checkbox marker: bevorzugt data-check */
.dance > ul > li::before {
    content: attr(data-check);
    font-weight: 700;
    color: var(--text);
    font-family: monospace;
    font-size: 1.4em;
    line-height: 1;
}

/* Wenn kein data-check vorhanden ist, bleibt ::before leer.
   Dann kannst du direkt "☑ " / "☐ " im Text behalten.
   Optional: falls du IM Text ein Symbol hast, kannst du ::before deaktivieren:
   .dance > ul > li::before { content: none; }
*/

/* Optional: bessere Lesbarkeit langer Einträge */
.dance > ul > li {
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Optional: Sternchen dezent hervorheben */
.dance > ul > li:has(*) {
    /* bewusst leer – nur Platzhalter, falls du später markieren willst */
}

/* ==========================
   PRINT (A4 landscape)
   ========================== */
@media print {
    :root {
        --base-size: 10.5pt;
    }

    @page {
        size: A4 landscape;
        margin: var(--page-margin);
    }

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Für Druck: Grid -> Multi-Column (schöneres Fließen) */
    .dance-checklist {
        width: auto;
        margin: 0;
        padding: 0;

        display: block;
        column-count: 3;
        column-gap: var(--print-col-gap);
    }

    /* Falls du Seitencontainer .page nutzt */
    .page {
        break-after: page;
        page-break-after: always;
    }
    .page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    /* Cards im Druck “flach” und sehr elegant */
    .dance {
        border: 0;
        border-radius: 0;
        padding: 0 0 3mm 0;
        margin: 0 0 3.2mm 0;
        border-bottom: 0.25mm solid var(--rule);

        break-inside: avoid;
        page-break-inside: avoid;
    }
    .dance:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .dance > h2 {
        font-size: 11.8pt;
        margin: 0 0 var(--print-heading-gap) 0;
    }

    .dance > ul > li {
        margin: 0 0 var(--print-row-gap) 0;
    }

    /* Links im Druck neutralisieren */
    a {
        color: inherit;
        text-decoration: none;
    }
}