/* S²E Kundenakte – Fassung „dunkel“ (Bildschirm) laut Corporate Design */
@font-face{font-family:"IBM Plex Sans";font-weight:300;src:url(/schriften/ibm-plex-sans-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:300;src:url(/schriften/ibm-plex-sans-cyrillic-300-normal.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:"IBM Plex Sans";font-weight:400;src:url(/schriften/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;src:url(/schriften/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:"IBM Plex Sans";font-weight:500;src:url(/schriften/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;src:url(/schriften/ibm-plex-sans-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(/schriften/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(/schriften/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0400-04FF}

:root{
  --grund:#04171c; --erhoeht:#082228; --abschnitt:#08323a; --linie:#173a41;
  --titel:#ffffff; --text:#dadcdb; --leise:#a3a7a6; --eis:#9fe0d8; --fehler:#e0866a; --ok:#9fe0d8; --warn:#e8c27a;
  --sans:"IBM Plex Sans","Segoe UI",Arial,sans-serif; --mono:"IBM Plex Mono",Consolas,monospace;
  --haupt:#9fe0d8; --haupt-text:#04171c; --haupt-hover:#b8ebe5; --gefahr:#e08a7c; --gefahr-rand:#b54a3c; --hinterlegt:rgba(0,0,0,.6);
  --entwurf-rand:#4a4330; --versendet-rand:#2d5a57; --meldung-fehler:#ffd9cc;
  color-scheme:dark;
}
/* Tagmodus: Fassung „papier“ des Corporate Designs (Eis nie auf Weiß, Hauptknopf petrol) */
:root[data-thema="tag"]{
  --grund:#ffffff; --erhoeht:#f2f4f4; --abschnitt:#e6ebec; --linie:#d3d9da;
  --titel:#04171c; --text:#253539; --leise:#5c6a6e; --eis:#08323a; --fehler:#a03a1c; --ok:#08323a; --warn:#8a5a00;
  --haupt:#04171c; --haupt-text:#ffffff; --haupt-hover:#08323a; --gefahr:#a03a1c; --gefahr-rand:#d9a493; --hinterlegt:rgba(4,23,28,.35);
  --entwurf-rand:#e2c98f; --versendet-rand:#9fc4c0; --meldung-fehler:#a03a1c;
  color-scheme:light;
}
/* Logo als Maske: eine Datei, Farbe folgt dem Modus (weiß nachts, petrol-schwarz tags) */
.logo{display:block;height:26px;aspect-ratio:601.51/114.6;background:var(--titel);-webkit-mask:url(/logo-hell.svg) no-repeat center/contain;mask:url(/logo-hell.svg) no-repeat center/contain}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--grund);color:var(--text);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--titel);text-decoration:none;border-bottom:1px solid var(--linie)}
a:hover{border-bottom-color:var(--eis)}
h1{font-weight:300;font-size:28px;line-height:1.15;color:var(--titel);margin:0 0 4px;letter-spacing:-.01em}
h2{font-weight:300;font-size:19px;color:var(--titel);margin:32px 0 10px}
.leise{color:var(--leise)} .mono{font-family:var(--mono);font-size:12px}
.leiste{display:flex;align-items:center;gap:32px;padding:14px 32px;border-bottom:1px solid var(--linie);position:sticky;top:0;background:var(--grund);z-index:5;flex-wrap:wrap}
.marke{border:0;display:block}
.leiste nav{display:flex;gap:22px;flex:1}
.leiste nav a{border:0;color:var(--leise);padding:4px 0;border-bottom:1px solid transparent}
.leiste nav a.aktiv{color:var(--titel);border-bottom-color:var(--titel)}
.konto{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--leise)}
main{max-width:1180px;margin:0 auto;padding:28px 32px 80px}
@media (max-width:720px){.leiste{padding:12px 16px;gap:14px} main{padding:20px 16px 60px}}

button,.knopf{appearance:none;border:1px solid var(--linie);background:var(--erhoeht);color:var(--titel);font:400 13px/1 var(--sans);padding:9px 14px;border-radius:0;cursor:pointer}
button:hover{border-color:var(--leise)}
button.haupt{background:var(--haupt);border-color:var(--haupt);color:var(--haupt-text);font-weight:500}
button.haupt:hover{background:var(--haupt-hover)}
button:disabled{opacity:.5;cursor:default}
.leise-knopf{background:none;border:0;color:var(--leise);padding:4px;font-size:12px}
.leise-knopf:hover{color:var(--titel)}
input,select,textarea{font:400 14px/1.4 var(--sans);color:var(--titel);background:var(--erhoeht);border:1px solid var(--linie);border-radius:0;padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:1px solid var(--eis);outline-offset:-1px}
textarea{font-family:var(--mono);font-size:12px;min-height:160px}
label{display:block;font-size:12px;color:var(--leise);margin-bottom:4px}

.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.werkzeuge{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.suche{max-width:320px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px 9px 0;border-bottom:1px solid var(--linie);vertical-align:top}
th{font-weight:400;color:var(--leise);font-size:12px}
tr.klickbar{cursor:pointer} tr.klickbar:hover td{background:var(--erhoeht)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.leer{color:var(--leise);padding:18px 0;border-bottom:1px solid var(--linie)}

.marker{display:inline-block;font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;padding:4px 6px;border:1px solid var(--linie);color:var(--leise);white-space:nowrap}
.marker.entwurf{color:var(--warn);border-color:var(--entwurf-rand)}
.marker.freigegeben{color:var(--titel)}
.marker.versendet{color:var(--eis);border-color:var(--versendet-rand)}
.marker.unterschrieben{color:var(--haupt-text);background:var(--haupt);border-color:var(--haupt)}
.marker.storniert{text-decoration:line-through}
.ueberfaellig{color:var(--fehler)}

.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 20px}
.raster .breit{grid-column:1/-1}
.karte{background:var(--erhoeht);border:1px solid var(--linie);padding:18px 20px;margin:10px 0}
.felder{display:grid;grid-template-columns:160px minmax(0,1fr);gap:0;border-top:1px solid var(--linie)}
.felder>div{padding:8px 0;border-bottom:1px solid var(--linie)}
.felder>div:nth-child(odd){color:var(--leise);font-size:12px}
.zahlen{display:flex;gap:40px;flex-wrap:wrap;margin:6px 0 10px}
.zahlen div{font:300 30px/1 var(--sans);color:var(--titel)} .zahlen span{display:block;font-size:12px;color:var(--leise);margin-top:6px}

dialog{background:var(--erhoeht);color:var(--text);border:1px solid var(--linie);padding:24px;max-width:720px;width:calc(100% - 32px)}
dialog::backdrop{background:var(--hinterlegt)}
dialog h2{margin-top:0}
dialog .werkzeuge{margin-top:18px;justify-content:flex-end}

.anmeldung{max-width:360px;margin:12vh auto 0}
.anmeldung .logo{height:34px;margin-bottom:36px}
.anmeldung .feld{margin-bottom:14px}

.meldung{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--abschnitt);color:var(--titel);border:1px solid var(--linie);padding:12px 18px;font-size:13px;max-width:90vw;z-index:20}
.meldung.fehler{border-color:var(--fehler);color:var(--meldung-fehler)}

.zaehler{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;font-size:11px;line-height:18px;text-align:center;background:var(--haupt);color:var(--haupt-text)}
.anhaenge a{margin-right:10px;white-space:nowrap}
button.gefahr{border-color:var(--gefahr-rand);color:var(--gefahr)}
.eingang-gruppe{border-top:1px solid var(--linie);padding:12px 0}
.eingang-gruppe h3{margin:0 0 4px}
.eingang-gruppe details{margin-top:6px}

.werkzeuge.links{justify-content:flex-start}
select.eng{width:auto;max-width:100%;padding:4px 8px;font-size:13px}
.auswahlliste{max-height:55vh;overflow:auto;border-top:1px solid var(--linie)}
.auswahlliste label{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--linie);font-size:13px;color:var(--text);margin:0;cursor:pointer}
.auswahlliste label .klein{grid-column:2}
.schritte{padding-left:20px} .schritte li{margin:6px 0}
tr.nebenzeile td{color:var(--leise)}
.klein{font-size:12px}
.qr{background:#fff;padding:12px;display:inline-block;margin:6px 0 10px} .qr img{display:block;width:200px;height:200px}
#geheim{word-break:break-all}

/* ---------- Karten (Zur Freigabe) ---------- */
.karte.klickbar{cursor:pointer} .karte.klickbar:hover{border-color:var(--leise)}
.karte-kopf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.karte .werkzeuge{margin-top:10px}
.foto-knopf{display:flex;align-items:center;justify-content:center;min-height:120px;border:1px dashed var(--leise);background:var(--erhoeht);color:var(--titel);font-size:15px;cursor:pointer;text-align:center;padding:16px}
.foto-knopf input{position:absolute;opacity:0;width:1px;height:1px}
.breit-knopf{width:100%;padding:14px}
.mehr-liste{display:flex;flex-direction:column;border-top:1px solid var(--linie)}
.mehr-liste a,.mehr-liste button{display:block;text-align:left;padding:16px 4px;border:0;border-bottom:1px solid var(--linie);background:none;color:var(--titel);font-size:16px}
.handy-leiste{display:none}

/* ---------- Handy ---------- */
@media (max-width:720px){
  html,body{font-size:15px}
  .leiste{padding:10px 16px calc(10px) 16px;gap:10px}
  .leiste nav,.leiste .konto{display:none}
  .logo{height:22px}
  main{padding:16px 16px calc(84px + env(safe-area-inset-bottom))}
  h1{font-size:24px}
  .kopfzeile{align-items:flex-start}
  .kopfzeile .werkzeuge{width:100%}
  .suche{max-width:none;width:100%}
  button,.knopf{min-height:42px;padding:10px 14px;font-size:14px}
  input,select,textarea{font-size:16px;padding:10px}   /* 16 px: iOS zoomt sonst beim Tippen hinein */
  .zahlen{gap:22px}
  .felder{grid-template-columns:1fr}
  .felder>div:nth-child(odd){border-bottom:0;padding-bottom:0}
  /* Tabellen werden zu Karten: jede Zeile ein Block */
  table,thead,tbody,tr,td,th{display:block;width:100%}
  thead{display:none}
  tr{border-bottom:1px solid var(--linie);padding:10px 0}
  td,th{border:0;padding:2px 0}
  td:empty{display:none}
  td.n{text-align:left}
  td.werkzeuge{display:flex;gap:8px;flex-wrap:wrap;padding-top:8px}
  dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border:0}
  dialog .werkzeuge{position:sticky;bottom:0;background:var(--erhoeht);padding-top:10px}
  .meldung{bottom:calc(80px + env(safe-area-inset-bottom))}
  .handy-leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--grund);border-top:1px solid var(--linie);padding:4px 0 env(safe-area-inset-bottom)}
  .handy-leiste[hidden]{display:none!important}
  .handy-leiste a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;color:var(--leise);font-size:11px;padding:6px 0;position:relative}
  .handy-leiste a span{font-size:20px;line-height:1}
  .handy-leiste a.aktiv{color:var(--titel)}
  .handy-leiste .zaehler{position:absolute;top:2px;left:calc(50% + 6px);font-style:normal}
}