/* ─── Schrift ───────────────────────────────────────────────────────────
   Inter war von Anfang an als Seitenschrift deklariert, aber nie geladen —
   es gab kein @font-face. Browser fielen bis zur Systemvorgabe durch und
   renderten Times New Roman. Seit 20.07.2026 selbst gehostet
   (assets/fonts/, SIL Open Font License liegt daneben): kein Google-Fonts-
   Aufruf, DSGVO-sauber, funktioniert offline. Variable Font = eine Datei
   für alle Schnitte 100–900. */
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Über mich, Impressum, Datenschutz Cards */
.about-card, .impressum-card, .datenschutz-card {
    max-width: 1200px;
    margin: 48px auto 0 auto;
    padding: 38px 32px 32px 32px;
    border: 2px solid transparent;
    background: linear-gradient(var(--overlay-surface-50), var(--overlay-surface-50)) padding-box,
                linear-gradient(135deg, var(--overlay-accent-1-20), var(--overlay-accent-2-20)) border-box;
    border-radius: 0;
    display: flex;
    gap: 38px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.about-card::before,
.impressum-card::before,
.datenschutz-card::before,
.contact-card::before,
.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
    opacity: 0.95;
}
.about-photo {
    flex: 0 0 180px;
    max-width: 180px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.about-photo img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--color-accent-2);
    box-shadow: 0 2px 16px 0 var(--overlay-accent-1-20);
}
.about-text {
    flex: 1 1 0%;
}
.about-text h2.section-title {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 2.1rem;
    color: var(--color-accent-1);
}
.about-text h3 {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 1.2rem;
    color: var(--color-accent-1);
}
.about-text p {
    margin-bottom: 10px;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.7;
}
.impressum-card, .datenschutz-card {
    flex-direction: column;
    gap: 0;
}
.impressum-content, .datenschutz-content {
    margin-top: 12px;
}
.impressum-content p, .datenschutz-content p {
    margin-bottom: 10px;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.7;
}
.impressum-source, .datenschutz-source {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: 12px;
}
html {
    scroll-padding-top: 130px;
}

:root {
    --color-bg-1: #111111;
    --color-bg-2: #0c0c0c;
    --color-bg-3: #070707;
    --color-surface: #121212;
    --color-text: #f0f3f5;
    --color-text-soft: #d2d9de;
    --color-text-muted: #9ca7b0;
    --color-text-strong: #ffffff;
    --color-footer-text: #7f8b94;
    --color-accent-1: #ff7900;
    --color-accent-2: #d7dfe6;
    --overlay-accent-1-10: rgba(255, 255, 255, 0.035);
    --overlay-accent-2-10: rgba(215, 223, 230, 0.055);
    --overlay-header-bg: rgba(10, 10, 10, 0.97);
    --overlay-accent-1-05: rgba(255, 255, 255, 0.018);
    --overlay-white-10: rgba(255, 255, 255, 0.085);
    --overlay-white-30: rgba(255, 255, 255, 0.24);
    --overlay-accent-1-02: rgba(255, 255, 255, 0.008);
    --overlay-accent-1-20: rgba(255, 255, 255, 0.08);
    --overlay-accent-2-20: rgba(215, 223, 230, 0.18);
    --overlay-surface-50: rgba(8, 8, 8, 0.52);
    --overlay-surface-70: rgba(8, 8, 8, 0.74);
    --overlay-surface-80: rgba(8, 8, 8, 0.84);
    --overlay-accent-1-50: rgba(255, 255, 255, 0.2);
    --overlay-accent-1-40: rgba(255, 255, 255, 0.14);

    /* Rahmen-Tokens.
       Referenzwert 0.18 stammt von den Galerie-Kacheln
       (.gallery-creative.is-justified .gallery-item) — das ist die
       Rahmenstärke, die auf dieser Seite sichtbar funktioniert.
       Bewusst getrennt von den --overlay-* Tokens, weil die auch
       für Hintergründe und Schatten verwendet werden. */
    --color-border: rgba(255, 255, 255, 0.18);
    --color-border-soft: rgba(255, 255, 255, 0.12);
    --color-border-accent: rgba(255, 121, 0, 0.55);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    /* Nach Inter ein vollständiger System-Stack: falls die Fontdatei je
       nicht lädt, gibt es überall einen sauberen Sans-Fallback statt der
       Browser-Vorgabe (Times). */
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, var(--color-bg-1) 0%, var(--color-bg-2) 50%, var(--color-bg-3) 100%);
    background-attachment: fixed;
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Animated Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
        justify-content: flex-start;
    height: 100%;
    background:
        radial-gradient(circle at 20% 50%, var(--overlay-accent-1-10) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--overlay-accent-2-10) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Header - transparent im Hero, scrolled dunkel */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 25px 50px;
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
}

header.is-scrolled {
    background: var(--overlay-header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--overlay-accent-1-10);
}

/* Render below-the-fold sections lazily for faster initial page load. */
.services,
.contact,
.about,
.impressum,
.datenschutz,
footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 60px;
    width: auto;
    filter: drop-shadow(0 0 10px var(--overlay-accent-1-20));
}

.logo-gradient {
    display: block;
    aspect-ratio: 272 / 60;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 38%, #ff7900 72%, #ff7900 100%);
    -webkit-mask-image: url('assets/ChristianBandillaFotografie_w.png');
    mask-image: url('assets/ChristianBandillaFotografie_w.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    filter: drop-shadow(0 0 10px var(--overlay-accent-1-20));
}

.logo-gradient-header {
    width: 272px;
}

.logo-mark {
    display: none;
}

nav {
    display: flex;
    gap: 40px;
}

nav a {
    color: var(--color-text-soft);
    text-decoration: none;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Nur Farbe animieren. Vorher stand hier `all`, was bei einem
       Breakpoint-Wechsel auch die Schriftgröße animiert hat — sichtbar
       als zappelnder Text beim Drehen des Geräts. */
    transition: color 0.3s;
    position: relative;
    /* In einer waagerechten Navigation darf ein Link nie in sich
       umbrechen. nav ist ein Flex-Container; ohne das schrumpfen die
       Links unter ihre Textbreite und brechen zweizeilig um. */
    white-space: nowrap;
}

nav a:hover {
    color: var(--color-accent-1);
}

nav a::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
    transition: width 0.3s;
}

nav a:hover::before {
    width: 100%;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-accent-1);
    transition: all 0.3s ease;
    display: block;
}

.mobile-menu-toggle.is-open span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
}

.mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.is-open span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

/* Hero Section - Editorial
   Cursor-Effekt „Licht + Parallaxe" (Design-Entscheidung 20.07.2026,
   Variante D): das Foto liegt auf einer eigenen Ebene (.hero-image) und
   bewegt sich minimal gegen die Maus, dazu ein warmes Streiflicht im
   Soft-Light-Modus. Ersetzt die frühere weiße Screen-Blend-Wolke. */
.hero {
    --hero-glow-x: 50%;
    --hero-glow-y: 40%;
    --hero-glow-opacity: 0;
    --hero-px: 0px;
    --hero-py: 0px;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 20px 60px 20px;
    top: 0;
    background-color: #1a2a3a;
}

/* Bildebene mit Überstand (-28px) und minimalem Zoom: die Parallaxe von
   maximal ±14px kann so nie den Bildrand freilegen. */
.hero-image {
    position: absolute;
    inset: -28px;
    z-index: 0;
    background-image: url('assets/hero_catch_web.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    transform: translate3d(var(--hero-px), var(--hero-py), 0) scale(1.02);
    will-change: transform;
}

/* Warmes Streiflicht: hellt das Foto auf, statt es zu überdecken.
   Soft-Light wirkt auf die Bildtöne — kein weißer Nebel mehr. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle 340px at var(--hero-glow-x) var(--hero-glow-y), rgba(255, 208, 158, 0.5), transparent 68%);
    mix-blend-mode: soft-light;
    opacity: var(--hero-glow-opacity);
    transition: opacity 0.45s ease;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
    .hero::before {
        --hero-glow-opacity: 0.3;
        transition: none;
    }

    .hero-image {
        transform: none;
        will-change: auto;
    }
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, 0.65) 72%,
        rgba(0, 0, 0, 0.93) 100%
    );
    z-index: 1;
}

@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-content {
    --hero-lockup-width: min(560px, 84vw);
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 100%;
    width: 100%;
    padding: 0;
    overflow: visible;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-signature-mark {
    display: block;
    width: 80vw;
    height: auto;
    max-height: 40vh;
    max-width: 100%;
    margin: 0 auto 8px auto;
    object-fit: contain;
}

.logo-gradient-hero {
    width: 80vw;
    max-width: 100%;
    margin: 0 auto 16px auto;
}

.hero h1 {
    display: none;
    width: var(--hero-lockup-width);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    font-size: 80px;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: -2px;
    background: linear-gradient(135deg, var(--color-text-strong) 0%, var(--color-accent-2) 50%, var(--color-accent-1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

/*- Professionelle Hunderfotografie für unvergessliche Erinnerungen*/
.hero-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
    font-weight: 300;
    margin-top: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.cta-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0;
}

.cta-button {
    display: inline-block;
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-accent-2) 100%);
    color: var(--color-text-strong);
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--overlay-white-30);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.cta-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px var(--overlay-accent-1-40);
}

.cta-secondary {
    background: transparent;
    border: 2px solid var(--overlay-accent-1-50);
    transition: border-color 0.3s;
}

.cta-secondary:hover {
    border-color: var(--color-accent-1);
}

/* Portfolio - Kreatives Grid */
.portfolio {
    padding: 120px 50px;
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: 64px;
    font-weight: 900;
    margin-bottom: 20px;
    display: inline-block;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 38%, #ff7900 72%, #ff7900 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #ff7900;
    letter-spacing: -1px;
}

.section-description {
    font-size: 16px;
    color: var(--color-text-muted);
    margin-bottom: 80px;
    max-width: 600px;
}

.gallery-creative {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    background: linear-gradient(135deg, var(--overlay-accent-1-10), var(--overlay-accent-2-10));
    border: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(180px, 16vw, 320px);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

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


.gallery-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: saturate(1.04) contrast(1.02) brightness(1);
    transition: transform 0.6s ease, filter 0.6s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-item::after {
    /* Scrim nur im unteren Viertel — trägt die Beschriftung, lässt das
       Motiv frei (Design-Entscheidung 20.07.2026, Variante A). */
    content: '';
    position: absolute;
    inset: 55% 0 0 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
}

.gallery-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item:nth-child(4) {
    grid-column: span 2;
}

.gallery-item:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Hover: sanfter Zoom statt des früheren grauen Dreh-Overlays,
   das die Motive ausgewaschen hat. */
.gallery-item:hover .gallery-thumb {
    transform: scale(1.03);
    filter: saturate(1.08) contrast(1.03) brightness(1.02);
}

.gallery-creative.is-justified .gallery-item:hover {
    border-color: var(--color-border-accent);
}

.gallery-item-content {
    /* Gesperrte Versalien direkt auf dem Scrim — kein Kasten, kein
       Rahmen. Der ::after-Verlauf liefert den Kontrast. */
    position: absolute;
    left: 18px;
    bottom: 14px;
    z-index: 2;
    text-align: left;
    font-size: 13px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.17em;
    color: rgba(255, 255, 255, 0.94);
    white-space: nowrap;
    pointer-events: none;
    transition: letter-spacing 0.4s ease;
}

.gallery-item:hover .gallery-item-content {
    letter-spacing: 0.21em;
}


.gallery-creative.is-justified {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gallery-overview-row {
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.gallery-creative.is-justified .gallery-item {
    flex: 0 0 auto;
    min-height: 0;
    max-width: none;
    border: 2px solid rgba(255, 255, 255, 0.18);
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.gallery-creative.is-justified .gallery-item:nth-child(1),
.gallery-creative.is-justified .gallery-item:nth-child(4),
.gallery-creative.is-justified .gallery-item:nth-child(6) {
    grid-column: auto;
    grid-row: auto;
}

.gallery-creative.is-justified .gallery-thumb {
    object-fit: cover;
    object-position: center;
}

.category-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
}

.category-lightbox.is-open {
    display: block;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-surface-80);
    backdrop-filter: blur(6px);
}

.lightbox-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    border: 0;
    background: linear-gradient(135deg, var(--color-bg-1) 0%, var(--color-bg-2) 52%, var(--color-bg-3) 100%);
    box-shadow: none;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
}

.lightbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--overlay-white-10);
    background: linear-gradient(180deg, var(--overlay-surface-70), var(--overlay-surface-50));
}

/* Galerie-Kopf „Klar" (Design-Entscheidung 20.07.2026, Variante A):
   Titel in Versalien, Bildanzahl abgesetzt, Schließen als quadratischer
   ✕-Button, der sich beim Überfahren dreht. */
.lightbox-title {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.lightbox-name {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lightbox-count {
    font-size: 13px;
    color: var(--color-text-muted);
    padding-left: 14px;
    border-left: 1px solid var(--color-border-soft);
    white-space: nowrap;
}

.lightbox-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover {
    border-color: var(--color-accent-1);
    color: var(--color-accent-1);
    transform: rotate(90deg);
}

.lightbox-close:focus-visible {
    outline: 2px solid var(--color-accent-1);
    outline-offset: 2px;
}

.lightbox-grid {
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

.lightbox-row {
    display: flex;
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
}

.lightbox-item {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    border: 4px solid var(--overlay-accent-2-20);
    background: none;
    overflow: hidden;
    cursor: zoom-in;
    padding: 0;
}

.lightbox-item::after {
    content: 'Klicken zum Vergrößern';
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 6px 9px;
    border: 1px solid var(--overlay-accent-2-20);
    background: var(--overlay-surface-80);
    color: var(--color-text-strong);
    font-size: 11px;
    letter-spacing: 0.4px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.lightbox-item:hover::after,
.lightbox-item:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}


.lightbox-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-empty {
    color: var(--color-text-muted);
    font-size: 15px;
}

.lightbox-viewer {
    position: absolute;
    inset: 0;
    background: rgba(19, 19, 19, 0.9);
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px;
}

.lightbox-viewer.is-open {
    display: flex;
}

.viewer-frame {
    position: relative;
    margin: 0;
    width: calc(100% - 120px);
    height: calc(100% - 12px);
    border: 1px solid var(--overlay-accent-2-20);
    background: var(--overlay-surface-70);
}

.viewer-counter {
    position: absolute;
    left: 12px;
    bottom: 12px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--overlay-accent-2-20);
    background: var(--overlay-surface-80);
    color: var(--color-text-strong);
    font-size: 12px;
    letter-spacing: 1px;
}

.viewer-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.viewer-nav,
.viewer-close {
    border: 1px solid var(--overlay-accent-2-20);
    background: var(--overlay-surface-80);
    color: var(--color-text-strong);
    cursor: pointer;
}

.viewer-nav:hover,
.viewer-close:hover {
    border-color: var(--overlay-accent-1-40);
    background: var(--overlay-accent-1-10);
}

.viewer-nav {
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 1;
}

.viewer-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 28px;
    line-height: 1;
}

.viewer-nav:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Services Section */
.services {
    padding: 120px 50px;
    background: var(--overlay-accent-1-02);
    border-top: 1px solid var(--overlay-accent-1-10);
    border-bottom: 1px solid var(--overlay-accent-2-10);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    padding: 40px;
    border: 2px solid transparent;
    background: linear-gradient(var(--overlay-surface-50), var(--overlay-surface-50)) padding-box,
                linear-gradient(135deg, var(--overlay-accent-1-20), var(--overlay-accent-2-20)) border-box;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
    opacity: 0;
    transition: opacity 0.4s;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    background: linear-gradient(var(--overlay-surface-70), var(--overlay-surface-70)) padding-box,
                linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2)) border-box;
    transform: translateY(-10px);
}

.service-card h3 {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--color-text-strong), var(--color-accent-1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-card p {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.price {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Contact Section */
.contact {
    padding: 120px 50px;
}

/* About, Impressum, Datenschutz Sections */
.about,
.impressum,
.datenschutz {
    padding: 120px 50px;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.3fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-success {
    display: none;
    max-width: 1200px;
    margin: 0 auto 18px;
    padding: 14px 16px;
    border: 1px solid var(--overlay-accent-1-40);
    background: var(--overlay-accent-1-20);
    color: var(--color-text-strong);
    font-size: 14px;
}

.contact-success.is-visible {
    display: block;
}

/* Fehlermeldung des Kontaktformulars — gleiche Box, warnender Rahmen,
   mit direkter E-Mail-Adresse als Ausweg. */
.contact-error {
    border-color: rgba(255, 107, 107, 0.5);
    background: rgba(255, 107, 107, 0.08);
}

.contact-error a {
    color: var(--color-accent-1);
}

.contact-card,
.contact-form {
    padding: 34px;
    border: 2px solid transparent;
    background: linear-gradient(var(--overlay-surface-50), var(--overlay-surface-50)) padding-box,
                linear-gradient(135deg, var(--overlay-accent-1-20), var(--overlay-accent-2-20)) border-box;
    position: relative;
    overflow: hidden;
}

.contact-card h3 {
    font-size: 22px;
    margin-bottom: 14px;
    color: var(--color-text-strong);
}

.contact-card p {
    color: var(--color-text-soft);
    margin-bottom: 10px;
}

.contact-direct-list {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.contact-direct-item {
    padding: 12px 12px;
    border: 1px solid var(--color-border);
    background: var(--overlay-surface-50);
}

.contact-direct-label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-soft);
    display: flex;
    align-items: center;
    gap: 7px;
}

.contact-direct-label.whatsapp-label {
    color: #25D366;
}

.icon-whatsapp {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin-right: 2px;
}

.contact-direct-value {
    color: var(--color-text-strong);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
}

.contact-direct-value:hover {
    color: var(--color-accent-2);
}

.contact-side-title {
    margin: 8px 0 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.contact-action-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--color-text-strong);
    text-decoration: none;
    border: 1px solid var(--overlay-white-30);
    background: var(--overlay-accent-2-10);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.contact-action-link.whatsapp {
    color: #fff;
    background: linear-gradient(90deg, #25D366 80%, #128C7E 100%);
    border: 1.5px solid #25D366;
    box-shadow: 0 2px 12px 0 rgba(37,211,102,0.13);
}
.contact-action-link.whatsapp:hover {
    background: linear-gradient(90deg, #128C7E 80%, #25D366 100%);
    border-color: #128C7E;
    color: #fff;
    box-shadow: 0 4px 18px 0 rgba(18,140,126,0.18);
}

.contact-action-link:hover {
    border-color: var(--color-accent-2);
    background: var(--overlay-accent-2-20);
}

.contact-action-link.secondary {
    background: var(--overlay-accent-1-10);
    border-color: var(--overlay-accent-1-40);
}

.contact-action-link.secondary:hover {
    background: var(--overlay-accent-1-20);
    border-color: var(--color-accent-1);
}

.contact-form {
    display: grid;
    gap: 10px;
}

.contact-form label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-soft);
    letter-spacing: 0.4px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    background: var(--overlay-surface-70);
    color: var(--color-text-strong);
    padding: 12px 14px;
    /* 16px wie der Fließtext der Seite — 14px wirkte daneben zu klein,
       und unter 16px zoomt iOS Safari beim Antippen hinein. */
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form textarea {
    resize: vertical;
    min-height: 130px;
}

/* Fokus in Akzentfarbe statt Grau — docs/ux.md verlangt sichtbare
   Fokus-Zustände, und Orange ist hier eindeutiger als ein heller Rand. */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-border-accent);
    box-shadow: 0 0 0 3px rgba(255, 121, 0, 0.18);
}

.consent-row {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    margin-top: 8px;
}

.consent-row input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent-2);
}

.consent-row span {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.contact-form .cta-button {
    margin-top: 12px;
    justify-self: start;
}

.form-note {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.honeypot {
    display: none;
}

/* Footer */
footer {
    background: linear-gradient(180deg, transparent, var(--overlay-surface-80));
    padding: 60px 50px 40px;
    text-align: center;
    border-top: 1px solid var(--overlay-accent-1-10);
    font-size: 12px;
    color: var(--color-footer-text);
}

@media (max-width: 768px) {
    /* Formularfelder auf dem Handy.
       16px ist kein Geschmacksurteil: iOS Safari zoomt beim Antippen
       automatisch hinein, sobald ein Feld unter 16px liegt. Die Seite
       springt dann bei jedem Tippen.
       44px Mindesthöhe, damit Felder, Button und Checkboxen sicher
       zu treffen sind. */
    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
        min-height: 44px;
    }

    .contact-form button,
    .contact-form input[type="submit"] {
        min-height: 44px;
    }

    .consent-row {
        grid-template-columns: 24px 1fr;
        gap: 12px;
    }

    .consent-row input[type="checkbox"] {
        width: 24px;
        height: 24px;
        margin-top: 0;
    }

    /* .consent-row ist im Markup selbst ein <label for="…">, die ganze
       Zeile schaltet also die Checkbox. Nur die Mindesthöhe sicherstellen. */
    .consent-row {
        min-height: 44px;
        align-items: center;
    }

    header {
        padding: 16px 20px;
    }

    .logo-img {
        height: 45px;
    }

    .logo-gradient-header {
        width: 204px;
    }

    body::before {
        animation: none;
    }

    .hero-content {
        --hero-lockup-width: min(460px, 88vw);
    }

    .logo-mark {
        height: 50px;
        width: 64px;
    }

    /* --- LOGO ---*/
    .hero-signature-mark {
        width: 80vw;
        height: auto;
        max-height: 34vh;
        max-width: 100%;
        margin: 0 auto 8px auto;
        object-fit: contain;
    }

    .hero {
        padding: 0 24px 48px 24px;
    }

    .hero::before {
        opacity: 0.18;
    }

    .logo-gradient-hero {
        width: 88vw;
        margin: 0 0 8px 0;
    }

    .hero h1 {
        font-size: 48px;
    }

    .cta-group {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 6px;
    }

    .cta-button {
        width: auto;
        padding: 14px 28px;
    }

    .section-title {
        font-size: 42px;
    }

    .gallery-creative {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item:nth-child(1),
    .gallery-item:nth-child(6) {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-item-content {
        left: 12px;
        bottom: 10px;
        font-size: 10px;
        letter-spacing: 0.13em;
        max-width: calc(100% - 24px);
        white-space: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .lightbox-panel {
        width: 100vw;
        height: 100vh;
        margin: 0;
    }

    .lightbox-grid {
        padding: 8px;
    }

    .lightbox-header {
        padding: 12px;
    }

    .lightbox-name {
        font-size: 13px;
        letter-spacing: 0.12em;
    }

    .lightbox-count {
        font-size: 12px;
        padding-left: 10px;
    }

    .lightbox-close {
        width: 44px;
        height: 44px;
    }

    .viewer-frame {
        width: calc(100% - 6px);
        height: calc(100% - 6px);
    }

    .viewer-nav {
        position: absolute;
        bottom: 14px;
        width: 48px;
        height: 48px;
    }

    .viewer-prev {
        left: 14px;
    }

    .viewer-next {
        right: 14px;
    }

    .contact {
        padding: 90px 20px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-card,
    .contact-form {
        padding: 22px;
    }
}

/* ─── Navigation: Burger-Menü bis 1024 px ──────────────────────────────
   Die Navigation braucht ausgeschrieben rund 1400 px (6 Links à 22 px
   mit 40 px Abstand plus 272 px Logo). Der frühere Umbruchpunkt lag bei
   768 px — dazwischen war das Burger-Menü aus, der Platz reichte aber
   nicht, und ALLE sechs Links brachen zweizeilig um.

   Der Wert 1150 ist gemessen, nicht geraten: Logo 272 px + Navigation
   733 px (bei 16 px Schrift) + 100 px Innenabstand + Luft. Bei 1025 px
   ragte die Navigation noch 30 px über den rechten Rand.

   Diese Regeln standen vorher im 768-px-Block und wurden hierher
   verschoben, damit es nur einen Ort dafür gibt. */
@media (max-width: 1150px) {
    .mobile-menu-toggle {
        display: flex;
    }

    nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: var(--overlay-header-bg);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--overlay-accent-1-10);
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    nav.is-open {
        max-height: 360px;
    }

    nav a {
        font-size: 14px;
        letter-spacing: 1px;
        padding: 14px 20px;
        border-bottom: 1px solid var(--overlay-accent-1-05);
    }

    nav a:last-child {
        border-bottom: none;
    }
}

/* Zwischen 1025 und 1400 px reicht der Platz für die volle Navigation
   nur knapp. Etwas kompakter setzen, damit nichts umbricht. */
@media (min-width: 1151px) and (max-width: 1400px) {
    nav {
        gap: 24px;
    }

    nav a {
        font-size: 16px;
        letter-spacing: 1px;
    }
}