@font-face{font-family:"Klavika";src:url("/ci/schrift/klavika-400.woff2") format("woff2");
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Klavika";src:url("/ci/schrift/klavika-700.woff2") format("woff2");
           font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Tisa";src:url("/ci/schrift/tisa-400.woff2") format("woff2");
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Tisa";src:url("/ci/schrift/tisa-400i.woff2") format("woff2");
           font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Tisa";src:url("/ci/schrift/tisa-700.woff2") format("woff2");
           font-weight:700;font-style:normal;font-display:swap}

/* ── Token: i.a.c. ist die Grundstellung, Tu.R überschreibt sechs Werte ── */
:root{
  /* Die Anwendung ist hell. Ohne diese Zeile faerbt der Browser Auswahlfelder,
     Rollbalken und Datumswaehler nach der Systemeinstellung dunkel ein — mitten in
     eine helle Seite hinein. */
  color-scheme:light;

  --ui:"Klavika",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --lese:"Tisa",Georgia,"Times New Roman",serif;

  --akzent:#0074BD; --akzent-tief:#005A94; --akzent-weich:#E7F2FA; --auf-akzent:#fff;
  --zweit:#008ED1; --auf-zweit:#0A1A22; --dritt:#008ED1;
  --leiste:#0074BD; --leiste-text:#F0F7FD;
  --grund:#F5F8FA; --flaeche:#fff; --linie:#DCE6ED; --linie-zart:#EDF3F7;
  --text:#122430; --leise:#5C6E7C;

  --gut:#2C7A45; --gut-w:#E7F3EB;
  --pruef:#8A5D06; --pruef-w:#FBF0DC;
  --stopp:#A62F2F; --stopp-w:#F9E9E9;

  --r:10px; --r-s:6px; --r-l:16px;
  --hebung:0 1px 2px rgb(18 36 48/.05), 0 10px 30px -16px rgb(18 36 48/.28);
}
:root[data-marke="tur"]{
  --akzent:#842351; --akzent-tief:#6A1B41; --akzent-weich:#F7ECF1; --auf-akzent:#fff;
  --zweit:#EB6A0A; --auf-zweit:#23140A; --dritt:#F7AA00;
  --leiste:#842351; --leiste-text:#F0DCE6;
  --grund:#FAF6F8; --flaeche:#fff; --linie:#E9DBE2; --linie-zart:#F4ECEF;
  --text:#22171D; --leise:#6D5A63;
}
/* ── Dunkelmodus: gebaut, aber ABGESCHALTET ──
   Hing bis 05.08. an `@media (prefers-color-scheme:dark)` und war damit fuer jeden aktiv,
   dessen Betriebssystem dunkel steht. Das war falsch: die Token schalten den TEXT um,
   die Bestandsseiten setzen ihre Flaechen aber weiter fest auf `#fff`, `#eaf4fc`, `#f4f6fa`.
   Ergebnis war helle Schrift auf hellem Grund — auf `/builder` mit Kontrast 1,16, also
   unsichtbar. Von Henrik gemeldet.

   Die Werte bleiben stehen, nur der Ausloeser ist ein ausdruecklicher Schalter statt der
   Systemeinstellung. Anschalten erst, wenn die Flaechen der Bestandsseiten auf Token
   umgestellt sind — sonst kehrt genau dieser Fehler zurueck. Umschalten heisst dann:
   diesen Block wieder in die Medienabfrage setzen.

   Merke fuers naechste Mal: ein modusabhaengiger Textton und eine fest verdrahtete Flaeche
   sind ein Widerspruch. Entweder beide aus Token, oder keins von beiden. */
:root[data-farbe="dunkel"]{
  --akzent:#4FA6DC; --akzent-tief:#7CC1EC; --akzent-weich:#0E2939; --auf-akzent:#06131C;
  --zweit:#43B3E4; --auf-zweit:#05141C; --dritt:#43B3E4;
  --leiste:#004E80; --leiste-text:#CFE6F5;
  --grund:#0A131A; --flaeche:#101C25; --linie:#223646; --linie-zart:#192A36;
  --text:#E6EFF5; --leise:#96AAB8;
  --gut:#7FC98C; --gut-w:#11241A; --pruef:#DFB264; --pruef-w:#292013;
  --stopp:#E88C8C; --stopp-w:#2B1717;
  --hebung:0 1px 2px rgb(0 0 0/.5), 0 12px 34px -18px rgb(0 0 0/.8);
}
/* Zwei Bedingungen, nicht eine: der Tu.R-Dunkelsatz gilt NUR zusammen mit dem Schalter.
   Stuende hier `:root[data-marke="tur"]` allein, faerbte er jede Tu.R-Seite dunkel — auch
   im hellen Modus. Genau das ist mir beim Abschalten kurz passiert. */
:root[data-farbe="dunkel"][data-marke="tur"]{
  --akzent:#DB8CB2; --akzent-tief:#EAB0CA; --akzent-weich:#2B1621; --auf-akzent:#1A0D14;
  --zweit:#F5893A; --auf-zweit:#22120A; --dritt:#F7B838;
  --leiste:#5C1739; --leiste-text:#F0D3E0;
  --grund:#120C10; --flaeche:#1B1319; --linie:#382A31; --linie-zart:#271C22;
  --text:#F2E8ED; --leise:#B39CA8;
}

*{box-sizing:border-box}
/* Grundschrift ist Klavika. Tisa ist eine SERIFENSCHRIFT und gehoert auf Lesestrecken
   (Handbuchartikel, Zielbeschreibungen), nicht in Formulare, Tabellen und Hilfetexte —
   dort wirkt sie schwer und altbacken. Lesestrecken bekommen `.lesetext`. */
body{margin:0;background:var(--grund);color:var(--text);
     font:400 15px/1.55 var(--ui);-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility}
.lesetext{font-family:var(--lese);font-size:1.03rem;line-height:1.72;max-width:64ch}
.lesetext p{margin:0 0 .85em}
.lesetext li{margin:.3em 0;line-height:1.65}
/* Ueberschriften bleiben Klavika: die Struktur soll scannbar bleiben, der Text lesbar. */
.lesetext h1,.lesetext h2,.lesetext h3,.lesetext h4{font-family:var(--ui)}
/* Bewusst OHNE color: es gibt Seiten mit weisser Ueberschrift auf dunklem Kopfbereich.
   Eine globale Textfarbe hier macht die unlesbar — beim ersten Anlauf genau passiert. */
h1,h2,h3,h4{font-family:var(--ui);font-weight:700;margin:0;text-wrap:balance;
            letter-spacing:-.005em}
h1{font-size:clamp(1.5rem,1.2rem+1vw,1.95rem);line-height:1.15;margin:4px 0 2px}
h2{font-size:1.15rem;line-height:1.25;margin:0 0 10px}
h3{font-size:1rem;line-height:1.3}
a{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:3px}

/* ── Anwendungsleiste ── */
.nav-bar{background:var(--leiste);display:flex;align-items:center;gap:2px;padding:0 20px;
         min-height:48px;position:sticky;top:0;z-index:100;flex-wrap:wrap}
.nav-bar .brand{font:700 1.02rem var(--ui);color:#fff;margin-right:18px;letter-spacing:.005em}
.nav-links{display:flex;align-items:center;gap:2px;flex:1;flex-wrap:wrap}
.nav-bar a{font:500 .82rem var(--ui);color:var(--leiste-text);text-decoration:none;
           padding:6px 11px;border-radius:var(--r-s);transition:background .15s,color .15s}
.nav-bar a:hover{background:rgb(255 255 255/.12);color:#fff}
.nav-bar a.active{background:rgb(255 255 255/.18);color:#fff;font-weight:700}
.nav-bar .spacer{flex:1}
.nav-bar .logout-link{color:rgb(255 255 255/.6)!important;font-size:.8rem}
.nav-hamburger{display:none;background:none;border:0;color:#fff;font-size:1.35rem;
               cursor:pointer;margin-left:auto;padding:6px 9px;line-height:1}
@media(max-width:980px){
  .nav-links{display:none;flex-direction:column;width:100%;padding:6px 0 12px;
             align-items:flex-start;gap:2px}
  .nav-links.open{display:flex}
  .nav-hamburger{display:block}
  .nav-bar .spacer{display:none}
  .nav-bar a{width:100%;padding:9px 12px}
}
/* Markenstreifen: bei Tu.R das Logo-Trio, bei i.a.c. Blau und Cyan.
   Drei Pixel, die die Anwendung ohne Logo unverwechselbar machen. */
.marken-streifen{height:2px;display:flex;position:sticky;top:48px;z-index:99}
.marken-streifen i{display:block;flex:1}
.marken-streifen i:nth-child(1){background:var(--akzent)}
.marken-streifen i:nth-child(2){background:var(--zweit)}
.marken-streifen i:nth-child(3){background:var(--dritt)}
:root:not([data-marke="tur"]) .marken-streifen i:nth-child(3){display:none}

/* ── Zustandsmarken: Farbe UND Form UND Wort ──
   Der Streifen trägt dieselbe Information wie die Farbe. Damit funktioniert es bei
   Rot-Grün-Schwäche und im Vorlesemodus, anders als ein Häkchen-Emoji. */
.marke-pille{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
             border-radius:999px;font:700 .74rem var(--ui);white-space:nowrap}
.marke-pille::before{content:"";width:3px;height:11px;border-radius:2px;background:currentColor}
.marke-pille.gut{background:var(--gut-w);color:var(--gut)}
.marke-pille.pruef{background:var(--pruef-w);color:var(--pruef)}
.marke-pille.stopp{background:var(--stopp-w);color:var(--stopp)}
.marke-pille.ruhe{background:var(--linie-zart);color:var(--leise)}

/* ── Knöpfe ── */
.knopf{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
       border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;
       font:700 .87rem var(--ui);padding:9px 18px;text-decoration:none;
       background:var(--akzent);color:var(--auf-akzent);
       transition:background .15s,transform .1s}
.knopf:hover{background:var(--akzent-tief)}
.knopf:active{transform:translateY(1px)}
.knopf:disabled{background:var(--linie);color:var(--leise);cursor:not-allowed}
.knopf-rand{background:transparent;color:var(--akzent);border-color:var(--linie)}
.knopf-rand:hover{background:var(--akzent-weich);border-color:var(--akzent)}
/* Zweitfarbe als Fläche mit dunklem Text — weiß darauf wäre zu kontrastarm. */
.knopf-zweit{background:var(--zweit);color:var(--auf-zweit);border-color:transparent}
.knopf-zweit:hover{filter:brightness(.93);background:var(--zweit)}
.knopf-klein{padding:6px 13px;font-size:.8rem}

/* ── Flächen ── */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
       padding:18px 20px}
.hinweis{font-size:.82rem;color:var(--leise);margin-top:5px}
.melde-ok{background:var(--gut-w);border-left:3px solid var(--gut);padding:10px 14px;
          border-radius:0 var(--r-s) var(--r-s) 0;color:var(--gut);font-size:.9rem}
.melde-pruef{background:var(--pruef-w);border-left:3px solid var(--pruef);padding:10px 14px;
             border-radius:0 var(--r-s) var(--r-s) 0;color:var(--pruef);font-size:.9rem}
.melde-stopp{background:var(--stopp-w);border-left:3px solid var(--stopp);padding:10px 14px;
             border-radius:0 var(--r-s) var(--r-s) 0;color:var(--stopp);font-size:.9rem}

/* ── Formulare: Beschriftung ÜBER dem Feld, Hinweis darunter ── */
label{display:block;font:700 .72rem var(--ui);letter-spacing:.05em;text-transform:uppercase;
      color:var(--leise);margin:12px 0 5px}

/* Ein Hinweissatz IN einer Beschriftung ist keine Beschriftung.
   Ohne diese Ruecknahme stand im Social-Generator ein ganzer Absatz in Versalien:
   „BILDER & VIDEOS HOCHLADEN (OPTIONAL) MEHRERE BILDER MOEGLICH (KARUSSELL) — DIE KI
   ANALYSIERT SIE FUER BESSERE TEXTE…". Die Versalien sind fuer kurze Feldnamen gedacht. */
label .formats,label .hinweis,label small,label .unter,label .zweck{
  display:block;text-transform:none;letter-spacing:normal;font-weight:400;
  font-size:.8rem;color:var(--leise);margin-top:4px;line-height:1.5}

/* Eine Beschriftung MIT Haken oder Auswahlknopf darin ist ein Satz, den man liest,
   kein Feldname, den man ueberfliegt. Steht sonst als Versalienblock da. */
label:has(input[type=checkbox]),label:has(input[type=radio]){
  text-transform:none;letter-spacing:normal;font-weight:400;font-size:.9rem;
  color:var(--text);line-height:1.55;display:flex;align-items:flex-start;gap:8px}
label:has(input[type=checkbox]) input,label:has(input[type=radio]) input{
  margin-top:.25em;flex-shrink:0}
input[type=text],input[type=search],input[type=url],input[type=date],input[type=number],
input[type=email],input[type=password],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--linie);border-radius:var(--r-s);
  background:var(--flaeche);color:var(--text);font:400 .93rem var(--ui)}
textarea{min-height:80px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--akzent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 18%, transparent)}
::placeholder{color:color-mix(in srgb,var(--leise) 76%, transparent)}

/* ── Tabellen ──
   BEWUSST auf .tabelle-huelle beschraenkt und NICHT global auf table/th/td.
   Eine globale Zellenpolsterung macht bestehende Tabellen breiter als ihren Kasten —
   in der Eigenbeleg-Uebersicht war dadurch die PDF-Spalte abgeschnitten. Bestandsseiten
   behalten ihre eigene Tabellengestaltung, neue nutzen diesen Baustein. */
.tabelle-huelle{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r);
                background:var(--flaeche)}
.tabelle-huelle table{border-collapse:collapse;width:100%;font-size:.9rem}
.tabelle-huelle th{text-align:left;font:700 .7rem var(--ui);letter-spacing:.06em;
   text-transform:uppercase;color:var(--leise);padding:11px 14px;
   border-bottom:1px solid var(--linie);white-space:nowrap}
.tabelle-huelle td{padding:11px 14px;border-bottom:1px solid var(--linie-zart);
   vertical-align:middle}
.tabelle-huelle tbody tr:last-child td{border-bottom:0}
td.zahl,.zahl{font-variant-numeric:tabular-nums}
/* Rettungsnetz: eine Tabelle darf die Seite nie seitlich schieben. */
table{max-width:100%}

.wrap,.page-wrap{max-width:1120px;margin:0 auto;padding:24px 20px 90px}
.leer{border:1px dashed var(--linie);border-radius:var(--r);padding:26px;text-align:center;
      color:var(--leise);background:var(--flaeche)}
.leer strong{display:block;color:var(--text);margin-bottom:4px}

/* ── Seitenkopf ──
   Titel, ein Satz Zweck, Haarlinie. Bewusst OHNE farbigen Balken: zwei kraeftige
   Flaechen uebereinander (Leiste + Kopfbalken) waren der Haupteindruck von „alt". */
.seiten-kopf{margin:4px 0 22px}
.seiten-kopf h1{font:700 1.5rem var(--ui);color:var(--text);margin:0 0 4px;
                letter-spacing:-.01em}
.seiten-kopf .zweck{color:var(--leise);font-size:.93rem;margin:0 0 14px;max-width:70ch}
.seiten-kopf::after{content:"";display:block;height:1px;background:var(--linie)}
.kopf-zeile{display:flex;align-items:flex-start;justify-content:space-between;
            gap:16px;flex-wrap:wrap}

/* ── Kachelgitter: die Werkzeuge einer Person ──
   Eine Kachel ist als GANZES anklickbar. Ein Titel-Link mit totem Kasten drumherum
   ist die haeufigste Enttaeuschung in solchen Uebersichten. */
.kachel-gitter{display:grid;gap:14px;
               grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
a.kachel{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;
         background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
         padding:16px 18px;transition:border-color .14s,transform .14s,box-shadow .14s}
a.kachel:hover{border-color:var(--akzent);transform:translateY(-2px);box-shadow:var(--hebung)}
a.kachel .titel{font:700 1rem var(--ui);color:var(--akzent)}
a.kachel .zweck{font-size:.85rem;color:var(--leise);line-height:1.5}
a.kachel .fuss{margin-top:auto;padding-top:9px;font:700 .74rem var(--ui);
               letter-spacing:.05em;text-transform:uppercase;color:var(--leise)}

/* ── Abschnittsmarke ── */
.gruppe-titel{font:700 .74rem var(--ui);letter-spacing:.07em;text-transform:uppercase;
              color:var(--leise);margin:26px 0 10px;display:flex;align-items:center;gap:10px}
.gruppe-titel::after{content:"";flex:1;height:1px;background:var(--linie)}

/* ── Mitteilungsseite (kein Zugang, gesperrt, nichts gefunden) ── */
.hinweis-mitte{max-width:520px;margin:60px auto;text-align:center;
               background:var(--flaeche);border:1px solid var(--linie);
               border-radius:var(--r);padding:34px 30px}
.hinweis-mitte h1{font:700 1.3rem var(--ui);margin:0 0 8px;color:var(--text)}
.hinweis-mitte p{color:var(--leise);margin:0 0 16px;line-height:1.6}

/* ── Rechteschalter: drei Zustaende, nicht zwei ──
   „Voreinstellung" ist ein eigener Zustand und nicht dasselbe wie „ausdruecklich ja".
   Wer das zusammenwirft, kann eine Freigabe nicht mehr zurueckgeben, ohne zu raten,
   was vorher galt. */
.recht-zeile{display:flex;align-items:center;gap:14px;padding:12px 0;
             border-bottom:1px solid var(--linie-zart)}
.recht-zeile:last-child{border-bottom:0}
.recht-zeile .was{flex:1;min-width:0}
.recht-zeile .was b{display:block;font:700 .93rem var(--ui);color:var(--text)}
.recht-zeile .was span{font-size:.82rem;color:var(--leise);line-height:1.45}
.wahl{display:inline-flex;border:1px solid var(--linie);border-radius:var(--r-s);
      overflow:hidden;flex-shrink:0}
.wahl label{margin:0;padding:0;text-transform:none;letter-spacing:normal;font-weight:400}
.wahl label span{display:block;padding:6px 12px;font:600 .8rem var(--ui);color:var(--leise);
                 cursor:pointer;background:var(--flaeche);transition:background .12s,color .12s;
                 border-left:1px solid var(--linie)}
.wahl label:first-child span{border-left:0}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl input:checked + span{background:var(--akzent);color:var(--auf-akzent)}
.wahl input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:-2px}

/* ── Kann-Liste: was ein Werkzeug leistet ──
   Frueher stand vor jeder Zeile ein Haekchen-Emoji. Der Haken wird jetzt gezeichnet und
   nimmt die Markenfarbe an — auf Papier, im Vorlesemodus und bei Farbschwaeche gleich gut. */
ul.kann-liste{list-style:none;padding:0;margin:8px 0}
li.kann{position:relative;padding:4px 0 4px 26px;line-height:1.55}
li.kann::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:5px;
  border-left:2px solid var(--akzent);border-bottom:2px solid var(--akzent);
  transform:rotate(-45deg)}

/* ── Dateifeld ──
   Das nackte <input type=file> zeigt den Browser-Knopf „Choose File / No file chosen".
   Das sieht auf jedem System anders aus, ist nicht beschriftbar und wirkt wie 1998.
   Hier: eine anklickbare Ablegeflaeche, die auch Ziehen annimmt und den gewaehlten
   Namen zeigt. Das echte Feld bleibt im Markup — nur unsichtbar, damit Tastatur und
   Vorlesemodus weiter funktionieren. */
/* Das Feld IST ein <label> — die Beschriftungsregel oben (Grossbuchstaben, gesperrt,
   graue Farbe) muss hier ausdruecklich zurueckgenommen werden, sonst steht dort
   „DATEI HIERHER ZIEHEN" in Versalien. */
.dateifeld{position:relative;display:block;border:2px dashed var(--linie);
  border-radius:var(--r);background:var(--flaeche);padding:26px 20px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s;
  text-transform:none;letter-spacing:normal;color:var(--text);margin:0}
.dateifeld > span{display:block}
.dateifeld:hover,.dateifeld.zieht{border-color:var(--akzent);background:var(--akzent-weich)}
.dateifeld input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  cursor:pointer}
.dateifeld .titel{font:700 .98rem var(--ui);color:var(--akzent);margin-bottom:3px}
.dateifeld .unter{font:400 .84rem var(--ui);color:var(--leise)}
.dateifeld .gewaehlt{display:none;font:700 .95rem var(--ui);color:var(--text);
  word-break:break-all}
.dateifeld.hat-datei{border-style:solid;border-color:var(--akzent);
  background:var(--akzent-weich)}
.dateifeld.hat-datei .titel,.dateifeld.hat-datei .unter{display:none}
.dateifeld.hat-datei .gewaehlt{display:block}

/* Auswahlfelder: eigener Pfeil statt des Systemwidgets, damit sie zu den Feldern passen. */
select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* ── Seitenkopf: Bruecke fuer die Bestandsseiten ──
   Die alten Seiten setzen einen dunklen Balken IM Kasten (`.header{background:#003366}`).
   Zwei kraeftige Farbflaechen direkt untereinander — Leiste und Balken — sind der
   Haupteindruck von "alt". Der Titel gehoert auf den Seitengrund, nicht in einen Kasten.
   Diese Regeln greifen ueber `.card > .header` und gewinnen damit gegen die Seitenregel.
   Sie fallen weg, sobald eine Seite neu gebaut ist. */
.card > .header{background:transparent!important;color:var(--text)!important;
  padding:0 0 16px!important;margin:0 0 20px;border-bottom:1px solid var(--linie)}
.card > .header h1{color:var(--text);font-size:1.5rem;letter-spacing:-.015em}
.card > .header p{color:var(--leise);opacity:1!important;font-size:.9rem;margin-top:4px}
.card > .body{padding:0!important}

/* Der Inhaltskasten traegt keinen Rahmen mehr, sondern steht auf der Flaeche.
   Karte-auf-Tapete wirkt wie ein Baukasten von 2015. */
.page-wrap > .card{background:var(--flaeche);max-width:820px!important;
  border-radius:var(--r-l);border:1px solid var(--linie);box-shadow:none!important;
  padding:26px 30px 30px}

/* Abschnittsabstand: eine Leiter statt zufaelliger Werte je Seite. */
.page-wrap{padding:28px 20px 90px!important}

/* Hauptaktionen sind so breit wie ihre Beschriftung. Ein Knopf ueber die ganze
   Spaltenbreite ist ein Baukasten-Reflex und laesst jede Seite nach Formular aussehen. */
.page-wrap > .card button:not(.nav-hamburger):not(.copy-btn){width:auto!important;
  min-width:180px;border-radius:var(--r-s);font:700 .9rem var(--ui);padding:11px 24px;
  margin-top:20px!important;cursor:pointer;transition:background .15s,transform .1s}
.page-wrap > .card button:active{transform:translateY(1px)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}