/* ═══════════════════════════════════════════════════════════════
   site-shell.css (Okt 2026)
   Einheitliche Navigation + einheitlicher Seiteneinzug auf allen Seiten.
   Wird als letztes Stylesheet im <head> jeder Seite geladen.
   Inhaltsbreite: 1100px, Rand: 48px (Tablet 24px, Handy 20px).
   Die Nav richtet Logo und Menü an derselben Kante aus wie der Inhalt.
   ═══════════════════════════════════════════════════════════════ */
:root { --rf-max: 1100px; --rf-pad: 48px; }
@media (max-width: 900px) { :root { --rf-pad: 24px; } }
@media (max-width: 600px) { :root { --rf-pad: 20px; } }

/* ── 1. NAVIGATION: überall dunkles Glas mit Verlauf (wie Startseite) ── */
nav#mainNav#mainNav {
    background: linear-gradient(180deg, rgba(10, 40, 64, 0.94) 0%, rgba(10, 40, 64, 0.84) 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border-bottom: none !important;
    padding-left: max(var(--rf-pad), calc((100% - var(--rf-max)) / 2)) !important;
    padding-right: max(var(--rf-pad), calc((100% - var(--rf-max)) / 2)) !important;
}
nav#mainNav#mainNav .nav-link { color: rgba(255, 255, 255, 0.85) !important; }
nav#mainNav#mainNav .nav-link:hover { color: #FFFFFF !important; }
nav#mainNav#mainNav .nav-link.active { color: #00B0F0 !important; }
nav#mainNav#mainNav .logo-wordmark text:nth-child(1),
nav#mainNav#mainNav .logo-wordmark .wm-text { fill: #FFFFFF !important; }
nav#mainNav#mainNav .logo-wordmark text:nth-child(2) { fill: #00B0F0 !important; }
nav#mainNav#mainNav .logo-icon svg circle[opacity="0.45"],
nav#mainNav#mainNav .logo-icon .dot-grid { fill: #FFFFFF !important; }
nav#mainNav#mainNav .logo-text { color: #FFFFFF !important; }
nav#mainNav#mainNav .lang-toggle { background: rgba(255, 255, 255, 0.12) !important; }
nav#mainNav#mainNav .lang-btn { color: rgba(255, 255, 255, 0.7) !important; }
nav#mainNav#mainNav .lang-btn.active { background: #009DDB !important; color: #FFFFFF !important; }
nav#mainNav#mainNav .hamburger span { background: #FFFFFF !important; }

/* ── 2. SEITENEINZUG: einheitlicher Inhaltscontainer ── */
.hero-layout, .trust-band-header, .trust-grid, .dept-inner, .ref-inner, .uco-inner, .faq-inner,
.hero-wrap, .section, .steps, .how-inner, .team-credentials-inner, .final-cta-wrap,
.about-hero-inner,
.page-hero .hero-inner, .uc-overview-inner,
.kpi-inner, .content-section .content-inner,
.blog-hero-inner, main.blog-list {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: calc(var(--rf-max) + 2 * var(--rf-pad)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--rf-pad) !important;
    padding-right: var(--rf-pad) !important;
}
/* Äußere Bänder: den seitlichen Abstand übernimmt jetzt der Container */
.trust-band, .dept-band, .ref-band, .uco-band, .faq-section,
.about-hero, .page-hero, .uc-overview, .kpi-section, .content-section,
header.blog-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Anwendungsseiten: Hero-Text an derselben Kante */
.uc-hero-content {
    margin-left: max(var(--rf-pad), calc((100% - var(--rf-max)) / 2)) !important;
    padding-left: 0 !important;
    padding-right: var(--rf-pad) !important;
}

/* Rechtliches: lesbare Zeilenlänge, aber linksbündig an der Kante */
.content-section .content-inner > p, .content-section .content-inner > h2, .content-section .content-inner > h3, .content-section .content-inner > ul, .content-section .content-inner > ol { max-width: 860px; }

/* FAQ: linksbündig unter der Überschrift */
.faq-list { margin-left: 0 !important; margin-right: auto !important; }

/* Magazin-Artikel: Lesespalte beginnt an derselben Kante */
article.post {
    box-sizing: content-box !important;
    max-width: 760px !important;
    margin-left: max(var(--rf-pad), calc((100% - var(--rf-max)) / 2)) !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: var(--rf-pad) !important;
}

/* Für Integratoren: Hero und Abschluss-CTA ohne eigenen Seitenrand */
.hero:has(> .hero-wrap), .final-cta:has(> .final-cta-wrap) { padding-left: 0 !important; padding-right: 0 !important; }
/* Startseite mobil: Hero-Text ohne Zusatzeinzug */
@media (max-width: 768px) { .hero-layout > .hero-content { padding-left: 0 !important; padding-right: 0 !important; } }

/* Nav passt auch auf Laptop-Breiten (1000 bis 1180px) in eine Zeile */
@media (max-width: 1180px) and (min-width: 901px) {
    nav#mainNav#mainNav .nav-link { padding: 8px 9px !important; font-size: 13.5px !important; }
    nav#mainNav#mainNav .nav-cta { padding: 10px 14px !important; }
}

/* Handy: kompaktes Logo und CTA, damit die Nav auch mit deutschem Text nicht überläuft */
@media (max-width: 600px) {
    nav#mainNav#mainNav .logo-wrap { gap: 8px !important; }
    nav#mainNav#mainNav .logo-icon, nav#mainNav#mainNav .logo-icon svg { width: 28px !important; height: 28px !important; }
    nav#mainNav#mainNav .logo-wordmark { height: 22px !important; }
    nav#mainNav#mainNav .nav-cta { padding: 8px 10px !important; font-size: 12px !important; margin-left: 4px !important; }
}
@media (max-width: 420px) {
    nav#mainNav#mainNav .logo-wordmark { height: 20px !important; }
    nav#mainNav#mainNav .nav-cta { padding: 8px 8px !important; font-size: 11.5px !important; }
    nav#mainNav#mainNav .lang-btn { padding: 4px 7px !important; }
    nav#mainNav#mainNav { padding-left: 14px !important; padding-right: 14px !important; }
    nav#mainNav#mainNav .nav-right { gap: 2px !important; }
}
/* Laptop: Partner-Bereich-Link ausblenden, damit die deutsche Nav in eine Zeile passt */
@media (max-width: 1100px) and (min-width: 641px) {
    nav#mainNav#mainNav .nav-link[href="/partner-portal"]:not(.active) { display: none !important; }
}
@media (max-width: 370px) { nav#mainNav#mainNav .lang-toggle { display: none !important; } }