@charset "utf-8";
/* ==========================================================================
   Nanomag GmbH — Corporate Design
   Farbwelt abgeleitet aus dem Firmenlogo:
     #E98D14  Pinselstrich-Ring   -> Markenfarbe
     #272727  Wortmarke           -> Anthrazit
     #F7F7F7  Innenfläche         -> heller Grund
   Keine externen Ressourcen (Fonts, Skripte, Tracker) — DSGVO-konform.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  color-scheme: light;

  --brand:      #E98D14;   /* Flächen, Akzente, Text auf dunklem Grund      */
  --brand-d:    #C4740A;   /* Hover                                         */
  --brand-t:    #94570A;   /* Text auf hellem Grund  — 5.8:1 gegen Weiß     */
  --brand-l:    #F5A83D;
  --brand-tint: #FDF3E4;
  --brand-tint2:#FAE6C8;

  --ink:      #272727;     /* 14.9:1 gegen Weiß                             */
  --ink-2:    #454545;
  --ink-d:    #161616;
  --ink-dd:   #0C0C0C;
  --muted:    #5F5F5F;     /*  6.4:1 gegen Weiß                             */
  --muted-2:  #8A8A8A;     /* nur für Nicht-Text (Linien, Icons)            */
  --line:     #E2E2E2;
  --line-2:   #D0D0D0;
  --paper:    #F7F7F7;
  --paper-2:  #EFEFEF;
  --white:    #FFFFFF;

  /* Diagramm-Semantik. Blau steht ausschließlich für Südpol / Kryo-Ende
     und ist bewusst KEINE Markenfarbe. */
  --pole-n:   #E98D14;
  --pole-s:   #2F6F91;
  --pole-s-l: #5E9EBF;
  --steel:    #8A949B;
  --steel-d:  #5A6469;
  --steel-l:  #C3CACE;

  --ok:       #1E7A4C;
  --warn:     #A85A0B;
  --bad:      #A32B22;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* fluide Typo-Skala */
  --t-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
  --t-sm:   clamp(.83rem, .80rem + .14vw, .92rem);
  --t-base: clamp(1rem,   .96rem + .18vw, 1.09rem);
  --t-md:   clamp(1.09rem,1.02rem + .34vw, 1.28rem);
  --t-lg:   clamp(1.32rem,1.18rem + .62vw, 1.70rem);
  --t-xl:   clamp(1.62rem,1.34rem + 1.24vw, 2.40rem);
  --t-2xl:  clamp(2.00rem,1.52rem + 2.10vw, 3.30rem);
  --t-3xl:  clamp(2.40rem,1.62rem + 3.40vw, 4.50rem);

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;
  --sp-9:6rem;   --sp-10:8rem;

  --wrap: 1220px;
  --wrap-narrow: 760px;
  --r-sm: 4px; --r: 8px; --r-lg: 14px; --r-xl: 22px;
  --shadow-1: 0 1px 2px rgba(12,12,12,.05), 0 2px 8px rgba(12,12,12,.04);
  --shadow-2: 0 2px 6px rgba(12,12,12,.06), 0 12px 32px rgba(12,12,12,.08);
  --shadow-3: 0 8px 24px rgba(12,12,12,.10), 0 28px 64px rgba(12,12,12,.12);
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
}
@media (max-width: 860px){ :root{ --header-h: 64px; } }

/* ---------- 2. Reset ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background:var(--white); color:var(--ink);
  font:400 var(--t-base)/1.65 var(--font);
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img,svg,video{ max-width:100%; height:auto; display:block }
h1,h2,h3,h4,h5{ margin:0; font-weight:650; line-height:1.14; letter-spacing:-.021em; color:var(--ink) }
h1{ font-size:var(--t-3xl); letter-spacing:-.032em }
h2{ font-size:var(--t-2xl); letter-spacing:-.027em }
h3{ font-size:var(--t-lg) }
h4{ font-size:var(--t-md) }
p,ul,ol,dl,figure,table,pre{ margin:0 0 var(--sp-4) }
p:last-child,ul:last-child,ol:last-child{ margin-bottom:0 }
a{ color:var(--brand-t); text-decoration-thickness:1px; text-underline-offset:.18em }
a:hover{ color:var(--ink) }
strong,b{ font-weight:650 }
small{ font-size:var(--t-sm) }
hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-7) 0 }
:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:2px }
::selection{ background:var(--brand); color:#fff }
table{ border-collapse:collapse; width:100% }
figure{ margin:0 }
button{ font:inherit; color:inherit }

.skip-link{
  position:absolute; left:var(--sp-4); top:-100px; z-index:200;
  background:var(--ink-dd); color:#fff; padding:.7em 1.2em;
  border-radius:var(--r); font-weight:600; font-size:var(--t-sm);
  transition:top .15s var(--ease);
}
.skip-link:focus{ top:var(--sp-4); color:#fff }
.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- 3. Layout --------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem) }
.wrap-n{ max-width:var(--wrap-narrow) }
.sec{ padding-block:clamp(3.4rem,8vw,7rem) }
.sec-sm{ padding-block:clamp(2.4rem,5vw,4rem) }
.sec-tight{ padding-block:clamp(1.6rem,3vw,2.4rem) }

/* dunkle Sektionen: Tokens invertieren, damit Komponenten unverändert erben */
.on-dark{
  background:var(--ink-d); color:#EDEDED;
  --ink:#FFFFFF; --ink-2:#D8D8D8; --muted:#A9A9A9; --muted-2:#7A7A7A;
  --line:#2E2E2E; --line-2:#3A3A3A; --paper:#1C1C1C; --paper-2:#232323;
  --white:#141414; --brand-t:var(--brand-l);
}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:#fff }
.on-deep{ background:var(--ink-dd) }
.on-paper{ background:var(--paper) }
.grid{ display:grid; gap:clamp(1.1rem,2.6vw,2rem) }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.g-split{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(1.8rem,5vw,4.5rem) }
.g-split-w{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); align-items:center; gap:clamp(1.8rem,5vw,4.5rem) }
@media (max-width:980px){ .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)) } .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)) } .g-split,.g-split-w{ grid-template-columns:1fr } }
@media (max-width:640px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr } }
.center{ text-align:center }
.mt-5{ margin-top:var(--sp-5) } .mt-6{ margin-top:var(--sp-6) } .mt-7{ margin-top:var(--sp-7) }

/* ---------- 4. Typo-Bausteine ------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font:650 var(--t-xs)/1 var(--font); letter-spacing:.15em; text-transform:uppercase;
  color:var(--brand-t); margin-bottom:var(--sp-4);
}
.eyebrow::before{ content:""; width:1.9em; height:2px; background:var(--brand); flex:none }
.on-dark .eyebrow{ color:var(--brand) }
.lead{ font-size:var(--t-md); color:var(--ink-2); line-height:1.6; max-width:62ch }
.sec-head{ max-width:68ch; margin-bottom:clamp(2rem,4vw,3.2rem) }
.sec-head.center{ margin-inline:auto }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.num{ font-variant-numeric:tabular-nums }
.hl{ color:var(--brand-t); font-weight:650 }
.on-dark .hl{ color:var(--brand) }

/* ---------- 5. Buttons -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  padding:.92em 1.55em; border-radius:var(--r); border:1.5px solid transparent;
  font:650 var(--t-sm)/1 var(--font); letter-spacing:.005em;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn svg{ width:1.05em; height:1.05em; flex:none }
.btn-1{ background:var(--brand); color:#1A1205; border-color:var(--brand) }
.btn-1:hover{ background:var(--brand-d); border-color:var(--brand-d); color:#1A1205 }
.btn-2{ background:transparent; color:var(--ink); border-color:var(--line-2) }
.btn-2:hover{ border-color:var(--ink); color:var(--ink); background:transparent }
.on-dark .btn-2{ color:#fff; border-color:#4A4A4A }
.on-dark .btn-2:hover{ border-color:#fff; color:#fff }
.btn-3{ background:var(--ink); color:#fff; border-color:var(--ink) }
.btn-3:hover{ background:var(--ink-dd); border-color:var(--ink-dd); color:#fff }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6) }
.btn-row.center{ justify-content:center }
.lnk{
  display:inline-flex; align-items:center; gap:.5em; font-weight:650;
  font-size:var(--t-sm); text-decoration:none; color:var(--brand-t);
  border-bottom:1.5px solid currentColor; padding-bottom:.15em;
  transition:gap .18s var(--ease), color .18s var(--ease);
}
.lnk:hover{ gap:.9em; color:var(--ink) }
.lnk svg{ width:.95em; height:.95em }
.on-dark .lnk{ color:var(--brand) }
.on-dark .lnk:hover{ color:#fff }

/* ---------- 6. Header --------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s var(--ease), background .2s var(--ease);
}
.hdr.is-stuck{ box-shadow:0 1px 0 var(--line), 0 6px 26px rgba(12,12,12,.07) }
.hdr-in{ display:flex; align-items:center; gap:var(--sp-5); height:var(--header-h) }
.brand{ display:flex; align-items:center; flex:none; margin-right:auto; text-decoration:none }
.brand img{ height:42px; width:auto }
@media (max-width:860px){ .brand img{ height:34px } }
.nav{ display:flex; align-items:center; gap:clamp(.5rem,1.6vw,1.6rem) }
.nav a{
  position:relative; text-decoration:none; color:var(--ink-2);
  font-weight:600; font-size:var(--t-sm); padding:.5em .1em; white-space:nowrap;
  transition:color .16s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav a:hover{ color:var(--ink) }
.nav a:hover::after{ transform:scaleX(1) }
.nav a[aria-current="page"]{ color:var(--ink) }
.nav a[aria-current="page"]::after{ transform:scaleX(1) }
.hdr-side{ display:flex; align-items:center; gap:var(--sp-3); flex:none }
.lang{ display:flex; align-items:center; gap:.15em; font-size:var(--t-xs); font-weight:650 }
.lang a,.lang span{ padding:.4em .55em; border-radius:var(--r-sm); text-decoration:none; line-height:1 }
.lang a{ color:var(--muted) }
.lang a:hover{ color:var(--ink); background:var(--paper) }
.lang [aria-current="true"]{ color:var(--ink); background:var(--paper-2) }
.lang i{ font-style:normal; color:var(--line-2) }
.hdr .btn{ padding:.72em 1.15em }
.burger{
  display:none; width:42px; height:42px; border:1px solid var(--line-2);
  border-radius:var(--r); background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex:none;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:background .15s }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink);
  transition:transform .22s var(--ease), top .22s var(--ease);
}
.burger span::before{ top:-6px } .burger span::after{ top:6px }
.burger[aria-expanded="true"] span{ background:transparent }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg) }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg) }
@media (max-width:980px){
  .burger{ display:flex }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--white);
    border-bottom:1px solid var(--line); padding:var(--sp-3) clamp(1.1rem,4vw,2.5rem) var(--sp-5);
    box-shadow:var(--shadow-2); max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible }
  .nav a{ padding:.95em 0; border-bottom:1px solid var(--line); font-size:var(--t-base) }
  .nav a::after{ display:none }
  .nav a[aria-current="page"]{ color:var(--brand-t) }
  .hdr-side .btn{ display:none }
}

/* ---------- 7. Hero ----------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; background:var(--ink-dd); color:#fff;
  padding-block:clamp(3.2rem,8vw,6.5rem);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 85% at 78% 18%, rgba(233,141,20,.20), transparent 62%),
    radial-gradient(80% 70% at 8% 92%, rgba(47,111,145,.16), transparent 66%);
}
.hero::after{ /* feines technisches Raster */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.30;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}
.hero > .wrap{ position:relative; z-index:1 }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); gap:clamp(2rem,5vw,4.5rem); align-items:center }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:var(--sp-7) } }
.hero-logo{ margin-bottom:clamp(1.4rem,3vw,2.2rem) }
.hero-logo img{ width:clamp(190px,22vw,272px) }
.hero h1{ color:#fff; max-width:19ch }
.hero h1 em{ font-style:normal; color:var(--brand); display:block }
.hero-sub{ margin-top:var(--sp-5); font-size:var(--t-md); color:#C9C9C9; max-width:52ch; line-height:1.6 }
.hero-claim{
  display:inline-flex; align-items:center; gap:.7em; margin-bottom:var(--sp-5);
  padding:.5em 1em .5em .75em; border:1px solid rgba(233,141,20,.38);
  border-radius:100px; background:rgba(233,141,20,.09);
  font:650 var(--t-xs)/1 var(--font); letter-spacing:.11em; text-transform:uppercase; color:var(--brand);
}
.hero-claim b{ width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none }
.hero-figure{ position:relative }
.hero-figure svg{ width:100%; height:auto; overflow:visible }

/* ---------- 8. KPI-Band ------------------------------------------------- */
.kpis{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line) }
.kpi{ padding:clamp(1.4rem,3vw,2.2rem) clamp(1rem,2vw,1.6rem); border-right:1px solid var(--line) }
.kpi:last-child{ border-right:0 }
.kpi-v{
  font:650 clamp(1.5rem,1.1rem + 1.7vw,2.35rem)/1 var(--font);
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:.12em;
}
.kpi-v i{ font-style:normal; font-size:.5em; font-weight:600; color:var(--brand-t); letter-spacing:0 }
.on-dark .kpi-v i{ color:var(--brand) }
.kpi-k{ margin-top:.7em; font-size:var(--t-sm); color:var(--muted); line-height:1.45 }
@media (max-width:1180px){
  .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .kpi:nth-child(3n){ border-right:0 }
  .kpi:nth-child(-n+3){ border-bottom:1px solid var(--line) }
  .kpi:last-child{ grid-column:span 2 }
}
@media (max-width:860px){
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .kpi{ border-right:1px solid var(--line) }
  .kpi:nth-child(2n){ border-right:0 }
  .kpi:nth-child(-n+4){ border-bottom:1px solid var(--line) }
  .kpi:last-child{ grid-column:1 / -1; border-right:0 }
}

/* ---------- 9. Karten --------------------------------------------------- */
.card{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.4rem,2.6vw,2.1rem);
  display:flex; flex-direction:column; gap:var(--sp-3);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card-hover:hover{ border-color:var(--line-2); box-shadow:var(--shadow-2); transform:translateY(-3px) }
.on-dark .card{ background:var(--paper); border-color:var(--line) }
.card h3{ font-size:var(--t-md) }
.card p{ color:var(--muted); font-size:var(--t-sm); line-height:1.62 }
.card .lnk{ margin-top:auto; align-self:flex-start; padding-top:var(--sp-2) }
.card-n{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:2.5rem; height:2.5rem; border-radius:50%; background:var(--brand-tint);
  border:1px solid var(--brand-tint2);
  font:650 var(--t-sm)/1 var(--mono); color:var(--brand-t); font-variant-numeric:tabular-nums;
}
.on-dark .card-n{ background:rgba(233,141,20,.13); border-color:rgba(233,141,20,.30); color:var(--brand) }
.ico{ width:2.6rem; height:2.6rem; flex:none; color:var(--brand-t) }
.on-dark .ico{ color:var(--brand) }
.card-fig{ margin:var(--sp-2) 0 var(--sp-1); border-radius:var(--r); overflow:hidden; background:var(--paper) }
.on-dark .card-fig{ background:rgba(255,255,255,.03) }
.card-fig svg{ width:100% }

/* Feature-Zeile mit großer Nummer */
.feat{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.2rem,3vw,2.4rem); align-items:start }
.feat-n{
  font:650 clamp(2.6rem,2rem + 2.4vw,4.2rem)/.85 var(--font); letter-spacing:-.05em;
  color:var(--brand); opacity:.9; font-variant-numeric:tabular-nums;
}

/* ---------- 10. Tabellen ------------------------------------------------ */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-lg) }
.tbl{ min-width:640px; font-size:var(--t-sm) }
.tbl caption{ text-align:left; padding:var(--sp-4) var(--sp-5) 0; color:var(--muted); font-size:var(--t-xs) }
.tbl th,.tbl td{ padding:.92em 1.1em; text-align:left; border-bottom:1px solid var(--line); vertical-align:top }
.tbl thead th{
  background:var(--paper); font-weight:650; font-size:var(--t-xs);
  letter-spacing:.075em; text-transform:uppercase; color:var(--muted);
  position:sticky; top:0; white-space:nowrap;
}
.tbl thead th .unit{ text-transform:none; letter-spacing:.03em }
.tbl tbody tr:last-child td{ border-bottom:0 }
.tbl tbody th{ font-weight:600; color:var(--ink) }
.tbl .own{ background:var(--brand-tint) }
.on-dark .tbl .own{ background:rgba(233,141,20,.10) }
.tbl thead th.own{ background:var(--brand-tint2); color:var(--brand-t) }
.on-dark .tbl thead th.own{ background:rgba(233,141,20,.18); color:var(--brand) }
.tbl td.num,.tbl th.num{ font-variant-numeric:tabular-nums; white-space:nowrap }
.v-yes{ color:var(--ok); font-weight:650 } .v-no{ color:var(--bad); font-weight:650 }
.v-mid{ color:var(--warn); font-weight:650 }
.on-dark .v-yes{ color:#5FCB92 } .on-dark .v-no{ color:#F08A80 } .on-dark .v-mid{ color:#F0B060 }

/* Spezifikationsliste */
.specs{ display:grid; gap:0; border-top:1px solid var(--line) }
.spec{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-4);
       padding:.95em 0; border-bottom:1px solid var(--line); align-items:baseline }
.spec dt{ color:var(--muted); font-size:var(--t-sm) }
.spec dd{ margin:0; font-weight:650; font-family:var(--mono); font-size:var(--t-sm);
          font-variant-numeric:tabular-nums; text-align:right; color:var(--ink) }

/* Merkmalsliste mit Häkchen */
.checks{ list-style:none; padding:0; display:grid; gap:.85em }
.checks li{ display:grid; grid-template-columns:1.35em minmax(0,1fr); gap:.85em; align-items:start;
            font-size:var(--t-sm); line-height:1.6; color:var(--ink-2) }
.checks li::before{
  content:""; width:1.35em; height:1.35em; border-radius:50%; margin-top:.06em;
  background:var(--brand-tint) center/.72em no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394570A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4.4'/%3E%3C/svg%3E");
}
.on-dark .checks li::before{
  background-color:rgba(233,141,20,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F5A83D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4.4'/%3E%3C/svg%3E");
}

/* ---------- 11. Akkordeon (FAQ) ----------------------------------------- */
.acc{ border-top:1px solid var(--line) }
.acc details{ border-bottom:1px solid var(--line) }
.acc summary{
  cursor:pointer; list-style:none; padding:1.15em 3em 1.15em 0; position:relative;
  font-weight:650; font-size:var(--t-md); line-height:1.35; color:var(--ink);
  transition:color .16s var(--ease);
}
.acc summary::-webkit-details-marker{ display:none }
.acc summary:hover{ color:var(--brand-t) }
.on-dark .acc summary:hover{ color:var(--brand) }
.acc summary::after{
  content:""; position:absolute; right:.25em; top:50%; width:1.05em; height:1.05em;
  margin-top:-.52em; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease); color:var(--brand-t);
}
.acc details[open] summary::after{ transform:rotate(135deg) }
.acc-body{ padding:0 0 1.5em; max-width:74ch; color:var(--muted); font-size:var(--t-sm); line-height:1.68 }
.acc-body p+p{ margin-top:.85em }

/* ---------- 12. Callout / Zitat ----------------------------------------- */
.callout{
  border-left:3px solid var(--brand); background:var(--brand-tint);
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1.2rem,2.6vw,1.9rem);
  border-radius:0 var(--r) var(--r) 0; font-size:var(--t-sm); line-height:1.65;
}
.callout strong{ color:var(--brand-t) }
.on-dark .callout{ background:rgba(233,141,20,.09) }
.on-dark .callout strong{ color:var(--brand) }
.callout.warn{ border-left-color:var(--warn); background:#FFF6E8 }
.callout.warn strong{ color:#7A4207 }
.quote{ font-size:var(--t-lg); line-height:1.38; font-weight:600; letter-spacing:-.02em; max-width:38ch }
.quote-src{ margin-top:var(--sp-4); font-size:var(--t-sm); color:var(--muted) }
.pill{
  display:inline-block; padding:.42em .85em; border-radius:100px;
  background:var(--paper-2); border:1px solid var(--line);
  font:600 var(--t-xs)/1.3 var(--font); color:var(--muted);
}
.pill-b{ background:var(--brand-tint); border-color:var(--brand-tint2); color:var(--brand-t) }
.on-dark .pill-b{ background:rgba(233,141,20,.13); border-color:rgba(233,141,20,.3); color:var(--brand) }
.tags{ display:flex; flex-wrap:wrap; gap:.5em }

/* ---------- 13. Formular ------------------------------------------------ */
.form{ display:grid; gap:var(--sp-4) }
.f-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4) }
@media (max-width:640px){ .f-row{ grid-template-columns:1fr } }
.field{ display:grid; gap:.45em; align-content:start }
.field label{ font-weight:600; font-size:var(--t-sm); color:var(--ink) }
.field .req{ color:var(--bad); font-weight:700 }
.field .hint{ font-size:var(--t-xs); color:var(--muted); line-height:1.5 }
.field input,.field textarea,.field select{
  font:400 var(--t-sm)/1.5 var(--font); color:var(--ink); background:var(--white);
  border:1.5px solid var(--line-2); border-radius:var(--r); padding:.82em .95em;
  width:100%; transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5F5F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8em center; background-size:1.05em;
  padding-right:2.6em;
}
.field textarea{ min-height:9.5em; resize:vertical }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(233,141,20,.18);
}
.field input:user-invalid,.field textarea:user-invalid{ border-color:var(--bad) }
.consent{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.85em; align-items:start }
.consent input[type=checkbox]{
  width:1.25rem; height:1.25rem; margin:.18em 0 0; flex:none; accent-color:var(--brand);
  -webkit-appearance:auto; appearance:auto; border-radius:var(--r-sm);
}
.consent label{ font-size:var(--t-sm); font-weight:400; line-height:1.6; color:var(--ink-2) }
.hp{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---------- 14. Kontaktzeile ------------------------------------------- */
.cbox{ display:grid; gap:var(--sp-5) }
.cline{ display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:var(--sp-4); align-items:start }
.cline svg{ width:2.5rem; height:2.5rem; color:var(--brand-t) }
.on-dark .cline svg{ color:var(--brand) }
.cline dt{ font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650 }
.cline dd{ margin:.3em 0 0; font-size:var(--t-md); font-weight:600 }
.cline dd a{ text-decoration:none; color:var(--ink) }
.cline dd a:hover{ color:var(--brand-t) }
.on-dark .cline dd a:hover{ color:var(--brand) }
.cline dd small{ display:block; font-weight:400; font-size:var(--t-sm); color:var(--muted); margin-top:.25em }

/* ---------- 15. Footer -------------------------------------------------- */
.ftr{ background:var(--ink-dd); color:#B4B4B4; font-size:var(--t-sm) }
.ftr-top{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
          gap:clamp(1.8rem,4vw,3.4rem); padding-block:clamp(2.8rem,6vw,4.6rem) }
@media (max-width:980px){ .ftr-top{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .ftr-top{ grid-template-columns:1fr } }
.ftr-brand img{ width:180px; margin-bottom:var(--sp-4) }
.ftr-brand p{ color:#9A9A9A; max-width:34ch; line-height:1.65 }
.ftr h2,.ftr h3{ color:#fff; font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase;
         font-weight:650; margin-bottom:var(--sp-4) }
.ftr ul{ list-style:none; padding:0; margin:0; display:grid; gap:.72em }
.ftr a{ color:#B4B4B4; text-decoration:none; transition:color .16s var(--ease) }
.ftr a:hover{ color:var(--brand) }
.ftr address{ font-style:normal; line-height:1.75; color:#B4B4B4 }
.ftr-bot{
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); align-items:center;
  justify-content:space-between; padding-block:var(--sp-5);
  border-top:1px solid #232323; font-size:var(--t-xs); color:#8A8A8A;
}
.ftr-bot nav{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4) }
.social{ display:inline-flex; align-items:center; gap:.6em; font-weight:600 }
.social svg{ width:1.3em; height:1.3em; flex:none }
.li-badge{
  display:inline-flex; align-items:center; gap:.7em; padding:.6em 1em;
  border:1px solid #2E2E2E; border-radius:var(--r); text-decoration:none;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.li-badge:hover{ border-color:var(--brand); background:rgba(233,141,20,.07) }
.li-badge svg{ width:1.4em; height:1.4em; flex:none; color:var(--brand) }
.li-badge b{ display:block; color:#fff; font-weight:650; font-size:var(--t-sm) }
.li-badge span{ display:block; color:#8A8A8A; font-size:var(--t-xs) }

/* ---------- 16. Seitenkopf (Unterseiten) -------------------------------- */
.phead{ background:var(--ink-dd); color:#fff; padding-block:clamp(2.6rem,6vw,4.6rem); position:relative; overflow:hidden }
.phead::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 120% at 88% 12%, rgba(233,141,20,.17), transparent 60%);
}
.phead > .wrap{ position:relative }
.phead h1{ color:#fff; font-size:var(--t-2xl); max-width:26ch }
.phead .lead{ color:#C4C4C4; margin-top:var(--sp-4) }
.crumbs{ display:flex; flex-wrap:wrap; gap:.5em; align-items:center;
         font-size:var(--t-xs); color:#8A8A8A; margin-bottom:var(--sp-4) }
.crumbs a{ color:#8A8A8A; text-decoration:none }
.crumbs a:hover{ color:var(--brand) }
.crumbs span[aria-hidden]{ color:#4A4A4A }

/* ---------- 17. Anwendungs-Kacheln -------------------------------------- */
.app-tile{
  position:relative; overflow:hidden; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--white); display:flex; flex-direction:column;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.app-tile:hover{ border-color:var(--line-2); box-shadow:var(--shadow-2); transform:translateY(-3px) }
.app-tile figure{ background:var(--ink-dd); position:relative; aspect-ratio:16/10 }
.app-tile figure svg{ position:absolute; inset:0; width:100%; height:100% }
.app-tile-b{ padding:clamp(1.1rem,2.2vw,1.6rem); display:flex; flex-direction:column; gap:.6em; flex:1 }
.app-tile h3{ font-size:var(--t-md) }
.app-tile p{ color:var(--muted); font-size:var(--t-sm); line-height:1.6; margin:0 }
.app-tile .pill{ align-self:flex-start; margin-top:auto }

/* ---------- 18. Prozess-Schritte ---------------------------------------- */
.steps{ counter-reset:s; display:grid; gap:0 }
.step{
  counter-increment:s; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.1rem,2.6vw,2rem); padding:clamp(1.4rem,3vw,2.2rem) 0;
  border-bottom:1px solid var(--line);
}
.step:first-child{ border-top:1px solid var(--line) }
.step::before{
  content:counter(s,decimal-leading-zero);
  font:650 var(--t-md)/1 var(--mono); color:var(--brand-t);
  padding-top:.2em; font-variant-numeric:tabular-nums;
}
.on-dark .step::before{ color:var(--brand) }
.step h3{ font-size:var(--t-md); margin-bottom:.5em }
.step p{ color:var(--muted); font-size:var(--t-sm); margin:0; max-width:70ch }

/* ---------- 19. Reveal-Animation ---------------------------------------- */
/* Wichtig: Inhalte sind standardmäßig SICHTBAR. Versteckt wird nur, wenn
   main.js die Klasse .rv-on setzt — und das tut es erst, wenn der
   IntersectionObserver erfolgreich angelegt wurde. Andernfalls bliebe die
   Seite bei einem JavaScript-Fehler dauerhaft leer. */
.rv-on [data-rv]{ opacity:0; transform:translateY(18px);
                  transition:opacity .6s var(--ease), transform .6s var(--ease) }
.rv-on [data-rv].rv-in{ opacity:1; transform:none }
.rv-on [data-rv][data-rv-d="1"]{ transition-delay:.08s }
.rv-on [data-rv][data-rv-d="2"]{ transition-delay:.16s }
.rv-on [data-rv][data-rv-d="3"]{ transition-delay:.24s }
.rv-on [data-rv][data-rv-d="4"]{ transition-delay:.32s }
@media (prefers-reduced-motion: reduce){
  .rv-on [data-rv]{ opacity:1!important; transform:none!important; transition:none!important }
  .spin{ animation:none!important }
  *{ animation-duration:.001s!important; animation-iteration-count:1!important }
}
.spin{ animation:spin 26s linear infinite; transform-origin:center }
@keyframes spin{ to{ transform:rotate(360deg) } }
.pulse{ animation:pulse 3.6s var(--ease) infinite }
@keyframes pulse{ 0%,100%{ opacity:.28 } 50%{ opacity:.9 } }
.dash{ animation:dash 2.4s linear infinite }
@keyframes dash{ to{ stroke-dashoffset:-40 } }

/* ---------- 20. Rechtstexte --------------------------------------------- */
.legal{ max-width:76ch; font-size:var(--t-sm); line-height:1.75 }
.legal h2{
  font-size:var(--t-lg); margin:clamp(2.2rem,4vw,3.2rem) 0 var(--sp-4);
  padding-top:var(--sp-5); border-top:1px solid var(--line);
}
.legal h2:first-of-type{ margin-top:var(--sp-6) }
.legal h3{ font-size:var(--t-md); margin:var(--sp-6) 0 var(--sp-3) }
.legal h4{ font-size:var(--t-base); margin:var(--sp-5) 0 var(--sp-2) }
.legal p,.legal li{ color:var(--ink-2) }
.legal ul,.legal ol{ padding-left:1.35em }
.legal li{ margin-bottom:.5em }
.legal ol.lv1{ list-style:none; counter-reset:l1; padding-left:0 }
.legal ol.lv1 > li{ counter-increment:l1; margin-bottom:var(--sp-5) }
.legal ol.lv1 > li > h3::before{ content:counter(l1) ". "; color:var(--brand-t) }
.legal dl{ margin:0 0 var(--sp-4) }
.legal dt{ font-weight:650; margin-top:var(--sp-3); color:var(--ink) }
.legal dd{ margin:.2em 0 0 }
.legal address{ font-style:normal; line-height:1.8 }
.legal .toc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
             padding:clamp(1.2rem,2.4vw,1.8rem); margin-bottom:var(--sp-7) }
.legal .toc h2{ border:0; margin:0 0 var(--sp-3); padding:0; font-size:var(--t-md) }
.legal .toc ol{ margin:0; padding-left:1.3em; columns:2; column-gap:2rem }
@media (max-width:640px){ .legal .toc ol{ columns:1 } }
.legal .toc li{ margin-bottom:.35em; break-inside:avoid }
.legal .upd{ color:var(--muted); font-size:var(--t-xs); margin-bottom:var(--sp-6) }

/* Platzhalter, die vor Veröffentlichung ersetzt werden müssen */
.todo{
  display:inline-block; background:#FFF3D4; color:#7A4207;
  border:1px dashed #D9A94A; border-radius:var(--r-sm);
  padding:.1em .5em; font:600 .92em/1.4 var(--mono); font-variant-numeric:tabular-nums;
}
.todo-box{
  background:#FFF8EA; border:1px dashed #D9A94A; border-radius:var(--r);
  padding:clamp(1rem,2vw,1.4rem); margin:var(--sp-5) 0; font-size:var(--t-sm); color:#6B3D06;
}
.todo-box strong{ color:#5A3205 }
.todo-box p:last-child{ margin-bottom:0 }

/* ---------- 21. Diverses ------------------------------------------------ */
.cta-band{ background:var(--brand); color:#1A1205 }
.cta-band h2{ color:#1A1205; max-width:30ch }
.cta-band p{ color:#3A2A08; max-width:56ch }
.cta-band .btn-3{ background:#1A1205; border-color:#1A1205 }
.cta-band .btn-3:hover{ background:#000; border-color:#000 }
.cta-band .btn-2{ color:#1A1205; border-color:rgba(26,18,5,.35) }
.cta-band .btn-2:hover{ border-color:#1A1205 }
.rule-top{ border-top:1px solid var(--line); padding-top:clamp(1.6rem,3vw,2.4rem) }
.notice{ background:var(--paper); border-radius:var(--r-lg); padding:clamp(1.2rem,2.4vw,1.8rem);
         font-size:var(--t-sm); color:var(--muted) }
.map-note{
  border:1px dashed var(--line-2); border-radius:var(--r-lg); background:var(--paper);
  padding:clamp(1.4rem,3vw,2.2rem); text-align:center; font-size:var(--t-sm); color:var(--muted);
}
.figcap{ margin-top:var(--sp-3); font-size:var(--t-xs); color:var(--muted); line-height:1.55 }
.on-dark .figcap{ color:var(--muted) }

/* ---------- 22. Druck --------------------------------------------------- */
@media print{
  .hdr,.ftr-top,.cta-band,.burger,.skip-link,.hero-figure,.lang{ display:none!important }
  body{ font-size:10.5pt; color:#000; background:#fff }
  .hero,.phead,.on-dark,.on-deep{ background:#fff!important; color:#000!important }
  .hero h1,.phead h1,.on-dark h1,.on-dark h2,.on-dark h3{ color:#000!important }
  a{ color:#000; text-decoration:underline }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555 }
  .sec{ padding-block:1.2rem }
  .acc details{ break-inside:avoid } .acc details:not([open]) .acc-body{ display:block }
  .card,.tbl-scroll{ break-inside:avoid; border-color:#bbb }
  h1,h2,h3{ break-after:avoid }
}

/* ---------- 23. Alternierende Zweispalter ------------------------------- */
.g-alt{ direction:rtl }
.g-alt > *{ direction:ltr }
@media (max-width:980px){ .g-alt{ direction:ltr } }

/* KPI: langer Wert (Temperaturspanne) darf nicht umbrechen */
.kpi-v{ white-space:nowrap }
.kpi-v-sm{ font-size:clamp(1.18rem,.92rem + 1.05vw,1.72rem) }

/* Vergleichstabelle: eigene Spalte hervorheben, ohne bewertende Farben */
.tbl td.own{ font-weight:650; color:var(--ink) }

/* ---------- 24. Mobile-Ergänzungen ------------------------------------- */
/* CTA im ausgeklappten Mobilmenü */
.nav-cta{ display:none }
@media (max-width:980px){
  .nav-cta{ display:inline-flex; margin-top:var(--sp-5); width:100% }
}
/* Breite technische Grafiken bleiben auf kleinen Displays lesbar, indem sie
   seitlich scrollbar werden — statt die Beschriftung unter 5 px zu schrumpfen. */
@media (max-width:760px){
  figure.fig-wide{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:var(--sp-3);
    scrollbar-width:thin;
  }
  figure.fig-wide > svg{ min-width:600px }
  figure.fig-wide::after{
    content:"↔"; display:block; text-align:right;
    font-size:var(--t-xs); color:var(--muted); margin-top:-.4em;
  }
  .hero-figure svg{ max-width:min(100%,460px); margin-inline:auto }
}

/* ---------- 25. Download-Karten ---------------------------------------- */
.dl-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
         gap:var(--sp-4); margin:var(--sp-6) 0 }
.dl{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr) auto; gap:var(--sp-4);
  align-items:center; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(.95rem,2vw,1.2rem) clamp(1rem,2.2vw,1.35rem); background:var(--white);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease),
             transform .18s var(--ease);
}
.dl:hover{ border-color:var(--brand); box-shadow:var(--shadow-2); transform:translateY(-2px);
           color:inherit }
.dl svg{ width:2.6rem; height:2.6rem; color:var(--brand-t) }
.dl b{ display:block; font-size:var(--t-sm); font-weight:650; line-height:1.35; color:var(--ink) }
.dl span{ display:block; font-size:var(--t-xs); color:var(--muted); margin-top:.25em;
          font-variant-numeric:tabular-nums }
.dl i{ font-style:normal; color:var(--brand-t); flex:none }
.dl i svg{ width:1.25rem; height:1.25rem }
.on-dark .dl{ background:var(--paper) }