/* Design-System uebernommen aus solutions.bitblade.io (Live-Stand 16.08.2026). */
/* Ergaenzt um Klassen fuer Ortsseiten/Hubs/Leistungsseiten/Rechtsseiten unten. */

/* === BITBLADE GROUP CORPORATE DESIGN === */
    /* Hausfarben: Deep Navy #020B18 | Graphite #111827 | Electric Blue #247BFF | Cyan #38BDF8 | Soft White #F8FAFC */
    :root{
      --blue-900:#1D4ED8;
      --blue-600:#247BFF;
      --blue-500:#3B82F6;
      --blue-400:#60A5FA;
      --blue-300:#93C5FD;
      --cyan-700:#0891B2;
      --cyan-600:#06B6D4;
      --cyan-400:#38BDF8;
      --cyan-300:#67E8F9;
    }
    [data-theme="dark"]{
      --bg-primary:#020B18;
      --bg-secondary:#0B1220;
      --bg-card:#111827;
      --bg-card-hover:#1F2937;
      --border:#1F2937;
      --border-accent:#1D4ED8;
      --text-primary:#F8FAFC;
      --text-secondary:#9CA3AF;
      --text-muted:#4B5563;
      --nav-bg:rgba(2,11,24,0.88);
      --accent:#247BFF;
      --accent-light:#38BDF8;
      --accent-glow:rgba(36,123,255,0.2);
    }
    [data-theme="light"]{
      --bg-primary:#F8FAFC;
      --bg-secondary:#ffffff;
      --bg-card:#ffffff;
      --bg-card-hover:#EFF6FF;
      --border:#DBEAFE;
      --border-accent:#247BFF;
      --text-primary:#020B18;
      --text-secondary:#374151;
      --text-muted:#6B7280;
      --nav-bg:rgba(248,250,252,0.90);
      --accent:#247BFF;
      --accent-light:#3B82F6;
      --accent-glow:rgba(36,123,255,0.12);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:'Inter',sans-serif;background:var(--bg-primary);color:var(--text-primary);transition:background .3s,color .3s;overflow-x:hidden}
    ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--blue-900);border-radius:3px}

    /* === NAV === */
    /* Bewusst Klassen-Selektor statt Element-Selektor (Koordinator-Fund
       16.08.2026): 'nav{...}' als Element-Selektor traf JEDES <nav> im
       Dokument, auch <nav aria-label="Breadcrumb" class="breadcrumb"> aus
       base.html -- der fixierte Breadcrumb ueberlagerte dadurch auf jeder
       Unterseite die Hauptnavigation und die H1. */
    .site-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 2rem;height:68px;display:flex;align-items:center;justify-content:space-between;transition:background .3s}
    .nav-logo{display:flex;align-items:center;text-decoration:none;gap:.75rem}
    .nav-logo img.logo-img{height:36px;width:auto;object-fit:contain}
    .nav-logo img.logo-dark{display:block}
    .nav-logo img.logo-light{display:none}
    [data-theme="light"] .nav-logo img.logo-dark{display:none}
    [data-theme="light"] .nav-logo img.logo-light{display:block}
    .nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
    .nav-links a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s}
    .nav-links a:hover{color:var(--accent)}
    .nav-right{display:flex;align-items:center;gap:1rem}
    .theme-toggle{width:42px;height:24px;background:var(--border);border-radius:12px;border:none;cursor:pointer;position:relative;transition:background .3s}
    .theme-toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--accent);border-radius:50%;transition:transform .3s}
    [data-theme="light"] .theme-toggle::after{transform:translateX(18px)}
    .btn{padding:.55rem 1.3rem;border-radius:8px;border:none;cursor:pointer;font-size:.875rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:all .2s}
    .btn-blue{background:var(--blue-600);color:#fff}
    .btn-blue:hover{background:var(--blue-500);transform:translateY(-1px);box-shadow:0 4px 16px rgba(36,123,255,.35)}
    .btn-outline{background:transparent;border:1.5px solid var(--blue-600);color:var(--accent)}
    .btn-outline:hover{background:var(--blue-600);color:#fff}
    .nav-only-mobile{display:none}
    .hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
    .hamburger span{display:block;width:22px;height:2px;background:var(--text-primary);margin:5px 0;transition:all .3s;border-radius:2px}

    /* === HERO === */
    .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 2rem 4rem;position:relative;overflow:hidden;text-align:center}
    .hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 50% 20%,rgba(36,123,255,.15) 0%,transparent 70%);pointer-events:none}
    .hero-grid{position:absolute;inset:0;z-index:0;opacity:.05;background-image:linear-gradient(var(--blue-900) 1px,transparent 1px),linear-gradient(90deg,var(--blue-900) 1px,transparent 1px);background-size:60px 60px}
    .hero-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);opacity:.12}
    .hero-orb-1{width:500px;height:500px;background:var(--blue-600);top:-100px;right:-100px}
    .hero-orb-2{width:400px;height:400px;background:var(--cyan-600);bottom:-100px;left:-100px}
    .hero-content{position:relative;z-index:1;max-width:860px}
    .hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(36,123,255,.12);border:1px solid rgba(36,123,255,.3);color:var(--cyan-400);font-size:.8rem;font-weight:600;padding:.35rem 1rem;border-radius:20px;margin-bottom:1.5rem;letter-spacing:.04em;text-transform:uppercase}
    .hero-badge::before{content:'●';font-size:.6rem}
    h1{font-family:'Inter',sans-serif;font-size:clamp(2.4rem,6vw,4.5rem);font-weight:800;line-height:1.1;margin-bottom:1.25rem}
    h1 .accent{color:var(--accent)}
    .hero-sub{font-size:clamp(1rem,2.5vw,1.2rem);color:var(--text-secondary);max-width:640px;margin:0 auto 2.5rem;line-height:1.7}
    .hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
    .btn-lg{padding:.85rem 2rem;font-size:1rem;border-radius:10px}
    .hero-stats{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-top:4rem}
    .stat{text-align:center}
    .stat-num{font-family:'Inter',sans-serif;font-size:2rem;font-weight:800;color:var(--accent)}
    .stat-label{font-size:.8rem;color:var(--text-muted);margin-top:2px}

    /* === SECTIONS === */
    section{padding:5rem 2rem}
    .container{max-width:1200px;margin:0 auto}
    .section-label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
    h2{font-family:'Inter',sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:1rem;line-height:1.15}
    .section-sub{color:var(--text-secondary);font-size:1.05rem;line-height:1.7;max-width:600px}
    .section-header{margin-bottom:3.5rem}

    /* === SERVICES === */
    #leistungen{background:var(--bg-secondary)}
    .services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
    .service-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2rem;transition:all .3s;cursor:default;position:relative;overflow:hidden}
    .service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-900),var(--blue-600),var(--cyan-400));transform:scaleX(0);transform-origin:left;transition:transform .3s}
    .service-card:hover{border-color:var(--blue-900);background:var(--bg-card-hover);transform:translateY(-4px);box-shadow:0 12px 40px var(--accent-glow)}
    .service-card:hover::before{transform:scaleX(1)}
    .service-icon{width:52px;height:52px;background:rgba(36,123,255,.1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1.25rem;transition:background .3s}
    .service-card:hover .service-icon{background:rgba(36,123,255,.2)}
    .service-card h3{font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:.6rem}
    .service-card p{color:var(--text-secondary);font-size:.9rem;line-height:1.65}
    .service-tag{display:inline-block;margin-top:1rem;background:rgba(36,123,255,.1);color:var(--cyan-400);font-size:.75rem;font-weight:600;padding:.25rem .7rem;border-radius:6px}

    /* === WHY BITBLADE === */
    #warum-bitblade{background:var(--bg-primary)}
    .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
    .why-features{display:flex;flex-direction:column;gap:1.5rem}
    .feature-item{display:flex;gap:1rem;align-items:flex-start}
    .feature-dot{width:10px;height:10px;min-width:10px;background:var(--accent);border-radius:50%;margin-top:.4rem}
    .feature-item h4{font-weight:700;margin-bottom:.3rem;font-size:1rem}
    .feature-item p{color:var(--text-secondary);font-size:.9rem;line-height:1.6}
    .why-visual{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:2rem;position:relative}
    .terminal-bar{display:flex;gap:6px;margin-bottom:1.25rem}
    .terminal-dot{width:12px;height:12px;border-radius:50%}
    .td-r{background:#ff5f57}.td-y{background:#febc2e}.td-g{background:#28c840}
    .terminal-body{font-family:'Courier New',monospace;font-size:.82rem;color:var(--text-secondary);line-height:2}
    .t-blue{color:var(--accent)}.t-cyan{color:var(--cyan-400)}.t-muted{color:var(--text-muted)}

    /* === KUNDENBEREICH === */
    #kundenbereich{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);position:relative;overflow:hidden}
    #kundenbereich::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(36,123,255,.1) 0%,transparent 70%);pointer-events:none}
    .portal-card{background:var(--bg-card);border:1px solid var(--border-accent);border-radius:24px;padding:3rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;box-shadow:0 0 60px rgba(36,123,255,.08)}
    .portal-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(36,123,255,.12);border:1px solid rgba(36,123,255,.3);color:var(--cyan-400);font-size:.78rem;font-weight:700;padding:.3rem .9rem;border-radius:20px;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.06em}
    .portal-features{display:flex;flex-direction:column;gap:.75rem;margin:1.5rem 0}
    .portal-feature{display:flex;align-items:center;gap:.75rem;color:var(--text-secondary);font-size:.9rem}
    .portal-feature::before{content:'✓';width:22px;height:22px;min-width:22px;background:rgba(36,123,255,.15);color:var(--accent);font-size:.75rem;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center}
    .portal-preview{background:var(--bg-primary);border:1px solid var(--border);border-radius:16px;padding:1.5rem;overflow:hidden}
    .portal-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap}
    .ptab{padding:.35rem .9rem;border-radius:8px;font-size:.78rem;font-weight:600;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);cursor:default}
    .ptab.active{background:var(--blue-900);color:#fff;border-color:var(--blue-600)}
    .portal-items{display:flex;flex-direction:column;gap:.6rem}
    .portal-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:var(--bg-card);border-radius:8px;border:1px solid var(--border);font-size:.82rem}
    .portal-item-icon{font-size:1.1rem}
    .portal-item-name{flex:1;color:var(--text-primary)}
    .portal-item-meta{color:var(--text-muted);font-size:.75rem}
    .portal-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}

    /* === PROZESS === */
    #prozess{background:var(--bg-secondary)}
    .steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;position:relative}
    .step{text-align:center;padding:1.5rem}
    .step-num{width:52px;height:52px;background:rgba(36,123,255,.1);border:2px solid var(--blue-900);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:800;color:var(--accent);margin:0 auto 1.25rem}
    .step h4{font-size:1rem;font-weight:700;margin-bottom:.5rem}
    .step p{color:var(--text-secondary);font-size:.875rem;line-height:1.6}

    /* === KONTAKT === */
    #kontakt{background:var(--bg-primary)}
    .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
    .contact-info{display:flex;flex-direction:column;gap:1.25rem}
    .contact-item{display:flex;gap:1rem;align-items:center;color:var(--text-secondary);font-size:.95rem}
    .contact-item-icon{width:44px;height:44px;min-width:44px;background:rgba(36,123,255,.1);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
    .contact-form{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:2rem}
    .form-group{margin-bottom:1.25rem}
    .form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem;color:var(--text-secondary)}
    .form-group input,.form-group textarea,.form-group select{width:100%;padding:.75rem 1rem;background:var(--bg-primary);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-family:'Inter',sans-serif;font-size:.9rem;transition:border-color .2s;outline:none}
    .form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--blue-600)}
    .form-group textarea{min-height:120px;resize:vertical}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

    /* === FOOTER === */
    footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:3rem 2rem 2rem}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;max-width:1200px;margin:0 auto 2rem}
    .footer-brand p{color:var(--text-muted);font-size:.875rem;line-height:1.7;margin-top:.75rem}
    .footer-logo{height:32px;width:auto;margin-bottom:.75rem}
    .footer-logo-dark{display:block}
    .footer-logo-light{display:none}
    [data-theme="light"] .footer-logo-dark{display:none}
    [data-theme="light"] .footer-logo-light{display:block}
    .footer-col h5{font-weight:700;font-size:.9rem;margin-bottom:1rem}
    .footer-col ul{list-style:none}
    .footer-col ul li{margin-bottom:.6rem}
    .footer-col ul li a{color:var(--text-muted);text-decoration:none;font-size:.875rem;transition:color .2s}
    .footer-col ul li a:hover{color:var(--accent)}
    .footer-bottom{max-width:1200px;margin:0 auto;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
    .footer-bottom p{color:var(--text-muted);font-size:.8rem}

    /* === MISC === */
    .gradient-divider{height:1px;background:linear-gradient(90deg,transparent,var(--blue-900),transparent)}
    @media(max-width:768px){
      .nav-links{display:none}.hamburger{display:block}
      .nav-links.open{display:flex;position:fixed;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg-primary);border-bottom:1px solid var(--border);box-shadow:0 12px 24px rgba(0,0,0,.45);padding:.5rem 1.25rem 1rem;z-index:99;max-height:calc(100vh - 68px);overflow-y:auto}
      .nav-links.open li{width:100%;border-bottom:1px solid var(--border)}
      .nav-links.open li:last-child{border-bottom:none}
      .nav-links.open a{display:block;width:100%;padding:.9rem 0;font-size:1rem}
      .hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
      .hamburger.is-open span:nth-child(2){opacity:0}
      .hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
      .site-nav{padding:0 1rem}
      .nav-only-mobile{display:block}
      .nav-right .btn-blue{font-size:.8rem;padding:.5rem .75rem;white-space:nowrap}
      .nav-right{gap:.6rem}
      .why-grid,.portal-card,.contact-grid{grid-template-columns:1fr;gap:2rem}
      .footer-grid{grid-template-columns:1fr 1fr}
      .form-row{grid-template-columns:1fr}
    }
    @media(max-width:560px){.nav-right .btn-blue{display:none}}
    @media(max-width:480px){.footer-grid{grid-template-columns:1fr}section{padding:3.5rem 1.25rem}.portal-card{padding:1.75rem}}
    @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
    .fade-up{animation:fadeUp .7s ease both}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}
    .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
    .reveal.visible{opacity:1;transform:translateY(0)}

    .service-link{display:inline-flex;align-items:center;gap:.3rem;margin-top:.85rem;color:var(--accent);font-size:.82rem;font-weight:600;text-decoration:none;transition:gap .2s}
    .service-link:hover{gap:.6rem}
    .service-card:hover .service-link{color:var(--cyan-400)}

/* =========================================================================
   ERWEITERUNG P4 -- Mehrseiten-Relaunch (technik/)
   Nutzt ausschliesslich die oben definierten CSS-Variablen/Bausteine, damit
   neue Seiten optisch nicht von solutions.bitblade.io abweichen.
   ========================================================================= */

/* Breadcrumb (BreadcrumbList-JSON-LD spiegelt dieselbe Reihenfolge) */
.breadcrumb{max-width:1200px;margin:0 auto;padding:calc(68px + 1.5rem) 2rem 0;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.8rem;color:var(--text-muted)}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current="page"]{color:var(--text-secondary)}

/* Meta-Robots-Hinweis: wird nur im Quelltext gesetzt, keine sichtbare UI noetig */

/* Seiten-Hero fuer Orts-/Hub-/Leistungsseiten (kompakter als die grosse Home-Hero).
   Eigener Fund beim Nachpruefen von Punkt 1 (Koordinator 16.08.2026): auf
   Seiten OHNE Breadcrumb (Rechtsseiten, /ch/) reservierte bisher NICHTS
   Platz unter dem fixierten .site-nav (68px) -- die H1 lag halb dahinter,
   sichtbar z.B. auf /impressum ("mpressum" statt "Impressum"). Basis-
   Padding deckt das jetzt ab; auf Seiten MIT Breadcrumb macht die
   spezifischere Regel direkt darunter das wieder rueckgaengig, weil die
   Breadcrumb selbst schon die Nav-Hoehe reserviert (siehe .breadcrumb oben)
   -- sonst gaebe es dort doppelten Abstand. */
.page-hero{max-width:1200px;margin:0 auto;padding:calc(68px + 1.5rem) 2rem 2.5rem}
.breadcrumb + main .page-hero{padding-top:1.5rem}
.page-hero h1{font-family:'Inter',sans-serif;font-size:clamp(1.9rem,4.5vw,3rem);font-weight:800;line-height:1.15;margin-bottom:1rem}
.page-hero .hero-sub{color:var(--text-secondary);font-size:1.05rem;line-height:1.7;max-width:720px;margin:0 0 1.5rem}

/* Generischer Section-Wrapper fuer Fliesstext-Abschnitte */
.content-section{max-width:1200px;margin:0 auto;padding:2.5rem 2rem}
.content-section h2{font-family:'Inter',sans-serif;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;margin-bottom:1.1rem}
.content-section .prose{color:var(--text-secondary);font-size:1rem;line-height:1.85;max-width:760px}
.content-section .prose p{margin-bottom:1.1rem}
.content-section .prose h3{font-size:1.15rem;font-weight:700;color:var(--text-primary);margin:2rem 0 .6rem;line-height:1.35}
.content-section .prose h3:first-child{margin-top:0}
.content-section .prose ul,.content-section .prose ol{margin:0 0 1.1rem 1.25rem}
.content-section .prose li{margin-bottom:.4rem}
.content-section .quelle{color:var(--text-muted);font-size:.8rem;margin-top:.5rem}
/* Links im Fliesstext (z.B. 'Weitere Projekte von Bitblade Vision' im
   Referenzen-Block) -- Koordinator-Fund 16.08.2026: ohne eigene Regel
   fallen sie auf den Browser-Standard zurueck (blau, unterstrichen), passt
   nicht zum Design-System. Gleiches Muster wie .nap-block a/.legal-content a. */
.prose a{color:var(--accent);text-decoration:none}
.prose a:hover{text-decoration:underline}

/* Leistungs-Karten (Ortsseite: 2-3 relevante Hubs; Hub/Einsatzgebiet-
   Uebersicht: 2-9 Karten je nach Land) -- auto-fit belaesst variable
   Kartenzahlen in einer gleichmaessigen, gleich breiten Reihe. */
.leistungs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.leistungs-card{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;text-decoration:none;transition:transform .2s,border-color .2s}
.leistungs-card:hover{transform:translateY(-2px);border-color:var(--blue-600)}
.leistungs-card h3{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}
.leistungs-card p{color:var(--text-secondary);font-size:.9rem;line-height:1.6}

/* Leistungs-Grid der Startseiten (home.html, home_ch.html): IMMER genau
   sechs Karten (die sechs Leistungen aus Abschnitt E) -- Koordinator-Fund
   16.08.2026: auto-fit mit minmax(240px,1fr) passte bei sechs Karten und
   1200px Containerbreite auf vier Spalten, liess die zweite Reihe halbleer
   stehen (4+2) und liess dabei alle Spalten gleich breit werden (kein
   separater Breitenfehler, aber die 4+2-Aufteilung selbst ist der Fehler).
   Feste drei Spalten ergeben 3+3, .leistungs-card erbt die Breite 1:1 von
   der Grid-Spalte -- alle sechs Karten damit garantiert gleich breit. */
.leistungs-grid--services{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.leistungs-grid--services{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.leistungs-grid--services{grid-template-columns:1fr}}

/* FAQ */
.faq-list dt{font-weight:700;color:var(--text-primary);margin-top:1.4rem;font-size:1rem}
.faq-list dd{color:var(--text-secondary);margin:.4rem 0 0;line-height:1.7}

/* Nachbarorte / Ortslisten in Hubs */
.ort-list{display:flex;flex-wrap:wrap;gap:.6rem}
.ort-list a,.ort-list span{background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:.4rem 1rem;font-size:.85rem;color:var(--text-secondary);text-decoration:none}
.ort-list a:hover{border-color:var(--blue-600);color:var(--accent)}
.b-ort-block{border-left:3px solid var(--blue-900);padding-left:1.1rem;margin-bottom:1.4rem}
.b-ort-block h3{font-size:1rem;font-weight:700;margin-bottom:.35rem}
.b-ort-block p{color:var(--text-secondary);font-size:.92rem;line-height:1.7}

/* Kontakt-/NAP-Block (aus company.yaml gerendert, nie aus Content-Body) */
.nap-block{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.75rem;max-width:420px}
.nap-block address{font-style:normal;color:var(--text-secondary);line-height:1.8}
.nap-block a{color:var(--accent);text-decoration:none}
.nap-block .legal-note{color:var(--text-muted);font-size:.82rem;margin-top:1rem;line-height:1.6}
.nap-block .entity-name{color:var(--text-primary);font-weight:700}

/* Einheitenblock (beide Rechtstraeger, z.B. auf Leistungsseiten) */
.einheiten-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:1rem}

/* Rechtsseiten (Impressum/Datenschutz/AGB) */
.legal-content{max-width:800px;margin:0 auto;padding:2rem 2rem 5rem}
.legal-content h2{font-family:'Inter',sans-serif;font-size:1.4rem;font-weight:800;margin-top:2.5rem;margin-bottom:.9rem}
.legal-content h3{font-size:1.05rem;font-weight:700;margin-top:1.75rem;margin-bottom:.6rem}
.legal-content p{color:var(--text-secondary);font-size:.95rem;line-height:1.8;margin-bottom:1rem}
.legal-content a{color:var(--accent)}
.legal-date{color:var(--text-muted);font-size:.8rem;margin-bottom:2rem}

/* Noindex-Kennzeichnung, steht in base.html direkt nach .site-nav (also vor
   Breadcrumb/.page-hero) -- eigener Fund beim Nachpruefen von Punkt 1: ohne
   eigenes Top-Clearance liegt sie wie die Rechtsseiten-H1 hinter dem
   fixierten .site-nav. margin-top deckt das ab; auf Seiten, die zusaetzlich
   noch eine Breadcrumb haben, entsteht dadurch etwas mehr Abstand als
   noetig (die Breadcrumb reserviert selbst nochmal Platz) -- bewusst in
   Kauf genommen statt einer fragilen Kombinatorik ueber alle vier moeglichen
   Reihenfolgen (mit/ohne Noindex-Hinweis x mit/ohne Breadcrumb); betrifft
   ohnehin nur die aktuell alle noch nicht oeffentlich indexierten CH-Seiten. */
.noindex-note{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.28);color:#FBBF24;border-radius:8px;padding:.5rem .9rem;font-size:.78rem;max-width:1200px;margin:calc(68px + 1rem) auto -.5rem;padding-left:.9rem}
@media(min-width:1265px){.noindex-note{margin-left:auto;margin-right:auto;width:calc(1200px - 4rem)}}

/* Kontaktformular (Startseite, Punkt 1 Koordinator-Anfrage 16.08.2026):
   Server-Rueckmeldung + DSGVO-Hinweis + Honeypot-Feld */
.form-consent{color:var(--text-muted);font-size:.78rem;line-height:1.6;margin:0 0 1rem}
.form-consent a{color:var(--accent)}
.form-status{margin:0 0 1rem;padding:.75rem 1rem;border-radius:10px;font-size:.85rem;line-height:1.5}
.form-status-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#22C55E}
.form-status-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#EF4444}
/* Honeypot: kein display:none (das werten manche Bots gezielt aus) --
   stattdessen ausserhalb des Viewports, per tabindex/aria-hidden auch fuer
   Tastatur/Screenreader unerreichbar. */
.hp-feld{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form-fallback .section-sub{margin-bottom:0;max-width:100%}

/* Die Navigation ist fixiert (68px). Ohne scroll-padding landet jedes
   Anker-Ziel (#kontakt, FAQ-Ids, Ortsanker in den Hubs) und jede vom
   Browser wiederhergestellte Scrollposition UNTER der Leiste -- die
   Ueberschrift ist dann halb verdeckt. Koordinator-Fund 16.08.2026,
   gemeldet von Maurice als 'Header-Problem'. */
html{scroll-padding-top:calc(68px + 1.25rem);scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
main [id],main h2[id],main h3[id]{scroll-margin-top:calc(68px + 1.25rem)}

/* Links im Inhaltsbereich -- ohne diese Regel rendert der Browser
   Kontakt- und Datenschutzlinks in Standard-Blau mit Unterstreichung,
   was im dunklen Design als Fremdkoerper wirkt (Koordinator-Fund
   16.08.2026 im Kontaktblock der Startseite). Navigation, Footer und
   Buttons haben eigene Regeln und bleiben unberuehrt. */
main a:not(.btn):not(.leistungs-card):not(.ort-card){color:var(--accent);text-decoration:none;transition:color .2s}
main a:not(.btn):not(.leistungs-card):not(.ort-card):hover{text-decoration:underline}
main a:not(.btn):focus-visible,.site-nav a:focus-visible,footer a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}