/* NORDIX — Messplatz
   Alle Stellschrauben an einem Ort. Die Tweaks-Bar aus Schritt 6 schreibt genau hier hinein. */

:root{
  /* --- Farbe --- */
  --orange:#fda607;
  --orange-hell:#ffb733;
  /* Dieselbe Farbe als Zahlentripel. Gebraucht in bg.css, wo die Deckkraft
     selbst an einer Variablen hängt (`rgba(var(--orange-rgb),var(--glow-a))`)
     — das geht mit einem Hex-Wert nicht. Stand bis zum 17.08.2026 in bg.css
     und war damit die einzige Stelle, an der die Markenfarbe ein zweites Mal
     ausgeschrieben war. Wer sie ändert, muss BEIDE Zeilen anfassen; deshalb
     stehen sie jetzt untereinander. */
  --orange-rgb:253,166,7;
  --bg:#0c0e0f;
  --bg-2:#131617;
  --panel:#171a1c;
  --line:#252a2c;
  --line-2:#343a3d;
  /* Die Trennpunkte der Fußzeile, seit 23.08.2026 eigener Wert.
     Vorher standen dort ZWEI Helligkeiten in einer Zeile: die Punkte
     innerhalb der ersten Angabe sind blanke Zeichen im Text und erbten
     --ink-3 (5,49 : 1), die Punkte zwischen den Angaben waren eigene
     Elemente auf --line-2 (1,77 : 1). Faktor drei, dasselbe Zeichen.
     Björn hat es gesehen, bevor es jemand gemessen hat.
     #61615d ist die Mitte der sRGB-Werte und ergibt 3,39 : 1 — sichtbar
     genug zum Trennen, zu ruhig, um mit der Schrift zu konkurrieren.
     Nachgerechnet, nicht geschaetzt. AA gilt hier nicht: Die Punkte sind
     Dekoration, ihre Aussage steht in den Abstaenden daneben. */
  --punkt:#61615d;
  --ink:#e6e8e7;
  /* Diese beiden Werte standen bis zum 23.08.2026 auf #8c9391 und #5c6462
     und wurden von plakativ.css ueberschrieben — auf JEDER der fuenf
     gebauten Seiten. Die Basis war damit toter Code, der beim Nachmessen
     in die Irre fuehrt: #5c6462 ergibt auf --bg nur 3,18 : 1 und sieht
     nach einem Zugaenglichkeitsfehler aus, ausgeliefert wurde aber nie
     dieser Wert. Jetzt steht hier, was wirklich gilt; die Ueberschreibung
     in plakativ.css ist entfallen.

     Warm statt kuehl ist Absicht: Der Cremeton hebt den Fliesstext vom
     Grund ab, ohne mit der Ueberschrift zu konkurrieren, und passt zum
     Orange. Gemessen auf --bg: --ink-2 12,39 : 1, --ink-3 5,49 : 1;
     auf --panel, der hellsten Flaeche: 11,20 und 4,97. Beide AA. */
  --ink-2:#d6cec0;
  --ink-3:#8e887c;

  /* --- Schrift --- */
  --font-display:"Barlow Condensed",system-ui,sans-serif;
  --font-body:"JetBrains Mono",ui-monospace,monospace;

  --fs-h1:clamp(46px,7.2vw,104px);
  --fs-h2:clamp(28px,4vw,54px);
  --fs-h3:clamp(20px,2.1vw,28px);
  --fs-body:14px;
  --fs-micro:10.5px;

  --w-h1:600;
  --w-h2:500;
  --tr-h1:-0.01em;
  --tr-h2:-0.006em;
  --tr-micro:0.16em;
  --lh-h1:0.92;
  --lh-body:1.75;

  /* --- Raum --- */
  --pad:clamp(16px,3.4vw,56px);
  --space-section:clamp(52px,8vh,110px);
  --grid:80px;          /* Rasterweite des Fadenkreuzes */

  /* --- Viewport (vom Bake-off überschreibbar) --- */
  --vh:100vh;

  /* --- Vier Stellschrauben, die vorher ins Leere liefen ---
     Alle vier standen nur als `var(--name, Ersatzwert)` im Stilblatt, gesetzt
     hat sie niemand: --brand-w und --dn-min gar nie, --unroll-dur und
     --word-delay stammen aus der Zeit vor --t-unroll/--t-word. Es galt also
     immer der Ersatzwert — ein Knopf, an dem nichts hängt.

     Hier stehen jetzt genau die Werte, die bisher als Ersatz gegriffen haben.
     Optisch ändert sich damit nichts; der Unterschied ist, dass Drehen jetzt
     wirkt und an einer Stelle steht. */
  --brand-w:118px;      /* Breite des Logos in der Kopfzeile */
  --dn-min:264px;       /* schmalste Leistungskarte, bevor umgebrochen wird */
  --unroll-dur:1.7s;    /* Aufrollen des Rings */
  --word-delay:1.95s;   /* wann der Schriftzug zündet */
}

/* --- Primitive, in allen Varianten gleich --- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:var(--lh-body)}
img,video{display:block;max-width:100%}
/* `picture` ist keine Bildhülle im Layout, sondern nur die Stelle, an der der
   Browser zwischen WebP und JPEG wählt. `display:contents` nimmt sie aus dem
   Kastenbaum heraus: Das `img` bleibt dort, wo es vorher stand — Rasterzelle,
   Flex-Element, absolute Positionierung, alles unverändert. Ohne diese Zeile
   müsste jede Regel, die ein Bild positioniert, um eine Ebene ergänzt werden.

   `source` muss dabei ausdrücklich verschwinden. Es ist reine Angabe und hat
   nie etwas Sichtbares — aber sobald die Hülle durchsichtig wird, rückt es als
   eigenes Kind ins Raster nach. Im Bildbetrachter stand danach neben jedem
   Bild eine leere Zelle, weil das Raster abwechselnd `source` und `img`
   platziert hat. */
picture{display:contents}
picture > source{display:none}
a{color:inherit}

/* Die Rufnummer bleibt zusammen.

   Sie steht seit dem 17.08.2026 als `02431 97 44 575` da statt als
   `02431 9744575` — Björns Entscheidung nach dem VoiceOver-Durchgang: Ein
   Block aus sieben Ziffern verleitet Sprachausgaben dazu, eine Zahl daraus zu
   machen („neun Millionen siebenhundertvierundvierzigtausend…") statt einer
   Nummer. In Gruppen liest sie sich vorgelesen wie am Telefon — und für
   Sehende auch besser.

   Der Preis sind drei neue Umbruchstellen, wo vorher keine waren. Gemessen
   bricht an keiner Stelle etwas um, aber eine Rufnummer über zwei Zeilen ist
   die Sorte Fehler, die erst auf einem fremden Gerät auffällt. Eine Zeile
   kostet es, das auszuschließen. */
a[href^="tel:"]{white-space:nowrap}

/* Antippfläche der Rufnummer auf dem Telefon.
   Gemessen am 17.08.2026: 24–25 px hoch. WCAG 2.2 AA verlangt 24 × 24 und
   war damit erfüllt — knapp. Für einen Vor-Ort-Betrieb ist die Rufnummer am
   Telefon aber die wahrscheinlichste Handlung überhaupt, und ein Daumen
   trifft 24 px schlecht.

   Warum ein Pseudoelement und keine Polsterung: Beide Rufnummern sind
   `display:inline-flex` und tragen ihren Unterstrich als Hintergrundbild an
   `background-position:0 100%`. Polsterung würde den Strich nach unten
   schieben. Die unsichtbare Fläche liegt stattdessen mittig über dem Link
   und rührt das Layout nicht an. */
@media(max-width:640px){
  .hero .heroruf a,
  .abschluss .aruf a{position:relative}
  .hero .heroruf a::after,
  .abschluss .aruf a::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%);
  }
}

.lbl{font-size:var(--fs-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--ink-3)}
.sig{color:var(--orange)}

h1{font-family:var(--font-display);font-weight:var(--w-h1);font-size:var(--fs-h1);
  line-height:var(--lh-h1);letter-spacing:var(--tr-h1);text-transform:uppercase}
h2{font-family:var(--font-display);font-weight:var(--w-h2);font-size:var(--fs-h2);
  line-height:1.02;letter-spacing:var(--tr-h2);text-transform:uppercase;max-width:20ch}
h3{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);
  text-transform:uppercase;line-height:1.05}
.lead{margin-top:20px;max-width:60ch;color:var(--ink-2)}

/* Hervorhebung im Fließtext. Orange unterstrichen statt orange eingefärbt:
   Die Markenfarbe ist auf dieser Seite für Handlungen und Kennungen
   reserviert — färbte man ganze Sätze damit ein, verlöre sie ihre Bedeutung.
   Der Strich hebt hervor, die Schrift bleibt Text. Etwas heller als der
   übrige Absatz (--ink statt --ink-2), damit die Betonung auch ohne Farbe
   trägt. */
.hervor{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:2px;
  text-underline-offset:5px;
  text-decoration-skip-ink:auto;
}

/* Fadenkreuz-Raster */
.reticle{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:var(--grid) var(--grid)}
.reticle::after{content:"";position:absolute;inset:0;opacity:.8;
  background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1.6px);
  background-size:var(--grid) var(--grid);
  background-position:calc(var(--grid)/2) calc(var(--grid)/2)}
.wrap{position:relative;z-index:1}

/* Kopf */
header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:24px;
  padding:12px var(--pad);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
header .logo{width:104px}

/* --- Marke: Signet rollt auf, danach erscheint NORDIX in Weiß --- */
@property --unroll{syntax:'<angle>';initial-value:0deg;inherits:false}

/* Das Logo ist seit dem 17.08.2026 ein Verweis, kein Bild in einer Hülle:
   auf der Startseite nach oben, auf jeder anderen Seite zur Startseite. Das
   erwartet man von einem Logo, und wer es zum ersten Mal anklickt, probiert
   es nicht ein zweites Mal.

   `display:block` ist dabei nicht Kosmetik: Ein `<a>` ist von Haus aus inline,
   und an einem inline-Element greifen weder `width` noch `aspect-ratio` — die
   Marke wäre auf ihre Zeilenhöhe zusammengefallen.

   Der Name kommt aus `aria-label`, die beiden Bilder tragen `aria-hidden`.
   Sonst hieße der Verweis nur „NORDIX", und das sagt nicht, wohin er führt —
   Punkt 3 der VoiceOver-Prüfliste. */
.brand{position:relative;display:block;width:var(--brand-w,118px);aspect-ratio:1080/630;flex:0 0 auto}
.brand img{position:absolute;inset:0;width:100%;height:100%;display:block}
.brand .ring{
  -webkit-mask-image:conic-gradient(from 180deg at 34% 50%,#000 var(--unroll),transparent var(--unroll));
  mask-image:conic-gradient(from 180deg at 34% 50%,#000 var(--unroll),transparent var(--unroll));
  animation:unroll var(--unroll-dur,1.7s) cubic-bezier(.25,.8,.25,1) .25s forwards}
@keyframes unroll{to{--unroll:360deg}}
/* Der Schriftzug zündet, er blendet nicht ein.
   `steps(1,end)` ist der Kern: Es wird zwischen den Stützstellen GESCHALTET,
   nicht überblendet. Eine Leuchtstoffröhre dimmt nicht — ein weicher Verlauf
   sieht sofort nach Software aus statt nach Technik. Erst mehrere
   Fehlzündungen mit echten Dunkelphasen, dann zwei Nachzucker, wenn man denkt,
   es stünde schon.

   Kein `filter`, kein Aufstrahlen: allein das Schaltverhalten. Deshalb geht
   auch kein Wert über die Endhelligkeit hinaus.

   Hier 1,3 s statt der 2,4 s auf der Eröffnungsbühne. Gleiche Kurve, kürzere
   Zeit — das Logo in der Kopfzeile ist ein Viertel so groß und soll nicht
   ebenso lange um Aufmerksamkeit bitten. Die Stützstellen sind Prozentwerte,
   der Charakter bleibt deshalb derselbe. */
.brand .word{opacity:0;animation:zuenden 1.3s steps(1,end) var(--word-delay,1.95s) forwards}
@keyframes zuenden{
  0%   {opacity:0}
  5%   {opacity:.8}
  7%   {opacity:0}
  16%  {opacity:0}
  18%  {opacity:1}
  21%  {opacity:.06}
  28%  {opacity:.06}
  30%  {opacity:.9}
  33%  {opacity:.12}
  40%  {opacity:1}
  43%  {opacity:.45}
  48%  {opacity:1}
  62%  {opacity:1}
  65%  {opacity:.1}
  69%  {opacity:1}
  78%  {opacity:1}
  80%  {opacity:.35}
  83%  {opacity:1}
  100% {opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .brand .ring{animation:none;-webkit-mask-image:none;mask-image:none}
  .brand .word{animation:none;opacity:1}
}
header nav{margin-left:auto;display:flex;gap:22px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
header nav a{text-decoration:none;color:var(--ink-2)}
header nav a:hover{color:var(--orange)}
.hcta{border:1px solid var(--orange);color:var(--orange);padding:7px 14px;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.hcta:hover{background:var(--orange);color:var(--bg)}

/* Aktionen */
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:var(--bg);
  text-decoration:none;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 24px;clip-path:polygon(0 0,100% 0,100% 68%,calc(100% - 12px) 100%,0 100%);
  transition:filter .25s ease}
.cta:hover{filter:brightness(1.12)}
.quiet{text-decoration:none;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:3px}
.quiet:hover{color:var(--orange)}
.actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* Video-Feed */
.feed{position:relative;overflow:hidden;background:#000}
.feed video{width:100%;height:100%;object-fit:cover;opacity:.92}
.feed .scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px)}
.feed .corner{position:absolute;width:18px;height:18px;border:1px solid rgba(253,166,7,.8)}
.feed .c1{top:14px;left:14px;border-right:0;border-bottom:0}
.feed .c2{top:14px;right:14px;border-left:0;border-bottom:0}
.feed .c3{bottom:14px;left:14px;border-right:0;border-top:0}
.feed .c4{bottom:14px;right:14px;border-left:0;border-top:0}
.feed .tag{position:absolute;bottom:16px;left:44px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange)}

/* Statusleiste */
.bar{display:flex;border-bottom:1px solid var(--line);font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.bar div{padding:8px var(--pad);border-right:1px solid var(--line);white-space:nowrap}
.bar div:last-child{border:0;margin-left:auto}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);
  margin-right:7px;animation:blink 2.4s steps(1,end) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.25}}

/* Fußzeile */
footer{padding:22px var(--pad) 40px;display:flex;gap:12px;flex-wrap:wrap;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
footer a{text-decoration:none}
footer a:hover{color:var(--orange)}
footer .far{margin-left:auto}

/* Trennpunkte in der Fußzeile.
   Innerhalb der ersten Angabe standen schon Punkte („NORDIX · Björn
   Grossert · Erkelenz"), zwischen den Hauptangaben dagegen nur Abstand —
   dieselbe Reihe, zwei Trennlogiken. Jetzt durchgehend der Punkt.

   Eigene Elemente statt `::before` an den Verweisen: Ein Pseudoelement
   im `<a>` gehört zur Verweisfläche und färbte sich beim Überfahren mit
   orange ein — der Punkt VOR „Datenschutz" hätte auf dessen Hover reagiert.
   `aria-hidden`, damit Sprachausgaben nicht „Punkt" zwischen die Angaben
   sprechen.

   Kein Punkt vor 㤠19 UStG": Das steht per `margin-left:auto` weit rechts,
   ein Trenner mit 200 px Abstand davor trennt nichts mehr.

   NACHGEMESSEN, nicht geschätzt. Mit dem vierten Rechtsverweis („Widerruf",
   seit 18.08.2026) wuchs der Bedarf von 1289 auf 1397 px, und die Reihe
   brach schon bei 1421 px um — mit sichtbaren Punkten, also genau der
   Zustand, den der Haltepunkt verhindern soll.

   Statt den Haltepunkt immer weiter hochzuschrauben ist der Abstand von
   20 auf 12 px gesunken: Die Punkte übernehmen das Trennen, dafür war der
   große Abstand ursprünglich da. Das holt bei neun Lücken rund 72 px
   zurück: Der Bedarf sank von 1397 auf 1247 px, die Reihe bricht damit erst
   unter rund 1338 px um. Haltepunkt 1360 px.

   Der Wert ist gemessen, nicht geschätzt — Schätzungen lagen hier dreimal
   daneben (1180, 1340 und 1440 px). Wer die Fußzeile ändert, misst neu:
   Summe der sichtbaren Elemente plus Lücken, geteilt durch 0,932. Dann verschwinden die Punkte:
   Ein Trenner, der als erstes Zeichen einer neuen Zeile steht, trennt nicht,
   sondern sieht nach Versehen aus. */
footer .tr,footer .tp{color:var(--punkt)}

/* NUR `.tr` verschwindet unter 1360 px. `.tp` steht INNERHALB der ersten
   Angabe und trennt dort drei Teile eines Satzes — ohne die Punkte stünde
   dort „NORDIX IT-Dienstleistungen Björn Grossert, Inhaber und Gründer
   Erkelenz" in einem Zug. Und `.tp` bekommt KEIN `aria-hidden`: Bei `.tr`
   liegt zwischen den Angaben ohnehin eine Elementgrenze, an der jede
   Sprachausgabe eine Pause macht. Innerhalb eines Spans gibt es die nicht —
   dort ist der Punkt die einzige Trennung, die ankommt. */
@media(max-width:1360px){
  footer .tr{display:none}
}

/* „Eigenbau" in der Fußzeile.
   Für einen IT-Betrieb ist die eigene Seite ein Arbeitsnachweis — das gehört
   erwähnt, aber nicht plakativ. Deshalb die Stelle, an der klassisch das
   „gebaut von" steht, in der Farbe der Nebenangaben und ohne Ausrufezeichen.

   Erster Entwurf war ein ganzer Satz („…ohne Baukasten und ohne fremdes
   Theme"), 106 Zeichen. Der brach in der Fußzeile um und wurde damit zum
   Block, während daneben alles einzeilig steht — er zog mehr Aufmerksamkeit
   auf sich als der Rest der Zeile zusammen. Jetzt 38 Zeichen: dieselbe
   Aussage, aber ein Glied in der Reihe statt ein Absatz.

   KEIN `nowrap`. Ich hatte es zwischenzeitlich gesetzt, damit der Satz
   garantiert einzeilig bleibt — mit der längeren Fassung („Website-Design")
   misst er 340 px und schob bei 320 px Schirmbreite die GESAMTE Seite
   36 px in die Breite: waagerechtes Scrollen auf dem ganzen Dokument, wegen
   einer Fußzeile. Ab 375 px passt er ohnehin von selbst in eine Zeile
   (340 von 343 px); darunter darf er umbrechen, denn dort ist die Fußzeile
   sowieso gestapelt. Eine erzwungene Zeile ist keine Zeile wert, wenn sie
   die Seite sprengt. */
footer .eigenbau{color:var(--ink-3)}

/* Einblenden */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .dot{animation:none}
}

/* Sprungmarke — der erste Halt der Tabulatortaste.
   Wer die Seite mit der Tastatur bedient, musste bisher durch Logo, vier
   Menüpunkte und den Anfrageknopf, bevor der erste Satz kam; auf der Startseite
   liegt danach noch die gesamte Galerie. Die Marke ist unsichtbar, bis sie den
   Fokus bekommt — dann steht sie über allem, auch über der Kopfzeile (z-index
   50 > header 40). */
.skiplink{
  position:fixed;top:10px;left:10px;z-index:50;
  transform:translateY(-160%);
  padding:12px 18px;border-radius:10px;
  background:var(--orange);color:#0c0e0f;
  font-family:var(--font-body);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}
.skiplink:focus{transform:none;outline:2px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.skiplink{transition:none}}

/* Antippbare Größe für die kleinen Textlinks.
   Fußzeile und Kartenquelle standen bei 14 bis 18 Pixel Höhe — unter dem
   Mindestmaß von 24×24 (WCAG 2.5.8). Statt die Schrift zu vergrößern, wächst
   nur die anklickbare Fläche: Der senkrechte Innenabstand hebt sie über das
   Maß, ohne dass sich am Schriftbild etwas ändert. */
footer a,.karte-quelle a{display:inline-block;padding:5px 0}
footer{align-items:center}

/* Schalter am Werkstattband — der Anhalteweg (WCAG 2.2.2).
   Er sitzt in der unteren rechten Ecke, dort wo die Winkelmarken enden, und
   spricht deren Sprache: ein Strich Markenorange, sonst nichts. Sichtbar ist
   er immer — ein Knopf, der erst beim Überfahren erscheint, existiert für
   Tastatur und Finger nicht. */
.bandschalter{
  position:absolute;z-index:3;right:46px;bottom:14px;
  width:34px;height:34px;display:grid;place-items:center;
  padding:0;border:1px solid rgba(253,166,7,.55);border-radius:9px;
  background:rgba(12,14,15,.62);backdrop-filter:blur(6px);
  color:var(--orange);cursor:pointer;
  transition:border-color .22s ease,background-color .22s ease,color .22s ease;
}
.bandschalter:hover,.bandschalter:focus-visible{
  border-color:var(--orange);background:rgba(12,14,15,.86);color:var(--orange-hell);
}
.bandschalter:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.bandschalter svg{width:15px;height:15px;fill:currentColor}
/* Es zeigt immer das, was der Druck bewirkt: läuft es, steht Pause darauf. */
.band[data-läuft="ja"] .i-play,
.band[data-läuft="nein"] .i-pause{display:none}
@media(max-width:560px){.bandschalter{right:14px;bottom:46px}}
@media(prefers-reduced-motion:reduce){.bandschalter{transition:none}}