/* SmartAdhanBoard – Verwaltung (nach freigegebener Vorschau, Entwurf 1b) */
@font-face { font-family: "Inter"; src: url("../fonts/inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-ExtraBold.woff") format("woff"); font-weight: 800; font-display: swap; }
:root {
    --gruen: #0d3a30; --gruen-dunkel: #0a2e26; --gruen-hell: #1d6b57; --gruen-ton: #e6efe9; --naechstes: #2fbf8f;
    --creme: #fbf6ea; --gold: #e3b768; --gold-ton: #f8ecd3;
    --grund: #f5f2ea; --flaeche: #ffffff; --linie: #e3ddcd; --text: #12302a; --grau: #5b716a; --rot: #b5443b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Inter", system-ui, sans-serif; color: var(--text); background: var(--grund); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; letter-spacing: -.015em; line-height: 1.2; }
p { margin: 0; }
a { color: var(--gruen-hell); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Grundgerüst ---------- */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.app > div { min-width: 0; }
.seite { display: flex; flex-direction: column; background: var(--gruen-dunkel); color: var(--creme); padding: 22px 16px; gap: 4px; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; padding: 4px 10px 22px; }
.marke i { width: 24px; height: 24px; border-radius: 7px; background: var(--gold); position: relative; flex: none; }
.marke i::after { content: ""; position: absolute; top: 7px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: -8px 0 0 var(--gruen); }
.moschee-wahl { margin: 0 4px 18px; padding: 10px 12px; border-radius: 10px; background: rgba(251,246,234,.08); font-size: 14px; }
.moschee-wahl b { display: block; font-size: 15px; }
.moschee-wahl span { opacity: .65; }
.nav a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 9px; color: var(--creme); text-decoration: none; font-weight: 600; font-size: 15px; opacity: .78; }
.nav a:hover { opacity: 1; background: rgba(251,246,234,.06); }
.nav a[aria-current] { opacity: 1; background: var(--creme); color: var(--gruen); }
.nav .gruppe { margin: 22px 12px 6px; font-size: 13px; opacity: .5; font-weight: 600; }
.zahl { background: var(--gold); color: #2a1d05; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 1px 8px; }
.seite .unten { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid rgba(251,246,234,.12); font-size: 14px; }
.seite .unten span { opacity: .65; display: block; }
.seite .unten a { color: var(--creme); opacity: .8; }

.haupt { padding: 30px 40px 120px; max-width: 1180px; width: 100%; }
.kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.kopf h1 { font-size: 28px; font-weight: 800; }
.kopf p { color: var(--grau); margin-top: 4px; }

.flaeche { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; }
.knopf { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.knopf.primaer { background: var(--gruen); color: var(--creme); }
.knopf.zweit { background: var(--flaeche); border-color: var(--linie); color: var(--text); }
.knopf.klein { padding: 6px 12px; font-size: 14px; }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.punkt.an { background: var(--naechstes); box-shadow: 0 0 0 3px rgba(47,191,143,.2); }
.punkt.aus { background: #c9c1ad; }
.etikett { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.etikett.neu { background: var(--gold-ton); color: #6b4c10; }
.etikett.ok { background: var(--gruen-ton); color: var(--gruen); }
.etikett.grau { background: #eeeae0; color: var(--grau); }

/* ---------- Login ---------- */
#login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(70vmax 50vmax at 80% 0%, var(--gruen-hell) 0%, transparent 60%), var(--gruen); }
.login { width: 100%; max-width: 420px; background: var(--flaeche); border-radius: 18px; padding: 36px 34px; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.login .marke { color: var(--gruen); padding: 0 0 26px; }
.login h1 { font-size: 24px; margin-bottom: 6px; }
.login > p { color: var(--grau); margin-bottom: 24px; }
.login form { display: grid; gap: 16px; }
.login .zeile { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.login .knopf { justify-content: center; padding: 13px; font-size: 16px; }
.login-fuss { margin-top: 22px; text-align: center; color: rgba(251,246,234,.7); font-size: 14px; }

label.feld { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=time], input[type=number], input[type=date], input[type=url], select, textarea {
    font: inherit; font-size: 15px; color: var(--text); background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: 9px; padding: 9px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gruen-hell); box-shadow: 0 0 0 3px rgba(29,107,87,.15); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gruen); }

/* ---------- Übersicht ---------- */
.raster { display: grid; grid-template-columns: 1fr 1.05fr; gap: 22px; align-items: start; }
.flaeche h2 { font-size: 17px; padding: 18px 22px 0; }
.flaeche .inhalt { padding: 14px 22px 20px; }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 9px 0; border-bottom: 1px solid #efeadd; font-size: 15px; }
th { color: var(--grau); font-weight: 600; font-size: 13px; }
tr:last-child td { border-bottom: 0; }
td.z { font-weight: 700; }
tr.jetzt td { color: #6b4c10; }
tr.jetzt td:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 8px; }
.tv { background: #050b09; border-radius: 12px; padding: 9px; }
.tv img { display: block; width: 100%; border-radius: 5px; }
.tv-unter { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px 0; font-size: 14px; color: var(--grau); }
.schnell { display: grid; gap: 10px; }
.schnell a { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 11px; text-decoration: none; color: var(--text); background: var(--flaeche); }
.schnell a b { display: block; }
.schnell a span { color: var(--grau); font-size: 14px; }
.hinweis-band { display: flex; gap: 12px; align-items: center; background: var(--gold-ton); border: 1px solid #ecd6a8; color: #5a4310; padding: 12px 16px; border-radius: 11px; margin-bottom: 22px; font-size: 15px; }

/* ---------- Einstellungen: Zeilen mit Erklärung links, Bedienung rechts ---------- */
.abschnitt { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 26px 26px; border-bottom: 1px solid #efeadd; }
.abschnitt:last-child { border-bottom: 0; }
.abschnitt h2 { font-size: 17px; padding: 0; }
.abschnitt .erkl { color: var(--grau); font-size: 14px; margin-top: 6px; }
.schalter { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.schalter .bahn { width: 42px; height: 24px; border-radius: 999px; background: #d6cfbd; position: relative; flex: none; }
.schalter .bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.schalter.an .bahn { background: var(--gruen-hell); }
.schalter.an .bahn::after { left: 21px; }
.gebete { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.gebete label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--grau); }
.minuten { display: flex; align-items: center; border: 1.5px solid var(--linie); border-radius: 9px; overflow: hidden; background: var(--flaeche); }
.minuten input { border: 0; border-radius: 0; text-align: center; padding: 8px 4px; font-weight: 700; color: var(--text); }
.minuten span { padding: 0 9px; color: var(--grau); font-size: 13px; background: #f7f4ec; align-self: stretch; display: grid; place-items: center; }
.wahl { display: inline-flex; border: 1.5px solid var(--linie); border-radius: 10px; padding: 3px; background: #f7f4ec; gap: 3px; flex-wrap: wrap; }
.wahl span { padding: 7px 14px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--grau); }
.wahl span[aria-checked=true] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.reihe { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-top: 14px; }
.reihe label.feld { width: 170px; }
.ton-liste { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.ton-liste label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.farben { display: flex; gap: 14px; flex-wrap: wrap; }
.farbe { display: grid; gap: 8px; justify-items: center; font-size: 13px; font-weight: 600; color: var(--grau); }
.farbe i { width: 64px; height: 44px; border-radius: 10px; display: block; position: relative; overflow: hidden; border: 2px solid transparent; }
.farbe i::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 7px; height: 9px; border-radius: 3px; background: var(--gold); }
.farbe[aria-checked=true] i { outline: 3px solid var(--gold); outline-offset: 3px; }
.farbe.eigen i { background: conic-gradient(#5a1420, #12285a, #0b4650, #0d3a30, #6b4a1f, #5a1420); }
.leiste { position: fixed; left: 252px; right: 0; bottom: 0; background: rgba(255,255,255,.96); border-top: 1px solid var(--linie); padding: 14px 40px; display: flex; justify-content: flex-end; align-items: center; gap: 16px; backdrop-filter: blur(6px); }
.leiste span { color: var(--grau); font-size: 14px; margin-right: auto; }

/* ---------- Laufschrift & Inhalte ---------- */
.meldungen { display: grid; gap: 0; }
.meldung { display: grid; grid-template-columns: 22px 1fr 190px auto; gap: 14px; align-items: center; padding: 14px 22px; border-top: 1px solid #efeadd; }
.meldung .griff { color: #b8b09c; cursor: grab; font-size: 18px; line-height: 1; }
.meldung .text { font-weight: 600; }
.meldung .zeit { font-size: 14px; color: var(--grau); }
.neue { display: grid; grid-template-columns: 1fr 160px 160px auto; gap: 12px; align-items: end; padding: 18px 22px; background: #faf8f2; border-top: 1px solid #efeadd; border-radius: 0 0 14px 14px; }
.inhalte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 4px 22px 22px; }
.karte { border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; background: var(--flaeche); }
.karte .bild { height: 120px; background: #e9e3d3 center/cover; display: grid; place-items: center; color: var(--grau); font-weight: 600; font-size: 14px; }
.karte .text { padding: 12px 14px; }
.karte b { display: block; }
.karte span { font-size: 13px; color: var(--grau); }
.karte.neu-karte { border-style: dashed; display: grid; place-items: center; min-height: 190px; color: var(--grau); font-weight: 600; }

/* ---------- Bildschirme ---------- */
.bildschirm { display: grid; grid-template-columns: 200px 1fr auto; gap: 22px; align-items: center; padding: 18px 22px; border-top: 1px solid #efeadd; }
.bildschirm:first-of-type { border-top: 0; }
.bildschirm .mini { background: #050b09; border-radius: 8px; padding: 5px; }
.bildschirm .mini img { display: block; width: 100%; border-radius: 3px; }
.bildschirm b { font-size: 17px; }
.adresse { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.adresse code { background: #f3efe4; border-radius: 6px; padding: 3px 8px; font-family: inherit; }
.bildschirm .meta { color: var(--grau); font-size: 14px; margin-top: 4px; }

/* ---------- Anfragen / Anlegen ---------- */
.anfrage td { vertical-align: top; }
.anfrage td small { display: block; color: var(--grau); font-size: 13px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 22px; }
.formular .voll { grid-column: 1 / -1; }
.stufe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vorab { background: var(--gruen-ton); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--gruen); }

/* ---------- Moschee-Auswahl (Superadmin) ---------- */
.moschee-wahl { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; border: 1px solid rgba(251,246,234,.14); }
.moschee-wahl::after { content: "▾"; opacity: .7; font-size: 14px; }
.wahl-liste { display: none; position: absolute; left: 4px; right: auto; top: calc(100% + 8px); width: 300px; z-index: 20; background: var(--flaeche); color: var(--text); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.35); padding: 10px; }
.wahl-liste.offen { display: block; }
.wahl-liste input { margin-bottom: 8px; }
.wahl-liste a { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.wahl-liste a span { display: block; font-size: 13px; color: var(--grau); }
.wahl-liste a[aria-current] { background: var(--gruen-ton); }
.wahl-liste a[aria-current]::after { content: "✓"; color: var(--gruen-hell); font-weight: 800; }
.wahl-liste .trenner { border-top: 1px solid var(--linie); margin: 8px 0; }

/* ---------- Wechselseiten ---------- */
.steuerung { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding: 18px 22px; }
.steuerung .reihe { margin: 0; align-items: center; }
.steuerung .reihe label.feld { width: auto; display: flex; align-items: center; gap: 10px; }
.steuerung .reihe .minuten { width: 120px; }
.steuerung .info { color: var(--grau); font-size: 14px; margin-left: auto; }
.seiten { border-top: 1px solid #efeadd; }
.seite-zeile { display: grid; grid-template-columns: 20px 112px 1fr 90px 210px 60px auto; gap: 16px; align-items: center; padding: 12px 22px; border-bottom: 1px solid #efeadd; }
.seite-zeile:last-child { border-bottom: 0; }
.seite-zeile.aus { opacity: .5; }
.seite-zeile .griff { color: #b8b09c; font-size: 18px; cursor: grab; }
.vorschaubild { height: 63px; border-radius: 7px; background: var(--gruen); color: var(--creme); display: grid; place-items: center; font-size: 11px; font-weight: 700; text-align: center; padding: 6px; line-height: 1.25; overflow: hidden; }
.vorschaubild.qr { background: var(--creme); color: var(--gruen); border: 1px solid var(--linie); }
.vorschaubild.qr::before { content: ""; width: 26px; height: 26px; margin-bottom: 3px; background: repeating-conic-gradient(var(--gruen) 0 25%, transparent 0 50%) 0 0/8px 8px; border-radius: 3px; }
.vorschaubild.qr { grid-template-rows: auto auto; align-content: center; }
.vorschaubild.bild { background: linear-gradient(135deg, #b5443b, #e3b768); }
.seite-zeile b { display: block; font-size: 15px; }
.thema { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 5px; padding: 1px 7px; background: #eeeae0; color: var(--grau); margin-top: 3px; }
.seite-zeile .dauer, .seite-zeile .plan { font-size: 14px; color: var(--grau); }
.schalter.klein .bahn { width: 36px; height: 20px; }
.schalter.klein .bahn::after { width: 14px; height: 14px; }
.schalter.klein.an .bahn::after { left: 19px; }
.typen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 4px 22px 22px; }
.typ { border: 1.5px solid var(--linie); border-radius: 12px; padding: 14px; background: var(--flaeche); }
.typ b { display: block; font-size: 15px; margin-bottom: 4px; }
.typ span { font-size: 13px; color: var(--grau); }
.typ.spaeter { border-style: dashed; opacity: .6; }
.bearbeiten { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.tage { display: flex; gap: 6px; flex-wrap: wrap; }
.tage span { width: 42px; text-align: center; padding: 7px 0; border-radius: 8px; border: 1.5px solid var(--linie); font-weight: 600; font-size: 14px; color: var(--grau); }
.tage span[aria-pressed=true] { background: var(--gruen); border-color: var(--gruen); color: var(--creme); }
.qr-vorschau { background: var(--gruen); border-radius: 12px; padding: 22px; color: var(--creme); text-align: center; aspect-ratio: 16/9; display: grid; place-items: center; }
.qr-vorschau .karte2 { background: var(--creme); color: var(--gruen); border-radius: 12px; padding: 14px 18px; display: grid; gap: 6px; justify-items: center; }
.qr-vorschau .code { width: 86px; height: 86px; background: repeating-conic-gradient(var(--gruen) 0 25%, #fff 0 50%) 0 0/14px 14px; border: 6px solid #fff; border-radius: 6px; }
.qr-vorschau b { font-size: 16px; }
.qr-vorschau span { font-size: 12px; color: var(--grau); }

.ablage { margin: 0 22px 22px; border: 2px dashed #cfc6b0; border-radius: 12px; padding: 26px; text-align: center; display: grid; gap: 6px; background: #faf8f2; }
.ablage span { color: var(--grau); font-size: 14px; }
.ablage .platz { font-size: 13px; margin-top: 6px; }

/* ---------- Handy ---------- */
.handy-kopf { display: none; }
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .seite { display: none; }
    .handy-kopf { display: flex; justify-content: space-between; align-items: center; background: var(--gruen-dunkel); color: var(--creme); padding: 12px 16px; position: sticky; top: 0; z-index: 3; }
    .handy-kopf .marke { padding: 0; font-size: 16px; }
    .handy-kopf .menue { width: 40px; height: 40px; border-radius: 10px; background: rgba(251,246,234,.1); display: grid; place-items: center; font-size: 20px; }
    .handy-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
    .handy-tabs a { flex: none; padding: 7px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--grau); text-decoration: none; }
    .handy-tabs a[aria-current] { background: var(--gruen); color: var(--creme); }
    .haupt { padding: 20px 16px 110px; }
    .kopf { flex-direction: column; align-items: flex-start; }
    .kopf h1 { font-size: 24px; }
    .raster, .abschnitt, .formular, .stufe { grid-template-columns: 1fr; }
    .abschnitt { gap: 14px; padding: 20px 18px; }
    .gebete { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .leiste { left: 0; padding: 12px 16px; }
    .leiste span { display: none; }
    .leiste .knopf { flex: 1; justify-content: center; }
    .meldung { grid-template-columns: 1fr auto; }
    .meldung .griff, .meldung .zeit { display: none; }
    .neue { grid-template-columns: 1fr; }
    .inhalte { grid-template-columns: 1fr 1fr; }
    .bildschirm { grid-template-columns: 1fr; }
    .seite-zeile { grid-template-columns: 80px 1fr auto; gap: 10px 12px; padding: 12px 16px; }
    .seite-zeile .griff, .seite-zeile .dauer, .seite-zeile .knopf { display: none; }
    .seite-zeile .plan { grid-column: 2 / 4; margin-top: -6px; }
    .vorschaubild { height: 45px; font-size: 9px; }
    .typen { grid-template-columns: 1fr 1fr; }
    .bearbeiten { grid-template-columns: 1fr; }
    .steuerung .info { margin-left: 0; }
}
@media (min-width: 861px) { .handy-tabs { display: none; } }

/* ---------- Ergänzungen für die echte Verwaltung ---------- */
details.moschee-details { position: relative; margin: 0 4px 18px; }
details.moschee-details > summary { list-style: none; margin: 0; }
details.moschee-details > summary::-webkit-details-marker { display: none; }
details.moschee-details[open] .wahl-liste { display: block; }
.moschee-wahl.fest { cursor: default; }
.moschee-wahl.fest::after { content: none; }
.hinweis { border-radius: 11px; padding: 12px 16px; margin-bottom: 20px; font-size: 15px; font-weight: 600; }
.hinweis.ok { background: var(--gruen-ton); color: var(--gruen); border: 1px solid #b9dccb; }
.hinweis.fehler { background: #fbeceb; color: #7a1d1d; border: 1px solid #e7b7b2; }
.login .hinweis { margin-bottom: 4px; }
.login .zurueck { text-align: center; font-size: 14px; }
.leer { padding: 22px; color: var(--grau); }
.vorschau-tv { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px; background: var(--gruen); }
.vorschau-tv iframe { position: absolute; left: 0; top: 0; width: 1366px; height: 768px; border: 0; transform-origin: 0 0; pointer-events: none; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--creme); opacity: .8; text-decoration: underline; cursor: pointer; }
.handy-menue { display: none; }
@media (max-width: 860px) {
    .handy-menue[open] { display: block; }
}
@media (min-width: 861px) { .handy-wahl { display: none; } }

/* ---------- Echte Formularelemente für Schalter und Auswahl ---------- */
label.schalter { cursor: pointer; }
label.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.schalter input:checked + .bahn { background: var(--gruen-hell); }
label.schalter input:checked + .bahn::after { left: 21px; }
label.schalter.klein input:checked + .bahn::after { left: 19px; }
label.schalter input:focus-visible + .bahn { outline: 3px solid var(--gold); outline-offset: 2px; }
.wahl label { position: relative; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl label span { display: block; padding: 7px 14px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--grau); }
.wahl input:checked + span { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wahl input:focus-visible + span { outline: 3px solid var(--gold); }
.farben label.farbe { cursor: pointer; position: relative; }
.farben label.farbe input { position: absolute; opacity: 0; }
.farben label.farbe input:checked + i { outline: 3px solid var(--gold); outline-offset: 3px; }
.farben label.farbe input:focus-visible + i { outline: 3px dashed var(--gold); outline-offset: 3px; }
.eigene-farben { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.eigene-farben label { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.eigene-farben input[type=color] { width: 46px; height: 36px; border: 1.5px solid var(--linie); border-radius: 8px; padding: 2px; background: #fff; }
.leiste[hidden] { display: none; }
.verborgen { display: none !important; }
details.erweitert { padding: 0 26px 22px; }
details.erweitert summary { cursor: pointer; font-weight: 700; padding: 18px 0 6px; color: var(--gruen-hell); }
.dauer-tabelle td, .dauer-tabelle th { padding: 6px 10px 6px 0; border: 0; }
.dauer-tabelle .minuten { width: 110px; }

/* Laufschrift */
.meldung .status { font-size: 13px; font-weight: 700; }
.meldung .aktionen { display: flex; gap: 6px; align-items: center; }
.meldung .aktionen form { margin: 0; }
.meldung.abgelaufen .text { color: var(--grau); text-decoration: line-through; }
.pfeil { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--linie); background: var(--flaeche); cursor: pointer; font-size: 14px; color: var(--grau); }
.pfeil:disabled { opacity: .35; cursor: default; }
.knopf.gefahr { color: var(--rot); }
.meldung { grid-template-columns: 1fr 210px auto; }
.meldung.bearbeiten-zeile { grid-template-columns: 1fr; background: #faf8f2; }
.zeichen { font-size: 13px; color: var(--grau); font-weight: 400; }
@media (max-width: 860px) {
    .meldung { grid-template-columns: 1fr; gap: 8px; }
    .gebete.korrektur { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    details.erweitert { padding: 0 18px 18px; }
}

/* ---------- Wechselseiten ---------- */
.seite-zeile { grid-template-columns: 70px 112px 1fr 100px 220px 50px auto; }
.seite-zeile .pfeile { display: flex; gap: 4px; margin: 0; }
.seite-zeile form { margin: 0; }
.vorschaubild.foto { background: #e9e3d3 center/cover no-repeat; }
.vorschaubild.video { background: #050b09; }
a.typ { text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
a.typ:hover { border-color: var(--gruen-hell); transform: translateY(-1px); }
.knopf-schalter { display: inline-flex; background: none; border: 0; padding: 0; cursor: pointer; }
.knopf-schalter.an .bahn { background: var(--gruen-hell); }
.knopf-schalter.an .bahn::after { left: 19px; }
.speicher { display: grid; gap: 8px; padding: 0 22px 22px; font-size: 14px; color: var(--grau); }
.speicher-balken { height: 8px; border-radius: 99px; background: #eeeae0; overflow: hidden; }
.speicher-balken i { display: block; height: 100%; background: var(--gruen-hell); border-radius: 99px; }
.abschnitt.einspaltig { grid-template-columns: 1fr; gap: 16px; }
.hinweis-klein { font-size: 13px; color: var(--grau); }
.datei-jetzt { font-size: 14px; margin-bottom: 10px; color: var(--gruen); font-weight: 600; }
.ablage input[type=file] { font-size: 14px; margin: 6px auto 0; max-width: 100%; }
.dateiname { font-weight: 600; color: var(--gruen); }
.dateiname.fehler { color: var(--rot); }
textarea { resize: vertical; line-height: 1.45; }
textarea[dir=rtl] { font-size: 20px; font-family: "Noto Naskh Arabic", "Amiri", "Geeza Pro", serif; }
.tage label { position: relative; cursor: pointer; }
.tage input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tage label span { display: block; width: 42px; text-align: center; padding: 7px 0; border-radius: 8px; border: 1.5px solid var(--linie); font-weight: 600; font-size: 14px; color: var(--grau); }
.tage input:checked + span { background: var(--gruen); border-color: var(--gruen); color: var(--creme); }
.tage input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Vorschau einer Wechselseite (verkleinerter Fernseher) */
.tv-seite { aspect-ratio: 16 / 9; background: var(--gruen); border-radius: 12px; padding: 12px; display: grid; overflow: hidden; }
.tv-seite video { width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 6px; }
.tv-bild { border-radius: 6px; background: #0a2e26 center/contain no-repeat; display: grid; place-items: center; color: rgba(251,246,234,.6); font-size: 13px; }
.tv-karte { background: var(--creme); color: var(--gruen); border-radius: 9px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; min-height: 0; }
.tv-karte i { font-style: normal; align-self: flex-start; font-size: 10px; font-weight: 700; color: var(--gruen-hell); background: rgba(29,107,87,.1); border-radius: 99px; padding: 1px 8px; }
.tv-karte i:empty { display: none; }
.tv-karte .ar { font-size: 15px; text-align: right; font-family: "Noto Naskh Arabic", "Amiri", serif; }
.tv-karte b { font-size: 14px; line-height: 1.3; }
.tv-karte span { font-size: 11px; color: var(--grau); }
.tv-karte small { font-size: 10px; color: var(--grau); font-weight: 600; }
.tv-karte :empty:not(i) { display: none; }
.tv-karte.qr-reihe { flex-direction: row; align-items: center; gap: 14px; }
.tv-karte.qr-reihe div:last-child { display: grid; gap: 4px; }
.tv-qr { width: 96px; height: 96px; flex: none; display: grid; place-items: center; background: #fff; border-radius: 6px; font-size: 10px; color: var(--grau); text-align: center; }
.tv-qr svg { width: 96px; height: 96px; display: block; border-radius: 6px; }

/* Einstellungen: Darstellung */
.darstellungen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.darstellung { position: relative; cursor: pointer; display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: var(--grau); }
.darstellung input { position: absolute; opacity: 0; }
.darstellung .schema { aspect-ratio: 16 / 9; border-radius: 9px; background: var(--gruen); padding: 6px; display: grid; gap: 4px; border: 2px solid transparent; }
.darstellung input:checked ~ .schema { outline: 3px solid var(--gold); outline-offset: 2px; }
.darstellung input:checked ~ b { color: var(--text); }
.darstellung input:focus-visible ~ .schema { outline: 3px dashed var(--gold); outline-offset: 2px; }
.darstellung b { font-weight: 700; }
.schema i { display: block; border-radius: 3px; background: rgba(251,246,234,.22); }
.schema i.f { background: var(--creme); }
.schema i.g { background: var(--gold); }
.schema.vollbild { grid-template-rows: 1fr 2fr 2fr; grid-template-columns: repeat(3, 1fr); }
.schema.vollbild i:first-child { grid-column: 1 / -1; }
.schema.vollbild i.f { background: var(--creme); }
.schema.unten { grid-template-columns: 1fr 2fr; grid-template-rows: 3fr 1fr; }
.schema.unten i:nth-child(3) { grid-column: 1 / -1; }
.schema.links { grid-template-columns: 1fr 2.4fr; }
.schema.oben { grid-template-columns: 2.4fr 1fr; grid-template-rows: 1fr 3fr; }
.schema.oben i:first-child { grid-column: 1 / -1; }
@media (max-width: 860px) {
    .darstellungen { grid-template-columns: 1fr 1fr; }
    .seite-zeile { grid-template-columns: 80px 1fr auto; }
    .seite-zeile .pfeile { display: none; }
    .seite-zeile > form:not(.pfeile) { grid-row: 1; grid-column: 3; }
}
a.still { color: inherit; text-decoration: none; }
a.still:hover { text-decoration: underline; }

/* Bildschirme: App-Hinweis */
.code-app { font-family: ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: .02em; color: var(--gruen); }
.app-hinweis .inhalt p { color: var(--grau); font-size: 15px; max-width: 70ch; }
.schritte { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; max-width: 75ch; }
.schritte code, .app-hinweis code { white-space: nowrap; background: #f3efe4; border-radius: 6px; padding: 1px 6px; font-size: 14px; }