/* =====================================================================
   Akkar GmbH · Neubau 13.08.2026
   Gestaltungsprinzip: die Seite ist ein Prüfprotokoll, kein Prospekt.
   Ein Einkäufer im Kraftwerk prüft zuerst, ob der Betrieb überhaupt auf
   die Lieferantenliste darf. Also führt die Seite Nachweise wie ein
   Datenblatt: feste Spalten, Registriernummern, Gültigkeitsdaten,
   Tabellenziffern. Alles Dekorative ist gestrichen.

   Farben am Original gemessen (Logoscan, häufigste Cluster, nicht
   gemittelt), siehe leads/akkar/DOSSIER.md Abschnitt 8.
   ===================================================================== */

@font-face{
  font-family:'Encode Sans';
  src:url('encodesans.woff2') format('woff2-variations');
  font-weight:400 800;
  font-stretch:75% 112.5%;
  font-style:normal;
  font-display:swap;
}
/* Metrisch angeglichener Ersatz, damit beim Schriftwechsel nichts springt. */
@font-face{
  font-family:'Encode Ersatz';
  src:local("Helvetica Neue"),local("Arial"),local("Liberation Sans");
  size-adjust:97%;ascent-override:96%;descent-override:24%;line-gap-override:0%;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* --- Ebene 1: gemessene Rohfarben ------------------------------- */
  --marine:#1a2a57;        /* Logo-Signet und Balken */
  --marine-tief:#101b3a;   /* abgedunkelt für Flächen */
  --marine-hell:#3d5a8c;   /* aufgehellt für Linien auf dunklem Grund */
  --tinte:#18231f;         /* Wortmarke KKAR */
  --funke:#b24c21;         /* Schweißfunken vom Deckblatt */

  /* --- Ebene 2: Rollen -------------------------------------------- */
  --grund:#f4f5f7;         /* Papier */
  --grund-2:#e8eaee;       /* zweite Fläche */
  --blatt:#ffffff;
  --text:#1b1f26;
  --text-2:#4d5563;        /* 7,0:1 auf --grund */
  --text-3:#666d7a;        /* Bezeichner. Gerechnet: 4,77:1 auf --grund (AA),
                              #6b7280 lag mit 4,43:1 knapp darunter. */
  --linie:#d3d7de;
  --linie-stark:#9aa1ad;
  --akzent:#8f3a17;        /* Funke abgedunkelt: 5,6:1 auf --grund, für Text */

  /* --- Ebene 3: Maße ---------------------------------------------- */
  --rand:clamp(20px,4vw,56px);
  --breite:1220px;
  --schmal:760px;
  --takt:clamp(72px,9vw,124px);
  --schrift:'Encode Sans','Encode Ersatz',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.6,.3,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--grund);color:var(--text);
  font-family:var(--schrift);font-weight:400;font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62;
  font-variant-numeric:tabular-nums;   /* Pflicht: DN/PN/Normnummern dürfen nicht springen */
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--funke);outline-offset:3px}

.huelle{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.eng{max-width:var(--schmal)}

/* --- Typografie ---------------------------------------------------
   Eine Familie, differenziert über Breite und Gewicht wie in ISO 3098.
   Kein zweites Schriftbild.                                          */
h1,h2,h3{font-weight:800;line-height:1.04;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.5rem + 4.4vw,4.9rem);font-stretch:112.5%}
/* Unterseiten: die H1 ist der Seitentitel, nicht der Claim — eine Stufe kleiner. */
h1.seiten-titel{font-size:clamp(1.75rem,1.25rem + 2.2vw,2.8rem);font-stretch:100%}
h2{font-size:clamp(1.75rem,1.25rem + 2.2vw,2.8rem);font-stretch:100%}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);font-stretch:100%}
p{text-wrap:pretty;max-width:68ch}
.gross{font-size:clamp(1.1rem,1.02rem + .45vw,1.32rem);color:var(--text-2);line-height:1.55}

/* Blattnummer — die Seite zählt Abschnitte wie ein Zeichnungssatz */
.blatt{
  display:flex;align-items:center;gap:14px;
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  font-stretch:87.5%;color:var(--akzent);margin-bottom:22px;
}
/* Auf Unterseiten steht ueber der H1 kein Etikett, sondern der Pfad.
   Traegt dieselbe Blattnummer, ist aber Navigation statt Zierleiste. */
.pfad{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:20px;
  font-size:.88rem;color:var(--text-3)}
.pfad a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--linie)}
@media (hover:hover) and (pointer:fine){.pfad a:hover{color:var(--text);border-bottom-color:var(--text)}}
.pfad b{margin-left:4px;font-weight:700;color:var(--akzent);font-variant-numeric:tabular-nums}

.blatt::after{content:"";flex:1;height:1px;background:var(--linie);max-width:180px}
.blatt b{font-weight:800;color:var(--text-3)}

/* --- Kopf ---------------------------------------------------------- */
.sprung{position:absolute;left:-9999px;top:0;background:var(--marine);color:#fff;padding:12px 18px;z-index:100}
.sprung:focus{left:12px;top:12px}

header{position:sticky;top:0;z-index:50;background:rgba(244,245,247,.9);
  backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--linie)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
/* Das Originallogo traegt Signet UND Wortmarke, deshalb nur noch ein
   Element im Kopf. Hoehe statt Breite gesetzt: die Zeile richtet sich
   nach der Zeilenhoehe des Kopfes, die Breite folgt dem Seitenverhaeltnis. */
.marke .zeichen{height:46px;width:auto;flex:none;display:block}
nav.haupt{display:flex;align-items:center;gap:26px}
nav.haupt a{font-size:.94rem;font-weight:600;color:var(--text-2);text-decoration:none;padding:6px 0;position:relative}
@media (hover:hover) and (pointer:fine){nav.haupt a:hover{color:var(--text)}}
nav.haupt a[aria-current]{color:var(--text)}
nav.haupt a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--funke)}
@media(max-width:1040px){nav.haupt .versteckbar{display:none}}

/* ── Handy: Rufnummer nach UNTEN, Seitenlinks hinter einen Knopf ──────
   Zwei getrennte Aufgaben, zwei getrennte Orte. Die Rufnummer ist die
   eine Handlung, die immer erreichbar sein muss - sie sitzt fest unten
   im Daumenweg (.ruf-leiste). Die Seitenlinks werden seltener gebraucht
   und liegen deshalb hinter dem Knopf oben rechts. So bleibt der Kopf
   eine flache Zeile statt eines zweizeiligen Blocks.

   Der Knopf erscheint nur, wenn JavaScript laeuft (html.js). Ohne
   JavaScript bleibt der bisherige Umbruch stehen - die Links waeren
   sonst hinter einem Knopf eingesperrt, der nichts tut. */
.menue-knopf{display:none}

@media(max-width:820px){
  .kopf{flex-wrap:wrap;height:auto;padding-block:14px;gap:14px}
  .kopf .marke{flex:1 1 auto}
  nav.haupt{order:3;flex-basis:100%;flex-wrap:wrap;gap:18px 20px;
    border-top:1px solid var(--linie);padding-top:12px}
  nav.haupt .versteckbar{display:inline-flex}

  /* Die Rufnummer steht jetzt unten, im Kopf waere sie doppelt. */
  nav.haupt .knopf.voll{display:none}

  html.js .menue-knopf{
    display:inline-flex;align-items:center;gap:10px;flex:none;order:2;
    background:var(--blatt);border:1px solid var(--linie-stark);border-radius:9px;
    padding:10px 14px;font:inherit;font-weight:700;font-size:.9rem;
    color:var(--text);cursor:pointer;
    min-height:44px  /* Tippziel */
  }
  html.js .menue-knopf:focus-visible{outline:2px solid var(--marine);outline-offset:2px}

  /* Drei Striche aus einem Element: der mittlere ist der Koerper, die
     beiden aeusseren sind seine Schattenbilder. */
  html.js .striche,
  html.js .striche::before,
  html.js .striche::after{
    display:block;width:19px;height:2px;background:var(--text);border-radius:2px
  }
  html.js .striche{position:relative}
  html.js .striche::before,
  html.js .striche::after{content:"";position:absolute;left:0;
    transition:transform .22s var(--ease),top .22s var(--ease)}
  html.js .striche::before{top:-6px}
  html.js .striche::after{top:6px}

  /* Offen: aus den drei Strichen wird ein Kreuz. */
  html.js .menue-knopf[aria-expanded="true"] .striche{background:transparent}
  html.js .menue-knopf[aria-expanded="true"] .striche::before{top:0;transform:rotate(45deg)}
  html.js .menue-knopf[aria-expanded="true"] .striche::after{top:0;transform:rotate(-45deg)}

  /* Geschlossenes Menue: aus dem Fluss genommen, nicht nur unsichtbar -
     sonst waere es weiter mit der Tastatur erreichbar. */
  html.js nav.haupt{display:none}
  html.js nav.haupt.menue-offen{display:flex;flex-direction:column;align-items:stretch;gap:0}
  html.js nav.haupt.menue-offen a{
    padding:15px 2px;border-bottom:1px solid var(--linie);font-size:1rem
  }
  html.js nav.haupt.menue-offen a:last-child{border-bottom:0}
  html.js nav.haupt.menue-offen a[aria-current]::after{display:none}
  html.js nav.haupt.menue-offen a[aria-current]{color:var(--akzent)}
}
@media(max-width:420px){
  nav.haupt{gap:14px}
  nav.haupt a:not(.knopf){font-size:.9rem}
}

/* ── Feste Rufleiste unten ──────────────────────────────────────────── */
.ruf-leiste{display:none}
@media(max-width:820px){
  .ruf-leiste{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));
    background:rgba(244,245,247,.94);backdrop-filter:saturate(1.3) blur(10px);
    border-top:1px solid var(--linie-stark)
  }
  .ruf-leiste .knopf{width:100%}
  /* Platz schaffen, damit die Leiste den Fussbereich nicht verdeckt */
  body{padding-bottom:82px}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  html.js .striche::before,
  html.js .striche::after{transition:none}
}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;font:inherit;font-weight:700;font-size:.95rem;text-decoration:none;
  border:1.5px solid transparent;border-radius:2px;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.knopf.voll{background:var(--marine);color:#fff}
.knopf.linie{border-color:var(--linie-stark);color:var(--text)}
.knopf.hell{border-color:rgba(255,255,255,.42);color:#fff}
@media (hover:hover) and (pointer:fine){
  .knopf.voll:hover{background:var(--marine-tief)}
  .knopf.linie:hover{border-color:var(--text);background:rgba(26,42,87,.05)}
  .knopf.hell:hover{background:rgba(255,255,255,.12)}
}

/* --- Hero ----------------------------------------------------------
   Kein Foto: es gibt keins mit geklärter Herkunft. Stattdessen die
   Zeichnung, in der dieses Gewerk ohnehin denkt — eine Rundnaht im
   Schnitt, Maße dran.                                                */
.hero{position:relative;background:var(--marine-tief);color:#fff;
  padding-block:clamp(64px,9vw,112px) 0}
.hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(120% 90% at 78% 40%,#000 20%,transparent 78%)}
.hero-raster{position:relative;display:grid;gap:clamp(38px,5vw,64px);
  grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:980px){.hero-raster{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hero h1{color:#fff}
/* Die zweite Zeile ist der Untertitel des Betriebs, nicht Teil des Claims.
   Halbe Größe, damit die Hierarchie stimmt und der Claim allein steht. */
.hero h1 em{display:block;margin-top:.34em;font-style:normal;font-size:.42em;
  font-weight:700;font-stretch:100%;letter-spacing:-.005em;line-height:1.2;
  color:rgba(255,255,255,.72)}
.hero .gross{color:rgba(255,255,255,.86);margin-top:22px}
.hero .knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* Schriftfeld — das Feld unten rechts auf jeder technischen Zeichnung.
   Trägt hier, was sonst als Eyebrow über der Überschrift stünde: Ort,
   Feld, Rechtsform. Es steht bewusst UNTER dem Satz, wie in der Zeichnung. */
.schriftfeld{position:relative;margin-top:clamp(44px,5vw,68px);
  border-top:1px solid rgba(255,255,255,.22);
  display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.schriftfeld{grid-template-columns:repeat(4,1fr)}}
.schriftfeld div{padding:18px 20px 22px;border-right:1px solid rgba(255,255,255,.13)}
.schriftfeld div:nth-child(odd){padding-left:0}
@media(min-width:760px){
  .schriftfeld div:nth-child(odd){padding-left:20px}
  .schriftfeld div:first-child{padding-left:0}
}
.schriftfeld div:last-child{border-right:none}
.schriftfeld dt{font-size:.755rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-stretch:87.5%;margin-bottom:7px}
.schriftfeld dd{font-size:.95rem;font-weight:700;color:#fff;line-height:1.35}

/* Zeichnung */
.zeichnung{width:100%;height:auto}
.zeichnung .kontur{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.4}
.zeichnung .fuell{fill:rgba(255,255,255,.055)}
.zeichnung .mass{stroke:rgba(255,255,255,.34);stroke-width:1}
.zeichnung .masstext{fill:rgba(255,255,255,.62);font-size:15px;font-weight:600;font-stretch:87.5%}
.zeichnung .mitte{stroke:rgba(255,255,255,.3);stroke-width:1;stroke-dasharray:14 5 3 5}
/* Die Naht: läuft in Schweißrichtung von links nach rechts zu.
   Ruhezustand ohne JS ist der Endzustand — die volle Naht. */
.naht{stroke:var(--funke);stroke-width:5;stroke-linecap:round;fill:none;
  filter:drop-shadow(0 0 7px rgba(178,76,33,.65))}
.js .naht{stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600)}
.js .naht.gelegt{transition:stroke-dashoffset 1.5s var(--ease);stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .js .naht{stroke-dashoffset:0}
  .js .naht.gelegt{transition:none}
}

/* --- Kennzahlenband ------------------------------------------------ */
.band{background:var(--marine);color:#fff;border-block:1px solid rgba(255,255,255,.14)}
.band-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.16)}
@media(min-width:760px){.band-raster{grid-template-columns:repeat(4,1fr)}}
.band-raster div{background:var(--marine);padding:26px var(--rand)}
.band-raster b{display:block;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);font-weight:800;line-height:1;font-stretch:100%}
/* Kein Versalsatz: die Zeilen sind Sätze, keine Kürzel. Versalien nur dort,
   wo ein Wort als Marke steht (Tabellenkopf, Blattnummer). */
.band-raster span{display:block;margin-top:9px;font-size:.86rem;font-weight:600;
  color:rgba(255,255,255,.74);font-stretch:87.5%}

/* --- Abschnitte ----------------------------------------------------- */
section{padding-block:var(--takt)}
section.blatt-hell{background:var(--blatt)}
.kopfzeile{margin-bottom:clamp(38px,4.5vw,60px)}
.kopfzeile p{margin-top:16px}

/* Leistungskarten: drei Spalten wie ein Leistungsverzeichnis */
.lv{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
@media(min-width:900px){.lv{grid-template-columns:repeat(3,1fr)}}
.lv article{background:var(--blatt);padding:clamp(26px,3vw,38px)}
.lv .pos{font-size:.78rem;font-weight:800;letter-spacing:.18em;color:var(--akzent);
  display:block;margin-bottom:14px;font-stretch:87.5%}
.lv h3,.lv h2{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);font-stretch:100%;margin-bottom:12px}
.lv p{font-size:.96rem;color:var(--text-2)}
.lv ul{list-style:none;margin-top:18px;border-top:1px solid var(--linie);padding-top:16px}
.lv li{font-size:.9rem;color:var(--text-2);padding:7px 0 7px 18px;position:relative}
.lv li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:1.5px;background:var(--linie-stark)}

/* Datenblatt-Tabelle für Nachweise und Anlagen */
.datenblatt{width:100%;border-collapse:collapse;font-size:.94rem}
.datenblatt caption{text-align:left;font-size:.88rem;font-weight:600;
  color:var(--text-3);padding-bottom:12px}
.datenblatt th,.datenblatt td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--linie);vertical-align:top}
.datenblatt thead th{font-size:.785rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);border-bottom:2px solid var(--linie-stark);font-stretch:87.5%;white-space:nowrap}
.datenblatt tbody th{font-weight:700;color:var(--text)}
.datenblatt td{color:var(--text-2)}
.datenblatt tr:last-child th,.datenblatt tr:last-child td{border-bottom:none}
.tabelle-rollt{overflow-x:auto;border:1px solid var(--linie);background:var(--blatt);padding:8px 10px}
.marke-gut{color:#1f6b3a;font-weight:700;white-space:nowrap}
.marke-offen{color:var(--akzent);font-weight:700;white-space:nowrap}

/* Anlagenliste */
.anlagen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
@media(min-width:820px){.anlagen{grid-template-columns:repeat(3,1fr)}}
.anlagen section,.anlagen>div{background:var(--blatt);padding:clamp(24px,2.6vw,32px)}
.anlagen h3,.anlagen h2{font-size:1.06rem;font-stretch:100%;margin-bottom:14px}
.anlagen ul{list-style:none}
.anlagen li{font-size:.9rem;color:var(--text-2);padding:6px 0;border-bottom:1px dotted var(--linie)}
.anlagen li:last-child{border-bottom:none}

/* Zitatblock — Sätze des Betriebs, nicht unsere */
.zitat{border-top:2px solid var(--tinte);padding-top:clamp(18px,2vw,26px)}
.zitat p{font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);font-weight:700;line-height:1.32;letter-spacing:-.01em}
.zitat cite{display:block;margin-top:16px;font-style:normal;font-size:.82rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-stretch:87.5%}

/* Handlungsaufforderung */
.aufruf{background:var(--marine-tief);color:#fff}
.aufruf h2{color:#fff}
.aufruf p{color:rgba(255,255,255,.82);margin-top:16px}
.aufruf .knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.aufruf a.tel{font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);font-weight:800;color:#fff;
  text-decoration:none;border-bottom:2px solid var(--funke);padding-bottom:2px}

/* Karte, zwei Klicks */
.karte-huelle{border:1px solid var(--linie);background:var(--blatt);padding:clamp(20px,2.5vw,30px)}
.karte-platz{aspect-ratio:16/9;background:var(--grund-2);display:grid;place-items:center;
  text-align:center;padding:24px;border:1px dashed var(--linie-stark)}
.karte-platz p{font-size:.9rem;color:var(--text-2);margin:12px auto 18px;max-width:46ch}
.karte-platz iframe{width:100%;height:100%;border:0}

/* Fuß */
footer{background:var(--marine-tief);color:rgba(255,255,255,.72);padding-block:clamp(48px,6vw,72px) 32px;font-size:.92rem}
.fuss-raster{display:grid;gap:36px}
@media(min-width:760px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr}}
footer h2{color:#fff;font-size:.85rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:16px;font-stretch:87.5%}
footer a{color:rgba(255,255,255,.72);text-decoration:none}
@media (hover:hover) and (pointer:fine){footer a:hover{color:#fff;text-decoration:underline}}
footer ul{list-style:none;display:grid;gap:9px}
.fuss-schluss{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  font-size:.84rem;color:rgba(255,255,255,.55)}
.fuss-recht{display:flex;flex-wrap:wrap;gap:6px 26px}

/* Zeichenreihe fuer Profile. Gemessen an KAEFER, Bilfinger, WISAG und
   XERVON: alle vier setzen genau das - ein Symbol in der Schlusszeile,
   rechts neben der Rechtszeile, ohne Ueberschrift. Die Flaeche ist
   44x44 px, damit sie auch am Daumen sicher zu treffen ist. */
.fuss-zeichen{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.fuss-zeichen a{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-10px;transition:opacity .2s var(--ease)}
.fuss-zeichen svg{width:22px;height:22px;display:block}
/* Das Zeichen bringt eigene Farbe mit, deshalb keine Umfaerbung beim
   Ueberfahren, sondern Deckkraft - sonst waere die Marke veraendert. */
@media (hover:hover) and (pointer:fine){
  .fuss-zeichen a{opacity:.86}
  .fuss-zeichen a:hover{opacity:1}
}

/* Hinweisstreifen für offene Kundenangaben — sichtbar, nicht versteckt */
/* Offene Kundenangabe: gestrichelt wie eine unbestätigte Maßangabe in der
   Zeichnung — dieselbe Sprache wie .karte-platz, kein farbiger Balken. */
.offen{background:#fff6ed;border:1.5px dashed #d8a276;
  padding:18px 20px;font-size:.92rem;color:#5c3a22}
.offen b{color:#7a3d16}

/* Einblendung beim Scrollen. Ohne JS ist der Endzustand der Ruhezustand. */
.js .auf{opacity:0;transform:translateY(14px)}
.js .auf.da{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .auf{opacity:1;transform:none}
  .js .auf.da{transition:none}
}


/* --- Hilfsklassen statt style-Attributen ---------------------------------
   Die Content-Security-Policy erlaubt style-src 'self'. Ein style="..."
   im HTML wird dadurch verworfen — auf dem Server genauso wie hier.
   Gemessen am 13.08.2026: 124 solcher Attribute wurden still geschluckt.
   Deshalb steht jeder Abstand als Klasse hier. */
.ab-10{margin-top:10px}
.ab-12{margin-top:12px}
.ab-14{margin-top:14px}
.ab-16{margin-top:16px}
.ab-18{margin-top:18px}
.ab-20{margin-top:20px}
.ab-22{margin-top:22px}
.ab-24{margin-top:24px}
.ab-26{margin-top:26px}
.ab-28{margin-top:28px}
.ab-30{margin-top:30px}
.ab-32{margin-top:32px}
.ab-36{margin-top:36px}
.ab-38{margin-top:38px}
.ab-44{margin-top:44px}
.ab-weit{margin-top:clamp(48px,6vw,80px)}
.hinweis{font-size:.94rem;color:var(--text-2)}
.hinweis-klein{font-size:.9rem;color:var(--text-3)}
.zeile{font-size:.98rem;color:var(--text-2)}
.zeile-s{font-size:.96rem;color:var(--text-2)}
.zeile-xs{font-size:.92rem;color:var(--text-2)}
.zeile-quelle{font-size:.86rem}
.stark{font-weight:700}
.stark-dunkel{font-weight:700;color:var(--text)}
.tabellen-zusatz{font-weight:400;color:var(--text-3)}
.fuss-anschrift{color:rgba(255,255,255,.72)}
.lv-voll{grid-template-columns:1fr}
.ohne-oben{padding-top:0}
.kante{border-radius:2px}
.eng-satz{max-width:68ch}
.strichliste{list-style:none}
.strichliste li{padding:7px 0 7px 18px;position:relative}
.strichliste li::before{content:"—";position:absolute;left:0;color:var(--text-3)}
.sr-nur{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =====================================================================
   Hero mit Hintergrundvideo (13.08.2026)
   Die Zeichnung ist in den Abschnitt "Einsatzfelder" gewandert. Hier
   liegt jetzt Bewegtbild - mit einem Standbild, das allein trägt.
   ===================================================================== */
.hero-medium{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
/* Zwei Verläufe: einer legt die linke Hälfte zu (dort steht die Schrift),
   einer nimmt dem Ganzen oben und unten die Helligkeit. Gemessen statt
   geschätzt: Fließtext liegt damit bei 11,8:1 gegen den hellsten Punkt
   hinter der Textspalte. */
/* Rechte Seite am 17.08.2026 zurueckgenommen (.62/.5 -> .28/.12). Die
   alten Werte waren auf den hellen Nebel-Clip abgestimmt; das Schweisser-
   Video ist von sich aus dunkel und verschwand darunter - Lichtbogen,
   Funken und Lichtschaechte waren nicht mehr zu erkennen.
   Links bleibt es dicht: dort steht die Ueberschrift. Kontrast danach
   gemessen, nicht geschaetzt (siehe unten im Messprotokoll). */
.hero-schleier{position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(16,27,58,.97) 0%, rgba(16,27,58,.9) 38%, rgba(16,27,58,.28) 64%, rgba(16,27,58,.12) 100%),
    linear-gradient(to bottom, rgba(16,27,58,.5), rgba(16,27,58,0) 30%, rgba(16,27,58,.62))}
.hero-inhalt{position:relative;z-index:1;max-width:var(--breite)}
.hero-inhalt .gross{max-width:34em}
.hero{padding-block:clamp(80px,11vw,150px) 0}
.hero::before{opacity:.5}

/* --- Wer wir sind ---------------------------------------------------
   Zweispaltig mit viel Luft: die Überschrift steht allein links, der
   Text atmet rechts. Genau das Gegenteil der Datenblatt-Dichte.       */
.vorstellung{background:var(--blatt)}
.vorstellung-raster{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.vorstellung-raster{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
/* Keine harte Zeichenbegrenzung: die Spaltenbreite bestimmt den Umbruch,
   sonst zerfaellt eine lange Ueberschrift in fuenf Stummel. */
.vorstellung h2{max-width:20ch}
.vorstellung p{max-width:60ch}
blockquote.zitat{margin:0}

/* --- Anlagenplan: das erklärende Element der Startseite ---------------
   Vier Positionen im Schnitt statt einer Stichpunktliste. Reines SVG,
   keine Bibliothek, kein externer Request.                             */
.plan-raster{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:960px){.plan-raster{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.anlagenplan{width:100%;height:auto}
.anlagenplan .grund{stroke:var(--text);stroke-width:2}
.anlagenplan .raster-fein line{stroke:var(--linie);stroke-width:1;stroke-dasharray:2 8}
.anlagenplan .teil{fill:rgba(26,42,87,.045);stroke:var(--marine);stroke-width:1.8}
.anlagenplan .membran line,.anlagenplan .boeden line,.anlagenplan .brenner line{stroke:var(--marine);stroke-width:1;opacity:.42}
.anlagenplan .rohr line{stroke:var(--marine);stroke-width:2.4;opacity:.72}
.anlagenplan .stuetze line{stroke:var(--marine);stroke-width:1.4;opacity:.42;stroke-dasharray:6 4}
.anlagenplan .marke-nr circle{fill:var(--funke);stroke:none}
.anlagenplan .marke-nr text{fill:#fff;font-size:17px;font-weight:800;text-anchor:middle;font-family:var(--schrift)}
.anlagenplan .fuehrung{stroke:var(--funke);stroke-width:1.4}

.plan-legende{list-style:none;counter-reset:pos}
.plan-legende li{counter-increment:pos;position:relative;padding:16px 0 16px 46px;border-bottom:1px solid var(--linie)}
.plan-legende li:last-child{border-bottom:none}
.plan-legende li::before{content:counter(pos);position:absolute;left:0;top:15px;
  width:28px;height:28px;border-radius:50%;background:var(--funke);color:#fff;
  display:grid;place-items:center;font-size:.86rem;font-weight:800}
.plan-legende b{display:block;font-size:1.02rem;font-weight:800;margin-bottom:5px}
.plan-legende span{display:block;font-size:.93rem;color:var(--text-2);line-height:1.5}

/* Einleitung und folgender Block gehoeren zusammen: die Luecke dazwischen
   wirkte nach dem Entfernen der Etiketten wie ein Loch. */
.knapp-unten{padding-bottom:clamp(24px,3vw,40px)}

/* ═══════════════════════════════════════════════════════════════════
   Scroll-Sequenz und Bilder · ergaenzt 15.08.2026
   -------------------------------------------------------------------
   Die Bilder sind mit Higgsfield erzeugt, die Sequenz stammt aus einem
   erzeugten Clip (siehe leads/akkar/BILDREGIE-HIGGSFIELD.md). Alles
   traegt sichtbar den Vermerk "Symbolbild".
   =================================================================== */

/* --- Kamerafahrt, deren Bildstand am Scrollen haengt ---------------
   61 Einzelbilder auf einer Leinwand. Geladen wird nur, wenn es sich
   lohnt: nicht unter 768px (1,7 MB gehoeren niemandem aufs Mobilfunk-
   netz), nicht bei prefers-reduced-motion, nicht ohne JavaScript.    */

.sequenz{position:relative}
.sequenz-spur{position:relative;height:320vh}

.sequenz-halt{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;
  overflow:hidden;background:var(--marine-tief)
}

.sequenz-leinwand,.sequenz-standbild{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block
}
.sequenz-leinwand{opacity:0;transition:opacity .3s var(--ease)}
.sequenz-leinwand.da{opacity:1}

.sequenz-schleier{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(16,27,58,.88) 0%,rgba(16,27,58,.55) 48%,rgba(16,27,58,.3) 100%)
}

.sequenz-text{
  position:relative;width:100%;max-width:var(--breite);
  margin-inline:auto;padding-inline:var(--rand);color:#fff
}
.sequenz-stufen{display:grid}
.sequenz-stufe{
  grid-area:1/1;max-width:36ch;opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)
}
.sequenz-stufe.sichtbar{opacity:1;transform:none}
html:not(.js) .sequenz-stufe:first-child{opacity:1;transform:none}

.sequenz-stufe h2{color:#fff}
.sequenz-stufe p{color:#d6dbe5;margin-top:14px}
.sequenz-marke{
  display:block;margin-bottom:10px;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:#a8b2c6
}

.sequenz-lauf{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.16)}
.sequenz-lauf i{display:block;height:100%;width:0;background:#fff}

/* Bewegungsverzicht: keine Fahrt, nur das Standbild und die drei
   Texte untereinander. */
@media (prefers-reduced-motion:reduce){
  .sequenz-spur{height:auto}
  .sequenz-halt{position:static;height:auto;min-height:60vh}
  .sequenz-leinwand{display:none}
  .sequenz-stufen{display:block}
  .sequenz-stufe{opacity:1;transform:none;max-width:none}
  .sequenz-stufe+.sequenz-stufe{margin-top:32px}
  .sequenz-text{padding-block:clamp(48px,9vw,80px)}
  .sequenz-lauf{display:none}
}

/* Telefon: die Fahrt laeuft, nur mit dem kleineren Bildersatz. Kuerzere
   Spur, sonst scrollt die Strecke ewig; der Text sitzt unten statt
   links, weil auf 375px seitlich kein Platz fuer beides ist.

   Die Weiche haengt zusaetzlich am Seitenverhaeltnis, nicht nur an der
   Breite (Fix 17.08.2026): ein Handy im Querformat ist trotz 780-930px
   Breite immer noch ein Handy. max-width:767px blieb als ODER-Zweig
   stehen, damit sich am bisherigen, gemessenen Verhalten fuer schmale
   Fenster nichts aendert - dasselbe Muster wie die Video-Weiche in
   seite.js (matchMedia('(max-aspect-ratio: 1/1)')). */
@media (max-width:767px) and (prefers-reduced-motion:no-preference),
       (max-aspect-ratio:1/1) and (prefers-reduced-motion:no-preference){
  .sequenz-spur{height:240vh}
  .sequenz-halt{align-items:flex-end}
  .sequenz-schleier{background:linear-gradient(to bottom,rgba(16,27,58,.2) 0%,rgba(16,27,58,.55) 48%,rgba(16,27,58,.93) 100%)}
  .sequenz-text{padding-bottom:52px}
  .sequenz-stufe{max-width:none}
}

/* --- Bild in den Leistungskarten ---------------------------------- */

.lv .foto{margin:0 0 18px;background:var(--grund-2);overflow:hidden}
.lv .foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

/* --- Laufende Arbeit · Verweis aufs Profil -------------------------
   Zwei Spalten, rechts die Kennkarte. Die Karte ist absichtlich ruhig:
   sie soll ein Schild sein, kein Knopf, der mit dem Aufruf konkurriert. */
.profil{display:grid;gap:clamp(28px,4vw,54px);align-items:center}
@media(min-width:860px){.profil{grid-template-columns:1.3fr .7fr}}
.profil .kopfzeile{margin-bottom:clamp(24px,2.6vw,32px)}
.profil-karte{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--text);
  background:var(--grund);border:1px solid var(--linie);padding:22px 24px}
/* Das Zeichen traegt seinen eigenen Verlauf — keine Farbe von aussen,
   die Vorlage darf nicht umgefaerbt werden. */
.profil-karte svg{width:34px;height:34px;flex:none;display:block}
.profil-karte b{display:block;font-size:1.14rem;font-weight:800;line-height:1.2;font-stretch:100%}
.profil-zusatz{display:block;margin-top:5px;font-size:.84rem;font-weight:600;color:var(--text-3)}
@media (hover:hover) and (pointer:fine){
  .profil-karte:hover{border-color:var(--marine-hell);background:var(--grund-2)}
}

/* --- Breites Bildband --------------------------------------------- */

.bildband{position:relative;margin-block:0}
.bildband img{width:100%;height:clamp(240px,40vh,440px);object-fit:cover;display:block}

/* --- Bilder auf den Unterseiten · ergaenzt 15.08.2026 --------------
   Die Positionen der Leistungsseite bekommen ein Bild zur Seite, im
   Wechsel links und rechts. Auf schmalen Schirmen steht das Bild ueber
   dem Text — es fuehrt ein, statt den Lesefluss zu unterbrechen.     */

/* ── Leistungsverzeichnis: durchlaufendes Register ───────────────────
   Dritter Anlauf (03.09.2026), siehe
   leads/akkar/ART-DIREKTION-LEISTUNGEN.md. Ein einziges Register statt
   drei Karten: Pos.-Nr. -> Kurztext -> Langtext, wie im VOB/StLB-Bau-
   Leistungsverzeichnis. Alle drei Positionen gleich gewichtet, keine
   Hoehenstaffelung, kein Rahmen und kein Schatten pro Position - nur
   eine Haarlinie trennt die Zeilen, wie ein Ledger.

   --reg-nr traegt die Breite der Nummernspalte. .register-kopf,
   .reg-pos und .register-spur lesen alle denselben Wert, damit Kopf,
   Linie und Ziffern ueber die ganze Seite exakt uebereinanderliegen. */
.register{--reg-nr:3.4rem;margin-top:clamp(8px,1.5vw,20px)}
@media(min-width:900px){.register{--reg-nr:6.6rem}}

.register-kopf{
  display:grid;grid-template-columns:var(--reg-nr) minmax(0,1fr);
  gap:0 20px;padding:14px 0;
  border-top:2px solid var(--linie-stark);border-bottom:1px solid var(--linie);
}
@media(min-width:900px){
  .register-kopf{grid-template-columns:var(--reg-nr) minmax(0,1fr) minmax(0,1.15fr);gap:0 clamp(24px,3.4vw,52px)}
}
.reg-etikett{font-size:.785rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);font-stretch:87.5%}
.reg-etikett--lang{display:none}
@media(min-width:900px){.reg-etikett--lang{display:block}}

/* Die Pruefline: laeuft am linken Rand durch das ganze Register, von
   Position 01 bis zum Ende der Marginalie an Position 03. Sie beginnt
   bei left:0 und wird von der weissen Flaeche hinter jeder Ziffer
   (.reg-nr) optisch unterbrochen - so wirkt es, als stempele sich die
   Zahl auf die Linie, statt sie nur daneben zu zeigen. */
.register-liste{position:relative}
.register-spur{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--linie-stark)}

.reg-pos{
  position:relative;display:grid;
  grid-template-columns:var(--reg-nr) minmax(0,1fr);
  grid-template-areas:
    "nr kurztext"
    "nr langtext"
    "nr liste"
    "nr foto";
  gap:0 20px;
  padding-block:clamp(34px,4.6vw,64px);
  border-top:1px solid var(--linie);
}
.reg-pos:first-child{border-top:0;padding-top:0}
@media(min-width:900px){
  .reg-pos{
    grid-template-columns:var(--reg-nr) minmax(0,1fr) minmax(0,1.15fr);
    grid-template-areas:
      "nr kurztext langtext"
      "nr foto langtext"
      "nr foto liste";
    gap:0 clamp(24px,3.4vw,52px);
  }
}

.reg-nr{
  grid-area:nr;position:relative;z-index:1;justify-self:start;
  display:inline-block;background:var(--blatt);padding:2px 0 8px 14px;
  font-size:clamp(1.5rem,2vw,2rem);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;font-stretch:87.5%;
  /* Amtsfarbe statt Warnfarbe: der Stempel ist Marine, kein Funke/Akzent
     (Art-Direktion Abschnitt 6). */
  color:var(--marine);
}

.reg-kurztext{grid-area:kurztext;font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);
  font-weight:800;letter-spacing:-.01em;font-stretch:100%}

.reg-langtext{grid-area:langtext;margin-top:16px}
@media(min-width:900px){.reg-langtext{margin-top:0}}
.reg-langtext p{max-width:56ch;color:var(--text-2)}

/* Beschreibungsliste im Datenblatt-Schnitt: Begriff links, Erlaeuterung
   rechts, Haarlinie dazwischen — dasselbe Muster wie die Anlagenspalten
   weiter unten auf der Seite. */
.reg-liste{grid-area:liste;margin-top:clamp(20px,2.6vw,30px)}
.reg-liste > div{
  display:grid;grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);
  gap:4px 20px;
  padding-block:12px;border-top:1px solid var(--linie);
}
.reg-liste > div:last-child{border-bottom:1px solid var(--linie)}
.reg-liste dt{font-weight:700;color:var(--text);hyphens:auto}
.reg-liste dd{color:var(--text-2);font-size:.97rem}

/* Beleg-Foto: bewusst klein (~150px), kein Vollbreiten-Bild, kein
   Schatten - nur eine Haarlinie als Rahmen. Bild und Anlage-Vermerk
   stehen nebeneinander, wie ein Anhang am Aktenrand. */
.reg-foto{grid-area:foto;margin-top:clamp(26px,3vw,36px);
  display:flex;gap:14px;align-items:flex-start;max-width:360px}
.reg-foto img{width:150px;height:auto;flex:none;border:1px solid var(--linie);display:block}
.reg-foto figcaption{display:grid;gap:5px;padding-top:2px}
.reg-anlage{font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--text-3)}

/* Marginalie: haengt sichtbar an Position 03, keine eigene Sektion und
   kein Kasten - eine Randnotiz, markiert durch die linke Haarlinie und
   den Verweistext, nicht durch Rahmen/Hintergrund/Radius. */
.reg-marginalie{
  grid-column:2 / -1;margin-top:clamp(28px,3.6vw,48px);
  padding-left:clamp(20px,2.6vw,28px);border-left:2px solid var(--linie-stark);
  display:grid;gap:clamp(20px,2.6vw,32px);grid-template-columns:minmax(0,1fr);
}
@media(min-width:760px){
  .reg-marginalie{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
}
.reg-marginalie-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);font-stretch:87.5%;margin-bottom:10px}
.reg-marginalie h3{margin-bottom:0}
.reg-marginalie p + p{margin-top:14px}
.reg-marginalie p{color:var(--text-2)}
.reg-akzent{color:var(--akzent);font-weight:700}
.reg-marginalie .zeichnung .kontur{stroke:rgba(27,31,38,.45)}
.reg-marginalie .zeichnung .fuell{fill:rgba(27,31,38,.04)}
.reg-marginalie .zeichnung .mass{stroke:rgba(27,31,38,.3)}
.reg-marginalie .zeichnung .masstext{fill:var(--text-3)}
.reg-marginalie .zeichnung .mitte{stroke:rgba(27,31,38,.25)}

/* ── Anhang-Tabelle: dieselbe Datenblatt-Optik, ergaenzt um eine
   dritte Spalte fuer den Bildbeleg. Nur fuer diese Seite als
   Zusatzklasse, .datenblatt selbst faehrt unveraendert auch auf
   index.html und nachweise.html. Unter 680px wird die Zeile zur
   gestapelten Karte statt zum seitlich scrollenden Tabellenrumpf -
   sonst waere das Bild nur nach horizontalem Scrollen zu sehen. */
.anhang-tabelle .anhang-bild{width:1%;white-space:nowrap}
.anhang-tabelle .anhang-bild img{width:104px;height:auto;display:block;border:1px solid var(--linie)}
.anhang-tabelle .anhang-bild figcaption{margin-top:6px;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3)}
.anhang-tabelle .anhang-bild--leer{color:var(--text-3)}

@media(max-width:680px){
  .anhang-tabelle thead{display:none}
  .anhang-tabelle,.anhang-tabelle tbody{display:block;width:100%}
  .anhang-tabelle tr{display:flex;flex-direction:column;padding-block:20px;
    border-top:1px solid var(--linie)}
  .anhang-tabelle tr:first-child{border-top:0;padding-top:0}
  .anhang-tabelle th,.anhang-tabelle td{display:block;border-bottom:0;padding:0;white-space:normal}
  .anhang-tabelle .anhang-bild{order:-1;margin-bottom:14px;width:auto}
  .anhang-tabelle .anhang-bild--leer{display:none}
  .anhang-tabelle .anhang-bild img{width:150px}
  .anhang-tabelle th{margin-bottom:8px}
}

/* Ein Bildband trennt die Abschnitte, statt sie nur zu stapeln.
   Randlos ueber die volle Breite, ohne Rahmen und Radius. */
.seiten-band{position:relative;margin-block:clamp(48px,7vw,88px)}
.seiten-band img{
  width:100%;height:clamp(220px,34vh,380px);object-fit:cover;display:block
}

/* ═══════════════════════════════════════════════════════════════════
   Kontaktformular · ergaenzt 03.09.2026
   Einspaltig, Beschriftung ueber dem Feld, Fehler oben zusammengefasst
   UND am Feld (NISCHEN-PLAYBOOKS.md Teil B2). Dieselbe Datenblatt-
   Optik wie der Rest der Seite: scharfe Ecken, duenne Kontur, keine
   zweite Formsprache fuer Formularfelder.
   =================================================================== */
.formular{margin-top:clamp(8px,1.5vw,20px);display:grid;gap:22px;max-width:var(--schmal)}
.feld{display:grid;gap:8px}
.feld label{font-size:.86rem;font-weight:700;color:var(--text)}
.feld input,.feld select,.feld textarea{
  font:inherit;font-size:1rem;color:var(--text);background:var(--blatt);
  border:1.5px solid var(--linie-stark);border-radius:2px;padding:12px 14px;
  transition:border-color .18s var(--ease)
}
.feld textarea{resize:vertical;min-height:120px}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:var(--funke)}
.feld-fehler{font-size:.86rem;font-weight:700;color:var(--akzent)}
.feld-hinweis{font-size:.86rem;color:var(--text-3)}
.formular-hinweis{font-size:.94rem;color:var(--text-2);max-width:56ch}
.formular button[type="submit"]{justify-self:start}

.formular-status{border:1.5px solid var(--linie-stark);background:var(--grund-2);padding:16px 18px;font-size:.94rem}
.formular-status p{margin:0}
.formular-status ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px}
.formular-status a{color:var(--akzent);font-weight:700}
.formular-status--erfolg{border-color:#1f6b3a;background:#eef7f0;color:#1f6b3a}
.formular-status--erfolg a{color:#1f6b3a}
.formular-status--fehler{border-color:var(--akzent);background:#fff6ed;color:#5c3a22}

/* ═══════════════════════════════════════════════════════════════════
   Signature-Moment: Positionsnummern stempeln sich ein
   ergänzt 03.09.2026, Traeger auf .reg-nr seit dem dritten Anlauf
   -------------------------------------------------------------------
   Passend zum Leitgedanke der Seite (Dateikopf: "die Seite ist ein
   Prüfprotokoll, kein Prospekt"): 01/02/03 stehen in einem Leistungs-
   verzeichnis wie in einem Pruefprotokoll. Ein Pruefstempel setzt zuerst
   in der Mitte auf - die Gummiflaeche ist leicht gewoelbt, der Kontakt
   beginnt im Zentrum und breitet sich erst unter Druck nach aussen aus
   - und selten ganz gerade. Deshalb kein Hochzaehlen (das waere eine
   Kennzahl in Bewegung, siehe GESTALTUNGS-GEDAECHTNIS.md: Daten, die
   gelesen werden, bewegen sich nicht) und keine neue Ziffer, sondern ein
   einmaliger Abdruck der immer gleichen Zahl: aus der Mitte, leicht
   schief, dann gerade.

   Kein zweiter Beobachter: .reg-nr traegt zusaetzlich die Klasse .auf
   und laeuft ueber denselben IntersectionObserver, der in seite.js
   .auf-Elemente ohnehin auf .da beobachtet. .stempel ueberschreibt nur
   die Transformation, mit hoeherer Selektor-Spezifitaet als .auf allein,
   die Grundeigenschaft opacity bleibt von der bestehenden Regel. */
.js .auf.stempel{
  transform:rotate(-6deg) scale(1.14);
  clip-path:inset(42% 42% 42% 42%);
}
.js .auf.stempel.da{
  transform:none;
  clip-path:inset(0 0 0 0);
  transition:opacity .4s linear,transform .45s var(--ease),clip-path .45s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .js .auf.stempel{transform:none;clip-path:none}
  .js .auf.stempel.da{transition:none}
}