/* Kohlweg Preisblätter: Optik-Schicht.
   Look nach Marco 12737 (18.10.2026): PC ab 1024 px wie Idee A (Blatt wie das Papier), Handy mit dem Aufbau von Idee B
   im Aussehen von Idee A. Ein Branding für beide: IBM Plex Sans, Tannengrün, hellgrüne Balken, Feldflächen statt Striche.
   Rundung höchstens 6 px, Etiketten 4 px, rund sind nur Punkte.
   Die Logik in app.js hängt nur an IDs und data-k; die Klassen hier lassen sich frei tauschen. */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/fonts/plex-normal-latin.woff2?v=1') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/fonts/plex-normal-latin-ext.woff2?v=1') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 100 700; font-display: swap; src: url('/fonts/plex-italic-latin.woff2?v=1') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 100 700; font-display: swap; src: url('/fonts/plex-italic-latin-ext.woff2?v=1') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --desk: #E7EBE8;
  --papier: #FFFFFF;
  --tinte: #1C2420;
  --leise: #5E6A64;
  --blass: #8A958F;
  --balken: #E2EAE5;
  --balken-stark: #C9D8CE;
  --feld: #F1F4F2;
  --gruen: #2F5A43;
  --gruen-dunkel: #23453A;
  --rot-flaeche: #FBE4DF;
  --rot-text: #9A3325;
  --gelb-flaeche: #F4E8CC;
  --gelb-text: #6B4E12;
  --blau-flaeche: #E2E9F0;
  --blau-text: #34506A;
  --grau-flaeche: #ECEEEC;
  --grau-text: #6B736F;
  --r: 6px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 16px/1.4 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
body.ansicht-liste { background: var(--desk); }
button, input, select, textarea { font: inherit; color: inherit; }
.laden { padding: 32px 16px; color: var(--leise); }
.versteckt { display: none !important; }
.klein { font-size: 13px; color: var(--leise); }
.marke { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--r);
  background: var(--balken); color: var(--gruen-dunkel); font-weight: 600; cursor: pointer; text-decoration: none;
}
.knopf.haupt { background: var(--gruen); color: #fff; }
.knopf.gross { min-height: 56px; font-size: 18px; padding: 0 22px; }
.knopf.warn { background: var(--rot-flaeche); color: var(--rot-text); }
.knopf.leise { background: none; color: var(--gruen); }
.knopf:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--gruen); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Felder: Fläche statt Strich */
.feld, .anmeldung input {
  min-height: 48px; padding: 11px 12px; border: 0; border-radius: var(--r);
  background: var(--feld); font-size: 16px; width: 100%; min-width: 0; outline: none;
}
textarea.feld { min-height: 96px; resize: vertical; line-height: 1.5; }
.feld:focus, .anmeldung input:focus { background: var(--papier); box-shadow: inset 0 0 0 2px var(--gruen); }
.feld.stamm { font-style: italic; }
.feld[readonly] { color: #4A544F; }
.feld[readonly]:focus { background: var(--feld); box-shadow: none; }
.feld.rot { background: var(--rot-flaeche); }
.feld.hellrot, .feld.unklar { background: #FCEEEA; box-shadow: inset 0 0 0 1px #E8B9AE; }
.hinweis-rot { color: var(--rot-text); font-size: 13px; margin-top: 5px; }
textarea.feld.einzeilig { min-height: 48px; resize: none; overflow: hidden; line-height: 1.4; display: block; }
input[type="date"].feld { -webkit-appearance: none; appearance: none; }
select.feld { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }

/* Etiketten: 4 px, keine Pillen */
.etikett, .status { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 4px; white-space: nowrap; font-style: normal; }
.status.gueltig { background: var(--balken); color: var(--gruen-dunkel); }
.status.kommt { background: var(--blau-flaeche); color: var(--blau-text); }
.status.abgelaufen, .status.offen { background: var(--grau-flaeche); color: var(--grau-text); }
.etikett { background: var(--balken); color: var(--gruen-dunkel); }
.etikett.beispiel { background: var(--gelb-flaeche); color: var(--gelb-text); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.status.verworfen { background: var(--grau-flaeche); color: var(--grau-text); }
.etikett.typ-schlaegerer { background: var(--blau-flaeche); color: var(--blau-text); }
.etikett.typ-slowenen { background: var(--gelb-flaeche); color: var(--gelb-text); }
.etikett.holz { background: var(--feld); color: var(--tinte); font-weight: 500; font-size: 13px; }
.etikett.holz b { color: var(--gruen-dunkel); font-weight: 700; margin-right: 2px; }

/* Vorschlagsliste */
.suche, .namefeld { position: relative; }
.vorschlaege {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 0; list-style: none;
  background: var(--papier); border-radius: var(--r); overflow-y: auto; max-height: 360px;
  box-shadow: 0 6px 20px rgba(28,36,32,.14), 0 0 0 1px rgba(28,36,32,.05);
}
.vorschlaege li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-height: 56px; cursor: pointer; }
.vorschlaege li[aria-selected="true"] { background: var(--balken); }
.vorschlaege li[aria-selected="true"] .etikett { background: var(--papier); }
.vorschlaege .text { flex: 1; min-width: 0; }
.vorschlaege .text > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschlaege .text > .haupt { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.vorschlaege .haupt { font-weight: 500; }
.vorschlaege .neben { font-size: 13px; color: var(--leise); }

/* Anmeldung */
.anmeldung { max-width: 420px; margin: 0 auto; padding: 40px 16px; }
.anmeldung h1 { font-size: 26px; font-weight: 600; margin: 2px 0 4px; }
.anmeldung .wahl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 24px 0 18px; } /* vier Konten seit 04.11.: zwei mal zwei, „Martina-Büro“ ohne Umbruch */
.anmeldung .wahl button { min-height: 56px; border: 0; border-radius: var(--r); background: var(--feld); color: var(--tinte); font-size: 17px; font-weight: 600; cursor: pointer; }
.anmeldung .wahl button[aria-pressed="true"] { background: var(--gruen); color: #fff; }
.anmeldung label { display: block; font-size: 13px; color: var(--leise); margin: 8px 0 4px; }
.anmeldung .knopf { width: 100%; margin-top: 16px; }
.meldung { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r); background: var(--rot-flaeche); color: var(--rot-text); }
.meldung.gut { background: var(--balken); color: var(--gruen-dunkel); }

/* ---------- Übersicht (Handy wie B1) ---------- */
.kopf-liste { background: var(--papier); padding: 14px 16px 0; padding-top: max(14px, env(safe-area-inset-top)); }
.kopf-zeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; max-width: 1240px; margin: 0 auto; }
.kopf-liste h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.kopf-rechts { display: flex; align-items: center; gap: 8px; }
.wer-chip { font-size: 14px; font-weight: 500; color: var(--leise); background: var(--feld); padding: 6px 10px; border-radius: 4px; }
.seite-liste { max-width: 1240px; margin: 0 auto; padding-bottom: 110px; }
.werkzeug { background: var(--papier); padding: 10px 16px; }
.such-zeile { display: flex; gap: 8px; }
.such-zeile .suche { flex: 1; min-width: 0; }
.such-zeile .feld { min-height: 50px; }
.filterknopf { position: relative; flex: none; width: 50px; min-height: 50px; border: 0; border-radius: var(--r); background: var(--feld); color: var(--gruen-dunkel); cursor: pointer; display: grid; place-items: center; }
.filterknopf svg { width: 22px; height: 22px; }
.filterknopf[aria-expanded="true"] { background: var(--balken); }
.filterzahl { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; border-radius: 50%; background: var(--gruen); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.umschalter { display: flex; gap: 6px; margin: 10px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.umschalter::-webkit-scrollbar { display: none; }
.umschalter button { flex: 1 0 auto; min-height: 44px; min-width: 44px; border: 0; border-radius: 4px; background: var(--feld); font-size: 13px; font-weight: 500; color: var(--tinte); cursor: pointer; padding: 0 6px; white-space: nowrap; }
.umschalter button[aria-pressed="true"] { background: var(--gruen); color: #fff; font-weight: 600; }
.filter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.filter > div { min-width: 0; }
.filter.zu { display: none; }
.filter label { display: block; font-size: 13px; color: var(--leise); margin-bottom: 4px; }
.infozeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 6px; font-size: 13px; color: var(--leise); min-height: 32px; }
.infozeile .stand { margin-left: auto; color: var(--blass); }

.karten { display: block; padding-top: 6px; }
.karte { display: block; background: var(--papier); margin: 0 0 6px; }
.karte-auf { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; padding: 12px 16px 2px; cursor: pointer; }
.karte-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 6px 2px 16px; }
.karte .oben { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.karte .name { font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.karte .name .etikett { margin-left: 6px; vertical-align: 2px; }
.karte .zeile { margin-top: 2px; font-size: 14px; color: var(--leise); overflow-wrap: anywhere; }
.karte .unten { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: 8px; }
.karte .unten:has(.tags:empty) { display: none; }
.karte .wann { font-size: 12px; color: var(--blass); white-space: nowrap; }
.karte.alt { opacity: .62; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.leer { padding: 32px 16px; text-align: center; color: var(--leise); background: var(--papier); }
.beispiele-zeile { padding: 16px; margin: 0; }
.geraete { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding: 4px 16px 16px; font-size: 14px; color: var(--leise); }
.geraete .knopf { min-height: 44px; padding: 0 10px; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); background: var(--papier); box-shadow: 0 -6px 18px rgba(28,36,32,.07); }
.dock .knopf { width: 100%; }

table.liste { display: none; width: 100%; border-collapse: separate; border-spacing: 0 6px; }
table.liste th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gruen-dunkel); background: var(--balken); padding: 9px 12px; }
table.liste td { background: var(--papier); padding: 12px; vertical-align: top; font-size: 15px; }
table.liste tbody tr { cursor: pointer; }
table.liste tbody tr:hover td { background: #FAFBFA; }
table.liste tr.alt td { color: var(--leise); }
table.liste tr.alt .tags, table.liste tr.alt .status { opacity: .7; }

/* ---------- Blatt: Kopfleiste und Band ---------- */
.leiste {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 4px 16px; padding-top: max(4px, env(safe-area-inset-top)); background: var(--papier);
  box-shadow: 0 1px 0 rgba(28,36,32,.08);
}
.zurueck { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; border: 0; background: none; color: var(--gruen); font-size: 16px; font-weight: 500; cursor: pointer; padding: 0 4px 0 0; white-space: nowrap; }
.zurueck svg { width: 20px; height: 20px; }
.leiste .titel { display: none; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.leiste .titel #blatt-titel { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste .rechts { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.leiste .wer { display: none; font-size: 14px; color: var(--leise); white-space: nowrap; }
.speicherstand { font-size: 13px; color: var(--leise); display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.speicherstand::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blass); }
.speicherstand:empty::before { display: none; }
.speicherstand.gut::before { background: #5E9A73; }
.speicherstand.fehler { color: var(--rot-text); font-weight: 600; }
.speicherstand.fehler::before { background: var(--rot-text); }
#band { position: sticky; top: 56px; z-index: 19; }
.band { padding: 12px 16px; background: var(--gelb-flaeche); color: var(--gelb-text); font-weight: 500; text-align: center; }
#band[data-art="info"]::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0110 0v3h1a1 1 0 011 1v9a1 1 0 01-1 1H6a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h6V7a3 3 0 00-6 0v3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0110 0v3h1a1 1 0 011 1v9a1 1 0 01-1 1H6a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h6V7a3 3 0 00-6 0v3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.band.rot { background: var(--rot-flaeche); color: var(--rot-text); text-align: left; }
.band .knopf { background: var(--papier); }
.band-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }
.band.rot .band-knoepfe, .band.entwurf .band-knoepfe { justify-content: flex-start; }
.band.entwurf { text-align: left; }
.band[data-art="verworfen"] { background: var(--grau-flaeche); color: var(--tinte); }
.entwurf-wahl { margin-top: 10px; display: grid; gap: 10px; }
.wahl-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wahl-name { flex: 1 0 100%; font-size: 13px; }
.wahl-zeile .knopf { font-weight: 500; min-height: 44px; overflow-wrap: anywhere; text-align: left; }
.wahl-zeile .knopf[aria-pressed="true"] { background: var(--gruen); color: #fff; }
#liste .band, #blattseite > .band { margin: 12px 16px; border-radius: var(--r); }

/* ---------- Blatt am Handy (Aufbau B, Aussehen A) ---------- */
.seite-blatt { padding-bottom: 60px; }
.vk-kopf { padding: 14px 16px 16px; background: var(--papier); border-bottom: 6px solid var(--desk); }
.vk-kopf .vk-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
.vk-kopf .vk-name > span:first-child { font-size: 22px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.vk-kopf .vk-name .leer { color: var(--blass); font-weight: 500; padding: 0; background: none; text-align: left; }
.vk-kopf .vk-zeile { margin-top: 4px; font-size: 14px; color: var(--leise); overflow-wrap: anywhere; }
#formular { display: flex; flex-direction: column; }
.zwei { display: contents; }
.abschnitt { scroll-margin-top: 64px; }
.balken { margin: 0; background: var(--balken); padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-dunkel); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.balken small { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--leise); text-align: right; }
.balken small i { color: var(--tinte); }
.inhalt { padding: 14px 16px 8px; }
.reihe { margin-bottom: 12px; }
.reihe > label { display: block; font-size: 13px; color: var(--leise); margin-bottom: 4px; }
.mit-einheit { display: flex; align-items: center; gap: 10px; }
.mit-einheit .einheit { white-space: nowrap; color: var(--leise); font-size: 14px; }
.mit-einheit .feld.kurz { max-width: 110px; }
.zeitraum { display: flex; align-items: center; gap: 8px; }
.zeitraum .feld { flex: 1 1 0; }
.zeitraum span { color: var(--leise); font-size: 14px; }
.notiz { margin-top: 14px; }
.notiz label, .unterschrift label { display: block; font-size: 13px; color: var(--leise); margin-bottom: 4px; }
.abschnitt.text { padding: 12px 16px 4px; font-size: 13px; color: var(--leise); line-height: 1.5; }
.abschnitt.text p { margin: 0 0 6px; }
.kaeufer { margin: 0; padding: 12px 16px; font-size: 12px; color: var(--leise); line-height: 1.5; }
.kaeufer b { font-weight: 600; color: var(--tinte); }
.kaeufer span { margin: 0 6px; color: var(--blass); }
.stand-zeile { margin: 0; padding: 8px 16px 0; font-size: 12px; color: var(--blass); }
.verwerfen-zeile { margin: 0; padding: 24px 16px 0; order: 12; }
.unterschrift { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Handy-Reihenfolge: Verkäufer zuerst (Aufbau B) */
.abschnitt.verkaeufer { order: 1; }
.abschnitt.vereinbarung { order: 2; }
.abschnitt.vs { order: 3; }
.abschnitt.schlaegerer { order: 4; }
.abschnitt.bloche { order: 5; }
.abschnitt.saetze { order: 6; }
.abschnitt.sortiment { order: 7; }
.abschnitt.agb { order: 8; }
.abschnitt.unterschriften { order: 9; }
.kaeufer { order: 10; }
.stand-zeile { order: 11; }

/* Preise am Handy: Holzart-Umschalter wie B3, Aussehen wie A3 */
.preise-tisch, .sorti-tisch { display: none; }
.reiter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.reiter button { min-height: 48px; border: 0; border-radius: var(--r) var(--r) 0 0; background: var(--feld); color: var(--leise); font-size: 15px; font-weight: 500; cursor: pointer; padding: 0 2px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.reiter button[aria-selected="true"] { background: var(--balken); color: var(--gruen-dunkel); font-weight: 600; }
.reiter .punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); }
.reiter, .raster { margin-left: -16px; margin-right: -16px; }
.reiter { padding: 0 16px; }
.raster { display: grid; grid-template-columns: 40px repeat(4, minmax(0, 1fr)); gap: 8px 6px; align-items: center; background: var(--balken); padding: 12px 16px 14px; }
.raster .kopf { font-size: 13px; font-weight: 600; text-align: center; color: var(--gruen-dunkel); }
.raster .kopf.links { text-align: left; font-weight: 500; color: var(--leise); font-size: 12px; }
.raster .sorte { font-weight: 600; font-size: 12px; line-height: 1.15; }
.raster .laenge-anzeige { display: block; font-size: 12px; font-weight: 400; color: var(--leise); margin-top: 2px; }
.raster .feld { background: var(--papier); padding: 8px 10px 8px 4px; text-align: right; min-height: 48px; letter-spacing: -.02em; }
.raster .feld[readonly]:focus { background: var(--papier); }
.laengen-titel { margin-top: 14px; font-size: 13px; color: var(--leise); }
.laengen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.laengen label { display: block; font-size: 12px; color: var(--leise); margin-bottom: 2px; }
.laengen .feld { text-align: center; }
.sorti-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 88px 88px; gap: 8px; align-items: center; margin-bottom: 8px; }
.sorti-zeile.kopf { font-size: 12px; font-weight: 600; color: var(--gruen-dunkel); text-align: center; margin-bottom: 4px; }
.sorti-zeile .name { font-size: 15px; line-height: 1.25; }
.sorti-zeile .feld { text-align: right; padding: 8px 10px 8px 4px; letter-spacing: -.01em; }

/* Verlauf und Hinweis */
.dialog-hg { position: fixed; inset: 0; background: rgba(28,36,32,.35); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px; overflow-y: auto; }
.dialog { background: var(--papier); border-radius: var(--r); width: 100%; max-width: 640px; padding: 0 0 8px; overflow: hidden; }
.dialog h3 { margin: 0; padding: 2px 4px 2px 16px; background: var(--balken); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-dunkel); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dialog h3 .knopf { text-transform: none; letter-spacing: 0; font-size: 15px; }
#verlauf-inhalt { padding: 0 16px; }
.fassung { padding: 12px 0; }
.fassung + .fassung { box-shadow: 0 -1px 0 var(--balken); }
.fassung .wann { font-weight: 600; }
.fassung ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--leise); }
.fassung li { overflow-wrap: anywhere; }
.hinweisbox { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--tinte); color: #fff; padding: 12px 18px; border-radius: var(--r); z-index: 60; max-width: calc(100% - 32px); width: max-content; display: flex; align-items: center; gap: 14px; }
.hinweisbox .knopf { background: #fff; color: var(--gruen-dunkel); min-height: 44px; flex: none; }

/* ---------- PC ab 1024 px: Blatt wie das Papier (Idee A, A4) ---------- */
@media (min-width: 1024px) {
  body.ansicht-blatt { background: var(--desk); }
  .kopf-liste { padding: 18px 28px 14px; }
  .seite-liste { display: flex; flex-direction: column; padding: 0 28px 40px; }
  .werkzeug { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 16px; border-radius: var(--r); }
  .such-zeile { grid-column: 1; }
  .umschalter { grid-column: 2; margin: 0; padding: 0; overflow: visible; }
  .umschalter button { flex: none; padding: 0 16px; }
  .filterknopf { display: none; }
  .filter, .filter.zu { display: grid; grid-column: 1 / -1; grid-template-columns: 180px 180px 200px minmax(0, 320px); margin-top: 0; }
  .infozeile { grid-column: 1 / -1; margin-top: 0; }
  .karten { display: none; }
  table.liste { display: table; }
  .dock { position: static; order: -1; background: none; box-shadow: none; padding: 0; margin: 14px 0; display: flex; justify-content: flex-end; }
  .dock .knopf { width: auto; }
  .hinweisbox { bottom: 24px; }

  .leiste { padding: 4px 28px; gap: 24px; }
  .leiste .titel { display: flex; }
  .leiste .rechts { flex: none; gap: 20px; }
  .leiste .wer { display: inline; }
  .speicherstand { font-size: 14px; }
  .vk-kopf { display: none; }
  .seite-blatt { padding: 18px 16px 60px; }
  .papier { max-width: 1180px; margin: 0 auto; background: var(--papier); padding: 22px 32px 28px; box-shadow: 0 1px 3px rgba(28,36,32,.08), 0 12px 32px rgba(28,36,32,.06); }
  #formular { display: block; }
  .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .zwei.oben { margin-top: 6px; }
  .kaeufer { padding: 0; font-size: 13px; }
  .inhalt { padding: 8px 0 4px; }
  .abschnitt.vereinbarung .balken, .abschnitt.vs .balken, .abschnitt.bloche .balken {
    background: none; padding: 10px 0 2px; font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--tinte);
  }
  .abschnitt.bloche .balken { margin-top: 20px; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--gruen-dunkel); }
  .abschnitt.verkaeufer .balken, .abschnitt.schlaegerer .balken, .abschnitt.sortiment .balken, .abschnitt.unterschriften .balken { margin-top: 18px; padding: 8px 14px; border-radius: 3px; }
  .reihe { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 12px; margin-bottom: 5px; }
  .reihe > label { font-size: 14px; margin: 0; padding-top: 12px; }
  .verwerfen-zeile { padding: 24px 0 0; text-align: right; }
  .geraete { padding: 4px 0 16px; }
  .preise-handy { max-width: 600px; }
  .reiter, .raster { margin-left: 0; margin-right: 0; }
  .reiter { padding: 0; }
  .reiter button:first-child { border-top-left-radius: var(--r); }
  .reiter button:last-child { border-top-right-radius: var(--r); }
  .raster { border-radius: 0 0 var(--r) var(--r); }
  /* Felder 40 px hoch nur mit Maus; mit Finger (auch iPad quer) bleiben 48 px und 16 px Schrift */
  @media (pointer: fine) {
    .feld { min-height: 40px; padding: 7px 10px; }
    textarea.feld { min-height: 84px; }
    textarea.feld.einzeilig { min-height: 40px; }
    .reihe > label { padding-top: 10px; }
  }
  .zeitraum .feld { max-width: 170px; }
  table.preise { border-collapse: separate; border-spacing: 2px; table-layout: fixed; margin: 4px -2px 0; width: calc(100% + 4px); }
  table.preise col.c-sorte { width: 76px; }
  table.preise col.c-laenge { width: 40px; }
  table.preise th { background: var(--balken); font-size: 12px; font-weight: 600; color: var(--gruen-dunkel); height: 30px; text-align: left; padding: 2px 4px; line-height: 1.2; }
  table.preise tr.unter th { background: #EEF3F0; font-weight: 500; color: var(--leise); }
  table.preise td { padding: 0; }
  table.preise td.sorte { background: #F6F7F6; font-size: 13px; padding: 0 6px; white-space: nowrap; }
  table.preise .feld { min-height: 42px; padding: 6px 3px; text-align: right; background: #F6F7F6; border-radius: 0; letter-spacing: -.02em; }
  table.preise .feld:focus { background: var(--papier); }
  .abschnitt.text { padding: 12px 0 0; }
  .sorti-tisch { display: block; }
  .sorti-handy { display: none; }
  table.sorti { border-collapse: separate; border-spacing: 3px; table-layout: fixed; margin: 4px -3px 0; width: calc(100% + 6px); }
  table.sorti th { background: var(--balken); text-align: left; font-size: 12px; font-weight: 600; color: var(--gruen-dunkel); height: 30px; padding: 0 8px; }
  table.sorti th.zahl { width: 96px; }
  table.sorti td { padding: 0; }
  table.sorti td.name { background: #F6F7F6; font-size: 14px; padding: 0 8px; }
  table.sorti .feld { border-radius: 0; background: #F6F7F6; text-align: right; }
  table.sorti .feld:focus { background: var(--papier); }
  .notiz { margin-top: 10px; }
  .unterschrift { grid-template-columns: 1fr 1fr; gap: 48px; }
  .stand-zeile { padding: 14px 0 0; }
}
/* Preistabelle wie auf dem Papier nur mit Maus ab 1200 px; darunter und mit Finger der Holzart-Umschalter (nichts wird abgeschnitten) */
@media (min-width: 1200px) and (pointer: fine) {
  .preise-tisch { display: block; }
  .preise-handy { display: none; }
}

/* Feedback Mutter 22.10.2026 (drei Videos): Vertreter, EDV-Nr. im Balken, Zuordnung, Stärkeklassen, Trennlinien, Sortiment Um/Fm, Filter */
.kaeufer { font-size: 13px; }
.kaeufer b { white-space: nowrap; }
.person-balken { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 18px; }
.person-balken small { margin-left: auto; }
.edv-gruppe { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--leise); }
.edv-gruppe .feld { width: 120px; min-height: 36px; padding: 5px 9px; background: var(--papier); }
.zuordnung { display: flex; gap: 6px; }
.zuordnung button { flex: 0 0 auto; min-width: 104px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 4px; background: var(--feld); color: var(--tinte); font-size: 16px; font-weight: 500; cursor: pointer; }
.zuordnung button[aria-pressed="true"] { background: var(--gruen); color: #fff; font-weight: 600; }
.zuordnung button:disabled { cursor: default; opacity: .75; }
.raster .klasse-anzeige { display: block; font-weight: 500; color: var(--gruen-dunkel); margin-top: 2px; }
.sorti-zeile { grid-template-columns: minmax(0, 1fr) repeat(3, 76px); gap: 6px; }
.sorti-zeile .name.frei .feld { text-align: left; padding: 8px 10px; letter-spacing: 0; }
/* Handy: Wortfeld der freien Zeile über die ganze Breite, die Zahlen darunter in ihren Spalten; lange feste Wörter trennen statt überlaufen */
.sorti-zeile.frei .name { grid-column: 1 / -1; }
.sorti-zeile.frei .name + .feld { grid-column: 2; }
.sorti-zeile .name { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.name.frei .feld { box-shadow: inset 0 0 0 1px var(--balken-stark); }
.name.frei .feld:focus { box-shadow: inset 0 0 0 2px var(--gruen); }
.umschalter { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
.umschalter button[data-zuordnung="Forst"] { margin-right: 8px; }
@media (min-width: 1024px) {
  .kaeufer { font-size: 14px; }
  .abschnitt.vs .inhalt { padding-top: 6px; }
  .umschalter { flex-wrap: nowrap; }
  table.preise col.c-klasse { width: 44px; }
  /* Zahlen mit Luft zum rechten Rand (Marco 01.11. 20:12) */
  table.preise .feld { padding-left: 2px; padding-right: 10px; }
  table.preise th { padding: 4px 6px; }
  table.preise col.c-laenge { width: 48px; }
  table.preise td.sorte { padding: 0 10px; }
  /* Holzart-Gruppen: dünne helle Linie mitten in einem breiteren weißen Spalt (Marco 01.11. 20:10: dezenter, mehr Luft) */
  table.preise .grenze { position: relative; border-left: 4px solid var(--papier); }
  table.preise .grenze::before { content: ""; position: absolute; left: -3px; top: -2px; bottom: 0; width: 1px; background: #A9C2B3; }
  table.preise thead tr:first-child .grenze::before { top: 0; }
  table.preise th.klasse { background: none; }
  table.preise td.klasse { background: #F6F7F6; font-size: 12px; font-weight: 600; color: var(--gruen-dunkel); text-align: center; white-space: nowrap; padding: 0 1px; }
  table.sorti th.zahl { width: 88px; }
  table.sorti td.name.frei { padding: 0; background: none; }
  table.sorti td.name.frei .feld { text-align: left; padding-left: 8px; }
  table.sorti td:not(.name) .feld { padding-left: 6px; padding-right: 12px; }
}
@media (min-width: 1024px) and (pointer: fine) {
  .zuordnung button { min-height: 40px; }
}

/* Fixrunde 2: neue Blätter, die nur im Gerät liegen (N2) */
#entwuerfe .band { margin: 10px 0 0; border-radius: var(--r); }

/* Fixrunde 3 (P3): ruhige Bewegungen, 180 bis 260 ms, ohne Federn; bei „Bewegung reduzieren“ keine */
html, body { overflow-x: clip; }
@keyframes kp-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes kp-blenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes kp-rein { from { transform: translateX(100%); } to { transform: none; } }
@keyframes kp-raus { from { transform: none; } to { transform: translateX(100%); } }
@keyframes kp-hinweis { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.band:not(.versteckt) { animation: kp-auf .2s ease-out; }
.vorschlaege:not(.versteckt) { animation: kp-auf .18s ease-out; }
.filter.auf { animation: kp-auf .22s ease-out; }
.dialog-hg { animation: kp-blenden .2s ease-out; }
.dialog { animation: kp-auf .24s ease-out; }
.hinweisbox { animation: kp-hinweis .22s ease-out; }
#app.rein { animation: kp-rein .26s cubic-bezier(.2, .7, .3, 1); }
.wisch-raus { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; box-shadow: -10px 0 24px rgba(28,36,32,.10); animation: kp-raus .24s cubic-bezier(.4, 0, .7, 1) forwards; }
.wisch-raus .leiste { position: relative; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Feedback Mutter 01.11.2026 (drei Looms, Marcos Kommentare): Logo, Vertreter, Stempel, Um/Fm-Rechnung, Teilen/PDF/Drucken */
.briefkopf { order: 10; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.briefkopf .kaeufer { order: 0; flex: 1; min-width: 0; padding: 0; }
.briefkopf .logo { flex: none; width: 92px; height: auto; }

.symbol { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--gruen); cursor: pointer; }
.symbol svg { width: 22px; height: 22px; }
.symbol:hover { background: var(--feld); }
.symbol:focus-visible { outline: 2px solid var(--gruen); outline-offset: -2px; }
.symbol[aria-busy="true"] { opacity: .4; cursor: progress; }
.aktionen, .mini-aktionen { display: flex; align-items: center; gap: 2px; }
.mini-aktionen .symbol { color: var(--gruen-dunkel); }

/* Handy: Leiste in zwei Reihen, oben Zurück und die drei Symbole, darunter Speicherstand und Verlauf */
.leiste { flex-wrap: wrap; row-gap: 0; }
.leiste .aktionen { margin-left: auto; }
.leiste .rechts { flex: 1 0 100%; min-height: 30px; padding-bottom: 4px; }
.leiste .rechts .link { min-height: 30px; font-size: 13px; }
#band { top: var(--leiste-h, 56px); }
.abschnitt { scroll-margin-top: calc(var(--leiste-h, 56px) + 8px); }

.stempel-wahl { margin-top: 12px; }
.stempel-titel { display: block; font-size: 13px; color: var(--leise); margin-bottom: 4px; }
.stempel-knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.stempel-knoepfe button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 48px; padding: 6px 4px 5px; border: 0; border-radius: 4px; background: var(--feld); color: var(--tinte); font-size: 13px; font-weight: 500; cursor: pointer; }
.stempel-knoepfe img { display: block; width: 100%; max-width: 116px; height: auto; border-radius: 3px; }
.stempel-knoepfe button[aria-pressed="true"] { background: var(--gruen); color: #fff; font-weight: 600; }
.stempel-knoepfe button[aria-pressed="true"] img { background: #fff; }
.stempel-knoepfe button:disabled { cursor: default; opacity: .75; }
.stempel-gross { margin-top: 10px; display: flex; justify-content: center; }
.stempel-gross img { display: block; width: 100%; max-width: 260px; height: auto; }

/* Für die Stammdaten vormerken (Punkt 12): unter den Feldern von Verkäufer und Schlägerer, ganze Breite */
.stamm-auf { margin-top: 10px; padding: 10px 12px; border-radius: 4px; background: var(--balken); }
.sa-neu { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 500; cursor: pointer; }
.sa-neu input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--gruen); }
.sa-neu input:disabled + span { opacity: .75; }
.stamm-auf[data-art="erg"] .sa-neu, .stamm-auf[data-art="neu"] .sa-erg { display: none; }
.sa-erg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sa-frage { font-size: 16px; font-weight: 500; }
.sa-knoepfe { display: flex; gap: 6px; }
.sa-knoepfe button { min-width: 72px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--papier); color: var(--tinte); font-size: 16px; font-weight: 500; cursor: pointer; }
.sa-knoepfe button[aria-pressed="true"] { background: var(--gruen); color: #fff; font-weight: 600; }
.sa-knoepfe button:disabled { cursor: default; opacity: .75; }
.sa-text { margin: 6px 0 0; font-size: 13px; color: var(--leise); }
.sa-text:empty { display: none; }
.sa-text.offen { color: var(--gelb-text); font-weight: 500; }
.feld.pflicht { background: var(--gelb-flaeche); box-shadow: inset 0 0 0 1px #D9B26A; }

.rechen-blase { position: absolute; z-index: 40; padding: 3px 8px; border-radius: 4px; background: var(--balken); color: var(--gruen-dunkel); font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(28,36,32,.12); }

table.liste th.aktion-kopf { width: 1%; }
table.liste td.aktion-zelle { width: 1%; white-space: nowrap; padding: 4px 6px; vertical-align: middle; }

@media (min-width: 1024px) {
  .briefkopf { padding: 0 0 12px; gap: 24px; box-shadow: 0 1px 0 var(--balken); }
  .briefkopf .logo { width: 150px; }
  .leiste { flex-wrap: nowrap; }
  .leiste .aktionen { margin-left: 0; }
  .leiste .rechts { flex: none; min-height: 0; padding-bottom: 0; }
  .leiste .rechts .link { min-height: 44px; font-size: 14px; }
  .stempel-knoepfe { max-width: 420px; }
  .stempel-gross { justify-content: flex-start; }
  .stamm-auf { margin: 8px 0 4px 162px; padding: 6px 10px; }
  .sa-neu, .sa-frage, .sa-knoepfe button { font-size: 14px; }
  .sa-neu { min-height: 36px; }
  .sa-neu input { width: 20px; height: 20px; }
  .sa-knoepfe button { min-height: 36px; min-width: 64px; }
}
@media (min-width: 1024px) and (pointer: fine) {
  .mini-aktionen .symbol { width: 34px; height: 34px; }
  .mini-aktionen .symbol svg { width: 19px; height: 19px; }
}

/* Löschen und Auswählen in der Übersicht (Marco 01.11. 20:24): Mistkübel ganz rechts, Häkchen nur im Modus „Auswählen“ */
.mini-aktionen .symbol.weg { margin-left: 4px; }
.mini-aktionen .symbol[data-aktion="loeschen"]:hover { background: var(--rot-flaeche); color: var(--rot-text); }
.wahl-kopf, .wahl-zelle, .wahl-karte { display: none; }
input.wahl, .alle input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--gruen); cursor: pointer; }
.alle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 4px; color: var(--tinte); font-size: 14px; font-weight: 600; cursor: pointer; }
.waehlen .dock, .waehlen .beispiele-zeile, .waehlen .geraete { display: none; }
.waehlen .mini-aktionen { visibility: hidden; }
.waehlen .karte { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
.waehlen .wahl-karte { display: flex; grid-row: 1 / span 2; justify-content: center; padding-top: 14px; cursor: pointer; }
.waehlen .karte-auf { padding-left: 0; }
.waehlen .karte-fuss { padding-left: 0; }
.waehlen .karte:has(input.wahl:checked) { background: var(--balken); }
.wahl-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 12px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: var(--papier); box-shadow: 0 -6px 18px rgba(28,36,32,.1); }
.wahl-leiste #wahl-zahl { flex: 1; font-weight: 600; white-space: nowrap; }
.wahl-leiste .knopf { flex: none; padding: 0 16px; }
.wahl-leiste .knopf:disabled { opacity: .45; cursor: default; }
@media (min-width: 1024px) {
  .waehlen.seite-liste { padding-bottom: 110px; }
  .waehlen .wahl-kopf, .waehlen .wahl-zelle { display: table-cell; width: 1%; padding-right: 0; }
  .waehlen .wahl-zelle { padding-top: 11px; }
  .waehlen tbody tr:has(input.wahl:checked) td { background: var(--balken); }
  .wahl-leiste { justify-content: flex-end; padding: 14px 28px; }
  .wahl-leiste #wahl-zahl { flex: none; margin-right: 12px; }
}

/* Eigener Kalender (Marco 01.11. 20:18/20:26): Feld mit Kalender-Symbol, Handy Blatt von unten, PC kleines Fenster unter dem Feld */
:root { --kal-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5A43' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.feld[data-datum], .feld[data-datum]:focus, .feld[data-datum].rot { padding-right: 38px; background-image: var(--kal-symbol); background-repeat: no-repeat; background-position: right 10px center; background-size: 19px 19px; cursor: pointer; }
.feld[data-datum][readonly] { background-image: none; padding-right: 10px; cursor: default; }
.kalender-grund { position: fixed; inset: 0; z-index: 70; background: rgba(28,36,32,.38); opacity: 0; transition: opacity .28s ease; }
.kalender-grund.auf { opacity: 1; }
.kalender { z-index: 71; background: var(--papier); color: var(--tinte); font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.kalender.blatt { position: fixed; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; padding: 4px 16px max(14px, env(safe-area-inset-bottom));
  border-radius: 6px 6px 0 0; box-shadow: 0 -10px 30px rgba(28,36,32,.16); transform: translateY(100%); transition: transform .25s cubic-bezier(.32,.72,0,1); }
.kalender.blatt.auf { transform: translateY(0); transition-duration: .28s; }
.kalender.popup { position: absolute; width: 304px; padding: 6px 10px 8px; border-radius: 6px; box-shadow: 0 12px 32px rgba(28,36,32,.18), 0 0 0 1px rgba(28,36,32,.07);
  opacity: 0; transform: translateY(-4px) scale(.96); transform-origin: 24px 0; transition: opacity .12s ease-out, transform .12s ease-out; }
.kalender.popup.drueber { transform-origin: 24px 100%; transform: translateY(4px) scale(.96); }
.kalender.popup.auf { opacity: 1; transform: none; transition-duration: .14s; }
.kalender.zieht { transition: none; }
.kal-griff { width: 40px; height: 5px; border-radius: 3px; background: var(--balken-stark); margin: 6px auto 8px; }
.kal-titel { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.popup .kal-griff, .popup .kal-titel { display: none; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; }
.kal-monat { font-size: 17px; font-weight: 600; }
.kal-pfeil { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--gruen); cursor: pointer; }
.kal-pfeil svg { width: 22px; height: 22px; }
.kal-pfeil:hover { background: var(--feld); }
.kal-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.kal-wt { padding: 6px 0 4px; text-align: center; font-size: 12px; font-weight: 600; color: var(--leise); }
.kal-tag, .kal-leer { height: 46px; }
.kal-tag { padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--tinte); font: inherit; font-size: 17px; cursor: pointer; }
.kal-tag.heute { background: var(--balken); color: var(--gruen-dunkel); font-weight: 700; }
.kal-tag.gewaehlt { background: var(--gruen); color: #fff; font-weight: 600; }
.kal-tag:disabled { background: none; color: var(--blass); opacity: .4; cursor: default; }
.kal-fuss { display: flex; justify-content: space-between; margin-top: 6px; }
.kal-fuss .knopf { min-height: 44px; padding: 0 14px; }
.kal-fuss .knopf:disabled { opacity: .4; cursor: default; }
.popup .kal-tag, .popup .kal-leer { height: 36px; }
.popup .kal-tag { font-size: 15px; }
.popup .kal-tag:not(:disabled):not(.gewaehlt):hover { background: var(--feld); }
.popup .kal-tag.fokus { box-shadow: inset 0 0 0 2px var(--gruen); }
.popup .kal-tag.gewaehlt.fokus { box-shadow: inset 0 0 0 2px var(--gruen-dunkel), inset 0 0 0 4px #fff; }
.popup .kal-fuss { margin-top: 4px; }
.popup .kal-fuss .knopf { min-height: 36px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .kalender, .kalender-grund { transition: none !important; } }

/* A4-Seite für PDF und Druck: wie das Papierblatt, feste Breite 794 px (210 mm bei 96 dpi), nur Klassen (CSP ohne Inline-Stil) */
#druck { display: none; }
.druck-buehne { position: fixed; left: -12000px; top: 0; width: 794px; pointer-events: none; }
.druck-buehne.im-bild { left: 0; }
.druck-blatt { box-sizing: border-box; width: 794px; min-height: 1122px; padding: 34px 40px 26px; background: #fff; color: #1C2420; font: 10.5px/1.35 "IBM Plex Sans", Arial, sans-serif; font-variant-numeric: tabular-nums; }
.druck-blatt h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.d-kopf { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 8px; border-bottom: 1px solid #1C2420; }
.d-kaeufer { flex: 1; min-width: 0; margin: 0; font-size: 9.5px; line-height: 1.5; }
.d-kaeufer b { font-weight: 600; white-space: nowrap; }
.d-kaeufer span { margin: 0 4px; color: #8A958F; }
.d-logo { flex: none; width: 132px; height: auto; }
.d-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 10px; }
.d-vs { padding-top: 23px; }
.d-reihe { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 2px 0 1px; border-bottom: 1px solid #DDE5E0; min-height: 17px; }
.d-reihe .d-w { overflow-wrap: anywhere; }
.d-l { color: #5E6A64; }
.d-balken { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 3px; padding: 4px 8px; background: #E2EAE5; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #23453A; }
.d-balken span { font-weight: 400; letter-spacing: 0; text-transform: none; color: #5E6A64; }
.d-balken b { font-weight: 600; color: #1C2420; }
.d-titel { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #23453A; }
.d-titel small { font-size: 9.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #5E6A64; }
.d-preise, .d-sorti { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9.5px; }
.d-preise th, .d-sorti th { padding: 3px 3px; background: #E2EAE5; border: 1px solid #C9D8CE; font-weight: 600; text-align: left; color: #23453A; white-space: nowrap; overflow: hidden; }
.d-preise .d-unter th { background: #EEF3F0; font-weight: 500; color: #5E6A64; }
.d-preise td, .d-sorti td { height: 21px; padding: 2px 3px; border: 1px solid #C9D8CE; white-space: nowrap; overflow: hidden; }
.d-preise th:first-child { width: 70px; }
.d-preise th:nth-child(2) { width: 34px; }
.d-preise th:last-child { width: 34px; }
/* Holzart-Gruppen wie am Blatt: dünne, hellere Linie statt dick dunkelgrün (Marco 01.11. 20:10) */
.d-preise .d-g { border-left: 1px solid #8FAE9B; }
.d-preise th.d-g { padding-left: 6px; }
.d-z { text-align: right; }
.d-preise td.d-z, .d-sorti td.d-z { padding-right: 4px; letter-spacing: -.02em; }
.d-preise td.d-z { padding-left: 2px; }
.d-m, .d-k { text-align: center; }
.d-k { font-weight: 600; color: #23453A; }
.d-sorte { color: #1C2420; }
.d-sorti .d-zk { width: 52px; text-align: right; }
.d-sorti td.d-sorte { white-space: normal; overflow-wrap: anywhere; }
.d-sorti .d-zu { width: 70px; }
.d-sorti td.d-umfm { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.d-notiz { margin: 4px 0 0; font-size: 9.5px; overflow-wrap: anywhere; }
.d-linien { height: 30px; background: linear-gradient(#C9D8CE, #C9D8CE) 0 14px / 100% 1px no-repeat, linear-gradient(#C9D8CE, #C9D8CE) 0 29px / 100% 1px no-repeat; }
.d-satz { margin: 8px 0 0; font-size: 9px; line-height: 1.45; color: #5E6A64; }
.d-unterschrift { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 10px; }
.d-platz { height: 92px; display: flex; align-items: flex-end; justify-content: center; }
.d-platz img { display: block; width: 208px; height: 88px; }
.d-linie { min-height: 18px; padding: 2px 0; border-bottom: 1px solid #1C2420; font-size: 10px; }
.d-unterschrift small { display: block; margin-top: 3px; font-size: 8.5px; color: #5E6A64; }
.d-fuss { margin: 14px 0 0; font-size: 8px; color: #8A958F; text-align: right; }
@media print {
  /* Seitenrand 0 setzt app.js nur fürs Drucken der A4-Seite (Druckersymbol oder Strg+P auf einem offenen Blatt); sonst Standardrand */
  @page { size: A4; }
  html, body { background: #fff !important; }
  html.druckt body > *:not(#druck) { display: none !important; }
  .wahl-leiste, .kalender, .kalender-grund { display: none !important; }
  html.druckt #druck { display: block; }
  .druck-blatt { min-height: 0; }
  #druck, #druck * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Haken „verschickt“ (Marco, Loom 2 03.11.): Kästchen mit Haken in der Leiste und je Eintrag, Datum darunter bzw. daneben */
.symbol.vs[aria-pressed="false"] .haken { display: none; }
.symbol.vs[aria-pressed="true"] rect { fill: var(--balken); }
.symbol.vs:disabled { opacity: .45; cursor: default; }
.vs-datum { font-size: 12px; line-height: 1.3; color: var(--gruen-dunkel); white-space: nowrap; }
td.aktion-zelle .vs-datum { text-align: right; padding: 0 6px 2px 0; }
.karte .vs-datum { text-align: right; padding: 0 2px 2px 0; }
.leiste .rechts .vs-datum { font-size: 13px; }
.symbol.vs { touch-action: manipulation; }
/* Prüfer M2: am PC steht das Datum links vor den Symbolen, die Titelzeile gibt den Platz her, die Symbole bleiben stehen; am Handy in der zweiten Reihe */
.leiste > .vs-pc { display: none; }
@media (min-width: 1024px) {
  .leiste .rechts .vs-handy { display: none; }
  /* „Stand 03.11. 20:00, Büro“ wird beim Speichern zu „Speichert …“ und „Gespeichert 20:52“: feste Breite (Prüfer M2), sonst rutschen die Symbole; langer Text bricht um statt zu schieben */
  .leiste .rechts { flex: 0 0 340px; min-width: 0; }
  .leiste .rechts .speicherstand { min-width: 0; }
  .leiste > .vs-pc:not(.versteckt) { display: inline; flex: none; margin-right: -14px; font-size: 14px; }
}

/* Vereinbarte Menge: Deutung der Spanne im Fluss, fester kleiner Platz unter dem Feld (verdeckt nichts, nichts springt) */
.menge-deutung { height: 22px; padding-top: 3px; line-height: 19px; box-sizing: border-box; overflow: hidden; }
.menge-deutung .pille { display: inline-block; vertical-align: top; line-height: 19px; padding: 0 8px; border-radius: 4px; background: var(--balken); color: var(--gruen-dunkel); font-size: 13px; font-weight: 500; white-space: nowrap; }

/* ---------- Looms 04.11.2026 (Martina, Kommentare Marco) und Marcos Nachricht 15230 ---------- */
/* Sanftes Aufklappen: die Bewegung macht app.js (klappen/weich, Höhe 240 ms); das alte Einblenden des Bands wäre doppelt */
.band:not(.versteckt) { animation: none; }
.filter.auf { animation: none; }

/* Handy-Reihenfolge mit den neuen Abschnitten */
.abschnitt.verkaeufer { order: 1; }
.abschnitt.vereinbarung { order: 2; }
.abschnitt.vs { order: 3; }
.abschnitt.schlaegerer { order: 4; }
.abschnitt.vertrag { order: 5; }
.abschnitt.bloche { order: 6; }
.abschnitt.sortiment { order: 7; }
.abschnitt.saetze { order: 8; }
.abschnitt.lieferprofil { order: 9; }
.abschnitt.fraechter { order: 10; }
.abschnitt.uebergabe { order: 11; }
.abschnitt.zertifizierung { order: 12; }
.abschnitt.agb { order: 13; }
.abschnitt.unterschriften { order: 14; }
.kaeufer { order: 15; }
.stand-zeile { order: 16; }
.abschnitt .text { margin: 0 0 8px; font-size: 13px; color: var(--leise); line-height: 1.5; }
.abschnitt.text b, .abschnitt .text b { color: var(--tinte); font-weight: 600; }
.agb-hinweis { font-style: italic; }

/* Schlägerer 1 und 2 als Reiter im Balken */
.s-reiter { display: inline-flex; gap: 4px; }
.s-reiter button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 4px; background: none; color: var(--gruen-dunkel);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.s-reiter button[aria-selected="true"] { background: var(--papier); }
.s-reiter button[aria-selected="false"] { color: var(--leise); font-weight: 500; }
.s-reiter .punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); }
.abschnitt.mit-reitern > .balken { padding-top: 6px; padding-bottom: 6px; align-items: center; }
.edv-gruppe[hidden] { display: none; }

/* Knöpfe wie bei Zuordnung: MwSt., Übergabe (mehrere), Zertifizierung */
.wahl-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl-knoepfe button { flex: 0 0 auto; min-height: 48px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--feld); color: var(--tinte); font-size: 16px; font-weight: 500; cursor: pointer; }
.wahl-knoepfe button[aria-pressed="true"] { background: var(--gruen); color: #fff; font-weight: 600; }
.wahl-knoepfe button:disabled { cursor: default; opacity: .75; }
.wahl-knoepfe.mehrfach button[aria-pressed="true"]::before { content: "✓ "; }
.mwst-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mwst-zeile .einheit { color: var(--leise); font-size: 14px; }
.zert-ende { margin: 6px 0 0; }

/* weitere Sortiment-Zeilen: „Strich mit Plus“ unter Käferholz */
.mehr-knoepfe { display: flex; gap: 6px; }
.mehr-knopf { flex: 1 1 auto; min-height: 44px; padding: 0 12px; border: 0; border-radius: 4px; background: var(--feld); color: var(--gruen-dunkel); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.mehr-knopf.leise { flex: 0 0 auto; background: none; color: var(--leise); }
.mehr-knopf:disabled { cursor: default; opacity: .6; }
.sorti-handy .mehr-knopf-zeile { margin: 0 0 10px; }
table.sorti tr.mehr-knopf-zeile td { padding-top: 2px; }
.stamm-auf.standard { margin-top: 10px; }

/* Lieferprofil: 12 Monate, am Handy 4 je Zeile */
.lp-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.lp-zelle label { display: block; font-size: 12px; font-weight: 600; color: var(--gruen-dunkel); margin-bottom: 3px; text-align: center; }
.lp-zelle .feld { text-align: right; padding-left: 4px; padding-right: 8px; }
.lp-summe { min-height: 20px; margin: 8px 0 6px; font-size: 14px; color: var(--gruen-dunkel); font-weight: 500; }

/* Frächter in einer Zeile */
.fr-zeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; align-items: end; }
.fr-zeile .fr-name { grid-column: 1 / -1; }
.fr-zeile label { display: block; font-size: 13px; color: var(--leise); margin-bottom: 4px; }
.fr-zeile .mit-einheit { gap: 6px; }
.fr-zeile .mit-einheit .feld.kurz { max-width: none; }
.fr-zeile .edv-feld { width: 100%; }

/* Fußleiste: Stand wie oben, über die ganze Breite, führt zur Übersicht (Marco, Kommentar Loom 3) */
.fuss-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; width: 100%; min-height: 60px; margin: 28px 0 0; padding: 10px 16px;
  border: 0; border-radius: 0; background: var(--balken); color: var(--gruen-dunkel); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.fuss-leiste .fuss-stand { min-width: 0; overflow-wrap: anywhere; }
.fuss-leiste .fuss-weg { flex: none; font-weight: 600; }
.fuss-leiste .fuss-weg::after { content: " ›"; }
.fuss-leiste.fehler { background: var(--rot-flaeche); color: var(--rot-text); }
.verwerfen-zeile { margin: 0; padding: 14px 16px 0; text-align: center; }
.verwerfen-link { color: var(--rot-text); font-size: 13px; font-weight: 400; }

@media (min-width: 1024px) {
  .abschnitt.lieferprofil .balken, .abschnitt.fraechter .balken, .abschnitt.uebergabe .balken, .abschnitt.zertifizierung .balken { margin-top: 18px; padding: 8px 14px; border-radius: 3px; }
  .abschnitt.mit-reitern > .balken { padding-top: 4px; padding-bottom: 4px; }
  .abschnitt.text.vertrag { padding-top: 16px; }
  .lp-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
  .lp-zelle label { background: var(--balken); margin: 0 0 3px; padding: 6px 0; font-size: 12px; }
  .lp-zelle .feld { border-radius: 0; background: #F6F7F6; }
  .lp-zelle .feld:focus { background: var(--papier); }
  .fr-zeile { grid-template-columns: minmax(0, 1fr) 150px 170px 170px; gap: 12px 16px; }
  .fr-zeile .fr-name { grid-column: auto; }
  .stamm-auf.standard { margin: 8px 0 4px 162px; }
  .sortiment .stamm-auf.standard { margin-left: 0; }
  .mehr-knopf { min-height: 34px; font-size: 14px; }
  .fuss-leiste { width: calc(100% + 32px); margin: 28px -16px 0; padding: 12px 32px; }
  .verwerfen-zeile { max-width: 1180px; margin: 0 auto; padding: 12px 0 0; text-align: right; }
}
@media (min-width: 1024px) and (pointer: fine) {
  .wahl-knoepfe button { min-height: 40px; }
  .s-reiter button { min-height: 32px; }
}

/* Druck und PDF: neue Teile des Blatts, AGB-Seite im selben Stil */
.d-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; margin-top: 10px; }
.d-drei .d-reihe { grid-template-columns: 82px minmax(0, 1fr); gap: 6px; }
.d-vom { font-size: 11px; font-weight: 400; color: #5E6A64; }
.d-vom b { color: #1C2420; font-weight: 600; }
.d-satz.d-text { color: #2E3833; }
.d-satz.d-text b { color: #1C2420; font-weight: 600; }
.d-box { font-size: 10px; }
.d-lp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9.5px; }
.d-lp th, .d-lp td { padding: 3px 3px; border: 1px solid #C9D8CE; white-space: nowrap; overflow: hidden; }
.d-lp th { background: #E2EAE5; font-weight: 600; text-align: center; color: #23453A; }
.d-lp td { height: 19px; }
.d-lp .d-lp-l { width: 30px; text-align: left; }
.d-fr { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 0 24px; margin-top: 10px; }
.d-fr .d-reihe { grid-template-columns: 56px minmax(0, 1fr); }
.d-sorti td.d-leer { border: 0; }
.d-agb-titel { margin: 14px 0 6px !important; font-size: 14px; }
.d-agb-abschnitt { margin: 10px 0 4px; padding: 4px 8px; background: #E2EAE5; font-size: 10.5px; font-weight: 600; color: #23453A; }
.d-agb-punkt { display: grid; grid-template-columns: 24px minmax(0, 1fr); margin: 0 0 4px; font-size: 9.5px; line-height: 1.42; }
.d-agb-nr { font-weight: 600; color: #23453A; }
@media print {
  /* unten bringt die Seite den Rand mit (8 mm), oben die erste Seite das Blatt, die Folgeseiten der Seitenrand */
  .druck-blatt { padding-bottom: 0; }
  .druck-blatt + .druck-blatt { break-before: page; padding-top: 0; }
  .d-reihe, .d-person, .d-preise tr, .d-sorti tr, .d-lp, .d-fr, .d-satz, .d-notiz, .d-unterschrift, .d-agb-punkt { break-inside: avoid; }
  .d-titel, .d-balken, .d-agb-abschnitt, .d-agb-titel { break-after: avoid; }
}
/* Vorderseite mit den neuen Teilen: nur Abstände etwas enger, Schrift und Schreibplatz (Notizlinien, Unterschrift, Stempel) wie in der v25.
   Ist ein Blatt trotzdem länger als A4, verkleinert app.js es beim Drucken und im PDF auf eine Seite (einpassen, höchstens auf 80 %). */
.druck-blatt .d-zwei, .druck-blatt .d-drei { margin-top: 8px; }
.druck-blatt .d-reihe { min-height: 15px; padding: 1px 0 0; }
.druck-blatt .d-preise td, .druck-blatt .d-sorti td { height: 18px; padding-top: 1px; padding-bottom: 1px; }
.druck-blatt .d-preise th, .druck-blatt .d-sorti th { padding-top: 2px; padding-bottom: 2px; }
.druck-blatt .d-lp td { height: 17px; }
.druck-blatt .d-titel { margin: 10px 0 3px; }
.druck-blatt .d-satz { margin-top: 5px; line-height: 1.4; }
.druck-blatt .d-unterschrift { margin-top: 8px; }
.druck-blatt .d-fuss { margin-top: 8px; }
.druck-blatt .d-agb-punkt { font-size: 9px; line-height: 1.38; margin-bottom: 3px; }
.druck-blatt .d-agb-abschnitt { margin: 8px 0 3px; }
/* Messen vor dem Druck (einpassen): unsichtbar, in Druckbreite, ohne Mindesthöhe */
#druck.misst { display: block; position: fixed; left: -12000px; top: 0; width: 794px; visibility: hidden; pointer-events: none; }
#druck.misst .druck-blatt { min-height: 0; }
/* eine verkleinerte Seite steht mittig */
#druck .druck-blatt { margin-left: auto; margin-right: auto; }
@media print {
  /* die Unterschrift bleibt beim Satz davor (7. Allgemeine Geschäftsbedingungen), nie allein auf einer Seite */
  .d-unterschrift { break-before: avoid; }
}