/* Lumio – Oberfläche. Mobil zuerst, Systemschrift, iOS-Systemfarben. */

:root {
    --bg: #ffffff;
    --text: #000000;
    --text2: rgba(60, 60, 67, 0.6);
    --text3: rgba(60, 60, 67, 0.4);
    --fill: #f2f2f7;
    --fill2: #e5e5ea;
    --line: rgba(60, 60, 67, 0.2);
    --line-fein: rgba(60, 60, 67, 0.14);
    --akzent: #007aff;
    --gefahr: #ff3b30;
    --leiste: rgba(249, 249, 249, 0.94);
    --kachel: #e9e9ee;
    --flaeche: #ffffff;
    --radius: 12px;
    --oben: env(safe-area-inset-top, 0px);
    --unten: env(safe-area-inset-bottom, 0px);

    /* Apples eigenes Glas am oberen Rand – gemessen, nicht geschätzt.

       Zusammen mit "viewport-fit=cover" lässt das Meta-Tag
       apple-mobile-web-app-status-bar-style="black-translucent" die
       Seite unter die Statusleiste laufen. Genau das wollen wir: Nur
       so reicht die Fotowand bis an die obere Kante. Seit iOS 26 legt
       das System über diesen Streifen aber seinen Liquid-Glass-Verlauf
       – und zwar ÜBER alles, was die Webansicht zeichnet. In einer
       nativen App liegt der Titel über dem Effekt, weil das System ihn
       dort als eigene Schicht darüber malt. Im Web gibt es keinen
       z-index über einer Schicht außerhalb des Dokuments. Scharf
       bekommen wir dort also nichts; wir können nur darunter bleiben.

       Die Zahl stammt vom Lineal auf Rafaels iPhone (23.09.): Ab etwa
       85 bis 90 Pixel unter der Bildschirmkante stehen feine Linien
       und 9-Punkt-Schrift wieder scharf. Gemessen wurde von der KANTE,
       nicht von der Safe Area – deshalb steht hier ein absoluter
       Abstand und kein Zuschlag. Ein Zuschlag hätte eine Annahme über
       die Safe Area enthalten, die wir nie geprüft haben.

       Vorher standen hier 40 Punkt aus einem fremden Pull Request.
       Die waren zu wenig.

       In Safari und am Rechner gibt es den Streifen nicht: null. */
    --glasende: 0px;
}

@media (display-mode: standalone) {
    :root { --glasende: 90px; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --text: #ffffff;
        --text2: rgba(235, 235, 245, 0.6);
        --text3: rgba(235, 235, 245, 0.35);
        --fill: #1c1c1e;
        --fill2: #2c2c2e;
        --line: rgba(235, 235, 245, 0.18);
        --line-fein: rgba(235, 235, 245, 0.12);
        --akzent: #0a84ff;
        --gefahr: #ff453a;
        --leiste: rgba(22, 22, 24, 0.94);
        --kachel: #1c1c1e;
        --flaeche: #1c1c1e;
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    min-height: 100%;
    /* Gegen Gummiband und Ziehen-zum-Neuladen auf dem Telefon.

       ACHTUNG, teuer gelernt: Auf großen Schirmen wird das wieder auf
       "auto" gesetzt. "none" nimmt Safari am Mac das MAUSRAD – die
       Seite ist scrollbar, zeigt den Balken, nimmt die Radbewegung
       aber nicht an. Trackpad, Chrome und iPhone bleiben unberührt,
       weshalb das Einkreisen vier Anläufe gebraucht hat.
       Siehe den Abschnitt "Große Schirme" ganz unten. */
    overscroll-behavior-y: none;
    /* Beim Zoomwechsel läuft das Raster kurz über die Seitenbreite
       hinaus. "clip" schneidet das ab, ohne – anders als "hidden" –
       einen eigenen Scrollbereich aufzumachen; genau der hat vorher den
       hellen Streifen unten verursacht. */
    overflow-x: clip;
    /* Kein eigenmächtiger Ausgleich durch den Browser.
    
       Chrome (und je nach Fassung auch Safari) verschiebt den
       Scrollstand von selbst, wenn oberhalb des Sichtfelds Inhalt
       dazukommt – "scroll anchoring". Gut gemeint, aber die
       Zeitleiste rechnet den Ausgleich seit der Umkehrung selbst,
       und beides zusammen ergibt den doppelten Weg: Im Prüfstand
       ist das Foto unter dem Daumen um 1.461 Pixel weggesprungen.
    
       Eine von beiden Rechnungen muss weg, und es muss die des
       Browsers sein: Sie ist nicht abfragbar, nicht messbar und
       zwischen den Browsern verschieden. Unsere steht hier und
       lässt sich prüfen. */
    overflow-anchor: none;
    /* Falls doch einmal etwas durchscheint: nicht weiß, sondern der
       Grundton der Oberfläche. */
    background: var(--bg);
}

body {
    /* Mindestens so hoch wie der GRÖSSTE Bildschirmausschnitt – also der
       mit eingezogenen Safari-Leisten. "100%" wäre der kleinste, und
       genau die Differenz stand vorher als heller Streifen unten: Auf
       der Fotowand fiel sie nicht auf, weil dort ohnehin tausende Kacheln
       darunter liegen, auf jeder kürzeren Seite schon. */
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--akzent); text-decoration: none; }

/* ---------------------------------------------------------- Grundgerüst */

/* Die Fotowand soll bis an alle vier Kanten reichen. Deshalb füllt das
   Blatt den ganzen Bildschirm, und Kopf wie Reiterleiste liegen darüber
   statt daneben – sonst nehmen sie der Wand oben und unten je hundert
   Pixel weg und hinterlassen genau die weißen Kästen, die stören. */
/* Gescrollt wird das Dokument selbst – nicht ein Kasten darin.
   Vorher hing die ganze Oberfläche in einer fixierten Hülle mit einem
   eigenen Scrollbereich. Das sieht auf dem Schreibtisch gleich aus,
   bricht auf dem iPhone aber an einer Stelle: Safari zieht die
   Adressleiste nur ein, wenn das DOKUMENT scrollt. Tut es das nicht,
   bleibt die Hülle so hoch wie der kleine Bildschirmausschnitt, und
   darunter scheint die Seitenfläche durch – der helle Streifen.

   Mit normalem Dokument-Scrollen verhält sich die Seite wie jede
   andere Webseite auch: Der Hintergrund reicht immer bis zur
   Unterkante, egal wo die Leisten gerade stehen. */
#app {
    display: block;
}

/* Auch die Seiten ohne Glaskopf – Personen, Suche, Mehr – fangen
   unter Apples Streifen an. Ihre Titel standen sonst genauso im
   Verlauf wie vorher der Titel der Fotowand. */
.blatt {
    padding-top: max(var(--oben), var(--glasende));
    padding-bottom: calc(96px + var(--unten));
}

/* Randlos: Das Raster läuft hinter dem Glaskopf durch – aber es fängt
   nicht unter ihm an, sondern hinter ihm. Sonst liegen die obersten
   zwei Reihen für immer unter dem Kopf und sind nicht erreichbar: Man
   scrollt bis zum Anschlag und kommt trotzdem nicht an sie heran.

   iOS nennt das "content inset": So viel Platz oben, wie die Leiste
   hoch ist – gescrollt wird darunter durch. Die Höhe setzt app.js,
   weil sie von Schriftgröße und Statusleiste abhängt; der Wert hier
   ist nur die Notbremse, falls das Skript nicht dazu kommt. */
.blatt.randlos { padding-top: var(--kopfhoehe, 148px); }

.kopf {
    padding: 14px 16px 8px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.kopf h1 {
    margin: 0;
    font-size: 34px;
    line-height: 41px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.kopf-zeile {
    padding: 0 16px 10px;
    font-size: 13px;
    color: var(--text2);
}

.text-knopf.gefahr-text { color: var(--gefahr); font-size: 15px; padding: 0; }

.text-knopf {
    border: 0;
    background: transparent;
    color: var(--akzent);
    font-size: 17px;
    padding: 0 0 6px;
    min-height: 44px;
}

/* --------------------------------------------------------- Glaskopf

   Titel, Hochladen und Segmentwähler schweben über der Fotowand. Der
   Milchglas-Streifen darunter löst sich nach unten auf – ohne diese
   Auflösung säße eine harte Kante mitten auf den Bildern, und genau
   die liest sich als weißer Kasten.                                   */

.kopf-glas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: max(calc(var(--oben) + 6px), var(--glasende)) 0 14px;
    /* Dunkel statt hell – und das ist kein Geschmack, sondern folgt
       aus der Titelfarbe.

       Der Titel steht jetzt in Weiß, wie in der Fotos-App. Weiß
       braucht Dunkles darunter. Der alte helle Verlauf hat das
       Gegenteil getan: Er hat die Fotos aufgehellt und damit genau
       die Fläche, auf der der Titel liegt.

       Nötig ist er trotzdem, denn im Ruhezustand liegen hinter dem
       Kopf gar keine Fotos, sondern der Seitengrund – die Wand fängt
       ja erst unter ihm an. Ohne Verlauf stünde dort weiße Schrift
       auf weißem Grund. Er ist deshalb kein Zierat, sondern das,
       was den Titel überhaupt lesbar hält. */
    /* Die Stufen sitzen bewusst spät. Der Titel steht im UNTEREN
       Drittel des Kopfes – darüber liegen Safe Area und Apples
       Streifen. Ein Verlauf, der auf halber Höhe schon fast weg ist,
       deckt also genau die Stelle nicht, für die er da ist. Erst
       unterhalb des Titels darf er auslaufen. */
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.54) 62%,
        rgba(0, 0, 0, 0.42) 84%,
        rgba(0, 0, 0, 0) 100%);
}

/* Zum Milchglas, und warum es wieder da ist.

   Eine Zeit lang stand hier keines. Die Begründung war eine Messung an
   einem Screenshot vom iPhone: Der Titel ohne Filter kam auf eine
   stärkste Kante von 243, der "Hochladen"-Knopf mit Filter auf 50.

   Die Messung stimmt, der Schluss daraus war falsch. Die beiden
   Textstellen unterscheiden sich nicht nur im Filter, sondern auch in
   Größe, Strichstärke und Farbe – 32 px fett schwarz gegen 15 px
   mittel blau. Das allein erklärt den Unterschied. Verglichen wurden
   zwei Dinge, die sich in mehr als einer Hinsicht unterscheiden; so
   etwas beweist nichts.

   Die tatsächliche Ursache der Unschärfe war eine andere: Die zum
   Home-Bildschirm gelegte App hat einen eigenen Zwischenspeicher und
   hielt eine alte Fassung der Hülle fest, samt alter Versionsnummern.
   Was auf dem Schirm stand, war schlicht nicht das, was auf dem Server
   lag. Seit index.php "no-store" schickt, kann das nicht mehr
   passieren – und erst dadurch ist der Filter überhaupt prüfbar. */

/* Kein eigener Verlauf für den Dunkelmodus mehr: Ein dunkler
   Verlauf über Fotos wirkt hell wie dunkel gleich, und zwei
   Fassungen desselben Werts gehen früher oder später auseinander. */

/* Der Verlauf ist der HINTERGRUND des Kopfes, kein eigenes Element.
   Das ist der Kern der ganzen Geschichte. Vier Anläufe mit einer
   eigenen Scheibe sind gescheitert – zuletzt mit gemessenen Zahlen:
   Der Titel kam nur auf 140 von 255 Helligkeit, der Text daneben auf
   volle 255. Die Scheibe wurde also ÜBER den Titel gemalt, obwohl ihr
   z-index niedriger war.
   Der Hintergrund eines Elements liegt immer unter dessen eigenem
   Inhalt – das steht in der Malreihenfolge und lässt sich nicht
   verdrehen. Kein z-index, kein Stapelzusammenhang, keine Ausnahme.
   Die Auflösung nach unten macht der Verlauf selbst, über seine
   Deckkraft. Damit entfällt auch die Maske, die das vorher erzwungen
   hat – und mit ihr die Filterschicht, die den Titel weichgezeichnet
   hat. */

/* Der Inhalt liegt über der Scheibe – ausdrücklich, nicht zufällig. */
.kopf-oben,
.kopf-glas .filter-zeile {
    position: relative;
    z-index: 1;
}

.kopf-oben {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px 10px;
}

.kopf-oben h1 {
    margin: 0;
    /* Weiß in BEIDEN Modi, ausdrücklich und nicht über --text: Der
       Titel liegt auf Fotos, nicht auf der Seitenfläche, und Fotos
       werden nicht hell, nur weil das System hell steht.

       Der Schatten ist die Rückversicherung für den hellen
       Schnappschuss, auf dem auch der Verlauf nicht mehr reicht. */
    color: #fff;
    /* Zwei Schatten: ein enger für die Kante der Buchstaben, ein
       weiter, der die Fläche darunter abdunkelt. Einer allein reicht
       über einem grellen Bildschirmfoto nicht. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 14px rgba(0, 0, 0, 0.45);
    font-size: 32px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.kopf-oben .luecke { flex-grow: 1; }

/* Der Kopf schrumpft nicht mehr beim Scrollen.

   Früher wurde der Titel beim Scrollen klein, wie in iOS-Listen. In
   der Fotos-App tut er das nicht: Titel und Knöpfe sitzen fest, und
   die Wand läuft darunter durch. Mit dem festen Kopf entfällt auch
   die Sonderregel beim Messen des Einzugs – ein Kopf, der seine Höhe
   nie ändert, muss nur einmal gemessen werden. */

/* Knöpfe im Glaskopf sind selbst kleine Glaspillen – flacher Text
   verschwindet über hellen Fotos. */
.glas-pille {
    border: 0;
    border-radius: 17px;
    padding: 7px 14px;
    min-height: 34px;
    font-size: 15px;
    font-weight: 500;
    color: var(--akzent);
    background: rgba(233, 233, 238, 0.7);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: inset 0 0 0 0.5px rgba(120, 120, 128, 0.2);
}

/* Rund, nicht eckig: Die zwei Knöpfe oben rechts tragen nur ein
   Zeichen. Ein Wortknopf braucht eine Pille, ein Zeichen braucht einen
   Kreis – alles andere lässt viel Glas um wenig Inhalt stehen. */
/* Dasselbe Glas wie die Körper unten und dieselben 44 Punkt wie in
   der Fotos-App. Vorher waren es 34 Punkt in einem eigenen, matteren
   Glas – zwei Rezepturen für dieselbe Sache auf einem Schirm, und
   beide kleiner als das, was ein Finger sicher trifft. */
.glas-rund {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1c1c1e;
    background: rgba(252, 252, 254, 0.62);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.18),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.65);
}

/* Das Glas bleibt hell, auch im Dunkelmodus: Es liegt auf Fotos.
   Nur das Zeichen darin bleibt dunkel – auf hellem Glas. */

/* Das Schildchen sagt, dass gerade nicht alles zu sehen ist.

   Es steht bewusst im Kopf und nicht in der Leiste unten: Eine
   Einschränkung des Bestands gehört zum Titel, nicht zur Navigation.
   Und es trägt ein Kreuz, weil ein Filter, den man nicht sieht,
   irgendwann für den ganzen Bestand gehalten wird. */
.filter-zeile {
    display: flex;
    /* Zwei Schildchen können zugleich stehen ("nur Videos", "nur von
       Leonie"). Auf schmalen Schirmen brechen sie um, statt sich
       gegenseitig zusammenzuquetschen. */
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 10px;
}

.filter-schild {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 16px;
    padding: 6px 10px 6px 13px;
    min-height: 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background: rgba(252, 252, 254, 0.58);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.14),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.6);
}

.filter-schild svg {
    width: 16px;
    height: 16px;
    opacity: 0.45;
}

@media (prefers-color-scheme: dark) {
    .filter-schild {
        background: rgba(44, 44, 48, 0.6);
        box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.45),
            inset 0 0.5px 0 rgba(255, 255, 255, 0.28),
            inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
    }
}

/* ------------------------------------------------------------ Reiter */

/* Die Leiste unten ist keine Leiste mehr, sondern eine schwebende
   Glaspille – so bleibt die Fotowand auch unten bis zur Kante sichtbar. */
/* Drei Körper, keine Leiste.

   Personen, die Stufen und die Lupe schweben als DREI getrennte
   Glasstücke über der Fotowand, nicht als ein Balken mit drei
   Abteilungen. Der Unterschied ist nicht bloß hübsch: Ein Balken
   behauptet, die drei gehörten zusammen und seien Geschwister. Sie
   sind aber verschiedene Dinge – links und rechts führen in einen
   anderen Bereich, die Mitte wechselt nur die Flughöhe im selben.
   Getrennte Körper sagen das ohne ein Wort.

   Der Rahmen selbst trägt darum kein Glas; er ordnet nur an. */
.reiter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(14px + var(--unten));
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    /* Sonst fängt der unsichtbare Rahmen Tipper ab, die eigentlich
       dem Foto zwischen den Körpern gelten. */
    pointer-events: none;
}

.reiter > * { pointer-events: auto; }

.reiter button {
    border: 0;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.2px;
    font-family: inherit;
}

/* Die Rezeptur für alles Glas in dieser Datei, vier Zutaten:
   Die Fotos scheinen durch (halbdurchlässige Fläche), sie sind dabei
   unscharf und etwas kräftiger (blur + saturate), die Kante fängt
   Licht (heller Innenrand, oben kräftiger als unten), und der Körper
   wirft Schatten (weicher Schlagschatten plus ein harter Millimeter
   darunter, der ihn auf die Fläche setzt).
   Wer eine davon wegnimmt, bekommt kein Glas, sondern eine graue
   Fläche. */
.reiter-rund,
.stufen {
    background: rgba(252, 252, 254, 0.62);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.65);
}

@media (prefers-color-scheme: dark) {
    .reiter-rund,
    .stufen {
        background: rgba(44, 44, 48, 0.58);
        box-shadow:
            0 10px 34px rgba(0, 0, 0, 0.55),
            0 2px 6px rgba(0, 0, 0, 0.35),
            inset 0 0.5px 0 rgba(255, 255, 255, 0.3),
            inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
    }
}

/* Alle drei Körper sind gleich hoch: 54 Pixel. Die Mitte kommt über
   5 Pixel Polster plus 44 Pixel Knopf auf dasselbe Maß – 44 ist
   Apples Mindestmaß für eine Fläche, die ein Finger trifft. */
.reiter-rund {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
}

/* Die Mitte nimmt, was übrig bleibt. Damit rücken die drei Wörter
   auseinander statt sich in der Bildmitte zu drängen. */
.stufen {
    flex-grow: 1;
    display: flex;
    gap: 3px;
    padding: 5px;
    border-radius: 27px;
}

.stufen button {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    background: transparent;
    color: var(--text2);
    white-space: nowrap;
}

/* Gewählt ist eine kleine helle Scheibe, kein Farbklecks: Unter der
   Leiste liegt mal ein dunkles, mal ein helles Foto, und eine Fläche
   trägt über beidem, wo eine Textfarbe verschwindet. */
.stufen button[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 0.5px rgba(255, 255, 255, 0.85);
    color: var(--text);
    font-weight: 600;
}

/* Die beiden runden Knöpfe sind selbst schon Scheiben – eine zweite
   darin wäre eine Scheibe in einer Scheibe. Sie zeigen ihren Zustand
   deshalb über die Farbe des Zeichens. */
.reiter-rund.an { color: var(--akzent); }
.reiter-rund.an svg { stroke-width: 2.1; }

@media (prefers-color-scheme: dark) {
    .stufen button[aria-selected="true"] {
        background: rgba(120, 120, 128, 0.45);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 0 0 0.5px rgba(255, 255, 255, 0.2);
    }
}

/* ----------------------------------------------------------- Zeitleiste */

/* Die Zeitraum-Schildchen liegen auf dem Raster, nicht darin. Nur so
   kann das Raster durchlaufen – und nur ein durchlaufendes Raster
   zeigt bei kleinen Monaten keine halbleeren Zeilen. */

#zeitleiste {
    position: relative;
    /* Der Browser darf hier senkrecht scrollen – und sonst nichts.
       Vor allem nicht kneifen: Das Kneifen über der Fotowand gehört
       der Zoomstufe. "pan-y" sagt das dem Browser, bevor der erste
       Finger aufsetzt, und ist damit verlässlicher als jedes
       preventDefault, das erst im Ereignis kommt.

       Gilt nur für Finger. Auf großen Schirmen wird die Regel wieder
       aufgehoben – siehe ganz unten, "Große Schirme". */
    touch-action: pan-y;
}

.marken {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* Die Schildchen liegen über den Kacheln – sie dürfen ihnen aber
       nicht die Berührung wegnehmen. */
    pointer-events: none;
    z-index: 3;
}

.marke {
    position: absolute;
    left: 8px;
    margin-top: 8px;
}

.marke b {
    display: inline-block;
    padding: 5px 12px 6px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16), inset 0 0 0 0.5px rgba(255, 255, 255, 0.55);
}

@media (prefers-color-scheme: dark) {
    .marke b {
        color: #ffffff;
        background: rgba(40, 40, 42, 0.76);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
    }
}

.marke .m-kurz, .marke .m-jahr { display: none; }

/* Je enger das Raster, desto kürzer die Beschriftung. */
#zeitleiste.dicht .raster { gap: 1px; }
#zeitleiste.dicht .marke .m-voll { display: none; }
#zeitleiste.dicht .marke .m-kurz { display: inline; }
#zeitleiste.dicht .marke b { font-size: 14px; padding: 4px 11px 5px; }

#zeitleiste.sehr-dicht .marke b { font-size: 13px; padding: 3px 10px 4px; }

#zeitleiste.jahresweise .marke .m-kurz { display: none; }
#zeitleiste.jahresweise .marke .m-jahr { display: inline; }


.raster {
    display: grid;
    grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
    gap: 2px;
}

.kachel {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--kachel);
    border: 0;
    padding: 0;
    overflow: hidden;
    display: block;
}

.kachel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.kachel img.da { opacity: 1; }
.kachel img.sofort { transition: none; }

.kachel .dauer {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    gap: 3px;
}

.kachel .dauer i { font-style: normal; }

/* Je enger das Raster, desto weniger Beiwerk.
 
   Bei drei Spalten ist die Dauer ein kleines Schildchen unten rechts.
   Bei zwölf ist die Kachel 32 Pixel breit, und dieselbe Schrift deckt
   das halbe Foto zu – aus dem Hinweis wird das Hauptmotiv. Apple
   macht es genauso: erst die Dauer, dann nur noch das Dreieck, dann
   nichts.
 
   Die Stufen heißen "dicht" ab sechs Spalten und "sehr-dicht" ab
   zwölf; auf dem Telefon gilt zum Start keine von beiden. */
#zeitleiste.dicht .kachel .dauer {
    right: 3px;
    bottom: 3px;
    gap: 0;
}

#zeitleiste.dicht .kachel .dauer i { display: none; }

#zeitleiste.sehr-dicht .kachel .dauer,
#zeitleiste.sehr-dicht .kachel .stern { display: none; }

.kachel .stern {
    position: absolute;
    right: 5px;
    top: 5px;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
}

.kachel[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--akzent);
    background: rgba(0, 122, 255, 0.18);
}

/* ------------------------------------------------------ Jahre & Monate */

/* Zwei Stufen über der Fotowand. Beide zeigen dasselbe Muster: ein
   Deckbild, darauf unten der Name und die Anzahl.

   Die Beschriftung liegt IM Bild, nicht darunter. Unter dem Bild
   bräuchte jede Karte eine feste Texthöhe, sonst stehen die Reihen
   verschieden hoch – und mit fester Höhe bleibt bei kurzen Namen Luft
   stehen, die wie ein Fehler aussieht. Im Bild kostet sie nichts und
   sagt trotzdem alles. */

.jahr-liste,
.monat-raster {
    display: grid;
    gap: 3px;
    padding: 0 3px 120px;
}

/* Jahre stehen einzeln und groß: Es sind wenige, und jedes soll ein
   Bild sein, das man wiedererkennt. */
.jahr-liste { grid-template-columns: 1fr; gap: 10px; padding: 0 12px 120px; }

/* Monate zu dritt – zwölf pro Jahr, das ist eine Wand, keine Liste. */
.monat-raster { grid-template-columns: repeat(3, 1fr); padding: 0 12px; }

.jahr-karte,
.monat-karte {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    overflow: hidden;
    background: var(--kachel);
    border-radius: 16px;
    /* Damit die Karte auch ohne Deckbild ihre Form behält. */
    aspect-ratio: 1 / 1;
}

.jahr-karte { aspect-ratio: 16 / 10; border-radius: 20px; }

.jahr-karte img,
.monat-karte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Der Verlauf ist Teil des Fußes, kein eigenes Element: Ohne ihn
   verschwindet weiße Schrift auf einem hellen Motiv, und ein voller
   Balken nähme das Bild weg, das man ja gerade zeigen will. */
.jahr-fuss,
.monat-fuss {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    color: #fff;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.28) 45%,
        rgba(0, 0, 0, 0) 100%);
}

.jahr-fuss { padding: 30px 16px 13px; }
.monat-fuss { padding: 22px 9px 8px; }

.jahr-fuss b { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; }
.jahr-fuss span { font-size: 14px; opacity: 0.85; }

.monat-fuss b { font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }
.monat-fuss span { font-size: 11px; opacity: 0.82; }

/* Die Jahreszahl über dem Monatsblock läuft mit und sagt beim Blättern,
   wo man ist. */
.monat-jahr {
    margin: 22px 16px 8px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text);
}

.monat-jahr:first-of-type { margin-top: 4px; }

/* Der letzte Monatsblock braucht Luft, sonst liegt die Leiste darauf. */
.monat-raster:last-of-type { padding-bottom: 120px; }

/* ------------------------------------------------------------ Vollbild */

/* ------------------------------------------------------------ Vollbild

   Entwurfsroute B: Das Bild bekommt die ganze Fläche. Kopf und Fuß
   nehmen ihm nichts weg, sondern schweben darüber und blenden sich
   weg, sobald man sie eine Weile nicht anfasst. Deshalb liegt hier
   alles absolut – nichts teilt sich die Höhe mit dem Motiv.           */

/* Solange das Vollbild offen ist, darf die Seite darunter nicht
   mitscrollen. Weil jetzt das Dokument der Scrollbereich ist, geht das
   nur, indem man den Körper festnagelt und den Scrollstand merkt –
   sonst springt die Wand beim Schließen an den Anfang zurück. */
body.gesperrt {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    /* Das Vollbild ist eine festgenagelte Schicht. Reicht sie – je nach
       Stand der Safari-Leisten – nicht ganz bis zur Unterkante, scheint
       dort die Seitenfläche durch. Die ist hell. Also färben wir sie für
       die Dauer des Vollbilds schwarz: Dann fällt eine Lücke nicht auf,
       selbst wenn es sie gibt. */
    background: #000000;
}

/* Messanzeige – nur mit ?mess=1 in der Adresse. Sitzt bei "unten null":
   Wo der Balken steht, endet für den Browser der Bildschirm. */
.messanzeige {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: #ff3b30;
    color: #ffffff;
    font: 10px/1.5 ui-monospace, Menlo, monospace;
    padding: 3px 6px;
    pointer-events: none;
}

.vollbild {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, var(--dunkel, 1));
    overflow: hidden;
    transition: background-color 0.34s ease;
}

/* Die Bühne ist oben etwas eingerückt. Mathematisch mittig sitzt das
   Bild sonst zu hoch: Oben schwebt nur die Zurück-Pille, unten die
   breite Bedienpille – das Auge nimmt die untere als schwerer wahr und
   liest das Bild als nach oben gerutscht. */
.vollbild-buehne {
    position: absolute;
    inset: 0;
    padding-top: max(calc(60px + var(--oben)), calc(var(--glasende) + 44px));
    padding-bottom: 12px;
    overflow: hidden;
    /* Nichts dem Browser überlassen: Wischen, Kneifen und Schieben
       macht hier alles das Skript. Mit "pan-y" käme Safari beim
       Kneifen dazwischen und vergrößerte die ganze Seite. */
    touch-action: none;
}

/* Drei Plätze nebeneinander, dreimal so breit wie die Bühne. Steht der
   Wagen bei -33,3333 %, ist der mittlere Platz im Bild. */
.wagen {
    display: flex;
    width: 300%;
    height: 100%;
    will-change: transform;
}

.platz {
    position: relative;
    flex: 0 0 33.3333%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Volle Fläche statt Eigengröße: Ein Bild, das kleiner als der
   Bildschirm ist, soll trotzdem die Fläche füllen – sonst schwimmt es
   in Schwarz. "contain" hält dabei das Seitenverhältnis. */
.platz img,
.platz video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Der Kneifzoom rechnet mit der Mitte als festem Punkt. */
    transform-origin: 50% 50%;
}

/* Erst das Thumbnail, dann die Vorschau – der Weichzeichner macht den
   Wechsel unauffällig. */
.platz img { transition: filter 0.25s ease; }
.platz img.grob { filter: blur(3px); }
.platz img { transition: filter 0.35s ease; }

.vollbild-oben,
.vollbild-unten {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.vollbild-oben {
    top: max(calc(20px + var(--oben)), var(--glasende));
    padding: 0 12px;
}

.vollbild-unten {
    bottom: calc(18px + var(--unten));
    justify-content: center;
    padding: 0 12px;
    flex-direction: column;
    gap: 10px;
}

/* Weg damit, sobald das Bild für sich sprechen darf. */
.vollbild.nackt .vollbild-oben { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.vollbild.nackt .vollbild-unten { opacity: 0; transform: translateY(14px); pointer-events: none; }

.vollbild .luecke { flex-grow: 1; }

/* Glas, kein Kasten: Der Hintergrund bleibt sichtbar, die Schrift
   trotzdem lesbar. */
.pille,
.pillen-knopf.allein,
.datums-marke {
    /* Heller als das reine Schwarz ringsum. Mit 28/0,62 verschwanden
       die Pillen über dem schwarzen Rand neben dem Bild fast völlig –
       Glas braucht etwas, worauf es liegt, und hier liegt es oft auf
       nichts. Der Rahmen macht den Rest. */
    background: rgba(40, 40, 44, 0.66);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
                0 2px 12px rgba(0, 0, 0, 0.45);
}

.pille {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 24px;
}

.pillen-knopf {
    width: 52px;
    height: 44px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.pillen-knopf.allein {
    width: 44px;
    border-radius: 22px;
}

.pillen-knopf.gefahr { color: #ff6961; }
.pillen-knopf.laut { color: var(--akzent); }
.pillen-knopf[aria-pressed="true"] svg { fill: currentColor; }
/* Der Ton-Knopf fällt bei Fotos weg – sein Platz aber nicht.
   "display: none" nähme ihn aus dem Flex-Fluss, und die Datumsmarke
   wäre dann zwischen der Zurück-Pille und dem Nichts zentriert: gemessen
   26 Pixel zu weit rechts. Unsichtbar, aber anwesend, hält die Waage. */
.pillen-knopf[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
}

.datums-marke {
    border-radius: 17px;
    padding: 6px 14px 7px;
    color: #ffffff;
    text-align: center;
    max-width: 58%;
    flex-shrink: 1;
    min-width: 0;
}

.datums-marke b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datums-marke span {
    display: block;
    font-size: 11px;
    opacity: 0.72;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datums-marke span:empty { display: none; }

/* Beim Video reicht ein Haarstrich – wer mehr will, tippt das Bild an. */
.video-fortschritt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.22);
}

.video-fortschritt[hidden] { display: none; }

.video-balken {
    height: 100%;
    width: 0;
    background: #ffffff;
    transition: width 0.25s linear;
}

.icon-knopf {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--akzent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-knopf.gefahr { color: var(--gefahr); }
.icon-knopf[aria-pressed="true"] svg { fill: currentColor; }

.angaben {
    padding: 8px 16px 0;
    font-size: 12px;
    color: var(--text2);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ------------------------------------------------------------ Personen */

.kopf.mit-zurueck {
    gap: 4px;
    align-items: center;
    padding-left: 6px;
}

.kopf.mit-zurueck .icon-knopf { flex-shrink: 0; margin-bottom: 2px; }

.person-titel {
    flex-grow: 1;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hinweis {
    margin: 6px 16px 16px;
    padding: 10px 14px;
    background: var(--fill);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 12px;
}

.hinweis svg { width: 22px; height: 22px; color: var(--akzent); flex-shrink: 0; }
.hinweis p { margin: 0; flex-grow: 1; font-size: 14px; line-height: 19px; color: var(--text2); }
.hinweis .text-knopf { min-height: 44px; font-size: 15px; font-weight: 500; }

.gruppe-titel {
    padding: 8px 16px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
    letter-spacing: 0.3px;
}

.personen-raster {
    padding: 0 16px 8px;
    display: grid;
    grid-template-columns: repeat(var(--personen-spalten, 3), minmax(0, 1fr));
    gap: 18px 14px;
}

.personen-raster.eng { --personen-spalten: 4; padding: 0; gap: 14px 10px; }

.person { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.person-bild {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--kachel);
    overflow: hidden;
}

.person-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.person-bild img.da, .personen-raster.eng .person-bild img { opacity: 1; }

.person-name {
    font-size: 14px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-anzahl { font-size: 12px; color: var(--text2); margin-top: -4px; }
.klein-knopf { font-size: 14px; min-height: 22px; padding: 0; }

/* -------------------------------------------------------------- Alben */

.alben-raster {
    padding: 0 16px 16px;
    display: grid;
    grid-template-columns: repeat(var(--alben-spalten, 2), minmax(0, 1fr));
    gap: 18px 14px;
}

.album {
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    color: inherit;
}

.album-bild {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--kachel);
}

.album-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.album-name {
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-zahl { font-size: 12px; color: var(--text2); margin-top: -4px; }

/* -------------------------------------------------------------- Suche */

.suchfeld {
    margin: 0 16px 12px;
    padding: 0 12px;
    background: var(--fill);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}

.suchfeld svg { width: 18px; height: 18px; color: var(--text2); flex-shrink: 0; }

.suchfeld input {
    flex-grow: 1;
    border: 0;
    background: transparent;
    min-height: 40px;
    font-size: 17px;
    outline: none;
    min-width: 0;
}

.suchfeld input::-webkit-search-cancel-button { display: none; }
.suchfeld .text-knopf { font-size: 15px; padding: 0; flex-shrink: 0; }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 6px;
}

.chip {
    border: 0;
    background: var(--fill);
    color: var(--text);
    border-radius: 16px;
    padding: 7px 13px;
    min-height: 32px;
    font-size: 14px;
    white-space: nowrap;
}

.chip[aria-pressed="true"] { background: var(--akzent); color: #fff; }


/* Der Jahres-Kamm auf der Suchseite.

   Ein Zahn je Jahrgang, die Höhe nach der Wurzel der Anzahl. Die Zähne
   teilen sich die Breite zu gleichen Teilen (flex:1), damit der Kamm
   auf jedem Schirm passt, ohne dass irgendwo eine Pixelzahl steht, die
   nachgerechnet werden müsste.

   Angetippt wird der ganze Zahn über die volle Höhe, nicht nur der
   sichtbare Balken – sonst wären die mageren Jahre, die man am ehesten
   sucht, am schwersten zu treffen. */

.kamm {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 68px;
    padding: 0 16px;
}

.kamm-zahn {
    flex: 1 1 0;
    min-width: 6px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    border: 0;
    padding: 0;
    background: transparent;
}

.kamm-balken {
    display: block;
    width: 100%;
    /* Die Untergrenze gehört hierher, nicht in die Prozentrechnung:
       Fünf Prozent von achtundsechzig Pixeln sind drei – ein Strich,
       der wie ein Fehler aussieht statt wie ein mageres Jahr. */
    min-height: 5px;
    border-radius: 2px;
    background: var(--text3);
}

.kamm-zahn.an .kamm-balken { background: var(--akzent); }

.kamm-marken {
    display: flex;
    gap: 3px;
    padding: 5px 16px 0;
}

.kamm-marke {
    flex: 1 1 0;
    min-width: 6px;
    text-align: center;
    font-size: 9.5px;
    color: var(--text3);
    font-variant-numeric: tabular-nums;
}

.jahr-plakette {
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 32px);
    margin: 16px 16px 0;
    border: 0;
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--akzent);
    text-align: left;
}

.jahr-plakette b {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #fff;
    line-height: 1;
}

.jahr-plakette > span { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.jahr-plakette .jahr-menge { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.jahr-plakette .jahr-anteil { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.jahr-plakette svg { width: 17px; height: 17px; color: rgba(255, 255, 255, 0.8); flex-shrink: 0; }

.jahr-nachbarn { padding-top: 10px; }


/* Wessen Aufnahmen – der Personenfilter der gemeinsamen Mediathek.

   Anders als die Schlagwort-Schildchen darüber ist hier IMMER etwas
   gewählt: Keine Auswahl heißt "alle", und dann sind alle angehakt.
   Deshalb der Haken statt der Einfärbung als Zeichen – ein Knopf, der
   dauernd blau leuchtet, liest sich nach einer Weile wie Dekoration,
   ein fehlender Haken dagegen fällt auf. */

.werfilter { padding: 0 16px 18px; }
.werfilter[hidden] { display: none; }

.werfilter h2 {
    margin: 0 0 9px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--text2);
}

.wer-reihe { display: flex; flex-wrap: wrap; gap: 8px; }

.wer-knopf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 18px;
    padding: 8px 14px 8px 10px;
    min-height: 36px;
    background: var(--fill);
    color: var(--text3);
    font-size: 14px;
    white-space: nowrap;
}

.wer-knopf b { font-weight: 600; }
.wer-knopf .klein { font-size: 12px; }

.wer-knopf.an { color: var(--text); }
.wer-knopf.an .klein { color: var(--text2); }

/* Der Platz bleibt auch ohne Haken stehen, sonst wackelt die ganze
   Reihe bei jedem Antippen um sechzehn Pixel. */
.wer-haken {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--akzent);
}

.wer-haken svg { width: 16px; height: 16px; }


/* Die Suche zeigt etwas, bevor jemand tippt.

   Eine leere Seite mit einem leeren Feld ist eine Aufforderung, sich
   etwas auszudenken. Vier Wege, die ohne Tippen funktionieren, sind
   eine bessere Antwort – und Videos und Favoriten sind ohnehin kein
   Suchbegriff, sondern ein Bestand. */
.kategorien {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Unten nur wenig Luft: Die Kacheln sind nicht das letzte Element
       der Seite, darunter stehen noch die Schildchen. Der Abstand zur
       schwebenden Leiste gehört an das, was wirklich zuletzt kommt. */
    padding: 6px 16px 18px;
}

.kategorien[hidden] { display: none; }

.kategorie {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 14px;
    padding: 14px 13px;
    background: var(--fill);
    color: var(--text);
    text-align: left;
}

.kategorie-zeichen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--akzent);
}

.kategorie-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.kategorie-text b { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.kategorie-text span { font-size: 12px; color: var(--text2); }

/* -------------------------------------------------------------- Karte */

#karte { position: relative; display: flex; flex-direction: column; }

.karte-buehne {
    position: relative;
    height: 62dvh;
    min-height: 320px;
    overflow: hidden;
    background: var(--fill);
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.karte-buehne:active { cursor: grabbing; }
.karte-kacheln, .karte-marken { position: absolute; inset: 0; }
.karte-marken { pointer-events: none; }

.karte-kachel {
    position: absolute;
    width: 256px;
    height: 256px;
    display: block;
}

@media (prefers-color-scheme: dark) {
    .karte-kachel { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92); }
}

.karte-marke {
    position: absolute;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 0;
    padding: 0;
    background: transparent;
    pointer-events: auto;
}

/* Bild und Anzahl getrennt: Der Kreis schneidet ab, die Zahl darf
   überstehen. Beides in einem Element ginge nicht. */
.karte-marke-bild {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    background: var(--kachel);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.karte-marke img { width: 100%; height: 100%; object-fit: cover; display: block; }

.karte-anzahl {
    position: absolute;
    right: -3px;
    top: -3px;
    min-width: 19px;
    height: 19px;
    border-radius: 10px;
    background: var(--akzent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 19px;
    text-align: center;
    padding: 0 4px;
    border: 1.5px solid var(--bg);
}

.karte-zoom {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    flex-direction: column;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.karte-zoom button {
    width: 40px;
    height: 40px;
    border: 0;
    background: var(--flaeche);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
}

.karte-zoom button + button { border-top: 0.5px solid var(--line); }

.karte-nachweis {
    padding: 6px 16px;
    font-size: 11px;
    color: var(--text2);
}

.karte-nachweis a { color: var(--text2); }

/* ---------------------------------------------------------- Bogen */

.bogen-schicht {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bogen-schicht.da { opacity: 1; }

.bogen {
    width: 100%;
    max-width: 460px;
    max-height: 86dvh;
    overflow-y: auto;
    background: var(--flaeche);
    box-shadow: 0 -1px 0 var(--line-fein);
    border-radius: 16px 16px 0 0;
    padding: 8px 20px calc(20px + var(--unten));
    transform: translateY(20px);
    transition: transform 0.22s ease;
}

.bogen-schicht.da .bogen { transform: none; }
.bogen h2 { margin: 6px 0 14px; font-size: 20px; font-weight: 600; text-align: center; letter-spacing: -0.2px; }

.bogen-griff {
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: var(--line);
    margin: 0 auto;
}

.bogen-koerper { display: flex; flex-direction: column; gap: 12px; }
.bogen-koerper .meldung { margin: 0; }

.bogen-gesicht {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--kachel);
    align-self: center;
}

.bogen-fuss { display: flex; gap: 10px; margin-top: 18px; }
.bogen-fuss .knopf { flex-grow: 1; }

/* --------------------------------------------------------- Bausteine */

.karte {
    background: var(--fill);
    border-radius: var(--radius);
    padding: 16px;
    margin: 0 16px 14px;
}

.karte h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.karte p { margin: 0 0 10px; font-size: 15px; color: var(--text2); }
.karte p:last-child { margin-bottom: 0; }

.knopf {
    display: inline-block;
    border: 0;
    background: var(--akzent);
    color: #fff;
    border-radius: 10px;
    padding: 13px 20px;
    min-height: 48px;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
}

.knopf.leise { background: var(--fill2); color: var(--text); }
.knopf.gefahr { background: transparent; color: var(--gefahr); }
.knopf[disabled] { opacity: 0.4; }

.formular { display: flex; flex-direction: column; gap: 14px; }
.formular label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text2); }

.formular input {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 13px;
    min-height: 48px;
    background: var(--bg);
    font-size: 17px;
}

.liste { list-style: none; margin: 0; padding: 0; }

.liste li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-top: 0.5px solid var(--line-fein);
    font-size: 15px;
}

.liste li:first-child { border-top: 0; }
/* Die Textspalte darf schrumpfen, der Knopf daneben nicht. */
.liste li > span:first-child { min-width: 0; }
.liste li > .text-knopf { flex-shrink: 0; align-self: center; }
/* Zeile mit Kleinschrift darunter: Name und Knopf oben, Rest volle Breite. */
.liste li.stapel { flex-direction: column; align-items: stretch; gap: 2px; }
.liste li.stapel > .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.liste li.stapel > .kopf > .text-knopf { flex-shrink: 0; }
.liste .wert { color: var(--text2); text-align: right; }
.liste li.gut .wert { color: #1a7f4b; }
.liste li.schlecht .wert { color: var(--gefahr); }

.meldung { margin: 0 16px 14px; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.meldung.fehler { background: rgba(255, 59, 48, 0.12); color: var(--gefahr); }
.meldung.gut { background: rgba(26, 127, 75, 0.12); color: #1a7f4b; }

.klein { font-size: 12px; color: var(--text2); font-weight: 400; }

.code {
    background: var(--fill2);
    border-radius: 10px;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0 0 12px;
}

.leer {
    padding: 80px 32px;
    text-align: center;
    color: var(--text2);
    font-size: 15px;
}

.laden {
    padding: 28px;
    text-align: center;
    color: var(--text3);
    font-size: 13px;
}

/* ------------------------------------------------------- Anmeldeseite */

/* ------------------------------------------------------- Anmeldung

   Ein eigener Raum vor der Fotowand: dunkel, unabhängig vom Systemmodus,
   mit der Marke groß darin. Wer sich anmeldet, sieht das Zeichen einmal
   bewusst – danach nie wieder in dieser Größe.

   Die Markenregel: Terrakotta trägt genau eine Sache je Schirm, den
   Knopf, der weiterführt. Deshalb ist "Angemeldet bleiben" ein
   schlichtes Häkchen und kein zweiter Farbfleck.                     */

body.tor {
    background: #17161a;
    color: #f4f1ea;
}

.anmelden {
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 104px 30px calc(30px + var(--unten));
    gap: 0;
    max-width: 430px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Die angeschnittene Blende gibt der Fläche Tiefe, ohne mit dem
   Formular zu konkurrieren – deshalb 6 % und nicht mehr. */
.anmelden .blende-hintergrund {
    position: absolute;
    top: -186px;
    right: -166px;
    width: 430px;
    height: 430px;
    opacity: 0.045;
    pointer-events: none;
}

.anmelden .blende-zeichen { width: 60px; height: 60px; margin-bottom: 26px; }
.anmelden .blende-zeichen.klein { width: 42px; height: 42px; margin-bottom: 20px; }

.anmelden .wortmarke {
    font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -1.8px;
    line-height: 1.05;
    margin: 0;
    color: #f4f1ea;
}

.anmelden .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.42);
    margin-bottom: 12px;
}

.anmelden h1 {
    font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1.4px;
    line-height: 1.08;
    margin: 0;
    color: #f4f1ea;
}

.anmelden p.klein {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(244, 241, 234, 0.62);
    max-width: 300px;
}

.anmelden .formular {
    position: relative;
    padding-top: 38px;
    gap: 18px;
}

.anmelden label {
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.5);
}

.anmelden input[type="email"],
.anmelden input[type="password"],
.anmelden input[type="text"] {
    height: 54px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(244, 241, 234, 0.14);
    background: rgba(244, 241, 234, 0.05);
    color: #f4f1ea;
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 400;
}

.anmelden input::placeholder { color: rgba(244, 241, 234, 0.32); }

.anmelden input:focus {
    outline: none;
    border-color: rgba(217, 119, 87, 0.7);
    background: rgba(244, 241, 234, 0.07);
}

/* Die Häkchenzeile ist keine Feldbeschriftung: normale Schrift, keine
   Versalien, keine Sperrung. Ohne diese Regel erbt sie die Gestaltung
   der Beschriftungen darüber und schreit "ANGEMELDET BLEIBEN". */
.anmelden label.kasten-zeile {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(244, 241, 234, 0.72);
}

/* Neutral, nicht terrakotta. Die Markenregel sagt: eine Sache je
   Schirm trägt den Ton, und das ist der Knopf. Ein zweites gefärbtes
   Element daneben nimmt ihm genau die Bedeutung, für die er da ist. */
.anmelden input[type="checkbox"] {
    width: 21px;
    height: 21px;
    accent-color: #6b6862;
    margin: 0;
}

.anmelden .knopf {
    height: 56px;
    border: 0;
    border-radius: 15px;
    background: #d97757;
    color: #17161a;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-top: 6px;
}

.anmelden .knopf:disabled { opacity: 0.45; }

.anmelden .luecke { flex-grow: 1; min-height: 28px; }

.anmelden .tor-fuss {
    position: relative;
    font-size: 15px;
    color: rgba(244, 241, 234, 0.5);
}

.anmelden .tor-fuss a { color: #d97757; }

.anmelden .meldung {
    position: relative;
    margin-top: 26px;
    border-radius: 13px;
    font-size: 14px;
    line-height: 1.45;
    padding: 14px 16px;
}

.anmelden .meldung.fehler {
    border: 1px solid rgba(255, 138, 128, 0.4);
    background: rgba(255, 138, 128, 0.1);
    color: #ff9f95;
}

.anmelden .meldung.gut {
    border: 1px solid rgba(150, 190, 150, 0.4);
    background: rgba(150, 190, 150, 0.1);
    color: #a9d1a5;
}

/* ------------------------------------------------- Einrichtungsseite */

body.setup { background: var(--fill); }
.setup-wrap { max-width: 640px; margin: 0 auto; padding: 32px 0 60px; }
.setup-wrap h1 { font-size: 28px; margin: 0 16px 20px; letter-spacing: -0.3px; }
.setup-wrap .karte { background: var(--bg); border: 1px solid var(--line-fein); }
.setup-wrap ol { margin: 0; padding-left: 20px; font-size: 15px; color: var(--text2); }
.setup-wrap ol li { padding: 3px 0; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background: var(--fill2);
    padding: 2px 5px;
    border-radius: 5px;
}

@media (min-width: 700px) {
    :root { --spalten: 5; --personen-spalten: 5; --alben-spalten: 4; }
    .blatt { max-width: 900px; margin: 0 auto; width: 100%; }
    .reiter { max-width: 900px; margin: 0 auto; width: 100%; }
    /* Die Fotowand geht über die ganze Breite – auf dem iPad sähe sie
       sonst aus wie ein Telefonbild mit Trauerrand. */
    .blatt.randlos { max-width: none; }
}

/* Kästchen mit Erklärung daneben – im Bogen, wo eine Entscheidung
   getroffen wird, die man verstehen soll, bevor man sie trifft. */
.zeile-kasten {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 4px;
}

.zeile-kasten input { margin-top: 3px; flex-shrink: 0; }

/* ------------------------------------------------- Große Schirme

   ALLES in diesem Abschnitt steht in einer Medienabfrage, die auf
   einem Telefon niemals zutrifft. Das ist keine Vorsichtsmaßnahme,
   sondern die Zusage: Die Mobilseite bleibt unberührt, und zwar
   nachweisbar – dieselben Schirme werden vor und nach dem Umbau
   gerendert und Pixel für Pixel verglichen.

   Die Grenze fragt nach Breite UND Höhe. Ein iPhone im Querformat ist
   932 Pixel breit, breiter als ein iPad im Hochformat; eine Grenze
   allein nach der Breite verpasste ihm eine Seitenleiste auf 430
   Pixel Höhe.                                                        */

@media (min-width: 820px) and (min-height: 600px) {

    :root { --spaltenbreite: 244px; }

    /* Der Dokument-Clip fliegt hier raus.
    
       Oben steht "overflow-x: clip" auf html und body, damit das Raster
       beim Zoomwechsel nicht kurz über die Seitenbreite läuft. Nach der
       Spezifikation reißt eine geclippte Achse die andere mit: Steht
       dort "visible", wird daraus ebenfalls "clip" – und ein
       geclipptes Dokument scrollt nicht mehr. Blink behält "visible",
       WebKit hält sich an die Regel.
    
       Das erklärt "Chrome ja, Safari nein". Es erklärt NICHT, warum
       das iPhone scrollt, wo dieselbe Regel gilt – der Verdacht hat
       also ein Loch, und ich verkaufe ihn nicht als Gewissheit.
    
       Geschnitten wird jetzt dort, wo der Überlauf entsteht: am
       Raster. Das ist ohnehin die richtige Stelle – eine ganze Seite
       zu clippen, weil ein Kasten darin übersteht, ist mit Kanonen
       auf Spatzen geschossen. Auf dem Telefon bleibt alles, wie es
       war; diese Regeln gelten dort nicht. */
    /* Auf großen Schirmen gilt für das Scrollen ausschließlich das,
       was der Browser von Haus aus tut.
    
       Drei Eigenschaften stehen oben in dieser Datei, jede mit einem
       guten Grund – aber jeder dieser Gründe ist ein Telefon-Grund:
    
       - "overflow-x: clip" gegen ein Raster, das beim KNEIFEN kurz
         übersteht. Auf großen Schirmen wird nicht gekniffen.
       - "overscroll-behavior-y: none" gegen das Gummiband und das
         Ziehen-zum-Neuladen. Beides gibt es am Schreibtisch nicht.
       - "touch-action: pan-y" gegen den Seitenzoom beim Kneifen.
         Siehe oben.
    
       Alle drei sind hier also wirkungslos – aber nicht folgenlos:
       Safari am Mac scrollt mit dem Mausrad nicht, während Trackpad,
       Chrome und iPhone es tun. Welche der drei es ist, weiß ich
       nicht; ich habe sie einzeln ausgeschlossen und lag dreimal
       daneben. Also gehen sie alle, statt dass ich eine vierte
       Vermutung anstelle.
    
       Wenn du wissen willst, welche es war, schalten wir sie danach
       einzeln wieder zu. Ohne laufende Seite ist das Ratespiel, und
       davon hatten wir heute genug. */
    /* Nur mit der Klasse "breit": Das iPad ist ebenso breit, bekommt
       aber die Telefon-Ansicht – und braucht dafür die Telefon-Regeln. */
    html.breit, html.breit body {
        overflow-x: visible;

        /* Hier steht "auto", weil "none" Safari am Mac das MAUSRAD
           nimmt. Gemessen, nicht vermutet: am 23.09. einzeln wieder
           zugeschaltet, Rad tot; wieder auf "auto", Rad da.
        
           Oben in dieser Datei steht weiterhin "none" – dort gehört
           es hin. Es verhindert auf dem Telefon das Gummiband und das
           Ziehen-zum-Neuladen, und mit Fingern greift die
           Nebenwirkung nicht. Sie trifft nur Safaris Rad-Weg;
           Trackpad, Chrome und iPhone bleiben unberührt, was das
           Einkreisen so mühsam gemacht hat.
        
           Wer die Grenze für große Schirme einmal verschiebt, sollte
           das hier wissen: Die Regel ist nicht falsch, sie ist nur am
           Schreibtisch überflüssig und dort nicht folgenlos. */
        overscroll-behavior-y: auto;
    }

    body.breit #zeitleiste { overflow: visible; }

    /* Die Regel zurücknehmen, die auf dem Mac das Scrollen verhindert.
    
       Oben am Raster steht "touch-action: pan-y", damit das Kneifen
       über der Fotowand der Zoomstufe gehört und nicht dem Browser.
       Der Name sagt "touch", und auf dem iPhone tut es genau das.
    
       Safari am Mac wertet touch-action aber auch beim MAUSRAD aus:
       Es sucht sich zu Beginn einer Radbewegung ein Ziel und schickt
       alles Weitere dorthin – und ein Ziel, das laut touch-action
       nicht frei scrollen darf, bekommt die Bewegung, gibt sie aber
       nicht weiter. Die Trackpad-Geste läuft an diesem Weg vorbei,
       Chrome wertet touch-action nur für echte Berührungen aus.
    
       Damit passen alle drei Beobachtungen zusammen: Chrome ja,
       Safari am Mac nur mit Trackpad, iPhone ja – dort gibt es kein
       Mausrad, an dem es auffallen könnte.
    
       Auf großen Schirmen ist die Regel ohnehin überflüssig: Es gibt
       keine Kneifgeste zu verhindern, die Zoomstufen haben Knöpfe. */
    body.breit #zeitleiste { touch-action: auto; }

    /* Und hier die Regel zurücknehmen, die das Scrollen verhindert.
    
       "touch-action: pan-y" steht oben am Raster, um das Kneifen vom
       Browser fernzuhalten. Der Name sagt "touch", und auf dem iPhone
       tut es genau das: Wischen senkrecht erlaubt, Kneifen nicht.
    
       Safari auf dem Mac bezieht touch-action aber auch auf Trackpad
       und Magic Mouse – und behandelt dort offenbar jeden Wert außer
       "auto" als "darum kümmert sich die Seite selbst". Ergebnis: Die
       Seite ist scrollbar, Safari zeigt den Balken, nimmt die Geste
       aber nicht an. Chrome wertet touch-action nur für echte
       Berührungen aus, deshalb läuft es dort.
    
       Das erklärt alle drei Beobachtungen: Chrome ja, Safari am Mac
       nein, iPhone ja. Auf großen Schirmen gibt es ohnehin keine
       Kneifgeste zu verhindern – die Zoomstufen haben dort Knöpfe. */
    body.breit #zeitleiste { touch-action: auto; }

    /* Die Fläche rückt nach rechts, neben die Spalte. Kein flex am
       Körper: Der Kopf ist fest positioniert und würde aus einem
       Flussmodell herausfallen. Ein schlichter Einzug trifft beide. */
    body.breit .blatt {
        padding-left: var(--spaltenbreite);
        padding-top: 0;
        padding-bottom: 40px;
        /* Hebt den Deckel der alten 700er-Abfrage auf.
        
           Dort steht "max-width: 900px" aus der Zeit vor der Spalte –
           damals sollte die Wand auf einem breiten Fenster nicht ins
           Unermessliche laufen. Jetzt begrenzt die Spalte sie ohnehin,
           und der Deckel ließ von 1512 Pixeln nur 656 für Fotos übrig.
        
           Die alte Regel bleibt stehen, statt sie zu ändern: Sie
           greift auch beim iPhone im Querformat, und dort darf sich
           nichts verschieben. */
        max-width: none;
        margin: 0;
        width: auto;
    }

    body.breit .blatt.randlos { padding-top: var(--kopfhoehe, 108px); }

    body.breit .kopf-glas {
        left: var(--spaltenbreite);
        padding: 18px 0 14px;
        /* Auf großen Schirmen liegt hinter dem Kopf immer die Wand,
           nie ein leerer Anfang – der dunkle Verlauf des Telefons
           wäre hier ein Balken quer über die Fotos. Stattdessen
           dasselbe Milchglas wie überall. */
        background: rgba(252, 252, 254, 0.72);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
        border-bottom: 1px solid rgba(60, 60, 67, 0.1);
    }

    body.breit .kopf-oben {
        padding: 0 24px;
        gap: 12px;
    }

    body.breit .kopf-oben h1 {
        color: var(--text);
        text-shadow: none;
        font-size: 24px;
        line-height: 30px;
        letter-spacing: -0.5px;
    }

    body.breit .glas-rund {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        background: rgba(118, 118, 128, 0.12);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        color: var(--akzent);
    }

    /* Der Stufenwähler im Kopf ist kein schwebender Glaskörper mehr,
       sondern ein gewöhnlicher Segmentwähler – er liegt auf einer
       Fläche, nicht auf Fotos. */
    body.breit .kopf-glas .stufen {
        flex: 0 0 auto;
        gap: 2px;
        padding: 3px;
        border-radius: 10px;
        background: rgba(118, 118, 128, 0.12);
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Außerhalb der Leiste unten greift ".reiter button" nicht mehr,
       und dann malt der Browser seinen eigenen Rahmen um jeden Knopf.
       Im Bild sah das aus wie drei umrandete Kästchen statt eines
       Segmentwählers. */
    body.breit .kopf-glas .stufen button {
        border: 0;
        height: 28px;
        padding: 0 13px;
        border-radius: 7px;
        font-size: 13px;
    }

    body.breit .kopf-glas .stufen button[aria-selected="true"] {
        background: var(--flaeche);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    body.breit .filter-zeile { padding: 10px 24px 0; }

    /* Die Zoomknöpfe, gleiche Bauart wie der Stufenwähler daneben –
       zwei Dinge, die nebeneinander stehen und dasselbe tun (die
       Flughöhe ändern), sollen auch gleich aussehen. */
    .zoomstufen {
        display: flex;
        gap: 2px;
        padding: 3px;
        border-radius: 10px;
        background: rgba(118, 118, 128, 0.12);
        flex: 0 0 auto;
    }

    .zoomknopf {
        width: 30px;
        height: 28px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--text);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .zoomknopf svg { width: 17px; height: 17px; }

    .zoomknopf:hover:not(:disabled) { background: rgba(120, 120, 128, 0.16); }

    /* Am Anschlag ausgegraut statt wirkungslos: Ein Knopf, der nichts
       tut und trotzdem aussieht wie einer, lässt einen zweimal
       drücken und dann am Gerät zweifeln. */
    .zoomknopf:disabled { opacity: 0.3; }

    /* ------------------------------------------------- Die Spalte */

    .spalte {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--spaltenbreite);
        z-index: 7;
        display: flex;
        flex-direction: column;
        padding: 18px 10px 12px;
        background: rgba(246, 246, 248, 0.92);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
        border-right: 1px solid var(--line-fein);
    }

    .spalte-marke {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 11px 18px;
    }

    .spalte-blende { width: 24px; height: 24px; flex: 0 0 24px; }

    .spalte-marke span {
        font-family: "Space Grotesk", system-ui, sans-serif;
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.9px;
        color: var(--text);
    }

    .spalte-liste { display: flex; flex-direction: column; gap: 1px; }

    .spalte-zeile {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        border: 0;
        border-radius: 9px;
        padding: 0 11px;
        height: 36px;
        background: transparent;
        color: var(--text);
        font-size: 14.5px;
        font-weight: 500;
        letter-spacing: -0.2px;
        text-align: left;
    }

    .spalte-zeile svg { width: 18px; height: 18px; flex-shrink: 0; }

    .spalte-name {
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .spalte-zahl {
        font-size: 12px;
        font-weight: 400;
        color: var(--text3);
        font-variant-numeric: tabular-nums;
    }

    /* Gewählt trägt Farbe UND Fläche, nicht nur Farbe: Über einer
       hellen Spalte allein ist blauer Text ein schwaches Signal. */
    .spalte-zeile.an {
        background: rgba(0, 122, 255, 0.12);
        color: var(--akzent);
        font-weight: 600;
    }

    .spalte-zeile.an .spalte-zahl { color: var(--akzent); opacity: 0.7; }

    .spalte-trenner {
        height: 1px;
        background: var(--line-fein);
        margin: 11px 12px;
    }

    /* Wessen Aufnahmen – die Personen unten in der Spalte.

       Sie sehen aus wie die Bereiche darüber, verhalten sich aber
       anders: Ein Bereich ist entweder der, in dem man gerade ist,
       oder nicht; eine Person ist an oder aus, und mehrere zugleich.
       Deshalb kein blauer "hier bin ich"-Zustand, sondern ein Haken –
       und abgewählt wird nur blasser, nicht verschwunden. */

    .spalte-kopf {
        padding: 4px 12px 6px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        color: var(--text3);
    }

    .spalte-wer .wer-haken {
        display: inline-flex;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: var(--akzent);
    }

    .spalte-wer .wer-haken svg { width: 18px; height: 18px; }

    .spalte-wer.aus { color: var(--text3); }
    .spalte-wer.aus .spalte-zahl { opacity: 0.55; }

    .spalte-konto {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        border: 0;
        border-radius: 9px;
        padding: 7px 11px;
        background: transparent;
        color: var(--text);
        font-size: 13.5px;
        text-align: left;
    }

    .spalte-konto.an { background: rgba(0, 122, 255, 0.12); color: var(--akzent); }
    .spalte-konto svg { width: 16px; height: 16px; color: var(--text3); flex-shrink: 0; }
    .spalte-konto.an svg { color: var(--akzent); }

    .spalte-kreis {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        border-radius: 50%;
        background: var(--akzent);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
    }

    @media (prefers-color-scheme: dark) {
        .spalte { background: rgba(28, 28, 30, 0.92); }
        body.breit .kopf-glas { background: rgba(22, 22, 24, 0.74); }
        .spalte-zeile.an,
        .spalte-konto.an { background: rgba(10, 132, 255, 0.18); }
    }

    /* Personen, Suche, Alben und Mehr behalten ihren gewöhnlichen
       Kopf – der rückt nur mit. */
    body.breit .kopf { padding: 22px 24px 10px; }
    body.breit .kopf h1 { font-size: 26px; line-height: 32px; }

    /* Auf breiten Schirmen soll Text nicht über die ganze Fläche
       laufen – lesbar ist er nur bis etwa 70 Zeichen. */
    body.breit .karte { max-width: 720px; }

    /* Die Kategorie-Kacheln der Suche gibt es hier nicht: Videos,
       Favoriten, Personen und Orte stehen schon in der Spalte. */
    body.breit .kategorien { display: none; }

    /* Jahre und Monate: mehrspaltig statt untereinander.
    
       Eine Jahreskarte über die ganze Breite eines iPads ist kein
       Überblick mehr, sondern ein Plakat – und ein Überblick ist
       genau der Sinn dieser Stufe. Auf dem Telefon steht sie einzeln,
       weil dort eine halbe Karte nebenan nichts nützt. */
    body.breit .jahr-liste {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        padding: 18px 24px 40px;
    }

    body.breit .monat-raster {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        padding: 0 24px;
    }

    body.breit .monat-raster:last-of-type { padding-bottom: 40px; }
    body.breit .monat-jahr { margin: 22px 24px 10px; }

    /* Die Leiste unten gibt es hier nicht – der Platz, den sie
       gebraucht hätte, wird nicht mehr freigehalten. */
    body.breit .kategorien,
    body.breit #zeitleiste { padding-bottom: 0; }
}

/* Ab MacBook-Breite noch eine Spalte mehr. Die Zahlen sind nicht
   geraten: Bei 1512 Pixeln minus Spalte bleiben 1268 – geteilt durch
   vier sind das 300 Pixel je Jahreskarte, eine gute Größe für ein
   Deckbild mit zwei Zeilen Text darin. */
@media (min-width: 1280px) and (min-height: 600px) {
    body.breit .jahr-liste { grid-template-columns: repeat(4, 1fr); }
    body.breit .monat-raster { grid-template-columns: repeat(6, 1fr); }
}

/* ---------------------------------------------------------- Aufräumen */

.aufr-umschalter {
    display: flex;
    margin: 4px 16px 14px;
    padding: 2px;
    background: var(--fill2);
    border-radius: 9px;
}
.aufr-umschalter button {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    padding: 7px 10px;
    border-radius: 7px;
}
.aufr-umschalter button.an { background: var(--flaeche); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }

.aufr-grenzen { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 16px 12px; }
.aufr-grenzen .knopf { min-height: 34px; padding: 6px 13px; font-size: 14px; }
.aufr-grenzen .knopf.an { background: var(--akzent); color: #fff; }

.aufr-summe { margin: 0 16px 10px; font-size: 15px; color: var(--text2); }
.aufr-hinweis { margin: 0 16px 12px; }

.aufr-liste { list-style: none; margin: 0 16px; padding: 0; }
.aufr-liste li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 0.5px solid var(--line-fein);
}
.aufr-liste li:first-child { border-top: 0; }
.aufr-liste li.gewaehlt { background: color-mix(in srgb, var(--gefahr) 7%, transparent); }
.aufr-liste .aufr-bild { width: 72px; height: 72px; flex-shrink: 0; }
.aufr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aufr-text strong { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aufr-groesse { font-size: 15px; font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.aufr-wahl { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--gefahr); margin: 0; }

.aufr-bild {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--kachel);
    cursor: pointer;
}
.aufr-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aufr-dauer {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.aufr-bild.ist-video::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    margin: -9px 0 0 -6px;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.aufr-film { width: 100%; max-height: 62dvh; border-radius: 10px; background: #000; display: block; margin-bottom: 8px; object-fit: contain; }

.aufr-balken { height: 6px; border-radius: 3px; background: var(--fill2); overflow: hidden; margin: 0 0 10px; }
.aufr-balken span { display: block; height: 100%; background: var(--akzent); transition: width 0.3s ease; }
.aufr-stand .knopf { min-height: 38px; padding: 8px 16px; font-size: 15px; }

.aufr-gruppe {
    margin: 0 16px 14px;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--fill);
}
.aufr-gruppe-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.aufr-marke { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.aufr-marke.gleich { background: color-mix(in srgb, var(--gefahr) 15%, transparent); color: var(--gefahr); }
.aufr-marke.aehnlich { background: color-mix(in srgb, var(--akzent) 15%, transparent); color: var(--akzent); }

.aufr-reihe { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.aufr-fach {
    position: relative;
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 10px;
    padding: 4px;
    outline: 2px solid transparent;
}
.aufr-fach.gewaehlt { outline-color: var(--gefahr); }
.aufr-fach.gewaehlt .aufr-bild img { opacity: 0.55; }
.aufr-fach .aufr-bild { width: 100%; aspect-ratio: 1; }
.aufr-fach .aufr-wahl { position: absolute; top: 10px; left: 10px; z-index: 2; }
.aufr-fach-fuss { display: flex; flex-direction: column; gap: 3px; }
.aufr-behalten { align-self: flex-start; font-size: 11px; font-weight: 600; color: #1a7f4b;
    background: color-mix(in srgb, #1a7f4b 14%, transparent); padding: 2px 7px; border-radius: 5px; }

/* Exakte Kopien: kompakt, viele Gruppen nebeneinander (100 je Seite). */
.aufr-gruppen.kompakt {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 8px;
    margin: 0 16px 14px;
}
.kompakt .aufr-gruppe { margin: 0; padding: 7px; min-width: 0; }
.kompakt .aufr-gruppe-kopf { margin-bottom: 5px; }
.kompakt .aufr-gruppe-kopf .klein { font-size: 11px; }
.kompakt .aufr-reihe { gap: 5px; }
.kompakt .aufr-fach { flex: 1 1 0; min-width: 0; max-width: 50%; padding: 2px; gap: 3px; border-radius: 8px; }
.kompakt .aufr-fach .aufr-wahl { top: 6px; left: 6px; width: 18px; height: 18px; }
.kompakt .aufr-fach-fuss { gap: 2px; }
.kompakt .aufr-fach-fuss .klein { font-size: 10px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kompakt .aufr-behalten { font-size: 10px; padding: 1px 5px; }
.kompakt .aufr-reihe:has(> .aufr-fach:nth-child(3)) .aufr-fach { flex: 0 0 46%; max-width: none; }
@media (min-width: 820px) {
    .aufr-gruppen.kompakt { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
}

.aufr-seiten { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 6px 16px 18px; }
.aufr-seiten .knopf { min-height: 36px; padding: 6px 16px; font-size: 15px; }

.aufr-leiste {
    position: sticky;
    bottom: calc(92px + var(--unten));
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 16px 0;
    padding: 10px 12px 10px 16px;
    border-radius: 14px;
    background: var(--leiste);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
    font-size: 15px;
    font-weight: 500;
}
.aufr-leiste.da { display: flex; }
.knopf.gefahr-voll { background: var(--gefahr); color: #fff; min-height: 38px; padding: 8px 16px; font-size: 15px; }
body.breit .aufr-leiste { bottom: 16px; }
@media (min-width: 900px) {
    .aufr-fach { flex-basis: 180px; }
}

/* ------------------------------------------------ Video-Steuerung */

.video-steuer {
    width: 100%;
    max-width: 620px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 12px 2px 4px;
    border-radius: 22px;
    background: rgba(40, 40, 44, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 2px 12px rgba(0, 0, 0, 0.35);
}
.video-steuer[hidden] { display: none; }
.video-steuer .pillen-knopf.mini { width: 38px; height: 38px; border-radius: 19px; }
.video-steuer .pillen-knopf.mini svg { width: 22px; height: 22px; }

.video-zeit {
    color: #ffffff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: center;
    flex-shrink: 0;
}

/* Die Leiste zum Ziehen. Der gespielte Teil ist heller – über eine
   Variable, weil Safari keinen eigenen Füllstand für range kennt. */
.video-schieber {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 28px;
    margin: 0;
    background: transparent;
    touch-action: none;
    --stand: 0%;
}
.video-schieber::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right, #ffffff var(--stand), rgba(255, 255, 255, 0.28) var(--stand));
}
.video-schieber::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right, #ffffff var(--stand), rgba(255, 255, 255, 0.28) var(--stand));
}
.video-schieber::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6.5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.video-schieber::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
}

/* Mit Bedienung die richtige Leiste, ohne sie der Haarstrich. */
.vollbild:not(.nackt) .video-fortschritt { opacity: 0; }

/* ------------------------------------------------------ Live-Fotos */

.live-knopf {
    width: auto !important;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.live-knopf[hidden] { display: none; }

.live-film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000000;
    pointer-events: none;
}

/* ------------------------------------------- Geteilte Ansicht (share.js) */

.vollbild.geteilt .vollbild-buehne { touch-action: pan-y; display: flex; padding-bottom: calc(84px + var(--unten)); }
.geteilt-platz { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.geteilt-platz img,
.geteilt-platz video { width: 100%; height: 100%; object-fit: contain; display: block; }
.geteilt-pille { align-items: center; }
.geteilt-pille .pillen-knopf[disabled] { opacity: 0.3; }
.geteilt-zaehler { color: #ffffff; font-size: 13px; padding: 0 10px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ Weitergeben */

.teilen-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teilen-zeile .knopf { flex: 1 1 auto; }
.teilen-stand { flex-basis: 100%; }
.teilen-link { display: flex; flex-direction: column; gap: 10px; }
.teilen-link[hidden] { display: none; }
.teilen-adresse {
    width: 100%;
    font: 14px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 10px 12px;
    border-radius: 10px;
    border: 0.5px solid var(--line);
    background: var(--fill);
    color: var(--text);
}

/* ------------------------------------------------------------ Auswahl */

/* Wortknopf im Kopf: eine Pille aus demselben Glas wie die Kreise. */
.glas-pille {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 22px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #1c1c1e;
    white-space: nowrap;
    background: rgba(252, 252, 254, 0.62);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.18),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.65);
}

body.waehlen .glas-pille { color: var(--akzent); }

/* Im Auswahlmodus gehört die Leiste unten der Auswahl. */
body.waehlen .reiter { display: none; }

/* Seitliche Züge wählen aus, senkrechte scrollen weiter. */
body.waehlen .raster {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.kachel.gewaehlt::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
}

.kachel.gewaehlt::before {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
    box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

#zeitleiste.sehr-dicht .kachel.gewaehlt::before {
    width: 14px;
    height: 14px;
    right: 2px;
    bottom: 2px;
    background-size: 9px;
}

body.waehlen .kachel .dauer { display: none; }

.auswahl-leiste {
    position: fixed;
    left: 50%;
    bottom: calc(14px + var(--unten));
    transform: translateX(-50%);
    z-index: 7;
    width: min(440px, calc(100% - 28px));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 5px 5px 22px;
    border-radius: 27px;
    background: rgba(252, 252, 254, 0.62);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.65);
}

.auswahl-zahl {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
}

.auswahl-muell {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: transparent;
    color: #ff3b30;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auswahl-muell:disabled { color: #8e8e93; opacity: 0.5; }

.auswahl-nicht {
    min-height: 44px;
    max-width: 55%;
    border: 0;
    border-radius: 22px;
    padding: 0 16px;
    background: rgba(0, 122, 255, 0.12);
    color: #007aff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.auswahl-nicht:disabled { color: #8e8e93; background: rgba(142, 142, 147, 0.12); }

.rueckgaengig {
    /* Nicht mit left 50 % plus translate zentrieren: Dann darf der
       Kasten nur halb so breit werden wie der Schirm, und der Text
       brach in vier Zeilen um. So nimmt er, was er braucht. */
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    max-width: calc(100% - 28px);
    bottom: calc(84px + var(--unten));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 5px 5px 20px;
    border-radius: 27px;
    color: #1c1c1e;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.2px;
    background: rgba(252, 252, 254, 0.72);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.65);
    animation: rueckgaengig-rein 0.25s ease;
}

.rueckgaengig span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes rueckgaengig-rein {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.rueckgaengig button {
    flex-shrink: 0;
    height: 44px;
    border: 0;
    border-radius: 22px;
    padding: 0 16px;
    background: transparent;
    color: var(--akzent);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
}

.rueckgaengig button:active { background: rgba(0, 122, 255, 0.1); }

/* ------------------------------------------------------------ Papierkorb */

.korb-kopf { padding: 0 16px 12px; }

.korb-summe {
    margin: 0 0 10px;
    color: var(--text2);
    font-size: 14px;
}

.korb-alle {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Randlos wie die Fotowand, aber mit Luft unten für die Leiste. */
.korb-raster { padding-bottom: 8px; }

.korb-mehr {
    display: flex;
    justify-content: center;
    padding: 16px 16px calc(100px + var(--unten));
}

.korb-leiste { padding-left: 20px; gap: 6px; }

.korb-knopf {
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 22px;
    background: rgba(0, 122, 255, 0.12);
    color: var(--akzent);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.korb-knopf.gefahr {
    background: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
}

.korb-knopf:disabled { opacity: 0.4; }

/* -------------------------------------------------------- Überrasch mich */

/* Schwarz auch UNTER der Schau, nicht nur in ihr: Den Streifen unter
   der Statusleiste malt iOS 26 selbst, als Glas über allem – und es
   tönt ihn nach der Seitenfläche, nicht nach unserer Schicht. Bei
   heller Seitenfläche wurde oben daraus ein grauer Verlauf. Das
   Vollbild macht es genauso (body.gesperrt). */
html.dia-offen,
html.dia-offen body {
    overflow: hidden;
    background: #000000;
}

.dia {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #000;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.dia.ruhig { cursor: none; }

.dia-buehne {
    position: absolute;
    inset: 0;
}

/* Die Überblendung: nichts als Deckkraft. Kein Zoom, kein Schieben. */
.dia-folie {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dia-folie.da { opacity: 1; }

.dia-folie img,
.dia-folie video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

.dia-info {
    position: absolute;
    left: calc(20px + env(safe-area-inset-left, 0px));
    right: 20px;
    bottom: calc(22px + var(--unten));
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 0, 0, 0.35);
    opacity: 0.9;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.dia-hinweis {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.dia-steuer {
    position: absolute;
    /* Unter den Glasverlauf, den iOS 26 über den oberen Rand legt –
       wie beim Vollbild. Darin verschwammen die Knöpfe im Schwarz. */
    top: max(calc(12px + env(safe-area-inset-top, 0px)), var(--glasende));
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
    transition: opacity 0.35s ease;
}

.dia-rechts {
    display: flex;
    gap: 10px;
}

.dia.ruhig .dia-steuer {
    opacity: 0;
    pointer-events: none;
}

/* Auf schmalen Telefonen haben fünf Dinge im Kopf der Mediathek
   sonst keinen Platz: Der Titel gibt zuerst nach. */
.kopf-oben h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .kopf-oben { gap: 8px; }
    .glas-pille { padding: 0 14px; }
}

/* ------------------------------------------------------------ ⋯-Menü */

.menue-schicht {
    position: fixed;
    inset: 0;
    /* Über der Diashow (200) – dort öffnet sich das Musikmenü. */
    z-index: 250;
}

.menue {
    position: fixed;
    min-width: 220px;
    padding: 6px;
    border-radius: 20px;
    background: rgba(252, 252, 254, 0.78);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.25),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.65);
    transform-origin: top right;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.menue-schicht.da .menue {
    transform: scale(1);
    opacity: 1;
}

.menue-zeile {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px 11px 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #1c1c1e;
    font: inherit;
    font-size: 16px;
    text-align: left;
}

.menue-zeile:active { background: rgba(0, 0, 0, 0.07); }

.menue-zeile + .menue-zeile { box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.1); }

.menue-zeile svg { width: 21px; height: 21px; }

/* Auch die festen Leisten der Seite ausblenden, solange die Schau
   läuft: iOS nimmt die Farbe für den Statusleisten-Streifen auch von
   festgenagelten Elementen am oberen Rand – und der Kopf der Mediathek
   ist helles Glas. */
html.dia-offen .kopf-glas,
html.dia-offen .reiter,
html.dia-offen .spalte { visibility: hidden; }

.personen-weitere {
    display: block;
    margin: 18px auto calc(110px + var(--unten));
}

/* Welcher Sender läuft – klein unten rechts, wie ein Abspann. */
.dia-quelle {
    position: absolute;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(22px + var(--unten));
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.dia.ruhig .dia-quelle { opacity: 0; }

.dia-steuer .glas-rund.an { color: var(--akzent); }


/* Löschen in der Zufallsschau: klein, unten rechts, mit der übrigen
   Bedienung ein- und ausgeblendet. Scharf gestellt wird er rot. */
.dia-loeschen {
    position: absolute;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + var(--unten));
    height: 38px;
    min-width: 38px;
    padding: 0 9px;
    border: 0;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(40, 40, 44, 0.45);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.35s ease, background 0.2s ease;
}

.dia-loeschen svg { width: 20px; height: 20px; }
.dia-loeschen span:empty { display: none; }
.dia-loeschen.scharf { background: rgba(255, 59, 48, 0.92); color: #fff; padding: 0 14px 0 11px; }
.dia.ruhig .dia-loeschen:not(.scharf) { opacity: 0; pointer-events: none; }

.dia-info { right: 80px; }

.dia-meldung {
    position: absolute;
    left: 50%;
    bottom: calc(70px + var(--unten));
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 5px 5px 18px;
    border-radius: 24px;
    background: rgba(40, 40, 44, 0.8);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    min-height: 40px;
}

.dia-meldung:not(:has(button)) { padding-right: 18px; }

.dia-meldung button {
    border: 0;
    border-radius: 18px;
    padding: 8px 14px;
    background: transparent;
    color: #64aaff;
    font: inherit;
    font-weight: 600;
}

/* ------------------------------------------------ Person aufteilen */

body.gesperrt-teilen { overflow: hidden; }

.teilen {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

.teilen-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(calc(8px + var(--oben)), var(--glasende)) 16px 8px;
    border-bottom: 0.5px solid var(--line);
}

.teilen-kopf b { font-size: 17px; }
.teilen-kopf .text-knopf { padding: 0; }
.teilen-kopf .text-knopf.fett { font-weight: 600; }
.teilen-kopf .text-knopf:disabled { opacity: 0.35; }

.teilen-koerper {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px calc(40px + var(--unten));
    -webkit-overflow-scrolling: touch;
}

.teilen-hilfe { color: var(--text2); font-size: 14px; margin: 4px 0 16px; }

.teilen-seite {
    background: var(--fill);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 14px;
}

.teilen-seitenkopf {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.teilen-seitenkopf input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    background: var(--bg);
    color: var(--text);
}

.teilen-zahl { color: var(--text2); font-size: 14px; white-space: nowrap; }

.teilen-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    min-height: 72px;
}

.teilen-gesicht {
    border: 0;
    padding: 0;
    background: transparent;
    display: grid;
    gap: 2px;
    justify-items: center;
    color: var(--text2);
    font-size: 11px;
}

.teilen-gesicht img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    background: var(--fill2);
    display: block;
}

.teilen-gesicht.neu img { animation: teilen-rein 0.35s ease; }

@keyframes teilen-rein {
    from { transform: scale(0.6); opacity: 0.3; }
    to { transform: none; opacity: 1; }
}

/* Auf großen Schirmen nebeneinander. */
@media (min-width: 900px) {
    .teilen-koerper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
    .teilen-hilfe, .teilen-koerper > .klein, .teilen-koerper > .meldung { grid-column: 1 / -1; }
    .teilen-seite { margin: 0; }
}

/* ------------------------------------------------------------ Entdecken */

.ent-rand { margin-left: 16px; margin-right: 16px; }
.ent-h2 { font-size: 20px; margin: 22px 16px 10px; letter-spacing: -0.3px; }

.ent-abschnitt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 6px 16px 8px;
}
.ent-abschnitt h2 { margin: 0; font-size: 20px; letter-spacing: -0.3px; }
.ent-abschnitt .text-knopf { font-size: 15px; min-height: 0; padding: 0; }
.ent-in-suche { margin-bottom: 8px; }

.ent-streifen {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 16px 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ent-streifen::-webkit-scrollbar { display: none; }

.ent-erinnerung {
    position: relative;
    flex: 0 0 min(72vw, 300px);
    aspect-ratio: 4 / 5;
    border: 0;
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--fill);
    scroll-snap-align: start;
    text-align: left;
}
.ent-erinnerung img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ent-erinnerung span {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 40px 14px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: #fff;
    display: grid;
}
.ent-erinnerung b { font-size: 19px; letter-spacing: -0.3px; }
.ent-erinnerung small { font-size: 13px; opacity: 0.85; }

.ent-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 18px 16px 0;
}
.ent-karte {
    border: 0;
    border-radius: 20px;
    background: var(--fill);
    color: var(--text);
    padding: 14px;
    height: 116px;
    box-sizing: border-box;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font: inherit;
    min-width: 0;
}
.ent-karte-zeichen { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.ent-karte-zeichen svg { width: 20px; height: 20px; stroke-width: 2; }
.ent-karte-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ent-karte-text b, .ent-karte-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-karte-text b { font-size: 17px; font-weight: 600; }
.ent-karte-text small { font-size: 13px; color: var(--text2); }
.ent-zeilen { padding: 12px 16px calc(110px + var(--unten)); }
.ent-zeile {
    width: 100%; min-height: 52px; border: 0; border-radius: 16px; background: var(--fill); color: var(--text);
    padding: 0 16px; display: flex; align-items: center; gap: 12px; font: inherit; text-align: left;
}
.ent-zeile svg { width: 22px; height: 22px; color: var(--text2); flex-shrink: 0; }
.ent-zeile svg:last-child { width: 16px; height: 16px; opacity: 0.6; }
.ent-zeile-titel { flex: 1; font-size: 17px; }
.ent-zeile-zahl { font-size: 15px; color: var(--text2); }

.ent-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 6px; }
.ent-chip {
    border: 0;
    border-radius: 16px;
    padding: 7px 13px;
    background: var(--fill);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}
.ent-chip.an { background: var(--akzent); color: #fff; }
.ent-chip.still { color: var(--text2); }

.ent-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px; }
.ent-zahlen div { background: var(--fill); border-radius: 14px; padding: 12px; display: grid; }
.ent-zahlen b { font-size: 22px; letter-spacing: -0.5px; }
.ent-zahlen span { color: var(--text2); font-size: 13px; }

.ent-monate {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
    height: 120px;
    padding: 0 16px;
    align-items: end;
}
.ent-monat { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ent-monat i { width: 100%; background: var(--akzent); border-radius: 5px 5px 2px 2px; opacity: 0.85; }
.ent-monat span { font-size: 11px; color: var(--text2); }

.ent-person {
    flex: 0 0 84px;
    border: 0;
    background: transparent;
    color: var(--text);
    display: grid;
    justify-items: center;
    gap: 3px;
    font: inherit;
    padding: 0;
}
.ent-person img, .ent-zufall-rund {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--fill);
    display: grid;
    place-items: center;
    color: var(--akzent);
}
.ent-person b { font-size: 13px; font-weight: 500; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-person small { font-size: 11px; color: var(--text2); }
.ent-leute {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 14px 8px;
    padding: 8px 16px 20px;
}
.klein-leute { padding: 4px 0; }

.ent-karte-flaeche { margin: 10px 16px; border-radius: 16px; overflow: hidden; }
.ent-karte-flaeche .karte-buehne { height: 38dvh; min-height: 220px; }

.ent-reisen { padding: 0 16px calc(110px + var(--unten)); }
.ent-reisen .ent-h2 { margin-left: 0; }
.ent-reise {
    width: 100%;
    border: 0;
    padding: 0;
    margin-bottom: 12px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--fill);
    display: block;
    text-align: left;
}
.ent-reise img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ent-reise-text {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 50px 16px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: #fff;
    display: grid;
    gap: 2px;
}
.ent-reise-text b { font-size: 22px; letter-spacing: -0.4px; }
.ent-reise-text span { font-size: 14px; opacity: 0.9; }
.ent-reise-text small { font-size: 12px; opacity: 0.75; }

.ent-raster { padding-bottom: calc(110px + var(--unten)); }

.ent-palette { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 16px 14px; }
.ent-farbe {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.ent-farbe.an { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--akzent); }
.ent-farbwahl { width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; background: none; }

.ent-mosaik { padding: 8px 16px calc(110px + var(--unten)); }
.ent-mosaik-bild { width: 100%; height: auto; border-radius: 12px; display: block; margin-top: 8px; }

/* Zeitraffer */
.zeitraffer .zr-buehne { position: absolute; inset: 0; overflow: hidden; }
/* Lange, überlappende Blende: Das neue Gesicht wächst aus dem alten
   heraus, statt hart zu springen. Dazu ein Hauch Zoom um die Bildmitte –
   dort sitzt das Gesicht – und ein weicher, dunkler Nachhall des Fotos
   als Hintergrund. Nur Deckkraft und Transform: das rechnet die
   Grafikkarte, auch in Safari auf dem iPhone. */
.zeitraffer { --zr-blende: 560ms; background: #000; }
.zr-folie {
    position: absolute; inset: 0; opacity: 0;
    transform: scale(1.035);
    transition: opacity var(--zr-blende) cubic-bezier(0.45, 0, 0.25, 1),
                transform calc(var(--zr-blende) * 2.2) cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}
.zr-folie.da { opacity: 1; transform: scale(1); }
.zr-folie img { position: absolute; max-width: none; }
.zr-folie img.zr-hinten {
    inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: blur(28px) brightness(0.42) saturate(1.15);
    transform: scale(1.25);
}
.zr-monat.neu { animation: zr-monat 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes zr-monat { from { opacity: 0.35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .zr-folie { transform: none; transition: opacity var(--zr-blende) linear; }
    .zr-monat.neu { animation: none; }
}
.zr-monat {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(28px + var(--unten));
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transform: none !important;
    animation: none !important;
}
.zr-datum { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; line-height: 28px; height: 28px; white-space: nowrap; }
.zr-alter { font-size: 17px; font-weight: 500; line-height: 22px; height: 22px; opacity: 0.85; white-space: nowrap; }
.zr-name { color: #fff; font-weight: 600; align-self: center; margin-right: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* Serien in der Wand */
.kachel.serie-teil { display: none; }
.kachel.serie-teil.offen { display: block; }
.kachel.serie-teil.offen::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
    pointer-events: none;
}
.serie-zahl {
    position: absolute;
    left: 5px;
    top: 5px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px 2px 4px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    z-index: 1;
}
.serie-zahl svg { width: 12px; height: 12px; }
.serie-zahl i { font-style: normal; }
.kachel.serie-titel.offen .serie-zahl { background: var(--akzent); }
#zeitleiste.sehr-dicht .serie-zahl { padding: 1px 3px; left: 2px; top: 2px; }
#zeitleiste.sehr-dicht .serie-zahl svg { display: none; }

/* ------------------------------------------------ Geburtstage & Alter */

.datums-marke span.marke-leute { opacity: 0.9; font-weight: 500; }

.ent-geburtstage {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 16px 14px;
    scrollbar-width: none;
}
.ent-geburtstage::-webkit-scrollbar { display: none; }
.ent-geburtstag {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(86vw, 360px);
    padding: 10px 16px 10px 10px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, #ff9f0a 22%, var(--fill)), color-mix(in srgb, #ff375f 18%, var(--fill)));
    color: var(--text);
    text-align: left;
}
.ent-geburtstag img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--fill2); flex-shrink: 0; }
.ent-geburtstag span { display: grid; min-width: 0; }
.ent-geburtstag b { font-size: 16px; letter-spacing: -0.2px; }
.ent-geburtstag small { font-size: 13px; color: var(--text2); }

/* ------------------------------------------------ Aufräumen: Raster */

.aufr-umschalter { overflow-x: auto; scrollbar-width: none; }
.aufr-umschalter::-webkit-scrollbar { display: none; }
.aufr-umschalter button { white-space: nowrap; }

.aufr-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 3px;
    margin: 0 16px;
}
.aufr-zelle {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    background: var(--kachel);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.aufr-zelle img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.15s, opacity 0.15s; }
.aufr-zelle.gewaehlt img { transform: scale(0.9); opacity: 0.75; border-radius: 6px; }
.aufr-haken {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px #fff, 0 1px 4px rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, 0.15);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aufr-haken svg { width: 16px; height: 16px; stroke-width: 2.6; }
.aufr-zelle.gewaehlt .aufr-haken { background: var(--akzent); color: #fff; }
.aufr-lupe {
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.aufr-lupe svg { width: 15px; height: 15px; }
.aufr-unter {
    position: absolute;
    left: 38px;
    right: 4px;
    bottom: 6px;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aufr-raster + .aufr-leiste .knopf.leise { min-height: 38px; padding: 8px 12px; font-size: 14px; }
.aufr-raster + .aufr-leiste span { flex: 1; }

/* ------------------------------------------------ Teilen: QR-Code */

.qr-kasten {
    width: min(220px, 60vw);
    margin: 0 auto 12px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
}
.qr-kasten svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------ Gäste-Upload */

.gast-kasten {
    display: grid;
    gap: 8px;
    margin: 4px 16px 16px;
    padding: 16px;
    border-radius: 16px;
    background: var(--fill);
}
.gast-kasten b { font-size: 17px; }
.gast-name {
    font: inherit;
    font-size: 16px;
    padding: 10px 12px;
    border: 0.5px solid var(--line);
    border-radius: 10px;
    background: var(--flaeche);
    color: var(--text);
}
.gast-knopf { background: var(--akzent); color: #fff; }
.gast-balken { height: 4px; border-radius: 2px; background: var(--fill2); overflow: hidden; display: none; }
.gast-balken i { display: block; height: 100%; width: 0; background: var(--akzent); transition: width 0.3s; }
.gast-kasten.laeuft .gast-balken { display: block; }
.gast-stand { margin: 0; font-size: 14px; color: var(--text2); }
.gast-stand:empty { display: none; }

/* ------------------------------------------------ Drehen, Profilbild, Ausreißer */

.angaben-extra { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.angaben-extra:empty { display: none; }
.angaben-reihe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.angaben-reihe > span:first-child { font-size: 15px; color: var(--text2); min-width: 64px; }
.angaben-reihe .knopf { min-height: 36px; padding: 6px 14px; }
.knopf.haupt-voll { background: var(--akzent); color: #fff; min-height: 38px; padding: 8px 16px; font-size: 15px; }

.aufr-zelle img[style*="rotate"] { transition: none; }

.profil-wahl, .ausreisser {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 2px;
}
.profil-gesicht {
    border: 0;
    padding: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--kachel);
    cursor: pointer;
}
.profil-gesicht img, .ausreisser-zelle img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Safari rechnet die Zeilenhöhe im scrollenden Raster ohne aspect-ratio –
   die Zellen ragten dann übereinander. Feste Höhe über padding-top. */
.ausreisser { align-content: start; grid-auto-rows: auto; }
.ausreisser-zelle img { position: absolute; inset: 0; }
.profil-gesicht.an { box-shadow: 0 0 0 3px var(--akzent); }

.ausreisser-zelle {
    position: relative;
    height: 0;
    padding-top: 100%;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--kachel);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ausreisser-marke {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: color-mix(in srgb, var(--gefahr) 62%, transparent);
}
.ausreisser-zelle.weg .ausreisser-marke { display: flex; }
.ausreisser-zelle .aufr-lupe { width: 24px; height: 24px; left: 4px; bottom: 4px; }
.ausreisser-zelle .aufr-lupe svg { width: 13px; height: 13px; }


/* ------------------------------------------------ Einzelansicht wie in der Fotos-App */

/* Öffnen, Schließen, nach unten ziehen */
.vollbild.kommt,
.vollbild.geht { background-color: rgba(0, 0, 0, 0); }
.vollbild.kommt .vollbild-oben,
.vollbild.kommt .vollbild-unten,
.vollbild.geht .vollbild-oben,
.vollbild.geht .vollbild-unten,
.vollbild.zieht-runter .vollbild-oben,
.vollbild.zieht-runter .vollbild-unten { opacity: 0; pointer-events: none; }
.vollbild.fliegt .wagen { opacity: 0; }
.vollbild .wagen { transition: opacity 0.2s ease; }
.vollbild.geht:not(.fliegt) .wagen { opacity: 0; transform: scale(0.94) !important; transition: opacity 0.24s ease, transform 0.26s ease; }
.vollbild.kommt:not(.fliegt) .wagen { opacity: 0; }
.vollbild.zieht-runter { transition: none; }
.vollbild.dreht .platz { opacity: 0.45; transition: opacity 0.2s ease; }

.vb-flug {
    position: fixed;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
    will-change: left, top, width, height;
}
.vb-flug img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kachel.fliegt img { visibility: hidden; }

/* Kopf: runde Knöpfe, Datum in der Mitte */
.vollbild-oben .pillen-knopf.allein { width: 48px; height: 48px; border-radius: 24px; }
.vollbild-oben .datums-marke { border-radius: 24px; min-height: 48px; display: flex; flex-direction: column; justify-content: center; padding: 6px 22px; }
.vollbild-oben .datums-marke b { font-size: 15px; }
.vollbild-oben .datums-marke span { font-size: 12px; }
.vb-zusatz {
    position: absolute;
    right: 12px;
    top: calc(100% + 10px);
    display: flex;
    gap: 6px;
}
.vb-zusatz .pillen-knopf[hidden] { display: none; }
.vb-zusatz .pillen-knopf.allein { height: 30px; width: 40px; border-radius: 15px; }
.vb-zusatz .live-knopf { font-size: 11px; }
.vb-zusatz .pillen-knopf svg { width: 18px; height: 18px; }

/* Fuß: Teilen · [Herz Info Bearbeiten] · Papierkorb */
.vb-leiste {
    width: 100%;
    max-width: 560px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.vb-leiste .pillen-knopf.allein { width: 52px; height: 52px; border-radius: 26px; }
.vb-leiste .pille { padding: 4px; border-radius: 26px; }
.vb-leiste .pille .pillen-knopf { width: 58px; }
.vb-platzhalter { width: 52px; flex-shrink: 0; }

/* Filmstreifen */
.vb-streifen {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 46px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}
.vb-streifen::-webkit-scrollbar { display: none; }
.vb-streifen::before,
.vb-streifen::after { content: ""; flex: 0 0 50%; }
.vb-streifen[hidden] { display: none; }
.vb-mini {
    flex: 0 0 30px;
    height: 42px;
    border: 0;
    padding: 0;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    transition: flex-basis 0.3s cubic-bezier(0.22, 0.9, 0.3, 1), margin 0.3s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.vb-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-mini.an { flex-basis: 58px; margin: 0 6px; }

/* Text im Bild */
.vb-text-knopf {
    position: absolute;
    right: 16px;
    top: -58px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 21px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 40, 44, 0.66);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 2px 12px rgba(0, 0, 0, 0.45);
}
.vb-text-knopf[hidden] { display: none; }
.vb-text-knopf svg { width: 22px; height: 22px; }
.bild-text { white-space: pre-wrap; user-select: text; -webkit-user-select: text; max-height: 50vh; overflow-y: auto; font-size: 16px; line-height: 1.45; }

/* ------------------------------------------------ Personenseite wie in der Fotos-App */

.blatt.person-blatt { padding-top: 0; }

.person-held {
    --weg: 0;
    position: relative;
    height: min(64vh, 620px);
    min-height: 320px;
    overflow: hidden;
    background: var(--kachel);
    margin-bottom: 2px;
}
.person-held-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: translate3d(0, calc(var(--weg) * 22%), 0) scale(calc(1.06 - var(--weg) * 0.04));
    transition: opacity 0.6s ease;
    will-change: transform;
}
.person-held.da .person-held-bild { opacity: 1; }
.person-held-verlauf {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 22%,
                rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}
.person-held-text {
    position: absolute;
    left: 20px;
    right: 130px;
    bottom: 22px;
    color: #ffffff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.person-held-name {
    margin: 0;
    font-size: 38px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.person-held-zahl { display: block; margin-top: 6px; font-size: 16px; font-weight: 600; opacity: 0.95; }
.person-held-knoepfe {
    position: absolute;
    right: 16px;
    bottom: 22px;
    display: flex;
    gap: 12px;
}
.person-held-rund {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 25px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 32, 24, 0.42);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease;
}
.person-held-rund:active { transform: scale(0.92); }
.person-held-rund svg { width: 24px; height: 24px; }

/* Schwebende Knöpfe oben – Glas, wie in der Fotos-App */
.person-schwebe {
    position: fixed;
    z-index: 12;
    left: 0;
    right: 0;
    top: 0;
    padding: max(calc(10px + var(--oben)), calc(var(--glasende) - 50px)) 14px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    transition: background-color 0.3s ease;
}
body.breit .person-schwebe { left: var(--spaltenbreite, 0px); }
.person-schwebe > * { pointer-events: auto; }
.person-glas {
    height: 48px;
    border: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(60, 60, 64, 0.38);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.28), 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}
.person-glas:active { transform: scale(0.94); }
.person-glas-rund { width: 48px; border-radius: 24px; }
.person-glas-text { padding: 0 20px; border-radius: 24px; font-size: 17px; font-weight: 600; }
.person-glas svg { width: 24px; height: 24px; }
.person-schwebe.ueber .person-glas { background: color-mix(in srgb, var(--bg) 62%, transparent); color: var(--text); }

/* Mosaik: die schönsten Fotos doppelt so groß */
.person-mosaik .raster { grid-auto-flow: row dense; }
.person-mosaik .kachel.gross { grid-column: span 2; grid-row: span 2; }
/* Monate/Jahre erst beim Rauszoomen – in der Drei-Spalten-Ansicht nicht. */
.person-mosaik .marken { display: none; }
.person-mosaik.dicht .marken { display: block; }
/* In den engen Stufen (und bei nur einer Spalte) keine großen Kacheln. */
.person-mosaik.dicht .kachel.gross,
.person-mosaik.einspaltig .kachel.gross { grid-column: auto; grid-row: auto; }
.person-mosaik .kachel img { transition: opacity 0.35s ease; }
/* Große Kacheln abwechselnd links und rechts – die Lücken füllt "dense". */
.person-mosaik .kachel.gross-links { grid-column: 1 / span 2; }
.person-mosaik .kachel.gross-rechts { grid-column: calc(var(--spalten, 3) - 1) / span 2; }
.person-schwebe .luecke { flex-grow: 1; }

/* ------------------------------------------------ Leiste wie in der Fotos-App */

/* Zwei Formen in einer Leiste: Blättern (Mediathek-Knopf + Jahre ·
   Monate · Alle) und am Ende (Mediathek | Entdecken). Überblendet,
   nicht umgeschaltet – so wirkt der Wechsel weich. */
.reiter .reiter-blaettern,
.reiter .reiter-am-ende {
    transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 0.9, 0.3, 1), filter 0.32s ease;
}
.reiter .reiter-am-ende {
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -34px;
    opacity: 0;
    transform: scale(0.94);
    filter: blur(4px);
    pointer-events: none;
}
.reiter.ende .reiter-blaettern { opacity: 0; transform: scale(0.94); filter: blur(4px); pointer-events: none; }
.reiter.ende .reiter-am-ende { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.reiter-luecke { flex-grow: 0; }
.reiter.ende .reiter-luecke { flex-grow: 1; }

.reiter-paar {
    display: flex;
    gap: 4px;
    padding: 5px;
    border-radius: 34px;
    background: rgba(252, 252, 254, 0.62);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 0.5px rgba(255, 255, 255, 0.65);
}
@media (prefers-color-scheme: dark) {
    .reiter-paar { background: rgba(44, 44, 48, 0.58); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
}
.reiter .reiter-bereich {
    flex-direction: column;
    gap: 2px;
    width: 104px;
    height: 58px;
    border-radius: 29px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.reiter .reiter-bereich svg { width: 26px; height: 26px; }
.reiter .reiter-bereich.an { color: var(--akzent); background: color-mix(in srgb, var(--text) 9%, transparent); }
.mediathek-rund { color: var(--akzent); }

/* Kopf: Titel mit Zeile darunter (Datum beim Blättern, Anzahl am Ende) */
.kopf-titelblock { display: flex; flex-direction: column; min-width: 0; }
.kopf-unter {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.kopf-unter:empty { display: none; }
body.breit .kopf-unter { color: var(--text2); text-shadow: none; font-size: 13px; }

/* Entdecken: Personen als Reihe runder Gesichter */
.ent-personen {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 2px 16px 16px;
    scrollbar-width: none;
}
.ent-personen::-webkit-scrollbar { display: none; }
.ent-personen-eine {
    flex: 0 0 76px;
    border: 0;
    padding: 0;
    background: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.ent-personen-eine img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: var(--fill2); }
.ent-personen-eine span { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-oben .kopf-titelblock { flex: 0 0 auto; max-width: 62%; }
#zeitleiste { transition: opacity 0.16s ease; } #zeitleiste.springt { opacity: 0; }
/* Ausgewählt wie in der Fotos-App: blaues Symbol, blaue Schrift, graue Kapsel. */
.reiter .mediathek-rund { color: var(--akzent); }
.reiter .mediathek-rund svg { stroke-width: 2.1; }
.reiter .reiter-bereich.an { color: var(--akzent); background: color-mix(in srgb, var(--text) 11%, transparent); }
.reiter .reiter-bereich.an svg { stroke-width: 2.1; }
.reiter .reiter-bereich:not(.an) { color: var(--text); }

/* ------------------------------------------------ Flüssiges Glas: die Leiste verwandelt sich */

.reiter .reiter-luecke,
.reiter.ende .reiter-luecke { flex-grow: 0; }
.reiter-platz { flex: 0 0 54px; height: 54px; }

.reiter-koerper {
    position: absolute;
    left: 14px;
    bottom: 0;
    z-index: 1;
    width: 54px;
    height: 54px;
    border-radius: 27px;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: rgba(252, 252, 254, 0.62);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 0.5px rgba(255, 255, 255, 0.65);
    /* Etwas Überschwingen – das macht aus dem Wachsen ein Fließen. */
    transition: width 0.52s cubic-bezier(0.34, 1.28, 0.5, 1), height 0.52s cubic-bezier(0.34, 1.28, 0.5, 1),
        border-radius 0.52s ease, padding 0.52s ease;
}
@media (prefers-color-scheme: dark) {
    .reiter-koerper { background: rgba(44, 44, 48, 0.58); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
}
.reiter.ende .reiter-koerper { width: 224px; height: 66px; border-radius: 33px; padding: 5px; }

.reiter .reiter-koerper .reiter-bereich {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 27px;
    background: transparent;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    transition: width 0.52s cubic-bezier(0.34, 1.28, 0.5, 1), height 0.52s ease, opacity 0.3s ease, color 0.3s ease;
}
.reiter .reiter-koerper .reiter-bereich .bereich-text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}
.reiter .reiter-koerper .bereich-e { width: 0; opacity: 0; pointer-events: none; }
.reiter.ende .reiter-koerper .reiter-bereich { width: 107px; height: 56px; opacity: 1; pointer-events: auto; }
.reiter.ende .reiter-koerper .reiter-bereich .bereich-text { max-height: 16px; opacity: 1; }
.reiter .reiter-koerper .reiter-bereich.an { background: transparent; color: var(--akzent); }
.reiter .reiter-koerper .reiter-bereich:not(.an) { color: var(--text); }
.reiter:not(.ende) .reiter-koerper .bereich-m { color: var(--akzent); }

/* Die Linse: graue Kapsel hinter dem gewählten Bereich. Beim Wechsel
   gleitet sie hinüber, wird dabei größer und glasig – und setzt sich. */
.reiter-linse {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 107px;
    height: 56px;
    border-radius: 28px;
    background: color-mix(in srgb, var(--text) 11%, transparent);
    opacity: 0;
    transform: translateX(0);
    transition: transform 0.42s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.3s ease;
}
.reiter.ende .reiter-linse { opacity: 1; }
.reiter-linse.rechts { transform: translateX(107px); }
.reiter-koerper.gleitet .reiter-linse { animation: linse-gleitet 0.42s ease; }
@keyframes linse-gleitet {
    0%   { scale: 1; }
    40%  { scale: 1.05 1.06;
           box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), inset 0 0 18px rgba(0, 122, 255, 0.35), 0 8px 22px rgba(0, 0, 0, 0.16); }
    100% { scale: 1; }
}

/* Jahre · Monate · Alle ziehen sich in den Glaskörper hinein. */
.reiter .reiter-stufen {
    transform-origin: left center;
    transition: opacity 0.34s ease, transform 0.5s cubic-bezier(0.34, 1.2, 0.5, 1), filter 0.34s ease;
}
.reiter.ende .reiter-stufen {
    opacity: 0;
    transform: translateX(-70px) scale(0.72);
    filter: blur(6px);
    pointer-events: none;
}

/* Personen am großen Bildschirm: feste, kleine Kreise statt fünf
   Spalten über die ganze Breite (30.09.) – so passen alle Benannten
   und die ersten Gruppen ohne Namen auf einen Blick. */
@media (min-width: 700px) {
    .personen-raster:not(.eng) {
        grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
        gap: 16px 10px;
    }
    .personen-raster:not(.eng) .person-bild { width: 84px; }
    .personen-raster:not(.eng) .person-name { font-size: 13px; }
    .personen-raster:not(.eng) .person-anzahl { font-size: 11px; }
    /* Die Benannten 50 % größer – die kennt man, die sucht man. */
    .personen-raster.benannt { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 18px 12px; }
    .personen-raster.benannt .person-bild { width: 126px; }
    .personen-raster.benannt .person-name { font-size: 14px; }
    .personen-raster.benannt .person-anzahl { font-size: 12px; }
}

/* ------------------------------------------------ Wer ist das? */

.person.wer-an .person-bild { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--akzent); }
.person.wer-an .person-name { color: var(--akzent); font-weight: 600; }

.wer-stand { font-size: 15px; color: var(--text2); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }

.wer-koerper { display: flex; flex-direction: column; }
/* Seit 01.10.: kein Scrollen – oben das Foto, unten die feste Leiste. */
.wer .wer-koerper { flex: 1; min-height: 0; overflow: hidden; padding: 10px 16px 6px; }
.wer-buehne {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

/* Der Rahmen schrumpft auf die Bildgröße – so sitzt der Kreis in % genau. */
.wer-rahmen {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--kachel);
    line-height: 0;
}
.wer-foto {
    display: block;
    max-width: 100%;
    max-height: 56vh;
    width: auto;
    height: auto;
}
/* Kreis um das fragliche Gesicht, der Rest leicht abgedunkelt. */
.wer-kreis {
    position: absolute;
    border-radius: 50%;
    border: 3px solid #ffd60a;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.38), 0 0 14px rgba(255, 214, 10, 0.7);
    pointer-events: none;
    transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
}
.wer-kreis[hidden] { display: none; }

.wer-datum { margin: 0; font-size: 14px; color: var(--text2); flex-shrink: 0; }

.wer-unten {
    flex-shrink: 0;
    padding: 10px 12px calc(10px + var(--unten));
    border-top: 0.5px solid var(--line);
    background: var(--bg);
}
.wer-unten[hidden] { display: none; }
.wer-kreise {
    display: grid;
    grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr));
    gap: 6px;
    max-width: 640px;
    margin: 0 auto 10px;
}
.wer-k {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.wer-k .rund {
    width: min(58px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--fill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text2);
    transition: transform 0.12s, box-shadow 0.12s;
}
.wer-k .rund img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wer-k .n { font-size: 11px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wer-k:active .rund { transform: scale(0.92); box-shadow: 0 0 0 3px var(--akzent); }
.wer-k.plus .rund { border: 1.5px dashed var(--text2); background: transparent; }
.wer-k.ign .rund { color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 12%, var(--fill)); }
.wer-k.ign .n { color: var(--gefahr); }

.wer-leiste { display: flex; gap: 10px; width: 100%; max-width: 640px; margin: 0 auto; }
.wer-leiste .knopf { flex: 1; }
.wer-leiste .knopf:disabled { opacity: 0.4; }

.wer-ende { max-width: 480px; margin: 40px auto; text-align: center; }
.wer-ende ul { list-style: none; padding: 0; color: var(--text2); line-height: 1.7; }


/* ------------------------------------------------ Lumio Sync von unterwegs */
.sync-seite { padding-bottom: calc(110px + var(--unten)); }
.sync-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sync-kopf h2 { margin: 0; }
.sync-status { font-size: 13px; font-weight: 600; color: var(--text2); padding: 2px 9px; border-radius: 10px; background: var(--fill2); }
.sync-status.an { color: #fff; background: var(--akzent); }
.sync-lauf .aufr-balken { margin-top: 10px; }
.sync-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.sync-log { margin-top: 10px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text2);
    max-height: 180px; overflow: auto; background: var(--fill); border-radius: 10px; padding: 8px 10px; }
.sync-log div { white-space: pre-wrap; word-break: break-word; }
.sync-zeit { opacity: 0.6; margin-right: 8px; }
.sync-alt { color: var(--gefahr); }

/* Lösch-Rückfrage im Vollbild – wie die Blase in Apple Fotos */
.korb-blase-schicht { position: fixed; inset: 0; z-index: 400; }
.korb-blase {
    position: fixed; width: min(300px, calc(100vw - 24px)); box-sizing: border-box;
    padding: 22px 16px 16px; border-radius: 34px;
    background: color-mix(in srgb, var(--flaeche) 86%, transparent);
    -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
    border: .5px solid var(--line);
    box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
    color: var(--text); font-size: 17px; line-height: 1.3;
    transform-origin: bottom right; transform: scale(.6); opacity: 0;
    transition: transform .22s cubic-bezier(.3,1.3,.5,1), opacity .15s ease;
}
.korb-blase.mitte { left: 50%; top: 50%; right: auto; bottom: auto; translate: -50% -50%; transform-origin: center; }
.korb-blase-schicht.da .korb-blase { transform: none; opacity: 1; }
.korb-blase p { margin: 0 8px 14px; hyphens: auto; -webkit-hyphens: auto; }
.korb-blase p + p { margin-top: -2px; }
.korb-blase-fehler { color: var(--gefahr); font-size: 14px; }
.korb-blase-knopf {
    display: block; width: 100%; margin-top: 8px; padding: 15px 12px; border: 0; border-radius: 999px;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    color: var(--gefahr); font: inherit; font-weight: 500; cursor: pointer;
}
.korb-blase-knopf:active { background: color-mix(in srgb, var(--text) 16%, transparent); }
.korb-blase-knopf:disabled { opacity: .5; }

/* ------------------------------------------------ Vollbild wie Apple Fotos (01.10.)

   Hintergrund folgt dem System: hell auf Weiß, dunkel auf Schwarz,
   auch wenn Antippen die Bedienung ausblendet. Der Grund liegt auf einer eigenen Schicht, damit das
   Herunterziehen (--dunkel) und das Ein-/Ausblenden weiter tragen. */
.vollbild,
.vollbild.kommt,
.vollbild.geht { background: transparent; --vb-grund: var(--bg); }
.vollbild::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--vb-grund);
    opacity: var(--dunkel, 1);
    transition: opacity 0.34s ease, background-color 0.3s ease;
}
.vollbild.kommt::before,
.vollbild.geht::before { opacity: 0; }
.vollbild.zieht-runter::before { transition: none; }
/* Die Fläche unter dem Vollbild hat dieselbe Farbe – sonst scheint
   unten (Home-Leiste) und oben (iOS-Glas) Schwarz durch. */
body.gesperrt,
html:has(body.gesperrt) { background: var(--bg); }

/* Leisten: oben unterhalb des Glasstreifens, unten wie bei Apple */
.vollbild-oben { padding: 0 16px; }
.vollbild-unten { padding: 0 16px; gap: 14px; }
.vb-leiste { max-width: 520px; }
.vb-leiste .pillen-knopf.allein { width: 56px; height: 56px; border-radius: 28px; }
.vb-leiste .pille { padding: 6px 8px; border-radius: 28px; gap: 4px; }
.vb-leiste .pille .pillen-knopf { width: 56px; }
.vb-platzhalter { width: 56px; }
.vollbild-oben .pillen-knopf.allein { width: 50px; height: 50px; border-radius: 25px; }
.vollbild-oben .datums-marke { min-height: 50px; border-radius: 25px; padding: 6px 18px; max-width: calc(100% - 128px); }
.vollbild-oben .datums-marke b { font-size: 16px; font-weight: 600; }
.vollbild-oben .datums-marke span { font-size: 13px; font-weight: 500; opacity: 0.85; }

@media (prefers-color-scheme: light) {
    /* Liquid Glass hell: durchscheinend, Lichtkante oben, weicher Schatten */
    .vollbild .pille,
    .vollbild .pillen-knopf.allein,
    .vollbild .datums-marke,
    .vollbild .vb-text-knopf,
    .vollbild .video-steuer {
        background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.58));
        -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.04);
        backdrop-filter: blur(22px) saturate(190%) brightness(1.04);
        box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.95),
                    inset 0 -0.5px 0.5px rgba(0,0,0,0.05),
                    inset 0 0 0 0.5px rgba(0,0,0,0.07),
                    0 6px 22px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.05);
        color: #000;
    }
    .vollbild .pillen-knopf,
    .vollbild .datums-marke,
    .vollbild .video-zeit { color: #000; }
    .vollbild .pille .pillen-knopf { background: transparent; box-shadow: none; }
    .vollbild .pillen-knopf.gefahr { color: var(--gefahr); }
    .vollbild .pillen-knopf.laut { color: var(--akzent); }
    .vollbild .vb-mini { background: rgba(0, 0, 0, 0.06); }
    .vollbild .video-fortschritt { background: rgba(0, 0, 0, 0.15); }
    .vollbild .video-balken { background: #000; }
    .vollbild .video-schieber::-webkit-slider-runnable-track { background: linear-gradient(to right, #000 var(--stand), rgba(0, 0, 0, 0.18) var(--stand)); }
    .vollbild .video-schieber::-moz-range-track { background: linear-gradient(to right, #000 var(--stand), rgba(0, 0, 0, 0.18) var(--stand)); }
    .vollbild .video-schieber::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
}

/* Leisten tiefer, Symbole wie SF Symbols (01.10., Runde 2) */
/* Als Home-Bildschirm-App endet die Webansicht bei iOS 26 schon rund
   60 Punkt über der Unterkante – darunter malt das System, und nichts
   von uns ist dort sichtbar (mit 100lvh probiert: abgeschnitten). Der
   Abstand zur Home-Leiste ist dann schon da; die Safe Area obendrauf
   wäre doppelt. Das Skript setzt .kurz, wenn es so ist. */
.vollbild-unten { bottom: max(10px, calc(var(--unten) - 8px)); gap: 10px; }
.vollbild.kurz .vollbild-unten { bottom: 10px; }
.vollbild .pillen-knopf svg { width: 26px; height: 26px; stroke-width: 1.55; }
.vollbild-oben .pillen-knopf svg { width: 24px; height: 24px; stroke-width: 1.9; }
.vb-leiste .pille .pillen-knopf { height: 44px; }
.vollbild .pillen-knopf:active { transform: scale(0.92); transition: transform 0.12s ease; }
@media (prefers-color-scheme: dark) {
    .vollbild .pille,
    .vollbild .pillen-knopf.allein,
    .vollbild .datums-marke {
        background: linear-gradient(180deg, rgba(58,58,62,0.62), rgba(36,36,40,0.62));
        box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.18),
                    inset 0 0 0 0.5px rgba(255,255,255,0.12),
                    0 6px 22px rgba(0,0,0,0.45);
    }
}

/* Scrollsperre fürs Vollbild ohne festgenagelten Körper (siehe sperren()) */
html.vb-offen,
html.vb-offen body { overflow: hidden; overscroll-behavior: none; }
.vollbild { touch-action: none; overscroll-behavior: none; }

/* Überschrift überall an derselben Stelle (01.10.)
   Die Startseite (Glaskopf) setzt ihren Titel in eine 44 Punkt hohe,
   mittig ausgerichtete Zeile, die bei max(Safe Area + 6, Glasende)
   beginnt. Die übrigen Seiten fingen 6 Punkt höher an, hatten 14 Punkt
   Innenabstand und einen größeren Titel – der Titel sprang beim
   Wechsel um gut 10 Punkt. Jetzt gilt für alle dieselbe Rechnung. */
body:not(.breit) .blatt:not(.randlos) { padding-top: max(calc(var(--oben) + 6px), var(--glasende)); }
body:not(.breit) .blatt:not(.randlos) > .kopf {
    padding-top: 0;
    min-height: 44px;
    align-items: center;
}
body:not(.breit) .blatt:not(.randlos) > .kopf h1:not(.person-titel) {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.5px;
}
.rueckgaengig.nur-text { padding: 13px 20px; }
.auswahl-muell.auswahl-datum { color: var(--akzent); }
.auswahl-muell.auswahl-datum:disabled { color: #8e8e93; }

/* Datenbank-Updates (nur Admin) */
.mig-zahl { margin-left: 8px; font-size: 13px; font-weight: 600; color: #fff; background: var(--akzent); border-radius: 10px; padding: 2px 8px; vertical-align: middle; }
.mig-zahl:empty { display: none; }
.mig-liste { padding: 0 0 20px; }
.mig-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mig-datei { font-size: 15px; word-break: break-all; }
.mig-status { flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 10px; }
.mig-status.ist-offen { background: color-mix(in srgb, var(--akzent) 14%, transparent); color: var(--akzent); }
.mig-status.ist-ok, .mig-status.ist-markiert { background: color-mix(in srgb, #34c759 16%, transparent); color: #248a3d; }
.mig-status.ist-fehler { background: color-mix(in srgb, var(--gefahr) 14%, transparent); color: var(--gefahr); }
.mig-meldung { color: var(--gefahr); font-size: 13px; white-space: pre-wrap; }
.mig-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; }
.mig-sql { max-height: 55vh; overflow: auto; font: 12px/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; background: var(--fill2, rgba(120,120,128,.12)); padding: 12px; border-radius: 10px; user-select: text; -webkit-user-select: text; }

/* Datenbank-Sicherung (Mehr) */
.sich-stand { font-size: 14px; }
.sich-stand.warnung { color: var(--gefahr); }
.sich-liste { margin: 4px 0 12px; }
.sich-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: .5px solid var(--line); }
.sich-zeile b { display: block; font-size: 14px; font-weight: 600; }
.sich-zeile small { display: block; font-size: 12px; color: var(--text2); }
.sich-zeile .sich-fehler { color: var(--gefahr); }
.sich-zeile .text-knopf { min-height: 36px; padding: 0; font-size: 15px; }

/* Entdecken › Zuletzt hinzugefügt */
.ent-neu { display: flex; gap: 4px; overflow-x: auto; padding: 2px 16px 16px; scrollbar-width: none; }
.ent-neu::-webkit-scrollbar { display: none; }
.ent-neu-bild { flex: 0 0 84px; height: 84px; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: var(--fill2, rgba(120,120,128,.12)); }
.ent-neu-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Menü über dem Knopf (untere Leiste im Vollbild) */
.menue.nach-oben { transform-origin: bottom right; }

/* ------------------------------------------------ Bearbeiten (wie Fotos-App, 01.10.) */
.bearb {
    position: fixed; inset: 0; z-index: 55;
    display: flex; flex-direction: column;
    background: var(--bg);
    padding: max(calc(var(--oben) + 10px), var(--glasende)) 14px max(12px, calc(var(--unten) - 6px));
    touch-action: none; user-select: none; -webkit-user-select: none;
}
.bearb-oben, .bearb-werkzeuge { display: flex; align-items: center; gap: 10px; }
.bearb-werkzeuge { margin-top: 12px; }
.bearb-luecke { flex: 1; }
.bearb-gruppe { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 28px;
    background: color-mix(in srgb, var(--text) 7%, transparent); }
.bearb-rund {
    width: 48px; height: 48px; border-radius: 24px; border: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; color: var(--text);
    background: transparent;
}
.bearb-oben .bearb-rund {
    width: 56px; height: 44px; border-radius: 22px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
}
.bearb-rund.gelb { color: #fff; background: #f5b400 !important; }
.bearb-rund:disabled { opacity: .5; }
.bearb-rund svg { width: 24px; height: 24px; }
.bearb-rund:active { transform: scale(.92); }
.bearb-auto {
    border: 1.5px solid var(--text2); color: var(--text2); background: transparent;
    font: 600 15px/1 inherit; letter-spacing: .04em; padding: 8px 12px; border-radius: 8px;
}
.bearb-auto[hidden], .bearb-text[hidden] { display: none; }
.bearb-text { border: 0; background: color-mix(in srgb, #f5b400 16%, transparent); color: #c98f00; font-size: 13px; font-weight: 700; letter-spacing: .05em; padding: 0 14px; height: 32px; border-radius: 16px; }
.bearb-buehne { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.bearb-laden { color: var(--text2); }
.bearb-flaeche { position: relative; overflow: hidden; }
.bearb:not(.bereit) .bearb-flaeche { visibility: hidden; position: absolute; }
.bearb-leinwand { display: block; width: 100%; height: 100%; }
.bearb-rahmen {
    position: absolute; box-sizing: border-box; cursor: move;
    border: 1.5px solid rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: light) {
    .bearb-rahmen { box-shadow: 0 0 0 9999px rgba(255, 255, 255, .72); border-color: #1c1c1e; }
}
.bearb-linie { position: absolute; background: rgba(255, 255, 255, .7); opacity: 0; transition: opacity .15s; pointer-events: none; }
.bearb-rahmen.zieht .bearb-linie { opacity: 1; }
.bearb-linie.v1, .bearb-linie.v2 { top: 0; bottom: 0; width: 1px; }
.bearb-linie.h1, .bearb-linie.h2 { left: 0; right: 0; height: 1px; }
.bearb-linie.v1 { left: 33.33%; } .bearb-linie.v2 { left: 66.66%; }
.bearb-linie.h1 { top: 33.33%; } .bearb-linie.h2 { top: 66.66%; }
.bearb-griff { position: absolute; width: 34px; height: 34px; margin: -17px; z-index: 1; }
.bearb-griff::after { content: ""; position: absolute; background: currentColor; color: #fff; }
@media (prefers-color-scheme: light) { .bearb-griff::after { color: #1c1c1e; } }
.g-nw { left: 0; top: 0; cursor: nwse-resize; } .g-ne { right: 0; top: 0; cursor: nesw-resize; }
.g-sw { left: 0; bottom: 0; cursor: nesw-resize; } .g-se { right: 0; bottom: 0; cursor: nwse-resize; }
.g-n { left: 50%; top: 0; cursor: ns-resize; } .g-s { left: 50%; bottom: 0; cursor: ns-resize; }
.g-w { left: 0; top: 50%; cursor: ew-resize; } .g-e { right: 0; top: 50%; cursor: ew-resize; }
/* Ecken als Winkel, Kanten als kurzer Strich – wie bei Apple */
.g-nw::after, .g-ne::after, .g-sw::after, .g-se::after { width: 22px; height: 22px; background: none;
    border: 0 solid currentColor; }
.g-nw::after { left: 15px; top: 15px; border-left-width: 4px; border-top-width: 4px; }
.g-ne::after { right: 15px; top: 15px; border-right-width: 4px; border-top-width: 4px; }
.g-sw::after { left: 15px; bottom: 15px; border-left-width: 4px; border-bottom-width: 4px; }
.g-se::after { right: 15px; bottom: 15px; border-right-width: 4px; border-bottom-width: 4px; }
.g-n::after, .g-s::after { width: 22px; height: 4px; left: 6px; }
.g-n::after { top: 15px; } .g-s::after { bottom: 15px; }
.g-w::after, .g-e::after { width: 4px; height: 22px; top: 6px; }
.g-w::after { left: 15px; } .g-e::after { right: 15px; }
.bearb-rahmen.fest .g-n, .bearb-rahmen.fest .g-s, .bearb-rahmen.fest .g-w, .bearb-rahmen.fest .g-e { display: none; }
.bearb-unten { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; }
.bearb-winkel { border: 0; background: transparent; color: var(--text2); font: 600 14px/1.2 inherit; min-height: 28px;
    font-variant-numeric: tabular-nums; }
.bearb-winkel.an { color: #f5b400; }
.bearb-lineal { position: relative; width: 100%; max-width: 520px; height: 40px; overflow: hidden; cursor: ew-resize;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.bearb-skala { position: absolute; left: 50%; top: 8px; display: flex; align-items: flex-end; height: 24px; }
.bearb-skala i { flex: 0 0 9px; height: 10px; position: relative; }
.bearb-skala i::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1.5px; height: 100%;
    background: color-mix(in srgb, var(--text) 35%, transparent); border-radius: 1px; }
.bearb-skala i.mittel { height: 16px; }
.bearb-skala i.lang { height: 22px; }
.bearb-skala i.mittel::before, .bearb-skala i.lang::before { background: color-mix(in srgb, var(--text) 65%, transparent); }
.bearb-marke { position: absolute; left: 50%; top: 4px; width: 2px; height: 30px; margin-left: -1px; background: #f5b400; border-radius: 1px; }
.bearb-hilfe { margin: 2px 0 0; font-size: 12px; color: var(--text3, var(--text2)); }
.bearb.rechnet { pointer-events: none; }
.bearb.rechnet .bearb-flaeche { opacity: .6; transition: opacity .2s; }

/* ---- Speicher-Analyse (02.10.2026) ---- */
/* Sechs Reiter passen auf dem Telefon nicht nebeneinander: waagerecht wischen. */
.aufr-umschalter { overflow-x: auto; scrollbar-width: none; }
.aufr-umschalter::-webkit-scrollbar { display: none; }
.aufr-umschalter button { flex: 1 0 auto; padding-left: 10px; padding-right: 10px; white-space: nowrap; }

.sp-karte h2 { margin-bottom: 10px; }
.sp-stapel { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--fill2); margin: 4px 0 12px; }
.sp-stapel i { display: block; height: 100%; }
.sp-f1 { background: #5e5ce6; }
.sp-f2 { background: var(--akzent); }
.sp-f3 { background: #64d2ff; }
.sp-f4 { background: #8e8e93; }
.sp-f5 { background: var(--gefahr); }
.sp-legende { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.sp-legende li { display: flex; align-items: center; gap: 8px; }
.sp-legende b { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.sp-tabelle { display: grid; gap: 7px; }
.sp-zeile { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; grid-template-areas: "name balken wert" "name neben neben"; column-gap: 10px; align-items: center; font-size: 14px; }
.sp-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-balken { grid-area: balken; height: 8px; border-radius: 4px; background: var(--fill2); overflow: hidden; }
.sp-balken i { display: block; height: 100%; background: var(--akzent); border-radius: 4px; }
.sp-wert { grid-area: wert; font-variant-numeric: tabular-nums; text-align: right; min-width: 62px; }
.sp-neben { grid-area: neben; font-size: 12px; color: var(--text2); }

.sp-posten { display: grid; gap: 14px; margin-top: 10px; }
.sp-posten-zeile { padding-top: 12px; border-top: 0.5px solid var(--line-fein); }
.sp-posten-zeile:first-child { padding-top: 0; border-top: 0; }
.sp-posten-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sp-posten-wert { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-posten-zeile .klein { margin: 4px 0 8px; }
.sp-posten-zeile .knopf { min-height: 34px; padding: 6px 14px; font-size: 14px; }

/* ---- Einstellungen (02.10.2026) – aufgebaut wie die Einstellungen bei Apple ---- */
:root {
    --einst-grund: #f2f2f7;
    --einst-zelle: #ffffff;
    --einst-linie: rgba(60, 60, 67, 0.22);
    --einst-text2: #6e6e73;
    --einst-pfeil: #c4c4c7;
    --einst-rot: #d70015;
}
@media (prefers-color-scheme: dark) {
    :root {
        --einst-grund: #000000;
        --einst-zelle: #1c1c1e;
        --einst-linie: rgba(84, 84, 88, 0.6);
        --einst-text2: rgba(235, 235, 245, 0.6);
        --einst-pfeil: rgba(235, 235, 245, 0.3);
        --einst-rot: #ff453a;
    }
}
@media (prefers-color-scheme: dark) { .einst-profil-kreis { background: #48484a; color: #f2f2f7; } }
body.einst-voll { background: var(--einst-grund); }
.blatt.einst {
    background: var(--einst-grund);
    min-height: 100vh;
    box-sizing: border-box;
    padding: calc(var(--oben) + 8px) 16px calc(40px + var(--unten));
}
body.breit.einst-voll .blatt.einst { padding: 0; }
.blatt.einst { max-width: none; margin: 0; width: auto; }
.blatt.einst:has(.einst-geteilt) { padding: 0; }

.einst-oben { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.einst-fertig, .einst-zurueck {
    background: none; border: 0; font: inherit; cursor: pointer;
    color: var(--akzent); font-size: 17px; padding: 10px 4px;
}
.einst-fertig { font-weight: 600; }
.einst-zurueck { display: flex; align-items: center; gap: 2px; padding-left: 0; }
.einst-zurueck-pfeil { display: flex; }
.einst-zurueck-pfeil svg { width: 22px; height: 22px; }
.einst-titel { margin: 2px 4px 14px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.4px; }

.einst-suche {
    display: flex; align-items: center; gap: 6px; height: 36px; box-sizing: border-box;
    background: var(--fill2); border-radius: 10px; padding: 0 8px; margin-bottom: 22px;
}
.einst-suche-lupe { display: flex; color: var(--einst-text2); }
.einst-suche-lupe svg { width: 17px; height: 17px; }
.einst-suche-feld { border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--text); flex: 1; min-width: 0; outline: none; }

.einst-profil {
    display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box;
    background: var(--einst-zelle); border: 0; border-radius: 12px; padding: 12px 16px; margin-bottom: 26px;
    font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 80px;
}
.einst-profil-kreis {
    width: 58px; height: 58px; border-radius: 50%; background: #d1d1d6; color: #3a3a3c; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600;
}
.einst-profil-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.einst-profil-name { font-size: 20px; font-weight: 600; }
.einst-profil-unter { font-size: 14px; color: var(--einst-text2); }
.einst-profil.an { box-shadow: 0 0 0 2px var(--akzent) inset; }

.einst-gruppe { margin: 0 0 26px; }
.einst-gruppe[hidden], .einst-zeile[hidden], .einst-profil[hidden] { display: none; }
.einst-gruppe-titel { font-size: 13px; color: var(--einst-text2); text-transform: uppercase; letter-spacing: 0.2px; margin: 0 16px 7px; }
.einst-gruppe-liste { background: var(--einst-zelle); border-radius: 12px; overflow: hidden; }
.einst-gruppe-fuss { font-size: 13px; line-height: 1.35; color: var(--einst-text2); margin: 8px 16px 0; }
.einst-leer { margin: 0; padding: 14px 16px; font-size: 15px; color: var(--einst-text2); }

.einst-zeile {
    display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box;
    padding: 0 0 0 16px; min-height: 48px; background: none; border: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.einst-zeile.ruhig { cursor: default; }
.einst-zeile:not(.ruhig):active { background: var(--fill2); }
.einst-zeile-text {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; align-self: stretch;
    padding-right: 16px; border-bottom: 0.5px solid var(--einst-linie);
}
.einst-zeile:last-child .einst-zeile-text { border-bottom: 0; }
.einst-zeile-titel { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.einst-zeile-unter, .einst-wert {
    color: var(--einst-text2); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
}
.einst-pfeil { display: flex; color: var(--einst-pfeil); flex-shrink: 0; }
.einst-pfeil svg { width: 13px; height: 13px; }
.einst-sym { width: 29px; height: 29px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.einst-sym svg { width: 18px; height: 18px; }
.einst-punkt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.einst-badge {
    background: #ff3b30; color: #fff; font-size: 14px; font-weight: 600; min-width: 22px; height: 22px;
    border-radius: 11px; display: flex; align-items: center; justify-content: center; padding: 0 6px; box-sizing: border-box;
}
.einst-abmelden { width: 100%; min-height: 48px; background: none; border: 0; font: inherit; font-size: 17px; color: var(--einst-rot); cursor: pointer; }

/* Vorhandene Karten (Sicherung, Schlüssel …) auf dieser Seite */
.einst .karte { background: var(--einst-zelle); margin: 0 0 26px; max-width: none; }

/* Speicher & Aufräumen */
.einst-karte { background: var(--einst-zelle); border-radius: 12px; padding: 16px 18px; margin-bottom: 26px; display: flex; flex-direction: column; gap: 12px; }
.einst-beleg-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.einst-beleg-kopf b { font-size: 20px; font-weight: 700; }
.einst-beleg-kopf span { font-size: 14px; color: var(--einst-text2); }
.einst-beleg-balken { display: flex; height: 20px; border-radius: 6px; overflow: hidden; background: var(--fill2); gap: 2px; }
.einst-beleg-balken span { display: block; height: 100%; min-width: 2px; }
.einst-beleg-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.einst-beleg-legende span { display: flex; align-items: center; gap: 6px; }
.einst-beleg-legende i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.einst-empfehlungen { background: var(--einst-zelle); border-radius: 12px; overflow: hidden; }
.einst-empf { padding: 12px 16px 6px; }
.einst-empf + .einst-empf { border-top: 0.5px solid var(--einst-linie); }
.einst-empf-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.einst-empf-kopf b { font-size: 17px; font-weight: 600; }
.einst-empf-kopf span { font-size: 15px; color: var(--einst-text2); white-space: nowrap; }
.einst-empf p { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--einst-text2); }
.einst-empf-knopf { background: none; border: 0; font: inherit; font-size: 15px; color: var(--akzent); padding: 8px 0; min-height: 40px; cursor: pointer; }
.einst-pruef { padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; }
.einst-pruef + .einst-pruef { border-top: 0.5px solid var(--einst-linie); }
.einst-pruef-kopf { display: flex; justify-content: space-between; font-size: 17px; }
.einst-pruef-kopf span:last-child { color: var(--einst-text2); font-size: 15px; }
.einst-pruef-balken { height: 6px; border-radius: 3px; background: var(--fill2); overflow: hidden; }
.einst-pruef-balken i { display: block; height: 100%; background: var(--akzent); border-radius: 3px; }
.einst-pruef-text { font-size: 13px; color: var(--einst-text2); }

/* Geteilt: links die Liste, rechts die Seite (iPad quer, Mac) */
.einst-geteilt { display: grid; grid-template-columns: 375px minmax(0, 1fr); min-height: 100vh; }
.einst-spalte {
    position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box;
    padding: calc(var(--oben) + 12px) 16px 30px; border-right: 0.5px solid var(--einst-linie); background: var(--einst-grund);
}
.einst-spalte .einst-gruppe { margin-bottom: 22px; }
.einst-spalte .einst-gruppe-liste { padding: 4px; }
.einst-spalte .einst-zeile { border-radius: 9px; padding-left: 10px; min-height: 44px; }
.einst-spalte .einst-zeile-text { border-bottom: 0; padding-right: 10px; }
.einst-spalte .einst-pfeil { display: none; }
.einst-spalte .einst-profil { min-height: 68px; padding: 10px 14px; margin-bottom: 22px; }
.einst-spalte .einst-profil-kreis { width: 48px; height: 48px; font-size: 20px; }
.einst-spalte .einst-profil-name { font-size: 18px; }
.einst-spalte .einst-profil-unter { font-size: 13px; }
.einst-zeile.an { background: var(--akzent); color: #fff; }
.einst-zeile.an .einst-wert { color: #fff; }
.einst-zeile.an .einst-sym { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.einst-seite { min-width: 0; }
.einst-geteilt .einst-seite { padding: calc(var(--oben) + 12px) 40px 60px; }
.einst-seitenkopf { text-align: center; font-size: 17px; font-weight: 600; min-height: 40px; line-height: 40px; margin-bottom: 14px; }
.einst-geteilt .einst-innen { max-width: 720px; margin: 0 auto; }
.einst-geteilt .einst-empfehlungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: none; border-radius: 0; overflow: visible; }
.einst-geteilt .einst-empf { background: var(--einst-zelle); border-radius: 12px; border: 0; }
.einst-geteilt .einst-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
/* Eingebettete Seiten (Lumio Sync, Datenbank-Updates): ohne eigenen Zurück-Knopf */
.einst-seite .kopf.mit-zurueck > .icon-knopf { display: none; }
.einst-geteilt .einst-seite .kopf { padding-left: 0; padding-right: 0; }

/* Mac: kompakte Spalte wie die Systemeinstellungen */
body.breit .einst-geteilt { grid-template-columns: 290px minmax(0, 1fr); }
body.breit .einst-spalte { padding: 18px 12px; }
body.breit .einst-spalte .einst-titel { display: none; }
body.breit .einst-spalte .einst-zurueck { font-size: 14px; padding: 6px 8px; margin-bottom: 8px; }
body.breit .einst-spalte .einst-zurueck-pfeil svg { width: 16px; height: 16px; }
body.breit .einst-suche { height: 30px; border-radius: 8px; margin: 0 4px 14px; }
body.breit .einst-suche-feld { font-size: 14px; }
body.breit .einst-suche-lupe svg { width: 14px; height: 14px; }
body.breit .einst-spalte .einst-profil { background: none; min-height: 0; padding: 8px; margin-bottom: 8px; gap: 10px; border-radius: 8px; }
body.breit .einst-spalte .einst-profil-kreis { width: 38px; height: 38px; font-size: 16px; }
body.breit .einst-spalte .einst-profil-name { font-size: 14px; }
body.breit .einst-spalte .einst-profil-unter { font-size: 12px; }
body.breit .einst-spalte .einst-gruppe { margin: 0; }
body.breit .einst-spalte .einst-gruppe-titel { text-transform: none; font-size: 11px; font-weight: 600; margin: 12px 10px 4px; }
body.breit .einst-spalte .einst-gruppe-liste { background: none; padding: 0; }
body.breit .einst-spalte .einst-zeile { min-height: 32px; gap: 10px; padding-left: 8px; border-radius: 7px; }
body.breit .einst-spalte .einst-zeile:not(.an):hover { background: var(--fill2); }
body.breit .einst-spalte .einst-zeile-titel, body.breit .einst-spalte .einst-wert { font-size: 14px; }
body.breit .einst-spalte .einst-sym { width: 22px; height: 22px; border-radius: 6px; }
body.breit .einst-spalte .einst-sym svg { width: 14px; height: 14px; }
body.breit .einst-spalte .einst-badge { font-size: 11px; min-width: 18px; height: 18px; }
body.breit .einst-spalte .einst-abmelden { text-align: left; padding-left: 10px; min-height: 32px; font-size: 14px; margin-top: 16px; }
body.breit .einst-geteilt .einst-seite { background: var(--einst-zelle); padding: 0; }
body.breit .einst-seitenkopf { text-align: left; padding: 0 28px; min-height: 52px; line-height: 52px; border-bottom: 1px solid var(--einst-linie); font-size: 15px; margin: 0; }
body.breit .einst-geteilt .einst-innen { padding: 28px 28px 40px; max-width: 760px; box-sizing: content-box; }
body.breit .einst-seite .einst-gruppe-liste,
body.breit .einst-seite .einst-karte,
body.breit .einst-seite .einst-empf,
body.breit .einst-seite .karte { background: var(--einst-grund); }
body.breit .einst-seite .einst-gruppe-titel { text-transform: none; font-size: 13px; font-weight: 600; color: var(--text); margin: 0 4px 8px; }
body.breit .einst-seite .einst-zeile { min-height: 40px; }
body.breit .einst-seite .einst-zeile-titel { font-size: 15px; }
body.breit .einst-geteilt .einst-seite > .kopf, body.breit .einst-geteilt .einst-seite > div:not(.einst-innen):not(.einst-seitenkopf) { padding-left: 28px; padding-right: 28px; }
@media (max-width: 1100px) {
    .einst-geteilt .einst-empfehlungen, .einst-geteilt .einst-zwei { grid-template-columns: minmax(0, 1fr); }
}

/* iPhone quer (02.10.2026): Oben hielt die Bühne 134 px frei (Glasstreifen
   der Home-Bildschirm-App + Zurück-Pille) – bei 390 px Höhe blieb für ein
   Querformat-Video kaum ein Drittel. Quer gibt es keinen Glasstreifen; die
   Bühne nimmt die ganze Fläche, die Pillen liegen darüber und verschwinden
   wie gewohnt nach einem Tipp. */
@media (orientation: landscape) and (max-height: 540px) {
    .vollbild-buehne { padding: 0; }
    .vollbild-oben {
        top: 10px;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }
    .vollbild-unten {
        bottom: calc(8px + var(--unten));
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }
}

/* Quer nur das Bild: kein Filmstreifen, auch nicht nach einem Tipp. */
.vollbild.quer .vb-streifen { display: none; }
.vollbild.quer .vollbild-buehne { padding: 0 !important; }

/* Zeitleiste am rechten Rand der Wand (02.10.2026) */
.zl {
    position: fixed;
    right: 0;
    top: calc(var(--kopfhoehe, 110px) + 10px);
    bottom: calc(var(--unten) + 96px);
    width: 30px;
    z-index: 7;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
body.breit .zl { bottom: 24px; width: 44px; cursor: pointer; }
body.waehlen .zl, body.waehlen .zl-blase { display: none; }
.zl-strich {
    position: absolute;
    right: 5px;
    width: 8px;
    height: 2px;
    margin-top: -1px;
    border-radius: 1px;
    background: var(--text);
    box-shadow: 0 0 1.5px var(--bg);
    opacity: 0.26;
    pointer-events: none;
    transition: width 0.12s ease-out, opacity 0.12s ease-out;
}
.zl-strich.jahr { height: 2.5px; width: 14px; opacity: 0.5; }
.zl-marke {
    position: absolute;
    right: 5px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg);
    white-space: nowrap;
    transform-origin: right center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.12s ease-out, opacity 0.16s ease-out;
}
.zl-blase {
    position: fixed;
    right: 122px;
    z-index: 8;
    transform: translateY(-50%);
    padding: 9px 15px 10px;
    border-radius: 14px;
    background: var(--leiste);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 0 0 0.5px var(--line), 0 8px 28px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    white-space: nowrap;
}
.zl-blase[hidden] { display: none; }
.zl-blase b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.zl-blase span { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
body.breit .zl-blase { right: 140px; }
#zeitleiste { transition: opacity 0.25s ease; }
body.zl-zieht #zeitleiste { opacity: 0.4; }
.zl-tick { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* Entdecken: Gerüst, bis die Antwort da ist (02.10.2026) */
.ent-geruest > * { animation: geruest-puls 1.4s ease-in-out infinite; }
.ent-geruest .ent-neu-bild, .ent-geruest .ent-erinnerung { background: var(--fill2); }
.geruest-kreis { display: block; width: 76px; height: 76px; border-radius: 50%; background: var(--fill2); }
.geruest-zeile { display: block; width: 52px; height: 10px; margin-top: 4px; border-radius: 5px; background: var(--fill2); }
@keyframes geruest-puls { 50% { opacity: 0.55; } }

.zl-blase-text { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.zl-blase-bild { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--fill2); margin-left: -5px; }
.zl-blase-bild[hidden] { display: none; }

/* Nach einem Sprung in der Personenseite zurück an den Anfang */
.zl-zurueck {
    position: fixed;
    left: 50%;
    bottom: calc(var(--unten) + 96px);
    transform: translateX(-50%);
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 10px 14px;
    border: 0;
    border-radius: 22px;
    background: var(--leiste);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 0 0 0.5px var(--line), 0 4px 18px rgba(0, 0, 0, 0.3);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}
.zl-zurueck[hidden] { display: none; }
.zl-zurueck svg { width: 18px; height: 18px; transform: rotate(90deg); color: var(--akzent); }
body.breit .zl-zurueck { bottom: 24px; }
html.dia-offen .bogen-schicht { z-index: 260; }

/* Gleiches Bild mit verschiedenem Datum (03.10.2026) */
.bg-datum { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 159, 10, 0.14); }
.bg-datum.erledigt { background: rgba(52, 199, 89, 0.14); }
.bg-datum-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-datum-knopf { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.bg-datum-knopf span { font-size: 12px; color: var(--text2); }
.bg-datum-knopf.vorschlag { border-color: var(--akzent); }
.bg-datum-knopf.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.bg-datum-knopf.an span { color: rgba(255, 255, 255, 0.85); }
.bg-sammel { margin: 0 0 16px; }
.bg-sammel .knopf { align-self: flex-start; }

/* ------------------------------------------------ Feierabend (03.10.2026) */
.fa { position: fixed; inset: 0; z-index: 210; background: #000; color: #fff; font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif; -webkit-user-select: none; user-select: none; }
.fa-buehne { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.fa button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
.fa button:disabled { opacity: 0.4; cursor: default; }
.fa-grau { color: rgba(235, 235, 245, 0.6); }
.fa-klein-gross { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(235, 235, 245, 0.6); }
.fa-kopf { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.fa-zurueck, .fa-text-knopf { color: #0a84ff !important; font-size: 17px !important; display: flex; align-items: center; gap: 4px; min-height: 44px; }
.fa-zurueck span, .fa-text-knopf span { display: flex; }
.fa-zurueck svg, .fa-text-knopf svg { width: 22px; height: 22px; }
.fa-kopf-mitte { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fa-kopf-mitte b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-kopf-mitte span { font-size: 13px; color: rgba(235, 235, 245, 0.6); }
.fa-kopf-rechts { min-width: 120px; display: flex; justify-content: flex-end; }
.fa-balken { height: 4px; border-radius: 2px; background: #1c1c1e; overflow: hidden; flex-shrink: 0; }
.fa-balken i { display: block; height: 100%; transition: width 0.3s ease; }

.fa-start { max-width: 1100px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.fa-start-oben { display: flex; }
.fa-start-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fa-start-titel { display: flex; flex-direction: column; gap: 6px; }
.fa-start-titel h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.fa-zaehler { display: flex; align-items: center; gap: 14px; background: #1c1c1e; border-radius: 18px; padding: 12px 18px; }
.fa-zaehler b { display: block; font-size: 16px; }
.fa-zaehler span { font-size: 13px; color: rgba(235, 235, 245, 0.6); }
.fa-ring { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.fa-ring i { width: 36px; height: 36px; border-radius: 50%; background: #1c1c1e; }
.fa-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.fa-karte { background: #1c1c1e !important; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; text-align: left; min-height: 260px; }
.fa-karte.fa-geruest { animation: geruest-puls 1.4s ease-in-out infinite; }
.fa-karte-bilder { height: 160px; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; position: relative; }
.fa-karte-bild { background: #2c2c2e; overflow: hidden; }
.fa-karte-bild.gross { grid-row: 1 / 3; }
.fa-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-marke { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 13px; font-weight: 600; }
.fa-karte-text { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.fa-karte-text b { font-size: 19px; font-weight: 600; }
.fa-karte-text span { font-size: 14px; color: rgba(235, 235, 245, 0.6); }
.fa-karte-text .fa-balken { margin-top: 6px; }
.fa-karte.erledigt { opacity: 0.55; }
.fa-karte.erledigt .fa-karte-bild img { filter: grayscale(1); }
.fa-karte-haken { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: #30d158; color: #000; display: grid; place-items: center; }
.fa-karte-haken svg { width: 30px; height: 30px; stroke-width: 2.8; }
.fa-fuss { font-size: 14px; margin: 0; }
.fa-mehr-leiste .fa-knopf { min-width: 280px; }
.fa-zehn { display: flex; flex-direction: column; gap: 8px; }
.fa-zehn-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 190px; gap: 10px; align-items: center; background: #1c1c1e; border-radius: 16px; padding: 8px; }
.fa-zehn-bild { position: relative; height: 112px; border-radius: 10px; overflow: hidden; background: #2c2c2e; }
.fa-zehn-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-zehn-bild.gut { box-shadow: 0 0 0 2px #30d158 inset; }
.fa-zehn-zeile.weg .fa-zehn-bild.kopie { box-shadow: 0 0 0 2px #ff453a inset; }
.fa-zehn-zeile.weg .fa-zehn-bild.kopie img { opacity: 0.45; }
.fa-zehn-zeile.behalten .fa-zehn-bild.kopie { box-shadow: 0 0 0 2px #30d158 inset; }
.fa-zehn-info { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 8px; background: rgba(0, 0, 0, 0.65); font-size: 12px; }
.fa-zehn-wahl { display: flex; gap: 6px; }
.fa-zehn-schalter { flex: 1; min-height: 48px; border-radius: 12px; font-size: 15px !important; font-weight: 700; }
.fa-zehn-zeile.weg .fa-zehn-schalter { background: rgba(255, 69, 58, 0.18) !important; color: #ff6961 !important; }
.fa-zehn-zeile.behalten .fa-zehn-schalter { background: rgba(48, 209, 88, 0.18) !important; color: #30d158 !important; }
.fa-zehn-tausch { width: 48px; min-height: 48px; border-radius: 12px; background: #2c2c2e !important; font-size: 18px !important; }
@media (min-width: 1000px) {
    .fa-zehn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fa-zehn-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px; }
    .fa-zehn-bild { height: 100px; }
    .fa-zehn-wahl { flex-direction: column; }
    .fa-zehn-tausch { width: auto; min-height: 36px; }
}
.fa-zehn-bild.kopie { cursor: pointer; }
.fa-zehn-unten { position: sticky; bottom: 0; background: #000; padding: 10px 0 4px; gap: 16px; }
.fa-zehn-unten .fa-grau { flex: 1; font-size: 13px; }
.fa-zehn-los { min-width: 260px; }
.fa-sorte-leiste { background: #1c1c1e; border-radius: 18px; padding: 16px 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fa-sorte-leiste > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.fa-sorte-leiste b { font-size: 17px; }
.fa-sorte-leiste .fa-grau { font-size: 14px; }
.fa-sorten { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.fa-sorte { background: #1c1c1e !important; border-radius: 22px; padding: 20px !important; display: flex; align-items: center; gap: 18px; min-height: 116px; text-align: left; }
.fa-sorte > svg { width: 18px; height: 18px; opacity: 0.4; flex-shrink: 0; }
.fa-sorte-zeichen { width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.fa-sorte-zeichen svg { width: 30px; height: 30px; stroke-width: 2; }
.fa-sorte-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fa-sorte-text b { font-size: 20px; }
.fa-sorte-text .fa-grau { font-size: 15px; }
.fa-sorte-zahl { font-size: 14px; font-weight: 600; }
.fa-gesamt { background: #1c1c1e; border-radius: 18px; padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.fa-gesamt-kopf { display: flex; flex-direction: column; gap: 3px; }
.fa-gesamt-kopf b { font-size: 20px; }
.fa-gesamt-kopf .fa-grau { font-size: 14px; }
.fa-gesamt-teile { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: rgba(235, 235, 245, 0.75); }
.fa-gesamt-teil { display: flex; align-items: center; gap: 6px; }
.fa-gesamt-teil i { width: 8px; height: 8px; border-radius: 50%; }
.fa-gesamt-teil b { color: #fff; }

.fa-paar { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; transition: transform 0.15s ease; }
.fa-fassung { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.fa-foto { position: relative; flex: 1; min-height: 260px; border-radius: 18px; background: #1c1c1e; overflow: hidden; }
.fa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fa-foto.behalten { box-shadow: 0 0 0 3px #30d158 inset; }
.fa-foto.kopie { box-shadow: 0 0 0 3px #ff453a inset; }
.fa-schild { position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.6); font-size: 14px; font-weight: 600; }
.fa-schild.unten { top: auto; bottom: 14px; font-weight: 400; }
.fa-schild.gut { background: #30d158; color: #000; }
.fa-schild.weg { background: #ff453a; color: #fff; }
.fa-zeile { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; flex-wrap: wrap; }
.fa-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fa-leiste.mitte { justify-content: center; }
.fa-hinweis { flex: 1; text-align: center; font-size: 14px; }
.fa-knopf { min-height: 54px; padding: 0 24px !important; border-radius: 16px; background: #1c1c1e !important; font-size: 17px !important; font-weight: 600; text-align: center; }
.fa-knopf.rot { background: #ff453a !important; font-weight: 700; }
.fa-knopf.orange { background: #ff9f0a !important; color: #000 !important; font-weight: 700; }
.fa-knopf.lila { background: #bf5af2 !important; font-weight: 700; }
.fa-knopf.blau { background: #0a84ff !important; font-weight: 700; }
.fa-knopf.rot-text { color: #ff453a !important; min-width: 160px; font-weight: 700; }
.fa-knopf.gruen-text { color: #30d158 !important; min-width: 160px; font-weight: 700; }
.fa-ausmisten { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: 20px; transition: transform 0.15s ease; }
.fa-einzeln { flex: 0 1 820px; }
.fa-seite { align-self: center; width: 90px; text-align: center; font-weight: 600; }
.fa-seite.rot { color: #ff453a; }
.fa-seite.gruen { color: #30d158; }

.fa-datum { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }
.fa-datum-bild { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.fa-datum-bild h2, .fa-datum-wahl h2 { margin: 0; font-size: 28px; font-weight: 700; }
.fa-datum-wahl { display: flex; flex-direction: column; gap: 14px; }
.fa-datum-wahl p, .fa-datum-bild p { margin: 0; font-size: 16px; line-height: 1.4; }
.fa-datum-karte { border-radius: 18px; background: #1c1c1e !important; padding: 16px 20px !important; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.fa-datum-karte b { font-size: 24px; }
.fa-datum-karte.an { box-shadow: 0 0 0 2px #ff9f0a inset; }
.fa-eigen { cursor: pointer; }
.fa-datum-feld { min-height: 44px; border: 0; border-radius: 10px; background: #2c2c2e; color: #fff; font: inherit; font-size: 20px; font-weight: 600; padding: 0 12px; -webkit-user-select: text; user-select: text; color-scheme: dark; }
.fa-umschalter { display: flex; background: #1c1c1e; border-radius: 12px; padding: 3px; gap: 3px; }
.fa-umschalter button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: none !important; color: rgba(235, 235, 245, 0.7); font: inherit; font-size: 15px; font-weight: 600; }
.fa-umschalter button.an { background: #3a3a3c !important; color: #fff; }
.fa-luft { flex: 1; }
.fa-hinweis-kasten { border-radius: 14px; background: rgba(255, 159, 10, 0.14); padding: 14px 16px; font-size: 15px; line-height: 1.4; }
.fa-streifen { display: flex; gap: 6px; overflow-x: auto; flex-shrink: 0; }
.fa-mini { flex: 0 0 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #1c1c1e; opacity: 0.7; }
.fa-mini.an { opacity: 1; box-shadow: 0 0 0 2px #ff9f0a inset; }
.fa-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fa-gesichter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fa-gesicht { aspect-ratio: 1; border-radius: 50% !important; overflow: hidden; background: #1c1c1e !important; }
.fa-gesicht img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-gesicht.raus { opacity: 0.3; box-shadow: 0 0 0 3px #ff453a inset; }
.fa-label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.fa-feld { min-height: 54px; border-radius: 14px; border: 0; background: #1c1c1e; color: #fff; font: inherit; font-size: 20px; padding: 0 18px; outline: none; -webkit-user-select: text; user-select: text; }
.fa-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fa-chip { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px !important; border-radius: 26px; background: #1c1c1e !important; font-size: 16px; }
.fa-chip img { width: 36px; height: 36px; border-radius: 18px; object-fit: cover; }
.fa-chip { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fa-chip img, .fa-chip span { pointer-events: none; }
.fa-chip.an { background: #bf5af2 !important; color: #fff; font-weight: 600; }

.fa-fertig { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.fa-fertig h1 { margin: 0; font-size: 34px; }
.fa-haken { width: 92px; height: 92px; border-radius: 50%; background: #30d158; color: #000; display: grid; place-items: center; }
.fa-haken svg { width: 46px; height: 46px; stroke-width: 2.8; }
.fa-zahlen { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.fa-zahl { background: #1c1c1e; border-radius: 18px; padding: 16px 22px; min-width: 160px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.fa-zahl b { font-size: 32px; }
.fa-zahl span { font-size: 15px; color: rgba(235, 235, 245, 0.6); }
.fa-zahl.rot b { color: #ff453a; } .fa-zahl.gruen b { color: #30d158; } .fa-zahl.orange b { color: #ff9f0a; } .fa-zahl.lila b { color: #bf5af2; }
.fa-mitte { text-align: center; margin-top: 40px; }

/* iPhone (04.10., Mockups i1–i7): eine Spalte, Foto oben, Wahl darunter, Knopf unten erreichbar. */
@media (max-width: 760px) {
    .fa-buehne { padding: calc(env(safe-area-inset-top) + 14px) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 10px; }
    .fa-hinweis, .fa-seite, .fa-fuss { display: none; }
    .fa-kopf { gap: 8px; }
    .fa-kopf .fa-zurueck { font-size: 0 !important; }
    .fa-kopf-mitte b { font-size: 15px; }
    .fa-kopf-mitte span { font-size: 12px; }
    .fa-kopf-rechts { min-width: 0; }
    .fa-text-knopf { font-size: 15px !important; }
    .fa-text-knopf svg { display: none; }
    .fa-balken { height: 3px; }
    .fa-knopf { padding: 0 10px !important; font-size: 15px !important; }

    /* Heute Abend: Liste statt Kacheln */
    .fa-start { gap: 14px; }
    .fa-start-titel h1 { font-size: 32px; }
    .fa-start-kopf { flex-direction: column; align-items: stretch; gap: 12px; }
    .fa-zaehler { padding: 10px 14px; border-radius: 16px; }
    .fa-ring { width: 40px; height: 40px; flex-shrink: 0; }
    .fa-ring i { width: 28px; height: 28px; }
    .fa-zaehler b { font-size: 15px; }
    .fa-raster { grid-template-columns: 1fr; gap: 8px; }
    .fa-karte { flex-direction: row; align-items: center; min-height: 68px; border-radius: 16px; padding: 8px 12px 8px 8px !important; overflow: visible; }
    .fa-karte-bilder { width: 52px; height: 52px; flex-shrink: 0; display: block; position: relative; }
    .fa-karte-bild { display: none; }
    .fa-karte-bild.gross { display: block; width: 52px; height: 52px; border-radius: 10px; }
    .fa-marke { left: 64px; top: -2px; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 12px; white-space: nowrap; }
    .fa-karte-haken { width: 30px; height: 30px; }
    .fa-karte-haken svg { width: 18px; height: 18px; }
    .fa-karte-text { flex: 1; min-width: 0; padding: 14px 0 0 12px; gap: 1px; }
    .fa-karte-text b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fa-karte-text span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fa-karte-text .fa-balken { display: none; }
    .fa-karte.fa-geruest { min-height: 68px; }
    .fa-karte { min-width: 0; width: 100%; box-sizing: border-box; }

    /* Doppelte: übereinander */
    .fa-paar { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    .fa-fassung { gap: 4px; }
    .fa-foto { min-height: 0; border-radius: 16px; }
    .fa-schild { left: 10px; top: 10px; font-size: 13px; padding: 4px 10px; }
    .fa-zeile { font-size: 12px; }
    .fa-leiste:not(.mitte) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .fa-leiste .fa-knopf { min-height: 52px; }

    /* Datum klären und Gesichter: eine Spalte, Foto mit fester Höhe */
    .fa-datum { display: flex; flex-direction: column; flex: none; gap: 10px; }
    .fa-datum-bild { gap: 8px; }
    .fa-datum-bild > .fa-foto { flex: none; height: 250px; }
    .fa-datum-bild > .fa-foto:only-child { height: 42vh; }
    .fa-datum-bild > span.fa-grau { display: none; }
    .fa-mini { flex-basis: 44px; height: 44px; }
    .fa-datum-wahl { gap: 8px; }
    .fa-datum-wahl h2 { font-size: 22px; }
    .fa-datum-wahl p { font-size: 13px; line-height: 1.35; }
    .fa-datum-karte { padding: 10px 14px !important; border-radius: 14px; gap: 2px; }
    .fa-datum-karte b { font-size: 18px; }
    .fa-datum-karte .fa-klein-gross { font-size: 11px; }
    .fa-datum-karte .fa-grau { font-size: 12px; }
    .fa-datum-feld { font-size: 16px; min-height: 40px; }
    .fa-umschalter button { min-height: 34px; font-size: 14px; }
    .fa-hinweis-kasten { font-size: 12px; padding: 10px 12px; }
    .fa-datum-wahl .fa-luft { display: none; }
    .fa-datum-wahl > .fa-knopf:last-child { position: sticky; bottom: 0; box-shadow: 0 -12px 16px #000; }
    .fa-datum-wahl > .fa-knopf.orange:disabled { opacity: 1; background: #3d2e12 !important; color: rgba(255, 255, 255, 0.55) !important; }
    .fa-leiste.mitte:has(.rot-text) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .fa-leiste.mitte:has(.rot-text) .fa-knopf { min-height: 56px; }
    .fa-zeile { flex-wrap: nowrap; }
    .fa-zeile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fa-gesichter { gap: 10px; }
    .fa-feld { min-height: 50px; font-size: 18px; }
    .fa-chips { flex-wrap: nowrap; overflow-x: auto; }
    .fa-chip { white-space: nowrap; flex-shrink: 0; font-size: 15px; }

    .fa-sorten { grid-template-columns: 1fr; gap: 8px; }
    .fa-sorte { min-height: 68px; padding: 12px 14px !important; border-radius: 16px; gap: 12px; }
    .fa-sorte-zeichen { width: 42px; height: 42px; border-radius: 12px; }
    .fa-sorte-zeichen svg { width: 22px; height: 22px; }
    .fa-sorte-text b { font-size: 17px; }
    .fa-sorte-text .fa-grau { display: none; }
    .fa-sorte-zahl { font-size: 13px; font-weight: 400; color: rgba(235, 235, 245, 0.6) !important; }
    .fa-sorte-leiste .fa-knopf { width: 100%; }

    .fa-zehn-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .fa-zehn-bild { height: 90px; }
    .fa-zehn-wahl { grid-column: 1 / 3; }
    .fa-zehn-schalter { min-height: 40px; }
    .fa-zehn-tausch { min-height: 40px; }
    .fa-zehn-unten .fa-grau { display: none; }
    .fa-zehn-los { width: 100%; min-width: 0; }

    /* Ausmisten */
    .fa-ausmisten { gap: 0; }
    .fa-einzeln { flex: 1 1 auto; min-height: 0; }
    .fa-knopf.rot-text, .fa-knopf.gruen-text { min-width: 0; }

    /* Fertig */
    .fa-fertig { justify-content: flex-start; padding-top: 40px; gap: 16px; }
    .fa-fertig h1 { font-size: 26px; }
    .fa-haken { width: 80px; height: 80px; }
    .fa-zahlen { width: 100%; flex-wrap: nowrap; gap: 10px; }
    .fa-zahl { flex: 1; min-width: 0; padding: 14px; }
    .fa-zahl b { font-size: 28px; }
    .fa-zahl span { font-size: 13px; }
    .fa-fertig .fa-leiste.mitte { width: 100%; flex-direction: column-reverse; align-items: stretch; margin-top: auto; gap: 10px; }
}

/* Nach einem Zeitleisten-Sprung unsichtbar, bis die Wand an der Zielstelle steht (14.10.). */
#zeitleiste.wand-wartet { opacity: 0; }
#zeitleiste { transition: opacity 0.15s ease; }

/* Feierabend › Nur eine Sorte: Gruppen nach Größe (17.10.) */
.fa-groessen{background:#1c1c1e;border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:10px}
.fa-groessen[hidden]{display:none}
.fa-groessen-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:17px}
.fa-groesse{display:grid;grid-template-columns:84px minmax(0,1fr) 64px 48px;align-items:center;gap:12px;font-size:15px}
.fa-groesse-balken{height:10px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.fa-groesse-balken i{display:block;height:100%;border-radius:5px;background:#bf5af2}
.fa-groesse-zahl,.fa-groesse-anteil{text-align:right;font-variant-numeric:tabular-nums}
.fa-groessen-fuss{margin:4px 0 0;font-size:13px}
@media (max-width:600px){.fa-groessen{padding:16px;border-radius:16px}.fa-groesse{grid-template-columns:70px minmax(0,1fr) 52px 40px;gap:8px;font-size:14px}}
.fa-groessen-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.fa-groessen .fa-knopf:not(.lila){background:rgba(255,255,255,.1) !important}
@media (max-width:600px){.fa-groessen-knoepfe .fa-knopf{flex:1 1 100%}}

/* Personen › Zusammen (18.10.): mehrere Personen auf einem Foto */
.kopf h1 + .text-knopf { margin-left: auto; }
.zus-leiste { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.zus-leiste:empty { display: none; }
.zus-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zus-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border: 0; border-radius: 20px;
    background: var(--fill); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.zus-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--fill); }
.zus-chip b { font-weight: 600; white-space: nowrap; }
.zus-chip .zus-weg svg, .zus-plus svg { width: 16px; height: 16px; }
.zus-chip .zus-weg { color: var(--text2); display: grid; }
.zus-plus { padding-left: 12px; color: var(--akzent); }
.zus-chip.leise { background: transparent; box-shadow: inset 0 0 0 1px var(--fill); }
.zus-chip.leise b { font-weight: 500; }
.zus-oft > .klein { margin-right: 4px; }
.zus-schalter { display: inline-grid; grid-template-columns: 1fr 1fr; align-self: flex-start; padding: 2px; border-radius: 10px; background: var(--fill); }
.zus-schalter button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.zus-schalter button.an { background: var(--akzent); color: #fff; font-weight: 600; }
.zus-wahl { max-height: 50vh; overflow-y: auto; padding-top: 8px; }
.ent-person.zus-an img { box-shadow: 0 0 0 3px var(--akzent); }
.ent-person.zus-an b { color: var(--akzent); font-weight: 700; }