/* nuARC Brand Portal
   Die Werte in :root sind die verbindlichen Tokens aus Release C.2.
   Wer hier etwas aendert, aendert die Marke, nicht nur diese Seite. */

@font-face{font-family:'Geist';src:url('../fonts/Geist-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/Geist-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../fonts/GeistMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../fonts/GeistMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Markenfarben */
  --navy:#152a47; --navy2:#1d3a5f;
  --blue:#2e9fd6; --cyan:#37b6c4; --green:#84b940;
  /* Text und Flaeche */
  --ink:#1b2637; --sub:#55637a; --faint:#8b97a8;
  --line:#dde3ea; --panel:#f4f7fa; --tint:#eaf1f6;
  /* Fachbereiche */
  --ent:#1e6fb8; --ophtha:#77b227; --procto:#c76a1f; --evla:#7b4bbe;
  /* Schrift */
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Layout */
  --nav-w:286px; --gutter:16px; --radius:6px;
  --gradline:linear-gradient(90deg,var(--blue),var(--navy) 43%,var(--cyan) 68%,var(--green));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-weight:400;
     font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}

a{color:var(--navy2);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

/* ---------- Grundgeruest ---------------------------------------------- */
.layout{display:flex;align-items:flex-start}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--radius)}

/* ---------- Seitenleiste ---------------------------------------------- */
.nav{width:var(--nav-w);flex:0 0 var(--nav-w);height:100vh;position:sticky;top:0;
     background:var(--navy);color:#fff;display:flex;flex-direction:column;overflow:hidden}
.nav__brand{padding:26px 24px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.nav__brand img{width:140px;display:block}
.nav__brand span{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;
     letter-spacing:.14em;text-transform:uppercase;color:#7d93b1}
/* Sprachumschalter. Die aktive Sprache bleibt sichtbar, aber nicht anklickbar,
   damit klar ist, worauf man gerade schaut. */
.lang{display:flex;gap:2px;margin-top:14px;border:1px solid rgba(255,255,255,.18);
     border-radius:var(--radius);overflow:hidden;width:max-content}
.lang a,.lang span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
     text-transform:uppercase;padding:5px 11px;text-decoration:none;line-height:1.5}
.lang a{color:#9db0c8}
.lang a:hover{color:#fff;background:rgba(255,255,255,.09)}
.lang span[aria-current]{color:var(--navy);background:#fff;font-weight:500}

.navbar .lang{margin:0 0 0 auto;border-color:rgba(255,255,255,.22)}
.navbar .lang + button{margin-left:10px}

.nav__scroll{flex:1;overflow-y:auto;padding:18px 0 28px;scrollbar-width:thin;
     scrollbar-color:rgba(255,255,255,.22) transparent}
.nav__scroll::-webkit-scrollbar{width:8px}
.nav__scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
.nav__group{margin-bottom:4px}
.nav__top{display:flex;align-items:baseline;gap:10px;padding:8px 24px;color:#e7edf4;
     font-size:14.5px;font-weight:600;text-decoration:none}
.nav__top:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav__top.is-active{color:#fff;background:rgba(255,255,255,.07);
     box-shadow:inset 2px 0 0 var(--green)}
.nav__num{font-family:var(--mono);font-size:10.5px;color:#6f86a5;flex:0 0 auto}
.nav__sub{list-style:none;margin:0 0 10px;padding:0}
.nav__sub a{display:block;padding:5px 24px 5px 58px;color:#9db0c8;font-size:13.6px;
     text-decoration:none;border-left:2px solid transparent}
.nav__sub a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav__sub a.is-active{color:#fff;border-left-color:var(--green);background:rgba(255,255,255,.07)}
.nav__foot{padding:16px 24px;border-top:1px solid rgba(255,255,255,.12);
     font-family:var(--mono);font-size:10px;line-height:1.8;letter-spacing:.08em;
     text-transform:uppercase;color:#6f86a5}

.navbar{display:none}

/* ---------- Inhalt ------------------------------------------------------ */
.main{flex:1;min-width:0;padding:0 56px 140px;max-width:1080px}
.wrap{max-width:820px}

.hero{padding:76px 0 60px;border-bottom:1px solid var(--line);margin-bottom:8px}
.hero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.04;font-weight:700;color:var(--navy);
     letter-spacing:-.018em;margin:18px 0 0;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--green)}
.hero p{font-size:19px;font-weight:300;color:var(--sub);max-width:60ch;margin:22px 0 0}
.hero__mark{display:block;width:min(100%,430px);margin:0 0 36px}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
     color:var(--faint);margin:0;max-width:none}
.gradline{height:4px;border-radius:2px;background:var(--gradline)}

section[id]{padding-top:64px;scroll-margin-top:16px}
h2{font-size:clamp(25px,2.6vw,33px);line-height:1.15;font-weight:700;color:var(--navy);
     letter-spacing:-.014em;margin:0 0 6px}
h3{font-size:19px;font-weight:600;color:var(--navy);margin:44px 0 10px;letter-spacing:-.006em}
h4{font-size:15px;font-weight:600;color:var(--navy);margin:26px 0 6px}
p{margin:0 0 16px;max-width:66ch}
.lead{font-size:17.5px;font-weight:300;color:var(--sub);max-width:62ch;margin-bottom:26px}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.sec-head .gradline{width:76px}

ul,ol{max-width:66ch;padding-left:20px;margin:0 0 18px}
li{margin-bottom:7px}
strong{font-weight:600;color:var(--navy)}
code,kbd{font-family:var(--mono);font-size:.88em;background:var(--tint);color:var(--navy);
     padding:1.5px 6px;border-radius:3px}

/* ---------- Bausteine --------------------------------------------------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
     padding:52px 60px;display:flex;align-items:center;justify-content:center}
.stage img,.stage svg{width:100%;max-width:440px;display:block}
.stage--dark{background:var(--navy);border-color:var(--navy)}
.stage--mono{background:#fff}
.stage--tight{padding:30px 34px}

.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Bildunterschrift: nur das Label laeuft in Versalien, der Satz bleibt lesbar. */
.caption{font-size:13.5px;line-height:1.5;color:var(--sub);margin:10px 0 0;max-width:52ch}
.caption b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
     color:var(--navy2);font-weight:500;margin-right:5px}

.callout{border-left:3px solid var(--blue);background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;
     padding:18px 22px;margin:24px 0}
.callout p:last-child{margin-bottom:0}
.callout--green{border-left-color:var(--green)}
.callout--dark{background:var(--navy);border-left-color:var(--green);color:#cfdae7}
.callout--dark strong,.callout--dark b{color:#fff}
.callout--dark a{color:var(--green)}

.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
     text-transform:uppercase;padding:3px 8px;border-radius:3px;vertical-align:middle;
     background:var(--tint);color:var(--navy2);margin-left:10px;font-weight:500}
.badge--draft{background:#fdf3e3;color:#8a5a12}
.badge--fixed{background:#e6f2e2;color:#41651f}

/* Regeltafeln */
.rules{list-style:none;padding:0;margin:14px 0 0;max-width:none}
.rules li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:13px 0;
     border-top:1px solid var(--line);margin:0}
.rules li:last-child{border-bottom:1px solid var(--line)}
.rules .ico{margin-top:2px;color:var(--blue)}
.rules--no .ico{color:var(--navy2)}
.rules b{display:block;color:var(--navy);font-weight:600}
.rules span{color:var(--sub);font-size:15px}

/* Kennzahlen */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
     background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fact{background:#fff;padding:20px}
.fact b{display:block;font-size:27px;font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.1}
.fact span{display:block;margin-top:6px;font-size:13.5px;color:var(--sub)}

/* Farbfelder */
.sw{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.sw__chip{height:112px}
.sw__body{padding:14px 16px 16px}
.sw__body b{display:block;font-size:15px;color:var(--navy);font-weight:600}
.sw__body code{background:none;padding:0;font-size:13px;color:var(--sub);display:block;margin-top:3px}
.sw__body p{font-size:13.5px;color:var(--sub);margin:9px 0 0;max-width:none}

.axis{height:78px;border-radius:var(--radius);background:var(--gradline);margin:6px 0 0}

/* Tabellen */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin:10px 0 4px}
.tbl th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
     text-transform:uppercase;color:var(--faint);font-weight:400;padding:0 14px 9px 0;
     border-bottom:1px solid var(--line);vertical-align:bottom}
.tbl td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);color:var(--sub);vertical-align:top}
.tbl td:first-child{color:var(--navy);font-weight:600;white-space:nowrap}
.tbl .num{font-family:var(--mono);font-size:13px;color:var(--navy2);white-space:nowrap}
.tbl-scroll{overflow-x:auto;margin:10px -4px 4px;padding:0 4px}

/* Typografie-Muster */
.spec-row{border-top:1px solid var(--line);padding:20px 0;display:grid;
     grid-template-columns:minmax(0,1fr) 190px;gap:26px;align-items:baseline}
.spec-row:last-child{border-bottom:1px solid var(--line)}
.spec-row .meta{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--faint);
     text-transform:uppercase;line-height:1.7}
.t-h1{font-size:44px;font-weight:700;color:var(--navy);letter-spacing:-.018em;line-height:1.06}
.t-h2{font-size:31px;font-weight:700;color:var(--navy);letter-spacing:-.014em;line-height:1.14}
.t-h3{font-size:19px;font-weight:600;color:var(--navy);line-height:1.35}
.t-body{font-size:16px;font-weight:400;color:var(--ink);line-height:1.62}
.t-lead{font-size:17.5px;font-weight:300;color:var(--sub);line-height:1.55}
.t-small{font-size:13.5px;color:var(--sub)}
.t-mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* Schutzraum */
.clear{position:relative;border:1.5px dashed var(--blue);border-radius:var(--radius);
     padding:9%;background:var(--panel)}
.clear img{width:100%;display:block}
.clear::after{content:"1 × m";position:absolute;left:12px;top:10px;font-family:var(--mono);
     font-size:11px;letter-spacing:.1em;color:var(--blue)}

/* Downloads */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin-top:18px}
.dl a{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:var(--radius);
     padding:20px;text-decoration:none;background:#fff;transition:border-color .13s,box-shadow .13s}
.dl a:hover{border-color:var(--blue);box-shadow:0 2px 14px rgba(21,42,71,.07)}
.dl b{font-size:15.5px;color:var(--navy);font-weight:600}
.dl span{font-size:13.6px;color:var(--sub)}
.dl em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
     text-transform:uppercase;color:var(--faint);margin-top:4px}

/* Anwendungsbeispiele */
.mock{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.mock__bar{background:var(--navy);padding:13px 18px;display:flex;align-items:center;justify-content:space-between}
.mock__bar img{width:88px;display:block}
.mock__bar span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7d93b1}
.mock__body{padding:22px}
.mock__body p{font-size:14px;margin-bottom:10px}
.sig{font-size:14px;line-height:1.55;color:var(--sub)}
.sig b{display:block;color:var(--navy);font-size:15px}
.sig .rule{height:3px;width:120px;border-radius:2px;background:var(--gradline);margin:12px 0}
.sig img{width:104px;display:block;margin-bottom:10px}

.changelog{list-style:none;padding:0;max-width:none}
.changelog li{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:13px 0;
     border-top:1px solid var(--line);margin:0}
.changelog li:last-child{border-bottom:1px solid var(--line)}
.changelog time{font-family:var(--mono);font-size:12px;color:var(--faint)}

.footer{margin-top:90px;padding-top:26px;border-top:1px solid var(--line);
     font-size:13.5px;color:var(--faint);display:flex;flex-wrap:wrap;gap:6px 28px}

/* ---------- Schmale Fenster --------------------------------------------- */
@media (max-width:1040px){
  .layout{display:block}
  .nav{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-100%);
       transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .nav.is-open{transform:none}
  .navbar{display:flex;position:sticky;top:0;z-index:40;align-items:center;gap:14px;
       background:var(--navy);padding:11px var(--gutter)}
  .navbar img{width:104px;display:block}
  .navbar button{margin-left:auto;background:rgba(255,255,255,.1);border:0;color:#fff;
       border-radius:var(--radius);padding:9px 13px;font:inherit;font-size:14px;cursor:pointer;
       display:flex;align-items:center;gap:8px}
  .scrim{position:fixed;inset:0;background:rgba(10,20,35,.5);z-index:45;border:0;padding:0}
  .main{padding:0 var(--gutter) 100px;max-width:none}
  .hero{padding:44px 0 40px}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage{padding:34px}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .spec-row{grid-template-columns:1fr;gap:12px}
  .changelog li{grid-template-columns:1fr;gap:4px}
  .t-h1{font-size:33px}.t-h2{font-size:26px}
  .stage{padding:26px}
  .dl{grid-template-columns:1fr}
}

/* ---------- Druck -------------------------------------------------------- */
@media print{
  .nav,.navbar,.scrim,.dl{display:none!important}
  .main{padding:0;max-width:none}
  body{font-size:10.5pt}
  section[id]{padding-top:18pt;break-inside:auto}
  h2{break-after:avoid}h3,h4{break-after:avoid}
  .panel,.callout,.sw,.fact,.mock,.stage,.rules li,.spec-row{break-inside:avoid}
  .tbl tr{break-inside:avoid}
  .tbl thead{display:table-header-group}
  p,li{orphans:3;widows:3}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
}