/* ====== DARK THEME OVERRIDES ======
   These override existing light-theme styles to match the Scharade dark glassmorphism look.
   They only apply when data-theme="dark" (the default).
   In light mode, the original styles show through.
*/

/* Body */
[data-theme="dark"] body {
    background: #1a1a2e !important;
    color: #e0e0e5 !important;
}

/* Native Controls (Date-Picker, Selects, Scrollbars) im erzwungenen Dark mitdunkeln */
:root[data-theme="dark"] { color-scheme: dark; }

/* Common card-like containers - glassmorphism
   NOTE: .container is excluded because it's often a layout wrapper, not a card */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .box {
    background: rgba(17, 17, 30, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e0e0e5 !important;
}

/* Headings */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
    color: #fff !important;
}

/* Paragraphs and text */
[data-theme="dark"] p, [data-theme="dark"] .subtitle, [data-theme="dark"] .description,
[data-theme="dark"] label, [data-theme="dark"] .info, [data-theme="dark"] .meta {
    color: #99aabb !important;
}

/* Inputs, selects, textareas
   Hellerer Fill + kräftigerer Rand, damit sich Felder klar von den Karten
   abheben und besser lesbar sind. */
[data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #f0f0f5 !important;
    border-radius: 7px !important;
}
[data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    background: rgba(255,255,255,0.13) !important;
    border-color: rgba(248,72,28,0.6) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #9aa4b2 !important;
}

/* Buttons */
[data-theme="dark"] button:not(.theme-toggle):not(.theme-back-link),
[data-theme="dark"] .btn {
    border-color: rgba(255,255,255,0.1) !important;
}

/* Top bars and headers */
[data-theme="dark"] .top-bar,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .header-bar,
[data-theme="dark"] .nav {
    background: rgba(17, 17, 30, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

/* Score, stat displays */
[data-theme="dark"] .score,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .count {
    color: #fff !important;
}

/* Canvas containers */
[data-theme="dark"] canvas {
    border-color: rgba(255,255,255,0.1) !important;
}

/* Range inputs */
[data-theme="dark"] input[type="range"] {
    accent-color: #F8481C;
}

/* Specific overrides for white backgrounds */
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"] {
    background: rgba(17, 17, 30, 0.65) !important;
}

/* Links */
[data-theme="dark"] a:not(.theme-back-link) {
    color: #F8481C;
}

/* Tables */
[data-theme="dark"] table, [data-theme="dark"] th, [data-theme="dark"] td {
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] th {
    background: rgba(255,255,255,0.04) !important;
    color: #ccc !important;
}
[data-theme="dark"] td {
    color: #bbb !important;
}

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 5px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }
[data-theme="light"] ::-webkit-scrollbar { width: 10px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 5px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }

/* Code blocks */
[data-theme="dark"] code, [data-theme="dark"] pre {
    background: rgba(255,255,255,0.06) !important;
    color: #e0e0e5 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ====== GAME & TOOL SPECIFIC DARK OVERRIDES ====== */

/* --- Snake --- */
[data-theme="dark"] .overlay {
    background: rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .speed-opt {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .speed-opt:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
[data-theme="dark"] .speed-opt.active {
    border-color: rgba(34,197,94,0.5) !important;
    color: #22c55e !important;
    background: rgba(34,197,94,0.1) !important;
}
[data-theme="dark"] .btn.green {
    background: #22c55e !important;
    color: #fff !important;
}
[data-theme="dark"] .btn.outline {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .go-score {
    color: #F8481C !important;
}
[data-theme="dark"] .go-label,
[data-theme="dark"] .go-best {
    color: #999 !important;
}
[data-theme="dark"] .name-char {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
[data-theme="dark"] .highscore-section h4 {
    color: #888 !important;
}
[data-theme="dark"] .hs-row {
    color: #bbb !important;
    border-color: rgba(255,255,255,0.05) !important;
}
[data-theme="dark"] .bottom-bar {
    background: rgba(17, 17, 30, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .bar-btn {
    color: #bbb !important;
}
[data-theme="dark"] .bar-btn:hover {
    color: #F8481C !important;
}
[data-theme="dark"] .pause-overlay {
    background: rgba(0,0,0,0.6) !important;
}
[data-theme="dark"] .pause-text {
    color: #fff !important;
}
[data-theme="dark"] canvas {
    background: #2a2a3e !important;
}

/* --- Hangman --- */
[data-theme="dark"] .mode-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .mode-btn:hover {
    background: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .mode-btn.active {
    background: rgba(248,72,28,0.15) !important;
    border-color: rgba(248,72,28,0.3) !important;
    color: #F8481C !important;
}
[data-theme="dark"] .cat-btn {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #bbb !important;
}
[data-theme="dark"] .cat-btn:hover {
    background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .cat-btn.selected {
    background: rgba(248,72,28,0.15) !important;
    border-color: rgba(248,72,28,0.3) !important;
    color: #F8481C !important;
}
[data-theme="dark"] .btn-start {
    background: #F8481C !important;
    color: #fff !important;
}
[data-theme="dark"] .custom-input input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .word-display .word-letter {
    border-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
[data-theme="dark"] .keyboard .key-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #ddd !important;
}
[data-theme="dark"] .keyboard .key-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
[data-theme="dark"] .keyboard .key-btn.correct {
    background: rgba(34,197,94,0.2) !important;
    border-color: rgba(34,197,94,0.4) !important;
    color: #22c55e !important;
}
[data-theme="dark"] .keyboard .key-btn.wrong {
    background: rgba(239,68,68,0.1) !important;
    border-color: rgba(239,68,68,0.2) !important;
    color: #666 !important;
}
[data-theme="dark"] .stat {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .stat-val {
    color: #fff !important;
}
[data-theme="dark"] .stat-lbl {
    color: #888 !important;
}
[data-theme="dark"] .stats-row .stat {
    background: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .hint-text {
    color: #888 !important;
}
[data-theme="dark"] .game-status {
    color: #999 !important;
}
[data-theme="dark"] .tries-left {
    color: #F8481C !important;
}
[data-theme="dark"] .result-overlay {
    background: rgba(17, 17, 30, 0.9) !important;
}
[data-theme="dark"] .result-overlay h3 {
    color: #fff !important;
}
[data-theme="dark"] .hangman-svg line,
[data-theme="dark"] .hangman-svg circle {
    stroke: #e0e0e5 !important;
}

/* --- Montagsmaler --- */
[data-theme="dark"] .color-btn {
    border-color: rgba(255,255,255,0.2) !important;
}
[data-theme="dark"] .color-btn.active {
    border-color: #fff !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.3) !important;
}
[data-theme="dark"] .tool-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .tool-btn:hover {
    background: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .tool-btn.active {
    background: rgba(248,72,28,0.15) !important;
    border-color: rgba(248,72,28,0.3) !important;
    color: #F8481C !important;
}
[data-theme="dark"] .separator {
    background: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .peek-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .peek-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}
[data-theme="dark"] .peek-btn.active {
    background: rgba(248,72,28,0.15) !important;
    border-color: rgba(248,72,28,0.3) !important;
    color: #F8481C !important;
}
[data-theme="dark"] .category-badge {
    background: rgba(248,72,28,0.15) !important;
    color: #F8481C !important;
}
[data-theme="dark"] .word-display {
    color: #fff !important;
}
[data-theme="dark"] .mode-opt {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .mode-opt:hover {
    background: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .mode-opt.active {
    border-color: rgba(34,197,94,0.5) !important;
    color: #22c55e !important;
    background: rgba(34,197,94,0.1) !important;
}
[data-theme="dark"] .cat-opt {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #bbb !important;
}
[data-theme="dark"] .cat-opt:hover {
    background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .cat-opt.active {
    background: rgba(248,72,28,0.15) !important;
    border-color: rgba(248,72,28,0.3) !important;
    color: #F8481C !important;
}
[data-theme="dark"] .timer-opt {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .timer-opt:hover {
    background: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .timer-opt.active {
    border-color: rgba(245,158,11,0.5) !important;
    color: #f59e0b !important;
    background: rgba(245,158,11,0.1) !important;
}
[data-theme="dark"] .action-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #bbb !important;
}
[data-theme="dark"] .action-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}
[data-theme="dark"] .action-btn.green {
    border-color: rgba(34,197,94,0.3) !important;
    color: #22c55e !important;
}
[data-theme="dark"] .action-btn.red {
    border-color: rgba(239,68,68,0.3) !important;
    color: #ef4444 !important;
}
[data-theme="dark"] .stat-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .stat-card .stat-val {
    color: #fff !important;
}
[data-theme="dark"] .stat-card .stat-label {
    color: #888 !important;
}
[data-theme="dark"] .stat-row {
    border-color: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .stat-row .cat-name {
    color: #888 !important;
}
[data-theme="dark"] .stat-row .cat-val {
    color: #ddd !important;
}
[data-theme="dark"] .clear-stats {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #888 !important;
}
[data-theme="dark"] .dpad-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #bbb !important;
}
[data-theme="dark"] .dpad-btn:active {
    background: rgba(34,197,94,0.2) !important;
    color: #22c55e !important;
}
[data-theme="dark"] .page-subtitle {
    color: #888 !important;
}
[data-theme="dark"] .timer {
    color: #f59e0b !important;
}

/* --- Essensrad --- */
[data-theme="dark"] .wheel-pointer {
    color: #F8481C !important;
}
[data-theme="dark"] .spin-btn {
    background: #F8481C !important;
    color: #fff !important;
}
[data-theme="dark"] .spin-btn:hover {
    background: #d4380d !important;
}
[data-theme="dark"] .add-row input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .btn-add {
    background: #F8481C !important;
    color: #fff !important;
}
[data-theme="dark"] .option-tag {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #ddd !important;
}
[data-theme="dark"] .option-tag .remove {
    color: #888 !important;
}
[data-theme="dark"] .clear-btn {
    color: #888 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .winner-text {
    color: #fff !important;
}
[data-theme="dark"] .winner-emoji {
    color: #fff !important;
}
[data-theme="dark"] .log-btn {
    background: rgba(34,197,94,0.15) !important;
    color: #22c55e !important;
    border-color: rgba(34,197,94,0.3) !important;
}
[data-theme="dark"] .history-list {
    color: #bbb !important;
}
[data-theme="dark"] .no-options {
    color: #666 !important;
}

/* --- ASCII Generator --- */
[data-theme="dark"] .header {
    background: transparent !important;
}
[data-theme="dark"] .tabs .tab {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #bbb !important;
}
[data-theme="dark"] .tabs .tab:hover {
    background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .tabs .tab.active {
    background: rgba(248,72,28,0.15) !important;
    border-color: rgba(248,72,28,0.3) !important;
    color: #F8481C !important;
}
[data-theme="dark"] .content-card {
    background: rgba(17, 17, 30, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .info-box {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: #999 !important;
}
[data-theme="dark"] .upload-area {
    border-color: rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.03) !important;
    color: #999 !important;
}
[data-theme="dark"] .upload-area:hover {
    border-color: rgba(248,72,28,0.3) !important;
    background: rgba(248,72,28,0.03) !important;
}
[data-theme="dark"] .preview-container {
    background: #2a2a3e !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .output-area,
[data-theme="dark"] .preview-area,
[data-theme="dark"] .result-box {
    background: rgba(17, 17, 30, 0.8) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .control-group label {
    color: #999 !important;
}
/* Auf ASCII-Generator gescoped (body.ascii-page) — vorher wurde JEDER Toast
   (auch Fehler-Toasts der Portale) im Dark-Theme gruen eingefaerbt. */
[data-theme="dark"] .ascii-page .toast {
    background: #22c55e !important;
    color: #fff !important;
}
[data-theme="dark"] .tabs {
    background: rgba(17, 17, 30, 0.65) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .controls {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .control-group input,
[data-theme="dark"] .control-group select,
[data-theme="dark"] .control-group textarea {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .control-group input::placeholder,
[data-theme="dark"] .control-group textarea::placeholder {
    color: #7d8694 !important;
}
[data-theme="dark"] .btn-secondary {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .search-box {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .search-box::placeholder {
    color: #7d8694 !important;
}
[data-theme="dark"] .category-title {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #bbb !important;
}
[data-theme="dark"] .category-title:hover {
    background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .template-item {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .template-item:hover {
    border-color: rgba(248,72,28,0.3) !important;
    box-shadow: 0 2px 8px rgba(248,72,28,0.1) !important;
}
[data-theme="dark"] .template-item:active {
    background: rgba(248,72,28,0.08) !important;
}
[data-theme="dark"] .template-item pre {
    color: #999 !important;
}
[data-theme="dark"] .template-name {
    color: #F8481C !important;
}
[data-theme="dark"] .drawing-canvas {
    background: rgba(17, 17, 30, 0.8) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .output-container {
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .upload-area h3,
[data-theme="dark"] .upload-area p {
    color: #999 !important;
}

/* --- Mailto Generator --- */
[data-theme="dark"] .logo-icon {
    color: #F8481C !important;
}
[data-theme="dark"] .form-group label {
    color: #bbb !important;
}
[data-theme="dark"] .hint {
    color: #666 !important;
}
[data-theme="dark"] .result-section {
    background: rgba(17, 17, 30, 0.65) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .form-row {
    color: #e0e0e5 !important;
}

/* --- Markdown Cheatsheet --- */
[data-theme="dark"] .search-bar {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .search-bar::placeholder {
    color: #7d8694 !important;
}
[data-theme="dark"] .category-header {
    color: #999 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .snippet {
    background: rgba(17, 17, 30, 0.65) !important;
    border-color: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
[data-theme="dark"] .snippet:hover {
    border-color: rgba(248,72,28,0.3) !important;
}
[data-theme="dark"] .snippet-header {
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .snippet-title {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .snippet-desc {
    color: #666 !important;
}
[data-theme="dark"] .snippet-body {
    border-top-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .snippet-code {
    background: #1a1a2e !important;
    border-right-color: rgba(255,255,255,0.08) !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .snippet-preview {
    background: rgba(255,255,255,0.03) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .snippet-preview code {
    background: rgba(248,72,28,0.12) !important;
    color: #F8481C !important;
}
[data-theme="dark"] .snippet-preview pre {
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .snippet-preview blockquote {
    color: #999 !important;
}
[data-theme="dark"] .snippet-preview th {
    background: rgba(255,255,255,0.06) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .snippet-preview th,
[data-theme="dark"] .snippet-preview td {
    border-color: rgba(255,255,255,0.1) !important;
    color: #ccc !important;
}
[data-theme="dark"] .snippet-preview hr {
    border-top-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .snippet-preview a {
    color: #F8481C !important;
}
[data-theme="dark"] .snippet-preview h1,
[data-theme="dark"] .snippet-preview h2,
[data-theme="dark"] .snippet-preview h3,
[data-theme="dark"] .snippet-preview h4,
[data-theme="dark"] .snippet-preview h5 {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .snippet-preview h6 {
    color: #888 !important;
}
[data-theme="dark"] .snippet-preview del {
    color: #666 !important;
}
[data-theme="dark"] .snippet-preview .highlight {
    background: rgba(254,240,138,0.15) !important;
    color: #fef08a !important;
}

/* --- PDF Layout Editor --- */
[data-theme="dark"] header {
    background: #1a1a2e !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] header h1 {
    color: #fff !important;
}
[data-theme="dark"] header a {
    color: rgba(255,255,255,0.6) !important;
}
[data-theme="dark"] header a:hover {
    color: #fff !important;
}
[data-theme="dark"] .header-actions button {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .header-actions button:hover {
    background: rgba(255,255,255,0.15) !important;
}
[data-theme="dark"] .header-actions button.accent {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .header-actions select {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .panel-left,
[data-theme="dark"] .panel-right {
    background: rgba(17, 17, 30, 0.95) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .panel-header {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #bbb !important;
}
[data-theme="dark"] .canvas-area {
    background: #2a2a3e !important;
}
[data-theme="dark"] .canvas-toolbar-wrap {
    background: #2a2a3e !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .canvas-toolbar button {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .canvas-toolbar button:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .canvas-toolbar button.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
[data-theme="dark"] .canvas-toolbar button.semi-active {
    background: #555 !important;
    color: #fff !important;
}
[data-theme="dark"] .canvas-toolbar select {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] #zoomDisplay {
    color: #bbb !important;
}
[data-theme="dark"] .page-nav {
    color: #888 !important;
}
[data-theme="dark"] .page-nav button {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .section-title {
    color: #888 !important;
}
[data-theme="dark"] .global-settings {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .global-settings h4 {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .prop-group label {
    color: #999 !important;
}
[data-theme="dark"] .prop-group input,
[data-theme="dark"] .prop-group select,
[data-theme="dark"] .prop-group textarea {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .prop-divider {
    border-top-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .field-chip {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .field-chip:hover {
    background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .import-area {
    border-color: rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.03) !important;
}
[data-theme="dark"] .import-area:hover {
    border-color: rgba(248,72,28,0.3) !important;
    background: rgba(248,72,28,0.03) !important;
}
[data-theme="dark"] .import-area p {
    color: #888 !important;
}
[data-theme="dark"] .import-info {
    background: rgba(255,255,255,0.04) !important;
    color: #999 !important;
}
[data-theme="dark"] .bg-area {
    border-color: rgba(255,255,255,0.1) !important;
    color: #888 !important;
}
[data-theme="dark"] .bg-area:hover {
    border-color: rgba(41,128,185,0.3) !important;
    background: rgba(41,128,185,0.03) !important;
}
[data-theme="dark"] #noSelection {
    color: #666 !important;
}
[data-theme="dark"] .modal {
    background: #1a1a2e !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .modal h3 {
    color: #fff !important;
}
[data-theme="dark"] .modal-actions button {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .modal-actions button.primary {
    background: var(--primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .deckblatt-field-row {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .deckblatt-field-row .db-top-row input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .deckblatt-field-row textarea {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .add-deckblatt-btn {
    border-color: rgba(255,255,255,0.1) !important;
    color: #888 !important;
}
[data-theme="dark"] .add-deckblatt-btn:hover {
    border-color: rgba(248,72,28,0.3) !important;
    color: #F8481C !important;
}
[data-theme="dark"] .preset-btn {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .preset-btn:hover {
    border-color: rgba(248,72,28,0.3) !important;
}
[data-theme="dark"] .preset-btn .preset-desc {
    color: #888 !important;
}
[data-theme="dark"] .field-tpl-item {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .field-tpl-item .tpl-name {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .field-tpl-item .tpl-kind {
    background: rgba(255,255,255,0.08) !important;
    color: #888 !important;
}
[data-theme="dark"] .saved-formula-item {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .field-picker-dropdown {
    background: #1a1a2e !important;
    border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .field-picker-search {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .field-picker-item {
    color: #bbb !important;
}
[data-theme="dark"] .field-picker-item:hover,
[data-theme="dark"] .field-picker-item.fp-highlight {
    background: var(--primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .fp-section {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #888 !important;
}
[data-theme="dark"] .info-popup {
    background: #1a1a2e !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .info-popup-header {
    background: #1a1a2e !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .info-popup-header h2 {
    color: #fff !important;
}
[data-theme="dark"] .info-popup-close {
    color: #888 !important;
}
[data-theme="dark"] .info-popup-close:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .info-section p,
[data-theme="dark"] .info-section li {
    color: #ccc !important;
}
[data-theme="dark"] .info-section kbd {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .drop-zone {
    border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .drop-zone span {
    color: #888 !important;
}
[data-theme="dark"] .sticky-special {
    background: rgba(17, 17, 30, 0.95) !important;
}
[data-theme="dark"] #password-overlay {
    background: #1a1a2e !important;
}
[data-theme="dark"] #password-overlay > div {
    color: #e0e0e5 !important;
}
[data-theme="dark"] #password-overlay input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .bg-opacity-row label,
[data-theme="dark"] .bg-opacity-row span {
    color: #888 !important;
}
[data-theme="dark"] .logo-presets button {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #bbb !important;
}
[data-theme="dark"] .preview-frame {
    background: #1a1a2e !important;
}
[data-theme="dark"] .preview-frame .preview-header {
    border-color: rgba(255,255,255,0.08) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .preview-frame .preview-header h3 {
    color: #fff !important;
}
[data-theme="dark"] .preview-frame .preview-header button {
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}

/* --- QR Code Generator --- */
[data-theme="dark"] .header {
    background: transparent !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .header h1 {
    color: #fff !important;
}
[data-theme="dark"] .header-badge {
    background: #F8481C !important;
    color: #fff !important;
}
[data-theme="dark"] .onboarding {
    background: rgba(17, 17, 30, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .onboarding h2 {
    color: #F8481C !important;
}
[data-theme="dark"] .step-content p {
    color: #888 !important;
}
[data-theme="dark"] .panel {
    background: rgba(17, 17, 30, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .panel-header {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .panel-header h3 {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .panel-body {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .links-editor {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .links-editor > div {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .links-editor:empty::before {
    color: #7d8694 !important;
}
[data-theme="dark"] .template-info {
    background: rgba(255,255,255,0.04) !important;
    color: #bbb !important;
}
[data-theme="dark"] .template-info strong {
    color: #F8481C !important;
}
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"] {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .btn-secondary {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}
[data-theme="dark"] .advanced-toggle {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #999 !important;
}
[data-theme="dark"] .advanced-toggle:hover {
    color: #F8481C !important;
    border-color: #F8481C !important;
}
[data-theme="dark"] #qr-preview {
    background: rgba(255,255,255,0.03) !important;
}
[data-theme="dark"] .qr-item {
    background: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .qr-item .qr-label {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .qr-item .qr-url {
    color: #888 !important;
}
[data-theme="dark"] .empty-state {
    color: #666 !important;
}
[data-theme="dark"] .zoom-controls {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .zoom-level {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .print-preview-container {
    background: rgba(17, 17, 30, 0.5) !important;
}
[data-theme="dark"] .toggle-onboarding {
    color: #F8481C !important;
}
[data-theme="dark"] .notification {
    background: #F8481C !important;
}
[data-theme="dark"] .preview-count {
    background: #F8481C !important;
    color: #fff !important;
}

/* --- Pendlerblick pages (support/privacy/status) --- */
[data-theme="dark"] .contact-box {
    background: rgba(17, 17, 30, 0.65) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .faq-item h3 {
    color: #ddd !important;
}
[data-theme="dark"] .faq-item p {
    color: #999 !important;
}
[data-theme="dark"] .status-box {
    background: rgba(17, 17, 30, 0.65) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}
[data-theme="dark"] .footer {
    border-top-color: rgba(255,255,255,0.06) !important;
    color: #666 !important;
}
/* Status page specific */
[data-theme="dark"] .overall-banner {
    background: rgba(17, 17, 30, 0.65) !important;
    border-color: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
[data-theme="dark"] .overall-text h2 {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .overall-text p {
    color: #888 !important;
}
[data-theme="dark"] .endpoint {
    background: rgba(17, 17, 30, 0.65) !important;
    border-color: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
[data-theme="dark"] .endpoint.ok {
    border-color: rgba(34,197,94,0.3) !important;
}
[data-theme="dark"] .endpoint.warn {
    border-color: rgba(245,158,11,0.3) !important;
}
[data-theme="dark"] .endpoint.fail {
    border-color: rgba(239,68,68,0.3) !important;
}
[data-theme="dark"] .ep-name {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .ep-detail {
    color: #888 !important;
}
[data-theme="dark"] .ep-detail span {
    color: #bbb !important;
}
[data-theme="dark"] .history-tick.empty {
    background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .history-label span {
    color: #7d8694 !important;
}
[data-theme="dark"] .history-section {
    background: rgba(17, 17, 30, 0.65) !important;
    border-color: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
[data-theme="dark"] .history-section h3 {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .stat-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .stat-card .stat-val {
    color: #e0e0e5 !important;
}
[data-theme="dark"] .stat-card .stat-label {
    color: #888 !important;
}
[data-theme="dark"] .clear-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #888 !important;
}
[data-theme="dark"] .clear-btn:hover {
    background: rgba(239,68,68,0.15) !important;
    color: #ef4444 !important;
    border-color: rgba(239,68,68,0.3) !important;
}
[data-theme="dark"] .log-entry {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .log-time {
    color: #666 !important;
}
[data-theme="dark"] .log-result {
    color: #bbb !important;
}
[data-theme="dark"] .log-empty {
    color: #666 !important;
}
/* Auf Pendlerblick-Seiten gescoped (body.pendlerblick-page) — die generischen
   .btn-Regeln haben vorher in beide Portale geleakt (graue Primaer-Buttons im Dark-Theme). */
[data-theme="dark"] .pendlerblick-page .btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #bbb !important;
}
[data-theme="dark"] .pendlerblick-page .btn:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #e0e0e5 !important;
}
[data-theme="dark"] .pendlerblick-page .btn.primary {
    background: rgba(34,197,94,0.15) !important;
    border-color: rgba(34,197,94,0.4) !important;
    color: #22c55e !important;
}
[data-theme="dark"] .pendlerblick-page .btn.primary:hover {
    background: rgba(34,197,94,0.25) !important;
}
[data-theme="dark"] .pendlerblick-page .subtitle {
    color: #888 !important;
}

/* --- Speed badge (Snake) --- */
[data-theme="dark"] .speed-badge {
    background: rgba(248,72,28,0.15) !important;
    color: #F8481C !important;
}

/* ====== LIGHT MODE OVERRIDES FOR NATIVELY-DARK PAGES ====== */

[data-theme="light"] .bg-glow .orb {
    opacity: 0.12 !important;
}

/* Main page - light mode */
[data-theme="light"] body {
    background: #f5f5fa !important;
}
[data-theme="light"] .bg-glow .orb {
    opacity: 0.12 !important;
}
/* Title gradient - dark mode */
[data-theme="dark"] .header h1,
[data-theme="dark"] .setup-title {
    background: linear-gradient(135deg, #fff 0%, #F8481C 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}
[data-theme="dark"] .header p,
[data-theme="dark"] .setup-subtitle {
    color: #9a9ab0 !important;
}

/* Title gradient - light mode */
[data-theme="light"] .header h1,
[data-theme="light"] .setup-title {
    background: linear-gradient(135deg, #222 0%, #F8481C 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
[data-theme="light"] .header p,
[data-theme="light"] .setup-subtitle {
    color: #777 !important;
}
[data-theme="light"] .featured {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .project-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .project-card:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0,0,0,0.15) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .project-card h3 { color: #222 !important; }
[data-theme="light"] .project-card p { color: #555 !important; }
[data-theme="light"] .app-info h2 { color: #222 !important; }
[data-theme="light"] .app-info p { color: #444 !important; }
[data-theme="light"] .app-info .badge {
    background: rgba(248,72,28,0.12) !important;
    color: #F8481C !important;
}
[data-theme="light"] .section-title {
    color: rgba(0,0,0,0.35) !important;
    letter-spacing: 0.08em !important;
}
[data-theme="light"] .intern-section .section-title {
    color: rgba(0,0,0,0.25) !important;
}
[data-theme="light"] .footer {
    color: rgba(0,0,0,0.4) !important;
    border-top-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .footer a { color: rgba(0,0,0,0.6) !important; }
[data-theme="light"] .app-links a {
    border: 1px solid rgba(0,0,0,0.2) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .app-links a.secondary {
    color: #F8481C !important;
    border-color: rgba(248,72,28,0.3) !important;
    background: transparent !important;
}
[data-theme="light"] .app-links a.primary {
    box-shadow: 0 2px 12px rgba(248,72,28,0.2) !important;
}

/* Scharade - light mode */
[data-theme="light"] .setup-section,
[data-theme="light"] .settings-bar {
    background: rgba(255,255,255,0.75) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .setup-section h3 { color: #666 !important; }
[data-theme="light"] .team-input,
[data-theme="light"] .setting select,
[data-theme="light"] .setting input {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #333 !important;
}
[data-theme="light"] .cat-btn {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #555 !important;
}
[data-theme="light"] .cat-btn.selected {
    background: rgba(248,72,28,0.1) !important;
    border-color: rgba(248,72,28,0.3) !important;
    color: #F8481C !important;
}
[data-theme="light"] .score-card {
    background: rgba(255,255,255,0.75) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .word-display {
    background: rgba(255,255,255,0.8) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .word-text { color: #222 !important; }
[data-theme="light"] .word-category { color: #888 !important; }
[data-theme="light"] .round-info { color: #888 !important; }
[data-theme="light"] .turn-message { color: #666 !important; }

/* Bild-Konverter - light mode */
[data-theme="light"] .drop-zone {
    background: rgba(255,255,255,0.7) !important;
    border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .drop-zone h2 { color: #333 !important; }
[data-theme="light"] .drop-zone p { color: #666 !important; }
[data-theme="light"] .status-bar {
    background: rgba(255,255,255,0.75) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .file-item {
    background: rgba(255,255,255,0.7) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .file-name { color: #222 !important; }
[data-theme="light"] .info-section {
    background: rgba(255,255,255,0.6) !important;
    border-color: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .info-tag {
    background: rgba(0,0,0,0.03) !important;
    color: #555 !important;
}
[data-theme="light"] .info-tag strong { color: #333 !important; }


/* ============================================================
   ====== APPLE THEME (getdesign · apple) ======
   Nur aktiv bei data-theme="apple" (zentraler Schalter via theme.js).
   Light = Standard, Dark folgt dem System (prefers-color-scheme).
   Spiegelt die Selektoren der Dark-Overrides für gleiche Abdeckung;
   Mainpage-Feinheiten am Ende.
   ============================================================ */

/* --- Tokens (höhere Spezifität als theme.js :root, gewinnt sicher) --- */
:root[data-theme^="apple"] {
    --bg-primary:     #f5f5f7;
    --bg-secondary:   #ffffff;
    --bg-card:        #ffffff;
    --text-primary:   #1d1d1f;
    --text-secondary: #6e6e73;
    --text-muted:     #86868b;
    --border-color:   #d2d2d7;
    --border-hover:   #c7c7cc;
    --accent:         #F8481C;
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="apple"] {
        /* Nicht mehr reines Schwarz: leicht angehoben, damit Karten & Felder
           Tiefe bekommen und die Seite nicht mehr "zu dunkel" wirkt. */
        --bg-primary:     #0a0a0c;
        /* Eingabefelder bewusst heller als die Karten (--bg-card),
           damit sie sich klar abheben und lesbar sind. */
        --bg-secondary:   #2c2c2e;
        --bg-card:        #1c1c1e;
        --text-primary:   #f5f5f7;
        --text-secondary: #aeaeb2;
        --text-muted:     #98989d;
        /* Deutlich sichtbarere Ränder für Felder & Karten. */
        --border-color:   #3a3a3c;
        --border-hover:   #545456;
        --accent:         #ff6a3d;
    }
}
/* Erzwungener Dunkelmodus (apple-dark), Twin des vorherigen Media-Blocks */
:root[data-theme="apple-dark"] {
    /* Nicht mehr reines Schwarz: leicht angehoben, damit Karten & Felder
       Tiefe bekommen und die Seite nicht mehr "zu dunkel" wirkt. */
    --bg-primary:     #0a0a0c;
    /* Eingabefelder bewusst heller als die Karten (--bg-card),
       damit sie sich klar abheben und lesbar sind. */
    --bg-secondary:   #2c2c2e;
    --bg-card:        #1c1c1e;
    --text-primary:   #f5f5f7;
    --text-secondary: #aeaeb2;
    --text-muted:     #98989d;
    /* Deutlich sichtbarere Ränder für Felder & Karten. */
    --border-color:   #3a3a3c;
    --border-hover:   #545456;
    --accent:         #ff6a3d;
}

/* --- Basis --- */
[data-theme^="apple"] body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
/* Apple = ruhig: keine Glow-Orbs */
[data-theme^="apple"] .bg-glow { display: none !important; }

[data-theme^="apple"] h1,
[data-theme^="apple"] h2,
[data-theme^="apple"] h3 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
}
[data-theme^="apple"] p,
[data-theme^="apple"] .subtitle,
[data-theme^="apple"] .description,
[data-theme^="apple"] label,
[data-theme^="apple"] .info,
[data-theme^="apple"] .meta { color: var(--text-secondary) !important; }
[data-theme^="apple"] a { color: var(--accent); }

/* --- Karten / Container --- */
[data-theme^="apple"] .card,
[data-theme^="apple"] .panel,
[data-theme^="apple"] .box,
[data-theme^="apple"] .content-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    color: var(--text-primary) !important;
}

/* --- Eingabefelder --- */
[data-theme^="apple"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-theme^="apple"] select,
[data-theme^="apple"] textarea {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 7px !important;
}
[data-theme^="apple"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
[data-theme^="apple"] select:focus,
[data-theme^="apple"] textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(255,106,61,0.25) !important;
}
[data-theme^="apple"] input::placeholder,
[data-theme^="apple"] textarea::placeholder { color: var(--text-muted) !important; }

/* --- Buttons als Pills: nur .btn-Klassen; generische <button> (Tool-Buttons,
   Kacheln etc.) behalten ihre eigene Form, sonst werden sie ungewollt zu Pillen --- */
[data-theme^="apple"] .btn {
    border-radius: 980px !important;
    font-weight: 400 !important;
}
[data-theme^="apple"] .btn-primary,
[data-theme^="apple"] button.primary,
[data-theme^="apple"] .btn.primary,
[data-theme^="apple"] .btn-accent {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
}

/* === Einheitlicher Tool-Kopf (Apple) ===
   Linksbündig, konsistente Typografie + Abstände unter der Nav. Horizontales Padding
   bleibt pro Tool erhalten, damit der Titel mit dem jeweiligen Content fluchtet.
   (.topbar-Tools + struktur­lose Köpfe werden separat angepasst.) */
/* body:not(.mainpage) → die Mainpage behält ihren eigenen zentrierten Hero. */
[data-theme^="apple"] body:not(.mainpage) .header,
[data-theme^="apple"] body:not(.mainpage) .page-header,
[data-theme^="apple"] body:not(.mainpage) .header-row {
    text-align: left;
    padding-top: 22px;
    padding-bottom: 14px;
}
[data-theme^="apple"] body:not(.mainpage) .header h1,
[data-theme^="apple"] body:not(.mainpage) .page-header h1,
[data-theme^="apple"] body:not(.mainpage) .header-row h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
    text-align: left;
    line-height: 1.2;
}
[data-theme^="apple"] body:not(.mainpage) .header p,
[data-theme^="apple"] body:not(.mainpage) .header .sub,
[data-theme^="apple"] body:not(.mainpage) .header .subtitle,
[data-theme^="apple"] body:not(.mainpage) .page-header p,
[data-theme^="apple"] body:not(.mainpage) .page-header .subtitle,
[data-theme^="apple"] body:not(.mainpage) .header-row .sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    opacity: 1;
    margin: 6px 0 0;
    text-align: left;
}
/* .topbar-Tools (bewohner-zugaenge, pruefplan-importer, phoneapp-uploader): das
   zentrierte Flex-Layout linksbündig ausrichten + gleiche Titel-Typografie. */
[data-theme^="apple"] body:not(.mainpage) .topbar { justify-content: flex-start; text-align: left; }
[data-theme^="apple"] body:not(.mainpage) .topbar h1 {
    font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--text-primary); margin: 0; line-height: 1.2;
}
[data-theme^="apple"] body:not(.mainpage) .topbar .sub,
[data-theme^="apple"] body:not(.mainpage) .topbar p {
    font-size: 0.9rem; color: var(--text-secondary); opacity: 1; margin: 2px 0 0;
}

/* --- Top-Bar --- */
[data-theme^="apple"] .top-bar {
    background: rgba(245,245,247,0.72) !important;
    border-color: var(--border-color) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

/* --- Theme-Chrome an Apple anpassen (Pills) --- */
[data-theme^="apple"] .theme-toggle,
[data-theme^="apple"] .theme-back-link {
    border-radius: 980px !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

/* ============================================================
   ====== Mainpage (tools.realview.ch) im Apple-Look ======
   ============================================================ */
[data-theme^="apple"] .mainpage .header h1 {
    background: none !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}
[data-theme^="apple"] .featured,
[data-theme^="apple"] .project-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
[data-theme^="apple"] .featured:hover,
[data-theme^="apple"] .project-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    border-color: var(--border-hover) !important;
}
[data-theme^="apple"] .app-icon {
    overflow: visible !important;
    background: transparent !important;
}
[data-theme^="apple"] .app-icon img { box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; }
[data-theme^="apple"] .app-info .badge {
    background: rgba(248,72,28,0.10) !important;
    color: var(--accent) !important;
}
[data-theme^="apple"] .app-links a {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 980px !important;
    box-shadow: none !important;
}
[data-theme^="apple"] .app-links a.secondary {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--border-color) !important;
}
/* API-Status-Link behält sein semantisches Grün */
[data-theme^="apple"] .app-links a[href*="status"] {
    color: #1d8a3e !important;
    border-color: rgba(34,197,94,0.35) !important;
}
@media (prefers-color-scheme: dark) {
    [data-theme="apple"] .app-links a[href*="status"] { color: #30d158 !important; border-color: rgba(48,209,88,0.4) !important; }
}
/* Erzwungener Dunkelmodus (apple-dark), Twin des vorherigen Media-Blocks */
[data-theme="apple-dark"] .app-links a[href*="status"] { color: #30d158 !important; border-color: rgba(48,209,88,0.4) !important; }
[data-theme^="apple"] .section-title { color: var(--text-secondary) !important; }
/* Site-Nav: Markup + CSS kommen komplett aus /shared/theme.js (selbststaendige
   Komponente auf jeder Seite, Opt-out via <body data-no-site-nav>). Die frueheren
   .site-nav/.nav-*-Regeln wurden dorthin verschoben. */

/* ====== Apple-Element-Feinschliff (Mainpage) ====== */
/* Hero: groß & tight — NUR Mainpage (.header ist eine geteilte Klasse, sonst leakt
   die Hero-Größe via !important in alle Tool-Köpfe) */
[data-theme^="apple"] .mainpage .header h1 {
    font-size: clamp(44px, 8vw, 72px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.05 !important;
}
[data-theme^="apple"] .mainpage .header p {
    font-size: clamp(19px, 3vw, 23px) !important;
    color: var(--text-secondary) !important;
}
/* Badge → Apple-Eyebrow: farbiger Uppercase-Text, keine Pille */
[data-theme^="apple"] .app-info .badge {
    background: transparent !important;
    color: var(--accent) !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
}
/* App-Name groß, tight */
[data-theme^="apple"] .app-info h2 {
    font-size: clamp(26px, 4vw, 32px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
[data-theme^="apple"] .app-info p { font-size: 17px !important; line-height: 1.5 !important; }
/* Aktionen: Primär = Pille, Sekundär = Chevron-Link (kein Rahmen) */
[data-theme^="apple"] .app-links { gap: 12px 22px !important; align-items: center !important; }
[data-theme^="apple"] .app-links a:not(.secondary) { padding: 10px 20px !important; font-weight: 400 !important; }
[data-theme^="apple"] .app-links a.secondary {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
    font-weight: 400 !important;
}
[data-theme^="apple"] .app-links a.secondary::after { content: " \203A"; font-weight: 400; }
[data-theme^="apple"] .app-links a.secondary:hover { text-decoration: underline !important; transform: none !important; box-shadow: none !important; }
/* Projekt-Kacheln: mehr Luft, klarere Typo */
[data-theme^="apple"] .project-card { padding: 26px !important; }
[data-theme^="apple"] .project-card .icon { font-size: 34px !important; }
[data-theme^="apple"] .project-card h3 { font-size: 19px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
[data-theme^="apple"] .project-card p { font-size: 15px !important; }
/* Section-Titel: Apple-Stil (sentence case, größer, ink) */
[data-theme^="apple"] .section-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary) !important;
}
/* Apple-Dark-Nav-Hintergrund: siehe theme.js (navCSS) */

/* Im System-Dark: dunkle App-Icon-Variante zeigen (wie Standard-Dark) */
@media (prefers-color-scheme: dark) {
    [data-theme="apple"] .app-icon .icon-light { display: none !important; }
    [data-theme="apple"] .app-icon .icon-dark  { display: block !important; }
}
/* Erzwungener Dunkelmodus (apple-dark), Twin des vorherigen Media-Blocks */
[data-theme="apple-dark"] .app-icon .icon-light { display: none !important; }
[data-theme="apple-dark"] .app-icon .icon-dark  { display: block !important; }