/* ==========================================================================
   RESPONSIVE.CSS
   ==========================================================================
   Enthält alle globalen Responsive-Anpassungen für die Website.
*/

/* ==========================================================================
   INHALTSVERZEICHNIS
   ==========================================================================

   1. Typografie...........................................Zeile 50
      1.1 Überschriften....................................Zeile 55
      1.2 Text............................................Zeile 70

   2. Layout..............................................Zeile 85
      2.1 Grid-Layouts....................................Zeile 90
      2.2 Flex-Layouts....................................Zeile 105

   3. Komponenten.........................................Zeile 120
      3.1 Navigation......................................Zeile 125
      3.2 Buttons.........................................Zeile 140
      3.3 Cards..........................................Zeile 155
      3.4 Akkordeon......................................Zeile 170

   4. Sektionen..........................................Zeile 185
      4.1 Header.........................................Zeile 190
      4.2 Footer.........................................Zeile 205
      4.3 Content-Sektionen..............................Zeile 220
*/

/* Hinweis: Alle CSS-Variablen wurden in variables.css konsolidiert */

/* ==========================================================================
   1. Typografie
   ========================================================================== */

/* 1.1 Überschriften
   ========================================================================== */
/* Überschriften sind jetzt flüssig und benötigen keine separaten Media Queries mehr */

/* 1.2 Text
   ========================================================================== */
/* Text ist jetzt flüssig und benötigt keine separaten Media Queries mehr */

/* ==========================================================================
   2. Layout
   ========================================================================== */

/* 2.1 Grid-Layouts
   ========================================================================== */
@media (max-width: 992px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* 2.2 Flex-Layouts
   ========================================================================== */
@media (max-width: 992px) {
    .flex-row {
        flex-direction: column;
    }
}

/* ==========================================================================
   3. Komponenten
   ========================================================================== */

/* 3.1 Navigation
   ========================================================================== */
@media (max-width: 992px) {
    .header-right {
        gap: 1rem;
    }
    
    /* Anpassungen für die Hauptnavigation */
    .main-nav {
        padding: 0.5rem 0;
    }
}

@media (max-width: 768px) {
    .header-right {
        gap: 1rem;
    }

    .phone-number {
        display: none;
    }

    .nav-menu {
        flex-direction: column;
        height: auto;
        padding: 0.8rem;
        top: auto;
        bottom: calc(100% + 5px);
        transform: translateX(-50%) scaleY(0);
        align-items: stretch;
        gap: 0.5rem;
    }

    .hamburger-menu:hover .nav-menu {
        transform: translateX(-50%) scaleY(1);
    }

    .nav-menu a {
        padding: 1rem 1.8rem;
        text-align: left;
    }
}

/* 3.2 Buttons
   ========================================================================== */
@media (max-width: 768px) {
    .cta-button,
    /* Hinweis: Die folgenden Klassen wurden entfernt, da sie nicht verwendet werden:
    .secondary-button,
    .text-button,
    */
    .button-one-blue {
        padding: 0.6rem 1.2rem;
        /* font-size wird von flüssigen Variablen gehandhabt */
    }
    
    .button-on-blue {
        /* font-size wird von flüssigen Variablen gehandhabt */
        padding: 0.5rem 0.8rem;
    }
}

@media (max-width: 576px) {
    .cta-button,
    /* Hinweis: Die folgenden Klassen wurden entfernt, da sie nicht verwendet werden:
    .secondary-button,
    .text-button,
    */
    .button-one-blue {
        padding: 0.5rem 1rem;
        /* font-size wird von flüssigen Variablen gehandhabt */
    }
    
    .button-on-blue {
        /* font-size wird von flüssigen Variablen gehandhabt */
        padding: 0.4rem 0.7rem;
    }
}

/* 3.3 Cards
   ========================================================================== */
@media (max-width: 992px) {
    .card-base, .expertise-card, .leistung-card {
        padding: 1.5rem;
    }
}

/* 3.4 Akkordeon
   ========================================================================== */
/* Hinweis: Die folgenden Klassen wurden entfernt, da sie nicht verwendet werden:
@media (max-width: 768px) {
    .accordion-header {
        padding: 0.8rem;
    }
}
*/

/* ==========================================================================
   4. Sektionen
   ========================================================================== */

/* 4.1 Header
   ========================================================================== */
@media (max-width: 992px) {
    /* font-size wird von flüssigen Variablen gehandhabt */

    .hero,
    .subpage-hero {
        height: 250px;
    }
}

@media (max-width: 768px) {
    /* font-size wird von flüssigen Variablen gehandhabt */

    .hero-content p {
        font-size: var(--font-size-text-fluid);
    }
    
    .hero,
    .subpage-hero {
        height: 220px;
    }
    
    /* Logo skaliert jetzt automatisch durch clamp() */
}

@media (max-width: 576px) {
    .hero,
    .subpage-hero {
        height: 200px;
    }

    /* font-size wird von flüssigen Variablen gehandhabt */

    .hero-content p {
        /* font-size wird von flüssigen Variablen gehandhabt */
        padding: 0 1rem;
    }
    
    /* Logo skaliert jetzt automatisch durch clamp() */
    
    /* CTA-Sektion anpassen */
    .cta-section {
        padding: 2rem 1rem;
    }
    
    .cta-content h2 {
        /* font-size wird von flüssigen Variablen gehandhabt */
        margin-bottom: 1rem;
    }
    
    .cta-content p {
        /* font-size wird von flüssigen Variablen gehandhabt */
        margin-bottom: 1.5rem;
    }

    /* Expertise-Karten anpassen */
    .expertise-card {
        padding: 1rem;
    }

    .page-section {
        padding: 1.5rem 1rem 1.5rem 1rem;
    }
    
    .intro-section,
    .intro-section-2 {
        padding: 2rem 1rem;
    }
    
    /* Responsive Layout für intro-section-2 */
    .intro-section-2 .intro-two-column {
        flex-direction: column;
        gap: 1rem;
    }
    
    .intro-section-2 .intro-left,
    .intro-section-2 .intro-right {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    /* large desktop styles */
}

/* Zusätzliche Optimierungen für sehr große Bildschirme */
@media (min-width: 1920px) {
    .section-container {
        max-width: 1600px; /* Erweiterte maximale Breite für große Bildschirme */
    }
    
    /* Ensures proper spacing on ultra-wide screens */
    .intro-section {
        padding: 9rem 0 0 0;
    }
    
    /* .image-text-box padding entfernt für einheitliche Content-Breite */
}

@media (min-width: 2560px) {
    .section-container {
        max-width: 2000px; /* Noch größere maximale Breite für 4K+ Bildschirme */
    }
    
    /* Ultra-wide screen optimizations */
    .intro-section {
        padding: 3rem 0 0 0;
    }
    
    /* .image-text-box padding entfernt für einheitliche Content-Breite */
}

/* 4.2 Footer
   ========================================================================== */
@media (max-width: 768px) {
    .footer {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .footer {
        padding: 1rem;
        /* font-size wird von flüssigen Variablen gehandhabt */
    }
    
    .footer p {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
}

/* 4.3 Content-Sektionen
   ========================================================================== */
@media (max-width: 992px) {
    .section {
        padding: 3rem 1.5rem;
    }
    
    .page-section {
        padding: 3rem 2rem 2rem 2rem;
    }
    
    .section-title h2 {
        font-size: var(--font-size-h2-fluid);
    }
    
    .image-text-box,
    .image-text-box.reverse,
    .image-text-box.reverse-layout {
        flex-direction: column !important;
        gap: 2rem;
    }
    
    .intro-section,
    .intro-section-2 {
        padding: 4rem 2rem;
    }
    
    /* Responsive Layout für intro-section-2 */
    .intro-section-2 .intro-two-column {
        flex-direction: column;
        gap: 2rem;
    }
    
    .intro-section-2 .intro-left,
    .intro-section-2 .intro-right {
        width: 100%;
    }
    
    /* Container-System für content-section */
    .content-section {
        padding: 0;
    }
    
    .content-section-first {
        padding-top: 8rem;
    }
    
    .content-section-last {
        padding-bottom: 8rem;
    }
    
    /* Anpassungen für die Bildtextelemente */
    .text-content, .image-content {
        width: 100%;
        flex: 1 1 100%;
    }
    
    /* Responsive Padding Reset für alle Layout-Varianten */
    .image-text-box .text-content,
    .image-text-box.reverse .text-content,
    .image-text-box.reverse-layout .text-content {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    .image-content img {
        height: auto;
        max-width: 100%;
    }
    
    .top-header {
        padding: 0.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 2rem 1rem;
    }
    
    .page-section {
        padding: 2rem 1.5rem 2rem 1.5rem;
    }
    
    .section-title h2 {
        font-size: var(--font-size-h2-fluid);
    }
    
    .intro-section,
    .intro-section-2 {
        padding: 3rem 1.5rem;
    }
    
    /* Responsive Layout für intro-section-2 */
    .intro-section-2 .intro-two-column {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .intro-section-2 .intro-left,
    .intro-section-2 .intro-right {
        width: 100%;
    }
    
    /* Container-System für content-section */
    .content-section {
        padding: 0;
    }
    
    .content-section-first {
        padding-top: 8rem;
    }
    
    .content-section-last {
        padding-bottom: 8rem;
    }
    
    .top-header {
        padding: 0.5rem 1rem;
    }
    
    .expertise-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Verbesserte mobile Anpassungen */
    .header-center {
        flex: 0;
    }
    
    .header-right {
        gap: 0.5rem;
    }
    
    .hero, .subpage-hero {
        background-attachment: scroll !important;
    }
}

@media (max-width: 576px) {
    .intro-section {
        padding: 1rem 0rem;
    }
    
    /* Container-System für content-section */
    .content-section {
        padding: 0;
    }
    
    .content-section-first {
        padding-top: 8rem;
    }
    
    .content-section-last {
        padding-bottom: 8rem;
    }
    
    .image-text-box,
    .image-text-box.reverse,
    .image-text-box.reverse-layout {
        padding: 1.5rem;
        flex-direction: column !important;
    }
    
    .image-content img {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100%;
        height: auto !important;
        max-height: 250px;
        object-fit: cover;
    }
    
    .text-content {
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    .image-content {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    /* Verhindern von horizontalem Scrollen */
    body, html {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Container-Anpassungen für mobile Geräte */
    .container, .section-container {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Spezielle Anpassungen für sehr kleine Mobile-Geräte (z.B. Galaxy S22) */
@media (max-width: 375px) {
    .container, .section-container, .main-container {
        width: 98%;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    
    /* Zusätzliche Anpassungen für bessere Nutzung des verfügbaren Platzes */
    .intro-section {
        padding: 1.5rem 0.25rem;
    }
    
    .page-section {
        padding: 1.5rem 0.25rem;
    }
    
    /* Anpassungen für Header und Navigation */
    .top-header {
        padding: 0.5rem;
    }
    
    .header-right .cta-button,
    .header-right .button-on-blue {
        /* font-size wird von flüssigen Variablen gehandhabt */
        padding: 0.2rem 0.5rem 0;
    }
    
    .phone-number {
        /* font-size wird von flüssigen Variablen gehandhabt */
    }
}

@media (max-width: 1200px) {
    /* large desktop styles */
}