/* ==========================================================================
   NG112 — main.css
   Heller, technisch-seriöser SaaS-Look nach Mockuphell.png.
   Tokens hier definiert (style.css wird im Frontend nicht enqueued).
   ========================================================================== */

:root {
    --ng-primary:    #E30613;
    --ng-primary-dk: #B7050F;
    --ng-ink:        #111827;
    --ng-ink-2:      #374151;
    --ng-muted:      #6B7280;
    --ng-bg:         #FFFFFF;
    --ng-bg-2:       #F7F8FA;
    --ng-bg-3:       #F3F4F6;
    --ng-border:     #E5E7EB;
    --ng-green:      #16A34A;

    --ng-container:  1240px;
    --ng-radius:     14px;
    --ng-radius-lg:  18px;

    --ng-shadow-sm:  0 1px 2px rgba(17,24,39,0.05);
    --ng-shadow-md:  0 6px 22px rgba(17,24,39,0.07);
    --ng-shadow-lg:  0 18px 50px rgba(17,24,39,0.10);

    --ng-font:       'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Fonts (self-hosted, DSGVO-konform) ---------- */
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
    src:url('../fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap;
    src:url('../fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
    src:url('../fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:900; font-display:swap;
    src:url('../fonts/roboto-900.woff2') format('woff2'); }

/* ---------- Reset / Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    margin:0; font-family:var(--ng-font); color:var(--ng-ink);
    background:var(--ng-bg); line-height:1.55; font-size:16px;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { margin:0 0 .4em; line-height:1.12; font-weight:700; letter-spacing:-.01em; }
p { margin:0 0 1em; }
a { color:inherit; text-decoration:none; }
img,svg { max-width:100%; display:block; }
ul { margin:0; padding:0; list-style:none; }

.container { width:100%; max-width:var(--ng-container); margin-inline:auto; padding-inline:24px; }
.container--narrow { max-width:760px; }
.section { padding:84px 0; }
.section:nth-child(even){ background:var(--ng-bg-2); }

.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:16px; top:16px; background:#fff; padding:10px 16px; z-index:1000; border-radius:8px; box-shadow:var(--ng-shadow-md); }

.accent { color:var(--ng-primary); }

/* ---------- Buttons ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    font-weight:700; font-size:15px; line-height:1; padding:14px 22px;
    border-radius:12px; border:1.5px solid transparent; cursor:pointer;
    transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space:nowrap;
}
.btn:hover { transform:translateY(-1px); }
.btn-sm { padding:10px 16px; font-size:14px; }
.btn-primary { background:var(--ng-primary); color:#fff; box-shadow:0 6px 16px rgba(227,6,19,.22); }
.btn-primary:hover { background:var(--ng-primary-dk); }
.btn-secondary { background:#fff; color:var(--ng-ink); border-color:var(--ng-border); }
.btn-secondary:hover { border-color:#cbd0d8; }
.btn-light { background:#fff; color:var(--ng-primary); }
.btn-light:hover { background:#f5f5f5; }
.btn-ghost-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost-light:hover { background:rgba(255,255,255,.12); }

/* ---------- Header ---------- */
.site-header {
    position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
    backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--ng-border);
}
.header-inner { display:flex; align-items:center; gap:32px; height:72px; }
.site-logo { display:flex; flex-direction:column; line-height:1; }
.logo-mark { font-weight:900; font-size:22px; letter-spacing:-.02em; color:var(--ng-ink); }
.logo-accent { color:var(--ng-primary); }
.logo-sub { font-size:9.5px; font-weight:700; letter-spacing:.18em; color:var(--ng-muted); margin-top:3px; }

.primary-nav { margin-left:auto; }
.primary-menu { display:flex; gap:28px; }
.primary-menu a { font-size:15px; font-weight:500; color:var(--ng-ink-2); transition:color .15s; }
.primary-menu a:hover, .primary-menu .current-menu-item a { color:var(--ng-primary); }
.header-actions { display:flex; align-items:center; gap:14px; }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle span { width:24px; height:2px; background:var(--ng-ink); border-radius:2px; transition:.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Section heads ---------- */
.section-head { max-width:760px; margin:0 auto 48px; text-align:center; }
.kicker { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ng-primary); margin-bottom:14px; }
.section-head h2 { font-size:clamp(26px,3.4vw,38px); }
.section-sub { color:var(--ng-muted); font-size:17px; margin-top:8px; }

/* ---------- Hero ---------- */
.section-hero { padding:72px 0 80px; background:
    radial-gradient(900px 420px at 78% 10%, rgba(227,6,19,.05), transparent 60%); }
.hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
.hero-eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.04em;
    color:var(--ng-primary); background:#fdeaec; padding:6px 12px; border-radius:999px; margin-bottom:18px; }
.hero-title { font-size:clamp(32px,4.6vw,52px); font-weight:900; letter-spacing:-.02em; }
.hero-brand { display:block; font-size:1.06em; }
.hero-brand .accent { color:var(--ng-primary); }
.hero-lead { font-size:18px; color:var(--ng-ink-2); max-width:48ch; margin-top:18px; }
.hero-checks { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:22px 0 28px; }
.hero-checks li { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:500; }
.check { display:inline-grid; place-items:center; width:20px; height:20px; flex:0 0 20px;
    background:#e9f7ef; color:var(--ng-green); border-radius:50%; }
.check svg { width:12px; height:12px; }
.hero-buttons { display:flex; gap:14px; flex-wrap:wrap; }

/* CH-Routing visual — fertige Grafik (schweiz-routing.png) */
.ch-routing-img { width:100%; height:auto; }

/* ---------- Workflow ---------- */
.workflow-img { width:100%; height:auto; }

/* ---------- Features ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature-card { background:#fff; border:1px solid var(--ng-border); border-radius:var(--ng-radius-lg);
    padding:26px 22px; box-shadow:var(--ng-shadow-sm); transition:transform .18s, box-shadow .18s; }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--ng-shadow-md); }
.feature-ico { display:grid; place-items:center; width:48px; height:48px; border-radius:13px;
    background:#fdeaec; color:var(--ng-primary); margin-bottom:16px; }
.feature-ico svg { width:24px; height:24px; }
.feature-title { font-size:18px; }
.feature-desc { font-size:14.5px; color:var(--ng-muted); }
.feature-points { display:grid; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--ng-border); }
.feature-points li { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; }

/* ---------- Dashboard ---------- */
.dashboard-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start; }
.kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.kpi-card { background:#fff; border:1px solid var(--ng-border); border-radius:var(--ng-radius);
    padding:20px; box-shadow:var(--ng-shadow-sm); display:flex; flex-direction:column; gap:6px; }
.kpi-ico { display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
    background:var(--ng-bg-3); color:var(--ng-primary); }
.kpi-ico svg { width:18px; height:18px; }
.kpi-value { font-size:30px; font-weight:900; letter-spacing:-.02em; line-height:1; }
.kpi-value small { font-size:14px; font-weight:700; margin-left:2px; color:var(--ng-muted); }
.kpi-label { font-size:12.5px; color:var(--ng-muted); }
.kpi-card--status { align-items:flex-start; }
.kpi-value--status { color:var(--ng-green); font-size:24px; }
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--ng-green);
    box-shadow:0 0 0 4px rgba(22,163,74,.18); display:inline-block; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 4px rgba(22,163,74,.18);} 50%{ box-shadow:0 0 0 7px rgba(22,163,74,.05);} }
.routing-map-card { background:#fff; border:1px solid var(--ng-border); border-radius:var(--ng-radius);
    box-shadow:var(--ng-shadow-sm); overflow:hidden; }
.routing-map-head { display:flex; align-items:center; justify-content:flex-end; padding:14px 18px;
    border-bottom:1px solid var(--ng-border); font-size:13px; font-weight:700; }
.status-pill { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
    color:var(--ng-green); background:#e9f7ef; padding:4px 10px; border-radius:999px; }
.routing-map-img { width:100%; height:auto; padding:18px; }

/* ---------- Trust ---------- */
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.trust-item { background:#fff; border:1px solid var(--ng-border); border-radius:var(--ng-radius-lg);
    padding:26px 24px; box-shadow:var(--ng-shadow-sm); text-align:center; }
.trust-logo { height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.trust-logo img { max-height:56px; max-width:170px; width:auto; object-fit:contain; }
.trust-item h3 { font-size:17px; margin-bottom:6px; }
.trust-item p { font-size:14px; color:var(--ng-muted); margin:0; }

/* ---------- Technologie ---------- */
.logo-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:16px; }
.logo-card { display:grid; place-items:center; height:90px; padding:16px 20px; background:#fff;
    border:1px solid var(--ng-border); border-radius:var(--ng-radius); box-shadow:var(--ng-shadow-sm);
    transition:transform .18s, box-shadow .18s; }
.logo-card:hover { transform:translateY(-3px); box-shadow:var(--ng-shadow-md); }
.logo-card img { max-height:40px; max-width:100%; width:auto; object-fit:contain;
    filter:grayscale(1); opacity:.72; transition:filter .18s, opacity .18s; }
.logo-card:hover img { filter:none; opacity:1; }
.tech-stack-line { text-align:center; margin-top:26px; color:var(--ng-muted); font-size:15px; }
.tech-stack-line strong { color:var(--ng-ink-2); font-weight:700; }

/* ---------- Architektur — fertige Grafik (architektur.png) ---------- */
.arch-img { width:100%; height:auto; border:1px solid var(--ng-border);
    border-radius:var(--ng-radius-lg); box-shadow:var(--ng-shadow-sm); background:#fff; }

/* ---------- CTA ---------- */
/* .section.section-cta (0,2,0) schlägt .section:nth-child(even) bei späterer Position */
.section.section-cta { background:var(--ng-primary); color:#fff; padding:64px 0; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-text h2 { font-size:clamp(24px,3vw,34px); color:#fff; }
.cta-text p { color:rgba(255,255,255,.9); margin:0; max-width:56ch; }
.cta-buttons { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* cibooking-Embed-Button an den Theme-Look angleichen */
.ng-booking { display:inline-flex; }
.ng-booking button {
    font-family:var(--ng-font) !important; padding:14px 22px !important;
    border-radius:12px !important; font-size:15px !important; font-weight:700 !important;
    line-height:1 !important; cursor:pointer; transition:transform .15s ease;
}
.ng-booking button:hover { transform:translateY(-1px); }
/* heller Button auf rotem CTA-Hintergrund */
.ng-booking--light button { background:#fff !important; color:var(--ng-primary) !important; }
/* kompakter Header-Button */
.ng-booking--header button { padding:10px 16px !important; font-size:14px !important;
    box-shadow:0 6px 16px rgba(227,6,19,.22); }

/* ---------- Footer ---------- */
.site-footer { background:#0f1115; color:#c9ced8; padding:64px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:40px; }
.ng-wordmark { font-weight:900; }
.ng-wordmark .logo-accent { color:var(--ng-primary); }
.site-footer .logo-mark { color:#fff; }
.site-footer .logo-sub { color:#7b828f; }
.footer-tagline { font-size:14px; color:#9aa1ad; margin-top:14px; max-width:42ch; }
.footer-col h3 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.footer-col ul { display:grid; gap:10px; }
.footer-col a { font-size:14px; color:#c9ced8; transition:color .15s; }
.footer-col a:hover { color:#fff; }
.footer-contact .footer-ico { display:inline-flex; width:18px; color:var(--ng-primary); margin-right:8px; vertical-align:middle; }
.footer-contact li a { display:inline-flex; align-items:center; }
.footer-address { font-size:13px; color:#9aa1ad; line-height:1.5; }
.footer-bottom { border-top:1px solid #1e222b; margin-top:48px; }
.footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:22px 0; flex-wrap:wrap; }
.footer-copyright { font-size:13px; color:#7b828f; margin:0; }
.footer-credit-link { color:#c9ced8; }
.footer-legal { display:flex; align-items:center; gap:20px; }
.footer-legal a { font-size:13px; color:#9aa1ad; display:inline-flex; }
.footer-legal a:hover { color:#fff; }
.footer-legal svg { width:18px; height:18px; }

/* ---------- Page / 404 ---------- */
.section-page { padding:64px 0; }
.page-title { font-size:34px; margin-bottom:24px; }
.page-content { font-size:16px; color:var(--ng-ink-2); }
.page-content h2 { font-size:24px; margin-top:32px; }
.section-404 .error-code { font-size:96px; font-weight:900; color:var(--ng-primary); line-height:1; margin:0; }

/* ---------- Bild-Lightbox ---------- */
img.zoomable { transition:box-shadow .15s, transform .15s; }
img.zoomable:hover { box-shadow:var(--ng-shadow-md); }
.img-lightbox { position:fixed; inset:0; z-index:9999; display:none;
    align-items:center; justify-content:center; padding:24px;
    background:rgba(15,17,21,.92); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.img-lightbox.is-open { display:flex; }
.img-lightbox__img { max-width:96vw; max-height:92vh; width:auto; height:auto;
    border-radius:8px; background:#fff; cursor:zoom-in; transition:transform .2s ease;
    box-shadow:0 30px 80px rgba(0,0,0,.5); }
.img-lightbox__img.is-zoomed { transform:scale(2.2); cursor:zoom-out; }
.img-lightbox__close { position:absolute; top:16px; right:22px; width:44px; height:44px;
    font-size:32px; line-height:1; color:#fff; background:rgba(255,255,255,.12);
    border:0; border-radius:50%; cursor:pointer; transition:background .15s; }
.img-lightbox__close:hover { background:rgba(255,255,255,.25); }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
    .feature-grid { grid-template-columns:1fr 1fr; }
    .dashboard-grid { grid-template-columns:1fr; }
    .kpi-row { grid-template-columns:repeat(3,1fr); }
    .logo-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:860px){
    .section { padding:60px 0; }
    .primary-nav { position:fixed; inset:72px 0 auto 0; background:#fff; border-bottom:1px solid var(--ng-border);
        transform:translateY(-130%); transition:transform .25s ease; box-shadow:var(--ng-shadow-md); }
    .primary-nav.is-open { transform:translateY(0); }
    .primary-menu { flex-direction:column; gap:0; padding:8px 24px; }
    .primary-menu li { border-bottom:1px solid var(--ng-border); }
    .primary-menu li:last-child { border-bottom:0; }
    .primary-menu a { display:block; padding:14px 0; }
    .nav-toggle { display:flex; margin-left:auto; }
    .header-actions .btn { display:none; }
    .hero-grid { grid-template-columns:1fr; gap:36px; }
    .hero-checks { grid-template-columns:1fr 1fr; }
    .trust-grid { grid-template-columns:1fr; }
    .arch-standards ul { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .workflow-arrow, .arch-arrow { transform:rotate(90deg); }
}
@media (max-width:560px){
    .feature-grid { grid-template-columns:1fr; }
    .kpi-row { grid-template-columns:1fr 1fr; }
    .logo-grid { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:1fr; }
    .cta-inner { flex-direction:column; align-items:flex-start; }
    .hero-title { font-size:34px; }
}