/* UI-16: Aussehen "Bauklotz" (Look Nr. 42 der Auswahl). Gilt nur, wenn <html data-look="bauklotz"> gesetzt ist
   (src/look.js). Bewusst ohne @layer: ungeschichtete Regeln gewinnen gegen die geschichteten Grundstile.
   Farben: Creme #fff8e7, Marine #1b2b4b, Rot #e63946, Gelb #f4c430, Blau #2a6fdb, Gruen #2fa865. */
:root[data-look="bauklotz"] {
  --ink: #1b2b4b; --green: #2a6fdb; --green-dark: #1f57b0; --muted: #4a5878; --background: #fff8e7; --line: #1b2b4b;
  --sky: #2a6fdb; --sky-deep: #1f57b0; --sunny: #f4c430; --sunny-deep: #c99a12; --mist: #fff1cc; --sage: #2fa865;
  --lavender: #2a6fdb; --peach: #e63946; --blue: #2a6fdb; --yellow: #f4c430; --pink: #e63946;
  --bk-ink: #1b2b4b; --bk-red: #e63946; --bk-red-deep: #b3202c; --bk-yellow: #f4c430; --bk-yellow-deep: #c99a12;
  --bk-blue: #2a6fdb; --bk-blue-deep: #1b4fa6; --bk-green: #2fa865; --bk-green-deep: #1f7a48; --bk-cream: #fff8e7;
  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif;
}
:root[data-look="bauklotz"] body, :root[data-look="bauklotz"] button, :root[data-look="bauklotz"] input, :root[data-look="bauklotz"] select, :root[data-look="bauklotz"] textarea { font-family: "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif; }
:root[data-look="bauklotz"] body { background: var(--bk-cream); color: var(--bk-ink); }
:root[data-look="bauklotz"] h1, :root[data-look="bauklotz"] h2, :root[data-look="bauklotz"] h3 { font-weight: 800; color: var(--bk-ink); letter-spacing: 0; }
:root[data-look="bauklotz"] .eyebrow { color: var(--bk-red); font-weight: 800; }
:root[data-look="bauklotz"] .page-subtitle { color: var(--muted); }

/* Wortmarke aus Kloetzen */
.block-brand { display: inline-flex; gap: 4px; }
.block-brand i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; font-style: normal; font-weight: 800; font-size: 19px; line-height: 1; color: #fff; text-transform: lowercase; letter-spacing: 0; }
.block-brand .block-0 { background: #e63946; }
.block-brand .block-1 { background: #f4c430; color: #1b2b4b; }
.block-brand .block-2 { background: #2a6fdb; }
.block-brand .block-3 { background: #2fa865; }
:root[data-look="bauklotz"] .sidebar .block-brand i { width: 27px; height: 27px; font-size: 17px; }
:root[data-look="bauklotz"] .brand { margin-left: 0; }

/* Rahmen: Kopf, Seitenleiste, untere Leiste */
:root[data-look="bauklotz"] .topbar { background: var(--bk-cream); border-bottom: 3px solid var(--bk-ink); }
:root[data-look="bauklotz"] .topbar-location { color: var(--bk-ink); }
:root[data-look="bauklotz"] .language-badge { background: #fff; border: 2px solid var(--bk-ink); border-radius: 12px; color: var(--bk-ink); box-shadow: 0 3px 0 var(--bk-ink); }
:root[data-look="bauklotz"] .language-badge b { background: var(--bk-yellow); color: var(--bk-ink); border: 0; }
:root[data-look="bauklotz"] .top-stat, :root[data-look="bauklotz"] .top-stat > span, :root[data-look="bauklotz"] .top-stat strong { color: var(--bk-ink); }
:root[data-look="bauklotz"] .icon-button { color: var(--bk-ink); }
:root[data-look="bauklotz"] .manager-menu-toggle { border: 2px solid var(--bk-ink); box-shadow: 0 3px 0 var(--bk-ink); }
:root[data-look="bauklotz"] .manager-menu-toggle.active { background: var(--bk-yellow); border-color: var(--bk-ink); }
:root[data-look="bauklotz"] .manager-menu-panel { border: 2px solid var(--bk-ink); border-radius: 16px; box-shadow: 0 5px 0 var(--bk-ink); }
:root[data-look="bauklotz"] .sidebar { background: var(--bk-ink); border-right: 0; color: #fff; }
:root[data-look="bauklotz"] .sidebar .sidebar-toggle { color: #fff; }
:root[data-look="bauklotz"] .sidebar-course { border-color: #3a4a6e; }
:root[data-look="bauklotz"] .sidebar-course strong { color: #fff; }
:root[data-look="bauklotz"] .sidebar-course > div > span, :root[data-look="bauklotz"] .nav-caption, :root[data-look="bauklotz"] .sidebar-tip { color: #c5ccdd; }
:root[data-look="bauklotz"] .sidebar .language-picker { background: #25365c; border-color: #25365c; }
:root[data-look="bauklotz"] .sidebar .language-option { background: transparent; color: #e6eaf4; }
:root[data-look="bauklotz"] .sidebar .language-option.selected { background: var(--bk-yellow); color: var(--bk-ink); box-shadow: none; }
:root[data-look="bauklotz"] .nav-link { color: #c5ccdd; font-weight: 800; border-radius: 12px; }
:root[data-look="bauklotz"] .nav-link:hover { background: #25365c; color: #fff; }
:root[data-look="bauklotz"] .nav-link.active { background: var(--bk-yellow); color: var(--bk-ink); box-shadow: 0 4px 0 var(--bk-yellow-deep); }
:root[data-look="bauklotz"] .nav-link.active .icon { color: var(--bk-ink); }
:root[data-look="bauklotz"] .nav-dot { background: var(--bk-ink); }
:root[data-look="bauklotz"] .profile-button { background: #25365c; color: #fff; border-color: #25365c; }
:root[data-look="bauklotz"] .profile-button strong { color: #fff; }
:root[data-look="bauklotz"] .profile-button small { color: #c5ccdd; }
:root[data-look="bauklotz"] .avatar { background: var(--bk-red); color: #fff; }
:root[data-look="bauklotz"] .mobile-nav { background: var(--bk-ink); border-top: 0; backdrop-filter: none; box-shadow: none; }
:root[data-look="bauklotz"] .mobile-nav a { color: #c5ccdd; font-weight: 600; border-radius: 10px; }
:root[data-look="bauklotz"] .mobile-nav a[aria-current="page"] { color: var(--bk-ink); background: var(--bk-yellow); font-weight: 800; }

/* Knoepfe: kantig mit festem Schattenklotz */
:root[data-look="bauklotz"] .button { border-radius: 12px; font-weight: 800; }
:root[data-look="bauklotz"] .button-dark { background: var(--bk-red); color: #fff; border: 0; box-shadow: 0 4px 0 var(--bk-red-deep); }
:root[data-look="bauklotz"] .button-dark:hover:not(:disabled) { background: #d42f3c; }
:root[data-look="bauklotz"] .button-dark:active:not(:disabled), :root[data-look="bauklotz"] .button-outline:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--bk-ink); }
:root[data-look="bauklotz"] .button-outline { background: #fff; color: var(--bk-ink); border: 2px solid var(--bk-ink); box-shadow: 0 3px 0 var(--bk-ink); }
:root[data-look="bauklotz"] .button:disabled { box-shadow: none; opacity: .55; }
:root[data-look="bauklotz"] .text-button { color: var(--bk-blue-deep); font-weight: 800; }

/* Startkarte: grosser blauer Klotz mit gelbem Knopf */
:root[data-look="bauklotz"] .hero-card { background: var(--bk-blue); border: 0; border-radius: 20px; box-shadow: 0 6px 0 var(--bk-blue-deep); color: #fff; }
:root[data-look="bauklotz"] .hero-card::before, :root[data-look="bauklotz"] .hero-card::after { display: none; }
:root[data-look="bauklotz"] .hero-card h2, :root[data-look="bauklotz"] .hero-card p, :root[data-look="bauklotz"] .hero-card .hero-tag, :root[data-look="bauklotz"] .hero-card .hero-meta, :root[data-look="bauklotz"] .hero-card li, :root[data-look="bauklotz"] .hero-card li strong, :root[data-look="bauklotz"] .hero-card li small, :root[data-look="bauklotz"] .hero-card .text-button, :root[data-look="bauklotz"] .hero-card .conversation-outcome { color: #fff; }
:root[data-look="bauklotz"] .hero-card .button-dark { background: var(--bk-yellow); color: var(--bk-ink); box-shadow: 0 4px 0 var(--bk-yellow-deep); }
:root[data-look="bauklotz"] .hero-card .button-dark:hover:not(:disabled) { background: #ffd24a; }
:root[data-look="bauklotz"] .hero-card .learning-steps { border-color: rgba(255, 255, 255, .35); }
:root[data-look="bauklotz"] .hero-card .learning-steps b { background: rgba(255, 255, 255, .22); color: #fff; }
:root[data-look="bauklotz"] .hero-card .learning-steps [aria-current="step"] b { background: var(--bk-yellow); color: var(--bk-ink); }
:root[data-look="bauklotz"] .hero-card .learning-steps [aria-current="step"], :root[data-look="bauklotz"] .hero-card .learning-steps [aria-current="step"] strong { color: #fff; }

/* Karten und Felder */
:root[data-look="bauklotz"] .optional-panel, :root[data-look="bauklotz"] .setup-custom, :root[data-look="bauklotz"] .daily-card, :root[data-look="bauklotz"] .culture-card, :root[data-look="bauklotz"] .next-level, :root[data-look="bauklotz"] .listen-start, :root[data-look="bauklotz"] .echo-start, :root[data-look="bauklotz"] .stat-card, :root[data-look="bauklotz"] .achievement-card, :root[data-look="bauklotz"] .course-options, :root[data-look="bauklotz"] .level-picker, :root[data-look="bauklotz"] .word-card { background: #fff; border: 2px solid var(--bk-ink); border-radius: 18px; box-shadow: 0 4px 0 var(--bk-ink); }
:root[data-look="bauklotz"] .optional-panel > summary, :root[data-look="bauklotz"] .setup-custom > summary, :root[data-look="bauklotz"] .course-controls > summary { color: var(--bk-ink); font-weight: 800; }
:root[data-look="bauklotz"] .course-controls.optional-panel { background: transparent; border: 0; box-shadow: none; }
:root[data-look="bauklotz"] .word-of-day { background: var(--bk-yellow); border: 0; border-radius: 18px; box-shadow: 0 4px 0 var(--bk-yellow-deep); }
:root[data-look="bauklotz"] .word-of-day .daily-word, :root[data-look="bauklotz"] .word-of-day .word-translation, :root[data-look="bauklotz"] .word-of-day .word-card-label, :root[data-look="bauklotz"] .word-of-day .pronunciation-hint { color: var(--bk-ink); }
:root[data-look="bauklotz"] .audio-pill { background: #fff; color: var(--bk-ink); border: 2px solid var(--bk-ink); border-radius: 10px; }
:root[data-look="bauklotz"] .settings-input, :root[data-look="bauklotz"] .auth-card input, :root[data-look="bauklotz"] .auth-card select, :root[data-look="bauklotz"] select, :root[data-look="bauklotz"] input[type="text"], :root[data-look="bauklotz"] input[type="search"], :root[data-look="bauklotz"] input[type="email"], :root[data-look="bauklotz"] input[type="password"], :root[data-look="bauklotz"] input[type="date"], :root[data-look="bauklotz"] textarea { border: 2px solid var(--bk-ink); border-radius: 12px; background: #fff; color: var(--bk-ink); }

/* Uebungskacheln als volle Farbklötze */
:root[data-look="bauklotz"] .practice-card { border: 0; border-radius: 18px; font-weight: 800; }
:root[data-look="bauklotz"] .practice-card, :root[data-look="bauklotz"] .practice-card strong, :root[data-look="bauklotz"] .practice-card small, :root[data-look="bauklotz"] .practice-card span, :root[data-look="bauklotz"] .practice-card .practice-symbol { color: #fff; }
:root[data-look="bauklotz"] .practice-card.yellow { background: var(--bk-yellow); box-shadow: 0 4px 0 var(--bk-yellow-deep); }
:root[data-look="bauklotz"] .practice-card.yellow, :root[data-look="bauklotz"] .practice-card.yellow strong, :root[data-look="bauklotz"] .practice-card.yellow small, :root[data-look="bauklotz"] .practice-card.yellow span, :root[data-look="bauklotz"] .practice-card.yellow .practice-symbol { color: var(--bk-ink); }
:root[data-look="bauklotz"] .practice-card.lavender, :root[data-look="bauklotz"] .practice-card.blue { background: var(--bk-blue); box-shadow: 0 4px 0 var(--bk-blue-deep); }
:root[data-look="bauklotz"] .practice-card.peach, :root[data-look="bauklotz"] .practice-card.pink { background: var(--bk-red); box-shadow: 0 4px 0 var(--bk-red-deep); }
:root[data-look="bauklotz"] .practice-card.sage { background: var(--bk-green); box-shadow: 0 4px 0 var(--bk-green-deep); }

/* Lernpfad und Runden */
:root[data-look="bauklotz"] .chapter-head { background: var(--bk-green); border-radius: 16px; box-shadow: 0 4px 0 var(--bk-green-deep); }
:root[data-look="bauklotz"] .chapter-head, :root[data-look="bauklotz"] .chapter-head h3, :root[data-look="bauklotz"] .chapter-head p, :root[data-look="bauklotz"] .chapter-kicker, :root[data-look="bauklotz"] .chapter-topics { color: #fff; }
:root[data-look="bauklotz"] .path-row { border: 2px solid var(--bk-ink); border-radius: 14px; }
:root[data-look="bauklotz"] .echo-round { border: 2px solid var(--bk-ink); border-radius: 12px; color: var(--bk-ink); font-weight: 800; }
:root[data-look="bauklotz"] .echo-round.next { background: var(--bk-blue); color: #fff; box-shadow: 0 3px 0 var(--bk-blue-deep); }
:root[data-look="bauklotz"] .echo-round.next span { color: #fff; }
:root[data-look="bauklotz"] .echo-round.done { background: var(--bk-green); color: #fff; }
:root[data-look="bauklotz"] .listen-speed-option { border: 2px solid var(--bk-ink); border-radius: 10px; color: var(--bk-ink); font-weight: 800; }
:root[data-look="bauklotz"] .listen-speed-option.selected, :root[data-look="bauklotz"] .echo-mode button.selected, :root[data-look="bauklotz"] .filter-tabs button.selected { background: var(--bk-ink); color: #fff; }
:root[data-look="bauklotz"] .level-option { border: 2px solid var(--bk-ink); border-radius: 12px; color: var(--bk-ink); }
:root[data-look="bauklotz"] .level-option.selected { background: var(--bk-blue); color: #fff; border-color: var(--bk-ink); }
:root[data-look="bauklotz"] .level-option.selected b, :root[data-look="bauklotz"] .level-option.selected span { color: #fff; }
:root[data-look="bauklotz"] .language-picker { background: #fff1cc; border-color: var(--bk-ink); }
:root[data-look="bauklotz"] .language-option.selected { background: var(--bk-yellow); color: var(--bk-ink); box-shadow: 0 3px 0 var(--bk-yellow-deep); }
:root[data-look="bauklotz"] .goal-options input:checked + span { border-color: var(--bk-ink); background: var(--bk-yellow); color: var(--bk-ink); }
:root[data-look="bauklotz"] .look-option { border-color: var(--bk-ink); }
:root[data-look="bauklotz"] .look-option[aria-pressed="true"] { background: #fff1cc; border-color: var(--bk-ink); box-shadow: 0 4px 0 var(--bk-ink); }

/* Aufgaben */
:root[data-look="bauklotz"] .lesson-dialog, :root[data-look="bauklotz"] .settings-dialog { background: var(--bk-cream); color: var(--bk-ink); border: 3px solid var(--bk-ink); border-radius: 20px; }
:root[data-look="bauklotz"] .exercise-progress { background: #fff; border: 2px solid var(--bk-ink); border-radius: 8px; height: 14px; }
:root[data-look="bauklotz"] .exercise-progress > span { background: var(--bk-green); border-radius: 4px; }
:root[data-look="bauklotz"] .exercise-type { color: var(--bk-red); font-weight: 800; }
:root[data-look="bauklotz"] .answer-option, :root[data-look="bauklotz"] .word-token, :root[data-look="bauklotz"] .written-answer, :root[data-look="bauklotz"] .match-item { background: #fff; border: 2px solid var(--bk-ink); border-radius: 14px; color: var(--bk-ink); font-weight: 600; box-shadow: 0 3px 0 var(--bk-ink); }
:root[data-look="bauklotz"] .answer-option.selected, :root[data-look="bauklotz"] .word-token.selected, :root[data-look="bauklotz"] .match-item.selected, :root[data-look="bauklotz"] .match-item.picked { background: var(--bk-yellow); border-color: var(--bk-ink); box-shadow: 0 0 0 3px var(--bk-ink); }
:root[data-look="bauklotz"] .answer-option.correct, :root[data-look="bauklotz"] .written-answer.correct { background: #d9f3e3; border-color: var(--bk-green-deep); box-shadow: 0 3px 0 var(--bk-green-deep); }
:root[data-look="bauklotz"] .answer-option.incorrect, :root[data-look="bauklotz"] .written-answer.incorrect { background: #fde0e3; border-color: var(--bk-red-deep); box-shadow: 0 3px 0 var(--bk-red-deep); }
:root[data-look="bauklotz"] .feedback-correct { background: #d9f3e3; border-top: 3px solid var(--bk-green-deep); }
:root[data-look="bauklotz"] .feedback-incorrect { background: #fde0e3; border-top: 3px solid var(--bk-red-deep); }

/* Anmeldung */
:root[data-look="bauklotz"] .auth-card { background: #fff; border: 3px solid var(--bk-ink); border-radius: 20px; box-shadow: 0 6px 0 var(--bk-ink); }
:root[data-look="bauklotz"] .auth-topbar { background: #fff; border: 2px solid var(--bk-ink); color: var(--bk-ink); }

/* Seite "Mehr" */
:root[data-look="bauklotz"] .more-link { border: 2px solid var(--bk-ink); border-radius: 16px; box-shadow: 0 4px 0 var(--bk-ink); font-weight: 600; }
:root[data-look="bauklotz"] .more-link .icon:first-child { color: var(--bk-red); }
/* Suchfeld: der Rahmen sitzt am umgebenden Feld, nicht doppelt am Eingabefeld */
:root[data-look="bauklotz"] .search-field, :root[data-look="bauklotz"] .search-box { border: 2px solid var(--bk-ink); border-radius: 12px; background: #fff; }
:root[data-look="bauklotz"] .search-field input, :root[data-look="bauklotz"] .search-box input { border: 0; box-shadow: none; background: transparent; }
:root[data-look="bauklotz"] .category-tag { background: var(--bk-green); color: #fff; border-radius: 6px; font-weight: 800; }
:root[data-look="bauklotz"] .filter-tabs button { font-weight: 800; border-radius: 10px; }
@media (max-width: 1020px) {
  :root[data-look="bauklotz"] .mobile-brand .block-brand { gap: 3px; }
  :root[data-look="bauklotz"] .mobile-brand .block-brand i { width: 26px; height: 26px; font-size: 17px; border-radius: 6px; }
}

/* Netzabdeckung */
:root[data-look="bauklotz"] .navigation-extra { border-top-color: #3a4a6e; }
:root[data-look="bauklotz"] .coverage-map { border: 3px solid var(--bk-ink); border-radius: 18px; }
:root[data-look="bauklotz"] .coverage-zoom button, :root[data-look="bauklotz"] .coverage-choice button, :root[data-look="bauklotz"] .coverage-item { border: 2px solid var(--bk-ink); box-shadow: 0 3px 0 var(--bk-ink); font-weight: 800; }
:root[data-look="bauklotz"] .coverage-choice button[aria-pressed="true"] { background: var(--bk-yellow); border-color: var(--bk-ink); color: var(--bk-ink); }
:root[data-look="bauklotz"] .coverage-item.selected { background: #fff1cc; border-color: var(--bk-ink); box-shadow: 0 3px 0 var(--bk-ink); }
:root[data-look="bauklotz"] .coverage-privacy { background: #fff; border: 2px solid var(--bk-ink); border-radius: 16px; }

@media (hover: hover) {
  :root[data-look="bauklotz"] .answer-option:hover:not(:disabled), :root[data-look="bauklotz"] .word-token:hover:not(:disabled) { background: #fff1cc; border-color: var(--bk-ink); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-look="bauklotz"] .button-dark:active:not(:disabled), :root[data-look="bauklotz"] .button-outline:active:not(:disabled) { transform: none; }
}