/* wl-motion.com — Seiten-Ebene über ds-core.css (Design-System der Dachmarke, v1).
   Eine Fläche (dunkel), ein Auftritt (Hero-Einlauf), sonst Ruhe.
   Klassen mit wlm- kommen aus ds-core.css; hier nur, was es dort nicht gibt. */
:root{
  color-scheme: dark;
  --brand-fluis: #34D6C0;   /* Fluis „Strom“ — nur als Punkt, nie als Fläche */
  --gutter: clamp(20px,5vw,88px);
}
html,body{ margin:0; background:#14181A; }
.page{ min-height:100vh; }
.num{ font-variant-numeric: tabular-nums; }

/* Firmenname über dem Signet — ersetzt das Eyebrow der Vorlage */
.brandline__name{
  font-family: var(--wlm-font-display); font-weight:800; font-size:1.05rem;
  letter-spacing:-.02em; color: var(--sf-text);
  opacity:0; animation: wlm-rise .7s .1s forwards;
}
.wlm-hero__meta .num{ letter-spacing:.08em; }

/* ---------- Band: Marke + Kontakt ---------- */
.band{ border-top:1px solid var(--sf-line); padding: clamp(40px,6vw,72px) var(--gutter); }
.band__wrap{
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px,6vw,88px);
}
@media (max-width:820px){ .band__wrap{ grid-template-columns:1fr; } }
.col{ min-width:0; }
.wlm .col__title{
  font-family: var(--wlm-font-display); font-weight:700; font-size:1rem;
  letter-spacing:-.01em; color: var(--sf-text-2); margin:0 0 var(--wlm-s4);
}

.brand{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap: var(--wlm-s4);
  padding: 20px 22px; border-radius: var(--wlm-radius);
  background: var(--sf-bg-el); border:1px solid var(--sf-line);
  color: inherit; text-decoration:none;
  transition: border-color var(--wlm-dur) var(--wlm-ease);
}
.brand:hover{ border-color: var(--sf-line-2); }
.brand:focus-visible{ outline:2px solid var(--sf-focus); outline-offset:3px; }
.brand__dot{ width:12px; height:12px; border-radius:3px; background: var(--brand-fluis); margin-top:9px; }
.brand__text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.brand__name{ font-family: var(--wlm-font-display); font-weight:800; font-size:1.5rem; letter-spacing:-.03em; line-height:1.1; }
.brand__desc{ color: var(--sf-text-2); font-size:.96rem; line-height:1.55; max-width:44ch; }
.brand__url{
  font-family: var(--wlm-font-display); font-weight:700; font-size:.95rem;
  color: var(--sf-accent-text); white-space:nowrap; margin-top:4px;
}
.brand__url .wlm-chev{ font-size:.8em; letter-spacing:-.1em; display:inline-block; transition: transform var(--wlm-dur) var(--wlm-ease); }
.brand:hover .brand__url .wlm-chev{ transform: translateX(3px); }
@media (max-width:520px){
  .brand{ grid-template-columns:auto 1fr; }
  .brand__url{ grid-column:2; }
}

.contact{ font-style:normal; color: var(--sf-text); line-height:1.7; }
.contact__mail{ margin: var(--wlm-s4) 0 0; }

/* ---------- Footer: Impressum + Datenschutz ---------- */
.foot{ border-top:1px solid var(--sf-line); background: var(--sf-bg-sunk); padding: clamp(36px,5vw,56px) var(--gutter) var(--wlm-s6); }
.foot__wrap{ max-width:1120px; margin:0 auto; display:grid; gap: var(--wlm-s6); }
.wlm .foot__title{ font-family: var(--wlm-font-display); font-weight:700; font-size:.95rem; letter-spacing:-.01em; color: var(--sf-text-2); margin:0 0 var(--wlm-s4); }

.facts{ margin:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--wlm-s3) var(--wlm-s6); }
.facts div{ min-width:0; }
.facts dt{ font-size:.8rem; color: var(--sf-text-3); }
.facts dd{ margin:0; font-size:.92rem; color: var(--sf-text-2); }

.privacy{ border-top:1px solid var(--sf-line); border-bottom:1px solid var(--sf-line); }
.privacy summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap: var(--wlm-s4); flex-wrap:wrap;
  padding: 16px 0;
  font-family: var(--wlm-font-display); font-weight:700; font-size:.95rem; color: var(--sf-text-2);
}
.privacy summary::-webkit-details-marker{ display:none; }
.privacy summary > span:first-child::after{
  content:"\25B8"; display:inline-block; margin-left:10px; color: var(--sf-accent-text);
  transition: transform var(--wlm-dur) var(--wlm-ease);
}
.privacy[open] summary > span:first-child::after{ transform: rotate(90deg); }
.privacy summary:hover{ color: var(--sf-text); }
.privacy summary:focus-visible{ outline:2px solid var(--sf-focus); outline-offset:3px; border-radius:2px; }
.privacy__hint{ font-family: var(--wlm-font-body); font-weight:400; font-size:.84rem; color: var(--sf-text-3); }
.privacy__body{ padding: 0 0 var(--wlm-s5); max-width:68ch; }
.privacy__body p{ margin:0 0 var(--wlm-s3); font-size:.9rem; color: var(--sf-text-2); line-height:1.65; }
.privacy__body b{ color: var(--sf-text); font-weight:600; }

.foot__base{ display:flex; align-items:center; gap: var(--wlm-s3); font-size:.8rem; color: var(--sf-text-3); }
.foot__mark{ width:28px; flex:none; }

@media (prefers-reduced-motion: reduce){
  .brandline__name{ opacity:1; animation:none; }
}