/* ============================================================
   Smart am Rhein – gemeinsames Stylesheet
   Gilt für: automationen, eigentumswohnung, einfamilienhaus,
   gastronomie, gewerbe, handwerk, mieter, neubau, partnerschaft
   Seiteneigenes CSS steht weiterhin inline in der jeweiligen HTML-Datei.
   ============================================================ */

/* --- Basis: Variablen, Reset, Layout, Segment-Komponenten --- */
:root{
  --bg:#07111f;--bg-2:#0b1627;--surface:#0f1728;--card:#111c2f;--card-2:#132338;
  --text:#ebf2fb;--text-soft:#c1cedd;--muted:#94a7bb;
  --line:rgba(148,167,187,.18);--line-strong:rgba(148,167,187,.34);
  --accent:#47d4ff;--accent-2:#30b7ff;--accent-3:#7af0d2;
  --glow:0 0 0 1px rgba(71,212,255,.16),0 20px 60px rgba(12,25,48,.38);
  --shadow-sm:0 16px 36px rgba(2,8,18,.24);--shadow-md:0 28px 80px rgba(2,8,18,.34);
  --radius:30px;--radius-md:22px;--radius-sm:16px;--max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 20% 0%,rgba(48,183,255,.08),transparent 22%),radial-gradient(circle at 100% 20%,rgba(122,240,210,.06),transparent 18%),linear-gradient(180deg,var(--bg) 0%,#091423 18%,#08111f 100%);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.seg-logo-link { display: flex; align-items: center; text-decoration: none; }
.seg-logo-img { height: 28px; width: auto; display: block; filter: brightness(1.1); }
.back-link { color: var(--accent) !important; }
.back-link:hover { color: #fff !important; }
.cta-btn-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 0;
}


img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 28px}
/* Topbar */
.topbar{position:sticky;top:0;z-index:900;background:rgba(8,17,31,.72);backdrop-filter:blur(18px) saturate(130%);border-bottom:1px solid var(--line);}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.back-link{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem;font-weight:600;transition:color .2s}
.back-link:hover{color:var(--accent)}
.back-link svg{width:16px;height:16px}
.brand{font-size:.85rem;font-weight:800;color:var(--accent);letter-spacing:.04em}
/* Hero */
.seg-hero{padding:44px 0 36px;border-bottom:1px solid var(--line)}
.seg-eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);background:rgba(71,212,255,.08);border:1px solid rgba(71,212,255,.2);border-radius:100px;padding:5px 14px;margin-bottom:20px}
.seg-hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:900;line-height:1.15;margin:0 0 20px;letter-spacing:-.02em}
.seg-hero h1 span{color:var(--accent)}
.seg-hero .lead{font-size:clamp(1rem,2vw,1.15rem);color:var(--text-soft);margin:0 0 36px;line-height:1.7}
.hero-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--accent);color:#07111f;font-weight:800;font-size:.9rem;border-radius:100px;border:none;cursor:pointer;transition:background .2s,transform .15s}
.hero-cta:hover{background:var(--accent-2);transform:none}
/* Image placeholder */
/* Sections */
section{padding:44px 0}
section.alt{background:rgba(15,23,48,.35)}
section#benefits{padding-bottom:40px}
.section-eyebrow{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:900;line-height:1.2;letter-spacing:-.02em;margin:0 0 16px}
.section-lead{font-size:1rem;color:var(--text-soft);margin:0 0 44px;line-height:1.7}
/* Why grid */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.why-grid{grid-template-columns:1fr}}
.why-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:28px 24px;transition:border-color .2s}
.why-card:hover{border-color:rgba(71,212,255,.4);box-shadow:0 8px 24px rgba(2,8,18,.28);transform:none}
.tech-card{transition:border-color .2s,box-shadow .2s,transform .18s}
.tech-card:hover{border-color:rgba(71,212,255,.4);box-shadow:0 8px 24px rgba(2,8,18,.28);transform:none}
.benefit-item{transition:border-color .2s,box-shadow .2s}
.benefit-item:hover{border-color:rgba(71,212,255,.35);box-shadow:0 4px 16px rgba(2,8,18,.2)}
.why-card{transition:border-color .2s,box-shadow .2s,transform .18s}
.why-num{display:flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;border-radius:50%;background:rgba(71,212,255,.12);border:1.5px solid rgba(71,212,255,.25);color:var(--accent);font-size:.9rem;font-weight:900;flex-shrink:0}
.why-card{display:flex;flex-direction:column;gap:0}
.why-card-inner{display:flex;align-items:flex-start;gap:16px;margin-bottom:10px}
.why-card h3{font-size:1rem;font-weight:700;margin:0 0 6px}
.why-card p{font-size:.875rem;color:var(--text-soft);margin:0;line-height:1.6;padding-left:54px}
/* Tech grid */
.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:1000px){.tech-grid{grid-template-columns:1fr 1fr}/* 2col already */}
@media(max-width:600px){.tech-grid{grid-template-columns:1fr}}
.tech-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px 20px}
.tech-icon{width:40px;height:40px;background:rgba(71,212,255,.08);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:14px}
.tech-icon svg{width:20px;height:20px}
.tech-card h3{font-size:.95rem;font-weight:700;margin:0 0 10px}
.seg-list{margin:0;padding:0 0 0 16px;list-style:none}
.seg-list li{font-size:.82rem;color:var(--text-soft);line-height:1.55;padding:3px 0;position:relative}
.seg-list li::before{content:"–";position:absolute;left:-14px;color:var(--accent);opacity:.7}
/* Benefits */
.benefits-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.benefits-list{grid-template-columns:1fr}}
.benefit-item{display:flex;align-items:center;gap:12px;padding:18px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm)}
.benefit-check{width:22px;height:22px;border-radius:50%;background:rgba(71,212,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:var(--accent)}
.benefit-check svg{width:12px;height:12px}
.benefit-item p{margin:0;font-size:.875rem;color:var(--text-soft);line-height:1.55}
/* CTA */
.cta-section{text-align:left;padding:52px 0}
.cta-section h2{margin-bottom:16px}
.cta-section p{color:var(--text-soft);max-width:none;margin:0 0 36px;line-height:1.7}
.cta-back{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:transparent;color:var(--accent);font-weight:700;font-size:.875rem;border-radius:100px;border:1px solid rgba(71,212,255,.35);cursor:pointer;transition:all .2s}
.cta-back:hover{background:rgba(71,212,255,.08)}
/* Tone switcher (same as main page) */
.tone-switcher{position:fixed;bottom:20px;right:16px;z-index:800;display:flex;align-items:center;gap:6px;background:rgba(15,26,48,.92);border:1px solid var(--line);border-radius:100px;padding:6px 10px;backdrop-filter:blur(12px)}
.sw-label{font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-right:2px}
.sw-btn{padding:4px 12px;border-radius:100px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:.72rem;font-weight:700;cursor:pointer;transition:all .18s;letter-spacing:.04em}
.sw-btn:hover{color:var(--text)}
.sw-active{background:rgba(71,212,255,.14)!important;border-color:rgba(71,212,255,.3)!important;color:var(--accent)!important}
/* Name input modal */
.name-modal{display:none;position:fixed;inset:0;z-index:9000;background:rgba(2,6,23,.6);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:24px}
.name-modal.open{display:flex}
.name-modal-box{background:#fff;border-radius:24px;padding:32px;max-width:380px;width:100%;box-shadow:0 32px 80px rgba(0,0,0,.25)}
.name-modal-box h3{margin:0 0 16px;font-size:1.1rem;color:#0f172a}
.name-modal-box input{width:100%;padding:12px 16px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:.95rem;color:#0f172a;outline:none;transition:border-color .2s}
.name-modal-box input:focus{border-color:#47d4ff}
.name-modal-box .nm-actions{display:flex;gap:10px;margin-top:16px}
.nm-save{flex:1;padding:12px;background:#47d4ff;color:#07111f;font-weight:800;border:none;border-radius:12px;cursor:pointer;font-size:.9rem}
.nm-cancel{padding:12px 18px;background:#f1f5f9;color:#475569;font-weight:600;border:none;border-radius:12px;cursor:pointer;font-size:.9rem}
/* Tone visibility */
.tone-sie{display:block}
.tone-du{display:none}
@media(max-width:760px){
  .topbar{position:sticky}
  .sw-label{display:none}
}
footer{border-top:1px solid var(--line);padding:32px 0;margin-top:0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)}
.footer-links a{color:var(--muted);transition:color .2s;margin-left:16px}
.footer-links a:hover{color:var(--accent)}

/* ── Image Zoom Lightbox ── */
#img-zoom-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
#img-zoom-overlay.open{display:flex}
#img-zoom-overlay img{max-width:100%;max-height:90vh;border-radius:12px;object-fit:contain;touch-action:pan-x pan-y pinch-zoom}
#img-zoom-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
section img{cursor:zoom-in}



/* ── Einheitliches Kachel-Layout: Icon/Nummer neben Titel, Text linksbündig ── */

/* Why-cards: Nummer + Titel nebeneinander, Text ohne Einzug */
.why-card-inner{display:flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;margin-bottom:10px!important}
.why-card-inner .why-num{flex-shrink:0!important;margin:0!important}
.why-card-inner h3{margin:0!important;flex:1!important}
.why-card>p,.why-card>p.tone-sie,.why-card>p.tone-du{padding-left:0!important;margin-left:0!important}

/* Tech-cards: Icon + Titel nebeneinander, Listen linksbündig */
.tech-card-head,.partner-card-head{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;margin-bottom:12px!important}
.tech-card-head .tech-icon,.partner-card-head .partner-icon{flex-shrink:0!important;margin:0!important}
.tech-card-head h3,.partner-card-head h3{margin:0!important;flex:1!important}

/* Benefit-items: Häkchen inline mit Text (nebeneinander, nicht übereinander) */
.benefit-item{display:flex;flex-direction:row!important;align-items:center!important;gap:12px!important}
.benefit-check{flex-shrink:0!important;margin-top:0!important;align-self:center!important}
.benefit-item p{margin:0!important;line-height:1.6!important}

/* Step-cards / Why-items auf Index: gleiche Behandlung */
.step-card .step-badge,.why-item .why-num{flex-shrink:0!important}

.section-eyebrow{display:inline-flex!important;align-items:center!important;gap:10px!important}
.section-eyebrow::before{content:""!important;width:28px!important;height:1px!important;background:linear-gradient(90deg,#47d4ff,transparent)!important;display:block!important}

/* --- Navigation: Dropdown --- */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{cursor:pointer}
.nav-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  background:rgba(11,22,39,.97);
  border:1px solid rgba(148,167,187,.2);
  border-radius:14px;
  padding:10px 0;
  min-width:220px;
  box-shadow:0 20px 60px rgba(2,8,18,.4);
  backdrop-filter:blur(18px);
  z-index:1000;
}
/* Bridge the 10px gap so hover doesn't drop */
.nav-dropdown-menu::before{
  content:'';
  position:absolute;
  top:-10px;
  left:0;
  right:0;
  height:10px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{display:block}
.nav-dd-group{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:8px 16px 4px;opacity:.7}
.nav-dd-item{display:block;padding:7px 16px;font-size:.82rem;color:var(--text-soft);text-decoration:none;transition:color .15s,background .15s;white-space:nowrap}
.nav-dd-item:hover{color:var(--accent);background:rgba(71,212,255,.06)}
.nav-dd-divider{height:1px;background:var(--line);margin:6px 10px}
.dd-arrow{display:inline}
@media(max-width:760px){.nav-dropdown-menu{display:none!important}.dd-arrow{display:none}}

/* --- Topbar, Footer, Modals --- */
/* top */
.topbar{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(8,17,31,.72);
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid rgba(148,167,187,.12);
  box-shadow:0 8px 40px rgba(2,8,18,.25);
}
.brand-link{opacity:0;transform:none;transition:opacity .4s ease,transform .4s ease;pointer-events:none;visibility:hidden}
.topbar.scrolled .brand-link{opacity:1 !important;transform:translateY(0) !important;pointer-events:auto !important;visibility:visible !important}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
}
.brand-link{display:inline-flex;align-items:center;max-width:300px}
.brand-link img{width:100%;height:auto;filter:brightness(1.06)}
.brand-fallback{font-weight:900;letter-spacing:.08em;font-size:1rem;color:#fff}

.topnav{
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px;
  border:1px solid rgba(148,167,187,.16);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.topnav a{
  position:relative;
  font-size:.92rem;
  font-weight:800;
  color:#dce7f3;
  padding:7px 14px;
  border-radius:999px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.topnav a:hover{
  background:rgba(71,212,255,.14);
  color:#fff;
  transform:none;
}

/* Zitat-/Quote-Box (einheitlich für alle Seiten mit .about-quote) */
.about-quote{
  margin-top:20px;
  padding:22px 24px;
  border:1px solid rgba(71,212,255,.14);
  border-left:3px solid rgba(71,212,255,.35);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(71,212,255,.06), rgba(255,255,255,.02));
  color:#b2c4d8;
  font-style:italic;
  line-height:1.95;
  box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s, background .3s;
  cursor:default;
}
.about-quote:hover{
  transform:translateY(-3px);
  border-color:rgba(71,212,255,.45);
  background:linear-gradient(180deg,rgba(71,212,255,.1),rgba(71,212,255,.04));
  box-shadow:0 8px 22px rgba(2,8,18,.24);
}

.menu-toggle{
  display:none;
  appearance:none;
  border:1px solid rgba(148,167,187,.22);
  background:rgba(255,255,255,.04);
  color:#fff;
  width:48px;
  height:48px;
  border-radius:18px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.menu-toggle svg{
  width:22px;height:22px;
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round
}

footer{
  border-top:1px solid rgba(148,167,187,.12);
  color:#7f94aa;
  padding:18px 0 28px;
  background:linear-gradient(180deg, rgba(255,255,255,.01), transparent);
}

/* override inline modals / switcher */
/* Hinweis: #contact-modal (nur index.html) hat eine eigene, helle Kartenoptik
   (weisser Body, dunkler Header) und wird hier bewusst NICHT überschrieben –
   sonst wird der Formular-/Bestätigungstext auf dunklem Grund unlesbar. */
#tone-popup > div,
#impressum-modal > div,
#datenschutz-modal > div{
  background:linear-gradient(180deg,#122037,#0f1a2d) !important;
  border:1px solid rgba(148,167,187,.16) !important;
  box-shadow:var(--shadow-lg) !important;
  color:var(--text) !important;
}
#tone-popup h3,
#impressum-modal h2,
#datenschutz-modal h2,
#cm-step-title{
  color:#fff !important;
}
#tone-popup p,
#impressum-modal p,
#datenschutz-modal p,
/* form body inherits colors from inline styles */
#tone-popup button,
#contact-modal button,
#impressum-modal button,
#datenschutz-modal button{
  border-radius:14px !important;
}
/* inputs use their own inline styles */
#tone-switcher{
  background:rgba(11,22,39,.84) !important;
  border:1px solid rgba(148,167,187,.16) !important;
  box-shadow:var(--shadow-md) !important;
  backdrop-filter:blur(12px) !important;
}
#tone-switcher span{color:#9ab0c5 !important}
#sw-sie,#sw-du,#sw-name{
  color:#dbe7f4 !important;
}
.sw-active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
  color:#07111f !important;
  border-color:transparent !important;
}

/* responsive */
@media (max-width:1200px){
  .packages{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .logo-stage-inner{grid-template-columns:1fr;gap:24px}
  .logo-tagline{justify-self:start;max-width:unset}
  
  .steps-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .container{padding-left:24px;padding-right:24px}
  .lead,.hero-copy,.about-copy{max-width:none}
  .topbar-inner{align-items:center;gap:14px;padding:10px 0;position:relative}
  .brand-link{max-width:200px}
  .menu-toggle{display:inline-flex;margin-left:auto}
  .topnav{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:auto;
    min-width:220px;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    padding:18px 20px;
    background:rgba(11,22,39,.95);
    border:1px solid rgba(148,167,187,.18);
    border-radius:22px;
    box-shadow:var(--shadow-md);
    z-index:200;
  }
  .topnav.is-open{display:flex}
  .topnav a{text-align:right;margin-right:2px}
  .logo-stage{padding-top:28px;padding-bottom:8px}
  .logo-stage img{width:min(340px,100%)}
  .logo-tagline{padding:20px 22px}
  section:not(.hero) .section-inner{padding-top:74px;padding-bottom:74px}
  .packages,.steps-grid,.twocol,.contact-grid,.why-list{grid-template-columns:1fr}
  .why-item:nth-child(5){max-width:100%;margin:0}
  .hero-inner{padding-top:54px;padding-bottom:78px;text-align:left}
  .hero-copy{font-size:1.02rem;line-height:1.86}
  .tone-name-wrap input{width:100px}
  .card,.step-card{padding:14px 18px}
  .why-item{gap:12px;align-items:center}
  .why-num{width:30px;height:30px;min-width:30px}
  h1{font-size:clamp(1.65rem,7.5vw,2.2rem)}
  h2{font-size:clamp(2rem,8vw,2.9rem)}
  #tone-switcher{
    bottom:14px !important;
    right:14px !important;
    left:14px !important;
    justify-content:center !important;
  }
}


/* === Smart am Rhein V2: stronger dark redesign overrides === */

/* Logo: remove cheap white-box feeling by blending/inverting on dark */
.logo-stage img,
.brand-link img{
  filter: invert(1) brightness(1.25) contrast(1.08) drop-shadow(0 18px 42px rgba(71,212,255,.12)) !important;
  mix-blend-mode: screen;
}
.logo-stage{
  padding-top:72px !important;
  padding-bottom:40px !important;
}
.logo-stage-inner{
  position:relative;
}
.logo-stage-inner::before{
  content:"";
  position:absolute;
  inset:-26px auto -26px -32px;
  width:min(620px, 58vw);
  border-radius:44px;
  background:
    radial-gradient(circle at 20% 20%, rgba(71,212,255,.18), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid rgba(148,167,187,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 28px 90px rgba(2,8,18,.28);
  pointer-events:none;
  z-index:0;
}
.logo-stage img,
.logo-tagline{
  position:relative;
  z-index:1;
}

/* More dramatic card interaction */
.card,
.step-card{
  transform-style:preserve-3d;
  isolation:isolate;
}
.card::after,
.step-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 34%,
      rgba(71,212,255,.28) 42%,
      rgba(122,240,210,.22) 50%,
      rgba(71,212,255,.14) 56%, transparent 66%,
      transparent 100%);
  transform:translateX(-120%);
  transition:transform .75s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  z-index:0;
}
/* shine hover disabled */
.card > *,
.step-card > *{
  position:relative;
  z-index:1;
}
.card:hover,
.step-card:hover{
  transform:none;
  box-shadow:
    0 0 0 1px rgba(71,212,255,.22),
    0 26px 70px rgba(2,8,18,.46),
    0 0 54px rgba(71,212,255,.10);
  border-color:rgba(71,212,255,.36);
}
.card:hover .icon,
.step-card:hover .step-badge,
.why-item:hover .why-num{
  
  box-shadow:
    0 0 0 7px rgba(71,212,255,.08),
    0 0 34px rgba(71,212,255,.26);
}
.icon,
.step-badge,
.why-num{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover h3,
.step-card:hover h3,
.why-item:hover h3{
  color:#ffffff;
  text-shadow:0 0 20px rgba(71,212,255,.18);
}

/* Why cards should also feel alive */
.step-card.why-item:hover{
  transform:none;
}

/* Better buttons, more premium */
.btn-primary{
  position:relative;
  overflow:hidden;
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 0%, transparent 34%, rgba(255,255,255,.35) 50%, transparent 66%, transparent 100%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover::after{
  transform:translateX(120%);
}

/* Footer layout: Desktop/Tablet-quer = eine Zeile, Mobile = 3 Zeilen (siehe
   Media-Query weiter unten). Der Abstand zum schwebenden Stil-Umschalter
   ergibt sich daraus, dass der Inhalt links anfängt und nicht die volle
   Breite ausfüllt (justify-content:flex-start statt space-between).
   Trennung zwischen den Textblöcken erfolgt über grosszügigen Abstand
   (kein Bindestrich-Trenner mehr). */
footer .container,
footer .footer-inner{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px 36px !important;
}
footer a,
footer button{
  margin-right:0;
}
footer{
  padding-bottom:34px !important;
}
.footer-br{display:none}
.footer-tagline{margin-left:8px}

footer .footer-links{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:28px !important;
  margin-top:0 !important;
}
footer .footer-links a{margin-left:0 !important}

/* --- Brand-Fix ---
   Hinweis: Logo-Sichtbarkeit NICHT mehr hart erzwingen – auf index.html steuert ein
   IntersectionObserver die .scrolled-Klasse (Logo blendet erst nach dem Hero-Logo ein),
   auf den Unterseiten setzt eigenes JS die .scrolled-Klasse sofort beim Laden.
   Beide Fälle funktionieren bereits über die Basisregeln weiter oben (Zeile ~207/208). */
.brand-link img{
  filter:brightness(0) invert(1)!important;
}

/* --- Header-Override (Mobile-Menu etc.) --- */
/* === HEADER OVERRIDE: exact values from index.html === */
.topbar{
  position:sticky !important;
  top:0 !important;
  z-index:80 !important;
  background:rgba(8,17,31,.72) !important;
  backdrop-filter:blur(18px) saturate(130%) !important;
  border-bottom:1px solid rgba(148,167,187,.12) !important;
  box-shadow:0 8px 40px rgba(2,8,18,.25) !important;
}
.topbar-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  padding:14px 0 !important;
}
.container{
  max-width:1240px !important;
  margin:0 auto !important;
  padding:0 28px !important;
}
.menu-toggle{
  display:none;
  appearance:none !important;
  border:1px solid rgba(148,167,187,.22) !important;
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
  width:48px !important;
  height:48px !important;
  border-radius:18px !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:0 16px 36px rgba(2,8,18,.24) !important;
}
@media(max-width:760px){
  .container{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  .topbar-inner{
    align-items:center !important;
    gap:14px !important;
    padding:10px 0 !important;
    position:relative !important;
  }
  .menu-toggle{
    display:inline-flex !important;
    margin-left:auto !important;
  }
  .topnav{
    display:none !important;
    position:absolute !important;
    top:calc(100% + 10px) !important;
    right:0 !important;
    width:auto !important;
    min-width:220px !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:10px !important;
    padding:18px 20px !important;
    background:rgba(11,22,39,.95) !important;
    border:1px solid rgba(148,167,187,.18) !important;
    border-radius:22px !important;
    box-shadow:0 28px 80px rgba(2,8,18,.34) !important;
    z-index:200 !important;
  }
  .topnav.is-open{display:flex !important}

  /* Mehr Abstand für Logo/Burger-Menü vom Bildschirmrand */
  .topbar .container{
    padding-left:32px !important;
    padding-right:32px !important;
  }

  /* Footer auf Mobile/Tablet-hoch: 3 Zeilen statt einer Zeile, damit der
     schwebende Stil-Umschalter den Text nicht überdeckt. Copyright,
     Impressum und Datenschutz bleiben dabei bündig linksbündig. */
  .footer-br{display:inline}
  footer .container,
  footer .footer-inner{
    flex-direction:column !important;
    align-items:flex-start !important;
    padding-right:24px !important;
  }
  footer .footer-links{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    margin-left:0 !important;
    padding-left:0 !important;
  }
  .footer-tagline{margin-left:0}
}

/* --- Einheitliches Hover-/Active-System für alle Kachel-Typen
       (why-card, tech-card, partner-card, benefit-item, segment-card,
       card, step-card, why-item) inkl. permanentem Akzentrand,
       identisch zur Startseite --- */
/* ══ CARD BASELINE: normalize all card backgrounds ══════════════════════════ */
.card,.step-card,.why-card,.tech-card,.partner-card,
.benefit-item,.contact-card,.why-item{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),var(--card,#111c2f)!important;
  border-left:3px solid rgba(71,212,255,.35)!important;
  border-top:1px solid rgba(148,167,187,.14)!important;
  border-right:1px solid rgba(148,167,187,.14)!important;
  border-bottom:1px solid rgba(148,167,187,.14)!important;
}
a.segment-card,.segment-card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),#111c2f!important;
  border-left:3px solid rgba(71,212,255,.35)!important;
  border-top:1px solid rgba(148,167,187,.14)!important;
  border-right:1px solid rgba(148,167,187,.14)!important;
  border-bottom:1px solid rgba(148,167,187,.14)!important;
}

/* ══ NO MOVEMENT on any card ════════════════════════════════════════════════ */
.card,.step-card,.why-card,.tech-card,.partner-card,
.benefit-item,.contact-card,.why-item,a.segment-card,.segment-card{
  transition:box-shadow .2s,filter .2s!important;
  transform:none!important;
}
.card:hover,.step-card:hover,.why-card:hover,.tech-card:hover,.partner-card:hover,
.benefit-item:hover,.contact-card:hover,.why-item:hover,
a.segment-card:hover,.segment-card:hover{
  transform:none!important;
}

/* ══ HOVER: box-shadow glow + brightness ════════════════════════════════════ */
@media(hover:hover){
  .card:hover:not(#phone-card.phone-unavailable),.step-card:hover,.why-card:hover,.tech-card:hover,.partner-card:hover,
  .benefit-item:hover,.contact-card:hover:not(#phone-card.phone-unavailable),.why-item:hover,
  a.segment-card:hover,.segment-card:hover{
    box-shadow:0 0 0 1.5px rgba(71,212,255,.4),0 8px 28px rgba(2,8,18,.28)!important;
    filter:brightness(1.09)!important;
    border-left-color:rgba(71,212,255,.8)!important;
    transform:none!important;
    border-left-width:3px!important;
  }
  /* ── ICON GLOW: outline works even with overflow:hidden ── */
  .card:hover .icon,
  .step-card:hover .card-icon,
  .why-card:hover .why-num,
  .tech-card:hover .tech-icon,
  .partner-card:hover .partner-icon,
  .benefit-item:hover .benefit-check,
  .contact-card:hover .icon,
  a.segment-card:hover .seg-icon,
  .segment-card:hover .seg-icon{
    background:rgba(71,212,255,.22)!important;
    outline:3px solid rgba(71,212,255,.35)!important;
    outline-offset:3px!important;
  }
}

/* ══ MOBILE/TABLET: active feedback ════════════════════════════════════════ */
@media(hover:none){
  .card:active,.step-card:active,.why-card:active,.tech-card:active,.partner-card:active,
  .benefit-item:active,.contact-card:active,.why-item:active,
  a.segment-card:active,.segment-card:active{
    box-shadow:0 0 0 1.5px rgba(71,212,255,.4)!important;
    filter:brightness(1.09)!important;
    transform:scale(.985)!important;
  }
}

/* --- Sonstiges --- */
.sw-active{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important}