@font-face { font-family: 'Amiri'; src: url('/fonts/amiri-arabic.woff2') format('woff2'); font-display: swap; }

:root {
  --bg: #f6f2e8; --karte: #ffffff; --text: #1d2a26; --leise: #6a756f; --linie: #e4ddcc;
  --gruen: #1f5c4a; --gruen2: #2c7a62; --gold: #b38a2e; --gold-hell: #f3e7c6;
  --ok: #2e7d4f; --offen: #c99a12; --achtung: #c0562a;
  --schatten: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(31,92,74,.06);
  --muster: rgba(179,138,46,.12);
}
:root[data-theme="dunkel"] {
  --bg: #0e1714; --karte: #16231f; --text: #e8efe9; --leise: #9aaba3; --linie: #24362f;
  --gruen: #5fbf9b; --gruen2: #7ad1ae; --gold: #d8b45c; --gold-hell: #2d2716;
  --schatten: 0 1px 2px rgba(0,0,0,.4); --muster: rgba(216,180,92,.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --bg: #0e1714; --karte: #16231f; --text: #e8efe9; --leise: #9aaba3; --linie: #24362f;
    --gruen: #5fbf9b; --gruen2: #7ad1ae; --gold: #d8b45c; --gold-hell: #2d2716;
    --schatten: 0 1px 2px rgba(0,0,0,.4); --muster: rgba(216,180,92,.08);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); min-height: 100vh; }
main { max-width: 640px; margin: 0 auto; padding: 12px 16px 40px; }
button, input, select { font: inherit; }
a { color: var(--gruen); }

.testband { position: sticky; top: 0; z-index: 20; background: repeating-linear-gradient(135deg, #f0c64a, #f0c64a 12px, #f5d36e 12px, #f5d36e 24px); color: #3b2c00; text-align: center; font-weight: 700; font-size: 13px; padding: 4px 8px; letter-spacing: .5px; }

/* Kopfzeile */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.kopf .titel { font-weight: 700; font-size: 18px; color: var(--gruen); }
.schalter { display: flex; gap: 8px; }
.rund { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); background: var(--karte); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; box-shadow: var(--schatten); }
.rund svg { width: 22px; height: 22px; }
.rund .punkt { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--offen); border: 2px solid var(--karte); }

/* Bismillah + Hadith */
.bismillah { text-align: center; margin: 6px 0 14px; padding: 16px 12px 12px; border-radius: 18px; position: relative; overflow: hidden;
  background: var(--karte); box-shadow: var(--schatten); border: 1px solid var(--linie); }
.bismillah::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23b38a2e' stroke-width='1'%3E%3Cpath d='M22 4l5 13 13 5-13 5-5 13-5-13-13-5 13-5z'/%3E%3Crect x='12' y='12' width='20' height='20' transform='rotate(45 22 22)'/%3E%3C/g%3E%3C/svg%3E"); opacity: .14; pointer-events: none; }
.bismillah .ar { font-family: 'Amiri', serif; font-size: 30px; line-height: 1.6; color: var(--gold); direction: rtl; position: relative; }
.bismillah .de { font-size: 14px; color: var(--leise); position: relative; }
.hadith { background: var(--karte); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--linie); border-left: 4px solid var(--gold); box-shadow: var(--schatten); }
.hadith .kopfzeile { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.hadith p { margin: 0 0 8px; font-size: 16px; }
.hadith .quelle { font-size: 13px; color: var(--leise); }
.hadith .hinweis { font-size: 12px; color: var(--offen); margin-top: 4px; }

/* Kacheln: immer 2 nebeneinander */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 14px; min-height: 112px; box-shadow: var(--schatten); text-align: left; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.kachel:active { transform: scale(.98); }
.kachel .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--gold-hell); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.kachel .ico svg { width: 20px; height: 20px; }
.kachel .name { font-weight: 700; font-size: 16px; }
.kachel .vorschau { font-size: 13px; color: var(--leise); overflow-wrap: anywhere; }
.kachel.gesperrt { opacity: .5; cursor: default; }
.kachel .zahl { position: absolute; top: 10px; right: 10px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--gruen); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 6px; }

/* Allgemein */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--schatten); }
h1 { font-size: 22px; margin: 8px 0 12px; } h2 { font-size: 18px; margin: 4px 0 10px; }
.knopf { min-height: 48px; padding: 0 18px; border-radius: 14px; border: 0; background: var(--gruen); color: #fff; font-weight: 700; cursor: pointer; width: 100%; }
.knopf.zweit { background: transparent; color: var(--gruen); border: 1.5px solid var(--gruen); }
.knopf.klein { min-height: 44px; width: auto; padding: 0 14px; font-size: 14px; }
.knopf:disabled { opacity: .5; cursor: default; }
.feld { display: block; margin-bottom: 12px; } .feld span { display: block; font-size: 14px; color: var(--leise); margin-bottom: 4px; }
.feld input, .feld select { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--linie); background: var(--bg); color: var(--text); padding: 0 12px; }
.pin { letter-spacing: 14px; text-align: center; font-size: 26px !important; }
.zurueck { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--gruen); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.zeile:last-child { border-bottom: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--gold-hell); color: var(--text); }
.chip.s-an { background: var(--gruen); color: #fff; }
.leise { color: var(--leise); font-size: 14px; }
.meldung { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 600px; margin: 0 auto; padding: 14px 16px; border-radius: 14px; background: var(--text); color: var(--bg); font-weight: 600; z-index: 50; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.meldung.s-fehler { background: var(--achtung); color: #fff; }
.laden { text-align: center; color: var(--leise); padding: 40px 0; }
.schaltreihe { display: flex; gap: 8px; flex-wrap: wrap; }
.linkbox { word-break: break-all; font-size: 13px; background: var(--bg); padding: 10px; border-radius: 10px; border: 1px dashed var(--linie); margin: 8px 0; }
.anmeldung .logo { text-align: center; margin: 24px 0 8px; }
.anmeldung .logo .name { font-family: 'Amiri', serif; font-size: 40px; color: var(--gold); }

/* Essen */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.tab { min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); font-weight: 600; white-space: nowrap; cursor: pointer; }
.tab.s-aktiv { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.monatsleiste { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 10px; }
.tage { display: flex; flex-direction: column; gap: 8px; }
.tag { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 10px 12px; min-height: 60px; color: var(--text); cursor: pointer; width: 100%; }
.tag .datum { display: flex; flex-direction: column; align-items: center; min-width: 52px; font-size: 13px; color: var(--leise); }
.tag .datum strong { font-size: 15px; color: var(--text); }
.tag .inhalt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tag .wer { font-weight: 600; overflow-wrap: anywhere; }
.tag.s-heute { border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--gold-hell); }
.tag.s-vergangen { opacity: .5; }
.tag.s-offen { border-style: dashed; border-color: var(--offen); }
.tag.s-fokus { outline: 2px solid var(--gruen); }
.chip.s-offen { background: #f6e3b0; color: #6b4e00; }
.chip.s-gold { background: var(--gold); color: #fff; }
.gericht { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--leise); min-width: 0; }
.mini { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--gold-hell); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--leise); text-align: center; }
.mini.gross { width: 100%; height: 120px; }
.offen-karte { border: 2px dashed var(--offen); }
.blatt-hg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.blatt-hg[hidden] { display: none; }
.blatt { background: var(--bg); width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.ohne-scroll { overflow: hidden; }
.aktionen { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.knopf.warn { background: var(--achtung); }
.bild-gross { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 14px; background: #000; }
.bild-mittel { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; cursor: zoom-in; }
.gerichtliste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.gkarte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gkarte img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; cursor: zoom-in; }
.gwahl { display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 8px; min-height: 44px; color: var(--text); cursor: pointer; }
.gwahl img { width: 100%; height: 100px; object-fit: cover; border-radius: 10px; }
.gwahl.s-gewaehlt { border: 2px solid var(--gruen); }