/* ==========================================================================
   Sammlungsseite – Liste und Board (Glowup nach dem Review vom 01.10.2026,
   docs/review_sammlungen_2026-10-01.html).

   Eigene Klassen mit Präfix sl- statt neuer Tailwind-Klassen: Tailwind ist
   vorkompiliert, jede neue Klasse hieße Neubau + Cache-Buster in zehn
   Layouts. Eingebunden aus content/_sammlung_layout.html (?v=… dort
   hochzählen, wenn sich diese Datei ändert).
   ========================================================================== */

/* Variablen am :root – Dialoge, Menü und Hinweis hängen AUSSERHALB von
   .sl-seite am <body> und brauchen sie auch (sonst: weiße Schrift auf
   durchsichtigem Knopf). Präfix --sl- hält sie aus dem Rest der Seite heraus. */
:root {
    --sl-brand: #006C84;
    --sl-brand-tief: #004e60;
    --sl-brand-hell: #6EB0BC;
    --sl-brand-wash: #e3f0f3;
    --sl-tinte: #0f2129;
    --sl-tinte-2: #3b565f;
    --sl-leise: #5f7a83;
    --sl-linie: #dbe5e8;
    --sl-grund: #f4f8f9;
    --sl-radius: 14px;
    --sl-schatten: 0 1px 2px rgba(15, 33, 41, .06), 0 6px 18px rgba(15, 33, 41, .07);
    --sl-schatten-hoch: 0 2px 6px rgba(15, 33, 41, .08), 0 14px 32px rgba(15, 33, 41, .13);
    /* linker Rand = Kante des Titels (Kopf ist max. 80rem breit, 16 px Rand) */
    --sl-rand: max(16px, calc((100% - 80rem) / 2 + 16px));
}
@media (min-width: 640px) {
    :root { --sl-rand: max(24px, calc((100% - 80rem) / 2 + 24px)); }
}
.sl-seite { background: var(--sl-grund); color: var(--sl-tinte); }
/* hidden muss gewinnen – auch gegen display:flex der eigenen Klassen */
.sl-seite [hidden], .sl-dialog [hidden], .sl-menue [hidden], .sl-panel [hidden] { display: none !important; }

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.sl-hero {
    position: relative;
    color: #fff;
    background: var(--sl-hero-bg, linear-gradient(135deg, #0a7d96 0%, #006C84 45%, #004e60 100%));
}
.sl-hero.sl-hell { color: var(--sl-tinte); }
/* Flacher als beim Glowup (Neubewertung 02.10.): der Kopf ist Bühne, aber die
   Inhalte sollen auf dem ersten Bildschirm beginnen. */
.sl-hero-in { position: relative; max-width: 80rem; margin: 0 auto; padding: 14px 16px 22px; }
@media (min-width: 640px) { .sl-hero-in { padding: 16px 24px 26px; } }
/* Motive/Muster sind unruhig: Text steht dann auf einer Milchglas-Fläche */
.sl-hero.sl-motiv .sl-hero-text {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: 16px; padding: 14px 18px 16px; color: var(--sl-tinte);
}
.sl-hero.sl-motiv.sl-dunkel-motiv .sl-hero-text { background: rgba(15, 33, 41, .55); color: #fff; }

.sl-krume {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: inherit; opacity: .82; text-decoration: none;
}
.sl-krume:hover { opacity: 1; text-decoration: underline; }
.sl-kopfzeile { display: flex; gap: 16px 24px; align-items: flex-start; justify-content: space-between; margin-top: 8px; }
.sl-hero-text { min-width: 0; }
.sl-titel {
    margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 700;
    letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere;
}
.sl-beschr { margin: 8px 0 0; font-size: 15px; line-height: 1.55; opacity: .92; max-width: 70ch; white-space: pre-line; }
.sl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 12px; font-size: 13.5px; }
/* Trennpunkt HINTER jedem Eintrag: bricht die Zeile um, bleibt der Punkt am
   Zeilenende statt am Anfang der nächsten Zeile */
.sl-meta > *:not(:last-child):not(.sl-status)::after { content: '·'; margin: 0 8px; opacity: .55; }
.sl-meta > .sl-autor-zeile::after { margin-left: 0; }   /* Abstand kommt dort schon vom gap */
/* kein Punkt vor dem Sichtbarkeits-Schildchen (Spezifität ≥ der Regel oben) */
.sl-meta > *:not(:last-child):not(.sl-status):has(+ .sl-status)::after { content: none; }
.sl-meta > :not(.sl-status) + .sl-status { margin-left: 10px; }
.sl-autor-zeile { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 700; text-decoration: none; }
a.sl-autor-zeile:hover span { text-decoration: underline; }
.sl-ava {
    width: 28px; height: 28px; border-radius: 50%; flex: none; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--sl-brand-tief); font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.sl-hell .sl-ava, .sl-motiv .sl-ava { background: var(--sl-brand); color: #fff; }
.sl-ava img { width: 100%; height: 100%; object-fit: cover; }
.sl-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    background: rgba(255, 255, 255, .18);
}
.sl-status + .sl-status { margin-left: 6px; }
.sl-hell .sl-status, .sl-motiv .sl-status { background: rgba(15, 33, 41, .07); }
.sl-aktionen { display: flex; gap: 8px; flex: none; align-items: center; }
/* Form wie „Teilen" im Profil (.is-knopf): 10 px Rundung, flach – auf der
   farbigen Bühne weiß, auf hellen Hintergründen in der Markenfarbe. */
.sl-knopf-teilen {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
    border-radius: 10px; border: 0; cursor: pointer; font-size: 13.5px; font-weight: 700;
    background: #fff; color: var(--sl-brand-tief);
}
.sl-knopf-teilen:hover { background: #f1f8fa; }
.sl-hell .sl-knopf-teilen, .sl-motiv .sl-knopf-teilen { background: var(--sl-brand); color: #fff; }
.sl-hell .sl-knopf-teilen:hover, .sl-motiv .sl-knopf-teilen:hover { background: var(--sl-brand-tief); }
.sl-knopf-rund {
    width: 38px; height: 38px; border-radius: 10px; border: 0; cursor: pointer; flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
    background: rgba(255, 255, 255, .18); color: inherit;
}
.sl-knopf-rund:hover { background: rgba(255, 255, 255, .3); }
.sl-hell .sl-knopf-rund, .sl-motiv .sl-knopf-rund { background: rgba(15, 33, 41, .07); color: var(--sl-tinte); }
.sl-hell .sl-knopf-rund:hover, .sl-motiv .sl-knopf-rund:hover { background: rgba(15, 33, 41, .13); }
/* Handy: Knöpfe als Symbole oben rechts neben der Brotkrume, Beschreibung auf
   drei Zeilen – der erste Bildschirm soll schon Inhalt zeigen (Befund A7). */
@media (max-width: 639px) {
    .sl-hero-in { padding: 12px 16px 20px; }
    .sl-aktionen { position: absolute; top: 8px; right: 12px; gap: 6px; }
    .sl-krume { min-height: 40px; padding-right: 100px; }
    .sl-kopfzeile { margin-top: 2px; }
    .sl-knopf-teilen, .sl-knopf-rund { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .sl-knopf-teilen-wort { display: none; }
    .sl-beschr { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .sl-meta { margin-top: 12px; font-size: 13.5px; }
    .sl-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
               mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 24px; }
}

/* ── Leiste: Abschnitte + Ansicht (klebt unter der Navigation, 80 px) ──────── */
.sl-leiste {
    position: sticky; top: 80px; z-index: 30;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sl-linie);
}
.sl-leiste-in { max-width: 80rem; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; min-height: 52px; }
@media (min-width: 640px) { .sl-leiste-in { padding: 0 24px; } }
.sl-tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; align-items: center; }
.sl-tabs::-webkit-scrollbar { display: none; }
.sl-tab {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none;
    padding: 15px 0 12px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
    font-size: 14px; font-weight: 700; color: var(--sl-leise); text-decoration: none;
}
.sl-tab:hover { color: var(--sl-tinte); }
.sl-tab.ist-aktiv { color: var(--sl-brand); border-bottom-color: var(--sl-brand); }
.sl-tab-nr {
    width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; background: #eef3f4; color: var(--sl-leise);
}
.sl-tab.ist-aktiv .sl-tab-nr { background: var(--sl-brand-wash); color: var(--sl-brand); }
.sl-tab-neu {
    flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 5px 11px; border-radius: 999px; border: 1.5px dashed #c3d3d8; background: none; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--sl-leise);
}
.sl-tab-neu:hover { color: var(--sl-brand); border-color: var(--sl-brand-hell); }
.sl-ansicht { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #eef3f4; flex: none; margin-left: auto; }
.sl-ansicht a {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px;
    font-size: 13px; font-weight: 700; color: var(--sl-leise); text-decoration: none;
}
.sl-ansicht a:hover { color: var(--sl-tinte); }
.sl-ansicht a.ist-aktiv { background: #fff; color: var(--sl-brand); box-shadow: 0 1px 3px rgba(15, 33, 41, .12); }
@media (max-width: 639px) { .sl-ansicht-wort { display: none; } .sl-ansicht a { padding: 0 9px; } }

/* ── Inhalt (Liste) ─────────────────────────────────────────────────────── */
.sl-inhalt { max-width: 80rem; margin: 0 auto; padding: 26px 16px 40px; }
@media (min-width: 640px) { .sl-inhalt { padding: 32px 24px 48px; } }
.sl-gruppe + .sl-gruppe { margin-top: 38px; }
.sl-gruppe { scroll-margin-top: 150px; }
.sl-gruppe-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 32px; }
.sl-nr {
    width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sl-brand-wash); color: var(--sl-brand); font-size: 14px; font-weight: 700;
}
.sl-gruppe-titel { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--sl-tinte); min-width: 0; overflow-wrap: anywhere; }
.sl-gruppe-titel-leise { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sl-leise); }
button.sl-gruppe-titel { background: none; border: 0; padding: 0; cursor: text; text-align: left; font: inherit; font-size: 20px; font-weight: 700; color: var(--sl-tinte); }
button.sl-gruppe-titel:hover { text-decoration: underline dotted #9db2b9; text-underline-offset: 4px; }
.sl-zahl { font-size: 12.5px; font-weight: 700; color: var(--sl-leise); }
.sl-gruppe-menue { margin-left: 2px; }
.sl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
@media (max-width: 639px) { .sl-raster { grid-template-columns: 1fr; gap: 10px; } }

/* ── Karte (Liste UND Board) ────────────────────────────────────────────── */
.sl-karte {
    position: relative; display: flex; align-items: center; gap: 14px; min-width: 0;
    background: #fff; border-radius: var(--sl-radius); padding: 14px; min-height: 84px;
    box-shadow: var(--sl-schatten); transition: transform .15s ease, box-shadow .15s ease;
}
.sl-karte.sl-hat-link:hover { transform: translateY(-2px); box-shadow: var(--sl-schatten-hoch); }
.sl-karte:focus-within { box-shadow: 0 0 0 3px rgba(0, 108, 132, .35), var(--sl-schatten); }
.sl-symbol {
    position: relative; width: 56px; height: 56px; border-radius: 12px; flex: none; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--sl-farbe, var(--sl-brand)); color: #fff; font-size: 23px;
}
.sl-symbol-wort { font-size: 15px; font-weight: 700; letter-spacing: .03em; }
/* Pinnwand: ihr echter Hintergrund im Symbolfeld, Symbol als kleine Marke */
.sl-symbol.sl-symbol-bild, .sl-symbol.sl-symbol-vorschau { box-shadow: inset 0 0 0 1px rgba(15, 33, 41, .1); }
.sl-symbol.sl-symbol-bild i {
    position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    background: rgba(15, 33, 41, .55); color: #fff;
}
.sl-symbol.sl-symbol-vorschau { background: #e9eff1 center / cover no-repeat; }
.sl-symbol.sl-symbol-vorschau i { display: none; }
.sl-karte-text { flex: 1; min-width: 0; }
.sl-art {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sl-leise);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-karte-titel {
    margin: 2px 0 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--sl-tinte);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.sl-karte-titel a, .sl-karte-titel button { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
/* Ganze Karte anklickbar – ohne verschachtelte Links (Zugänglichkeit) */
.sl-karte-titel a::after, .sl-karte-titel button::after { content: ''; position: absolute; inset: 0; border-radius: var(--sl-radius); z-index: 1; }
.sl-karte-titel a:focus-visible, .sl-karte-titel button:focus-visible { outline: none; }
.sl-karte-beschr {
    margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--sl-tinte-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sl-karte-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; position: relative; z-index: 2; }
.sl-karte-fuss:empty { display: none; }
.sl-autor { font-size: 12.5px; color: var(--sl-leise); text-decoration: none; }
a.sl-autor:hover { color: var(--sl-brand); text-decoration: underline; }
.sl-chip {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    background: #eef3f4; color: #4b6670; text-decoration: none;
}
.sl-chip-warn { background: #fdf2dc; color: #855000; }
a.sl-chip-warn:hover { background: #fbe7bf; }
.sl-chip-gut { background: #e3f4ec; color: #17694a; }

/* Werkzeuge der Besitzerin: eigene Spalte rechts, liegen nie über Text */
.sl-werkzeug {
    position: relative; z-index: 3; flex: none; align-self: stretch;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    margin: -8px -8px -8px -4px; padding: 2px 0;
}
.sl-werkzeug-knopf {
    width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: var(--sl-leise); font-size: 16px;
}
.sl-werkzeug-knopf:hover, .sl-werkzeug-knopf[aria-expanded="true"] { background: #eef3f4; color: var(--sl-tinte); }
.sl-griff { cursor: grab; touch-action: none; }
.sl-griff:active { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
    .sl-werkzeug > * { opacity: 0; transition: opacity .15s; }
    .sl-karte:hover .sl-werkzeug > *, .sl-karte:focus-within .sl-werkzeug > *,
    .sl-notiz:hover .sl-werkzeug > *, .sl-notiz:focus-within .sl-werkzeug > *,
    .sl-werkzeug > [aria-expanded="true"] { opacity: 1; }
}

/* ── Textfeld als Notiz ─────────────────────────────────────────────────── */
.sl-notiz {
    position: relative; background: #fff; border-radius: var(--sl-radius); box-shadow: var(--sl-schatten);
    padding: 16px 20px; min-width: 0;   /* ohne Farbstreifen links (03.10.2026) */
}
.sl-notiz.sl-breit { grid-column: 1 / -1; }
.sl-notiz.sl-mit-werkzeug { padding-right: 52px; }
.sl-notiz > .sl-werkzeug { position: absolute; top: 8px; right: 8px; bottom: 8px; margin: 0; }
.sl-text-clip { position: relative; max-height: 15rem; overflow: hidden; }
.sl-text-clip.ist-gekuerzt::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.sl-text-clip.ist-offen { max-height: none; }
.sl-text-mehr { margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sl-brand); }
.sl-text-mehr:hover { text-decoration: underline; }
.sl-text-aktionen { display: flex; gap: 8px; margin-top: 10px; }

/* Rich-Text (serverseitig bereinigt) – Tailwind-Reset punktuell aufheben */
.sl-richtext { color: #334155; font-size: .95rem; line-height: 1.65; overflow-wrap: anywhere; }
.sl-richtext p { margin: 0 0 .6em; }
.sl-richtext > :last-child { margin-bottom: 0; }
.sl-richtext h1, .sl-richtext h2, .sl-richtext h3 { font-size: 1.15rem; font-weight: 700; color: var(--sl-tinte); margin: .5em 0 .35em; }
.sl-richtext h4 { font-size: 1rem; font-weight: 700; color: var(--sl-tinte); margin: .5em 0 .3em; }
.sl-richtext > :first-child { margin-top: 0; }
.sl-richtext ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 .6em; }
.sl-richtext ol { list-style: decimal; padding-left: 1.4rem; margin: 0 0 .6em; }
.sl-richtext blockquote { border-left: 3px solid #cbd5e1; padding-left: .75rem; color: #64748b; margin: 0 0 .6em; }
.sl-richtext a { color: var(--sl-brand); text-decoration: underline; }
.sl-richtext table { border-collapse: collapse; margin: 4px 0; max-width: 100%; }
.sl-richtext td, .sl-richtext th { border: 1px solid #cbd5e1; padding: 2px 6px; }
.sl-richtext[contenteditable="true"] { outline: none; box-shadow: 0 0 0 2px var(--sl-brand); border-radius: 8px; padding: 8px 10px; margin: -8px -10px; }
.sl-rt-feld { min-height: 7rem; border: 1.5px solid var(--sl-linie); border-radius: 10px; padding: 10px 12px; }
.sl-rt-feld:focus { outline: none; border-color: var(--sl-brand); }
.sl-rt-feld:empty::before { content: attr(data-placeholder); color: #a9b9be; pointer-events: none; }
/* Die schwebende Formatierungsleiste (richtext-toolbar.js) bringt ihr CSS selbst
   mit; sammlung-bearbeiten.js hebt sie nur über die Dialoge (z-index). */

/* ── Neue Karte / leere Ablage (Besitzerin) ──────────────────────────────── */
.sl-neu {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 84px; width: 100%;
    border: 1.5px dashed #cbd9dd; border-radius: var(--sl-radius); background: transparent;
    font: inherit; font-size: 14px; font-weight: 700; color: #7b939a; cursor: pointer;
}
.sl-neu:hover { color: var(--sl-brand); border-color: var(--sl-brand-hell); background: rgba(255, 255, 255, .75); }
.sl-neu-klein { min-height: 44px; font-size: 13px; }
.sl-leer-ablage { grid-column: 1 / -1; padding: 14px; text-align: center; font-size: 13px; color: var(--sl-leise); border: 2px dashed #d3dfe3; border-radius: var(--sl-radius); }
/* Ziehen (SortableJS) */
.sl-geist { opacity: .35; }
.sl-zieht { box-shadow: var(--sl-schatten-hoch) !important; transform: rotate(1.5deg); }

/* ── Erster Moment (leere Sammlung der Besitzerin) ───────────────────────── */
.sl-start { background: #fff; border-radius: 20px; box-shadow: var(--sl-schatten); padding: 28px 24px; text-align: center; }
.sl-start h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--sl-tinte); }
.sl-start p { margin: 8px auto 0; max-width: 52ch; color: var(--sl-tinte-2); line-height: 1.55; }
.sl-start-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 22px; text-align: left; }
.sl-start-weg {
    display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; cursor: pointer;
    border: 1.5px solid var(--sl-linie); background: #fff; font: inherit; text-align: left; color: var(--sl-tinte);
}
.sl-start-weg:hover { border-color: var(--sl-brand-hell); box-shadow: var(--sl-schatten); }
.sl-start-weg .sl-symbol { width: 44px; height: 44px; font-size: 19px; border-radius: 11px; }
.sl-start-weg b { font-size: 15px; }
.sl-start-weg > span:not(.sl-symbol) { font-size: 13px; color: var(--sl-leise); line-height: 1.45; }
.sl-start-tipp { margin-top: 18px; font-size: 13.5px; color: var(--sl-leise); }
.sl-start-tipp button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--sl-brand); cursor: pointer; }
.sl-leer-besuch { padding: 48px 20px; text-align: center; color: var(--sl-leise); background: #fff; border-radius: 20px; box-shadow: var(--sl-schatten); }

/* ── Board ──────────────────────────────────────────────────────────────── */
.sl-board-flaeche {
    min-height: calc(100vh - 133px); padding: 24px 0 48px;
    /* Farbgrund der Sammlung, stark aufgehellt: Stimmung ohne Unruhe. Keine
       background-size/-position hier – die Muster bringen eigene Kachelgrößen
       je Ebene mit, ein Langform-Wert überschriebe sie alle. */
    background: linear-gradient(rgba(244, 248, 249, .84), rgba(244, 248, 249, .84)), var(--sl-board-bg, #f4f8f9);
}
.sl-board-start { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 0 var(--sl-rand) 20px; }
.sl-board-start > .sl-karte, .sl-board-start > .sl-notiz { width: 312px; max-width: 100%; }
.sl-board-start > .sl-notiz.sl-breit { width: min(100%, 640px); }
.sl-board-start-kopf { width: 100%; display: flex; align-items: center; gap: 10px; }
.sl-spalten {
    display: flex; gap: 16px; align-items: flex-start; overflow-x: auto;
    padding: 4px var(--sl-rand) 18px; scroll-snap-type: x proximity; scroll-padding-inline: var(--sl-rand);
}
.sl-spalten:focus-visible { outline: 3px solid rgba(0, 108, 132, .35); outline-offset: -3px; }
.sl-spalte {
    width: 316px; flex: none; scroll-snap-align: start; scroll-margin-top: 150px;
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, .75); border-radius: 18px; padding: 12px;
    box-shadow: 0 1px 2px rgba(15, 33, 41, .05), 0 8px 24px rgba(15, 33, 41, .05);
}
@media (max-width: 639px) { .sl-spalte { width: min(316px, calc(100vw - 56px)); } }
.sl-spalte-kopf { display: flex; align-items: center; gap: 8px; padding: 2px 2px 12px; min-height: 36px; }
.sl-spalte-kopf .sl-nr { width: 26px; height: 26px; font-size: 13px; background: #fff; }
.sl-spalte-kopf .sl-gruppe-titel, .sl-spalte-kopf button.sl-gruppe-titel { font-size: 16px; }
.sl-spalte-kopf .sl-gruppe-menue { margin-left: auto; }
.sl-spalte.sl-spalte-zieht .sl-spalte-kopf { cursor: grab; }
.sl-spalte-liste { display: flex; flex-direction: column; gap: 10px; min-height: 44px; }
.sl-spalte .sl-karte { min-height: 76px; padding: 12px; gap: 12px; }
.sl-spalte .sl-symbol { width: 46px; height: 46px; font-size: 19px; border-radius: 11px; }
.sl-spalte .sl-karte-titel { font-size: 15px; }
.sl-spalte .sl-notiz { padding: 14px 16px; }
.sl-spalte .sl-notiz.sl-mit-werkzeug { padding-right: 48px; }
.sl-spalte > .sl-neu { margin-top: 10px; }
.sl-spalte-neu {
    width: 316px; flex: none; min-height: 120px; border-radius: 18px; cursor: pointer;
    border: 2px dashed rgba(95, 122, 131, .4); background: rgba(255, 255, 255, .35);
    font-size: 14px; font-weight: 700; color: var(--sl-leise);
}
.sl-spalte-neu:hover { color: var(--sl-brand); background: rgba(255, 255, 255, .6); }

/* ── Fußstreifen „Mehr von …" ────────────────────────────────────────────── */
.sl-fuss { max-width: 80rem; margin: 0 auto; padding: 0 16px 56px; }
@media (min-width: 640px) { .sl-fuss { padding: 0 24px 64px; } }
.sl-board-flaeche + .sl-fuss { padding-top: 28px; }
.sl-fuss-box {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
    background: #fff; border-radius: 18px; box-shadow: var(--sl-schatten); padding: 18px 22px;
}
.sl-fuss-autor { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sl-fuss-autor .sl-ava { width: 42px; height: 42px; font-size: 14px; background: var(--sl-brand); color: #fff; }
.sl-fuss-autor small { display: block; font-size: 12.5px; color: var(--sl-leise); }
.sl-fuss-autor b { font-size: 16px; color: var(--sl-tinte); }
.sl-fuss-link { font-size: 14px; font-weight: 700; color: var(--sl-brand); text-decoration: none; white-space: nowrap; }
.sl-fuss-link:hover { text-decoration: underline; }
.sl-fuss-einladung { width: 100%; padding-top: 14px; border-top: 1px solid var(--sl-linie); font-size: 14px; color: var(--sl-tinte-2); }
.sl-fuss-einladung a { color: var(--sl-brand); font-weight: 700; }

/* ── Dialoge, Menü, Hinweis ─────────────────────────────────────────────── */
.sl-dialog {
    position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(15, 33, 41, .5);
}
.sl-dialog[hidden] { display: none; }
.sl-dialog-box {
    width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto;
    background: #fff; border-radius: 20px; box-shadow: 0 24px 64px rgba(15, 33, 41, .3); color: var(--sl-tinte);
}
.sl-dialog-gross { max-width: 640px; display: flex; flex-direction: column; overflow: hidden; }
.sl-dialog-kopf { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 4px; }
.sl-dialog-kopf h2 { margin: 0; font-size: 18px; font-weight: 700; }
.sl-dialog-kopf p { margin: 2px 0 0; font-size: 13px; color: var(--sl-leise); }
.sl-dialog-zu { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; cursor: pointer; color: var(--sl-leise); font-size: 15px; flex: none; }
.sl-dialog-zu:hover { background: #eef3f4; color: var(--sl-tinte); }
.sl-dialog-rumpf { padding: 12px 20px 4px; }
.sl-dialog-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; flex-wrap: wrap; }
.sl-dialog-fuss .sl-klein { margin-right: auto; max-width: 34ch; }
.sl-klein { font-size: 12px; line-height: 1.45; color: var(--sl-leise); }
.sl-klein a { color: inherit; text-decoration: underline; }
.sl-feld {
    width: 100%; border: 1.5px solid var(--sl-linie); border-radius: 10px; padding: 9px 12px;
    font: inherit; font-size: 14px; color: var(--sl-tinte); background: #fff;
}
.sl-feld:focus { outline: none; border-color: var(--sl-brand); }
.sl-feld + .sl-feld { margin-top: 8px; }
.sl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
    border-radius: 10px; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none;
}
.sl-btn-haupt { background: var(--sl-brand); color: #fff; }
.sl-btn-haupt:hover { background: var(--sl-brand-tief); }
.sl-btn-haupt:disabled { background: #a9c3ca; cursor: default; }
.sl-btn-leise { background: none; color: var(--sl-leise); }
.sl-btn-leise:hover { color: var(--sl-tinte); background: #f1f5f6; }
.sl-btn-rand { background: #fff; color: var(--sl-tinte); box-shadow: inset 0 0 0 1.5px var(--sl-linie); }
.sl-btn-rand:hover { box-shadow: inset 0 0 0 1.5px var(--sl-brand-hell); color: var(--sl-brand); }
.sl-btn-gefahr { background: #b42318; color: #fff; }
.sl-btn-gefahr:hover { background: #912018; }

/* Teilen-Fenster: großer QR-Code und Adresse mit Symbol-Knöpfen – Aufbau und
   Klassen (.is-teil, .is-symbol …) aus dem Baustein der Profile
   (static/css/inhaltsseite.css), damit beide Fenster gleich aussehen. */
.sl-teilen-box { max-width: clamp(300px, calc(100dvh - 150px), 540px); }
.sl-teilen-box .sl-dialog-kopf { padding: 18px 20px 0; }
.sl-teilen-box .sl-dialog-kopf > .sl-dialog-zu { top: 12px; right: 12px; }
/* Hintergrund wie beim QR-Fenster der Kacheln */
#sl-teilen.sl-dialog { background: rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (max-width: 767px) {
    /* Handy: schmalere Ränder, damit der QR-Code trotz Mitte groß bleibt */
    #sl-teilen.sl-dialog { padding: 10px; }
    .sl-teilen-box .sl-dialog-kopf { padding: 14px 12px 0; }
    .sl-teilen-box .sl-dialog-rumpf { padding: 12px 12px 14px; }
}
.sl-teilen-box .sl-dialog-rumpf { padding-bottom: 18px; }
.sl-teilen-warn { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; font-size: 13px; line-height: 1.45; }
/* „Link kopiert!" liegt über dem Fenster, nicht darunter */
#toast { z-index: 130; }
.sl-teilen-sicht { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #f4f8f9; font-size: 13.5px; line-height: 1.5; color: var(--sl-tinte-2); }
.sl-teilen-sicht > i { font-size: 18px; color: var(--sl-brand); margin-top: 1px; }
.sl-teilen-sicht b { color: var(--sl-tinte); }
.sl-teilen-sicht button, .sl-teilen-sicht a { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--sl-brand); cursor: pointer; text-decoration: none; }
.sl-teilen-sicht button:hover, .sl-teilen-sicht a:hover { text-decoration: underline; }

/* Hinzufügen-Dialog */
.sl-reiter { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid var(--sl-linie); overflow-x: auto; scrollbar-width: none; flex: none; }
.sl-reiter button {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none;
    padding: 10px 12px 9px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--sl-leise);
}
.sl-reiter button[aria-selected="true"] { color: var(--sl-brand); border-bottom-color: var(--sl-brand); }
/* Feste Höhe: das Fenster springt nicht, wenn Suche oder Filter die Liste kürzen */
#sl-add .sl-dialog-gross { height: min(680px, calc(100dvh - 32px)); }
/* Suche + Filter stehen fest über der Liste (die Liste scrollt darunter) */
.sl-add-werkzeug { flex: none; padding: 12px 20px 10px; border-bottom: 1px solid var(--sl-linie); }
.sl-add-werkzeug .sl-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 8px; }
.sl-add-werkzeug .sl-filter::-webkit-scrollbar { display: none; }
.sl-add-werkzeug .sl-filter button { flex: none; white-space: nowrap; }
.sl-filter button span { opacity: .6; font-weight: 600; margin-left: 2px; }
.sl-add-rumpf { padding: 10px 20px 14px; overflow-y: auto; flex: 1; min-height: 0; }
.sl-auswahl[aria-busy="true"] { opacity: .5; }
.sl-add-mehr { width: 100%; margin-top: 10px; }
/* Was angekreuzt ist, bleibt sichtbar – auch wenn Suche/Filter es aus der Liste nehmen */
.sl-gewaehlt { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 20px 0; border-top: 1px solid var(--sl-linie); max-height: 78px; overflow-y: auto; }
.sl-gewaehlt-wort { font-size: 12px; font-weight: 700; color: var(--sl-leise); }
.sl-gewaehlt-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 10px; border-radius: 999px; border: 0;
    background: var(--sl-brand-wash); color: var(--sl-brand-tief); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    white-space: nowrap;
}
.sl-gewaehlt-chip:hover { background: #cfe5ea; }
.sl-gewaehlt-chip i { font-size: 10px; flex: none; }
.sl-gewaehlt + .sl-dialog-fuss { padding-top: 10px; }
/* Handy: der Platz gehört der Liste – der Sichtbarkeits-Hinweis steht je Eintrag */
@media (max-width: 639px) { #sl-add .sl-dialog-fuss .sl-klein { display: none; } }
.sl-add-suche { position: relative; }
.sl-add-suche i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sl-leise); }
.sl-add-suche .sl-feld { padding-left: 36px; }
.sl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sl-filter button {
    padding: 4px 11px; border-radius: 999px; border: 1.5px solid var(--sl-linie); background: #fff; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--sl-tinte-2);
}
.sl-filter button[aria-pressed="true"] { background: var(--sl-brand); border-color: var(--sl-brand); color: #fff; }
.sl-auswahl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sl-auswahl label {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
    border: 1.5px solid transparent;
}
.sl-auswahl label:hover { background: #f4f8f9; }
.sl-auswahl input { width: 18px; height: 18px; accent-color: var(--sl-brand); flex: none; }
.sl-auswahl input:checked + .sl-symbol + span b { color: var(--sl-brand-tief); }
.sl-auswahl label:has(input:checked) { background: var(--sl-brand-wash); border-color: rgba(0, 108, 132, .25); }
.sl-auswahl .sl-symbol { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
.sl-auswahl label > span:not(.sl-symbol) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sl-auswahl b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-auswahl small { font-size: 12px; color: var(--sl-leise); }
.sl-add-leer { padding: 28px 8px; text-align: center; font-size: 14px; color: var(--sl-leise); line-height: 1.55; }
.sl-add-leer a { color: var(--sl-brand); font-weight: 700; }
.sl-label { display: block; margin: 12px 0 5px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sl-leise); }
.sl-label:first-child { margin-top: 0; }
.sl-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--sl-tinte-2); cursor: pointer; }
.sl-check input { margin-top: 2px; accent-color: var(--sl-brand); }
.sl-datei { width: 100%; font-size: 13px; color: var(--sl-tinte-2); padding: 9px; border: 1.5px dashed var(--sl-linie); border-radius: 10px; }

/* Aussehen-Leiste: schwebt OHNE Abdunklung, damit die Farbe an Kopf und Board
   dahinter sofort zu sehen ist (Live-Vorschau). Am Computer unter dem Kopf
   (--sl-panel-top setzt sammlung-bearbeiten.js), am Handy unten – der Kopf bleibt frei. */
.sl-panel {
    position: fixed; z-index: 110; top: var(--sl-panel-top, 96px); right: max(16px, calc((100vw - 80rem) / 2 + 16px));
    width: 340px; max-width: calc(100vw - 16px); max-height: calc(100dvh - var(--sl-panel-top, 96px) - 16px);
    display: flex; flex-direction: column; background: #fff; border-radius: 18px; color: var(--sl-tinte);
    box-shadow: 0 16px 48px rgba(15, 33, 41, .28), 0 0 0 1px rgba(15, 33, 41, .06);
}
.sl-panel[hidden] { display: none; }
.sl-panel-kopf { display: flex; align-items: center; padding: 12px 10px 2px 18px; }
.sl-panel-kopf h2 { margin: 0; font-size: 16px; font-weight: 700; }
.sl-panel-reiter { padding: 2px 12px 0; gap: 2px; }
.sl-panel-reiter button { padding: 8px 8px 7px; font-size: 13px; }
.sl-panel-rumpf { padding: 14px 18px 4px; overflow-y: auto; }
.sl-farben { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sl-farbe { aspect-ratio: 1; border: 0; border-radius: 12px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(15, 33, 41, .12); }
.sl-farbe:hover { transform: scale(1.06); }
.sl-farbe[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sl-brand); }
.sl-farbe:focus-visible { outline: 3px solid var(--sl-brand-hell); outline-offset: 3px; }
.sl-panel-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 14px 14px; }
@media (max-width: 639px) {
    .sl-panel { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 58dvh; }
    .sl-farben { grid-template-columns: repeat(6, 1fr); }
}

/* Schwebendes Menü (Karten, Abschnitte, Kopf) – hängt am <body>, damit es
   weder von der Board-Scrollfläche noch vom Milchglas abgeschnitten wird */
.sl-menue {
    position: fixed; z-index: 125; min-width: 220px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto;
    padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 12px 40px rgba(15, 33, 41, .22), 0 0 0 1px rgba(15, 33, 41, .06);
}
.sl-menue[hidden] { display: none; }
.sl-menue button, .sl-menue a {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; border: 0;
    background: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--sl-tinte); text-align: left;
    text-decoration: none; white-space: nowrap;
}
.sl-menue button:hover, .sl-menue a:hover, .sl-menue button:focus-visible, .sl-menue a:focus-visible { background: #f1f6f7; outline: none; }
.sl-menue i { width: 18px; text-align: center; color: var(--sl-leise); }
.sl-menue .ist-gefahr, .sl-menue .ist-gefahr i { color: #b42318; }
.sl-menue .ist-gefahr:hover { background: #fdf0ef; }
.sl-menue button:disabled { color: #a9b9be; cursor: default; }
.sl-menue button:disabled i { color: #c5d2d6; }
.sl-menue button:disabled:hover { background: none; }
.sl-menue .ist-aktuell { color: var(--sl-brand); font-weight: 700; cursor: default; }
.sl-menue .ist-aktuell i { color: var(--sl-brand); }
.sl-menue-trenner { height: 1px; margin: 5px 6px; background: var(--sl-linie); }
.sl-menue-label { padding: 8px 12px 3px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-leise); }
.sl-menue-info { padding: 6px 12px 8px; font-size: 12px; color: var(--sl-leise); white-space: normal; max-width: 260px; line-height: 1.45; }

.sl-hinweis {
    position: fixed; left: 50%; bottom: 24px; z-index: 130; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
    display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
    padding: 11px 12px 11px 18px; border-radius: 14px; background: #10252d; color: #fff;
    box-shadow: 0 12px 32px rgba(15, 33, 41, .3); font-size: 14px; transition: opacity .2s, transform .2s;
}
.sl-hinweis.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sl-hinweis.ist-fehler { background: #8f1d14; }
.sl-hinweis button { border: 0; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-weight: 700; padding: 6px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.sl-hinweis button:hover { background: rgba(255, 255, 255, .24); }

@media (prefers-reduced-motion: reduce) {
    .sl-karte, .sl-hinweis { transition: none; }
    .sl-karte.sl-hat-link:hover { transform: none; }
}
@media print {
    .sl-leiste, .sl-aktionen, .sl-werkzeug, .sl-neu, .sl-spalte-neu, .sl-fuss, .sl-tab-neu { display: none !important; }
    .sl-hero { color: var(--sl-tinte); background: none !important; }
    .sl-karte, .sl-notiz { box-shadow: none; border: 1px solid #cbd5e1; break-inside: avoid; }
}