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


/* =========================================================
   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 */
    justify-content:space-between;/* verteilt linke und rechte Seite */
    align-items:center;           /* zentriert Elemente vertikal */
    padding:0 60px;               /* setzt Innenabstand links und rechts */
}

.gallery-page nav{
    position: fixed;              /* Navigation bleibt auf Gallery-Seite fixiert */
    top: 0;                       /* Navigation sitzt am oberen Rand */
    left: 0;                      /* Navigation sitzt am linken Rand */
    width: 100%;                  /* Navigation nimmt volle Breite ein */
    z-index: 99999;               /* Navigation liegt sehr weit vorne */
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: 450px;
    flex-shrink: 0;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    min-width: 440px;
}

nav a{
    position: relative;           /* Basis für die Unterstreichung mit ::after */
    color:white;                  /* Linkfarbe */
    font-family: Montserrat, sans-serif; /* Schriftart der Navigation */
    text-decoration:none;         /* entfernt Standard-Unterstreichung */
}

nav ul a::after{
    content: "";                  /* erzeugt ein Pseudoelement */
    position: absolute;           /* positioniert die Linie frei unter dem Link */
    left: 0;                      /* Linie startet links */
    bottom: -6px;                 /* Linie sitzt 6px unter dem Text */
    width: 0%;                    /* Linie ist zuerst unsichtbar */
    height: 1px;                  /* Höhe der Linie */
    background: #ffffff;          /* Farbe der Linie */
    transition: 0.35s ease;       /* weiche Animation der Linie */
}

nav a:hover::after{
    width: 100%;                  /* Linie wächst beim Hover auf volle Breite */
}


/* =========================================================
   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;
    gap: 12px;
    flex: 0 0 auto;
}

.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;
    gap: 12px;
    align-items: center;
    margin-left: 730px;
    position: static;
    flex: 0 0 auto;
}

.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.75);              /* macht Video dunkler */
}


/* =========================================================
   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,
body.about-page section,
body.about-page footer {
    position: relative;                     /* hebt Inhalt in eigene Ebene */
    z-index: 2;                             /* Inhalt liegt über Overlay */
}


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

.about-page .about-panel {
    margin: 170px 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.75);               /* dunkelt Video ab */
}

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

.links-page .link-panel {
    margin: 30px 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 */
}
/* =========================================================
   31 ABOUT PANEL MOVE UP
   Verschiebt das komplette About-Panel nach oben
========================================================= */

body.about-page .about-panel {
    transform: translateY(-70px) !important; /* verschiebt gesamtes Panel nach oben */
}


/* =========================================================
   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,
body.links-page section,
body.links-page footer {
    position: relative;                     /* setzt einen Bezugspunkt für Positionierung und z-index */
    z-index: 2;                             /* bestimmt die Ebenenreihenfolge */
}
/* =========================================================
   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;
    overflow-x: hidden;
    font-family: "Montserrat", sans-serif;
}

.services-page .services-wrapper {
    width: 70%;
    margin: 170px auto 100px auto;

    display: flex;
    flex-direction: column;
    gap: 70px;

    position: relative;
    z-index: 2;
}

.services-page .service-panel {
    min-height: 260px;

    display: grid;
    grid-template-columns: 340px 1fr;
    align-items: center;
    column-gap: 50px;

    padding: 10px;

    background: rgba(20, 20, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;

    font-family: "Montserrat", sans-serif;
}

.services-page .service-panel:first-child {
    transform: translateX(-380px);
}
.services-page .service-panel:nth-child(2) {
    transform: translateX(380px);
}

.services-page .service-panel:nth-child(3) {
    transform: translateX(-380px);
}
.services-page .service-panel:nth-child(4) {
    transform: translateX(380px);
}

.services-page .service-image {
    width: 290px;
    height: 290px;

    overflow: visible;
    border-radius: 18px;
    margin-left: 100px;
}

.services-page .service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    display: block;
    filter: brightness(0.78);
}


.services-page .service-text {
    max-width: 680px;
}
/* =========================================================
  01 Custom Content
========================================================= */
.services-page .service-text-content h2 {
    margin-bottom: 34px;

    font-family: "Montserrat", sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 1px;

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

.services-page .service-text-content p {
    max-width: 680px;
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.9;
    letter-spacing: 0.2px;

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

.services-page .service-video-panel .service-text {
    grid-column: 1;
    grid-row: 1;
}

.services-page .service-video-preview {
    grid-column: 2;
    grid-row: 1;

    width: 290px;
    height: 280px;

    overflow: hidden;
    border-radius: 18px;
    margin-left:auto;
}

.services-page .service-video-preview video {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    display: block;
    filter: brightness(0.78);
}

.footer-counter {
    font-size: 10px;
    opacity: 0.3;
    margin-top: 6px;
    text-align: center;
    font-family: inherit;
    color: inherit;
}
/* =========================================================
 02 Custom Chat
========================================================= */

.services-page .service-text-chat h2 {
    margin-bottom: 34px;

    font-family: "Montserrat", sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 1px;

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

.services-page .service-text-chat p {
    max-width: 680px;
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.9;
    letter-spacing: 0.2px;

    color: rgba(255,255,255,0.72);
    margin-left: 795px; /* pixelgenau nach rechts */
    white-space: nowrap; /* verhindert Zeilenumbruch */
}
.services-page .service-video-panel {
    grid-template-columns: 1fr 290px;
}

.services-page .service-video-panel .service-text {
    grid-column: 1;
    grid-row: 1;
}

.services-page .service-video-preview-chat {
    grid-column: 2;
    grid-row: 1;

    width: 290px;
    height: 280px;

    overflow: hidden;
    border-radius: 18px;
    margin-left:-390px;
}

.services-page .service-video-preview-chat video {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 50%;

    display: block;
    filter: brightness(0.78);
}

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

.services-page .service-text-wish h2 {
    margin-bottom: 34px;

    font-family: "Montserrat", sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 1px;

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

.services-page .service-text-wish p {
    max-width: 680px;
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.9;
    letter-spacing: 0.2px;

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

.services-page .service-video-panel .service-text {
    grid-column: 1;
    grid-row: 1;
}

.services-page .service-video-preview-wish {
    grid-column: 2;
    grid-row: 1;

    width: 290px;
    height: 280px;

    overflow: hidden;
    border-radius: 18px;
    margin-left: auto;
}

.services-page .service-video-preview-wish video {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 50%;

    display: block;
    filter: brightness(0.78);
}


.footer-counter {
    font-size: 10px;
    opacity: 0.3;
    margin-top: 6px;
    text-align: center;
    font-family: inherit;
    color: inherit;
}