:root {
    /* Prevent horizontal scrollbar and ensure predictable sizing */
}
html {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}
body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 100vh;
    width: 100%;
    position: relative;
}
*, *::before, *::after {
    box-sizing: border-box;
}
img, iframe, video, .responsive-media {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   CSS Variables
   =========================== */
:root {
    /* Colors */
    --color-primary: #2563EB;
    --color-primary-dark: #1e40af;
    --color-primary-light: #3b82f6;
    --color-secondary: #475569;
    --color-accent: #0ea5e9;
    --color-background: #f8fafc;
    --color-surface: #ffffff;
    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-light: #94a3b8;
    --color-border: #e2e8f0;
    --color-success: #10b981;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* Borders */
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    /* Layout */
    --header-height: 80px;
    --container-max-width: 1200px;
    --footer-height: 84px;
     /* ------------------------------
         Logo Position & Size (einfache Anleitung)

         Variablen:
         - --logo-width   : Breite des Logos (z.B. 120px, 8rem oder 'auto')
         - --logo-height  : Höhe des Logos (z.B. 72px). Falls beide gesetzt,
                                  behält das Bild das angegebene Seitenverhältnis nicht
                                  automatisch bei — verwende 'auto' für eine dimension.
         - --logo-offset-x: Horizontaler Versatz zur Feinanpassung (positiv = rechts,
                                  negativ = links). Wird in der transform() mit -50% kombiniert.
         - --logo-offset-y: Vertikaler Versatz zur Feinanpassung (positiv = nach unten,
                                  negativ = nach oben). Wird in der transform() mit -50% kombiniert.

         Beispiele (einsetzen / ändern in dieser :root-Sektion):
         --logo-width: 120px;        /* feste Breite */
         --logo-height: 72px;        /* feste Höhe */
         --logo-width: 144px;         /* Höhe steuert die Größe, Breite passt sich an */
         --logo-offset-x: 0px;       /* zentriert auf der horizontalen Mittelachse */
         --logo-offset-y: -10px;     /* leicht nach oben schieben */

         Anmerkung: Wenn du das Logo nur proportional skalieren willst, setze
         `--logo-width: auto;` und passe nur `--logo-height` an (oder umgekehrt).
         ------------------------------ */
    /* Logo: Standardwerte */
    /* Header (oben links) - Größe des Logos in der Header-Leiste */
    --header-logo-height: 60px;
    /* Hero (Startseite) - kontrolliere hier Breite/Höhe und Offsets für das Dach-Logo */
    /* Responsive calculation: scales with viewport/body width */
    /* Logo sizing: percentages keep the roof proportional to the card width
       and stay consistent across breakpoints. Adjust these three values to
       tune the roof size for Desktop / Tablet / Mobile. */
    /* sensible, moderate defaults so logo not too large if JS is disabled */
     /* Restore original large desktop roof look, but keep mobile smaller so
         the roof doesn't overflow on narrow viewports. Desktop/Tablet keep
         the large visual while mobile uses a compact percentage. */
    --hero-logo-width-desktop: 260%; /* deutlich größer, z.B. wie echtes Dach */
    --hero-logo-width-tablet: 260%;  /* match desktop for larger visual impact */
    --hero-logo-width-mobile: 80%;   /* mobile: larger so roof has more visible height */
    --hero-logo-height: auto;
    /* Maximum visual height of the roof logo (can be overridden by JS) */
    --hero-logo-max-height-desktop: 380px;
    --hero-logo-max-height-tablet: 320px;
    --hero-logo-max-height-mobile: 260px;
     --hero-logo-max-height: var(--hero-logo-max-height-desktop);
     /* Minimal width to prevent the roof logo becoming too short on very
         narrow cards. Adjust this if you need a different minimum visual size. */
     --hero-logo-min-width: 140px;
    /* Fine-tuning offsets (horizontal only) and vertical overlap into card */
    --hero-logo-offset-x: 0px; /* keep horizontally centered */
    --hero-card-nudge: 0px; /* keep card exactly centered */
    /* overlap controls how far the logo intrudes into the card (smaller = less overlap) */
    --hero-logo-overlap: 50%; /* stärkeres Eindringen in die Karte (größeres Dach) */
    --hero-logo-offset-y: 10px; /* schiebt das Logo leicht nach unten in die Karte */
    /* Handy: Hauskarte Breite (nur diese zwei Werte ändern) */
    --hero-body-width-mobile: 86vw;     /* z.B. 92vw */
    --hero-body-max-width-mobile: 310px; /* z.B. 380px */
    /* Handy: Abstand oben innerhalb der Hauskarte (Text verschieben) */
    --hero-body-padding-top-mobile: 120px; /* größer = Inhalt weiter unten */
    /* Roof (Dach) shape control - smaller values = spitzer / höher */
    --roof-peak-y: 0%;   /* vertical position of the apex (usually 0%) */
    --roof-side-y: 24%;   /* vertical position of the left/right roof corners; smaller = blunter roof */
    /* Hero / Visual accents - reduce blue dominance here */
    /* muted professional palette */
    --hero-accent-1: #64748b; /* slate */
    --hero-accent-2: #9CA3AF; /* light slate */
    --hero-bg-dark: rgba(10, 12, 18, 0.55);
    --cta-bg: #374151; /* dark slate for CTA */
    --cta-hover: #1f2937; /* darker on hover */
    --hero-glow-opacity: 0.06; /* much subtler glow */
    /* Farbe für Statistiken und aktiven CTA-Zustand - ändere hier für einheitliche Blau-Töne */
    --stat-blue: #3b82f6;
    --cta-active: var(--stat-blue);
}

/* ---------------------------
   Additional Responsive Tweaks
   Small fixes for very small and very large viewports
   --------------------------- */

/* Make hero less tall on very small devices to avoid excessive scrolling */
@media (max-width: 420px) {
    .hero {
        height: auto;
        min-height: 60vh;
        padding: 3.5rem 0 2rem 0;
        margin-top: var(--header-height);
    }

    .hero-image {
        position: absolute;
        inset: 0;
        min-height: 60vh;
        background-position: center center;
    }

    .hero-house {
        /* Revert to normal flow on very small screens so the layout
           stacks naturally and doesn't overflow. */
        position: relative;
        left: auto;
        top: auto;
        transform: translateY(-1vh);
    }
}

/* Improve spacing on medium-small devices */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .hero-title {
        line-height: 1.05;
    }
}

/* Large screens: allow a slightly wider container and larger hero typography */
@media (min-width: 1600px) {
    .container {
        max-width: 1500px;
    }
    .hero-title-highlight {
        font-size: clamp(2.6rem, 3.2vw, 4.8rem);
    }
}

/* Ensure media like images and iframes scale nicely everywhere */
.responsive-media, img, iframe, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   Thank You Modal - Success Message
   =========================== */
.ty-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ty-fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ty-modal .ty-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30, 41, 59, 0.75);
    backdrop-filter: blur(4px);
}

.ty-modal .ty-content {
    position: relative;
    background: #ffffff;
    color: var(--color-text-primary);
    border-radius: var(--border-radius-xl);
    padding: 3rem 2.5rem 2rem 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 480px;
    width: calc(100% - 2rem);
    z-index: 1;
    text-align: center;
    animation: ty-slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ty-modal .ty-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-light);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
}

.ty-modal .ty-close:hover {
    background: var(--color-background);
    color: var(--color-text-primary);
}

/* Success Check Icon */
.ty-check {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    border-radius: 50%;
    box-shadow: 0 10px 40px rgba(37, 99, 235, 0.3);
    animation: ty-checkPulse 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ty-check svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Typography */
.ty-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.ty-message {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 0.5rem 0;
}

.ty-note {
    color: var(--color-text-light);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
}

/* Action Buttons */
.ty-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.ty-actions .btn {
    flex: 1;
    max-width: 160px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.ty-actions .btn-ghost {
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-secondary);
}

.ty-actions .btn-ghost:hover {
    background: var(--color-background);
    border-color: var(--color-primary-light);
    color: var(--color-text-primary);
}

.ty-actions .btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.ty-actions .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

/* Animations */
@keyframes ty-fadeIn {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

@keyframes ty-slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ty-checkPulse {
    0% { 
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .ty-modal .ty-content {
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
        max-width: 90%;
    }

    .ty-check {
        width: 80px;
        height: 80px;
        margin-bottom: 1.25rem;
    }

    .ty-check svg {
        width: 56px;
        height: 56px;
    }

    .ty-title {
        font-size: 1.5rem;
    }

    .ty-message {
        font-size: 0.9375rem;
    }

    .ty-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ty-actions .btn {
        max-width: 100%;
        width: 100%;
    }
}
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
}

@media (max-width: 520px) {
    .ty-check { width: 72px; height: 72px; margin-top: -48px; }
}


/* ---------------------------------
   Quick Logo Positioning (easy)

   - Change these two variables to nudge the roof logo precisely:
       --hero-logo-offset-x: 12px;   -> moves right (negative = left)
       --hero-logo-offset-y: -10px;  -> moves up (positive = down)

   - For responsive tweaks, override the same variables inside media queries:
       @media (min-width: 1024px) { :root { --hero-logo-offset-x: 20px; --hero-logo-offset-y: -12px; } }
       @media (max-width: 640px)  { :root { --hero-logo-offset-x: 0px;  --hero-logo-offset-y: -6px; } }

   - Example: place the logo 15px to the right and 8px up on desktop:
       :root { --hero-logo-offset-x: 15px; --hero-logo-offset-y: -8px; }

   The `.hero-roof-logo` transform already applies these offsets like this:
       transform: translate(calc(-50% + var(--hero-logo-offset-x)), calc(-50% + var(--hero-logo-offset-y)));

   So editing the two variables above is all you need for pixel-perfect placement.
--------------------------------- */

/* ===========================
   Reset & Base Styles
   =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* reduce anchor offset slightly so sections align closer to top */
    scroll-padding-top: calc(var(--header-height) - 12px);
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* ===========================
   Container
   =========================== */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ===========================
   Card Component
   =========================== */
.card {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* ===========================
   Grid System
   =========================== */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 {
    grid-template-columns: 1fr;
}

.grid-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive projects grid: let cards wrap evenly (no lonely last item) */
.projects-grid {
    /* default single column on very small screens */
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

/* two columns on tablet and desktop for a balanced, professional layout */
@media (min-width: 768px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Project detail styling */
.project-cta { display:block; margin:1.25rem auto 0; text-align:center; max-width: 320px; }
.project-intro {
    display: block;
    margin: 2.5rem auto 2.5rem;
    max-width: 1200px;
    padding: 0;
    background: rgba(255,255,255,0.96);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.08);
    border-left: 5px solid var(--color-primary);
    position: relative;
    overflow: hidden;
}
.project-intro-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1.5rem 0;
    padding: 2.5rem 3rem 0 3rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.project-intro .intro-text {
    max-width: 100%;
    margin: 0;
    padding: 0 3rem 2.5rem 3rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    font-size: 1.05rem;
    font-weight: 400;
}
.project-intro .intro-image { display:none; }
.project-detail-text p { margin-bottom: 1rem; color: var(--color-text-secondary); }
.project-highlights { margin-top: 0.75rem; }

/* Modern, professional layout for Leistungsschwerpunkte */
.project-highlights {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem 1.5rem;
    align-items: start;
    width: 100%;
}

.project-highlights > strong {
    grid-column: 1 / -1;
    font-size: 1.02rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.project-highlights ul {
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0.6rem 1.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
    color: var(--color-text-secondary);
}

.project-highlights li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0;
}

.project-highlights li::before {
    content: '✓';
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(59,130,246,0.10);
    color: var(--stat-blue);
    font-weight: 700;
    font-size: 0.95rem;
}

/* CTA aligned to the right of the list on wide screens */
.project-highlights .project-cta {
    grid-column: 2 / 3;
    align-self: center;
    justify-self: end;
}

@media (max-width: 900px) {
    .project-intro { 
        padding: 2rem 1.75rem; 
        margin-bottom: 2rem;
    }
    .project-intro .intro-text {
        font-size: 1.02rem;
    }
    .project-highlights { grid-template-columns: 1fr; }
    .project-highlights ul { grid-template-columns: repeat(1, minmax(0,1fr)); }
    .project-highlights .project-cta { grid-column: 1 / -1; justify-self: start; }
}
.project-thumb img { width:100%; height:200px; object-fit:cover; border-radius:10px; display:block; }

/* Remove white card background when project thumbs use the generic .card wrapper */
.card.project-thumb,
.project-thumb.card {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

@media (max-width: 900px) {
    .project-intro { grid-template-columns: 1fr; }
    .project-intro .intro-image { height: 180px; }
}

/* ===========================
   Buttons — modernized
   =========================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.575rem 1.25rem;
    border-radius: 999px; /* pill */
    font-weight: 700;
    font-size: var(--font-size-base);
    letter-spacing: 0.2px;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
    cursor: pointer;
    border: none;
    min-width: 140px;
}

.btn-primary {
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
    color: #fff;
    box-shadow: 0 8px 22px rgba(37,99,235,0.16), inset 0 -2px 6px rgba(0,0,0,0.06);
    padding: 0.575rem 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 14px 34px rgba(37,99,235,0.20);
}

.btn-primary:active {
    transform: translateY(-1px) scale(0.995);
    box-shadow: 0 6px 18px rgba(37,99,235,0.14);
}

.btn-primary:focus-visible {
    outline: 3px solid rgba(59,130,246,0.18);
    outline-offset: 4px;
}

.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 0.45rem 1rem;
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: white;
}

.btn-light {
    background: white;
    color: var(--color-primary);
    border: 1px solid rgba(2,6,23,0.04);
}

.btn-light:hover {
    background: var(--color-background);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    .btn, .btn-primary, .btn-light, .btn-secondary { transition: none; transform: none; }
}

.btn-large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* ===========================
   Header
   =========================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--color-surface);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-md);
    z-index: 13000; /* above hero logo and overlays */
    transition: all var(--transition-base);
}

.header.scrolled {
    box-shadow: var(--shadow-lg);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: all var(--transition-base);
    text-decoration: none;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-image {
    height: var(--header-logo-height);
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: filter var(--transition-base);
}

.logo:hover .logo-image {
    filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.4));
}

.logo-text {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    display: none;
    transition: color var(--transition-base);
}

.logo:hover .logo-text {
    color: var(--color-primary-dark);
}

@media (min-width: 768px) {
    :root {
        --header-logo-height: 70px;
    }

    .logo-text {
        display: block;
    }
}

@media (min-width: 1024px) {
    :root {
        --header-logo-height: 80px;
    }
}

.nav {
    display: none;
}

/* Ensure mobile menu becomes visible when `.mobile-open` is toggled */
@media (max-width: 1023px) {
    .nav.mobile-open {
        display: block;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-surface);
        z-index: 13005;
        padding: 0.75rem 1rem;
    }
}

.nav-list {
    display: flex;
    gap: var(--spacing-md);
}

.nav-link {
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
    background: rgba(37, 99, 235, 0.1);
}

@media (min-width: 1024px) {
    .nav {
        display: block;
    }
}

/* Mobile Toggle */
.mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    /* Place toggle on the right inside its flex container */
    margin-left: auto;
    margin-right: 0;
    z-index: 13002;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: all var(--transition-base);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Default state: 3 bars */
.mobile-toggle span:nth-child(1) {
    transform: translate(-50%, -9px);
}

.mobile-toggle span:nth-child(2) {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.mobile-toggle span:nth-child(3) {
    transform: translate(-50%, 7px);
}

/* Active state: X */
.mobile-toggle.active span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

.mobile-toggle.active span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (min-width: 1024px) {
    .mobile-toggle {
        display: none;
    }
    .hero-body {
        padding-top: 40px;
        gap: 0.7rem;
    }
    
    .hero-house {
        padding-top: 55px;
    }
}

@media (max-width: 640px) {
    .hero-body {
        padding-top: 28px;
        gap: 0.5rem;
    }
    
    .hero-house {
        padding-top: 45px;
        transform: translateY(-1.8vh); /* less shift on small screens */
    }
}

@media (max-width: 420px) {
    .hero-body {
        /* Make roof blunter (stumpfer) by bringing side points closer to the peak (smaller %)
           Using 12% produces a noticeably flatter/top-blunt roof on small phones */
            clip-path: polygon(
                50% 0%,
                100% 48%,
                100% calc(100% + 12px),
                0% calc(100% + 12px),
                0% 48%
            );
        border-radius: 18px;
        padding-top: 22px;
        padding-bottom: 18px;
        gap: 0.4rem;
    }
    
    .hero-house {
        padding-top: 38px;
        transform: translateY(-1vh); /* minimal shift on very small screens */
    }
    
    .hero-body::before {
        clip-path: polygon(
            50% 0%, 
            100% 48%, 
            100% calc(100% + 12px), 
            0% calc(100% + 12px), 
            0% 48%
        );
    }
}

/* Strong mobile fixes to ensure the hero looks correct on small phones
   Show the roof logo positioned above the hero card and keep stats inline */
@media (max-width: 420px) {
    /* Show the roof logo as a small roof above the hero card (percent-based sizing)
       Targeting the wrapper so sizing is always relative to the card width. */
    .hero-card-wrapper {
        transform: translateX(0) !important;
        /* increase overlap on very small screens so the roof intrudes more */
        --hero-logo-overlap: 60%;
    }

    .hero-card-wrapper .hero-roof-logo {
        display: block !important;
        width: var(--hero-logo-width-mobile) !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: var(--hero-logo-max-height-mobile) !important;
        z-index: 13010;
        pointer-events: none;
        filter: drop-shadow(0 10px 22px rgba(0,0,0,0.38));
    }

    /* Make hero adapt to content height instead of forcing full viewport minus header */
    .hero {
        height: auto;
        min-height: calc(100vh - var(--header-height)); /* Full height */
        margin-top: var(--header-height);
        padding-top: 0;
        padding-bottom: 2rem;
        align-items: center;
        justify-content: center;
    }

    /* Compact hero card for narrow displays */
    .hero-body {
        width: var(--hero-body-width-mobile) !important; /* use mobile variable */
        max-width: var(--hero-body-max-width-mobile) !important; /* mobile max-width */
        padding-left: 0.6rem; /* give the text more usable space inside the card */
        padding-right: 0.6rem;
        padding-top: var(--hero-body-padding-top-mobile) !important; /* Adjusted for logo - configurable */
        padding-bottom: 1.6rem;
        transform: translateY(0) !important;
        margin-top: 12px;
    }

    /* On very small screens disable the horizontal nudge so the card stays centered */
    .hero-card-wrapper {
        transform: translateX(0) !important;
    }

    /* Reduce hero title sizes and force safe wrapping on small screens */
    .hero-title { 
        font-size: clamp(1.1rem, 5vw, 1.6rem); 
        margin-bottom: 0.4rem;
        line-height: 1.05;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .hero-title-highlight { 
        font-size: clamp(1.3rem, 7vw, 2rem); /* smaller max to fit long words */
        display: block;
        margin-top: 0.15rem;
        word-break: break-word; /* Ensure long words break */
        hyphens: auto; /* Allow hyphenation */
        overflow-wrap: anywhere;
    }

    /* Force the highlight title to stay on one line on very small screens
       and reduce font-size so the long word fits inside the card */
    @media (max-width: 420px) {
        .hero-title-highlight {
            white-space: nowrap !important;
            overflow: visible !important;
            font-size: 1rem !important; /* smaller so long word fits on one line */
            display: inline-block !important;
            transform: translateY(-2px); /* slight vertical nudge to align visually */
        }
        .hero-title { white-space: normal; }
    }
    
    .hero-description {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
        padding: 0 0.5rem;
    }

    /* CTA full width and more tappable */
    .hero-buttons { width: 100%; display:flex; justify-content:center; margin-bottom: 1.5rem; }
    .hero-buttons .btn-hero-primary, .btn-primary { width: 100%; max-width: 320px; padding: 1rem; }

    /* Keep hero stats on a single row on very small screens; allow items to shrink
       so they remain side-by-side. */
    .hero-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* prevent wrapping to multiple rows */
        justify-content: center !important;
        align-items: center !important;
        gap: 0.75rem !important;
        margin: 0 auto !important;
        width: 100% !important;
        padding-top: 0.6rem;
    }
    .hero-stat-item {
        flex: 1 1 0 !important; /* allow shrinking */
        min-width: 0 !important; /* allow to compress below 80px */
        text-align: center;
        padding: 0 0.25rem !important;
        overflow: hidden;
    }
    .hero-stat-divider { display: none; } /* Hide dividers on mobile for cleaner look */
    
    .hero-stat-value {
        font-size: clamp(1.1rem, 4.2vw, 1.6rem);
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 0.1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-stat-label { 
        font-size: 0.8rem;
        color: var(--color-text-secondary);
    }

    /* Ensure hero background images don't push layout horizontally */
    .hero-image, .hero-image-container { left: 0; right: 0; }

    /* Footer adjustments */
    /* Tablet/Desktop width tuning handled below in standalone media queries */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1023px) {
    .hero-card-wrapper .hero-roof-logo {
        width: var(--hero-logo-width-tablet, 34%) !important;
    }
}

/* Desktop larger size tuning */
@media (min-width: 1024px) {
    .hero-card-wrapper .hero-roof-logo {
        width: var(--hero-logo-width-desktop, 24%) !important;
    }
}
    padding: var(--spacing-lg) var(--spacing-lg) calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0));
    animation: slideDown var(--transition-base);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 13001;
    /* Ensure scrolling works properly on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.nav.mobile-open .nav-list {
    flex-direction: column;
    gap: 0.5rem;
}

.nav.mobile-open .nav-link {
    padding: 1rem;
    font-size: 1.125rem;
    display: block;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
    color: var(--color-text-primary);
}

.nav.mobile-open .nav-link:hover,
.nav.mobile-open .nav-link.active {
    color: var(--color-primary);
    background: rgba(37, 99, 235, 0.1);
}

.nav.mobile-open .nav-link:active {
    transform: scale(0.98);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   Hero Section - Professionell
   =========================== */
.hero {
    position: relative;
    /* full viewport height for perfect one-page layout */
    height: calc(100vh - var(--header-height));
    max-height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);
    /* allow positioned children (logo) to extend outside the hero box */
    overflow: visible;
    /* place the hero stacking context above the header so logo can appear in front */
    z-index: 1100;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* darker, less blue overlay for more contrast */
    background: linear-gradient(135deg, rgba(10,12,18,0.58) 0%, rgba(16,18,24,0.45) 50%, rgba(18,20,28,0.42) 100%);
    z-index: 1;
}

/* Decorative roof accent: big angular roof shape behind the glass card */
/* (roof accent removed) */

/* Hintergrundbild Slideshow */
.hero-image-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: imageSlideshow 18s infinite;
}

.hero-image:nth-child(1) {
    animation-delay: 0s;
}

.hero-image:nth-child(2) {
    animation-delay: 6s;
}

.hero-image:nth-child(3) {
    animation-delay: 12s;
}

@keyframes imageSlideshow {
    0%, 33.33% { opacity: 1; }
    33.34%, 100% { opacity: 0; }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.70) 0%, 
        rgba(30, 41, 59, 0.65) 50%, 
        rgba(51, 65, 85, 0.60) 100%);
    z-index: 1;
}

/* Haus-Struktur */
.hero-house {
    /* Use the hero's flexbox centering to keep the card perfectly centered.
       Keep the element in normal flow so centering is robust across browsers
       and when scrollbars appear. */
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    overflow: visible; /* allow logo to extend outside the card */
}

/* Dach-Logo auf der Hauskarte */
/* Wrapper around the hero card and the roof logo.
   The wrapper uses the same width rules as the card so the logo
   can be sized/positioned as percentages of the card (no fixed px). */
.hero-card-wrapper {
    position: relative;
    /* Make the wrapper shrink to the card's intrinsic width so percentage-based
       sizes on the absolute-positioned roof logo are computed relative to the
       visible card width (makes the roof scale with the card when the
       viewport is resized). Keep a safe max-width to avoid overflow. */
    width: fit-content;
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    /* ensure no accidental horizontal transform is applied to the wrapper */
    transform: none !important;
    transition: none;
}

/* Keep the existing .hero-body width behavior but ensure it fills the wrapper */
.hero-card-wrapper .hero-body {
    /* Constrain the visible card width here so it is always centered inside
       the full-width wrapper above. This prevents the wrapper itself from
       shifting while keeping the card visually centered. */
    width: min(760px, 86vw);
    max-width: 760px;
    margin: 0 auto;
    transition: width 320ms cubic-bezier(0.2,0.9,0.2,1), padding 320ms cubic-bezier(0.2,0.9,0.2,1), transform 320ms cubic-bezier(0.2,0.9,0.2,1);
}

/* Roof logo: anchored to the card top using the logo's bottom edge.
   Sizes and overlap are percentage-based so the logo scales with the card.
   Tuning variables:
     --hero-logo-width-desktop (default 24%)
     --hero-logo-width-tablet  (default 34%)
     --hero-logo-width-mobile  (default 56%)
     --hero-logo-overlap       (default 8%)  -> how far the logo intrudes into the card (desktop)
     --hero-logo-overlap-tablet/mobile (defaults below)
*/

.hero-card-wrapper .hero-roof-logo {
    position: absolute;
    /* position the logo at the clip-path apex: top/left are set dynamically
       (CSS variables `--hero-logo-peak-x`/`--hero-logo-peak-y`) by JS */
    /* Always center the logo horizontally relative to the card to avoid
       jumps during viewport resizes. Fine-tune with the optional
       offset variables below. */
    left: 50%;
    top: 0;
     /* combine centering/offset translate with configurable non-uniform scale
         so JS can set `--hero-logo-scale-x` / `--hero-logo-scale-y` to squash
         the roof horizontally/vertically in harmony with the card. */
      /* Original behavior: use the overlap percentage to control how far
          into the card the roof intrudes. This preserves the original visual
          placement that worked on wide windows. */
      transform: translate(calc(-50% + var(--hero-logo-offset-x, 0px)), calc(-50% + var(--hero-logo-overlap, 0%))) scale(var(--hero-logo-scale-x, 1), var(--hero-logo-scale-y, 1));
    /* Prefer width-based sizing controlled by CSS variables so the logo can
       expand to match the background image width. Height is auto to keep
       aspect ratio; a max-height is still honored to prevent runaway scaling. */
    width: var(--hero-logo-width-desktop, auto);
    height: auto;
     /* Ensure the roof retains a usable visual height when the card becomes
         very narrow by enforcing a minimum width (prevents the height from
         collapsing on small card widths). */
     min-width: var(--hero-logo-min-width, 140px);
    max-height: var(--hero-logo-max-height, none);
    max-width: none;
    z-index: 12000;
    pointer-events: none;
    transform-origin: bottom center;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
    transition: transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1), width 280ms cubic-bezier(0.2, 0.9, 0.2, 1);
    will-change: transform, width;
}

/* Reserve space and prevent layout shift while hero roof image loads */
.hero-roof-logo {
    display: block;
    aspect-ratio: 5 / 2;
    width: auto;
    height: auto;
    max-height: var(--hero-logo-max-height, 320px);
}

/* Ensure media breakpoints use the corresponding CSS variables */
@media (min-width: 1024px) {
    .hero-card-wrapper .hero-roof-logo { width: var(--hero-logo-width-desktop, auto) !important; }
}
@media (min-width: 641px) and (max-width: 1023px) {
    .hero-card-wrapper .hero-roof-logo { width: var(--hero-logo-width-tablet, auto) !important; }
}
@media (max-width: 640px) {
    .hero-card-wrapper .hero-roof-logo { width: var(--hero-logo-width-mobile, auto) !important; }
    /* Slightly reduce the enforced minimum width on small screens so the
       logo doesn't overflow excessively but still retains usable height. */
    .hero-card-wrapper .hero-roof-logo { min-width: 120px; }
}
/* On very small screens let the wrapper fill available width to avoid overflow
   while the card itself keeps its responsive min/max rules. This ensures the
   layout remains centered and touch-friendly on phones. */
@media (max-width: 420px) {
    .hero-card-wrapper { width: 100% !important; }
}

/* allow attribute-based offsets if ever needed by JS (kept intentionally minimal) */
.hero-card-wrapper .hero-roof-logo[data-offset-x] {}

/* Mobile refinements for hero and global touch targets */
@media (max-width: 767px) {
    /* Make the hero card more compact on phones */
    .hero-body {
        width: 94vw;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 28px;
        padding-bottom: 36px;
    }

    /* Reduce oversized CTA/button min-width so they fit in columns */
    .btn {
        min-width: 0;
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
    }

    /* Ensure mobile nav covers smaller area and scrolls if long */
    .nav.mobile-open {
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        padding: 1rem;
    }

    /* Make footer links wrap nicely */
    .footer-right { gap: 0.5rem; flex-wrap: wrap; }
}

/* Header logo and hero stat layout tweaks for phones */
@media (max-width: 767px) {
    /* Make the logo compact and positioned left in the header */
    .header-content { padding-left: 0; padding-right: 0.5rem; justify-content: space-between !important; }
    .logo { gap: 0.5rem; margin-left: -6px !important; padding-left: 0 !important; }
    .logo-image {
        height: 60px; /* slightly larger logo on mobile */
        width: auto;
        display: block;
        margin-left: -6px !important;
        padding-left: 0 !important;
    }
    .logo-text { display: none; }
    .mobile-toggle { margin-right: 0.5rem; }
    /* Ensure logo stays at left and toggle at right regardless of DOM changes */
    .logo { order: 0; justify-content: flex-start; margin-left: 0 !important; }
    .nav { order: 1; }
    .mobile-toggle { order: 2; margin-left: auto; }

    /* Keep hero stats in a single row on phones */
    .hero-stats {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 1rem;
        align-items: center;
    }
    .hero-stat-item {
        flex: 0 1 auto;
        min-width: 0;
        text-align: center;
        padding: 0 0.25rem;
    }
    .hero-stat-value {
        font-size: clamp(1.4rem, 6vw, 2rem);
        line-height: 1.05;
    }
    .hero-stat-label { font-size: 0.88rem; }

    /* Slightly reduce hero-body width so stats fit next to each other */
    .hero-body { width: 92vw; max-width: 520px; }
}

/* Stronger header/logo overrides for very small screens */
@media (max-width: 420px) {
    .header {
        padding-left: 0;
        padding-right: 0.5rem;
    }

    .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        margin-left: -6px !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
    }

    /* Force a small header logo and prevent large images from overflowing */
    .header .logo-image {
        height: 66px !important;
        max-height: 66px !important;
        width: auto !important;
        object-fit: contain;
        margin-left: -6px !important;
        display: block !important;
    }

    /* Ensure the hamburger stays at the right; nudge it closer to the screen edge */
    .mobile-toggle { margin-left: auto; margin-right: -0.6rem; order: 2; }
    .header-content { justify-content: space-between !important; }
    .logo { order: 0 !important; }
}

/* Hinweis:
         - Zur Verschiebung (Hero-Logo): verändere `--hero-logo-offset-x` (links/rechts)
             und `--hero-logo-offset-y` (oben/unten) in der `:root`-Sektion weiter oben.
         - Zur Größenänderung (Hero-Logo): verändere `--hero-logo-width` und/oder
             `--hero-logo-height`.
         - Beispiele:
                         :root { --hero-logo-width: 120px; --hero-logo-height: 72px; --hero-logo-offset-x: 10px; }
                         :root { --hero-logo-width: auto;  --hero-logo-height: 80px; --hero-logo-offset-y: -8px; }
*/



/* Haus-Körper (Glassmorphism Card) mit integriertem Dach */
.hero-body {
    position: relative;
    width: min(760px, 86vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.6vh, 1.6rem);
    padding-top: clamp(70px, 11vh, 120px);
    /* Erhöhtes Padding unten, damit Unterlängen (z.B. "g") nicht vom Clip-Pfad abgeschnitten werden */
    padding-bottom: clamp(56px, 8vh, 96px);
    padding-left: clamp(36px, 6.5vw, 64px);
    padding-right: clamp(36px, 6.5vw, 64px);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: rgba(10, 20, 35, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
    z-index: 2;
    /* Clip-path erweitert die untere Kante leicht, damit Text-Unterlängen nicht abgeschnitten werden */
    clip-path: polygon(
        50% var(--roof-peak-y),
        100% var(--roof-side-y),
        100% calc(100% + 12px),
        0% calc(100% + 12px),
        0% var(--roof-side-y)
    );
    text-align: center;
    overflow: visible;
}

/* (gloss highlight removed) */

.hero-body > * {
    position: relative;
    z-index: 2;
}

.hero-body::before {
    content: '';
    position: absolute;
    inset: -2px;
    /* subtle neutral glow behind the card */
    background: linear-gradient(135deg,
        rgba(156,163,175,var(--hero-glow-opacity)),
        rgba(100,116,139, calc(var(--hero-glow-opacity) - 0.01)),
        rgba(55,65,81, calc(var(--hero-glow-opacity) - 0.02)));
    z-index: -1;
    filter: blur(18px);
    opacity: 0.28;
    animation: cardGlow 4s ease-in-out infinite alternate;
    clip-path: polygon(
        50% var(--roof-peak-y),
        100% var(--roof-side-y),
        100% calc(100% + 12px),
        0% calc(100% + 12px),
        0% var(--roof-side-y)
    );
}

@keyframes cardGlow {
    0% {
        opacity: 0.3;
        filter: blur(20px);
    }
    100% {
        opacity: 0.5;
        filter: blur(25px);
    }
}

.hero-body:hover::before {
    opacity: 0.6;
}

/* Animated Particles */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255,255,255,0.6), transparent);
    border-radius: 50%;
    animation: particleFloat 15s infinite ease-in-out;
    box-shadow: 0 0 8px rgba(255,255,255,0.12);
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 25%; animation-delay: 2s; animation-duration: 15s; }
.particle:nth-child(3) { left: 50%; animation-delay: 4s; animation-duration: 13s; }
.particle:nth-child(4) { left: 70%; animation-delay: 1s; animation-duration: 14s; }
.particle:nth-child(5) { left: 85%; animation-delay: 3s; animation-duration: 16s; }
.particle:nth-child(6) { left: 40%; animation-delay: 5s; animation-duration: 11s; }

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(1.5);
        opacity: 0;
    }
}

.hero-glass-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 40px;
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.4), 
        rgba(37, 99, 235, 0.2),
        rgba(99, 102, 241, 0.3));
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
    animation: cardGlow 4s ease-in-out infinite alternate;
}

@keyframes cardGlow {
    0% {
        opacity: 0.4;
        filter: blur(20px);
    }
    100% {
        opacity: 0.7;
        filter: blur(25px);
    }
}

/* Old hero-glass-card styles removed */

/* Logo Background - Multi-Layer */
.hero-logo-background {
    display: none;
}

.hero-logo-bg-image {
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: contain;
}

/* Layer 1 - Großes rotierendes Logo */
.logo-layer-1 {
    width: 70%;
    height: auto;
    transform: translate(-50%, -50%);
    filter: blur(3px) brightness(1.2);
    opacity: 0.06;
    animation: logoRotateSlow 40s linear infinite;
}

/* Layer 2 - Kleineres pulsierendes Logo */
.logo-layer-2 {
    width: 45%;
    height: auto;
    transform: translate(-50%, -50%);
    filter: blur(1px) brightness(1.5);
    opacity: 0.1;
    animation: logoPulseScale 8s ease-in-out infinite;
}

/* Layer 3 - Glow Logo */
.logo-layer-3 {
    width: 55%;
    height: auto;
    transform: translate(-50%, -50%);
    filter: blur(8px) brightness(2) saturate(1.5);
    opacity: 0.15;
    animation: logoGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes logoRotateSlow {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}

@keyframes logoPulseScale {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.08;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0.14;
    }
}

@keyframes logoGlowPulse {
    0% { 
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.1;
        filter: blur(8px) brightness(2) saturate(1.5);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.2;
        filter: blur(12px) brightness(2.5) saturate(2);
    }
}

/* Old content wrapper and logo styles removed - content now directly in hero-body */

/* Old logo wrapper and box styles removed */

/* Titel */
.hero-title {
    font-size: clamp(1.5rem, 4.5vw, 3.2rem);
    font-weight: 300;
    /* etwas luftiger, damit Unterlängen nicht abgeschnitten wirken */
    line-height: 1.28;
    color: white;
    margin: 0;
    text-shadow: 
        2px 2px 20px rgba(0, 0, 0, 0.8), 
        0 0 40px rgba(37, 99, 235, 0.28),
        0 0 80px rgba(37, 99, 235, 0.14);
    animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    0% {
        text-shadow: 
            2px 2px 20px rgba(0, 0, 0, 0.8), 
            0 0 40px rgba(37, 99, 235, 0.4),
            0 0 80px rgba(37, 99, 235, 0.2);
    }
    100% {
        text-shadow: 
            2px 2px 20px rgba(0, 0, 0, 0.8), 
            0 0 50px rgba(37, 99, 235, 0.6),
            0 0 100px rgba(37, 99, 235, 0.3);
    }
}

.hero-title-highlight {
    display: block;
    font-weight: 700;
    font-size: clamp(2.8rem, 8.4vw, 5.2rem);
    color: transparent;
    margin-top: 0.15rem;
    /* muted subtle highlight */
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(236,239,241,0.9) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 8px 40px rgba(12,12,20,0.6);
    filter: drop-shadow(0 10px 48px rgba(0,0,0,0.06));
}

/* Beschreibung */
.hero-description {
    font-size: clamp(1.1rem, 2.6vw, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.35;
    margin: 0;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

/* Stats: separate, subtle cards (no central bubble) */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.2vw, 1.8rem);
    margin: clamp(0.6rem, 1.8vh, 1.2rem) auto;
    padding: 0;
    background: transparent;
}

/* Elegant stat row: thin separators, subtle typography */
.hero-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    text-align: center;
    padding: 0 0.6rem;
}

.hero-stat-value {
    font-size: clamp(1.8rem, 4.6vw, 2.6rem);
    font-weight: 700;
    color: var(--stat-blue);
    margin: 0 0 4px 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.hero-stat-label {
    font-size: clamp(0.85rem, 1.4vw, 0.98rem);
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    text-transform: none;
}

.hero-stat-sep {
    width: 1px;
    height: 38px;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
}

/* Buttons */
.hero-buttons {
    display: flex;
    justify-content: center;
    margin: 0;
}

.btn-hero-primary {
    display: inline-block;
    padding: clamp(0.9rem, 2.4vh, 1.2rem) clamp(1.6rem, 3.4vw, 2.2rem);
    background: var(--cta-bg);
    color: white;
    font-weight: 800;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    border-radius: calc(var(--border-radius-md) + 2px);
    transition: all var(--transition-base);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.btn-hero-primary:hover {
    background: var(--stat-blue);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.36);
}

/* Pressed / active state: turn blue like the stat numbers */
.btn-hero-primary:active {
    background: var(--cta-active);
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(0,0,0,0.32);
}

@media (max-width: 420px) {
    /* allow labels to wrap on very small screens to avoid overflow */
    .hero-stat-label {
        white-space: normal;
    }
}

/* Scroll Hint */
.scroll-hint {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.scroll-hint-line {
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5));
    margin: 0 auto;
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.2); }
}

/* Responsive */
@media (min-width: 768px) {
    .hero-logo-image {
        height: 120px;
    }
    
    .hero-logo-glow {
        width: 250px;
        height: 250px;
    }
    
    .hero-title {
        font-size: var(--font-size-4xl);
    }
    
    .hero-title-highlight {
        font-size: var(--font-size-5xl);
    }
    
    .hero-description {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 767px) {
    .hero-logo-image {
        height: 80px;
    }
    
    .hero-logo-glow {
        width: 160px;
        height: 160px;
    }
    
    .hero-logo-box {
        padding: var(--spacing-lg);
    }
    
    .hero-title {
        font-size: var(--font-size-2xl);
    }
    
    .hero-title-highlight {
        font-size: var(--font-size-3xl);
    }
    
    .hero-description {
        font-size: var(--font-size-sm);
    }
    
    .hero-description br {
        display: none;
    }
    
    .hero-stats {
        /* Keep stats on a single row on small/medium screens */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: clamp(0.6rem, 2.2vw, 1rem);
        padding: 0.6rem 0;
        justify-content: center;
        align-items: center;
    }
    
    .hero-stat-divider {
        display: none;
    }
    
    .btn-hero-primary {
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    
    .scroll-hint {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-logo-image {
        height: 70px;
    }
    
    .hero-logo-box {
        padding: var(--spacing-md);
        border-radius: 20px;
    }
    
    .hero-logo-glow {
        width: 140px;
        height: 140px;
    }
    
    .hero-title {
        font-size: var(--font-size-xl);
    }
    
    .hero-title-highlight {
        font-size: var(--font-size-2xl);
    }
}

/* ===========================
   Section
   =========================== */
.section {
    padding: var(--spacing-3xl) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

/* ===========================
   Section Divider (elegant variant)
   - fade lines, glass pill with subtle ring
   - accessible, responsive, reduced-motion aware
   =========================== */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 28px 0;
    margin: 0 auto;
    max-width: var(--container-max-width);
    width: 100%;
    position: relative;
}

/* Lines: use a soft gradient plus mask to create a smooth fade at edges */
.section-divider .divider-line {
    flex: 1 1 0;
    height: 1px; /* finer hairline */
    position: relative;
    overflow: visible;
}

.section-divider .divider-line::before {
    /* refined hairline with central highlight */
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(37,99,235,0) 0%, rgba(37,99,235,0.30) 8%, var(--color-primary) 45%, rgba(255,255,255,0.92) 50%, var(--color-primary) 55%, rgba(37,99,235,0.30) 92%, rgba(37,99,235,0) 100%);
    border-radius: 2px;
}

.section-divider .divider-line::after {
    /* elegant soft glow with a subtle central sheen */
    content: '';
    position: absolute;
    left: 12%; right: 12%; top: -6px;
    height: 12px;
    border-radius: 999px;
    background-image: radial-gradient(60% 40% at 50% 50%, rgba(59,130,246,0.20) 0%, rgba(59,130,246,0.08) 35%, rgba(59,130,246,0) 70%);
    filter: blur(6px);
    opacity: 0.95;
    pointer-events: none;
}

/* Center icon: glass pill with inner ring and soft shadow */
.section-divider .divider-icon {
    display: inline-grid;
    place-items: center;
    width: 84px;
    height: 44px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.82));
    border-radius: 999px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
    border: 1px solid rgba(15,23,42,0.06);
    transform: translateZ(0);
}

/* Decorative ring behind the logo to create an emblematic look */
.section-divider .divider-icon::before {
    content: '';
    position: absolute;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(59,130,246,0.06), transparent 55%);
    z-index: -1;
    filter: blur(6px);
    opacity: 0.95;
}

.divider-logo {
    display: block;
    max-height: 28px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(2,6,23,0.08));
}

/* Hover / focus micro-interaction (subtle) */
.section-divider .divider-icon:hover,
.section-divider .divider-icon:focus {
    transform: translateY(-3px);
    box-shadow: 0 16px 42px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Responsive sizing */
@media (min-width: 768px) {
    .section-divider { gap: 32px; padding: 34px 0; }
    .section-divider .divider-line { height: 2px; }
    .section-divider .divider-icon { width: 100px; height: 50px; padding: 10px; }
    .divider-logo { max-height: 34px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .section-divider .divider-icon,
    .section-divider .divider-line::after {
        transition: none;
        animation: none;
    }
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.section-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ===========================
   Leistungen Section
   =========================== */
/* reduce top spacing so "Unsere Leistungen" sits closer to the header */
.section-leistungen {
    padding-top: calc(var(--spacing-3xl) - 2rem);
    padding-bottom: var(--spacing-3xl);
}
.service-card {
    text-align: left;
    height: 100%;
    padding: var(--spacing-lg);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--color-surface), rgba(255,255,255,0.96));
    border: 1px solid rgba(15, 23, 42, 0.04);
    box-shadow: 0 12px 30px rgba(2,6,23,0.06);
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.service-card:hover {
    transform: translateY(-14px) rotateX(3deg);
    box-shadow: 0 44px 120px rgba(2,6,23,0.18);
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0;
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(37,99,235,0.06));
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(37,99,235,0.06);
    flex-shrink: 0;
    position: relative;
}

.service-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--color-primary);
    fill: none;
}

.service-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0.35rem 0 0.4rem 0;
}

/* utility: prevent wrapping for specific titles */
.service-title.nowrap {
    white-space: nowrap;
}

.service-list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.service-list li {
    position: relative;
    padding-left: 28px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.service-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--stat-blue);
    font-weight: 700;
    font-size: 0.95rem;
}

.service-cta {
    margin-top: auto;
    display: inline-block;
    padding: 0.5rem 0.9rem;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    color: white;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    align-self: flex-start;
    box-shadow: 0 10px 30px rgba(37,99,235,0.12);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    /* subtle continuous pulse for Variant B */
    animation: ctaPulse 4.2s ease-in-out infinite;
}

.service-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 46px rgba(37,99,235,0.16);
}

/* Mobile adjustments for Service Cards */
@media (max-width: 768px) {
    .service-card {
        align-items: center;
        text-align: center;
        padding: var(--spacing-md);
    }

    .service-list {
        text-align: left;
        width: 100%;
        max-width: 280px; /* Limit width to keep list looking neat */
        margin: 0 auto; /* Center the list block */
    }

    .service-cta {
        align-self: center;
        width: 100%;
        text-align: center;
        max-width: 280px;
    }
}

/* ===========================
   Service Card Micro-Interactions
   =========================== */

/* small performance hint */
.service-card {
    will-change: transform, box-shadow;
    position: relative;
    overflow: visible;
}

/* left accent bar + radial flare */
.service-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, rgba(37,99,235,1), rgba(59,130,246,0.9));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 420ms cubic-bezier(.2,.9,.2,1), box-shadow 420ms;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    pointer-events: none;
    z-index: 3;
}

.service-card::before { content: none; }

.service-card:hover::after,
.service-card:focus-within::after {
    transform: scaleY(1);
    box-shadow: 0 8px 28px rgba(37,99,235,0.14);
}

/* icon reacts independently */
.service-icon {
    position: relative;
    transition: transform 420ms cubic-bezier(.2,.9,.2,1), box-shadow 320ms;
}
.service-card:hover .service-icon,
.service-card:focus-within .service-icon {
    transform: translateY(-12px) scale(1.08) rotate(-6deg);
    box-shadow: 0 26px 48px rgba(37,99,235,0.14);
}

.service-icon::before { content: none; }

/* small, subtle glint */
.service-icon::after {
    content: '';
    position: absolute;
    right: 6%;
    top: 6%;
    width: 28%;
    height: 28%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    transform: scale(0.9);
    opacity: 0.0;
    pointer-events: none;
    transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 420ms;
    z-index: 2;
}
.service-card:hover .service-icon::after,
.service-card:focus-within .service-icon::after {
    transform: scale(1);
    opacity: 0.65;
}

/* top accent glow on hover (now for left bar) */
.service-card:hover::after {
    box-shadow: 0 8px 28px rgba(37,99,235,0.16);
}

/* CTA pulse only on hover */
.service-cta {
    /* intentionally empty — pulse on hover only */
}
.service-cta:hover {
    animation: ctaPulseHover 900ms ease-in-out both;
}

@keyframes ctaPulseHover {
    0% { transform: translateY(-2px) scale(1); box-shadow: 0 10px 30px rgba(37,99,235,0.12); }
    50% { transform: translateY(-6px) scale(1.06); box-shadow: 0 24px 58px rgba(37,99,235,0.18); }
    100% { transform: translateY(-3px) scale(1); box-shadow: 0 14px 36px rgba(37,99,235,0.14); }
}

.service-card:hover .service-title,
.service-card:focus-within .service-title {
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* staggered list reveal on hover */
.service-list li {
    transform: translateX(-8px);
    opacity: 0.85;
    transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 320ms;
}
.service-card:hover .service-list li,
.service-card:focus-within .service-list li {
    transform: translateX(0);
    opacity: 1;
}
.service-card:hover .service-list li:nth-child(1) { transition-delay: 0.06s; }
.service-card:hover .service-list li:nth-child(2) { transition-delay: 0.12s; }
.service-card:hover .service-list li:nth-child(3) { transition-delay: 0.18s; }
.service-card:hover .service-list li:nth-child(4) { transition-delay: 0.24s; }
.service-card:focus-within .service-list li:nth-child(1) { transition-delay: 0.06s; }
.service-card:focus-within .service-list li:nth-child(2) { transition-delay: 0.12s; }
.service-card:focus-within .service-list li:nth-child(3) { transition-delay: 0.18s; }
.service-card:focus-within .service-list li:nth-child(4) { transition-delay: 0.24s; }

/* subtle tilt + shadow for stronger reaction */
.service-card:hover {
    transform: translateY(-10px) rotateX(2deg);
}

/* keyboard accessible */
.service-card:focus-within {
    outline: none;
    transform: translateY(-8px);
}

/* reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-icon,
    .service-list li,
    .service-card::after {
        transition: none !important;
        animation: none !important;
    }
    .service-card:hover,
    .service-card:focus-within {
        transform: none !important;
    }
}

/* ===========================
   Projekte Section
   =========================== */
.section-projekte {
    /* subtle off-white band to separate the projects area from page background */
    background: #f7fafc;
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-3xl);
}

/* Project intro presented as a gentle surface panel to use horizontal space professionally */
.project-intro {
    display: block;
    margin: 2.5rem auto 2.5rem;
    max-width: 1200px;
    padding: 0;
    background: rgba(255,255,255,0.96);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.08);
    border-left: 5px solid var(--color-primary);
    position: relative;
    overflow: hidden;
}

.project-intro-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1.5rem 0;
    padding: 2.5rem 3rem 0 3rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.project-intro .intro-text {
    max-width: 100%;
    margin: 0;
    padding: 0 3rem 2.5rem 3rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    font-size: 1.05rem;
    font-weight: 400;
}
.project-intro .project-highlights {
    margin-top: 0.75rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .project-intro-title {
        padding: 1.5rem 1.25rem 0 1.25rem;
        font-size: 1.75rem;
    }
    .project-intro .intro-text {
        padding: 0 1.25rem 1.5rem 1.25rem;
    }
    .project-intro {
        margin: 1rem auto;
    }
}
.project-highlights strong { display:block; margin-bottom:0.5rem; color:var(--color-text-primary); }
.project-highlights ul { grid-template-columns: repeat(1, minmax(0,1fr)); }

.project-cta { display:block; margin:1.25rem auto 0; text-align:center; max-width: 320px; }
.project-cta.btn-primary { padding: 0.9rem 1.25rem; border-radius: 12px; }

/* ===========================
   Kontakt Section Fit-to-Viewport
   - ensure contact area + footer fit into the viewport without page scroll
   =========================== */

.section-kontakt {
    padding-top: var(--spacing-lg);
    padding-bottom: calc(var(--spacing-lg) + 12px); /* extra bottom buffer */
    background: #f7fafc;
    /* ensure the section fully covers the remaining viewport (small positive buffer to hide next section) */
    min-height: calc(100vh - var(--header-height) - var(--footer-height) + 12px);
    /* ensure scrolling to this section accounts for the fixed header (no extra gap) */
    scroll-margin-top: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kontakt-form-wrapper {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

/* Make the form fit vertically: reduce internal paddings slightly and allow compact layout */
.kontakt-form-card {
    padding: 18px 26px;
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(2,6,23,0.07);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,250,0.995));
    border: 1px solid rgba(2,6,23,0.04);
    position: relative;
    width: min(1100px, 96%);
    max-width: 1100px; /* wider card to better fill desktop viewports */
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.kontakt-form .form-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

@media (max-width: 900px) {
    .kontakt-form .form-row { grid-template-columns: 1fr; }
    .kontakt-form-card { padding: 28px; }
}

/* Footer fixed height removed to allow content to wrap naturally */
/* .footer { ... } removed */

/* remove internal card scrolling so the contact card fully fits without scroll */
.kontakt-form-card { max-height: none; overflow: visible; }

/* Top accent removed: previously added a blue strip, removed to create cleaner card */

/* Labels & inputs styling */
.kontakt-form .form-group label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.kontakt-form input,
.kontakt-form textarea {
    width: 100%;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(2,6,23,0.06);
    background: #fff;
    box-shadow: inset 0 1px 4px rgba(2,6,23,0.02);
    font-size: 0.92rem;
    color: var(--color-text-primary);
    transition: box-shadow 140ms ease, border-color 140ms ease;
}

.kontakt-form textarea { min-height: 110px; resize: vertical; }

.kontakt-form input:focus,
.kontakt-form textarea:focus {
    outline: none;
    border-color: rgba(59,130,246,0.9);
    box-shadow: 0 6px 24px rgba(37,99,235,0.08);
}

/* Kontakt-Button: prominent pill CTA tuned for the form */
.kontakt-form .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.78rem 2.1rem;
    border-radius: 999px;
    /* richer default gradient so button appears strong immediately */
    background: linear-gradient(90deg, #1e40af 0%, #2563EB 50%, #1e40af 100%);
    background-size: 200% 100%;
    background-position: center center;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 24px 60px rgba(30,64,175,0.20), inset 0 -2px 6px rgba(0,0,0,0.06);
    border: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-position 420ms cubic-bezier(.2,.9,.2,1);
    min-width: 220px;
    font-size: 1.02rem;
    letter-spacing: 0.2px;
    position: relative;
    overflow: visible;
    transform: none; /* ensure no lift before hover */
    opacity: 1;      /* fully visible by default */
}

.kontakt-form .btn-primary .btn-icon { width: 18px; height: 18px; flex: 0 0 18px; stroke: rgba(255,255,255,0.95); fill: none; }

.kontakt-form .btn-primary:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 34px 80px rgba(30,64,175,0.26);
    background-position: right center;
}

.kontakt-form .btn-primary:active { transform: translateY(-1px) scale(0.997); box-shadow: 0 10px 28px rgba(37,99,235,0.12); }

.kontakt-form .btn-primary:focus-visible { outline: 4px solid rgba(37,99,235,0.16); outline-offset: 6px; }

/* mobile: full-width button sits flush under inputs for easier tapping */
@media (max-width: 767px) {
    .kontakt-form .btn-primary { width: 100%; min-width: 0; padding: 0.95rem 1rem; font-size: var(--font-size-base); }
    .kontakt-form .btn-primary .btn-icon { width: 16px; height: 16px; }
}

.kontakt-form .form-row + .form-group { grid-column: 1 / -1; }

/* Center the button and add small decorative underline */
.kontakt-form .btn-row { text-align: center; margin-top: 0.6rem; }
.kontakt-form .btn-row::after { display:none; }

@media (max-width: 900px) {
    .kontakt-form .form-row { grid-template-columns: 1fr; }
    .kontakt-form .btn-row::after { display: none; }
}

/* final polish: slightly tighten section header spacing inside card */
.kontakt-form-card .section-title { margin-top: 6px; margin-bottom: 6px; font-size: 1.5rem; text-align: center; }
.kontakt-form-card .section-description { margin-bottom: 12px; color: var(--color-text-secondary); font-size: 0.98rem; text-align: center; max-width: 84%; margin-left: auto; margin-right: auto; }

/* center the contact title and content visually inside the card */
.kontakt-form-card h2, .kontakt-form-card p { text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .kontakt-form-card { transition: none !important; }
}


@media (min-width: 900px) {
    .kontakt-form-card { transform: translateY(-2.2vh); box-shadow: 0 26px 64px rgba(2,6,23,0.10); }
}

@media (min-width: 1200px) {
    .kontakt-form-card { transform: translateY(-2vh); }
}

@media (max-width: 767px) {
    .kontakt-form-card { transform: none; max-width: 92%; padding: 12px 14px; }
}

/* Ensure contact section is centered on small phones */
@media (max-width: 767px) {
    .section-kontakt {
        /* remove extra top/bottom padding that pushes the card down */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        /* let the section fill remaining viewport and center its content */
        min-height: calc(100vh - var(--header-height) - var(--footer-height));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .kontakt-form-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .kontakt-form-card {
        margin: 0 auto;
        width: 96%;
        max-width: 640px;
        transform: none;
    }
}

/* Gallery grid adjustments: larger thumbs, tighter gaps to use space better */
.gallery-grid .grid { gap: calc(var(--spacing-md) + 4px); }
.project-thumb img { width:100%; height:240px; object-fit:cover; border-radius:10px; display:block; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.project-thumb:hover img { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-lg); }
.project-thumb { overflow: hidden; border-radius: 10px; }

@media (max-width: 900px) {
    .project-intro { padding: 1rem; }
    .project-thumb img { height:180px; }
    .project-highlights ul { grid-template-columns: repeat(1, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .project-thumb img,
    .project-thumb:hover img {
        transform: none !important;
        transition: none !important;
    }
}

.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

.project-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
}

.project-content {
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.project-description {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    flex: 1;
}

/* ===========================
   CTA Section (refined)
   - centered glass panel, pronounced CTA button
   - subtle decorative wave at bottom, accessible contrast
   =========================== */
.cta-section {
    /* full-bleed brand band with centered content */
    position: relative;
    padding: var(--spacing-2xl) 0;
    text-align: center;
    background: linear-gradient(135deg, #2b6ce6 0%, #2149a8 100%);
    color: white;
}

/* subtle bottom shadow to separate from next section */
.cta-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
}

.cta-content {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 28px;
    color: #ffffff;
    background: transparent; /* no floating card — integrated, clean */
}

.cta-title {
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.cta-text {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--spacing-lg);
}

/* Strong, pill-shaped white CTA button (primary focus) */
.cta-content .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.95rem 2.2rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
    will-change: transform;
}

.cta-content .btn.btn-light {
    background: #ffffff;
    color: #1e3a8a; /* deep brand-blue text for contrast */
    border: 0;
    box-shadow: 0 16px 48px rgba(30,58,138,0.14);
}

.cta-content .btn.btn-light:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 26px 80px rgba(30,58,138,0.20);
    opacity: 1;
}

/* icon removed per user request (no prefix glyph) */

/* focus + keyboard accessibility */
.cta-content .btn:focus-visible {
    outline: 3px solid rgba(255,255,255,0.18);
    outline-offset: 4px;
}

.cta-content .btn:active {
    transform: translateY(-2px) scale(0.995);
}

/* mobile: button full-width and stack spacing */
@media (max-width: 640px) {
    .cta-content { padding: 28px 18px; }
    .cta-content .btn { width: 100%; padding: 1rem; }
    .cta-title { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-content .btn { transition: none !important; }
}

/* ===========================
   Kontakt Section
   =========================== */
.kontakt-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.kontakt-form-card {
    height: fit-content;
}

.kontakt-subtitle {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.kontakt-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-row {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group label {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.form-group input,
.form-group textarea {
    padding: var(--spacing-sm);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
    background: var(--color-surface);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.kontakt-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.kontakt-info-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    height: 100%;
}

.info-item {
    display: flex;
    gap: var(--spacing-md);
}

.info-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--border-radius-md);
}

.info-content {
    flex: 1;
}

.info-label {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.info-value {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.map-card {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
}

.map-placeholder {
    text-align: center;
    color: var(--color-text-light);
}

.map-placeholder svg {
    margin: 0 auto var(--spacing-sm);
}

.map-placeholder p {
    font-size: var(--font-size-sm);
}

/* ===========================
   Elegant Section Divider
   =========================== */
.section-divider-elegant {
    padding: 3rem 0;
    background: white;
}

.divider-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.divider-line-left,
.divider-line-right {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
}

.divider-icon-wrapper {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.divider-logo-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===========================
   Info / "Über uns" Section
   =========================== */
.section-info {
    background: linear-gradient(180deg, #f0f7ff 0%, #e6f2ff 100%);
    padding: 3rem 0;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    display: flex;
    align-items: center;
}

.section-info .section-header {
    margin-bottom: 2.5rem;
}

.section-info .section-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 800;
    color: var(--color-text-primary);
    text-align: center;
    letter-spacing: -0.5px;
}

.about-text-box {
    max-width: 950px;
    margin: 0 auto;
    background: white;
    padding: 2rem 2.5rem;
    padding-left: 3rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
    position: relative;
    overflow: hidden;
}

.about-text-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #1e40af 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
    box-shadow: 2px 0 8px rgba(37, 99, 235, 0.3);
}

.about-text-box::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.1), transparent);
}

.about-text-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Location & Contact Cards Section */
.location-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    margin-top: 2.5rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.location-card,
.contact-reach-card {
    background: white;
    border-radius: 14px;
    /* permanent subtle bluish edge */
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.10);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
    position: relative;
    border: 1.2px solid rgba(37, 99, 235, 0.14);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.location-card:hover,
.contact-reach-card:hover {
    /* disable hover change — appearance stays constant */
    transform: none;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.14);
}

.card-header-orange {
    padding: 1.5rem 2rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.card-header-orange::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 6%;
    right: 6%;
    height: 2px;
    /* slightly stronger central hairline */
    background: linear-gradient(90deg, rgba(37,99,235,0) 0%, rgba(37,99,235,0.36) 8%, var(--color-primary) 50%, rgba(37,99,235,0.36) 92%, rgba(37,99,235,0) 100%);
    border-radius: 2px;
    opacity: 0.98;
}

/* soft glow behind the thin rule to create an elegant, modern accent */
.card-header-orange::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 36%;
    height: 6px;
    transform: translateX(-50%);
    border-radius: 999px;
    /* subtle centered glow beneath the hairline */
    background: linear-gradient(90deg, rgba(59,130,246,0) 0%, rgba(59,130,246,0.14) 25%, rgba(59,130,246,0.22) 50%, rgba(59,130,246,0.14) 75%, rgba(59,130,246,0) 100%);
    filter: blur(5px);
    opacity: 0.9;
    pointer-events: none;
}

/* subtle intensification on hover for interactive feel */
.location-card:hover .card-header-orange::before,
.contact-reach-card:hover .card-header-orange::before {
    /* keep header glow constant (no hover change) */
    filter: blur(5px);
    opacity: 0.9;
}

.location-card:hover .card-header-orange::after,
.contact-reach-card:hover .card-header-orange::after {
    /* no movement on hover */
    transform: none;
}

.header-icon-orange {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.06));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    border: 1px solid rgba(37, 99, 235, 0.15);
    transition: all var(--transition-fast);
}

.location-card:hover .header-icon-orange,
.contact-reach-card:hover .header-icon-orange {
    /* disable icon hover effects — keep appearance constant */
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.06));
    transform: none;
    box-shadow: none;
}

.card-title-orange {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

/* Location Card Specific */
.location-address {
    padding: 1.5rem 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    font-weight: 500;
    border: 1px solid rgba(37, 99, 235, 0.08);
    border-radius: 10px;
    margin: 1.5rem 1.75rem 0;
    background: rgba(37, 99, 235, 0.02);
    transition: all var(--transition-fast);
}

.location-address:hover {
    border-color: rgba(37, 99, 235, 0.15);
    background: rgba(37, 99, 235, 0.04);
}

.location-address p {
    margin: 0.3rem 0;
}

.location-map {
    width: 100%;
    flex: 1;
    padding: 0 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.location-map iframe {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    /* keep the bluish edge permanently */
    box-shadow: 0 5px 20px rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.15);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

/* avoid changing the map appearance on hover (keep consistent) */
.location-card:hover .location-map iframe {
    box-shadow: 0 5px 20px rgba(37, 99, 235, 0.15);
}

/* Contact Reach Card Specific */
.reach-items {
    flex: 1;
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reach-item {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 10px;
    transition: all var(--transition-fast);
    position: relative;
    border: 1px solid rgba(37, 99, 235, 0.08);
    background: rgba(37, 99, 235, 0.02);
}

.reach-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, 
        rgba(37, 99, 235, 0.3) 0%, 
        var(--color-primary) 50%, 
        rgba(37, 99, 235, 0.3) 100%);
    border-radius: 3px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.reach-item:hover {
    background-color: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.15);
    transform: translateX(2px);
}

.reach-item:hover::before {
    opacity: 1;
}

.reach-item:last-child {
    margin-bottom: 0;
}

.reach-icon-wrapper {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.06));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    border: 1px solid rgba(37, 99, 235, 0.15);
    transition: all var(--transition-fast);
}

.reach-item:hover .reach-icon-wrapper {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.08));
    border-color: rgba(37, 99, 235, 0.2);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

/* Special styling for the telephone tile: stronger blue, white handset, slightly larger */
.reach-icon-wrapper.reach-icon-phone {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
    border: none;
    color: #ffffff; /* handset uses currentColor */
    width: 52px;
    height: 52px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reach-icon-wrapper.reach-icon-phone svg { width: 22px; height: 22px; display: block; }

.reach-item:hover .reach-icon-wrapper.reach-icon-phone {
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.22);
}

.reach-content {
    flex: 1;
    padding-top: 0.35rem;
}

.reach-label {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.reach-value {
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: 1rem;
}

.reach-value a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
    position: relative;
}

.reach-value a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-fast);
}

.reach-value a:hover {
    color: var(--color-primary);
}

.reach-value a:hover::after {
    width: 100%;
}


/* Old Contact Info Cards - Remove */
.contact-info-section {
    margin-top: 3rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.contact-detail-card,
.contact-map-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
    position: relative;
    overflow: hidden;
}

.contact-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

.contact-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.75rem;
    padding-top: 0.5rem;
}

.contact-item {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.contact-item:last-child {
    margin-bottom: 0;
}

.contact-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05));
    border-radius: 12px;
}

.contact-info-text {
    flex: 1;
}

.contact-label {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.contact-value {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 1rem;
}

.contact-value a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-value a:hover {
    color: var(--color-primary);
}

.contact-map-card {
    padding: 0;
    height: 450px;
    overflow: hidden;
}

.contact-map-card iframe {
    display: block;
}

/* container above cards */
.section-info .container { position: relative; z-index: 1; }

.info-card {
    background: #ffffff;
    border-radius: 12px;
    padding: calc(var(--spacing-lg) - 4px);
    box-shadow: 0 10px 24px rgba(15,23,42,0.04);
    border: 1px solid rgba(2,6,23,0.04);
    transition: transform 240ms ease, box-shadow 240ms ease;
}

.info-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,0.06); }

.grid.grid-2 { gap: 1.25rem; align-items: start; }

.section-info .section-title { font-size: 2.05rem; font-weight: 700; margin-bottom: 0.25rem; }
.section-info .section-description { margin-bottom: 1rem; color: var(--color-text-secondary); }

.info-title { font-size: 1.25rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 0.6rem; }
.info-text { color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 0.6rem; }

.info-facts { display: flex; gap: 1.1rem; margin-top: 0.6rem; }
.info-facts .fact { display: flex; flex-direction: column; align-items: flex-start; }
.info-facts .fact strong { font-size: 1.05rem; color: var(--color-text-primary); }
.info-facts .fact span { font-size: 0.85rem; color: var(--color-text-secondary); }

/* Benefits list: two columns on medium+ screens, tighter spacing */
.info-list { display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.25rem; padding: 0; margin: 0; }
.info-list li { padding-left: 1.75rem; position: relative; color: var(--color-text-secondary); font-size: 0.97rem; line-height: 1.6; }
.info-list li::before { content: '✓'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--color-success); color: white; font-weight: 700; font-size: 0.95rem; }

@media (min-width: 768px) {
    .info-list { grid-template-columns: 1fr 1fr; }
}

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

/* About v2 styles */
.about-grid-v2 { gap: 1.5rem; }
.about-photo-wrap { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 28px rgba(15,23,42,0.06); margin-bottom: 0.85rem; }
.about-photo { width: 100%; height: 240px; object-fit: cover; display: block; filter: saturate(0.98) contrast(0.98); }
.about-photo-caption { position: absolute; left: 12px; bottom: 12px; background: rgba(2,6,23,0.06); color: var(--color-text-secondary); padding: 6px 10px; border-radius: 6px; font-size: 0.88rem; }
.about-left .info-title { font-family: Georgia, 'Times New Roman', serif; font-size: 1.45rem; margin-top: 0.35rem; }
.about-left .info-text { margin-top: 0.6rem; color: var(--color-text-secondary); }
.info-facts.horizontal { display:flex; gap:1rem; margin-top:0.85rem; }
.info-facts.horizontal .fact { background: #f3f7fb; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(2,6,23,0.03); }

.about-right .info-title { font-size: 1.35rem; }
.about-right .lead { color: var(--color-text-secondary); margin-bottom: 0.6rem; font-weight:600; }
.benefits-grid { display:grid; grid-template-columns:1fr 1fr; gap: 0.8rem; }
.benefit-card { display:flex; gap:0.9rem; align-items:flex-start; padding: 0.75rem; border-radius: 8px; border:1px solid rgba(2,6,23,0.03); background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,0.03); }
.benefit-card .icon { width:44px; height:44px; border-radius:8px; background: #eef6ff; display:grid; place-items:center; font-size:1.05rem; }
.benefit-body strong { display:block; color:var(--color-text-primary); }
.benefit-body .muted { font-size:0.88rem; color:var(--color-text-secondary); margin-top:4px; }

/* CTA in about section: primary but restrained */
.about-right .btn-primary { padding: 0.6rem 1.1rem; min-width: 160px; }

@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-photo { height: 200px; }
    .benefits-grid { grid-template-columns: 1fr; }
}

/* ===========================
   About / "Über uns" refined styles
   =========================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.about-left { padding: calc(var(--spacing-lg) + 2px); }
.about-right { padding: calc(var(--spacing-lg) + 2px); }

.info-facts { display:flex; gap:1.2rem; margin-top:0.6rem; }
.info-facts .fact { display:flex; flex-direction:column; align-items:flex-start; }
.info-facts .fact strong { font-size:1.05rem; color:var(--color-text-primary); }
.info-facts .fact span { font-size:0.85rem; color:var(--color-text-secondary); }

.benefits { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:0.6rem; }
.benefit { display:flex; gap:0.85rem; align-items:flex-start; padding:0.45rem 0; }
.benefit .bi { width:28px; height:28px; display:inline-grid; place-items:center; background:var(--color-success); color:white; border-radius:6px; font-weight:800; }
.benefit strong { display:block; font-size:1rem; color:var(--color-text-primary); }
.benefit .muted { font-size:0.88rem; color:var(--color-text-secondary); margin-top:3px; }

.contact-cta .btn-light { padding:0.6rem 1rem; border-radius:8px; }

@media (min-width: 900px) {
    .benefits { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-left, .about-right { padding: var(--spacing-md); }
}

.info-card {
    height: 100%;
    background: linear-gradient(180deg, #ffffff, #fbfcff);
    border-radius: 14px;
    padding: calc(var(--spacing-lg) + 0.5rem);
    box-shadow: 0 18px 40px rgba(15,23,42,0.06);
    border: 1px solid rgba(2,6,23,0.03);
}

.info-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.6rem;
}

.section-info .section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

.section-info .section-description {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
}

.info-text {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.9;
}

.info-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0;
}

.info-list li {
    list-style: none;
    padding-left: 3.25rem;
    color: var(--color-text-secondary);
    position: relative;
    min-height: 28px;
}

.info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-block;
    background: linear-gradient(180deg, rgba(16,185,129,0.12), rgba(16,185,129,0.06));
    border: 2px solid rgba(16,185,129,0.18);
    box-shadow: 0 4px 10px rgba(16,185,129,0.06) inset;
}

.info-list li::after {
    content: '✓';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-success);
    font-weight: 800;
    font-size: 0.95rem;
}

.info-kontakt-section {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
    border-top: 2px solid var(--color-border);
}

.section-subtitle {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

/* ===========================
   Footer
   =========================== */
.footer {
    background: var(--color-text-primary);
    color: white;
    padding: var(--spacing-xl) 0;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-left {
    color: rgba(255, 255, 255, 0.7);
}

.footer-right {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center; /* Ensure centered on mobile */
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: white;
}

.footer-divider {
    color: rgba(255, 255, 255, 0.3);
}

/* ===========================
   Utilities
   =========================== */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

/* ===========================
   Animations
   =========================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn var(--transition-slow) ease-out;
}

/* ===========================
   Print Styles
   =========================== */
@media print {
    .header,
    .mobile-toggle,
    .btn,
    .footer {
        display: none;
    }
    
    .hero {
        margin-top: 0;
        min-height: auto;
    }
}

/* ===========================
   New Modern "Über uns" Section Styles
   =========================== */

/* Section Badge */
.section-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05));
    color: var(--color-primary);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

/* Compact Hero Section */
.about-hero-compact {
    margin-bottom: 1.5rem;
}

.about-hero-content-compact {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.about-stats-compact {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.stat-badge {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: white;
    padding: 1rem 1.75rem;
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    min-width: 140px;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.stat-text {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.95;
    letter-spacing: 0.3px;
}

.about-intro-text {
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Values Section - Kompakt */
.about-values {
    margin-bottom: 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.35rem;
    max-width: 1100px;
    margin: 0 auto;
}

.value-card {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    transition: all var(--transition-base);
    border: 1px solid rgba(226, 232, 240, 0.8);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.15);
}

.value-card:hover::before {
    transform: scaleX(1);
}

.value-icon {
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.06));
    border-radius: 16px;
    transition: all var(--transition-base);
}

.value-card:hover .value-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.value-icon svg {
    width: 34px;
    height: 34px;
    transition: all var(--transition-base);
}

.value-card:hover .value-icon svg {
    stroke: white;
    transform: scale(1.1);
}

.value-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.value-text {
    color: var(--color-text-secondary);
    line-height: 1.65;
    font-size: 0.95rem;
}

/* CTA Box - Kompakt */
.about-cta-box {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    padding: 1.75rem 1.5rem;
    border-radius: var(--border-radius-lg);
    text-align: center;
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.2);
}

.about-cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.about-cta-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.about-cta-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.about-cta-box .btn-primary {
    background: white;
    color: var(--color-primary);
    border: none;
    padding: 0.75rem 1.5rem;
}

.about-cta-box .btn-primary:hover {
    background: var(--color-background);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .about-stats-compact {
        gap: 1rem;
    }
    
    .stat-badge {
        min-width: 120px;
        padding: 0.85rem 1.25rem;
    }
    
    .stat-number {
        font-size: 1.65rem;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .divider-content {
        gap: 1.5rem;
    }
    
    .divider-icon-wrapper {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 768px) {
    .section-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
    }
    
    .about-stats-compact {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
    
    .stat-badge {
        min-width: 180px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .section-info .section-title {
        font-size: 2.25rem;
    }
    
    .section-subtitle {
        font-size: 1.125rem;
    }
    
    .about-text-box {
        padding: 1.75rem 1.5rem;
        border-left-width: 4px;
    }
    
    .about-text-content {
        font-size: 1rem;
    }
    
    .location-contact-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .card-header-orange {
        padding: 1.5rem 1.75rem 1rem;
    }
    
    .header-icon-orange {
        width: 42px;
        height: 42px;
    }
    
    .card-title-orange {
        font-size: 1.3rem;
    }
    
    .location-address {
        padding: 1.25rem 1.5rem;
        margin: 1.25rem 1.5rem 0;
        font-size: 1rem;
    }
    
    .location-map {
        height: 260px;
        padding: 0 1.5rem 1.5rem;
    }
    
    .reach-items {
        padding: 1.5rem 1.75rem 1.75rem;
    }
    
    .reach-item {
        gap: 1rem;
        margin-bottom: 1.25rem;
        padding: 0.85rem;
    }
    
    .reach-icon-wrapper {
        width: 42px;
        height: 42px;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .about-section-title {
        font-size: 1.15rem;
    }
    
    .about-cta-title {
        font-size: 1.2rem;
    }
    
    .about-cta-text {
        font-size: 0.875rem;
    }
    
    .about-cta-box {
        padding: 1.5rem 1rem;
    }
    
    .section-divider-elegant {
        padding: 2rem 0;
    }
    
    .divider-content {
        gap: 1rem;
    }
    
    .divider-icon-wrapper {
        width: 50px;
        height: 50px;
    }
}

/* ===========================
   Cookie Banner - DSGVO Konform
   =========================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 15000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-top: 3px solid var(--color-primary);
    /* Prevent issues with mobile viewport units */
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-content {
    max-width: var(--container-max-width);
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cookie-text {
    flex: 1;
}

.cookie-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.cookie-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

.cookie-link {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.cookie-link:hover {
    color: var(--color-primary-dark);
}

.cookie-buttons {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.btn-cookie {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 140px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cookie-banner {
        max-height: 70vh;
    }

    .cookie-content {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0));
        gap: 1rem;
        width: 100%;
    }

    .cookie-title {
        font-size: 0.95rem;
        margin: 0 0 0.4rem 0;
    }

    .cookie-description {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .cookie-buttons {
        flex-direction: column;
        gap: 0.6rem;
    }

    .btn-cookie {
        width: 100%;
        min-width: auto;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .cookie-banner {
        max-height: 65vh;
    }

    .cookie-content {
        padding: 1rem 0.875rem calc(1rem + env(safe-area-inset-bottom, 0));
        gap: 0.875rem;
    }

    .cookie-title {
        font-size: 0.875rem;
    }

    .cookie-description {
        font-size: 0.75rem;
        line-height: 1.45;
    }

    .btn-cookie {
        padding: 0.7rem 0.9rem;
        font-size: 0.8125rem;
    }
}

/* Extra mobile tweak: enforce single-line hero stats on small phones */
@media (max-width: 420px) {
    .hero-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.4rem !important;
        width: 100% !important;
        max-width: 98vw !important;
        margin: 0.6rem auto !important;
    }

    .hero-stat-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 0.2rem 0.25rem !important;
    }

    .hero-stat-value {
        font-size: clamp(1.05rem, 5vw, 1.5rem) !important;
        font-weight: 700;
        line-height: 1.05;
    }

    .hero-stat-label {
        font-size: clamp(0.7rem, 2.6vw, 0.85rem) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Reduce side padding to give stats more horizontal room */
    .hero-body {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Increase mobile title sizes slightly for readability */
    .hero-title { font-size: 1.35rem !important; }
    .hero-title-highlight { font-size: 1.7rem !important; }
}

/* ===========================
   Google Maps Platzhalter
   =========================== */
.map-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(37, 99, 235, 0.2);
    min-height: 280px;
}

.map-placeholder-content {
    text-align: center;
    padding: 2rem;
    max-width: 320px;
}

.map-placeholder-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

.map-placeholder-icon svg {
    color: white;
}

.map-placeholder-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.map-placeholder-text {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
}

.map-placeholder .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
}

@media (max-width: 768px) {
    .map-placeholder-content {
        padding: 1.5rem 1rem;
    }
    
    .map-placeholder-icon {
        width: 64px;
        height: 64px;
    }
    
    .map-placeholder-icon svg {
        width: 48px;
        height: 48px;
    }
}