/* ============================================================
   Tech N Toys — B2B-Lieferantenseite  |  Design-System "Corporate Blue"
   Wird von index.html UND rechtliches.html UND 404.html geladen.

   Classic Corporate / Institutional Trust: Unternehmensblau, ruhiges
   Hellgrau, dezentes Grün als Erfolgs-Akzent. Lokale Fonts (Geist / Geist
   Mono / Bricolage Grotesque) — kein externer Request (DSGVO).

   CHANGELOG
     2.1.0  Polish-Pass: totop aus Tab-Reihenfolge wenn unsichtbar (visibility),
            --faint auf AA-Kontrast, Body-Grund minimal getintet (kein reines
            Weiß), ::selection in Markenfarbe, Input-Hover-State, Silbentrennung
            mobil, verwaiste .brand-mark/.brand-name-Regeln entfernt.
     2.0.0  Neues Theme "Corporate Blue" (aus Stil-Variante 10 zur Produktion
            ausgebaut): lokale Fonts, Display-Headlines (Bricolage), echtes
            Lagerfoto, Audit-Politur (text-wrap, getönte Schatten, Fokus-Ringe
            überall, tabular-nums, optischer vertikaler Rhythmus). Rechtsseite
            in dasselbe System überführt.
   ============================================================ */

/* ═══════════════ FONTS (lokal, variabel) ═══════════════ */
@font-face{font-family:"Geist";src:url("fonts/geist-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

/* ═══════════════ TOKENS ═══════════════ */
:root{
  --navy:#0a2e5c;
  --navy-deep:#06264d;
  --blue:#0b4aa2;
  --blue-dark:#083a80;
  --blue-light:#e8f0fb;
  --blue-mid:#c7dbf3;
  --green:#1c7d4d;
  --green-bg:#e7f5ec;
  --green-line:#bfe3cd;
  --ink:#152238;
  --ink-soft:#3f4c63;
  --faint:#6e7686;
  --line:#d8e0ec;
  --line-soft:#e7ecf3;
  --bg:#fdfdfe;
  --bg-section:#f4f7fb;
  --radius-s:6px;
  --radius-m:8px;
  --radius-l:12px;
  /* Getönte Schatten (Navy-Hue statt reinem Schwarz) */
  --shadow-s:0 1px 2px rgba(10,46,92,.06), 0 1px 1px rgba(10,46,92,.04);
  --shadow-m:0 4px 14px rgba(10,46,92,.09);
  --shadow-l:0 14px 36px rgba(10,46,92,.15);
  --wrap:1180px;
  --font:"Geist","Segoe UI",Arial,sans-serif;
  --display:"Bricolage Grotesque","Geist","Segoe UI",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:auto;background:var(--navy);color:#fff;padding:12px 18px;
      border-radius:0 0 8px 0;z-index:1000;font-weight:600}
.skip:focus{left:0;top:0}

/* Globale Fokus-Sichtbarkeit (Tastatur) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
.btn:focus-visible{outline:3px solid #7fb0ef;outline-offset:2px;border-radius:3px}

::selection{background:var(--blue-mid);color:var(--navy)}

/* ═══════════════ TYPO ═══════════════ */
h1,h2,h3{margin:0;color:var(--navy)}
h1,.h2{font-family:var(--display);font-weight:700;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(31px,4.4vw,50px);line-height:1.08}
.h2{font-size:clamp(24px,3vw,35px);line-height:1.16;margin-bottom:14px}
h3{font-weight:650;font-size:19px;letter-spacing:-.01em;margin-bottom:8px}
p{margin:0;text-wrap:pretty}
.lead{font-size:clamp(16px,1.7vw,18.5px);color:var(--ink-soft);max-width:64ch;margin-top:12px}
.sub{font-size:clamp(15.5px,1.6vw,18px);color:var(--ink-soft);max-width:54ch;margin-top:16px}

.seclabel{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue);
  padding:5px 12px 5px 10px;background:var(--blue-light);border:1px solid var(--blue-mid);
  border-radius:999px}
.seclabel::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.hero-label{margin-bottom:18px}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:600;font-size:15px;line-height:1;
  padding:13px 22px;border-radius:var(--radius-s);border:1.5px solid var(--blue);
  background:var(--blue);color:#fff;cursor:pointer;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);box-shadow:var(--shadow-m)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover{background:var(--blue-light);border-color:var(--blue)}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-ico svg{display:block;transition:transform .15s ease}
.btn:hover .btn-ico svg{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){
  .btn,.btn-ico svg,.scard,.stat,.item,.totop,.brand-item{transition:none}
}

/* ═══════════════ HEADER ═══════════════ */
header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line-soft)}
body.scrolled header{box-shadow:var(--shadow-s)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:34px;width:auto;display:block}
nav#menu ul{list-style:none;display:flex;gap:2px;margin:0;padding:0}
nav#menu a{display:block;padding:10px 15px;text-decoration:none;color:var(--ink-soft);
  font-weight:600;font-size:14.5px;border-radius:var(--radius-s);transition:background .15s,color .15s}
nav#menu a:hover{background:var(--blue-light);color:var(--blue)}
nav#menu a[aria-current="page"]{color:var(--blue);background:var(--blue-light)}
.nav-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.navtoggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:var(--radius-s);border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.langswitch{display:inline-flex;align-items:center;font-weight:600;font-size:13px;letter-spacing:.03em;
  color:var(--ink-soft);text-decoration:none;padding:8px 11px;border:1px solid var(--line);
  border-radius:var(--radius-s);transition:border-color .15s,color .15s,background .15s}
.langswitch:hover{border-color:var(--blue-mid);color:var(--blue);background:var(--blue-light)}

/* ═══════════════ HERO ═══════════════ */
.hero{background:linear-gradient(180deg,var(--blue-light) 0%,var(--bg) 78%);border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;
  padding:clamp(52px,7vw,88px) 24px clamp(56px,6vw,80px)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-m);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;
  background:var(--navy);color:#fff}
.panel-head span:first-child{font-weight:700;font-size:14.5px}
.panel-head .mono{font-family:var(--mono);font-size:12.5px;color:#b9cdea;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.08);padding:3px 9px;border-radius:999px}
.chan{display:flex;align-items:center;gap:12px;padding:15px 22px;border-bottom:1px solid var(--line-soft)}
.chan::before{content:"";flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--green)}
.chan .name{font-weight:600;font-size:14.5px;color:var(--ink)}
.chan .name small{display:block;font-weight:400;color:var(--ink-soft);font-size:13px;margin-top:2px}
.panel-foot{padding:15px 22px;font-size:13.5px;color:var(--ink-soft);background:var(--bg-section);font-weight:500}

/* ═══════════════ KENNZAHLEN ═══════════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:48px 0 40px}
.stat{border:1px solid var(--line);border-radius:var(--radius-m);padding:22px 20px;background:#fff;
  box-shadow:var(--shadow-s);transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}
.stat:hover{box-shadow:var(--shadow-m);border-color:var(--blue-mid);transform:translateY(-2px)}
.stat b{display:block;font-family:var(--display);font-size:21px;color:var(--navy);font-weight:700;letter-spacing:-.015em}
.stat small{display:block;color:var(--ink-soft);font-size:13.5px;margin-top:5px}

/* ═══════════════ TRUST BAR ═══════════════ */
.trust{display:flex;flex-wrap:wrap;gap:12px;padding:22px 0 52px;border-bottom:1px solid var(--line-soft)}
.ti{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--green-bg);border:1px solid var(--green-line);padding:9px 15px;border-radius:999px}
.ti svg{color:var(--green);flex-shrink:0}

/* ═══════════════ SECTIONS ═══════════════ */
section{padding:clamp(56px,7vw,92px) 0 clamp(60px,7.5vw,100px);scroll-margin-top:92px}
section + section{border-top:1px solid var(--line-soft)}
#ueber{background:var(--bg-section)}

.photo{margin:34px 0 0;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-m)}
.photo img{width:100%;height:auto;aspect-ratio:16/8.2;object-fit:cover}

.feat{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-m);padding:26px 26px 28px;
  box-shadow:var(--shadow-s);transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}
.item:hover{box-shadow:var(--shadow-m);border-color:var(--blue-mid);transform:translateY(-2px)}
.item h3{color:var(--navy)}
.item p{color:var(--ink-soft);font-size:15px}

/* ═══════════════ SORTIMENT ═══════════════ */
.sortiment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.scard{height:100%;border:1px solid var(--line);border-radius:var(--radius-m);padding:24px 22px;
  background:#fff;box-shadow:var(--shadow-s);transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}
.scard:hover{box-shadow:var(--shadow-m);border-color:var(--blue-mid);transform:translateY(-2px)}
.scard-bar{width:34px;height:4px;border-radius:2px;background:var(--blue);margin-bottom:16px}
.scard h3{font-size:16.5px}
.scard p{color:var(--ink-soft);font-size:14px}
.sortiment-note{margin-top:28px;color:var(--ink-soft);font-size:14.5px;max-width:78ch;
  background:var(--bg-section);border:1px solid var(--line-soft);border-radius:var(--radius-m);padding:16px 20px}
.sortiment-note a{color:var(--blue);font-weight:600;text-decoration:underline}

/* ═══════════════ MARKEN ═══════════════ */
.brandrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.brand-item{font-size:14px;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-s);padding:9px 16px;
  transition:border-color .15s,color .15s,background .15s}
.brand-item:hover{border-color:var(--blue-mid);color:var(--blue);background:var(--blue-light)}
.brandwall-note{margin-top:18px;color:var(--ink-soft);font-size:14px;font-style:italic}

/* ═══════════════ LIEFERANTEN-CTA ═══════════════ */
.supplier{background:
    radial-gradient(120% 120% at 85% 0%, rgba(53,109,180,.28) 0%, transparent 55%),
    linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 82%);color:#fff}
.supplier-in{max-width:var(--wrap);margin:0 auto;padding:clamp(52px,7vw,88px) 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.supplier h2{font-family:var(--display);color:#fff;font-size:clamp(24px,3vw,33px);letter-spacing:-.02em;text-wrap:balance}
.supplier .k{color:#c9d8ef;margin-top:14px;font-size:16px;max-width:46ch}
.ulx{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.ulx li{display:flex;align-items:flex-start;gap:11px;font-size:15px;font-weight:500;color:#e7edf9}
.ulx li svg{flex-shrink:0;margin-top:2px;color:#5fd394}
.pruefblock{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.pruefblock h3{color:#fff;font-size:16px;font-weight:650;margin:0 0 8px}
.pruefblock p{color:#c9d8ef;font-size:14.5px;line-height:1.55;margin:0;max-width:48ch}

form#anfrage{background:#fff;border-radius:var(--radius-l);padding:28px;box-shadow:var(--shadow-l);color:var(--ink)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
.field input,.field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--radius-s);padding:11px 13px;background:#fbfcfe;
  transition:border-color .15s,box-shadow .15s}
.field input:hover,.field textarea:hover{border-color:#b9c6da}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-light);background:#fff}
.field textarea{resize:vertical;min-height:78px}
.err{display:none;color:#b3261e;font-size:12.5px;margin-top:5px;font-weight:600}
form.tried :invalid ~ .err{display:block}
form#anfrage .btn{width:100%;margin-top:6px}
.ok{display:none;align-items:flex-start;gap:8px;margin-top:14px;font-size:13.5px;color:var(--green);
  background:var(--green-bg);border:1px solid var(--green-line);border-radius:var(--radius-s);padding:11px 13px;font-weight:600}
.ok svg{flex-shrink:0;margin-top:1px}
form.sent .ok{display:flex}
.ok a{color:var(--green)}
.formnote{margin-top:16px;font-size:12.5px;color:var(--ink-soft)}
.formnote a{color:var(--blue);font-weight:600;text-decoration:underline}

/* ═══════════════ RECHTLICHES (Impressum / Datenschutz) ═══════════════ */
.legal{padding:clamp(44px,6vw,76px) 0}
.legal + .legal{border-top:none}
.legal .wrap{max-width:840px}
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
  color:var(--blue);text-decoration:none}
.backlink:hover{text-decoration:underline}
.legal h2{font-family:var(--display);font-size:19px;font-weight:700;color:var(--navy);
  margin:28px 0 6px;letter-spacing:-.012em}
.legal h3{font-size:16.5px;font-weight:650;color:var(--navy);margin:26px 0 6px}
.legal p{color:var(--ink-soft);font-size:15px;margin:0 0 10px;max-width:74ch}
.legal p b{color:var(--ink)}
.legal a{color:var(--blue);font-weight:600}
.legal ul{margin:0 0 12px;padding-left:22px;color:var(--ink-soft);font-size:15px;max-width:74ch}
.legal li{margin:4px 0}

/* ═══════════════ FOOTER ═══════════════ */
footer{background:var(--navy);color:#b9c9e4;padding:26px 0}
footer .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13.5px}
footer a{color:#d7e2f5;text-decoration:none}
footer a:hover{text-decoration:underline}

.totop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-m);text-decoration:none;opacity:0;pointer-events:none;visibility:hidden;
  transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,background .15s ease,visibility .2s}
body.scrolled .totop{opacity:1;pointer-events:auto;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--blue-dark)}

/* Reveal-on-scroll (Progressive Enhancement, dezent) */
body.reveal-on [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;transition-delay:var(--d,0ms)}
body.reveal-on [data-reveal].in{opacity:1;transform:translateY(0)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .feat{grid-template-columns:1fr}
  .sortiment-grid{grid-template-columns:1fr 1fr}
  .supplier-in{grid-template-columns:1fr;gap:36px}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  nav#menu{position:fixed;inset:76px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-m);max-height:0;overflow:hidden;transition:max-height .22s ease}
  nav#menu.open{max-height:400px}
  nav#menu ul{flex-direction:column;padding:10px 24px 18px;gap:2px}
  nav#menu a{padding:12px 6px;border-bottom:1px solid var(--line-soft)}
  .navtoggle{display:flex}
  .nav-actions .btn-accent{display:none}
  .sortiment-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  /* lange deutsche Komposita in schmalen Spalten sauber trennen */
  .lead,.sub,.item p,.scard p,.sortiment-note{hyphens:auto}
}