/* === styles from 200.html === */
:root{
    --bg:#F3F5F9; --text:#0B1220; --muted:#4B5563; --primary:#2563EB; --primary-dark:#1D4ED8;
    --yellow:#FDE68A; --lightblue:#93C5FD; --lightbrown:#D6B48C;
    --physik:#374151; --erdkunde:#34D399; --sowi:#8B5CF6;
    --card:#FFFFFF; --border:#E2E8F0; --shadow:0 8px 30px rgba(2,6,23,.08);
    --radius:16px; --maxw:1100px;
    --status-green:#10B981; --status-yellow:#F59E0B; --status-red:#EF4444;
    --link:#2563EB; --link-strong:#1E40AF;
  }
  html[data-theme="dark"]{
    --bg:#0B0E14; --text:#E6E6EB; --muted:#B1B6C2; --primary:#5B8CFF; --primary-dark:#3D6BFF;
    --yellow:#F1D37E; --lightblue:#87B6FF; --lightbrown:#C1A074; --physik:#9CA3AF; --erdkunde:#34D399; --sowi:#A78BFA;
    --card:#10141E; --border:#1E2636; --shadow:0 10px 30px rgba(0,0,0,.35); --link:#8AB3FF; --link-strong:#BFD1FF;
  }
  *{ box-sizing:border-box } 
  body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial; background:var(--bg); color:var(--text); line-height:1.5 }
  a{ color:inherit; text-decoration:none }
  .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px }

  header{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.2) blur(6px); background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] header{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; height:60px }
  .brand a{ font-weight:700; letter-spacing:.2px; white-space:nowrap }
  .right{ display:flex; align-items:center; gap:16px }
  .topnav{ display:flex; align-items:center; gap:14px }
  .topnav a{ position:relative; padding:2px 4px; font-weight:600 }
  .topnav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transform:scaleX(0); transform-origin:left; transition:transform .25s ease, background .25s ease }
  .topnav a.active::after{ background:var(--primary); transform:scaleX(1) }

  .actions{ display:flex; align-items:center; gap:10px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  .menu-dots{ font-size:20px; line-height:1 }
  .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); min-width:300px; display:none; overflow:hidden; z-index:70 }
  .dropdown.open{ display:block }
  .dropdown .row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px dashed var(--border) }
  .dropdown .row:last-child{ border-bottom:none }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer }
  .btn.primary{ border-color:#93C5FD; background:#EFF6FF; color:#1E3A8A; font-weight:700 }

  .switch{ position:relative; width:52px; height:28px; background:#E5E7EB; border:1px solid var(--border); border-radius:999px; cursor:pointer }
  .switch .knob{ position:absolute; top:2px; left:2px; width:24px; height:24px; background:#fff; border-radius:50%; box-shadow:var(--shadow); transition:left .2s ease }
  .switch.on{ background:#C7D2FE } .switch.on .knob{ left:26px }

  .hero{ padding:36px 0 24px; text-align:center }
  .hero h1{ margin:0 0 6px 0; font-size:clamp(1.9rem,4.2vw,2.6rem) }
  .hero p{ margin:0; color:var(--muted) }

  .search-wrap{ display:flex; justify-content:center; margin-top:12px }
  .search{ width:min(680px,92vw); display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow) }
  .search input{ width:100%; border:none; outline:none; background:transparent; color:var(--text); font-size:1rem }
  .search .hint{ color:var(--muted); font-size:.9rem }

  .section{ padding:22px 0 }
  .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
  .card{ position:relative; grid-column:span 12; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:18px; min-height:180px; display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden }
  .card::before{ content:""; position:absolute; left:0; top:0; right:0; height:6px; background:var(--yellow); border-top-left-radius:16px; border-top-right-radius:16px }
  .card--blue::before{ background:var(--lightblue) } .card--brown::before{ background:var(--lightbrown) }
  .card--physik::before{ background:var(--physik) } .card--erdkunde::before{ background:var(--erdkunde) } .card--sowi::before{ background:var(--sowi) } .card--philosophie::before{ background:var(--yellow) } .card--geschichte::before{ background:var(--lightbrown) }
  .card h3{ margin:0; font-size:1.12rem } .card p{ margin:0; color:var(--muted) }
  .project-note{ font-size:.9rem; color:#6B7280 }
  @media (min-width:680px){ .card{ grid-column:span 6 } }

  .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
  .tag{ font-size:.8rem; border-radius:999px; padding:2px 8px; border:1px solid var(--border) }
  .tag.philosophie{ background:var(--yellow) } .tag.kunst{ background:var(--lightblue) } .tag.geschichte{ background:var(--lightbrown) }
  .tag.physik{ background:var(--physik); color:#fff } .tag.erdkunde{ background:var(--erdkunde) } .tag.sowi{ background:var(--sowi); color:#fff }

  .status{ position:absolute; right:12px; bottom:12px; font-size:.78rem; font-weight:700; color:#fff; padding:4px 8px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15) }
  .status.green{ background:var(--status-green) } .status.yellow{ background:var(--status-yellow) } .status.red{ background:var(--status-red) }

  .ghost{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:#EFF6FF; color:#1E3A8A; border:1px solid #DBEAFE; font-weight:600; transition:background-color .2s ease, transform .15s ease }
  .ghost:hover{ background:#DBEAFE; transform:translateY(-1px) }

  .info,.improvements{ background:#F9FAFB; border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:16px; box-shadow:var(--shadow); padding:clamp(18px,3vw,24px); margin-top:18px }
  html[data-theme="dark"] .info,html[data-theme="dark"] .improvements{ background:#0F141E }
  .info h3,.improvements h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .info a.link{ color:var(--link); font-weight:600 } .info a.link:hover{ text-decoration:underline } .info a.mail{ color:var(--link-strong); font-weight:700 }

  .faq{ margin-top:18px } .faq h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .faq-item{ background:#FFF; border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0; box-shadow:var(--shadow) }
  html[data-theme="dark"] .faq-item{ background:#0F141E }
  .kw-philosophie{ color:#8a6c00 } .kw-kunst{ color:#1E40AF } .kw-geschichte{ color:#5B3A1E }

  footer{ position:relative; padding:48px 0 56px; color:var(--muted); border-top:1px solid var(--border); margin-top:20px }
  .footer-inner{ position:relative; text-align:center }
  .cta-button{ display:inline-block; padding:12px 18px; border-radius:999px; border:2px solid #93C5FD; background:#EFF6FF; font-weight:800; box-shadow:0 8px 24px rgba(147,197,253,.35); color:#6D28D9 }
  .cta-button:hover{ transform:translateY(-1px) }
  .footer-meta{ margin-top:10px }
  .qr-in-footer{ position:absolute; left:20px; bottom:-22px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px }
  .qr-in-footer img{ display:block; width:120px; height:auto }
  .share-label{ font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px }
  .share-label svg{ width:20px; height:20px }

  /* v2.21 to-top blue */
.to-top{ position:fixed; right:18px; bottom:18px; display:none; width:46px; height:46px; border-radius:999px; border:2px solid #fff; background:transparent; box-shadow:0 10px 24px rgba(2,6,23,.25);  align-items:center; justify-content:center; transition:transform .15s ease, box-shadow .2s ease }
.to-top:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,6,23,.35) }
.to-top svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2 }
  .to-top.show{ display:flex } .feedback-btn{ position:fixed; right:68px; bottom:18px; display:none; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid #DBEAFE; background:#EFF6FF; box-shadow:var(--shadow); font-weight:700; color:#1E3A8A; z-index:65 }
  .feedback-btn.show{ display:inline-flex } .feedback-btn:hover{ transform:translateY(-2px); border-color:#93C5FD }

  @media (max-width:640px){ .qr-in-footer{ display:none } }

  /* Subject nav (PP) */
  .subject-nav{ position:sticky; top:60px; z-index:50; background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] .subject-nav{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .subject-inner{ display:flex; gap:10px; overflow:auto; padding:10px 20px }
  .chip{ white-space:nowrap; padding:8px 14px; border-radius:999px; border:1px solid var(--border); display:inline-flex; align-items:center; gap:8px; box-shadow:0 1px 0 rgba(0,0,0,.03) }
  .chip .tag{ margin:0 }
  .chip.active{ outline:2px solid #93C5FD }

  .subject{ scroll-margin-top:96px; padding-top:14px }
  .subject h2{ margin:0 0 4px 0; font-size:1.3rem }
  .subject .sub{ color:var(--muted); margin:0 0 10px 0 }

  
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }
  .menu-btn:hover{ box-shadow:0 8px 18px rgba(2,6,23,.12) }

  /* Settings overlay */
  .overlay-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(2px); display:none; z-index:90 }
  .modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px,94vw); max-height:80vh; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); display:none; z-index:91 }
  .modal-header{ padding:18px 18px 8px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
  .modal-body{ padding:14px 18px }
  .btn.linklike{ background:transparent; border:none; color:var(--link); font-weight:700; cursor:pointer }
  .row-setting{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border) }
  .row-setting:last-child{ border-bottom:none }
  .icon-toggle{ display:flex; gap:8px }
  .icon-btn{ width:40px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--card); border-radius:10px; cursor:pointer }
  .icon-btn.active{ background:#EFF6FF; border-color:#93C5FD }
  .icon-btn svg{ width:18px; height:18px; stroke:currentColor }
  /* Add-website: 3 cards in row, plain + soft */
  .card--plain::before{ display:none }
  .card--soft{ box-shadow:0 10px 30px rgba(147,197,253,.28) }
  .grid.three .card{ grid-column:span 12 }
  @media (min-width:680px){ .grid.three .card{ grid-column:span 6 } }
  @media (min-width:980px){ .grid.three .card{ grid-column:span 4 } }
html[data-theme="dark"] .to-top{ background:rgba(255,255,255,.18); box-shadow:0 10px 24px rgba(0,0,0,.45) }
/* v2.20 legend spacing */
.modal .legend-tags, .modal .legend-status{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.modal .legend-status .status{ margin-right:0 } /* gap handles spacing */
/* v2.21 legend list */
.modal .legend-list{ list-style:none; padding:0; margin:10px 0 0 0 }
.modal .legend-list li{ display:flex; align-items:center; gap:10px; margin:6px 0 }
.modal .legend-list .status{ flex:0 0 auto }
/* v2.23 legend recode */
.modal .status-list{ list-style:none; padding:0; margin:12px 0 0 0; display:grid; grid-template-columns:1fr; gap:10px }
.modal .status-item{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:2px; align-items:center }
.modal .status-item .status{ grid-column:1; grid-row:1 / span 2 }
.modal .status-item .name{ grid-column:2; grid-row:1; font-weight:600 }
.modal .status-item .desc{ grid-column:2; grid-row:2; color:var(--muted) }

/* === Dark Mode refinements (v2.32) === */
html[data-theme="dark"]{
  --bg:#0B0E14;
  --card:#0F141E;
  --text:#E6E6EB;
  --muted:#B1B6C2;
  --border:#1E2636;
  --primary:#8AB3FF;
  --primary-dark:#5B8CFF;
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --link:#8AB3FF;
  --link-strong:#BFD1FF;
}
/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(16,22,36,.92), rgba(11,14,20,.70));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .menu-btn{ background:#121826; border:1px solid var(--border) }
/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#0F141E;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9AA3B2 }
/* Cards */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 30px rgba(0,0,0,.35) }
/* Buttons */
html[data-theme="dark"] .btn{ background:#121826; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--primary); color:#0B0E14; border:0 }
/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#0F141E; border:1px solid var(--border) }
/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip{
  background:#0F141E !important;
  border-color:var(--chip-color,var(--border)) !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:rgba(139,92,246,.15) !important }
/* Scroll-to-top & Feedback */
html[data-theme="dark"] #scrollUpBtn,
html[data-theme="dark"] .to-top{ background:#1F2937; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#0F141E; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode: deep navy + beige accents (v2.33) === */
html[data-theme="dark"]{
  /* Deep navy (nicht schwarz) */
  --bg:#0E121A;
  --card:#121826;
  --text:#E9E9EE;
  --muted:#B5BBC9;
  --border:#1E2636;
  --shadow:0 10px 28px rgba(0,0,0,.42);

  /* Beige Akzente */
  --accent:#E6D5B8;          /* Hauptbeige */
  --accent-strong:#D9C29A;   /* stärker für Linien/Outlines */
  --accent-soft:rgba(230,213,184,.25); /* zarte Fills */

  /* Links/Primary in Dark neutralisiert in Richtung Beige */
  --primary:var(--accent);
  --primary-dark:#CDAF85;
  --link:var(--accent);
  --link-strong:#F0E4CD;
}

/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(14,18,26,.78));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] header .nav a.active{
  border-bottom-color: var(--accent-strong);
}

/* Infoboxen / Cards mit zartem beige Akzent */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 28px rgba(0,0,0,.38) }
html[data-theme="dark"] .card--blue::before,
html[data-theme="dark"] .card--brown::before,
html[data-theme="dark"] .card--physik::before,
html[data-theme="dark"] .card--erdkunde::before,
html[data-theme="dark"] .card--geschichte::before{
  background: var(--accent-strong) !important;
  opacity:.9;
}

/* Buttons */
html[data-theme="dark"] .btn{ background:#141B2A; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--accent); color:#0E121A; border:0 }
html[data-theme="dark"] .cta-button{ background:var(--accent); color:#0E121A; border:0 }

/* Suche / Inputs */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#121826;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9FA8BA }

/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .modal .modal-header{ border-bottom:1px solid var(--border) }

/* Chips (Variante A) – Outline in Beige nur für neutrale Bereiche; Fachfarben bleiben */
html[data-theme="dark"] .subject-nav .chip{
  background:#121826 !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.38);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:var(--accent-soft) !important; outline:2px solid var(--accent-strong) !important }
html[data-theme="dark"] .subject-nav .chip:hover{ box-shadow:0 10px 22px rgba(0,0,0,.32) }

/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#121826; border:1px solid var(--border) }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top{ background:#1C2436; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#121826; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode Palette (v2.34) === */
html[data-theme="dark"] {
  --bg: #222831;
  --card: #393E46;
  --text: #F5F5F5;
  --muted: #948979;
  --border: #948979;
  --accent: #DFD0B8;
  --accent-strong: #DFD0B8;
  --accent-soft: rgba(223,208,184,.15);
  --primary: #DFD0B8;
  --primary-dark: #948979;
  --link: #DFD0B8;
  --link-strong: #FFF5E1;
}

/* Backgrounds */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] header { background: var(--card); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] footer { background: var(--card); border-top: 1px solid var(--border); }

/* Cards / Info-Boxen */
html[data-theme="dark"] .card { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .info-box { background: var(--card); border-left: 4px solid var(--accent-strong); }

/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
html[data-theme="dark"] ::placeholder { color: var(--muted); }

/* Buttons */
html[data-theme="dark"] .btn { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .btn.primary { background: var(--accent); color: #222831; border: 0; }
html[data-theme="dark"] .cta-button { background: var(--accent); color: #222831; border: 0; }

/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip {
  background: var(--card) !important;
  border-color: var(--chip-color,var(--border)) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
html[data-theme="dark"] .subject-nav .chip.active {
  background: var(--accent-soft) !important;
  outline: 2px solid var(--accent-strong) !important;
}
html[data-theme="dark"] .subject-nav .chip:hover { box-shadow: 0 8px 18px rgba(0,0,0,.35); }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top { background: var(--card); color: var(--text); border: 1px solid var(--border); }
html[data-theme="dark"] .feedback-btn { background: var(--card); border: 1px solid var(--border); color: var(--link-strong); }
/* v2.35 Dark Mode: Haupttitel in Anthrazit */
html[data-theme="dark"] h1.site-title {
  color: #393E46;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
/* v2.39 Changelog styling */
.changelog-list { list-style:none; margin:0; padding:0; }
.changelog-list li { margin:4px 0; }
.changelog-list .version { font-weight:600; }
.changelog-list .date { color:#9ca3af; }
.changelog-list li.feature { color:#22c55e; } /* Grün */
.changelog-list li.bugfix  { color:#6b7280; } /* Grau */
.changelog-list li.design  { color:#3b82f6; } /* Blau */
/* v2.40 Changelog unified styling + modal header */
.changelog-list { list-style:none; margin:0; padding:0; }
.changelog-list li { margin:4px 0; color:#6b7280; } /* default grey */
.changelog-list .version { font-weight:600; }
.changelog-list .date { color:#9ca3af; }

/* Modal header: title left, close right */
.modal .modal-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.modal .modal-header h3 { margin:0; font-weight:700; }
.modal .modal-header .modal-close { margin-left:auto; }

/* Ensure close button aligns right even in existing markup */
#modalChangelog .modal-header { display:flex; align-items:center; justify-content:space-between; }
#modalChangelog .modal-header button { margin-left:auto; }
/* v2.40: Titel Anthrazit global */
h1.site-title { color:#393E46; }
/* v2.41a: Dark title fix + changelog styles + feedback links */
html[data-theme="dark"] h1.site-title,
html[data-theme="dark"] .title-anthrazit { color:#393E46 !important; }

/* Changelog ULs unified look & colors */
#modalChangelog ul { list-style:none; margin:0; padding:0; }
#modalChangelog li { margin:4px 0; color:#6b7280; } /* default grey */
#modalChangelog li .version { font-weight:600; }
#modalChangelog li .date { color:#9ca3af; }
#modalChangelog li.feature { color:#22c55e; }  /* Grün */
#modalChangelog li.design  { color:#3b82f6; }  /* Blau */
#modalChangelog li.bugfix  { color:#6b7280; }  /* Grau */

/* Feedback card links in blue */
.feedback-card a { color:#3b82f6 !important; font-weight:600; }
html[data-theme="dark"] .feedback-card a { color:#60a5fa !important; }
/* v2.42 Changelog color coding */
#modalChangelog .changelog-list { list-style:none; margin:0; padding:0; }
#modalChangelog .changelog-list li { margin:4px 0; }
#modalChangelog .changelog-list .version { font-weight:600; }
#modalChangelog .changelog-list .date { color:#9ca3af; }
#modalChangelog .changelog-list li.feature { color:#22c55e; }  /* Grün */
#modalChangelog .changelog-list li.bugfix  { color:#6b7280; }  /* Grau */
#modalChangelog .changelog-list li.design  { color:#3b82f6; }  /* Blau */
/* Clean, unified dropdown buttons */
          .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); min-width:280px; display:none; z-index:70; overflow:hidden; padding:10px }
          .dropdown.open{ display:block }
          .menu-stack{ display:flex; flex-direction:column; gap:8px }
          .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer; text-decoration:none; color:var(--text); font-weight:600; justify-content:space-between }
          .btn-menu{ width:100% }
          .btn:hover{ box-shadow:0 4px 14px rgba(2,6,23,.10) }
          html[data-theme="dark"] .btn:hover{ box-shadow:0 6px 20px rgba(0,0,0,.35) }
.admin-only{ display:none }
  .admin-yes .admin-only{ display:initial }


/* === styles from add-website.html === */
:root{
    --bg:#F3F5F9; --text:#0B1220; --muted:#4B5563; --primary:#2563EB; --primary-dark:#1D4ED8;
    --yellow:#FDE68A; --lightblue:#93C5FD; --lightbrown:#D6B48C;
    --physik:#374151; --erdkunde:#34D399; --sowi:#8B5CF6;
    --card:#FFFFFF; --border:#E2E8F0; --shadow:0 8px 30px rgba(2,6,23,.08);
    --radius:16px; --maxw:1100px;
    --status-green:#10B981; --status-yellow:#F59E0B; --status-red:#EF4444;
    --link:#2563EB; --link-strong:#1E40AF;
  }
  html[data-theme="dark"]{
    --bg:#0B0E14; --text:#E6E6EB; --muted:#B1B6C2; --primary:#5B8CFF; --primary-dark:#3D6BFF;
    --yellow:#F1D37E; --lightblue:#87B6FF; --lightbrown:#C1A074; --physik:#9CA3AF; --erdkunde:#34D399; --sowi:#A78BFA;
    --card:#10141E; --border:#1E2636; --shadow:0 10px 30px rgba(0,0,0,.35); --link:#8AB3FF; --link-strong:#BFD1FF;
  }
  *{ box-sizing:border-box } 
  body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial; background:var(--bg); color:var(--text); line-height:1.5 }
  a{ color:inherit; text-decoration:none }
  .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px }

  header{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.2) blur(6px); background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] header{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; height:60px }
  .brand a{ font-weight:700; letter-spacing:.2px; white-space:nowrap }
  .right{ display:flex; align-items:center; gap:16px }
  .topnav{ display:flex; align-items:center; gap:14px }
  .topnav a{ position:relative; padding:2px 4px; font-weight:600 }
  .topnav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transform:scaleX(0); transform-origin:left; transition:transform .25s ease, background .25s ease }
  .topnav a.active::after{ background:var(--primary); transform:scaleX(1) }

  .actions{ display:flex; align-items:center; gap:10px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  .menu-dots{ font-size:20px; line-height:1 }
  .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); min-width:300px; display:none; overflow:hidden; z-index:70 }
  .dropdown.open{ display:block }
  .dropdown .row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px dashed var(--border) }
  .dropdown .row:last-child{ border-bottom:none }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer }
  .btn.primary{ border-color:#93C5FD; background:#EFF6FF; color:#1E3A8A; font-weight:700 }

  .switch{ position:relative; width:52px; height:28px; background:#E5E7EB; border:1px solid var(--border); border-radius:999px; cursor:pointer }
  .switch .knob{ position:absolute; top:2px; left:2px; width:24px; height:24px; background:#fff; border-radius:50%; box-shadow:var(--shadow); transition:left .2s ease }
  .switch.on{ background:#C7D2FE } .switch.on .knob{ left:26px }

  .hero{ padding:36px 0 24px; text-align:center }
  .hero h1{ margin:0 0 6px 0; font-size:clamp(1.9rem,4.2vw,2.6rem) }
  .hero p{ margin:0; color:var(--muted) }

  .search-wrap{ display:flex; justify-content:center; margin-top:12px }
  .search{ width:min(680px,92vw); display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow) }
  .search input{ width:100%; border:none; outline:none; background:transparent; color:var(--text); font-size:1rem }
  .search .hint{ color:var(--muted); font-size:.9rem }

  .section{ padding:22px 0 }
  .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
  .card{ position:relative; grid-column:span 12; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:18px; min-height:180px; display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden }
  .card::before{ content:""; position:absolute; left:0; top:0; right:0; height:6px; background:var(--yellow); border-top-left-radius:16px; border-top-right-radius:16px }
  .card--blue::before{ background:var(--lightblue) } .card--brown::before{ background:var(--lightbrown) }
  .card--physik::before{ background:var(--physik) } .card--erdkunde::before{ background:var(--erdkunde) } .card--sowi::before{ background:var(--sowi) } .card--philosophie::before{ background:var(--yellow) } .card--geschichte::before{ background:var(--lightbrown) }
  .card h3{ margin:0; font-size:1.12rem } .card p{ margin:0; color:var(--muted) }
  .project-note{ font-size:.9rem; color:#6B7280 }
  @media (min-width:680px){ .card{ grid-column:span 6 } }

  .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
  .tag{ font-size:.8rem; border-radius:999px; padding:2px 8px; border:1px solid var(--border) }
  .tag.philosophie{ background:var(--yellow) } .tag.kunst{ background:var(--lightblue) } .tag.geschichte{ background:var(--lightbrown) }
  .tag.physik{ background:var(--physik); color:#fff } .tag.erdkunde{ background:var(--erdkunde) } .tag.sowi{ background:var(--sowi); color:#fff }

  .status{ position:absolute; right:12px; bottom:12px; font-size:.78rem; font-weight:700; color:#fff; padding:4px 8px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15) }
  .status.green{ background:var(--status-green) } .status.yellow{ background:var(--status-yellow) } .status.red{ background:var(--status-red) }

  .ghost{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:#EFF6FF; color:#1E3A8A; border:1px solid #DBEAFE; font-weight:600; transition:background-color .2s ease, transform .15s ease }
  .ghost:hover{ background:#DBEAFE; transform:translateY(-1px) }

  .info,.improvements{ background:#F9FAFB; border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:16px; box-shadow:var(--shadow); padding:clamp(18px,3vw,24px); margin-top:18px }
  html[data-theme="dark"] .info,html[data-theme="dark"] .improvements{ background:#0F141E }
  .info h3,.improvements h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .info a.link{ color:var(--link); font-weight:600 } .info a.link:hover{ text-decoration:underline } .info a.mail{ color:var(--link-strong); font-weight:700 }

  .faq{ margin-top:18px } .faq h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .faq-item{ background:#FFF; border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0; box-shadow:var(--shadow) }
  html[data-theme="dark"] .faq-item{ background:#0F141E }
  .kw-philosophie{ color:#8a6c00 } .kw-kunst{ color:#1E40AF } .kw-geschichte{ color:#5B3A1E }

  footer{ position:relative; padding:48px 0 56px; color:var(--muted); border-top:1px solid var(--border); margin-top:20px }
  .footer-inner{ position:relative; text-align:center }
  .cta-button{ display:inline-block; padding:12px 18px; border-radius:999px; border:2px solid #93C5FD; background:#EFF6FF; font-weight:800; box-shadow:0 8px 24px rgba(147,197,253,.35); color:#6D28D9 }
  .cta-button:hover{ transform:translateY(-1px) }
  .footer-meta{ margin-top:10px }
  .qr-in-footer{ position:absolute; left:20px; bottom:-22px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px }
  .qr-in-footer img{ display:block; width:120px; height:auto }
  .share-label{ font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px }
  .share-label svg{ width:20px; height:20px }

  /* v2.21 to-top blue */
.to-top{ position:fixed; right:18px; bottom:18px; display:none; width:46px; height:46px; border-radius:999px; border:2px solid #fff; background:transparent; box-shadow:0 10px 24px rgba(2,6,23,.25);  align-items:center; justify-content:center; transition:transform .15s ease, box-shadow .2s ease }
.to-top:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,6,23,.35) }
.to-top svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2 }
  .to-top.show{ display:flex } .feedback-btn{ position:fixed; right:68px; bottom:18px; display:none; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid #DBEAFE; background:#EFF6FF; box-shadow:var(--shadow); font-weight:700; color:#1E3A8A; z-index:65 }
  .feedback-btn.show{ display:inline-flex } .feedback-btn:hover{ transform:translateY(-2px); border-color:#93C5FD }

  @media (max-width:640px){ .qr-in-footer{ display:none } }

  /* Subject nav (PP) */
  .subject-nav{ position:sticky; top:60px; z-index:50; background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] .subject-nav{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .subject-inner{ display:flex; gap:10px; overflow:auto; padding:10px 20px }
  .chip{ white-space:nowrap; padding:8px 14px; border-radius:999px; border:1px solid var(--border); display:inline-flex; align-items:center; gap:8px; box-shadow:0 1px 0 rgba(0,0,0,.03) }
  .chip .tag{ margin:0 }
  .chip.active{ outline:2px solid #93C5FD }

  .subject{ scroll-margin-top:96px; padding-top:14px }
  .subject h2{ margin:0 0 4px 0; font-size:1.3rem }
  .subject .sub{ color:var(--muted); margin:0 0 10px 0 }

  
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }
  .menu-btn:hover{ box-shadow:0 8px 18px rgba(2,6,23,.12) }

  /* Header layout */
/* v2.17 header right align */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; font-size:18px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
/* v2.16 header tune */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .brand{ font-weight:800; font-size:18px; letter-spacing:.1px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ text-decoration:none; color:var(--text); padding:6px 4px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  /* Hamburger to X animation */
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }

  /* Dropdown polish */
  .dropdown{ position:absolute; right:16px; top:60px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px; display:none }
  .dropdown.open{ display:block }
  .dropdown .row{ margin:6px 0 }
  .dropdown .btn{ width:100%; border:1.5px solid var(--primary); background:#fff }
  html[data-theme="dark"] .dropdown .btn{ background:#111827 }
  /* Settings overlay */
  .overlay-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(2px); display:none; z-index:90 }
  .modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px,94vw); max-height:80vh; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); display:none; z-index:91 }
  .modal-header{ padding:18px 18px 8px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
  .modal-body{ padding:14px 18px }
  .btn.linklike{ background:transparent; border:none; color:var(--link); font-weight:700; cursor:pointer }
  .row-setting{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border) }
  .row-setting:last-child{ border-bottom:none }
  .icon-toggle{ display:flex; gap:8px }
  .icon-btn{ width:40px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--card); border-radius:10px; cursor:pointer }
  .icon-btn.active{ background:#EFF6FF; border-color:#93C5FD }
  .icon-btn svg{ width:18px; height:18px; stroke:currentColor }
  /* Add-website: 3 cards in row, plain + soft */
  .card--plain::before{ display:none }
  .card--soft{ box-shadow:0 10px 30px rgba(147,197,253,.28) }
  .grid.three .card{ grid-column:span 12 }
  @media (min-width:680px){ .grid.three .card{ grid-column:span 6 } }
  @media (min-width:980px){ .grid.three .card{ grid-column:span 4 } }
html[data-theme="dark"] .to-top{ background:rgba(255,255,255,.18); box-shadow:0 10px 24px rgba(0,0,0,.45) }
/* v2.20 legend spacing */
.modal .legend-tags, .modal .legend-status{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.modal .legend-status .status{ margin-right:0 } /* gap handles spacing */
/* v2.21 legend list */
.modal .legend-list{ list-style:none; padding:0; margin:10px 0 0 0 }
.modal .legend-list li{ display:flex; align-items:center; gap:10px; margin:6px 0 }
.modal .legend-list .status{ flex:0 0 auto }
/* v2.23 legend recode */
.modal .status-list{ list-style:none; padding:0; margin:12px 0 0 0; display:grid; grid-template-columns:1fr; gap:10px }
.modal .status-item{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:2px; align-items:center }
.modal .status-item .status{ grid-column:1; grid-row:1 / span 2 }
.modal .status-item .name{ grid-column:2; grid-row:1; font-weight:600 }
.modal .status-item .desc{ grid-column:2; grid-row:2; color:var(--muted) }

/* === Dark Mode refinements (v2.32) === */
html[data-theme="dark"]{
  --bg:#0B0E14;
  --card:#0F141E;
  --text:#E6E6EB;
  --muted:#B1B6C2;
  --border:#1E2636;
  --primary:#8AB3FF;
  --primary-dark:#5B8CFF;
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --link:#8AB3FF;
  --link-strong:#BFD1FF;
}
/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(16,22,36,.92), rgba(11,14,20,.70));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .menu-btn{ background:#121826; border:1px solid var(--border) }
/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#0F141E;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9AA3B2 }
/* Cards */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 30px rgba(0,0,0,.35) }
/* Buttons */
html[data-theme="dark"] .btn{ background:#121826; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--primary); color:#0B0E14; border:0 }
/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#0F141E; border:1px solid var(--border) }
/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip{
  background:#0F141E !important;
  border-color:var(--chip-color,var(--border)) !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:rgba(139,92,246,.15) !important }
/* Scroll-to-top & Feedback */
html[data-theme="dark"] #scrollUpBtn,
html[data-theme="dark"] .to-top{ background:#1F2937; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#0F141E; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode: deep navy + beige accents (v2.33) === */
html[data-theme="dark"]{
  /* Deep navy (nicht schwarz) */
  --bg:#0E121A;
  --card:#121826;
  --text:#E9E9EE;
  --muted:#B5BBC9;
  --border:#1E2636;
  --shadow:0 10px 28px rgba(0,0,0,.42);

  /* Beige Akzente */
  --accent:#E6D5B8;          /* Hauptbeige */
  --accent-strong:#D9C29A;   /* stärker für Linien/Outlines */
  --accent-soft:rgba(230,213,184,.25); /* zarte Fills */

  /* Links/Primary in Dark neutralisiert in Richtung Beige */
  --primary:var(--accent);
  --primary-dark:#CDAF85;
  --link:var(--accent);
  --link-strong:#F0E4CD;
}

/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(14,18,26,.78));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] header .nav a.active{
  border-bottom-color: var(--accent-strong);
}

/* Infoboxen / Cards mit zartem beige Akzent */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 28px rgba(0,0,0,.38) }
html[data-theme="dark"] .card--blue::before,
html[data-theme="dark"] .card--brown::before,
html[data-theme="dark"] .card--physik::before,
html[data-theme="dark"] .card--erdkunde::before,
html[data-theme="dark"] .card--geschichte::before{
  background: var(--accent-strong) !important;
  opacity:.9;
}

/* Buttons */
html[data-theme="dark"] .btn{ background:#141B2A; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--accent); color:#0E121A; border:0 }
html[data-theme="dark"] .cta-button{ background:var(--accent); color:#0E121A; border:0 }

/* Suche / Inputs */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#121826;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9FA8BA }

/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .modal .modal-header{ border-bottom:1px solid var(--border) }

/* Chips (Variante A) – Outline in Beige nur für neutrale Bereiche; Fachfarben bleiben */
html[data-theme="dark"] .subject-nav .chip{
  background:#121826 !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.38);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:var(--accent-soft) !important; outline:2px solid var(--accent-strong) !important }
html[data-theme="dark"] .subject-nav .chip:hover{ box-shadow:0 10px 22px rgba(0,0,0,.32) }

/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#121826; border:1px solid var(--border) }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top{ background:#1C2436; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#121826; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode Palette (v2.34) === */
html[data-theme="dark"] {
  --bg: #222831;
  --card: #393E46;
  --text: #F5F5F5;
  --muted: #948979;
  --border: #948979;
  --accent: #DFD0B8;
  --accent-strong: #DFD0B8;
  --accent-soft: rgba(223,208,184,.15);
  --primary: #DFD0B8;
  --primary-dark: #948979;
  --link: #DFD0B8;
  --link-strong: #FFF5E1;
}

/* Backgrounds */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] header { background: var(--card); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] footer { background: var(--card); border-top: 1px solid var(--border); }

/* Cards / Info-Boxen */
html[data-theme="dark"] .card { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .info-box { background: var(--card); border-left: 4px solid var(--accent-strong); }

/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
html[data-theme="dark"] ::placeholder { color: var(--muted); }

/* Buttons */
html[data-theme="dark"] .btn { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .btn.primary { background: var(--accent); color: #222831; border: 0; }
html[data-theme="dark"] .cta-button { background: var(--accent); color: #222831; border: 0; }

/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip {
  background: var(--card) !important;
  border-color: var(--chip-color,var(--border)) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
html[data-theme="dark"] .subject-nav .chip.active {
  background: var(--accent-soft) !important;
  outline: 2px solid var(--accent-strong) !important;
}
html[data-theme="dark"] .subject-nav .chip:hover { box-shadow: 0 8px 18px rgba(0,0,0,.35); }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top { background: var(--card); color: var(--text); border: 1px solid var(--border); }
html[data-theme="dark"] .feedback-btn { background: var(--card); border: 1px solid var(--border); color: var(--link-strong); }
/* v2.35 Dark Mode: Haupttitel in Anthrazit */
html[data-theme="dark"] h1.site-title {
  color: #393E46;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
/* v2.39 Changelog styling */
.changelog-list { list-style:none; margin:0; padding:0; }
.changelog-list li { margin:4px 0; }
.changelog-list .version { font-weight:600; }
.changelog-list .date { color:#9ca3af; }
.changelog-list li.feature { color:#22c55e; } /* Grün */
.changelog-list li.bugfix  { color:#6b7280; } /* Grau */
.changelog-list li.design  { color:#3b82f6; } /* Blau */
/* v2.41a: Dark title fix + changelog styles + feedback links */
html[data-theme="dark"] h1.site-title,
html[data-theme="dark"] .title-anthrazit { color:#393E46 !important; }

/* Changelog ULs unified look & colors */
#modalChangelog ul { list-style:none; margin:0; padding:0; }
#modalChangelog li { margin:4px 0; color:#6b7280; } /* default grey */
#modalChangelog li .version { font-weight:600; }
#modalChangelog li .date { color:#9ca3af; }
#modalChangelog li.feature { color:#22c55e; }  /* Grün */
#modalChangelog li.design  { color:#3b82f6; }  /* Blau */
#modalChangelog li.bugfix  { color:#6b7280; }  /* Grau */

/* Feedback card links in blue */
.feedback-card a { color:#3b82f6 !important; font-weight:600; }
html[data-theme="dark"] .feedback-card a { color:#60a5fa !important; }
/* v2.42 Changelog color coding */
#modalChangelog .changelog-list { list-style:none; margin:0; padding:0; }
#modalChangelog .changelog-list li { margin:4px 0; }
#modalChangelog .changelog-list .version { font-weight:600; }
#modalChangelog .changelog-list .date { color:#9ca3af; }
#modalChangelog .changelog-list li.feature { color:#22c55e; }  /* Grün */
#modalChangelog .changelog-list li.bugfix  { color:#6b7280; }  /* Grau */
#modalChangelog .changelog-list li.design  { color:#3b82f6; }  /* Blau */
/* Clean, unified dropdown buttons */
          .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); min-width:280px; display:none; z-index:70; overflow:hidden; padding:10px }
          .dropdown.open{ display:block }
          .menu-stack{ display:flex; flex-direction:column; gap:8px }
          .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer; text-decoration:none; color:var(--text); font-weight:600; justify-content:space-between }
          .btn-menu{ width:100% }
          .btn:hover{ box-shadow:0 4px 14px rgba(2,6,23,.10) }
          html[data-theme="dark"] .btn:hover{ box-shadow:0 6px 20px rgba(0,0,0,.35) }
.admin-only{ display:none }
  .admin-yes .admin-only{ display:initial }


/* === styles from index.html === */
:root{
    --bg:#F3F5F9; --text:#0B1220; --muted:#4B5563; --primary:#2563EB; --primary-dark:#1D4ED8;
    --yellow:#FDE68A; --lightblue:#93C5FD; --lightbrown:#D6B48C;
    --physik:#374151; --erdkunde:#34D399; --sowi:#8B5CF6;
    --card:#FFFFFF; --border:#E2E8F0; --shadow:0 8px 30px rgba(2,6,23,.08);
    --radius:16px; --maxw:1100px;
    --status-green:#10B981; --status-yellow:#F59E0B; --status-red:#EF4444;
    --link:#2563EB; --link-strong:#1E40AF;
  }
  html[data-theme="dark"]{
    --bg:#0B0E14; --text:#E6E6EB; --muted:#B1B6C2; --primary:#5B8CFF; --primary-dark:#3D6BFF;
    --yellow:#F1D37E; --lightblue:#87B6FF; --lightbrown:#C1A074; --physik:#9CA3AF; --erdkunde:#34D399; --sowi:#A78BFA;
    --card:#10141E; --border:#1E2636; --shadow:0 10px 30px rgba(0,0,0,.35); --link:#8AB3FF; --link-strong:#BFD1FF;
  }
  *{ box-sizing:border-box } 
  body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial; background:var(--bg); color:var(--text); line-height:1.5 }
  a{ color:inherit; text-decoration:none }
  .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px }

  header{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.2) blur(6px); background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] header{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; height:60px }
  .brand a{ font-weight:700; letter-spacing:.2px; white-space:nowrap }
  .right{ display:flex; align-items:center; gap:16px }
  .topnav{ display:flex; align-items:center; gap:14px }
  .topnav a{ position:relative; padding:2px 4px; font-weight:600 }
  .topnav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transform:scaleX(0); transform-origin:left; transition:transform .25s ease, background .25s ease }
  .topnav a.active::after{ background:var(--primary); transform:scaleX(1) }

  .actions{ display:flex; align-items:center; gap:10px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  .menu-dots{ font-size:20px; line-height:1 }
  .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); min-width:300px; display:none; overflow:hidden; z-index:70 }
  .dropdown.open{ display:block }
  .dropdown .row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px dashed var(--border) }
  .dropdown .row:last-child{ border-bottom:none }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer }
  .btn.primary{ border-color:#93C5FD; background:#EFF6FF; color:#1E3A8A; font-weight:700 }

  .switch{ position:relative; width:52px; height:28px; background:#E5E7EB; border:1px solid var(--border); border-radius:999px; cursor:pointer }
  .switch .knob{ position:absolute; top:2px; left:2px; width:24px; height:24px; background:#fff; border-radius:50%; box-shadow:var(--shadow); transition:left .2s ease }
  .switch.on{ background:#C7D2FE } .switch.on .knob{ left:26px }

  .hero{ padding:36px 0 24px; text-align:center }
  .hero h1{ margin:0 0 6px 0; font-size:clamp(1.9rem,4.2vw,2.6rem) }
  .hero p{ margin:0; color:var(--muted) }

  .search-wrap{ display:flex; justify-content:center; margin-top:12px }
  .search{ width:min(680px,92vw); display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow) }
  .search input{ width:100%; border:none; outline:none; background:transparent; color:var(--text); font-size:1rem }
  .search .hint{ color:var(--muted); font-size:.9rem }

  .section{ padding:22px 0 }
  .info, .improvements, .faq{ max-width: 980px; margin: 0 auto }
  .grid{ display:grid; gap:16px }
  .card{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:18px; min-height:180px; display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden }
  .card::before{ content:""; position:absolute; left:0; top:0; right:0; height:6px; background:var(--yellow); border-top-left-radius:16px; border-top-right-radius:16px }
  .card--blue::before{ background:var(--lightblue) } .card--brown::before{ background:var(--lightbrown) }
  .card--physik::before{ background:var(--physik) } .card--erdkunde::before{ background:var(--erdkunde) } .card--sowi::before{ background:var(--sowi) } .card--philosophie::before{ background:var(--yellow) } .card--geschichte::before{ background:var(--lightbrown) }
  .card h3{ margin:0; font-size:1.12rem } .card p{ margin:0; color:var(--muted) }
  .project-note{ font-size:.9rem; color:#6B7280 }
  @media (min-width:680px){ .grid .card{ grid-column:span 6 } }

  .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
  .tag{ font-size:.8rem; border-radius:999px; padding:2px 8px; border:1px solid var(--border) }
  .tag.philosophie{ background:var(--yellow) } .tag.kunst{ background:var(--lightblue) } .tag.geschichte{ background:var(--lightbrown) }
  .tag.physik{ background:var(--physik); color:#fff } .tag.erdkunde{ background:var(--erdkunde) } .tag.sowi{ background:var(--sowi); color:#fff }

  .status{ position:absolute; right:12px; bottom:12px; font-size:.78rem; font-weight:700; color:#fff; padding:4px 8px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15) }
  .status.green{ background:var(--status-green) } .status.yellow{ background:var(--status-yellow) } .status.red{ background:var(--status-red) }

  .ghost{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:#EFF6FF; color:#1E3A8A; border:1px solid #DBEAFE; font-weight:600; transition:background-color .2s ease, transform .15s ease }
  .ghost:hover{ background:#DBEAFE; transform:translateY(-1px) }

  .info,.improvements{ background:#F9FAFB; border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:16px; box-shadow:var(--shadow); padding:clamp(18px,3vw,24px); margin-top:18px }
  html[data-theme="dark"] .info,html[data-theme="dark"] .improvements{ background:#0F141E }
  .info h3,.improvements h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .info a.link{ color:var(--link); font-weight:600 } .info a.link:hover{ text-decoration:underline } .info a.mail{ color:var(--link-strong); font-weight:700 }

  .faq{ margin-top:18px } .faq h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .faq-item{ background:#FFF; border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0; box-shadow:var(--shadow) }
  html[data-theme="dark"] .faq-item{ background:#0F141E }
  .kw-philosophie{ color:#8a6c00 } .kw-kunst{ color:#1E40AF } .kw-geschichte{ color:#5B3A1E }

  footer{ position:relative; padding:48px 0 56px; color:var(--muted); border-top:1px solid var(--border); margin-top:20px }
  .footer-inner{ position:relative; text-align:center }
  .cta-button{ display:inline-block; padding:12px 18px; border-radius:999px; border:2px solid #93C5FD; background:#EFF6FF; font-weight:800; box-shadow:0 8px 24px rgba(147,197,253,.35); color:#6D28D9 }
  .cta-button:hover{ transform:translateY(-1px) }
  .footer-meta{ margin-top:10px }
  .qr-in-footer{ position:absolute; left:20px; bottom:-22px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px }
  .qr-in-footer img{ display:block; width:120px; height:auto }
  .share-label{ font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px }
  .share-label svg{ width:20px; height:20px }

  /* v2.21 to-top blue */
.to-top{ position:fixed; right:18px; bottom:18px; display:none; width:46px; height:46px; border-radius:999px; border:2px solid #fff; background:transparent; box-shadow:0 10px 24px rgba(2,6,23,.25);  align-items:center; justify-content:center; transition:transform .15s ease, box-shadow .2s ease }
.to-top:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,6,23,.35) }
.to-top svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2 }
  .to-top.show{ display:flex } .feedback-btn{ position:fixed; right:68px; bottom:18px; display:none; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid #DBEAFE; background:#EFF6FF; box-shadow:var(--shadow); font-weight:700; color:#1E3A8A; z-index:65 }
  .feedback-btn.show{ display:inline-flex } .feedback-btn:hover{ transform:translateY(-2px); border-color:#93C5FD }

  @media (max-width:640px){ .qr-in-footer{ display:none } }

  /* Subject nav (PP) */
  .subject-nav{ position:sticky; top:60px; z-index:50; background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] .subject-nav{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .subject-inner{ display:flex; gap:10px; overflow:auto; padding:10px 20px }
  .chip{ white-space:nowrap; padding:8px 14px; border-radius:999px; border:1px solid var(--border); display:inline-flex; align-items:center; gap:8px; box-shadow:0 1px 0 rgba(0,0,0,.03) }
  .chip .tag{ margin:0 }
  .chip.active{ outline:2px solid #93C5FD }

  .subject{ scroll-margin-top:96px; padding-top:14px }
  .subject h2{ margin:0 0 4px 0; font-size:1.3rem }
  .subject .sub{ color:var(--muted); margin:0 0 10px 0 }

  
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }
  .menu-btn:hover{ box-shadow:0 8px 18px rgba(2,6,23,.12) }

  /* Header layout */
/* v2.17 header right align */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; font-size:18px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
/* v2.16 header tune */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .brand{ font-weight:800; font-size:18px; letter-spacing:.1px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ text-decoration:none; color:var(--text); padding:6px 4px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  /* Hamburger to X animation */
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }

  /* Dropdown polish */
  .dropdown{ position:absolute; right:16px; top:60px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px; display:none }
  .dropdown.open{ display:block }
  .dropdown .row{ margin:6px 0 }
  .dropdown .btn{ width:100%; border:1.5px solid var(--primary); background:#fff }
  html[data-theme="dark"] .dropdown .btn{ background:#111827 }
  /* Settings overlay */
  .overlay-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(2px); display:none; z-index:90 }
  .overlay-backdrop.show{ display:block }
  .modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px,94vw); max-height:80vh; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); display:none; z-index:91 }
  .modal-header{ padding:18px 18px 8px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
  .modal-body{ padding:14px 18px }
  .btn.linklike{ background:transparent; border:none; color:var(--link); font-weight:700; cursor:pointer }
  .row-setting{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border) }
  .row-setting:last-child{ border-bottom:none }
  .icon-toggle{ display:flex; gap:8px }
  .icon-btn{ width:40px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--card); border-radius:10px; cursor:pointer }
  .icon-btn.active{ background:#EFF6FF; border-color:#93C5FD }
  .icon-btn svg{ width:18px; height:18px; stroke:currentColor }
  /* Add-website: 3 cards in row, plain + soft */
  .card--plain::before{ display:none }
  .card--soft{ box-shadow:0 10px 30px rgba(147,197,253,.28) }
  .grid.three .card{ grid-column:span 12 }
  @media (min-width:680px){ .grid.three .card{ grid-column:span 6 } }
  @media (min-width:980px){ .grid.three .card{ grid-column:span 4 } }
html[data-theme="dark"] .to-top{ background:rgba(255,255,255,.18); box-shadow:0 10px 24px rgba(0,0,0,.45) }
/* v2.20 legend spacing */
.modal .legend-tags, .modal .legend-status{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.modal .legend-status .status{ margin-right:0 } /* gap handles spacing */
/* v2.21 legend list */
.modal .legend-list{ list-style:none; padding:0; margin:10px 0 0 0 }
.modal .legend-list li{ display:flex; align-items:center; gap:10px; margin:6px 0 }
.modal .legend-list .status{ flex:0 0 auto }
/* v2.23 legend recode */
.modal .status-list{ list-style:none; padding:0; margin:12px 0 0 0; display:grid; grid-template-columns:1fr; gap:10px }
.modal .status-item{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:2px; align-items:center }
.modal .status-item .status{ grid-column:1; grid-row:1 / span 2 }
.modal .status-item .name{ grid-column:2; grid-row:1; font-weight:600 }
.modal .status-item .desc{ grid-column:2; grid-row:2; color:var(--muted) }

/* v2.45 – Info boxes styled like add-website */
.info-section .box{ background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.07); padding:18px; }
.info-section{ max-width:980px; margin:0 auto; }
.info-section .stack{ display:grid; gap:14px; }
.info-section .grid2{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:900px){ .info-section .grid2{ grid-template-columns:1fr 1fr; } }
.info-section h3{ margin:0 0 8px 0; }

/* v2.46 info accents */



/* v2.49 – adjust improvements width, 3px border, revert card bg */
:root{ --info-surface:var(--card,#fff); --accent-blue:#1D4ED8; }
html[data-theme="dark"]{ --info-surface:#222831; --accent-blue:#60A5FA; }

/* Info cards */
.info-section .box{ background:var(--info-surface); border:1px solid var(--border,#e5e7eb); border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.07); padding:18px; position:relative; }
html[data-theme="dark"] .info-section .box{ background:#222831; border-color:#393E46; box-shadow:0 10px 28px rgba(0,0,0,.35); }
.info-section .box h3{ color:var(--accent-blue); }

/* Outer blue left border */
.info-section .box.accent{ border-left:3px solid var(--accent-blue); padding-left:16px; }

/* FAQ equal height + tighter gap */
.info-section .faq-list{ display:grid; gap:2px; }
.info-section .faq-item{ min-height:120px; display:flex; flex-direction:column; justify-content:center; }

/* Improvements full width on desktop */
.info-section .grid2 .box.span2{ grid-column:1 / -1; }

.dropdown{ z-index: 140; }

  :root{
    --bg:#F3F5F9; --text:#0B1220; --muted:#4B5563; --primary:#2563EB; --primary-dark:#1D4ED8;
    --yellow:#FDE68A; --lightblue:#93C5FD; --lightbrown:#D6B48C;
    --physik:#374151; --erdkunde:#34D399; --sowi:#8B5CF6;
    --card:#FFFFFF; --border:#E2E8F0; --shadow:0 8px 30px rgba(2,6,23,.08);
    --radius:16px; --maxw:1100px;
    --status-green:#10B981; --status-yellow:#F59E0B; --status-red:#EF4444;
    --link:#2563EB; --link-strong:#1E40AF;
  }
  html[data-theme="dark"]{
    --bg:#0B0E14; --text:#E6E6EB; --muted:#B1B6C2; --primary:#5B8CFF; --primary-dark:#3D6BFF;
    --yellow:#F1D37E; --lightblue:#87B6FF; --lightbrown:#C1A074; --physik:#9CA3AF; --erdkunde:#34D399; --sowi:#A78BFA;
    --card:#10141E; --border:#1E2636; --shadow:0 10px 30px rgba(0,0,0,.35); --link:#8AB3FF; --link-strong:#BFD1FF;
  }
  *{ box-sizing:border-box } 
  body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial; background:var(--bg); color:var(--text); line-height:1.5 }
  a{ color:inherit; text-decoration:none }
  .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px }

  header{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.2) blur(6px); background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] header{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; height:60px }
  .brand a{ font-weight:700; letter-spacing:.2px; white-space:nowrap }
  .right{ display:flex; align-items:center; gap:16px }
  .topnav{ display:flex; align-items:center; gap:14px }
  .topnav a{ position:relative; padding:2px 4px; font-weight:600 }
  .topnav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transform:scaleX(0); transform-origin:left; transition:transform .25s ease, background .25s ease }
  .topnav a.active::after{ background:var(--primary); transform:scaleX(1) }

  .actions{ display:flex; align-items:center; gap:10px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  .menu-dots{ font-size:20px; line-height:1 }
  .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); min-width:300px; display:none; overflow:hidden; z-index:70 }
  .dropdown.open{ display:block }
  .dropdown .row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px dashed var(--border) }
  .dropdown .row:last-child{ border-bottom:none }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer }
  .btn.primary{ border-color:#93C5FD; background:#EFF6FF; color:#1E3A8A; font-weight:700 }

  .switch{ position:relative; width:52px; height:28px; background:#E5E7EB; border:1px solid var(--border); border-radius:999px; cursor:pointer }
  .switch .knob{ position:absolute; top:2px; left:2px; width:24px; height:24px; background:#fff; border-radius:50%; box-shadow:var(--shadow); transition:left .2s ease }
  .switch.on{ background:#C7D2FE } .switch.on .knob{ left:26px }

  .hero{ padding:36px 0 24px; text-align:center }
  .hero h1{ margin:0 0 6px 0; font-size:clamp(1.9rem,4.2vw,2.6rem) }
  .hero p{ margin:0; color:var(--muted) }

  .search-wrap{ display:flex; justify-content:center; margin-top:12px }
  .search{ width:min(680px,92vw); display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow) }
  .search input{ width:100%; border:none; outline:none; background:transparent; color:var(--text); font-size:1rem }
  .search .hint{ color:var(--muted); font-size:.9rem }

  .section{ padding:22px 0 }
  .grid{ display:grid; gap:16px }
  .card{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:18px; min-height:180px; display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden }
  .card::before{ content:""; position:absolute; left:0; top:0; right:0; height:6px; background:var(--yellow); border-top-left-radius:16px; border-top-right-radius:16px }
  .card--blue::before{ background:var(--lightblue) } .card--brown::before{ background:var(--lightbrown) }
  .card--physik::before{ background:var(--physik) } .card--erdkunde::before{ background:var(--erdkunde) } .card--sowi::before{ background:var(--sowi) } .card--philosophie::before{ background:var(--yellow) } .card--geschichte::before{ background:var(--lightbrown) }
  .card h3{ margin:0; font-size:1.12rem } .card p{ margin:0; color:var(--muted) }
  .project-note{ font-size:.9rem; color:#6B7280 }
  @media (min-width:680px){ .grid .card{ grid-column:span 6 } }

  .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
  .tag{ font-size:.8rem; border-radius:999px; padding:2px 8px; border:1px solid var(--border) }
  .tag.philosophie{ background:var(--yellow) } .tag.kunst{ background:var(--lightblue) } .tag.geschichte{ background:var(--lightbrown) }
  .tag.physik{ background:var(--physik); color:#fff } .tag.erdkunde{ background:var(--erdkunde) } .tag.sowi{ background:var(--sowi); color:#fff }

  .status{ position:absolute; right:12px; bottom:12px; font-size:.78rem; font-weight:700; color:#fff; padding:4px 8px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15) }
  .status.green{ background:var(--status-green) } .status.yellow{ background:var(--status-yellow) } .status.red{ background:var(--status-red) }

  .ghost{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:#EFF6FF; color:#1E3A8A; border:1px solid #DBEAFE; font-weight:600; transition:background-color .2s ease, transform .15s ease }
  .ghost:hover{ background:#DBEAFE; transform:translateY(-1px) }

  .info,.improvements{ background:#F9FAFB; border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:16px; box-shadow:var(--shadow); padding:clamp(18px,3vw,24px); margin-top:18px }
  html[data-theme="dark"] .info,html[data-theme="dark"] .improvements{ background:#0F141E }
  .info h3,.improvements h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .info a.link{ color:var(--link); font-weight:600 } .info a.link:hover{ text-decoration:underline } .info a.mail{ color:var(--link-strong); font-weight:700 }

  .faq{ margin-top:18px } .faq h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .faq-item{ background:#FFF; border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0; box-shadow:var(--shadow) }
  html[data-theme="dark"] .faq-item{ background:#0F141E }
  .kw-philosophie{ color:#8a6c00 } .kw-kunst{ color:#1E40AF } .kw-geschichte{ color:#5B3A1E }

  footer{ position:relative; padding:48px 0 56px; color:var(--muted); border-top:1px solid var(--border); margin-top:20px }
  .footer-inner{ position:relative; text-align:center }
  .cta-button{ display:inline-block; padding:12px 18px; border-radius:999px; border:2px solid #93C5FD; background:#EFF6FF; font-weight:800; box-shadow:0 8px 24px rgba(147,197,253,.35); color:#6D28D9 }
  .cta-button:hover{ transform:translateY(-1px) }
  .footer-meta{ margin-top:10px }
  .qr-in-footer{ position:absolute; left:20px; bottom:-22px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px }
  .qr-in-footer img{ display:block; width:120px; height:auto }
  .share-label{ font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px }
  .share-label svg{ width:20px; height:20px }

  /* v2.21 to-top blue */
.to-top{ position:fixed; right:18px; bottom:18px; display:none; width:46px; height:46px; border-radius:999px; border:2px solid #fff; background:transparent; box-shadow:0 10px 24px rgba(2,6,23,.25);  align-items:center; justify-content:center; transition:transform .15s ease, box-shadow .2s ease }
.to-top:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,6,23,.35) }
.to-top svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2 }
  .to-top.show{ display:flex } .feedback-btn{ position:fixed; right:68px; bottom:18px; display:none; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid #DBEAFE; background:#EFF6FF; box-shadow:var(--shadow); font-weight:700; color:#1E3A8A; z-index:65 }
  .feedback-btn.show{ display:inline-flex } .feedback-btn:hover{ transform:translateY(-2px); border-color:#93C5FD }

  @media (max-width:640px){ .qr-in-footer{ display:none } }

  /* Subject nav (PP) */
  .subject-nav{ position:sticky; top:60px; z-index:50; background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] .subject-nav{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .subject-inner{ display:flex; gap:10px; overflow:auto; padding:10px 20px }
  .chip{ white-space:nowrap; padding:8px 14px; border-radius:999px; border:1px solid var(--border); display:inline-flex; align-items:center; gap:8px; box-shadow:0 1px 0 rgba(0,0,0,.03) }
  .chip .tag{ margin:0 }
  .chip.active{ outline:2px solid #93C5FD }

  .subject{ scroll-margin-top:96px; padding-top:14px }
  .subject h2{ margin:0 0 4px 0; font-size:1.3rem }
  .subject .sub{ color:var(--muted); margin:0 0 10px 0 }

  
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }
  .menu-btn:hover{ box-shadow:0 8px 18px rgba(2,6,23,.12) }

  /* Header layout */
/* v2.17 header right align */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; font-size:18px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
/* v2.16 header tune */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .brand{ font-weight:800; font-size:18px; letter-spacing:.1px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ text-decoration:none; color:var(--text); padding:6px 4px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  /* Hamburger to X animation */
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }

  /* Dropdown polish */
  .dropdown{ position:absolute; right:16px; top:60px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px; display:none }
  .dropdown.open{ display:block }
  .dropdown .row{ margin:6px 0 }
  .dropdown .btn{ width:100%; border:1.5px solid var(--primary); background:#fff }
  html[data-theme="dark"] .dropdown .btn{ background:#111827 }
  /* Settings overlay */
  .overlay-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(2px); display:none; z-index:90 }
  .modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px,94vw); max-height:80vh; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); display:none; z-index:91 }
  .modal-header{ padding:18px 18px 8px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
  .modal-body{ padding:14px 18px }
  .btn.linklike{ background:transparent; border:none; color:var(--link); font-weight:700; cursor:pointer }
  .row-setting{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border) }
  .row-setting:last-child{ border-bottom:none }
  .icon-toggle{ display:flex; gap:8px }
  .icon-btn{ width:40px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--card); border-radius:10px; cursor:pointer }
  .icon-btn.active{ background:#EFF6FF; border-color:#93C5FD }
  .icon-btn svg{ width:18px; height:18px; stroke:currentColor }
  /* Add-website: 3 cards in row, plain + soft */
  .card--plain::before{ display:none }
  .card--soft{ box-shadow:0 10px 30px rgba(147,197,253,.28) }
  .grid.three .card{ grid-column:span 12 }
  @media (min-width:680px){ .grid.three .card{ grid-column:span 6 } }
  @media (min-width:980px){ .grid.three .card{ grid-column:span 4 } }
html[data-theme="dark"] .to-top{ background:rgba(255,255,255,.18); box-shadow:0 10px 24px rgba(0,0,0,.45) }
/* v2.20 legend spacing */
.modal .legend-tags, .modal .legend-status{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.modal .legend-status .status{ margin-right:0 } /* gap handles spacing */
/* v2.21 legend list */
.modal .legend-list{ list-style:none; padding:0; margin:10px 0 0 0 }
.modal .legend-list li{ display:flex; align-items:center; gap:10px; margin:6px 0 }
.modal .legend-list .status{ flex:0 0 auto }
/* v2.23 legend recode */
.modal .status-list{ list-style:none; padding:0; margin:12px 0 0 0; display:grid; grid-template-columns:1fr; gap:10px }
.modal .status-item{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:2px; align-items:center }
.modal .status-item .status{ grid-column:1; grid-row:1 / span 2 }
.modal .status-item .name{ grid-column:2; grid-row:1; font-weight:600 }
.modal .status-item .desc{ grid-column:2; grid-row:2; color:var(--muted) }

/* removed old Variant A */
.chip{
  background:#FFFFFF;
  border:2px solid var(--chip-color, var(--border));
  border-radius:999px;
  padding:8px 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 1px 0 rgba(2,6,23,.03);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip .tag{
  /* neutralize old tag pill look inside chip */
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0;
  font-weight:600;
  color:inherit;
}
/* Hover: soft lift + subtle shadow */
.chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(2,6,23,.12) }
/* Active: light lilac fill + stronger outline */
.chip.active{ background:#EEF2FF; border-width:3px }
/* Dark mode tweaks */
html[data-theme="dark"] .chip{ background:#0F141E }
html[data-theme="dark"] .chip.active{ background:rgba(139,92,246,.15) }

/* Color mapping via --chip-color set by inner .tag subject */
.chip .tag.philosophie{ --chip-color:#FACC15 }  /* gelb */
.chip .tag.erdkunde{ --chip-color:#10B981 }    /* grün */
.chip .tag.geschichte{ --chip-color:#D6B48C }  /* braun/hellbraun wie vorher */
.chip .tag.physik{ --chip-color:#374151 }      /* dunkelgrau */
.chip .tag.sowi{ --chip-color:#8B5CF6 }        /* violett */

/* Neue Farben */
.chip .tag.deutsch{ --chip-color:#EF4444 }     /* rot */
.chip .tag.sport{ --chip-color:#14B8A6 }       /* türkis */
.chip .tag.mathe{ --chip-color:#F97316 }       /* orange */
.chip .tag.chemie{ --chip-color:#84CC16 }      /* hellgrün */
.chip .tag.informatik{ --chip-color:#4F46E5 }  /* indigo */

/* v2.29 Colored Chips Fix */
.chip {
  border:2px solid var(--chip-color, var(--border));
  background: var(--chip-bg, #FFFFFF);
  color: var(--chip-text, inherit);
  border-radius:999px;
  padding:8px 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 1px 0 rgba(2,6,23,.03);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip .tag{ background:transparent !important; border:none !important; padding:0 !important; margin:0; font-weight:600; color:inherit; }
.chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(2,6,23,.12) }
.chip.active{ outline:2px solid rgba(147,197,253,.65) }

.chip .tag.philosophie{ --chip-color:#FACC15; --chip-bg:#FEF9C3 }
.chip .tag.erdkunde{    --chip-color:#10B981; --chip-bg:#D1FAE5 }
.chip .tag.geschichte{  --chip-color:#D6B48C; --chip-bg:#F5EBDD }
.chip .tag.physik{      --chip-color:#374151; --chip-bg:#E5E7EB }
.chip .tag.sowi{        --chip-color:#8B5CF6; --chip-bg:#EDE9FE }
.chip .tag.deutsch{     --chip-color:#EF4444; --chip-bg:#FEE2E2 }
.chip .tag.sport{       --chip-color:#14B8A6; --chip-bg:#CCFBF1 }
.chip .tag.mathe{       --chip-color:#F97316; --chip-bg:#FFEDD5 }
.chip .tag.chemie{      --chip-color:#84CC16; --chip-bg:#ECFCCB }
.chip .tag.informatik{  --chip-color:#4F46E5; --chip-bg:#E0E7FF }

html[data-theme="dark"] .chip{ background: rgba(255,255,255,.04) }
html[data-theme="dark"] .chip .tag.philosophie{ --chip-bg: rgba(250,204,21,.18) }
html[data-theme="dark"] .chip .tag.erdkunde{    --chip-bg: rgba(16,185,129,.18) }
html[data-theme="dark"] .chip .tag.geschichte{  --chip-bg: rgba(214,180,140,.18) }
html[data-theme="dark"] .chip .tag.physik{      --chip-bg: rgba(55,65,81,.25) }
html[data-theme="dark"] .chip .tag.sowi{        --chip-bg: rgba(139,92,246,.20) }
html[data-theme="dark"] .chip .tag.deutsch{     --chip-bg: rgba(239,68,68,.20) }
html[data-theme="dark"] .chip .tag.sport{       --chip-bg: rgba(20,184,166,.20) }
html[data-theme="dark"] .chip .tag.mathe{       --chip-bg: rgba(249,115,22,.20) }
html[data-theme="dark"] .chip .tag.chemie{      --chip-bg: rgba(132,204,22,.20) }
html[data-theme="dark"] .chip .tag.informatik{  --chip-bg: rgba(79,70,229,.20) }

/* === v2.30 Subject Chips: Variante A mit Farben === */
.chip {
  border:2px solid var(--chip-color, var(--border));
  background: var(--chip-bg,#fff);
  color: var(--chip-text, inherit);
  border-radius:999px;
  padding:8px 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip .tag{ background:transparent !important; border:none !important; padding:0 !important; margin:0; font-weight:600; color:inherit; }
.chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(2,6,23,.12) }
.chip.active{ background:#EEF2FF; outline:2px solid rgba(147,197,253,.65) }

/* Farbzuordnung pro Fach */
.chip:has(.tag.philosophie){ --chip-color:#FACC15; --chip-bg:#FEF9C3 }
.chip:has(.tag.erdkunde){    --chip-color:#10B981; --chip-bg:#D1FAE5 }
.chip:has(.tag.geschichte){  --chip-color:#D6B48C; --chip-bg:#F5EBDD }
.chip:has(.tag.physik){      --chip-color:#374151; --chip-bg:#E5E7EB }
.chip:has(.tag.sowi){        --chip-color:#8B5CF6; --chip-bg:#EDE9FE }
.chip:has(.tag.deutsch){     --chip-color:#EF4444; --chip-bg:#FEE2E2 }
.chip:has(.tag.sport){       --chip-color:#14B8A6; --chip-bg:#CCFBF1 }
.chip:has(.tag.mathe){       --chip-color:#F97316; --chip-bg:#FFEDD5 }
.chip:has(.tag.chemie){      --chip-color:#84CC16; --chip-bg:#ECFCCB }
.chip:has(.tag.informatik){  --chip-color:#4F46E5; --chip-bg:#E0E7FF }

/* Dark Mode */
html[data-theme="dark"] .chip{ background: rgba(255,255,255,.04) }
html[data-theme="dark"] .chip.active{ background: rgba(139,92,246,.15) }


/* v2.31 Chips order/specificity fix */
.subject-nav .chip{
  background:#FFFFFF !important;
  border:2px solid var(--chip-color, var(--border)) !important;
  color:var(--text) !important;
}
.subject-nav .chip.active{
  background:#EEF2FF !important;
  border-width:3px !important;
  outline:2px solid rgba(147,197,253,.65) !important;
}
/* Color mapping (chip--{fach}) */
.subject-nav .chip--philosophie{ --chip-color:#FACC15 }
.subject-nav .chip--erdkunde{    --chip-color:#10B981 }
.subject-nav .chip--geschichte{  --chip-color:#D6B48C }
.subject-nav .chip--physik{      --chip-color:#374151 }
.subject-nav .chip--sowi{        --chip-color:#8B5CF6 }
.subject-nav .chip--deutsch{     --chip-color:#EF4444 }
.subject-nav .chip--sport{       --chip-color:#14B8A6 }
.subject-nav .chip--mathe{       --chip-color:#F97316 }
.subject-nav .chip--chemie{      --chip-color:#84CC16 }
.subject-nav .chip--informatik{  --chip-color:#4F46E5 }


/* === Dark Mode refinements (v2.32) === */
html[data-theme="dark"]{
  --bg:#0B0E14;
  --card:#0F141E;
  --text:#E6E6EB;
  --muted:#B1B6C2;
  --border:#1E2636;
  --primary:#8AB3FF;
  --primary-dark:#5B8CFF;
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --link:#8AB3FF;
  --link-strong:#BFD1FF;
}
/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(16,22,36,.92), rgba(11,14,20,.70));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .menu-btn{ background:#121826; border:1px solid var(--border) }
/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#0F141E;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9AA3B2 }
/* Cards */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 30px rgba(0,0,0,.35) }
/* Buttons */
html[data-theme="dark"] .btn{ background:#121826; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--primary); color:#0B0E14; border:0 }
/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#0F141E; border:1px solid var(--border) }
/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip{
  background:#0F141E !important;
  border-color:var(--chip-color,var(--border)) !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:rgba(139,92,246,.15) !important }
/* Scroll-to-top & Feedback */
html[data-theme="dark"] #scrollUpBtn,
html[data-theme="dark"] .to-top{ background:#1F2937; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#0F141E; border:1px solid var(--border); color:var(--link-strong) }


/* === Dark Mode: deep navy + beige accents (v2.33) === */
html[data-theme="dark"]{
  /* Deep navy (nicht schwarz) */
  --bg:#0E121A;
  --card:#121826;
  --text:#E9E9EE;
  --muted:#B5BBC9;
  --border:#1E2636;
  --shadow:0 10px 28px rgba(0,0,0,.42);

  /* Beige Akzente */
  --accent:#E6D5B8;          /* Hauptbeige */
  --accent-strong:#D9C29A;   /* stärker für Linien/Outlines */
  --accent-soft:rgba(230,213,184,.25); /* zarte Fills */

  /* Links/Primary in Dark neutralisiert in Richtung Beige */
  --primary:var(--accent);
  --primary-dark:#CDAF85;
  --link:var(--accent);
  --link-strong:#F0E4CD;
}

/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(14,18,26,.78));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] header .nav a.active{
  border-bottom-color: var(--accent-strong);
}

/* Infoboxen / Cards mit zartem beige Akzent */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 28px rgba(0,0,0,.38) }
html[data-theme="dark"] .card--blue::before,
html[data-theme="dark"] .card--brown::before,
html[data-theme="dark"] .card--physik::before,
html[data-theme="dark"] .card--erdkunde::before,
html[data-theme="dark"] .card--geschichte::before{
  background: var(--accent-strong) !important;
  opacity:.9;
}

/* Buttons */
html[data-theme="dark"] .btn{ background:#141B2A; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--accent); color:#0E121A; border:0 }
html[data-theme="dark"] .cta-button{ background:var(--accent); color:#0E121A; border:0 }

/* Suche / Inputs */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#121826;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9FA8BA }

/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .modal .modal-header{ border-bottom:1px solid var(--border) }

/* Chips (Variante A) – Outline in Beige nur für neutrale Bereiche; Fachfarben bleiben */
html[data-theme="dark"] .subject-nav .chip{
  background:#121826 !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.38);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:var(--accent-soft) !important; outline:2px solid var(--accent-strong) !important }
html[data-theme="dark"] .subject-nav .chip:hover{ box-shadow:0 10px 22px rgba(0,0,0,.32) }

/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#121826; border:1px solid var(--border) }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top{ background:#1C2436; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#121826; border:1px solid var(--border); color:var(--link-strong) }


/* === Dark Mode Palette (v2.34) === */
html[data-theme="dark"] {
  --bg: #222831;
  --card: #393E46;
  --text: #F5F5F5;
  --muted: #948979;
  --border: #948979;
  --accent: #DFD0B8;
  --accent-strong: #DFD0B8;
  --accent-soft: rgba(223,208,184,.15);
  --primary: #DFD0B8;
  --primary-dark: #948979;
  --link: #DFD0B8;
  --link-strong: #FFF5E1;
}

/* Backgrounds */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] header { background: var(--card); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] footer { background: var(--card); border-top: 1px solid var(--border); }

/* Cards / Info-Boxen */
html[data-theme="dark"] .card { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .info-box { background: var(--card); border-left: 4px solid var(--accent-strong); }

/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
html[data-theme="dark"] ::placeholder { color: var(--muted); }

/* Buttons */
html[data-theme="dark"] .btn { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .btn.primary { background: var(--accent); color: #222831; border: 0; }
html[data-theme="dark"] .cta-button { background: var(--accent); color: #222831; border: 0; }

/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip {
  background: var(--card) !important;
  border-color: var(--chip-color,var(--border)) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
html[data-theme="dark"] .subject-nav .chip.active {
  background: var(--accent-soft) !important;
  outline: 2px solid var(--accent-strong) !important;
}
html[data-theme="dark"] .subject-nav .chip:hover { box-shadow: 0 8px 18px rgba(0,0,0,.35); }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top { background: var(--card); color: var(--text); border: 1px solid var(--border); }
html[data-theme="dark"] .feedback-btn { background: var(--card); border: 1px solid var(--border); color: var(--link-strong); }


.card-grid.two-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
@media (max-width: 640px){ .card-grid.two-cols{ grid-template-columns:1fr } }
.card-grid{ grid-auto-flow: row dense; }

:root{
  --tag-philosophie:#FACC15;
  --tag-erdkunde:#22C55E;
  --tag-geschichte:#8B5E3C;
  --tag-physik:#374151;
  --tag-kunst:#60A5FA;
  --tag-sowi:#7C3AED;
  --tag-deutsch:#EF4444;
  --tag-sport:#14B8A6;
  --tag-mathe:#F97316;
  --tag-chemie:#84CC16;
  --tag-informatik:#4F46E5;
}

.card{ position:relative; border-radius:16px; padding:16px; background:#fff; border:1px solid #e5e7eb; box-shadow:0 6px 18px rgba(0,0,0,.06) }
html[data-theme="dark"] .card{ background:#222831; border-color:#393E46; box-shadow:0 6px 18px rgba(0,0,0,.35) }
.card::before{ content:""; position:absolute; left:0; top:0; height:6px; width:100%; border-top-left-radius:16px; border-top-right-radius:16px; background:var(--accent,#e5e7eb) }

.card--philosophie{ --accent: var(--tag-philosophie); }
.card--erdkunde{ --accent: var(--tag-erdkunde); }
.card--geschichte{ --accent: var(--tag-geschichte); }
.card--physik{ --accent: var(--tag-physik); }
.card--kunst{ --accent: var(--tag-kunst); }
.card--sowi{ --accent: var(--tag-sowi); }
.card--deutsch{ --accent: var(--tag-deutsch); }
.card--sport{ --accent: var(--tag-sport); }
.card--mathe{ --accent: var(--tag-mathe); }
.card--chemie{ --accent: var(--tag-chemie); }
.card--informatik{ --accent: var(--tag-informatik); }

.card h3{ margin:6px 0 8px; font-size:1.06rem }
.card .muted{ opacity:.8; margin:0 0 10px }
.card-thumb{ width:64px; height:64px; object-fit:cover; border-radius:12px; display:block; margin:6px 0 }

.card .row-tags{ display:flex; align-items:center; justify-content:space-between; margin-top:8px }
.card .row-tags .left{ display:flex; gap:8px; align-items:center }

html[data-theme="dark"] 

.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; }





.card .actions{ margin-top:12px }
.btn.btn-primary{ display:inline-block; padding:8px 14px; border-radius:10px; background:#e6f0ff; border:1px solid #cfe0ff; text-decoration:none }
.btn.btn-primary:hover{ filter:brightness(0.98) }


/* v2.53 – solid status badges */
.badge{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:.8rem; font-weight:600; border:none }
.badge-done{ background:#22C55E; color:#fff; }
.badge-wip{ background:#F59E0B; color:#fff; }
.badge-test{ background:#EF4444; color:#fff; }
.badge-soon{ background:#64748B; color:#fff; } /* neutral for coming soon */


/* v2.53 – filled subject tags */
.pill-tag{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:.8rem; font-weight:600; border:none }
.pill-tag[class*="tag-"]{ color:#fff }
.pill-tag.tag-philosophie, .pill-tag.tag-chemie, .pill-tag.tag-kunst{ color:#111 }
.pill-tag.tag-philosophie{ background: var(--tag-philosophie) }
.pill-tag.tag-erdkunde{ background: var(--tag-erdkunde) }
.pill-tag.tag-geschichte{ background: var(--tag-geschichte) }
.pill-tag.tag-physik{ background: var(--tag-physik) }
.pill-tag.tag-kunst{ background: var(--tag-kunst) }
.pill-tag.tag-sowi{ background: var(--tag-sowi) }
.pill-tag.tag-deutsch{ background: var(--tag-deutsch) }
.pill-tag.tag-sport{ background: var(--tag-sport) }
.pill-tag.tag-mathe{ background: var(--tag-mathe) }
.pill-tag.tag-chemie{ background: var(--tag-chemie) }
.pill-tag.tag-informatik{ background: var(--tag-informatik) }


/* v2.54 – status as small pill button on actions row */
.card .actions{ display:flex; align-items:center; gap:10px; }
.status-btn{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 10px; border-radius:9999px; font-size:.78rem; font-weight:700; line-height:1; }
.status-btn.status-done{ background:#22C55E; color:#fff; }
.status-btn.status-wip{ background:#F59E0B; color:#fff; }
.status-btn.status-test{ background:#EF4444; color:#fff; }
.status-btn.status-soon{ background:#64748B; color:#fff; }

/* menu z-index fix */
.dropdown{ z-index: 140; }

/* v2.55 – menu clickability & layering */
.menu-btn{ position:relative; z-index:150; pointer-events:auto }
.dropdown{ z-index:140 }


/* v2.56 – explicit menuList visibility + positioning */
#menuList{ display:none; position:absolute; top:60px; right:20px; background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.15); min-width:260px; z-index:200; overflow:hidden }
#menuList.open{ display:block }


/* ensure header right area anchors the dropdown properly */
.header .right, header .right{ position:relative }

.modal.open{ display:flex }
/* ultra menu clickability */
.menu-btn{ position:relative; z-index:500; pointer-events:auto }
#menuList{ z-index:480; }

/* === Dark Mode refinements (v2.32) === */
html[data-theme="dark"]{
  --bg:#0B0E14;
  --card:#0F141E;
  --text:#E6E6EB;
  --muted:#B1B6C2;
  --border:#1E2636;
  --primary:#8AB3FF;
  --primary-dark:#5B8CFF;
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --link:#8AB3FF;
  --link-strong:#BFD1FF;
}
/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(16,22,36,.92), rgba(11,14,20,.70));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .menu-btn{ background:#121826; border:1px solid var(--border) }
/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#0F141E;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9AA3B2 }
/* Cards */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 30px rgba(0,0,0,.35) }
/* Buttons */
html[data-theme="dark"] .btn{ background:#121826; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--primary); color:#0B0E14; border:0 }
/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#0F141E; border:1px solid var(--border) }
/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip{
  background:#0F141E !important;
  border-color:var(--chip-color,var(--border)) !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:rgba(139,92,246,.15) !important }
/* Scroll-to-top & Feedback */
html[data-theme="dark"] #scrollUpBtn,
html[data-theme="dark"] .to-top{ background:#1F2937; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#0F141E; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode: deep navy + beige accents (v2.33) === */
html[data-theme="dark"]{
  /* Deep navy (nicht schwarz) */
  --bg:#0E121A;
  --card:#121826;
  --text:#E9E9EE;
  --muted:#B5BBC9;
  --border:#1E2636;
  --shadow:0 10px 28px rgba(0,0,0,.42);

  /* Beige Akzente */
  --accent:#E6D5B8;          /* Hauptbeige */
  --accent-strong:#D9C29A;   /* stärker für Linien/Outlines */
  --accent-soft:rgba(230,213,184,.25); /* zarte Fills */

  /* Links/Primary in Dark neutralisiert in Richtung Beige */
  --primary:var(--accent);
  --primary-dark:#CDAF85;
  --link:var(--accent);
  --link-strong:#F0E4CD;
}

/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(14,18,26,.78));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] header .nav a.active{
  border-bottom-color: var(--accent-strong);
}

/* Infoboxen / Cards mit zartem beige Akzent */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 28px rgba(0,0,0,.38) }
html[data-theme="dark"] .card--blue::before,
html[data-theme="dark"] .card--brown::before,
html[data-theme="dark"] .card--physik::before,
html[data-theme="dark"] .card--erdkunde::before,
html[data-theme="dark"] .card--geschichte::before{
  background: var(--accent-strong) !important;
  opacity:.9;
}

/* Buttons */
html[data-theme="dark"] .btn{ background:#141B2A; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--accent); color:#0E121A; border:0 }
html[data-theme="dark"] .cta-button{ background:var(--accent); color:#0E121A; border:0 }

/* Suche / Inputs */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#121826;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9FA8BA }

/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .modal .modal-header{ border-bottom:1px solid var(--border) }

/* Chips (Variante A) – Outline in Beige nur für neutrale Bereiche; Fachfarben bleiben */
html[data-theme="dark"] .subject-nav .chip{
  background:#121826 !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.38);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:var(--accent-soft) !important; outline:2px solid var(--accent-strong) !important }
html[data-theme="dark"] .subject-nav .chip:hover{ box-shadow:0 10px 22px rgba(0,0,0,.32) }

/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#121826; border:1px solid var(--border) }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top{ background:#1C2436; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#121826; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode Palette (v2.34) === */
html[data-theme="dark"] {
  --bg: #222831;
  --card: #393E46;
  --text: #F5F5F5;
  --muted: #948979;
  --border: #948979;
  --accent: #DFD0B8;
  --accent-strong: #DFD0B8;
  --accent-soft: rgba(223,208,184,.15);
  --primary: #DFD0B8;
  --primary-dark: #948979;
  --link: #DFD0B8;
  --link-strong: #FFF5E1;
}

/* Backgrounds */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] header { background: var(--card); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] footer { background: var(--card); border-top: 1px solid var(--border); }

/* Cards / Info-Boxen */
html[data-theme="dark"] .card { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .info-box { background: var(--card); border-left: 4px solid var(--accent-strong); }

/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
html[data-theme="dark"] ::placeholder { color: var(--muted); }

/* Buttons */
html[data-theme="dark"] .btn { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .btn.primary { background: var(--accent); color: #222831; border: 0; }
html[data-theme="dark"] .cta-button { background: var(--accent); color: #222831; border: 0; }

/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip {
  background: var(--card) !important;
  border-color: var(--chip-color,var(--border)) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
html[data-theme="dark"] .subject-nav .chip.active {
  background: var(--accent-soft) !important;
  outline: 2px solid var(--accent-strong) !important;
}
html[data-theme="dark"] .subject-nav .chip:hover { box-shadow: 0 8px 18px rgba(0,0,0,.35); }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top { background: var(--card); color: var(--text); border: 1px solid var(--border); }
html[data-theme="dark"] .feedback-btn { background: var(--card); border: 1px solid var(--border); color: var(--link-strong); }
/* v2.35 Dark Mode: Haupttitel in Anthrazit */
html[data-theme="dark"] h1.site-title {
  color: #393E46;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
/* v2.39 Changelog styling */
.changelog-list { list-style:none; margin:0; padding:0; }
.changelog-list li { margin:4px 0; }
.changelog-list .version { font-weight:600; }
.changelog-list .date { color:#9ca3af; }
.changelog-list li.feature { color:#22c55e; } /* Grün */
.changelog-list li.bugfix  { color:#6b7280; } /* Grau */
.changelog-list li.design  { color:#3b82f6; } /* Blau */
/* v2.40 Changelog unified styling + modal header */
.changelog-list { list-style:none; margin:0; padding:0; }
.changelog-list li { margin:4px 0; color:#6b7280; } /* default grey */
.changelog-list .version { font-weight:600; }
.changelog-list .date { color:#9ca3af; }

/* Modal header: title left, close right */
.modal .modal-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.modal .modal-header h3 { margin:0; font-weight:700; }
.modal .modal-header .modal-close { margin-left:auto; }

/* Ensure close button aligns right even in existing markup */
#modalChangelog .modal-header { display:flex; align-items:center; justify-content:space-between; }
#modalChangelog .modal-header button { margin-left:auto; }
/* v2.40: Titel Anthrazit global */
h1.site-title { color:#393E46; }
/* v2.41a: Dark title fix + changelog styles + feedback links */
html[data-theme="dark"] h1.site-title,
html[data-theme="dark"] .title-anthrazit { color:#393E46 !important; }

/* Changelog ULs unified look & colors */
#modalChangelog ul { list-style:none; margin:0; padding:0; }
#modalChangelog li { margin:4px 0; color:#6b7280; } /* default grey */
#modalChangelog li .version { font-weight:600; }
#modalChangelog li .date { color:#9ca3af; }
#modalChangelog li.feature { color:#22c55e; }  /* Grün */
#modalChangelog li.design  { color:#3b82f6; }  /* Blau */
#modalChangelog li.bugfix  { color:#6b7280; }  /* Grau */

/* Feedback card links in blue */
.feedback-card a { color:#3b82f6 !important; font-weight:600; }
html[data-theme="dark"] .feedback-card a { color:#60a5fa !important; }
/* v2.42 Changelog color coding */
#modalChangelog .changelog-list { list-style:none; margin:0; padding:0; }
#modalChangelog .changelog-list li { margin:4px 0; }
#modalChangelog .changelog-list .version { font-weight:600; }
#modalChangelog .changelog-list .date { color:#9ca3af; }
#modalChangelog .changelog-list li.feature { color:#22c55e; }  /* Grün */
#modalChangelog .changelog-list li.bugfix  { color:#6b7280; }  /* Grau */
#modalChangelog .changelog-list li.design  { color:#3b82f6; }  /* Blau */
.card-grid{ display:grid;
  .card-grid .card{ grid-column:auto }
 grid-template-columns:1fr; gap:16px }
@media (min-width:700px){ .card-grid.two-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px } }
@media (min-width:1100px){ .card-grid.two-cols{ gap:20px } }
@media (max-width: 640px){ .card-grid.two-cols{ grid-template-columns:1fr } }
.card-grid{ grid-auto-flow: row dense; }

  /* TAG PILL COLORS */
  :root{
  --tag-philosophie:#FACC15;
  --tag-erdkunde:#22C55E;
  --tag-geschichte:#8B5E3C;
  --tag-physik:#374151;
  --tag-kunst:#60A5FA;
  --tag-sowi:#7C3AED;
  --tag-deutsch:#EF4444;
  --tag-sport:#14B8A6;
  --tag-mathe:#F97316;
  --tag-chemie:#84CC16;
  --tag-informatik:#4F46E5;
}

.card{ position:relative; border-radius:16px; padding:16px; background:#fff; border:1px solid #e5e7eb; box-shadow:0 6px 18px rgba(0,0,0,.06) }
html[data-theme="dark"] .card{ background:#222831; border-color:#393E46; box-shadow:0 6px 18px rgba(0,0,0,.35) }
.card::before{ content:""; position:absolute; left:0; top:0; height:6px; width:100%; border-top-left-radius:16px; border-top-right-radius:16px; background:var(--accent,#e5e7eb) }

.card--philosophie{ --accent: var(--tag-philosophie); }
.card--erdkunde{ --accent: var(--tag-erdkunde); }
.card--geschichte{ --accent: var(--tag-geschichte); }
.card--physik{ --accent: var(--tag-physik); }
.card--kunst{ --accent: var(--tag-kunst); }
.card--sowi{ --accent: var(--tag-sowi); }
.card--deutsch{ --accent: var(--tag-deutsch); }
.card--sport{ --accent: var(--tag-sport); }
.card--mathe{ --accent: var(--tag-mathe); }
.card--chemie{ --accent: var(--tag-chemie); }
.card--informatik{ --accent: var(--tag-informatik); }

.card h3{ margin:6px 0 8px; font-size:1.06rem }
.card .muted{ opacity:.8; margin:0 0 10px }
.card-thumb{ width:64px; height:64px; object-fit:cover; border-radius:12px; display:block; margin:6px 0 }

.card .row-tags{ display:flex; align-items:center; justify-content:space-between; margin-top:8px }
.card .row-tags .left{ display:flex; gap:8px; align-items:center }
html[data-theme="dark"] .badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; }
.card .actions{ margin-top:12px }
.btn.btn-primary{ display:inline-block; padding:8px 14px; border-radius:10px; background:#e6f0ff; border:1px solid #cfe0ff; text-decoration:none }
.btn.btn-primary:hover{ filter:brightness(0.98) }
/* Clean, unified dropdown buttons */
          .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); min-width:280px; display:none; z-index:70; overflow:hidden; padding:10px }
          .dropdown.open{ display:block }
          .menu-stack{ display:flex; flex-direction:column; gap:8px }
          .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer; text-decoration:none; color:var(--text); font-weight:600; justify-content:space-between }
          .btn-menu{ width:100% }
          .btn:hover{ box-shadow:0 4px 14px rgba(2,6,23,.10) }
          html[data-theme="dark"] .btn:hover{ box-shadow:0 6px 20px rgba(0,0,0,.35) }
.admin-only{ display:none }
  .admin-yes .admin-only{ display:initial }


/* === styles from powerpoints.html === */
:root{
    --bg:#F3F5F9; --text:#0B1220; --muted:#4B5563; --primary:#2563EB; --primary-dark:#1D4ED8;
    --yellow:#FDE68A; --lightblue:#93C5FD; --lightbrown:#D6B48C;
    --physik:#374151; --erdkunde:#34D399; --sowi:#8B5CF6;
    --card:#FFFFFF; --border:#E2E8F0; --shadow:0 8px 30px rgba(2,6,23,.08);
    --radius:16px; --maxw:1100px;
    --status-green:#10B981; --status-yellow:#F59E0B; --status-red:#EF4444;
    --link:#2563EB; --link-strong:#1E40AF;
  }
  html[data-theme="dark"]{
    --bg:#0B0E14; --text:#E6E6EB; --muted:#B1B6C2; --primary:#5B8CFF; --primary-dark:#3D6BFF;
    --yellow:#F1D37E; --lightblue:#87B6FF; --lightbrown:#C1A074; --physik:#9CA3AF; --erdkunde:#34D399; --sowi:#A78BFA;
    --card:#10141E; --border:#1E2636; --shadow:0 10px 30px rgba(0,0,0,.35); --link:#8AB3FF; --link-strong:#BFD1FF;
  }
  *{ box-sizing:border-box } 
  body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial; background:var(--bg); color:var(--text); line-height:1.5 }
  a{ color:inherit; text-decoration:none }
  .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px }

  header{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.2) blur(6px); background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] header{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; height:60px }
  .brand a{ font-weight:700; letter-spacing:.2px; white-space:nowrap }
  .right{ display:flex; align-items:center; gap:16px }
  .topnav{ display:flex; align-items:center; gap:14px }
  .topnav a{ position:relative; padding:2px 4px; font-weight:600 }
  .topnav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transform:scaleX(0); transform-origin:left; transition:transform .25s ease, background .25s ease }
  .topnav a.active::after{ background:var(--primary); transform:scaleX(1) }

  .actions{ display:flex; align-items:center; gap:10px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  .menu-dots{ font-size:20px; line-height:1 }
  .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); min-width:300px; display:none; overflow:hidden; z-index:70 }
  .dropdown.open{ display:block }
  .dropdown .row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px dashed var(--border) }
  .dropdown .row:last-child{ border-bottom:none }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer }
  .btn.primary{ border-color:#93C5FD; background:#EFF6FF; color:#1E3A8A; font-weight:700 }

  .switch{ position:relative; width:52px; height:28px; background:#E5E7EB; border:1px solid var(--border); border-radius:999px; cursor:pointer }
  .switch .knob{ position:absolute; top:2px; left:2px; width:24px; height:24px; background:#fff; border-radius:50%; box-shadow:var(--shadow); transition:left .2s ease }
  .switch.on{ background:#C7D2FE } .switch.on .knob{ left:26px }

  .hero{ padding:36px 0 24px; text-align:center }
  .hero h1{ margin:0 0 6px 0; font-size:clamp(1.9rem,4.2vw,2.6rem) }
  .hero p{ margin:0; color:var(--muted) }

  .search-wrap{ display:flex; justify-content:center; margin-top:12px }
  .search{ width:min(680px,92vw); display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow) }
  .search input{ width:100%; border:none; outline:none; background:transparent; color:var(--text); font-size:1rem }
  .search .hint{ color:var(--muted); font-size:.9rem }

  .section{ padding:22px 0 }
  .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
  .card{ position:relative; grid-column:span 12; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:18px; min-height:180px; display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden }
  .card::before{ content:""; position:absolute; left:0; top:0; right:0; height:6px; background:var(--yellow); border-top-left-radius:16px; border-top-right-radius:16px }
  .card--blue::before{ background:var(--lightblue) } .card--brown::before{ background:var(--lightbrown) }
  .card--physik::before{ background:var(--physik) } .card--erdkunde::before{ background:var(--erdkunde) } .card--sowi::before{ background:var(--sowi) } .card--philosophie::before{ background:var(--yellow) } .card--geschichte::before{ background:var(--lightbrown) }
  .card h3{ margin:0; font-size:1.12rem } .card p{ margin:0; color:var(--muted) }
  .project-note{ font-size:.9rem; color:#6B7280 }
  @media (min-width:680px){ .card{ grid-column:span 6 } }

  .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
  .tag{ font-size:.8rem; border-radius:999px; padding:2px 8px; border:1px solid var(--border) }
  .tag.philosophie{ background:var(--yellow) } .tag.kunst{ background:var(--lightblue) } .tag.geschichte{ background:var(--lightbrown) }
  .tag.physik{ background:var(--physik); color:#fff } .tag.erdkunde{ background:var(--erdkunde) } .tag.sowi{ background:var(--sowi); color:#fff }

  .status{ position:absolute; right:12px; bottom:12px; font-size:.78rem; font-weight:700; color:#fff; padding:4px 8px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15) }
  .status.green{ background:var(--status-green) } .status.yellow{ background:var(--status-yellow) } .status.red{ background:var(--status-red) }

  .ghost{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:#EFF6FF; color:#1E3A8A; border:1px solid #DBEAFE; font-weight:600; transition:background-color .2s ease, transform .15s ease }
  .ghost:hover{ background:#DBEAFE; transform:translateY(-1px) }

  .info,.improvements{ background:#F9FAFB; border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:16px; box-shadow:var(--shadow); padding:clamp(18px,3vw,24px); margin-top:18px }
  html[data-theme="dark"] .info,html[data-theme="dark"] .improvements{ background:#0F141E }
  .info h3,.improvements h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .info a.link{ color:var(--link); font-weight:600 } .info a.link:hover{ text-decoration:underline } .info a.mail{ color:var(--link-strong); font-weight:700 }

  .faq{ margin-top:18px } .faq h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .faq-item{ background:#FFF; border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0; box-shadow:var(--shadow) }
  html[data-theme="dark"] .faq-item{ background:#0F141E }
  .kw-philosophie{ color:#8a6c00 } .kw-kunst{ color:#1E40AF } .kw-geschichte{ color:#5B3A1E }

  footer{ position:relative; padding:48px 0 56px; color:var(--muted); border-top:1px solid var(--border); margin-top:20px }
  .footer-inner{ position:relative; text-align:center }
  .cta-button{ display:inline-block; padding:12px 18px; border-radius:999px; border:2px solid #93C5FD; background:#EFF6FF; font-weight:800; box-shadow:0 8px 24px rgba(147,197,253,.35); color:#6D28D9 }
  .cta-button:hover{ transform:translateY(-1px) }
  .footer-meta{ margin-top:10px }
  .qr-in-footer{ position:absolute; left:20px; bottom:-22px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px }
  .qr-in-footer img{ display:block; width:120px; height:auto }
  .share-label{ font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px }
  .share-label svg{ width:20px; height:20px }

  /* v2.21 to-top blue */
.to-top{ position:fixed; right:18px; bottom:18px; display:none; width:46px; height:46px; border-radius:999px; border:2px solid #fff; background:transparent; box-shadow:0 10px 24px rgba(2,6,23,.25);  align-items:center; justify-content:center; transition:transform .15s ease, box-shadow .2s ease }
.to-top:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,6,23,.35) }
.to-top svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2 }
  .to-top.show{ display:flex } .feedback-btn{ position:fixed; right:68px; bottom:18px; display:none; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid #DBEAFE; background:#EFF6FF; box-shadow:var(--shadow); font-weight:700; color:#1E3A8A; z-index:65 }
  .feedback-btn.show{ display:inline-flex } .feedback-btn:hover{ transform:translateY(-2px); border-color:#93C5FD }

  @media (max-width:640px){ .qr-in-footer{ display:none } }

  /* Subject nav (PP) */
  .subject-nav{ position:sticky; top:60px; z-index:50; background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] .subject-nav{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .subject-inner{ display:flex; gap:10px; overflow:auto; padding:10px 20px }
  .chip{ white-space:nowrap; padding:8px 14px; border-radius:999px; border:1px solid var(--border); display:inline-flex; align-items:center; gap:8px; box-shadow:0 1px 0 rgba(0,0,0,.03) }
  .chip .tag{ margin:0 }
  .chip.active{ outline:2px solid #93C5FD }

  .subject{ scroll-margin-top:96px; padding-top:14px }
  .subject h2{ margin:0 0 4px 0; font-size:1.3rem }
  .subject .sub{ color:var(--muted); margin:0 0 10px 0 }

  
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }
  .menu-btn:hover{ box-shadow:0 8px 18px rgba(2,6,23,.12) }

  /* Header layout */
/* v2.17 header right align */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; font-size:18px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
/* v2.16 header tune */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .brand{ font-weight:800; font-size:18px; letter-spacing:.1px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ text-decoration:none; color:var(--text); padding:6px 4px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  /* Hamburger to X animation */
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }

  /* Dropdown polish */
  .dropdown{ position:absolute; right:16px; top:60px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px; display:none }
  .dropdown.open{ display:block }
  .dropdown .row{ margin:6px 0 }
  .dropdown .btn{ width:100%; border:1.5px solid var(--primary); background:#fff }
  html[data-theme="dark"] .dropdown .btn{ background:#111827 }
  /* Settings overlay */
  .overlay-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(2px); display:none; z-index:90 }
  .modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px,94vw); max-height:80vh; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); display:none; z-index:91 }
  .modal-header{ padding:18px 18px 8px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
  .modal-body{ padding:14px 18px }
  .btn.linklike{ background:transparent; border:none; color:var(--link); font-weight:700; cursor:pointer }
  .row-setting{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border) }
  .row-setting:last-child{ border-bottom:none }
  .icon-toggle{ display:flex; gap:8px }
  .icon-btn{ width:40px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--card); border-radius:10px; cursor:pointer }
  .icon-btn.active{ background:#EFF6FF; border-color:#93C5FD }
  .icon-btn svg{ width:18px; height:18px; stroke:currentColor }
  /* Add-website: 3 cards in row, plain + soft */
  .card--plain::before{ display:none }
  .card--soft{ box-shadow:0 10px 30px rgba(147,197,253,.28) }
  .grid.three .card{ grid-column:span 12 }
  @media (min-width:680px){ .grid.three .card{ grid-column:span 6 } }
  @media (min-width:980px){ .grid.three .card{ grid-column:span 4 } }
html[data-theme="dark"] .to-top{ background:rgba(255,255,255,.18); box-shadow:0 10px 24px rgba(0,0,0,.45) }
/* v2.20 legend spacing */
.modal .legend-tags, .modal .legend-status{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.modal .legend-status .status{ margin-right:0 } /* gap handles spacing */
/* v2.21 legend list */
.modal .legend-list{ list-style:none; padding:0; margin:10px 0 0 0 }
.modal .legend-list li{ display:flex; align-items:center; gap:10px; margin:6px 0 }
.modal .legend-list .status{ flex:0 0 auto }
/* v2.23 legend recode */
.modal .status-list{ list-style:none; padding:0; margin:12px 0 0 0; display:grid; grid-template-columns:1fr; gap:10px }
.modal .status-item{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:2px; align-items:center }
.modal .status-item .status{ grid-column:1; grid-row:1 / span 2 }
.modal .status-item .name{ grid-column:2; grid-row:1; font-weight:600 }
.modal .status-item .desc{ grid-column:2; grid-row:2; color:var(--muted) }

/* removed old Variant A */
.chip{
  background:#FFFFFF;
  border:2px solid var(--chip-color, var(--border));
  border-radius:999px;
  padding:8px 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 1px 0 rgba(2,6,23,.03);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip .tag{
  /* neutralize old tag pill look inside chip */
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0;
  font-weight:600;
  color:inherit;
}
/* Hover: soft lift + subtle shadow */
.chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(2,6,23,.12) }
/* Active: light lilac fill + stronger outline */
.chip.active{ background:#EEF2FF; border-width:3px }
/* Dark mode tweaks */
html[data-theme="dark"] .chip{ background:#0F141E }
html[data-theme="dark"] .chip.active{ background:rgba(139,92,246,.15) }

/* Color mapping via --chip-color set by inner .tag subject */
.chip .tag.philosophie{ --chip-color:#FACC15 }  /* gelb */
.chip .tag.erdkunde{ --chip-color:#10B981 }    /* grün */
.chip .tag.geschichte{ --chip-color:#D6B48C }  /* braun/hellbraun wie vorher */
.chip .tag.physik{ --chip-color:#374151 }      /* dunkelgrau */
.chip .tag.sowi{ --chip-color:#8B5CF6 }        /* violett */

/* Neue Farben */
.chip .tag.deutsch{ --chip-color:#EF4444 }     /* rot */
.chip .tag.sport{ --chip-color:#14B8A6 }       /* türkis */
.chip .tag.mathe{ --chip-color:#F97316 }       /* orange */
.chip .tag.chemie{ --chip-color:#84CC16 }      /* hellgrün */
.chip .tag.informatik{ --chip-color:#4F46E5 }  /* indigo */

/* v2.29 Colored Chips Fix */
.chip {
  border:2px solid var(--chip-color, var(--border));
  background: var(--chip-bg, #FFFFFF);
  color: var(--chip-text, inherit);
  border-radius:999px;
  padding:8px 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 1px 0 rgba(2,6,23,.03);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip .tag{ background:transparent !important; border:none !important; padding:0 !important; margin:0; font-weight:600; color:inherit; }
.chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(2,6,23,.12) }
.chip.active{ outline:2px solid rgba(147,197,253,.65) }

.chip .tag.philosophie{ --chip-color:#FACC15; --chip-bg:#FEF9C3 }
.chip .tag.erdkunde{    --chip-color:#10B981; --chip-bg:#D1FAE5 }
.chip .tag.geschichte{  --chip-color:#D6B48C; --chip-bg:#F5EBDD }
.chip .tag.physik{      --chip-color:#374151; --chip-bg:#E5E7EB }
.chip .tag.sowi{        --chip-color:#8B5CF6; --chip-bg:#EDE9FE }
.chip .tag.deutsch{     --chip-color:#EF4444; --chip-bg:#FEE2E2 }
.chip .tag.sport{       --chip-color:#14B8A6; --chip-bg:#CCFBF1 }
.chip .tag.mathe{       --chip-color:#F97316; --chip-bg:#FFEDD5 }
.chip .tag.chemie{      --chip-color:#84CC16; --chip-bg:#ECFCCB }
.chip .tag.informatik{  --chip-color:#4F46E5; --chip-bg:#E0E7FF }

html[data-theme="dark"] .chip{ background: rgba(255,255,255,.04) }
html[data-theme="dark"] .chip .tag.philosophie{ --chip-bg: rgba(250,204,21,.18) }
html[data-theme="dark"] .chip .tag.erdkunde{    --chip-bg: rgba(16,185,129,.18) }
html[data-theme="dark"] .chip .tag.geschichte{  --chip-bg: rgba(214,180,140,.18) }
html[data-theme="dark"] .chip .tag.physik{      --chip-bg: rgba(55,65,81,.25) }
html[data-theme="dark"] .chip .tag.sowi{        --chip-bg: rgba(139,92,246,.20) }
html[data-theme="dark"] .chip .tag.deutsch{     --chip-bg: rgba(239,68,68,.20) }
html[data-theme="dark"] .chip .tag.sport{       --chip-bg: rgba(20,184,166,.20) }
html[data-theme="dark"] .chip .tag.mathe{       --chip-bg: rgba(249,115,22,.20) }
html[data-theme="dark"] .chip .tag.chemie{      --chip-bg: rgba(132,204,22,.20) }
html[data-theme="dark"] .chip .tag.informatik{  --chip-bg: rgba(79,70,229,.20) }

/* === v2.30 Subject Chips: Variante A mit Farben === */
.chip {
  border:2px solid var(--chip-color, var(--border));
  background: var(--chip-bg,#fff);
  color: var(--chip-text, inherit);
  border-radius:999px;
  padding:8px 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip .tag{ background:transparent !important; border:none !important; padding:0 !important; margin:0; font-weight:600; color:inherit; }
.chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(2,6,23,.12) }
.chip.active{ background:#EEF2FF; outline:2px solid rgba(147,197,253,.65) }

/* Farbzuordnung pro Fach */
.chip:has(.tag.philosophie){ --chip-color:#FACC15; --chip-bg:#FEF9C3 }
.chip:has(.tag.erdkunde){    --chip-color:#10B981; --chip-bg:#D1FAE5 }
.chip:has(.tag.geschichte){  --chip-color:#D6B48C; --chip-bg:#F5EBDD }
.chip:has(.tag.physik){      --chip-color:#374151; --chip-bg:#E5E7EB }
.chip:has(.tag.sowi){        --chip-color:#8B5CF6; --chip-bg:#EDE9FE }
.chip:has(.tag.deutsch){     --chip-color:#EF4444; --chip-bg:#FEE2E2 }
.chip:has(.tag.sport){       --chip-color:#14B8A6; --chip-bg:#CCFBF1 }
.chip:has(.tag.mathe){       --chip-color:#F97316; --chip-bg:#FFEDD5 }
.chip:has(.tag.chemie){      --chip-color:#84CC16; --chip-bg:#ECFCCB }
.chip:has(.tag.informatik){  --chip-color:#4F46E5; --chip-bg:#E0E7FF }

/* Dark Mode */
html[data-theme="dark"] .chip{ background: rgba(255,255,255,.04) }
html[data-theme="dark"] .chip.active{ background: rgba(139,92,246,.15) }

/* v2.31 Chips order/specificity fix */
.subject-nav .chip{
  background:#FFFFFF !important;
  border:2px solid var(--chip-color, var(--border)) !important;
  color:var(--text) !important;
}
.subject-nav .chip.active{
  background:#EEF2FF !important;
  border-width:3px !important;
  outline:2px solid rgba(147,197,253,.65) !important;
}
/* Color mapping (chip--{fach}) */
.subject-nav .chip--philosophie{ --chip-color:#FACC15 }
.subject-nav .chip--erdkunde{    --chip-color:#10B981 }
.subject-nav .chip--geschichte{  --chip-color:#D6B48C }
.subject-nav .chip--physik{      --chip-color:#374151 }
.subject-nav .chip--sowi{        --chip-color:#8B5CF6 }
.subject-nav .chip--deutsch{     --chip-color:#EF4444 }
.subject-nav .chip--sport{       --chip-color:#14B8A6 }
.subject-nav .chip--mathe{       --chip-color:#F97316 }
.subject-nav .chip--chemie{      --chip-color:#84CC16 }
.subject-nav .chip--informatik{  --chip-color:#4F46E5 }
/* === Dark Mode refinements (v2.32) === */
html[data-theme="dark"]{
  --bg:#0B0E14;
  --card:#0F141E;
  --text:#E6E6EB;
  --muted:#B1B6C2;
  --border:#1E2636;
  --primary:#8AB3FF;
  --primary-dark:#5B8CFF;
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --link:#8AB3FF;
  --link-strong:#BFD1FF;
}
/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(16,22,36,.92), rgba(11,14,20,.70));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .menu-btn{ background:#121826; border:1px solid var(--border) }
/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#0F141E;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9AA3B2 }
/* Cards */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 30px rgba(0,0,0,.35) }
/* Buttons */
html[data-theme="dark"] .btn{ background:#121826; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--primary); color:#0B0E14; border:0 }
/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#0F141E; border:1px solid var(--border) }
/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip{
  background:#0F141E !important;
  border-color:var(--chip-color,var(--border)) !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:rgba(139,92,246,.15) !important }
/* Scroll-to-top & Feedback */
html[data-theme="dark"] #scrollUpBtn,
html[data-theme="dark"] .to-top{ background:#1F2937; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#0F141E; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode: deep navy + beige accents (v2.33) === */
html[data-theme="dark"]{
  /* Deep navy (nicht schwarz) */
  --bg:#0E121A;
  --card:#121826;
  --text:#E9E9EE;
  --muted:#B5BBC9;
  --border:#1E2636;
  --shadow:0 10px 28px rgba(0,0,0,.42);

  /* Beige Akzente */
  --accent:#E6D5B8;          /* Hauptbeige */
  --accent-strong:#D9C29A;   /* stärker für Linien/Outlines */
  --accent-soft:rgba(230,213,184,.25); /* zarte Fills */

  /* Links/Primary in Dark neutralisiert in Richtung Beige */
  --primary:var(--accent);
  --primary-dark:#CDAF85;
  --link:var(--accent);
  --link-strong:#F0E4CD;
}

/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(14,18,26,.78));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] header .nav a.active{
  border-bottom-color: var(--accent-strong);
}

/* Infoboxen / Cards mit zartem beige Akzent */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 28px rgba(0,0,0,.38) }
html[data-theme="dark"] .card--blue::before,
html[data-theme="dark"] .card--brown::before,
html[data-theme="dark"] .card--physik::before,
html[data-theme="dark"] .card--erdkunde::before,
html[data-theme="dark"] .card--geschichte::before{
  background: var(--accent-strong) !important;
  opacity:.9;
}

/* Buttons */
html[data-theme="dark"] .btn{ background:#141B2A; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--accent); color:#0E121A; border:0 }
html[data-theme="dark"] .cta-button{ background:var(--accent); color:#0E121A; border:0 }

/* Suche / Inputs */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#121826;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9FA8BA }

/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .modal .modal-header{ border-bottom:1px solid var(--border) }

/* Chips (Variante A) – Outline in Beige nur für neutrale Bereiche; Fachfarben bleiben */
html[data-theme="dark"] .subject-nav .chip{
  background:#121826 !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.38);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:var(--accent-soft) !important; outline:2px solid var(--accent-strong) !important }
html[data-theme="dark"] .subject-nav .chip:hover{ box-shadow:0 10px 22px rgba(0,0,0,.32) }

/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#121826; border:1px solid var(--border) }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top{ background:#1C2436; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#121826; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode Palette (v2.34) === */
html[data-theme="dark"] {
  --bg: #222831;
  --card: #393E46;
  --text: #F5F5F5;
  --muted: #948979;
  --border: #948979;
  --accent: #DFD0B8;
  --accent-strong: #DFD0B8;
  --accent-soft: rgba(223,208,184,.15);
  --primary: #DFD0B8;
  --primary-dark: #948979;
  --link: #DFD0B8;
  --link-strong: #FFF5E1;
}

/* Backgrounds */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] header { background: var(--card); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] footer { background: var(--card); border-top: 1px solid var(--border); }

/* Cards / Info-Boxen */
html[data-theme="dark"] .card { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .info-box { background: var(--card); border-left: 4px solid var(--accent-strong); }

/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
html[data-theme="dark"] ::placeholder { color: var(--muted); }

/* Buttons */
html[data-theme="dark"] .btn { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .btn.primary { background: var(--accent); color: #222831; border: 0; }
html[data-theme="dark"] .cta-button { background: var(--accent); color: #222831; border: 0; }

/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip {
  background: var(--card) !important;
  border-color: var(--chip-color,var(--border)) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
html[data-theme="dark"] .subject-nav .chip.active {
  background: var(--accent-soft) !important;
  outline: 2px solid var(--accent-strong) !important;
}
html[data-theme="dark"] .subject-nav .chip:hover { box-shadow: 0 8px 18px rgba(0,0,0,.35); }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top { background: var(--card); color: var(--text); border: 1px solid var(--border); }
html[data-theme="dark"] .feedback-btn { background: var(--card); border: 1px solid var(--border); color: var(--link-strong); }
/* v2.35 Dark Mode: Haupttitel in Anthrazit */
html[data-theme="dark"] h1.site-title {
  color: #393E46;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
/* v2.39 Changelog styling */
.changelog-list { list-style:none; margin:0; padding:0; }
.changelog-list li { margin:4px 0; }
.changelog-list .version { font-weight:600; }
.changelog-list .date { color:#9ca3af; }
.changelog-list li.feature { color:#22c55e; } /* Grün */
.changelog-list li.bugfix  { color:#6b7280; } /* Grau */
.changelog-list li.design  { color:#3b82f6; } /* Blau */
/* v2.41a: Dark title fix + changelog styles + feedback links */
html[data-theme="dark"] h1.site-title,
html[data-theme="dark"] .title-anthrazit { color:#393E46 !important; }

/* Changelog ULs unified look & colors */
#modalChangelog ul { list-style:none; margin:0; padding:0; }
#modalChangelog li { margin:4px 0; color:#6b7280; } /* default grey */
#modalChangelog li .version { font-weight:600; }
#modalChangelog li .date { color:#9ca3af; }
#modalChangelog li.feature { color:#22c55e; }  /* Grün */
#modalChangelog li.design  { color:#3b82f6; }  /* Blau */
#modalChangelog li.bugfix  { color:#6b7280; }  /* Grau */

/* Feedback card links in blue */
.feedback-card a { color:#3b82f6 !important; font-weight:600; }
html[data-theme="dark"] .feedback-card a { color:#60a5fa !important; }
/* v2.42 Changelog color coding */
#modalChangelog .changelog-list { list-style:none; margin:0; padding:0; }
#modalChangelog .changelog-list li { margin:4px 0; }
#modalChangelog .changelog-list .version { font-weight:600; }
#modalChangelog .changelog-list .date { color:#9ca3af; }
#modalChangelog .changelog-list li.feature { color:#22c55e; }  /* Grün */
#modalChangelog .changelog-list li.bugfix  { color:#6b7280; }  /* Grau */
#modalChangelog .changelog-list li.design  { color:#3b82f6; }  /* Blau */
.card-grid.two-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
@media (max-width: 640px){ .card-grid.two-cols{ grid-template-columns:1fr } }
.card-grid{ grid-auto-flow: row dense; }

:root{
  --tag-philosophie:#FACC15;
  --tag-erdkunde:#22C55E;
  --tag-geschichte:#8B5E3C;
  --tag-physik:#374151;
  --tag-kunst:#60A5FA;
  --tag-sowi:#7C3AED;
  --tag-deutsch:#EF4444;
  --tag-sport:#14B8A6;
  --tag-mathe:#F97316;
  --tag-chemie:#84CC16;
  --tag-informatik:#4F46E5;
}

.card{ position:relative; border-radius:16px; padding:16px; background:#fff; border:1px solid #e5e7eb; box-shadow:0 6px 18px rgba(0,0,0,.06) }
html[data-theme="dark"] .card{ background:#222831; border-color:#393E46; box-shadow:0 6px 18px rgba(0,0,0,.35) }
.card::before{ content:""; position:absolute; left:0; top:0; height:6px; width:100%; border-top-left-radius:16px; border-top-right-radius:16px; background:var(--accent,#e5e7eb) }

.card--philosophie{ --accent: var(--tag-philosophie); }
.card--erdkunde{ --accent: var(--tag-erdkunde); }
.card--geschichte{ --accent: var(--tag-geschichte); }
.card--physik{ --accent: var(--tag-physik); }
.card--kunst{ --accent: var(--tag-kunst); }
.card--sowi{ --accent: var(--tag-sowi); }
.card--deutsch{ --accent: var(--tag-deutsch); }
.card--sport{ --accent: var(--tag-sport); }
.card--mathe{ --accent: var(--tag-mathe); }
.card--chemie{ --accent: var(--tag-chemie); }
.card--informatik{ --accent: var(--tag-informatik); }

.card h3{ margin:6px 0 8px; font-size:1.06rem }
.card .muted{ opacity:.8; margin:0 0 10px }
.card-thumb{ width:64px; height:64px; object-fit:cover; border-radius:12px; display:block; margin:6px 0 }

.card .row-tags{ display:flex; align-items:center; justify-content:space-between; margin-top:8px }
.card .row-tags .left{ display:flex; gap:8px; align-items:center }
.pill-tag{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.78rem; background:#fff; border:1px solid currentColor; color:#111 }
html[data-theme="dark"] .pill-tag{ background:#222831; color:#DFD0B8; border-color:#948979 }

.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; }
.badge-done{ background:#22c55e20; color:#16a34a; border:1px solid #16a34a33 }
.badge-wip{ background:#f59e0b20; color:#d97706; border:1px solid #d9770633 }
.badge-test{ background:#6b728020; color:#374151; border:1px solid #37415133 }
.badge-soon{ background:#ef444420; color:#b91c1c; border:1px solid #b91c1c33 }

.card .actions{ margin-top:12px }
.btn.btn-primary{ display:inline-block; padding:8px 14px; border-radius:10px; background:#e6f0ff; border:1px solid #cfe0ff; text-decoration:none }
.btn.btn-primary:hover{ filter:brightness(0.98) }
/* Clean, unified dropdown buttons */
          .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); min-width:280px; display:none; z-index:70; overflow:hidden; padding:10px }
          .dropdown.open{ display:block }
          .menu-stack{ display:flex; flex-direction:column; gap:8px }
          .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer; text-decoration:none; color:var(--text); font-weight:600; justify-content:space-between }
          .btn-menu{ width:100% }
          .btn:hover{ box-shadow:0 4px 14px rgba(2,6,23,.10) }
          html[data-theme="dark"] .btn:hover{ box-shadow:0 6px 20px rgba(0,0,0,.35) }
.admin-only{ display:none }
  .admin-yes .admin-only{ display:initial }
.card-grid.two-cols{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px }
@media (max-width: 640px){ .card-grid.two-cols{ grid-template-columns: 1fr } }
.card-thumb{ width:100%; height:140px; object-fit:cover; border-radius:12px }
.meta{ display:flex; gap:8px; margin-top:8px; font-size:.9rem; opacity:.8 }


/* === styles from videos.html === */
:root{
    --bg:#F3F5F9; --text:#0B1220; --muted:#4B5563; --primary:#2563EB; --primary-dark:#1D4ED8;
    --yellow:#FDE68A; --lightblue:#93C5FD; --lightbrown:#D6B48C;
    --physik:#374151; --erdkunde:#34D399; --sowi:#8B5CF6;
    --card:#FFFFFF; --border:#E2E8F0; --shadow:0 8px 30px rgba(2,6,23,.08);
    --radius:16px; --maxw:1100px;
    --status-green:#10B981; --status-yellow:#F59E0B; --status-red:#EF4444;
    --link:#2563EB; --link-strong:#1E40AF;
  }
  html[data-theme="dark"]{
    --bg:#0B0E14; --text:#E6E6EB; --muted:#B1B6C2; --primary:#5B8CFF; --primary-dark:#3D6BFF;
    --yellow:#F1D37E; --lightblue:#87B6FF; --lightbrown:#C1A074; --physik:#9CA3AF; --erdkunde:#34D399; --sowi:#A78BFA;
    --card:#10141E; --border:#1E2636; --shadow:0 10px 30px rgba(0,0,0,.35); --link:#8AB3FF; --link-strong:#BFD1FF;
  }
  *{ box-sizing:border-box } 
  body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial; background:var(--bg); color:var(--text); line-height:1.5 }
  a{ color:inherit; text-decoration:none }
  .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px }

  header{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.2) blur(6px); background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] header{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; height:60px }
  .brand a{ font-weight:700; letter-spacing:.2px; white-space:nowrap }
  .right{ display:flex; align-items:center; gap:16px }
  .topnav{ display:flex; align-items:center; gap:14px }
  .topnav a{ position:relative; padding:2px 4px; font-weight:600 }
  .topnav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transform:scaleX(0); transform-origin:left; transition:transform .25s ease, background .25s ease }
  .topnav a.active::after{ background:var(--primary); transform:scaleX(1) }

  .actions{ display:flex; align-items:center; gap:10px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  .menu-dots{ font-size:20px; line-height:1 }
  .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); min-width:300px; display:none; overflow:hidden; z-index:70 }
  .dropdown.open{ display:block }
  .dropdown .row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px dashed var(--border) }
  .dropdown .row:last-child{ border-bottom:none }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer }
  .btn.primary{ border-color:#93C5FD; background:#EFF6FF; color:#1E3A8A; font-weight:700 }

  .switch{ position:relative; width:52px; height:28px; background:#E5E7EB; border:1px solid var(--border); border-radius:999px; cursor:pointer }
  .switch .knob{ position:absolute; top:2px; left:2px; width:24px; height:24px; background:#fff; border-radius:50%; box-shadow:var(--shadow); transition:left .2s ease }
  .switch.on{ background:#C7D2FE } .switch.on .knob{ left:26px }

  .hero{ padding:36px 0 24px; text-align:center }
  .hero h1{ margin:0 0 6px 0; font-size:clamp(1.9rem,4.2vw,2.6rem) }
  .hero p{ margin:0; color:var(--muted) }

  .search-wrap{ display:flex; justify-content:center; margin-top:12px }
  .search{ width:min(680px,92vw); display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow) }
  .search input{ width:100%; border:none; outline:none; background:transparent; color:var(--text); font-size:1rem }
  .search .hint{ color:var(--muted); font-size:.9rem }

  .section{ padding:22px 0 }
  .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
  .card{ position:relative; grid-column:span 12; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:18px; min-height:180px; display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden }
  .card::before{ content:""; position:absolute; left:0; top:0; right:0; height:6px; background:var(--yellow); border-top-left-radius:16px; border-top-right-radius:16px }
  .card--blue::before{ background:var(--lightblue) } .card--brown::before{ background:var(--lightbrown) }
  .card--physik::before{ background:var(--physik) } .card--erdkunde::before{ background:var(--erdkunde) } .card--sowi::before{ background:var(--sowi) } .card--philosophie::before{ background:var(--yellow) } .card--geschichte::before{ background:var(--lightbrown) }
  .card h3{ margin:0; font-size:1.12rem } .card p{ margin:0; color:var(--muted) }
  .project-note{ font-size:.9rem; color:#6B7280 }
  @media (min-width:680px){ .card{ grid-column:span 6 } }

  .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
  .tag{ font-size:.8rem; border-radius:999px; padding:2px 8px; border:1px solid var(--border) }
  .tag.philosophie{ background:var(--yellow) } .tag.kunst{ background:var(--lightblue) } .tag.geschichte{ background:var(--lightbrown) }
  .tag.physik{ background:var(--physik); color:#fff } .tag.erdkunde{ background:var(--erdkunde) } .tag.sowi{ background:var(--sowi); color:#fff }

  .status{ position:absolute; right:12px; bottom:12px; font-size:.78rem; font-weight:700; color:#fff; padding:4px 8px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15) }
  .status.green{ background:var(--status-green) } .status.yellow{ background:var(--status-yellow) } .status.red{ background:var(--status-red) }

  .ghost{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:#EFF6FF; color:#1E3A8A; border:1px solid #DBEAFE; font-weight:600; transition:background-color .2s ease, transform .15s ease }
  .ghost:hover{ background:#DBEAFE; transform:translateY(-1px) }

  .info,.improvements{ background:#F9FAFB; border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:16px; box-shadow:var(--shadow); padding:clamp(18px,3vw,24px); margin-top:18px }
  html[data-theme="dark"] .info,html[data-theme="dark"] .improvements{ background:#0F141E }
  .info h3,.improvements h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .info a.link{ color:var(--link); font-weight:600 } .info a.link:hover{ text-decoration:underline } .info a.mail{ color:var(--link-strong); font-weight:700 }

  .faq{ margin-top:18px } .faq h3{ margin:0 0 10px 0; font-size:1.22rem; color:var(--primary) }
  .faq-item{ background:#FFF; border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0; box-shadow:var(--shadow) }
  html[data-theme="dark"] .faq-item{ background:#0F141E }
  .kw-philosophie{ color:#8a6c00 } .kw-kunst{ color:#1E40AF } .kw-geschichte{ color:#5B3A1E }

  footer{ position:relative; padding:48px 0 56px; color:var(--muted); border-top:1px solid var(--border); margin-top:20px }
  .footer-inner{ position:relative; text-align:center }
  .cta-button{ display:inline-block; padding:12px 18px; border-radius:999px; border:2px solid #93C5FD; background:#EFF6FF; font-weight:800; box-shadow:0 8px 24px rgba(147,197,253,.35); color:#6D28D9 }
  .cta-button:hover{ transform:translateY(-1px) }
  .footer-meta{ margin-top:10px }
  .qr-in-footer{ position:absolute; left:20px; bottom:-22px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px }
  .qr-in-footer img{ display:block; width:120px; height:auto }
  .share-label{ font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px }
  .share-label svg{ width:20px; height:20px }

  /* v2.21 to-top blue */
.to-top{ position:fixed; right:18px; bottom:18px; display:none; width:46px; height:46px; border-radius:999px; border:2px solid #fff; background:transparent; box-shadow:0 10px 24px rgba(2,6,23,.25);  align-items:center; justify-content:center; transition:transform .15s ease, box-shadow .2s ease }
.to-top:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,6,23,.35) }
.to-top svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2 }
  .to-top.show{ display:flex } .feedback-btn{ position:fixed; right:68px; bottom:18px; display:none; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid #DBEAFE; background:#EFF6FF; box-shadow:var(--shadow); font-weight:700; color:#1E3A8A; z-index:65 }
  .feedback-btn.show{ display:inline-flex } .feedback-btn:hover{ transform:translateY(-2px); border-color:#93C5FD }

  @media (max-width:640px){ .qr-in-footer{ display:none } }

  /* Subject nav (PP) */
  .subject-nav{ position:sticky; top:60px; z-index:50; background:linear-gradient(135deg,#E8EEF8,#F3F5F9); border-bottom:1px solid var(--border) }
  html[data-theme="dark"] .subject-nav{ background:linear-gradient(135deg,#0E1424,#0B0E14) }
  .subject-inner{ display:flex; gap:10px; overflow:auto; padding:10px 20px }
  .chip{ white-space:nowrap; padding:8px 14px; border-radius:999px; border:1px solid var(--border); display:inline-flex; align-items:center; gap:8px; box-shadow:0 1px 0 rgba(0,0,0,.03) }
  .chip .tag{ margin:0 }
  .chip.active{ outline:2px solid #93C5FD }

  .subject{ scroll-margin-top:96px; padding-top:14px }
  .subject h2{ margin:0 0 4px 0; font-size:1.3rem }
  .subject .sub{ color:var(--muted); margin:0 0 10px 0 }

  
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }
  .menu-btn:hover{ box-shadow:0 8px 18px rgba(2,6,23,.12) }

  /* Header layout */
/* v2.17 header right align */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; font-size:18px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
/* v2.16 header tune */
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .brand{ font-weight:800; font-size:18px; letter-spacing:.1px; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ font-weight:700; text-decoration:none; color:var(--text); padding:8px 2px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  header{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0)); border-bottom:1px solid var(--border) }
  header .wrap{ max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px }
  header .left{ flex:0 0 auto }
  header .brand{ font-weight:800; text-decoration:none; color:var(--text) }
  header .nav{ display:flex; gap:28px; align-items:center; margin-left:auto; margin-right:6px }
  header .nav a{ text-decoration:none; color:var(--text); padding:6px 4px; border-bottom:2px solid transparent }
  header .nav a.active{ border-bottom-color: var(--primary) }
  header .right{ flex:0 0 auto; display:flex; align-items:center; gap:8px }
  .menu-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); position:relative }
  /* Hamburger to X animation */
  .menu-icon{ position:relative; width:20px; height:14px }
  .menu-icon .bar{ position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease }
  .menu-icon .bar:nth-child(1){ top:0 }
  .menu-icon .bar:nth-child(2){ top:50%; transform:translateY(-50%) }
  .menu-icon .bar:nth-child(3){ bottom:0 }
  .menu-btn.open .menu-icon .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg) }
  .menu-btn.open .menu-icon .bar:nth-child(2){ opacity:0 }
  .menu-btn.open .menu-icon .bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }

  /* Dropdown polish */
  .dropdown{ position:absolute; right:16px; top:60px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px; display:none }
  .dropdown.open{ display:block }
  .dropdown .row{ margin:6px 0 }
  .dropdown .btn{ width:100%; border:1.5px solid var(--primary); background:#fff }
  html[data-theme="dark"] .dropdown .btn{ background:#111827 }
  /* Settings overlay */
  .overlay-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(2px); display:none; z-index:90 }
  .modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px,94vw); max-height:80vh; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); display:none; z-index:91 }
  .modal-header{ padding:18px 18px 8px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
  .modal-body{ padding:14px 18px }
  .btn.linklike{ background:transparent; border:none; color:var(--link); font-weight:700; cursor:pointer }
  .row-setting{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border) }
  .row-setting:last-child{ border-bottom:none }
  .icon-toggle{ display:flex; gap:8px }
  .icon-btn{ width:40px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--card); border-radius:10px; cursor:pointer }
  .icon-btn.active{ background:#EFF6FF; border-color:#93C5FD }
  .icon-btn svg{ width:18px; height:18px; stroke:currentColor }
  /* Add-website: 3 cards in row, plain + soft */
  .card--plain::before{ display:none }
  .card--soft{ box-shadow:0 10px 30px rgba(147,197,253,.28) }
  .grid.three .card{ grid-column:span 12 }
  @media (min-width:680px){ .grid.three .card{ grid-column:span 6 } }
  @media (min-width:980px){ .grid.three .card{ grid-column:span 4 } }
html[data-theme="dark"] .to-top{ background:rgba(255,255,255,.18); box-shadow:0 10px 24px rgba(0,0,0,.45) }
/* v2.20 legend spacing */
.modal .legend-tags, .modal .legend-status{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.modal .legend-status .status{ margin-right:0 } /* gap handles spacing */
/* v2.21 legend list */
.modal .legend-list{ list-style:none; padding:0; margin:10px 0 0 0 }
.modal .legend-list li{ display:flex; align-items:center; gap:10px; margin:6px 0 }
.modal .legend-list .status{ flex:0 0 auto }
/* v2.23 legend recode */
.modal .status-list{ list-style:none; padding:0; margin:12px 0 0 0; display:grid; grid-template-columns:1fr; gap:10px }
.modal .status-item{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:2px; align-items:center }
.modal .status-item .status{ grid-column:1; grid-row:1 / span 2 }
.modal .status-item .name{ grid-column:2; grid-row:1; font-weight:600 }
.modal .status-item .desc{ grid-column:2; grid-row:2; color:var(--muted) }

/* === Dark Mode refinements (v2.32) === */
html[data-theme="dark"]{
  --bg:#0B0E14;
  --card:#0F141E;
  --text:#E6E6EB;
  --muted:#B1B6C2;
  --border:#1E2636;
  --primary:#8AB3FF;
  --primary-dark:#5B8CFF;
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --link:#8AB3FF;
  --link-strong:#BFD1FF;
}
/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(16,22,36,.92), rgba(11,14,20,.70));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .menu-btn{ background:#121826; border:1px solid var(--border) }
/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#0F141E;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9AA3B2 }
/* Cards */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 30px rgba(0,0,0,.35) }
/* Buttons */
html[data-theme="dark"] .btn{ background:#121826; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--primary); color:#0B0E14; border:0 }
/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#0F141E; border:1px solid var(--border) }
/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip{
  background:#0F141E !important;
  border-color:var(--chip-color,var(--border)) !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:rgba(139,92,246,.15) !important }
/* Scroll-to-top & Feedback */
html[data-theme="dark"] #scrollUpBtn,
html[data-theme="dark"] .to-top{ background:#1F2937; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#0F141E; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode: deep navy + beige accents (v2.33) === */
html[data-theme="dark"]{
  /* Deep navy (nicht schwarz) */
  --bg:#0E121A;
  --card:#121826;
  --text:#E9E9EE;
  --muted:#B5BBC9;
  --border:#1E2636;
  --shadow:0 10px 28px rgba(0,0,0,.42);

  /* Beige Akzente */
  --accent:#E6D5B8;          /* Hauptbeige */
  --accent-strong:#D9C29A;   /* stärker für Linien/Outlines */
  --accent-soft:rgba(230,213,184,.25); /* zarte Fills */

  /* Links/Primary in Dark neutralisiert in Richtung Beige */
  --primary:var(--accent);
  --primary-dark:#CDAF85;
  --link:var(--accent);
  --link-strong:#F0E4CD;
}

/* Header / Nav */
html[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(14,18,26,.78));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] header .nav a.active{
  border-bottom-color: var(--accent-strong);
}

/* Infoboxen / Cards mit zartem beige Akzent */
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); box-shadow:0 10px 28px rgba(0,0,0,.38) }
html[data-theme="dark"] .card--blue::before,
html[data-theme="dark"] .card--brown::before,
html[data-theme="dark"] .card--physik::before,
html[data-theme="dark"] .card--erdkunde::before,
html[data-theme="dark"] .card--geschichte::before{
  background: var(--accent-strong) !important;
  opacity:.9;
}

/* Buttons */
html[data-theme="dark"] .btn{ background:#141B2A; border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .btn.primary{ background:var(--accent); color:#0E121A; border:0 }
html[data-theme="dark"] .cta-button{ background:var(--accent); color:#0E121A; border:0 }

/* Suche / Inputs */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search{
  background:#121826;
  border:1px solid var(--border);
  color:var(--text);
}
html[data-theme="dark"] ::placeholder{ color:#9FA8BA }

/* Modals */
html[data-theme="dark"] .modal{ background:var(--card); border:1px solid var(--border); color:var(--text) }
html[data-theme="dark"] .modal .modal-header{ border-bottom:1px solid var(--border) }

/* Chips (Variante A) – Outline in Beige nur für neutrale Bereiche; Fachfarben bleiben */
html[data-theme="dark"] .subject-nav .chip{
  background:#121826 !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.38);
}
html[data-theme="dark"] .subject-nav .chip.active{ background:var(--accent-soft) !important; outline:2px solid var(--accent-strong) !important }
html[data-theme="dark"] .subject-nav .chip:hover{ box-shadow:0 10px 22px rgba(0,0,0,.32) }

/* Footer QR-Block */
html[data-theme="dark"] .qr-in-footer{ background:#121826; border:1px solid var(--border) }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top{ background:#1C2436; color:#fff }
html[data-theme="dark"] .feedback-btn{ background:#121826; border:1px solid var(--border); color:var(--link-strong) }
/* === Dark Mode Palette (v2.34) === */
html[data-theme="dark"] {
  --bg: #222831;
  --card: #393E46;
  --text: #F5F5F5;
  --muted: #948979;
  --border: #948979;
  --accent: #DFD0B8;
  --accent-strong: #DFD0B8;
  --accent-soft: rgba(223,208,184,.15);
  --primary: #DFD0B8;
  --primary-dark: #948979;
  --link: #DFD0B8;
  --link-strong: #FFF5E1;
}

/* Backgrounds */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] header { background: var(--card); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] footer { background: var(--card); border-top: 1px solid var(--border); }

/* Cards / Info-Boxen */
html[data-theme="dark"] .card { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .info-box { background: var(--card); border-left: 4px solid var(--accent-strong); }

/* Inputs / Search */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
html[data-theme="dark"] ::placeholder { color: var(--muted); }

/* Buttons */
html[data-theme="dark"] .btn { background: var(--card); border: 1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .btn.primary { background: var(--accent); color: #222831; border: 0; }
html[data-theme="dark"] .cta-button { background: var(--accent); color: #222831; border: 0; }

/* Chips (Variante A) */
html[data-theme="dark"] .subject-nav .chip {
  background: var(--card) !important;
  border-color: var(--chip-color,var(--border)) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
html[data-theme="dark"] .subject-nav .chip.active {
  background: var(--accent-soft) !important;
  outline: 2px solid var(--accent-strong) !important;
}
html[data-theme="dark"] .subject-nav .chip:hover { box-shadow: 0 8px 18px rgba(0,0,0,.35); }

/* Scroll-to-top & Feedback */
html[data-theme="dark"] .to-top { background: var(--card); color: var(--text); border: 1px solid var(--border); }
html[data-theme="dark"] .feedback-btn { background: var(--card); border: 1px solid var(--border); color: var(--link-strong); }
/* v2.35 Dark Mode: Haupttitel in Anthrazit */
html[data-theme="dark"] h1.site-title {
  color: #393E46;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
/* v2.39 Changelog styling */
.changelog-list { list-style:none; margin:0; padding:0; }
.changelog-list li { margin:4px 0; }
.changelog-list .version { font-weight:600; }
.changelog-list .date { color:#9ca3af; }
.changelog-list li.feature { color:#22c55e; } /* Grün */
.changelog-list li.bugfix  { color:#6b7280; } /* Grau */
.changelog-list li.design  { color:#3b82f6; } /* Blau */
/* v2.41a: Dark title fix + changelog styles + feedback links */
html[data-theme="dark"] h1.site-title,
html[data-theme="dark"] .title-anthrazit { color:#393E46 !important; }

/* Changelog ULs unified look & colors */
#modalChangelog ul { list-style:none; margin:0; padding:0; }
#modalChangelog li { margin:4px 0; color:#6b7280; } /* default grey */
#modalChangelog li .version { font-weight:600; }
#modalChangelog li .date { color:#9ca3af; }
#modalChangelog li.feature { color:#22c55e; }  /* Grün */
#modalChangelog li.design  { color:#3b82f6; }  /* Blau */
#modalChangelog li.bugfix  { color:#6b7280; }  /* Grau */

/* Feedback card links in blue */
.feedback-card a { color:#3b82f6 !important; font-weight:600; }
html[data-theme="dark"] .feedback-card a { color:#60a5fa !important; }
/* v2.42 Changelog color coding */
#modalChangelog .changelog-list { list-style:none; margin:0; padding:0; }
#modalChangelog .changelog-list li { margin:4px 0; }
#modalChangelog .changelog-list .version { font-weight:600; }
#modalChangelog .changelog-list .date { color:#9ca3af; }
#modalChangelog .changelog-list li.feature { color:#22c55e; }  /* Grün */
#modalChangelog .changelog-list li.bugfix  { color:#6b7280; }  /* Grau */
#modalChangelog .changelog-list li.design  { color:#3b82f6; }  /* Blau */
/* Clean, unified dropdown buttons */
          .dropdown{ position:absolute; top:72px; right:20px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); min-width:280px; display:none; z-index:70; overflow:hidden; padding:10px }
          .dropdown.open{ display:block }
          .menu-stack{ display:flex; flex-direction:column; gap:8px }
          .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--card); cursor:pointer; text-decoration:none; color:var(--text); font-weight:600; justify-content:space-between }
          .btn-menu{ width:100% }
          .btn:hover{ box-shadow:0 4px 14px rgba(2,6,23,.10) }
          html[data-theme="dark"] .btn:hover{ box-shadow:0 6px 20px rgba(0,0,0,.35) }
.admin-only{ display:none }
  .admin-yes .admin-only{ display:initial }

/* Hintergrundbilder für Light/Dark Mode */
:root {
  --bg-image: url("assets/bg-light.jpg");
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-image: url("assets/bg-dark.jpg");
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Fallback-Klasse, falls jemand manuell toggelt */
.light-mode { --bg-image: url("assets/bg-light.jpg"); }
.dark-mode  { --bg-image: url("assets/bg-dark.jpg"); }



/* Header transparent */
header, .navbar, .site-header {
  background: transparent !important;
  box-shadow: none !important;
}

/* 2-Spalten Grid für Karten */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.5rem;
}

.cards-container .card {
  width: 100% !important;
}



/* Hero transparent, Hintergrund komplett sichtbar */
.hero { background: transparent !important; }

/* 2er Grid für Webseiten-Karten */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .card-grid.two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.card-grid .card { width: 100%; }



/* Header wirklich transparent halten */
header { background: transparent !important; box-shadow: none !important; border-bottom-color: transparent !important; }
html[data-theme="dark"] header { background: transparent !important; }


/* FORCE 2-column layout for .card-grid.two-cols on >=700px */
@media (min-width: 700px){
  .card-grid.two-cols{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 699.98px){
  .card-grid.two-cols{ grid-template-columns: 1fr !important; }
}




/* === Global Glass UI v1 === */

/* Theme-aware glass variables */
:root{
  --glass-bg: rgba(255,255,255,0.15);
  --glass-border: rgba(255,255,255,0.8);
  --glass-shadow: 0 8px 32px rgba(31,38,135,0.2), inset 0 4px 20px rgba(255,255,255,0.30);
  --glass-radius: 20px;
  --glass-overlay: rgba(255,255,255,0.10);
  --glass-overlay-opacity: .6;
}

html[data-theme="dark"]{
  --glass-bg: rgba(0,0,0,0.25);
  --glass-border: rgba(255,255,255,0.25);
  --glass-shadow: 0 10px 36px rgba(0,0,0,0.55), inset 0 4px 18px rgba(255,255,255,0.04);
  --glass-overlay: rgba(255,255,255,0.05);
}

/* Base glass utility */
.glass{
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

.glass::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-overlay);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow:
    inset -10px -8px 0px -11px rgba(255,255,255,1),
    inset 0px -9px 0px -8px rgba(255,255,255,1);
  opacity: var(--glass-overlay-opacity);
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px rgba(0,0,0,.35)) brightness(1.05);
}

/* Apply glass to major UI blocks without changing HTML */
header,
.dropdown,
.search,
.search input,
.card,
.box,
.btn,
.menu-btn,
.status,
.qr-in-footer,
.cta-button,
.modal,
.menu-stack .btn-menu,
.topnav a,
.to-top,
.feedback-btn{
  background: none;
  border: none;
  box-shadow: none;
}

header,
.dropdown,
.search,
.card,
.box,
.btn,
.menu-btn,
.status,
.qr-in-footer,
.cta-button,
.modal,
.menu-stack .btn-menu,
.to-top,
.feedback-btn{
  position: relative;
}
header::before,
.dropdown::before,
.search::before,
.card::before,
.box::before,
.btn::before,
.menu-btn::before,
.status::before,
.qr-in-footer::before,
.cta-button::before,
.modal::before,
.menu-stack .btn-menu::before,
.to-top::before,
.feedback-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  z-index: -1;
}

/* Keep existing card colored top stripe above the glass layer */
.card::before{
  z-index: 0;
}
.card > *{
  position: relative;
  z-index: 1;
}

/* Buttons hover/focus within glass look */
.btn:hover{
  transform: translateY(-1px);
}
.btn:active{
  transform: translateY(0);
}

/* Transparent hero and sections so background image is sichtbar */
.hero,
.section{
  background: transparent !important;
}

/* Subtle borders on inputs */
input, select, textarea{
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Make nav bar visually floating */
header{
  box-shadow: none !important;
}



/* Fix: Dark-Mode Umschaltung über data-theme */
html[data-theme="light"] { --bg-image: url("assets/bg-light.jpg") !important; }
html[data-theme="dark"]  { --bg-image: url("assets/bg-dark.jpg") !important; }

/* Fix: Glass-Layer sollen Klicks nicht blockieren */
.glass::after,
header::before,
.dropdown::before,
.search::before,
.card::before,
.box::before,
.btn::before,
.menu-btn::before,
.status::before,
.qr-in-footer::before,
.cta-button::before,
.modal::before,
.menu-stack .btn-menu::before,
.to-top::before,
.feedback-btn::before{
  pointer-events: none !important;
}

/* Fix: Dropdown/Modal Inhalte dürfen nicht zusätzlich unsichtbar überlagert werden */
.dropdown, .modal { position: relative; z-index: 100; }

/* Fix: show modal when class 'open' is added */
.modal.open{ display:block !important; }


/* Modal layering fix: put glass layer inside modal above overlay */
.modal::before{
  z-index: 0 !important;
}
.modal > *{
  position: relative;
  z-index: 1;
}

/* Also ensure dropdown and search use safe layering */
.dropdown::before, .search::before{
  z-index: 0 !important;
}
.dropdown > *, .search > *{
  position: relative;
  z-index: 1;
}

/* Safety: avoid negative z-index for generic glass layers */
header::before, .box::before, .btn::before, .menu-btn::before, .status::before,
.qr-in-footer::before, .cta-button::before, .to-top::before, .feedback-btn::before{
  z-index: 0;
}



/* Rollback: Modals, Dropdowns und Buttons ohne Glass, damit sie zuverlässig klickbar/sichtbar sind */
.modal, .dropdown, .btn {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 12px !important;
}
/* Deaktiviert das Glass-Pseudo auf diesen Elementen */
.modal::before, .dropdown::before, .btn::before { content: none !important; }

/* Button-Optik wie vorher */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Modal sichtbar und über dem Overlay */
.modal.open { display: block !important; }
.overlay-backdrop { z-index: 90; }
.modal { z-index: 100; }




/* ===== Glassmorphism Theme (nur per CSS) ===== */
:root{
  --glass-bg: rgba(255,255,255,0.15);
  --glass-border: rgba(255,255,255,0.8);
  --glass-overlay: rgba(255,255,255,0.10);
  --glass-blur: 8px;
  --glass-radius: 20px;
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.20), inset 0 4px 20px rgba(255,255,255,0.30);
}
html[data-theme="dark"]{
  --glass-bg: rgba(16,18,30,0.35);
  --glass-border: rgba(255,255,255,0.20);
  --glass-overlay: rgba(255,255,255,0.06);
  --glass-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 4px 12px rgba(255,255,255,0.06);
}

/* Vorlage .glass, korrigiert (content: "" und z-index layering) */
.glass{
  position: relative;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
}
.glass::after{
  content: "" ;
  position: absolute;
  inset: 0;
  background: var(--glass-overlay);
  border-radius: var(--glass-radius);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.4));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.4));
  box-shadow:
    inset -10px -8px 0px -11px rgba(255,255,255,0.9),
    inset 0px -9px 0px -8px rgba(255,255,255,0.9);
  opacity: 0.6;
  z-index: -1;
  filter: brightness(115%);
}

/* Wende Glass-Style auf UI-Elemente an (ohne HTML zu ändern): */
header,
.header-inner,
.search,
.dropdown,
.btn,
.menu-btn,
.card,
.box,
.status,
.modal,
.qr-in-footer,
.cta-button,
footer,
.to-top,
.feedback-btn{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  box-shadow: var(--glass-shadow) !important;
  position: relative;
}
header{ border-bottom-color: var(--glass-border) !important; }
header::after,
.search::after,
.dropdown::after,
.btn::after,
.menu-btn::after,
.card::after,
.box::after,
.modal::after,
.qr-in-footer::after,
.cta-button::after,
footer::after,
.to-top::after,
.feedback-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-overlay);
  pointer-events: none;
  z-index: -1;
}

/* Entferne harte Card/Btn-Hintergründe aus vorherigem Design */
.card, .btn, .box, .dropdown, .menu-btn{ background: transparent !important; }
.card::before{ opacity:.0 !important; } /* Farbbalken oben ausblenden */

/* Inputs innerhalb von Glas-Containern */
.search input{
  background: transparent !important;
}

/* Navigation-Underline beibehalten */
.topnav a::after{ opacity: .9; }

/* Section-Hintergründe transparenter */
.section{ background: transparent !important; }

/* 2er Grid verlässlich (wie zuvor forciert) */
@media (min-width: 700px){
  .card-grid.two-cols{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 699.98px){
  .card-grid.two-cols{ grid-template-columns: 1fr !important; }
}

/* Buttons wirken glasig, behalten aber Hover-Feedback */
.btn:hover{ transform: translateY(-1px); }


/* === PATCH 2025-09-27 === */

/* =========================================================
   FIX 1: Modal-Bug nach Glass-Umstellung
   ========================================================= */
.modal{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 91 !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  box-shadow: var(--glass-shadow) !important;
}
.modal.open { display: block !important; }
.overlay-backdrop{ z-index: 90 !important; }

/* =========================================================
   FIX 2: Panels nicht milchig/blurry
   ========================================================= */
.box[style*="padding:0"]{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,0.10) !important;
  box-shadow: var(--glass-shadow) !important;
}
.box[style*="padding:0"]::after{ content: none !important; }

.qr-in-footer{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,0.10) !important;
}
.qr-in-footer::after{ content: none !important; }

/* =========================================================
   FIX 3: 2er-Grid stabil halten
   ========================================================= */
@media (min-width: 700px){
  .card-grid.two-cols{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 699.98px){
  .card-grid.two-cols{ grid-template-columns: 1fr !important; }
}


/* === PATCH 2er-Grid Fix === */
@media (min-width: 700px){
  .card-grid.two-cols{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 699.98px){
  .card-grid.two-cols{ grid-template-columns: 1fr !important; }
}
.card-grid.two-cols > .card{
  grid-column: auto !important;
}


/* === FINAL 2er Grid Fix === */

@media (min-width: 700px){
  .card-grid.two-cols{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 699.98px){
  .card-grid.two-cols{ grid-template-columns: 1fr !important; }
}
.card-grid.two-cols > .card{
  grid-column: auto !important;
}


/* === FORCE ALWAYS TWO COLUMNS (no breakpoints) === */
.card-grid.two-cols{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.card-grid.two-cols > .card{
  grid-column: auto !important;
}



/* === PATCH: Reliable Light/Dark background images === */
/* Default = Light */
:root { --bg-image: url("assets/bg-light.jpg") !important; }
html[data-theme="light"] { --bg-image: url("assets/bg-light.jpg") !important; }
/* Explicit Dark (matches Theme-Toggle) */
html[data-theme="dark"] { --bg-image: url("assets/bg-dark.jpg") !important; }
/* System preference as fallback if kein data-theme gesetzt ist */
@media (prefers-color-scheme: dark) {
  :root { --bg-image: url("assets/bg-dark.jpg") !important; }
}

/* Make sure the background image always wins over older background rules */
html, body { height: 100%; }
body {
  background-image: var(--bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Optional manual toggle support (falls per Klasse gewechselt wird) */
.light-mode { --bg-image: url("assets/bg-light.jpg") !important; }
.dark-mode  { --bg-image: url("assets/bg-dark.jpg") !important; }



/* === PATCH: 2025-09-27 – Beige raus, Dark-Headings heller, Info/FAQ/QR nicht blurry === */

/* 1) "Beige" Effekte neutralisieren (Tags & Card-Bars) */
.tag.geschichte,
.card--geschichte::before,
.card--brown::before {
  background: transparent !important;
  color: inherit !important;
  filter: none !important;
}
/* Optional: neutrale Tag-Optik stattdessen */
.tag.geschichte {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid var(--glass-border) !important;
}

/* 2) Headings im Dark-Mode heller für bessere Lesbarkeit */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .brand a,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .section h2 {
  color: #F5F7FF !important;
}

/* 3) Info-Karten, FAQ und QR sollen NICHT verschwommen wirken.
   Ursache: Die globale Glas-Regel setzte backdrop-filter & ::after-Overlay auf .box/.qr-in-footer.
   Lösung: Für diese Bereiche Blur deaktivieren und Overlay entfernen. */
.info-section .box,
.faq-list .faq-item,
.qr-in-footer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,0.10) !important; /* dezente Fläche ohne Milchschleier */
  box-shadow: var(--glass-shadow) !important;
}
.info-section .box::after,
.faq-list .faq-item::after,
.qr-in-footer::after {
  content: none !important;
}

/* Falls frühere Regeln .box pauschal glasifiziert haben, hier gezielt rückgängig machen */
.box.accent {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.box.accent::after { content: none !important; }

/* 4) Sicherheit: kein "filter: blur(...)" auf Overlays */
.info-section .box, .info-section .box::after,
.faq-list .faq-item, .faq-list .faq-item::after,
.qr-in-footer, .qr-in-footer::after {
  filter: none !important;
}

/* 5) Titelkontrast auch in Cards erhöhen */
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .box h3 {
  color: #FAFAFF !important;
}



/* === PATCH: QR footer boxes must be crisp, no blur anywhere === */
.qr-in-footer,
.qr-in-footer * {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.qr-in-footer img{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Ensure no glass ::after overlay on footer and qr container */
footer::after, .qr-in-footer::after { content: none !important; }



/* === PATCH: De-glass info/faq/qr completely (no blur, no overlays) === */
:is(.info-section .box, .faq-list .faq-item, .qr-in-footer){
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
.info-section .box::before, .info-section .box::after,
.faq-list .faq-item::before, .faq-list .faq-item::after,
.qr-in-footer::before, .qr-in-footer::after{
  content: none !important;
}
/* === iPad/iOS Background Zoom Fix ===
   iOS-Safari hat Bugs mit background-attachment: fixed.
   -> Auf iOS umschalten auf scroll, saubere Position oben zentriert. */
@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}

/* Zusatz-Absicherung genau für Tablet-Hochformat */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
  body {
    background-attachment: scroll !important;
    background-position: center top !important;
  }
}

/* Keep cards and header glassy, but not the info/faq/qr region */


/* === iPad/iOS: echtes "fixed" Background ohne Zoom-Bug === */
@supports (-webkit-touch-callout: none) {
  body{
    position: relative !important;
    background: none !important;
  }
  body::before{
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
  }
}



/* === PATCH: Fix Feedback-/To-Top-Buttons (Hit-Test & Layering) === */
/* Buttons klar über allen Overlays halten und klickbar machen */
.to-top,
.feedback-btn{
  position: fixed !important;
  z-index: 300 !important; /* über Glas-Layern & Modals */
}

/* Pseudo-Overlays der Glasoptik sollen Klicks NICHT abfangen */
.to-top::before, .to-top::after,
.feedback-btn::before, .feedback-btn::after{
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Zusätzliche iOS-Safari Stabilisierung: kein Blur auf den Buttons */
@supports (-webkit-touch-callout: none) {
  .to-top, .feedback-btn{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Sicherheitsnetz: globale Glas-Overlays auf Buttons dürfen nie über Content liegen */
header::before, .dropdown::before, .search::before, .card::before, .box::before,
.status::before, .modal::before, .qr-in-footer::before, .cta-button::before, footer::before{
  z-index: -1 !important;
}



/* === Fixed Glass Header Override === */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body {
  --header-offset: 76px;
  padding-top: var(--header-offset);
}



/* === Mobile Responsiveness Patch (2025-09-28) === */
*,
*::before,
*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

img, video, canvas, svg{ max-width:100%; height:auto }

/* Prevent horizontal scroll on small screens */
body{ overflow-x:hidden }

/* Layout containers */
.container, .wrapper, .content, .page, .section, .sections{
  max-width:var(--maxw, 1100px);
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
}

/* Make buttons and inputs full-width on tiny screens */
@media (max-width:480px){
  .btn{ width:100% }
  input[type="text"], input[type="email"], input[type="search"], select, textarea{
    width:100%
  }
}

/* Navigation tweaks */
@media (max-width:768px){
  .topnav{ gap:.5rem }
  .topnav a{ padding:.5rem .6rem; font-size:14px }
  .header-inner{ height:auto; padding-top:.4rem; padding-bottom:.4rem; flex-wrap:wrap }
}

/* Grid helpers */
[class*="grid"], .grid, .cards, .card-grid, .tiles{
  display:grid;
  gap:16px;
}
@media (max-width:1024px){
  .grid-4, .cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:768px){
  .grid-3, .cols-3, .grid-4, .cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:560px){
  .grid-2, .cols-2, .grid-3, .cols-3, .grid-4, .cols-4, .cards{ grid-template-columns:1fr }
}

/* Tables */
.table{ width:100%; overflow:auto; display:block }
.table table{ width:100%; border-collapse:collapse }

/* Typography scaling */
:root{ --fs-base:16px }
body{ font-size:var(--fs-base) }
h1{ font-size:clamp(1.6rem, 4.5vw, 2.2rem) }
h2{ font-size:clamp(1.3rem, 3.8vw, 1.8rem) }
h3{ font-size:clamp(1.1rem, 3.2vw, 1.4rem) }
p, li{ line-height:1.6 }

/* Cards/images */
.card img{ width:100%; height:auto; display:block; object-fit:cover }
.card{ border-radius:var(--radius, 16px) }

/* Fix modals on small screens */
@media (max-width:480px){
  .modal{ width:calc(100% - 24px); left:50%; transform:translate(-50%,-50%) }
}

/* Footer QR and other side-by-side elements */
@media (max-width:640px){
  .footer, .footer-row, .row, .flex, .hstack{
    display:flex; flex-wrap:wrap; gap:12px
  }
  .qr-in-footer{ width:100% }
}

/* Avoid elements exceeding viewport width */
*[style*="width:"], *[style*="min-width:"]{
  max-width:100%;
}


/* === Mobile Subnav under header (only phones) === */
.mobile-subnav{display:none;}
@media (max-width: 768px){
  /* hide header nav links; keep logo + menu button */
  .topnav{ display:none !important; }

  .mobile-subnav{
    display:flex;
    justify-content:space-around;
    gap:4px;
    background: var(--card, #fff);
    border-bottom:1px solid var(--border);
    padding: 8px 0;
    position:relative;
    z-index:50;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .mobile-subnav a{
    flex:1;
    text-align:center;
    font-weight:600;
    padding:6px 4px;
    font-size:14px;
    color: var(--text);
    text-decoration:none;
  }
  .mobile-subnav a.active{
    border-bottom:2px solid var(--primary);
    color: var(--primary);
  }
}


/* === Handy Header vereinfachen (nur Logo + Burger) === */
@media (max-width: 768px){
  header .topnav{ display:none !important; }
  header .right{ display:flex !important; }
}

/* center hero meta */
.hero .meta{text-align:center;display:block;margin-top:8px;}

/* authors below description */
.card-authors{ font-size:12px; margin-top:4px; color:var(--muted); }


/* Card scroll animation */
.card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.card.visible {
  opacity: 1;
  transform: translateY(0);
}



body { font-family: 'Inter', sans-serif; }
[data-theme="dark"] h1.site-title { color:#fff !important; }
.search input[type="search"] { border:none !important; outline:none !important; box-shadow:none !important; }



/* Sora font + typography tweaks */
body{ font-family:'Sora', system-ui, -apple-system, Segoe UI, Roboto, Sans-Serif; }

/* Dark mode: H1 in hero gut lesbar */
[data-theme="dark"] h1.site-title{ color:#fff !important; text-shadow:0 0 0 transparent; }

/* Hero subtitle und Meta etwas größer */
.hero p{ font-size:1.05rem; }
.hero .meta{ font-size:1.05rem; }

/* Keep search clean */
.search input[type="search"]{ border:none !important; outline:none !important; box-shadow:none !important; }



/* Footer cleanup: QR neben CTA */
.footer-inner{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.footer-inner .cta-button{ order:1; }
.footer-inner .qr-in-footer{
  order:2;
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.footer-inner .footer-meta{ order:3; margin-left:auto; }
.qr-in-footer img{ width:64px; height:auto; display:block; }

/* Überschreibt frühere Regel, die QR auf 100% Breite setzte */
@media (max-width:640px){
  .qr-in-footer{ width:auto; }
}



/* Footer layout: QR neben CTA, Meta rechts */
.footer-inner{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.footer-inner .cta-button{ order:0; }
.footer-inner .qr-in-footer{ order:1; }
.footer-inner .footer-meta{ order:2; margin-left:auto; }
.qr-in-footer img{ width:64px; height:64px; object-fit:contain }
@media (max-width: 560px){
  .footer-inner{ gap:12px }
  .qr-in-footer img{ width:52px; height:52px }
}



/* === Card Fade-In Animation (v1) === */
.card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
.card.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; transform: none; }
}
/* Footer layout tidy (desktop grid, mobile stack) */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
}
.footer-inner .footer-meta { order: 1; }
.footer-inner .cta-button { order: 2; }
.footer-inner .qr-in-footer { order: 3; }
@media (max-width: 720px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .footer-inner .footer-meta,
  .footer-inner .cta-button,
  .footer-inner .qr-in-footer {
    justify-self: start;
  }
  .footer-inner .qr-in-footer img {
    max-width: 140px;
    height: auto;
  }
}