/* ==========================================================
   wilde13 – Basislayout
   Banner oben, links Navigation + weitere Links, rechts Content
   ========================================================== */

:root {
    --bg:           #f4f2ee;
    --surface:      #ffffff;
    --text:         #1f2328;
    --muted:        #6b7078;
    --border:       #e3e0da;
    --accent:       #2a6fa5;   /* Hellblau, dunkel genug für Text auf Weiß */
    --accent-soft:  #e4f0f8;
    --banner-from:  #2f7bb3;
    --banner-to:    #4b9bd1;   /* Hellblau wie auf der alten Seite (#4292c9) */

    --radius:       14px;
    --gap:          1rem;
    --sidebar-w:    13.5rem;
    /* Bannerbild (980×174) – auf niedrigen Fenstern verkleinert, damit genug Platz für Inhalte bleibt */
    --banner-bild-h: min(174px, 24vh);
    --shadow:       0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
}

a { color: var(--accent); }

/* ---------- Grundraster ----------
   Nutzt die Fensterbreite bis maximal 1440 px (darüber zentriert) und die volle Höhe:
   der Inhaltsbereich wächst bis zum unteren Fensterrand, der Footer sitzt unten. */
.page {
    max-width: 1440px;
    min-height: 100vh;
    margin: 0 auto;
    padding: var(--gap);
    display: grid;
    gap: var(--gap);
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "banner  banner"
        "sidebar content"
        "footer  footer";
}

.banner  { grid-area: banner; }
.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-self: start;
    position: sticky;          /* Navigation bleibt beim Scrollen sichtbar */
    top: var(--gap);
}
.content { grid-area: content; }
.footer  { grid-area: footer; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ---------- Banner ---------- */
.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    border: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 45%),
        linear-gradient(120deg, var(--banner-from), var(--banner-to));
}

.banner__brand {
    display: block;
    line-height: 0;
    max-width: 100%;
}

.banner__bild {
    display: block;
    width: auto;
    height: var(--banner-bild-h);
    max-width: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

/* ---------- Navigation ---------- */
.nav ul,
.links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav { padding: .6rem; }

.nav a {
    display: block;
    padding: .5rem .9rem;
    border-radius: 9px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}

.nav a:hover { background: var(--bg); }

.nav a.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* ---------- Weitere Links ---------- */
.links { padding: .9rem 1.1rem 1rem; }

.links h2 {
    margin: 0 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.links li + li { margin-top: .35rem; }
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* ---------- Content ---------- */
.content {
    padding: 1.5rem 2rem;
    min-width: 0;
}

/* Fließtext nicht über die ganze Breite laufen lassen (Lesbarkeit) */
.beitrag__text, .galerie-text, .seiten-text, .kommentare, .video-info { max-width: 50rem; }

.content h1 {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    line-height: 1.25;
}

.lead  { font-size: 1.15rem; }
.muted { color: var(--muted); }

/* ---------- Footer ---------- */
.footer {
    text-align: center;
    font-size: .875rem;
    color: var(--muted);
    padding: 0 0 .25rem;
}

/* ---------- Mobil: Sidebar über dem Content ---------- */
@media (max-width: 760px) {
    .page {
        padding: 1rem;
        gap: 1rem;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "banner"
            "sidebar"
            "content"
            "footer";
    }

    .banner  { padding: .35rem; }
    .banner__bild { width: 100%; height: auto; }
    .sidebar { position: static; }
    .content { padding: 1.5rem; }

    .nav ul { display: flex; flex-wrap: wrap; gap: .25rem; }
    .nav a  { padding: .5rem .75rem; }
}

/* ==========================================================
   Nachrichten
   ========================================================== */
.beitrag + .beitrag {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.beitrag__titel { margin: 0 0 .25rem; line-height: 1.25; }
h2.beitrag__titel { font-size: 1.4rem; }
.beitrag__titel a { color: var(--text); text-decoration: none; }
.beitrag__titel a:hover { color: var(--accent); }

.beitrag__meta {
    margin: 0 0 1rem;
    font-size: .9rem;
    color: var(--muted);
}

.beitrag__kategorie {
    display: inline-block;
    padding: 0 .55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
}

.beitrag__text > :first-child { margin-top: 0; }
.beitrag__text img { max-width: 100%; height: auto; }

.beitrag__bilder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.beitrag__bilder figure { margin: 0; }

.beitrag__bilder img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    background: var(--bg);
}

.beitrag__bilder figcaption {
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--muted);
}

.beitrag__fuss { font-size: .9rem; }

/* Filter-Hinweis über der Liste */
.filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1.5rem;
    padding: .6rem .9rem;
    border-radius: 10px;
    background: var(--accent-soft);
}

/* Blättern */
.blaettern {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: .9rem;
}

.blaettern a { text-decoration: none; }
.blaettern__neuer  { grid-column: 1; justify-self: start; }
.blaettern__info   { grid-column: 2; color: var(--muted); }
.blaettern__aelter { grid-column: 3; justify-self: end; text-align: right; }

/* Kommentare */
.kommentare { margin-top: 2.5rem; }
.kommentare h2 { font-size: 1.2rem; margin: 0 0 1rem; }

.kommentare__liste { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.kommentar {
    padding: .9rem 1rem;
    border-radius: 10px;
    background: var(--bg);
}

.kommentar + .kommentar { margin-top: .75rem; }
.kommentar__kopf { margin: 0 0 .25rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.kommentar__kopf .muted { font-size: .85rem; }
.kommentar__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Formular */
.formular {
    display: grid;
    gap: .9rem;
    max-width: 36rem;
    margin-top: 1.5rem;
}

.formular h3 { margin: 0; font-size: 1.05rem; }

.formular label {
    display: grid;
    gap: .3rem;
    font-size: .9rem;
    font-weight: 500;
}

.formular input,
.formular textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: var(--surface);
    color: var(--text);
}

.formular input:focus,
.formular textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}

.formular p { margin: 0; font-size: .85rem; }

.formular button {
    justify-self: start;
    padding: .6rem 1.2rem;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.formular button:hover { filter: brightness(1.1); }

.formular__honig {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Kontaktformular */
.kontakt .formular { margin-top: 1rem; }
.kontakt .hinweis--ok { margin: 0 0 1rem; }

.formular__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }

.formular .knopf--zweit {
    background: transparent;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.formular .knopf--zweit:hover { background: var(--accent-soft); filter: none; }

.captcha { display: grid; gap: .4rem; }
.captcha label { font-size: .9rem; font-weight: 500; }
.captcha__bild { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.captcha__bild img { display: block; border: 1px solid var(--border); border-radius: 8px; }
.formular .captcha__eingabe { max-width: 200px; letter-spacing: .1em; }

.formular .captcha__neu {
    padding: 0;
    background: none;
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
}

.formular .captcha__neu[hidden] { display: none; }

.hinweis {
    margin: 0;
    padding: .7rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
}

.hinweis--ok { background: var(--accent-soft); color: var(--accent); margin-top: 1rem; }
.hinweis--fehler { background: #fdecea; color: #a1281b; list-style: none; }

/* Gästebuch */
.titelzeile-oeffentlich {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
}

.gaestebuch__eintragen-link { font-size: .9rem; text-decoration: none; }
.gaestebuch__anzahl { margin: 0 0 1rem; font-size: .9rem; }
.gaestebuch__liste { max-width: 50rem; }

.gaestebuch__antwort {
    margin: .7rem 0 0 1rem;
    padding: .4rem 0 .1rem .9rem;
    border-left: 3px solid var(--accent);
}

.gaestebuch__antwort-kopf { margin: 0 0 .15rem; font-size: .85rem; font-weight: 600; color: var(--accent); }
.gaestebuch .hinweis--ok { margin: 0 0 1rem; }
.gaestebuch .formular { margin-top: 0; }

.gaestebuch__bild { display: inline-block; margin-top: .6rem; }
.gaestebuch__bild img {
    display: block;
    max-width: min(100%, 320px);
    max-height: 240px;
    width: auto;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.gaestebuch .formular input[type=file] { padding: .4rem; background: var(--bg); }
.gaestebuch__bild-fehler { color: #a1281b; font-weight: 400; }

@media (max-width: 760px) {
    .blaettern { grid-template-columns: 1fr 1fr; }
    .blaettern__info { display: none; }
    .blaettern__aelter { grid-column: 2; }
}

/* ==========================================================
   Fotogalerie
   ========================================================== */
.zurueck-link { margin: 0 0 .5rem; font-size: .9rem; }
.zurueck-link a { text-decoration: none; }
.galerie-text { white-space: pre-line; }

/* Galerie-Übersicht und Fotos einer Galerie verwenden dasselbe Raster (Größe und Abstand) */
:root {
    --raster-min:    13rem;
    --raster-abstand: 1.25rem;
    --raster-radius: 12px;
}

.galerie-liste,
.foto-raster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--raster-min), 1fr));
    gap: var(--raster-abstand);
}

.foto-raster { margin-top: 1.5rem; }

.galerie-karte {
    display: grid;
    gap: .2rem;
    color: var(--text);
    text-decoration: none;
}

.galerie-karte__bild {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--raster-radius);
    overflow: hidden;
    background: var(--bg);
    margin-bottom: .35rem;
}

.galerie-karte__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.galerie-karte:hover .galerie-karte__bild img { transform: scale(1.04); }
.galerie-karte__titel { font-weight: 700; line-height: 1.3; }
.galerie-karte:hover .galerie-karte__titel { color: var(--accent); }
.galerie-karte__meta { font-size: .85rem; color: var(--muted); }

.foto-raster a {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--raster-radius);
    overflow: hidden;
    background: var(--bg);
}

.foto-raster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.foto-raster a:hover img { transform: scale(1.04); }
.foto-raster a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Einzelansicht */
.foto-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.foto-kopf a { text-decoration: none; }
.foto-gross { margin: 0; }

.foto-gross__rahmen {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1d1f22;
    border-radius: 12px;
    overflow: hidden;
    min-height: 12rem;
}

.foto-gross__rahmen img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 8.75rem - var(--banner-bild-h));   /* passt samt Banner und Kopfzeile ins Fenster */
    min-height: 12rem;
    width: auto;
    height: auto;
}

.foto-gross__pfeil {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22%;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    text-decoration: none;
    opacity: 0;
    transition: opacity .2s ease;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

.foto-gross__pfeil--links  { left: 0;  justify-content: flex-start; }
.foto-gross__pfeil--rechts { right: 0; justify-content: flex-end; }
.foto-gross__rahmen:hover .foto-gross__pfeil,
.foto-gross__pfeil:focus-visible { opacity: .9; }

.foto-gross figcaption {
    display: grid;
    gap: .15rem;
    margin-top: .75rem;
}

@media (hover: none) {
    .foto-gross__pfeil { opacity: .7; font-size: 2.4rem; }
}

@media (max-width: 760px) {
    .galerie-liste,
    .foto-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
    .foto-gross__rahmen { margin: 0 -1.5rem; border-radius: 0; }
}

/* ==========================================================
   Videogalerie
   ========================================================== */
.galerie-karte__bild--video { position: relative; background: #1d1f22; }

.video-raster {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
}

.video-karte { display: grid; gap: .4rem; color: var(--text); text-decoration: none; }

.video-karte__bild {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #1d1f22;
}

.video-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.video-karte:hover .video-karte__bild img { transform: scale(1.04); }

.video-karte__play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 3.2rem;
    height: 3.2rem;
    margin: -1.6rem 0 0 -1.6rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    transition: background .2s ease, transform .2s ease;
}

.video-karte__play::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: .95rem;
    border-style: solid;
    border-width: .65rem 0 .65rem 1.05rem;
    border-color: transparent transparent transparent #fff;
}

.video-karte:hover .video-karte__play { background: var(--accent); transform: scale(1.08); }

.video-karte__dauer {
    position: absolute;
    right: .45rem;
    bottom: .45rem;
    padding: .05rem .4rem;
    border-radius: 5px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.video-karte__titel { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.video-karte:hover .video-karte__titel { color: var(--accent); }

.video-player {
    display: flex;
    justify-content: center;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.video-player video {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 8.75rem - var(--banner-bild-h));
    background: #000;
}

.video-info { margin-top: 1rem; }
.video-info__titel { font-size: 1.35rem; margin: 0 0 .2rem; }
.video-info p { margin: .3rem 0; }

@media (max-width: 760px) {
    .video-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .video-player { margin: 0 -1.5rem; border-radius: 0; }
}

/* Redaktionelle Seiten (Impressum) */
.seiten-text h2 { font-size: 1.15rem; margin: 1.5rem 0 .4rem; }
.seiten-text > :first-child { margin-top: 0; }
.seiten-text p { margin: 0 0 .8rem; }

/* ---------- Video-Popup ---------- */
.video-popup {
    width: min(92vw, 1400px);
    max-width: none;
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #111316;
    color: #f2f2f2;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    overflow: visible;
}

.video-popup::backdrop { background: rgba(10, 12, 14, .82); }

.video-popup__kopf {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem .6rem 1.1rem;
}

.video-popup__titel { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-popup__nr { font-size: .85rem; color: #aab; }

.video-popup__schliessen {
    border: 0;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    font-size: 1.05rem;
    cursor: pointer;
}

.video-popup__schliessen:hover { background: rgba(255, 255, 255, .22); }

.video-popup__buehne {
    display: flex;
    justify-content: center;
    background: #000;
}

.video-popup__buehne video {
    display: block;
    width: 100%;
    max-height: calc(94vh - 7rem);
    background: #000;
}

.video-popup__buehne--stream iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(94vh - 7rem);
    border: 0;
    background: #000;
}

.video-popup__text { margin: 0; padding: .6rem 1.1rem .8rem; font-size: .9rem; color: #cfd2d6; white-space: pre-line; }

.video-popup__pfeil {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 22, 26, .72);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 2rem;
    z-index: 1;
    line-height: 1;
    cursor: pointer;
}

.video-popup__pfeil:hover { background: var(--accent); }
.video-popup__pfeil--links  { left: -3.75rem; }
.video-popup__pfeil--rechts { right: -3.75rem; }

.video-karte__dauer--stream { background: var(--accent); }

/* go2rtc auf der Einzelseite */
.video-player--stream iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 8.75rem - var(--banner-bild-h));
    border: 0;
    background: #000;
}

/* Pfeile nur außen, wenn neben dem Popup (max. 1400px) Platz ist */
@media (max-width: 1560px) {
    .video-popup__pfeil--links  { left: .5rem; }
    .video-popup__pfeil--rechts { right: .5rem; }
}

@media (max-width: 760px) {
    .video-popup { width: 100vw; max-height: 100vh; border-radius: 0; }
}

/* ==========================================================
   Merkzettel (Fotogalerie)
   ========================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.knopf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border: 1px solid var(--accent);
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.knopf:hover { filter: brightness(1.08); }
.knopf--leise { background: var(--surface); color: var(--accent); }
.knopf--leise:hover { background: var(--accent-soft); filter: none; }

.nav__zahl {
    display: inline-block;
    min-width: 1.4em;
    margin-left: .25rem;
    padding: 0 .4em;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .75rem;
    line-height: 1.5;
    text-align: center;
}

.merken-alle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 1rem 0 0;
    font-size: .9rem;
}

.merken-alle .knopf { padding: .4rem .8rem; }

/* Stern auf dem Thumbnail */
.foto-raster li { position: relative; }

.foto-raster .merken {
    position: absolute;
    top: .4rem;
    right: .4rem;
    margin: 0;
}

.merken__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.merken__knopf:hover { background: rgba(0, 0, 0, .7); transform: scale(1.08); }
.merken__knopf:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.merken__knopf:disabled { opacity: .6; cursor: progress; }
.merken__knopf.is-gemerkt { color: #ffc531; background: rgba(0, 0, 0, .6); }

/* Knopf mit Text in der Einzelansicht */
.foto-kopf__rechts { display: inline-flex; align-items: center; gap: .75rem; }

.merken--text .merken__knopf {
    height: auto;
    padding: .3rem .8rem .3rem .6rem;
    border: 1px solid var(--accent);
    background: var(--surface);
    color: var(--accent);
    font-size: .9rem;
    font-weight: 600;
}

.merken--text .merken__stern { font-size: 1.1rem; }
.merken--text .merken__knopf:hover { background: var(--accent-soft); transform: none; }
.merken--text .merken__knopf.is-gemerkt { background: var(--accent); color: #fff; }
.merken--text .merken__knopf.is-gemerkt .merken__stern { color: #ffc531; }

/* Merkzettel-Seite */
.merkzettel__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.merkzettel__aktionen form { margin: 0; }
.merkzettel__info { font-size: .85rem; margin: .75rem 0 0; }

.merkzettel__galerie {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merken__knopf--entfernen { font-size: 1rem; }