/* ── Montserrat (lokal, DSGVO-konform) ─────────────── */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 300 900;
      font-display: swap;
      src: url('fonts/montserrat-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 300 900;
      font-display: swap;
      src: url('fonts/montserrat-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root {
      --navy:#0A1628; --navy-light:#132240; --navy-mid:#1a2f52;
      --gold:#F5A800; --gold-dark:#d49200;
      --white:#FFFFFF; --off-white:#F4F6F9; --grey-light:#E8ECF2;
      --grey-mid:#8A95A8; --text-main:#1C2B3A; --text-soft:#4A5568;
      --font:'Montserrat',sans-serif;
      --r-sm:6px; --r-md:12px; --r-lg:20px;
      --sh-sm:0 2px 8px rgba(10,22,40,.08);
      --sh-md:0 8px 24px rgba(10,22,40,.12);
      --sh-lg:0 16px 48px rgba(10,22,40,.18);
      --t:.3s ease; --mw:1200px;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:var(--font);color:var(--text-main);background:var(--white);line-height:1.6;overflow-x:hidden}
    img{display:block;max-width:100%}
    a{text-decoration:none;color:inherit}
    ul{list-style:none}
    .container{width:100%;max-width:var(--mw);margin:0 auto;padding:0 24px}
    .section{padding:96px 0}
    .section--dark{background:var(--navy)}
    .section--grey{background:var(--off-white)}
    .section-label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
    .section-title{font-size:clamp(26px,4vw,44px);font-weight:800;line-height:1.15;color:var(--navy);margin-bottom:16px}
    .section--dark .section-title{color:var(--white)}
    .section-subtitle{font-size:17px;color:var(--text-soft);max-width:640px;line-height:1.7}
    .section--dark .section-subtitle{color:rgba(255,255,255,.72)}
    .section-header{margin-bottom:52px}
    .section-header--center{text-align:center}
    .section-header--center .section-subtitle{margin:0 auto}
    .gold-bar{display:block;width:48px;height:4px;background:var(--gold);border-radius:2px;margin-bottom:20px}
    .section-header--center .gold-bar{margin:0 auto 20px}

    /* BUTTONS */
    .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;font-family:var(--font);font-size:15px;font-weight:700;border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;transition:all var(--t);letter-spacing:.4px}
    .btn-primary{background:var(--gold);color:var(--navy);border-color:var(--gold)}
    .btn-primary:hover{background:var(--gold-dark);border-color:var(--gold-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,168,0,.35)}
    .btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
    .btn-outline:hover{background:rgba(255,255,255,.08);border-color:var(--white)}
    .btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
    .btn-navy:hover{background:var(--navy-mid);transform:translateY(-2px);box-shadow:var(--sh-md)}
    .btn-sm{padding:10px 20px;font-size:13px}

    /* FADE-IN */
    .fade-in{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
    .fade-in.visible{opacity:1;transform:translateY(0)}
    .fade-in:nth-child(1){transition-delay:.05s}
    .fade-in:nth-child(2){transition-delay:.15s}
    .fade-in:nth-child(3){transition-delay:.25s}
    .fade-in:nth-child(4){transition-delay:.35s}

    /* =====================================================
       NAVIGATION – Logo transparent, kein Kasten, kein Streifen
    ===================================================== */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      padding: 18px 0;
      /*
        KRITISCH: Mindestens 0.92 Opacity damit mix-blend-mode:screen
        das schwarze PNG-Hintergrundpixel (RGB 0,0,0) zuverlässig
        unsichtbar macht – auch beim allerersten Seitenaufruf, bevor
        gescrollt wird. Unterhalb ~0.80 bleibt ein sichtbarer Kasten.
        Screen-Blend-Formel: result = 1 – (1–logo) × (1–bg)
        logo=0 (schwarz), bg=0.92×navy → result ≈ 0.006 → unsichtbar ✓
        logo=1 (weiß),   bg=0.92×navy → result = 1          → weiß    ✓
      */
      background: rgba(10,22,40,0.92);
      transition: background var(--t), box-shadow var(--t), padding var(--t);
    }
    #navbar.scrolled {
      background: rgba(10,22,40,1);
      box-shadow: 0 2px 20px rgba(10,22,40,.45);
      padding: 10px 0;
    }
    .nav-inner {display:flex;align-items:center;justify-content:space-between}

    /*
      Logo-Lösung: Das PNG hat weißes Logo auf schwarzem Hintergrund.
      mix-blend-mode:screen macht auf dunklem Grund:
        Schwarz → unsichtbar (verschmilzt mit Hintergrund)
        Weiß    → leuchtet weiß
      Kein box-shadow, kein border, kein Hintergrundkasten.
    */
    .nav-logo { display:flex; align-items:center; }
    .nav-logo img {
      height: 54px;  /* größer: SH Motorradtraining gut lesbar */
      width: auto;
      transition: height var(--t);
      mix-blend-mode: screen;
      filter: brightness(1.06);
    }
    #navbar.scrolled .nav-logo img { height: 42px; }

    .nav-links {display:flex;align-items:center;gap:30px}
    .nav-links a {font-size:13px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:.4px;transition:color var(--t);position:relative}
    .nav-links a::after {content:'';position:absolute;bottom:-4px;left:0;right:100%;height:2px;background:var(--gold);transition:right var(--t)}
    .nav-links a:hover, .nav-links a.active {color:var(--gold)}
    .nav-links a:hover::after, .nav-links a.active::after {right:0}
    .nav-cta {padding:9px 20px!important;font-size:13px!important;transition:all .25s ease}
    .nav-cta:hover {background:var(--gold-dark)!important;color:var(--navy)!important;border-color:var(--gold-dark)!important;transform:none;box-shadow:none}

    .nav-hamburger {display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
    .nav-hamburger span {display:block;width:26px;height:2px;background:var(--white);border-radius:2px;transition:all var(--t)}
    .nav-hamburger.open span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
    .nav-hamburger.open span:nth-child(2) {opacity:0}
    .nav-hamburger.open span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
    .nav-mobile {display:none;flex-direction:column;background:var(--navy);border-top:1px solid rgba(255,255,255,.08);padding:18px 24px 24px;gap:2px}
    .nav-mobile.open {display:flex}
    .nav-mobile a {color:rgba(255,255,255,.85);font-size:15px;font-weight:600;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);transition:color var(--t)}
    .nav-mobile a:hover {color:var(--gold)}
    .nav-mobile a:last-child {border-bottom:none;margin-top:8px}

    /* =====================================================
       HERO
    ===================================================== */
    #hero {position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--navy)}
    .hero-bg {position:absolute;inset:0;background-image:url('Bilder/sh_motorradtraining_BG.jpg');background-size:cover;background-position:center 30%;animation:heroZoom 12s ease-out forwards}
    @keyframes heroZoom {from{transform:scale(1.06)}to{transform:scale(1)}}
    .hero-overlay {position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,22,40,.92) 0%,rgba(10,22,40,.72) 55%,rgba(10,22,40,.45) 100%)}
    .hero-content {position:relative;z-index:2;max-width:760px;animation:heroFadeUp 1s ease .3s both}
    @keyframes heroFadeUp {from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
    .hero-tagline {display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
    .hero-tagline::before {content:'';display:block;width:32px;height:2px;background:var(--gold)}
    .hero-headline {font-size:clamp(38px,6vw,76px);font-weight:900;line-height:1.05;color:var(--white);margin-bottom:24px;letter-spacing:-1.5px}
    .hero-headline em {font-style:normal;color:var(--gold)}
    .hero-text {font-size:18px;color:rgba(255,255,255,.80);margin-bottom:40px;max-width:580px;line-height:1.7}
    .hero-actions {display:flex;gap:16px;flex-wrap:wrap}
    .hero-stats {position:absolute;bottom:50px;right:0;z-index:2;display:flex}
    .hero-stat {background:rgba(10,22,40,.82);backdrop-filter:blur(12px);border:1px solid rgba(245,168,0,.18);padding:18px 26px;text-align:center;border-left:1px solid rgba(255,255,255,.05)}
    .hero-stat:first-child {border-left:3px solid var(--gold)}
    .hero-stat strong {display:block;font-size:28px;font-weight:900;color:var(--gold);line-height:1}
    .hero-stat span {font-size:11px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:1px;text-transform:uppercase}
    .hero-scroll {position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2}
    .hero-scroll-dot {width:1px;height:36px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent);animation:scrollPulse 2s ease-in-out infinite}
    @keyframes scrollPulse {0%,100%{opacity:.4}50%{opacity:1}}

    /* =====================================================
       ÜBER MICH
       Links: Text + Credentials + Tracks (ganz unten links)
       Rechts: 4 Stat-Blöcke
    ===================================================== */
    #ueber {background:var(--white)}
    .ueber-grid {display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
    .ueber-text p {font-size:15.5px;color:var(--text-soft);line-height:1.8;margin-bottom:18px}
    .credentials-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;margin-bottom:18px}
    .credential-item {display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--off-white);border-radius:var(--r-md);border-left:3px solid var(--gold)}
    .credential-icon {width:36px;height:36px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy);font-size:14px}
    .credential-text strong {display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:2px}
    .credential-text span {font-size:12px;color:var(--text-soft)}
    .tracks-box {background:var(--off-white);border-radius:var(--r-md);padding:20px}
    .tracks-box h4 {font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
    .tracks-list {display:flex;flex-wrap:wrap;gap:7px}
    .track-tag {display:inline-block;padding:4px 10px;background:var(--white);border:1px solid var(--grey-light);border-radius:20px;font-size:11.5px;font-weight:600;color:var(--navy)}
    /* Rechte Spalte */
    .ueber-sidebar {display:flex;flex-direction:column;gap:18px}
    .stat-block {background:var(--navy);color:var(--white);border-radius:var(--r-md);padding:26px 22px;display:flex;align-items:center;gap:18px}
    .stat-block-icon {width:52px;height:52px;background:rgba(245,168,0,.12);border:2px solid rgba(245,168,0,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--gold);flex-shrink:0}
    .stat-block-text strong {display:block;font-size:28px;font-weight:900;color:var(--gold);line-height:1}
    .stat-block-text span {font-size:13px;color:rgba(255,255,255,.65);font-weight:500}

    /* =====================================================
       TRAININGSANGEBOTE
    ===================================================== */
    #training {background:var(--off-white)}
    .training-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .training-card {background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform var(--t),box-shadow var(--t);position:relative;display:flex;flex-direction:column}
    .training-card:hover {transform:translateY(-5px);box-shadow:var(--sh-lg)}
    .training-card--featured {border:2px solid var(--gold)}
    .training-card--featured .card-badge {display:block}
    .card-badge {display:none;position:absolute;top:16px;right:16px;background:var(--gold);color:var(--navy);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:20px;z-index:2}
    .card-header {background:var(--navy);padding:30px 26px 22px}
    .card-icon {width:50px;height:50px;background:rgba(245,168,0,.15);border:2px solid rgba(245,168,0,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--gold);margin-bottom:14px}
    .card-title {font-size:20px;font-weight:800;color:var(--white);margin-bottom:5px}
    .card-target {font-size:12px;color:var(--gold);font-weight:600}
    .card-body {padding:26px;flex:1;display:flex;flex-direction:column;gap:16px}
    .card-desc {font-size:14px;color:var(--text-soft);line-height:1.75}
    .card-features {display:flex;flex-direction:column;gap:8px}
    .card-feature {display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text-main)}
    .card-feature i {color:var(--gold);font-size:12px;margin-top:3px;flex-shrink:0;width:14px}
    .card-meta {display:flex;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--grey-light)}
    .card-meta-item {display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--grey-mid);font-weight:500}
    .card-meta-item i {color:var(--gold);width:13px}
    .card-footer {padding:0 26px 26px;display:flex;align-items:center;justify-content:space-between}
    .card-price strong {display:block;font-size:30px;font-weight:900;color:var(--navy);line-height:1}
    .card-price span {font-size:12px;color:var(--grey-mid)}

    /* =====================================================
       GALERIE
    ===================================================== */
    #galerie {background:var(--navy);padding:80px 0}
    .galerie-header {text-align:center;margin-bottom:44px}
    .galerie-grid {
      display:grid;
      grid-template-columns:1.3fr 1fr 1fr;
      grid-template-rows:240px 240px;
      gap:10px;
    }
    .galerie-item {border-radius:var(--r-md);overflow:hidden;position:relative;cursor:pointer}
    .galerie-item--large {grid-row:1/3}
    .galerie-img {width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
    .galerie-item:hover .galerie-img {transform:scale(1.05)}
    .galerie-overlay {position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,40,.8) 0%,transparent 50%);opacity:0;transition:opacity var(--t)}
    .galerie-item:hover .galerie-overlay {opacity:1}
    .galerie-label {position:absolute;bottom:12px;left:14px;font-size:12px;font-weight:700;color:var(--white);letter-spacing:.8px;text-transform:uppercase;opacity:0;transition:opacity var(--t);display:flex;align-items:center;gap:7px}
    .galerie-label i {color:var(--gold)}
    .galerie-item:hover .galerie-label {opacity:1}
    /* Großes Bild links: Caption permanent sichtbar */
    .galerie-item--large .galerie-overlay {opacity:1;background:linear-gradient(to top,rgba(10,22,40,.72) 0%,rgba(10,22,40,.08) 45%,transparent 100%)}
    .galerie-item--large .galerie-label {opacity:1;font-size:14px;font-weight:800;bottom:18px;left:18px;letter-spacing:1.5px}

    /* =====================================================
       KUNDENSTIMMEN
    ===================================================== */
    #stimmen {background:var(--off-white)}
    .stimmen-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .stimme-card {background:var(--white);border-radius:var(--r-md);padding:30px 26px;box-shadow:var(--sh-sm);transition:box-shadow var(--t)}
    .stimme-card:hover {box-shadow:var(--sh-md)}
    .stimme-stars {display:flex;gap:3px;margin-bottom:14px}
    .stimme-stars i {color:var(--gold);font-size:13px}
    .stimme-quote {font-size:34px;line-height:1;color:var(--gold);font-weight:900;margin-bottom:10px;opacity:.55}
    .stimme-text {font-size:14.5px;color:var(--text-soft);line-height:1.75;margin-bottom:18px;font-style:italic}
    .stimme-author {display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--grey-light)}
    .stimme-avatar {width:40px;height:40px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:15px;font-weight:800;flex-shrink:0}
    .stimme-name strong {display:block;font-size:13.5px;font-weight:700;color:var(--navy)}
    .stimme-name span {font-size:12px;color:var(--grey-mid)}

    /* =====================================================
       AKTUELLES – Karussell (kein Auto-Play)
    ===================================================== */
    #aktuelles {background:var(--white)}
    .aktuelles-wrapper {position:relative;overflow:hidden}
    .aktuelles-track {display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
    .aktuell-slide {min-width:100%;display:grid;grid-template-columns:1fr 1fr;gap:28px}
    .aktuell-card {border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform var(--t),box-shadow var(--t);display:flex;flex-direction:column;background:var(--white);border:1.5px solid var(--grey-light)}
    .aktuell-card:hover {transform:translateY(-4px);box-shadow:var(--sh-md)}
    .aktuell-img {height:200px;background:var(--navy);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
    .aktuell-img-bg {position:absolute;inset:0;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%)}
    .aktuell-img-icon {position:relative;z-index:1;font-size:64px;color:rgba(245,168,0,.45)}
    .aktuell-tag {display:inline-block;padding:4px 12px;background:var(--gold);color:var(--navy);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;border-radius:20px;margin-bottom:12px;align-self:flex-start}
    .aktuell-body {padding:26px;flex:1;display:flex;flex-direction:column;gap:10px}
    .aktuell-body h3 {font-size:18px;font-weight:800;color:var(--navy);line-height:1.3}
    .aktuell-body p {font-size:14px;color:var(--text-soft);line-height:1.78;flex:1}
    .aktuelles-nav {display:flex;align-items:center;justify-content:center;gap:16px;margin-top:36px}
    .aktuelles-btn {width:44px;height:44px;border-radius:50%;border:2px solid var(--grey-light);background:var(--white);color:var(--navy);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--t)}
    .aktuelles-btn:hover {background:var(--navy);color:var(--gold);border-color:var(--navy)}
    .aktuelles-dots {display:flex;gap:8px}
    .aktuelles-dot {width:8px;height:8px;border-radius:50%;background:var(--grey-light);cursor:pointer;transition:all var(--t)}
    .aktuelles-dot.active {background:var(--gold);width:24px;border-radius:4px}

    /* =====================================================
       TOUREN
    ===================================================== */
    #touren {background:var(--navy);position:relative;overflow:hidden}
    #touren::before {content:'';position:absolute;top:-80px;right:-80px;width:360px;height:360px;border-radius:50%;background:rgba(245,168,0,.04);pointer-events:none}
    .touren-inner {position:relative;z-index:1}
    .touren-coming {display:flex;align-items:center;gap:60px}
    .touren-content {flex:1}
    .touren-content p {font-size:16px;color:rgba(255,255,255,.7);line-height:1.8;margin-bottom:22px}
    .touren-preview {flex:0 0 360px;background:rgba(255,255,255,.04);border:1px solid rgba(245,168,0,.2);border-radius:var(--r-lg);padding:32px 28px}
    .touren-preview h3 {font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
    .tour-feature {display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.75);font-size:14px;font-weight:500}
    .tour-feature:last-child {border-bottom:none}
    .tour-feature i {color:var(--gold);width:18px;text-align:center;font-size:15px}
    .coming-soon-badge {display:inline-flex;align-items:center;gap:8px;padding:7px 16px;background:rgba(245,168,0,.1);border:1px solid rgba(245,168,0,.35);border-radius:20px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:18px}

    /* =====================================================
       WARUM SH
    ===================================================== */
    #warum {background:var(--off-white)}
    .usp-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
    .usp-card {text-align:center;padding:38px 20px;border-radius:var(--r-md);border:1.5px solid var(--grey-light);transition:all var(--t);position:relative;overflow:hidden;background:var(--white)}
    .usp-card::before {content:'';position:absolute;inset:0;background:var(--navy);transform:scaleY(0);transform-origin:bottom;transition:transform .4s ease;z-index:0}
    .usp-card:hover::before {transform:scaleY(1)}
    .usp-card:hover {border-color:var(--navy);box-shadow:var(--sh-lg)}
    .usp-card>* {position:relative;z-index:1}
    .usp-icon {width:62px;height:62px;background:rgba(245,168,0,.1);border:2px solid rgba(245,168,0,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--gold);margin:0 auto 16px}
    .usp-card h3 {font-size:15px;font-weight:800;color:var(--navy);margin-bottom:9px;transition:color var(--t)}
    .usp-card:hover h3 {color:var(--gold)}
    .usp-card p {font-size:13.5px;color:var(--text-soft);line-height:1.7;transition:color var(--t)}
    .usp-card:hover p {color:rgba(255,255,255,.72)}

    /* =====================================================
       KONTAKT – mailto
    ===================================================== */
    #kontakt {background:var(--off-white)}
    .kontakt-grid {display:grid;grid-template-columns:1fr 1.55fr;gap:60px;align-items:start}
    .kontakt-info h3 {font-size:21px;font-weight:800;color:var(--navy);margin-bottom:12px}
    .kontakt-info p {font-size:15px;color:var(--text-soft);line-height:1.8;margin-bottom:26px}
    .kontakt-points {display:flex;flex-direction:column;gap:13px}
    .kontakt-point {display:flex;align-items:center;gap:13px;font-size:14px;color:var(--text-main);font-weight:500}
    .kp-icon {width:36px;height:36px;background:var(--navy);color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
    .contact-form {background:var(--white);border-radius:var(--r-lg);padding:40px;box-shadow:var(--sh-md)}
    .form-row {display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .form-group {display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
    .form-group label {font-size:12.5px;font-weight:700;color:var(--navy)}
    .form-group input,.form-group select,.form-group textarea {
      font-family:var(--font);font-size:14.5px;color:var(--text-main);
      background:var(--off-white);border:1.5px solid var(--grey-light);
      border-radius:var(--r-sm);padding:12px 16px;
      transition:border-color var(--t),box-shadow var(--t);outline:none;width:100%;
    }
    .form-group input:focus,.form-group select:focus,.form-group textarea:focus {
      border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,22,40,.07);background:var(--white);
    }
    .form-group textarea {resize:vertical;min-height:110px}
    .form-group select {
      appearance:none;cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%230A1628' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
    }
    .form-submit {display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:4px}
    .form-note {font-size:12px;color:var(--grey-mid);display:flex;align-items:center;gap:6px}
    .form-note i {color:var(--gold)}

    /* =====================================================
       FOOTER – Logo ebenfalls mix-blend-mode:screen
    ===================================================== */
    .footer-gold-stripe {height:4px;background:linear-gradient(to right,var(--gold),var(--gold-dark))}
    #footer {background:var(--navy);color:rgba(255,255,255,.7);padding:52px 0 26px}
    .footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:24px}
    .footer-brand img {
      height:48px;width:auto;margin-bottom:14px;
      mix-blend-mode:screen;
      filter:brightness(1.06);
    }
    .footer-brand p {font-size:14px;line-height:1.75;max-width:270px}
    .footer-col h4 {font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
    .footer-col ul {display:flex;flex-direction:column;gap:8px}
    .footer-col ul li a {font-size:13.5px;color:rgba(255,255,255,.6);transition:color var(--t);cursor:pointer}
    .footer-col ul li a:hover {color:var(--white)}
    .footer-bottom {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
    .footer-copyright {font-size:12.5px;color:rgba(255,255,255,.3)}
    .footer-credit-bar {border-top:1px solid rgba(255,255,255,.06);margin-top:20px;padding-top:14px;text-align:center}
    .footer-credit-bar p {font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.4px;margin:0}
    .footer-credit-bar a {color:rgba(255,255,255,.32);text-decoration:none;transition:color .2s}
    .footer-credit-bar a:hover {color:var(--gold)}
    .footer-credit-bar strong {font-weight:700;letter-spacing:.5px}
    .credit-trigger {
      background:none;border:none;padding:0;margin:0;
      font:inherit;letter-spacing:inherit;cursor:pointer;
      color:rgba(255,255,255,.32);transition:color .25s,letter-spacing .25s;
    }
    .credit-trigger:hover {color:var(--gold);letter-spacing:1px}
    .credit-trigger strong {font-weight:700}

    /* ═══════════════════════════════════════════════
       EVERSPICE CREDIT MODAL
    ═══════════════════════════════════════════════ */
    .es-modal {
      position:fixed;inset:0;z-index:5000;
      display:none;align-items:center;justify-content:center;
      padding:24px;
    }
    .es-modal.open {display:flex;animation:esFadeIn .3s ease}
    .es-modal-backdrop {
      position:absolute;inset:0;
      background:rgba(5,10,20,.85);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
    }
    .es-modal-box {
      position:relative;z-index:1;
      width:100%;max-width:560px;
      max-height:calc(100vh - 48px);
      overflow-y:auto;
      background:linear-gradient(145deg,#0A1628 0%,#132240 100%);
      border:1px solid rgba(245,168,0,.22);
      border-radius:20px;
      box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
      animation:esModalIn .5s cubic-bezier(.2,.8,.2,1);
    }
    .es-modal-glow {
      position:absolute;top:-60px;left:50%;transform:translateX(-50%);
      width:360px;height:360px;
      background:radial-gradient(circle, rgba(245,168,0,.35) 0%, transparent 65%);
      filter:blur(40px);pointer-events:none;z-index:0;
    }
    .es-modal-close {
      position:absolute;top:16px;right:16px;z-index:3;
      width:36px;height:36px;border-radius:50%;
      background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);
      border:none;cursor:pointer;font-size:14px;
      display:flex;align-items:center;justify-content:center;
      transition:all .2s;
    }
    .es-modal-close:hover {background:var(--gold);color:var(--navy);transform:rotate(90deg)}

    .es-modal-inner {
      position:relative;z-index:2;
      padding:48px 40px 40px;
      text-align:center;
    }
    .es-logo-wrap {
      display:inline-flex;align-items:center;justify-content:center;
      width:auto;min-width:140px;padding:18px 28px;
      background:#ffffff;border-radius:12px;
      margin-bottom:20px;
      box-shadow:0 8px 24px rgba(0,0,0,.3);
    }
    .es-logo {max-width:160px;max-height:50px;height:auto;display:block}

    .es-tagline {
      font-family:var(--font);
      font-size:12px;font-weight:700;letter-spacing:2.5px;
      text-transform:uppercase;
      color:var(--gold);
      margin:0 0 22px;
    }

    .es-headline {
      font-family:var(--font);
      font-size:clamp(1.7rem, 4.5vw, 2.3rem);
      font-weight:800;line-height:1.15;
      color:#fff;margin:0 0 20px;
      letter-spacing:-.5px;
    }
    .es-gold {color:var(--gold)}

    .es-intro {
      font-family:var(--font);
      font-size:14.5px;line-height:1.7;
      color:rgba(255,255,255,.75);
      margin:0 0 28px;
    }
    .es-intro strong {color:#fff}

    .es-services {
      display:grid;grid-template-columns:1fr 1fr;gap:10px;
      margin:0 0 32px;
    }
    .es-service {
      display:flex;align-items:center;gap:10px;
      padding:12px 14px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      border-radius:10px;
      font-family:var(--font);font-size:13px;font-weight:600;
      color:rgba(255,255,255,.85);
      text-align:left;
      transition:all .25s;
    }
    .es-service:hover {
      border-color:rgba(245,168,0,.4);
      background:rgba(245,168,0,.08);
      transform:translateY(-2px);
    }
    .es-service i {color:var(--gold);font-size:14px;width:18px;text-align:center}

    .es-cta-row {
      display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
      margin:0 0 28px;
    }
    .es-btn {
      display:inline-flex;align-items:center;gap:8px;
      padding:13px 24px;border-radius:8px;
      font-family:var(--font);font-size:13.5px;font-weight:700;
      text-decoration:none;
      transition:all .25s ease;
      letter-spacing:.3px;
    }
    .es-btn-primary {
      background:var(--gold);color:var(--navy);
      box-shadow:0 6px 18px rgba(245,168,0,.3);
    }
    .es-btn-primary:hover {
      background:var(--gold-dark);
      transform:translateY(-2px);
      box-shadow:0 10px 24px rgba(245,168,0,.4);
    }
    .es-btn-ghost {
      background:transparent;color:rgba(255,255,255,.75);
      border:1.5px solid rgba(255,255,255,.2);
    }
    .es-btn-ghost:hover {
      border-color:var(--gold);color:var(--gold);
    }

    .es-quote {
      font-family:var(--font);
      font-size:12.5px;font-style:italic;
      color:rgba(255,255,255,.45);
      margin:0;padding-top:24px;
      border-top:1px solid rgba(255,255,255,.08);
      line-height:1.6;
    }

    @keyframes esFadeIn {
      from {opacity:0}
      to {opacity:1}
    }
    @keyframes esModalIn {
      from {opacity:0;transform:translateY(30px) scale(.96)}
      to {opacity:1;transform:translateY(0) scale(1)}
    }

    @media(max-width:600px) {
      .es-modal {padding:14px}
      .es-modal-inner {padding:40px 24px 28px}
      .es-services {grid-template-columns:1fr}
      .es-headline {font-size:1.5rem}
      .es-cta-row {flex-direction:column}
      .es-btn {justify-content:center;width:100%}
    }
    .footer-legal {display:flex;gap:18px}
    .footer-legal a {font-size:12.5px;color:rgba(255,255,255,.35);transition:color var(--t);cursor:pointer}
    .footer-legal a:hover {color:rgba(255,255,255,.7)}

    /* SCROLL-TO-TOP */
    #scrollTop {position:fixed;bottom:26px;right:26px;width:46px;height:46px;background:var(--gold);color:var(--navy);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;z-index:998;opacity:0;transform:translateY(14px);transition:all var(--t);box-shadow:0 4px 16px rgba(245,168,0,.4)}
    #scrollTop.visible {opacity:1;transform:translateY(0)}
    #scrollTop:hover {background:var(--gold-dark);transform:translateY(-3px)}

    /* WHATSAPP FLOATING BUTTON */
    .wa-float {
      position:fixed;bottom:26px;left:26px;z-index:998;
      width:52px;height:52px;border-radius:50%;
      background:#25D366;color:#fff;
      display:flex;align-items:center;justify-content:center;
      font-size:26px;text-decoration:none;
      box-shadow:0 4px 16px rgba(37,211,102,.4);
      transition:opacity .3s ease, transform .3s ease;
      opacity:0;visibility:hidden;
      -webkit-backface-visibility:hidden;
    }
    .wa-float.visible {opacity:1;visibility:visible}
    .wa-float:hover {background:#1EBE57;transform:translateY(-3px);box-shadow:0 8px 24px rgba(37,211,102,.5)}
    .wa-tooltip {
      position:absolute;left:62px;
      background:var(--navy);color:#fff;
      font-family:var(--font);font-size:12.5px;font-weight:600;
      padding:8px 14px;border-radius:8px;white-space:nowrap;
      opacity:0;transform:translateX(-8px);
      transition:all .25s ease;pointer-events:none;
      box-shadow:0 4px 12px rgba(0,0,0,.25);
    }
    .wa-tooltip::before {
      content:'';position:absolute;top:50%;left:-5px;
      transform:translateY(-50%);
      border:5px solid transparent;border-right-color:var(--navy);
      border-left:0;
    }
    .wa-float:hover .wa-tooltip {opacity:1;transform:translateX(0)}

    /* Mobil: kleiner, Tooltip aus */
    @media(max-width:600px) {
      .wa-float {width:44px;height:44px;font-size:22px;bottom:20px;left:20px}
      .wa-tooltip {display:none}
    }

    /* =====================================================
       MODALS
    ===================================================== */
    .modal-overlay {position:fixed;inset:0;background:rgba(10,22,40,.88);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s ease}
    .modal-overlay.open {opacity:1;pointer-events:all}
    .modal-box {background:var(--white);border-radius:var(--r-lg);max-width:700px;width:100%;max-height:82vh;overflow-y:auto;padding:40px;position:relative;transform:translateY(18px);transition:transform .3s ease}
    .modal-overlay.open .modal-box {transform:translateY(0)}
    .modal-close {position:sticky;top:0;float:right;width:34px;height:34px;background:var(--off-white);border:none;border-radius:50%;cursor:pointer;font-size:16px;color:var(--grey-dark);display:flex;align-items:center;justify-content:center;transition:background var(--t);margin-left:16px}
    .modal-close:hover {background:var(--grey-light)}
    .modal-title {font-size:24px;font-weight:800;color:var(--navy);margin-bottom:4px}
    .modal-subtitle {font-size:13px;color:var(--grey-mid);margin-bottom:24px}
    .modal-box h3 {font-size:15px;font-weight:700;color:var(--navy);margin:22px 0 7px}
    .modal-box p,.modal-box li {font-size:14px;color:var(--text-soft);line-height:1.8;margin-bottom:8px}
    .modal-box ul {padding-left:20px;list-style:disc}
    .modal-box a {color:var(--gold)}
    .info-badge {background:rgba(245,168,0,.1);border-left:4px solid var(--gold);border-radius:var(--r-sm);padding:12px 16px;font-size:13px;color:var(--text-soft);margin-bottom:14px}

    /* =====================================================
       RESPONSIVE
    ===================================================== */
    @media(max-width:1024px) {
      .usp-grid {grid-template-columns:1fr 1fr}
      .aktuell-slide {grid-template-columns:1fr 1fr}
    }
    @media(max-width:900px) {
      .section {padding:70px 0}
      .ueber-grid {grid-template-columns:1fr;gap:36px}
      .training-grid {grid-template-columns:1fr;max-width:480px;margin:0 auto}
      .kontakt-grid {grid-template-columns:1fr;gap:30px}
      .touren-coming {flex-direction:column;gap:28px}
      .touren-preview {flex:none;width:100%}
      .footer-grid {grid-template-columns:1fr 1fr;gap:28px}
      .footer-brand {grid-column:1/-1}
      .stimmen-grid {grid-template-columns:1fr}
      .galerie-grid {grid-template-columns:1fr 1fr;grid-template-rows:auto}
      .galerie-item--large {grid-row:auto;height:260px}
      .galerie-item {height:190px}
      .aktuell-slide {grid-template-columns:1fr}
    }
    @media(max-width:600px) {
      .section {padding:54px 0}
      .nav-links {display:none}
      .nav-hamburger {display:flex}
      .hero-stats {display:none}
      .credentials-grid {grid-template-columns:1fr}
      .usp-grid {grid-template-columns:1fr}
      .contact-form {padding:22px 18px}
      .form-row {grid-template-columns:1fr}
      .form-submit {flex-direction:column;align-items:flex-start}
      .footer-grid {grid-template-columns:1fr}
      .footer-bottom {flex-direction:column;text-align:center}
      .footer-legal {justify-content:center}
      .galerie-grid {grid-template-columns:1fr}
      .galerie-item,.galerie-item--large {height:200px}
      .hero-actions .btn-outline {display:none}
      .modal-box {padding:22px 18px}
    }

/* ── Honeypot (unsichtbar für Menschen) ───────────────────── */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Formular-Status (Erfolg / Fehler) ────────────────────── */
.form-status {
  display: none;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}
.form-status.is-success,
.form-status.is-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: statusIn .3s ease;
}
.form-status.is-success {
  background: #e8f7ee;
  color: #1d6b3a;
  border-left: 4px solid #2ecc71;
}
.form-status.is-error {
  background: #fceeee;
  color: #a22a2a;
  border-left: 4px solid #e74c3c;
}
.form-status i { margin-top: 2px; font-size: 16px; flex-shrink: 0; }
@keyframes statusIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#formSubmit:disabled { opacity: .7; cursor: wait; }

/* ── Datenschutz-Checkbox im Formular ─────────────────────── */
.form-privacy { margin-top: 4px; }
.privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.privacy-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}
.privacy-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: inherit;
  font-weight: 700;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.privacy-link:hover { color: var(--gold-dark); }

/* ── Legal Unterseiten (Impressum, Datenschutz, AGB) ──── */
.legal-page {
  padding-top: 120px;
  min-height: 80vh;
}
.legal-container { max-width: 800px; }
.legal-header {
  margin-bottom: 40px;
}
.legal-header .section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}
.legal-content h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 32px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-soft);
  margin-bottom: 12px;
}
.legal-content ul {
  padding-left: 24px;
  margin: 8px 0 16px;
}
.legal-content li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.legal-content a {
  color: var(--gold-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--gold); }
.legal-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--grey-light);
  text-align: center;
}
.legal-nav-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.legal-nav-pages a {
  text-decoration: none;
}
.legal-nav-back {
  margin-top: 4px;
}
.legal-nav-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-mid);
  text-decoration: none;
  transition: color .2s;
}
.legal-nav-back a:hover { color: var(--gold); }
.legal-nav-back a i { font-size: 12px; }