/* netzcheck.app
   ============================================================================
   Kein Framework, kein Build-Schritt. Die Gestaltung stammt aus
   concepts/prototype.html; der Prototyp ist ab hier Referenz und wird nicht
   parallel weitergepflegt.

   Farben stehen NICHT hier. Sie kommen als Design-Token aus base.html, weil sie
   pro Mandant verschieden sind (#1) - stuenden sie in dieser Datei, waere
   Theming eine Suche-und-Ersetze-Uebung und die Datei pro Mandant nicht mehr
   cachebar. Hier steht nur, was fuer alle Mandanten gilt: Mass, Schrift,
   Struktur. Ein Test haelt Hex-Werte aus Templates fern.
   ============================================================================ */

/* ---------------------------------------------------------------- Schriften
   Selbst gehostet, nicht von fonts.googleapis.com: Das schickte die IP jedes
   Besuchers ohne Einwilligung in die USA (LG Muenchen I, 3 O 17493/20). Ohne
   externe Ressourcen und ohne Tracking braucht die Seite auch kein
   Einwilligungsbanner - eine Eigenschaft, die ein einziges eingebundenes Skript
   zerstoert.

   Fehlen die Dateien, greift der naechste Eintrag im Stack und die Seite sieht
   nach System-Schrift aus. Siehe static/fonts/README.md. */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/barlow-semi-condensed-500.300a904b5425.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/barlow-semi-condensed-600.2027d0e0b02a.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Source Serif 4 ist ein Variable Font: Google liefert fuer 400 und 600 dieselbe
   Datei, Byte fuer Byte. Zwei Eintraege waeren 50 KB doppelt. Als Bereich
   deklariert nutzt der Browser die Gewichtsachse - haette man die Datei
   faelschlich als einzelnen Schnitt deklariert, haette er 600 simuliert, und
   simuliertes Fett sieht schlechter aus als echtes. Barlow liefert Google
   dagegen als getrennte Schnitte, erkennbar an zwei verschiedenen Pruefsummen. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-variable.62f0a26ced41.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.814fe1615d4d.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root{
  --display:"Barlow Semi Condensed",-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --data:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* Mass des Grundrisses. Absichtlich nicht ueber den Mandanten aenderbar: Eine
     Marke darf die Farben bestimmen, nicht das Layout - sonst ist jede Seite pro
     Mandant zu pruefen. */
  --col:34rem;          /* gemessene Inhaltsspalte */
  --rail:13rem;         /* Nachweisblock daneben */
  --gut:3rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 var(--body);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------ frame */
.wrap{max-width:calc(var(--col) + var(--rail) + var(--gut));margin:0 auto;padding:0 1.25rem}

header.site{border-bottom:1px solid var(--rule);background:var(--paper)}
.head-in{
  max-width:calc(var(--col) + var(--rail) + var(--gut));margin:0 auto;padding:1.1rem 1.25rem .9rem;
  display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap;
}
.brand{
  font-family:var(--display);font-weight:600;font-size:1.32rem;line-height:1;
  color:var(--ink);text-decoration:none;letter-spacing:-.005em;
  display:flex;align-items:center;gap:.6rem;
}
.brand-mark{display:block;width:1.85rem;height:1.85rem;flex:0 0 auto}
.brand-mark svg{display:block;width:100%;height:100%}
.brand-text{display:block}
.brand i{font-style:normal;color:var(--prussian)}
.brand-text small{
  display:block;font-family:var(--body);font-weight:400;font-size:.74rem;
  color:var(--dim);letter-spacing:0;margin-top:.3rem;line-height:1.3;
}
header nav{margin-left:auto;display:flex;gap:1.35rem;align-items:baseline}
header nav a{
  font-family:var(--display);font-size:1.02rem;color:var(--dim);
  text-decoration:none;padding-bottom:.18rem;border-bottom:2px solid transparent;
}
header nav a:hover{color:var(--ink)}
header nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--prussian)}

main{padding:2.4rem 0 4rem}
.layout{display:grid;grid-template-columns:var(--col) var(--rail);gap:var(--gut);align-items:start}
.layout.single{grid-template-columns:minmax(0,var(--col))}

/* ------------------------------------------------------------ type */
h1{
  font-family:var(--display);font-weight:600;font-size:2.35rem;line-height:1.08;
  margin:0 0 .7rem;letter-spacing:-.012em;
}
h2{font-family:var(--display);font-weight:600;font-size:1.42rem;line-height:1.16;margin:2.4rem 0 .6rem;letter-spacing:-.008em}
h3{font-family:var(--display);font-weight:500;font-size:1.08rem;margin:1.6rem 0 .4rem}
p{margin:0 0 1rem;max-width:62ch}
.lede{font-size:1.12rem;line-height:1.55;color:var(--ink-soft);margin-bottom:1.6rem}
a{color:var(--prussian);text-decoration-thickness:1px;text-underline-offset:2px}
small{font-size:.84rem}
.quiet{color:var(--dim)}

/* ------------------------------------------------------------ the lattice hero */
.lattice{position:relative;margin:.4rem 0 2rem;border:1px solid var(--rule);background:var(--surface)}
.lattice svg{display:block;width:100%;height:auto}
.lattice figcaption{
  border-top:1px solid var(--rule-soft);padding:.5rem .7rem;
  font-size:.8rem;color:var(--dim);
}

/* ------------------------------------------------------------ form */
form{margin:0}
fieldset{border:0;padding:0;margin:0 0 1.1rem}
legend{font-family:var(--display);font-size:1.02rem;font-weight:500;padding:0;margin-bottom:.5rem}
.f{margin-bottom:.95rem}
.f > label{display:block;font-family:var(--display);font-size:.98rem;margin-bottom:.22rem}
.f .hint{display:block;font-size:.82rem;color:var(--dim);margin-bottom:.3rem}
input[type=text],input[type=email],textarea{
  width:100%;padding:.55rem .6rem;font:400 1rem/1.4 var(--body);color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:0;
}
/* Resize only downward: a textarea that can be dragged wider breaks the column. */
textarea{resize:vertical;min-height:5.5rem}
input[type=text]:focus,input[type=email]:focus,textarea:focus,
button:focus-visible,a:focus-visible,summary:focus-visible,label:focus-within{
  outline:2px solid var(--prussian);outline-offset:1px
}
.row2{display:grid;grid-template-columns:7.5rem 1fr;gap:.8rem}
.f.bad input,.f.bad textarea{border-color:var(--minium);background:var(--minium-soft)}
.f .err{display:block;color:var(--minium);font-size:.86rem;margin-top:.25rem}

button.go,a.go{
  display:inline-block;font-family:var(--display);font-size:1.05rem;font-weight:500;
  padding:.5rem 1.15rem;background:var(--prussian);color:var(--surface);border:1px solid var(--prussian);
  border-radius:0;cursor:pointer;text-decoration:none;
}
button.go:hover,a.go:hover{background:var(--prussian-dark)}
button.flat,a.flat{
  display:inline-block;font-family:var(--display);font-size:1rem;padding:.42rem 1rem;
  background:none;color:var(--prussian);border:1px solid var(--rule);border-radius:0;
  cursor:pointer;text-decoration:none;
}
button.flat:hover,a.flat:hover{border-color:var(--prussian)}
button:disabled{opacity:.45;cursor:not-allowed}
.actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:1.2rem}

/* ------------------------------------------------------------ four-square coverage glyph */
.cov{margin:1.5rem 0 .6rem;border-top:1px solid var(--ink)}
.cov-row{
  display:grid;grid-template-columns:5.2rem auto 1fr;gap:1rem;align-items:center;
  padding:.62rem 0;border-bottom:1px solid var(--rule-soft);
}
.cov-row .tech{font-family:var(--display);font-size:1.06rem}
.cov-row .tech b{font-weight:500}
.sq{display:flex;gap:4px}
.sq i{
  width:17px;height:17px;display:block;border:1px solid var(--prussian);
  background:var(--surface);font-style:normal;
}
.sq i.on{background:var(--prussian)}
.sq i.off{border-color:var(--rule);background:var(--surface)}
.cov-row .n{font-family:var(--data);font-size:.86rem;color:var(--dim);text-align:right}
.cov-note{font-size:.86rem;color:var(--dim);margin:.55rem 0 0}

/* ------------------------------------------------------------ title block (survey plan) */
.titleblock{
  border:1px solid var(--ink);background:var(--surface);font-size:.82rem;line-height:1.45;
  position:sticky;top:1.25rem;
}
.titleblock h4{
  font-family:var(--display);font-weight:600;font-size:.86rem;margin:0;
  padding:.4rem .7rem;border-bottom:1px solid var(--ink);
}
.tb-row{display:grid;grid-template-columns:1fr;padding:.45rem .7rem;border-bottom:1px solid var(--rule-soft)}
.tb-row:last-child{border-bottom:0}
.tb-row dt{color:var(--dim);font-size:.76rem;margin-bottom:.08rem}
.tb-row dd{margin:0;font-family:var(--data);font-size:.82rem;word-break:break-word}
.tb-row dd.plain{font-family:var(--body);font-size:.84rem}

/* ------------------------------------------------------------ notices */
.note{border-left:3px solid var(--rule);padding:.65rem .9rem;margin:1.3rem 0;background:var(--surface);font-size:.94rem}
.note.warn{border-left-color:var(--minium);background:var(--minium-soft)}
.note.info{border-left-color:var(--prussian);background:var(--prussian-soft)}
.note p:last-child{margin-bottom:0}
.note strong{font-weight:600}



/* ------------------------------------------------------------ packages */
.pkgs{display:grid;gap:.6rem;margin:.5rem 0 0}
.pkg{display:block;border:1px solid var(--rule);background:var(--surface);padding:.7rem .85rem;cursor:pointer}
.pkg:hover{border-color:var(--prussian)}
.pkg.sel{border-color:var(--prussian);box-shadow:inset 0 0 0 1px var(--prussian)}
.pkg input{margin-right:.5rem}
.pkg .name{font-family:var(--display);font-size:1.08rem}
.pkg .price{float:right;font-family:var(--data);font-size:.95rem}
.pkg .cap{display:block;font-size:.86rem;color:var(--dim);margin-top:.15rem}

/* ------------------------------------------------------------ drop zone + table */
.drop{
  border:1px dashed var(--rule);background:var(--surface);padding:1.4rem 1rem;text-align:center;
}
.drop.over{border-color:var(--prussian);background:var(--prussian-soft)}
.drop .big{font-family:var(--display);font-size:1.1rem;display:block;margin-bottom:.2rem}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.file{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  border:1px solid var(--rule);background:var(--surface);padding:.55rem .8rem;font-size:.92rem
}
.file .nm{font-family:var(--data);font-size:.86rem}

table{border-collapse:collapse;width:100%;font-size:.88rem;margin:.7rem 0 0}
th,td{text-align:left;padding:.34rem .5rem;border-bottom:1px solid var(--rule-soft)}
th{font-family:var(--display);font-weight:500;font-size:.9rem;border-bottom:1px solid var(--ink)}
td.mono{font-family:var(--data);font-size:.82rem}
tr.bad td{background:var(--minium-soft)}
caption{caption-side:bottom;text-align:left;font-size:.82rem;color:var(--dim);padding-top:.45rem}







/* ------------------------------------------------------------ Intro
   Die drei Logo-Entwuerfe zeichnen sich selbst als SVG, siehe
   concepts/netzcheck-logo.js. Die Buehne gibt nur Platz und Mitte vor. */
.intro{min-height:calc(100vh - 2.1rem);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:1rem 1.25rem 3rem;text-align:center}
.logo-stage{
  position:relative;width:100%;max-width:30rem;min-height:15rem;
  display:flex;align-items:center;justify-content:center;
}
.logo-mount{display:flex;align-items:center;justify-content:center;width:100%}

.intro-copy{opacity:0;transform:translateY(.6rem);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1);max-width:34rem}
.intro-copy.in{opacity:1;transform:none}
h1.intro-word{
  font-family:var(--display);font-weight:600;font-size:2.6rem;line-height:1;
  letter-spacing:-.015em;margin:1.4rem 0 .9rem;
}
h1.intro-word i{font-style:normal;color:var(--prussian)}
.intro-copy p{margin:0 auto 1.4rem;color:var(--ink-soft);font-size:1.06rem;max-width:44ch}
@media (max-width:40rem){
  .logo-stage{min-height:12rem}
  h1.intro-word{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){ .intro-copy{transition:none} }














@media (max-width:40rem){
  .logo-stage{height:13rem}
  h1.intro-word{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){
  .t{transition:none!important}
  .intro-copy{transition:none}
}

/* ------------------------------------------------------------ progress */
.meter{height:3px;background:var(--rule-soft);margin:.9rem 0 .4rem;overflow:hidden}
.meter i{display:block;height:100%;background:var(--prussian);width:0;transition:width .4s linear}
.tick{display:flex;justify-content:space-between;font-family:var(--data);font-size:.82rem;color:var(--dim)}






ol.how{counter-reset:s;list-style:none;padding:0;margin:1.2rem 0 1.4rem}
ol.how li{counter-increment:s;position:relative;padding:0 0 .9rem 2.6rem;max-width:62ch}
ol.how li::before{
  content:counter(s);position:absolute;left:0;top:.08rem;
  width:1.65rem;height:1.65rem;border:1px solid var(--prussian);color:var(--prussian);
  font-family:var(--display);font-size:.95rem;display:flex;align-items:center;justify-content:center;
}
ol.how li b{font-weight:600}

/* ------------------------------------------------------------ definition list for glossary */
dl.gloss{margin:1rem 0}
dl.gloss dt{font-family:var(--display);font-size:1.06rem;margin-top:1.1rem}
dl.gloss dd{margin:.15rem 0 0;max-width:62ch}

/* ------------------------------------------------------------ footer */
footer.site{border-top:1px solid var(--rule);margin-top:3rem;background:var(--paper)}
.foot-in{
  max-width:calc(var(--col) + var(--rail) + var(--gut));margin:0 auto;
  padding:1.1rem 1.25rem 2.4rem;display:flex;gap:1.5rem;flex-wrap:wrap;
  justify-content:space-between;font-size:.84rem;color:var(--dim);
}
.foot-in nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.foot-in a{color:var(--dim)}
.foot-in a:hover{color:var(--ink)}

/* ------------------------------------------------------------ responsive */
@media (max-width:52rem){
  .layout{grid-template-columns:minmax(0,1fr)}
  .titleblock{position:static;margin-top:1.6rem}
  h1{font-size:1.95rem}
  .head-in{padding-bottom:.7rem}
  header nav{margin-left:0;width:100%;gap:1.1rem}
  .row2{grid-template-columns:1fr}
  details.states{left:1rem;right:1rem;max-width:none}
}

/* ------------------------------------------------------------------ Marke
   Das Zeichen steht inline im HTML und folgt deshalb den Token des Mandanten. */
.head-in{
  max-width:calc(var(--col) + var(--rail) + var(--gut));margin:0 auto;
  padding:1.1rem 1.25rem .9rem;display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap;
}
.brand{
  font-family:var(--display);font-weight:600;font-size:1.32rem;line-height:1;
  color:var(--ink);text-decoration:none;letter-spacing:-.005em;
  display:flex;align-items:center;gap:.6rem;
}
.brand-mark{display:block;width:1.85rem;height:1.85rem;flex:0 0 auto}
.brand-mark svg{display:block;width:100%;height:100%}
.brand-text{display:block}
.brand-text small{
  display:block;font-family:var(--body);font-weight:400;font-size:.74rem;
  color:var(--dim);letter-spacing:0;margin-top:.3rem;line-height:1.3;
}
.wrap{max-width:calc(var(--col) + var(--rail) + var(--gut));margin:0 auto;padding:0 1.25rem}
.foot-in{
  max-width:calc(var(--col) + var(--rail) + var(--gut));margin:0 auto;
  padding:1.1rem 1.25rem 2.4rem;display:flex;gap:1.5rem;flex-wrap:wrap;
  justify-content:space-between;font-size:.84rem;color:var(--dim);
}
.foot-in p{margin:0;max-width:40ch}
.foot-in nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.foot-in a{color:var(--dim)}
.foot-in a:hover{color:var(--ink)}
@media (max-width:52rem){
  .head-in{padding-bottom:.7rem}
  .head-in nav{margin-left:0;width:100%;gap:1.1rem}
}

/* ------------------------------------------------------------- Intro-Ebene
   Liegt ueber der Abfrage, statt vor ihr zu stehen. Der erste Aufruf traegt das
   Formular schon; die Ebene wird erst per Skript sichtbar. Ohne JavaScript
   erscheint sie nie, und der Besucher ist sofort da, wo er hinwollte. */
.intro-layer{
  position:fixed;inset:0;z-index:40;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem 1.25rem;text-align:center;
  transition:opacity .35s ease;
}
.intro-layer.gone{opacity:0;pointer-events:none}
.intro-layer[hidden]{display:none}
body.intro-open{overflow:hidden}
.intro-inner{max-width:34rem;width:100%}
.logo-stage{
  position:relative;width:100%;max-width:30rem;min-height:14rem;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
}
.logo-mount{display:flex;align-items:center;justify-content:center;width:100%}
.intro-copy{opacity:0;transform:translateY(.6rem);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.intro-copy.in{opacity:1;transform:none}
.intro-word{
  font-family:var(--display);font-weight:600;font-size:2.4rem;line-height:1;
  letter-spacing:-.015em;margin:1.2rem 0 .8rem;
}
.intro-copy p{margin:0 auto 1.3rem;color:var(--ink-soft);font-size:1.04rem;max-width:44ch}
@media (max-width:40rem){
  .logo-stage{min-height:11rem}
  .intro-word{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){
  .intro-layer,.intro-copy{transition:none}
}

/* ------------------------------------------ nummerierte Folge im Erklaertext
   Nummeriert, weil es wirklich eine Folge ist: Adresse, Koordinaten, Zelle. */
ol.how{counter-reset:s;list-style:none;padding:0;margin:1.2rem 0 1.4rem}
ol.how li{counter-increment:s;position:relative;padding:0 0 .9rem 2.6rem;max-width:62ch}
ol.how li::before{
  content:counter(s);position:absolute;left:0;top:.08rem;
  width:1.65rem;height:1.65rem;border:1px solid var(--prussian);color:var(--prussian);
  font-family:var(--display);font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
}
ol.how li b{font-weight:600}

/* Fortschritt ohne <progress>: Der Balken traegt die Token, das Element nicht. */
.meter{height:3px;background:var(--rule-soft);margin:.9rem 0 .4rem;overflow:hidden}
.meter i{display:block;height:100%;background:var(--prussian);transition:width .4s linear}

/* Abmelden ist ein POST, kein Link: Ein GET, das die Sitzung beendet, laesst sich
   von fremden Seiten ausloesen. Sieht aus wie die anderen Eintraege daneben. */
.nav-form{display:inline;margin:0}
.nav-form button{
  font-family:var(--display);font-size:1.02rem;color:var(--dim);
  background:none;border:0;padding:0 0 .18rem;cursor:pointer;
}
.nav-form button:hover{color:var(--ink)}