/* =====================================================================
   Projekt: NX Store / nx-store.de
   Datei: assets/css/style.css
   Rechteinhaber: Netrix GmbH
   Technische Umsetzung / Pflege: Netrix GmbH
   Copyright 2001 - 2026 Netrix GmbH
   Website: https://www.netrix.de
   Hinweis: Monochromes B2B-Theme. Mobile-first. Keine externen Fonts/Libs.
   ===================================================================== */

/* ---------- 0. Lokale Schriftart (kein externes CDN) ----------
   Datei: assets/fonts/inter-variable.woff2 (Inter, SIL Open Font License).
   Fehlt die Datei, greift automatisch der System-Font-Stack (--ff). */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-variable.woff2") format("woff2-variations"),
      url("../fonts/inter-variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- 1. Design-Tokens ---------- */
:root{
  --c-ink:#0c0c0c;            /* Hero / Header */
  --c-ink-2:#131817;          /* Panels / Footer */
  --c-ink-3:#1b1f1e;          /* Kacheln auf Dunkel */
  --c-ink-4:#262b2a;          /* Hover dunkel */
  --c-line-dark:rgba(255,255,255,.14);
  --c-line-dark-2:rgba(255,255,255,.22);

  --c-paper:#ffffff;
  --c-paper-2:#f5f5f4;        /* helle Sektionen */
  --c-paper-3:#ededec;        /* Platzhalter / Felder */
  --c-card:#ffffff;
  --c-line:#e4e4e1;
  --c-line-2:#d7d7d4;

  --c-text:#16181a;
  --c-text-soft:#5d6066;
  --c-text-mute:#83868c;
  --c-invert:#ffffff;
  --c-invert-soft:#b9bcc0;
  --c-invert-mute:#8b8f93;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:26px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(15,18,20,.04), 0 1px 1px rgba(15,18,20,.03);
  --sh-2:0 6px 20px rgba(15,18,20,.06), 0 2px 6px rgba(15,18,20,.04);

  --container:1180px;
  --gutter:clamp(16px,4vw,28px);

  --ff: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;

  --header-h:128px;
}

/* ---------- 2. Reset / Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 14px)}
body{
  margin:0;
  font-family:var(--ff);
  font-size:17px;
  line-height:1.6;
  color:var(--c-text);
  background:var(--c-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit}
h1,h2,h3,h4{line-height:1.18;letter-spacing:-.01em;margin:0;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px;border-radius:4px}
.dark :focus-visible{outline-color:#fff}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.icon{width:1.25em;height:1.25em;display:inline-block;flex:none;vertical-align:middle;fill:none}

/* ---------- 2b. Kit-Icons (WebP-Alpha-Masken, einfärbbar über currentColor) ---------- */
.ki{
  background-color:currentColor;
  -webkit-mask:var(--ki) center / contain no-repeat;
          mask:var(--ki) center / contain no-repeat;
}
.ki-pc{--ki:url("../icons/pc.webp")}
.ki-notebook{--ki:url("../icons/notebook.webp")}
.ki-mainboard{--ki:url("../icons/mainboard.webp")}
.ki-ram{--ki:url("../icons/ram.webp")}
.ki-cpu{--ki:url("../icons/cpu.webp")}
.ki-nas{--ki:url("../icons/nas.webp")}
.ki-usv{--ki:url("../icons/usv.webp")}
.ki-cable{--ki:url("../icons/cable.webp")}
.ki-search{--ki:url("../icons/search.webp")}
.ki-send{--ki:url("../icons/send.webp")}
.ki-arrow{--ki:url("../icons/arrow.webp")}
.ki-cart{--ki:url("../icons/cart.webp")}
.ki-tag{--ki:url("../icons/tag.webp")}
.ki-apple{--ki:url("../icons/apple.webp")}
.ki-set-pc{--ki:url("../icons/set-pc.webp")}
.ki-set-boards{--ki:url("../icons/set-boards.webp")}
.ki-set-nas{--ki:url("../icons/set-nas.webp")}
.ki-set-network{--ki:url("../icons/set-network.webp")}
.ki-scrap{--ki:url("../icons/scrap.webp")}
.ki-gear{--ki:url("../icons/gear.webp")}
.ki-refresh{--ki:url("../icons/refresh.webp")}
.ki-shield-check{--ki:url("../icons/shield-check.webp")}
.ki-box{--ki:url("../icons/box.webp")}
.ki-handshake{--ki:url("../icons/handshake.webp")}
.ki-user{--ki:url("../icons/user.webp")}
.ki-shield-off{--ki:url("../icons/shield-off.webp")}
.ki-euro{--ki:url("../icons/euro.webp")}
.ki-truck{--ki:url("../icons/truck.webp")}
.ki-shield{--ki:url("../icons/shield.webp")}
.ki-privacy{--ki:url("../icons/privacy.webp")}
.ki-logo{--ki:url("../icons/logo.webp")}

/* ---------- 3. Layout-Helfer ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(44px,7vw,84px)}
.section--tight{padding-block:clamp(34px,5vw,56px)}
.section-light{background:var(--c-paper-2)}
.section-paper{background:var(--c-paper)}

.section-head{max-width:640px;margin-bottom:clamp(24px,4vw,40px)}
.section-head h2{font-size:clamp(1.5rem,3.2vw,2.05rem)}
.section-head .lead{margin-top:10px;color:var(--c-text-soft);font-size:1.02rem}
.eyebrow{display:inline-block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c-text-mute);margin-bottom:12px}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.72em 1.25em;border-radius:var(--r-md);
  font-size:.97rem;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
  white-space:nowrap;
}
.btn .icon{width:1.15em;height:1.15em}
.btn:active{transform:translateY(1px)}

.btn-light{background:var(--c-paper);color:var(--c-ink);border-color:var(--c-paper)}
.btn-light:hover{background:#ececea;border-color:#ececea}

.btn-dark{background:var(--c-ink);color:var(--c-invert);border-color:var(--c-ink)}
.btn-dark:hover{background:var(--c-ink-4);border-color:var(--c-ink-4)}

.btn-outline{background:transparent;color:var(--c-ink);border-color:var(--c-line-2)}
.btn-outline:hover{border-color:var(--c-ink);background:var(--c-paper)}

/* Outline auf dunklem Grund */
.dark .btn-outline,.btn-outline-invert{background:transparent;color:var(--c-invert);border-color:var(--c-line-dark-2)}
.dark .btn-outline:hover,.btn-outline-invert:hover{border-color:#fff;background:rgba(255,255,255,.06)}

.btn-block{width:100%;justify-content:center}
.btn-lg{padding:.92em 1.5em;font-size:1.02rem;border-radius:var(--r-md)}

/* ---------- 5. Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.42em .8em;border-radius:var(--r-pill);
  font-size:.8rem;font-weight:700;line-height:1;
  border:1.5px solid var(--c-line-2);background:var(--c-paper);color:var(--c-text);
}
.badge .icon{width:1.05em;height:1.05em}
.badge--solid{background:var(--c-ink);color:var(--c-invert);border-color:var(--c-ink)}
.dark .badge{background:rgba(255,255,255,.06);border-color:var(--c-line-dark-2);color:var(--c-invert)}
.dark .badge--solid{background:#fff;color:var(--c-ink);border-color:#fff}

/* ---------- 6. Header / Navigation ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--c-ink);color:var(--c-invert);
  border-bottom:1px solid var(--c-line-dark);
}
.site-header .container{display:flex;align-items:center;gap:18px;min-height:var(--header-h)}

.brand{display:inline-flex;align-items:center;gap:22px;text-decoration:none;color:var(--c-invert);font-weight:800;letter-spacing:.02em}
.brand__logo{width:100px;height:100px;color:var(--c-invert)}
.brand__name{font-size:1.6rem;line-height:1.12}
.brand__name small{display:block;font-size:.88rem;font-weight:600;letter-spacing:.22em;color:var(--c-invert-mute);margin-top:6px}

.main-nav{margin-left:auto}
.main-nav ul{display:flex;align-items:center;gap:4px}
.main-nav a{
  display:inline-block;text-decoration:none;color:var(--c-invert-soft);
  font-size:.95rem;font-weight:600;padding:.5em .8em;border-radius:var(--r-sm);
  white-space:nowrap;
  transition:color .15s,background .15s;
}
.header-badges .badge{white-space:nowrap}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.main-nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}

.header-badges{display:flex;align-items:center;gap:8px}

.nav-toggle{
  display:none;margin-left:auto;
  align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);border:1px solid var(--c-line-dark);color:#fff;cursor:pointer;
}
.nav-toggle .icon{width:24px;height:24px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--c-ink);color:var(--c-invert);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:currentColor;
  -webkit-mask:url("../img/circuit-motif.webp") right -40px top -20px / 680px auto no-repeat;
          mask:url("../img/circuit-motif.webp") right -40px top -20px / 680px auto no-repeat;
  opacity:.10;pointer-events:none;
}
.hero__inner{position:relative;display:grid;gap:clamp(28px,5vw,48px);padding-block:clamp(40px,7vw,76px)}
.hero__title{font-size:clamp(1.9rem,5.4vw,3.25rem);font-weight:800;letter-spacing:-.02em}
.hero__sub{margin-top:18px;max-width:46ch;color:var(--c-invert-soft);font-size:clamp(1rem,2vw,1.12rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__note{margin-top:18px;display:flex;align-items:center;gap:.5em;color:var(--c-invert-mute);font-size:.85rem}
.hero__note .icon{width:1.05em;height:1.05em;color:var(--c-invert-soft)}

/* Hero-Kachelraster (quadratisch, Icon zentriert, alle gleich gross) */
.tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.4vw,16px);min-width:0;text-align:center;
  padding:clamp(14px,2.2vw,22px);border-radius:var(--r-md);
  aspect-ratio:1/1;
  background:var(--c-ink-3);border:1px solid var(--c-line-dark);
  text-decoration:none;color:var(--c-invert);
  transition:background .15s,border-color .15s,transform .15s;
}
.tile:hover{background:var(--c-ink-4);border-color:var(--c-line-dark-2);transform:translateY(-2px)}
.tile .icon{
  width:54%;height:auto;aspect-ratio:1/1;color:#fff;flex:none;
}
.tile span{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:2.4em;
  font-size:clamp(.85rem,1.1vw,1rem);font-weight:700;line-height:1.18;
  overflow-wrap:break-word;hyphens:none;
}

/* ---------- 8. Kategorie-Karten (helle Sektion, 3x2 quadratisch) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cat-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;min-width:0;text-align:center;
  padding:20px 16px;border-radius:var(--r-lg);
  aspect-ratio:1/1;
  background:var(--c-card);border:1px solid var(--c-line);box-shadow:var(--sh-1);
  text-decoration:none;color:var(--c-text);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.cat-card:hover{border-color:var(--c-line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.cat-card__icon{
  width:48%;aspect-ratio:1/1;max-width:140px;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;flex:none;
  background:var(--c-paper-2);border:1px solid var(--c-line);color:var(--c-ink);
}
.cat-card__icon .icon{width:62%;height:auto;aspect-ratio:1/1}
.cat-card h3{font-size:1.05rem;font-weight:700;line-height:1.25}
.cat-card p{display:none}

/* ---------- 9. Feature-Liste (Icon + Text) ---------- */
.feature-grid{display:grid;grid-auto-rows:1fr;gap:20px}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature__icon{
  flex:none;width:104px;height:104px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--c-line);background:var(--c-paper);color:var(--c-ink);
}
.feature__icon .icon{width:64px;height:64px}
.feature h3{font-size:1.15rem;font-weight:700;margin-bottom:5px}
.feature p{color:var(--c-text-soft);font-size:.93rem}

/* ---------- 10. Dunkles Panel (Ankauf/Partner) ---------- */
.panel-dark{
  position:relative;overflow:hidden;
  background:var(--c-ink-2);color:var(--c-invert);
  border-radius:var(--r-xl);padding:clamp(26px,4vw,40px);
}
.panel-dark::before{
  content:"";position:absolute;inset:0;
  background:currentColor;
  -webkit-mask:url("../img/circuit-motif.webp") right -30px center / 520px auto no-repeat;
          mask:url("../img/circuit-motif.webp") right -30px center / 520px auto no-repeat;
  opacity:.10;pointer-events:none;
}
.panel-dark__row{position:relative;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.panel-dark__icon{
  flex:none;width:124px;height:124px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid var(--c-line-dark-2);color:#fff;
}
.panel-dark__icon .icon{width:76px;height:76px}
.panel-dark__body{flex:1 1 320px;min-width:0}
.panel-dark__body h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.panel-dark__body p{margin-top:8px;color:var(--c-invert-soft);font-size:1rem;max-width:60ch}
.panel-dark__cta{flex:none}

/* ---------- 11. Verkaufshinweise (Notiz-Karten) ---------- */
.note-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:14px}
.note-card{
  padding:20px;border-radius:var(--r-lg);height:100%;
  display:flex;flex-direction:column;
  background:var(--c-card);border:1px solid var(--c-line);box-shadow:var(--sh-1);
}
.note-card__icon{
  width:96px;height:96px;border-radius:var(--r-md);margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-paper-2);border:1px solid var(--c-line);color:var(--c-ink);
}
.note-card__icon .icon{width:58px;height:58px}
.note-card h3{font-size:1.1rem;font-weight:700;min-height:2.4em}
.note-card p{color:var(--c-text-soft);font-size:.9rem;margin-top:6px}

/* ---------- 12. Kontakt / Formular ---------- */
.contact-grid{display:grid;gap:clamp(24px,4vw,40px)}
.contact-aside{display:grid;gap:18px;align-content:start}
.contact-point{display:flex;gap:13px;align-items:flex-start}
.contact-point__icon{
  flex:none;width:88px;height:88px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--c-line);background:var(--c-paper);color:var(--c-ink);
}
.contact-point__icon .icon{width:54px;height:54px}
.contact-point h3{font-size:.96rem;font-weight:700}
.contact-point p{color:var(--c-text-soft);font-size:.88rem;margin-top:2px}

.form-card{
  background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-xl);padding:clamp(20px,3vw,30px);box-shadow:var(--sh-2);
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
.field label{font-size:.86rem;font-weight:600;color:var(--c-text)}
.field .req{color:var(--c-text);font-weight:700}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.96rem;color:var(--c-text);
  background:var(--c-paper);border:1.5px solid var(--c-line-2);border-radius:var(--r-sm);
  padding:.7em .85em;transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--c-ink);box-shadow:0 0 0 3px rgba(12,12,12,.08);
}
.field input::placeholder,.field textarea::placeholder{color:var(--c-text-mute)}

.check{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--c-text-soft);line-height:1.45}
.check input{flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--c-ink)}
.check a{color:var(--c-text);font-weight:600}

.form-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:4px}
.form-foot .hint{font-size:.8rem;color:var(--c-text-mute)}

/* Honeypot — niemals sichtbar, von Screenreadern weg */
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Statusmeldungen Formular */
.form-status{border-radius:var(--r-md);padding:14px 16px;margin-bottom:20px;font-size:.94rem;border:1.5px solid}
.form-status--ok{background:#f1f6f2;border-color:#cfe3d4;color:#1f5130}
.form-status--err{background:#fbf2f2;border-color:#ecd2d2;color:#7a2424}

/* ---------- 13. Marktplatz-CTAs ---------- */
.market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:16px}
.market-card{
  position:relative;overflow:hidden;height:100%;
  display:flex;align-items:center;gap:18px;
  background:var(--c-ink-2);color:var(--c-invert);
  border-radius:var(--r-xl);padding:24px 26px;text-decoration:none;
  border:1px solid var(--c-line-dark);
  transition:background .15s,transform .15s,border-color .15s;
}
.market-card:hover{background:var(--c-ink-4);border-color:var(--c-line-dark-2);transform:translateY(-2px)}
.market-card__icon{
  flex:none;width:104px;height:104px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid var(--c-line-dark-2);color:#fff;
}
.market-card__icon .icon{width:64px;height:64px}
.market-card__body{flex:1 1 auto;min-width:0}
.market-card__body strong{display:block;font-size:1.08rem;font-weight:700}
.market-card__body span{display:block;color:var(--c-invert-soft);font-size:.9rem;margin-top:3px}
.market-card__arrow{flex:none;color:var(--c-invert-soft)}
.market-card__arrow .icon{width:24px;height:24px}
.market-card:hover .market-card__arrow{color:#fff}

/* ---------- 14. Footer ---------- */
.site-footer{background:var(--c-ink);color:var(--c-invert-soft);border-top:1px solid var(--c-line-dark)}
.footer-top{
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
  padding-block:26px;border-bottom:1px solid var(--c-line-dark);
}
.footer-brand{display:flex;align-items:center;gap:22px;color:#fff;font-size:1.4rem;font-weight:700}
.footer-brand .brand__logo{width:100px;height:100px}
.footer-b2b{display:flex;align-items:center;gap:12px}
.footer-b2b .txt{font-size:.92rem;font-weight:600;color:#fff;text-align:right;line-height:1.3}

.footer-links{padding-block:24px;border-bottom:1px solid var(--c-line-dark)}
.footer-links h4{color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;font-weight:700}
.footer-links ul{display:flex;flex-wrap:wrap;gap:6px 4px}
.footer-links a{
  text-decoration:none;color:var(--c-invert-soft);font-size:.9rem;
  padding:.35em .7em;border-radius:var(--r-pill);border:1px solid var(--c-line-dark);
  transition:color .15s,border-color .15s,background .15s;
}
.footer-links a:hover{color:#fff;border-color:var(--c-line-dark-2);background:rgba(255,255,255,.05)}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  padding-block:20px;font-size:.86rem;
}
.footer-bottom .legal{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.footer-bottom .legal a{color:var(--c-invert-soft);text-decoration:none}
.footer-bottom .legal a:hover{color:#fff;text-decoration:underline}
.footer-bottom .sep{color:var(--c-invert-mute)}

/* ---------- 15. Cookie-Hinweis ---------- */
.cookie{
  position:fixed;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));
  bottom:16px;z-index:80;
  background:var(--c-ink-2);color:var(--c-invert);
  border:1px solid var(--c-line-dark-2);border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  padding:18px 20px;max-width:680px;margin-inline:auto;
  display:none;
}
.cookie.is-visible{display:block}
.cookie p{font-size:.9rem;color:var(--c-invert-soft);margin-bottom:14px}
.cookie p a{color:#fff;font-weight:600}
.cookie__actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie__actions .btn{font-size:.9rem;padding:.62em 1.05em}

/* ---------- 16. Unterseiten: Seitenkopf / Breadcrumb / Prosa ---------- */
.page-hero{position:relative;background:var(--c-ink);color:var(--c-invert);overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:currentColor;
  -webkit-mask:url("../img/circuit-motif.webp") right -30px top -10px / 560px auto no-repeat;
          mask:url("../img/circuit-motif.webp") right -30px top -10px / 560px auto no-repeat;
  opacity:.09;pointer-events:none;
}
.page-hero__inner{position:relative;padding-block:clamp(34px,5vw,60px)}
.page-hero__icon{
  width:140px;height:140px;border-radius:var(--r-md);margin-bottom:30px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-ink-3);border:1px solid var(--c-line-dark-2);color:#fff;
}
.page-hero__icon .icon{width:86px;height:86px}
.page-hero h1{font-size:clamp(1.7rem,4.4vw,2.6rem)}
.page-hero__sub{margin-top:14px;max-width:60ch;color:var(--c-invert-soft);font-size:1.05rem}

.breadcrumb{padding-block:14px;background:var(--c-paper-2);border-bottom:1px solid var(--c-line)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.84rem;color:var(--c-text-mute);list-style:none;margin:0;padding:0}
.breadcrumb a{color:var(--c-text-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--c-ink);text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--c-text)}
.breadcrumb .sep{opacity:.6}

.prose{max-width:760px}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.35rem,2.8vw,1.7rem);margin-top:1.6em}
.prose h3{font-size:1.12rem;margin-top:1.4em;font-weight:700}
.prose p{color:var(--c-text);font-size:1.02rem}
.prose ul.bullets{display:grid;gap:10px;margin-top:.4em}
.prose ul.bullets li{position:relative;padding-left:26px;color:var(--c-text-soft)}
.prose ul.bullets li::before{
  content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:2px;
  background:var(--c-ink);
}
.prose a.inline{color:var(--c-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.prose a.inline:hover{text-decoration-thickness:2.5px}

.content-layout{display:grid;gap:clamp(28px,5vw,48px)}
.side-card{
  background:var(--c-paper-2);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:22px;
}
.side-card h3{font-size:1rem;font-weight:700;margin-bottom:12px}
.side-card .related{display:grid;gap:8px}
.side-card .related a{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--c-text);
  padding:9px 11px;border-radius:var(--r-sm);background:var(--c-paper);border:1px solid var(--c-line);
  font-size:.92rem;font-weight:600;transition:border-color .15s,transform .15s;
}
.side-card .related a:hover{border-color:var(--c-ink);transform:translateX(2px)}
.side-card .related .icon{width:18px;height:18px;color:var(--c-ink)}

/* Bild-Platzhalter */
.media-ph{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-line);background:var(--c-paper-3)}
.media-ph img{width:100%;aspect-ratio:8/5;object-fit:cover;display:block}
.media-ph figcaption{padding:10px 14px;font-size:.8rem;color:var(--c-text-mute);background:var(--c-paper);border-top:1px solid var(--c-line)}
.media-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

/* Info-Box innerhalb Prosa */
.callout{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--c-paper-2);border:1px solid var(--c-line);border-left:3px solid var(--c-ink);
  border-radius:var(--r-md);padding:16px 18px;
}
.callout .icon{width:22px;height:22px;color:var(--c-ink);flex:none;margin-top:2px}
.callout p{font-size:.95rem;color:var(--c-text-soft)}
.callout strong{color:var(--c-text)}

/* CTA-Streifen unten auf Unterseiten */
.cta-strip{
  position:relative;overflow:hidden;background:var(--c-ink);color:var(--c-invert);
  border-radius:var(--r-xl);padding:clamp(26px,4vw,40px);text-align:center;
}
.cta-strip::before{
  content:"";position:absolute;inset:0;
  background:currentColor;
  -webkit-mask:url("../img/circuit-motif.webp") center / 620px auto no-repeat;
          mask:url("../img/circuit-motif.webp") center / 620px auto no-repeat;
  opacity:.08;
}
.cta-strip__in{position:relative}
.cta-strip h2{font-size:clamp(1.4rem,3vw,1.9rem)}
.cta-strip p{margin-top:10px;color:var(--c-invert-soft);max-width:54ch;margin-inline:auto}
.cta-strip .btn{margin-top:22px}

/* ---------- 17. Responsive ---------- */
@media (min-width:600px){
  .tile-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .note-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:992px){
  .note-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .contact-grid{grid-template-columns:320px 1fr}
  .market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content-layout{grid-template-columns:1fr 300px;align-items:start}
  .content-layout .side-card{position:sticky;top:calc(var(--header-h) + 20px)}
}
@media (min-width:1320px){
  .hero__inner{grid-template-columns:1.05fr .95fr;align-items:center}
}

/* ---------- 18. Mobile-Navigation ---------- */
@media (max-width:1023px){
  .nav-toggle{display:inline-flex}
  .main-nav{
    position:fixed;inset:var(--header-h) 0 auto 0;margin:0;
    background:var(--c-ink);border-bottom:1px solid var(--c-line-dark);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
    max-height:calc(100dvh - var(--header-h));overflow:auto;
  }
  .main-nav.is-open{transform:translateY(0);opacity:1;visibility:visible}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:2px;padding:14px var(--gutter) 18px}
  .main-nav a{padding:.85em 1em;font-size:1.02rem}
  .header-badges{display:none}
}

/* Sehr kleine Screens: Marktplatz/Markt einspaltig schon via Basis */
@media (max-width:420px){
  .tile-grid{grid-template-columns:repeat(2,1fr)}
  .footer-b2b .txt{text-align:left}
}

/* ---------- 19. Reduzierte Bewegung / Druck ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media print{
  .site-header,.cookie,.cta-strip,.market-grid,.nav-toggle{display:none!important}
  body{color:#000;background:#fff}
}

/* =====================================================================
   Ende style.css · NX Store · Netrix GmbH · https://www.netrix.de
   ===================================================================== */