/* ==========================================================================
   Mitgliederverwaltung / Gemeinde-Portal – Stylesheet
   Bewusst an bibelgemeinde-bs.de angelehnt (gleiche Farben & Schriften),
   damit sich .org und .de wie eine zusammengehörige Umgebung anfühlen.
   Tag-basiert geschrieben, damit es über alle bestehenden Seiten greift.
   ========================================================================== */

/* KEINE externen Schriften laden!
   Bis Version 78 wurden Fraunces und Inter über @import von fonts.googleapis.com
   nachgeladen. Dabei wird bei JEDEM Seitenaufruf die IP-Adresse der Nutzer an Google
   übertragen – ohne Einwilligung und ohne Rechtsgrundlage. Genau dafür gab es 2022
   eine Abmahnwelle (LG München I, Az. 3 O 17493/20).

   Aktuell werden ausschließlich die auf dem Gerät vorhandenen Systemschriften genutzt
   (siehe --schrift-serif / --schrift-sans weiter unten). Es besteht KEINE Verbindung
   zu externen Servern.

   Wer das ursprüngliche Aussehen zurückhaben möchte: Beide Schriften stehen unter der
   SIL Open Font License und dürfen selbst ausgeliefert werden. Anleitung dazu in
   SCHRIFTEN-selbst-hosten.md. */

:root {
    --farbe-primary: #A8462F;
    --farbe-primary-dunkel: #8A3822;
    --farbe-primary-hell: #F1E0D8;
    --farbe-akzent: #C08A34;
    --farbe-patina: #4B5D45;
    --farbe-hintergrund: #F2E9D8;
    --farbe-hintergrund-soft: #EBDFC8;
    --farbe-flaeche: #FFFDF8;
    --farbe-rand: #D9CBAA;
    --farbe-text: #2B2420;
    --farbe-text-gedaempft: #5B5148;
    --farbe-erfolg: #4B5D45;
    --farbe-gefahr: #963A26;
    /* Flächen mit Bedeutung – müssen in jeder Palette zum Text passen */
    --flaeche-erfolg: #E9F3EA;
    --flaeche-erfolg-gedaempft: #E0EBE1;
    --flaeche-warnung: #FFFACC;
    --flaeche-gefahr: #FDECEA;
    --flaeche-info: #ECECF7;
    --flaeche-neutral: #F4F2ED;
    --text-auf-flaeche: #2B2420;
    /* Signaltexte: müssen in jeder Palette auf dem jeweiligen Grund lesbar bleiben */
    --text-erfolg: #2E6B33;
    --text-warnung: #A67C00;
    --text-gefahr: #963A26;
    --rand-erfolg: #9CC9A0;
    --rand-warnung: #D6C97A;
    --text-auf-info: #22336B;
    --flaeche-info-hover: #D6D6F0;
    --flaeche-feiertag-gesetzlich: #FDEAEA;
    --flaeche-feiertag-kirchlich: #FDF5E2;
    --farbe-nav-hintergrund: rgba(242, 233, 216, 0.9);
    --schrift-serif: 'Fraunces', ui-serif, Georgia, serif;
    --schrift-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --radius: 10px;
    --nav-hoehe: 74px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--schrift-sans);
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    line-height: 1.55;
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 20px 60px;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--schrift-serif);
    color: var(--farbe-text);
    line-height: 1.2;
    font-weight: 600;
}
h1 { font-size: 1.8em; margin: 0.6em 0 0.5em; letter-spacing: -0.01em; }
h2 { font-size: 1.3em; margin: 1.3em 0 0.5em; padding-bottom: 6px; border-bottom: 1px solid var(--farbe-rand); }
h3 { font-size: 1.05em; margin: 1.1em 0 0.4em; }

p { margin: 0.6em 0; }
small { color: var(--farbe-text-gedaempft); }
code { background: var(--farbe-primary-hell); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; }

a { color: var(--farbe-primary); text-decoration: none; }
a:hover { color: var(--farbe-primary-dunkel); text-decoration: underline; }

hr { border: none; border-top: 1px solid var(--farbe-rand); margin: 1.5em 0; }

/* ---------- Navigation ---------- */
nav.hauptnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    background: var(--farbe-nav-hintergrund);
    backdrop-filter: blur(6px);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 24px;
    position: sticky;
    top: 12px;
    z-index: 30;
}
.marke {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--schrift-serif);
    font-weight: 600;
    font-size: 1.05em;
    color: var(--farbe-text);
    letter-spacing: -0.005em;
    margin-right: 8px;
    white-space: nowrap;
}
.marke:hover { color: var(--farbe-primary); text-decoration: none; }
.marke-logo { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }

nav.hauptnav > a,
nav.hauptnav details.dropdown > summary {
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--farbe-text);
    font-size: 0.95em;
    font-weight: 500;
    white-space: nowrap;
}
nav.hauptnav > a:hover,
nav.hauptnav details.dropdown > summary:hover {
    background: var(--farbe-primary-hell);
    color: var(--farbe-primary-dunkel);
    text-decoration: none;
}
details.dropdown { position: relative; display: inline-block; }
details.dropdown > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
details.dropdown > summary::-webkit-details-marker { display: none; }
details.dropdown > summary::after { content: " ▾"; color: var(--farbe-text-gedaempft); font-size: 0.8em; }
details.dropdown[open] > summary { background: var(--farbe-primary-hell); color: var(--farbe-primary-dunkel); }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(43, 36, 32, 0.14);
    padding: 6px;
    min-width: 220px;
}
.dropdown-menu a {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--farbe-text);
    font-weight: 500;
    white-space: nowrap;
}
.dropdown-menu a:hover { background: var(--farbe-primary-hell); color: var(--farbe-primary-dunkel); text-decoration: none; }
.nav-konto {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88em;
    color: var(--farbe-text-gedaempft);
    white-space: nowrap;
}

/* ---------- Dashboard (Startseite) ---------- */
.dashboard-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.dashboard-karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: 14px;
    padding: 14px 16px 16px;
}
.dashboard-karte h2 { margin-top: 0; }
.dashboard-karte table { font-size: 0.92em; }

/* ---------- Tabellen ---------- */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 12px 0 20px;
}
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--farbe-rand); vertical-align: top; }
th { background: var(--farbe-primary-hell); color: var(--farbe-primary-dunkel); font-weight: 600; font-size: 0.9em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--farbe-hintergrund-soft); }

/* ---------- Formulare ---------- */
form { margin: 0.8em 0; }
fieldset {
    border: 1px solid var(--farbe-rand);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 0 16px;
    background: var(--farbe-flaeche);
}
fieldset legend { font-weight: 600; color: var(--farbe-primary-dunkel); padding: 0 6px; font-family: var(--schrift-serif); }
.formular-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4px 20px;
    align-items: end;
}
.formular-raster p { margin: 8px 0; }
label { display: block; margin: 10px 0 4px; font-weight: 500; }
label input[type="checkbox"], label input[type="radio"] { margin-right: 6px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="datetime-local"], input[type="number"],
input[type="tel"], input[type="url"], input[type="search"],
input[type="time"], input[type="month"], input[type="week"], input[type="file"],
select, textarea {
    font-family: inherit;
    font-size: 0.97em;
    padding: 7px 10px;
    border: 1px solid var(--farbe-rand);
    border-radius: 7px;
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    min-width: 220px;
    max-width: 100%;
}
textarea { min-width: 320px; }
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 1px;
    border-color: var(--farbe-akzent);
}

/* ---------- Buttons ---------- */
button, input[type="submit"] {
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    background: var(--farbe-primary);
    color: #F7F0E2;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .1s ease, background .15s ease;
}
button:hover, input[type="submit"]:hover { background: var(--farbe-primary-dunkel); transform: translateY(-1px); }
button:active, input[type="submit"]:active { transform: translateY(0); }
button:focus-visible, input[type="submit"]:focus-visible,
a:focus-visible, select:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
    body {
        padding: 12px 12px calc(40px + env(safe-area-inset-bottom));
        padding-left: calc(12px + env(safe-area-inset-left));
        padding-right: calc(12px + env(safe-area-inset-right));
        font-size: 14px;
    }
    nav.hauptnav { gap: 2px; position: static; }
    :root { --nav-hoehe: 0px; }
    table { display: block; overflow-x: auto; white-space: nowrap; }
    input, select, textarea { min-width: 0; width: 100%; }

    /* iOS zoomt beim Antippen eines Formularfelds automatisch rein, wenn dessen
       Schriftgröße unter 16px liegt - das wirkt ruckartig und ungewollt.
       Deshalb hier bewusst auf 16px erzwungen, unabhängig von der sonstigen
       (kleineren) Desktop-Schriftgröße dieser Felder. */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="date"], input[type="datetime-local"], input[type="number"],
    select, textarea {
        font-size: 16px;
    }

    /* Etwas großzügigere Tippflächen auf Touchscreens (Empfehlung: min. ~44px) */
    button, input[type="submit"] { padding: 11px 18px; }
    nav.hauptnav > a, nav.hauptnav details.dropdown > summary { padding: 10px 12px; }
    .dropdown-menu a { padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    button, input[type="submit"] { transition: none; }
}

/* --- Verschiebbare Karten (Drag-and-Drop-Sortierung) --- */
.karte-verschiebbar { cursor: grab; }
.karte-verschiebbar:active { cursor: grabbing; }
.karte-verschiebbar:focus-visible { outline: 2px solid var(--farbe-primary, #A8462F); outline-offset: 2px; }
.karte-wird-gezogen { opacity: 0.45; }
.karte-ziel { outline: 2px dashed var(--farbe-primary, #A8462F); outline-offset: 2px; }
.karte-anfasser {
    display: inline-block;
    margin-right: 8px;
    color: var(--farbe-text-gedaempft, #999);
    cursor: grab;
    font-size: 0.9em;
    letter-spacing: -2px;
}
.karten-hinweis {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: #2f4f34;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.karten-hinweis-fehler { background: #8a2b2b; }

/* --- Termine-Ansicht: Karten je Terminkategorie --- */
.termine-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}
.termin-eintrag-karte {
    border-top: 1px solid var(--farbe-rand, #ddd);
    padding: 8px 0;
}
.termin-eintrag-karte:first-of-type { border-top: none; }
.termin-eintrag-kopf { margin-bottom: 2px; }
.termin-eintrag-zeile {
    font-size: 0.88em;
    color: var(--farbe-text-gedaempft, #666);
    margin-top: 2px;
}
.termin-eintrag-aktionen { margin-top: 4px; }

/* --- Umschalter zwischen Darstellungsarten --- */
.darstellung-umschalter { margin: 12px 0; }
.darstellung-umschalter a {
    display: inline-block;
    padding: 5px 14px;
    margin-right: 6px;
    border: 1px solid var(--farbe-rand, #ddd);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9em;
    background: var(--farbe-flaeche, #fff);
}
.darstellung-umschalter a.aktiv {
    background: var(--farbe-primary, #A8462F);
    border-color: var(--farbe-primary, #A8462F);
    color: #fff;
    font-weight: 600;
}

/* --- Sortierbare Tabellenköpfe --- */
.sortier-kopf {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}
.sortier-kopf:hover { text-decoration: underline; }
.sortier-aktiv { font-weight: 700; }

/* --- Startseiten-Kachel "Meine Planung" --- */
.planung-alles-besetzt {
    color: var(--text-erfolg);
    background: var(--flaeche-erfolg);
    border: 1px solid var(--rand-erfolg);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 6px 0 10px;
    font-size: 0.9em;
}
.planung-offen-hinweis {
    color: var(--text-warnung);
    background: var(--flaeche-warnung);
    border: 1px solid var(--rand-warnung);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 6px 0 10px;
    font-size: 0.9em;
}
.planung-liste { margin: 6px 0; padding-left: 18px; }
.planung-liste li { margin-bottom: 8px; }
.planung-dienste {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: 0.85em;
    color: var(--farbe-text-gedaempft);
    margin-top: 1px;
}
.planung-dienst-offen { color: var(--text-warnung); font-weight: 600; }