/* MM24 Kombi-Tool -- gleiche Designsprache wie die Zeiterfassung.
   Tokens, Typografie und Bausteine sind aus deren static/css/app.css
   uebernommen: monochrom, Haarlinien statt Kaesten, Grossbuchstaben in
   Kleinstgroesse als Beschriftung, Felder mit Unterstrich statt Rahmen.

   Unterschied zur Zeiterfassung: das ist ein dichtes Werkzeug am Rechner und
   keine Handy-App. Die Sprache ist dieselbe, die Anordnung bleibt kompakt -
   also keine bildschirmbreiten Knoepfe und keine Bodennavigation. */

:root{
  --ink:#111111;
  --muted:#9a9a9a;
  --line:#ececec;
  --bg:#ffffff;
  --paper:#ffffff;
  --card:#ffffff;

  --red:#E83038;    /* nur fuer Fehler */
  --ok:#1f7a3d;     /* nur fuer Bestaetigungen */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}

body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;
  background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.5;letter-spacing:.01em;
}

/* Punktraster wie drueben, dezent hinter allem. */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#fff}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:radial-gradient(circle,#c6c6c6 1px,transparent 1.5px);
  background-size:24px 24px;
}

.mono{font-variant-numeric:tabular-nums;letter-spacing:0}
.up{text-transform:uppercase;letter-spacing:.13em}

/* ------------------------------------------------------------------ Kopf */

/* Marke oben links, in jedem Werkzeug dieselbe.
   Bewusst `mm24_logo_kopf.png` und nicht die Vorlage von der Anmeldeseite: die
   ist 2050 x 560 und davon sind nur 246 px Schriftzug, der Rest leerer Rand.
   Ungeschnitten waere bei 30 px Hoehe nur ein 13-px-Schriftzug zu sehen - das
   Logo wirkte verloren. Die Kopf-Fassung ist auf den Inhalt beschnitten. */
.kopf .brandmark{height:18px;width:auto;display:block;flex:none}

.kopf{
  display:flex;align-items:center;gap:26px;
  padding:0 22px;height:56px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;
}
.kopf strong{
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;
}

/* Bereichsschalter: zwei Listen in einem Werkzeug. Steht bewusst links vor den
   Reitern - er bestimmt, worauf sich alles Weitere bezieht. */
.bereichschalter{display:flex}
.bereich-knopf{
  font-family:inherit;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);background:#fff;border:1px solid var(--line);
  padding:8px 16px;line-height:1;cursor:pointer;
}
.bereich-knopf + .bereich-knopf{border-left:none}
.bereich-knopf.aktiv{background:var(--ink);color:#fff;border-color:var(--ink)}
.bereich-knopf .anzahl{font-variant-numeric:tabular-nums;opacity:.55}

/* Reiter -- der .modeswitch der Zeiterfassung, hier waagrecht im Kopf. */
.reiter{display:flex}
.reiter-knopf{
  font-family:inherit;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);background:#fff;border:1px solid var(--line);
  padding:8px 18px;line-height:1;cursor:pointer;
}
.reiter-knopf + .reiter-knopf{border-left:none}
.reiter-knopf.aktiv{background:var(--ink);color:#fff;border-color:var(--ink)}

.kopf .person{
  margin-left:auto;font-size:9px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.13em;
}
.abmelden{
  color:var(--muted);text-decoration:none;
  font-size:9px;text-transform:uppercase;letter-spacing:.13em;
}
.kopf .person + .abmelden{margin-left:18px}
.kopf .person:not(:only-of-type) ~ .abmelden{margin-left:18px}
.abmelden:hover{color:var(--ink)}

/* Meldezeile -- auf jedem Reiter sichtbar. */
.meldung{
  margin:0;padding:10px 22px;
  border-bottom:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  background:rgba(255,255,255,.7);
}
.meldung.gut{color:var(--ok)}
.meldung.fehler{color:var(--red);border-left:2px solid var(--red)}

/* ---------------------------------------------------------------- Tafeln */

.tafel{display:none;padding:26px 22px 40px;max-width:1500px;margin:0 auto}
.tafel.aktiv{display:block}
/* Eigenstaendige Seiten (Auswertung, Absage) sehen aus wie eine Tafel, sind aber
   KEIN Reiter: es gibt kein JavaScript, das ihnen "aktiv" gaebe. Mit .tafel
   allein stuenden sie auf display:none - die Seite blieb leer. */
.seite{padding:26px 22px 40px;max-width:1500px;margin:0 auto}

/* ------------------------------------------------------------- Dashboard */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:34px}
.kachel{display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;
  background:var(--bg);text-decoration:none;color:var(--ink);min-height:150px}
.kachel:hover{background:#fafafa}
.kachel-name{font-size:19px;font-weight:400}
.kachel-text{font-size:13px;font-weight:300;color:var(--muted);line-height:1.5;flex:1}
.kachel-zahl{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}

/* Sprung zurueck zum Start, in jedem Werkzeug oben links. */
.zumstart{font-size:11px;text-transform:uppercase;letter-spacing:.13em;
  text-decoration:none;color:var(--muted);border-bottom:1px solid transparent}
.zumstart:hover{color:var(--ink);border-bottom-color:var(--ink)}
.platzhalter{color:var(--muted);font-size:13px}

/* Zeile: Beschriftung als Eyebrow, Feld daneben. */
/* Vier Spuren: Beschriftung, Feld, und bis zu zwei Beigaben (Zaehler, Auswahl,
   Knopf). Zeilen mit weniger Teilen lassen die hinteren Spuren einfach leer. */
.zeile{
  display:grid;grid-template-columns:150px 1fr auto auto;
  align-items:center;gap:16px;margin-bottom:20px;
}
.zeile.oben{align-items:start}
.zeile > label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.zeile > label + *{min-width:0}

input[type=text],input[type=url],input[type=password],input[type=number],select,textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  padding:9px 0;background:transparent;
  border:0;border-bottom:1px solid var(--ink);border-radius:0;
}
textarea{border:1px solid var(--line);padding:12px;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted)}
select{-webkit-appearance:none;appearance:none;padding-right:18px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* Die Statusmeldung steht seit der Meldezeile oben doppelt auf dem Schirm.
   Sichtbar bleibt die obere; dieses Feld wird von melde() weiter gefuellt,
   damit nichts vom Verhalten daran haengt. */
.status{display:none}
.status.fehler{color:var(--red)}
.zaehler{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
  min-width:4ch;text-align:right;letter-spacing:.06em}
.zaehler.zulang{color:var(--red)}
.zaehler.gut{color:var(--ok)}

.hinweis,.hinweis-kurz{
  color:var(--muted);font-size:12px;line-height:1.5;max-width:74ch;margin:0 0 16px;
}
.hinweis-kurz{margin:0}
.hinweis code,.hinweis-kurz code{
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;
  border-bottom:1px solid var(--line);
}

/* --------------------------------------------------------------- Knoepfe */

button,.knopf{
  font-family:inherit;font-size:10px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  padding:11px 16px;line-height:1;cursor:pointer;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
button:hover,.knopf:hover{border-color:var(--ink)}
button.haupt{background:var(--ink);color:#fff;border-color:var(--ink)}
button.haupt:hover{filter:brightness(.85)}
button:disabled{opacity:.35;cursor:default;pointer-events:none}
button.gelungen,button.gelungen:hover{background:var(--ok);border-color:var(--ok);color:#fff}

.knopfleiste{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}

a.knopf{display:inline-block;text-decoration:none}
a.knopf:hover{border-color:var(--ink)}

/* Grosser Knopf im Stil von .btn der Zeiterfassung -- nur auf der Anmeldeseite. */
.btn-gross{
  display:block;width:100%;text-align:center;
  padding:19px;border-radius:5px;border:0;
  background:var(--ink);color:#fff;text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.btn-gross:hover{filter:brightness(.9)}

/* ----------------------------------------------------------- HTML-Editor */

.editorbereich{display:grid;grid-template-columns:150px 1fr;gap:16px}
.werkzeuge{display:flex;flex-direction:column;gap:6px}
.werkzeuge button{text-align:left}
#inhalt{min-height:340px;font-family:inherit;font-size:14px}

.ausgabebereich{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.ausgabebereich .feld{display:flex;flex-direction:column;min-height:420px}
.feld h2{
  font-size:10px;font-weight:400;color:var(--muted);
  text-transform:uppercase;letter-spacing:.14em;margin:0 0 8px;
}
.ausgabebereich .feld textarea{flex:1}
#ausgabe{
  min-height:380px;background:transparent;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;line-height:1.55;
}
/* Die Vorschau ist eine eigene Seite in einem abgeschotteten Rahmen. */
#vorschau{
  width:100%;min-height:380px;height:100%;
  border:1px solid var(--line);border-radius:0;background:#fff;
}

/* ------------------------------------------------------------- Tabellen */

.liste{width:100%;border-collapse:collapse;font-size:14px;font-weight:300;background:transparent}
.liste td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.liste tr:last-child td{border-bottom:1px solid var(--line)}
.liste .titel{font-weight:400}
.liste .titel a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.liste .titel a:hover{border-bottom-color:var(--ink)}
.liste .haken{width:28px}

/* Ueberschrift ueber einem Block, klein und gesperrt. Dashboard. */
.eyebrow-zeile{
  margin:34px 0 10px;font-size:10px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted)
}
.liste .art{width:190px}
.liste .art input{
  width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;
  font:inherit;color:var(--ink);padding:2px 0
}
.liste .art input:focus{outline:0;border-bottom-color:var(--ink)}
.liste .datei code{
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:var(--muted);
}
.liste .tun{text-align:right;white-space:nowrap}
.liste .tun > *{margin-left:8px}
.liste .klein{font-size:10px;color:var(--muted);margin-top:4px;
  text-transform:uppercase;letter-spacing:.1em}
.liste .klein.warnung{color:var(--red)}
.liste tr.offen td{background:rgba(17,17,17,.03)}

/* Zustand als Marke, wie .status-tag drueben: nur Linie, keine Fuellung. */
.zustand{
  display:inline-block;padding:3px 9px;border-radius:0;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;
  border:1px solid var(--line);color:var(--muted);background:none;
}
.zustand.laedt{border-color:var(--ink);color:var(--ink)}
.zustand.fertig{border-color:var(--ink);background:var(--ink);color:#fff}
.zustand.fehler{border-color:var(--red);color:var(--red)}
.zustand.de{border-color:var(--ink);color:var(--ink)}

#urls{min-height:72px}
#auftragsliste .tun button{margin-left:8px}
.offen{font-weight:500}

/* --------------------------------------------------------------- Bilder */

.format{display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.format input{width:74px;text-align:center}
#artikelnr{max-width:190px;font-variant-numeric:tabular-nums}

.bildgitter{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.bildkachel{
  margin:0;background:#fff;padding:10px;cursor:grab;
}
.bildkachel.zieht{opacity:.35;cursor:grabbing}
.bildkachel.ablegen-vor{box-shadow:inset 3px 0 0 0 var(--ink)}
.bildkachel.ablegen-nach{box-shadow:inset -3px 0 0 0 var(--ink)}

.bildhalter{position:relative}
.bildkachel .bildwahl{
  position:absolute;top:6px;left:6px;width:16px;height:16px;
  cursor:pointer;z-index:1;accent-color:var(--ink);
}
.bildkachel img{
  display:block;width:100%;height:150px;object-fit:contain;
  background:#fafafa;cursor:zoom-in;
}
.bildkachel img:not([src]){
  background:repeating-linear-gradient(45deg,#f4f4f4 0 8px,#ececec 8px 16px);
}
.bildkachel.kaputt img{background:#fdf1f1}
.bildkachel:has(input:not(:checked)) img{opacity:.25}

.haupt-abzeichen{
  position:absolute;right:6px;bottom:6px;padding:3px 8px;
  background:var(--ink);color:#fff;
  font-size:8.5px;text-transform:uppercase;letter-spacing:.12em;
}

.bildkachel figcaption{
  display:flex;align-items:center;gap:8px;margin-top:8px;
  font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
}
.bildkachel .nummer{font-variant-numeric:tabular-nums}
.bildkachel .dateiname{
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bildkachel .dateiname.aus{color:var(--muted)}
.bildkachel a{margin-left:auto;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line)}
.bildkachel a:hover{border-color:var(--ink)}

/* --------------------------------------------------------------- Dialoge */

dialog{
  border:1px solid var(--line);border-radius:0;padding:26px;
  width:min(460px,92vw);box-shadow:0 18px 50px rgba(0,0,0,.12);
  color:var(--ink);font-family:inherit;
}
dialog::backdrop{background:rgba(255,255,255,.72);backdrop-filter:blur(3px)}
dialog h2{font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;margin:0 0 16px}
dialog label{display:block;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:18px 0 6px}
dialog menu{display:flex;justify-content:flex-end;gap:8px;
  margin:26px 0 0;padding:0}

#zuschnittdialog{width:min(900px,95vw)}
#zuschnittflaeche{
  display:block;width:100%;max-width:100%;
  border:1px solid var(--line);background:#d8d8d8;
  touch-action:none;cursor:grab;
}
#zuschnittflaeche:active{cursor:grabbing}
.zuschnittleiste{display:flex;align-items:center;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
.zuschnittleiste input[type=range]{flex:1;min-width:150px;accent-color:var(--ink)}
#zuschnittinfo{margin:10px 0 0;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
#zuschnitthinweis{margin:6px 0 0;font-size:11px}
.fehler{color:var(--red)}

/* ---------------------------------------------------------- Anmeldeseite

   Eins zu eins das Anmeldefenster der Zeiterfassung: Logo, Untertitel in
   Grossbuchstaben, Felder mit Unterstrich, schwarzer Knopf, Fehler als roter
   Randstrich. Ohne "Angemeldet bleiben" - das kennt dieses Werkzeug nicht. */

.login-seite{display:flex;justify-content:center;align-items:center;
  min-height:100vh;min-height:100dvh}

.login{width:100%;min-height:100dvh;background:transparent;
  display:flex;flex-direction:column;position:relative}
@media(min-width:520px){
  .login{max-width:400px;min-height:auto;background:#fff;
    border:1px solid var(--line);border-radius:0;overflow:hidden}
}
.login .top{background:transparent;color:var(--ink);padding:70px 30px 8px;text-align:center}
.login .top .brandlogo{width:min(76%,240px);height:auto;margin:0 auto 14px;display:block}
.login .top .sub{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.2em}
.login .body2{padding:44px 30px calc(30px + env(safe-area-inset-bottom));
  flex:1;display:flex;flex-direction:column;background:transparent}
.login .body2 .field:first-of-type{margin-top:0}

.field{margin-top:20px}
.field label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.field input{width:100%;font-family:inherit;font-size:16px;padding:10px 0;
  border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--ink)}
.loginform .field{margin-top:26px}
.loginform .field input{padding:8px 0;font-size:16px}

/* Passwort anzeigen/verbergen */
.pw-wrap{position:relative}
.pw-wrap input{width:100%;box-sizing:border-box;padding-right:46px}
.pw-toggle{position:absolute;top:0;right:0;height:100%;width:44px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--muted)}
.pw-toggle:hover{color:var(--ink);border-color:transparent}

/* "Angemeldet bleiben" -- dieselbe Zeile wie in der Zeiterfassung. */
.rememberrow{display:flex;align-items:center;gap:9px;margin:22px 0 2px;cursor:pointer;
  font-size:13px;color:var(--ink);user-select:none}
.rememberrow input{width:17px;height:17px;margin:0;accent-color:var(--ink);
  cursor:pointer;flex:0 0 auto}

.login .err{background:none;color:var(--red);border:0;border-left:2px solid var(--red);
  border-radius:0;padding:4px 0 4px 14px;font-weight:400;font-size:13px;
  text-align:left;margin-top:18px}

.login .btn{
  display:flex;align-items:center;justify-content:center;width:100%;
  border:0;border-radius:5px;font-family:inherit;font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:19px;cursor:pointer;color:#fff;background:var(--ink);
  transition:filter .15s ease,transform .06s ease;
}
.login .btn:hover{filter:brightness(.93)}
.login .btn:active{transform:translateY(1px)}
.login .btn.big{margin-top:22px}

.forgot{display:block;text-align:center;color:var(--ink);font-weight:400;
  text-decoration:underline;text-underline-offset:3px;margin-top:22px;
  font-size:10px;text-transform:uppercase;letter-spacing:.13em;padding:6px}
.forgot:hover{color:var(--muted)}

/* ------------------------------------------------------------- Vorspann */

#splash{
  position:fixed;inset:0;z-index:9999;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  transition:opacity .55s ease;cursor:pointer;
}
#splash.hide{opacity:0;pointer-events:none}
#splash .brandmark{
  width:min(58vw,300px);height:auto;display:block;
  clip-path:inset(0 100% 0 0);
  animation:nwreveal 1.8s cubic-bezier(.62,0,.38,1) .3s forwards;
}
@keyframes nwreveal{ to{ clip-path:inset(0 0 0 0) } }
#splash .credit{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  opacity:0;transform:translateY(8px);
  animation:nwcredit .6s ease 2.25s forwards;
}
@keyframes nwcredit{ to{ opacity:1;transform:none } }

@media(prefers-reduced-motion:reduce){
  #splash .brandmark{animation:none;clip-path:none}
  #splash .credit{animation:none;opacity:1;transform:none}
}

/* --------------------------------------------------------- schmale Fenster */

@media(max-width:900px){
  .ausgabebereich{grid-template-columns:1fr}
  .editorbereich{grid-template-columns:1fr}
  .werkzeuge{flex-direction:row;flex-wrap:wrap}
  .zeile{grid-template-columns:1fr;gap:8px}
  .status{margin-left:0}
  .kopf{gap:14px;padding:0 14px}
  .tafel{padding:20px 14px 32px}
}

/* Farbvarianten */
.farbwahl{display:flex;gap:0}
.farbwahl button{
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:8px 16px;border:1px solid var(--line);background:#fff;color:var(--muted);
}
.farbwahl button + button{border-left:none}
.farbwahl button.aktiv{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Kontingent der Übersetzung */
.kontingent{
  margin:-10px 0 18px;
  font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);
}
.kontingent.knapp{color:var(--red)}

/* Restanzeige: der Balken zeigt, was NOCH FREI ist - er wird kuerzer, je mehr
   uebersetzt wurde. Duenn und in der Linienfarbe, damit er neben dem Text
   nicht laut wird; wird es knapp, faerbt er sich rot. */
.quote{display:block;height:4px;max-width:420px;margin:7px 0 0;background:var(--line)}
.quote i{display:block;height:100%;background:var(--ink);transition:width .3s}
.kontingent.knapp .quote i{background:var(--red)}