/* =====================================================================
   Telvanto - Oberflaeche der Verwaltung
   Uebernimmt die Gestaltungsmarken von Punktivo (Fassung 1.1) und nutzt
   die dichteren Abstaende, die dort fuer Verwaltungsoberflaechen
   vorgesehen sind.

   Die Schriftdateien liegen unter /branding/schriften/ - /icons/ ist
   unter Debian-Apache durch alias.conf belegt.
   ===================================================================== */

:root {
  --pk-pflaume-900:#2A1626; --pk-pflaume-600:#6B2F55; --pk-pflaume-400:#9A5C82;
  --pk-pflaume-100:#F1E4EC; --pk-messing-500:#C08A3E; --pk-messing-700:#8F621F;
  --pk-papier-50:#FCF8F7; --pk-puder-100:#F7EDEE;
  --pk-warmgrau-500:#7B6B70; --pk-warmgrau-200:#E4DAD9;
  --pk-erfolg:#3F7A57; --pk-warnung:#8F621F; --pk-fehler:#A5342F;

  --pk-grund:var(--pk-papier-50);
  --pk-flaeche:#FFFFFF;
  --pk-flaeche-tief:var(--pk-puder-100);
  --pk-rand:var(--pk-warmgrau-200);
  --pk-rand-stark:var(--pk-pflaume-400);
  --pk-text:var(--pk-pflaume-900);
  --pk-text-leise:var(--pk-warmgrau-500);
  --pk-aktion:var(--pk-pflaume-600);
  --pk-aktion-hover:var(--pk-pflaume-900);
  --pk-punkt:var(--pk-messing-500);
  --pk-fokus:var(--pk-messing-500);

  --pk-schrift-display:'Bricolage Grotesque','Trebuchet MS','Segoe UI',sans-serif;
  --pk-schrift-text:'Karla','Segoe UI',system-ui,-apple-system,sans-serif;
  --pk-schrift-daten:'Space Mono','SFMono-Regular',Consolas,monospace;

  --pk-radius-s:6px; --pk-radius-m:12px; --pk-radius-pille:999px;
  --pk-dicht-1:6px; --pk-dicht-2:12px; --pk-dicht-3:18px;
  --pk-raum-4:40px;
  --pk-dicht-zeile:1.45; --pk-dicht-text:15px;
  --pk-breite:1060px;
  --pk-schatten:0 1px 2px rgba(42,22,38,.06), 0 8px 24px -12px rgba(42,22,38,.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) {
    --pk-grund:#1E1019; --pk-flaeche:#2A1626; --pk-flaeche-tief:#3A2135;
    --pk-rand:#4A3243; --pk-rand-stark:#7A5A6C;
    --pk-text:#F7EFF3; --pk-text-leise:#C0A9B5;
    --pk-aktion:#DCB3C7; --pk-aktion-hover:#F1E4EC;
    --pk-punkt:#D6A45C; --pk-fokus:#D6A45C;
    --pk-erfolg:#6FAF87; --pk-warnung:#D6A45C; --pk-fehler:#E2796F;
    --pk-schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

@font-face { font-family:'Bricolage Grotesque';
  src:url('/branding/schriften/BricolageGrotesque-Variable.woff2') format('woff2-variations');
  font-weight:400 800; font-display:swap; }
@font-face { font-family:'Karla';
  src:url('/branding/schriften/Karla-Variable.woff2') format('woff2-variations');
  font-weight:200 800; font-display:swap; }
@font-face { font-family:'Space Mono';
  src:url('/branding/schriften/SpaceMono-Regular.woff2') format('woff2');
  font-weight:400; font-display:swap; }

* { box-sizing:border-box; }

body {
  margin:0; background:var(--pk-grund); color:var(--pk-text);
  font-family:var(--pk-schrift-text); font-size:var(--pk-dicht-text);
  line-height:var(--pk-dicht-zeile); -webkit-font-smoothing:antialiased;
}

a { color:var(--pk-aktion); text-decoration:none; }
a:hover { color:var(--pk-aktion-hover); text-decoration:underline; }
:focus-visible { outline:2px solid var(--pk-fokus); outline-offset:2px; }

/* ---- Kopfleiste ---------------------------------------------------- */
.kopf {
  display:flex; align-items:center; gap:var(--pk-dicht-3);
  padding:var(--pk-dicht-2) var(--pk-dicht-3);
  background:var(--pk-flaeche); border-bottom:1px solid var(--pk-rand);
}
.kopf .marke {
  display:flex; align-items:center; gap:8px; color:var(--pk-text);
  font-family:var(--pk-schrift-display); font-weight:700; font-size:19px;
  letter-spacing:-.5px;
}
.kopf .marke:hover { text-decoration:none; }
/* Die Fassung steht in der Kopfzeile und damit nur hinter der Anmeldung -
   nach draussen gehoert sie so wenig wie ein Dateipfad. */
.kopf .fassung { font-family:var(--pk-schrift-daten); font-size:11.5px;
                 letter-spacing:.04em; color:var(--pk-text-leise); }
.kopf nav { display:flex; gap:var(--pk-dicht-3); }
.kopf nav a { color:var(--pk-text-leise); padding-bottom:3px; border-bottom:2px solid transparent; }
.kopf nav a:hover { color:var(--pk-text); }
/* Zwei Merkmale statt eines: Farbe allein unterscheidet zu wenig, wenn
   jemand sie nicht sieht - der Strich trägt es mit. */
.kopf nav a.aktiv { color:var(--pk-text); font-weight:600; border-bottom-color:var(--pk-punkt); }
.kopf .abmelden { margin-left:auto; }

/* ---- Flaeche -------------------------------------------------------- */
.bahn { max-width:var(--pk-breite); margin:0 auto; padding:var(--pk-raum-4) var(--pk-dicht-3) 64px; }

h1 { font-family:var(--pk-schrift-display); font-size:34px; line-height:1.1;
     letter-spacing:-1.1px; margin:0 0 var(--pk-dicht-1); }
h2 { font-family:var(--pk-schrift-display); font-size:22px; line-height:1.25;
     letter-spacing:-.4px; margin:var(--pk-raum-4) 0 var(--pk-dicht-2); }
p { margin:0 0 var(--pk-dicht-2); max-width:72ch; }

.leise { color:var(--pk-text-leise); }
.klein { font-size:13.5px; }
.mono  { font-family:var(--pk-schrift-daten); font-size:13.5px; }
code   { font-family:var(--pk-schrift-daten); font-size:13.5px;
         background:var(--pk-flaeche-tief); padding:1px 5px; border-radius:4px; }

/* ---- Tabellen ------------------------------------------------------- */
table { width:100%; border-collapse:collapse; margin:var(--pk-dicht-2) 0 var(--pk-dicht-3);
        background:var(--pk-flaeche); border:1px solid var(--pk-rand);
        border-radius:var(--pk-radius-m); overflow:hidden; }
th, td { text-align:left; padding:var(--pk-dicht-2) var(--pk-dicht-3);
         border-bottom:1px solid var(--pk-rand); }
tr:last-child td { border-bottom:none; }
th { font-family:var(--pk-schrift-daten); font-size:11.5px; font-weight:400;
     letter-spacing:.08em; text-transform:uppercase; color:var(--pk-text-leise);
     background:var(--pk-flaeche-tief); }

/* ---- Kacheln -------------------------------------------------------- */
.karten { display:grid; gap:var(--pk-dicht-2);
          grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
          margin-bottom:var(--pk-dicht-3); }
.karte { background:var(--pk-flaeche); border:1px solid var(--pk-rand);
         border-radius:var(--pk-radius-m); padding:var(--pk-dicht-3); }
.karte .etikett { display:block; font-family:var(--pk-schrift-daten);
         font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
         color:var(--pk-text-leise); margin-bottom:4px; }
.karte .wert { font-size:19px; }

/* ---- Zustaende ------------------------------------------------------ */
.marke-status { display:inline-block; padding:1px 10px; border-radius:var(--pk-radius-pille);
        font-family:var(--pk-schrift-daten); font-size:11.5px; letter-spacing:.04em;
        border:1px solid var(--pk-rand); }
.marke-active    { color:var(--pk-erfolg); border-color:var(--pk-erfolg); }
.marke-suspended { color:var(--pk-warnung); border-color:var(--pk-warnung); }
.marke-deleted   { color:var(--pk-text-leise); }

.hinweis { background:var(--pk-flaeche-tief); border-radius:var(--pk-radius-m);
           padding:var(--pk-dicht-3); }
.fehler  { color:var(--pk-fehler); }
.warnung { color:var(--pk-warnung); }
.gelungen { color:var(--pk-erfolg); }
.zurueck { margin-bottom:var(--pk-dicht-1); }
.blaettern { display:flex; gap:var(--pk-dicht-3); }

/* ---- Formulare ------------------------------------------------------ */
label { display:block; font-family:var(--pk-schrift-daten); font-size:11.5px;
        letter-spacing:.08em; text-transform:uppercase; color:var(--pk-text-leise);
        margin:var(--pk-dicht-2) 0 4px; }
input[type=email], input[type=password], input[type=text] {
  width:100%; padding:10px 12px; font:inherit; color:var(--pk-text);
  background:var(--pk-flaeche); border:1px solid var(--pk-rand);
  border-radius:var(--pk-radius-s);
}
input:focus { border-color:var(--pk-rand-stark); }

button {
  font:inherit; font-weight:600; cursor:pointer;
  padding:10px 20px; min-height:44px;
  color:var(--pk-papier-50); background:var(--pk-aktion);
  border:none; border-radius:var(--pk-radius-s);
}
button:hover { background:var(--pk-aktion-hover); }
.abmelden button { background:transparent; color:var(--pk-text-leise);
                   padding:6px 10px; min-height:0; font-weight:400; }
.abmelden button:hover { color:var(--pk-text); background:transparent; }

/* ---- Reihe aus Feldern (Aufstocken) --------------------------------- */
.reihe { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--pk-dicht-2);
         background:var(--pk-flaeche); border:1px solid var(--pk-rand);
         border-radius:var(--pk-radius-m); padding:var(--pk-dicht-3); }
.reihe label { margin:0 0 4px; }
.reihe input[type=number] { width:120px; }
.reihe input[type=text] { width:260px; }
.reihe select { padding:10px 12px; font:inherit; color:var(--pk-text);
                background:var(--pk-flaeche); border:1px solid var(--pk-rand);
                border-radius:var(--pk-radius-s); }
button.klein { padding:4px 12px; min-height:0; font-size:13.5px; }
td .fehler, .mono.fehler { color:var(--pk-fehler); }
td .warnung, .mono.warnung { color:var(--pk-warnung); }

/* ---- Einmalige Anzeige (frisch erzeugter Schluessel) ------------------ */
.einmal { background:var(--pk-aktion-sanft); border:1px solid var(--pk-rand-stark);
          border-radius:var(--pk-radius-m); padding:var(--pk-dicht-3);
          margin-bottom:var(--pk-dicht-3); }
.einmal p { margin:0 0 var(--pk-dicht-1); max-width:none; }
.schluessel { user-select:all; word-break:break-all; font-size:15px; }
label.waagerecht { display:inline-flex; align-items:center; gap:6px; margin:0 12px 0 0;
                   text-transform:none; letter-spacing:0; font-family:var(--pk-schrift-text);
                   font-size:var(--pk-dicht-text); color:var(--pk-text); }

/* ---- Oeffentliche Startseite ----------------------------------------- */
.startkarte { max-width:520px; margin:96px auto; padding:var(--pk-raum-4);
              background:var(--pk-flaeche); border:1px solid var(--pk-rand);
              border-radius:var(--pk-radius-m); box-shadow:var(--pk-schatten);
              text-align:center; }
.startkarte h1 { margin:var(--pk-dicht-2) 0 var(--pk-dicht-1); }
.startkarte p { margin-left:auto; margin-right:auto; }
.startkarte .zeichen { display:inline-block; }
.rechtliches { display:flex; gap:var(--pk-dicht-3); justify-content:center;
               margin-top:var(--pk-raum-4); font-size:14px; }

.fuss { display:flex; gap:var(--pk-dicht-3); justify-content:center;
        padding:var(--pk-dicht-3); border-top:1px solid var(--pk-rand);
        font-size:13.5px; }
.fuss a { color:var(--pk-text-leise); }

/* ---- Einrichtung des zweiten Faktors ---------------------------------- */
.einrichtung { display:flex; flex-wrap:wrap; gap:var(--pk-dicht-3); align-items:flex-start; }
.einrichtung .einmal { flex:1 1 280px; margin:0; }
.qr { background:#FFFFFF; padding:12px; border:1px solid var(--pk-rand);
      border-radius:var(--pk-radius-m); line-height:0; }
.qr svg { display:block; width:220px; height:220px; }

/* ---- Fehlerseite ----------------------------------------------------- */
.fehlerkarte { max-width:640px; margin:64px auto; padding:var(--pk-raum-4);
               background:var(--pk-flaeche); border:1px solid var(--pk-rand);
               border-left:3px solid var(--pk-fehler);
               border-radius:var(--pk-radius-m); box-shadow:var(--pk-schatten); }
.fehlerkarte .etikett { display:block; font-family:var(--pk-schrift-daten);
               font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
               color:var(--pk-text-leise); margin-bottom:8px; }
.fehlerkarte h1 { margin-bottom:var(--pk-dicht-2); }

/* ---- Anmeldung ------------------------------------------------------ */
.anmeldekarte {
  max-width:380px; margin:64px auto; padding:var(--pk-raum-4);
  background:var(--pk-flaeche); border:1px solid var(--pk-rand);
  border-radius:var(--pk-radius-m); box-shadow:var(--pk-schatten);
}
.anmeldekarte h1 { margin-top:var(--pk-dicht-2); }
.anmeldekarte button { width:100%; margin-top:var(--pk-dicht-3); }
.anmeldekarte .zeichen { display:block; }

/* ---- Schmale Anzeige -------------------------------------------------
   Auf dem Telefon wird jede Tabellenzeile zu einer Karte. Waagerechtes
   Scrollen waere der kleinere Eingriff, versteckt aber ausgerechnet die
   Spalte ganz rechts - und dort steht in mehreren Tabellen der Knopf.

   Die Spaltenueberschrift kommt aus data-etikett am <td>. So bleibt es bei
   einem Markup: am Schreibtisch eine echte Tabelle, auf dem Telefon
   Karten. Zellen ohne das Attribut (Aktionsspalten) tragen keine
   Beschriftung, weil ihre Ueberschrift auch am Schreibtisch leer ist.
   ---------------------------------------------------------------------- */
@media (max-width:720px) {
  .bahn { padding:var(--pk-dicht-3) var(--pk-dicht-2) 48px; }
  h1 { font-size:27px; letter-spacing:-.7px; }
  h2 { margin-top:var(--pk-dicht-3); }

  /* Die Kopfleiste bricht um: Marke und Abmelden in die erste Zeile,
     die Navigation ueber die volle Breite darunter. */
  .kopf { flex-wrap:wrap; row-gap:var(--pk-dicht-2); }
  .kopf nav { order:3; width:100%; flex-wrap:wrap; row-gap:var(--pk-dicht-1);
              column-gap:var(--pk-dicht-3); }

  table { display:block; border:none; background:none; border-radius:0;
          overflow:visible; }
  thead { display:none; }
  table tr { display:block; background:var(--pk-flaeche);
             border:1px solid var(--pk-rand); border-radius:var(--pk-radius-m);
             padding:var(--pk-dicht-2) var(--pk-dicht-3);
             margin-bottom:var(--pk-dicht-2); }
  table td { display:flex; gap:var(--pk-dicht-3); align-items:baseline;
             justify-content:space-between; text-align:right;
             padding:4px 0; border-bottom:none; }
  tr:last-child td { border-bottom:none; }
  table td[data-etikett]::before {
             content:attr(data-etikett); flex:0 0 auto; text-align:left;
             font-family:var(--pk-schrift-daten); font-size:11.5px;
             letter-spacing:.08em; text-transform:uppercase;
             color:var(--pk-text-leise); }
  /* Zellen ohne Beschriftung (Knopf, Anhang) fuellen die Breite. */
  table td:not([data-etikett]) { display:block; text-align:left; }
  table td:not([data-etikett]):not(:first-child) { margin-top:var(--pk-dicht-1); }

  /* Die Variablenzeile der Auskunft gehoert zur Nachricht darueber und
     wird deshalb an deren Karte angesetzt statt zu einer eigenen. */
  table tr:has(+ tr.anhang) { margin-bottom:0;
             border-bottom-left-radius:0; border-bottom-right-radius:0; }
  table tr.anhang { border-top:none; padding-top:0;
             border-top-left-radius:0; border-top-right-radius:0; }

  /* Feste Feldbreiten sprengen sonst die Zeile. */
  .reihe { padding:var(--pk-dicht-2); }
  .reihe > div { flex:1 1 100%; }
  .reihe input[type=text], .reihe input[type=number],
  .reihe input[type=search], .reihe input[type=tel],
  .reihe select, .reihe button { width:100%; }

  .startkarte, .anmeldekarte, .fehlerkarte {
             margin:var(--pk-dicht-3) auto; padding:var(--pk-dicht-3); }
  .qr, .qr svg { width:100%; max-width:220px; height:auto; }
  .blaettern, .rechtliches, .fuss { flex-wrap:wrap; }
}