/* Schriften vom eigenen Server (keine Verbindung zu Google beim Seitenaufruf).
   Lora und Italiana stehen unter der SIL Open Font License (assets/fonts/OFL-*.txt). */
@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Variable.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Italic-Variable.ttf') format('truetype');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Italiana';
    src: url('../fonts/Italiana-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Design „Blitz" in dunklen Farben: Nussbraun mit heller Schrift, Weiß als Licht (Blitz),
   Bernstein als Akzent — auf allen Geräten gleich */
:root {
    --color-bg: #22150e;
    --color-bg-alt: #1a100a;
    --color-surface: #2e1e14;
    --color-border: #4a3324;
    --color-ink: #fbf7f1;
    --color-text-muted: #dccab5;
    --color-accent: #e8b67a;
    --color-accent-2: #e8b67a;
    --color-dark: #150d08;
    --color-on-dark: #fbf7f1;
    --color-light: #fbf7f1;      /* „Licht": Blitz-Pillen, Rahmen, helle Knöpfe */
    --color-on-light: #22150e;   /* Schrift auf hellen Flächen */
    --flash-glow: rgba(255, 236, 200, 0.95);

    --font-heading: 'Italiana', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;

    --container-width: 1140px;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss immer gewinnen — sonst überschreiben Regeln wie
   display:flex es, und "versteckte" Elemente bleiben sichtbar. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-ink);
    margin: 0 0 0.5em;
    letter-spacing: 0.4px;
}

/* Italiana „verstärkt“ — überall, wo die Überschriften-Schrift steht (Überschriften, Logo,
   Preise, Handy-Menü): die sehr dünnen Haarlinien werden in Textfarbe nachgezogen, damit
   Buchstaben wie das F auch klein und auf dem Handy gut lesbar sind. */
h1, h2, h3, h4,
.logo,
.pricing-card__price,
.contact-email {
    -webkit-text-stroke: 0.045em currentColor;
    paint-order: stroke fill;
}

h1 { font-size: 3rem; line-height: 1.15; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; color: var(--color-text-muted); }

a {
    color: var(--color-accent);
    text-decoration: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Coming soon banner */
.coming-soon-banner {
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    padding: 10px 16px;
}

.coming-soon-banner--red {
    background: #7a2e22;
    color: #faf0e8;
}

.coming-soon-banner--yellow {
    background: #e3b23c;
    color: #3c2415;
}

.coming-soon-banner--black {
    background: #211810;
    color: #f3e8d6;
}

/* Header */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid rgba(251, 247, 241, 0.1);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.logo {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-ink);
    letter-spacing: 0.06em;
}

/* Unterzeile im Logo ist Lora — nicht nachziehen */
.logo small {
    -webkit-text-stroke: 0;
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 7px;
}

/* Pillen-Menü: der Menüpunkt springt beim Überfahren wie ein Blitz weiß auf Dunkelbraun auf */
.main-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.nav-link {
    display: block;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 0.92rem;
    color: var(--color-ink);
    transition: background 0.25s ease, color 0.25s ease;
}

/* Blitz-Pille: der Menüpunkt leuchtet weiß auf */
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
    background: var(--color-light);
    color: var(--color-on-light);
}

.nav-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.nav-link.pop {
    animation: nav-flash 0.55s ease-out;
}

@keyframes nav-flash {
    0%   { box-shadow: 0 0 0 0 var(--flash-glow); filter: brightness(2.2); }
    100% { box-shadow: 0 0 0 16px rgba(255, 236, 200, 0); filter: none; }
}

/* Kamera-Anzeige im Header (nur Deko, auf schmalen Bildschirmen ausgeblendet) */
.camera-readout {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.camera-readout b {
    font-weight: 500;
    color: var(--color-ink);
}

.camera-readout__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3c8a4a;
    box-shadow: 0 0 8px #3c8a4a;
}

.camera-readout__dot.is-charging {
    background: #c98a2a;
    box-shadow: 0 0 8px #c98a2a;
}

/* Hero der Startseite: Bild im Schatten, Blitz-Auslöser */
.flash-hero {
    padding: 64px 0 88px;
}

.flash-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: center;
}

.eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 14px;
}

.flash-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
    text-wrap: balance;
    margin-bottom: 0.4em;
}

.flash-hero__lede {
    font-size: 1.05rem;
    max-width: 44ch;
    margin-bottom: 28px;
}

.flash-hero__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.shutter {
    position: relative;
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 2px solid rgba(251, 247, 241, 0.35);
    padding: 0;
    background: var(--color-dark);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.shutter::after {
    content: "";
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

.shutter:active::after { transform: scale(0.88); }

.shutter:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* Ladering: leert sich beim Auslösen und füllt sich in 1,6 s wieder */
.shutter svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.shutter circle {
    fill: none;
    stroke: #c98a2a;
    stroke-width: 4;
    stroke-dasharray: 245;
    stroke-dashoffset: 0;
}

.shutter.is-charging circle { stroke-dashoffset: 245; transition: none; }
.shutter.is-charging.is-recharging circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s linear; }

.shutter-label {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.shutter-label small {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Die Box passt sich per JS dem Format des aktuellen Bildes an (Hoch-/Querformat)
   und gleitet dabei weich in die neue Größe. aspect-ratio ist nur der Startwert. */
.flash-stage-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    transition: height 0.7s cubic-bezier(.6, 0, .2, 1);
}

.flash-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    flex: none;
    transition: width 0.7s cubic-bezier(.6, 0, .2, 1), height 0.7s cubic-bezier(.6, 0, .2, 1);
    background: #120b07;
    border: 12px solid var(--color-light); /* heller Rahmen, damit die Schattenbox auf dunklem Grund sichtbar ist */
    cursor: pointer;
    overflow: hidden;
}

.flash-stage:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.hero-slide.is-active { opacity: 1; }

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.16) saturate(0.5);
    transition: filter 2.8s ease-in;
}

.flash-stage.is-lit .hero-slide img,
.flash-stage.is-static .hero-slide img {
    filter: none;
    transition: filter 0.04s;
}

.flash-stage__label {
    position: absolute;
    left: 16px;
    bottom: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    transition: opacity 0.4s;
    pointer-events: none;
}

.flash-stage.is-lit .flash-stage__label,
.flash-stage.is-static .flash-stage__label { opacity: 0; }

/* Der eigentliche Blitz: ein kurzer weißer Lichtblitz über die ganze Seite */
.flash-burst {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.flash-burst.go { animation: flash-burst 0.5s ease-out; }

@keyframes flash-burst {
    0%   { opacity: 0.92; }
    100% { opacity: 0; }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 13px 30px;
    border: 1px solid var(--color-ink);
    color: var(--color-ink);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease;
}

button.btn {
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.btn:hover {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-on-light);
    box-shadow: 0 0 30px var(--flash-glow);
}

/* Hauptknopf: hell auf dunklem Grund */
/* .btn.btn-dark: muss stärker sein als "button.btn" (transparenter Hintergrund) — sonst steht
   bei <button>-Knöpfen (z.B. Kontaktformular) dunkle Schrift auf dunklem Grund */
.btn.btn-dark {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-on-light);
}

.btn-dark:hover {
    box-shadow: 0 0 0 1px #fff, 0 0 30px var(--flash-glow);
}

.btn-light {
    border-color: var(--color-on-dark);
    color: var(--color-on-dark);
}

.btn-light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--color-on-light);
    box-shadow: 0 0 30px var(--flash-glow);
}

/* Sections */
.section {
    padding: 80px 0;
}

/* Dunkles Band: Zartbitter-Braun mit hellem Text */
.section-alt {
    background: var(--color-dark);
    color: var(--color-on-dark);
}

.section-alt h1,
.section-alt h2,
.section-alt h3 { color: var(--color-on-dark); }

.section-alt p { color: rgba(251, 247, 241, 0.8); }

.section-alt a:not(.btn) { color: #e8b67a; }

.section-alt .btn {
    border-color: var(--color-on-dark);
    color: var(--color-on-dark);
}

.section-alt .btn:hover {
    background: #fff;
    border-color: #fff;
    color: var(--color-on-light);
    box-shadow: 0 0 30px var(--flash-glow);
}

.section-alt .section-header::before { background: #e8b67a; }

/* Einmaliges Aufleuchten eines Knopfs, wenn er zum ersten Mal ins Bild scrollt (JS setzt
   .is-flashing). Startet im Hover-Zustand (weiß, Lichtschein) und blendet in 1 s auf den
   normalen Zustand aus — kein "to"-Keyframe, damit danach der normale Hover greift. */
.btn.is-flashing {
    animation: btn-flash-once 1s ease-out;
}

@keyframes btn-flash-once {
    from {
        background: #fff;
        border-color: #fff;
        color: #2b1a10;
        box-shadow: 0 0 34px var(--flash-glow);
    }
}

.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.section-header::before {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    background: var(--color-accent);
    margin: 0 auto 22px;
}

/* Service grid */
.service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 2px;
    transition: transform 0.2s ease-out;
    will-change: transform;
}

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

/* Bildrahmen: wird AUSSEN um das Foto gezeichnet (als Schatten-Ring), nimmt dem Bild also
   keinen Platz weg und schneidet nichts ab. Breite/Farbe über --frame / --frame-color;
   oben/unten wird Abstand in Rahmenbreite gehalten, seitlich reicht er in den Zwischenraum. */
.service-card__img,
.about-grid__img {
    --frame: 0px;
    --frame-color: transparent;
    box-shadow: 0 0 0 var(--frame) var(--frame-color);
    transition: transform 0.2s ease-out, box-shadow 0.3s ease;
}

/* Weiße Bildkarte; beim Überfahren fällt Blitzlicht darauf */
.photo-frame,
.about-grid__img {
    --frame: 12px;
    --frame-color: var(--color-light);
    margin-block: var(--frame);
    box-shadow: 0 0 0 var(--frame) var(--frame-color), 0 10px 30px var(--frame) rgba(0, 0, 0, 0.35);
}

.service-card__img:hover,
.about-grid__img:hover {
    box-shadow: 0 0 0 var(--frame) var(--frame-color), 0 0 0 calc(var(--frame) + 1px) #fff,
        0 0 46px calc(var(--frame) + 4px) var(--flash-glow), 0 10px 30px var(--frame) rgba(43, 26, 16, 0.15);
}

/* Vorzeige-Fotos (Startseite, Leistungen, Projekte): ganzes Bild im eigenen Format, nichts
   abgeschnitten. Der weiße Rahmen sitzt direkt am Foto (nicht am Kasten), damit er auch bei
   Hochformat-Bildern eng anliegt; Klick öffnet die Großansicht. */
.service-card__img.showcase-img {
    aspect-ratio: auto;
    overflow: visible;
    box-shadow: none;
    display: flex;
    justify-content: center;
}
.service-card__img.showcase-img:hover { box-shadow: none; }
.showcase-img .gallery-thumb-btn {
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    justify-content: center;
}
.service-card__img.showcase-img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(78vh, 720px);
    object-fit: initial;
    box-shadow: 0 0 0 var(--frame) var(--frame-color), 0 10px 30px var(--frame) rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.3s ease;
}
.service-card__img.showcase-img:hover img {
    box-shadow: 0 0 0 var(--frame) var(--frame-color), 0 0 0 calc(var(--frame) + 1px) #fff,
        0 0 46px calc(var(--frame) + 4px) var(--flash-glow), 0 10px 30px var(--frame) rgba(43, 26, 16, 0.15);
}

/* Bilderstrauß (Projekte): bis zu 5 Fotos locker übereinandergelegt, leicht gedreht.
   Lage/Größe/Drehung kommen als --x/--y/--w/--r/--z aus includes/showcase.php. */
.bouquet {
    position: relative;
    margin: 12px 8px 20px;
}
.bouquet__photo {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: auto;
    z-index: var(--z);
    transform: rotate(var(--r));
    transition: transform 0.35s ease;
}
.bouquet__photo img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 0 0 6px var(--color-light), 0 14px 28px 6px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.3s ease;
}
/* Beim Darüberfahren: Foto richtet sich auf, kommt nach vorn und leuchtet auf */
.bouquet__photo:hover,
.bouquet__photo:focus-within {
    z-index: 20;
    transform: rotate(0deg) scale(1.08);
    outline: none;
}
.bouquet__photo:hover img,
.bouquet__photo:focus-within img {
    box-shadow: 0 0 0 6px var(--color-light), 0 0 0 7px #fff, 0 0 40px 10px var(--flash-glow);
}
@media (max-width: 860px) {
    .bouquet__photo img,
    .bouquet__photo:hover img { box-shadow: 0 0 0 4px var(--color-light), 0 10px 20px 4px rgba(0, 0, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .bouquet__photo { transition: none; }
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.pricing-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    padding: 36px 28px;
    text-align: center;
}

.pricing-card__price {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    margin: 12px 0 20px;
    color: var(--color-accent-2);
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
}

.pricing-card li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.pricing-note {
    text-align: center;
    margin-top: 40px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* About */
.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: center;
}

/* Porträt auf "Über mich": in seinem eigenen Seitenverhältnis, ohne Beschnitt */
.about-grid__img {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    will-change: transform;
}

.about-grid__img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Contact */
.contact-box {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}

.contact-email {
    display: inline-block;
    margin-top: 12px;
    font-size: 1.5rem;
    font-family: var(--font-heading);
    color: var(--color-accent-2);
}

/* Projects (TFP) */
.project-note {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 36px;
    background: var(--color-surface);
    border-left: 3px solid var(--color-accent);
}

/* Aktuelle Projekte (unter „Wie läuft das ab?“) */
.current-projects { margin-top: 24px; }
.current-projects__empty { margin: 0; font-style: italic; }
.current-projects__list { display: grid; gap: 28px; margin-top: 8px; }
.current-project { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: start; }
.current-project:not(:has(.current-project__img)) { grid-template-columns: 1fr; }
.current-project + .current-project { padding-top: 28px; border-top: 1px solid var(--color-border); }
.current-project__img { padding: 6px; }
.current-project__img .gallery-thumb-btn { width: auto; height: auto; max-width: 100%; display: inline-block; vertical-align: top; }
.current-project__img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 320px;
    box-shadow: 0 0 0 6px var(--color-light), 0 10px 24px 6px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.3s ease;
}
.current-project__img .gallery-thumb-btn:hover img {
    box-shadow: 0 0 0 6px var(--color-light), 0 0 0 7px #fff, 0 0 36px 8px var(--flash-glow);
}
.current-project h4 { margin: 0 0 8px; font-size: 1.15rem; color: var(--color-ink); }
.current-project p { margin: 0; }
@media (max-width: 640px) {
    .current-project { grid-template-columns: 1fr; }
    .current-project__img { max-width: 300px; }
}

/* Galerie-Bildrahmen (pro Galerie optional ein-/ausschaltbar) */
/* Galerie-Rahmen ebenfalls außen um das Bild (siehe .service-card__img oben) */
.service-card__img.gallery-frame-white,
.service-card__img.gallery-frame-black {
    --frame: 6px;
    margin-block: var(--frame);
}

.service-card__img.gallery-frame-white {
    --frame-color: #ffffff;
    box-shadow: 0 0 0 var(--frame) var(--frame-color), 0 1px 4px var(--frame) rgba(0, 0, 0, 0.18);
}

.service-card__img.gallery-frame-black {
    --frame-color: #111111;
}

.service-card__img.gallery-frame-white:hover,
.service-card__img.gallery-frame-black:hover {
    box-shadow: 0 0 0 var(--frame) var(--frame-color), 0 0 0 calc(var(--frame) + 1px) #fff,
        0 0 46px calc(var(--frame) + 4px) var(--flash-glow);
}

/* Kundengalerie: Dateiname, Sterne-Bewertung, Download, Lightbox */
.gallery-toolbar {
    display: flex;
    justify-content: center;
    margin: -12px auto 40px;
}

.gallery-item { gap: 10px; }

.gallery-filename {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    word-break: break-all;
    margin-top: 10px;
}

.gallery-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.gallery-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.gallery-select input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent-2);
    cursor: pointer;
}

.gallery-item.is-selected .service-card__img {
    outline: 3px solid var(--color-accent);
    outline-offset: calc(var(--frame) + 3px);
}

.gallery-toolbar {
    gap: 12px;
    flex-wrap: wrap;
}

.selection-bar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 20px;
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-accent);
    border-radius: 3px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    max-width: calc(100% - 32px);
    font-size: 0.9rem;
}

.selection-clear {
    background: none;
    border: none;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}

.star-rating {
    display: flex;
    gap: 4px;
    margin: 4px 0 2px;
}

.star-rating button {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: rgba(251, 247, 241, 0.3);
}

.star-rating button.filled {
    color: var(--color-accent-2);
}

.star-rating button:disabled {
    cursor: default;
}

/* Legende über dem Bildraster: was die Sterne bedeuten (Texte im CMS) */
.star-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 22px;
    margin-bottom: 28px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-align: center;
}
.star-legend__title {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink);
}
.star-legend__items { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.star-legend__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--color-ink); }
.star-legend__stars { color: var(--color-accent-2); letter-spacing: 2px; font-size: 1rem; }
.star-legend__off { color: rgba(251, 247, 241, 0.3); }
.star-legend__hint { flex-basis: 100%; font-size: 0.8rem; }

/* Filter nach eigenen Sternen */
.star-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}
.star-filter__label { font-size: 0.85rem; color: var(--color-text-muted); margin-right: 4px; }
.star-filter__btn {
    font: inherit;
    font-size: 0.85rem;
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease;
}
.star-filter__btn:hover { border-color: var(--color-accent); box-shadow: 0 0 16px var(--flash-glow); }
.star-filter__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.star-filter__btn.is-on { background: var(--color-light); border-color: var(--color-light); color: var(--color-on-light); }
.star-filter__stars { color: var(--color-accent-2); letter-spacing: 1px; }
.star-filter__btn.is-on .star-filter__stars { color: #b0761f; }
.star-filter__count { opacity: 0.7; font-size: 0.8em; }
.star-filter-empty { text-align: center; }
.gallery-item[hidden] { display: none; }

.star-rating button:focus-visible,
.gallery-thumb-btn:focus-visible,
.lightbox-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Pro Bild: Sterne links, runder Download-Pfeil rechts — eine schmale Zeile statt großem Knopf */
.gallery-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}
.gallery-actions .star-rating { margin: 0; }
.gallery-dl {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease;
}
.gallery-dl svg { width: 18px; height: 18px; }
.gallery-dl:hover,
.gallery-dl:focus-visible {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-on-light);
    box-shadow: 0 0 16px var(--flash-glow);
    outline: none;
}
.gallery-dl.is-disabled { opacity: 0.35; cursor: not-allowed; }
.gallery-dl.is-disabled:hover { background: none; border-color: var(--color-border); color: var(--color-ink); box-shadow: none; }

.gallery-download {
    margin-top: 10px;
    font-size: 0.82rem;
    padding: 9px 18px;
}

.gallery-download.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.gallery-thumb-btn {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    background: none;
    cursor: zoom-in;
}

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 18, 11, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    z-index: 1000;
    overflow: auto;
}

/* Wichtig: .lightbox-overlay setzt display:flex mit derselben Spezifität wie das
   Browser-Standard-[hidden]{display:none} — ohne diese Regel bliebe das Overlay
   trotz hidden-Attribut sichtbar (leeres Overlay, das sich nicht schließen lässt). */
.lightbox-overlay[hidden] {
    display: none;
}

.lightbox-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.lightbox-figure img {
    max-width: 100%;
    max-height: calc(100vh - 150px);
    object-fit: contain;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    cursor: zoom-in;
}

.lightbox-caption {
    margin-top: 12px;
    color: #fbf7f1;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    overflow-wrap: anywhere;
    text-align: center;
}

/* Zweiter Klick: Originalgröße, frei scrollbar */
.lightbox-overlay.is-zoomed {
    display: block;
    text-align: center;
    padding: 60px 20px;
}

.lightbox-overlay.is-zoomed .lightbox-figure {
    display: inline-flex;
    max-width: none;
}

.lightbox-overlay.is-zoomed .lightbox-figure img {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 28px;
    z-index: 1001;
    background: none;
    border: none;
    color: #fbf7f1;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

/* Blättern in der Großansicht */
.lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(251, 247, 241, 0.35);
    background: rgba(21, 13, 8, 0.55);
    color: #fbf7f1;
    font-size: 2.2rem;
    line-height: 1;
    padding-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.3s ease, border-color 0.2s ease;
}
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-on-light);
    box-shadow: 0 0 26px var(--flash-glow);
    outline: none;
}
.lightbox-nav[hidden] { display: none; }
.lightbox-nav--prev { left: 18px; }
.lightbox-nav--next { right: 18px; }
.lightbox-overlay.is-zoomed .lightbox-nav { display: none; }
.lightbox-counter { margin-left: 10px; color: rgba(248, 239, 225, 0.6); white-space: nowrap; }
@media (max-width: 860px) {
    .lightbox-overlay { padding: 24px 12px; }
    .lightbox-nav { width: 42px; height: 42px; font-size: 1.8rem; top: auto; bottom: 46px; transform: none; }
    .lightbox-nav--prev { left: 12px; }
    .lightbox-nav--next { right: 12px; }
}

.lightbox-hint {
    position: fixed;
    bottom: 20px;
    pointer-events: none;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(248,239,225,0.75);
    font-size: 0.8rem;
}

/* Footer */
.site-footer {
    background: #1e120b;
    color: rgba(251, 247, 241, 0.7);
}

.site-footer__inner {
    padding: 36px 24px;
    text-align: center;
    font-size: 0.85rem;
}

.site-footer__inner p {
    margin: 4px 0;
    color: rgba(251, 247, 241, 0.7);
}

.site-footer a { color: #e8b67a; }

/* Responsive */
@media (max-width: 860px) {
    h1 { font-size: 2.3rem; }
    .service-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .about-grid__img { max-width: 360px; margin-inline: auto; }
    .flash-hero { padding: 40px 0 64px; }
    .flash-hero__inner { grid-template-columns: 1fr; gap: 36px; }
    .flash-stage-wrap { order: -1; }
}

@media (max-width: 1100px) {
    .camera-readout { display: none; }
}

@media (max-width: 560px) {
    .main-nav { gap: 2px; margin: 0 -10px; }
    .nav-link { padding: 7px 10px; font-size: 0.85rem; }
    .logo { font-size: 1.7rem; }
    .section { padding: 56px 0; }
    .project-note { padding: 24px 20px; }
}

/* Hinweis für den Admin auf einer ausgeschalteten Seite */
.page-offline-note {
    padding: 10px 16px;
    background: #e3b23c;
    color: #3c2415;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Sprachwechsel (Flagge der jeweils anderen Sprache) */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-ink);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.3s ease, background 0.2s ease;
}
.lang-switch:hover,
.lang-switch:focus-visible {
    border-color: var(--color-light);
    box-shadow: 0 0 18px var(--flash-glow);
    outline: none;
}
.lang-switch__flag {
    width: 26px;
    height: 16px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(251, 247, 241, 0.35);
    flex: none;
}
/* Handy: Logo | Sprache | Menü in EINER Zeile. Das Logo darf schrumpfen, Sprach- und
   Menüknopf nie — sonst wird der Menüknopf über den rechten Rand hinausgeschoben. */
@media (max-width: 860px) {
    .site-header__inner { padding-left: 16px; padding-right: 16px; gap: 10px; }
    .site-header__inner .logo { flex: 1 1 auto; min-width: 0; font-size: clamp(1rem, 5.4vw, 2rem); }
    .site-header__inner .logo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lang-switch { order: 1; flex: none; padding: 6px 10px 6px 7px; }
    .menu-toggle { order: 2; flex: none; }
}
/* Sehr schmal: nur die Flagge, ohne „EN“/„DE“ */
@media (max-width: 420px) {
    .lang-switch { padding: 7px; }
    .lang-switch span { display: none; }
    .site-header__inner .logo small { font-size: 0.5rem; letter-spacing: 0.08em; }
}

/* Menü-Schalter gibt es nur auf schmalen Bildschirmen (siehe unten) */
.menu-toggle { display: none; }

/* =====================================================================
   Schmale Bildschirme (Smartphone, kleines Tablet): Vollbild-Menü per Schalter,
   weil sieben Menüpunkte als Pillen hier mehrzeilig umbrechen würden.
   ===================================================================== */
@media (max-width: 860px) {
    .logo { white-space: nowrap; font-size: clamp(1.4rem, 7vw, 2rem); }
    .logo small { font-size: 0.55rem; letter-spacing: 0.18em; }
    .site-header__inner { flex-wrap: nowrap; }

    .menu-toggle {
        position: relative;
        z-index: 970;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 7px;
        width: 48px;
        height: 48px;
        padding: 0 6px;
        background: none;
        border: 0;
        cursor: pointer;
        flex: none;
    }

    .menu-toggle span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--color-ink);
        transition: transform 0.4s ease, width 0.4s ease, opacity 0.3s ease;
    }

    .menu-toggle span:nth-child(1) { width: 34px; }
    .menu-toggle span:nth-child(2) { width: 24px; }
    .menu-toggle span:nth-child(3) { width: 14px; }

    .is-menu-open .menu-toggle span:nth-child(1) { width: 30px; transform: translateY(9px) rotate(45deg); }
    .is-menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
    .is-menu-open .menu-toggle span:nth-child(3) { width: 30px; transform: translateY(-9px) rotate(-45deg); }

    /* Vollbild-Menü; der aktive Punkt ist eine weiße Blitz-Pille wie am Computer */
    .main-nav {
        position: fixed;
        inset: 0;
        z-index: 960;
        margin: 0;
        padding: 96px 28px 40px;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        gap: 6px;
        background: var(--color-dark);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    }

    .is-menu-open .main-nav {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0s;
    }

    .nav-link {
        padding: 8px 22px;
        font-family: var(--font-heading);
        -webkit-text-stroke: 0.045em currentColor; /* Italiana verstärkt, wie Logo und Überschriften */
        paint-order: stroke fill;
        font-size: 2rem;
        line-height: 1.2;
        opacity: 0;
        transform: translateX(-16px);
        transition: opacity 0.4s ease, transform 0.4s ease, background 0.25s ease, color 0.25s ease;
    }

    .is-menu-open .nav-link { opacity: 1; transform: none; }
    .is-menu-open .nav-link:nth-child(2) { transition-delay: 0.04s; }
    .is-menu-open .nav-link:nth-child(3) { transition-delay: 0.08s; }
    .is-menu-open .nav-link:nth-child(4) { transition-delay: 0.12s; }
    .is-menu-open .nav-link:nth-child(5) { transition-delay: 0.16s; }
    .is-menu-open .nav-link:nth-child(6) { transition-delay: 0.20s; }
    .is-menu-open .nav-link:nth-child(7) { transition-delay: 0.24s; }

    body.menu-locked { overflow: hidden; }
}
/* Respect reduced-motion preference: disable the photo tilt effect */
@media (prefers-reduced-motion: reduce) {
    .service-card__img,
    .about-grid__img,
    .hero-slide img,
    .hero-slide {
        transition: none;
    }
    .flash-stage, .flash-stage-wrap { transition: none; }
}

/* Geschützte E-Mail-Adresse als Bild (siehe includes/email-protect.php) */
.js-mail { display: inline-block; vertical-align: middle; line-height: 0; }
.js-mail .email-image { display: inline-block; max-width: 100%; height: auto; }
.contact-email.js-mail { margin-top: 12px; }
.js-mail:hover .email-image { filter: brightness(1.25); }
.js-mail:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* Kontaktformular */
.contact-form-wrap { max-width: 680px; margin: 8px auto 0; }
/* Alle Eingabefelder der Website: helle Schrift auf dunklem Grund (ohne diese Regel nimmt der
   Browser schwarze Standardschrift → auf dem dunklen Feld kaum lesbar) */
input, select, textarea {
    color: var(--color-ink);
    caret-color: var(--color-accent);
    color-scheme: dark; /* dunkle Auswahllisten, Kalender, Kontrollkästchen des Browsers */
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; }
select option { color: var(--color-ink); background: var(--color-surface); }
/* Automatisch ausgefüllte Felder (gespeicherte Zugangsdaten): sonst hellblau mit schwarzer Schrift */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-ink);
    caret-color: var(--color-accent);
    box-shadow: 0 0 0 1000px var(--color-surface) inset;
    transition: background-color 9999s ease-out 0s;
}

.contact-form { display: grid; gap: 18px; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-field { display: grid; gap: 6px; }
.contact-field label { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    transition: border-color 0.2s ease, box-shadow 0.3s ease;
}
.contact-field textarea { resize: vertical; min-height: 160px; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(255, 236, 200, 0.6), 0 0 24px rgba(255, 236, 200, 0.7);
}
.contact-privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--color-text-muted); cursor: pointer; }
.contact-privacy input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--color-accent); flex: none; }
.contact-form .btn { justify-self: start; }
.contact-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-errors { border-left: 3px solid #a33b3b; background: rgba(163, 59, 59, 0.08); padding: 12px 16px; margin-bottom: 18px; }
.contact-errors p { margin: 0.2em 0; color: #f0b3a8; }
.contact-success { text-align: center; padding: 32px 24px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 1.1rem; box-shadow: 0 0 46px rgba(255, 236, 200, 0.6); }
.contact-direct { margin-top: 48px; }
.contact-direct p { margin-bottom: 4px; }
@media (max-width: 640px) { .contact-row { grid-template-columns: 1fr; } }

/* Galerie-Raster (öffentliche und Kundengalerien): Vorschau zeigt immer das GANZE Bild in
   seinem eigenen Format — kein Zuschnitt, damit nie ein Kopf o.Ä. abgeschnitten ist.
   Ab mehr als 20 Bildern drei Spalten; auf Smartphones immer zwei. */
.gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
.gallery-grid--dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 32px;
}
.gallery-grid .service-card__img {
    aspect-ratio: auto;
}
.gallery-grid .service-card__img img {
    height: auto;
    object-fit: initial;
}
.gallery-grid .gallery-thumb-btn {
    height: auto;
}
@media (max-width: 860px) {
    .gallery-grid,
    .gallery-grid--dense {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
    }
    .gallery-grid .gallery-download { padding: 8px 10px; font-size: 0.72rem; letter-spacing: 0.05em; }
    .gallery-grid .gallery-meta-row { flex-wrap: wrap; gap: 4px 10px; }
    .gallery-grid .gallery-filename { font-size: 0.7rem; }
}

/* VIP-Raum: Alben-Kacheln */
.vip-album { color: inherit; }
.vip-album:hover h3 { color: var(--color-accent); }
.vip-album__meta { font-size: 0.85rem; margin-top: -8px; }
.vip-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    background: #fff;
    color: #2b1a10;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 0 24px rgba(255, 236, 200, 0.95);
}
.vip-back { margin-top: 6px; }

/* VIP-Raum: Bereichszeile über der Begrüßung (statt des Strichs der anderen Seiten) */
.vip-header::before { display: none; }
.vip-header .eyebrow { margin-bottom: 10px; }

/* Vorschauen nie größer als 70 % ihrer Pixelgröße (max-width kommt pro Bild aus dem HTML);
   schmalere Bilder stehen mittig in ihrer Spalte */
.gallery-grid > .service-card__img,
.gallery-grid > .gallery-item {
    width: 100%;
    margin-inline: auto;
}

/* Umschalter "Bilder pro Reihe" (2–4); per JS gesetzt über --gallery-cols / data-cols */
.gallery-grid[data-cols] {
    grid-template-columns: repeat(var(--gallery-cols, 2), minmax(0, 1fr));
}
.gallery-grid[data-cols="3"] { gap: 36px 32px; }
.gallery-grid[data-cols="4"] { gap: 30px 24px; }
.gallery-columns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-bottom: 22px;
}
.gallery-columns__label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-right: 8px;
}
.gallery-columns__btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.3s ease;
}
.gallery-columns__btn:hover { box-shadow: 0 0 18px var(--flash-glow); }
.gallery-columns__btn[aria-pressed="true"] {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-on-light);
}
.gallery-columns__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Smartphones: immer zwei Spalten, kein Umschalter */
@media (max-width: 860px) {
    .gallery-columns { display: none !important; }
    .gallery-grid[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

/* Impressum und Datenschutzerklärung */
.legal-text { max-width: 760px; margin: 0 auto; }
.legal-text h2 { font-size: 1.5rem; margin: 2em 0 0.6em; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text h3 { font-size: 1.15rem; margin: 1.4em 0 0.4em; }
.legal-text p, .legal-text li { line-height: 1.75; }
.legal-text ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal-text li { color: var(--color-text-muted); margin-bottom: 0.3em; }
.legal-text .js-mail { vertical-align: -0.35em; }
.site-footer__legal a { color: rgba(251, 247, 241, 0.75); }
.site-footer__legal a:hover { color: #fff; }

/* Anschrift als Bild in Impressum/Datenschutz — fügt sich wie normaler Text ein */
.address-image { display: inline-block; line-height: 0; }
.address-image img { display: block; max-width: 100%; height: auto; }

/* Startseite auf schmalen Bildschirmen: Kameraanzeige klein über dem Bild im Schatten,
   kein Auslöser-Knopf (das Bild selbst lässt sich antippen) */
.camera-readout--hero { display: none; }
@media (max-width: 860px) {
    .camera-readout--hero {
        display: flex;
        order: -2;
        justify-content: center;
        gap: 10px;
        margin-bottom: -26px;
        font-size: 0.66rem;
        letter-spacing: 0.1em;
    }
    .flash-hero__actions { display: none; }
}

/* Smartphone: dünnere weiße Rahmen (Bildkarten, Schattenbox der Startseite, Galerie-Rahmen) */
@media (max-width: 860px) {
    .photo-frame,
    .about-grid__img { --frame: 6px; }
    .flash-stage { border-width: 6px; }
    .service-card__img.gallery-frame-white,
    .service-card__img.gallery-frame-black { --frame: 4px; }
}

/* Instagram-Symbol auf Seitenbildern (Name im Admin pro Bild) — unten rechts, dezent;
   beim Darüberfahren deutlicher und mit @Name */
.showcase-img__wrap { position: relative; display: flex; justify-content: center; min-width: 0; max-width: 100%; }
.bouquet__photo .gallery-thumb-btn { display: block; width: 100%; height: auto; }
.ig-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 41px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(21, 13, 8, 0.6);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    opacity: 0.8;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, gap 0.3s ease, box-shadow 0.3s ease;
}
.ig-badge svg { width: 22px; height: 22px; flex: none; }
.ig-badge__name { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.3s ease; }
.ig-badge:hover,
.ig-badge:focus-visible {
    opacity: 1;
    gap: 6px;
    background: var(--color-light);
    color: var(--color-on-light);
    box-shadow: 0 0 18px var(--flash-glow);
    outline: none;
}
.ig-badge:hover .ig-badge__name,
.ig-badge:focus-visible .ig-badge__name { max-width: 180px; }
.bouquet__photo .ig-badge { right: 6px; bottom: 6px; height: 34px; padding: 0 7px; }
.bouquet__photo .ig-badge svg { width: 18px; height: 18px; }
/* Hero: nur auf dem gerade sichtbaren Bild */
.hero-slide:not(.is-active) .ig-badge { visibility: hidden; }
@media (hover: none) { .ig-badge { opacity: 0.9; } }

/* Instagram-Link unter einem Bilderstrauß (eine Person pro Bilderserie) */
.ig-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    padding: 7px 14px 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-ink);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease;
}
.ig-link svg { width: 22px; height: 22px; flex: none; }
.ig-link:hover,
.ig-link:focus-visible {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-on-light);
    box-shadow: 0 0 18px var(--flash-glow);
    outline: none;
}