/* OPC UA Connect — the independent OPC UA reference. Technical editorial theme. */
:root{
  --bg:#ffffff; --surface:#f6f8fc; --surface2:#eef2f8; --ink:#0e1b2e; --ink2:#1c2c44;
  --muted:#5b6b82; --line:#e4eaf2; --accent:#1f6feb; --accent-d:#134fbf; --teal:#0ea5a5;
  --code-bg:#0d1a2b; --code-ink:#e7eefc; --ok:#12805c; --warn:#b45309;
  --maxw:1160px; --read:760px;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
h1,h2,h3,h4{line-height:1.2;color:var(--ink);margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.4vw,3.3rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.28rem}
p{margin:0 0 1.1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-weight:700;color:var(--accent)}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;padding:12px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-dark{background:#fff;color:var(--ink)}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.08rem;color:var(--ink);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .mk{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--teal));display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:var(--ink2);font-size:.93rem;font-weight:500}
.nav-links a:hover{color:var(--accent);text-decoration:none}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.lang a.active{color:var(--accent);font-weight:700}
.burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--ink)}
@media(max-width:900px){
  .nav-links{position:fixed;inset:66px 0 auto 0;flex-direction:column;background:#fff;padding:20px 24px;gap:16px;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:.25s}
  .nav-links.open{transform:translateY(0)}
  .burger{display:block}.nav-cta-d{display:none}
}

/* Hero (dark) */
.hero{background:radial-gradient(1000px 500px at 70% -20%,rgba(31,111,235,.35),transparent 60%),linear-gradient(180deg,#0b1a2f,#0e2038);color:#eaf1fb;padding:88px 0 76px;position:relative;overflow:hidden}
.hero h1{color:#fff}
.hero .lead{font-size:1.2rem;color:#b8c6dc;max-width:640px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.hero .btn-ghost:hover{border-color:#fff}
.hero .pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.pill{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px;font-size:.82rem;color:#cdd9ec}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}

/* Sections */
section{padding:76px 0}
.section-head{max-width:var(--read);margin:0 auto 44px;text-align:center}
.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Pillars / cards */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition:.2s}
.card:hover{border-color:var(--accent);box-shadow:0 10px 30px rgba(15,27,46,.06);transform:translateY(-2px)}
.card h3{margin-bottom:.3em}
.card p{color:var(--muted);font-size:.96rem;margin:0}
.card .ic{width:42px;height:42px;border-radius:10px;background:rgba(31,111,235,.10);color:var(--accent);display:grid;place-items:center;margin-bottom:14px;font-weight:700}
.card a.more{display:inline-block;margin-top:14px;font-weight:600;font-size:.9rem}
.linklist a{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink2);font-weight:500}
.linklist a:hover{color:var(--accent);text-decoration:none}
.linklist a span{color:var(--muted);font-weight:400;font-size:.9rem}

/* Article */
.article{max-width:var(--read);margin:0 auto}
.article h2{margin-top:2em}
.article h3{margin-top:1.6em}
.article ul,.article ol{padding-left:1.2em;margin:0 0 1.1rem}
.article li{margin-bottom:.5em}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.updated{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);margin-top:40px;padding-top:16px}
.lead-p{font-size:1.18rem;color:var(--ink2)}

/* Callouts */
.callout{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--surface);border-radius:10px;padding:16px 18px;margin:1.4rem 0;font-size:.97rem}
.callout.warn{border-left-color:var(--warn)}
.callout.ok{border-left-color:var(--ok)}
.callout b{color:var(--ink)}

/* Code */
pre{background:var(--code-bg);color:var(--code-ink);border-radius:12px;padding:18px 18px;overflow:auto;font-family:var(--mono);font-size:.86rem;line-height:1.6;margin:1.2rem 0}
code{font-family:var(--mono);font-size:.88em;background:var(--surface2);padding:2px 6px;border-radius:6px}
pre code{background:none;padding:0}

/* Tables */
.tbl{width:100%;border-collapse:collapse;margin:1.3rem 0;font-size:.95rem;overflow:hidden;border:1px solid var(--line);border-radius:12px}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--surface);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink2)}
.tbl tr:last-child td{border-bottom:0}
.tbl .yes{color:var(--ok);font-weight:700}.tbl .no{color:#b91c1c;font-weight:700}

/* Figure / diagram */
figure{margin:1.6rem 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px}
figure svg{display:block;margin:0 auto;width:100%;height:auto}
figcaption{text-align:center;color:var(--muted);font-size:.86rem;margin-top:12px}

/* TOC */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:0 0 28px}
.toc strong{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.toc ul{list-style:none;padding:0;margin:10px 0 0;columns:2}
.toc a{font-size:.92rem}
@media(max-width:600px){.toc ul{columns:1}}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff}
.faq summary{cursor:pointer;padding:16px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq .a{padding:0 18px 16px;color:var(--muted)}

/* Tools */
.tool{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column}
.tool .tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin-bottom:10px}
.tool h3{margin:0 0 .35em}
.tool p{color:var(--muted);font-size:.95rem;flex:1}

/* CTA band */
.cta{background:linear-gradient(135deg,#0b1a2f,#12325b);color:#fff;border-radius:20px;padding:52px 32px;text-align:center}
.cta h2{color:#fff}
.cta p{color:#c4d2e8;max-width:560px;margin:0 auto 22px}

/* Jemba soft strip */
.jemba{border:1px dashed var(--line);background:var(--surface);border-radius:14px;padding:22px 24px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:1.6rem 0}
.jemba p{margin:0;color:var(--muted);font-size:.95rem}

/* Footer */
footer.site{background:#0b1a2f;color:#9fb2cc;padding:54px 0 34px;font-size:.9rem}
footer.site a{color:#c4d2e8}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:28px}
.foot-col h4{color:#fff;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.foot-col a{display:block;margin-bottom:8px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#7f94b3}
.reveal{opacity:0;transform:translateY(16px);transition:.6s}
.reveal.in{opacity:1;transform:none}

/* language switcher: EN | DE | FR, with a real separator so the codes do not
   run together into "ENDE". The current locale is inert, not a link. */
.lang{display:inline-flex;align-items:center;gap:0;margin-right:14px;
      font-size:.82rem;font-weight:600;letter-spacing:.03em}
.lang a{color:#5b6b82;text-decoration:none;padding:2px 7px;border-radius:5px}
.lang a+a{box-shadow:inset 1px 0 0 #d7dee8}
.lang a:hover{color:#1f6feb;background:#eef3fb}
.lang a.active{color:#0d1b2a;background:#eef3fb;cursor:default}
@media (max-width:900px){.lang{margin-right:8px}}


/* ============ v3 additions: reference layer, academy, account ============ */
.nav-links a.on{color:var(--accent);font-weight:700}
.answer{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(31,111,235,.06),transparent);
  padding:16px 20px;border-radius:0 10px 10px 0;margin:0 0 26px}
.answer p{margin:0;font-size:1.1rem;line-height:1.6;color:var(--ink)}
.h1code{font-family:var(--mono);font-size:.72em;background:none;padding:0;word-break:break-word}
.sevline{display:flex;align-items:center;gap:12px;margin:-6px 0 22px}
.sev{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:5px}
.sev-bad{background:#fdeceb;color:#a6332b}
.sev-unc{background:#fbf2dd;color:#8a6410}
.sev-good{background:#e6f2ea;color:#12805c}
.specref{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}

ol.steps,ul.steps{list-style:none;padding:0;margin:1.2rem 0;counter-reset:s}
ol.steps li,ul.steps li{position:relative;padding:14px 0 14px 42px;border-bottom:1px solid var(--line)}
ol.steps li:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:13px;
  width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;font-size:.8rem;
  font-weight:700;display:grid;place-items:center}
ul.steps li:before{content:"";position:absolute;left:9px;top:22px;width:8px;height:8px;border-radius:50%;
  background:var(--accent)}
ol.steps li:last-child,ul.steps li:last-child{border-bottom:0}
.steps li b{display:block;color:var(--ink);margin-bottom:3px}
.steps li span{color:var(--ink2);font-size:.97rem}

table.kv{margin:0 0 24px}
table.kv th{width:180px;background:var(--surface);font-size:.78rem;white-space:nowrap;vertical-align:top}
table.kv td{font-size:.94rem}

.chips{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin:1.4rem 0;
  padding-top:14px;border-top:1px solid var(--line)}
.chips-l{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  font-weight:700;flex:0 0 auto;min-width:150px}
.chips-i{display:flex;gap:8px;flex-wrap:wrap}
.chips-i a{font-family:var(--mono);font-size:.8rem;background:var(--surface2);border:1px solid var(--line);
  padding:4px 10px;border-radius:6px;color:var(--ink2)}
.chips-i a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

.filterbox{display:flex;gap:12px;align-items:center;margin:0 0 26px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;position:sticky;top:76px;z-index:10}
.filterbox label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.filterbox input{flex:1;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:.95rem;
  background:#fff;font-family:inherit}
.filterbox input:focus{outline:2px solid var(--accent);outline-offset:1px}
.fcount{font-size:.82rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.reflist{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 30px}
a.refrow{display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);gap:18px;
  padding:13px 16px;border-top:1px solid var(--line);color:var(--ink2)}
a.refrow:first-child{border-top:0}
a.refrow:hover{background:var(--surface);text-decoration:none}
a.refrow .rn{font-family:var(--mono);font-size:.88rem;color:var(--accent);font-weight:500;word-break:break-word}
a.refrow .rd{color:var(--muted);font-size:.9rem}
@media(max-width:660px){a.refrow{grid-template-columns:1fr;gap:4px}}
h2 .cnt{font-family:var(--mono);font-size:.9rem;color:var(--muted);font-weight:400;vertical-align:middle}

.trackcard{border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:0 0 16px;background:#fff}
.trackcard:hover{border-color:var(--accent)}
.trackcard-h{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.trackcard-h h3{margin:0;font-size:1.25rem}
.tcode{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:3px 9px;border-radius:5px}
.trackcard p{margin:0 0 6px;color:var(--ink2)}
.coursecard{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:18px 0;
  border-bottom:1px solid var(--line)}
.ccode{font-family:var(--mono);font-size:.85rem;color:var(--teal);font-weight:600;padding-top:4px}
.coursecard h3{margin:0 0 4px;font-size:1.1rem}
.coursecard p{margin:0 0 4px;color:var(--muted);font-size:.95rem}

ol.lessons{list-style:none;padding:0;margin:1.2rem 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
li.lesson{display:grid;grid-template-columns:38px minmax(0,1fr) 62px;gap:14px;padding:15px 18px;
  border-top:1px solid var(--line);margin:0;align-items:start}
li.lesson:first-child{border-top:0}
li.lesson .ln{font-family:var(--mono);font-size:.82rem;color:var(--muted);padding-top:2px}
li.lesson b{color:var(--ink);font-size:1rem}
li.lesson p{margin:4px 0 0;color:var(--ink2);font-size:.94rem}
li.lesson p.asset{color:var(--muted);font-size:.85rem;margin-top:8px;display:flex;gap:8px;align-items:flex-start}
li.lesson p.asset span{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;
  background:var(--surface2);padding:3px 7px;border-radius:4px;color:var(--teal);flex:0 0 auto;
  line-height:1.3;margin-top:1px}
li.lesson .lmin{font-family:var(--mono);font-size:.8rem;color:var(--muted);text-align:right;padding-top:3px}
.gatepill{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;
  background:#fbf2dd;color:#8a6410;padding:2px 7px;border-radius:4px;vertical-align:middle;margin-left:6px}
@media(max-width:620px){li.lesson{grid-template-columns:30px minmax(0,1fr)}li.lesson .lmin{display:none}}

.gate{border:1px dashed var(--accent);background:rgba(31,111,235,.04);border-radius:12px;padding:22px 24px;margin:1.4rem 0}
.gate-h{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);font-weight:700;margin:0 0 8px}
.nextbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  margin:2rem 0;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.nextbox p{margin:0;color:var(--ink2);max-width:60ch}

.herobox{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:22px}
.hb-h{font-weight:700;color:#fff;font-size:1.05rem;margin-bottom:4px}
.herobox p{color:#b8c6dc;font-size:.92rem;margin:0 0 14px}
a.hb-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 0;
  border-top:1px solid rgba(255,255,255,.1)}
a.hb-row code{background:none;color:#cfe0ff;font-size:.85rem;padding:0}
a.hb-row span{color:#8ba1c0;font-size:.78rem;white-space:nowrap}
a.hb-row:hover{text-decoration:none}a.hb-row:hover code{color:#fff}
a.hb-all{display:block;margin-top:14px;color:#7fb0ff;font-size:.88rem;font-weight:600}

.signup{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;margin:1.4rem 0;
  box-shadow:0 10px 30px rgba(15,27,46,.05)}
.signup label{display:block;font-size:.82rem;font-weight:600;margin:0 0 14px;color:var(--ink)}
.signup input[type=text],.signup input[type=email],.signup select{width:100%;padding:11px 12px;margin-top:5px;
  border:1px solid var(--line);border-radius:9px;font-size:.98rem;font-family:inherit;background:var(--bg)}
.signup .f2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:600px){.signup .f2{grid-template-columns:1fr}}
.signup label.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.9rem;color:var(--ink2)}
.signup label.chk input{margin-top:4px}
.signup button{width:100%;margin-top:8px;justify-content:center}
.signup .fine{font-size:.8rem;color:var(--muted);margin:12px 0 0}
.signup label.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup .opt{font-weight:400;color:var(--muted);font-size:.78rem}
.signup-err{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;font-size:.9rem;color:var(--muted)}
.signup button:disabled{opacity:.6;cursor:default}
.signup-ok h3{margin-top:0}

.netstrip{background:var(--surface);border-top:1px solid var(--line);padding:22px 0;font-size:.82rem;color:var(--muted)}
.netstrip .netstrip-h{font-weight:700;color:var(--ink);margin-bottom:5px}
.netstrip p{margin:0 0 5px;line-height:1.7}
.netstrip a{color:var(--teal)}
div.refrow.pend{display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);gap:18px;
  padding:13px 16px;border-top:1px solid var(--line);color:var(--muted)}
div.refrow.pend:first-child{border-top:0}
div.refrow.pend .rn{font-family:var(--mono);font-size:.88rem;color:var(--ink2);font-weight:500;word-break:break-word}
div.refrow.pend .rd{font-size:.86rem}
@media(max-width:660px){div.refrow.pend{grid-template-columns:1fr;gap:4px}}

/* v7: the language switcher now carries seven locales, so it has to survive a
   phone header. Links stay real <a href> so crawlers still see the alternates. */
.lang{flex-wrap:wrap;max-width:100%;row-gap:2px}
.nav-right{flex-wrap:wrap;min-width:0}
@media (max-width:900px){
  .lang{font-size:.7rem;margin-right:6px}
  .lang a{padding:2px 4px}
}
@media (max-width:520px){
  .lang{font-size:.66rem;margin-right:4px;letter-spacing:.02em}
  .lang a{padding:1px 3px}
  .lang a+a{box-shadow:none}
}

/* v7: long inline identifiers and wide tables must not scroll the whole page
   sideways on a phone. Pre-existing on the English pages; longer sentences in
   the other locales pushed the inline <code> further out and made it obvious. */
:not(pre) > code{overflow-wrap:anywhere}
pre{max-width:100%;overflow-x:auto}
@media (max-width:760px){
  .tbl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}