/* FONTS */
@import url("https://fonts.bunny.net/css?family=outfit:100,200,300,400,500,600,700,800,900|roboto:100,300,400,500,700,900,100i,300i,400i,500i,700i,900i&display=swap");

/* Basislayout – responsive, deutsch kommentiert */
* { box-sizing: border-box; }
body {
        font-family: 'Outfit', 'Roboto', sans-serif;
        margin: 0;
        color: #222;
        background:#f9f4ed;
}

/* Navigation / Header */
header {
        position: sticky;
        top:0;
        background:#24201f;
        border-bottom:1px solid #eee;
        z-index: 10;
        color: #fff;
}
.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.brand { font-weight: 700; color:#fff; }

/* Header-Layout + Controls */
.header-flex{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.controls { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

/* Buttons */
button, .btn {
        border:1px solid #fff;
        background:#fff;
        padding:.5rem .8rem;
        cursor:pointer;
        border-radius:.5rem;
        text-decoration:none;
        color:#24201f;
        transition: all 0.3s ease;
}
button:hover, .btn:hover { background:#d4af37; color:#24201f; border-color:#d4af37; }

/* Mobile Toggle */
.nav-toggle{
        display:none;
        border:1px solid #fff;
        background:#fff;
        color:#24201f;
        padding:.5rem .8rem;
        border-radius:.5rem;
        cursor:pointer;
}
.nav-toggle:hover{ background:#d4af37; color:#24201f; border-color:#d4af37; }

/* Login im Header */
.login-inline{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }

/* Grid / Cards */
.grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; padding: 1rem 0; }
.card { position: relative; overflow:hidden; border-radius:.75rem; background:#fff; border:1px solid #e6e6e6; }

/* Karten-Bilder ohne Beschnitt */
/* Standard: Bilder sollen voll die Breite nutzen */
.card img {
    width: 100%;
    height: auto;
    object-fit: cover;   /* Bild füllt Breite, ohne weiße Ränder */
    display: block;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
}

/* Mobile-Ansicht: kein Beschnitt, volle Breite */
@media (max-width: 700px){
    .card img {
        width: 100%;
        height: auto;     /* volle Breite, Höhe proportional */
        object-fit: cover;
    }
}

.card .caption { padding:.5rem .75rem; font-size:.9rem; }

/* Link-Styling für Karten */
a.card,
a.card:link,
a.card:visited,
a.card:hover,
a.card:active { text-decoration:none !important; color:inherit; }
.card .caption{ color:#24201f; font-weight:500; transition: color .25s ease; }
a.card:hover .caption,
a.card:focus-visible .caption{ color:#d4af37; }

/* Breakpoints – Spaltenzahl */
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
/* Neu: viele Smartphones sind 428px/430px breit → 1 Spalte bis 640px */
@media (max-width: 640px)  { .grid { grid-template-columns: 1fr; } }

/* Handy: Bild soll die Karte ausfüllen, ohne Beschnitt */
@media (max-width: 640px){
    .card img,
    .card img.custom {           /* auch Admin-"custom"-Bilder überschreiben */
        width: 100% !important;
        height: auto !important;   /* proportional skalieren */
        object-fit: contain;       /* nichts abschneiden */
        display: block;
    }
}


/* Lightbox/Diashow */

/* Smartphone: Lightbox-Steuerung unter das Bild verlagern */
@media (max-width: 640px){
    /* Steuerelemente nicht mehr fixed rechts, sondern unter dem Bild */
    .lb-controls{
        position: static !important;   /* fixed überschreiben */
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100%;
        margin-top: .6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        z-index: 1 !important;
    }

    /* einzelne Reihen zentrieren */
    .lb-row{
        justify-content: center !important;
        width: 100%;
        gap: .5rem;
    }

    /* Buttons größer für Touch */
    .lb-controls button{
        min-width: 2.4rem;
        padding: .5rem .65rem;
    }

    .lb-toggle-wrap{ align-items: center; }
    .lb-toggle-text{ margin-right: .25rem; }
}

.lb-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.9);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 72px; overflow: auto; z-index: 1000;
}
.lb-overlay.active { display:flex; }
.lb-stage { position: relative; max-width: min(92vw, 1200px); max-height: 85vh; }
.lb-stage img { width:100%; height:auto; max-height:85vh; display:block; margin: 0 auto; }
.lb-caption { color:#fff; margin-top:.5rem; text-align:center; }

/* feste Steuerung (nur für große Screens) */
.lb-controls{
    position: fixed; top: 90px; right: 24px;
    display: flex; flex-direction: column; gap: .6rem; z-index: 1001;
}
.lb-row{ display:flex; gap:.5rem; justify-content:flex-end; }
.lb-controls button{
    background: rgba(255,255,255,.15); border: 1px solid #fff; color: #fff;
    padding: .45rem .6rem; border-radius: .6rem; cursor: pointer; min-width: 2.1rem; text-align: center;
}
.lb-controls button:hover{ background: rgba(255,255,255,.25); }

/* Play/Stop */
.lb-toggle{ background:#2ecc71; border-color:#2ecc71; color:#0b2f1b; font-weight:600; }
.lb-toggle.is-stop{ background:#e74c3c; border-color:#e74c3c; color:#2b0a08; }
.lb-toggle-wrap{ align-items:center; }
.lb-toggle-text{ color:#fff; font-weight:600; user-select:none; align-self:center; }

/* Reset alte Positionierungen */
.lb-close,.lb-prev,.lb-next{ position: static; top:auto; right:auto; left:auto; transform:none; }


/* Admin-Tabelle & Inputs */
.table { width:100%; border-collapse: collapse; margin-top:1rem; }
.table th, .table td { border-bottom:1px solid #eee; padding:.5rem; text-align:left; }
.input { padding:.45rem .6rem; border:1px solid #ccc; border-radius:.4rem; }
.notice { background:#f6ffed; border:1px solid #b7eb8f; color:#135200; padding:.6rem .8rem; border-radius:.5rem; }
.error  { background:#fff1f0; border:1px solid #ffa39e; color:#a8071a; padding:.6rem .8rem; border-radius:.5rem; }

/* Vorschaubilder mit individuellen Maßen (Admin) */
.card img.custom { height:auto !important; }

/* Schloss-Button (Admin) */
.lock { border:1px solid #ccc; background:#fff; padding:.35rem .5rem; border-radius:.4rem; cursor:pointer; }
.lock[aria-pressed="true"] { background:#f6f6f6; }
.lock .on { display:none; }
.lock[aria-pressed="true"] .on { display:inline; }
.lock[aria-pressed="true"] .off { display:none; }

/* --- Mobile Navigation Breakpoint --- */
@media (max-width: 760px){
    .nav-toggle{ display:block; }
    .header-flex{ flex-wrap:wrap; }
    #nav-controls[data-open="false"]{ display:none; }
    #nav-controls[data-open="true"]{ display:flex; flex-wrap:wrap; gap:.5rem; width:100%; }
    #nav-controls .btn, #nav-controls .input, #nav-controls button{ width:100%; }
    header .container{ padding-bottom:.75rem; }
}