/* ============================================================
   saengerfeste.css  –  Sängerrunde Kraßnitz Vereinschronik
   Ergänzt den bestehenden Stil der Chronik
   ============================================================ */

/* ── Allgemein / Buttons ──────────────────────────────────────*/
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .55em 1.2em;
    border: 1.5px solid transparent;
    border-radius: 2px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.btn--primary   { background: var(--gold, #c89a3c); color: #111; border-color: var(--gold, #c89a3c); }
.btn--primary:hover { filter: brightness(1.12); }
.btn--sekundaer { background: transparent; color: var(--text, #fafaf7); border-color: rgba(200,154,60,.5); }
.btn--sekundaer:hover { border-color: var(--gold, #c89a3c); }
.btn--ghost     { background: transparent; color: var(--text-muted, #aaa); border-color: rgba(255,255,255,.15); }
.btn--ghost:hover { color: var(--text, #fafaf7); border-color: rgba(255,255,255,.3); }
.btn--gefahr    { background: transparent; color: #e05a5a; border-color: rgba(224,90,90,.4); }
.btn--gefahr:hover { background: rgba(224,90,90,.1); }
.btn--klein     { padding: .3em .7em; font-size: .72rem; }

/* ── Laden / Fehler ──────────────────────────────────────────*/
.laden  { padding: 3rem; text-align: center; opacity: .6; font-style: italic; }
.fehler { padding: 2rem; color: #e05a5a; border: 1px solid rgba(224,90,90,.3); margin: 1rem 0; }

/* ── Übersicht Header ─────────────────────────────────────────*/
.sf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(200,154,60,.2);
}
.sf-haupttitel {
    font-family: 'Libre Caslon Text', 'Georgia', serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 .3rem;
    color: var(--text, #fafaf7);
}
.sf-untertitel {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem;
    color: var(--text-muted, #888);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
}

/* ── Karten-Grid ─────────────────────────────────────────────*/
.fest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.fest-karte {
    background: var(--card-bg, rgba(255,255,255,.04));
    border: 1px solid rgba(200,154,60,.15);
    border-radius: 3px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fest-karte:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    border-color: rgba(200,154,60,.4);
}

.fest-karte-bild {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: rgba(0,0,0,.2);
}
.fest-karte-bild img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.fest-karte:hover .fest-karte-bild img { transform: scale(1.04); }

.fest-karte-bild--leer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(200,154,60,.05), rgba(200,154,60,.12));
}
.fest-karte-jahr {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 3rem;
    font-weight: 700;
    color: rgba(200,154,60,.35);
    letter-spacing: .05em;
}

.fest-karte-info {
    padding: 1rem 1.2rem 1.2rem;
}
.fest-karte-datum {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold, #c89a3c);
    margin-bottom: .4rem;
}
.fest-karte-titel {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 .4rem;
    color: var(--text, #fafaf7);
    line-height: 1.3;
}
.fest-karte-ort {
    font-size: .82rem;
    color: var(--text-muted, #aaa);
    margin-bottom: .5rem;
}
.fest-karte-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem;
    color: rgba(200,154,60,.6);
    letter-spacing: .08em;
}

/* ── Formular ────────────────────────────────────────────────*/
.sf-formular {
    background: var(--card-bg, rgba(255,255,255,.03));
    border: 1px solid rgba(200,154,60,.2);
    border-radius: 3px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.sf-formular h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .85rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold, #c89a3c);
    margin: 0 0 1.2rem;
}
.sf-form-zeile {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: .9rem;
}
.sf-form-zeile label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted, #aaa);
}
.sf-form-zeile input,
.sf-form-zeile textarea {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(200,154,60,.2);
    border-radius: 2px;
    padding: .6em .8em;
    color: var(--text, #fafaf7);
    font-size: .9rem;
    font-family: inherit;
    transition: border-color .18s;
    resize: vertical;
}
.sf-form-zeile input:focus,
.sf-form-zeile textarea:focus {
    outline: none;
    border-color: rgba(200,154,60,.6);
}
.sf-form-reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 500px) { .sf-form-reihe { grid-template-columns: 1fr; } }

.sf-form-aktionen {
    display: flex;
    gap: .8rem;
    margin-top: 1rem;
}

/* ── Leer-Zustand ────────────────────────────────────────────*/
.sf-leer {
    text-align: center;
    padding: 4rem 2rem;
    border: 1px dashed rgba(200,154,60,.2);
    border-radius: 3px;
    color: var(--text-muted, #888);
}

/* ── Detailseite ─────────────────────────────────────────────*/
.sf-zurueck { margin-bottom: 1.5rem; }

.sf-detail-kopf {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(200,154,60,.15);
}
.sf-detail-datum {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold, #c89a3c);
    margin-bottom: .5rem;
}
.sf-detail-titel {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.2;
    color: var(--text, #fafaf7);
}
.sf-detail-ort {
    font-size: .9rem;
    color: var(--text-muted, #aaa);
    margin-bottom: 1rem;
}
.sf-detail-beschr {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text, #e8e5df);

    margin-bottom: 1.2rem;
}
.sf-detail-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    letter-spacing: .1em;
    color: rgba(255,255,255,.3);
    margin-bottom: 1rem;
}
.sf-aktionen {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

/* ── Fotos-Bereich ───────────────────────────────────────────*/
.sf-fotos-bereich { margin-top: 2.5rem; }

.sf-fotos-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}
.sf-fotos-kopf .sf-fotos-titel { margin-bottom: 0; }

.sf-fotos-titel {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold, #c89a3c);
    margin-bottom: 1.2rem;
}
.sf-leer-text {
    color: var(--text-muted, #888);
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* ── Bulk-Beschreibungen bearbeiten ──────────────────────────*/
.sf-bulk-edit { margin-bottom: 2rem; }
.sf-bulk-edit-hint {
    font-size: .82rem;
    color: var(--text-muted, #aaa);
    font-style: italic;
    margin-bottom: 1rem;
}
.sf-bulk-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.sf-bulk-edit-item {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.sf-bulk-edit-preview {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(0,0,0,.2);
}
.sf-bulk-edit-preview img { width: 100%; height: 100%; object-fit: cover; }
.sf-bulk-edit-input {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(200,154,60,.2);
    border-radius: 2px;
    padding: .45em .65em;
    color: var(--text, #fafaf7);
    font-size: .82rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .18s;
}
.sf-bulk-edit-input:focus { outline: none; border-color: rgba(200,154,60,.6); }

/* ── Bulk-Upload Staging ─────────────────────────────────────*/
.sf-upload-staging { margin-top: 1rem; }
.sf-upload-anzahl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold, #c89a3c);
    margin-bottom: .8rem;
}
.sf-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}
.sf-upload-item { display: flex; flex-direction: column; gap: .4rem; }
.sf-upload-preview {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(200,154,60,.15);
}
.sf-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.sf-upload-name {
    font-size: .68rem;
    color: var(--text-muted, #888);
    font-family: 'IBM Plex Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-upload-beschr-input {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(200,154,60,.2);
    border-radius: 2px;
    padding: .4em .6em;
    color: var(--text, #fafaf7);
    font-size: .78rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .18s;
}
.sf-upload-beschr-input:focus { outline: none; border-color: rgba(200,154,60,.6); }

/* Foto-Grid */
.foto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.foto-karte {
    background: var(--card-bg, rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 2px;
    overflow: hidden;
}
.foto-karte-bild {
    aspect-ratio: 4/3;
    overflow: hidden;
    cursor: zoom-in;
}
.foto-karte-bild img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.foto-karte-bild:hover img { transform: scale(1.06); }
.foto-karte-info {
    padding: .6rem .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
}
.foto-beschr {
    font-size: .78rem;
    color: var(--text-muted, #aaa);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.foto-beschr em { opacity: .5; }
.foto-karte-aktionen {
    display: flex;
    gap: .3rem;
    flex-shrink: 0;
}
.foto-edit-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.foto-edit-text input {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(200,154,60,.3);
    border-radius: 2px;
    padding: .3em .5em;
    color: var(--text, #fafaf7);
    font-size: .78rem;
}
.foto-edit-aktionen { display: flex; gap: .3rem; }

/* Upload-Formular */
.sf-upload-form {
    border: 1px dashed rgba(200,154,60,.25);
    border-radius: 3px;
    padding: 1.2rem 1.5rem;
    margin-top: 1.5rem;
}
.sf-upload-form h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .78rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-muted, #888);
    margin: 0 0 1rem;
}
.sf-upload-form input[type="file"] {
    font-size: .82rem;
    color: var(--text-muted, #aaa);
}

/* ── Quill Rich-Text-Editor ──────────────────────────────────*/
.sf-rich-editor { margin-top: 2px; }
.sf-rich-editor .ql-toolbar {
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(200,154,60,.22);
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    padding: 6px 8px;
}
.sf-rich-editor .ql-container {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(200,154,60,.22);
    border-radius: 0 0 2px 2px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    color: var(--text, #fafaf7);
    min-height: 140px;
}
.sf-rich-editor .ql-editor {
    min-height: 140px;
    color: var(--text, #fafaf7);
    line-height: 1.65;
    padding: .7em .9em;
}
.sf-rich-editor .ql-editor.ql-blank::before {
    color: var(--text-muted, #888);
    font-style: italic;
    left: .9em;
}
/* Toolbar icons */
.sf-rich-editor .ql-toolbar .ql-stroke { stroke: var(--text-muted, #aaa); }
.sf-rich-editor .ql-toolbar .ql-fill   { fill:   var(--text-muted, #aaa); }
.sf-rich-editor .ql-toolbar .ql-picker-label { color: var(--text-muted, #aaa); }
.sf-rich-editor .ql-toolbar button:hover .ql-stroke,
.sf-rich-editor .ql-toolbar button.ql-active .ql-stroke { stroke: var(--gold, #c89a3c); }
.sf-rich-editor .ql-toolbar button:hover .ql-fill,
.sf-rich-editor .ql-toolbar button.ql-active .ql-fill   { fill:   var(--gold, #c89a3c); }
.sf-rich-editor .ql-toolbar .ql-picker-label:hover,
.sf-rich-editor .ql-toolbar .ql-picker-label.ql-active  { color:  var(--gold, #c89a3c); }
/* Dropdown */
.sf-rich-editor .ql-picker-options {
    background: #2a2520;
    border: 1px solid rgba(200,154,60,.2);
    border-radius: 2px;
}
.sf-rich-editor .ql-picker-options .ql-picker-item { color: var(--text, #fafaf7); }
.sf-rich-editor .ql-picker-options .ql-picker-item:hover { color: var(--gold, #c89a3c); }
/* Editor-Inhalte im Editor */
.sf-rich-editor .ql-editor p   { margin: 0 0 .5em; }
.sf-rich-editor .ql-editor h2  {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 1.3rem; font-weight: 700;
    margin: .8em 0 .3em;
    color: var(--text, #fafaf7);
}
.sf-rich-editor .ql-editor h3  {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 1.05rem; font-weight: 600;
    margin: .6em 0 .25em;
    color: var(--gold, #c89a3c);
}
.sf-rich-editor .ql-editor ul,
.sf-rich-editor .ql-editor ol  { padding-left: 1.6em; }
.sf-rich-editor .ql-editor li  { margin: .2em 0; color: var(--text, #fafaf7); }
/* Quill Snow: Separator-Linie */
.sf-rich-editor .ql-toolbar.ql-snow + .ql-container.ql-snow { border-top: none; }

/* ── Beschreibung-Anzeige (Detail-Seite) ─────────────────────*/
.sf-detail-beschr p  { margin: 0 0 .6em; }
.sf-detail-beschr p:last-child { margin-bottom: 0; }
.sf-detail-beschr h2 {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 1.35rem; font-weight: 700;
    margin: .9em 0 .3em;
    color: var(--text, #fafaf7);
}
.sf-detail-beschr h3 {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 1.05rem; font-weight: 600;
    margin: .7em 0 .25em;
    color: var(--gold, #c89a3c);
}
.sf-detail-beschr ul,
.sf-detail-beschr ol  { padding-left: 1.6em; margin: .3em 0 .6em; }
.sf-detail-beschr li  { margin: .25em 0; }

/* Quill-Einrückung in der Ansicht (ql-editor-Scope gilt hier nicht) */
.sf-detail-beschr .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.sf-detail-beschr .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; }
.sf-detail-beschr .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; }
.sf-detail-beschr .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; }
.sf-detail-beschr .ql-indent-5:not(.ql-direction-rtl) { padding-left: 15em; }
.sf-detail-beschr .ql-indent-6:not(.ql-direction-rtl) { padding-left: 18em; }
.sf-detail-beschr .ql-indent-7:not(.ql-direction-rtl) { padding-left: 21em; }
.sf-detail-beschr .ql-indent-8:not(.ql-direction-rtl) { padding-left: 24em; }
.sf-detail-beschr li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; }
.sf-detail-beschr li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; }
.sf-detail-beschr li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; }
.sf-detail-beschr li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; }
.sf-detail-beschr li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em; }
.sf-detail-beschr li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 19.5em; }
.sf-detail-beschr li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 22.5em; }
.sf-detail-beschr li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 25.5em; }

/* ── Initiale (Drop Cap) ─────────────────────────────────────*/
.sf-rich-editor .ql-editor p.ql-initiale::first-letter,
.sf-detail-beschr p.ql-initiale::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.72;
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-weight: 700;
    margin-right: 0.1em;
    margin-top: 0.06em;
    color: var(--gold, #c89a3c);
}

/* Toolbar-Buttons für Initiale & Spalten (Icon via ui/icons HTML) */
.sf-rich-editor .ql-toolbar .ql-initiale,
.sf-rich-editor .ql-toolbar .ql-spalten {
    width: auto;
    padding: 0 5px;
}
.sf-rich-editor .ql-toolbar .ql-initiale span,
.sf-rich-editor .ql-toolbar .ql-spalten span {
    color: rgba(255,255,255,.45);
    transition: color .15s;
}
.sf-rich-editor .ql-toolbar .ql-initiale:hover span,
.sf-rich-editor .ql-toolbar .ql-initiale.ql-active span,
.sf-rich-editor .ql-toolbar .ql-spalten:hover span,
.sf-rich-editor .ql-toolbar .ql-spalten.ql-active span {
    color: var(--gold, #c89a3c);
}

/* Spalten (2-Spalten-Absatz) */
.sf-rich-editor .ql-editor p.ql-spalten,
.sf-detail-beschr p.ql-spalten {
    column-count: 2;
    column-gap: 1.8em;
}
@media (max-width: 540px) {
    .sf-detail-beschr p.ql-spalten { column-count: 1; }
}

/* ── Lightbox ────────────────────────────────────────────────*/
.lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(6px);
}
.lightbox-inner {
    position: relative;
    max-width: min(90vw, 1200px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lightbox-inner img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 2px;
}
.lightbox-schliessen {
    position: absolute;
    top: -2.2rem; right: 0;
    background: none; border: none;
    color: rgba(255,255,255,.6);
    font-size: 1.4rem;
    cursor: pointer;
    transition: color .15s;
    line-height: 1;
    padding: .2em;
}
.lightbox-schliessen:hover { color: #fff; }
.lightbox-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    padding: .3em .5em;
    cursor: pointer;
    border-radius: 2px;
    transition: background .15s;
}
.lightbox-nav:hover { background: rgba(0,0,0,.8); }
.lightbox-nav--links  { left: -3.5rem; }
.lightbox-nav--rechts { right: -3.5rem; }
@media (max-width: 700px) {
    .lightbox-nav--links  { left: .2rem; }
    .lightbox-nav--rechts { right: .2rem; }
}
.lightbox-beschr {
    margin-top: .7rem;
    font-size: .85rem;
    color: rgba(255,255,255,.7);
    text-align: center;
    max-width: 60ch;
}
.lightbox-zaehler {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem;
    letter-spacing: .12em;
    color: rgba(255,255,255,.35);
    margin-top: .4rem;
}

/* Permanente Marker-Labels auf Touch-Geräten (Ausrückungen-Karte) */
.ar-label-mob {
    background: rgba(26,26,26,.82) !important;
    border: none !important;
    color: #fafaf7 !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 9.5px !important;
    letter-spacing: .03em;
    padding: 2px 6px !important;
    border-radius: 2px !important;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 5px rgba(0,0,0,.35) !important;
}
.ar-label-mob::before { display: none !important; }