/*
==============================================================================
LEISTUNGSSEITE - SPLITSCREEN LAYOUT UND GRUNDSTRUKTUR
==============================================================================
Spezifische Styling-Definitionen für die Leistungsseite mit geteilter
Bildschirmdarstellung. Das Layout ermöglicht eine interaktive Präsentation
der Dienstleistungen in zwei separaten Bereichen (Immobilienverwaltung und
Gebäudeservice) mit flüssigen Übergängen und responsiver Darstellung.
*/

/*
------------------------------------------------------------------------------
HTML UND BODY GRUNDEINSTELLUNGEN
------------------------------------------------------------------------------
Zurücksetzen der Standard-Margins und -Paddings für eine saubere
Vollbild-Darstellung ohne horizontale Scrollbalken.
*/
html, body { 
    margin: 0; 
    box-sizing: border-box; 
    overflow-x: hidden;
}

/*
------------------------------------------------------------------------------
HAUPT-CONTAINER FÜR SPLITSCREEN-LAYOUT
------------------------------------------------------------------------------
Flexbox-Container für das geteilte Layout mit zwei gleichberechtigten
Bereichen. Mindesthöhe entspricht der Viewport-Höhe für vollständige
Bildschirmabdeckung.
*/
#container {
    display: flex;
    min-height: 100vh;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
    z-index: 0;
}

/*
------------------------------------------------------------------------------
HEADER UND NAVIGATION
------------------------------------------------------------------------------
Sticky Header für durchgehende Navigation auch beim Scrollen.
Höchste Z-Index Priorität für Überlagerung aller anderen Elemente.
*/
header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/*
------------------------------------------------------------------------------
BODY UND FOOTER POSITIONIERUNG
------------------------------------------------------------------------------
Entfernung von Standard-Padding und korrekte Footer-Positionierung
für nahtlose Darstellung.
*/
body { 
    padding-top: 0 !important; 
}

.footer-section {
    position: relative;
    left: 0;
    width: 100%;
    z-index: 10;
}

/*
==============================================================================
PANEL-SYSTEM UND INTERAKTIVE BEREICHE
==============================================================================
Definiert das Verhalten der beiden Hauptbereiche (linkes und rechtes Panel)
mit flüssigen Übergängen, Hover-Effekten und verschiedenen Anzeigemodi
für optimale Benutzerinteraktion.
*/

/*
------------------------------------------------------------------------------
GRUNDLEGENDES PANEL-STYLING
------------------------------------------------------------------------------
Jedes Panel nimmt standardmäßig 50% der Bildschirmbreite ein und zeigt
Inhalte zentriert an. Smooth Transitions für alle Größenänderungen.
*/
.panel {
    flex-shrink: 0;
    width: 50%;
    transition: width 0.6s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #fff;
    position: relative;
    padding-top: 15vh;
}

/*
------------------------------------------------------------------------------
PANEL-ZUSTANDSKLASSEN FÜR INTERAKTIVITÄT
------------------------------------------------------------------------------
Verschiedene Zustände für dynamische Panel-Größenänderungen bei
Benutzerinteraktion und Content-Anzeige.
*/
.full-width{ 
    width:100% !important; 
    z-index:2; 
}

.zero-width{ 
    width:0 !important; 
    pointer-events:none; 
}

.grow{ 
    width:70% !important; 
    z-index:2; 
}

.shrink{ 
    width:30% !important; 
    z-index:1; 
}

/*
------------------------------------------------------------------------------
KOLLAPSIBLE BEREICHE UND KARTEN-CONTAINER
------------------------------------------------------------------------------
Animierte Container für Card-Darstellungen mit sanften Ein- und
Ausblendeffekten für optimale Benutzererfahrung.
*/
.collapse{ 
    width:100%; 
    margin-top:1rem; 
    overflow:hidden; 
}

.card-body{ 
    overflow:hidden; 
}

/*
------------------------------------------------------------------------------
HOVER-EFFEKTE UND INTERAKTIONSBUTTONS
------------------------------------------------------------------------------
Buttons, die nur bei Hover-Zuständen sichtbar werden (Desktop) oder
dauerhaft angezeigt werden (Mobile/Tablet).
*/
.hover-button{ 
    transition:opacity 0.3s ease; 
}

.d-none{ 
    display:none !important; 
}

.panel:hover .hover-button.desktop-visible:not(.d-none){ 
    opacity:1; 
}

.hover-button.desktop-visible{ 
    opacity:0; 
}

/*
------------------------------------------------------------------------------
EXIT-BUTTON FÜR VOLLBILD-MODUS
------------------------------------------------------------------------------
Schließen-Button für erweiterte Panel-Ansichten mit absoluter
Positionierung in der oberen rechten Ecke.
*/
.exit-btn{ 
    position:absolute; 
    top:1rem; 
    right:1rem; 
    z-index:10; 
    display:none; 
}

.exit-btn.active{ 
    display:block; 
}

/*
------------------------------------------------------------------------------
KARTEN-ANIMATIONEN UND ÜBERGANGSEFFEKTE
------------------------------------------------------------------------------
Stufenweise Einblendung der Karten mit zeitversetzten Animationen
für einen professionellen Präsentationseffekt.
*/
.card{ 
    opacity:0; 
    transform:translateY(20px); 
    transition:opacity .3s ease, transform .3s ease; 
}

.collapse.show .card{ 
    opacity:1; 
    transform:translateY(0); 
}

.collapse.show .col:nth-child(1) .card{ transition-delay: 0s; }
.collapse.show .col:nth-child(2) .card{ transition-delay: .05s; }
.collapse.show .col:nth-child(3) .card{ transition-delay: .1s; }
.collapse.show .col:nth-child(4) .card{ transition-delay: .15s; }
.collapse.show .col:nth-child(5) .card{ transition-delay: .2s; }
.collapse.show .col:nth-child(6) .card{ transition-delay: .25s; }
.collapse.show .col:nth-child(7) .card{ transition-delay: .3s; }
.collapse.show .col:nth-child(8) .card{ transition-delay: .35s; }

/*
------------------------------------------------------------------------------
KARTEN-LAYOUT UND ZENTRIERUNG
------------------------------------------------------------------------------
Responsive Anordnung der Service-Karten mit optimaler Verteilung
und zentrierter Ausrichtung für professionelle Darstellung.
*/
.row.row-cols-1.row-cols-md-2.g-3 { 
    max-width:70%; 
    margin-left:auto; 
    margin-right:auto; 
    justify-content:space-evenly; 
}

.panel, .full-width {
    box-sizing: border-box;
}

/*
==============================================================================
RESPONSIVE KARTEN-LAYOUT MIT CSS GRID
==============================================================================
Moderne Grid-basierte Anordnung der Service-Karten für optimale Darstellung
auf allen Bildschirmgrößen. Gleichmäßige Verteilung und automatische
Anpassung der Spaltenanzahl je nach verfügbarem Platz.
*/

/*
------------------------------------------------------------------------------
GRID-SYSTEM FÜR AUTOMATISCHE KARTEN-ANORDNUNG
------------------------------------------------------------------------------
CSS Grid mit automatischer Spaltenanpassung und einheitlicher Kartenhöhe.
Minimale Kartenbreite von 250px mit optimaler Platznutzung.
*/
.row.row-cols-auto, .row.row-cols-1, .row.row-cols-md-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    align-items: stretch;
    justify-items: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/*
------------------------------------------------------------------------------
DESKTOP-OPTIMIERUNG: MAXIMALE SPALTENANZAHL
------------------------------------------------------------------------------
Beschränkung auf maximal 3 Karten pro Zeile auf großen Bildschirmen
für optimale Lesbarkeit und professionelle Darstellung.
*/
@media (min-width: 992px) {
    .row.row-cols-auto, .row.row-cols-1, .row.row-cols-md-2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*
------------------------------------------------------------------------------
KARTEN-DESIGN UND GLASMORPHISMUS-EFFEKT
------------------------------------------------------------------------------
Moderne Karten mit Glasmorphismus, Gradient-Hintergründen und
subtilen Schatten für eine ansprechende visuelle Präsentation.
*/
.card.card-body {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(135deg, rgba(153, 167, 179, 0.7) 0%, rgba(203, 210, 216, 0.7) 100%) !important;
    backdrop-filter: blur(2px);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-radius: 1.5rem;
    padding-bottom: 2.5rem;
}

/*
------------------------------------------------------------------------------
MOBILE KARTEN-ANPASSUNG
------------------------------------------------------------------------------
Vollbreite Darstellung auf kleinen Bildschirmen für optimale
Platznutzung und Lesbarkeit.
*/
@media (max-width: 600px) {
    .card.card-body {
        max-width: 100%;
    }
}

/*
==============================================================================
RESPONSIVE DESIGN - MOBILE UND TABLET OPTIMIERUNG
==============================================================================
Umfassende Anpassungen für kleinere Bildschirme mit vertikalem Layout,
angepassten Übergängen und optimierter Benutzerinteraktion für
Touch-Geräte und mobile Browser.
*/

/*
------------------------------------------------------------------------------
MOBILE LAYOUT-TRANSFORMATION (MAX-WIDTH: 991.98PX)
------------------------------------------------------------------------------
Umwandlung des horizontalen Splitscreen-Layouts in ein vertikales
Stapel-Layout für optimale mobile Darstellung.
*/
@media (max-width:991.98px){
    /*
    ..................................................................
    CONTAINER-ANPASSUNGEN FÜR MOBILE GERÄTE
    ..................................................................
    Änderung der Flex-Richtung zu vertikal und Entfernung der
    festen Höhenbeschränkungen für natürliche Content-Anpassung.
    */
    #container{
        flex-direction:column;
        height:auto !important;
        min-height:0 !important;
        position: static !important;
    }
    
    /*
    ..................................................................
    PANEL-VERHALTEN AUF MOBILEN GERÄTEN
    ..................................................................
    Vollbreite Panels mit Viewport-Höhe und optimierten Übergängen
    für Touch-basierte Interaktion.
    */
    .panel{
        position: relative !important;
        width:100% !important;
        min-height:100vh !important;
        max-height:none !important;
        height:auto !important;
        overflow: visible;
        padding-top: 5vh;
        padding-bottom: 3vh;
        margin-top: 0;
        transition: max-height 0.6s cubic-bezier(.4,0,.2,1), opacity 0.4s cubic-bezier(.4,0,.2,1);
        border-radius: 0;
        opacity: 1 !important;
    }
    
    /*
    ..................................................................
    VOLLBILD-PANEL VERHALTEN
    ..................................................................
    Spezielle Behandlung für erweiterte Panel-Ansichten mit
    automatischer Höhenanpassung.
    */
    .panel.full-width {
        max-height: none !important;
        min-height: 100vh !important;
        transition: max-height 0.6s cubic-bezier(.4,0,.2,1), opacity 0.4s cubic-bezier(.4,0,.2,1);
        opacity: 1 !important;
        height:auto !important;
    }
    
    /*
    ..................................................................
    KOLLABIERTE PANEL-ZUSTÄNDE
    ..................................................................
    Ausgeblendete Panels mit sanften Übergängen und vollständiger
    Inhalts-Verbergung für saubere Navigation.
    */
    .panel:not(.full-width) {
        max-height: 0 !important;
        opacity: 1 !important;
        overflow: hidden;
        transition: max-height 0.6s cubic-bezier(.4,0,.2,1), opacity 0.4s cubic-bezier(.4,0,.2,1);
    }
    
    /*
    ..................................................................
    PANEL-TRENNLINIEN FÜR VISUELLE ABGRENZUNG
    ..................................................................
    Subtile Rahmen zwischen den Panels für bessere optische
    Trennung im vertikalen Layout.
    */
    .panel.left {
        border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    }
    
    .panel.right {
        border-top: 2px solid rgba(0, 0, 0, 0.05);
    }
    
    /*
    ..................................................................
    ANGEPASSTES VOLLBILD-VERHALTEN FÜR MOBILE
    ..................................................................
    Optimierte Darstellung erweiterter Inhalte mit flexibler
    Höhenanpassung und verbesserter Scrollbarkeit.
    */
    .full-width{
        max-height:none !important;
        min-height:auto !important;
        overflow:visible;
        z-index:2;
        transition: max-height 0.6s cubic-bezier(.4,0,.2,1);
        height:auto !important;
    }

    /*
    ..................................................................
    MOBILE BUTTON-SICHTBARKEIT
    ..................................................................
    Permanente Anzeige der Interaktions-Buttons auf Touch-Geräten
    da Hover-Effekte nicht verfügbar sind.
    */
    .hover-button.desktop-visible{ 
        opacity:1 !important; 
        display:inline-block !important; 
    }
    
    /*
    ..................................................................
    EXIT-BUTTON POSITIONING FÜR MOBILE
    ..................................................................
    Angepasste Positionierung und Sichtbarkeit des Schließen-Buttons
    für Touch-optimierte Bedienung.
    */
    .exit-btn {
        display: none !important;
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 20;
        margin-top: 0;
    }
    
    .full-width .exit-btn.active {
        display: block !important;
    }
    
    .exit-btn.active{ 
        display:block; 
    }
    
    /*
    ..................................................................
    MOBILE KARTEN-LAYOUT ANPASSUNGEN
    ..................................................................
    Vollbreite Karten-Container mit angepasstem Padding für
    optimale Darstellung auf kleinen Bildschirmen.
    */
    .row.row-cols-1.row-cols-md-2.g-3 { 
        max-width:100%; 
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .panel .card { 
        width:100%; 
    }
    
    /*
    ..................................................................
    BUTTON-AUSBLENDUNG IN VOLLBILD-MODUS
    ..................................................................
    Verstecken der Hover-Buttons wenn ein Panel im Vollbild-Modus
    angezeigt wird für saubere Darstellung.
    */
    .full-width .hover-button.desktop-visible {
        display: none !important;
    }
    
    /*
    ..................................................................
    ZERO-WIDTH OVERRIDE FÜR MOBILE FLEXIBILITÄT
    ..................................................................
    Ermöglicht simultane Anzeige beider Panels auf mobilen Geräten
    für bessere Benutzerfreundlichkeit.
    */
    .zero-width {
        max-height: none !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        z-index: 1;
    }
}

/*
==============================================================================
DESKTOP-SPEZIFISCHE OPTIMIERUNGEN UND LAYOUT-ANPASSUNGEN
==============================================================================
Spezielle Anpassungen für Desktop-Darstellung mit erweiterten
Abständen und optimierter vertikaler Positionierung für
professionelle Präsentation auf größeren Bildschirmen.
*/

/*
------------------------------------------------------------------------------
DESKTOP-LAYOUT FÜR GROSSE BILDSCHIRME (AB 992PX)
------------------------------------------------------------------------------
Erweiterte Panel-Positionierung mit negativem Margin für visuell
ansprechende Darstellung und großzügigem Bottom-Padding.
*/
@media (min-width: 992px) {
    .panel {
        margin-top: -18vh;
        padding-bottom: 10vh;
    }
}

/*
==============================================================================
CONTENT-STYLING UND TYPOGRAFIE
==============================================================================
Einheitliche Gestaltung für Karten-Inhalte, Texte und Überschriften
mit optimierter Lesbarkeit und responsiver Typografie.
*/

/*
------------------------------------------------------------------------------
KARTEN-CONTENT UND TEXTFORMATIERUNG
------------------------------------------------------------------------------
Automatische Textumbrüche und Silbentrennung für optimale
Darstellung in verschiedenen Container-Größen.
*/
.panel .card-body {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding: 1.25rem;
}

/*
------------------------------------------------------------------------------
ÜBERSCHRIFTEN UND TEXT-HIERARCHIE
------------------------------------------------------------------------------
Definierte Schriftgrößen und -gewichte für klare visuelle
Hierarchie und optimale Lesbarkeit.
*/
.panel .card-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.panel .card-text {
    font-size: 1.2rem;
    font-weight: 500;
}

/*
==============================================================================
LOGO UND BRANDING-ELEMENTE
==============================================================================
Responsive Logo-Darstellung mit Hover-Effekten und automatischer
Größenanpassung je nach Panel-Zustand für konsistente Markenpräsenz.
*/

/*
------------------------------------------------------------------------------
LOGO-PANEL GRUNDSTYLING
------------------------------------------------------------------------------
Responsive Logo mit automatischer Größenanpassung und sanften
Übergängen für verschiedene Darstellungsmodi.
*/
.logo-panel {
    max-width: 50%;
    max-height: 50%;
    margin-bottom: 1rem;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), max-height 0.3s cubic-bezier(.4,0,.2,1);
    display: block;
}

/*
------------------------------------------------------------------------------
LOGO-ANPASSUNGEN FÜR VOLLBILD-MODUS
------------------------------------------------------------------------------
Vergrößerte Logo-Darstellung wenn ein Panel im Vollbild-Modus
angezeigt wird für bessere Sichtbarkeit.
*/
.full-width .logo-panel {
    max-height: 180px;
}

/*
------------------------------------------------------------------------------
LOGO HOVER-EFFEKT FÜR DESKTOP
------------------------------------------------------------------------------
Subtiler Vergrößerungseffekt beim Hovern über Panels für
enhanced Benutzerinteraktion auf Desktop-Geräten.
*/
.panel:hover .logo-panel {
    transform: scale(1.2);
}

/*
==============================================================================
TABLET-OPTIMIERUNGEN UND TOUCH-UNTERSTÜTZUNG
==============================================================================
Spezielle Anpassungen für Tablet-Geräte ohne Hover-Unterstützung
mit dauerhaft sichtbaren Interaktions-Elementen für optimale
Touch-basierte Bedienung und Benutzerfreundlichkeit.
*/

/*
------------------------------------------------------------------------------
TABLET HOVER-OVERRIDE SYSTEM
------------------------------------------------------------------------------
Spezialklasse für Tablets ohne Hover-Funktionalität zur dauerhaften
Anzeige von Interaktions-Buttons für Touch-optimierte Navigation.
*/
body.tablet-no-hover .hover-button.desktop-visible {
    opacity: 1 !important;
    display: inline-block !important;
}

body.tablet-no-hover .full-width .hover-button.desktop-visible {
    display: none !important;
}

/*
==============================================================================
PANEL-SPEZIFISCHE KARTEN-DESIGNS
==============================================================================
Unterschiedliche visuelle Behandlung für linke und rechte Panel-Karten
mit angepassten Hintergründen und Farbschemata für bessere
Differenzierung der Dienstleistungsbereiche.
*/

/*
------------------------------------------------------------------------------
DUNKLE KARTEN FÜR RECHTES PANEL
------------------------------------------------------------------------------
Spezielle Farbgebung für Gebäudeservice-Karten mit dunklerem
Hintergrund für visuelle Abgrenzung zum Immobilienverwaltungs-Bereich.
*/
.card-right-panel {
    background: linear-gradient(135deg, rgba(10,10,10,0.75) 0%, rgba(30,30,30,0.75) 100%);
    color: #fff;
}

/*
------------------------------------------------------------------------------
RECHTES PANEL KARTEN-STYLING
------------------------------------------------------------------------------
Einheitliche dunkle Gestaltung aller Karten im rechten Panel
(Gebäudeservice) für konsistente visuelle Trennung.
*/
#cards-right .card {
    background: linear-gradient(135deg, rgba(10,10,10,0.75) 0%, rgba(30,30,30,0.75) 100%) !important;
    color: #fff !important;
}

#right .card.card-body {
    background: rgba(20, 20, 20, 0.75);
}

/*
==============================================================================
ERWEITERTE HOVER-EFFEKTE UND MIKROINTERAKTIONEN
==============================================================================
Sophisticated Hover-Effekte für Desktop-Geräte mit 3D-Transformationen
und dynamischen Schatten für premium Benutzererfahrung und
professionelle Präsentation der Dienstleistungen.
*/

/*
------------------------------------------------------------------------------
KARTEN LIFT-UP EFFEKT FÜR DESKTOP
------------------------------------------------------------------------------
3D-Hover-Effekt mit Kartenhebung und verstärkten Schatten
ausschließlich für Geräte mit präziser Hover-Unterstützung.
*/
@media (hover: hover) and (pointer: fine) {
    #left .card.card-body, #right .card.card-body {
        transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, box-shadow;
    }
    
    #left .card.card-body:hover, #right .card.card-body:hover {
        transform: translateY(-12px) scale(1.03);
        box-shadow: 0 12px 32px 0 rgba(0,0,0,0.18), 0 2px 8px 0 rgba(0,0,0,0.10);
        z-index: 2;
    }
}