/* NETbrain-Dokumentation — Gestaltung nach dem NETFACTORY-CI, abgestimmt auf
   die Produktseite (index.html). Werte siehe .claude/skills/netfactory-webdesign. */

@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../schriften/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../schriften/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --blue:#14ada6; --green:#92e188; --dark:#000; --marke:#1bccc4; --carbon:#191919;
  --white:#fff; --paragraph_white:#ffffffb3; --leise:#fff9;
  --glas:#ffffff0d; --glas-stark:#ffffff1a; --linie:#ffffff1a;
  --schatten-innen:inset 0 4px 12px #ffffff59, 0 4px 12px #0000001a;
  --radius:.625rem; --radius-knopf:.375rem;
  --container:84rem; --rand:1.875rem; --kopf:4.375rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--kopf) + 1.5rem)}
body{margin:0; background:var(--dark); color:var(--paragraph_white);
  font-family:Geist,"Geist Local",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:1rem; line-height:155%}
img,svg{max-width:100%; display:block}
a{color:var(--white)}
h1,h2,h3,h4{color:var(--white); font-weight:400; letter-spacing:-.03em; line-height:120%; margin:0}
strong,b{color:var(--white); font-weight:500}
.nur-screenreader{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.sprung{position:absolute; left:-999px; top:.5rem; z-index:200; background:var(--blue); color:#fff; padding:.5rem 1rem; border-radius:var(--radius-knopf)}
.sprung:focus{left:1rem}

/* Gestrichelte Linien als Verlauf (CI: 6 px Strich, 5 px Lücke) */
[data-linie="h"]{height:1px; background-size:11px 1px; background-repeat:repeat-x;
  background-image:linear-gradient(to right, rgba(255,255,255,.1) 6px, transparent 6px)}
[data-linie="v"]{width:1px; background-size:1px 11px; background-repeat:repeat-y;
  background-image:linear-gradient(to bottom, rgba(255,255,255,.1) 6px, transparent 6px)}

/* Kopfleiste wie auf der Produktseite */
header{position:fixed; inset:0 0 auto; z-index:100; background:#00000059;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom:1px solid var(--linie)}
.kopf{display:flex; align-items:center; gap:1.5rem; min-height:var(--kopf); max-width:var(--container); margin-inline:auto; padding-inline:var(--rand)}
.marke{display:flex; align-items:center; gap:.875rem; text-decoration:none; opacity:.9; transition:all .3s}
.marke:hover{opacity:1}
.marke img{width:170px; height:auto}
.marke span{color:var(--leise); font-size:.9375rem; padding-left:.875rem; border-left:1px solid var(--linie)}
.kopf nav{margin-left:auto; display:flex; align-items:center; gap:1.75rem}
.kopf nav a:not(.knopf){color:var(--leise); font-size:.9375rem; font-weight:500; text-decoration:none; transition:all .3s}
.kopf nav a:not(.knopf):hover{color:var(--white)}
.knopf{display:inline-flex; align-items:center; gap:.5rem; padding:.5625rem 1rem; border-radius:var(--radius-knopf);
  border:1px solid #ffffff0d; font-size:.9375rem; font-weight:500; background:var(--blue); color:#fff; text-decoration:none;
  box-shadow:var(--schatten-innen); transition:all .3s; white-space:nowrap}
.knopf:hover{opacity:.9}
@media(max-width:900px){.kopf nav a:not(.knopf){display:none}}
@media(max-width:600px){:root{--rand:1.25rem} .marke img{width:130px} .marke span{display:none}}

/* Seitenraster: Navigation · Artikel · Auf dieser Seite */
.raster{max-width:var(--container); margin-inline:auto; padding:calc(var(--kopf) + 2.5rem) var(--rand) 4rem;
  display:grid; grid-template-columns:15.5rem minmax(0,1fr) 13rem; gap:3rem; align-items:start}
@media(max-width:1180px){.raster{grid-template-columns:15rem minmax(0,1fr)} .auf-dieser-seite{display:none}}
@media(max-width:860px){.raster{grid-template-columns:minmax(0,1fr); gap:1.5rem; padding-top:calc(var(--kopf) + 1.5rem)}}

/* Linke Navigation */
.seitennav{position:sticky; top:calc(var(--kopf) + 2rem); max-height:calc(100vh - var(--kopf) - 3rem); overflow:auto; padding-right:.5rem;
  scrollbar-width:thin; scrollbar-color:#ffffff26 transparent}
.seitennav details > summary{display:none}
.seitennav .gruppe{margin-bottom:1.5rem}
.seitennav .gruppe > p{display:flex; align-items:center; gap:5px; margin:0 0 .5rem; color:var(--leise);
  font-size:.75rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase}
.seitennav .gruppe > p i{width:4px; height:4px; border-radius:100%; background:var(--blue); box-shadow:0 1px 2px #14ada680}
.seitennav ul{list-style:none; margin:0; padding:0 0 0 .625rem; border-left:1px solid var(--linie)}
.seitennav li a{display:block; padding:.3rem .625rem; margin-left:-.6875rem; border-left:1px solid transparent;
  color:var(--paragraph_white); font-size:.9375rem; line-height:135%; text-decoration:none; transition:all .3s}
.seitennav li a:hover{color:var(--white)}
.seitennav li a[aria-current="page"]{color:var(--white); border-left-color:var(--blue)}
@media(max-width:860px){
  .seitennav{position:static; max-height:none; overflow:visible; padding:0}
  .seitennav details{border:1px solid var(--linie); border-radius:var(--radius); background:var(--glas)}
  .seitennav details > summary{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; cursor:pointer;
    color:var(--white); font-weight:500; list-style:none}
  .seitennav details > summary::-webkit-details-marker{display:none}
  .seitennav details > summary::after{content:"+"; color:var(--leise); font-size:1.25rem}
  .seitennav details[open] > summary::after{content:"–"}
  .seitennav details > div{padding:.25rem 1rem 1rem}
}

/* Suche */
.suche{position:relative; margin-bottom:1.75rem}
.suche input{width:100%; padding:.625rem .75rem; border-radius:var(--radius-knopf); border:1px solid var(--linie);
  background:var(--glas); color:var(--white); font:inherit; font-size:.9375rem; transition:all .3s}
.suche input::placeholder{color:#ffffff73}
.suche input:focus{outline:none; border-color:var(--blue); background:#ffffff12}
.treffer{position:absolute; z-index:20; left:0; right:-6rem; top:calc(100% + .375rem); max-height:24rem; overflow:auto;
  margin:0; padding:.375rem; list-style:none; background:#0d0d0d; border:1px solid var(--linie); border-radius:var(--radius);
  box-shadow:0 18px 40px #000a}
.treffer[hidden]{display:none}
.treffer a{display:block; padding:.5rem .625rem; border-radius:var(--radius-knopf); text-decoration:none; transition:all .3s}
.treffer a:hover,.treffer a:focus,.treffer a.aktiv{background:var(--glas-stark); outline:none}
.treffer b{display:block; font-size:.9375rem}
.treffer span{display:block; color:var(--leise); font-size:.8125rem; line-height:140%}
.treffer .leer{padding:.5rem .625rem; color:var(--leise); font-size:.875rem}
@media(max-width:860px){.treffer{right:0}}

/* Artikel */
.artikel{min-width:0; max-width:48rem}
.brotkrumen{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.25rem; color:var(--leise); font-size:.875rem}
.artikel .brotkrumen a{color:var(--leise); text-decoration:none; transition:all .3s}
.artikel .brotkrumen a:hover{color:var(--white)}
.artikel h1{font-size:clamp(2.1rem,4.2vw,3.125rem); margin-bottom:1rem}
.artikel .einleitung{font-size:1.0625rem; color:var(--paragraph_white); margin:0 0 2rem; max-width:62ch}
.artikel h2{font-size:clamp(1.5rem,2.6vw,1.875rem); margin:3rem 0 1rem; padding-top:2.25rem; position:relative}
.artikel h2::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background-size:11px 1px; background-repeat:repeat-x;
  background-image:linear-gradient(to right, rgba(255,255,255,.1) 6px, transparent 6px)}
.artikel h3{font-size:1.25rem; margin:2rem 0 .75rem}
.artikel h2 a.anker,.artikel h3 a.anker{margin-left:.5rem; color:var(--leise); text-decoration:none; opacity:0; transition:all .3s}
.artikel h2:hover a.anker,.artikel h3:hover a.anker,.artikel a.anker:focus{opacity:1}
.artikel p,.artikel ul,.artikel ol{margin:0 0 1rem}
.artikel ul,.artikel ol{padding-left:1.25rem}
.artikel li{margin-bottom:.375rem}
.artikel li::marker{color:var(--blue)}
.artikel a{color:var(--white); text-decoration:underline; text-decoration-color:#14ada6aa; text-underline-offset:3px; transition:all .3s}
.artikel a:hover{text-decoration-color:var(--blue)}
.artikel code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.875em; color:var(--marke);
  background:var(--glas); border:1px solid #ffffff0d; border-radius:4px; padding:.05rem .3rem}
.artikel hr{border:0; height:1px; margin:2.5rem 0; background-size:11px 1px; background-repeat:repeat-x;
  background-image:linear-gradient(to right, rgba(255,255,255,.1) 6px, transparent 6px)}

/* Codeblöcke mit Kopierknopf */
.codeblock{position:relative; margin:0 0 1.25rem; border:1px solid var(--carbon); border-radius:var(--radius);
  background:linear-gradient(225deg,#ffffff12,#ffffff08)}
.codeblock pre{margin:0; padding:1rem 3.25rem 1rem 1.125rem; overflow-x:auto; font-size:.875rem; line-height:160%}
.codeblock code{background:none; border:0; padding:0; color:#ffffffe0; font-size:inherit}
.codeblock .kopieren{position:absolute; top:.5rem; right:.5rem; width:2.125rem; height:2.125rem; display:grid; place-items:center;
  border-radius:var(--radius-knopf); border:1px solid #ffffff0d; background:#ffffff0f; color:var(--leise); cursor:pointer;
  box-shadow:var(--schatten-innen); transition:all .3s}
.codeblock .kopieren:hover{transform:scale(.97); color:var(--white)}
.codeblock .kopieren svg{width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.codeblock .kopieren .fertig{display:none}
.codeblock .kopieren.kopiert .fertig{display:block; stroke:var(--green)}
.codeblock .kopieren.kopiert .bereit{display:none}

/* Tabellen */
.tabelle{overflow-x:auto; margin:0 0 1.25rem; border:1px solid var(--carbon); border-radius:var(--radius)}
.tabelle table{width:100%; border-collapse:collapse; font-size:.9375rem; line-height:145%}
.tabelle th{color:var(--white); font-weight:500; text-align:left; background:var(--glas)}
.tabelle th,.tabelle td{padding:.625rem .875rem; border-bottom:1px solid var(--linie); vertical-align:top}
.tabelle tr:last-child td{border-bottom:0}
.tabelle table:not(:has(thead)) td:first-child{color:var(--white); white-space:nowrap; width:1%}

/* Hinweiskästen */
.kasten{margin:0 0 1.25rem; padding:1rem 1.125rem; border:1px dashed #ffffff26; border-radius:var(--radius); background:var(--glas)}
.kasten > :last-child{margin-bottom:0}
.kasten .kasten-titel{display:flex; align-items:center; gap:6px; margin-bottom:.375rem; color:var(--white); font-weight:500}
.kasten .kasten-titel i{width:5px; height:5px; border-radius:100%; background:var(--blue); box-shadow:0 1px 2px #14ada680}
.kasten.wichtig{border-color:#92e18866}
.kasten.wichtig .kasten-titel i{background:var(--green); box-shadow:0 1px 2px #92e18880}

/* Karten auf der Startseite der Doku */
.karten{display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin:1.5rem 0 2rem}
@media(max-width:600px){.karten{grid-template-columns:minmax(0,1fr)}}
.karte{display:block; padding:1.25rem; border:.0625rem solid var(--carbon); border-radius:var(--radius);
  background-image:linear-gradient(225deg,#ffffff1a,#ffffff12); text-decoration:none!important; transition:all .3s}
.karte:hover{transform:translateY(-3px)}
.karte b{display:block; margin-bottom:.375rem; font-size:1.0625rem}
.karte span{display:block; color:var(--paragraph_white); font-size:.9rem; line-height:145%}

/* Zurück / Weiter */
.blaettern{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3.5rem}
.blaettern a{display:block; padding:1rem 1.125rem; border:1px solid var(--carbon); border-radius:var(--radius);
  background:linear-gradient(225deg,#ffffff12,#ffffff08); text-decoration:none!important; transition:all .3s}
.blaettern a:hover{transform:translateY(-3px)}
.blaettern span{display:block; color:var(--leise); font-size:.8125rem}
.blaettern b{display:block; margin-top:.125rem}
.blaettern .weiter{text-align:right; grid-column:2}
@media(max-width:600px){.blaettern{grid-template-columns:1fr} .blaettern .weiter{grid-column:1}}
.stand{margin-top:2rem; color:#ffffff73; font-size:.8125rem}

/* Rechte Spalte */
.auf-dieser-seite{position:sticky; top:calc(var(--kopf) + 2rem); font-size:.875rem}
.auf-dieser-seite p{margin:0 0 .625rem; color:var(--leise); font-size:.75rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase}
.auf-dieser-seite ul{list-style:none; margin:0; padding:0}
.auf-dieser-seite a{display:block; padding:.25rem 0; color:var(--leise); text-decoration:none; line-height:135%; transition:all .3s}
.auf-dieser-seite a:hover,.auf-dieser-seite a.aktiv{color:var(--white)}

/* Fuß */
footer{border-top:1px solid var(--linie); background-image:radial-gradient(circle farthest-corner at 50% 0%, #191919, var(--dark))}
.fuss{max-width:var(--container); margin-inline:auto; padding:2rem var(--rand); display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between; font-size:.875rem}
.fuss a{color:var(--paragraph_white); text-decoration:none; transition:all .3s}
.fuss a:hover{color:var(--white)}
.fuss nav{display:flex; flex-wrap:wrap; gap:1.25rem}