/* HERDRiCH Büroanwendungen: Bedienoberfläche im HERDRiCH-Designsystem (Artefakt „HERDRiCH Designsystem“, tokens.json).
   Einzige Stelle für Farben, Schrift und Grundbausteine der Oberfläche. Jede Seite bindet sie nach ihrer Grundgestaltung ein,
   seitenbezogene Regeln folgen danach, handy.css zuletzt. Umgestellt am 4. November 2026 (Entscheidung Otis Herdrich).
   Gilt nur für den Bildschirm: Word, PDF, Druckansichten und Belege bleiben schwarz-weiß in Calibri, nur das Briefpapier ist farbig.
   Regeln: alles eckig (kein border-radius), Schatten nur beim Überfahren, Knöpfe und Überschriften in Großbuchstaben,
   Rot nur für Hauptaktionen und Kennzeichen, schräge Streifen (−55°) als Wiedererkennungszeichen. */

@font-face { font-family:'Barlow'; font-style:normal; font-weight:300; font-display:swap; src:url('barlow-300.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('barlow-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('barlow-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('barlow-700.woff2') format('woff2'); }

:root {
  --herdrich-ui:1;                     /* Kennung: Datei geladen (Block „dateien-pruefen“) */
  --hd-rot:#D52625; --hd-rot-dunkel:#B31F1D; --hd-rot-hauch:rgba(213,38,37,.07);
  --hd-text:#2B2D30;                   /* Anthrazit */
  --hd-grafit:#4A4A49; --hd-grau:#5F6368; --hd-grau-hell:#8A8D92;
  --hd-linie:#DFE1E4; --hd-rahmen:#C9CCD0; --hd-flaeche:#F1F2F3;
  --hd-hell-auf-dunkel:#DCDEE1; --hd-grau-auf-dunkel:#A9ACB0;
  --hd-schatten:none; --hd-schatten-hover:0 10px 24px rgba(43,45,48,.08);
  --hd-streifen:repeating-linear-gradient(-55deg, var(--hd-rot) 0 10px, transparent 10px 18px);
  --hd-schrift:'Barlow', 'Helvetica Neue', Arial, sans-serif;
}
html { -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body, button, input, select, textarea { font-family:var(--hd-schrift); }
body { background:var(--hd-flaeche); color:var(--hd-text); font-size:15px; position:relative; padding-top:0; overflow-x:hidden; }

/* Kopf: anthrazitfarbene Leiste über die ganze Breite, weißes Logo (logo.js), Kennstreifen darunter */
body > header { position:relative; z-index:10000; width:100%; max-width:1000px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:20px;
  background:var(--hd-text); border:none; border-radius:0; box-shadow:0 0 0 100vmax var(--hd-text); clip-path:inset(0 -100vmax -8px -100vmax);
  padding:1.1rem 0; margin-bottom:2.2rem; }
body > header::after { content:""; position:absolute; left:50%; width:100vw; margin-left:-50vw; bottom:-8px; height:8px; background:var(--hd-streifen); }
body > header > img { order:-1; height:46px !important; width:auto; }
body > header .logo-text { display:flex; flex-direction:column; min-width:0; padding-left:20px; border-left:1px solid rgba(255,255,255,.18); line-height:1.35; }
body > header .logo-text strong { font-size:19px !important; font-weight:600; text-transform:uppercase; letter-spacing:.06em !important; margin:0; color:#fff; }
body > header .logo-text span { font-size:13px !important; color:var(--hd-grau-auf-dunkel) !important; margin-top:2px !important; }
body > header #datetime { order:5; font-family:inherit !important; font-size:12px !important; color:var(--hd-grau-auf-dunkel) !important; margin:6px 0 0 !important; letter-spacing:0 !important; font-variant-numeric:tabular-nums; }
body > header > div:not(.logo-text) { text-align:left !important; min-width:0 !important; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:0; padding:8px 16px; }
body > header > div:not(.logo-text) > div:first-child { color:var(--hd-grau-auf-dunkel) !important; font-size:11px !important; }
body > header > div:not(.logo-text):has(#benutzer:empty) { visibility:hidden; }
body > header #benutzer { font-size:14px !important; font-weight:600 !important; color:#fff !important; }
.chip-links { display:flex; gap:14px; margin-top:4px; }
.wechseln, .kopf-link { display:inline-block; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--hd-rot); text-decoration:none; }
body > header .wechseln, body > header .kopf-link { color:var(--hd-hell-auf-dunkel); }
body > header .wechseln:hover, body > header .kopf-link:hover { color:#fff; }
.wechseln:hover, .kopf-link:hover { text-decoration:underline; }

/* Gleicher Kopf und gleiche Breite in allen Anwendungen (Wunsch Otis Herdrich, 4. November 2026): Der Kopf hat überall
   dieselbe Höhe, dasselbe Logo und drei Zeilen (Name der Anwendung, eine Unterzeile, Datum), lange Namen werden gekürzt
   statt umzubrechen. Alle Anwendungen nutzen breite Bildschirme bis --hd-breite. Seitenregeln mit „!important“ ändern
   daran nichts („html body > …“ wiegt mehr). Auf dem Handy (bis 640 px) gilt handy.css. */
:root { --hd-breite:1760px; --hd-kopfhoehe:84px; }
html body > header, html body > main:not(.wahl), html body > #hauptinhalt, html body > .app, html body > #mainfooter { max-width:var(--hd-breite) !important; }
html body > #hauptinhalt > .card { max-width:none !important; }
@media (min-width:641px) {
  html body > header { height:var(--hd-kopfhoehe); min-height:0; padding:0 !important; column-gap:20px !important; margin-bottom:1.6rem !important; align-items:center !important; }
  html body > header > img { height:40px !important; width:auto !important; }
  html body > header .logo-text { min-width:0; overflow:hidden; line-height:1.3 !important; }
  html body > header .logo-text strong { display:block; font-size:18px !important; line-height:1.3 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html body > header .logo-text span { display:block !important; font-size:12.5px !important; line-height:1.35 !important; margin-top:1px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html body > header .logo-text span ~ span { display:none !important; }
  html body > header #datetime { display:block !important; font-size:12px !important; line-height:1.35 !important; margin:3px 0 0 !important; white-space:nowrap; }
}

/* Karte und Überschriften */
.card { background:#fff; border:1px solid var(--hd-linie); border-radius:0; box-shadow:none; padding:2.25rem 2.5rem; }
#hauptinhalt { width:100%; max-width:1000px; }
h1 { text-transform:uppercase; font-weight:600; letter-spacing:.01em; }
.card-title { font-size:22px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; border:none; padding-bottom:0; margin-bottom:2rem; }
.card-title::after { content:""; display:block; width:34px; height:10px; background:var(--hd-streifen); margin-top:12px; }
/* Überzeile: rot, Großbuchstaben, Streifenfeld davor */
.section-label, .ueberzeile { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:600; color:var(--hd-rot); text-transform:uppercase; letter-spacing:.14em; margin-bottom:1.1rem; }
.section-label::before, .ueberzeile::before { content:""; width:28px; height:10px; background:var(--hd-streifen); flex-shrink:0; }
.divider { border:none; border-top:1px solid var(--hd-linie); margin:2rem 0; }
.field { margin-bottom:1.25rem; }
.grid-2, .grid-3, .grid-4 { gap:18px; }

/* Felder */
label { font-size:13px; font-weight:600; color:var(--hd-text); text-transform:none; letter-spacing:0; margin-bottom:6px; }
label span { color:var(--hd-grau-hell) !important; font-weight:400 !important; font-size:12px !important; }
input, select, textarea { padding:11px 14px; border:1px solid var(--hd-rahmen); border-radius:0; font-size:15px; color:var(--hd-text); background:#fff;
  transition:border-color .15s, outline-color .15s; }
input:hover, select:hover, textarea:hover { border-color:var(--hd-grau-hell); }
input:focus, select:focus, textarea:focus { border-color:var(--hd-rot); box-shadow:none; outline:3px solid var(--hd-rot); outline-offset:-1px; }
input[type="checkbox"]:focus, input[type="radio"]:focus { outline-offset:1px; }
input[type="checkbox"], input[type="radio"] { accent-color:var(--hd-rot); }
input::placeholder, textarea::placeholder { color:#A3A6AB; }
input[readonly] { background:var(--hd-flaeche); color:var(--hd-grau); border-color:var(--hd-linie); }
textarea { line-height:1.55; }
select { -webkit-appearance:none; appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='%232B2D30'%20stroke-width='2'%20stroke-linecap='square'%3E%3Cpath%20d='M5%208l5%205%205-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }

/* Auswahl-Schalter (Warenrücksendung) */
.grund-toggle { background:var(--hd-flaeche); border:1px solid var(--hd-linie); padding:4px; border-radius:0; gap:4px; }
.grund-btn { border:none; background:transparent; border-radius:0; padding:11px; color:var(--hd-grau); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.grund-btn:hover:not(.active) { background:#fff; border:none; }
.grund-btn.active { background:var(--hd-rot); color:#fff; box-shadow:none; }
.position-block { border:1px solid var(--hd-linie); border-radius:0; padding:1.25rem 1.4rem; }
.pos-remove { border-radius:0; }
button[onclick="addPosition()"] { background:transparent !important; color:var(--hd-rot) !important; border:2px dashed var(--hd-rot) !important;
  border-radius:0 !important; padding:10px 18px !important; font-weight:600 !important; font-size:13px !important; text-transform:uppercase; letter-spacing:.06em; transition:background .15s; }
button[onclick="addPosition()"]:hover { background:var(--hd-rot-hauch) !important; }

/* Knöpfe: eckig, Großbuchstaben. Hauptknopf rot, zweiter Knopf anthrazit, Nebenknöpfe mit 2-px-Rahmen */
.btn-row { gap:12px; margin-top:2rem; }
button.primary, #dlBtn, #pdfBtn { height:50px; padding:0 18px; border:2px solid var(--hd-rot); border-radius:0; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  background:var(--hd-rot); color:#fff; box-shadow:none; transition:background .15s, border-color .15s; }
button.primary:hover, #dlBtn:hover { background:var(--hd-rot-dunkel); border-color:var(--hd-rot-dunkel); }
.btn-row .primary:nth-child(2), #pdfBtn { background:var(--hd-text); border-color:var(--hd-text); }
.btn-row .primary:nth-child(2):hover, #pdfBtn:hover { background:#000; border-color:#000; }
button.primary:disabled, #dlBtn:disabled, #pdfBtn:disabled { background:#C9CCD0; border-color:#C9CCD0; box-shadow:none; }
.knopf, .btn { border-radius:0; text-transform:uppercase; letter-spacing:.06em; font-weight:600; box-shadow:none; }
button:focus-visible, a:focus-visible, .tool:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--hd-rot); outline-offset:2px; }
#status { font-size:14px; }

/* Fuß: anthrazit über die ganze Breite mit roter Linie */
#mainfooter { width:100%; max-width:1000px; background:var(--hd-text) !important; border-top:none !important; text-align:center;
  box-shadow:0 0 0 100vmax var(--hd-text), 0 -4px 0 100vmax var(--hd-rot); clip-path:inset(-4px -100vmax -100vmax -100vmax);
  margin-top:3rem !important; margin-bottom:-2rem; padding:1.4rem 0 1.6rem !important; }
#mainfooter div, #mainfooter a { color:var(--hd-grau-auf-dunkel) !important; }
#mainfooter div:first-child { color:#fff !important; text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
#mainfooter a:hover { color:#fff !important; }

/* Fortschritt */
#progress-overlay { background:rgba(43,45,48,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
#progress-box { border:none; border-top:4px solid var(--hd-rot); border-radius:0; padding:2rem 2.25rem; width:380px; max-width:92vw; box-shadow:0 20px 60px rgba(43,45,48,.3); }
#progress-box h3 { text-transform:uppercase; letter-spacing:.04em; }
#progress-bar-wrap { border:none; background:var(--hd-flaeche); border-radius:0; height:22px; padding:3px; }
.progress-block { background:var(--hd-rot); border-radius:0; }
#progress-pct { font-family:inherit; font-variant-numeric:tabular-nums; }

/* Benutzerauswahl */
#benutzerauswahl { background:var(--hd-flaeche); }
#benutzerauswahl > div { width:min(380px, 92vw) !important; padding:2rem 2rem 1.75rem !important; border-radius:0 !important; border:1px solid var(--hd-linie) !important; border-top:4px solid var(--hd-rot) !important; box-shadow:none !important; }
#benutzerauswahl > div > p { font-size:18px !important; text-transform:uppercase; letter-spacing:.04em; font-weight:600 !important; color:var(--hd-text) !important; border-bottom:none !important; padding-bottom:0 !important; margin-bottom:1.25rem !important; }
#userBtnWrap { gap:10px !important; }
#userBtnWrap button { display:block !important; width:100% !important; margin-top:0 !important; padding:14px 16px !important; background:#fff !important;
  border:1px solid var(--hd-linie) !important; border-radius:0 !important; font-size:15px !important; font-weight:600 !important; color:var(--hd-text) !important;
  text-align:left !important; transition:border-color .15s, background .15s; }
#userBtnWrap button:hover { border-color:var(--hd-rot) !important; background:var(--hd-rot-hauch) !important; }
/* Online: Auswahl verborgen, solange personen.js den angemeldeten Benutzer erfragt */
.anmeldung-pruefen .wahl { visibility:hidden; }

/* Schmale Bildschirme */
@media (max-width:860px) { .grid-4 { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) {
  body { padding-left:1rem; padding-right:1rem; }
  .card { padding:1.5rem 1.25rem; }
  .grid-2, .grid-3, .grid-4, .btn-row, div:has(> #dlBtn) { grid-template-columns:1fr !important; }
  body > header { grid-template-columns:auto 1fr; row-gap:12px; padding:1rem 0; }
  body > header > div:not(.logo-text) { order:0; justify-self:end; }
  body > header .logo-text { order:1; grid-column:1 / -1; padding-left:0; border-left:none; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }
/* Windows-Programm „HERDRiCH Büro“ (programm.js setzt html.im-programm, Wunsch Otis Herdrich, 4. November 2026):
   wirkt wie ein Windows-Programm. Fester Kopf ohne Fuß, Leiste links mit den Anwendungen (#hd-leiste), markieren nur
   Inhalt und Felder, keine Webseiten-Gesten. Im Browser und auf dem Handy gilt nichts davon. */
html.im-programm { --hd-leiste:84px; scroll-padding-top:var(--hd-kopf, 0px); }
html.im-programm, html.im-programm body { overflow-x:clip; }
html.im-programm body { padding-left:calc(var(--hd-leiste) + 1.5rem); }
html.im-programm body::before { content:""; position:fixed; left:0; top:0; bottom:0; width:var(--hd-leiste); background:var(--hd-text); z-index:10001; }   /* Leiste schon vor dem Aufbau */
html.im-programm body > header { position:sticky; top:0; view-transition-name:hd-kopf; }
html.im-programm #mainfooter, html.im-programm #zur-uebersicht, html.im-programm #zur-verwaltung, html.im-programm #programm { display:none !important; }
html.im-programm .leiste { top:calc(var(--hd-kopf, 0px) + 16px); }                    /* Rahmenaufträge, Spesen */
html.im-programm main > section:last-child { top:calc(var(--hd-kopf, 0px) + 12px); }  /* Vorschau der Werkzeug-Skizze */
html.im-programm body > header, html.im-programm #hd-leiste, html.im-programm button, html.im-programm label, html.im-programm summary,
html.im-programm h1, html.im-programm h2, html.im-programm h3, html.im-programm h4, html.im-programm .card-title, html.im-programm .section-label,
html.im-programm .tool, html.im-programm .vs, html.im-programm .weitere, html.im-programm .reiter, html.im-programm .punkt, html.im-programm .knopf, html.im-programm .btn,
html.im-programm .f-kopf, html.im-programm .ansichtwahl, html.im-programm .tools-leiste { -webkit-user-select:none; user-select:none; }
html.im-programm img, html.im-programm a { -webkit-user-drag:none; }
#hd-leiste { position:fixed; left:0; top:0; bottom:0; z-index:10002; width:var(--hd-leiste); display:flex; flex-direction:column; gap:2px; padding:10px 0;
  background:var(--hd-text); border-right:1px solid rgba(255,255,255,.08); overflow-y:auto; scrollbar-width:none; view-transition-name:hd-leiste; }
#hd-leiste .hd-l { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px 9px; color:var(--hd-grau-auf-dunkel);
  text-decoration:none; font:600 10.5px/1.15 var(--hd-schrift); letter-spacing:.04em; text-transform:uppercase; text-align:center; cursor:default; }
#hd-leiste .hd-l svg { flex:none; }
#hd-leiste .hd-l span { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
#hd-leiste .hd-l:hover { color:#fff; background:rgba(255,255,255,.06); }
#hd-leiste .hd-l.an { color:#fff; background:rgba(255,255,255,.08); }
#hd-leiste .hd-l.an::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px; background:var(--hd-rot); }
#hd-leiste .hd-l.unten { margin-top:auto; }
#hd-leiste .hd-l:focus-visible { outline:3px solid var(--hd-rot); outline-offset:-3px; }
@media (max-width:640px) {
  html.im-programm { --hd-leiste:56px; }
  html.im-programm body { padding-left:calc(var(--hd-leiste) + 12px) !important; }
  #hd-leiste .hd-l span { display:none; }
}

/* Druck der Seite selbst (Kontoumsätze, Lieferrückstände, Werkzeug-Skizze): ohne Oberflächenfarben */
@media print {
  /* Druck bleibt wie vor der Umstellung: alte Werte der Variablen, Calibri, keine Großbuchstaben */
  :root { --hd-rot:#C8102E; --hd-rot-dunkel:#A10D26; --hd-text:#1A1A1A; --hd-grau:#5F5F68; --hd-grau-hell:#8E8E98; --hd-rahmen:#D6D6DD; --hd-linie:#E4E4E9; --hd-flaeche:#F5F5F7; --hd-schrift:Calibri, Arial, sans-serif; }
  body, button, input, select, textarea { font-family:Calibri, Arial, sans-serif; }
  h1 { text-transform:none; letter-spacing:normal; font-weight:bold; }
  body > header, #mainfooter { box-shadow:none !important; clip-path:none !important; }
  body > header::after { display:none; }
  html.im-programm body { padding-left:0 !important; }
  html.im-programm body::before, #hd-leiste { display:none !important; }
  html.im-programm body > header { position:static; }
}