/* ===========================================================
   SMOTO – Shared Stylesheet
   Variante A (Faithful) · Relaunch-Demo
   Farben & Typo aus Wireframe + Impressum/Datenschutz übernommen
   =========================================================== */

:root{
  --ink:#1A1A1A;            /* Smoto Black (Text) */
  --black:#000000;
  --muted:#43464C;
  --paper:#EEF0F2;          /* Brand Neutral Background */
  --card:#ffffff;
  --line:#D5D8DC;
  --line-strong:#6B6F76;
  --ph:#E2E5E8;
  --ph2:#D5D8DC;
  --dark:#1A1A1A;          /* dunkle Bühne */
  --accent:#FF2130;        /* Signal Red – Primär-Akzent */
  --maroon:#A6242A;        /* Deep Maroon */
  --pink:#FBD5D8;          /* Soft Pink */
  --accent-text:#D5101E;   /* dunkleres Rot für kleine Textlinks (WCAG AA: 5.4:1 auf weiß, 4.7:1 auf grau) */
  --sans:"Verdana", Geneva, Tahoma, sans-serif;
  --display:"Verdana", Geneva, Tahoma, sans-serif;
  --maxw:1180px;

  /* --- Typo-Skala (eine Quelle der Wahrheit; gleiche Rolle = gleiche Größe auf jeder Seite) --- */
  --fs-display-xl:clamp(34px,5.5vw,52px); /* Seiten-H1 */
  --fs-display-lg:clamp(28px,4vw,38px);   /* Abschnitts-H2 */
  --fs-display-md:clamp(22px,3vw,28px);   /* Unter-H2 / Artikel-H2 */
  --fs-lead:18px;      /* Intro-Absatz */
  --fs-title:17px;     /* Karten-/Komponenten-Titel (H3), FAQ-Frage */
  --fs-body:16px;      /* laufender Fließtext (Default) */
  --fs-read:15px;      /* dichterer Lesetext: Specs, Kontakt-Info, Formularfelder */
  --fs-sm:14px;        /* Karten-Beschreibung, Footer-Links, Nav, Trust */
  --fs-meta:13px;      /* Labels, Meta, Mehr-Links, Footer-Leiste */
  --fs-overline:12px;  /* Eyebrow, Uppercase-Labels */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;}
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:var(--accent);}

/* Nur für Screenreader (visuell ausgeblendet) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* Skip-to-content (nur bei Tastatur-Fokus sichtbar) */
.skip-link{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
  font:700 var(--fs-sm) var(--sans); text-decoration:none;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* Bewegung reduzieren respektieren */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .hero video{display:none;}
  .hero{background-image:url('smoto-hero-electric-drive.webp'); background-size:cover; background-position:center 40%;}
}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(238,240,242,.9); backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--line);
}
.hwrap{
  max-width:var(--maxw); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; gap:24px;
}
.hwrap .logo{display:inline-flex; align-items:center; gap:8px; line-height:0; text-decoration:none;}
.logolock{display:inline-flex; align-items:center; background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:5px 9px;}
.hwrap .logo img{height:74px; display:block;}
.nav{display:flex; gap:22px; margin-left:8px; flex:1;}
.nav a{font:600 var(--fs-sm) var(--sans); color:var(--ink); text-decoration:none; opacity:.85; transition:.15s;}
.nav a:hover, .nav a.active{opacity:1; color:var(--accent);}
.cta{
  font:700 var(--fs-meta) var(--sans); color:#fff; background:var(--accent); text-decoration:none;
  padding:10px 18px; border-radius:999px; transition:.15s; white-space:nowrap;
}
.cta:hover{filter:brightness(.94);}
.navtoggle{display:none; background:none; border:0; cursor:pointer; padding:6px; margin-left:auto;}
.navtoggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.2s;}

/* language toggle */
.langtoggle{
  display:inline-flex; align-items:center; gap:2px; cursor:pointer;
  border:1.5px solid var(--line-strong); background:#fff; border-radius:999px;
  padding:5px 6px; font:700 var(--fs-overline) var(--sans); user-select:none; transition:.15s;
}
.langtoggle:hover{border-color:var(--ink);}
.langtoggle .lt-de, .langtoggle .lt-en{
  padding:4px 9px; border-radius:999px; color:var(--muted); transition:.15s; line-height:1;
}
.langtoggle .on{background:var(--ink); color:#fff;}

@media(max-width:820px){
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--paper);
    border-bottom:1.5px solid var(--line); padding:8px 28px 18px;
  }
  .nav.open{display:flex;}
  .nav a{padding:12px 0; border-top:1px solid var(--line); opacity:1;}
  .navtoggle{display:block;}
  .hwrap{flex-wrap:wrap; position:relative;}
  .cta{order:2;}
}

/* ---------------- Layout helpers ---------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.sec{padding:72px 0;}
.sec.tight{padding:48px 0;}
.sec.dark{background:var(--dark); color:#e9e8e4;}
.eyebrow{font:700 var(--fs-overline) var(--sans); letter-spacing:.18em; color:var(--accent); text-transform:uppercase; margin:0 0 12px;}
.htxt{font:700 var(--display); letter-spacing:-.015em; line-height:1.06; margin:0;}
.h-xl{font-size:var(--fs-display-xl);}
.h-lg{font-size:var(--fs-display-lg);}
.h-md{font-size:var(--fs-display-md);}
.lead{font:500 var(--fs-lead)/1.6 var(--sans); color:var(--muted); max-width:620px; margin:14px 0 0;}
.dark .lead{color:#d2d1cc;}
.guide-meta{margin:6px 0 16px; font-size:13px; opacity:.6;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font:700 var(--fs-sm) var(--sans);
  padding:12px 22px; border-radius:999px; border:1.5px solid var(--ink); background:#fff; color:var(--ink);
  text-decoration:none; cursor:pointer; transition:.15s;
}
.btn:hover{transform:translateY(-1px);}
.btn.accent{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn.accent:hover{filter:brightness(.94);}
.btn.ghost{background:transparent; border-color:currentColor;}
.dark .btn{background:transparent; color:#e9e8e4; border-color:#e9e8e4;}
.dark .btn.accent{background:var(--accent); border-color:var(--accent); color:#fff;}

.pill{
  display:inline-block; font:700 10.5px var(--sans); letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; color:#fff;
}
/* Dezente, nicht-klickbare Anwendungs-Tags (z. B. in den technischen Daten) */
.tag{
  display:inline-block; font:600 var(--fs-overline) var(--sans); color:var(--ink);
  background:#F2F3F5; border:1px solid var(--line);
  padding:5px 11px; border-radius:999px; margin:0 6px 6px 0;
}

/* ---------------- Hero ---------------- */
.hero{position:relative; min-height:540px; display:flex; align-items:flex-end; overflow:hidden; background:#15171a;}
.hero video, .hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,18,21,.35) 0%, rgba(16,18,21,.62) 50%, rgba(16,18,21,.92) 100%);}
.hero .inner{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:56px 28px; color:#fff;}
.hero h1{max-width:760px; color:#fff;}
.hero .lead{color:#e4e3df; max-width:560px;}
.hero .actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}
.hero .eyebrow{color:#fff;}

/* ---------------- Cards / Grid ---------------- */
.grid{display:grid; gap:18px;}
.cols-4{grid-template-columns:repeat(4,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-2{grid-template-columns:repeat(2,1fr);}

.card{
  border:1.5px solid var(--line); border-radius:14px; background:#fff; overflow:hidden;
  display:flex; flex-direction:column; transition:.18s; text-decoration:none; color:inherit;
}
a.card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(28,28,30,.12); border-color:var(--line-strong);}
.card.d{background:#1A1A1A; border-color:rgba(213,216,220,.18); color:#e9e8e4;}

.svc-card{position:relative;}
.svc-card .thumb{position:relative; height:220px; background:#1a1b1e; overflow:hidden;}
.svc-card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.svc-card .body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.svc-card .pilltop{position:absolute; top:12px; right:12px; z-index:2;}
.svc-card h3{font:700 var(--fs-title) var(--sans); margin:0; color:var(--ink);}
/* Dunkle Cards (.card.d ist dasselbe Element wie .svc-card): heller Text */
.svc-card.d h3, .card.d.svc-card h3{color:#fff;}
/* Default: dunkler, gut lesbarer Text auf hellen Cards */
.svc-card p{font:500 var(--fs-sm)/1.55 var(--sans); color:var(--ink); margin:0;}
.svc-card.d p, .card.d.svc-card p{color:#d4d6da;}
.svc-card .more{margin-top:auto; padding-top:8px; font:700 var(--fs-meta) var(--sans); color:var(--accent-text); display:inline-flex; align-items:center; gap:6px;}
/* Auf dunklen Cards helleres Rot für ausreichenden Kontrast */
.svc-card.d .more, .card.d.svc-card .more{color:#FF6B72;}

/* application cards (image with overlay) */
.app-card{position:relative; min-height:230px; border-radius:14px; overflow:hidden; display:flex; align-items:flex-end; color:#fff; text-decoration:none; border:1.5px solid rgba(255,255,255,.1);}
.app-card .bg{position:absolute; inset:0; background:#1a1b1e center/cover no-repeat; z-index:0; transition:.3s;}
.app-card:hover .bg{transform:scale(1.04);}
.app-card::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(16,18,21,0) 30%, rgba(16,18,21,.85) 100%);}
.app-card .content{position:relative; z-index:2; padding:18px 20px;}
.app-card .pill{margin-bottom:10px;}
.app-card h3{font:700 var(--fs-title) var(--sans); margin:0 0 4px; color:#fff;}
.app-card p{font:500 var(--fs-sm)/1.5 var(--sans); color:#e4e3df; margin:0;}

/* ---------------- About split ---------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
.split .media{position:relative; border-radius:14px; overflow:hidden; min-height:340px; background:#1a1b1e; border:1.5px solid var(--line);}
.split .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
/* Pill oben rechts auf dem Anwendungsbild (analog Leistungs-Cards) */
.media .pilltop{position:absolute; top:14px; right:14px; z-index:2;}
.trustgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;}
.trust{display:flex; align-items:center; gap:10px; font:600 var(--fs-sm) var(--sans); color:var(--ink);}
.trust .bx{width:28px; height:28px; border:1.5px solid var(--accent); border-radius:8px; display:grid; place-items:center; color:var(--accent); flex:none;}
.iso{margin-top:24px; border:1.5px solid var(--line-strong); border-radius:12px; padding:16px 18px; background:#faf9f6; transition:.15s;}
.iso:hover{border-color:var(--ink); background:#fff;}
.iso-link{display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit; cursor:pointer;}
.iso .seal{width:48px; height:48px; border-radius:6px; object-fit:contain; flex:none; background:#fff; position:relative; z-index:1; transition:transform .2s ease, box-shadow .2s ease;}
.iso:hover .seal{transform:scale(2); box-shadow:0 10px 28px rgba(0,0,0,.28); z-index:5;}
.iso .seal.wide{width:auto; height:44px; border-radius:4px; transform-origin:left center;}
.iso:hover .seal.wide{transform:scale(2.4); box-shadow:0 10px 28px rgba(0,0,0,.28);}
.iso-src{display:inline-block; margin-top:10px; font:600 var(--fs-meta) var(--sans); color:var(--muted); text-decoration:none;}

/* Rahmenlose Variante: nur das Prüfzeichen, Klick öffnet das Zertifikat-Modal */
.iso-plain{display:inline-block; margin-top:24px; line-height:0; cursor:pointer;}
.iso-plain .seal{width:32px; height:32px; border-radius:6px; object-fit:contain; flex:none; background:#fff; position:relative; z-index:1; transition:transform .2s ease, box-shadow .2s ease;}
.iso-plain:hover .seal{transform:scale(3); box-shadow:0 10px 28px rgba(0,0,0,.28); z-index:5;}
.iso-plain .seal.wide{width:auto; height:44px; border-radius:4px;}
.iso-plain:hover .seal.wide{transform:scale(2.4); box-shadow:0 10px 28px rgba(0,0,0,.28);}

/* ---------------- Certificate modal (PDF im Fenster) ---------------- */
.cert-modal{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px;}
.cert-modal[hidden]{display:none;}
.cert-modal__backdrop{position:absolute; inset:0; background:rgba(26,26,26,.6); backdrop-filter:blur(2px);}
.cert-modal__dialog{position:relative; width:min(900px,100%); height:min(90vh,1100px); background:#fff; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden;}
.cert-modal__bar{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1.5px solid var(--line); background:var(--paper);}
.cert-modal__title{font:700 var(--fs-sm) var(--sans); color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cert-modal__open{font:700 var(--fs-meta) var(--sans); color:var(--accent-text); text-decoration:none; white-space:nowrap;}
.cert-modal__open:hover{text-decoration:underline;}
.cert-modal__close{width:34px; height:34px; flex:none; border:1.5px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; font:700 var(--fs-read) var(--sans); color:var(--ink); line-height:1; transition:.15s;}
.cert-modal__close:hover{border-color:var(--ink);}
.cert-modal__body{flex:1; min-height:0; background:#525659;}
.cert-modal__frame{width:100%; height:100%; border:0; display:block;}
@media(max-width:560px){ .cert-modal{padding:0;} .cert-modal__dialog{width:100%; height:100%; border-radius:0;} }

/* ---------------- Stat band ---------------- */
.statband{display:flex; justify-content:space-around; align-items:flex-start; gap:24px; flex-wrap:nowrap;}
.stat{text-align:center; flex:1 1 0; min-width:0;}
@media (max-width:560px){.statband{flex-wrap:wrap;} .stat{flex:1 1 100%;}}
.stat .num{font:800 clamp(26px,4vw,34px) var(--sans); color:var(--accent); line-height:1;}
.stat .lbl{font:600 var(--fs-meta) var(--sans); color:#bcbbb6; letter-spacing:.03em; margin-top:8px;}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font:600 var(--fs-meta) var(--sans); color:var(--ink);}
.field input, .field select, .field textarea{
  font:500 var(--fs-read) var(--sans); padding:12px 14px; border:1.5px solid var(--line-strong);
  border-radius:9px; background:#fff; color:var(--ink); width:100%;
}
.field textarea{min-height:120px; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.consent{display:flex; gap:10px; align-items:flex-start; font:500 var(--fs-meta)/1.5 var(--sans); color:var(--muted); margin:6px 0 18px;}
.consent input{width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex:none;}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--accent);}
.field-error{display:none; align-items:center; gap:8px; margin:-8px 0 14px; font:600 var(--fs-meta) var(--sans); color:var(--accent-text);}
.field-error.show{display:flex;}
.field-error .ico{
  flex:none; width:16px; height:16px; border-radius:50%; background:var(--accent); color:#fff;
  font:800 12px/16px var(--sans); text-align:center;
}
.mapbox{border:1.5px solid var(--line-strong); border-radius:12px; overflow:hidden; min-height:320px; background:#eef0f2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:30px;}
.mapbox .mh{font:700 var(--fs-title) var(--sans); color:var(--ink);}
.mapbox .mp{font:500 var(--fs-sm)/1.5 var(--sans); color:var(--muted); max-width:320px;}
.contact-info{font:500 var(--fs-read)/1.8 var(--sans); color:var(--ink); margin-top:18px;}
.contact-info a{color:var(--accent-text); text-decoration:none;}

/* ---------------- Section heads ---------------- */
.sechead{max-width:680px;}
.sechead.center{margin:0 auto; text-align:center;}
.sechead .lead{margin-left:auto; margin-right:auto;}

/* ---------------- Footer ---------------- */
.site-footer{background:#1A1A1A; color:#cfceca;}
.fwrap{max-width:var(--maxw); margin:0 auto; padding:54px 28px 30px; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:32px;}
.fcol h4, .fcol h3{font:700 var(--fs-overline) var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#8a877f; margin:0 0 14px;}
.fcol a, .fcol span{display:block; font:500 var(--fs-sm)/1.9 var(--sans); color:#cfceca; text-decoration:none;}
.fcol a:hover{color:var(--accent);}
.fcol .flogolock{display:table; width:auto; align-items:center; background:#fff; border:1.5px solid rgba(255,255,255,.18); border-radius:10px; padding:5px 9px; margin-bottom:14px;}
.flogolock img{height:74px; display:block;}
.fbrand p{font:500 var(--fs-sm)/1.6 var(--sans); color:#9b9890; max-width:230px; margin:0;}
.fcol .foot-iso{display:table; width:auto; background:#fff; border:1.5px solid rgba(255,255,255,.18); border-radius:8px; padding:4px 8px; margin-top:14px; cursor:pointer; line-height:0; transition:.15s;}
.fcol .foot-iso:hover{border-color:#fff;}
.foot-iso .seal.wide{width:auto; height:68px; display:block; border-radius:4px; position:relative; z-index:1; transition:transform .2s ease, box-shadow .2s ease;}
.foot-iso:hover .seal.wide{transform:scale(2); box-shadow:0 10px 28px rgba(0,0,0,.4); z-index:5;}
.fbar{max-width:var(--maxw); margin:0 auto; padding:18px 28px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font:500 var(--fs-meta) var(--sans); color:#76746e;}
.fbar a{color:#76746e; text-decoration:none;}
.fbar a:hover{color:var(--accent);}

/* ---------------- Specs (Produkt-Detailseiten) ---------------- */
.specs{display:grid; grid-template-columns:220px 1fr; gap:0; margin:20px 0 0; max-width:780px;}
.specs dt{font:700 var(--fs-sm) var(--sans); color:var(--ink); padding:14px 0; border-top:1.5px solid var(--line);}
.specs dd{font:500 var(--fs-read) var(--sans); color:var(--muted); padding:14px 0; margin:0; border-top:1.5px solid var(--line);}
@media(max-width:560px){ .specs{grid-template-columns:1fr;} .specs dd{padding-top:0; border-top:0;} }

/* ---------------- FAQ ---------------- */
.faq-list{max-width:820px; margin:34px auto 0;}
.faq-item{border-top:1.5px solid var(--line);}
.faq-item:last-child{border-bottom:1.5px solid var(--line);}
.faq-item summary{list-style:none; cursor:pointer; padding:20px 44px 20px 4px; position:relative; font:700 var(--fs-title)/1.4 var(--sans); color:var(--ink);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; position:absolute; right:8px; top:18px; font:400 26px/1 var(--sans); color:var(--accent); transition:.2s;}
.faq-item[open] summary::after{content:"–";}
.faq-item summary:hover{color:var(--accent);}
.faq-item .faq-a{padding:0 44px 22px 4px; font:500 var(--fs-read)/1.65 var(--sans); color:var(--muted); margin:0;}

/* ---------------- Highlights (Poster-Stil) ---------------- */
.highlights{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px;}
.hl-card{display:flex; flex-direction:column; gap:14px;}
.hl-top{background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:20px 22px; display:flex; gap:14px; align-items:flex-start; flex:1;}
.hl-icon{width:44px; height:44px; border-radius:10px; background:var(--accent); flex:none; display:grid; place-items:center; color:#fff;}
.hl-icon svg{width:24px; height:24px; display:block;}
.hl-top h3{font:800 var(--fs-title)/1.25 var(--sans); margin:0 0 6px; color:var(--ink);}
.hl-top p{font:500 var(--fs-sm)/1.55 var(--sans); margin:0; color:var(--muted);}
.hl-bottom{background:var(--accent); color:#fff; border-radius:14px; padding:22px; text-align:center; min-height:188px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.hl-bottom .hl-num{font:800 clamp(26px,3.5vw,32px) var(--sans); line-height:1; letter-spacing:-.01em;}
.hl-bottom .hl-rule{width:54px; height:2px; background:rgba(255,255,255,.55); margin:14px auto;}
.hl-bottom .hl-lbl{font:600 var(--fs-sm) var(--sans); color:#fff;}
@media(max-width:860px){ .highlights{grid-template-columns:1fr;} }

/* ---------------- Glossary ---------------- */
.gloss-cat{margin-bottom:48px;}
.gloss-cat:last-child{margin-bottom:0;}
.gloss-cathead{font:800 var(--fs-meta) var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 6px; padding-bottom:10px; border-bottom:2px solid var(--accent);}
.glossary{margin:0; display:grid; gap:0;}
.gloss-item{padding:24px 0; border-top:1.5px solid var(--line);}
.gloss-item:first-child{border-top:0;}
.gloss-item dt{margin:0 0 8px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.gloss-abbr{font:800 var(--fs-lead) var(--sans); color:var(--ink); letter-spacing:-.01em;}
.gloss-long{font:600 var(--fs-sm) var(--sans); color:var(--accent);}
.gloss-item dd{margin:0; font:500 var(--fs-body)/1.65 var(--sans); color:var(--ink); max-width:760px;}

/* ---------------- Subpage hero (compact) ---------------- */
.pagehead{background:var(--dark); color:#fff; padding:64px 0 56px;}
.pagehead .eyebrow{color:var(--accent);}
.pagehead h1{color:#fff; max-width:780px;}
.pagehead .lead{color:#bcbbb6;}
.breadcrumb{font:600 var(--fs-overline) var(--sans); color:#8a877f; margin-bottom:18px;}
.breadcrumb a{color:#bcbbb6; text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* ---------------- CTA band ---------------- */
.ctaband{background:var(--accent); color:#fff; text-align:center; padding:56px 28px;}
.ctaband h2{font:800 clamp(24px,4vw,34px) var(--sans); margin:0 0 10px; color:#fff;}
.ctaband p{font:500 var(--fs-body) var(--sans); margin:0 0 22px; color:#ffe3e5;}
.ctaband .btn{background:#fff; color:var(--accent); border-color:#fff;}

/* ---------------- Responsive ---------------- */
@media(max-width:980px){
  .cols-4{grid-template-columns:repeat(2,1fr);}
  .cols-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .split, .contact-grid{grid-template-columns:1fr; gap:28px;}
  .sec{padding:52px 0;}
}
@media(max-width:560px){
  .cols-4, .cols-3, .cols-2{grid-template-columns:1fr;}
  .fwrap{grid-template-columns:1fr 1fr;}
  .trustgrid{grid-template-columns:1fr;}
}

/* ── Legal-Seiten (Impressum/Datenschutz) — Inhaltslayout, scoped unter .legal ── */
.legal main{max-width:720px; margin:0 auto; padding:36px 28px 90px;}
.legal .kicker{font:700 var(--fs-overline) var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--accent-text); margin:0 0 10px;}
.legal h1{font:700 30px/1.2 var(--sans); letter-spacing:-.01em; margin:0 0 6px; color:var(--ink);}
.legal .lead{font:400 var(--fs-body)/1.65 var(--sans); color:var(--ink); margin:0 0 8px; max-width:640px;}
.legal section{border-top:1.5px solid var(--line); padding:28px 0;}
.legal h2{font:700 var(--fs-meta) var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 14px;}
.legal p{font:400 var(--fs-body)/1.65 var(--sans); color:var(--ink); margin:0 0 10px; max-width:640px;}
.legal p.muted-text{color:var(--muted);}
.legal .addr{font:400 var(--fs-body)/1.7 var(--sans); color:var(--ink); margin:0;}
.legal .addr strong{font-weight:700;}
.legal .vat{font:700 var(--fs-title) var(--sans); color:var(--ink); letter-spacing:.01em; margin:0;}
.legal main a{color:var(--accent-text);}
.legal main a:hover{text-decoration:underline;}
.legal .row{display:grid; grid-template-columns:200px 1fr; gap:10px 24px; align-items:baseline;}
.legal .row dt{font:700 var(--fs-overline) var(--sans); color:var(--muted); letter-spacing:.06em; text-transform:uppercase;}
.legal .row dd{margin:0; font:400 var(--fs-body) var(--sans); color:var(--ink);}
@media(max-width:560px){ .legal .row{grid-template-columns:1fr;} .legal .row dt{margin-top:6px;} }