@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap"); /* lädt Montserrat von Google Fonts */


/* =========================================================
   STYLE.CSS STRUKTUR / INHALTSVERZEICHNIS
   Diese Datei wurde nur geordnet und kommentiert.
   Werte, Selektoren und Funktionen wurden nicht absichtlich verändert.

   ORDNER 01 - GLOBAL / BASIS
   Reset, Fonts, Body, Header, Navigation, Logo, Typografie, Buttons, Footer.

   ORDNER 02 - INDEX / STARTSEITE
   Hero, allgemeine Sections, Gallery Preview und Index-Abstände.

   ORDNER 03 - GALLERY
   Gallery Grid, 3D Carousel, Controls, Lightbox, Gallery Mode und Gallery Header.

   ORDNER 04 - ABOUT
   About-Grundlayout, About-Panel, About-Video, Hintergrundbild und Fade-In.

   ORDNER 05 - LINKS
   Link-Panel, Link-Karten, Link-Kategorien und Links-Seiten-Hintergrund.

   ORDNER 06 - SERVICES
   Service-Seiten, Service-Panels, Service-Übersicht und Service-Hover-Effekte.

   ORDNER 07 - CUSTOM CONTENT
   Custom-Content-Unterseite, Service 11, Einrückungen, Anfrage-Link.

   ORDNER 08 - CUSTOM CHAT
   Custom-Chat-Unterseite, Service 12, Textbreiten, Hintergrund, Link-Zeilen.

   ORDNER 09 - LEGAL / CONSENT
   Age Gate, Cookie Banner, Impressum, Datenschutz und Footer-Links.

   ORDNER 10 - RESPONSIVE / MOBILE
   Mobile Navigation, mobile Breakpoints und Desktop/Mobile-Anpassungen.
========================================================= */


/* =========================================================
   01 RESET
   Entfernt Standardabstände vom Browser
========================================================= */

*{
    margin:0;                     /* entfernt Standard-Außenabstände */
    padding:0;                    /* entfernt Standard-Innenabstände */
    box-sizing:border-box;        /* berechnet Breite/Höhe inklusive Padding und Border */
}


/* =========================================================
   02 FONT DEFINITION
   Eigene lokale Schriftdatei einbinden
========================================================= */

@font-face {
    font-family: "MySignature1";  /* interner Name der Schriftart */
    src: url("fonts/Aston.ttf") format("opentype"); /* Pfad zur Schriftdatei */
    font-weight: 400;             /* normale Schriftstärke */
    font-style: normal;           /* normale Schriftdarstellung */
}


/* =========================================================
   03 BASE / GRUNDEINSTELLUNGEN
   Globale Grundeinstellungen für die Website
========================================================= */

body{
    font-family: "MySignature1";  /* Standardschrift der Website */
    font-weight: 400;             /* normale Schriftstärke */
    background:#111;              /* Hintergrundfarbe der Seite */
    color:white;                  /* Standard-Textfarbe */
    line-height:1.6;              /* globale Zeilenhöhe */
    -webkit-font-smoothing: antialiased; /* bessere Kantenglättung in WebKit-Browsern */
    -moz-osx-font-smoothing: grayscale;  /* bessere Kantenglättung in Firefox/macOS */
}
/* =========================================================
   04 HEADER
   Obere feste Leiste
========================================================= */

header {
    height: 180px;                /* Höhe des Headers */
    position: fixed;              /* Header bleibt beim Scrollen sichtbar */
    width: 100%;                  /* Header nimmt volle Bildschirmbreite ein */
    top: 0;                       /* Header sitzt direkt am oberen Rand */
    left: 0;                      /* Header sitzt direkt am linken Rand */
    background: transparent;      /* Header ist zuerst transparent */
    transition: all 0.3s ease;    /* weicher Übergang bei Änderungen */
    z-index: 1000;                /* Header liegt über vielen anderen Elementen */
}

header.scrolled {
    background: rgba(82, 82, 82, 0.144); /* Hintergrund erscheint beim Scrollen */
    backdrop-filter: blur(10px);         /* erzeugt Unschärfe hinter dem Header */
    -webkit-backdrop-filter: blur(5px);  /* Safari-Unterstützung für Blur */
}


/* =========================================================
   05 NAVIGATION
   Hauptnavigation und Menübereich
========================================================= */

nav {
    display: flex;                  /* Aktiviert Flexbox, damit die Bereiche in der Navigation nebeneinander angeordnet werden können */
    justify-content: space-between; /* Verteilt die Inhalte nach links und rechts innerhalb der Navigation */
    align-items: center;            /* Richtet alle Elemente vertikal mittig aus */
    padding: 0 60px;                /* Gibt der Navigation links und rechts Innenabstand */
    box-sizing: border-box;         /* Sorgt dafür, dass Padding in die Gesamtbreite eingerechnet wird und keine ungewollte Verschiebung entsteht */
}

.gallery-page nav {
    position: fixed;                /* Fixiert die Navigation auf der Gallery-Seite, sodass sie beim Scrollen oben bleibt */
    top: 0;                         /* Setzt die Navigation direkt an den oberen Rand des Browserfensters */
    left: 0;                        /* Setzt die Navigation direkt an den linken Rand des Browserfensters */
    width: 100%;                    /* Die Navigation nimmt die komplette Breite des Browserfensters ein */
    z-index: 99999;                 /* Legt die Navigation über andere Inhalte, damit sie nicht verdeckt wird */
}

.nav-left {
    display: flex;                  /* Ordnet die Elemente innerhalb von .nav-left nebeneinander an */
    align-items: center;            /* Zentriert die Elemente vertikal innerhalb von .nav-left */
    gap: 30px;                      /* Setzt einen gleichmäßigen Abstand zwischen den Elementen */
    flex-shrink: 0;                 /* Verhindert, dass dieser Bereich kleiner gedrückt wird, wenn der Platz knapp wird */

    margin-left: 380px;                 /* Entfernt die feste Verschiebung nach rechts, weil diese beim Sprachwechsel zu sichtbarem Springen führen kann */
}

nav ul {
    display: flex;                  /* Ordnet die einzelnen Menüpunkte nebeneinander an */
    list-style: none;               /* Entfernt die Standard-Aufzählungszeichen der Liste */
    gap: 0px;                      /* Setzt gleichmäßigen Abstand zwischen den einzelnen Menüpunkten */
    min-width: 440px;               /* Reserviert eine Mindestbreite für die gesamte Menüleiste */
    justify-content: center;        /* Zentriert die Menüpunkte innerhalb der reservierten Breite */
    padding: 0;                     /* Entfernt Standard-Innenabstand der Liste, damit die Position exakt kontrollierbar bleibt */
    margin: 0;                      /* Entfernt Standard-Außenabstand der Liste, damit keine ungewollte Verschiebung entsteht */
}

nav li {
    width: 100px;                   /* Gibt jedem Menüpunkt eine feste Breite, damit Deutsch/Englisch die Position nicht verändert */
    text-align: center;             /* Zentriert den Linktext innerhalb der festen Breite */
}

nav a {
    position: relative;             /* Wird benötigt, damit die Unterstreichung mit ::after relativ zum Link positioniert werden kann */
    color: white;                   /* Setzt die Linkfarbe auf Weiß */
    font-family: Montserrat, sans-serif; /* Verwendet Montserrat als Hauptschrift und sans-serif als Ersatzschrift */
    text-decoration: none;          /* Entfernt die Standard-Unterstreichung von Links */
    display: inline-block;          /* Gibt dem Link eine eigene berechenbare Fläche, wichtig für Hover-Linie und Zentrierung */
}

nav ul a::after {
    content: "";                    /* Erzeugt ein leeres Pseudoelement für die animierte Unterstreichung */
    position: absolute;             /* Positioniert die Linie frei innerhalb des Links */
    left: 0;                        /* Lässt die Linie links am Linktext beginnen */
    bottom: -6px;                   /* Platziert die Linie 6px unterhalb des Linktexts */
    width: 0%;                      /* Die Linie ist im Normalzustand unsichtbar */
    height: 1px;                    /* Legt die Dicke der Unterstreichung fest */
    background: #ffffff;            /* Setzt die Farbe der Unterstreichung auf Weiß */
    transition: 0.35s ease;         /* Animiert das Erscheinen der Linie weich */
}

nav a:hover::after {
    width: 100%;                    /* Lässt die Unterstreichung beim Hover über die komplette Linkbreite wachsen */
}

/* =========================================================
   06 LOGO
   Branding und Logo-Verhalten
========================================================= */

.logo img {
    height: 200px;                /* Höhe des Logos */
    transition: 0.3s ease;        /* weiche Hover-Animation */
    filter: brightness(1.1);      /* hellt das Logo leicht auf */
}

.logo img:hover {
    opacity: 0.85;                /* macht das Logo beim Hover leicht transparent */
    transform: scale(1.08);       /* vergrößert das Logo beim Hover */
}


/* =========================================================
   07 HERO SECTION
   Startbild und Startbereich der Index-Seite
========================================================= */

.hero{
    height:100vh;                                /* Hero nimmt volle Browserhöhe ein */
    background:url('images/DSC_0205_swWeit.jpg');/* setzt das Hintergrundbild */
    background-size:auto 125%;                   /* skaliert die Bildhöhe auf 125% */
    background-position:center 15%;              /* positioniert Bild horizontal mittig und vertikal bei 15% */
    background-repeat:no-repeat;                 /* verhindert Wiederholung des Bildes */
    background-attachment: fixed;                /* erzeugt festen Hintergrund beim Scrollen */
    display:flex;                                /* aktiviert Flexbox */
    flex-direction:column;                       /* ordnet Inhalt untereinander an */
    justify-content:flex-end;                    /* richtet Inhalt nach unten aus */
    align-items:flex-end;                        /* richtet Inhalt nach rechts aus */
    padding-bottom:30px;                         /* Abstand unten im Hero */
    padding-right:130px;                         /* Abstand rechts im Hero */
    text-align:center;                           /* zentriert Text innerhalb seiner Box */
}

.hero h1{
    font-size: 45px;                             /* Schriftgröße der Hero-Überschrift */
    letter-spacing: 2px;                         /* Zeichenabstand */
    font-weight: 400;                            /* normale Schriftstärke */
    color: rgba(255,255,255,0.85);               /* leicht transparentes Weiß */
    text-shadow:                            /* setzt einen Text-Leuchteffekt oder Textschatten */
        0 0 10px rgba(255,255,255,0.08),         /* erster weicher Lichtschein */
        0 0 25px rgba(255,255,255,0.05);         /* zweiter weicher Lichtschein */
}


/* =========================================================
   08 SECTIONS
   Allgemeine Inhaltsbereiche
========================================================= */

section{
    padding:100px 5%;             /* setzt Innenabstand oben/unten und links/rechts */
}

.gallery-page section:first-of-type{
    margin-top: 140px;            /* Abstand zum fixierten Header auf Gallery-Seite */
}

#gallery {
    padding-left: -125%;          /* verschiebt Gallery-Bereich nach links */
}


/* =========================================================
   09 GALLERY GRID
   Allgemeine Galerie auf der Index-Seite
========================================================= */

.gallery{
    display:grid;                                /* aktiviert CSS Grid */
    grid-template-columns:repeat(auto-fit, 350px); /* erzeugt automatische Spalten mit 350px */
    gap:15px;                                    /* Abstand zwischen Grid-Elementen */
    align-items:center;                          /* zentriert Grid-Elemente vertikal */
    margin-left: 0;                              /* setzt linken Außenabstand auf 0 */
}

.gallery img{
    width:100%;                   /* Bild nimmt volle Containerbreite ein */
    height:auto;                  /* Höhe bleibt proportional */
    display:block;                /* verhindert Inline-Abstände */
    border-radius:20px;           /* rundet Bildecken ab */
    transition:0.3s ease;         /* weiche Hover-Animation */
}

.gallery img:hover{
    transform: scale(1.03);       /* vergrößert Bild beim Hover leicht */
}

.gallery-more {
    display: inline-block;        /* ermöglicht Abstände und Positionierung */
    align-self: center;           /* zentriert Element in Flex-Kontext */
    margin-top: 356px;            /* Abstand nach oben */
    position: relative;           /* Basis für ::after-Linie */

    font-family: "Montserrat", sans-serif; /* Schriftart */
    font-size: 13px;              /* Schriftgröße */
    font-weight: 300;             /* leichte Schriftstärke */
    letter-spacing: 1.6px;        /* Zeichenabstand */
    text-transform: uppercase;    /* schreibt Text groß */
    text-decoration: none;        /* entfernt Unterstreichung */

    color: rgba(255,255,255,0.78);/* Textfarbe */
    background: transparent;      /* transparenter Hintergrund */
    border: none;                 /* kein Rahmen */

    width: auto;                  /* automatische Breite */
    height: auto;                 /* automatische Höhe */
    padding: 0;                   /* kein Innenabstand */

    transition: color 0.35s ease; /* weicher Farbwechsel */
}

.gallery-more::after {
    content: "";                  /* erzeugt Linie */
    position: absolute;           /* positioniert Linie frei */
    left: 0;                      /* Linie startet links */
    bottom: -6px;                 /* Linie sitzt unter dem Text */

    width: 0%;                    /* Linie startet unsichtbar */
    height: 1px;                  /* Linienhöhe */

    background: #ffffff;          /* Linienfarbe */
    transition: width 0.35s ease; /* Animation der Linienbreite */
}

.gallery-more:hover {
    color: #ffffff;               /* hellere Farbe beim Hover */
    transform: none;              /* keine Bewegung beim Hover */
    background: transparent;      /* Hintergrund bleibt transparent */
}

.gallery-more:hover::after {
    width: 100%;                  /* Linie wächst beim Hover */
}


/* =========================================================
   10 FOOTER
   Footer für Index, Gallery, About
========================================================= */

footer{
    font-family: "Montserrat", sans-serif; /* Schriftart */
    text-align:center;                     /* zentriert Footer-Text */
    padding:40px;                          /* Innenabstand im Footer */
    border-top:1px solid #333;             /* obere Trennlinie */
    margin-top: 40px;                      /* Abstand nur in der Index */
}

.gallery-page footer{
    font-family: "Montserrat", sans-serif; /* Schriftart */
    text-align:center;                     /* zentriert Footer-Text */
    padding:40px;                          /* Innenabstand im Footer */
    border-top:1px solid #333;             /* obere Trennlinie */
    margin-top: 1300px;                    /* Abstand zum vorherigen Inhalt */
}

.gallery-page.gallery-grid footer{
    margin-top: 180px !important;                      /* Abstand in der Galerieansicht */
}

.about-page footer{
    font-family: "Montserrat", sans-serif; /* Schriftart */
    text-align:center;                     /* zentriert Footer-Text */
    padding:40px;                          /* Innenabstand im Footer */
    border-top:1px solid #333;             /* obere Trennlinie */
    margin-top: 95px;                     /* Abstand zum vorherigen Inhalt auf About-Seite */
}

.gallery-page.about-grid footer{
    margin-top: 140px;                     /* Abstand nur bei about-grid-Klasse */
}

body:not(.gallery-page):not(.about-page) footer {
    margin-top: -30px;                     /* verschiebt Index-Footer nach oben */
}

body.privacy-page footer {
    margin-top: 180px !important;;        /* Abstand in der Datenschutzerklärung */
}


/* =========================================================
   11 TYPOGRAPHY SYSTEM
   Überschriften und Fließtext
========================================================= */

h2, h3 {
    font-family: "Montserrat", sans-serif; /* Schriftart für h2 und h3 */
    font-weight: 400;                      /* normale Schriftstärke */
    letter-spacing: 1px;                   /* Zeichenabstand */
}

h1 {
    font-size: 45px;                       /* Schriftgröße für h1 */
}

h2 {
    font-size: 32px;                       /* Schriftgröße für h2 */
    color: rgba(255,255,255,0.9);          /* leicht transparentes Weiß */
}

p {
    font-family: "Montserrat", sans-serif; /* Schriftart für Fließtext */
    font-weight: 300;                      /* leichte Schriftstärke */
    color: rgba(255,255,255,0.75);         /* dezente Textfarbe */
    line-height: 1.8;                      /* Zeilenhöhe */
    letter-spacing: 0.2px;                 /* minimaler Zeichenabstand */
    max-width: 700px;                      /* maximale Textbreite */
}


/* =========================================================
   12 SOCIAL ICONS
   Social-Media-Links und Hoverfarben
========================================================= */

.social-icons {
    display: flex; /* legt die Darstellungsart des Elements fest */
    gap: 12px; /* setzt den Abstand zwischen Elementen */
    flex: 0 0 auto; /* setzt Flex-Größe, Schrumpfen und Basisbreite */
}

.social-icons a{
    width:40px;                            /* Breite des Icon-Containers */
    height:40px;                           /* Höhe des Icon-Containers */
    display:flex;                          /* aktiviert Flexbox */
    align-items:center;                    /* zentriert Inhalt vertikal */
    justify-content:center;                /* zentriert Inhalt horizontal */
    border:1px solid rgba(255,255,255,0.2);/* dezenter Rahmen */
    color:rgba(255,255,255,0.7);           /* Textfarbe */
    text-decoration:none;                  /* keine Unterstreichung */
    transition:0.3s ease;                  /* weiche Hover-Animation */
}

.social-icons a svg{
    width:16px;                            /* SVG-Breite */
    height:16px;                           /* SVG-Höhe */
    fill:rgba(255,255,255,0.7);            /* SVG-Farbe */
    transition:0.25s ease;                 /* weiche SVG-Animation */
}

.social-icons a:hover{
    transform: translateY(-2px);           /* hebt Icon beim Hover leicht an */
}

.social-icons a.of:hover{
    color:#2f95f5;                         /* OnlyFans Hover-Farbe */
    border-color:#ffffff;                  /* Rahmenfarbe beim Hover */
}

.social-icons a.bf:hover{
    color:#f706ff;                         /* BestFans Hover-Farbe */
    border-color:#fbff00;                  /* Rahmenfarbe beim Hover */
}

.social-icons a.x:hover{
    color:#ffffff;                         /* X Hover-Farbe */
    border-color:#ffffff;                  /* Rahmenfarbe beim Hover */
}

.social-icons a.r:hover{
    color:#ff4400;                         /* Reddit Hover-Farbe */
    border-color:#ffffff;                  /* Rahmenfarbe beim Hover */
}

.social-icons a.CB:hover{
    color:#ff4400;                         /* Chaturbate Hover-Farbe */
    border-color:#f1c500;                  /* Rahmenfarbe beim Hover */
}


/* =========================================================
   13 ABOUT LINK
   Link zur About-Seite
========================================================= */

.about-link{
    display:inline-block;                  /* ermöglicht Transform-Effekte */
    margin-top:20px;                       /* Abstand nach oben */
    color: rgba(255,255,255,0.7);          /* Standardfarbe */
    text-decoration:none;                  /* keine Unterstreichung */
    font-family: "Montserrat", sans-serif; /* Schriftart */
    letter-spacing: 1px;                   /* Zeichenabstand */
    transition:0.3s ease;                  /* weiche Animation */
}

.about-link:hover{
    color:#ffffff;                         /* Farbe beim Hover */
    transform: translateX(6px);            /* bewegt Link beim Hover nach rechts */
}


/* =========================================================
   14 GALLERY PREVIEW
   Vorschau-Galerie auf der Index-Seite
========================================================= */

.gallery-preview {
    display: flex;                         /* zeigt Vorschau-Bilder nebeneinander */
    gap: 20px;                             /* Abstand zwischen Vorschaubildern */
    justify-content: flex-start;           /* richtet Inhalt links aus */
    flex-wrap: wrap;                       /* erlaubt Zeilenumbruch */
    margin: 30px 0;                        /* Außenabstand oben/unten */
}

#gallery h2,
#gallery .gallery-preview {
    margin-left: -118px;                   /* verschiebt Gallery-Überschrift und Vorschau nach links */
} 

.gallery-preview a {
    display: block;                        /* Link als Blockelement */
    width: 280px;                          /* Breite der Vorschau */
    height: 380px;                         /* Höhe der Vorschau */
    overflow: hidden;                      /* schneidet überstehende Bildteile ab */
    border-radius: 12px;                   /* rundet Container ab */
}

.gallery-preview img {
    width: 100%;                           /* Bild füllt Breite */
    height: 100%;                          /* Bild füllt Höhe */
    object-fit: cover;                     /* Bild füllt Container ohne Verzerrung */
    display: block;                        /* verhindert Inline-Abstände */
    transition: transform 0.3s ease;       /* weiche Zoom-Animation */
}

.gallery-preview a:hover img {
    transform: scale(1.05);                /* vergrößert Bild beim Hover */
}


/* =========================================================
   15 CAROUSEL SCENE
   Äußerer 3D-Raum des Karussells
========================================================= */

.scene {
    position: absolute;                    /* freie Positionierung auf der Seite */
    top: 320px;                            /* Abstand vom oberen Rand */
    left: 50%;                             /* horizontale Mitte vorbereiten */
    transform: translateX(-50%);           /* exakte horizontale Zentrierung */
    width: 500px;                          /* Breite der 3D-Szene */
    height: 350px;                         /* Höhe der 3D-Szene */
    perspective: 1400px;                   /* Stärke der 3D-Tiefenwirkung */
    overflow: visible;                     /* erlaubt sichtbare Überstände */
    z-index: 5;                            /* Ebenenposition */
}

.scene::after {
    content: "";                           /* erzeugt Lichtschein */
    position: absolute;                    /* freie Positionierung */
    left: 50%;                             /* horizontale Mitte vorbereiten */
    top: 560px;                            /* vertikale Position des Lichtscheins */
    transform: translateX(-50%);           /* exakte horizontale Zentrierung */
    width: 950px;                          /* Breite des Lichtscheins */
    height: 220px;                         /* Höhe des Lichtscheins */
    background: radial-gradient(            /* setzt den Hintergrund */
        ellipse at center,                  /* Teil des Hintergrundwertes */
        rgba(255,255,255,0.08) 0%,          /* Farbpunkt innerhalb des Verlaufs */
        rgba(255,255,255,0.03) 42%,         /* Farbpunkt innerhalb des Verlaufs */
        rgba(255,255,255,0) 75%             /* Farbpunkt innerhalb des Verlaufs */
    );                                     /* radialer Verlauf für Glow */
    filter: blur(30px);                    /* weiche Unschärfe */
    pointer-events: none;                  /* ignoriert Mausereignisse */
    z-index: 0;                            /* liegt hinter den Bildern */
}


/* =========================================================
   16 CAROUSEL
   Rotierende Plattform und Karten
========================================================= */

.carousel {
    width: 100%;                           /* volle Breite der Scene */
    height: 100%;                          /* volle Höhe der Scene */
    position: relative;                    /* Bezugspunkt für absolute Karten */
    transform-style: preserve-3d;          /* aktiviert echte 3D-Darstellung */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); /* weiche Rotation */
    cursor: default;                       /* normaler Cursor */
    overflow: visible;                     /* Karten dürfen herausragen */
}

.carousel:active {
    cursor: default;                       /* Cursor bleibt auch aktiv normal */
}

.card {
    position: absolute;                    /* freie Positionierung im Carousel */
    left: 50px;                            /* horizontale Ausgangsposition */
    top: 40px;                             /* vertikale Ausgangsposition */
    width: 350px;                          /* Kartenbreite */
    height: 455px;                         /* Kartenhöhe */
    border-radius: 16px;                   /* abgerundete Ecken */
    overflow: visible;                     /* Spiegelung darf sichtbar bleiben */
    background: transparent;               /* transparenter Hintergrund */
    display: flex;                         /* Flexbox für Bildzentrierung */
    align-items: center;                   /* vertikale Zentrierung */
    justify-content: center;               /* horizontale Zentrierung */
    transition: filter 0.5s ease, transform 0.5s ease; /* weiche Filter- und Bewegungsanimation */
    transform-style: preserve-3d;          /* Karte bleibt im 3D-Raum */
}

.card img {
    position: relative;                    /* ermöglicht z-index */
    z-index: 3;                            /* Bild liegt vor Effekten */
    width: 100%;                           /* volle Kartenbreite */
    height: 100%;                          /* volle Kartenhöhe */
    object-fit: cover;                     /* Bild füllt Karte */
    object-position: center center;        /* Bildausschnitt zentriert */
    display: block;                        /* verhindert Inline-Abstände */
    border-radius: 16px;                   /* gleiche Rundung wie Karte */
    box-shadow: 0 25px 60px rgba(0,0,0,0.7);/* starker Schatten */
    cursor: pointer;                       /* zeigt Klickbarkeit */
}

.card.is-hidden-preview{
    opacity:0;                             /* versteckt Vorschaukarte */
    pointer-events:none;                   /* verhindert Klicks */
}

.reflection{
    position:absolute;                     /* freie Positionierung innerhalb der Karte */
    left:0;                                /* bündig links */
    top: calc(100% + 40px);                /* Abstand unterhalb der Karte */

    width:100%;                            /* gleiche Breite wie Karte */
    height:200px;                          /* Höhe der Spiegelung */

    background-size:100% 100%;             /* Spiegelbild füllt Fläche */
    background-repeat:no-repeat;           /* verhindert Wiederholung */

    transform:scaleY(-1);                  /* spiegelt vertikal */

    opacity:0.08;                          /* sehr dezente Sichtbarkeit */

    filter:none;                           /* kein zusätzlicher Filter */

    z-index:9999;                          /* hohe Ebenenposition */
}


/* =========================================================
   17 CAROUSEL CONTROLS
   Navigationspfeile des Karussells
========================================================= */

.controls {
    position: absolute;                    /* freie Positionierung */
    top: 50%;                              /* vertikale Mitte vorbereiten */
    left: 50%;                             /* horizontale Mitte vorbereiten */
    width: 1650px;                         /* Breite zwischen Pfeilen */
    transform: translate(-50%, -50%);      /* exakte Zentrierung */
    display: flex;                         /* Flexbox */
    justify-content: space-between;        /* Pfeile an äußere Seiten */
    pointer-events: none;                  /* Container selbst nicht klickbar */
    z-index: 20;                           /* liegt über Carousel */
}

.controls button {
    pointer-events: all;                   /* Buttons bleiben klickbar */
    border: none;                          /* kein Rahmen */
    width: 50px;                           /* Buttonbreite */
    height: 50px;                          /* Buttonhöhe */
    border-radius: 50%;                    /* runde Form */
    background: rgba(255,255,255,0.12);    /* transparenter Hintergrund */
    color: white;                          /* Pfeilfarbe */
    font-size: 22px;                       /* Pfeilgröße */
    cursor: pointer;                       /* Hand-Cursor */
    transition: 0.2s;                      /* weiche Animation */
}

.controls button:hover {
    background: rgba(255,255,255,0.25);    /* hellerer Hover-Hintergrund */
    transform: scale(1.1);                 /* leichte Vergrößerung */
}


/* =========================================================
   18 GENERIC BUTTONS
   Allgemeine Button-Styles
========================================================= */

button {
    border: none;                          /* kein Rahmen */
    padding: 10px 14px;                    /* Innenabstand */
    border-radius: 10px;                   /* abgerundete Ecken */
    background: rgba(255,255,255,0.1);     /* Button-Hintergrund */
    color: white;                          /* Textfarbe */
    cursor: pointer;                       /* Hand-Cursor */
    transition: 0.2s;                      /* weiche Animation */
}

button:hover {
    background: rgba(255,255,255,0.25);    /* hellerer Hintergrund beim Hover */
}


/* =========================================================
   19 LIGHTBOX
   Vollbildansicht für Bilder
========================================================= */

#lightbox{
    position:fixed;                        /* liegt fest über der Seite */
    top:0;                                 /* startet oben */
    left:0;                                /* startet links */
    width:100%;                            /* volle Breite */
    height:100%;                           /* volle Höhe */
    background:rgba(0,0,0,0.95);           /* dunkler Hintergrund */
    display:none;                          /* standardmäßig versteckt */
    justify-content:center;                /* zentriert Inhalt horizontal */
    align-items:center;                    /* zentriert Inhalt vertikal */
    z-index:99999;                         /* liegt ganz oben */
    cursor:pointer;                        /* Klick-Cursor */
}

#lightbox.active{
    display:flex;                          /* zeigt Lightbox an */
}

#lightbox img{
    max-width:95%;                         /* maximale Bildbreite */
    max-height:95%;                        /* maximale Bildhöhe */
    object-fit:contain;                    /* zeigt komplettes Bild */
    border-radius:12px;                    /* rundet Bild leicht ab */
}


/* =========================================================
   20 VIEW TOGGLE
   Umschalter zwischen Karussell und Galerie
========================================================= */

.view-toggle{
    position:absolute;                     /* freie Positionierung */
    top:1220px;                            /* Abstand von oben */
    left:50%;                              /* horizontale Mitte */
    transform:translateX(-50%);            /* exakte Zentrierung */
    display:flex;                          /* Elemente nebeneinander */
    align-items:center;                    /* vertikale Zentrierung */
    gap:14px;                              /* Abstand zwischen Elementen */
    font-family:"Montserrat", sans-serif;  /* Schriftart */
    color:rgba(255,255,255,0.75);          /* Textfarbe */
    z-index:30;                            /* liegt vor Karussell */
}

.switch{
    position:relative;                     /* Basis für Slider */
    width:56px;                            /* Breite des Schalters */
    height:28px;                           /* Höhe des Schalters */
}

.switch input{
    opacity:0;                             /* Checkbox unsichtbar */
    width:0;                               /* keine Breite */
    height:0;                              /* keine Höhe */
}

.slider{
    position:absolute;                     /* füllt den Switch */
    cursor:pointer;                        /* klickbar */
    top:0;                                 /* oben bündig */
    left:0;                                /* links bündig */
    right:0;                               /* rechts bündig */
    bottom:0;                              /* unten bündig */
    background:rgba(255,255,255,0.18);     /* Slider-Hintergrund */
    border-radius:30px;                    /* runde Form */
    transition:0.3s ease;                  /* weiche Animation */
}

.slider::before{
    content:"";                            /* erzeugt Schiebeknopf */
    position:absolute;                     /* frei im Slider */
    height:22px;                           /* Knopfhöhe */
    width:22px;                            /* Knopfbreite */
    left:3px;                              /* Abstand links */
    top:3px;                               /* Abstand oben */
    background:white;                      /* Knopffarbe */
    border-radius:50%;                     /* runder Knopf */
    transition:0.3s ease;                  /* weiche Bewegung */
}

.switch input:checked + .slider{
    background:rgba(255,255,255,0.35);     /* aktiver Hintergrund */
}

.switch input:checked + .slider::before{
    transform:translateX(28px);            /* verschiebt Knopf nach rechts */
}


/* =========================================================
   21 GALLERY MODE
   Normale Galerieansicht statt 3D-Karussell
========================================================= */

body.gallery-grid .scene{
    position:relative;                     /* Scene wird normal im Layout platziert */
    top:auto;                              /* alte Top-Position deaktiviert */
    left:auto;                             /* alte Left-Position deaktiviert */
    transform:none;                        /* alte Zentrierung deaktiviert */
    width:100%;                            /* volle Breite */
    height:auto;                           /* automatische Höhe */
    perspective:none;                      /* deaktiviert 3D-Perspektive */
    margin-top:230px;                      /* Abstand nach oben */
    padding:0 10%;                         /* Seitenabstand */
}

body.gallery-grid .scene::after{
    display:none;                          /* blendet Glow aus */
}

body.gallery-grid .carousel{
    display:grid;                          /* Galerie wird als Grid dargestellt */
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); /* responsive Spalten */
    gap:20px;                              /* Abstand zwischen Bildern */
    transform:none !important;             /* entfernt 3D-Transformation */
    height:auto;                           /* automatische Höhe */
    cursor:default;                        /* normaler Cursor */
}

body.gallery-grid .card{
    position:relative;                     /* normale Position im Grid */
    left:auto;                             /* alte Position deaktiviert */
    top:auto;                              /* alte Position deaktiviert */
    width:100%;                            /* volle Spaltenbreite */
    height:420px;                          /* Höhe der Galerie-Karten */
    transform:none !important;             /* entfernt 3D-Position */
    filter:none !important;                /* entfernt Helligkeitsfilter */
}

body.gallery-grid .reflection{
    display:none;                          /* blendet Spiegelung aus */
}

body.gallery-grid .controls{
    display:none;                          /* blendet Pfeile aus */
}


/* =========================================================
   22 LANGUAGE SWITCHER
   Sprachumschalter DE / EN
========================================================= */
.language-switcher {
    display: flex; /* legt die Darstellungsart des Elements fest */
    gap: 12px; /* setzt den Abstand zwischen Elementen */
    align-items: center; /* richtet Elemente quer zur Hauptachse aus */
    margin-left: 730px; /* setzt den linken Außenabstand */
    position: static; /* legt die Positionierungsart des Elements fest */
    flex: 0 0 auto; /* setzt Flex-Größe, Schrumpfen und Basisbreite */
}

.language-switcher button{
    width:40px;                            /* Buttonbreite */
    height:40px;                           /* Buttonhöhe */
    display:flex;                          /* Flexbox */
    align-items:center;                    /* vertikale Zentrierung */
    justify-content:center;                /* horizontale Zentrierung */
    border:1px solid rgba(255,255,255,0.2);/* Rahmen */
    background:transparent;                /* transparenter Hintergrund */
    color:rgba(255,255,255,0.7);           /* Textfarbe */
    text-decoration:none;                  /* keine Unterstreichung */
    font-family:"Montserrat", sans-serif;  /* Schriftart */
    font-size:12px;                        /* Schriftgröße */
    border-radius:0;                       /* eckige Form */
    cursor:pointer;                        /* klickbar */
    transition:0.3s ease;                  /* weiche Animation */
    padding:0;                             /* kein Innenabstand */
}

.language-switcher button:hover{
    color:#ffffff;                         /* hellere Textfarbe beim Hover */
    border-color:#ffffff;                  /* hellerer Rahmen beim Hover */
    transform:translateY(-2px);            /* leichtes Anheben */
    background:transparent;                /* Hintergrund bleibt transparent */
}

.language-switcher button.active {
    color: #df05fc;                        /* aktive Buttonfarbe */
    border-color: #ffffff;                 /* aktiver Rahmen */
    background: rgba(255,255,255,0.12);    /* aktiver Hintergrund */
    transform: translateY(-2px);           /* aktive Position */
}


/* =========================================================
   23 GALLERY PAGE HEADER
   Header-Regeln speziell für Gallery-Seite
========================================================= */

.gallery-page.gallery-grid .view-toggle{
    position:relative;                     /* Toggle normal im Layout */
    top:auto;                              /* deaktiviert alte Top-Position */
    left:auto;                             /* deaktiviert alte Left-Position */
    transform:none;                        /* deaktiviert alte Verschiebung */
    justify-content:center;                /* zentriert Inhalt */
    margin:80px auto 120px auto;           /* Außenabstand */
    width:max-content;                     /* Breite entspricht Inhalt */
}

.gallery-page header{
    height:180px;                          /* Headerhöhe */
    position:fixed;                        /* Header bleibt oben */
    top:0;                                 /* oben am Browser */
    left:0;                                /* links am Browser */
    width:100%;                            /* volle Breite */
    background:rgba(82, 82, 82, 0);        /* transparenter Hintergrund */
    backdrop-filter:blur(0px);             /* kein Blur */
    -webkit-backdrop-filter:blur(0px);     /* Safari: kein Blur */
    transition:background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; /* weicher Übergang */
    z-index:99999;                         /* sehr hohe Ebene */
}

.gallery-page header.scrolled{
    background:rgba(82, 82, 82, 0.144);    /* Hintergrund beim Scrollen */
    backdrop-filter:blur(10px);            /* Blur beim Scrollen */
    -webkit-backdrop-filter:blur(10px);    /* Safari-Blur beim Scrollen */
}


/* =========================================================
   24 CAROUSEL LOAD STATE
   Verhindert sichtbares Durcheinander beim Laden
========================================================= */

.scene{
    opacity:0;                             /* Scene zuerst unsichtbar */
    visibility:hidden;                     /* Scene zuerst versteckt */
}

.scene.is-ready{
    opacity:1;                             /* Scene wird sichtbar */
    visibility:visible;                    /* Scene wird eingeblendet */
    transition:opacity 0.8s ease;          /* weiches Einblenden */
}


/* =========================================================
   25 LANGUAGE GERMAN BODY
   Anpassungen nur für deutsche Version
========================================================= */



/* =========================================================
   26 ABOUT PAGE BASE
   Grundlayout der About-Seite
========================================================= */

.about-page {
    position: relative;                    /* erlaubt positionierte Ebenen */
    overflow-x: hidden;                    /* verhindert horizontales Scrollen */
    padding-top: 0px;                     /* Abstand nach oben */
    font-family: "Montserrat", sans-serif; /* Schriftart */
}

.about-page section p {
    font-family: "Montserrat", sans-serif; /* Schriftart für Absätze auf About */
    margin-top: 100px;                     /* Abstand über Absatz */
}


/* =========================================================
   27 ABOUT PAGE PANEL
   Erster About-Panel-Block
========================================================= */

.about-page .about-panel {
    margin: 90px auto 80px auto;           /* Außenabstand oben, seitlich auto, unten */
    width: 86%;                            /* Breite des Panels */
    min-height: 620px;                     /* Mindesthöhe des Panels */

    display: flex;                         /* Flexbox */
    flex-direction: row;                   /* Inhalt nebeneinander */
    align-items: center;                   /* vertikale Zentrierung */
    justify-content: flex-end;             /* Inhalt nach rechts */
    gap: 170px;                            /* Abstand zwischen Flex-Elementen */

    padding: 60px;                         /* Innenabstand */

    background: rgba(20, 20, 20, 0.82);    /* Panel-Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.12); /* dezenter Rahmen */
    border-radius: 28px;                   /* abgerundete Ecken */

    position: relative;                    /* Bezugspunkt für Ebenen */
    z-index: 2;                            /* Panel liegt über Background */
}

.about-page .about-text {
    width: 520px;                          /* Breite des Textblocks */
    margin-left: auto;                     /* schiebt Textblock nach rechts */
}

.about-page .about-text h2 {
    font-size: 56px;                       /* Schriftgröße der h2 */
    text-align: left;                      /* Text links ausrichten */

    position: relative;                    /* relative Verschiebung */
    left: -140px;                          /* Verschiebung nach links */
    top: -30px;                            /* Verschiebung nach oben */

    margin-bottom: 40px;                   /* Abstand unter Überschrift */
}

.about-page .about-text p {
    margin-top: 0;                         /* entfernt oberen Abstand */
    max-width: 620px;                      /* maximale Breite */
}

.about-page .about-video-loop {
    width: 420px;                          /* Videobreite */
    height: 560px;                         /* Videohöhe */

    position: relative;                    /* normale relative Positionierung */
    flex-shrink: 0;                        /* Video wird nicht geschrumpft */

    overflow: hidden;                      /* schneidet überstehende Videoteile ab */
    border-radius: 18px;                   /* rundet Video-Container ab */
    z-index: 2;                            /* Video liegt über Hintergrund */
}

.about-page .about-video-loop video {
    width: 100%;                           /* Video füllt Containerbreite */
    height: 100%;                          /* Video füllt Containerhöhe */

    object-fit: cover;                     /* Video füllt Container ohne Verzerrung */
    object-position: center center;        /* Videoausschnitt zentriert */

    display: block;                        /* verhindert Inline-Abstände */
    filter: brightness(0.10);              /* macht Video dunkler */
     opacity: 0.75; /* setzt die Transparenz */
}


/* =========================================================
   28 ABOUT PAGE FONT FIX
   Erzwingt Montserrat auf About-Seite
========================================================= */

body.about-page,
body.about-page header,
body.about-page nav,
body.about-page nav a,
body.about-page nav ul,
body.about-page nav li,
body.about-page .social-icons a,
body.about-page .language-switcher button,
body.about-page section,
body.about-page section h2,
body.about-page section h3,
body.about-page section p {
    font-family: "Montserrat", sans-serif !important; /* erzwingt Montserrat */
}

body.about-page.lang-de,
body.about-page.lang-de header,
body.about-page.lang-de nav,
body.about-page.lang-de nav a,
body.about-page.lang-de nav ul,
body.about-page.lang-de nav li,
body.about-page.lang-de .social-icons a,
body.about-page.lang-de .language-switcher button,
body.about-page.lang-de section,
body.about-page.lang-de section h2,
body.about-page.lang-de section h3,
body.about-page.lang-de section p {
    font-family: "Montserrat", sans-serif !important; /* erzwingt Montserrat auch bei deutscher Sprache */
}


/* =========================================================
   29 ABOUT PAGE BACKGROUND IMAGE
   Hintergrundbild und dunkles Overlay der About-Seite
========================================================= */

body.about-page {
    background: #111 !important;            /* setzt dunklen Grundhintergrund */
}

body.about-page::before {
    content: "";                            /* erzeugt Hintergrund-Ebene */
    position: fixed;                        /* bleibt beim Scrollen fixiert */
    inset: 0;                               /* füllt gesamten Viewport */

    background-image: url("images/DSC_0133_sw.jpg"); /* Hintergrundbild */
    background-size: cover;                 /* Bild füllt Viewport */
    background-position: 75% center;        /* Bildposition */
    background-repeat: no-repeat;           /* keine Wiederholung */

    z-index: 0;                             /* liegt hinter Inhalt */
    pointer-events: none;                   /* blockiert keine Klicks */
}

body.about-page::after {
    content: "";                            /* erzeugt Overlay-Ebene */
    position: fixed;                        /* bleibt fixiert */
    inset: 0;                               /* füllt gesamten Viewport */

    background: rgba(0, 0, 0, 0.35);        /* dunkles Overlay */

    z-index: 1;                             /* liegt über Hintergrundbild */
    pointer-events: none;                   /* blockiert keine Klicks */
}

body.about-page header {
    position: fixed;              /* Header bleibt auch auf der About-Seite beim Scrollen oben stehen */
    top: 0;                       /* Header sitzt direkt am oberen Browserrand */
    left: 0;                      /* Header beginnt direkt am linken Browserrand */
    width: 100%;                  /* Header nimmt die komplette Browserbreite ein */
    z-index: 1000;                /* Header liegt über Hintergrundbild und Overlay */
}

body.about-page section,
body.about-page footer {
    position: relative;           /* Nur Seiteninhalt und Footer werden über das About-Hintergrundbild gelegt */
    z-index: 2;                   /* Inhalt und Footer liegen über ::before und ::after */
}


/* =========================================================
   30 ABOUT PANEL FINAL LAYOUT
   Aktives Grid-Layout für About: Überschrift, Text, Video
========================================================= */

.about-page .about-panel {
    margin: 200px auto 80px auto;           /* Außenabstand des Panels */
    width: 86%;                             /* Panelbreite */
    min-height: 620px;                      /* Mindesthöhe */

    display: grid;                          /* aktiviert Grid */
    grid-template-columns: 260px 740px 420px; /* Spalten für Titel, Text, Video */
    align-items: center;                    /* vertikale Ausrichtung */
    justify-content: end;                   /* Grid nach rechts ausrichten */
    column-gap: 35px;                       /* Spaltenabstand */

    padding: 60px;                          /* Innenabstand */

    background: rgba(20, 20, 20, 0.82);     /* Panel-Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.12); /* dezenter Rahmen */
    border-radius: 28px;                    /* abgerundete Ecken */

    position: relative;                     /* Positionierungsbasis */
    z-index: 2;                             /* Ebene über Hintergrund */
}

.about-page .about-title {
    grid-column: 1;                         /* Titel liegt in erster Grid-Spalte */
    grid-row: 1;                            /* Titel liegt in erster Grid-Zeile */

    font-size: 64px !important;             /* Schriftgröße des Titels */
    line-height: 1.1;                       /* Zeilenhöhe des Titels */
    margin: 0 !important;                   /* entfernt Außenabstand */

    text-align: left !important;            /* linksbündige Ausrichtung */
    font-family: "Montserrat", sans-serif !important; /* Schriftart */
    font-weight: 400 !important;            /* normale Schriftstärke */

    position: relative !important;          /* erlaubt manuelle Verschiebung */
    left: -480px !important;                /* verschiebt Titel nach links */
    top: 0 !important;                      /* keine vertikale Verschiebung */
}

.about-page .about-text {
    grid-column: 2;                         /* Text liegt in zweiter Grid-Spalte */
    grid-row: 1;                            /* Text liegt in erster Grid-Zeile */

    width: 620px;                           /* Breite des Textblocks */
    margin: 0 !important;                   /* entfernt Außenabstand */
    padding: 0 !important;                  /* entfernt Innenabstand */
}

.about-page .about-text p {
    margin-top: 0 !important;               /* entfernt oberen Abstand */
    max-width: 620px;                       /* maximale Textbreite */
}

.about-page .about-video-loop {
    grid-column: 3;                         /* Video liegt in dritter Grid-Spalte */
    grid-row: 1;                            /* Video liegt in erster Grid-Zeile */

    width: 420px;                           /* Videobreite */
    height: 560px;                          /* Videohöhe */

    position: relative;                     /* relative Positionierung */
    flex-shrink: 0;                         /* verhindert Schrumpfen */

    overflow: hidden;                       /* schneidet überstehendes Video ab */
    border-radius: 18px;                    /* abgerundete Ecken */
    z-index: 2;                             /* Ebene */
}

.about-page .about-video-loop video {
    width: 100%;                            /* Video füllt Breite */
    height: 100%;                           /* Video füllt Höhe */

    object-fit: cover;                      /* Video füllt Rahmen */
    object-position: center center;         /* Videoausschnitt zentriert */

    display: block;                         /* Blockdarstellung */
    filter: brightness(0.15);               /* dunkelt Video ab */
}

/* =========================================================
   30.2 Link PANEL FINAL LAYOUT
   Aktives Grid-Layout für About: Überschrift, Text, Video
========================================================= */

.links-page .link-panel {
    margin: 200px auto 80px auto;           /* Außenabstand des Panels */
    width: 86%;                             /* Panelbreite */
    min-height: 820px;                      /* Mindesthöhe */

    display: grid;                          /* aktiviert Grid */
    grid-template-columns: 260px 740px 420px; /* Spalten für Titel, Text, Video */
    align-items: center;                    /* vertikale Ausrichtung */
    justify-content: end;                   /* Grid nach rechts ausrichten */
    column-gap: 35px;                       /* Spaltenabstand */

    padding: 60px;                          /* Innenabstand */

    background: rgba(20, 20, 20, 0.82);     /* Panel-Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.12); /* dezenter Rahmen */
    border-radius: 28px;                    /* abgerundete Ecken */

    position: relative;                     /* Positionierungsbasis */
    z-index: 2;                             /* Ebene über Hintergrund */
}

.links-page .link-title {
    grid-column: 1;                         /* Titel liegt in erster Grid-Spalte */
    grid-row: 1;                            /* Titel liegt in erster Grid-Zeile */

    font-size: 64px !important;             /* Schriftgröße des Titels */
    line-height: 1.1;                       /* Zeilenhöhe des Titels */
    margin: 0 !important;                   /* entfernt Außenabstand */

    text-align: left !important;            /* linksbündige Ausrichtung */
    font-family: "Montserrat", sans-serif !important; /* Schriftart */
    font-weight: 400 !important;            /* normale Schriftstärke */

    position: relative !important;          /* erlaubt manuelle Verschiebung */
    left: -480px !important;                /* verschiebt Titel nach links */
    top: 0 !important;                      /* keine vertikale Verschiebung */
}

.links-page .link-text {
    grid-column: 2;                         /* Text liegt in zweiter Grid-Spalte */
    grid-row: 1;                            /* Text liegt in erster Grid-Zeile */

    width: 620px;                           /* Breite des Textblocks */
    margin: 0 !important;                   /* entfernt Außenabstand */
    padding: 0 !important;                  /* entfernt Innenabstand */
}

.links-page .link-text p {
    margin-top: 0 !important;               /* entfernt oberen Abstand */
    max-width: 620px;                       /* maximale Textbreite */
}

/* =========================================================
   LINK COLLECTION
   Edle Link-Karten für Links-Seite
========================================================= */

.links-page .link-collection {
    display: grid;                          /* aktiviert CSS Grid */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* definiert die Spaltenaufteilung des Grids */
    gap: 16px;                              /* setzt den Abstand zwischen den Elementen */
    margin-top: 32px;                       /* setzt den oberen Außenabstand */
    width: 100%;                            /* legt die Breite fest */
}

.links-page .link-card {
    min-height: 76px;                       /* legt die Mindesthöhe fest */
    padding: 18px 24px;                     /* setzt den Innenabstand */

    display: flex;                          /* aktiviert Flexbox */
    align-items: center;                    /* richtet Elemente vertikal im Container aus */
    justify-content: space-between;         /* richtet Elemente horizontal im Container aus */
    gap: 24px;                              /* setzt den Abstand zwischen den Elementen */

    text-decoration: none;                  /* setzt oder entfernt Textdekorationen */
    color: rgba(255,255,255,0.78);          /* setzt die Text- oder Iconfarbe */

    background: rgba(255,255,255,0.04);     /* setzt den Hintergrund */
    border: 1px solid rgba(255,255,255,0.2); /* setzt den Rahmen */
    border-radius: 0;                       /* setzt die Rundung der Ecken */

    box-shadow: none;                       /* setzt Schatten oder Leuchteffekt */
    backdrop-filter: none;                  /* setzt Filtereffekte hinter dem Element */
    -webkit-backdrop-filter: none;          /* Safari-Unterstützung für den Hintergrundfilter */

    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */

    transition:                             /* setzt weiche Übergänge bei Zustandsänderungen */
        color 0.3s ease,                    /* animiert Änderungen der Schriftfarbe weich */
        border-color 0.3s ease,             /* animiert Änderungen der Rahmenfarbe weich */
        background 0.3s ease,               /* animiert Änderungen des Hintergrunds weich */
        transform 0.3s ease;                /* animiert Bewegungen oder Skalierungen weich */
}

.links-page .link-card:hover {
    transform: translateY(-4px);            /* verschiebt, dreht oder skaliert das Element */
    background: rgba(255, 255, 255, 0.105); /* setzt den Hintergrund */
    border-color: rgba(255, 255, 255, 0.42); /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.34); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-card.featured {
    background: rgba(255,255,255,0.06);     /* setzt den Hintergrund */
    border-color: rgba(255,255,255,0.28);   /* setzt die Rahmenfarbe unabhängig von der Schrift */
    border-radius: 0;                       /* setzt die Rundung der Ecken */
}

.links-page .link-card-title {
    display: block;                         /* zeigt das Element als Block an */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 17px;                        /* setzt die Schriftgröße */
    font-weight: 500;                       /* setzt die Schriftstärke */
    letter-spacing: 1.4px;                  /* setzt den Zeichenabstand */
    text-transform: uppercase;              /* steuert Groß-/Kleinschreibung */
    color: rgba(255,255,255,0.95);          /* setzt die Text- oder Iconfarbe */
}

.links-page .link-card-subtitle {
    display: block;                         /* zeigt das Element als Block an */
    margin-top: 4px;                        /* setzt den oberen Außenabstand */

    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 13px;                        /* setzt die Schriftgröße */
    font-weight: 300;                       /* setzt die Schriftstärke */
    letter-spacing: 0.5px;                  /* setzt den Zeichenabstand */
    color: rgba(255,255,255,0.58);          /* setzt die Text- oder Iconfarbe */
}

.links-page .link-card-icon {
    width: 38px;                            /* legt die Breite fest */
    height: 38px;                           /* legt die Höhe fest */

    display: flex;                          /* aktiviert Flexbox */
    align-items: center;                    /* richtet Elemente vertikal im Container aus */
    justify-content: center;                /* richtet Elemente horizontal im Container aus */
    flex-shrink: 0;                         /* verhindert oder erlaubt das Schrumpfen im Flex-Layout */

    border-radius: 50%;                     /* setzt die Rundung der Ecken */
    border: 1px solid rgba(255,255,255,0.24); /* setzt den Rahmen */
    color: rgba(255,255,255,0.9);           /* setzt die Text- oder Iconfarbe */

    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 12px;                        /* setzt die Schriftgröße */
    font-weight: 500;                       /* setzt die Schriftstärke */
    letter-spacing: 0.8px;                  /* setzt den Zeichenabstand */

    background: rgba(255,255,255,0.06);     /* setzt den Hintergrund */

    transition:                             /* setzt weiche Übergänge bei Zustandsänderungen */
        transform 0.35s ease,               /* animiert Bewegungen oder Skalierungen weich */
        border-color 0.35s ease,            /* animiert Änderungen der Rahmenfarbe weich */
        background 0.35s ease;              /* animiert Änderungen des Hintergrunds weich */
}

.links-page .link-card:hover .link-card-icon {
    transform: scale(1.08);                 /* verschiebt, dreht oder skaliert das Element */
    border-color: rgba(255,255,255,0.65);   /* setzt die Rahmenfarbe unabhängig von der Schrift */
    background: rgba(255,255,255,0.14);     /* setzt den Hintergrund */
}

.links-page .link-card:hover .link-card-arrow {
    transform: translateX(4px) translateY(-2px); /* verschiebt, dreht oder skaliert das Element */
    border-color: rgba(255,255,255,0.65);   /* setzt die Rahmenfarbe unabhängig von der Schrift */
    background: rgba(255,255,255,0.12);     /* setzt den Hintergrund */
}
.links-page .link-collection {
    display: flex;                          /* aktiviert Flexbox */
    flex-direction: column;                 /* ordnet Flex-Elemente untereinander oder nebeneinander an */
    gap: 34px;                              /* setzt den Abstand zwischen den Elementen */
    margin-top: 32px;                       /* setzt den oberen Außenabstand */
    width: 100%;                            /* legt die Breite fest */
}

.links-page .link-category {
    width: 100%;                            /* legt die Breite fest */
}

.links-page .link-category-title {
    margin-bottom: 16px;                    /* setzt den unteren Außenabstand */

    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 14px;                        /* setzt die Schriftgröße */
    font-weight: 400;                       /* setzt die Schriftstärke */
    letter-spacing: 2.4px;                  /* setzt den Zeichenabstand */
    text-transform: uppercase;              /* steuert Groß-/Kleinschreibung */

    color: rgba(255,255,255,0.72);          /* setzt die Text- oder Iconfarbe */
}

.links-page .link-category-grid {
    display: grid;                          /* aktiviert CSS Grid */
    grid-template-columns: repeat(2, minmax(550px, 1fr)); /* definiert die Spaltenaufteilung des Grids */
    column-gap: 60px;                       /* setzt den Abstand zwischen den Spalten */
    row-gap: 20px;                          /* setzt den Abstand zwischen den Zeilen */
}

/* =========================================================
   32 INDEX SPACING
   Abstände auf der Index-Seite
========================================================= */

body:not(.gallery-page):not(.about-page) #gallery {
    margin-top: -80px;                      /* zieht Gallery näher an About */
}

body:not(.gallery-page):not(.about-page) #contact {
    margin-top: -280px;                     /* zieht Contact nach oben */
}

body:not(.gallery-page):not(.about-page) #gallery {
    padding-bottom: 20px !important;        /* verringert unteren Innenabstand der Gallery */
    margin-bottom: 0 !important;            /* entfernt unteren Außenabstand der Gallery */
}

body:not(.gallery-page):not(.about-page) #contact {
    padding-top: 20px !important;           /* setzt oberen Innenabstand von Contact */
    margin-top: -80 !important;             /* negativer Abstand von Contact wie im Original */
}


/* =========================================================
   33 ABOUT VIDEO FADE IN
   Mehrfach vorhandene Fade-In-Regeln bleiben unverändert erhalten
========================================================= */

.about-page .about-video-loop video {
    opacity: 0;                             /* Video startet unsichtbar */
    animation: aboutVideoFadeIn 3s ease forwards; /* blendet Video in 3 Sekunden ein */
}

.about-page .about-video-loop video {
    opacity: 0;                             /* Video startet unsichtbar */
    animation: aboutVideoFadeIn 3s ease forwards; /* blendet Video in 3 Sekunden ein */
}

.about-page .about-video-loop video {
    opacity: 0;                             /* Video startet unsichtbar */
    animation: aboutVideoFadeIn 3s ease forwards; /* blendet Video in 3 Sekunden ein */
}

.about-page .about-video-loop video {
    opacity: 0;                             /* Video startet unsichtbar */
    animation: aboutVideoFadeIn 3s ease forwards; /* blendet Video in 3 Sekunden ein */
}

.about-page .about-video-loop video {
    opacity: 0;                             /* Video startet unsichtbar */
    animation: aboutVideoFadeIn 5s ease forwards; /* blendet Video in 5 Sekunden ein */
}

@keyframes aboutVideoFadeIn {
    from {
        opacity: 0;                         /* Start der Animation: unsichtbar */
    }

    to {
        opacity: 1;                         /* Ende der Animation: vollständig sichtbar */
    }
}

/* =========================================================
   AGE GATE + CONSENT POPUP
   Volljaehrigkeit, Datenschutz und Cookies
========================================================= */

.age-gate {
    position: fixed;                        /* fixiert das Element im sichtbaren Browserfenster */
    inset: 0;                               /* füllt alle Seiten des positionierten Elements */
    width: 100%;                            /* legt die Breite fest */
    height: 100%;                           /* legt die Höhe fest */
    background: rgba(0, 0, 0, 0.96);        /* setzt den Hintergrund */
    display: flex;                          /* aktiviert Flexbox */
    align-items: center;                    /* richtet Elemente vertikal im Container aus */
    justify-content: center;                /* richtet Elemente horizontal im Container aus */
    z-index: 999999;                        /* bestimmt die Ebenenreihenfolge */
}

.age-gate.hidden {
    display: none;                          /* blendet das Element aus */
}

.age-gate-box {
    width: 90%;                             /* legt die Breite fest */
    max-width: 620px;                       /* legt die maximale Breite fest */
    padding: 45px;                          /* setzt den Innenabstand */
    background: rgba(20, 20, 20, 0.98);     /* setzt den Hintergrund */
    border: 1px solid rgba(255,255,255,0.18); /* setzt den Rahmen */
    border-radius: 22px;                    /* setzt die Rundung der Ecken */
    text-align: center;                     /* richtet Text aus */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    color: white;                           /* setzt die Text- oder Iconfarbe */
}

.age-gate-box h2 {
    margin-bottom: 22px;                    /* setzt den unteren Außenabstand */
    font-size: 32px;                        /* setzt die Schriftgröße */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-weight: 400;                       /* setzt die Schriftstärke */
}

.age-gate-box p {
    max-width: none;                        /* legt die maximale Breite fest */
    margin-bottom: 32px;                    /* setzt den unteren Außenabstand */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    color: rgba(255,255,255,0.78);          /* setzt die Text- oder Iconfarbe */
}

.consent-options {
    display: flex;                          /* aktiviert Flexbox */
    flex-direction: column;                 /* ordnet Flex-Elemente untereinander oder nebeneinander an */
    gap: 16px;                              /* setzt den Abstand zwischen den Elementen */
    margin-bottom: 35px;                    /* setzt den unteren Außenabstand */
    text-align: left;                       /* richtet Text aus */
}

.consent-row {
    display: flex;                          /* aktiviert Flexbox */
    align-items: flex-start;                /* richtet Elemente vertikal im Container aus */
    gap: 12px;                              /* setzt den Abstand zwischen den Elementen */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 14px;                        /* setzt die Schriftgröße */
    line-height: 1.5;                       /* setzt die Zeilenhöhe */
    color: rgba(255,255,255,0.82);          /* setzt die Text- oder Iconfarbe */
    cursor: pointer;                        /* setzt die Cursor-Darstellung */
}

.consent-row input {
    margin-top: 4px;                        /* setzt den oberen Außenabstand */
    flex-shrink: 0;                         /* verhindert oder erlaubt das Schrumpfen im Flex-Layout */
}

.age-gate-buttons {
    display: flex;                          /* aktiviert Flexbox */
    gap: 18px;                              /* setzt den Abstand zwischen den Elementen */
    justify-content: center;                /* richtet Elemente horizontal im Container aus */
    flex-wrap: wrap;                        /* erklärt eine CSS-Eigenschaft für Layout oder Darstellung */
}

.age-gate-buttons button {
    min-width: 190px;                       /* legt die Mindestbreite fest */
    padding: 14px 20px;                     /* setzt den Innenabstand */
    border: 1px solid rgba(255,255,255,0.28); /* setzt den Rahmen */
    background: rgba(255,255,255,0.08);     /* setzt den Hintergrund */
    color: white;                           /* setzt die Text- oder Iconfarbe */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 14px;                        /* setzt die Schriftgröße */
    cursor: pointer;                        /* setzt die Cursor-Darstellung */
}

.age-gate-buttons button:hover {
    background: rgba(255,255,255,0.22);     /* setzt den Hintergrund */
}

.age-gate-buttons button:disabled {
    opacity: 0.35;                          /* setzt die Transparenz */
    cursor: not-allowed;                    /* setzt die Cursor-Darstellung */
}

.age-gate-buttons button:disabled:hover {
    background: rgba(255,255,255,0.08);     /* setzt den Hintergrund */
}

body.age-locked {
    overflow-x: hidden;                       /* steuert überstehenden Inhalt */
}

/* =========================================================
   AGE GATE LANGUAGE SWITCH
   Sprache direkt im Popup wechseln
========================================================= */

.age-gate-language {
    display: flex;                          /* aktiviert Flexbox */
    justify-content: center;                /* richtet Elemente horizontal im Container aus */
    gap: 12px;                              /* setzt den Abstand zwischen den Elementen */
    margin-bottom: 25px;                    /* setzt den unteren Außenabstand */
}

.age-lang-btn {
    width: 42px;                            /* legt die Breite fest */
    height: 36px;                           /* legt die Höhe fest */
    padding: 0;                             /* setzt den Innenabstand */
    border: 1px solid rgba(255,255,255,0.28); /* setzt den Rahmen */
    background: transparent;                /* setzt den Hintergrund */
    color: rgba(255,255,255,0.7);           /* setzt die Text- oder Iconfarbe */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 12px;                        /* setzt die Schriftgröße */
    cursor: pointer;                        /* setzt die Cursor-Darstellung */
}

.age-lang-btn:hover {
    background: rgba(255,255,255,0.14);     /* setzt den Hintergrund */
    color: white;                           /* setzt die Text- oder Iconfarbe */
}

.age-lang-btn.active {
    background: rgba(255,255,255,0.22);     /* setzt den Hintergrund */
    color: white;                           /* setzt die Text- oder Iconfarbe */
    border-color: white;                    /* setzt die Rahmenfarbe unabhängig von der Schrift */
}

/* =========================================================
   FOOTER LINKS
   Impressum, Datenschutz 
========================================================= */

.footer-content {
    display: flex;                          /* ordnet Copyright und Links */
    flex-direction: column;                 /* setzt alles untereinander */
    align-items: center;                    /* zentriert Inhalt */
    gap: 14px;                              /* Abstand zwischen Copyright und Links */
}

.footer-links {
    display: flex;                          /* Links nebeneinander */
    justify-content: center;                /* zentriert Links */
    align-items: center;                    /* vertikal ausrichten */
    gap: 22px;                              /* Abstand zwischen Links */
    flex-wrap: wrap;                        /* Umbruch auf kleinen Bildschirmen */
}

.footer-links a,
.footer-links button {
    font-family: "Montserrat", sans-serif;  /* gleiche Schrift */
    font-size: 13px;                        /* Schriftgröße */
    font-weight: 300;                       /* leichte Schrift */
    letter-spacing: 0.8px;                  /* Zeichenabstand */
    color: rgba(255,255,255,0.72);          /* dezente Farbe */
    text-decoration: none;                  /* keine Unterstreichung */
    background: transparent;                /* kein Button-Hintergrund */
    border: none;                           /* kein Button-Rahmen */
    padding: 0;                             /* keine Button-Fläche */
    cursor: pointer;                        /* klickbar */
}

.footer-links a:hover,
.footer-links button:hover {
    color: #ffffff;                         /* heller beim Hover */
    background: transparent;                /* bleibt transparent */
}

/* =========================================================
   LEGAL PAGES
   Impressum / Datenschutz Struktur
========================================================= */

.privacy-content {
    max-width: 900px;                       /* legt die maximale Breite fest */
    margin: 220px auto 120px auto;          /* setzt den Außenabstand */
    padding: 0 30px;                        /* setzt den Innenabstand */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    color: rgba(255,255,255,0.78);          /* setzt die Text- oder Iconfarbe */
}

.privacy-content h1 {
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 42px;                        /* setzt die Schriftgröße */
    font-weight: 400;                       /* setzt die Schriftstärke */
    margin-bottom: 50px;                    /* setzt den unteren Außenabstand */
    color: #ffffff;                         /* setzt die Text- oder Iconfarbe */
}

.privacy-content h2 {
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 24px;                        /* setzt die Schriftgröße */
    font-weight: 400;                       /* setzt die Schriftstärke */
    margin-top: 42px;                       /* setzt den oberen Außenabstand */
    margin-bottom: 18px;                    /* setzt den unteren Außenabstand */
    color: rgba(255,255,255,0.92);          /* setzt die Text- oder Iconfarbe */
}

.privacy-content p {
    max-width: none;                        /* legt die maximale Breite fest */
    margin-bottom: 20px;                    /* setzt den unteren Außenabstand */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 15px;                        /* setzt die Schriftgröße */
    line-height: 1.9;                       /* setzt die Zeilenhöhe */
    color: rgba(255,255,255,0.76);          /* setzt die Text- oder Iconfarbe */
}

.privacy-content ul {
    margin: 18px 0 28px 24px;               /* setzt den Außenabstand */
    padding-left: 18px;                     /* setzt den linken Innenabstand */
}

.privacy-content li {
    margin-bottom: 12px;                    /* setzt den unteren Außenabstand */
    font-family: "Montserrat", sans-serif;  /* setzt die Schriftart */
    font-size: 15px;                        /* setzt die Schriftgröße */
    line-height: 1.8;                       /* setzt die Zeilenhöhe */
    color: rgba(255,255,255,0.76);          /* setzt die Text- oder Iconfarbe */
}

.privacy-content a {
    color: #ffffff;                         /* setzt die Text- oder Iconfarbe */
    text-decoration: underline;             /* setzt oder entfernt Textdekorationen */
}

/* =========================================================
   PRIVACY LANGUAGE SWITCH
   Datenschutz DE / EN ueber obere Buttons umschalten
========================================================= */

.privacy-de,
.privacy-en {
    display: none;                          /* blendet das Element aus */
}

body.lang-de .privacy-de {
    display: block;                         /* zeigt das Element als Block an */
}

body.lang-en .privacy-en {
    display: block;                         /* zeigt das Element als Block an */
}

 .cookie-banner {
    position: fixed;                        /* fixiert das Element im sichtbaren Browserfenster */
    left: 20px;                             /* setzt den Abstand zur linken Kante */
    right: 20px;                            /* setzt den Abstand zur rechten Kante */
    bottom: 20px;                           /* setzt den Abstand zur unteren Kante */
    z-index: 9999;                          /* bestimmt die Ebenenreihenfolge */
    background: #ffffff;                    /* setzt den Hintergrund */
    border: 1px solid #cccccc;              /* setzt den Rahmen */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); /* setzt Schatten oder Leuchteffekt */
    padding: 20px;                          /* setzt den Innenabstand */
    max-width: 720px;                       /* legt die maximale Breite fest */
    margin: 0 auto;                         /* setzt den Außenabstand */
    font-family: Arial, sans-serif;         /* setzt die Schriftart */
  }

  .cookie-banner[hidden] {
    display: none;                          /* blendet das Element aus */
  }

  .cookie-banner h2 {
    margin-top: 0;                          /* setzt den oberen Außenabstand */
  }

  .cookie-banner label {
    display: block;                         /* zeigt das Element als Block an */
    margin: 10px 0;                         /* setzt den Außenabstand */
  }

  .cookie-banner__buttons {
    display: flex;                          /* aktiviert Flexbox */
    flex-wrap: wrap;                        /* erklärt eine CSS-Eigenschaft für Layout oder Darstellung */
    gap: 10px;                              /* setzt den Abstand zwischen den Elementen */
    margin-top: 15px;                       /* setzt den oberen Außenabstand */
  }

  .cookie-banner button,
  #open-cookie-settings {
    cursor: pointer;                        /* setzt die Cursor-Darstellung */
    padding: 10px 14px;                     /* setzt den Innenabstand */
  }

  .cookie-banner button.is-active {
    font-weight: bold;                      /* setzt die Schriftstärke */
    border: 2px solid #000000;              /* setzt den Rahmen */
  }

  .cookie-message {
    margin-top: 15px;                       /* setzt den oberen Außenabstand */
    padding: 10px;                          /* setzt den Innenabstand */
    background: #e8f7e8;                    /* setzt den Hintergrund */
    border: 1px solid #8bc48b;              /* setzt den Rahmen */
  }

  footer {
    position: relative;                     /* setzt einen Bezugspunkt für Positionierung und z-index */
    z-index: 20;                            /* bestimmt die Ebenenreihenfolge */
}

.footer-links,
.footer-links a {
    position: relative;                     /* setzt einen Bezugspunkt für Positionierung und z-index */
    z-index: 21;                            /* bestimmt die Ebenenreihenfolge */
    pointer-events: auto;                   /* steuert, ob das Element Mausereignisse annimmt */
}

.lightbox:not(.active) {
    pointer-events: none;                   /* steuert, ob das Element Mausereignisse annimmt */
}

/* =========================================================
   FIX LANGUAGE SWITCHER VISIBILITY
   DE und EN bleiben immer sichtbar
========================================================= */
.language-switcher {
    display: flex;                          /* aktiviert Flexbox */
    flex-wrap: nowrap;                      /* erklärt eine CSS-Eigenschaft für Layout oder Darstellung */
    overflow: visible;                      /* steuert überstehenden Inhalt */
}

.language-switcher button {
    display: flex !important;               /* legt fest, wie das Element dargestellt wird */
    opacity: 1 !important;                  /* setzt die Transparenz */
    visibility: visible !important;         /* steuert die Sichtbarkeit */
    flex: 0 0 40px;                         /* setzt Flex-Größe, Schrumpfen und Basisbreite */
}

.language-switcher button:not(.active) {
    color: rgba(255,255,255,0.85);          /* setzt die Text- oder Iconfarbe */
    border-color: rgba(255,255,255,0.35);   /* setzt die Rahmenfarbe unabhängig von der Schrift */
    background: transparent;                /* setzt den Hintergrund */
}

body.links-page {
    background: #111;                       /* setzt den Hintergrund */
    position: relative;                     /* setzt einen Bezugspunkt für Positionierung und z-index */
    overflow-x: hidden;                     /* steuert horizontalen Überlauf */
}

body.links-page::before {
    content: "";                            /* erzeugt Inhalt für Pseudoelemente */
    position: fixed;                        /* fixiert das Element im sichtbaren Browserfenster */
    inset: 0;                               /* füllt alle Seiten des positionierten Elements */

    background-image: url("images/WhatsApp\ Image\ 2026-06-10\ at\ 21.16.47.jpeg"); /* setzt das Hintergrundbild */
    background-size: 100%;                  /* steuert Größe bzw. Zoom des Hintergrundbildes */
    background-position: 50% 1%;            /* steuert den sichtbaren Bildausschnitt */
    background-repeat: no-repeat;           /* steuert, ob sich das Hintergrundbild wiederholt */

    z-index: 0;                             /* bestimmt die Ebenenreihenfolge */
    pointer-events: none;                   /* steuert, ob das Element Mausereignisse annimmt */
}

body.links-page::after {
    content: "";                            /* erzeugt Inhalt für Pseudoelemente */
    position: fixed;                        /* fixiert das Element im sichtbaren Browserfenster */
    inset: 0;                               /* füllt alle Seiten des positionierten Elements */

    background: rgba(0, 0, 0, 0.45);        /* setzt den Hintergrund */

    z-index: 1;                             /* bestimmt die Ebenenreihenfolge */
    pointer-events: none;                   /* steuert, ob das Element Mausereignisse annimmt */
}

body.links-page header {
    position: fixed;                       /* Header bleibt wie auf About oben stehen und nimmt keinen Platz im normalen Layout ein */
    top: 0;                                /* Header sitzt direkt am oberen Browserrand */
    left: 0;                               /* Header beginnt direkt am linken Browserrand */
    width: 100%;                           /* Header nimmt die volle Browserbreite ein */
    z-index: 1000;                         /* Header liegt über Hintergrundbild und Overlay */
}

body.links-page section,
body.links-page footer {
    position: relative;                    /* Nur Seiteninhalt und Footer werden über das Links-Hintergrundbild gelegt */
    z-index: 2;                            /* Inhalt und Footer liegen über ::before und ::after */
}
/* =========================================================
   Symbole und Button leuchten auf Links.html
========================================================= */
.links-page .link-card-symbol img {
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; /* setzt weiche Übergänge bei Zustandsänderungen */
}

.links-page .link-card:hover .link-card-symbol img {
    opacity: 1;                             /* setzt die Transparenz */
    transform: scale(1.08);                 /* verschiebt, dreht oder skaliert das Element */
}

/* OnlyFans */
.links-page .link-onlyfans:hover {
    border-color: #2f95f5;                  /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 0 18px rgba(47, 149, 245, 0.45); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-onlyfans:hover .link-card-symbol img {
    filter: drop-shadow(0 0 8px rgba(47, 149, 245, 0.9)) /* setzt den Leuchteffekt oder Bildfilter */
            drop-shadow(0 0 18px rgba(47, 149, 245, 0.55)); /* Teil des Symbol-Leuchteffekts */
}

/* BestFans */
.links-page .link-bestfans:hover {
    border-color: #f706ff;                  /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 0 18px rgba(247, 6, 255, 0.42); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-bestfans:hover .link-card-symbol img {
    filter: drop-shadow(0 0 8px rgba(247, 6, 255, 0.9)) /* setzt den Leuchteffekt oder Bildfilter */
            drop-shadow(0 0 18px rgba(247, 6, 255, 0.55)); /* Teil des Symbol-Leuchteffekts */
}

/* X */
.links-page .link-x:hover {
    border-color: #ffffff;                  /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.32); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-x:hover .link-card-symbol img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85)) /* setzt den Leuchteffekt oder Bildfilter */
            drop-shadow(0 0 18px rgba(255, 255, 255, 0.45)); /* Teil des Symbol-Leuchteffekts */
}

/* Reddit */
.links-page .link-reddit:hover {
    border-color: #ff4500;                  /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 0 18px rgba(255, 69, 0, 0.42); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-reddit:hover .link-card-symbol img {
    filter: drop-shadow(0 0 8px rgba(255, 69, 0, 0.9)) /* setzt den Leuchteffekt oder Bildfilter */
            drop-shadow(0 0 18px rgba(255, 69, 0, 0.55)); /* Teil des Symbol-Leuchteffekts */
}

/* Chaturbate */
.links-page .link-chaturbate:hover {
    border-color: #f1c500;                  /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 0 18px rgba(241, 197, 0, 0.42); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-chaturbate:hover .link-card-symbol img {
    filter: drop-shadow(0 0 8px rgba(241, 197, 0, 0.9)) /* setzt den Leuchteffekt oder Bildfilter */
            drop-shadow(0 0 18px rgba(241, 197, 0, 0.55)); /* Teil des Symbol-Leuchteffekts */
}

/* Kinkyfans */
.links-page .link-kinkyfans:hover {
    border-color: #1800f5;                  /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.42); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-kinkyfans:hover .link-card-symbol img {
    filter: drop-shadow(0 0 8px rgba(1, 37, 240, 0.9)) /* setzt den Leuchteffekt oder Bildfilter */
            drop-shadow(0 0 18px rgba(245, 245, 244, 0.55)); /* Teil des Symbol-Leuchteffekts */
}

/* MyMember */
.links-page .link-mymember:hover {
    border-color: #1800f5;                  /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 0 18px rgba(52, 66, 148, 0.42); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-mymember:hover .link-card-symbol img {
    filter: drop-shadow(0 0 8px rgba(1, 37, 240, 0.9)) /* setzt den Leuchteffekt oder Bildfilter */
            drop-shadow(0 0 18px rgba(2, 183, 238, 0.55)); /* Teil des Symbol-Leuchteffekts */
}

/* Amazon */
.links-page .link-amazon:hover {
    border-color: #f76505;                  /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.42); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-amazon:hover .link-card-symbol img {
    filter: drop-shadow(0 0 8px rgba(255, 174, 0, 0.9)) /* setzt den Leuchteffekt oder Bildfilter */
            drop-shadow(0 0 18px rgba(255, 255, 255, 0.55)); /* Teil des Symbol-Leuchteffekts */
}

/* paypal */
.links-page .link-paypal:hover {
    border-color: #1800f5;                  /* setzt die Rahmenfarbe unabhängig von der Schrift */
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.42); /* setzt Schatten oder Leuchteffekt */
}

.links-page .link-paypal:hover .link-card-symbol img {
    filter: drop-shadow(0 0 8px rgba(1, 37, 240, 0.9)) /* setzt den Leuchteffekt oder Bildfilter */
            drop-shadow(0 0 18px rgba(245, 245, 244, 0.55)); /* Teil des Symbol-Leuchteffekts */
}

/* =========================================================
   SERVICES PAGE
   Vier einzelne Service-Panels mit Bild/Text Grid
========================================================= */

.services-page {
    position: relative; /* legt die Positionierungsart des Elements fest */
    overflow-x: hidden; /* steuert horizontalen Überlauf */
    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
}

.services-page .services-wrapper {
    width: 70%;                              /* Breite bleibt wie bisher */
    margin: 200px auto 100px auto;          /* Gleicher oberer Abstand wie About und Links */

    display: flex;                          /* Service-Panels bleiben untereinander angeordnet */
    flex-direction: column;                 /* Panels bleiben vertikal gestapelt */
    gap: 70px;                              /* Abstand zwischen den Service-Panels bleibt erhalten */

    padding-top: 0 !important;              /* Entfernt den oberen Section-Innenabstand direkt am Wrapper */
    padding-bottom: 0;                      /* Verhindert zusätzlichen leeren Innenraum unten im Wrapper */

    position: relative;                     /* Wrapper bleibt über dem Hintergrund */
    z-index: 2;                             /* Wrapper bleibt sichtbar über dem Overlay */
}

.services-page .service-panel {
    min-height: 260px; /* legt die Mindesthöhe fest */

    display: grid; /* legt die Darstellungsart des Elements fest */
    grid-template-columns: 340px 1fr; /* definiert die Spalten im CSS-Grid */
    align-items: center; /* richtet Elemente quer zur Hauptachse aus */
    column-gap: 50px; /* setzt den Abstand zwischen Spalten */

    padding: 10px; /* setzt den Innenabstand des Elements */

    background: rgba(20, 20, 20, 0.82); /* setzt den Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.12); /* setzt den Rahmen */
    border-radius: 28px; /* setzt die Rundung der Ecken */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
}

.services-page .service-panel:first-child {
    transform: translateX(-380px); /* verschiebt, skaliert, dreht oder verzerrt das Element */
}
.services-page .service-panel:nth-child(2) {
    transform: translateX(380px); /* verschiebt, skaliert, dreht oder verzerrt das Element */
}

.services-page .service-panel:nth-child(3) {
    transform: translateX(-380px); /* verschiebt, skaliert, dreht oder verzerrt das Element */
}
.services-page .service-panel:nth-child(4) {
    transform: translateX(380px); /* verschiebt, skaliert, dreht oder verzerrt das Element */
}

.services-page .service-image {
    width: 290px; /* legt die Breite des Elements fest */
    height: 290px; /* legt die Höhe des Elements fest */

    overflow: visible; /* steuert überstehenden Inhalt */
    border-radius: 18px; /* setzt die Rundung der Ecken */
    margin-left: 100px; /* setzt den linken Außenabstand */
}

.services-page .service-image img {
    width: 100%; /* legt die Breite des Elements fest */
    height: 100%; /* legt die Höhe des Elements fest */

    object-fit: cover; /* legt fest, wie Medien den Container füllen */
    object-position: center center; /* legt den sichtbaren Medienausschnitt fest */

    display: block; /* legt die Darstellungsart des Elements fest */
    filter: brightness(0.78); /* setzt visuelle Filtereffekte */
}


.services-page .service-text {
    max-width: 680px; /* legt die maximale Breite fest */
}
/* =========================================================
  01 Custom Content
========================================================= */
.services-page .service-text-content h2 {
    margin-bottom: 34px; /* setzt den unteren Außenabstand */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 80px; /* setzt die Schriftgröße */
    font-weight: 400; /* setzt die Schriftstärke */
    line-height: 1.1; /* setzt die Zeilenhöhe */
    letter-spacing: 1px; /* setzt den Zeichenabstand */

    color: rgba(255,255,255,0.92); /* setzt die Textfarbe */
    white-space: nowrap; /* verhindert Zeilenumbruch */
    margin-left: 80px; /* pixelgenau nach rechts */
}

.services-page .service-text-content p {
    max-width: 680px; /* legt die maximale Breite fest */
    margin: 0; /* setzt den Außenabstand des Elements */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 15px; /* setzt die Schriftgröße */
    font-weight: 300; /* setzt die Schriftstärke */
    line-height: 1.9; /* setzt die Zeilenhöhe */
    letter-spacing: 0.2px; /* setzt den Zeichenabstand */

    color: rgba(255,255,255,0.72); /* setzt die Textfarbe */
    margin-left: 80px; /* pixelgenau nach rechts */
    white-space: nowrap; /* verhindert Zeilenumbruch */
}
.services-page .service-video-panel {
    grid-template-columns: 1fr 290px; /* definiert die Spalten im CSS-Grid */
}

.services-page .service-video-panel .service-text {
    grid-column: 1; /* legt die Grid-Spalte eines Elements fest */
    grid-row: 1; /* legt die Grid-Zeile eines Elements fest */
}

.services-page .service-video-preview {
    grid-column: 2; /* legt die Grid-Spalte eines Elements fest */
    grid-row: 1; /* legt die Grid-Zeile eines Elements fest */

    width: 290px; /* legt die Breite des Elements fest */
    height: 280px; /* legt die Höhe des Elements fest */

    overflow: hidden; /* steuert überstehenden Inhalt */
    border-radius: 18px; /* setzt die Rundung der Ecken */
    margin-left:auto; /* setzt den linken Außenabstand */
}

.services-page .service-video-preview video {
    width: 100%; /* legt die Breite des Elements fest */
    height: 100%; /* legt die Höhe des Elements fest */

    object-fit: cover; /* legt fest, wie Medien den Container füllen */
    object-position: center center; /* legt den sichtbaren Medienausschnitt fest */

    display: block; /* legt die Darstellungsart des Elements fest */
    filter: brightness(0.78); /* setzt visuelle Filtereffekte */
}

.footer-counter {
    font-size: 10px; /* setzt die Schriftgröße */
    opacity: 0.3; /* setzt die Transparenz */
    margin-top: 6px; /* setzt den oberen Außenabstand */
    text-align: center; /* richtet Text horizontal aus */
    font-family: inherit; /* setzt die Schriftart */
    color: inherit; /* setzt die Textfarbe */
}
/* =========================================================
 02 Custom Chat
========================================================= */

.services-page .service-text-chat h2 {
    margin-bottom: 34px; /* setzt den unteren Außenabstand */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 80px; /* setzt die Schriftgröße */
    font-weight: 400; /* setzt die Schriftstärke */
    line-height: 1.1; /* setzt die Zeilenhöhe */
    letter-spacing: 1px; /* setzt den Zeichenabstand */

    color: rgba(255,255,255,0.92); /* setzt die Textfarbe */
    white-space: nowrap; /* verhindert Zeilenumbruch */
    margin-left: 700px; /* pixelgenau nach rechts */
}

.services-page .service-text-chat p {
    max-width: 680px; /* legt die maximale Breite fest */
    margin: 0; /* setzt den Außenabstand des Elements */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 15px; /* setzt die Schriftgröße */
    font-weight: 300; /* setzt die Schriftstärke */
    line-height: 1.9; /* setzt die Zeilenhöhe */
    letter-spacing: 0.2px; /* setzt den Zeichenabstand */

    color: rgba(255,255,255,0.72); /* setzt die Textfarbe */
    margin-left: 695px; /* pixelgenau nach rechts */
    white-space: nowrap; /* verhindert Zeilenumbruch */
}
.services-page .service-video-panel {
    grid-template-columns: 1fr 290px; /* definiert die Spalten im CSS-Grid */
}

.services-page .service-video-panel .service-text {
    grid-column: 1; /* legt die Grid-Spalte eines Elements fest */
    grid-row: 1; /* legt die Grid-Zeile eines Elements fest */
}

.services-page .service-video-preview-chat {
    grid-column: 2; /* legt die Grid-Spalte eines Elements fest */
    grid-row: 1; /* legt die Grid-Zeile eines Elements fest */

    width: 290px; /* legt die Breite des Elements fest */
    height: 280px; /* legt die Höhe des Elements fest */

    overflow: hidden; /* steuert überstehenden Inhalt */
    border-radius: 18px; /* setzt die Rundung der Ecken */
    margin-left:-390px; /* setzt den linken Außenabstand */

    background: #000; /* setzt den Hintergrund */
}

.services-page .service-video-preview-chat video {
    width: 100%; /* legt die Breite des Elements fest */
    height: 100%; /* legt die Höhe des Elements fest */

    object-fit: contain; /* legt fest, wie Medien den Container füllen */
    object-position: 50% 50%; /* legt den sichtbaren Medienausschnitt fest */

    display: block; /* legt die Darstellungsart des Elements fest */
    filter: brightness(0.78); /* setzt visuelle Filtereffekte */
}

/* =========================================================
 03 Wish List 
========================================================= */

.services-page .service-text-wish h2 {
    margin-bottom: 34px; /* setzt den unteren Außenabstand */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 80px; /* setzt die Schriftgröße */
    font-weight: 400; /* setzt die Schriftstärke */
    line-height: 1.1; /* setzt die Zeilenhöhe */
    letter-spacing: 1px; /* setzt den Zeichenabstand */

    color: rgba(255,255,255,0.92); /* setzt die Textfarbe */
    white-space: nowrap; /* verhindert Zeilenumbruch */
    margin-left: 80px; /* pixelgenau nach rechts */
}

.services-page .service-text-wish p {
    max-width: 680px; /* legt die maximale Breite fest */
    margin: 0; /* setzt den Außenabstand des Elements */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 15px; /* setzt die Schriftgröße */
    font-weight: 300; /* setzt die Schriftstärke */
    line-height: 1.9; /* setzt die Zeilenhöhe */
    letter-spacing: 0.2px; /* setzt den Zeichenabstand */

    color: rgba(255,255,255,0.72); /* setzt die Textfarbe */
    margin-left: 79px; /* pixelgenau nach rechts */
    white-space: nowrap; /* verhindert Zeilenumbruch */
}
.services-page .service-video-panel {
    grid-template-columns: 1fr 290px; /* definiert die Spalten im CSS-Grid */
}

.services-page .service-video-panel .service-text {
    grid-column: 1; /* legt die Grid-Spalte eines Elements fest */
    grid-row: 1; /* legt die Grid-Zeile eines Elements fest */
}

.services-page .service-video-preview-wish {
    grid-column: 2; /* legt die Grid-Spalte eines Elements fest */
    grid-row: 1; /* legt die Grid-Zeile eines Elements fest */

    width: 290px; /* legt die Breite des Elements fest */
    height: 280px; /* legt die Höhe des Elements fest */

    overflow: hidden; /* steuert überstehenden Inhalt */
    border-radius: 18px; /* setzt die Rundung der Ecken */
    margin-left: auto; /* setzt den linken Außenabstand */
    background: #000; /* setzt den Hintergrund */
}

.services-page .service-video-preview-wish video {
    width: 100%; /* legt die Breite des Elements fest */
    height: 100%; /* legt die Höhe des Elements fest */

    object-fit: contain; /* legt fest, wie Medien den Container füllen */
    object-position: center center; /* legt den sichtbaren Medienausschnitt fest */

    display: block; /* legt die Darstellungsart des Elements fest */
    filter: brightness(0.78); /* setzt visuelle Filtereffekte */
}


.footer-counter {
    font-size: 10px; /* setzt die Schriftgröße */
    opacity: 0.3; /* setzt die Transparenz */
    margin-top: 6px; /* setzt den oberen Außenabstand */
    text-align: center; /* richtet Text horizontal aus */
    font-family: inherit; /* setzt die Schriftart */
    color: inherit; /* setzt die Textfarbe */
}

.services-page .service-panel-link {
    display: grid; /* legt die Darstellungsart des Elements fest */
    text-decoration: none; /* setzt oder entfernt Textdekorationen */
    color: inherit; /* setzt die Textfarbe */
    cursor: pointer; /* setzt die Cursor-Darstellung */
}

.services-page.custom-content-page .service-panel {
    display: grid; /* legt die Darstellungsart des Elements fest */
    grid-template-columns: 1fr 300px; /* definiert die Spalten im CSS-Grid */
    align-items: center; /* richtet Elemente quer zur Hauptachse aus */
}

.services-page.custom-content-page .service-text-content-custom-content h2 {
    margin-bottom: 34px; /* setzt den unteren Außenabstand */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 80px; /* setzt die Schriftgröße */
    font-weight: 400; /* setzt die Schriftstärke */
    line-height: 1.1; /* setzt die Zeilenhöhe */
    letter-spacing: 1px; /* setzt den Zeichenabstand */

    color: rgba(255,255,255,0.92); /* setzt die Textfarbe */
    white-space: nowrap; /* steuert Zeilenumbrüche und Leerzeichen */
}

.services-page.custom-content-page .service-text-content-custom-content p {
    max-width: 680px; /* legt die maximale Breite fest */
    margin: 0; /* setzt den Außenabstand des Elements */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 15px; /* setzt die Schriftgröße */
    font-weight: 300; /* setzt die Schriftstärke */
    line-height: 1.9; /* setzt die Zeilenhöhe */
    letter-spacing: 0.2px; /* setzt den Zeichenabstand */

    color: rgba(255,255,255,0.72); /* setzt die Textfarbe */
    white-space: nowrap; /* steuert Zeilenumbrüche und Leerzeichen */
}

.services-page .service-overview-links {
    margin-top: 40px; /* setzt den oberen Außenabstand */

    display: flex; /* legt die Darstellungsart des Elements fest */
    justify-content: center; /* richtet Elemente entlang der Hauptachse aus */
    align-items: center; /* richtet Elemente quer zur Hauptachse aus */
    gap: 36px; /* setzt den Abstand zwischen Elementen */
}

.services-page .service-overview-links a {
    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 22px; /* setzt die Schriftgröße */
    font-weight: 400; /* setzt die Schriftstärke */
    letter-spacing: 1px; /* setzt den Zeichenabstand */

    color: rgba(255,255,255,0.9); /* setzt die Textfarbe */
    text-decoration: none; /* setzt oder entfernt Textdekorationen */
}

.services-page .service-overview-links a:hover {
    color: #ffffff; /* setzt die Textfarbe */
    text-decoration: underline; /* setzt oder entfernt Textdekorationen */
}

/* =========================================================
   MOBILE VERSION
   ========================================================= */

@media (max-width: 768px) {

    body.services-page {
        overflow-x: hidden; /* steuert horizontalen Überlauf */
    }

    .services-page .services-wrapper {
        width: 100%; /* legt die Breite des Elements fest */
        padding: 120px 20px 60px; /* setzt den Innenabstand des Elements */
        box-sizing: border-box; /* legt fest, wie Breite und Höhe berechnet werden */
    }

    .services-page .service-panel {
        display: flex; /* legt die Darstellungsart des Elements fest */
        flex-direction: column; /* legt die Richtung von Flex-Elementen fest */
        align-items: center; /* richtet Elemente quer zur Hauptachse aus */
        text-align: center; /* richtet Text horizontal aus */

        width: 100%; /* legt die Breite des Elements fest */
        margin: 0 auto 70px; /* setzt den Außenabstand des Elements */
        box-sizing: border-box; /* legt fest, wie Breite und Höhe berechnet werden */
    }

    .services-page .service-text-content,
    .services-page .service-text-chat,
    .services-page .service-text-wish,
    .services-page .service-text-content-custom-content {
        width: 100%; /* legt die Breite des Elements fest */
        max-width: 100%; /* legt die maximale Breite fest */

        margin-left: 0 !important; /* setzt den linken Außenabstand */
        margin-right: 0 !important; /* setzt den rechten Außenabstand */

        text-align: center; /* richtet Text horizontal aus */
    }

    .services-page .service-text-content h2,
    .services-page .service-text-chat h2,
    .services-page .service-text-wish h2,
    .services-page .service-text-content-custom-content h2 {
        font-size: 38px; /* setzt die Schriftgröße */
        line-height: 1.15; /* setzt die Zeilenhöhe */

        margin-left: 0 !important; /* setzt den linken Außenabstand */
        margin-right: 0 !important; /* setzt den rechten Außenabstand */
        margin-bottom: 24px; /* setzt den unteren Außenabstand */

        white-space: normal; /* steuert Zeilenumbrüche und Leerzeichen */
        text-align: center; /* richtet Text horizontal aus */
    }

    .services-page .service-text-content p,
    .services-page .service-text-chat p,
    .services-page .service-text-wish p,
    .services-page .service-text-content-custom-content p {
        font-size: 15px; /* setzt die Schriftgröße */
        line-height: 1.7; /* setzt die Zeilenhöhe */

        margin-left: 0 !important; /* setzt den linken Außenabstand */
        margin-right: 0 !important; /* setzt den rechten Außenabstand */

        white-space: normal; /* steuert Zeilenumbrüche und Leerzeichen */
        text-align: center; /* richtet Text horizontal aus */
    }

    .services-page .service-video-preview,
    .services-page .service-video-preview-chat,
    .services-page .service-video-preview-wish {
        width: 220px; /* legt die Breite des Elements fest */
        height: 220px; /* legt die Höhe des Elements fest */

        margin-left: 0 !important; /* setzt den linken Außenabstand */
        margin-right: 0 !important; /* setzt den rechten Außenabstand */
        margin-top: 30px; /* setzt den oberen Außenabstand */

        border-radius: 18px; /* setzt die Rundung der Ecken */
        overflow: hidden; /* steuert überstehenden Inhalt */
    }

    .services-page .service-video-preview video,
    .services-page .service-video-preview-chat video,
    .services-page .service-video-preview-wish video {
        width: 100%; /* legt die Breite des Elements fest */
        height: 100%; /* legt die Höhe des Elements fest */

        object-fit: cover; /* legt fest, wie Medien den Container füllen */
        object-position: center center; /* legt den sichtbaren Medienausschnitt fest */

        display: block; /* legt die Darstellungsart des Elements fest */
    }

    .services-page .service-overview-links {
        display: flex; /* legt die Darstellungsart des Elements fest */
        flex-direction: column; /* legt die Richtung von Flex-Elementen fest */
        gap: 18px; /* setzt den Abstand zwischen Elementen */

        margin-top: 40px; /* setzt den oberen Außenabstand */
        text-align: center; /* richtet Text horizontal aus */
    }

    .services-page .service-overview-links a {
        font-size: 18px; /* setzt die Schriftgröße */
    }
}

/* =========================================================
   MOBILE AGE GATE FIX
   ========================================================= */

@media (max-width: 768px) {

    .age-gate {
        overflow-y: auto; /* steuert vertikalen Überlauf */
        overflow-x: hidden; /* steuert horizontalen Überlauf */
        align-items: flex-start; /* richtet Elemente quer zur Hauptachse aus */
        padding: 20px 14px; /* setzt den Innenabstand des Elements */
        box-sizing: border-box; /* legt fest, wie Breite und Höhe berechnet werden */
    }

    .age-gate-box {
        width: 100%; /* legt die Breite des Elements fest */
        max-width: 420px; /* legt die maximale Breite fest */
        max-height: none; /* legt die maximale Höhe fest */
        margin: 20px auto; /* setzt den Außenabstand des Elements */
        box-sizing: border-box; /* legt fest, wie Breite und Höhe berechnet werden */
    }

    .age-gate-box p {
        max-height: none; /* legt die maximale Höhe fest */
        overflow: visible; /* steuert überstehenden Inhalt */
    }
}

/* =========================================================
   MOBILE BURGER MENU FIX
   ========================================================= */

.mobile-menu-toggle {
    display: none; /* legt die Darstellungsart des Elements fest */
}

@media (max-width: 768px) {

    #site-header {
        position: relative; /* legt die Positionierungsart des Elements fest */
        width: 100%; /* legt die Breite des Elements fest */
        z-index: 9999; /* bestimmt die Ebenenreihenfolge */
    }

    #site-header nav {
        position: relative; /* legt die Positionierungsart des Elements fest */
        width: 100%; /* legt die Breite des Elements fest */
        box-sizing: border-box; /* legt fest, wie Breite und Höhe berechnet werden */

        display: flex; /* legt die Darstellungsart des Elements fest */
        align-items: center; /* richtet Elemente quer zur Hauptachse aus */
        justify-content: space-between; /* richtet Elemente entlang der Hauptachse aus */

        padding: 12px 16px; /* setzt den Innenabstand des Elements */
    }

    .mobile-menu-toggle {
        display: block; /* legt die Darstellungsart des Elements fest */

        background: transparent; /* setzt den Hintergrund */
        border: none; /* setzt den Rahmen */
        color: rgba(255,255,255,0.95); /* setzt die Textfarbe */

        font-size: 34px; /* setzt die Schriftgröße */
        line-height: 1; /* setzt die Zeilenhöhe */
        cursor: pointer; /* setzt die Cursor-Darstellung */

        padding: 0; /* setzt den Innenabstand des Elements */
        margin: 0; /* setzt den Außenabstand des Elements */

        position: relative; /* legt die Positionierungsart des Elements fest */
        z-index: 10001; /* bestimmt die Ebenenreihenfolge */
    }

    #site-header .logo {
        position: static !important; /* legt die Positionierungsart des Elements fest */
        margin: 0 !important; /* setzt den Außenabstand des Elements */
        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
    }

    #site-header .logo img {
        max-width: 120px; /* legt die maximale Breite fest */
        height: auto; /* legt die Höhe des Elements fest */
        display: block; /* legt die Darstellungsart des Elements fest */
    }

    #site-header .language-switcher {
        display: flex; /* legt die Darstellungsart des Elements fest */
        gap: 6px; /* setzt den Abstand zwischen Elementen */
        position: static !important; /* legt die Positionierungsart des Elements fest */
        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
    }

    #site-header .language-switcher button {
        font-size: 11px; /* setzt die Schriftgröße */
        padding: 4px 6px; /* setzt den Innenabstand des Elements */
    }

   #site-header .nav-left {
    position: fixed !important; /* legt die Positionierungsart des Elements fest */
    top: 60px; /* setzt den Abstand zur oberen Kante */
    left: 0; /* setzt den Abstand zur linken Kante */
    right: 0; /* setzt den Abstand zur rechten Kante */

    width: auto; /* legt die Breite des Elements fest */
    max-width: none; /* legt die maximale Breite fest */
    box-sizing: border-box; /* legt fest, wie Breite und Höhe berechnet werden */

    display: none; /* legt die Darstellungsart des Elements fest */

    padding: 22px 24px; /* setzt den Innenabstand des Elements */
    background: rgba(0,0,0,0.95); /* setzt den Hintergrund */
    backdrop-filter: blur(10px); /* setzt Filtereffekte hinter dem Element */

    z-index: 10000; /* bestimmt die Ebenenreihenfolge */

    transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
    margin: 0 !important; /* setzt den Außenabstand des Elements */
}

    #site-header.nav-open .nav-left {
        display: block; /* legt die Darstellungsart des Elements fest */
    }

    #site-header nav ul {
        display: flex; /* legt die Darstellungsart des Elements fest */
        flex-direction: column; /* legt die Richtung von Flex-Elementen fest */
        align-items: flex-start; /* richtet Elemente quer zur Hauptachse aus */
        gap: 16px; /* setzt den Abstand zwischen Elementen */

        margin: 0; /* setzt den Außenabstand des Elements */
        padding: 0; /* setzt den Innenabstand des Elements */
        width: 100%; /* legt die Breite des Elements fest */

        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
    }

    #site-header nav ul li {
        list-style: none; /* steuert die Listenzeichen */
    }

    #site-header nav ul li a {
        display: block; /* legt die Darstellungsart des Elements fest */

        font-size: 18px; /* setzt die Schriftgröße */
        text-align: left; /* richtet Text horizontal aus */
        white-space: nowrap; /* steuert Zeilenumbrüche und Leerzeichen */

        color: rgba(255,255,255,0.95); /* setzt die Textfarbe */
        text-decoration: none; /* setzt oder entfernt Textdekorationen */
    }

    #site-header .social-icons {
        margin-top: 20px; /* setzt den oberen Außenabstand */

        display: flex; /* legt die Darstellungsart des Elements fest */
        flex-wrap: wrap; /* steuert den Zeilenumbruch von Flex-Elementen */
        gap: 10px; /* setzt den Abstand zwischen Elementen */

        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
    }

    body {
        overflow-x: hidden; /* steuert horizontalen Überlauf */
    }
}

/* =========================================================
   MOBILE SCROLLBAR AUSBLENDEN
   ========================================================= */

@media (max-width: 768px) {

    html,
    body {
        scrollbar-width: none; /* setzt eine CSS-Eigenschaft für Layout oder Darstellung */
        -ms-overflow-style: none; /* setzt eine CSS-Eigenschaft für Layout oder Darstellung */
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none; /* legt die Darstellungsart des Elements fest */
        width: 0; /* legt die Breite des Elements fest */
        height: 0; /* legt die Höhe des Elements fest */
    }

    #ageGate {
        scrollbar-width: none; /* setzt eine CSS-Eigenschaft für Layout oder Darstellung */
        -ms-overflow-style: none; /* setzt eine CSS-Eigenschaft für Layout oder Darstellung */
    }

    #ageGate::-webkit-scrollbar {
        display: none; /* legt die Darstellungsart des Elements fest */
        width: 0; /* legt die Breite des Elements fest */
        height: 0; /* legt die Höhe des Elements fest */
    }
}
@media (max-width: 768px) {
    html,
    body {
        width: 100%; /* legt die Breite des Elements fest */
        max-width: 100%; /* legt die maximale Breite fest */
        overflow-x: clip; /* steuert horizontalen Überlauf */
    }
}

/* =========================================================
   MOBILE OVERFLOW FIX
   ========================================================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100%; /* legt die Breite des Elements fest */
        max-width: 100%; /* legt die maximale Breite fest */
        overflow-x: hidden !important; /* steuert horizontalen Überlauf */
    }

    body {
        position: relative; /* legt die Positionierungsart des Elements fest */
    }

    #site-header,
    #site-header nav {
        width: 100%; /* legt die Breite des Elements fest */
        max-width: 100%; /* legt die maximale Breite fest */
        overflow: visible; /* steuert überstehenden Inhalt */
    }

    section,
    .hero,
    #gallery,
    .gallery-preview,
    footer {
        max-width: 100%; /* legt die maximale Breite fest */
        overflow-x: hidden; /* steuert horizontalen Überlauf */
    }

    .gallery-preview {
        margin-left: 0 !important; /* setzt den linken Außenabstand */
        justify-content: flex-start; /* richtet Elemente entlang der Hauptachse aus */
    }

    #gallery h2 {
        margin-left: 0 !important; /* setzt den linken Außenabstand */
        text-align: left; /* richtet Text horizontal aus */
    }
}

/* =========================================================
   MOBILE HERO BILD POSITION
   ========================================================= */

@media (max-width: 768px) {

    .hero {
        background-size: auto 60%; /* steuert die Größe des Hintergrundbildes */
        background-position: 40% 70px; /* steuert die Position des Hintergrundbildes */
        background-repeat: no-repeat; /* steuert die Wiederholung des Hintergrundbildes */
        background-attachment: scroll; /* legt fest, ob der Hintergrund mitscrollt oder fixiert bleibt */

        min-height: 100vh; /* legt die Mindesthöhe fest */
        padding-top: 70px; /* setzt den oberen Innenabstand */
    }
}

/* =========================================================
   MOBILE HEADER SCROLL BALKEN ENTFERNEN
   ========================================================= */

@media (max-width: 768px) {

    #site-header.scrolled {
        background: transparent !important; /* setzt den Hintergrund */
        backdrop-filter: none !important; /* setzt Filtereffekte hinter dem Element */
        -webkit-backdrop-filter: none !important; /* Safari-Unterstützung für Hintergrundfilter */
    }
}

/* =========================================================
   MOBILE HEADER KLEINER
   ========================================================= */

@media (max-width: 768px) {

    #site-header {
        height: 70px !important; /* legt die Höhe des Elements fest */
    }

    #site-header nav {
        height: 70px; /* legt die Höhe des Elements fest */
    }
}

/* =========================================================
   MOBILE HERO SCHRIFT KLEINER UND HÖHER
   ========================================================= */

@media (max-width: 768px) {

    .hero h1 {
        font-size: 12px; /* setzt die Schriftgröße */
        line-height: 1.2; /* setzt die Zeilenhöhe */

        white-space: nowrap; /* steuert Zeilenumbrüche und Leerzeichen */
        transform: translate(85px, -240px); /* verschiebt, skaliert, dreht oder verzerrt das Element */
    }
}

/* =========================================================
   MOBILE WHO'S KIRA WEITER NACH OBEN
   ========================================================= */

@media (max-width: 768px) {

    #about {
        margin-top: -320px; /* setzt den oberen Außenabstand */
    }
}

/* =========================================================
   MOBILE TAKE A CLOSER LOOK WEITER NACH OBEN
   ========================================================= */

@media (max-width: 768px) {

    .gallery-more {
        margin-top: 30px !important; /* setzt den oberen Außenabstand */
    }
}

/* =========================================================
   MOBILE ABOUT VIDEO KLEINER
   ========================================================= */

@media (max-width: 768px) {

    .about-page .about-video-loop {
        width: 180px !important; /* legt die Breite des Elements fest */
        height: 250px !important; /* legt die Höhe des Elements fest */
        margin: -280px auto 0 !important; /* setzt den Außenabstand des Elements */
    }

    .about-page .about-panel {
        display: flex !important; /* legt die Darstellungsart des Elements fest */
        flex-direction: column !important; /* legt die Richtung von Flex-Elementen fest */
        align-items: center !important; /* richtet Elemente quer zur Hauptachse aus */
        text-align: center !important; /* richtet Text horizontal aus */
    }

    .about-page .about-text {
        width: 100% !important; /* legt die Breite des Elements fest */
        max-width: 100% !important; /* legt die maximale Breite fest */
        margin: 0 !important; /* setzt den Außenabstand des Elements */
    }

    .about-page .about-text p {
        max-width: 100% !important; /* legt die maximale Breite fest */
        margin-top: 0 !important; /* setzt den oberen Außenabstand */
    }
}

/* =========================================================
   MOBILE ABOUT: VIDEO OBEN, TEXT UNTEN, VIDEO HÖHER
   ========================================================= */

@media (max-width: 768px) {

    .about-page .about-panel {
        display: flex !important; /* legt die Darstellungsart des Elements fest */
        flex-direction: column !important; /* legt die Richtung von Flex-Elementen fest */
        align-items: center !important; /* richtet Elemente quer zur Hauptachse aus */
        text-align: center !important; /* richtet Text horizontal aus */

        padding-top: 20px !important; /* setzt den oberen Innenabstand */
    }

    .about-page .about-title {
        order: 1; /* setzt eine CSS-Eigenschaft für Layout oder Darstellung */
        position: static !important; /* legt die Positionierungsart des Elements fest */
        left: auto !important; /* setzt den Abstand zur linken Kante */
        top: auto !important; /* setzt den Abstand zur oberen Kante */
        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
        margin-bottom: 20px !important; /* setzt den unteren Außenabstand */
        text-align: center !important; /* richtet Text horizontal aus */
    }

    .about-page .about-video-loop {
        order: 2; /* setzt eine CSS-Eigenschaft für Layout oder Darstellung */
        width: 250px !important; /* legt die Breite des Elements fest */
        height: 340px !important; /* legt die Höhe des Elements fest */

        margin: 0 auto 30px !important; /* setzt den Außenabstand des Elements */
        transform: translateY(-150px) !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
    }

    .about-page .about-text {
        order: 3; /* setzt eine CSS-Eigenschaft für Layout oder Darstellung */
        width: 100% !important; /* legt die Breite des Elements fest */
        max-width: 100% !important; /* legt die maximale Breite fest */
        margin: -300px 0 0 0 !important; /* setzt den Außenabstand des Elements */
        padding: 0 !important; /* setzt den Innenabstand des Elements */
        text-align: center !important; /* richtet Text horizontal aus */
    }

    .about-page .about-text p {
        max-width: 100% !important; /* legt die maximale Breite fest */
        margin-top: 0 !important; /* setzt den oberen Außenabstand */
        text-align: center !important; /* richtet Text horizontal aus */
    }
}
.mobile-language-switcher {
    display: none; /* legt die Darstellungsart des Elements fest */
}

@media (max-width: 768px) {

    .mobile-language-switcher {
        display: flex; /* legt die Darstellungsart des Elements fest */
        gap: 6px; /* setzt den Abstand zwischen Elementen */
        margin-left: 0; /* setzt den linken Außenabstand */
    }

    .mobile-language-switcher button {
        width: 34px; /* legt die Breite des Elements fest */
        height: 30px; /* legt die Höhe des Elements fest */
        font-size: 10px; /* setzt die Schriftgröße */
        padding: 0; /* setzt den Innenabstand des Elements */
        border-radius: 0; /* setzt die Rundung der Ecken */
    }

    #site-header .nav-left .language-switcher {
        display: none !important; /* legt die Darstellungsart des Elements fest */
    }
}

/* =========================================================
   MOBILE LANGUAGE SWITCHER
   ========================================================= */

.mobile-language-switcher {
    display: none; /* legt die Darstellungsart des Elements fest */
}

@media (max-width: 768px) {

    .mobile-language-switcher {
        display: flex; /* legt die Darstellungsart des Elements fest */
        gap: 6px; /* setzt den Abstand zwischen Elementen */
        margin-left: 0; /* setzt den linken Außenabstand */
    }

    .mobile-language-switcher button {
        width: 34px; /* legt die Breite des Elements fest */
        height: 30px; /* legt die Höhe des Elements fest */
        font-size: 10px; /* setzt die Schriftgröße */
        padding: 0; /* setzt den Innenabstand des Elements */
        border-radius: 0; /* setzt die Rundung der Ecken */
    }

    #site-header .nav-left .language-switcher {
        display: none !important; /* legt die Darstellungsart des Elements fest */
    }
}

/* =========================================================
   NUR MOBILE: HEADER BLEIBT OBEN
   ========================================================= */

@media only screen and (max-width: 768px) {

    body #site-header {
        position: fixed !important; /* legt die Positionierungsart des Elements fest */
        top: 0 !important; /* setzt den Abstand zur oberen Kante */
        left: 0 !important; /* setzt den Abstand zur linken Kante */
        width: 100% !important; /* legt die Breite des Elements fest */
        z-index: 99999 !important; /* bestimmt die Ebenenreihenfolge */
    }

    body {
        padding-top: 70px; /* setzt den oberen Innenabstand */
    }
}

/* =========================================================
   NUR MOBILE: HEADER FESTER SCHWARZER BALKEN
   ========================================================= */

@media (max-width: 768px) {

    #site-header {
        position: fixed !important; /* legt die Positionierungsart des Elements fest */
        top: 0 !important; /* setzt den Abstand zur oberen Kante */
        left: 0 !important; /* setzt den Abstand zur linken Kante */
        width: 100% !important; /* legt die Breite des Elements fest */
        height: 70px !important; /* legt die Höhe des Elements fest */

        background: rgba(0, 0, 0, 0.95) !important; /* setzt den Hintergrund */
        backdrop-filter: none !important; /* setzt Filtereffekte hinter dem Element */
        -webkit-backdrop-filter: none !important; /* Safari-Unterstützung für Hintergrundfilter */

        z-index: 99999 !important; /* bestimmt die Ebenenreihenfolge */
    }

    #site-header nav {
        height: 70px !important; /* legt die Höhe des Elements fest */
        width: 100% !important; /* legt die Breite des Elements fest */

        display: flex !important; /* legt die Darstellungsart des Elements fest */
        align-items: center !important; /* richtet Elemente quer zur Hauptachse aus */
        justify-content: space-between !important; /* richtet Elemente entlang der Hauptachse aus */

        padding: 0 14px !important; /* setzt den Innenabstand des Elements */
        box-sizing: border-box !important; /* legt fest, wie Breite und Höhe berechnet werden */
    }

    .mobile-menu-toggle {
        position: relative !important; /* legt die Positionierungsart des Elements fest */
        z-index: 100001 !important; /* bestimmt die Ebenenreihenfolge */
    }

    #site-header .logo {
        position: static !important; /* legt die Positionierungsart des Elements fest */
        margin: 0 !important; /* setzt den Außenabstand des Elements */
        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
        z-index: 100001 !important; /* bestimmt die Ebenenreihenfolge */
    }

    #site-header .logo img {
        max-width: 120px !important; /* legt die maximale Breite fest */
        height: auto !important; /* legt die Höhe des Elements fest */
        display: block !important; /* legt die Darstellungsart des Elements fest */
    }

    .mobile-language-switcher {
        display: flex !important; /* legt die Darstellungsart des Elements fest */
        gap: 6px !important; /* setzt den Abstand zwischen Elementen */
        z-index: 100001 !important; /* bestimmt die Ebenenreihenfolge */
    }

    .mobile-language-switcher button {
        width: 34px !important; /* legt die Breite des Elements fest */
        height: 30px !important; /* legt die Höhe des Elements fest */
        font-size: 10px !important; /* setzt die Schriftgröße */
        padding: 0 !important; /* setzt den Innenabstand des Elements */
        border-radius: 0 !important; /* setzt die Rundung der Ecken */
    }

    body {
        padding-top: 0 !important; /* setzt den oberen Innenabstand */
    }

    .hero {
        padding-top: 70px !important; /* setzt den oberen Innenabstand */
    }
}

/* =========================================================
   NUR MOBILE: HEADER BALKEN IMMER SICHTBAR
   ========================================================= */

@media (max-width: 768px) {

    #site-header,
    #site-header.scrolled,
    header,
    header.scrolled {
        position: fixed !important; /* legt die Positionierungsart des Elements fest */
        top: 0 !important; /* setzt den Abstand zur oberen Kante */
        left: 0 !important; /* setzt den Abstand zur linken Kante */
        width: 100% !important; /* legt die Breite des Elements fest */
        height: 70px !important; /* legt die Höhe des Elements fest */

        background: rgba(0, 0, 0, 0.95) !important; /* setzt den Hintergrund */
        backdrop-filter: none !important; /* setzt Filtereffekte hinter dem Element */
        -webkit-backdrop-filter: none !important; /* Safari-Unterstützung für Hintergrundfilter */

        opacity: 1 !important; /* setzt die Transparenz */
        visibility: visible !important; /* steuert die Sichtbarkeit */

        z-index: 999999 !important; /* bestimmt die Ebenenreihenfolge */
    }

    #site-header nav {
        height: 70px !important; /* legt die Höhe des Elements fest */
        background: rgba(0, 0, 0, 0.95) !important; /* setzt den Hintergrund */
    }
}

/* =========================================================
   MOBILE: LOGO BLEIBT BEIM BURGER ÖFFNEN FEST
   ========================================================= */

@media (max-width: 768px) {

    #site-header nav {
        position: relative !important; /* legt die Positionierungsart des Elements fest */
    }

    #site-header .logo {
        position: absolute !important; /* legt die Positionierungsart des Elements fest */
        left: 50% !important; /* setzt den Abstand zur linken Kante */
        transform: translateX(-50%) !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
        margin: 0 !important; /* setzt den Außenabstand des Elements */
    }

    #site-header .nav-left {
        position: fixed !important; /* legt die Positionierungsart des Elements fest */
        top: 70px !important; /* setzt den Abstand zur oberen Kante */
        left: 0 !important; /* setzt den Abstand zur linken Kante */
        right: 0 !important; /* setzt den Abstand zur rechten Kante */
        width: auto !important; /* legt die Breite des Elements fest */
        max-width: none !important; /* legt die maximale Breite fest */
    }
}

/* =========================================================
   MOBILE GALLERY PAGE FIX
   ========================================================= */

@media (max-width: 768px) {

    body.gallery-page {
        overflow-x: hidden !important; /* steuert horizontalen Überlauf */
        padding-top: 70px !important; /* setzt den oberen Innenabstand */
    }

    .gallery-page section:first-of-type {
        margin-top: 40px !important; /* setzt den oberen Außenabstand */
        padding-top: 40px !important; /* setzt den oberen Innenabstand */
    }

    .gallery-page .scene {
        position: relative !important; /* legt die Positionierungsart des Elements fest */
        top: auto !important; /* setzt den Abstand zur oberen Kante */
        left: auto !important; /* setzt den Abstand zur linken Kante */
        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */

        width: 100% !important; /* legt die Breite des Elements fest */
        max-width: 100% !important; /* legt die maximale Breite fest */
        height: 430px !important; /* legt die Höhe des Elements fest */

        margin: 30px auto 40px !important; /* setzt den Außenabstand des Elements */
        padding: 0 !important; /* setzt den Innenabstand des Elements */

        perspective: 1000px !important; /* legt die Stärke der 3D-Tiefenwirkung fest */
        overflow: hidden !important; /* steuert überstehenden Inhalt */
    }

    .gallery-page .carousel {
        width: 100% !important; /* legt die Breite des Elements fest */
        height: 100% !important; /* legt die Höhe des Elements fest */
    }

    .gallery-page .card {
        width: 180px !important; /* legt die Breite des Elements fest */
        height: 245px !important; /* legt die Höhe des Elements fest */

        left: 50% !important; /* setzt den Abstand zur linken Kante */
        top: 60px !important; /* setzt den Abstand zur oberen Kante */
        margin-left: -90px !important; /* setzt den linken Außenabstand */
    }

    .gallery-page .card img {
        width: 100% !important; /* legt die Breite des Elements fest */
        height: 100% !important; /* legt die Höhe des Elements fest */
        object-fit: cover !important; /* legt fest, wie Medien den Container füllen */
    }

    .gallery-page .reflection,
    .gallery-page .scene::after {
        display: none !important; /* legt die Darstellungsart des Elements fest */
    }

    .gallery-page .controls {
        width: 100% !important; /* legt die Breite des Elements fest */
        max-width: 100% !important; /* legt die maximale Breite fest */
        left: 0 !important; /* setzt den Abstand zur linken Kante */
        top: 230px !important; /* setzt den Abstand zur oberen Kante */
        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
        padding: 0 14px !important; /* setzt den Innenabstand des Elements */
        box-sizing: border-box !important; /* legt fest, wie Breite und Höhe berechnet werden */
    }

    .gallery-page .view-toggle {
        position: relative !important; /* legt die Positionierungsart des Elements fest */
        top: auto !important; /* setzt den Abstand zur oberen Kante */
        left: auto !important; /* setzt den Abstand zur linken Kante */
        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */

        margin: 30px auto 40px !important; /* setzt den Außenabstand des Elements */
        justify-content: center !important; /* richtet Elemente entlang der Hauptachse aus */
        width: max-content !important; /* legt die Breite des Elements fest */
    }

    .gallery-page footer {
        margin-top: 60px !important; /* setzt den oberen Außenabstand */
    }
}
/* =========================================================
   MOBILE GALLERY CAROUSEL BILDER KLEINER
   ========================================================= */

@media (max-width: 768px) {

    .gallery-page .card {
        width: 180px !important; /* legt die Breite des Elements fest */
        height: 245px !important; /* legt die Höhe des Elements fest */
        left: 50% !important; /* setzt den Abstand zur linken Kante */
        top: 100px !important; /* setzt den Abstand zur oberen Kante */
        margin-left: -90px !important; /* setzt den linken Außenabstand */
    }

    .gallery-page .card img {
        width: 70% !important; /* legt die Breite des Elements fest */
        height: 70% !important; /* legt die Höhe des Elements fest */
        object-fit: cover !important; /* legt fest, wie Medien den Container füllen */
        margin: auto !important; /* setzt den Außenabstand des Elements */
    }
} 

/* =========================================================
   MOBILE GALLERY CAROUSEL PFEILE AUSBLENDEN
   ========================================================= */

@media (max-width: 768px) {

    .gallery-page .controls {
        display: none !important; /* legt die Darstellungsart des Elements fest */
    }

    .gallery-page .controls button {
        display: none !important; /* legt die Darstellungsart des Elements fest */
    }
}

/* =========================================================
   MOBILE GALLERY BLOCK WEITER RUNTER
   ========================================================= */

@media (max-width: 768px) {

    .gallery-page .scene {
        margin-top: 80px !important; /* setzt den oberen Außenabstand */
        height: 450px !important; /* legt die Höhe des Elements fest */
        overflow: visible !important; /* steuert überstehenden Inhalt */
    }

    .gallery-page .carousel {
        height: 100% !important; /* legt die Höhe des Elements fest */
        overflow: visible !important; /* steuert überstehenden Inhalt */
    }

    .gallery-page .view-toggle {
        margin-top: 80px !important; /* setzt den oberen Außenabstand */
    }
}

/* =========================================================
   MOBILE GALLERY GRID: 3 BILDER NEBENEINANDER
   ========================================================= */

@media (max-width: 768px) {

    body.gallery-page.gallery-grid .carousel {
        display: grid !important; /* legt die Darstellungsart des Elements fest */
        grid-template-columns: repeat(3, 1fr) !important; /* definiert die Spalten im CSS-Grid */
        gap: 10px !important; /* setzt den Abstand zwischen Elementen */

        width: 100% !important; /* legt die Breite des Elements fest */
        max-width: 100% !important; /* legt die maximale Breite fest */

        align-items: start !important; /* richtet Elemente quer zur Hauptachse aus */
        justify-items: center !important; /* setzt eine CSS-Eigenschaft für Layout oder Darstellung */
    }

    body.gallery-page.gallery-grid .card {
        position: relative !important; /* legt die Positionierungsart des Elements fest */

        width: 100% !important; /* legt die Breite des Elements fest */
        max-width: 105px !important; /* legt die maximale Breite fest */
        height: 145px !important; /* legt die Höhe des Elements fest */

        left: auto !important; /* setzt den Abstand zur linken Kante */
        top: auto !important; /* setzt den Abstand zur oberen Kante */
        margin-left: 0 !important; /* setzt den linken Außenabstand */

        transform: none !important; /* verschiebt, skaliert, dreht oder verzerrt das Element */
    }

    body.gallery-page.gallery-grid .card img {
        width: 100% !important; /* legt die Breite des Elements fest */
        height: 100% !important; /* legt die Höhe des Elements fest */
        object-fit: cover !important; /* legt fest, wie Medien den Container füllen */
    }
}

/* =========================================================
   MOBILE NUR GALLERY-MODUS: UMSCHALTER WEITER RUNTER
   ========================================================= */

@media (max-width: 768px) {

    body.gallery-page.gallery-grid .view-toggle {
        margin-top: 3470px !important; /* setzt den oberen Außenabstand */
        margin-bottom: 40px !important; /* setzt den unteren Außenabstand */
    }
}
/* =========================================================
NUR DESKTOP: INDEX GALLERY ÜBERSCHRIFT + PREVIEW NACH RECHTS 
=========================================================*/
@media (min-width: 769px) {

    body:not(.gallery-page):not(.about-page):not(.services-page) #gallery h2,
    body:not(.gallery-page):not(.about-page):not(.services-page) .gallery-preview {
        margin-left: 0px !important; /* setzt den linken Außenabstand */
    }
}

/* =========================================================
   CUSTOM CONTENT PAGE TEXT FIX
   Greift auf Custom Content.html
========================================================= */

body.services-page.custom-content-page .service-panel {
    width: 100%; /* legt die Breite des Elements fest */
    min-height: 620px; /* legt die Mindesthöhe fest */

    padding: 60px; /* setzt den Innenabstand des Elements */
    margin-bottom: 80px; /* setzt den unteren Außenabstand */

    background: rgba(20, 20, 20, 0.82); /* setzt den Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.12); /* setzt den Rahmen */
    border-radius: 28px; /* setzt die Rundung der Ecken */
}

body.services-page.custom-content-page .service-text-content-custom-content {
    width: 100%; /* legt die Breite des Elements fest */
    max-width: 900px; /* legt die maximale Breite fest */
}

/* Überschrift */
body.services-page.custom-content-page .service-text-content-custom-content h2 {
    font-size: 64px !important; /* setzt die Schriftgröße */
    margin-bottom: 70px !important; /* setzt den unteren Außenabstand */
}

/* Alle 15 Lines */
body.services-page.custom-content-page .service-text-content-custom-content p {
    font-size: 18px !important;          /* Textgröße */
    line-height: 1.7 !important;         /* Zeilenhöhe */
    margin: 0 0 14px 0 !important;       /* Abstand zwischen den Lines */
    padding-bottom: 10px !important;     /* Abstand zur Linie */

    max-width: 900px !important; /* legt die maximale Breite fest */
    white-space: normal !important;      /* wichtig: Text darf umbrechen */

    color: rgba(255, 255, 255, 0.78); /* setzt die Textfarbe */
}
/* Personalisierte Fotosets */
body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line6"],
body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line1"] {
    font-size: 24px !important; /* setzt die Schriftgröße */
    font-weight: 500 !important; /* setzt die Schriftstärke */
    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
}

/* -Basic Fotos */ 
body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line11"],
body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line13"],
body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line12"] {
    font-size: 20px !important; /* setzt die Schriftgröße */
    font-weight: 500 !important; /* setzt die Schriftstärke */
    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
  
}
/* 3 Fotos von deiner */

body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line3"], 
body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line5"], 
body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line7"], 
body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line10"], 
body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line14"] {
    font-size: 18px !important; /* setzt die Schriftgröße */
    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
   
}

body.services-page.custom-content-page .service-text-content-custom-content p[data-i18n="services.service11.line15"]{
    margin-top: 100px !important; /* setzt den oberen Außenabstand */

}
    


body.services-page.custom-content-page .service-panel {
    padding-bottom: 10px !important; /* setzt den unteren Innenabstand */
}

body.services-page.custom-content-page .inline-service-link {
    color: rgba(255, 255, 255, 0.95); /* setzt die Textfarbe */
    text-decoration: none; /* setzt oder entfernt Textdekorationen */
    border-bottom: 1px solid rgba(255, 255, 255, 0.55); /* setzt den unteren Rahmen */
    transition: color 0.3s ease, border-color 0.3s ease; /* setzt weiche Übergänge bei Zustandsänderungen */
}

body.services-page.custom-content-page .inline-service-link:hover {
    color: #ffffff; /* setzt die Textfarbe */
    border-color: #ffffff; /* setzt die Rahmenfarbe */
}

 /* =========================================================
   CUSTOM CHAT PAGE
========================================================= */

body.services-page.custom-chat-page .service-panel {
    width: 86% !important; /* legt die Breite des Elements fest */
    max-width: 1200px !important; /* legt die maximale Breite fest */
    min-height: 620px; /* legt die Mindesthöhe fest */

    margin: 220px auto 120px auto; /* setzt den Außenabstand des Elements */
    padding: 60px; /* setzt den Innenabstand des Elements */

    background: rgba(20, 20, 20, 0.82); /* setzt den Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.12); /* setzt den Rahmen */
    border-radius: 28px; /* setzt die Rundung der Ecken */
}

body.services-page.custom-chat-page .service-text-content-custom-chat {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: 1000px !important; /* legt die maximale Breite fest */
}

body.services-page.custom-chat-page .service-text-content-custom-chat h2 {
    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 64px !important; /* setzt die Schriftgröße */
    font-weight: 400; /* setzt die Schriftstärke */
    line-height: 1.1; /* setzt die Zeilenhöhe */
    margin-bottom: 40px !important; /* setzt den unteren Außenabstand */
    color: rgba(255, 255, 255, 0.95); /* setzt die Textfarbe */
}

body.services-page.custom-chat-page .service-text-content-custom-chat p {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: none !important; /* legt die maximale Breite fest */

    white-space: normal !important; /* steuert Zeilenumbrüche und Leerzeichen */
    word-break: normal !important; /* steuert Wortumbrüche */
    overflow-wrap: normal !important; /* steuert Umbrüche bei langen Wörtern */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 18px !important; /* setzt die Schriftgröße */
    line-height: 1.7 !important; /* setzt die Zeilenhöhe */
    margin: 0 0 14px 0 !important; /* setzt den Außenabstand des Elements */

    color: rgba(255, 255, 255, 0.78); /* setzt die Textfarbe */
}
body.services-page.custom-chat-page .service-text-content-custom-chat h2[data-i18n="services.service12.title"] {
    position: relative; /* legt die Positionierungsart des Elements fest */
    top: 0px !important; /* setzt den Abstand zur oberen Kante */
}

body.services-page.custom-chat-page .service-panel {
    width: 86% !important; /* legt die Breite des Elements fest */
    max-width: 1200px !important; /* legt die maximale Breite fest */
}

body.services-page.custom-chat-page .service-text-content-custom-chat {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: none !important; /* legt die maximale Breite fest */
}

body.services-page.custom-chat-page .service-text-content-custom-chat p {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: none !important; /* legt die maximale Breite fest */

    white-space: normal !important; /* steuert Zeilenumbrüche und Leerzeichen */
    word-break: normal !important; /* steuert Wortumbrüche */
    overflow-wrap: normal !important; /* steuert Umbrüche bei langen Wörtern */
}

/* =========================================================
   CUSTOM CHAT TEXTBREITE FIX
========================================================= */

body.services-page.custom-chat-page .service-panel {
    width: 86% !important; /* legt die Breite des Elements fest */
    max-width: 1200px !important; /* legt die maximale Breite fest */

    display: block !important; /* legt die Darstellungsart des Elements fest */
    grid-template-columns: none !important; /* definiert die Spalten im CSS-Grid */

    overflow: visible !important; /* steuert überstehenden Inhalt */
}

body.services-page.custom-chat-page .service-text-content-custom-chat {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: none !important; /* legt die maximale Breite fest */

    display: block !important; /* legt die Darstellungsart des Elements fest */
    grid-column: 1 / -1 !important; /* legt die Grid-Spalte eines Elements fest */

    overflow: visible !important; /* steuert überstehenden Inhalt */
}

body.services-page.custom-chat-page .service-text-content-custom-chat h2,
body.services-page.custom-chat-page .service-text-content-custom-chat p {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: none !important; /* legt die maximale Breite fest */

    white-space: normal !important; /* steuert Zeilenumbrüche und Leerzeichen */
    word-break: normal !important; /* steuert Wortumbrüche */
    overflow-wrap: normal !important; /* steuert Umbrüche bei langen Wörtern */

    overflow: visible !important; /* steuert überstehenden Inhalt */
}

body.services-page.custom-chat-page .services-wrapper {
    padding-top: 120px !important; /* setzt den oberen Innenabstand */
}

body.services-page.custom-chat-page .service-panel {
    margin-top: 0 !important; /* setzt den oberen Außenabstand */
}

body.services-page.custom-chat-page .service-panel {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: 1700px !important; /* legt die maximale Breite fest */
}

body.services-page.custom-chat-page .inline-service-link {
    color: rgba(255, 255, 255, 0.95); /* setzt die Textfarbe */
    text-decoration: none; /* setzt oder entfernt Textdekorationen */
    border-bottom: 1px solid rgba(255, 255, 255, 0.55); /* setzt den unteren Rahmen */
    transition: color 0.3s ease, border-color 0.3s ease; /* setzt weiche Übergänge bei Zustandsänderungen */
}

body.services-page.custom-chat-page .inline-service-link:hover {
    color: #ffffff; /* setzt die Textfarbe */
    border-color: #ffffff; /* setzt die Rahmenfarbe */
}

body.services-page.custom-chat-page .inline-service-link {
    color: rgba(255, 255, 255, 0.95); /* setzt die Textfarbe */
    text-decoration: none; /* setzt oder entfernt Textdekorationen */
     border-bottom: none !important; /* setzt den unteren Rahmen */
}

body.services-page.custom-chat-page .inline-service-link:hover {
    color: #ffffff; /* setzt die Textfarbe */
    border-color: #ffffff; /* setzt die Rahmenfarbe */
}

body.services-page.custom-chat-page .inline-service-link {
    font-weight: 600 !important; /* setzt die Schriftstärke */
    text-decoration: none !important; /* setzt oder entfernt Textdekorationen */
    border-bottom: none !important; /* setzt den unteren Rahmen */
}

body.services-page.custom-chat-page .service-subheadline {
    font-weight: 700 !important; /* setzt die Schriftstärke */
    font-size: 20px !important; /* setzt die Schriftgröße */
    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
    margin-top: 24px !important; /* setzt den oberen Außenabstand */
    margin-bottom: 10px !important; /* setzt den unteren Außenabstand */
}

body.services-page.custom-chat-page {
    background: #111; /* setzt den Hintergrund */
    position: relative; /* legt die Positionierungsart des Elements fest */
    overflow-x: hidden; /* steuert horizontalen Überlauf */
}

body.services-page.custom-chat-page::before {
    content: ""; /* erzeugt Inhalt für Pseudoelemente */
    position: fixed; /* legt die Positionierungsart des Elements fest */
    inset: 0; /* füllt alle Seiten eines positionierten Elements aus */

    background-image: url("images/DSC_0241_SW.jpg"); /* setzt das Hintergrundbild */
    background-size: cover; /* steuert die Größe des Hintergrundbildes */
    background-position: center center; /* steuert die Position des Hintergrundbildes */
    background-repeat: no-repeat; /* steuert die Wiederholung des Hintergrundbildes */

    z-index: 0; /* bestimmt die Ebenenreihenfolge */
    pointer-events: none; /* steuert, ob Mausereignisse angenommen werden */
}

body.services-page.custom-chat-page::after {
    content: ""; /* erzeugt Inhalt für Pseudoelemente */
    position: fixed; /* legt die Positionierungsart des Elements fest */
    inset: 0; /* füllt alle Seiten eines positionierten Elements aus */

    background: rgba(0, 0, 0, 0.45); /* setzt den Hintergrund */

    z-index: 1; /* bestimmt die Ebenenreihenfolge */
    pointer-events: none; /* steuert, ob Mausereignisse angenommen werden */
}

body.services-page.custom-chat-page header,
body.services-page.custom-chat-page .services-wrapper,
body.services-page.custom-chat-page footer {
    position: relative; /* legt die Positionierungsart des Elements fest */
    z-index: 2; /* bestimmt die Ebenenreihenfolge */
}

/* =========================================================
   CUSTOM CHAT POSITION FIX
========================================================= */

body.services-page.custom-chat-page .services-wrapper {
    padding-top: 0px !important; /* setzt den oberen Innenabstand */
}

body.services-page.custom-chat-page .service-panel {
    margin-top: -160 !important; /* setzt den oberen Außenabstand */
}

/* =========================================================
   CUSTOM CHAT CONTAINER HIGHER
========================================================= */

body.services-page.custom-chat-page section.services-wrapper {
    padding-top: 0 !important; /* setzt den oberen Innenabstand */
    margin-top: 0 !important; /* setzt den oberen Außenabstand */
}

body.services-page.custom-chat-page section.services-wrapper > .service-panel:first-child {
    margin-top: 0px !important; /* setzt den oberen Außenabstand */
}

body.services-page.custom-chat-page .custom-chat-request-wrapper {
    text-align: center !important; /* richtet Text horizontal aus */
    margin-top: 75px !important; /* setzt den oberen Außenabstand */
    margin-bottom: 20px !important; /* setzt den unteren Außenabstand */
}

body.services-page.custom-chat-page .custom-chat-request-link {
    display: inline-block; /* legt die Darstellungsart des Elements fest */
    font-size: 22px !important; /* setzt die Schriftgröße */
    font-weight: 700 !important; /* setzt die Schriftstärke */
    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
    text-decoration: none !important; /* setzt oder entfernt Textdekorationen */
    border-bottom: none !important; /* setzt den unteren Rahmen */
}

body.services-page.custom-chat-page .custom-chat-request-link:hover {
    color: #ffffff !important; /* setzt die Textfarbe */
}
body.services-page.custom-chat-page .custom-chat-request-wrapper {
    display: block !important; /* legt die Darstellungsart des Elements fest */
    width: 100% !important; /* legt die Breite des Elements fest */
    text-align: center !important; /* richtet Text horizontal aus */

    margin-top: 140px !important; /* setzt den oberen Außenabstand */
    margin-bottom: 20px !important; /* setzt den unteren Außenabstand */
}

body.services-page.custom-chat-page .custom-chat-request-link {
    display: inline-block !important; /* legt die Darstellungsart des Elements fest */

    font-size: 22px !important; /* setzt die Schriftgröße */
    font-weight: 700 !important; /* setzt die Schriftstärke */

    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
    text-decoration: none !important; /* setzt oder entfernt Textdekorationen */
    border-bottom: none !important; /* setzt den unteren Rahmen */
}

body.services-page.custom-chat-page .custom-chat-request-link:hover {
    color: #ffffff !important; /* setzt die Textfarbe */
}

body.services-page.custom-chat-page .service-text-content-custom-chat .custom-chat-request-wrapper {
    display: block !important; /* legt die Darstellungsart des Elements fest */
    width: 100% !important; /* legt die Breite des Elements fest */

    text-align: center !important; /* richtet Text horizontal aus */

    margin-top: 100px !important; /* setzt den oberen Außenabstand */
    margin-bottom: 20px !important; /* setzt den unteren Außenabstand */
}

body.services-page.custom-chat-page .service-text-content-custom-chat .custom-chat-request-link {
    display: inline-block !important; /* legt die Darstellungsart des Elements fest */

    font-size: 22px !important; /* setzt die Schriftgröße */
    font-weight: 700 !important; /* setzt die Schriftstärke */

    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
    text-decoration: none !important; /* setzt oder entfernt Textdekorationen */
    border-bottom: none !important; /* setzt den unteren Rahmen */
}
body.services-page.custom-content-page .custom-content-request-wrapper {
    text-align: center !important;
    margin-top: 45px !important;
    margin-bottom: 20px !important;
}

body.services-page.custom-content-page .custom-content-request-link {
    display: inline-block !important;

    font-size: 22px !important;
    font-weight: 700 !important;

    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

body.services-page.custom-content-page .custom-content-request-link:hover {
    color: #ffffff !important;
}

/* =========================================================
   Hintergrundbild Content

========================================================= */
body.services-page.custom-content-page {
    background-image: url("images/DSC_02t41_sw.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* =========================================================
   Hintergrundbild Wishlist

========================================================= */
body.services-page.Tribute {
    background-image: url("images/DSC_0245_sw.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
}
/* =========================================================
   CUSTOM CONTENT WRAPPER POSITION
========================================================= */

body.services-page.custom-content-page section.services-wrapper {
    padding-top: 30px !important;
}



/* =========================================================
   CUSTOM CHAT TEXTBREITE FIX
========================================================= */

body.services-page.custom-chat-page .service-panel {
    width: 86% !important; /* legt die Breite des Elements fest */
    max-width: 1200px !important; /* legt die maximale Breite fest */

    display: block !important; /* legt die Darstellungsart des Elements fest */
    grid-template-columns: none !important; /* definiert die Spalten im CSS-Grid */

    overflow: visible !important; /* steuert überstehenden Inhalt */
}

body.services-page.custom-chat-page .service-text-content-custom-chat {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: none !important; /* legt die maximale Breite fest */

    display: block !important; /* legt die Darstellungsart des Elements fest */
    grid-column: 1 / -1 !important; /* legt die Grid-Spalte eines Elements fest */

    overflow: visible !important; /* steuert überstehenden Inhalt */
}

body.services-page.custom-chat-page .service-text-content-custom-chat h2,
body.services-page.custom-chat-page .service-text-content-custom-chat p {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: none !important; /* legt die maximale Breite fest */

    white-space: normal !important; /* steuert Zeilenumbrüche und Leerzeichen */
    word-break: normal !important; /* steuert Wortumbrüche */
    overflow-wrap: normal !important; /* steuert Umbrüche bei langen Wörtern */

    overflow: visible !important; /* steuert überstehenden Inhalt */
}

body.services-page.custom-chat-page .services-wrapper {
    padding-top: 120px !important; /* setzt den oberen Innenabstand */
}

body.services-page.custom-chat-page .service-panel {
    margin-top: 0 !important; /* setzt den oberen Außenabstand */
}

body.services-page.custom-chat-page .service-panel {
    width: 100% !important; /* legt die Breite des Elements fest */
    max-width: 1700px !important; /* legt die maximale Breite fest */
}

body.services-page.custom-chat-page .inline-service-link {
    color: rgba(255, 255, 255, 0.95); /* setzt die Textfarbe */
    text-decoration: none; /* setzt oder entfernt Textdekorationen */
    border-bottom: 1px solid rgba(255, 255, 255, 0.55); /* setzt den unteren Rahmen */
    transition: color 0.3s ease, border-color 0.3s ease; /* setzt weiche Übergänge bei Zustandsänderungen */
}

body.services-page.custom-chat-page .inline-service-link:hover {
    color: #ffffff; /* setzt die Textfarbe */
    border-color: #ffffff; /* setzt die Rahmenfarbe */
}

body.services-page.custom-chat-page .inline-service-link {
    color: rgba(255, 255, 255, 0.95); /* setzt die Textfarbe */
    text-decoration: none; /* setzt oder entfernt Textdekorationen */
     border-bottom: none !important; /* setzt den unteren Rahmen */
}

body.services-page.custom-chat-page .inline-service-link:hover {
    color: #ffffff; /* setzt die Textfarbe */
    border-color: #ffffff; /* setzt die Rahmenfarbe */
}

body.services-page.custom-chat-page .inline-service-link {
    font-weight: 600 !important; /* setzt die Schriftstärke */
    text-decoration: none !important; /* setzt oder entfernt Textdekorationen */
    border-bottom: none !important; /* setzt den unteren Rahmen */
}

body.services-page.custom-chat-page .service-subheadline {
    font-weight: 700 !important; /* setzt die Schriftstärke */
    font-size: 20px !important; /* setzt die Schriftgröße */
    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
    margin-top: 24px !important; /* setzt den oberen Außenabstand */
    margin-bottom: 10px !important; /* setzt den unteren Außenabstand */
}

body.services-page.custom-chat-page {
    background: #111; /* setzt den Hintergrund */
    position: relative; /* legt die Positionierungsart des Elements fest */
    overflow-x: hidden; /* steuert horizontalen Überlauf */
}

body.services-page.custom-chat-page::before {
    content: ""; /* erzeugt Inhalt für Pseudoelemente */
    position: fixed; /* legt die Positionierungsart des Elements fest */
    inset: 0; /* füllt alle Seiten eines positionierten Elements aus */

    background-image: url("images/DSC_0241_SW.jpg"); /* setzt das Hintergrundbild */
    background-size: cover; /* steuert die Größe des Hintergrundbildes */
    background-position: center center; /* steuert die Position des Hintergrundbildes */
    background-repeat: no-repeat; /* steuert die Wiederholung des Hintergrundbildes */

    z-index: 0; /* bestimmt die Ebenenreihenfolge */
    pointer-events: none; /* steuert, ob Mausereignisse angenommen werden */
}

body.services-page.custom-chat-page::after {
    content: ""; /* erzeugt Inhalt für Pseudoelemente */
    position: fixed; /* legt die Positionierungsart des Elements fest */
    inset: 0; /* füllt alle Seiten eines positionierten Elements aus */

    background: rgba(0, 0, 0, 0.45); /* setzt den Hintergrund */

    z-index: 1; /* bestimmt die Ebenenreihenfolge */
    pointer-events: none; /* steuert, ob Mausereignisse angenommen werden */
}

body.services-page.custom-chat-page header,
body.services-page.custom-chat-page .services-wrapper,
body.services-page.custom-chat-page footer {
    position: relative; /* legt die Positionierungsart des Elements fest */
    z-index: 2; /* bestimmt die Ebenenreihenfolge */
}

/* =========================================================
   CUSTOM CHAT POSITION FIX
========================================================= */

body.services-page.custom-chat-page .services-wrapper {
    padding-top: 0px !important; /* setzt den oberen Innenabstand */
}

body.services-page.custom-chat-page .service-panel {
    margin-top: -160 !important; /* setzt den oberen Außenabstand */
}

/* =========================================================
   CUSTOM CHAT CONTAINER HIGHER
========================================================= */

body.services-page.custom-chat-page section.services-wrapper {
    padding-top: 0 !important; /* setzt den oberen Innenabstand */
    margin-top: 0 !important; /* setzt den oberen Außenabstand */
}

body.services-page.custom-chat-page section.services-wrapper > .service-panel:first-child {
    margin-top: 201px !important; /* setzt den oberen Außenabstand */
}

body.services-page.custom-chat-page .custom-chat-request-wrapper {
    text-align: center !important; /* richtet Text horizontal aus */
    margin-top: 75px !important; /* setzt den oberen Außenabstand */
    margin-bottom: 20px !important; /* setzt den unteren Außenabstand */
}

body.services-page.custom-chat-page .custom-chat-request-link {
    display: inline-block; /* legt die Darstellungsart des Elements fest */
    font-size: 22px !important; /* setzt die Schriftgröße */
    font-weight: 700 !important; /* setzt die Schriftstärke */
    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
    text-decoration: none !important; /* setzt oder entfernt Textdekorationen */
    border-bottom: none !important; /* setzt den unteren Rahmen */
}

body.services-page.custom-chat-page .custom-chat-request-link:hover {
    color: #ffffff !important; /* setzt die Textfarbe */
}
body.services-page.custom-chat-page .custom-chat-request-wrapper {
    display: block !important; /* legt die Darstellungsart des Elements fest */
    width: 100% !important; /* legt die Breite des Elements fest */
    text-align: center !important; /* richtet Text horizontal aus */

    margin-top: 140px !important; /* setzt den oberen Außenabstand */
    margin-bottom: 20px !important; /* setzt den unteren Außenabstand */
}

body.services-page.custom-chat-page .custom-chat-request-link {
    display: inline-block !important; /* legt die Darstellungsart des Elements fest */

    font-size: 22px !important; /* setzt die Schriftgröße */
    font-weight: 700 !important; /* setzt die Schriftstärke */

    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
    text-decoration: none !important; /* setzt oder entfernt Textdekorationen */
    border-bottom: none !important; /* setzt den unteren Rahmen */
}

body.services-page.custom-chat-page .custom-chat-request-link:hover {
    color: #ffffff !important; /* setzt die Textfarbe */
}

body.services-page.custom-chat-page .service-text-content-custom-chat .custom-chat-request-wrapper {
    display: block !important; /* legt die Darstellungsart des Elements fest */
    width: 100% !important; /* legt die Breite des Elements fest */

    text-align: center !important; /* richtet Text horizontal aus */

    margin-top: 100px !important; /* setzt den oberen Außenabstand */
    margin-bottom: 20px !important; /* setzt den unteren Außenabstand */
}

body.services-page.custom-chat-page .service-text-content-custom-chat .custom-chat-request-link {
    display: inline-block !important; /* legt die Darstellungsart des Elements fest */

    font-size: 22px !important; /* setzt die Schriftgröße */
    font-weight: 700 !important; /* setzt die Schriftstärke */

    color: rgba(255, 255, 255, 0.95) !important; /* setzt die Textfarbe */
    text-decoration: none !important; /* setzt oder entfernt Textdekorationen */
    border-bottom: none !important; /* setzt den unteren Rahmen */
}
body.services-page.custom-content-page .custom-content-request-wrapper {
    text-align: center !important;
    margin-top: 45px !important;
    margin-bottom: 20px !important;
}

body.services-page.custom-content-page .custom-content-request-link {
    display: inline-block !important;

    font-size: 22px !important;
    font-weight: 700 !important;

    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

body.services-page.custom-content-page .custom-content-request-link:hover {
    color: #ffffff !important;
}
/* =========================================================
   TRIBUTE PAGE
   Gleicher Aufbau wie Custom Chat
========================================================= */

body.services-page.tribute-page .service-panel {
    width: 86% !important; /* legt die Breite des Panels fest */
    max-width: 1200px !important; /* begrenzt die maximale Breite */
    min-height: 620px; /* legt die Mindesthöhe fest */

    margin: 220px auto 120px auto; /* setzt Außenabstand oben, seitlich und unten */
    padding: 60px; /* setzt den Innenabstand */

    background: rgba(20, 20, 20, 0.82); /* setzt den dunklen Panel-Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.12); /* setzt den dezenten Rahmen */
    border-radius: 28px; /* rundet die Ecken */
}

body.services-page.tribute-page .service-text-content-tribute {
    width: 100% !important; /* Textbereich nimmt volle Breite ein */
    max-width: 1000px !important; /* begrenzt Textbreite wie Custom Chat */
}

body.services-page.tribute-page .service-text-content-tribute h2 {
    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 64px !important; /* setzt die Überschriftgröße */
    font-weight: 400; /* setzt die Schriftstärke */
    line-height: 1.1; /* setzt die Zeilenhöhe */
    margin-bottom: 40px !important; /* setzt Abstand unter der Überschrift */
    color: rgba(255, 255, 255, 0.95); /* setzt die Überschriftfarbe */
}

body.services-page.tribute-page .service-text-content-tribute p {
    width: 100% !important; /* Absätze nehmen volle Breite ein */
    max-width: none !important; /* entfernt globale Absatzbegrenzung */

    white-space: normal !important; /* erlaubt normales Verhalten wie Custom Chat */
    word-break: normal !important; /* verhindert harte Wortumbrüche */
    overflow-wrap: normal !important; /* verhindert künstliche Umbrüche */

    font-family: "Montserrat", sans-serif; /* setzt die Schriftart */
    font-size: 18px !important; /* setzt die Textgröße */
    line-height: 1.7 !important; /* setzt die Zeilenhöhe */
    margin: 0 0 14px 0 !important; /* setzt Abstand unter jeder Zeile */

    color: rgba(255, 255, 255, 0.78); /* setzt die Textfarbe */
}

/* =========================================================
   TRIBUTE TEXTBREITE FIX
   Wie Custom Chat Textbreite Fix
========================================================= */

body.services-page.tribute-page .service-panel {
    width: 86% !important; /* legt die Breite des Panels fest */
    max-width: 1200px !important; /* begrenzt die maximale Breite */

    display: block !important; /* verhindert Grid-Layout im Panel */
    grid-template-columns: none !important; /* entfernt Grid-Spalten */

    overflow: visible !important; /* verhindert Abschneiden */
}

body.services-page.tribute-page .service-text-content-tribute {
    width: 100% !important; /* Textbereich nimmt volle Breite ein */
    max-width: none !important; /* entfernt maximale Textbegrenzung */

    display: block !important; /* setzt normalen Blockfluss */
    grid-column: 1 / -1 !important; /* nimmt volle Grid-Breite ein, falls Grid aktiv wäre */

    overflow: visible !important; /* verhindert Abschneiden */
}

body.services-page.tribute-page .service-text-content-tribute h2,
body.services-page.tribute-page .service-text-content-tribute p {
    width: 100% !important; /* Überschrift und Text nehmen volle Breite ein */
    max-width: none !important; /* entfernt globale Begrenzung */

    white-space: normal !important; /* normales Textverhalten wie Custom Chat */
    word-break: normal !important; /* keine harten Wortumbrüche */
    overflow-wrap: normal !important; /* keine erzwungenen Umbrüche */

    overflow: visible !important; /* verhindert Abschneiden */
}

/* =========================================================
   TRIBUTE WRAPPER POSITION
   Wie Custom Chat Position
========================================================= */

body.services-page.tribute-page .services-wrapper {
    padding-top: 0px !important; /* setzt oberen Abstand des Wrappers */
}

body.services-page.tribute-page section.services-wrapper {
    padding-top: 0 !important; /* überschreibt obere Padding-Werte */
    margin-top: 0 !important; /* entfernt oberen Außenabstand */
}

body.services-page.tribute-page section.services-wrapper > .service-panel:first-child {
    margin-top: 203px !important; /* setzt Position des ersten Panels */
}

/* =========================================================
   TRIBUTE INLINE LINKS
   Wie Custom Chat Links
========================================================= */

body.services-page.tribute-page .inline-service-link {
    color: rgba(255, 255, 255, 0.95); /* setzt Linkfarbe */
    font-weight: 600 !important; /* macht Link kräftiger */
    text-decoration: none !important; /* entfernt Unterstreichung */
    border-bottom: none !important; /* entfernt untere Linie */
}

body.services-page.tribute-page .inline-service-link:hover {
    color: #ffffff; /* setzt Hover-Farbe */
    border-color: #ffffff; /* setzt Hover-Rahmenfarbe */
}

/* =========================================================
   TRIBUTE SUBHEADLINES
   Wie Custom Chat Zwischenüberschriften
========================================================= */

body.services-page.tribute-page .service-subheadline {
    font-weight: 700 !important; /* macht Zwischenüberschrift fett */
    font-size: 20px !important; /* setzt Größe der Zwischenüberschrift */
    color: rgba(255, 255, 255, 0.95) !important; /* setzt Textfarbe */
    margin-top: 24px !important; /* setzt Abstand nach oben */
    margin-bottom: 10px !important; /* setzt Abstand nach unten */
}

/* =========================================================
   TRIBUTE BACKGROUND
   Wie Custom Chat Hintergrund
========================================================= */

body.services-page.tribute-page {
    background: #111; /* setzt dunklen Grundhintergrund */
    position: relative; /* erlaubt Hintergrundebenen */
    overflow-x: hidden; /* verhindert horizontales Scrollen */
}

body.services-page.tribute-page::before {
    content: ""; /* erzeugt Hintergrundebene */
    position: fixed; /* fixiert Hintergrundbild */
    inset: 0; /* füllt den gesamten Bildschirm */

    background-image: url("images/DSC_0245_sw.jpg"); /* setzt Tribute-Hintergrundbild */
    background-size: cover; /* Bild füllt den Bildschirm */
    background-position: center center; /* zentriert das Bild */
    background-repeat: no-repeat; /* verhindert Wiederholung */

    z-index: 0; /* legt Hintergrund nach hinten */
    pointer-events: none; /* blockiert keine Klicks */
}

body.services-page.tribute-page::after {
    content: ""; /* erzeugt Overlay */
    position: fixed; /* fixiert Overlay */
    inset: 0; /* füllt den gesamten Bildschirm */

    background: rgba(0, 0, 0, 0.45); /* dunkelt Hintergrund ab */

    z-index: 1; /* legt Overlay über Hintergrund */
    pointer-events: none; /* blockiert keine Klicks */
}

body.services-page.tribute-page header {
    position: fixed !important; /* Header bleibt beim Scrollen oben stehen */
    top: 0 !important; /* Header sitzt am oberen Rand */
    left: 0 !important; /* Header sitzt links bündig */
    width: 100% !important; /* Header nimmt volle Breite ein */
    height: 180px !important; /* gleiche Header-Höhe wie die anderen Seiten */
    z-index: 1000 !important; /* Header liegt über Inhalt und Hintergrund */
}

body.services-page.tribute-page .services-wrapper,
body.services-page.tribute-page footer {
    position: relative; /* Inhalt bleibt über Hintergrund und Overlay */
    z-index: 2; /* Inhalt liegt über Background */
}

/* =========================================================
   TRIBUTE LINE 8 LINK TO MY LINKS
========================================================= */

body.services-page.tribute-page .tribute-line8-link-wrapper {
    margin: 0 0 14px 0 !important;
}

body.services-page.tribute-page .tribute-line8-link {
    display: inline-block !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    font-weight: 600 !important;

    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

body.services-page.tribute-page .tribute-line8-link:hover {
    color: #ffffff !important;
}

/* =========================================================
   SERVICES OVERVIEW BACKGROUND
   Nur für services.html
========================================================= */

body.services-page.services-overview-page {
    background: #111;
    position: relative;
    overflow-x: hidden;
}

body.services-page.services-overview-page::before {
    content: "";
    position: fixed;
    inset: 0;

    background-image: url("images/DSC_0471d.jpg");
    background-size: 120%;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: 0;
    pointer-events: none;
}

body.services-page.services-overview-page::after {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    z-index: 1;
    pointer-events: none;
}

body.services-page.services-overview-page header {
    position: fixed;                       /* Header bleibt wie auf About oben stehen und nimmt keinen Platz im normalen Layout ein */
    top: 0;                                /* Header sitzt direkt am oberen Browserrand */
    left: 0;                               /* Header beginnt direkt am linken Browserrand */
    width: 100%;                           /* Header nimmt die volle Browserbreite ein */
    z-index: 1000;                         /* Header liegt über Hintergrundbild und Overlay */
}

body.services-page.services-overview-page .services-wrapper,
body.services-page.services-overview-page footer {
    position: relative;                    /* Nur Services-Inhalt und Footer werden über das Services-Hintergrundbild gelegt */
    z-index: 2;                            /* Inhalt und Footer liegen über ::before und ::after */
}


/* =========================================================
   EINHEITLICHE CONTAINER-OBERKANTE UNTER DEM HEADER
   Ändert nur den Abstand nach oben.
   Breite, Höhe und internes Layout bleiben unverändert.
========================================================= */



/* Verhindert, dass globales section-padding den Abstand zusätzlich verfälscht */
body.about-page section,
body.links-page section {
    padding-top: 0 !important;
}



/* =========================================================
   FIX: About / Links / Services gleiche Oberkante
   Ändert nur den Abstand zum Header.
========================================================= */



/* globales section-padding auf diesen Seiten oben neutralisieren */
body.about-page section,
body.links-page section {
    padding-top: 0 !important;
}

/* =========================================================
   SERVICES OVERVIEW CONTAINER POSITION
========================================================= */

body.services-page.services-overview-page .services-wrapper {
    margin: 201px auto 100px auto !important;
}


/* =========================================================
   CUSTOM CONTENT CONTAINER POSITION
========================================================= */

body.services-page.custom-content-page .services-wrapper {
    margin: 170px auto 100px auto !important;
}

 /* =========================================================
   ABOUT TEXT POSITION
========================================================= */

.about-page .about-text {
    position: relative !important;
    top: 40px !important;
}

 /* =========================================================
   ABOUT FOOTER POSITION
========================================================= */

body.about-page footer {
    margin-top: 280px !important;
}

body.links-page footer {
    margin-top: 280px !important;
}



/* =========================================================
   ABOUT HEADER BLUR EARLIER VISUALLY
   Kein Blur beim Laden, größerer Blur-Bereich nach Scrollbeginn
========================================================= */

body.about-page.about-blur-early header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.about-page.about-blur-early header.scrolled {
    background: rgba(82, 82, 82, 0.14) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* =========================================================
   LINKS HEADER BLUR ONLY AFTER SCROLL
========================================================= */

body.links-page.links-blur-early header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.links-page.links-blur-early header.scrolled {
    background: rgba(82, 82, 82, 0.14) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* =========================================================
   CUSTOM CONTENT HEADER BLUR ON SCROLL
========================================================= */

body.services-page.custom-content-page header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 180px !important;

    background: transparent !important;

    transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease !important;

    z-index: 1000 !important;
}

body.services-page.custom-content-page header.scrolled {
    background: rgba(82, 82, 82, 0.14) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* =========================================================
   CUSTOM CHAT HEADER BLUR ON SCROLL
========================================================= */

body.services-page.custom-chat-page header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 180px !important;

    background: transparent !important;

    transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease !important;

    z-index: 1000 !important;
}

body.services-page.custom-chat-page header.scrolled {
    background: rgba(82, 82, 82, 0.14) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* =========================================================
   PRIVACY PAGE HEADER ALIGNMENT
   Header, Logo und Sprache wie auf den anderen Seiten
========================================================= */

body.privacy-page header {
    height: 180px !important;
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;

    background: transparent !important;

    transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease !important;

    z-index: 1000 !important;
}

body.privacy-page header.scrolled {
    background: rgba(82, 82, 82, 0.144) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.privacy-page nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    padding: 0 60px !important;
    box-sizing: border-box !important;
}

body.privacy-page .nav-left {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;

    margin-left: 380px !important;
    flex-shrink: 0 !important;
}

body.privacy-page nav ul {
    display: flex !important;
    list-style: none !important;
    gap: 0 !important;

    min-width: 440px !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;
}

body.privacy-page nav li {
    width: 100px !important;
    text-align: center !important;
}

body.privacy-page .language-switcher {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;

    margin-left: 730px !important;
    position: static !important;
    flex: 0 0 auto !important;
}

body.privacy-page .logo img {
    height: 200px !important;
}

/* =========================================================
   LINKS MOBILE = ABOUT MOBILE ÜBERNEHMEN
   Nur für:
   <body class="links-page links-blur-early">
   Desktop bleibt unverändert.
========================================================= */

@media (max-width: 768px) {

    /*
       Links-Seite bekommt dieselbe mobile Grundlogik
       wie die About-Seite.
    */
    body.links-page.links-blur-early {
        overflow-x: hidden !important;
    }

    /*
       Link-Panel verhält sich mobil wie About-Panel:
       Spalten werden zu einer zentrierten Spalte.
    */
    body.links-page.links-blur-early .link-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;

        width: 86% !important;
        margin: 200px auto 80px auto !important;
        padding: 20px 60px 60px 60px !important;

        min-height: auto !important;
        grid-template-columns: none !important;
        justify-content: center !important;
        column-gap: 0 !important;

        transform: translateY(-70px) !important;
        box-sizing: border-box !important;
    }

    /*
       Link-Titel übernimmt mobil die About-Title-Logik.
    */
    body.links-page.links-blur-early .link-title {
        order: 1 !important;

        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;

        margin: 0 0 20px 0 !important;
        text-align: center !important;

        font-size: 64px !important;
        line-height: 1.1 !important;
        width: 100% !important;
    }

    /*
       Link-Text übernimmt mobil die About-Text-Logik.
    */
    body.links-page.links-blur-early .link-text {
        order: 3 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body.links-page.links-blur-early .link-text p {
        max-width: 100% !important;
        margin-top: 0 !important;
        text-align: center !important;
    }

    /*
       Link-Karten bleiben Teil des Textbereichs,
       werden aber mobil einspaltig wie ein sauberer About-Content.
    */
    body.links-page.links-blur-early .link-collection {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 24px !important;
        margin-top: 32px !important;
    }

    body.links-page.links-blur-early .link-category {
        width: 100% !important;
    }

    body.links-page.links-blur-early .link-category-title {
        text-align: center !important;
    }

    body.links-page.links-blur-early .link-category-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        max-width: 100% !important;

        column-gap: 0 !important;
        row-gap: 16px !important;
    }

    body.links-page.links-blur-early .link-card {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }
}

/* =========================================================
   SERVICES OVERVIEW: MOBILE HEADER WIE ABOUT / LINKS
   Nur für:
   <body class="services-page services-overview-page">
   Voraussetzung im HTML:
   <header id="site-header">
========================================================= */

@media (max-width: 768px) {

    body.services-page.services-overview-page #site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        z-index: 99999 !important;
    }

    body.services-page.services-overview-page #site-header.nav-open .nav-left {
        display: block !important;
    }

    body.services-page.services-overview-page {
        overflow-x: hidden !important;
    }
}
/* =========================================================
   SERVICES OVERVIEW MOBILE: CONTAINER IM SICHTBAREN BEREICH
   Nur für:
   <body class="services-page services-overview-page">
   Desktop bleibt unverändert.
========================================================= */

@media (max-width: 768px) {

    body.services-page.services-overview-page .services-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 80px auto !important;
        padding: 110px 18px 60px 18px !important;

        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.services-page.services-overview-page .service-panel,
    body.services-page.services-overview-page .service-panel:first-child,
    body.services-page.services-overview-page .service-panel:nth-child(2),
    body.services-page.services-overview-page .service-panel:nth-child(3),
    body.services-page.services-overview-page .service-panel:nth-child(4) {
        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 42px !important;

        box-sizing: border-box !important;
    }

    body.services-page.services-overview-page .service-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        padding: 22px 16px !important;
        overflow: hidden !important;
    }

    body.services-page.services-overview-page .service-text-content,
    body.services-page.services-overview-page .service-text-chat,
    body.services-page.services-overview-page .service-text-wish {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.services-page.services-overview-page .service-text-content h2,
    body.services-page.services-overview-page .service-text-chat h2,
    body.services-page.services-overview-page .service-text-wish h2 {
        margin-left: 0 !important;
        margin-right: 0 !important;

        white-space: normal !important;
        text-align: center !important;

        font-size: 38px !important;
        line-height: 1.15 !important;
    }

    body.services-page.services-overview-page .service-text-content p,
    body.services-page.services-overview-page .service-text-chat p,
    body.services-page.services-overview-page .service-text-wish p {
        margin-left: 0 !important;
        margin-right: 0 !important;

        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }

    body.services-page.services-overview-page .service-video-preview,
    body.services-page.services-overview-page .service-video-preview-chat,
    body.services-page.services-overview-page .service-video-preview-wish {
        width: 100% !important;
        max-width: 290px !important;
        height: 260px !important;

        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 24px !important;

        box-sizing: border-box !important;
    }

    body.services-page.services-overview-page .service-video-preview video,
    body.services-page.services-overview-page .service-video-preview-chat video,
    body.services-page.services-overview-page .service-video-preview-wish video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* =========================================================
   SERVICE UNTERSEITEN MOBILE
   Custom Content / Custom Chat / Tribute
   Nutzt die echten Klassen aus deinem HTML.
   Desktop bleibt unverändert.
========================================================= */

@media (max-width: 768px) {

    body.services-page.custom-content-page,
    body.services-page.custom-chat-page,
    body.services-page.tribute-page {
        overflow-x: hidden !important;
    }

    
    body.services-page.custom-chat-page .services-wrapper,
    body.services-page.tribute-page .services-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 80px auto !important;
        padding: 110px 18px 60px 18px !important;

        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    body.services-page.custom-content-page .services-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    margin: 60px auto 80px auto !important;
    padding: 100px 18px 60px 18px !important;

    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

    body.services-page.custom-content-page .service-panel,
    body.services-page.custom-chat-page .service-panel,
    body.services-page.tribute-page .service-panel {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 42px !important;

        padding: 26px 18px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        transform: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;

        text-align: center !important;
    }

    body.services-page.custom-content-page .service-panel:first-child,
    body.services-page.custom-chat-page .service-panel:first-child,
    body.services-page.tribute-page .service-panel:first-child,
    body.services-page.custom-content-page .service-panel:nth-child(2),
    body.services-page.custom-chat-page .service-panel:nth-child(2),
    body.services-page.tribute-page .service-panel:nth-child(2),
    body.services-page.custom-content-page .service-panel:nth-child(3),
    body.services-page.custom-chat-page .service-panel:nth-child(3),
    body.services-page.tribute-page .service-panel:nth-child(3) {
        transform: none !important;
    }

    body.services-page.custom-content-page .service-text-content-custom-content,
    body.services-page.custom-chat-page .service-text-content-custom-chat,
    body.services-page.tribute-page .service-text-content-tribute {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.services-page.custom-content-page .service-text-content-custom-content h2,
    body.services-page.custom-chat-page .service-text-content-custom-chat h2,
    body.services-page.tribute-page .service-text-content-tribute h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 24px !important;

        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;

        text-align: center !important;
        white-space: normal !important;

        font-size: 38px !important;
        line-height: 1.15 !important;
    }

    body.services-page.custom-content-page .service-text-content-custom-content p,
    body.services-page.custom-chat-page .service-text-content-custom-chat p,
    body.services-page.tribute-page .service-text-content-tribute p {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: center !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }

    body.services-page.custom-content-page .custom-content-request-wrapper,
    body.services-page.custom-chat-page .custom-content-request-wrapper,
    body.services-page.tribute-page .tribute-line8-link-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 28px !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.services-page.custom-content-page .custom-content-request-link,
    body.services-page.custom-chat-page .custom-chat-request-link,
    body.services-page.tribute-page .tribute-line8-link {
        display: inline-block !important;

        max-width: 100% !important;

        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
    }

    body.services-page.custom-content-page .service-overview-links,
    body.services-page.custom-chat-page .service-overview-links {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;

        margin: 20px auto 0 auto !important;
        padding: 0 !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.services-page.custom-content-page .service-overview-links a,
    body.services-page.custom-chat-page .service-overview-links a {
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }
}
/* =========================================================
   LINKS PAGE BACKGROUND - NUR MOBILE
   Nur das Hintergrundbild tiefer setzen.
   Container bleiben unverändert.
========================================================= */

@media (max-width: 768px) {
    body.links-page.links-blur-early::before {
        background-position: center 70px !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================================================
   SERVICE UNTERSEITEN - NUR MOBILE HINTERGRUNDBILDER
   Custom Content / Custom Chat / Tribute
   Keine Container-Änderungen.
   Desktop bleibt unverändert.
========================================================= */

@media (max-width: 768px) {

    body.services-page.custom-content-page::before,
    body.services-page.custom-chat-page::before,
    body.services-page.tribute-page::before {
        background-size: auto 50% !important;
        background-repeat: no-repeat !important;
    }

    body.services-page.custom-content-page::before {
        background-position: center 58% !important;
    }

    body.services-page.custom-chat-page::before {
        background-position: center 58% !important;
    }

    body.services-page.tribute-page::before {
        background-position: center 58% !important;
    }
}
/* =========================================================
   CUSTOM CONTENT - NUR MOBILE HINTERGRUNDBILD FIX
   Macht Custom Content technisch wie Custom Chat / Tribute:
   Hintergrund läuft mobil über ::before statt direkt über body.
   Keine Container-Änderungen.
   Desktop bleibt unverändert.
========================================================= */

@media (max-width: 768px) {

    body.services-page.custom-content-page {
        background-image: none !important;
        background: #111 !important;
        position: relative !important;
        overflow-x: hidden !important;
    }

    body.services-page.custom-content-page::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;

        background-image: url("images/DSC_02t41_sw.jpg") !important;
        background-size: auto 50% !important;
        background-position: center 58% !important;
        background-repeat: no-repeat !important;

        z-index: 0 !important;
        pointer-events: none !important;
    }

    body.services-page.custom-content-page::after {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;

        background: rgba(0, 0, 0, 0.45) !important;

        z-index: 1 !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   ALLE UNTERSEITEN - NUR MOBILE
   Container transparenter, damit Hintergrundbilder sichtbarer sind.
   Desktop bleibt unverändert.
========================================================= */

@media (max-width: 768px) {

    body.about-page.about-blur-early .about-panel,
    body.links-page.links-blur-early .link-panel,
    body.services-page.services-overview-page .service-panel,
    body.services-page.custom-content-page .service-panel,
    body.services-page.custom-chat-page .service-panel,
    body.services-page.tribute-page .service-panel {
        background: rgba(20, 20, 20, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;

        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
}
/* =========================================================
   CONTACT MAIL LINK
   Verhindert blauen Standard-Link.
   Gilt für Desktop und Mobile.
========================================================= */

#contact a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
}

#contact a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* =========================================================
   INDEX MOBILE CONTACT CLICK FIX
   Nur Mobile: Kontaktbereich über Gallery-Klickflächen legen.
========================================================= */

@media (max-width: 768px) {
    #gallery {
        position: relative !important;
        z-index: 10 !important;
    }

    #contact {
        position: relative !important;
        z-index: 50 !important;
    }

    #contact a {
        position: relative !important;
        z-index: 51 !important;
        pointer-events: auto !important;
    }
}
/* =========================================================
   CUSTOM CONTENT - NUR MOBILE
   Container weiter nach unten setzen.
   Desktop bleibt unverändert.
========================================================= */

@media (max-width: 768px) {
    body.services-page.custom-content-page .services-wrapper {
        padding-top: 150px !important;
    }
}

/* =========================================================
   GLOBAL MOBILE SCALING
   Nur Mobile: bessere Skalierung für verschiedene Handygrößen
   Desktop bleibt unverändert.
========================================================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    h1 {
        font-size: clamp(34px, 10vw, 58px) !important;
        line-height: 1.05 !important;
    }

    h2 {
        font-size: clamp(28px, 8vw, 42px) !important;
        line-height: 1.15 !important;
    }

    p {
        font-size: clamp(13px, 3.8vw, 16px) !important;
        line-height: 1.65 !important;
    }

    a {
        max-width: 100% !important;
        word-break: break-word !important;
    }

    img,
    video {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =========================================================
   SERVICE PAGES MOBILE SCALING
   Custom Content / Custom Chat / Tribute
   Nur Mobile.
========================================================= */

@media (max-width: 768px) {

    body.services-page.custom-content-page .services-wrapper,
    body.services-page.custom-chat-page .services-wrapper,
    body.services-page.tribute-page .services-wrapper,
    body.services-page.services-overview-page .services-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-top: clamp(120px, 18vw, 180px) !important;
        padding-left: clamp(12px, 4vw, 20px) !important;
        padding-right: clamp(12px, 4vw, 20px) !important;
        padding-bottom: clamp(50px, 10vw, 80px) !important;

        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.services-page.custom-content-page .service-panel,
    body.services-page.custom-chat-page .service-panel,
    body.services-page.tribute-page .service-panel,
    body.services-page.services-overview-page .service-panel {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: clamp(32px, 8vw, 52px) !important;

        padding: clamp(18px, 5vw, 28px) clamp(14px, 4vw, 22px) !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.services-page.custom-content-page .service-panel h2,
    body.services-page.custom-chat-page .service-panel h2,
    body.services-page.tribute-page .service-panel h2,
    body.services-page.services-overview-page .service-panel h2 {
        font-size: clamp(28px, 8vw, 40px) !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    body.services-page.custom-content-page .service-panel p,
    body.services-page.custom-chat-page .service-panel p,
    body.services-page.tribute-page .service-panel p,
    body.services-page.services-overview-page .service-panel p {
        font-size: clamp(13px, 3.8vw, 16px) !important;
        line-height: 1.65 !important;
        white-space: normal !important;
    }
}

/* =========================================================
   VERY SMALL PHONES
   Kleine / ältere Smartphones
   Nur Mobile.
========================================================= */

@media (max-width: 390px) {

    body.services-page.custom-content-page .services-wrapper,
    body.services-page.custom-chat-page .services-wrapper,
    body.services-page.tribute-page .services-wrapper,
    body.services-page.services-overview-page .services-wrapper {
        padding-top: 125px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.services-page.custom-content-page .service-panel,
    body.services-page.custom-chat-page .service-panel,
    body.services-page.tribute-page .service-panel,
    body.services-page.services-overview-page .service-panel {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.services-page.custom-content-page .service-panel h2,
    body.services-page.custom-chat-page .service-panel h2,
    body.services-page.tribute-page .service-panel h2,
    body.services-page.services-overview-page .service-panel h2 {
        font-size: 28px !important;
    }

    body.services-page.custom-content-page .service-panel p,
    body.services-page.custom-chat-page .service-panel p,
    body.services-page.tribute-page .service-panel p,
    body.services-page.services-overview-page .service-panel p {
        font-size: 13px !important;
    }
}

/* =========================================================
   HOME HERO TEXT - ALLE MOBILE-GERÄTE
   Desktop bleibt unverändert.
========================================================= */

@media (max-width: 768px) {
    #home.hero {
        min-height: 100svh !important;
        width: 100% !important;
        max-width: 100% !important;

        padding-left: clamp(14px, 5vw, 24px) !important;
        padding-right: clamp(14px, 5vw, 24px) !important;

        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    #home.hero h1 {
        font-size: clamp(9px, 3.2vw, 12px) !important;
        line-height: 1.2 !important;

        position: relative !important;
        left: 55px !important;
        top: -235px !important;

        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        width: auto !important;
        max-width: 90% !important;

        transform: none !important;
    }
}