/* public/assets/css/frontend/base/main.css - Hauptstilblatt */

/* VARIABLEN & BASISEINSTELLUNGEN */
:root {
    --primary-color: #1a3c5a;
    --accent-color: #26a69a;
    --light-gray: #f5f5f5;
    --medium-gray: #e0e0e0;
    --dark-gray: #757575;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --font-primary: 'Open Sans', system-ui, -apple-system, sans-serif;
    --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-size-h1: 2rem;
    --font-size-h1-section: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1.1rem;
    --hero-title-size: clamp(1.8rem, 4vw, 2.5rem);
    --heading-margin-top: 0;
    --heading-margin-bottom: 1rem;
    --heading-line-height: 1.2;
    --heading-font-weight: 700;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
    --mobile-padding: 1rem;
    --mobile-section-padding: 2rem 0;
    --mobile-card-margin: 1rem;
    --mobile-font-scale: 1.0;
}

@media (max-width: 767px) {
    :root {
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --font-size-h1: 1.875rem;
        --font-size-h1-section: 2.125rem;
    }
}

/* Box-Sizing und Grundeinstellungen */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #fff;
}
main > section:first-child { margin-top: 80px; }


/* TYPOGRAFIE */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    margin: var(--heading-margin-top) 0 var(--heading-margin-bottom);
    color: var(--primary-color);
}
h1 { font-size: var(--font-size-h1); }
:where(section:not(.hero):not(.hero-section)) h1 { font-size: var(--font-size-h1-section); margin-bottom: 1.5rem; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }
.heading-reset { margin-top: var(--heading-margin-top); font-weight: var(--heading-font-weight); line-height: var(--heading-line-height); }
p { margin: 0 0 1rem; }
.lead { 
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    line-height: 1.6;
    color: #555555;
}
a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: #1e8e82; }


/* LAYOUT & CONTAINER */
.container { width: 100%; padding: 0 15px; margin: 0 auto; }

/* BILDER & MEDIEN */
img { max-width: 100%; height: auto; display: block; }
img[loading="lazy"] { opacity: 1 !important; transition: opacity 0.3s ease; background-color: transparent; }
img[loading="lazy"].loaded, img[loading="lazy"]:not([loading]) { opacity: 1; }
.no-lazy-support img[data-src] { opacity: 0; transition: opacity 0.3s ease; }
.no-lazy-support img[data-src].loaded { opacity: 1; }
.aspect-ratio-box { position: relative; height: 0; overflow: hidden; }
.aspect-ratio-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio-16-9 { padding-top: 56.25%; }
.ratio-4-3 { padding-top: 75%; }
.ratio-3-4 { padding-top: 133.33%; }
.ratio-1-1 { padding-top: 100%; }


/* HILFSFUNKTIONEN */
/* Abstandsklassen */
.mt-0, .mb-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.mt-1 { margin-top: var(--spacing-sm) !important; }
.mb-1 { margin-bottom: var(--spacing-sm) !important; }
.mt-2 { margin-top: var(--spacing-md) !important; }
.mb-2 { margin-bottom: var(--spacing-md) !important; }
.mt-3 { margin-top: var(--spacing-lg) !important; }
.mb-3 { margin-bottom: var(--spacing-lg) !important; }
.mt-4 { margin-top: var(--spacing-xl) !important; }
.mb-4 { margin-bottom: var(--spacing-xl) !important; }
/* Farbklassen */
.text-primary { color: var(--primary-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-light { background-color: var(--light-gray) !important; }
/* Anzeigehelfer */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
/* Schattenklassen */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }


/* KOMPONENTEN */
/* Scroll-to-top Button */
.scroll-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99;
    border: none;
    font-size: 1.1rem;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { background-color: var(--accent-color); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

/* INTERAKTIONSZUSTÄNDE */
/* Ladezustände */
.loading { position: relative; pointer-events: none; opacity: 0.6; }
.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--accent-color);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Barrierefreiheit & Fokuszustände */
a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 3px solid rgba(38, 166, 154, 0.5); outline-offset: 2px; }


/* MEDIENABFRAGEN */
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #4a7c9a;
        --accent-color: #4db6ac;
        --light-gray: #2a2a2a;
        --medium-gray: #3a3a3a;
        --dark-gray: #b0b0b0;
    }
    
    body { 
        background-color: #1a1a1a; 
        color: #e0e0e0; 
    }
    
    /* Legal Pages spezifisch */
    body.page-legal,
    body.page-impressum,
    body.page-datenschutz,
    body.page-agb {
        background-color: #1a1a1a !important;
    }
    
    /* Alle Headings sicherstellen */
    h1, h2, h3, h4, h5, h6 {
        color: var(--accent-color) !important;
    }
    
    /* Paragraphen und allgemeine Texte */
    p, li, td, th, span, div {
        color: #e0e0e0;
    }
    
    /* Bootstrap-Komponenten Dark Mode */
    .container, .row, .col-*, .card, .card-body {
        color: #e0e0e0;
    }
    
    /* Bootstrap Text-Utilities überschreiben */
    .text-dark {
        color: #e0e0e0 !important;
    }
    
    .text-muted {
        color: #b0b0b0 !important;
    }
    
    .text-secondary {
        color: #b0b0b0 !important;
    }
    
    /* Bootstrap Lead-Text */
    .lead {
        color: #e0e0e0 !important;
    }
    
    /* Bootstrap Badges */
    .badge {
        background-color: var(--medium-gray) !important;
        color: #e0e0e0 !important;
    }
    
    .badge.bg-primary {
        background-color: var(--primary-color) !important;
        color: #ffffff !important;
    }
    
    .badge.bg-success {
        background-color: rgba(40, 167, 69, 0.8) !important;
        color: #ffffff !important;
    }
    
    /* Bootstrap Alerts */
    .alert {
        background-color: var(--medium-gray) !important;
        border-color: var(--dark-gray) !important;
        color: #e0e0e0 !important;
    }
    
    .alert-info {
        background-color: rgba(77, 182, 172, 0.15) !important;
        border-color: rgba(77, 182, 172, 0.3) !important;
        color: #e0e0e0 !important;
    }
    
    .alert-heading {
        color: var(--accent-color) !important;
    }
    
    .alert p {
        color: #e0e0e0 !important;
    }
    
    /* Links sicherstellen */
    a {
        color: var(--accent-color) !important;
    }
    
    a:hover {
        color: #4db6ac !important;
    }
    
    /* Kleine Text-Elemente */
    small, .small {
        color: #b0b0b0 !important;
    }
    
    /* Bootstrap Display-Klassen */
    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
        color: var(--accent-color) !important;
    }
    
    /* Bootstrap Hintergrund-Utilities überschreiben */
    .bg-white {
        background-color: var(--medium-gray) !important;
    }
    
    .bg-light {
        background-color: var(--light-gray) !important;
    }
    
    /* Bootstrap Karten */
    .card {
        background-color: var(--medium-gray) !important;
        border-color: var(--dark-gray) !important;
        color: #e0e0e0 !important;
    }
    
    .card-header {
        background-color: var(--light-gray) !important;
        border-bottom-color: var(--dark-gray) !important;
        color: #e0e0e0 !important;
    }
    
    .card-body {
        color: #e0e0e0 !important;
    }
    
    .card-footer {
        background-color: var(--light-gray) !important;
        border-top-color: var(--dark-gray) !important;
        color: #e0e0e0 !important;
    }
    
    /* Impressum-spezifische Karten */
    .impressum-section .card h2,
    .impressum-section .card h3,
    .impressum-section .card h4 {
        color: var(--accent-color) !important;
    }
    
    .impressum-section .card p,
    .impressum-section .card address,
    .impressum-section .card li {
        color: #e0e0e0 !important;
    }
    
    .impressum-section .card strong {
        color: var(--accent-color) !important;
    }
    
    /* Kontakt-Informationen */
    .contact-info {
        background-color: var(--light-gray) !important;
        border: 1px solid var(--dark-gray) !important;
        border-radius: 0.375rem !important;
        padding: 1rem !important;
    }
    
    .contact-info .contact-label {
        color: #b0b0b0 !important;
        font-weight: 500;
    }
    
    .contact-info .contact-value {
        color: #e0e0e0 !important;
    }
    
    .contact-row {
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .contact-row:last-child {
        margin-bottom: 0;
    }
    
    /* PGP-Link */
    .pgp-download-link {
        color: var(--accent-color) !important;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .pgp-download-link:hover {
        color: #4db6ac !important;
        text-decoration: underline;
    }
    
    /* Externe Links im Impressum */
    .impressum-section a[href^="https://"] {
        color: var(--accent-color) !important;
        text-decoration: underline;
        word-break: break-all;
    }
    
    .impressum-section a[href^="https://"]:hover {
        color: #4db6ac !important;
        text-decoration: underline;
    }
    
    /* Legal Navigation */
    .legal-subnavigation {
        background-color: transparent !important;
    }
    
    .legal-subnavigation .legal-subnav-item {
        color: var(--accent-color) !important;
        text-decoration: none;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        transition: all 0.3s ease;
    }
    
    .legal-subnavigation .legal-subnav-item:hover {
        color: #4db6ac !important;
        background-color: rgba(77, 182, 172, 0.1);
    }
    
    .legal-subnavigation .legal-subnav-item.active {
        color: #4db6ac !important;
        background-color: rgba(77, 182, 172, 0.2);
        font-weight: 600;
    }
    
    .legal-subnavigation .legal-subnav-separator {
        color: #b0b0b0 !important;
        margin: 0 0.5rem;
    }
    
    /* Übergeordnete Container */
    .impressum-section,
    .impressum-section .container,
    .impressum-section .row,
    .impressum-section .col-lg-6,
    .impressum-section .col-md-8 {
        background-color: transparent !important;
    }
    
    /* Alle Bootstrap Container und Grid-Elemente */
    .page-impressum .container,
    .page-impressum .row,
    .page-impressum [class*="col-"] {
        background-color: transparent !important;
    }
    
    /* Vollständige Impressum-Seite */
    .page-impressum {
        background-color: #1a1a1a !important;
    }
    
    /* Impressum-spezifische Überschreibungen */
    .page-impressum section {
        background-color: transparent !important;
    }
    
    /* Datenschutz-Seite spezifisch */
    .page-datenschutz {
        background-color: #1a1a1a !important;
    }
    
    .page-datenschutz section {
        background-color: transparent !important;
    }
    
    .datenschutz-section .container,
    .datenschutz-section .row,
    .datenschutz-section [class*="col-"] {
        background-color: transparent !important;
    }
    
    /* Sidebar Navigation Links */
    .datenschutz-section .card ul li a {
        color: var(--accent-color) !important;
        text-decoration: none;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        display: block;
        transition: all 0.3s ease;
    }
    
    .datenschutz-section .card ul li a:hover {
        color: #4db6ac !important;
        background-color: rgba(77, 182, 172, 0.1);
    }
    
    /* Deutschland-Badge Container */
    .datenschutz-section .card .d-flex {
        background-color: transparent !important;
    }
    
    .datenschutz-section .card img {
        border-radius: 0.5rem;
        background-color: var(--light-gray);
        padding: 0.5rem;
    }
    
    /* Legal Pages Kontakt-Buttons */
    .datenschutz-section .btn-outline-primary,
    .agb-section .btn-outline-primary,
    .page-legal .btn-outline-primary {
        background-color: transparent !important;
        border-color: var(--accent-color) !important;
        color: var(--accent-color) !important;
    }
    
    .datenschutz-section .btn-outline-primary:hover,
    .agb-section .btn-outline-primary:hover,
    .page-legal .btn-outline-primary:hover {
        background-color: var(--accent-color) !important;
        border-color: var(--accent-color) !important;
        color: #1a1a1a !important;
    }
    
    .datenschutz-section .btn-outline-primary .d-block,
    .agb-section .btn-outline-primary .d-block,
    .page-legal .btn-outline-primary .d-block {
        color: inherit !important;
    }
    
    /* AGB-Seite spezifisch */
    .page-agb {
        background-color: #1a1a1a !important;
    }
    
    .page-agb section {
        background-color: transparent !important;
    }
    
    .agb-section .container,
    .agb-section .row,
    .agb-section [class*="col-"] {
        background-color: transparent !important;
    }
    
    /* Bootstrap Wells/Jumbotron-ähnliche Komponenten */
    .rounded-3, .rounded {
        background-color: var(--medium-gray) !important;
    }
    
    /* Shadow-Komponenten */
    .shadow-sm, .shadow, .shadow-lg {
        box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important;
    }
}
/* Mobile Anpassungen */
@media (max-width: 767px) {
    .scroll-top-btn { bottom: 70px; right: 15px; width: 40px; height: 40px; font-size: 1rem; }
    
    /* Mobile Typography-Optimierung */
    body {
        font-size: 1.05rem;
    }
    
    p {
        font-size: 1.05rem;
        line-height: 1.65;
    }
}
/* Druckstile */
@media print {
    .no-print, .navbar, .footer, .scroll-top-btn, .developer-badge { display: none !important; }
    body { color: #000 !important; background: white !important; }
    a { color: #000 !important; text-decoration: underline !important; }
}