/* =========================================================
   MODERN.CSS – Auffrischung Oktober 2026
   Wird NACH style.css geladen und überschreibt nur gezielt.
   Wer zurück will: Zeile mit modern.css in index.php entfernen.
   ========================================================= */

:root {
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-soft: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .08);
    --shadow-lift: 0 2px 4px rgba(17, 24, 39, .06), 0 18px 40px rgba(17, 24, 39, .14);
    --ink: #111827;
    --ink-soft: #4b5563;
    --sand: #fbf7f0;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Tastatur-Bedienung sichtbar machen (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Navigation: leicht durchsichtig mit Unschärfe ---------- */
.navbar {
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(17, 24, 39, .06);
}

/* ---------- Hero: Bild deckt alles ab + dunkler Verlauf für lesbare Schrift ---------- */
.hero { isolation: isolate; }
.hero::before {
    position: absolute !important;
    inset: 0;
    width: auto;
    height: auto;
    z-index: -2;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(10, 15, 25, .88) 0%, rgba(10, 15, 25, .70) 38%, rgba(10, 15, 25, .25) 70%, rgba(10, 15, 25, .10) 100%);
    pointer-events: none;
}
.hero h1 { letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.hero-subtitle { color: #fde68a; font-weight: 600; }
.hero-desc { color: rgba(255, 255, 255, .88) !important; }

.hero-badge {
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: .55rem 1.1rem !important;
    letter-spacing: .01em;
}

.hero-form-card {
    border-radius: 20px !important;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45) !important;
    border: 1px solid rgba(255, 255, 255, .6);
}
.hero-form-card input,
.hero-form-card select,
.hero-form-card textarea {
    border-radius: var(--radius-sm) !important;
    transition: border-color .15s, box-shadow .15s;
}
.hero-form-card input:focus,
.hero-form-card select:focus,
.hero-form-card textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, .15);
    outline: none;
}

/* ---------- Karten einheitlich modern ---------- */
.process-card,
.warum-card,
.contact-card,
.gallery-item {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.process-card:hover,
.warum-card:hover,
.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift) !important;
}
.gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }

.section-title h2 { letter-spacing: -.02em; }

/* ---------- Neuer Block: Auf einen Blick ---------- */
.blick-section {
    background: var(--sand);
    padding: 4.5rem 1.25rem;
    border-bottom: 1px solid #efe6d6;
}
.blick-inner { max-width: 980px; margin: 0 auto; }
.blick-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0 0 1.75rem;
    text-align: center;
}
.blick-liste {
    margin: 0;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.blick-liste > div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 1.25rem;
    padding: 1.05rem 1.5rem;
    border-bottom: 1px solid #f1ece3;
}
.blick-liste > div:last-child { border-bottom: 0; }
.blick-liste dt {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: .95rem;
}
.blick-liste dd {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: .98rem;
}
.blick-liste a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.blick-liste a:hover { text-decoration: underline; }
.blick-stand {
    text-align: center;
    font-size: .8rem;
    color: #9ca3af;
    margin: 1rem 0 0;
}

/* ---------- FAQ ---------- */
.faq-container details {
    border-radius: 12px !important;
    transition: background .15s;
}
.faq-container details[open] { background: rgba(255, 255, 255, .06); }
.faq-container details p { line-height: 1.7; }

/* ---------- Städte: kompakte Chips statt riesiger Kacheln ---------- */
.cities-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: .55rem !important;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.city-link {
    padding: .6rem .9rem !important;
    border-radius: 999px !important;
    font-size: .88rem !important;
    min-height: 0 !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cities-mehr { max-width: 1100px; margin: 1rem auto 0; }
.cities-mehr > summary {
    list-style: none;
    cursor: pointer;
    width: max-content;
    margin: 0 auto 1rem;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    font-weight: 600;
    color: var(--ink);
}
.cities-mehr > summary::-webkit-details-marker { display: none; }
.cities-mehr[open] > summary { display: none; }

/* ---------- Footer-Adresse ---------- */
.footer-adresse {
    font-style: normal;
    line-height: 1.6;
    margin-top: .75rem;
    opacity: .85;
}

/* ---------- Handy ---------- */
@media (max-width: 768px) {
    .hero::after {
        background: linear-gradient(180deg, rgba(10, 15, 25, .82) 0%, rgba(10, 15, 25, .65) 55%, rgba(10, 15, 25, .45) 100%);
    }
    .blick-section { padding: 3rem 1rem; }
    .blick-liste > div { grid-template-columns: 1fr; gap: .25rem; padding: 1rem 1.1rem; }
    .cities-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Weniger Bewegung, wenn im System eingestellt */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .process-card, .warum-card, .gallery-item { transition: none; }
    .process-card:hover, .warum-card:hover, .gallery-item:hover { transform: none; }
}

/* Nachbesserungen */
.cities-mehr { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
.city-link { white-space: normal; line-height: 1.25; display: flex !important; align-items: center; justify-content: center; }
@media (max-width: 768px) {
    .stats-container { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
    .stat-number { font-size: 2rem !important; }
    .stats-bar { padding: 2rem 1rem !important; }
}