/* FamilyFrame – Fotos im Mittelpunkt, ruhige Bedienung drumherum */

:root {
    --burgund: #87163e;
    --rot: #d01848;
    --schwarz: #000000;
    --weiss: #ffffff;

    --grund: #ffffff;
    --flaeche: #f5f1f3;
    --linie: #e7dee2;
    --text: #000000;
    --leise: #6c5d63;
    --akzent: var(--burgund);
    --akzent-text: var(--burgund);
    --gefahr: var(--rot);
    --kachel-leer: #ece5e8;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --navi-hoehe: 64px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #000000;
        --flaeche: #151012;
        --linie: #2c2328;
        --text: #ffffff;
        --leise: #b5a6ac;
        --akzent-text: #f07ea5;
        --kachel-leer: #1d171a;
        color-scheme: dark;
    }
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

body { min-height: 100dvh; }

h1, h2 { margin: 0; font-weight: 600; }
h2 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: .35rem; }

button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }

.wortmarke {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 2.6rem;
    letter-spacing: -.01em;
    line-height: 1;
}
.wortmarke.klein { font-size: 1.5rem; }

.hinweis { color: var(--leise); font-size: .875rem; margin: 0 0 .75rem; }
.meldung { color: var(--gefahr); font-weight: 600; font-size: .9rem; margin: .25rem 0; }

/* ---------- Formulare ---------- */
.karte {
    background: var(--flaeche);
    border-radius: 18px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; }

input:not([type="checkbox"]):not([type="file"]) {
    width: 100%;
    padding: .75rem .85rem;
    border: 1px solid var(--linie);
    border-radius: 12px;
    background: var(--grund);
    font-weight: 400;
    font-size: 1rem;
}

fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: .9rem; font-weight: 600; padding: 0; margin-bottom: .4rem; }

.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--akzent); }

.knopf {
    border: 1px solid var(--linie);
    background: var(--grund);
    border-radius: 12px;
    padding: .7rem 1rem;
    font-weight: 600;
    cursor: pointer;
}
.knopf.haupt { background: var(--burgund); border-color: var(--burgund); color: var(--weiss); }
.knopf.haupt:disabled { opacity: .45; cursor: default; }
.knopf.gefahr-rand { color: var(--gefahr); border-color: color-mix(in srgb, var(--rot) 35%, transparent); }
.knopf.voll { width: 100%; }
.knopf.klein { padding: .35rem .6rem; font-size: .8rem; border-radius: 9px; }

.link {
    background: none; border: 0; padding: .25rem; cursor: pointer;
    color: var(--akzent-text); font-weight: 600; font-size: .9rem;
}

/* ---------- Anmelden ---------- */
.tor {
    max-width: 420px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + 3rem) 1.25rem 3rem;
}
.tor-kopf { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-bottom: 2rem; }
.tor-icon { width: 76px; height: 76px; border-radius: 18px; }
.setup-weitere { display: flex; flex-direction: column; gap: .5rem; }
.setup-zeile { display: flex; align-items: center; gap: .6rem; }
.setup-zeile input:not([type="checkbox"]) { flex: 1; }

/* ---------- App-Rahmen ---------- */
.app { padding-bottom: calc(var(--navi-hoehe) + env(safe-area-inset-bottom)); }

.kopf {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: baseline; justify-content: space-between;
    padding: calc(env(safe-area-inset-top) + .7rem) 1rem .6rem;
    background: color-mix(in srgb, var(--grund) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.kopf-name { color: var(--leise); font-size: .85rem; }

.ansicht.schmal { max-width: 560px; margin: 0 auto; padding: .5rem 1rem 2rem; display: flex; flex-direction: column; gap: 1rem; }

.navi {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex;
    height: calc(var(--navi-hoehe) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--grund) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--linie);
}
.navi button {
    flex: 1; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    font-size: .72rem; font-weight: 600; color: var(--leise);
}
.navi button span { font-size: 1.25rem; line-height: 1; }
.navi button.aktiv { color: var(--akzent-text); }

/* ---------- Filter ---------- */
.filter { padding: 0 1rem .75rem; display: flex; flex-direction: column; gap: .6rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; }
.filter .chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    border: 1px solid var(--linie);
    background: var(--grund);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-weight: 600; font-size: .9rem;
    cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--burgund); border-color: var(--burgund); color: var(--weiss); }
.chip.archiv { opacity: .6; font-style: italic; }

.filter-modus {
    display: inline-flex; align-self: flex-start;
    background: var(--flaeche); border-radius: 10px; padding: 3px;
}
.filter-modus button {
    border: 0; background: none; border-radius: 8px; padding: .35rem .7rem;
    font-size: .8rem; font-weight: 600; color: var(--leise); cursor: pointer;
}
.filter-modus button.aktiv { background: var(--grund); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }

/* ---------- Fotoraster ---------- */
.leer { text-align: center; color: var(--leise); padding: 3rem 1.5rem; }

.monat {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    padding: 1.4rem 1rem .5rem;
    margin: 0;
}
.monat small { font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--leise); margin-left: .5rem; }

.raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 3px;
}
@media (min-width: 700px) { .raster { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; padding: 0 4px; } }

.kachel {
    position: relative;
    aspect-ratio: 1;
    border: 0; padding: 0; margin: 0;
    background: var(--kachel-leer);
    cursor: pointer;
    overflow: hidden;
}
.kachel img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .25s; }
.kachel img.da { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kachel img { transition: none; } }

/* ---------- Hochladen ---------- */
.dateiwahl {
    border: 2px dashed var(--linie);
    border-radius: 14px;
    padding: 1.5rem;
    align-items: center;
    cursor: pointer;
    color: var(--akzent-text);
}
.dateiwahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dateiwahl:focus-within { outline: 3px solid var(--rot); outline-offset: 2px; }

.upload-liste { display: flex; flex-direction: column; gap: .6rem; }
.upload-eintrag { display: flex; gap: .7rem; align-items: flex-start; background: var(--grund); border-radius: 12px; padding: .5rem; }
.upload-eintrag img { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: 8px; background: var(--kachel-leer); }
.upload-eintrag .chips { gap: .3rem; }
.upload-eintrag .chip { padding: .3rem .65rem; font-size: .8rem; }
.upload-eintrag-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; flex: 1; }
.upload-eintrag-status { font-size: .75rem; color: var(--leise); }
.upload-eintrag-status.fehler { color: var(--gefahr); font-weight: 600; }

/* vorgeschlagen von der Gesichtserkennung */
.chip.vorschlag[aria-pressed="true"] { background: var(--grund); color: var(--akzent-text); border: 2px dashed var(--burgund); }
.vorschlag-muster { display: inline-block; padding: 0 .45rem; border-radius: 999px; border: 2px dashed var(--burgund); color: var(--akzent-text); font-weight: 600; }

/* Gesichter in der Vollansicht */
.vollbild-rahmen { position: absolute; inset: 0; pointer-events: none; }
.gesicht-box {
    position: absolute; pointer-events: auto; cursor: pointer;
    border: 2px solid var(--weiss); border-radius: 6px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .5);
    background: transparent; padding: 0;
}
.gesicht-box span {
    position: absolute; left: -2px; top: 100%; margin-top: 3px; white-space: nowrap;
    background: var(--burgund); color: var(--weiss); font-size: .75rem; font-weight: 700;
    padding: .1rem .4rem; border-radius: 5px;
}
.gesicht-box.unbekannt span { background: rgb(0 0 0 / .65); }
.gesicht-gross { width: 120px; height: 120px; border-radius: 12px; align-self: center; background: var(--kachel-leer); }
.referenzen { display: flex; flex-wrap: wrap; gap: .4rem; }
.referenz { position: relative; width: 56px; height: 56px; }
.referenz canvas, .referenz .leer-ref { width: 56px; height: 56px; border-radius: 8px; background: var(--kachel-leer); display: block; }
.referenz button {
    position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
    border: 0; background: var(--rot); color: var(--weiss); font-size: .7rem; cursor: pointer; line-height: 1;
}
.treffer { display: flex; gap: .6rem; align-items: center; }
.treffer img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; background: var(--kachel-leer); }

/* ---------- Listen ---------- */
.liste { display: flex; flex-direction: column; gap: .5rem; }
.eintrag {
    background: var(--grund);
    border-radius: 12px;
    padding: .7rem .8rem;
    display: flex; flex-direction: column; gap: .45rem;
}
.eintrag.dieses { outline: 2px solid var(--burgund); }
.eintrag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.eintrag-name { font-weight: 600; }
.eintrag-text { color: var(--leise); font-size: .8rem; }
.eintrag-aktionen { display: flex; flex-wrap: wrap; gap: .35rem; }
.marke { font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; background: var(--flaeche); color: var(--leise); }
.marke.warnung { color: var(--gefahr); }

.zeile-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.zeile-form input:not([type="checkbox"]) { flex: 1 1 140px; }

/* ---------- Vollansicht ---------- */
.vollbild {
    width: 100vw; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: var(--schwarz); color: var(--weiss);
}
.vollbild[open] { display: flex; flex-direction: column; }
.vollbild::backdrop { background: var(--schwarz); }
.vollbild-bild { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.vollbild-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vollbild-zu, .vollbild-nav {
    position: absolute; border: 0; cursor: pointer;
    background: rgb(0 0 0 / .45); color: var(--weiss);
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
}
.vollbild-zu { top: calc(env(safe-area-inset-top) + .75rem); right: .75rem; }
.vollbild-nav { top: 50%; transform: translateY(-50%); font-size: 2rem; }
.vollbild-nav.links { left: .5rem; }
.vollbild-nav.rechts { right: .5rem; }
.vollbild-info { padding: 1rem 1rem calc(env(safe-area-inset-bottom) + 1rem); background: #0d0a0b; }
.vollbild-info h2 { color: var(--weiss); }
.vollbild-info p { margin: 0 0 .3rem; }
.vollbild-info .hinweis { color: #b5a6ac; }
.vollbild-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.vollbild-aktionen .knopf { background: transparent; color: var(--weiss); border-color: #3a3034; }
.vollbild-aktionen .knopf.gefahr-rand { color: #ff6d93; }

/* ---------- Dialoge ---------- */
.dialog {
    width: min(460px, calc(100vw - 2rem));
    border: 0; border-radius: 18px; padding: 1.25rem;
    background: var(--grund); color: var(--text);
}
.dialog::backdrop { background: rgb(0 0 0 / .55); }
.dialog form, .dialog { display: flex; flex-direction: column; gap: .75rem; }
.dialog:not([open]) { display: none; }
.dialog-aktionen { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }
.code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(.85rem, 4.4vw, 1.25rem); font-weight: 700; letter-spacing: .02em;
    background: var(--flaeche); border-radius: 12px; padding: .9rem .5rem; text-align: center;
    white-space: nowrap; overflow-x: auto; margin: 0;
    user-select: all; -webkit-user-select: all;
}

/* ---------- Meldung unten ---------- */
.toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--navi-hoehe) + env(safe-area-inset-bottom) + 1rem);
    z-index: 50;
    background: var(--text); color: var(--grund);
    padding: .7rem 1rem; border-radius: 12px;
    font-weight: 600; font-size: .9rem;
    max-width: calc(100vw - 2rem);
    box-shadow: 0 6px 24px rgb(0 0 0 / .25);
}