/* ═══════════════════════════════════════════════════════════════
   Dieselben Werte wie auf notera.studio. 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:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/instrument-sans-400-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/instrument-sans-400-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@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:'Instrument Sans',system-ui,-apple-system,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{font-synthesis-weight:none;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 notera.studio — 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);}
/* Die Kundenuebersicht ist das einzige Blatt, das nicht liest,
   sondern zeigt: sechs Felder, sonst nichts. Die stehen in der
   Mitte zwischen Leiste und Saum — oben so viel Luft wie unten.
   main fuellt den Raum ohnehin (flex:1); hier wird er nur mittig
   vergeben. */
/* Oben beginnt der Raum unter der Leiste (ihr Abstand plus ihre
   Hoehe plus zwei Pixel Rahmen), und der Saum traegt unten seinen
   eigenen Abstand (margin-top) — der liegt ausserhalb von main und
   wuerde die Mitte nach oben ziehen. Also kommt derselbe Betrag
   oben als Polster dazu: dann ist die Luft ueber den Feldern gleich
   der Luft darunter, bis zur Linie des Saums. */
main:has(> #uebersicht){display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(clamp(12px,1.5vw,22px) + clamp(46px,3.9vw,56px) + 2px + clamp(30px,5vh,60px));}
main:has(> #uebersicht) > #uebersicht{padding-block:clamp(24px,4vh,48px);}
/* Der Saum mit drei Feldern: Datum, die Website des Kunden, die
   Zeile. Links und rechts bündig mit dem Inhalt, und die Mitte mit
   gleich viel Luft zu beiden Nachbarn (28.09.2026) — sonst wirkt die
   Lücke zum kurzen Datum größer als die zum langen Impressum.
   Schmal bricht es untereinander. */
.saum--drei{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:24px;}
.saum--drei > *{white-space:nowrap;}
.saum--drei > :last-child{text-align:right;}
.saum__mitte{text-align:center;}
.saum__mitte a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
               padding-bottom:1px;transition:border-color .3s var(--ease);}
.saum__mitte a:hover{border-color:var(--oxblood);}
@media(max-width:960px){
  .saum--drei{flex-direction:column;gap:10px;text-align:center;}
  .saum--drei > *{white-space:normal;}
  .saum--drei > :last-child{text-align:center;}
}
.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;}
/* Der Punkt hinter einer Ueberschrift: sein Kasten ist breiter als
   er selbst, damit zwischen dem letzten Buchstaben und ihm Luft
   bleibt — wie auf der Hauptseite (.34em). In den kleinen
   Wortmarken (Leiste, Tor, Anrede) steht er enger; dort ist der
   Text Kapitaelchen mit Laufweite, und die Luft kommt von selbst. */
.mdot{display:inline-block;width:.34em;height:.194em;vertical-align:baseline;position:relative;}
.nav__mark .mdot,.tor__mark .mdot,.anrede__mark .mdot{width:.176em;}
.mdot i{position:absolute;left:50%;bottom:0;width:.194em;height:.194em;
        margin-left:-.097em;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;flex-direction:column;align-items:center;gap:7px;
     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);}
/* Wortmarke und Punkt sind hier ZWEI Flex-Kinder — der Text und der
   Punkt-Kasten. align-items:center setzte beide fuer sich mittig, und
   ein 3-px-Punkt mittig neben 18 px Text schwebt auf halber Hoehe wie
   ein Mittelpunkt. Er gehoert auf die Grundlinie, als Satzpunkt: also
   baseline fuer die Kinder, und die eine Zeile ueber align-content in
   der Mitte des Feldes gehalten (wirkt nur mit flex-wrap). */
.nav__mark{font-family:var(--grotesk);font-weight:600;font-size:clamp(14.5px,1.15vw,17px);
           text-transform:uppercase;letter-spacing:.110em;
           display:inline-flex;flex-wrap:wrap;align-items:baseline;align-content: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. */
/* ── Wer weicht, wenn es eng wird ───────────────────────────────
   Bis zum 24.09.2026 bekamen beide Seiten denselben Anteil
   (flex:1 1 0), damit die Mitte wirklich mittig steht. Das war
   richtig gedacht und im Verwaltungsbereich falsch: dort stehen
   rechts fünf Wege statt keinem. Die rechte Seite bekam ihr
   Drittel, brauchte mehr — und was nicht hineinpasste, wurde nicht
   etwa abgeschnitten, sondern lief nach links aus dem Kasten
   heraus, quer über den Namen. Zwei Schriften übereinander, beide
   unlesbar.

   Jetzt nehmen die Seiten genau die Breite ihres Inhalts, und die
   Mitte bekommt, was übrig bleibt. Sie steht damit nicht mehr
   exakt in der Mitte des Blattes, sondern in der Mitte ihres
   Platzes — dafür liegt nie wieder etwas übereinander. */
.nav__seite{display:flex;align-items:stretch;flex:0 0 auto;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;
            min-width:0;flex:1 1 auto;padding:0 clamp(8px,1vw,16px);}
/* Der Text steckt in einer eigenen Hülle, weil „text-overflow"
   einem Flex-Kasten nichts sagt: er kürzt nur, was in einem
   Textkasten steht. Ohne sie wurde der Name bei Enge an BEIDEN
   Enden beschnitten — mittig ausgerichtet und nirgends ein
   Auslassungszeichen, das sagt, dass noch etwas fehlt. */
.nav__where > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Die Mitte der Leiste sagt, wo man ist — Name und Kundenportal.
   Etwas schwerer und dunkler als ein Etikett, damit sie neben
   Wortmarke und Knopf nicht untergeht. */
.nav__where.lab{font-weight:600;font-size:clamp(10.5px,.82vw,12.5px);letter-spacing:.17em;color:var(--ink);}
.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--paar  > :last-child:nth-child(odd){grid-column:1 / -1;}
}

/* ── Die Übersicht: alle Kästen gleich groß ─────────────────────
   Seit 28.09.2026. Vorher war jede Reihe so hoch wie ihr längster
   Text, und bei zwei Spalten nahm ein übriger Kasten die ganze
   Breite — sechs Kästen, vier Größen. Jetzt ist jede Reihe so hoch
   wie die höchste (grid-auto-rows:1fr), kein Kasten spannt über
   zwei Spalten, und die Zahl steht in jedem Kasten unten auf
   derselben Linie. */
.kaesten--gross{grid-auto-rows:1fr;}
/* Die Übersicht darf breiter sein als ein Lesetext: acht Kacheln
   brauchen Platz, und auf breiten Schirmen blieb links und rechts
   ein Streifen leer, während die Kästen schmal wurden. */
.sec:has(> .kaesten--gross){--max:1400px;--edge:clamp(20px,4vw,64px);}
.kaesten--gross > .kasten{display:flex;flex-direction:column;}
.kaesten--gross .kasten__zahl{margin-top:auto;padding-top:.9em;}

/* Die Uebersicht hat sechs Felder, und alle sechs sollen ohne
   Scrollen auf dem Blatt stehen. Zu zweit nebeneinander sind das
   drei Reihen zu je 250 px — auf einem Laptop reicht das Fenster
   dafuer nicht. Ab 1100 px deshalb zu dritt, in zwei Reihen, mit
   etwas engerem Kasten: dieselbe Gliederung, nur so gesetzt, dass
   der Blick sie ganz erfasst. Die Regel „letzter ungerader ueber
   die volle Breite" gilt hier nicht, sie ist fuer zwei Spalten. */
/* Seit 28.09.2026 vier je Reihe statt drei: mit Integrationen und
   „Kunden werben Kunden" sind es acht Felder, und acht stehen so in
   zwei Reihen auf dem Blatt, ohne dass man scrollen muss. */
@media(min-width:1100px){
  /* 28.09.2026: etwas größer und mit mehr Luft dazwischen — acht
     Felder passen auch so bei 1280 × 800 ohne Scrollen. */
  .kaesten--gross{grid-template-columns:repeat(4,1fr);gap:clamp(18px,1.8vw,28px);}
  .kaesten--gross .kasten{padding:clamp(22px,2vw,30px) clamp(22px,2vw,30px);min-height:clamp(190px,23vh,240px);}
  .kaesten--gross .kasten h3{font-size:clamp(20px,1.6vw,24px);margin:.45em 0 .35em;}
  .kaesten--gross .kasten p{font-size:14.5px;line-height:1.5;max-width:none;}
}
.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;}
/* Eine Adresse, eine Domain, eine Nummer: so lassen, wie man sie
   tippt. Kapitälchen sind für Datum und Ort richtig, hier falsch —
   10081@KUNDE.NOTERA.STUDIO liest niemand als Adresse. */
.reihe__z span .wie{font-style:normal;text-transform:none;letter-spacing:.06em;color:var(--ink);}
/* Die Kennungen sind das, was der Kunde beim Anmelden eintippt —
   sie sollen sich lesen lassen wie ein Wert, nicht wie ein Etikett.
   Deshalb groesser als die uebrigen Angaben, in der Grotesk. */
.reihe--anmeldung .reihe__z span .wie{font-family:var(--grotesk);font-size:clamp(14px,1.15vw,16px);
                                       font-weight:500;letter-spacing:-.005em;}
.reihe--anmeldung .reihe__z span .wie--aktiv{font-family:var(--mono);font-size:9.5px;font-weight:400;
                                             letter-spacing:.16em;}
.reihe--anmeldung .reihe__z span .wie--leer{font-family:var(--serif,Georgia,serif);font-weight:400;
                                            font-size:clamp(13px,1.05vw,15px);}
/* Der aktive Anmeldeweg: Punkt und Wort hinter dem Wert, in der
   Farbe der Marke — so wie die Kachelzahlen unten auf der
   Uebersicht. Ein Wert, der fehlt, steht kursiv und grau. */
/* Steht vor dem Wert und auf dessen Mitte: der Wert ist 15 px
   Grotesk, die Marke 9,5 px Kapitaelchen — ohne eigene Ausrichtung
   haengt sie an der Grundlinie und wirkt versetzt. */
.reihe--anmeldung .reihe__z span{display:inline-flex;align-items:center;gap:14px;}
.wie--aktiv{display:inline-flex;align-items:center;gap:6px;
            font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
            color:var(--oxblood);}
.wie--aktiv .dot{width:5px;height:5px;}
.wie--leer{color:var(--graphite);font-style:italic;letter-spacing:.02em;}

/* 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],
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;}
/* Seit dem 24.09.2026 ist das ein gewoehnliches Textfeld mit
   eigenem Kalender (.kal) — nicht mehr das Rollfeld des
   Betriebssystems, das auf jedem Geraet anders aussah. Die Regeln
   fuer dessen Kalenderknopf standen bis dahin hier; sie sind weg,
   weil es den Knopf nicht mehr gibt. */
.datum input[data-datum]{width:11ch;padding:9px 11px;font-size:13.5px;
                         font-family:var(--mono);letter-spacing:.02em;
                         color:var(--graphite);}
.datum input[data-datum]:focus{color:var(--ink);}
@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);}
/* Der Saum steht bündig mit dem Inhalt darüber (28.09.2026): Linie,
   Datum links und Impressum rechts enden an denselben Kanten wie die
   Kacheln — nicht eingerückt im Rand der Seite. */
.saum.wrap{padding-inline:0;width:calc(100% - 2 * var(--edge));max-width:calc(var(--max) - 2 * var(--edge));}
/* Die Startseite ist breiter (Kacheln, 1400 px) — der Saum geht mit.
   Die Klasse setzt der Server (lib/blatt.js), nicht :has() — so steht
   es auch in Browsern bündig, die :has() nicht kennen. */
.saum--breit{--max:1400px;--edge:clamp(20px,4vw,64px);}

/* ── 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);
              text-transform:uppercase;letter-spacing:.110em;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;text-transform:uppercase;letter-spacing:.110em;
           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);}
  /* Die Kundenseite hat zwei Kennzahlen, nicht fuenf — zwei Kacheln
     in einem Fuenferraster saehen aus wie ein Rest. */
  .kpi--zwei{grid-template-columns:repeat(2,minmax(0,320px));}
  /* Seit die Anfragen mitgezaehlt werden, sind es drei. */
  .kpi--drei{grid-template-columns:repeat(3,minmax(0,320px));}
  .kpi--vier{grid-template-columns:repeat(4,minmax(0,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(--graphite);
             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;}

/* ── Die Quittung ───────────────────────────────────────────────
   Nach dem Absenden stand hier ein Satz in einem Balken. Ein Satz
   beantwortet die Frage, aber er beantwortet sie leise: wer auf
   „senden" drückt, sucht in der halben Sekunde danach ein Zeichen,
   nicht einen Text. Also beides — ein Haken, der sich zieht, oder
   ein Kreuz, das sich schlägt, und daneben der Satz.

   Gezeichnet wird mit stroke-dasharray: die Linie ist so lang wie
   ihr Strich und liegt zunaechst ausserhalb; die Animation schiebt
   sie hinein. Kein Skript, kein Bild — die Seite kommt fertig aus
   dem Server und faengt beim Laden von selbst an.

   Wer im System „Bewegung reduzieren" gesetzt hat, bekommt das
   fertige Zeichen ohne Zug. */
.quittung{display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,16px);
          padding:clamp(14px,1.6vw,18px) clamp(15px,1.7vw,20px);
          border:1px solid var(--line);border-radius:var(--r-m);
          background:var(--paper);margin-bottom:clamp(14px,1.8vh,20px);
          animation:quittung-auf .45s var(--ease-out) both;}
.quittung__zeichen{flex:none;width:34px;height:34px;}
.quittung__zeichen svg{display:block;width:100%;height:100%;}
.quittung__wort{margin:0;font-size:clamp(14px,1.1vw,15.5px);line-height:1.55;
                align-self:center;}
.quittung__wort b{font-weight:500;}
.quittung--gut{border-color:rgba(47,125,123,.4);background:rgba(47,125,123,.06);}
.quittung--gut .quittung__ring{stroke:rgba(47,125,123,.55);}
.quittung--gut .quittung__strich{stroke:#2f7d7b;}
.quittung--fehler{border-color:rgba(170,110,40,.45);background:rgba(170,110,40,.07);}
.quittung--fehler .quittung__ring{stroke:rgba(170,110,40,.5);}
.quittung--fehler .quittung__strich{stroke:#a06520;}

.quittung__ring{fill:none;stroke-width:1.6;stroke-dasharray:104;stroke-dashoffset:104;
                animation:quittung-ring .7s var(--ease-out) .05s forwards;}
.quittung__strich{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
                  stroke-dasharray:36;stroke-dashoffset:36;
                  animation:quittung-strich .42s var(--ease-out) .5s forwards;}
/* Der zweite Balken des Kreuzes kommt nach dem ersten, nicht mit
   ihm — sonst sieht es aus, als klappe ein X auf, statt dass
   jemand es schreibt. */
.quittung__strich--zwei{animation-delay:.74s;}

@keyframes quittung-auf{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;} }
@keyframes quittung-ring{ to{stroke-dashoffset:0;} }
@keyframes quittung-strich{ to{stroke-dashoffset:0;} }

@media (prefers-reduced-motion:reduce){
  .quittung,.quittung__ring,.quittung__strich{animation:none;}
  .quittung__ring,.quittung__strich{stroke-dashoffset:0;} }

/* ── Einblick ───────────────────────────────────────────────────
   Kein Balken über der Seite, sondern ein Schild unter der Leiste:
   rund, in unserem Rot, mit dem Weg zurück gleich daneben. Wer im
   Portal eines Kunden sitzt und es für seins hält, ändert im
   Zweifel dessen Website — also muss es zu sehen sein, ohne dass
   es der Seite eine Zeile wegnimmt. */
.einblick{pointer-events:auto;display:inline-flex;align-items:center;gap:14px;
          max-width:100%;margin:0;padding:7px 8px 7px 18px;border-radius:999px;
          background:#7a2c39;color:#f7f2ed;
          box-shadow:0 8px 22px -16px rgba(22,19,15,.7);
          font-family:var(--mono);font-size:10px;letter-spacing:.14em;
          text-transform:uppercase;}
.einblick b{font-weight:600;}
.einblick__weg{flex:none;color:inherit;background:rgba(255,255,255,.14);
               border-radius:999px;padding:5px 13px 6px;white-space:nowrap;
               transition:background-color .3s var(--ease);}
.einblick__weg:hover{background:rgba(255,255,255,.28);}
@media(max-width:560px){
  .einblick{font-size:9px;letter-spacing:.1em;gap:8px;padding-left:12px;}
  .einblick > span{display:none;}
}
/* Das Schild braucht Platz — sonst liegt die erste Überschrift
   darunter. */
main.mit-einblick{padding-top:clamp(124px,14vh,160px);}

/* Ein Knopf, der aussieht wie ein Verweis: er eröffnet eine
   Sitzung, also muss er ein Formular sein — aussehen soll er wie
   die drei Wege daneben. */
.alsweg{border:0;background:none;padding:0;cursor:pointer;font:inherit;
        color:inherit;border-bottom:1px solid var(--line);
        transition:color .4s var(--ease),border-color .4s var(--ease);}
.alsweg:hover{color:var(--oxblood);border-color:var(--oxblood);}

/* ── Dokumente als Kästen ───────────────────────────────────────
   Eine Datei ist ein Gegenstand, kein Listeneintrag. Also ein
   Kasten je Datei, und der ganze Kasten ist der Verweis: die Art
   oben klein, der Name groß, Größe und Datum darunter.

   Die Kästen sind bewusst schmal — bei zwölf Dateien soll eine
   Wand entstehen, die man überblickt, und keine Reihe von
   Bannern. */
.dokraster{display:grid;gap:clamp(10px,1.1vw,14px);
           grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.dokz{display:flex;flex-direction:column;gap:9px;min-height:124px;
      padding:clamp(14px,1.4vw,17px) clamp(15px,1.5vw,19px);
      border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);
      text-decoration:none;color:inherit;
      transition:border-color .4s var(--ease),background-color .4s var(--ease),
                 transform .4s var(--ease-out);}
/* Kasten und Knopf „Herunterladen" liegen in .dokh nebeneinander;
   der Knopf sitzt oben rechts auf dem Kasten und hebt sich mit ihm. */
.dokh{position:relative;display:flex;transition:transform .4s var(--ease-out);}
.dokh > .dokz{flex:1 1 auto;min-width:0;}
.dokh:hover{transform:translateY(-2px);}
.dokh:hover > .dokz{border-color:var(--ink);background:#fff;}
.dokz:hover{border-color:var(--ink);background:#fff;}
.dokz__laden{position:absolute;top:clamp(9px,.9vw,12px);right:clamp(9px,.9vw,12px);
             font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
             color:var(--graphite);text-decoration:none;background:var(--paper);
             border:1px solid var(--line);border-radius:999px;padding:5px 10px 6px;
             transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease);}
.dokz__laden:hover,.dokz__laden:focus-visible{color:var(--bone);background:var(--ink);border-color:var(--ink);}
.dokz__art{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
           color:var(--graphite);}
.dokz__n{font-family:var(--grotesk);font-weight:500;letter-spacing:-.022em;
         font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.3;margin-top:auto;}
.dokz__m{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
         color:var(--graphite);}

/* ── Die ganze Zeile öffnet ─────────────────────────────────────
   In der Rechnungsliste hing der Verweis am Wort „Stiftung" —
   daneben standen Dateiname, Betrag und Datum, und wer darauf
   klickte, traf nichts. Eine Zeile, die als Ganzes auf eine Datei
   zeigt, sollte auch als Ganzes anklickbar sein.

   Gelöst mit einer Fläche über der Zeile statt mit einem zweiten
   Verweis: verschachtelte Verweise gibt es in HTML nicht, und ein
   Skript braucht es dafür nicht. Der Verweis bleibt, was er ist —
   Tastatur und Vorlesegerät finden weiterhin genau einen. */
.reihe--geld .reihe__z{position:relative;
                       transition:background-color .3s var(--ease);}
.reihe--geld .reihe__z b > a::after{content:'';position:absolute;inset:0;}
.reihe--geld .reihe__z:hover{background:rgba(122,44,57,.05);}
.reihe--geld .reihe__z b > a{border-bottom:0;}
/* Der Dateiname darf nicht über der Fläche liegen, sonst schluckt
   er den Klick. */
.reihe--geld .reihe__z i{position:relative;z-index:-1;}
/* Der Knopf dagegen muss darüber liegen — er ist der einzige
   Punkt der Zeile, der etwas anderes tut als sie. */
.reihe__laden{position:relative;z-index:1;flex:none;
              font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
              text-transform:uppercase;color:var(--graphite);
              border:1px solid var(--line);border-radius:999px;padding:6px 12px 7px;
              transition:border-color .3s var(--ease),color .3s var(--ease),
                         background-color .3s var(--ease);}
.reihe__laden:hover{color:var(--ink);border-color:var(--ink);background:#fff;}

/* ── Die Akte ───────────────────────────────────────────────────
   Keine Kästen mehr. Eine Akte liest man von oben nach unten und
   fasst dabei drei Dinge an — also dieselben nummerierten
   Abschnitte wie überall sonst in der Verwaltung, und in ihnen
   Zeilen: links wofür, rechts womit.

   Ein Feld hat schon einen Rahmen. Ein Kasten darum ist der
   zweite, und bei neun Kästen nebeneinander sieht man nur noch
   Rahmen. */
.wegleiste{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(14px,1.8vh,20px) 0 0;}

/* Wo der Kunde steht — ein Satz, keine Kästchen. */
.akte__stand{font-family:var(--serif);font-size:clamp(15px,1.25vw,17.5px);
             line-height:1.5;margin:.5em 0 .25em;max-width:68ch;}
.akte__stand b{font-family:var(--grotesk);font-weight:500;letter-spacing:-.02em;}
.akte__nummern{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
               text-transform:uppercase;color:var(--graphite);margin:0;}

/* Eine Zeile Formular. Bei Enge bricht sie um, statt zu quetschen. */
.akte__z{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
         padding:13px 0;border-top:1px solid var(--line-soft);}
form:first-child > .akte__z:first-child,
.sec > form:first-of-type > .akte__z:first-child{border-top:0;}
.akte__wort{flex:0 0 clamp(120px,14vw,168px);font-family:var(--mono);font-size:10px;
            letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);}
.akte__werk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 320px;min-width:0;}
.akte__werk input,.akte__werk select{width:auto;flex:0 1 auto;padding:9px 12px;font-size:14px;}
.akte__werk input[name=stiftung],.akte__werk input[name=obhut]{max-width:7em;
                                                               font-family:var(--mono);}
.akte__werk select{max-width:26em;}
.akte__werk .btn{flex:none;}
.akte__dazu{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
            text-transform:uppercase;color:var(--graphite);flex:1 1 auto;text-align:right;}
.akte__dazu a{color:var(--graphite);border-bottom:1px solid var(--line);}
.akte__dazu a:hover{color:var(--oxblood);border-color:var(--oxblood);}

.akte__paar{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:1fr;}
@media(min-width:760px){ .akte__paar{grid-template-columns:1fr 1fr;} }

/* ── Eine Zeile je Kunde ────────────────────────────────────────
   Die Uebersicht klappte jeden Kunden nach unten auf. Jetzt fuehrt
   die Zeile auf seine Akte — also sieht sie auch aus wie ein Weg
   und nicht wie ein Deckel: derselbe Kasten, aber anklickbar im
   Ganzen, mit einem Pfeil am Ende. */
.eintrag--zeile{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
                text-decoration:none;color:inherit;flex-wrap:wrap;
                transition:border-color .4s var(--ease),background-color .4s var(--ease);}
.eintrag--zeile:hover{border-color:var(--ink);background:#fff;}
.eintrag--zeile .d3{margin:0;}
.eintrag__pfeil{margin-left:10px;font-style:normal;opacity:.5;}
.eintrag--zeile:hover .eintrag__pfeil{opacity:1;}

/* ── Datum auswaehlen ───────────────────────────────────────────
   Der Kalender des Betriebssystems sieht auf jedem Geraet anders
   aus und nirgends wie diese Seite. Also ein eigener — dieselbe
   Schrift, dieselben Linien, dasselbe Papier. */
.kal{position:relative;display:inline-flex;align-items:center;}
.kal__feld{padding-right:32px!important;}
.kal .kal__knopf{position:absolute;right:6px;top:50%;transform:translateY(-50%);
              display:flex;align-items:center;justify-content:center;
              width:24px;height:24px;border:0;background:none;cursor:pointer;
              color:var(--graphite);border-radius:5px;padding:0;}
.kal .kal__knopf:hover{color:var(--ink);background:rgba(122,44,57,.08);}
.kal__blatt{position:absolute;z-index:60;top:calc(100% + 7px);left:0;width:262px;
              background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
              box-shadow:0 18px 44px rgba(20,16,14,.13);padding:12px;}
.kal__blatt--hoch{top:auto;bottom:calc(100% + 7px);}
.kal__kopf{display:flex;align-items:center;justify-content:space-between;gap:6px;
             margin-bottom:9px;}
.kal__monat{font-family:var(--grotesk);font-weight:500;font-size:13.5px;
              letter-spacing:-.02em;}
.kal .kal__pfeil{border:1px solid var(--line);background:none;cursor:pointer;
              width:26px;height:26px;border-radius:6px;line-height:1;font-size:15px;
              color:var(--ink);display:flex;align-items:center;justify-content:center;}
.kal .kal__pfeil:hover:not(:disabled){background:rgba(122,44,57,.08);}
.kal .kal__pfeil:disabled{opacity:.3;cursor:default;}
.kal__woche,.kal__gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.kal__woche span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
                   text-transform:uppercase;color:var(--graphite);text-align:center;
                   padding-bottom:4px;}
.kal .kal__tag,.kal .kal__leer{height:30px;border-radius:6px;}
.kal .kal__tag{border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;
            color:var(--ink);font-variant-numeric:tabular-nums;}
.kal .kal__tag:hover:not(:disabled){background:rgba(122,44,57,.1);}
.kal .kal__tag:disabled{opacity:.25;cursor:default;}
.kal .kal__tag.ist-heute{box-shadow:inset 0 0 0 1px var(--line);}
.kal .kal__tag.ist-gewaehlt{background:var(--ink);color:var(--paper);}
.kal__fuss{display:flex;gap:6px;margin-top:9px;padding-top:9px;
             border-top:1px solid var(--line-soft);}
.kal .kal__fuss button{flex:1;border:1px solid var(--line);background:none;cursor:pointer;
                    font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
                    text-transform:uppercase;color:var(--graphite);padding:6px;
                    border-radius:6px;}
.kal .kal__fuss button:hover:not(:disabled){color:var(--ink);background:rgba(122,44,57,.07);}
.kal .kal__fuss button:disabled{opacity:.35;cursor:default;}

/* ── Wann geschaut wird ─────────────────────────────────────────
   Zwei Streifen aus Saeulen: Stunden des Tages und Wochentage. Kein
   Diagramm mit Achsen — die Frage dahinter ist nicht „wie viele um
   14 Uhr", sondern „wann lohnt es sich, erreichbar zu sein". Dafuer
   reicht die Form der Reihe. */
.wann{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);
      padding:clamp(14px,1.5vw,18px) clamp(16px,1.6vw,21px);}
.wann__lab{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
           text-transform:uppercase;color:var(--graphite);display:block;margin-bottom:8px;}
.wann__reihe{display:grid;gap:3px;align-items:end;height:74px;}
.wann__s{position:relative;display:flex;align-items:flex-end;height:100%;
         background:rgba(122,44,57,.05);border-radius:3px;}
.wann__s i{display:block;width:100%;height:var(--hoch,0%);min-height:2px;
           background:rgba(122,44,57,.42);border-radius:3px;
           transition:height .6s var(--ease-out);}
.wann__s--spitze i{background:rgba(122,44,57,.78);}
.wann__achse{display:grid;gap:3px;margin-top:6px;}
.wann__achse span{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
                  color:var(--graphite);text-align:center;font-variant-numeric:tabular-nums;}
.wann__satz{font-size:clamp(13px,1.05vw,14.5px);line-height:1.5;margin:0;}

/* ── 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(--graphite);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(--graphite);}

/* ── 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[data-datum]{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;width:9.4em;}
.zeitwahl input[data-datum]:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px;
          border-radius:4px;}
/* Im Band ist es eng, aber der Knopf bleibt: ein Feld, dem man
   nicht ansieht, dass ein Kalender dazugehört, ist ein Textfeld.
   Also derselbe Knopf, nur kleiner. */
.zeitwahl .kal__feld{padding-right:20px!important;}
.zeitwahl .kal__knopf{width:18px;height:18px;right:0;}
.zeitwahl .kal__knopf svg{width:12px;height:12px;}
.zeitwahl__bis{font-family:var(--mono);font-size:10.5px;color:var(--graphite);}
.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;}


/* ── Der Verlauf eines Eintrags ────────────────────────────
   Zugeklappt eine Zeile unter dem Formular; aufgeklappt bis zu
   fuenf fruehere Fassungen mit dem, was sich seither aenderte. */
.verlauf{margin:6px 0 clamp(18px,2.4vh,26px);padding:0 clamp(4px,.6vw,10px);}
.verlauf summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;}
.verlauf summary::-webkit-details-marker{display:none;}
.verlauf summary::before{content:"";width:0;height:0;border:4px solid transparent;border-left:5px solid var(--graphite);transition:transform .25s var(--ease);}
.verlauf[open] summary::before{transform:rotate(90deg);}
.verlauf__l{list-style:none;margin-top:10px;border-top:1px solid var(--line-soft);}
.verlauf__z{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(14px,1.6vw,22px);
            padding:10px 0;border-bottom:1px solid var(--line-soft);}
.verlauf__z .lab{flex:none;min-width:11em;}
.verlauf__was{flex:1 1 12em;font-size:13.5px;color:var(--graphite);}
.verlauf__z form{margin:0;flex:none;}
.btn--klein{padding:6px 12px;font-size:12px;}

/* Ausgeblendete Eintraege stehen da, aber leiser — sie sind nicht
   auf der Website, und das soll man sehen, ohne zu lesen. */
.eintrag--aus{opacity:.62;}
.eintrag--aus:hover,.eintrag--aus:focus-within{opacity:1;}
.eintrag__kopf .aus{color:var(--oxblood);text-transform:none;letter-spacing:.06em;}

/* ── Bilder: die Miniatur öffnet die Vorschau-Ebene (28.09.2026) ── */
.bild__auf{position:relative;display:block;cursor:zoom-in;overflow:hidden;}
.bild__auf .bild__b{transition:transform .6s var(--ease-out);}
.bild__auf:hover .bild__b{transform:scale(1.03);}
.bild__spiel{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
             border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 18px rgba(0,0,0,.25);}
.bild__spiel::after{content:"";position:absolute;left:18px;top:14px;
                    border-style:solid;border-width:9px 0 9px 14px;
                    border-color:transparent transparent transparent var(--ink);}
.bild__auf:has(.bild__spiel){cursor:pointer;}
/* Knopf „Herunterladen" oben rechts auf der Miniatur (28.09.2026). */
.bild{position:relative;}
.bild__laden{position:absolute;top:10px;right:10px;z-index:1;
             font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
             color:var(--ink);text-decoration:none;background:var(--paper);
             border:1px solid var(--line);border-radius:999px;padding:6px 11px 7px;
             box-shadow:0 2px 10px rgba(0,0,0,.12);
             transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease);}
.bild__laden:hover,.bild__laden:focus-visible{color:var(--bone);background:var(--ink);border-color:var(--ink);}
/* Schreiben Sie uns: Datenschutz-Hinweis und die Liste der
   gesendeten Nachrichten (28.09.2026). */
.post__ds{margin-top:.9em;font-style:normal;font-size:12.5px;line-height:1.55;max-width:74ch;
          color:var(--graphite);}
.post__ds b{color:var(--ink);font-weight:500;}
.post__ds a{text-decoration:underline;text-underline-offset:3px;}
.reihe--post .reihe__z em{width:auto;min-width:15.5em;white-space:nowrap;}
.reihe--post .reihe__z b i{display:block;margin-top:3px;font-size:14px;color:var(--graphite);}
.reihe--post .reihe__z > span{line-height:1.6;}
.reihe--post .post__da{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.12em;
                       color:var(--oxblood);}
.reihe--post .post__da::before{content:"✓ ";}
.reihe--post .ist-neu{background:rgba(122,44,57,.05);}
@media(max-width:700px){
  .reihe--post .reihe__z{flex-wrap:wrap;}
  .reihe--post .reihe__z > span{width:100%;text-align:left;}
}
@media(min-width:700px) and (max-width:1079px){ .kpi--vier{grid-template-columns:repeat(2,1fr);} }
/* Dokumente & Rechnungen: die vier Kästen stehen unter einer
   Überschrift — also dieselbe Breite wie sie, nicht die breitere
   der Übersicht (28.09.2026). */
.sec#ablage:has(> .kaesten--gross){--max:1240px;--edge:clamp(20px,6.2vw,104px);}
/* Kasten mit Knopf „Herunterladen" oben rechts (Dokumente & Rechnungen). */
.kaesten--gross > .kastenh{position:relative;display:flex;}
.kastenh > .kasten{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.kastenh__laden{top:clamp(14px,1.4vw,20px);right:clamp(14px,1.4vw,20px);z-index:1;}

/* ── Fächer (29.09.2026) ────────────────────────────────────────
   Dieselbe Sprache wie die Kacheln der Übersicht: Rand, Rundung,
   Papier. Für Seiten, auf denen man etwas liest oder ausfüllt —
   nicht anklickbar, also ohne Anheben beim Darüberfahren. */
.faecher{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,1.8vw,28px);align-items:stretch;}
@media(max-width:900px){ .faecher{grid-template-columns:1fr;} }
.fach{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-m);
       background:var(--paper);padding:clamp(22px,2.4vw,32px);}
.fach--breit{grid-column:1 / -1;}
.fach__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--graphite);}
.fach__titel{font-family:var(--grotesk);font-weight:500;letter-spacing:-.022em;
              font-size:clamp(20px,1.6vw,24px);margin:.45em 0 .35em;}
.fach__satz{font-size:14.5px;color:var(--graphite);line-height:1.5;margin:0 0 1.2em;max-width:60ch;min-height:1.5em;}
.fach__form{margin:0;}
.fach__zeilen{list-style:none;margin:0;padding:0;}
.fach__zeilen li{display:flex;justify-content:space-between;align-items:center;gap:16px;
                  padding:14px 0;border-top:1px solid var(--line-soft);}
.fach__zeilen li b{font-family:var(--grotesk);font-weight:500;letter-spacing:-.015em;font-size:15.5px;}
.fach__zeilen li span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
                       color:var(--graphite);text-align:right;display:inline-flex;align-items:center;gap:12px;}
.fach__zeilen li span a{color:var(--ink);}
.fach__zeilen li span .wie{font-style:normal;text-transform:none;letter-spacing:.06em;color:var(--ink);}
.fach__zeilen--anmeldung li span .wie{font-family:var(--grotesk);font-size:15.5px;font-weight:500;letter-spacing:-.005em;}
.fach__zeilen--anmeldung li span .wie--aktiv{font-family:var(--mono);font-size:9.5px;font-weight:400;
                                               letter-spacing:.16em;color:var(--oxblood);}
.fach__zeilen--anmeldung li span .wie--leer{font-family:var(--serif,Georgia,serif);font-weight:400;
                                              font-size:14px;color:var(--graphite);}
.fach__drei{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px;}
@media(max-width:760px){ .fach__drei{grid-template-columns:1fr;} }
.fach__fuss{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px;}
.fach__fuss .feld__hint{margin:0;max-width:56ch;}

/* ── Kleines Fenster über der Seite (29.09.2026) ────────────────
   Für Listen, die man ab und zu braucht, aber nicht ständig sehen
   muss — etwa den Verlauf unter „Schreiben Sie uns". */
.fenster{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:clamp(16px,4vw,48px);
         background:rgba(22,19,15,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.fenster[hidden]{display:none;}
.fenster__blatt{width:min(760px,100%);max-height:min(78vh,720px);display:flex;flex-direction:column;
                background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
                box-shadow:0 30px 70px -30px rgba(22,19,15,.55);overflow:hidden;}
.fenster__kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;
               padding:16px clamp(18px,2.2vw,26px);border-bottom:1px solid var(--line-soft);}
.fenster__zu{font:inherit;font-size:13px;border:0;background:none;cursor:pointer;color:var(--graphite);}
.fenster__zu:hover{color:var(--ink);}
.fenster__inhalt{overflow:auto;padding:4px clamp(18px,2.2vw,26px) 12px;}
.fenster__inhalt .reihe{border-top:0;}
.fenster__inhalt .reihe__z:last-child{border-bottom:0;}

/* Drei Karten in einer Reihe (Zugang, 29.09.2026) — kompakt, ohne
   Scrollen am Laptop. Schmal zwei, auf dem Telefon untereinander. */
.sec--eng{padding-block:clamp(16px,2vh,24px);}
@media(min-width:1100px){ .faecher--drei{grid-template-columns:repeat(3,1fr);} }
.faecher--drei .fach{padding:clamp(20px,2vw,28px);}
.faecher--drei .fach__zeilen li{padding:11px 0;}
.fach__felder .feld{margin-bottom:12px;}
.fach__felder .feld:last-child{margin-bottom:14px;}
.fach .fach__fuss .feld__hint{font-size:12.5px;}

/* Zugang (29.09.2026): zwei Karten oben, Passwort breit darunter —
   Felder und Knopf in einer Reihe, damit am Laptop nichts scrollt. */
.sec--eng .fach{padding:clamp(14px,1.3vw,18px) clamp(20px,2vw,28px);}
.sec--eng .fach__zeilen li{padding:11px 0;}
.fach__reihe{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:0 16px;align-items:end;}
.fach__reihe .feld{margin-bottom:0;}
.fach__reihe .btn{height:44px;white-space:nowrap;}
.fach__hinweis{margin:10px 0 0;font-size:12.5px;padding:0;}
@media(max-width:900px){ .fach__reihe{grid-template-columns:1fr;gap:12px;} .fach__reihe .btn{justify-self:start;} }

/* Ohne Zurück-Link darüber (der steht seit 29.09.2026 oben in der
   Leiste) braucht die Überschrift keinen Abstand nach oben mehr. */
main > section.wrap:first-child > h1.d2:first-child{margin-top:0 !important;}

/* ── Zurück (29.09.2026) ────────────────────────────────────────
   Ein runder Knopf, so hoch wie die Leiste. Beim Laden gleitet er
   von hinter der Marke nach links heraus und rastet mit einem
   kleinen Federn ein. Wo links kein Platz ist, sitzt er vor der
   Leiste in der Reihe. */
.nav__reihe{position:relative;width:min(940px,100%);pointer-events:none;display:flex;}
.nav__reihe > .nav__sheet{position:relative;z-index:1;width:100%;flex:1 1 auto;min-width:0;}
.nav__zurueck{position:absolute;z-index:0;right:calc(100% + 10px);top:0;
  width:clamp(46px,3.9vw,56px);height:clamp(46px,3.9vw,56px);border-radius:50%;
  display:grid;place-items:center;pointer-events:auto;color:var(--ink);
  background:var(--bone);border:1px solid var(--line);box-shadow:0 8px 26px -24px rgba(22,19,15,.5);
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
  animation:zurueckRaus .75s cubic-bezier(.2,.9,.25,1.18) .2s both;}
.nav__zurueck svg{width:18px;height:18px;transition:transform .35s var(--ease-out);}
.nav__zurueck:hover{border-color:var(--ink);background:var(--paper);}
.nav__zurueck:hover svg{transform:translateX(-3px);}
.nav__zurueck:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
@keyframes zurueckRaus{
  0%{transform:translateX(calc(100% + 22px)) scale(.5);opacity:0;}
  45%{opacity:1;}
  100%{transform:translateX(0) scale(1);opacity:1;}
}
@media(max-width:1100px){
  .nav__reihe{gap:8px;}
  .nav__zurueck{position:static;flex:none;animation-name:zurueckRausEng;}
}
@keyframes zurueckRausEng{
  0%{transform:translateX(28px) scale(.6);opacity:0;}
  100%{transform:translateX(0) scale(1);opacity:1;}
}
@media(prefers-reduced-motion:reduce){ .nav__zurueck{animation:none;} }

/* Zugang: Saum dicht unter der letzten Karte, damit am Laptop nichts
   scrollt (29.09.2026). */
.saum--eng{margin-top:clamp(6px,1vh,12px);padding-block:clamp(12px,1.6vh,18px);}
/* Sehr niedrige Fenster: die Einleitungssätze der Fächer weichen, damit
   Zugang auch dort ohne Scrollen passt (29.09.2026). */
@media(max-height:760px){ .sec--eng .fach__satz{display:none;} }

/* Zweizeilige Werte (Rechnungsanschrift): rechtsbündig, Zeilen dicht. */
.fach__zeilen li span{line-height:1.55;}

/* Schreiben Sie uns (29.09.2026): links das Formular breiter, rechts
   das Fach „So geht es weiter". */
@media(min-width:901px){ .faecher--zweidrittel{grid-template-columns:2fr 1fr;} }
.fach__form .wahl{margin-top:2px;}
.fach__form textarea{width:100%;}
.fach__knopf{font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line);}
.fach__knopf:hover{border-color:var(--oxblood);color:var(--oxblood);}
.fach__klein{margin-top:auto;padding-top:14px;}
.fenster__text{padding-top:14px;padding-bottom:18px;font-size:14px;line-height:1.6;color:var(--graphite);}
.fenster__text p{margin:0 0 .8em;max-width:62ch;}

/* Schreiben Sie uns (29.09.2026): die Fächer füllen die freie Höhe
   bis zum Saum — das Textfeld wächst mit, gescrollt wird nicht. */
main.main--fuellen{display:flex;flex-direction:column;}
main.main--fuellen > .sec--fuellen{flex:1 1 auto;display:flex;flex-direction:column;}
.sec--fuellen > .faecher{flex:1 1 auto;}
.sec--eng.sec--fuellen .fach{padding:clamp(22px,2.4vw,32px);}
.sec--fuellen .fach__titel{font-size:clamp(22px,1.8vw,27px);}
.sec--fuellen .fach__form{flex:1 1 auto;display:flex;flex-direction:column;}
.sec--fuellen .feld--text{flex:1 1 auto;display:flex;flex-direction:column;}
.sec--fuellen .feld--text textarea{flex:1 1 auto;min-height:130px;resize:none;font-size:15.5px;line-height:1.55;}
.sec--fuellen .fach__zeilen li{padding:14px 0;}
/* Die fünf Anliegen in einer Reihe, auch mit dem größeren Fach. */
.sec--fuellen .fach__form .wahl{gap:6px;}
.sec--fuellen .fach__form .wahl__z span{padding-inline:14px;}
/* Die fünf Anliegen (29.09.2026): immer eine volle Reihe, die sich die
   Breite teilt — nie vier und einer allein. Wird das Fach zu schmal,
   gleichmäßig drei und zwei. */
.sec--fuellen .fach__form{container-type:inline-size;}
.sec--fuellen .fach__form .wahl{display:flex;flex-wrap:nowrap;gap:6px;}
.sec--fuellen .fach__form .wahl__z{flex:1 1 auto;min-width:0;display:flex;}
.sec--fuellen .fach__form .wahl__z span{flex:1 1 auto;justify-content:center;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;padding-inline:clamp(8px,1vw,14px);}
@container (max-width:560px){
  .sec--fuellen .fach__form .wahl{display:grid;grid-template-columns:repeat(6,1fr);}
  .sec--fuellen .fach__form .wahl__z{grid-column:span 2;}
  .sec--fuellen .fach__form .wahl__z:nth-child(n+4){grid-column:span 3;}
}
/* Die Bezeichnungen in den Fächern brechen nicht um (Antwort an …). */
.fach__zeilen li b{white-space:nowrap;}

/* ── Postfächer (29.09.2026) ────────────────────────────────── */
.pf-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;}
main > section.wrap:first-child > .pf-kopf:first-child > h1.d2{margin-top:0!important;}
/* Postfächer: rechts braucht die Adresse samt Domain Platz. */
@media(min-width:901px){ .faecher--postfach{grid-template-columns:3fr 2fr;} }
.pf-vorschau{display:inline-flex;align-items:center;gap:8px;margin:0 0 .55em;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--oxblood);border:1px solid var(--line);
  border-radius:999px;padding:7px 12px;background:var(--paper);}
.pf-vorschau .dot{width:6px;height:6px;background:var(--oxblood);}
.pf-plaetze{display:flex;gap:6px;margin:0 0 14px;}
.pf-plaetze i{display:block;height:4px;flex:1 1 0;border-radius:4px;background:var(--line);}
.pf-plaetze i.ist-belegt{background:var(--ink);}
.fach__zeilen--postfach li b{display:flex;flex-direction:column;gap:2px;}
.fach__zeilen--postfach li b small{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:13.5px;
  letter-spacing:0;color:var(--graphite);}
.fach__zeilen--postfach li > span{gap:14px;}
.pf-an{display:inline-flex;align-items:center;gap:6px;font-style:normal;color:#2F6B4F;}
.pf-an .dot{width:6px;height:6px;background:#2F6B4F;}
/* Adresse und Domain in einem Feld: getippt wird nur der Teil vor dem @. */
.pf-adresse{display:flex;align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-s);transition:border-color .4s var(--ease),background-color .4s var(--ease);}
.pf-adresse:focus-within{border-color:var(--ink);background:#fff;}
.pf-adresse input[type=text]{flex:1 1 0;width:auto;min-width:4.5em;border:0;background:transparent;padding-right:2px;}
.pf-adresse input[type=text]:focus{background:transparent;}
.pf-adresse span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;padding-right:15px;
  font-family:var(--grotesk);font-size:15.5px;color:var(--graphite);white-space:nowrap;}
.fach__form .feld{margin-bottom:10px;}
.fach__form .feld > label{margin-bottom:6px;}
.pf-label{display:flex!important;justify-content:space-between;align-items:baseline;gap:12px;}
.pf-label em{font-family:var(--serif,Georgia,serif);font-size:12.5px;letter-spacing:0;text-transform:none;
  font-style:italic;color:var(--graphite);text-align:right;}
.fach__form .fach__fuss{margin-top:6px;}
.pf-frei b{font-family:var(--serif,Georgia,serif)!important;font-weight:400!important;font-style:italic;
  color:var(--graphite);letter-spacing:0!important;}
.pf-frei label.fach__knopf{cursor:pointer;}
.pf-titelzeile{display:flex;justify-content:space-between;align-items:baseline;gap:6px 24px;flex-wrap:wrap;}
.pf-titelzeile .feld__hint{margin:0 0 .35em;font-size:12.5px;}
.pf-einrichten{display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px;}
@media(max-width:900px){ .pf-einrichten{grid-template-columns:1fr 1fr;gap:14px 18px;} }
.pf-einrichten > div{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--line-soft);}
.pf-einrichten span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);}
.pf-einrichten b{font-family:var(--grotesk);font-weight:500;font-size:15.5px;letter-spacing:-.01em;}
.pf-einrichten b a{color:var(--ink);}
.pf-einrichten small{font-size:13px;color:var(--graphite);}
.pf-fenster{padding-top:6px;padding-bottom:18px;}
.pf-fenster form{padding:14px 0;}
.pf-fenster form + form{border-top:1px solid var(--line-soft);}
.pf-fenster h4{font-family:var(--grotesk);font-weight:500;font-size:16px;margin:0 0 8px;}
.pf-fenster p{font-size:13.5px;color:var(--oxblood);margin:0 0 10px;}
.pf-reihe{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;}
.pf-reihe .feld{margin:0;}
.pf-reihe .btn{height:44px;white-space:nowrap;}
@media(max-width:560px){ .pf-reihe{grid-template-columns:1fr;} .pf-reihe .btn{justify-self:start;} }
.pf-summe{margin-bottom:0;font-size:12.5px;}
/* Postfächer auf niedrigen Laptops (1280×800): etwas dichter, damit
   auch dort nichts scrollt. */
@media(min-width:901px) and (max-height:860px){
  .faecher--postfach .fach__titel{margin:.3em 0 .25em;}
  .faecher--postfach .fach__form input[type=text],
  .faecher--postfach .fach__form input[type=password]{padding-block:10px;}
  .faecher--postfach .pf-einrichten > div{padding-top:9px;}
  .faecher--postfach .fach__zeilen li{padding:9px 0;}
}
/* Postfächer auf dem Telefon: Adresse oben, Größe und Knopf darunter. */
.pf-einrichten > div{min-width:0;}
.pf-einrichten small{overflow-wrap:anywhere;}
@media(max-width:560px){
  .fach__zeilen--postfach li{flex-wrap:wrap;gap:6px 16px;}
  .fach__zeilen--postfach li b{white-space:normal;overflow-wrap:anywhere;min-width:0;}
  .fach__zeilen--postfach li > span{width:100%;justify-content:flex-start;}
  .fach__zeilen--postfach li > span .fach__knopf{margin-left:auto;}
  .fach__zeilen--postfach li.pf-frei > span{width:auto;}
  .pf-einrichten{grid-template-columns:1fr;gap:12px;}
}

/* Überschrift links, ein Knopf rechts auf ihrer Grundlinie (29.09.2026). */
.seitenkopf{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;}
.infoknopf{display:inline-flex;align-items:center;gap:10px;margin:0 0 .5em;padding:5px 15px 5px 5px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .4s var(--ease-out);}
.infoknopf i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--ink);color:var(--bone);font-family:var(--serif);font-style:italic;font-size:15px;
  letter-spacing:0;text-transform:none;line-height:1;transition:background-color .3s var(--ease);}
.infoknopf:hover{border-color:var(--ink);background:#fff;box-shadow:0 8px 22px -14px rgba(22,19,15,.45);}
.infoknopf:hover i{background:var(--oxblood);}
.infoknopf:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* ── Zuletzt geändert im Redaktionssystem (29.09.2026) ─────────── */
.zverlauf{position:absolute;inset:14px;margin:0;z-index:21;display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(128,128,128,.22);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.06);}
.zverlauf[hidden]{display:none;}
.zverlauf__kopf{flex:none;display:flex;align-items:center;gap:16px;padding:12px clamp(14px,2vw,22px);
  border-bottom:1px solid var(--line-soft);}
.zverlauf__zurueck{display:inline-flex;align-items:center;gap:10px;font:inherit;font-family:var(--grotesk);
  font-size:14px;font-weight:500;color:var(--ink);background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:4px 16px 4px 4px;cursor:pointer;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);}
.zverlauf__zurueck i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--bone);font-style:normal;font-size:15px;transition:background-color .3s var(--ease);}
.zverlauf__zurueck:hover{border-color:var(--ink);background:#fff;}
.zverlauf__zurueck:hover i{background:var(--oxblood);}
.zverlauf__titel{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--graphite);}
.zverlauf__inhalt{flex:1 1 auto;min-height:0;overflow:auto;padding:0 clamp(16px,2.6vw,32px) clamp(18px,2.6vw,32px);}
.voll__verlauf.ist-an,.voll__verlauf.ist-an:hover{background:#1d1d1f;color:#fff;border-color:#1d1d1f;}

.vl{max-width:820px;margin:0 auto;padding-top:clamp(18px,2.6vw,32px);}
.vl__raus{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  padding:12px 16px;margin:0 0 26px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  font-size:14px;color:var(--graphite);}
.vl__raus button{font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);padding:0;cursor:pointer;}
.vl__raus button:hover{color:var(--oxblood);border-color:var(--oxblood);}
/* Die Tage deutlich getrennt (29.09.2026): eigene Überschrift mit
   kräftiger Linie, viel Luft davor, beim Scrollen oben stehend. */
.vl__tag + .vl__tag{margin-top:clamp(34px,4.4vh,48px);}
.vl__tag h3{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin:0;padding:14px 0 10px;background:#fff;border-bottom:1.5px solid var(--ink);
  font-family:var(--grotesk);font-weight:500;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.018em;color:var(--ink);}
.vl__tag h3 em{font-style:normal;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--graphite);white-space:nowrap;}
.vl__tag li:first-child{border-top:0;}
.vl__tag ul{list-style:none;margin:0;padding:0;}
.vl__tag li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--line-soft);}
.vl__tag time{font-family:var(--mono);font-size:12px;color:var(--graphite);padding-top:2px;font-variant-numeric:tabular-nums;}
.vl__tag b{font-family:var(--grotesk);font-weight:500;font-size:15.5px;letter-spacing:-.01em;}
.vl__tag b em{font-style:normal;font-weight:400;color:var(--graphite);}
.vl__tag p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;}
.vl__tag small{display:block;margin-top:5px;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--oxblood);}
.vl__folge{margin:10px 0 2px;padding:2px 0 2px 12px;border-left:2px solid rgba(122,44,57,.45);}
.vl__folge span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--oxblood);}
.vl__folge p{color:var(--graphite);}
.vl__leer{color:var(--graphite);font-size:14.5px;}
@media(max-width:600px){ .zverlauf__titel{display:none;} .zverlauf__zurueck{white-space:nowrap;} .vl__tag li{grid-template-columns:42px 1fr;gap:12px;} }

/* Marken im Verlauf (29.09.2026): veröffentlicht, noch offen, zurückgenommen. */
.vl__tag li.vl__marke{align-items:center;padding:10px 0;}
.vl__marke span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;}
.vl__marke span i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.vl__marke--veroeffentlicht span{background:rgba(47,107,79,.1);color:#2F6B4F;}
.vl__marke--offen span{background:rgba(122,44,57,.08);color:var(--oxblood);letter-spacing:.08em;}
.vl__marke--zurueckgenommen span{background:rgba(22,19,15,.06);color:var(--graphite);}

/* Stand je Nachricht (29.09.2026): Eingegangen · In Arbeit · Erledigt */
.post__stand{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;}
.post__stand i{font-style:normal;color:rgba(22,19,15,.3);}
.post__stand i.ist-durch{color:var(--graphite);}
.post__stand i.ist-hier{color:var(--bone);background:var(--ink);padding:3px 8px;border-radius:999px;}
.post__stand--in_arbeit i.ist-hier{background:var(--oxblood);}
.post__stand--erledigt i.ist-hier{background:#2F6B4F;}
.post__stand b{font-weight:400;color:rgba(22,19,15,.25);}
@media(max-width:700px){ .post__stand{margin:6px 0 0;display:flex;} }

/* Hinweise auf der Startseite (29.09.2026): rot neben der Nummer. */
.kasten__kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.kasten__neu{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 9px;border-radius:999px;
  background:rgba(122,44,57,.09);color:var(--oxblood);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;}
.kasten__neu i{width:7px;height:7px;border-radius:50%;background:var(--oxblood);flex:none;
  box-shadow:0 0 0 3px rgba(122,44,57,.16);animation:neuPuls 2.4s ease-in-out infinite;}
@keyframes neuPuls{50%{box-shadow:0 0 0 5px rgba(122,44,57,.04);}}
@media (prefers-reduced-motion:reduce){ .kasten__neu i{animation:none;} }

/* ── Verwaltung (admin.notera.studio), seit 29.09.2026 ───────────
   Dieselben Kacheln wie im Kundenportal (.kasten, .kaesten--gross);
   hier steht nur, was die Verwaltung zusätzlich braucht. Alles mit
   dem Präfix vw-, damit es nichts im Portal berührt. */
.vw-knopf{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;}
.vw-knopf:focus-visible,.vw-kunde:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px;}
.vw-kunde[hidden]{display:none;}
.vw-werkzeug{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
      gap:12px 18px;margin:clamp(18px,2.4vh,26px) 0 clamp(18px,2.4vh,26px);}
.vw-werkzeug .suche{flex:0 1 340px;}
.vw-fenster{width:min(560px,100%);}
.vw-neu{display:grid;gap:18px;padding:14px 0 12px;}
.vw-neu__satz{font-size:14px;line-height:1.55;color:var(--graphite);margin:0;}
.vw-neu__felder{display:grid;gap:14px;}
@media(min-width:620px){ .vw-neu__felder{grid-template-columns:1fr 1fr;}
  .vw-neu__felder .feld:first-child{grid-column:1 / -1;} }
.vw-neu .btn{justify-self:start;}
/* Die Kundenseite ist so breit wie ihre Kacheln — sonst stand der
   Kopf eingerückt über einem Raster, das bis an den Rand geht. */
.vw-breit{--max:1400px;--edge:clamp(20px,4vw,64px);}
.vw-kunde .kasten__n{white-space:nowrap;flex:none;}
/* Die Akte: jeder Abschnitt in einem Fenster über der Seite. Breiter
   als die kleinen Fenster des Portals — dort stehen ganze Formulare. */
.vw-akte-fenster{width:min(1060px,100%);max-height:min(88vh,980px);}
.vw-akte-fenster .fenster__inhalt{padding-top:10px;padding-bottom:22px;}
.vw-akte-fenster .fenster__inhalt > :first-child{margin-top:0;}
/* Posteingang: eine Karte je Nachricht, eine Spalte — gelesen wird
   von oben nach unten, nicht quer über ein Raster. */
.vw-postliste{display:grid;gap:14px;max-width:860px;}
.vw-post{border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);
      padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,26px);display:grid;gap:12px;scroll-margin-top:110px;}
.vw-post--neu{border-color:rgba(122,44,57,.45);}
.vw-post__kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.vw-post__wer{font-family:var(--grotesk);font-weight:500;letter-spacing:-.018em;font-size:clamp(17px,1.4vw,20px);}
.vw-post__wer:hover{text-decoration:underline;text-underline-offset:3px;}
.vw-post__wann{margin-left:auto;color:var(--graphite);}
.vw-post__text{white-space:pre-wrap;font-size:15px;line-height:1.55;margin:0;overflow-wrap:anywhere;}
.vw-post__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
.vw-stand button{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
      padding:7px 14px 8px;border-radius:999px;border:0;background:none;color:var(--graphite);cursor:pointer;
      white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease);}
@media(hover:hover){ .vw-stand button:hover{color:var(--ink);background:rgba(22,19,15,.05);} }
.vw-post__antwort:hover{color:var(--ink);}
@media(max-width:560px){ .vw-post__wann{margin-left:0;flex-basis:100%;} }
/* Rechnungen: kleine Handgriffe in der Zeile — bezahlt, mailen, stornieren. */
.vw-re{display:inline-flex;flex-wrap:wrap;gap:4px 12px;margin-left:10px;}
.vw-re__form{display:inline;}
.vw-re__knopf{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
      border:0;background:none;padding:0;cursor:pointer;color:var(--graphite);
      text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--stone);}
.vw-re__knopf:hover{color:var(--ink);text-decoration-color:var(--oxblood);}
/* Spur und Anmeldungen: Filterreihe und Kennzahlen. */
.vw-kpi{margin-top:clamp(18px,2.4vh,26px);}
.vw-tests{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--stone);}
.vw-tests:hover{color:var(--ink);text-decoration-color:var(--oxblood);}
.vw-filter select{font:inherit;font-size:14px;padding:8px 12px;border-radius:999px;
      border:1px solid var(--line);background:var(--paper);color:var(--ink);max-width:260px;}
/* Verwaltung auf dem Telefon: Filterleisten brechen um, und die
   rechte Spalte der Listen (Uhrzeit, Adresse, Stand) rutscht unter
   die Zeile, statt die Seite seitlich aufzuschieben. */
@media(max-width:700px){
  .main--verwaltung .segment{flex-wrap:wrap;max-width:100%;border-radius:18px;}
  .main--verwaltung .wahlreihe{flex-wrap:wrap;}
  .main--verwaltung .reihe__z{flex-wrap:wrap;row-gap:4px;}
  .main--verwaltung .reihe__z b{flex:1 1 60%;min-width:0;overflow-wrap:anywhere;}
  .main--verwaltung .reihe__z span{flex:1 1 100%;white-space:normal;overflow-wrap:anywhere;}
  .main--verwaltung .vw-re{margin-left:0;}
  .main--verwaltung .vw-filter select{max-width:100%;}
}
/* Akte auf dem Telefon: die Zusatzangabe einer Zeile (Stand, Nachrichtentext) linksbündig unter das Feld. */
@media(max-width:700px){ .main--verwaltung .akte__dazu{text-align:left;justify-self:start;} }