/* ═══════════════════════════════════════════════════════════════
   Dieselben Werte wie auf noble.graphics. Nicht „ähnlich" —
   dieselben: Farben, Schriften, Kanten, Kurven. Eine Verwaltung,
   die sich anders anfühlt als die Seite davor, ist ein zweites
   Haus mit demselben Schild.
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/space-grotesk-400-600-latin.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 400;font-display:swap;
  src:url(/fonts/newsreader-300-400-latin.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;
  src:url(/fonts/newsreader-300-400-italic-latin.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plex-mono-400-latin.woff2) format('woff2');}

:root{
  --ink:#16130F; --graphite:#56504A; --stone:#D8D2C6; --bone:#ECEAE3;
  --oxblood:#7A2C39; --paper:#F4F2ED;
  --line:rgba(22,19,15,.14); --line-soft:rgba(22,19,15,.08);
  --grotesk:'Space Grotesk',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --edge:clamp(20px,6.2vw,104px); --max:1240px;
  --r-s:12px; --r-m:18px;
  --ease:cubic-bezier(.22,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
body{background:var(--bone);color:var(--ink);font-family:var(--serif);
     font-size:clamp(16px,1.05vw,17.5px);line-height:1.55;
     -webkit-font-smoothing:antialiased;min-height:100svh;
     display:flex;flex-direction:column;}
a{color:inherit;text-decoration:none;}
/* Muss sein und muss !important sein: [hidden] ist im Browser nur
   ein display:none mit der schwaechsten Spezifitaet, und jede
   eigene Regel mit display:block schlaegt es. Genau das ist bei
   .feld__hint passiert — das Feld war versteckt und stand
   trotzdem da. */
[hidden]{display:none!important;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--oxblood);color:var(--bone);}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px;}
html.is-loading,html.is-loading body{overflow:hidden;height:100%;}

.grain{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.5' intercept='.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;}

/* ── Die Tinte ─────────────────────────────────────────────────
   Dieselbe Fläche wie auf noble.graphics — dieselbe Rechnung,
   dieselben Farben. Sie liegt fest im Bild, nicht in der Seite:
   das Gitter rechnet dadurch mit dem Seitenverhältnis eines
   Bildschirms und nicht mit dem eines langen Blattes, und der
   Zeiger trifft die Tinte überall.

   z-index:-1 trägt sie unter allen Inhalt. Sichtbar bleibt sie
   trotzdem: body hat einen Grund, der wandert nach oben an die
   Leinwand des Fensters — und die liegt noch unter der -1.

   Die Hauptseite blendet die Stärke über den Scrollweg, weil sie
   Kapitel hat: über Fließtext leise, im Hero voll. Hier gibt es
   keine Kapitel und nichts, was nicht gelesen wird. Also eine
   Stärke, und zwar die leise: wer hier ist, arbeitet. */
.inkwrap{position:fixed;inset:0;z-index:-1;pointer-events:none;--ink-str:.42;}
.fluid{position:absolute;inset:0;width:100%;height:100%;
       z-index:0;pointer-events:none;
       opacity:0;transition:opacity 1.4s var(--ease) .2s;
       filter:blur(7px) saturate(108%);}
.fluid.on{opacity:1;}
/* Langsam und gleichmäßig: eine Änderung der Helligkeit liest sich
   linear am ehesten als Lichtstimmung. Mit einer gefederten Kurve
   wäre es ein Schaltvorgang. */
.fluid--page{filter:blur(9px) saturate(104%);transition:opacity 2s linear;}
.fluid--page.on{opacity:var(--ink-str);}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--edge);width:100%;}
main{flex:1;}
main.mit-bogen{padding-top:clamp(84px,10vh,120px);}
.lab{font-family:var(--mono);font-size:clamp(9.5px,.72vw,11px);letter-spacing:.2em;
     text-transform:uppercase;color:var(--graphite);}
.d1{font-family:var(--grotesk);font-weight:500;letter-spacing:-.035em;line-height:.98;
    font-size:clamp(34px,5.4vw,68px);}
.d2{font-family:var(--grotesk);font-weight:500;letter-spacing:-.03em;line-height:1.04;
    font-size:clamp(26px,3.4vw,44px);}
.d3{font-family:var(--grotesk);font-weight:500;letter-spacing:-.025em;line-height:1.1;
    font-size:clamp(19px,2vw,26px);}
.lede{font-size:clamp(16.5px,1.4vw,21px);line-height:1.45;font-weight:300;color:var(--graphite);}
.lede em{font-style:italic;color:var(--oxblood);}
/* Ein Verweis mitten im Text ist ohne Unterstreichung keiner —
   im ganzen Blatt sind Verweise sonst Kacheln oder Knoepfe, die
   man als solche erkennt. Hier steht er in einem Satz. */
.lede a{text-decoration:underline;text-decoration-color:var(--stone);
        text-underline-offset:.16em;text-decoration-thickness:1px;
        transition:text-decoration-color .4s var(--ease);}
.lede a:hover{text-decoration-color:currentColor;}
/* Ein Hinweis, der bleibt, statt einer Meldung, die verschwindet.
   Er soll gelesen werden koennen, ohne den Kasten zu beherrschen. */
.lede--klein{font-size:14.5px;line-height:1.5;}
.mdot{display:inline-block;width:.30em;height:.155em;vertical-align:baseline;position:relative;}
.mdot i{position:absolute;left:50%;bottom:0;width:.155em;height:.155em;
        margin-left:-.0775em;border-radius:50%;background:var(--oxblood);font-style:normal;
        text-indent:-999em;overflow:hidden;}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--oxblood);flex:none;}

/* ── Der Bogen ─────────────────────────────────────────────── */
.nav{position:fixed;top:clamp(12px,1.5vw,22px);left:0;right:0;z-index:700;
     display:flex;justify-content:center;padding:0 var(--edge);pointer-events:none;}
.nav__sheet{pointer-events:auto;width:min(940px,100%);background:var(--bone);
            border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
            box-shadow:0 8px 26px -24px rgba(22,19,15,.5);display:flex;
            align-items:stretch;height:clamp(46px,3.9vw,56px);}
.nav__mark{font-family:var(--grotesk);font-weight:600;font-size:clamp(14.5px,1.15vw,17px);
           letter-spacing:-.028em;display:inline-flex;align-items:center;
           padding-left:clamp(14px,1.3vw,20px);flex:none;}
.nav__sep{width:1px;background:var(--line);margin:12px 14px;flex:none;}
/* Die beiden Aussenfelder teilen sich den Platz zu gleichen
   Teilen. Nur so steht die Mitte in der Mitte — und zwar auch
   dann noch, wenn rechts ein Verweis dazukommt oder wegfaellt. */
.nav__seite{display:flex;align-items:stretch;flex:1 1 0;min-width:0;}
.nav__seite--rechts{justify-content:flex-end;}
.nav__where{display:inline-flex;align-items:center;justify-content:center;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
            min-width:0;flex:0 1 auto;padding:0 clamp(8px,1vw,16px);}
.nav__where--weg{transition:color .4s var(--ease),background-color .4s var(--ease);}
.nav__where--weg:hover{color:var(--ink);background:var(--stone);}
.nav__link{display:inline-flex;align-items:center;padding:0 clamp(10px,1vw,15px);
           border-left:1px solid var(--line);flex:none;
           transition:background-color .4s var(--ease),color .4s var(--ease);}
.nav__link:hover{background:var(--stone);color:var(--ink);}
.nav__ab{display:flex;flex:none;}
.nav__ask{display:inline-flex;align-items:center;gap:8px;padding:0 clamp(14px,1.3vw,18px);
          border:0;border-left:1px solid var(--line);background:none;color:inherit;cursor:pointer;
          font-family:var(--grotesk);font-weight:500;font-size:12.5px;
          transition:background-color .45s var(--ease),color .45s var(--ease);}
.nav__ask:hover{background:var(--ink);color:var(--bone);}
.nav__ask:hover .dot{transform:scale(1.45);}

/* ── Abschnitte ────────────────────────────────────────────── */
.sec{position:relative;padding-block:clamp(40px,6vh,84px);}
.sep{position:absolute;left:var(--edge);right:var(--edge);top:0;height:1px;
     background:rgba(22,19,15,.13);overflow:hidden;}
.sep i{display:block;height:100%;background:var(--ink);
       transform:scaleX(0);transform-origin:0 50%;
       animation:sepZug 1.1s var(--ease-out) .15s forwards;}
@keyframes sepZug{to{transform:scaleX(1);}}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:32px;
         flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,34px);}

/* ── Kästen und Zeilen ─────────────────────────────────────── */
.kaesten{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
/* Die vier Felder der Startseite sind keine Liste von Kästen,
   sondern die Gliederung des Ganzen. Sie stehen deshalb zu zweit
   nebeneinander statt zu viert — vier schmale Spalten lesen sich
   als Aufzählung, zwei breite als Entscheidung. */
.kaesten--gross{gap:clamp(14px,1.6vw,20px);grid-template-columns:1fr;}
@media(min-width:760px){ .kaesten--gross{grid-template-columns:1fr 1fr;} }
.kaesten--gross .kasten{padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,32px);}
.kaesten--gross .kasten h3{font-size:clamp(21px,2vw,28px);margin:.45em 0 .35em;}
.kaesten--gross .kasten p{font-size:15px;max-width:34ch;}
/* Zwei Spalten, nicht drei. Bei vier Kästen stünde der vierte in
   drei Spalten allein in einer eigenen Reihe und sähe aus wie
   nachgereicht. */
.kaesten--paar{grid-template-columns:1fr;}
@media(min-width:760px){ .kaesten--paar{grid-template-columns:1fr 1fr;} }

/* Bleibt bei ungerader Zahl einer übrig, nimmt er die ganze
   Breite. Ein halb gefülltes Regalbrett sieht nach Versehen aus;
   ein volles sieht nach Absicht aus. Die Regel greift von selbst,
   egal wie viele Kästen ein Kunde hat. */
@media(min-width:760px){
  .kaesten--gross > :last-child:nth-child(odd),
  .kaesten--paar  > :last-child:nth-child(odd){grid-column:1 / -1;}
}
.kasten{display:block;border:1px solid var(--line);border-radius:var(--r-m);padding:20px 22px;
        background:var(--paper);transition:transform .5s var(--ease-out),
        border-color .4s var(--ease),box-shadow .5s var(--ease-out);}
.kasten:hover{transform:translateY(-3px);border-color:var(--ink);
              box-shadow:0 18px 34px -30px rgba(22,19,15,.8);}
.kasten__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--graphite);}
.kasten h3{font-family:var(--grotesk);font-weight:500;letter-spacing:-.022em;
           font-size:clamp(18px,1.6vw,23px);margin:.5em 0 .3em;}
.kasten p{font-size:14.5px;color:var(--graphite);line-height:1.5;}
.kasten__zahl{font-family:var(--mono);font-size:11px;color:var(--oxblood);margin-top:.9em;display:block;}
/* Das eine Feld, das hinausführt. Ein Wort mehr wäre eine
   Erklärung; der Strich unter dem Titel reicht als Hinweis, dass
   hier etwas anderes passiert als in den Nachbarn. */
.kasten--raus h3{text-decoration:underline;text-decoration-color:var(--stone);
                 text-underline-offset:.18em;text-decoration-thickness:1px;
                 transition:text-decoration-color .4s var(--ease);}
.kasten--raus:hover h3{text-decoration-color:var(--oxblood);}

.reihe{list-style:none;border-top:1px solid var(--line-soft);}
.reihe__z{display:flex;align-items:baseline;gap:clamp(14px,1.5vw,22px);
          padding:clamp(13px,1.4vw,18px) clamp(4px,.6vw,10px);
          border-bottom:1px solid var(--line-soft);
          transition:background-color .45s var(--ease),padding-left .5s var(--ease-out);}
.reihe__z:hover{background:rgba(216,210,198,.42);padding-left:clamp(14px,1.6vw,24px);}
.reihe__z em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.14em;
             color:var(--graphite);flex:none;width:2.4em;}
.reihe__z b{font-family:var(--grotesk);font-weight:500;letter-spacing:-.022em;
            font-size:clamp(15px,1.3vw,18px);flex:1;}
.reihe__z span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
               text-transform:uppercase;color:var(--graphite);flex:none;}

/* Die Spur. Links steht keine Nummer, sondern die Uhrzeit — die
   ist breiter als zwei Ziffern und braucht deshalb ihre eigene
   Spalte. Kursiv dahinter: welche Felder es traf. */
.reihe--spur .reihe__z{padding-block:clamp(8px,.9vw,11px);}
.reihe--spur .reihe__z em{width:6.8em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.reihe--spur .reihe__z b{font-size:clamp(13.5px,1.05vw,15px);font-weight:500;}
.reihe--spur .reihe__z b i{font-style:italic;font-family:var(--serif);
                           font-weight:400;color:var(--oxblood);}
.reihe--spur .reihe__z span{font-size:9.5px;letter-spacing:.12em;
                            text-transform:none;text-align:right;}

/* ── Balken ────────────────────────────────────────────────────
   Dreißig Zahlen untereinander sind eine Tabelle, die niemand
   liest. Dieselben dreißig als Länge nebeneinander sind eine
   Kurve, die man in einer Sekunde erfasst. Der Wert steht
   trotzdem daneben — ein Balken ohne Zahl ist ein Gefühl. */
.balken{list-style:none;}
.balken__z{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);padding:5px 0;}
.balken__t{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
           color:var(--graphite);width:4.4em;flex:none;
           font-variant-numeric:tabular-nums;}
.balken__s{flex:1;height:9px;background:rgba(22,19,15,.06);
           border-radius:999px;overflow:hidden;}
.balken__s i{display:block;height:100%;background:var(--oxblood);opacity:.5;
             border-radius:999px;transform-origin:0 50%;}
.balken__n{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink);
           width:9.5em;text-align:right;flex:none;font-variant-numeric:tabular-nums;}

/* Was nur wir sehen, soll auch so aussehen. Sonst zeigt man dem
   Kunden irgendwann den Bildschirm und wundert sich. */
.kasten--intern{border-style:dashed;}
.kasten--intern .kasten__n::after{content:" · nur Team";color:var(--oxblood);}

/* ── Formulare ─────────────────────────────────────────────── */
.feld{margin-bottom:clamp(16px,2vh,24px);}
.feld > label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
              text-transform:uppercase;color:var(--graphite);margin-bottom:8px;}
.feld__hint{display:block;font-family:var(--serif);font-size:13.5px;letter-spacing:0;
            text-transform:none;color:var(--graphite);margin-top:4px;font-style:italic;}
.feld__warn{color:var(--oxblood);font-style:normal;}
/* date gehoerte von Anfang an dazu und fehlte. Ein Feld, das nicht
   in dieser Liste steht, bekommt den Browser-Standard: eckig, weiss,
   Systemschrift — und faellt damit in einem Blatt auf, das sonst
   ueberall dieselbe Kante und dieselbe Farbe hat. Betroffen waren
   zwei Stellen: 'Domain laeuft bis' in der Kundenuebersicht und
   'Laeuft bis' in der Ankuendigung, also auch beim Kunden. */
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=date],textarea,select{
  width:100%;font-family:var(--grotesk);font-size:15.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
  padding:13px 15px;transition:border-color .4s var(--ease),background-color .4s var(--ease);}
input:focus,textarea:focus,select:focus{border-color:var(--ink);background:#fff;outline:none;}
textarea{min-height:120px;resize:vertical;line-height:1.5;font-family:var(--serif);font-size:16px;}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2356504A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
        background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;}

.btn{display:inline-flex;align-items:center;gap:11px;position:relative;overflow:hidden;
     border:1px solid var(--ink);border-radius:var(--r-s);background:none;color:var(--ink);
     padding:13px 22px;font-family:var(--grotesk);font-weight:500;cursor:pointer;
     font-size:14px;letter-spacing:-.01em;isolation:isolate;}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
             transform:translateY(101%);transition:transform .55s var(--ease-out);}
.btn:hover{color:var(--bone);}
.btn:hover::before{transform:none;}
.btn--voll{background:var(--ink);color:var(--bone);}
.btn--voll::before{background:var(--oxblood);}
.btn--stumm{border-color:var(--line);color:var(--graphite);padding:9px 15px;font-size:13px;}
.btn--stumm::before{background:var(--oxblood);}
.btn--stumm:hover{color:var(--bone);border-color:var(--oxblood);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ── Die Probe ──────────────────────────────────────────────
   Nicht „.vorschau" — die Klasse gibt es schon, fuer die
   Bildminiaturen, und sie steht mit max-width:190px weiter unten in
   dieser Datei. Der Streifen sass damit in einer 190 Pixel breiten
   Spalte, und es sah aus wie ein Layoutfehler statt wie ein
   Namenszusammenstoss.

   Der Streifen liegt in einem eigenen Rahmen, weil er seine eigene
   Seite ist: er bringt position:fixed mit und ein Skript, und
   beides gehoert nicht in die Verwaltung. Die Hoehe steht fest —
   ohne gleiche Herkunft kann man einen Rahmen nicht messen. Sie ist
   deshalb grosszuegig: lieber unten etwas Luft als ein
   abgeschnittener Verweis. */
.probe{margin-bottom:clamp(18px,2.4vh,28px);}
.probe > .lab{display:block;margin-bottom:8px;}
.probe__rand{border:1px solid var(--line);border-radius:var(--r-s);
                overflow:hidden;background:var(--paper);}
.probe__f{display:block;width:100%;height:76px;border:0;}
@media(max-width:640px){ .probe__f{height:116px;} }
.probe__leer{padding:20px 18px;color:var(--graphite);font-size:14.5px;}
.probe__wort{margin-top:11px;font-family:var(--grotesk);font-weight:500;
                font-size:14.5px;letter-spacing:-.01em;color:var(--graphite);
                display:flex;align-items:baseline;gap:9px;}
/* Ein Punkt, kein Wort: „an" steht schon daneben. */
.probe__wort.ist-an{color:var(--ink);}
.probe__wort.ist-an::before{content:"";width:7px;height:7px;border-radius:50%;
                               background:#2F6B4F;flex:none;transform:translateY(-1px);}
.probe__wort--weg{color:var(--oxblood);}
.probe__wort--weg::before{content:"";width:7px;height:7px;border-radius:50%;
                             background:var(--oxblood);flex:none;transform:translateY(-1px);}
.probe__hinweis{font-family:var(--serif);font-style:italic;font-size:13.5px;
                   color:var(--graphite);margin-top:3px;}

/* ── Der Schalter ──────────────────────────────────────────────
   An oder aus, und man sieht von weitem welches. Ein Häkchen
   waere kleiner und billiger. */
.feld--schalter{margin-bottom:clamp(18px,2.4vh,28px);}
/* Muss ".feld > label" schlagen (0,1,1) — sonst steht hier
   display:block, das Gleis ist inline, und eine inline-Box nimmt
   weder Breite noch Höhe an. Dann schwebt nur der Knopf im Text. */
.feld--schalter > label.schalter{display:inline-flex;align-items:center;gap:13px;
  cursor:pointer;margin-bottom:0;font-family:var(--grotesk);font-size:16px;
  letter-spacing:-.02em;text-transform:none;color:var(--ink);}
.schalter input{position:absolute;opacity:0;width:0;height:0;}
.schalter__gleis{width:50px;height:28px;border-radius:999px;background:var(--stone);
                 border:1px solid var(--line);position:relative;flex:none;
                 transition:background-color .4s var(--ease),border-color .4s var(--ease);}
.schalter__gleis i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
                   background:var(--bone);border:1px solid var(--line);
                   transition:transform .42s var(--ease-out),background-color .4s var(--ease);}
.schalter input:checked + .schalter__gleis{background:var(--oxblood);border-color:var(--oxblood);}
.schalter input:checked + .schalter__gleis i{transform:translateX(22px);background:#fff;border-color:transparent;}
.schalter input:focus-visible + .schalter__gleis{outline:2px solid var(--oxblood);outline-offset:3px;}
.schalter__wort{font-family:var(--grotesk);font-weight:500;font-size:16px;letter-spacing:-.02em;}

/* ── Die Wahl ──────────────────────────────────────────────────
   Fuenf Anliegen nebeneinander statt einer Auswahlliste. Eine
   Liste zeigt einen Wert und verbirgt vier; hier sieht man auf
   einen Blick, was man uns ueberhaupt schreiben kann.
   Der Knopf selbst ist unsichtbar und nicht display:none — sonst
   waere er fuer die Tastatur und fuer einen Vorleser weg. */
.wahl{display:flex;flex-wrap:wrap;gap:8px;}
.wahl__z input{position:absolute;opacity:0;width:0;height:0;}
.wahl__z span{display:inline-flex;align-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  background:var(--paper);color:var(--graphite);
  font-family:var(--grotesk);font-weight:500;font-size:14px;letter-spacing:-.015em;
  /* Kuerzer als die ueblichen .4s im Haus, und das mit Absicht.
     Beim Umschalten laufen Grund und Schrift aneinander vorbei —
     der Grund von hell nach dunkel, die Schrift von dunkel nach
     hell. In der Mitte stehen beide auf Grau, und die Beschriftung
     verschwindet fuer einen Moment. Eine Auswahl ist ausserdem
     keine Beruehrung, sondern eine Entscheidung: sie darf sofort
     dastehen. */
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease);}
.wahl__z span:hover{border-color:var(--ink);color:var(--ink);}
.wahl__z input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bone);}
.wahl__z input:focus-visible + span{outline:2px solid var(--oxblood);outline-offset:3px;}

.meldung{border-left:2px solid var(--oxblood);padding:11px 16px;margin-bottom:24px;
         background:var(--paper);font-size:15px;border-radius:0 var(--r-s) var(--r-s) 0;}
.meldung--gut{border-color:#2F6B4F;}
.meldung--fehler{border-color:var(--oxblood);color:var(--oxblood);}

/* ── Der Eintrag ───────────────────────────────────────────── */
.eintrag{border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(18px,2.4vw,28px);
         background:var(--paper);margin-bottom:16px;}
.eintrag__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
               margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);}
/* ── Das Kundenportal in der Karte ─────────────────────────────
   Der erste Weg, nicht der letzte Knopf. Wer eine Kundenkarte
   aufmacht, will in neun von zehn Faellen in dessen Bereich —
   also steht das ganz oben und ueber die volle Breite, damit man
   es nicht sucht.

   Gefuellt wird von unten wie bei .btn: dieselbe Bewegung, die das
   ganze Haus benutzt, damit ein neuer Knopf nicht wie ein
   Fremdkoerper wirkt. */
.portal{display:flex;align-items:center;justify-content:space-between;gap:16px;
        margin:0 0 clamp(14px,1.8vw,20px);padding:14px clamp(16px,2vw,20px);
        border:1px solid var(--ink);border-radius:var(--r-s);
        position:relative;overflow:hidden;isolation:isolate;
        color:var(--ink);transition:color .5s var(--ease);}
.portal::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
                transform:translateY(101%);transition:transform .55s var(--ease-out);}
.portal:hover{color:var(--bone);}
.portal:hover::before{transform:none;}
.portal:hover .dot{transform:scale(1.45);}
.portal__w{font-family:var(--grotesk);font-weight:500;letter-spacing:-.02em;
           font-size:clamp(15px,1.3vw,17px);}
.portal__z{display:inline-flex;align-items:center;gap:9px;
           font-family:var(--mono);font-size:10px;letter-spacing:.18em;
           text-transform:uppercase;}

/* ── Das Datumsfeld in der Werkzeugzeile ───────────────────────
   Rechts neben dem Knopf statt darueber, und nur so breit, wie
   acht Ziffern es brauchen. Die Beschriftung steht davor und nicht
   darueber: eine einzelne kurze Angabe in einer Zeile mit einem
   Knopf liest sich als Zeile, nicht als Formularblock. */
.datum{margin-left:auto;display:inline-flex;align-items:center;gap:10px;
       cursor:pointer;white-space:nowrap;}
.datum > .lab{margin:0;}
.datum input[type=date]{width:auto;padding:9px 11px;font-size:13.5px;
                        font-family:var(--mono);letter-spacing:.02em;
                        color:var(--graphite);}
.datum input[type=date]:focus{color:var(--ink);}
/* Der Kalenderknopf des Browsers ist schwarzblau und gross. Etwas
   graufaerben genuegt — ersetzen liesse er sich nur mit einem
   eigenen Kalender, und den braucht hier niemand. */
input[type=date]::-webkit-calendar-picker-indicator{
  opacity:.45;cursor:pointer;transition:opacity .3s var(--ease);}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.9;}
@media (max-width:560px){
  /* Eng bricht es um und der Knopf bleibt oben. */
  .datum{margin-left:0;}
}

/* ── Vier Angaben nebeneinander ────────────────────────────────
   Als Liste zogen sie sich ueber die halbe Karte: links das Wort,
   rechts am Rand der Wert, dazwischen nichts. Nebeneinander sind
   sie ein Block, den man auf einen Blick liest — und die Karte ist
   um zweihundert Pixel kuerzer. */
.kurz{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
      background:var(--line-soft);border:1px solid var(--line-soft);
      border-radius:var(--r-s);overflow:hidden;
      margin-bottom:clamp(16px,2vw,22px);}
.kurz > div{background:var(--paper);padding:11px 14px 12px;}
.kurz dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
         text-transform:uppercase;color:var(--graphite);}
.kurz dd{font-family:var(--grotesk);font-weight:500;font-size:15px;
         letter-spacing:-.02em;margin-top:4px;}
.kurz dd a{border-bottom:1px solid var(--line);
           transition:color .4s var(--ease),border-color .4s var(--ease);}
.kurz dd a:hover{color:var(--oxblood);border-color:var(--oxblood);}

/* ── Kopfzeile mit Suche ───────────────────────────────────────
   Die Ueberschrift links, das Feld rechts, beide auf derselben
   Grundlinie. Wird es eng, rutscht das Feld unter die
   Ueberschrift und nimmt die ganze Breite — ein Suchfeld, das auf
   dem Telefon zwei Zentimeter breit ist, benutzt niemand. */
.kopfzeile{display:flex;align-items:flex-end;justify-content:space-between;
           gap:clamp(16px,3vw,40px);flex-wrap:wrap;}
.suche{display:flex;align-items:stretch;flex:0 1 320px;min-width:220px;
       border:1px solid var(--line);border-radius:var(--r-s);
       background:var(--paper);overflow:hidden;margin-bottom:.35em;
       transition:border-color .4s var(--ease),background-color .4s var(--ease);}
.suche:focus-within{border-color:var(--ink);background:#fff;}
.suche input{border:0;background:none;border-radius:0;flex:1;min-width:0;
             padding:11px 14px;font-size:14.5px;}
.suche input:focus{outline:none;background:none;}
.suche input::-webkit-search-cancel-button{cursor:pointer;}
/* Die Zahl im Feld, nicht daneben. Sie soll ablesbar sein, ohne
   den Blick zu ziehen — deshalb dieselbe leise Schrift wie ueberall
   und Ziffern mit gleicher Breite, damit sie beim Tippen nicht
   zappelt. */
.suche__zahl{display:inline-flex;align-items:center;padding:0 4px 0 10px;
             font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
             color:var(--graphite);font-variant-numeric:tabular-nums;
             white-space:nowrap;flex:none;}
.suche__ab{border:0;border-left:1px solid var(--line);background:none;
           cursor:pointer;padding:0 16px;display:inline-flex;align-items:center;
           transition:background-color .45s var(--ease);}
.suche__ab:hover{background:var(--ink);}
.suche__ab:hover .dot{transform:scale(1.45);background:var(--bone);}

/* Nur fuer Vorlesegeraete. Das Feld traegt seinen Zweck sichtbar
   im Platzhalter, aber ein Platzhalter ist keine Beschriftung. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ── Die Klappkarte ────────────────────────────────────────────
   Der Kopf ist der Griff. Das Dreieck, das der Browser von sich
   aus davorsetzt, gehoert nicht in dieses Haus — an seine Stelle
   kommt ein Zeichen rechts, das sich beim Aufmachen dreht.

   Zu heisst: keine Trennlinie unter dem Kopf. Sie trennt ihn ja
   von nichts. */
/* overflow:hidden ist hier kein Beiwerk. Der Kopf faerbt sich beim
   Ueberfahren, und dieser Grund ist ein Rechteck — ohne Beschnitt
   steht er an den vier Ecken ueber die gerundete Kante hinaus und
   die Linie wirkt ausgefranst. Die Karte rundete bisher, aber sie
   schnitt nicht ab. */
.eintrag--klapp{padding:0;overflow:hidden;}
.eintrag--klapp > summary{list-style:none;cursor:pointer;
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);margin:0;
  transition:background-color .4s var(--ease);}
.eintrag--klapp > summary::-webkit-details-marker{display:none;}
.eintrag--klapp > summary:hover{background:var(--bone);}
.eintrag--klapp > summary:focus-visible{outline:2px solid var(--oxblood);
                                        outline-offset:-2px;}
.eintrag--klapp:not([open]) > summary{border-bottom:0;}
.eintrag--klapp[open] > summary{border-bottom:1px solid var(--line-soft);}
/* Alles Aufgeklappte sitzt in einem Wickel und bekommt den Rand
   einmal von ihm, statt jedes Kind einzeln. Die Regel davor lief
   ueber > :not(summary) und schlug dem Portal seine eigene
   Polsterung aus — es lag randbuendig, die Notiz darunter
   eingerueckt. */
.eintrag--klapp > .eintrag__auf{padding:clamp(16px,2vw,20px) clamp(18px,2.4vw,28px)
                                        clamp(16px,2vw,22px);}

.klapp{display:inline-block;width:9px;height:9px;margin-left:.9em;
       border-right:1.5px solid var(--graphite);border-bottom:1.5px solid var(--graphite);
       transform:translateY(-2px) rotate(45deg);
       transition:transform .35s var(--ease-out),border-color .35s var(--ease);}
.eintrag--klapp[open] .klapp{transform:translateY(1px) rotate(-135deg);}
.eintrag--klapp > summary:hover .klapp{border-color:var(--ink);}

.eintrag__werk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px;}
/* Genau zwei Spalten, nie drei. Die Felder stehen paarweise —
   Bild und seine Beschreibung, vorher und nachher. Bei drei
   Spalten rutscht das Paar auseinander und man sucht, welche
   Beschreibung zu welchem Bild gehoert. */
.zwei{display:grid;gap:0 clamp(18px,2.4vw,32px);grid-template-columns:1fr;}
@media(min-width:720px){ .zwei{grid-template-columns:1fr 1fr;} }
/* ── Foto hochladen ────────────────────────────────────────────
   Das nackte Dateifeld sieht in jedem Browser anders aus und in
   keinem gut. Es liegt deshalb unsichtbar unter einem Etikett, das
   wie ein Knopf aussieht — dieselbe Kante, dieselbe Kurve wie
   .btn--stumm daneben. */
.bild__neu{margin-top:10px;}
.bild__knopf{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  border:1px dashed var(--line);border-radius:var(--r-s);padding:10px 16px;
  font-family:var(--grotesk);font-weight:500;font-size:13.5px;color:var(--graphite);
  transition:border-color .4s var(--ease),color .4s var(--ease),
             background-color .4s var(--ease);}
.bild__knopf:hover{border-color:var(--ink);color:var(--ink);background:var(--bone);}
.bild__knopf input{position:absolute;width:1px;height:1px;opacity:0;
                   overflow:hidden;clip:rect(0 0 0 0);}
.bild__knopf:focus-within{outline:2px solid var(--oxblood);outline-offset:3px;}
.bild__stand{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
             color:var(--graphite);margin-top:8px;line-height:1.5;}
.bild__stand:empty{display:none;}
.bild__stand.ist-fehler{color:var(--oxblood);}

.vorschau{max-width:190px;border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:8px;}

/* Ja und nein sollen von weitem zu unterscheiden sein, ohne dass
   man den Satz liest. Gruen ist derselbe Ton wie bei der guten
   Meldung — zwei Gruens waeren eins zu viel. */
.reihe__z b.ja{color:#2F6B4F;font-weight:500;}
.reihe__z b.nein{color:var(--oxblood);font-weight:500;}
/* Offen ist kein Fehler. Es faerbt sich deshalb nicht rot, sondern
   bleibt der ruhige Ton — rot ist erst, was ueberfaellig ist. */
.reihe__z b.offen{color:var(--ink);font-weight:500;}
/* ── Bilder ────────────────────────────────────────────────────
   Ein Motiv, ein Kaestchen, darunter in welchen Groessen es das
   gibt. Die Breite ist der Weg zum Herunterladen — sie steht schon
   da, und sie ist genau das, wonach man auswaehlt. */
.bilder{display:grid;gap:clamp(12px,1.4vw,18px);
        grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
.bild{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;
      background:var(--paper);}
.bild__b{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
         background:var(--stone);}
.bild figcaption{padding:10px 12px 12px;}
.bild figcaption b{display:block;font-family:var(--grotesk);font-weight:500;
                   font-size:13px;letter-spacing:-.01em;overflow-wrap:anywhere;}
.bild figcaption span{display:block;margin-top:5px;font-family:var(--mono);
                      font-size:10px;letter-spacing:.1em;color:var(--graphite);}
.bild figcaption a{border-bottom:1px solid var(--line);
                   transition:color .4s var(--ease),border-color .4s var(--ease);}
.bild figcaption a:hover{color:var(--oxblood);border-color:var(--oxblood);}
.bild figcaption i{font-style:normal;opacity:.65;}

/* ── Rechnungszeilen ───────────────────────────────────────────
   In der gewoehnlichen Reihe ist der Wert rechts klein, versal und
   in Mono — dort ist die Zeile ein Weg und das Ziel steht leise
   daneben. Bei einer Rechnung ist der Betrag die Auskunft. Er
   steht deshalb in derselben Schrift wie der Rest und nicht in
   Grossbuchstaben: 89,90 € liest man, „89,90 €" in Versalien
   buchstabiert man. */
.reihe--geld .reihe__z{padding-block:clamp(11px,1.2vw,15px);}
.reihe--geld .reihe__z b{font-family:var(--grotesk);font-weight:500;
                         font-size:clamp(14.5px,1.2vw,16px);}
.reihe--geld .reihe__z b i{font-style:italic;font-family:var(--serif);
                           font-weight:400;color:var(--graphite);
                           font-size:13.5px;margin-left:.5em;}
.reihe--geld .reihe__z span{font-family:var(--grotesk);font-size:13.5px;
                            letter-spacing:0;text-transform:none;
                            text-align:right;color:var(--graphite);
                            font-variant-numeric:tabular-nums;}
.reihe--geld .reihe__z span b{font-size:13.5px;}
/* Nur das em IM Wert. Das em davor ist die Zeilennummer — eine
   Regel auf .reihe__z em haette jede Nummer der Anwendung kursiv
   gestellt, und zwar ueberall. */
.reihe__z span em{font-family:var(--serif);font-style:italic;text-transform:none;
                  letter-spacing:0;font-size:13.5px;color:var(--graphite);}

.saum{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
      padding-block:clamp(22px,3vh,38px);border-top:1px solid var(--line-soft);
      margin-top:clamp(30px,5vh,60px);}

/* ── Die Anrede ────────────────────────────────────────────── */
.anrede{position:fixed;inset:0;z-index:1000;background:var(--bone);color:var(--ink);
        display:grid;place-items:center;padding:var(--edge);overflow:hidden;
        will-change:transform;transform:translate3d(0,0,0);}
.anrede.is-out{transform:translate3d(0,-100%,0);
               transition:transform 900ms cubic-bezier(.76,0,.24,1);}
.anrede.is-done{display:none;}
.anrede__satz{display:flex;flex-direction:column;align-items:center;
              gap:clamp(14px,2.2vh,22px);text-align:center;}
.anrede__mark{font-family:var(--grotesk);font-weight:600;font-size:clamp(13px,1.05vw,15px);
              letter-spacing:-.028em;opacity:0;transform:translateY(6px);
              transition:opacity .6s var(--ease),transform .6s var(--ease);}
.anrede.is-in .anrede__mark{opacity:1;transform:none;}
.anrede__gruss{font-family:var(--grotesk);font-weight:500;letter-spacing:-.035em;
               line-height:1.02;font-size:clamp(28px,4.6vw,62px);max-width:16ch;}
.anrede__ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.anrede__ln > i{display:block;font-style:normal;transform:translateY(106%);
                transition:transform 1s var(--ease-out) .12s;}
.anrede.is-in .anrede__ln > i{transform:none;}
.anrede__pkt{display:inline-block;width:.115em;height:.115em;border-radius:50%;
             background:var(--oxblood);margin-left:.06em;transform:scale(0);
             transition:transform .55s var(--ease-out) .62s;}
.anrede.is-in .anrede__pkt{transform:none;}
.anrede__wer{font-family:var(--mono);font-size:clamp(9.5px,.78vw,11.5px);letter-spacing:.2em;
             text-transform:uppercase;color:var(--graphite);max-width:40ch;
             opacity:0;transform:translateY(6px);
             transition:opacity .6s var(--ease) .58s,transform .6s var(--ease) .58s;}
.anrede.is-in .anrede__wer{opacity:1;transform:none;}
.anrede__strich{width:min(280px,42vw);height:1px;background:var(--ink);opacity:.2;
                transform:scaleX(0);transform-origin:left center;
                transition:transform 1.1s var(--ease-out) .72s;}
.anrede.is-in .anrede__strich{transform:none;}

/* ── Die Anmeldung ─────────────────────────────────────────── */
.tor{min-height:100svh;display:grid;place-items:center;padding:var(--edge);}
.tor__b{width:min(420px,100%);}
.tor__mark{font-family:var(--grotesk);font-weight:600;font-size:17px;letter-spacing:-.028em;
           display:block;margin-bottom:clamp(26px,4vh,44px);}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  .sep i{transform:scaleX(1);}
}
@media (max-width:760px){
  /* Eng wird zuerst der Name weggelassen: die Marke fuehrt ohnehin
     auf dieselbe Uebersicht. */
  .nav__where,.nav__sep{display:none;}
  .nav__sheet{height:52px;}
  /* Ohne die Mitte muss auch nichts mehr zentriert werden — und dann
     duerfen die beiden Aussenfelder aufhoeren, sich den Platz zu
     gleichen Teilen zu nehmen. Vorher bekam rechts genau die Haelfte,
     und was nicht hineinpasste, lag danach ueber der Wortmarke. Das
     war schon mit dem kurzen Wort so; mit dem laengeren faellt es nur
     eher auf.
     margin-left:auto statt justify-content:flex-end, weil ein
     automatischer Rand auf null zusammenfaellt, sobald der Platz
     ausgeht — so stehen die Verweise rechts, solange sie passen, und
     lassen sich schieben, sobald sie es nicht mehr tun. Mit
     flex-end waere der Anfang der Reihe unerreichbar. */
  .nav__seite{flex:0 0 auto;}
  .nav__seite--rechts{flex:1 1 auto;min-width:0;justify-content:flex-start;
                      overflow-x:auto;scrollbar-width:none;}
  .nav__seite--rechts > :first-child{margin-left:auto;}
  .nav__seite--rechts::-webkit-scrollbar{width:0;height:0;}
}

/* ── Zahlen ────────────────────────────────────────────────────
   Eine Tafel, keine Seite. Der Rest der Verwaltung ist
   redaktionell aufgebaut — nummerierte Abschnitte, Linien,
   Fliesstext. Das ist richtig, wenn man etwas liest oder
   bearbeitet, und falsch, wenn man etwas ueberblickt: dort will
   man Kacheln nebeneinander, keine Kapitel untereinander.

   Deshalb hier Karten auf einer Flaeche, nach dem Muster der
   grossen Handelsoberflaechen: oben eine Reihe Kennzahlen mit
   Vergleich zur Vorperiode und einer kleinen Kurve, darunter ein
   grosses Diagramm, darunter ein Raster kompakter Listen.

   Was von dort NICHT uebernommen wird, ist die Ampel. Gruen fuer
   mehr und Rot fuer weniger behauptet, dass jede Bewegung eine
   Wertung hat — bei 39 Besuchen an einem Sonntag ist das Unsinn.
   Die Marke hat ausserdem weder Gruen noch Rot. Richtung zeigt
   ein Dreieck, das Gewicht traegt die Tinte. */

.tafel{max-width:var(--max);margin:0 auto;padding:clamp(18px,3.4vh,38px) var(--edge) clamp(60px,9vh,110px);}

.tafel__kopf{display:flex;align-items:flex-end;justify-content:space-between;
             gap:clamp(16px,3vw,40px);flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,30px);}
.tafel__u{font-family:var(--serif);font-size:clamp(14px,1.15vw,16.5px);color:var(--graphite);
          margin-top:.5em;max-width:52ch;line-height:1.5;}

/* Der Zeitraum als Segmentschalter. Drei Woerter nebeneinander in
   einem Rahmen lesen sich als Auswahl; drei Verweise mit Punkten
   dazwischen lesen sich als Fussnote. */
.segment{display:inline-flex;border:1px solid var(--line);border-radius:999px;
         background:var(--paper);padding:3px;gap:2px;flex:none;}
.segment a,.segment span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
         text-transform:uppercase;padding:7px 14px 8px;border-radius:999px;
         color:var(--graphite);text-decoration:none;white-space:nowrap;
         transition:background-color .35s var(--ease),color .35s var(--ease);}
@media(hover:hover){ .segment a:hover{color:var(--ink);background:rgba(22,19,15,.05);} }
.segment .ist{background:var(--ink);color:var(--bone);}

/* ── Kennzahlen ─────────────────────────────────────────────── */
.kpi{display:grid;gap:clamp(10px,1.1vw,14px);margin-bottom:clamp(10px,1.1vw,14px);
     grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
/* Fuenf Kacheln vertragen kein auto-fit. Es fuellt die Reihe mit
   vier und laesst die fuenfte allein stehen — das liest sich wie
   ein Nachtrag, nicht wie eine Reihe. Also fest: fuenf in einer
   Zeile, wenn der Platz reicht, sonst drei plus zwei. Vier plus
   eins gibt es damit nie. */
@media(min-width:1080px){ .kpi{grid-template-columns:repeat(5,1fr);} }
@media(min-width:700px) and (max-width:1079px){ .kpi{grid-template-columns:repeat(3,1fr);} }
.kpi__k{border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);
        padding:clamp(15px,1.5vw,19px) clamp(16px,1.6vw,21px) clamp(11px,1.2vw,14px);
        display:flex;flex-direction:column;min-height:132px;}
.kpi__n{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
        color:var(--graphite);}
.kpi__z{font-family:var(--grotesk);font-weight:500;letter-spacing:-.032em;
        font-size:clamp(29px,3.1vw,40px);line-height:1.02;margin:.3em 0 .16em;
        font-variant-numeric:tabular-nums;}
.kpi__d{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--graphite);
        display:flex;align-items:center;gap:6px;}
.kpi__d i{font-style:normal;font-size:8.5px;line-height:1;}
.kpi__d--hoch i{color:var(--ink);}
.kpi__d--tief i{color:var(--oxblood);}
/* Die kleine Kurve sitzt unten und traegt keine Achse. Sie
   beantwortet nicht „wie viel", sondern nur „in welche Richtung" —
   dafuer braucht sie keine Beschriftung, und mit einer waere sie
   ein zweites Diagramm neben dem grossen. */
.kpi__f{margin-top:auto;padding-top:10px;}
.kpi__f svg{display:block;width:100%;height:26px;overflow:visible;}

/* ── Karten ─────────────────────────────────────────────────── */
/* align-items:start ist hier keine Kosmetik. Ohne die Zeile
   streckt das Raster jede Karte auf die Hoehe ihrer Nachbarin —
   „Suchmaschinen" mit sechs Zeilen stand 2165 Pixel hoch neben
   „Uebriger Verkehr" mit neununddreissig, und die untere Haelfte
   war leeres Papier. */
.raster{display:grid;gap:clamp(10px,1.1vw,14px);grid-template-columns:1fr;align-items:start;}
@media(min-width:900px){ .raster{grid-template-columns:1fr 1fr;} }
.karte{border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);
       display:flex;flex-direction:column;overflow:hidden;}
.karte--breit{grid-column:1 / -1;margin-bottom:clamp(10px,1.1vw,14px);}
.karte--voll{grid-column:1 / -1;}
.karte__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
             padding:clamp(14px,1.4vw,17px) clamp(16px,1.6vw,21px) clamp(11px,1.1vw,13px);
             border-bottom:1px solid var(--line-soft);}
.karte__kopf h2{font-family:var(--grotesk);font-weight:500;letter-spacing:-.024em;
                font-size:clamp(15px,1.25vw,17.5px);}
.karte__kopf span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
                  text-transform:uppercase;color:var(--graphite);text-align:right;flex:none;}
.karte__leib{padding:clamp(13px,1.4vw,18px) clamp(16px,1.6vw,21px) clamp(15px,1.5vw,19px);}
.karte__leib--eng{padding:6px 0 4px;}
/* Lange Listen bekommen ein Fenster statt einer Rolle Papier.
   Neununddreissig Kennungen am Stueck sind keine Uebersicht. */
.karte__leib--roll{max-height:clamp(280px,42vh,430px);overflow-y:auto;
                   scrollbar-width:thin;scrollbar-color:var(--stone) transparent;}
.karte__hinweis{font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--graphite);
                padding:0 clamp(16px,1.6vw,21px) clamp(13px,1.3vw,16px);max-width:74ch;}
.karte__leer{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--stone);
             padding:clamp(16px,2vw,26px) clamp(16px,1.6vw,21px);}

/* ── Das grosse Diagramm ────────────────────────────────────── */
.kurve{display:block;width:100%;height:clamp(150px,20vh,215px);overflow:visible;}
.kurve__gitter{stroke:var(--line-soft);stroke-width:1;}
.kurve__vor{fill:none;stroke:var(--stone);stroke-width:1.25;stroke-dasharray:3 4;opacity:.75;}
.kurve__linie{fill:none;stroke:var(--oxblood);stroke-width:2;
              stroke-linejoin:round;stroke-linecap:round;}
.kurve__marke{fill:var(--oxblood);}
.kurve__t{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:var(--graphite);}
.kurve__legende{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;
                font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
                text-transform:uppercase;color:var(--graphite);}
.kurve__legende b{display:inline-block;width:14px;height:2px;vertical-align:middle;
                  margin-right:6px;background:var(--oxblood);}
.kurve__legende .gestrichelt b{background:none;border-top:1.5px dashed var(--stone);height:0;}

/* ── Ranglisten ─────────────────────────────────────────────── */
/* Name links, Anteil als Balken hinter dem Namen, Zahl rechts.
   Der Balken liegt UNTER der Zeile und nicht daneben: eine eigene
   Spalte fuer ihn presst lange Pfade auf zwanzig Zeichen. */
.rang{list-style:none;}
.rang li{position:relative;display:flex;align-items:baseline;gap:12px;
         padding:9px clamp(16px,1.6vw,21px);}
.rang li::before{content:'';position:absolute;left:0;top:0;bottom:0;
                 background:rgba(122,44,57,.075);width:var(--anteil,0%);
                 transition:width .6s var(--ease-out);}
.rang b{position:relative;font-family:var(--grotesk);font-weight:400;
        font-size:clamp(13px,1.05vw,14.5px);letter-spacing:-.01em;flex:1;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rang span{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
           color:var(--graphite);flex:none;font-variant-numeric:tabular-nums;}

/* ── Maschinen ──────────────────────────────────────────────── */
.mliste{list-style:none;}
.mzeile{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
        padding:11px clamp(16px,1.6vw,21px);border-top:1px solid var(--line-soft);}
.mliste li:first-child .mzeile,.mliste > .mzeile:first-child{border-top:0;}
.mzeile__w{font-family:var(--grotesk);font-weight:500;letter-spacing:-.022em;
           font-size:clamp(13.5px,1.1vw,15.5px);}
.mzeile__b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--graphite);}
.mzeile__r{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
           color:var(--graphite);font-variant-numeric:tabular-nums;text-align:right;}
.mzeile__p{flex-basis:100%;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
           color:var(--stone);margin-top:-1px;overflow:hidden;text-overflow:ellipsis;
           white-space:nowrap;}

/* Drei Zustaende, drei Gewichte — kein Ampelspiel. „Unbestaetigt"
   ist keine Warnung, sondern eine offene Frage. */
.urteil{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
        padding:2px 7px 3px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;}
.urteil--ja{border-color:var(--ink);color:var(--ink);}
.urteil--nein{border-color:var(--oxblood);color:var(--oxblood);background:rgba(122,44,57,.07);}
.urteil--offen{color:var(--graphite);}

.nie{display:flex;flex-wrap:wrap;gap:7px;}
.nie span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--graphite);
          border:1px dashed var(--line);border-radius:999px;padding:4px 10px 5px;}

/* ── Grenzen ────────────────────────────────────────────────── */
.grenzen{display:grid;gap:clamp(14px,1.8vw,26px);grid-template-columns:1fr;}
@media(min-width:760px){ .grenzen{grid-template-columns:1fr 1fr;} }
.grenzen h3{font-family:var(--grotesk);font-weight:500;letter-spacing:-.022em;
            font-size:15px;margin:.35em 0 .3em;}
.grenzen p{font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--graphite);}
.grenzen .kasten__n{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
                    text-transform:uppercase;color:var(--stone);}

/* ── Freier Zeitraum ───────────────────────────────────────────
   Zwei Datumsfelder und ein Knopf, als gewoehnliches GET-Formular.
   Kein Skript: wer die Adresse mit ?von=&bis= aufruft oder sie sich
   als Lesezeichen legt, bekommt dasselbe. Der Kalender kommt vom
   Browser und muss von uns nicht nachgebaut werden. */
/* nowrap ist hier keine Kosmetik: mit flex-wrap stapelten sich die
   beiden Datumsfelder schon am Rechner untereinander, weil die
   Kopfzeile der rechten Spalte zu wenig Platz liess — und der
   Gedankenstrich stand allein in einer eigenen Zeile. Umbrechen
   darf die Reihe, nicht das Feldpaar. */
.zeitwahl{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;
          border:1px solid var(--line);border-radius:999px;background:var(--paper);
          padding:3px 4px 3px 12px;}
.zeitwahl input[type=date]{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
          color:var(--ink);background:none;border:0;padding:5px 2px;
          font-variant-numeric:tabular-nums;min-width:7.2em;}
.zeitwahl input[type=date]:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px;
          border-radius:4px;}
.zeitwahl__bis{font-family:var(--mono);font-size:10.5px;color:var(--stone);}
.zeitwahl button{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
          text-transform:uppercase;border:0;border-radius:999px;cursor:pointer;
          background:var(--ink);color:var(--bone);padding:7px 14px 8px;
          transition:opacity .3s var(--ease);}
@media(hover:hover){ .zeitwahl button:hover{opacity:.82;} }

.wahlreihe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
/* Der Titelblock darf schrumpfen, sonst draengt seine Zeile die
   Bedienung in die naechste Reihe. */
.tafel__kopf > div:first-child{flex:1 1 300px;min-width:0;}
@media(max-width:760px){
  .wahlreihe{width:100%;justify-content:flex-start;}
  .zeitwahl{width:100%;justify-content:space-between;}
  .segment{width:100%;justify-content:space-between;}
}

/* Zwei Linien, zwei Zahlen. Die Legende traegt die Summen mit —
   eine Linie ohne ihre Zahl ist ein Gefuehl, und zwei Linien ohne
   ihre Zahlen sind zwei Gefuehle. */
/* Drei Linien, zwei Welten. Seitenaufrufe und Besuche sind beide
   menschlich und teilen sich deshalb die Farbe — die Besuche
   gestrichelt und duenner, weil sie unter den Seitenaufrufen
   liegen und nicht mit ihnen konkurrieren. Die Maschinen stehen
   in Tinte daneben: andere Farbe, andere Welt. */
.kurve__seiten{fill:none;stroke:var(--oxblood);stroke-width:2;
               stroke-linejoin:round;stroke-linecap:round;}
.kurve__besuche{fill:none;stroke:var(--oxblood);stroke-width:1.5;opacity:.55;
                stroke-dasharray:4 3.5;stroke-linejoin:round;stroke-linecap:round;}
.kurve__maschine{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.62;
                 stroke-linejoin:round;stroke-linecap:round;}
.kurve__legende .zahl{font-variant-numeric:tabular-nums;color:var(--ink);
                      letter-spacing:.04em;margin-left:5px;}
.kurve__legende .maschine b{background:var(--ink);opacity:.62;}
.kurve__legende .besuche b{background:none;height:0;opacity:.6;
                           border-top:1.5px dashed var(--oxblood);}

/* ── Diagramm: Schleier, Führung, Blase ────────────────────────
   Beide Linien bekommen ihre Fläche. Die dunkle liegt zuerst und
   damit hinten — sonst deckt sie bei Tagen, an denen mehr Maschinen
   als Menschen kamen, die rote Fläche zu, und die Kurve, um die es
   geht, verschwindet unter dem Grundrauschen der Sammler. */
.kurve__flaeche{fill:var(--oxblood);opacity:.09;}
.kurve__flaeche--maschine{fill:var(--ink);opacity:.055;}

/* Das Feld um das Diagramm. position:relative, weil die Blase in
   Bildschirmpixeln sitzt und nicht im Koordinatensystem der SVG —
   die ist verzerrt skaliert und taugt nicht zum Platzieren von
   Text. */
.kurve__feld{position:relative;touch-action:pan-y;}

.kurve__fuehrung{stroke:var(--ink);stroke-width:1;opacity:.28;}
.kurve__punkt{stroke:var(--paper);stroke-width:2;}
.kurve__punkt--s{fill:var(--oxblood);}
.kurve__punkt--b{fill:var(--oxblood);opacity:.55;}
.kurve__punkt--m{fill:var(--ink);opacity:.62;}
.kurve__feld[data-still] .kurve__fuehrung,
.kurve__feld[data-still] .kurve__punkt{opacity:0;}

.kurve__blase{position:absolute;top:6px;z-index:3;pointer-events:none;
  min-width:186px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-s);padding:9px 12px 10px;
  box-shadow:0 14px 30px -22px rgba(22,19,15,.9);
  transition:opacity .18s var(--ease);}
.kurve__feld[data-still] .kurve__blase{opacity:0;}
.kurve__blase dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--graphite);}
.kurve__blase dd{font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;}
.kurve__blase__t{font-family:var(--grotesk);font-weight:500;font-size:13px;
  letter-spacing:-.02em;margin-bottom:.5em;padding-bottom:.45em;
  border-bottom:1px solid var(--line-soft);}
.kurve__blase dl{display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:baseline;}
/* Der Punkt vor der Beschriftung sagt, zu welcher Linie die Zahl
   gehoert. Ohne ihn muesste man die Reihenfolge auswendig koennen. */
.kurve__blase dt i{display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:6px;vertical-align:middle;}
.kurve__blase .mensch i{background:var(--oxblood);}
.kurve__blase .maschine i{background:var(--ink);opacity:.62;}