/* ===== SiTech Glas – gemeinsamer Grundbaustein (Stand 07.10.2026) =====
   Vorlage: SiTech Cockpit, Design "Glas". Quelle dieser Datei:
   C:\Users\yasin\Claude\Gemeinsam\Design\SiTech-Glas\sitech-glas.css
   Wird in jede SiTech-App in den <style>-Block kopiert (nicht verlinkt: _Gemeinsam
   wird nicht hochgeladen). Alle Namen beginnen mit --sg- bzw. .sg-, damit sie nicht
   mit den Farbnamen der App kollidieren. Dunkel ist Standard, Hell über
   data-theme="light" oder die Geräte-Einstellung (beide Hell-Blöcke gleich halten). */
:root{
  color-scheme:dark;
  --sg-ground:#07080B; --sg-ground2:#0D0F13;
  --sg-text:#ECEFF1; --sg-muted:#A4A9AF; --sg-faint:#6B7178;
  --sg-panel:rgba(255,255,255,.05); --sg-panel2:rgba(255,255,255,.08); --sg-border:rgba(255,255,255,.10);
  --sg-modal:#121419; --sg-input:rgba(0,0,0,.30); --sg-input-schatten:0 2px 6px rgba(0,0,0,.55) inset,0 1px 0 rgba(255,255,255,.05);
  --sg-accent:#D9AE72; --sg-accent-soft:rgba(217,174,114,.16); --sg-accent-ink:#1B1406;
  --sg-messing:linear-gradient(135deg,#E8C48E,#C99A5A); --sg-link:#E8C48E;
  --sg-danger:#E0583F; --sg-success:#6CC08B; --sg-warning:#E6B54A; --sg-info:#6E9BD8; --sg-teal:#4FB3A9;
  --sg-karte:linear-gradient(160deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 45%,rgba(0,0,0,.16) 100%);
  --sg-karte-schatten:0 1px 0 rgba(255,255,255,.10) inset,0 2px 4px rgba(0,0,0,.40),0 12px 24px -10px rgba(0,0,0,.65);
  --sg-glow:rgba(217,174,114,.45); --sg-lichtkante:rgba(232,196,142,.8);
  --sg-display:"Chakra Petch","Arial Narrow",Arial,sans-serif;
  --sg-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sg-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sg-hintergrund:
    radial-gradient(520px 420px at 82% 58%,rgba(217,174,114,.20),transparent 70%),
    radial-gradient(420px 360px at 15% 82%,rgba(224,122,95,.11),transparent 70%),
    radial-gradient(520px 420px at 92% 6%,rgba(110,155,216,.10),transparent 70%),
    linear-gradient(180deg,#0D0F13,#07080B);
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  color-scheme:light;
  --sg-ground:#F3EFE8; --sg-ground2:#FBF9F5;
  --sg-text:#1B1E21; --sg-muted:#5E6670; --sg-faint:#8A9097;
  --sg-panel:rgba(255,255,255,.72); --sg-panel2:rgba(255,255,255,.95); --sg-border:rgba(27,30,33,.11);
  --sg-modal:#FFFFFF; --sg-input:#FFFFFF; --sg-input-schatten:0 1px 2px rgba(27,30,33,.08) inset;
  --sg-accent:#A3702C; --sg-accent-soft:rgba(169,117,50,.13); --sg-link:#8A5A1F;
  --sg-danger:#C0463B; --sg-success:#2E8B57; --sg-warning:#B7791F; --sg-info:#3F6FB5; --sg-teal:#2C8C83;
  --sg-karte:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.78));
  --sg-karte-schatten:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(27,30,33,.06),0 10px 24px -14px rgba(27,30,33,.28);
  --sg-glow:rgba(169,117,50,.25); --sg-lichtkante:rgba(201,154,90,.7);
  --sg-hintergrund:radial-gradient(620px 460px at 85% 0%,rgba(217,174,114,.22),transparent 70%),radial-gradient(520px 420px at 0% 100%,rgba(224,122,95,.08),transparent 70%),linear-gradient(180deg,#FBF9F5,#F3EFE8);
}}
:root[data-theme="light"]{
  color-scheme:light;
  --sg-ground:#F3EFE8; --sg-ground2:#FBF9F5;
  --sg-text:#1B1E21; --sg-muted:#5E6670; --sg-faint:#8A9097;
  --sg-panel:rgba(255,255,255,.72); --sg-panel2:rgba(255,255,255,.95); --sg-border:rgba(27,30,33,.11);
  --sg-modal:#FFFFFF; --sg-input:#FFFFFF; --sg-input-schatten:0 1px 2px rgba(27,30,33,.08) inset;
  --sg-accent:#A3702C; --sg-accent-soft:rgba(169,117,50,.13); --sg-link:#8A5A1F;
  --sg-danger:#C0463B; --sg-success:#2E8B57; --sg-warning:#B7791F; --sg-info:#3F6FB5; --sg-teal:#2C8C83;
  --sg-karte:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.78));
  --sg-karte-schatten:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(27,30,33,.06),0 10px 24px -14px rgba(27,30,33,.28);
  --sg-glow:rgba(169,117,50,.25); --sg-lichtkante:rgba(201,154,90,.7);
  --sg-hintergrund:radial-gradient(620px 460px at 85% 0%,rgba(217,174,114,.22),transparent 70%),radial-gradient(520px 420px at 0% 100%,rgba(224,122,95,.08),transparent 70%),linear-gradient(180deg,#FBF9F5,#F3EFE8);
}
/* Grund: Hintergrund mit Leuchten, Schriften */
body{background:var(--sg-ground);color:var(--sg-text);font-family:var(--sg-body)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--sg-hintergrund)}
:focus-visible{outline:2px solid var(--sg-accent);outline-offset:2px}
::selection{background:var(--sg-accent-soft)}
*{scrollbar-width:thin;scrollbar-color:var(--sg-border) transparent}
/* Bausteine zum Wiederverwenden */
.sg-glas{background:var(--sg-karte);border:1px solid var(--sg-border);box-shadow:var(--sg-karte-schatten)}
.sg-mark{flex:none;width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;background:var(--sg-messing);color:var(--sg-accent-ink);font-family:var(--sg-display);font-weight:700;font-size:16px;box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 0 22px 2px var(--sg-glow)}
/* Schalter Hell/Dunkel (oben rechts, falls die App ihn nicht selbst einbaut) */
.sg-schalter{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:60;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--sg-border);background:var(--sg-karte);color:var(--sg-text);box-shadow:var(--sg-karte-schatten);cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;padding:0}
.sg-schalter:hover{border-color:var(--sg-accent)}
.sg-schalter.sg-inline{position:static}
/* ===== Ende SiTech Glas Grundbaustein ===== */

/* Farbnamen der App auf SiTech Glas umgebogen */
:root {
  --bg: var(--sg-ground); --karte: var(--sg-modal); --text: var(--sg-text); --leise: var(--sg-muted); --linie: var(--sg-border);
  --gruen: var(--sg-accent); --gruen2: var(--sg-accent); --gold: var(--sg-accent); --ok: #2E8B57; --kopf: transparent; --kopftext: var(--sg-text);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { min-height: 100dvh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
h2 { font-size: 1.05rem; margin: 24px 0 8px; color: var(--gruen2); }

.kopf { background: var(--kopf); color: var(--kopftext); padding: calc(14px + env(safe-area-inset-top)) 16px 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.ort { font-size: 1.25rem; font-weight: 700; }
.datum, .hidschri { font-size: .88rem; opacity: .85; }
.hidschri { color: var(--gold); opacity: 1; }
.tagwahl { display: flex; gap: 6px; }
.tagwahl button { background: rgba(255,255,255,.12); color: inherit; border: 0; border-radius: 10px; min-width: 40px; height: 40px; font-size: 1rem; }
.tagwahl #tagHeute { padding: 0 12px; font-size: .9rem; }

main { max-width: 560px; margin: 0 auto; padding: 14px 16px; }
.seite { display: none; }
.seite.aktiv { display: block; }

.naechstes { background: linear-gradient(135deg, var(--gruen), var(--gruen2)); color: #fff; border-radius: 18px; padding: 18px; text-align: center; }
.naechstes .klein { color: #fff; opacity: .8; font-size: .85rem; }
.naechstes .gross { font-size: 1.7rem; font-weight: 700; }
.naechstes .zeit { font-size: 2.6rem; font-weight: 300; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.naechstes .rest { color: #f3dfa5; font-variant-numeric: tabular-nums; }

.liste { list-style: none; margin: 14px 0 0; padding: 0; background: var(--karte); border-radius: 16px; overflow: hidden; }
.liste li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--linie); }
.liste li:last-child { border-bottom: 0; }
.liste li.jetzt { background: color-mix(in srgb, var(--gold) 20%, var(--karte)); }
.liste li.vorbei .zeit { opacity: .55; }
.liste .namen { flex: 1; }
.liste .name { font-weight: 600; }
.liste .unter { font-size: .8rem; color: var(--leise); }
.liste .zeit { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.haken { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--linie); background: transparent; color: #fff; font-size: 1rem; line-height: 1; padding: 0; }
.haken.an { background: var(--ok); border-color: var(--ok); }
.haken.leer { visibility: hidden; }

.hinweis { color: var(--leise); font-size: .85rem; margin: 10px 2px; }

.kompass { width: min(78vw, 320px); margin: 8px auto; }
.kompass svg { width: 100%; display: block; }
.k-ring { fill: var(--karte); stroke: var(--linie); stroke-width: 2; }
.k-n { fill: #c0392b; font-weight: 700; font-size: 16px; text-anchor: middle; dominant-baseline: middle; }
.k-w { fill: var(--leise); font-size: 14px; text-anchor: middle; dominant-baseline: middle; }
.k-striche line { stroke: var(--linie); stroke-width: 2; }
.k-pfeil { fill: var(--gold); }
.k-linie { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.k-mitte { fill: var(--text); }
.kompass.treffer .k-pfeil { fill: var(--ok); }
.kompass.treffer .k-linie { stroke: var(--ok); }
.kompass.treffer .k-ring { stroke: var(--ok); stroke-width: 4; }
#kompassRose, #kibleZeiger { transition: transform .15s linear; transform-origin: 0 0; }
.kible-info { text-align: center; margin: 8px 0 12px; }
.kible-info .gross { font-size: 2rem; font-weight: 700; }
.klein { font-size: .85rem; color: var(--leise); }

.knopf { display: block; width: 100%; padding: 14px; border: 0; border-radius: 14px; background: var(--gruen2); color: #fff; font-size: 1rem; font-weight: 600; margin: 10px 0; }
.knopf.zweit { background: transparent; color: var(--gruen2); border: 2px solid var(--gruen2); }
.knopf:disabled { opacity: .5; }

.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kachel { background: var(--karte); border-radius: 14px; padding: 14px 8px; text-align: center; }
.kachel .gross { font-size: 1.6rem; font-weight: 700; }
.raster { background: var(--karte); border-radius: 16px; padding: 10px 12px; margin-top: 14px; }
.raster .zeile { display: grid; grid-template-columns: 70px repeat(5, 1fr); align-items: center; padding: 6px 0; text-align: center; }
.raster .zeile.kopfz { font-size: .72rem; color: var(--leise); }
.raster .tag { text-align: left; font-size: .85rem; }
.punkt { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linie); background: transparent; margin: 0 auto; padding: 0; color: #fff; font-size: .8rem; line-height: 1; }
.punkt.an { background: var(--ok); border-color: var(--ok); }

.feld { display: block; font-size: .9rem; color: var(--leise); margin: 8px 0; }
select, input[type=number] { width: 100%; padding: 12px; font-size: 1rem; border-radius: 12px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); margin-top: 4px; }
.schalter-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 8px 0; }
.schalter-liste label { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.schalter-liste input { width: 22px; height: 22px; accent-color: var(--gruen2); }
.minuten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.minuten label { font-size: .8rem; color: var(--leise); }

.leiste { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--karte); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
.leiste button { flex: 1; border: 0; background: transparent; color: var(--leise); padding: 8px 0 10px; font-size: .72rem; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.leiste button span { font-size: 1.4rem; filter: grayscale(1); opacity: .7; }
.leiste button.aktiv { color: var(--gruen2); font-weight: 700; }
.leiste button.aktiv span { filter: none; opacity: 1; }

.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 20px; font-size: .9rem; opacity: 0; pointer-events: none; transition: .25s; max-width: 90vw; text-align: center; }
.toast.zeigen { opacity: 1; transform: translate(-50%, 0); }

/* ===== SiTech Glas: Bauteile der Gebets-App ===== */
html { background: var(--sg-ground); }
html, body { font-family: var(--sg-body); }
body { background: transparent; }
h2 { font-family: var(--sg-display); letter-spacing: .04em; text-transform: uppercase; font-size: .9rem; color: var(--sg-accent); }
.kopf { background: transparent; align-items: center; }
.ort { font-family: var(--sg-display); letter-spacing: .02em; }
.hidschri { color: var(--sg-accent); }
.tagwahl { align-items: center; }
.tagwahl button { background: var(--sg-karte); border: 1px solid var(--sg-border); box-shadow: var(--sg-karte-schatten); border-radius: 999px; color: var(--sg-text); }
.naechstes { background: var(--sg-karte); border: 1px solid var(--sg-border); border-top-color: var(--sg-lichtkante); box-shadow: var(--sg-karte-schatten), 0 0 40px -12px var(--sg-glow); color: var(--sg-text); border-radius: 20px; }
.naechstes .klein { color: var(--sg-muted); opacity: 1; }
.naechstes .gross { font-family: var(--sg-display); }
.naechstes .zeit { font-family: var(--sg-mono); font-weight: 500; color: var(--sg-accent); }
.naechstes .rest { color: var(--sg-text); font-family: var(--sg-mono); }
.liste, .kachel, .raster { background: var(--sg-karte); border: 1px solid var(--sg-border); box-shadow: var(--sg-karte-schatten); }
.liste li.jetzt { background: var(--sg-accent-soft); }
.liste .zeit, .kachel .gross, .kible-info .gross { font-family: var(--sg-mono); }
.haken, .punkt { color: #fff; }
.knopf { background: var(--sg-messing); color: var(--sg-accent-ink); border-radius: 999px; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 0 18px -4px var(--sg-glow); }
.knopf.zweit { background: transparent; color: var(--sg-accent); border: 1px solid var(--sg-accent); box-shadow: none; }
select, input[type=number] { background: var(--sg-input); box-shadow: var(--sg-input-schatten); border: 1px solid var(--sg-border); color: var(--sg-text); }
.schalter-liste input { accent-color: var(--sg-accent); }
.k-ring { fill: var(--sg-input); }
.k-n { fill: var(--sg-danger); }
.leiste { background: var(--sg-modal); background: color-mix(in srgb, var(--sg-modal) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--sg-border); }
.leiste button.aktiv { color: var(--sg-accent); }
.toast { background: var(--sg-modal); color: var(--sg-text); border: 1px solid var(--sg-border); box-shadow: var(--sg-karte-schatten); }
@media print { body::before, .sg-schalter { display: none; } }

/* ===== Islamisches Design: Grün, Gold, Sternmuster, Bogen ===== */
:root {
  --sg-ground:#06130E; --sg-ground2:#0A1F17;
  --sg-text:#EEF2E6; --sg-muted:#A8B5A8; --sg-faint:#6F7F72;
  --sg-border:rgba(212,175,90,.20); --sg-modal:#0D1F17;
  --sg-accent:#D4AF5A; --sg-accent-soft:rgba(212,175,90,.16); --sg-accent-ink:#1A1405;
  --sg-messing:linear-gradient(135deg,#EBD28A,#B8923F); --sg-link:#EBD28A; --sg-glow:rgba(212,175,90,.40); --sg-lichtkante:rgba(235,210,138,.85);
  --sg-display:"Amiri","Chakra Petch",Georgia,serif;
  --sg-hintergrund:radial-gradient(520px 420px at 50% -4%,rgba(212,175,90,.20),transparent 70%),radial-gradient(520px 460px at 90% 78%,rgba(31,143,95,.16),transparent 70%),radial-gradient(420px 360px at 8% 90%,rgba(212,175,90,.08),transparent 70%),linear-gradient(180deg,#0A1F17,#06130E);
  --muster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='1'%3E%3Crect x='22' y='22' width='40' height='40'/%3E%3Crect x='22' y='22' width='40' height='40' transform='rotate(45 42 42)'/%3E%3Ccircle cx='42' cy='42' r='9'/%3E%3Cpath d='M0 0L12 12M84 0L72 12M0 84L12 72M84 84L72 72'/%3E%3C/g%3E%3C/svg%3E"); --muster-deckkraft:.10;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --sg-ground:#F4EFDF; --sg-ground2:#FBF8EE;
  --sg-text:#15271E; --sg-muted:#566559; --sg-faint:#8A978B;
  --sg-border:rgba(15,61,46,.16); --sg-modal:#FFFFFF;
  --sg-accent:#8F6B1F; --sg-accent-soft:rgba(143,107,31,.13); --sg-accent-ink:#FFF8E6;
  --sg-messing:linear-gradient(135deg,#B8923F,#8F6B1F); --sg-link:#7A5A18; --sg-glow:rgba(143,107,31,.25); --sg-lichtkante:rgba(184,146,63,.75);
  --sg-hintergrund:radial-gradient(620px 460px at 50% 0%,rgba(212,175,90,.26),transparent 70%),radial-gradient(520px 420px at 100% 100%,rgba(15,90,64,.08),transparent 70%),linear-gradient(180deg,#FBF8EE,#F4EFDF);
  --muster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%230F5A40' stroke-width='1'%3E%3Crect x='22' y='22' width='40' height='40'/%3E%3Crect x='22' y='22' width='40' height='40' transform='rotate(45 42 42)'/%3E%3Ccircle cx='42' cy='42' r='9'/%3E%3Cpath d='M0 0L12 12M84 0L72 12M0 84L12 72M84 84L72 72'/%3E%3C/g%3E%3C/svg%3E"); --muster-deckkraft:.09;
} }
:root[data-theme="light"] {
  --sg-ground:#F4EFDF; --sg-ground2:#FBF8EE;
  --sg-text:#15271E; --sg-muted:#566559; --sg-faint:#8A978B;
  --sg-border:rgba(15,61,46,.16); --sg-modal:#FFFFFF;
  --sg-accent:#8F6B1F; --sg-accent-soft:rgba(143,107,31,.13); --sg-accent-ink:#FFF8E6;
  --sg-messing:linear-gradient(135deg,#B8923F,#8F6B1F); --sg-link:#7A5A18; --sg-glow:rgba(143,107,31,.25); --sg-lichtkante:rgba(184,146,63,.75);
  --sg-hintergrund:radial-gradient(620px 460px at 50% 0%,rgba(212,175,90,.26),transparent 70%),radial-gradient(520px 420px at 100% 100%,rgba(15,90,64,.08),transparent 70%),linear-gradient(180deg,#FBF8EE,#F4EFDF);
  --muster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%230F5A40' stroke-width='1'%3E%3Crect x='22' y='22' width='40' height='40'/%3E%3Crect x='22' y='22' width='40' height='40' transform='rotate(45 42 42)'/%3E%3Ccircle cx='42' cy='42' r='9'/%3E%3Cpath d='M0 0L12 12M84 0L72 12M0 84L12 72M84 84L72 72'/%3E%3C/g%3E%3C/svg%3E"); --muster-deckkraft:.09;
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--muster); background-size: 84px 84px; opacity: var(--muster-deckkraft); }
h2 { font-family: var(--sg-display); text-transform: none; letter-spacing: .01em; font-size: 1.2rem; }
.ort { font-family: var(--sg-display); font-size: 1.6rem; }
.datum, .hidschri { font-family: var(--sg-body); }
.zierleiste { position: relative; height: 14px; margin: 0 16px 4px; background: linear-gradient(90deg, transparent, var(--sg-accent) 25%, var(--sg-accent) 75%, transparent) center / 100% 1px no-repeat; }
.zierleiste::before, .zierleiste::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -6px 0 0 -6px; border: 1px solid var(--sg-accent); background: var(--sg-ground); }
.zierleiste::after { transform: rotate(45deg); }
.naechstes { border-radius: 50% 50% 22px 22px / 130px 130px 22px 22px; padding: 44px 18px 20px; outline: 1px solid var(--sg-border); outline-offset: 5px; margin-top: 8px; }
.naechstes .gross { font-size: 2rem; }
.naechstes .arabisch { font-family: "Amiri", serif; font-size: 2rem; line-height: 1.3; color: var(--sg-accent); margin-top: -2px; }
.liste .ar { font-family: "Amiri", serif; font-size: 1.15rem; color: var(--sg-accent); margin-left: 6px; font-weight: 400; }
.liste .name { font-family: var(--sg-display); font-size: 1.15rem; }
.liste li.jetzt { box-shadow: inset 3px 0 0 var(--sg-accent); }

/* ===== Sprache und Kalender ===== */
.sg-schalter.sprache { font: 700 12px/1 var(--sg-body); letter-spacing: .02em; }
.leiste button i { font-style: normal; }
.sprachwahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sprachwahl .knopf { margin: 4px 0; }
.sprachwahl .knopf.aktivSprache { background: var(--sg-messing); color: var(--sg-accent-ink); border-color: transparent; }

.monatskopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.monatskopf button { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--sg-border); background: var(--sg-karte); box-shadow: var(--sg-karte-schatten); color: var(--sg-text); font-size: 1.1rem; }
.monatsname { text-align: center; }
.monatsname .gross { font-family: var(--sg-display); font-size: 1.5rem; font-weight: 700; text-transform: capitalize; }
.kalraster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kalraster .wt { text-align: center; font-size: .75rem; color: var(--sg-muted); padding: 4px 0; text-transform: capitalize; }
.kalraster .leer { min-height: 52px; }
.kalraster button.tag { position: relative; min-height: 52px; border: 1px solid var(--sg-border); border-radius: 12px; background: var(--sg-karte); color: var(--sg-text); padding: 4px 0 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.kalraster button.tag b { font-size: 1.05rem; font-weight: 600; }
.kalraster button.tag small { font-family: "Amiri", serif; font-size: .8rem; color: var(--sg-accent); line-height: 1; }
.kalraster button.freitag b { color: var(--sg-accent); }
.kalraster button.heute { outline: 2px solid var(--sg-accent); outline-offset: -2px; }
.kalraster button.gewaehlt { background: var(--sg-accent-soft); border-color: var(--sg-accent); }
.kalraster button.bayram { background: var(--sg-messing); color: var(--sg-accent-ink); }
.kalraster button.bayram b, .kalraster button.bayram small { color: var(--sg-accent-ink); }
.kalraster i { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; }
.kalraster i.punkt-tag { background: var(--sg-accent); }
.kalraster i.punkt-nacht { background: transparent; box-shadow: inset -2px -1px 0 0 var(--sg-accent); width: 8px; height: 8px; }
.kalraster i.punkt-bayram { background: var(--sg-accent-ink); }
.kleinknopf { width: auto; margin: 10px auto; padding: 8px 18px; font-size: .9rem; }
.kartentext { background: var(--sg-karte); border: 1px solid var(--sg-border); box-shadow: var(--sg-karte-schatten); border-radius: 16px; padding: 14px; margin: 6px 0 0; }
.kartentext .gross { font-family: var(--sg-display); font-size: 1.2rem; font-weight: 700; }
.kartentext .hid { color: var(--sg-accent); margin-bottom: 8px; }
.ereignis { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--sg-border); }
.ereignis > span { font-size: 1.3rem; line-height: 1.2; }
.liste.kommend li { cursor: pointer; }
.liste.kommend .sym { font-size: 1.3rem; }
.liste.kommend .zeit { font-family: var(--sg-body); font-size: .85rem; text-align: right; white-space: nowrap; }

.hadith { margin-top: 14px; }
.hadith h3, .hadith-klein h3 { margin: 0 0 2px; font-family: var(--sg-display); font-size: 1.1rem; color: var(--sg-accent); }
.hadith blockquote, .hadith-klein blockquote { margin: 8px 0; padding: 0 0 0 12px; border-left: 3px solid var(--sg-accent); font-family: var(--sg-display); font-size: 1.1rem; line-height: 1.45; }
.hadith .quelle, .hadith-klein .quelle { font-size: .78rem; }
.hadith-klein { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sg-border); }