/*
 * G24 ERP – app.css
 *
 * Neuaufbau vom 03.09.2026. Die Vorgängerdatei war über ~40 Patch-Runden
 * gewachsen: 288 verschiedene Farbwerte, 10 Eckenradien, 11 Schriftstärken,
 * 1302 !important. Jede Änderung musste die vorige überschreiben.
 *
 * AUFBAU DIESER DATEI
 *   Teil A – Fundament (neu geschrieben, ohne !important)
 *            Tokens · Grundlagen · Typografie · Gerüst · Bausteine ·
 *            schmale Ansichten · Sichtbarkeit
 *   Teil B – Bildschirmspezifische Geometrie (aus der Vorgängerdatei
 *            übernommen, Farben und Radien maschinell auf die Tokens
 *            umgestellt)
 *
 * WARUM TEIL B ÜBERNOMMEN UND NICHT NEU GESCHRIEBEN WURDE
 *   Diese 1538 Regeln sind über Jahre gegen tatsächlich beobachtete
 *   Layout-Fehler entstanden – jede Medienabfrage darin hat einen Anlass
 *   gehabt. Sie blind neu zu schreiben hätte genau die Fehler
 *   zurückgebracht, die sie beheben. Übernommen wurde deshalb die
 *   Geometrie unverändert; ersetzt wurden ausschließlich Farbwerte
 *   (349 Stück, nach Selektorbedeutung und Farbton den Tokens zugeordnet)
 *   und Eckenradien (121 Stück, alle auf 0).
 *
 * REGELN FÜR KÜNFTIGE ÄNDERUNGEN
 *   1. Farben nur aus den Tokens. Kein neuer Hexwert im Regelwerk.
 *   2. Radien nur über --r-s / --r-m / --r-pill. Sie stehen derzeit alle
 *      auf 0; ein späteres Abrunden ist damit eine einzige Änderung.
 *   3. Schriftstärken nur 400 / 500 / 600 / 700.
 *   4. Tiefe durch Haarlinien, nicht durch Schatten. Schatten nur, wo etwas
 *      tatsächlich über der Seite liegt (Dialog, Aufklappliste).
 *   5. Kein !important in Teil A. Wer es braucht, hat einen Selektor zu
 *      breit gebaut. Teil B enthält noch geerbte !important – die sollen
 *      beim schrittweisen Aufräumen verschwinden, nicht neue dazukommen.
 */

/*
 * G24 ERP – app.css  ·  Neuaufbau
 *
 * Bewusst als System aufgebaut, nicht als Sammlung von Einzelfällen. Die alte
 * Datei war über ~40 Patch-Runden gewachsen und enthielt 288 verschiedene
 * Farbwerte, 10 Eckenradien, 11 Schriftstärken und 1302 !important – jede
 * Änderung musste die vorige überschreiben. Dieser Aufbau hat KEIN !important.
 *
 * Regeln für alle künftigen Ergänzungen:
 *   1. Farben nur aus den Tokens unten. Kein neuer Hexwert im Regelwerk.
 *   2. Radien nur --r-s / --r-m / --r-pill.
 *   3. Schriftstärken nur 400 / 500 / 600 / 700.
 *   4. Tiefe entsteht durch Haarlinien, nicht durch Schatten. Schatten nur,
 *      wo etwas tatsächlich über der Seite liegt (Dialog, Aufklappliste).
 *   5. Kein !important. Wer es braucht, hat einen Selektor zu breit gebaut.
 *
 * Reihenfolge: Tokens · Grundlagen · Typografie · Gerüst · Bausteine ·
 *              Bildschirmspezifisches · Schmale Ansichten
 */

/* ===========================================================================
   1 · Tokens
   ---------------------------------------------------------------------------
   Ein warmes Neutralgrau als Grundton, echtes Weiß für Flächen, Gold
   ausschließlich als Akzent. Die Hauptschaltfläche ist graphitschwarz, nicht
   goldfarben: Ein goldener Farbverlauf über eine große Fläche wirkt billig,
   Gold als schmaler Akzent wirkt edel.
   ======================================================================== */
:root{
  /* --- Weiß: alles, was Inhalt trägt. Echtes Weiß, kein Creme. */
  --surface:#ffffff;
  --surface-soft:#f9f9f7;
  --surface-sunken:#f2f2ef;
  --bg:#f5f5f3;

  /* --- Anthrazit: Gerüst und dunkle Tinte. Neutrales Dunkelgrau mit einem
     Hauch Blau – warmes Braun wirkt hier schnell nach Kaffeehaus. */
  --anthrazit:#2e2e2c;
  --anthrazit-soft:#3a3a37;
  --anthrazit-line:#464643;

  /* Gerüst (Topbar, Seitenleiste) – standardmäßig Anthrazit. Eigene Tokens,
     damit sich das Gerüst umstellen lässt, ohne die dunkle Tinte der
     Hauptschaltfläche mitzuziehen. */
  --frame:var(--anthrazit);
  --frame-soft:var(--anthrazit-soft);
  --frame-line:var(--anthrazit-line);
  --frame-text:#a8a8a4;
  --frame-text-strong:#ffffff;
  --frame-muted:#9d9d99;   /* gemessen: #7d858c ergab auf Anthrazit nur 3,55 – zu wenig für 10px-Versalien */
  --frame-accent:#cfae72;      /* Gold, aufgehellt für dunklen Grund */

  /* Dunkle Tinte: Schrift und Hauptschaltfläche */
  --ink:#272725;
  --on-dark:#ffffff;   /* Schrift auf dunklen Flächen */
  --ink-soft:#363633;

  /* Text auf Weiß */
  --text:#212120;
  --text-soft:#4d4d4a;
  --muted:#6b6b67;
  --faint:#8e8e8a;

  /* Linien – neutral, nicht sandfarben */
  --line:#e5e5e1;
  --line-strong:#d3d3ce;

  /* --- Gold: ausschließlich Akzent. Zwei Töne, weil derselbe Wert nicht auf
     Weiß UND auf Anthrazit lesbar ist. */
  --gold:#b08d4f;
  --gold-deep:#8a6b2f;
  --gold-tint:#faf5ea;
  --gold-line:#e8dcc0;

  /* Metalle */
  --silver:#6b7378;
  --silver-tint:#eef0f1;
  --silver-line:#dde0e2;

  /* Semantik – gedeckt, damit Gold der einzige Schmuck bleibt */
  --success:#1f6a4a;
  --success-tint:#edf5f0;
  --success-line:#c9e0d5;
  --warning:#8a6216;
  --warning-tint:#fbf3e3;
  --warning-line:#ecdcb6;
  --danger:#a03434;
  --danger-tint:#fbedec;
  --danger-line:#eecdcb;

  /* Radien – eckig, wie gewünscht */
  --r-s:0;
  --r-m:0;
  --r-pill:0;
  --radius:var(--r-m);

  /* Tiefe – nur für aufliegende Ebenen */
  --shadow:0 1px 2px rgba(33,33,32,.04);
  --shadow-raised:0 8px 24px -6px rgba(33,33,32,.14),0 2px 6px rgba(33,33,32,.05);
  --shadow-strong:0 24px 60px -12px rgba(33,33,32,.22),0 4px 12px rgba(33,33,32,.06);

  /* Maße des Gerüsts */
  --topbar-h:60px;
  --sidebar-w:244px;
  /* Innenabstand des Inhalts – EINE Quelle. Bausteine, die sich bis an
     den Rand ziehen (Reiterleiste, Seitenkopf), rechnen damit. Stand der
     Wert mehrfach fest im Regelwerk, lief die Reiterleiste in den
     mittleren Breiten gemessen 6px über. */
  --content-pad:28px;
}

/* ===========================================================================
   2 · Grundlagen
   ---------------------------------------------------------------------------
   Die drei globalen Regeln zu input/label/box-sizing sind tragend: Ein großer
   Teil des Markups verlässt sich darauf, dass Felder die volle Breite füllen
   und Beschriftungen ihre Felder als Spalte umschließen. Sie bleiben deshalb
   unverändert erhalten – das ist eine Schnittstelle, keine Altlast.
   ======================================================================== */
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:.9375rem;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--gold-deep);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--gold)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
/* Fokusrahmen NACH INNEN. Mit outline-offset:2px liegt er ausserhalb des
   Elements – und wird von jedem Vorfahren mit overflow:hidden beschnitten.
   Gemessen im Suchfeld: Oben und unten abgeschnitten, übrig blieb genau die
   linke Kante als senkrechter Strich mitten im Feld. Betroffen wären alle
   Felder in beschnittenen Containern (Tabellenkarten, Formularraster,
   Abholformular), nicht nur dieses eine. Nach innen gezeichnet kann ihn
   nichts abschneiden. */
:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.icon{width:18px;height:18px;display:inline-block;flex:0 0 auto}

/* ===========================================================================
   3 · Typografie
   ---------------------------------------------------------------------------
   Vier Stärken statt elf. Überschriften tragen ihre Wirkung über Größe und
   engere Laufweite, nicht über Fettung – das ist der eigentliche Unterschied
   zwischen "laut" und "edel".
   ======================================================================== */
/* Durchgehend eine Schrift. Die Wirkung der Ueberschriften kommt aus Groesse
   und enger Laufweite, nicht aus einem zweiten Schriftschnitt: Eine grosse
   Zeile mit -0,032em Laufweite und Stärke 600 liest sich zeitgemäß und ruhig.
   Fettung waere der billigere Weg und wuerde laut wirken. */
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.25;font-weight:600;color:var(--text)}
h1{font-size:clamp(1.65rem,2.5vw,2.15rem);letter-spacing:-.032em}
h2{font-size:1.0625rem;letter-spacing:-.014em}
h3,h4{letter-spacing:-.008em}
h2{margin-bottom:1rem}
h3{font-size:.9375rem}
h4{font-size:.875rem}
p{margin:0 0 .75rem;color:var(--text-soft)}
p:last-child{margin-bottom:0}
/* Bewusst em, nicht rem: Eine feste Größe kann größer sein als ihr
   Elternelement. Gemessen in der Tabellenfußzeile – dort stand die
   Metallaufteilung größer da als der Betrag darüber. */
small{font-size:.85em}
strong,b{font-weight:600}
.eyebrow{
  /* Block, damit die Rubrik eine eigene Zeile bekommt – daneben steht in
     mehreren Ansichten eine Zurück-Schaltfläche, und inline-block hat sie
     gemessen neben den Knopf gesetzt. fit-content hält die Unterlinie
     trotzdem auf Textbreite. */
  display:block;
  width:fit-content;
  max-width:100%;
  color:var(--gold-deep);
  text-transform:uppercase;
  font-size:.6875rem;
  letter-spacing:.14em;
  font-weight:500;
  margin-bottom:.5rem;
  padding-bottom:.3rem;
  border-bottom:1px solid var(--gold-line);
}
.muted-note{font-size:.8125rem;color:var(--muted);margin:.625rem 0 0}
/* Beschriftungstext samt Pflichtstern als EINE Zeile. label ist eine Spalte –
   stünde der Stern direkt darin, würde er eine eigene Zeile bilden und das
   Feld nach unten schieben. Die alte Datei hat das mit sechs Regeln und
   !important bekämpft; hier genügt eine, weil ihr niemand widerspricht. */
.label-caption{display:inline-flex;align-items:baseline;gap:3px;font-size:.8125rem;line-height:1.3}
.required-star{color:var(--danger);font-weight:600;line-height:1}
.num{font-variant-numeric:tabular-nums}
.right{text-align:right}

/* ===========================================================================
   4 · Gerüst
   ======================================================================== */
.topbar{
  height:var(--topbar-h);
  padding:0 20px;
  background:var(--frame);
  color:var(--frame-text-strong);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid var(--frame-line);
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:.9375rem;letter-spacing:-.005em;
  color:var(--frame-text-strong);white-space:nowrap;
}
.brand:hover{color:var(--frame-text-strong)}
.brand em{font-style:normal;color:var(--frame-accent);font-weight:500}
.brand.large{font-size:1.0625rem;color:var(--text)}
.brand.large em{color:var(--gold-deep)}
.brand-mark{
  width:32px;height:32px;
  display:grid;place-items:center;
  background:var(--frame-accent);color:var(--anthrazit);
}
.brand-mark .icon{width:18px;height:18px}
.topbar-right{display:flex;align-items:center;gap:6px;font-size:.8125rem;min-width:0}
.account-chip,.user-chip,.logout-link{
  display:inline-flex;align-items:center;gap:7px;
  height:34px;border-radius:var(--r-s);padding:0 10px;
}
.account-chip{background:var(--frame-soft);color:var(--frame-text-strong);border:1px solid var(--frame-line);min-width:0}
.account-chip .icon{color:var(--frame-accent)}
.user-chip{color:var(--frame-text)}
.logout-link{color:var(--frame-text)}
.logout-link:hover{background:var(--frame-soft);color:var(--frame-text-strong)}

.app-shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:calc(100vh - var(--topbar-h))}
.sidebar{
  background:var(--frame);
  padding:16px 12px 24px;
  display:flex;flex-direction:column;gap:1px;
  border-right:1px solid var(--frame-line);
}
.nav-section-label{
  padding:16px 10px 6px;
  color:var(--frame-muted);
  text-transform:uppercase;font-weight:600;font-size:.625rem;letter-spacing:.12em;
}
.nav-link{
  color:var(--frame-text);
  padding:9px 10px;border-radius:var(--r-s);
  font-size:.875rem;font-weight:400;
  display:flex;align-items:center;gap:10px;
  position:relative;
  transition:background .15s ease,color .15s ease;
}
.nav-link .icon{width:17px;height:17px;color:var(--frame-muted);transition:color .15s ease}
.nav-link:hover{background:var(--frame-soft);color:var(--frame-text-strong)}
.nav-link:hover .icon{color:var(--frame-text)}
/* Aktiv: schmale Goldkante statt Farbverlauf und Schatten. */
.nav-link.active{background:var(--frame-soft);color:var(--frame-text-strong);font-weight:500}
.nav-link.active .icon{color:var(--frame-accent)}
.nav-link.active::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;
  width:2px;background:var(--frame-accent);
}

.content{padding:var(--content-pad);min-width:0;max-width:1560px;width:100%;margin:0 auto}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
.page-head p{margin:.375rem 0 0;max-width:70ch}
.page-head>form{flex:0 0 auto}

/* ===========================================================================
   5 · Bausteine
   ======================================================================== */

/* --- Karten: Haarlinie statt Schatten. Das ist der größte Hebel für "clean". */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:20px;
  box-shadow:var(--shadow);
}
.table-card{padding:0;overflow:hidden}
.table-card h2{padding:20px 20px 0}
.settings-card{max-width:960px}

/* --- Senkrechter Rhythmus in Karten.
       Bewusst als Regel für JEDES folgende Kind, nicht als Liste einzelner
       Bausteine: Eine Aufzählung vergisst zwangsläufig den nächsten neuen
       Baustein – so ist der Hinweiskasten beim Ausweis ohne Abstand
       durchgerutscht. "Jedes Kind ab dem zweiten" kann das nicht passieren.
       Ausgenommen sind Tabellenkarten: Dort sitzen Kopfzeile und Tabelle
       bewusst ohne Zwischenraum aneinander.
       In .form-grid regelt gap die Abstände; das Raster selbst zählt hier als
       ein Kind, seine Felder werden nicht berührt.
       Diese Regel steht ABSICHTLICH vor allen Bausteinregeln: Sie setzt den
       Grundabstand, jeder Baustein darf ihn danach überstimmen. Stünde sie
       hinter ihnen, würde sie deren bewusste Abstände zerschlagen – gemessen
       bekam .form-section dann 14px statt der gewollten 18px.
*/
/* Ist die Karte selbst ein Raster, ordnet gap die Abstände. Ein zusätzlicher
   Rand oben verschöbe jede Zelle ausser der ersten nach unten – die Felder
   einer Zeile stünden dann um 14px versetzt. Gemessen bei DATEV & Konten:
   Beraternummer 71px, Mandantennummer 85px. */
.card:not(.table-card):not(.form-grid)>*+*{margin-top:14px}
.card:not(.table-card):not(.form-grid)>.button-row{margin-top:18px}
.card.form-grid>.button-row{margin-top:4px}

.section-heading,.install-intro{display:flex;align-items:flex-start;gap:12px}
.section-heading p,.install-intro p{margin:.25rem 0 0}
.section-heading h2,.install-intro h1{margin-bottom:0}
.section-icon{
  width:38px;height:38px;flex:0 0 auto;line-height:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-s);
  color:var(--gold-deep);background:var(--gold-tint);border:1px solid var(--gold-line);
}
.section-icon .icon{width:19px;height:19px;display:block}

.form-section{display:flex;align-items:center;gap:8px;margin:0;padding-top:4px;font-weight:600;font-size:.875rem;color:var(--text)}
.form-section:not(:first-of-type){border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.form-section .icon{color:var(--gold-deep)}
.form-subsection{margin:12px 0 0;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}


/* --- Schaltflächen: primär graphit, sekundär Haarlinie. Kein Farbverlauf,
       kein Anheben beim Überfahren – Ruhe statt Bewegung. */
.button{
  border:1px solid transparent;
  border-radius:var(--r-s);
  padding:9px 14px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:.875rem;font-weight:500;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.button .icon{width:16px;height:16px}
.button.primary{background:var(--ink);color:var(--on-dark)}
.button.primary:hover{background:var(--ink-soft);color:var(--on-dark)}
/* Für die eine entscheidende Handlung eines Bildschirms. Anthrazit ist die
   Farbe aller Hauptschaltflächen – wo mehrere davon stehen, hebt sich keine
   ab. Gold tut das, ohne eine zweite Bedeutungsfarbe einzuführen; dunkle
   Schrift darauf, weil weiss auf Gold zu wenig Kontrast hätte.
   Sparsam einsetzen: Zwei goldene Knöpfe auf einer Seite heben sich
   gegenseitig wieder auf. */
.button.hervor{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.button.hervor:hover{background:var(--gold-deep);color:var(--on-dark);border-color:var(--gold-deep)}
.button.hervor[disabled]{background:var(--gold);color:var(--ink)}
.button.secondary{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.button.secondary:hover{background:var(--surface-soft);border-color:var(--muted)}
.button.danger{background:var(--danger-tint);color:var(--danger);border-color:var(--danger-line)}
.button.danger:hover{background:var(--danger-line)}
.button.full{width:100%}
.button.compact{padding:6px 10px;font-size:.8125rem}
.button[disabled]{opacity:.45;cursor:not-allowed}
.button-row{display:flex;gap:8px;flex-wrap:wrap}
.icon-button{
  width:34px;height:34px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--r-s);
  background:var(--surface);color:var(--text-soft);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.icon-button:hover{background:var(--surface-soft);color:var(--text);border-color:var(--muted)}
.row-actions{display:flex;gap:6px;justify-content:flex-end}

/* --- Formulare: die globalen Regeln bleiben, nur die Optik ändert sich. */
label{font-size:.8125rem;font-weight:500;color:var(--text-soft);display:flex;flex-direction:column;gap:6px}
label small{font-size:.75rem;font-weight:400;color:var(--muted)}
input,select,textarea{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:var(--r-s);
  padding:9px 11px;
  background:var(--surface);
  color:var(--text);
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
/* Eine feste Bedienhöhe für alle Steuerelemente. Ohne sie sind Auswahlfelder
   gemessen 2px höher als Eingabefelder – nebeneinander im Raster sieht das
   nach einem Fehler aus. Kontrollkästchen und Auswahlknöpfe sind ausgenommen,
   sie würden sonst aufgeblasen. */
/* Senkrechter Innenabstand muss bei fester Höhe entfallen: Mit 9px oben und
   unten bleiben von 38px nur 18px Inhaltsbereich – die Textzeile ist aber
   22,5px hoch. Der Text passt dann nicht in sein eigenes Feld und sitzt je
   nach Browser unterschiedlich. Waagerecht bleibt der Abstand erhalten. */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select{height:38px;padding-top:0;padding-bottom:0}
/* Neuere Chrome-Versionen stellen ein gestaltetes <select> als Flex-Container
   dar (gemessen: display:flex, appearance:base-select). Mit align-items:normal
   wird der Text dabei nach oben gestreckt statt mittig gesetzt – das Feld sah
   aus, als säße die Beschriftung an der Oberkante. In Browsern, die das select
   klassisch darstellen, ist die Zeile wirkungslos. */
select{align-items:center}
textarea{min-height:72px}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,131,65,.12)}
input[disabled],select[disabled],textarea[disabled]{background:var(--surface-sunken);color:var(--muted);cursor:not-allowed}
textarea{resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .span-2{grid-column:1/-1}
/* Früher stand hier margin-top:auto auf dem letzten Kind, um Felder mit
   unterschiedlich hohen Beschriftungen auf eine Linie zu bringen. Beschriftungen
   mit .label-caption setzen den oberen Abstand aber mit !important auf 0 – die
   Regel griff deshalb nur noch bei Beschriftungen aus reinem Text und drückte
   deren Feld an den unteren Rand der Zeile, also weit unter das Feld daneben.
   Sichtbar war das beim Kontenrahmen unter DATEV & Konten. Alles steht jetzt
   oben bündig. */

/* --- Hinweise */
.alert{
  padding:11px 13px;
  margin-bottom:14px;
  border:1px solid;
  border-left-width:3px;
  display:flex;align-items:flex-start;gap:9px;
  font-size:.875rem;
}
.alert .icon{margin-top:1px;flex:0 0 auto}
.alert>span{flex:1;min-width:0}
.alert>form{margin-left:auto;flex-shrink:0}
.alert.success{background:var(--success-tint);border-color:var(--success-line);border-left-color:var(--success);color:var(--success)}
.alert.warning{background:var(--warning-tint);border-color:var(--warning-line);border-left-color:var(--warning);color:var(--warning)}
.alert.danger{background:var(--danger-tint);border-color:var(--danger-line);border-left-color:var(--danger);color:var(--danger)}
.settings-inline-note{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface-soft);
}
.settings-inline-note small{display:block;color:var(--muted);margin-top:.25rem}

/* --- Kennzeichen */
.badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:500;
  border:1px solid transparent;
}
.badge.success{background:var(--success-tint);border-color:var(--success-line);color:var(--success)}
.badge.warning{background:var(--warning-tint);border-color:var(--warning-line);color:var(--warning)}
.badge.danger{background:var(--danger-tint);border-color:var(--danger-line);color:var(--danger)}
.badge.neutral{background:var(--surface-sunken);border-color:var(--line);color:var(--text-soft)}
.material-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:500;
  background:var(--surface-sunken);border:1px solid var(--line);color:var(--text-soft);
}

/* --- Kennzahlen */
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
/* Dashboard: vier gleich breite Karten in einer Reihe. */
.kpi-grid.dashboard-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1280px){.kpi-grid.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.kpi-grid.dashboard-grid{grid-template-columns:1fr}}
.kpi-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:16px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;min-width:0;
}
.kpi-icon{
  width:38px;height:38px;flex:0 0 auto;line-height:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  background:var(--surface-soft);color:var(--text-soft);
}
.kpi-icon .icon{width:19px;height:19px;display:block}
.kpi-card>div{min-width:0}
.kpi-card span{display:block;color:var(--muted);font-size:.8125rem}
.kpi-card strong{
  display:block;font-size:1.25rem;font-weight:600;margin-top:2px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi-card small{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}
.kpi-card.metal-gold .kpi-icon{background:var(--gold-tint);color:var(--gold-deep)}
.kpi-card.metal-silver .kpi-icon{background:var(--silver-tint);color:var(--silver)}
.kpi-card.profit-card .kpi-icon{background:var(--success-tint);color:var(--success)}

/* --- Tabellen: Haarlinien, ruhige Kopfzeile, Zahlen tabellarisch. */
.data-table{width:100%;border-collapse:collapse;font-size:.875rem}
.data-table th,.data-table td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.data-table th{
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);background:var(--surface-soft);white-space:nowrap;
}
.data-table td{font-variant-numeric:tabular-nums}
/* Eine Tabellenfußzeile benutzt <th>, ist aber keine Überschrift: Versalien
   machten aus "15,00 g" ein "15,00 G", und die Kopfzeilengröße liess den
   Betrag kleiner erscheinen als seine Fußnote. */
.data-table tfoot th{
  text-transform:none;
  letter-spacing:0;
  font-size:.875rem;
  font-weight:600;
  color:var(--text);
  background:var(--surface-sunken);
  border-top:1px solid var(--line-strong);
  border-bottom:0;
  vertical-align:top;
}
.data-table tfoot th small{display:block;margin-top:2px;font-weight:400;color:var(--muted)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--surface-soft)}
.data-table td small{display:block;color:var(--muted);margin-top:2px;font-variant-numeric:normal}
.table-scroll{overflow-x:auto}
.table-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface-soft);
}
.table-title h2{margin:0;padding:0;display:flex;align-items:center;gap:8px;font-size:.9375rem}
.table-title h2 .icon{color:var(--gold-deep)}
.table-title>span{color:var(--muted);font-size:.8125rem}
.table-title-right{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.8125rem}
.empty{padding:32px 20px;text-align:center;color:var(--muted);font-size:.875rem}

/* --- Anmeldung */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login-card,.install-card{
  width:min(100%,440px);
  background:var(--surface);border:1px solid var(--line);
  padding:32px;border-radius:var(--r-m);
  box-shadow:var(--shadow-raised);
}
.login-card .brand,.install-card .brand{margin-bottom:24px}
.login-card label{margin:14px 0}
.install-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.install-card{width:min(100%,760px)}
.install-intro{margin-bottom:20px}

/* ===========================================================================
   6 · Schmale Ansichten
   ---------------------------------------------------------------------------
   Drei Stufen statt der bisherigen 40 Einzelgrenzen:
     <=1080px  Tablet quer – Seitenleiste schmaler, Kennzahlen zweispaltig
     <=760px   Tablet hoch / großes Telefon – Gerüst einspaltig, Navigation
               als waagerecht scrollbarer Streifen (bewährtes Verhalten der
               alten Datei, nicht neu erfunden)
     <=520px   Telefon – Formulare einspaltig, engere Innenabstände
   Die 16px-Regel für Eingabefelder ist Pflicht: Darunter zoomt iOS Safari
   beim Antippen die ganze Seite heran.
   ======================================================================== */
@media (max-width:1080px){
  :root{--sidebar-w:212px;--content-pad:22px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  :root{--content-pad:16px}
  .topbar{height:auto;min-height:56px;padding:10px 14px;gap:10px;flex-wrap:wrap}
  .topbar-right{margin-left:auto;gap:4px}
  .account-chip,.user-chip,.logout-link{height:30px;padding:0 8px;font-size:.75rem}
  /* Der Kontoname darf kürzen statt die Leiste zu sprengen. */
  .account-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}

  /* Das Gerüst der schmalen Ansicht steht in Teil C (Schublade). */

  .page-head{flex-direction:column;gap:12px}
  .page-head>form{width:100%}
  .page-head>form .button{width:100%}
  .card{padding:16px}
  .data-table th,.data-table td{padding:10px 12px}
  .form-grid{gap:12px}
}

@media (max-width:520px){
  :root{--content-pad:14px}
  .kpi-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .card{padding:14px}
  .table-card h2{padding:16px 14px 0}
  .table-title{padding:12px 14px}
  .button{padding:9px 12px}
  .button-row .button{flex:1 1 auto}
}

/* iOS Safari zoomt die Seite heran, wenn ein angetipptes Feld unter 16px
   Schriftgröße hat. Das betrifft Telefone und Tablets gleichermaßen. */
@media (max-width:820px){
  input,select,textarea{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms;animation-duration:.01ms}
}

/* ===========================================================================
   7 · Sichtbarkeit – die eine bewusste Ausnahme von der !important-Regel
   ---------------------------------------------------------------------------
   Das hidden-Attribut ist ein Versprechen des Markups: Was es trägt, ist weg.
   Bausteine setzen aber display:grid/flex, und eine Klasse hat dieselbe
   Spezifität wie ein Attribut – bei Gleichstand gewinnt die spätere Regel.
   Ohne !important müsste jede künftige Komponente daran denken; das ist genau
   die Fehlerquelle, die in diesem Projekt schon mehrfach zugeschlagen hat
   (Aufklapplisten und Zusammenfassungen blieben sichtbar). Deshalb hier, am
   Ende der Datei, als einzige Ausnahme – und nur für diesen einen Zweck.
   ======================================================================== */
[hidden]{display:none!important}


/* ===========================================================================
   TEIL B · Bildschirmspezifische Geometrie
   ---------------------------------------------------------------------------
   Übernommen aus der Vorgängerdatei. Reihenfolge bewusst unverändert, damit
   sich am Kaskaden-Ergebnis nichts verschiebt. Farben und Radien sind
   umgestellt, die Geometrie ist es nicht.
   ======================================================================== */

.gold-fix-reminder{display:flex;align-items:center;gap:16px;padding:16px 22px 16px 16px;border-radius:0;margin-bottom:18px;background:linear-gradient(135deg,var(--gold-tint),var(--gold-tint));border:1px solid var(--gold-line);box-shadow:0 10px 28px rgba(184,149,82,.1)}
.gold-fix-reminder .section-icon{background:var(--gold-tint);border-color:var(--gold-line);color:var(--gold-dark)}
.gold-fix-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.gold-fix-text strong{font-size:1.03rem;color:var(--text);font-weight:700}
.gold-fix-text span{color:var(--gold);font-size:.85rem}
.gold-fix-reminder form{flex-shrink:0}
select:disabled{cursor:not-allowed;opacity:.55;background-color:var(--surface-sunken)}
select::-ms-expand{display:none}
@supports (appearance: base-select){
select{appearance:base-select}
select::picker-icon{display:none}
select::picker(select){appearance:base-select;border:1px solid var(--line);border-radius:0;box-shadow:var(--shadow-strong);padding:6px;margin-top:8px;background:var(--surface)}
select option{padding:10px 14px;border-radius:0;cursor:pointer;font-size:.92rem;transition:.12s}
select option:hover, select option:focus{background:var(--surface-sunken)}
select option:checked{background:linear-gradient(135deg,var(--gold),var(--frame-accent));color:var(--text);font-weight:600}
}
.span-2{grid-column:1/-1}
.inline-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.inline-form select, .inline-form input{width:auto;min-width:160px}
.inline-form.wide>*{flex:1}
.inline-form.wide .button{flex:0 0 auto}
.filter-bar{display:flex;gap:12px;margin-bottom:18px}
.filter-bar label{width:220px}
.data-table tfoot th{background:var(--surface-sunken);color:var(--anthrazit)}
.data-table.compact th, .data-table.compact td{padding:11px 10px}
.data-table input{min-width:108px}
.data-table .right{text-align:right}
.clickable{cursor:pointer}
.clickable:hover td{background:var(--bg)}
.opening-row td{background:var(--surface-soft);color:var(--muted)}
.material-divider td{padding:11px 16px!important;background:var(--surface-sunken);border-top:1px solid var(--line)}
.table-title>span:last-child{color:var(--muted);font-size:.8rem}
.collapsible-section>summary.table-title{cursor:pointer;list-style:none;user-select:none}
.collapsible-section>summary.table-title::-webkit-details-marker{display:none}
.collapsible-section>summary.table-title:hover{background:var(--surface-sunken)}
.collapsible-section:not([open])>summary.table-title{border-bottom:none}
.table-title-right .chevron{width:18px;height:18px;flex-shrink:0;transition:transform .18s ease}
.collapsible-section[open]>summary.table-title .chevron{transform:rotate(90deg)}
.overdue{color:var(--danger);font-weight:700}
.material-pill .icon{width:15px;height:15px}
.material-pill.gold{background:var(--gold-tint);color:var(--gold-deep);border:1px solid var(--gold-line)}
.material-pill.silver{background:var(--silver-tint);color:var(--silver);border:1px solid var(--silver-line)}
.input-suffix{position:relative}
.input-suffix input{padding-right:34px}
.input-suffix>span{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.81rem}
/* Ohne das legt Chrome beim Fokus die Pfeiltasten des Zahlenfeldes über die Einheit. */
.input-suffix input[type=number]::-webkit-outer-spin-button,.input-suffix input[type=number]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}
.input-suffix input[type=number]{-moz-appearance:textfield}
.turnover-card>div{width:100%}
.turnover-values{display:grid;margin-top:2px}
.turnover-values>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:4px 0;min-width:0}
.turnover-values>div+div{border-top:1px solid var(--line)}
.turnover-card .turnover-values small{font-size:.73rem;line-height:1.2;white-space:nowrap}
.turnover-card .turnover-values strong{margin-top:0;font-size:1rem;font-variant-numeric:tabular-nums;text-align:right}
.stats-grid .kpi-card strong{font-size:1.45rem;margin-top:10px}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.quick-grid a{position:relative;background:linear-gradient(145deg,var(--text),var(--anthrazit));color:var(--surface);padding:22px;border-radius:0;min-height:160px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow);overflow:hidden}
.quick-grid a:before{content:"";position:absolute;width:130px;height:130px;border-radius:0;right:-55px;top:-55px;background:rgba(201,171,112,.08)}
.quick-grid a:hover{transform:translateY(-3px);color:var(--surface);box-shadow:0 18px 38px rgba(27,29,26,.18)}
.quick-grid a>span:not(.quick-icon){color:var(--line-strong);font-size:.86rem;margin-top:6px;max-width:85%}
.quick-icon{position:absolute;left:21px;top:20px;width:43px;height:43px;border-radius:0;display:grid;place-items:center;background:var(--anthrazit-soft);color:var(--frame-accent)}
.quick-icon .icon{width:21px;height:21px}
.quick-arrow{position:absolute;right:20px;bottom:21px;color:var(--frame-accent);width:20px;height:20px}
.market-icon .icon{width:19px;height:19px}
.market-meta .icon{color:var(--success)}
.calculator-card{overflow:hidden}
.calculator-table th, .calculator-table td{padding:8px 12px}
.calculator-table th{padding-top:9px;padding-bottom:9px}
.calculator-table .material-divider td{padding:7px 12px!important}
.calculator-table input{min-width:96px;padding:7px 10px;height:36px}
.calculator-table .fine-output, .calculator-table .amount-output, .calculator-table .readonly-rate{white-space:nowrap}
.gram-hint{display:block;font-size:.72rem;color:var(--muted);margin-top:3px;white-space:nowrap}
.discount-stage-buttons{flex-wrap:wrap;justify-content:flex-end}
.discount-stage-button span{display:block}
.discount-stage-button:hover{border-color:var(--frame-accent);background:var(--surface)}
.discount-stage-button.active{box-shadow:0 0 0 2px rgba(184,149,82,.12)}
.calculator-action .button{min-height:42px}
.agreed-price{min-width:190px}
.agreed-price input{background:var(--surface);color:var(--text);padding-top:9px;padding-bottom:9px}
.agreed-price>span{color:var(--muted);font-size:.9rem}
.api-rate-icon .icon{width:25px;height:25px}
.api-status-card>.icon{width:30px;height:30px;padding:6px;border-radius:0}
.api-status-card.online>.icon{background:var(--success-tint);color:var(--success)}
.api-status-card.offline>.icon{background:var(--gold-tint);color:var(--warning)}
.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.detail-list{margin:0}
.detail-list>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line)}
.detail-list>div:last-child{border-bottom:0}
.detail-list dt{color:var(--muted)}
.detail-list dd{margin:0;text-align:right;font-weight:600}
.inventory-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-bottom:18px}
.inventory-total{color:var(--surface);border-radius:0;padding:23px;gap:17px;box-shadow:var(--shadow)}
.gold-total{background:linear-gradient(135deg,var(--gold-deep),var(--gold-deep))}
.silver-total{background:linear-gradient(135deg,var(--silver),var(--silver))}
.inventory-icon{background:rgba(255,255,255,.11);place-items:center}
.inventory-icon .icon{width:27px;height:27px}
.inventory-total span{display:block;color:var(--line-strong)}
.inventory-total strong{display:block;margin-top:2px}
.inventory-total small{color:var(--line-strong)}
.manual-entry{margin-bottom:18px}
.account-card.active-account{border-color:var(--frame-accent);box-shadow:0 14px 36px rgba(184,149,82,.12)}
.account-card-icon{width:46px;height:46px;border-radius:0;display:grid;place-items:center;background:var(--surface-sunken);color:var(--muted)}
.active-account .account-card-icon{background:var(--gold-tint);color:var(--gold-deep)}
.account-card-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.account-users .icon{width:14px;height:14px}
.account-create .section-heading{margin-bottom:20px}
.document{max-width:900px;min-height:1100px;margin:0 auto;background:var(--surface);padding:58px 62px;box-shadow:0 8px 32px rgba(0,0,0,.14);color:var(--text)}
.document .brand{color:var(--text)}
.document-table .right{text-align:right}
@media(max-width:1250px){
.calculator-table{min-width:760px}
.table-card{overflow-x:auto}
}
@media(max-width:1050px){
.app-shell{grid-template-columns:220px minmax(0,1fr)}
.content{padding:28px 24px}
.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.quick-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
.topbar{height:auto;min-height:64px;padding:12px 15px;gap:12px}
.brand{font-size:.82rem}
.brand-mark{width:33px;height:33px}
.account-chip{display:none}
.user-chip span, .logout-link span{display:none}
.user-chip, .logout-link{width:36px;padding:0;justify-content:center}
.app-shell{display:block}
.sidebar{position:sticky;z-index:20;flex-direction:row;overflow-x:auto;padding:9px 10px;gap:5px;border-top:1px solid var(--anthrazit)}
.nav-section-label{display:none}
.nav-link{white-space:nowrap;padding:9px 11px}
.nav-link .icon{width:16px;height:16px}
.content{padding:22px 14px}
.page-head{flex-direction:column;margin-bottom:21px}
.page-head>.button, .page-head>form, .page-head>form .button{width:100%}
.gold-fix-reminder{flex-direction:column;align-items:stretch;text-align:center}
.gold-fix-reminder .section-icon{margin:0 auto}
.gold-fix-reminder form, .gold-fix-reminder form .button{width:100%}
.split-grid, .quick-grid, .stats-grid, .inventory-overview{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.span-2{grid-column:auto}
.calculator-action .button{flex:1}
.discount-stage-buttons{justify-content:flex-start;width:100%}
.inline-form, .inline-form.wide{align-items:stretch;flex-direction:column}
.inline-form select, .inline-form input, .inline-form.wide>*{width:100%}
.kpi-grid{grid-template-columns:1fr}
.document{padding:30px;min-height:auto}
.login-card, .install-card{padding:27px 22px}
}
@media(max-width:480px){
h1{font-size:1.75rem}
.content{padding:18px 10px}
.card{padding:18px;border-radius:0}
.table-card{padding:0}
.kpi-card{padding:16px}
.calculator-action .button{width:100%}
.discount-stage-buttons{display:grid;grid-template-columns:1fr 1fr}
.discount-stage-button{width:100%}
.button-row{width:100%}
.button-row .button{flex:1}
.topbar-right{gap:3px}
.brand>span:last-child{max-width:180px;white-space:normal;line-height:1.15}
.inventory-total{padding:18px}
.inventory-icon{width:46px;height:46px}
.quick-grid a{min-height:145px}
}
@media print{
.document{max-width:none;min-height:auto;box-shadow:none;padding:0}
.document a{color:var(--text)}
}
.header-rates{display:flex;align-items:center;gap:7px;margin-left:auto;margin-right:18px}
.header-rate{height:38px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--anthrazit-soft);border-radius:0;background:var(--ink);color:var(--surface)}
.header-rate .icon{width:16px;height:16px}
.header-rate.gold .icon{color:var(--frame-accent)}
.header-rate.silver .icon{color:var(--silver-line)}
.header-rate small{color:var(--faint);font-size:.66rem;text-transform:uppercase;letter-spacing:.07em}
.header-rate strong{font-size:.84rem}
.header-rate em{font-size:.67rem;font-style:normal;color:var(--faint);margin-left:2px}
.rate-live{width:8px;height:8px;border-radius:0;box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.rate-live.online{background:var(--success-line)}
.rate-live.offline{background:var(--gold)}
.button.danger-soft{background:var(--danger-tint);color:var(--danger);border:1px solid var(--danger-line)}
.button.danger-soft:hover{background:var(--danger-tint);color:var(--danger)}
.icon-button.danger{color:var(--danger);border-color:var(--danger-line);background:var(--danger-tint)}
.icon-button.next .icon{transform:rotate(180deg)}
.profit-card{border-color:var(--success-line);background:linear-gradient(145deg,var(--success-tint),var(--success-tint))}
.profit-card .kpi-icon{background:var(--success-tint);color:var(--success)}
.metal-combined{background:linear-gradient(145deg,var(--surface),var(--bg))}
.metal-combined .kpi-icon{background:linear-gradient(135deg,var(--gold-line),var(--line));color:var(--muted)}
.material-pill.mixed{background:linear-gradient(90deg,var(--gold-tint) 0 50%,var(--surface-sunken) 50%);color:var(--text-soft);border:1px solid var(--line-strong)}
.cancelled-row td{opacity:.65;text-decoration:none}
.cancelled-row td:first-child strong{text-decoration:line-through}
.material-dot{width:8px;height:8px;border-radius:0;display:inline-block;margin-right:8px}
.material-dot.gold{background:var(--gold)}
.material-dot.silver{background:var(--silver)}
.tax-summary>.icon{color:var(--gold-dark);margin-top:2px}
.email-card .section-heading{margin-bottom:20px}
.sale-form{max-width:980px}
.sale-material-card{border:1px solid var(--line);border-radius:0;padding:18px;background:var(--surface-soft)}
.sale-material-card.gold-card{border-color:var(--gold-line);background:var(--gold-tint)}
.sale-material-card.silver-card{border-color:var(--silver-line);background:var(--silver-tint)}
.sale-material-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.sale-material-head h2{margin:0 0 3px}
.sale-material-head p{margin:0}
.sale-material-head>strong{margin-left:auto;font-size:.82rem;color:var(--muted)}
.tax-fixed{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:0;background:var(--surface);border:1px solid var(--line)}
.tax-fixed span, .tax-fixed small{display:block}
.tax-fixed small{color:var(--muted);margin-top:2px}
.sale-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--anthrazit-soft);border-radius:0;overflow:hidden}
.sale-preview>div{padding:15px 17px;background:var(--text);color:var(--surface)}
.sale-preview span{display:block;color:var(--faint);font-size:.75rem}
.sale-preview strong{font-size:1.15rem}
.invoice-items td:first-child{min-width:220px}
.tax-notes p{display:flex;align-items:flex-start;gap:7px}
.tax-notes .icon{width:15px;height:15px;color:var(--success);margin-top:2px}
.payment-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.danger-zone{margin-top:20px;border-color:var(--danger-line);background:var(--danger-tint);display:flex;align-items:center;justify-content:space-between;gap:20px}
.danger-zone h2{color:var(--danger);margin-bottom:6px}
.danger-zone p{margin:0}
.month-navigation .filter-bar{margin:0}
.month-navigation .icon-button:first-child .icon{transform:rotate(180deg)}
.month-navigation .icon-button.next .icon{transform:none}
.settings-hint{display:flex;gap:10px;padding:12px 14px;border-radius:0;background:var(--bg);border:1px solid var(--gold-line);color:var(--gold-deep);font-size:.82rem}
.settings-hint .icon{flex:0 0 auto}
.invitation-result{display:flex;gap:14px;padding:16px;border-radius:0;margin-bottom:18px;border:1px solid}
.invitation-result.success{background:var(--success-tint);border-color:var(--success-line);color:var(--success)}
.invitation-result.warning{background:var(--warning-tint);border-color:var(--warning-line);color:var(--warning)}
.invitation-result>div{flex:1}
.invitation-result strong, .invitation-result span{display:block}
.copy-link{display:flex;gap:8px;margin-top:9px}
.copy-link input{background:var(--surface)}
.account-users .badge{font-size:.67rem}
.swal2-popup{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;border-radius:0}
.swal2-confirm{background:var(--gold)!important;color:var(--text)!important}
.swal2-toast{box-shadow:0 15px 45px rgba(25,27,24,.18)!important}
@media(max-width:1180px){
.header-rate small{display:none}
.header-rate{padding:0 8px}
.header-rates{margin-right:8px}
.topbar{padding-left:18px;padding-right:18px}
.sale-preview{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:900px){
.header-rates{order:3;width:100%;margin:0;justify-content:center}
.topbar{flex-wrap:wrap}
.header-rate{height:32px}
.header-rate small{display:block}
.topbar-right{margin-left:auto}
.sale-material-head{align-items:flex-start;flex-wrap:wrap}
.sale-material-head>strong{width:100%;margin-left:59px}
.danger-zone{align-items:stretch;flex-direction:column}
.danger-zone .inline-form{width:100%}
}
@media(max-width:800px){
.header-rates{display:flex}
.email-card .form-grid, .sale-material-card .form-grid{grid-template-columns:1fr}
.sale-preview{grid-template-columns:1fr}
.copy-link{flex-direction:column}
.month-navigation{align-items:stretch}
.month-navigation .filter-bar{flex:1}
.month-navigation .filter-bar label{width:100%}
.account-actions .button{width:100%}
}
@media(max-width:540px){
.header-rates{justify-content:stretch}
.header-rate{flex:1;justify-content:center}
.header-rate small{display:none}
.header-rate strong{font-size:.75rem}
.sale-material-head>strong{margin-left:0}
.invoice-items{min-width:680px}
}
@media(max-width:800px){
.topbar{position:relative}
.sidebar{top:0}
}
.calculator-card{margin-bottom:0}
.calculator-table td, .calculator-table th{padding-top:8px;padding-bottom:8px}
.calculator-table .material-divider td{background:var(--surface-sunken)}
.calculator-table .weight-input{min-height:38px;padding-top:8px;padding-bottom:8px}
.material-output strong{font-size:.91rem}
.discount-stage-button{appearance:none;cursor:pointer;transition:.18s ease}
.discount-stage-button span, .discount-stage-button strong{display:block}
.agreed-price input{font-weight:600}
.workflow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:18px}
.workflow-step{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--muted)}
.workflow-step>span{width:31px;height:31px;border-radius:0;display:grid;place-items:center;background:var(--line);font-weight:700;flex-shrink:0}
.workflow-step>div{min-width:0}
.workflow-step strong, .workflow-step small{display:block;overflow-wrap:break-word}
.workflow-step small{font-size:.7rem;margin-top:2px}
.workflow-step.active{border-color:var(--frame-accent);background:var(--surface-soft);color:var(--gold-deep)}
.workflow-step.active>span{background:var(--gold);color:var(--text)}
.workflow-step.done{border-color:var(--success-line);background:var(--bg);color:var(--success)}
.workflow-step.done>span{background:var(--success-tint);color:var(--success)}
.workflow-action-icon{width:48px;height:48px;border-radius:0;display:grid;place-items:center;background:var(--line);color:var(--gold-dark);flex:0 0 auto}
.calculation-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.calculation-totals>div{background:var(--bg);border-radius:0;padding:11px}
.calculation-totals span, .calculation-totals strong{display:block}
.calculation-totals span{font-size:.7rem;color:var(--muted)}
.calculation-totals strong{margin-top:3px}
.customer-mode{gap:8px;background:var(--surface-sunken);border-radius:0}
.customer-mode label{flex:1;flex-direction:row;align-items:center;gap:8px;padding:9px 11px;border-radius:0;background:var(--surface);cursor:pointer}
.customer-mode input{width:auto}
.disabled-fields{opacity:.42;pointer-events:none}
.cash-warning{color:var(--warning);font-weight:600;line-height:1.35}
.cash-warning.visible{display:block}
.app-modal{border:0;border-radius:0;padding:25px;box-shadow:0 28px 90px rgba(20,22,19,.28)}
.modal-close-form{position:absolute;right:13px;top:13px}
.app-modal .section-heading{padding-right:44px;margin-bottom:18px}
.customer-list-card{min-width:0}
.customer-search{padding:16px;border-bottom:1px solid var(--line)}
.search-field{display:flex;align-items:center;gap:8px}
.search-field>.icon{width:18px;height:18px;color:var(--muted);margin-left:3px}
.search-field input{flex:1}
.customer-editor .button-row{justify-content:flex-start}
.stats-grid .kpi-icon{align-self:center;flex:0 0 auto}
.stats-grid .kpi-icon .icon{display:block;margin:auto}
.stats-visual-grid{grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr);margin-top:18px}
.metric-bars{display:grid;gap:18px;margin-top:20px}
.metric-bar>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px}
.metric-bar span{font-size:.78rem;color:var(--muted)}
.metric-track{height:12px;border-radius:0;background:var(--line);overflow:hidden}
.metric-track i{display:block;height:100%;border-radius:0;background:linear-gradient(90deg,var(--gold),var(--frame-accent))}
.metric-bar.sale-bar .metric-track i{background:linear-gradient(90deg,var(--success),var(--success-line))}
.metric-bar.cost-bar .metric-track i{background:linear-gradient(90deg,var(--muted),var(--faint))}
.metric-bar.profit-bar .metric-track i{background:linear-gradient(90deg,var(--success),var(--success))}
.metal-flow-card{display:grid;gap:12px}
.metal-flow-row{display:flex;align-items:center;gap:12px;padding:14px;border-radius:0;border:1px solid var(--line)}
.metal-flow-row.gold{background:var(--gold-tint);border-color:var(--gold-line)}
.metal-flow-row.silver{background:var(--silver-tint);border-color:var(--silver-line)}
.metal-flow-row strong, .metal-flow-row small{display:block}
.metal-flow-row small{margin-top:4px;color:var(--muted);line-height:1.4}
.logo-setting{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid var(--line);border-radius:0;background:var(--surface-soft)}
.logo-setting>label{flex:1}
.logo-preview{width:130px;height:76px;border:1px dashed var(--gold-line);border-radius:0;background:var(--surface);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.logo-preview img{width:100%;height:100%;object-fit:contain;padding:8px}
.logo-preview .icon{width:30px;height:30px;color:var(--gold)}
.number-preview{align-self:end;min-height:69px;border:1px solid var(--line);border-radius:0;background:var(--bg);padding:10px 12px}
.number-preview span, .number-preview strong{display:block}
.number-preview span{font-size:.68rem;color:var(--muted);text-transform:uppercase}
.number-preview strong{margin-top:5px;font-size:.88rem;word-break:break-all}
@media(max-width:1100px){
.stats-visual-grid{grid-template-columns:1fr}
.cash-entry-form{grid-template-columns:1fr 1fr 1fr}
.cash-entry-form .button{grid-column:1/-1}
}
@media(max-width:1380px){
.workflow-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px){
.calculator-bottom-bar{border-radius:0}
.discount-stage-buttons{grid-template-columns:1fr 1fr}
.workflow-steps{grid-template-columns:1fr 1fr}
.workflow-action-card .button{width:100%}
.calculation-totals{grid-template-columns:1fr}
.customer-mode{flex-direction:column}
.cash-entry-form{grid-template-columns:1fr}
.logo-setting{align-items:flex-start;flex-direction:column}
.logo-preview{width:100%;height:105px}
.app-modal{padding:22px 17px}
.customer-search{padding:12px}
}
@media(max-width:520px){
.discount-stage-buttons, .workflow-steps{grid-template-columns:1fr}
.calculator-action .button{width:100%}
.workflow-step{padding:10px}
.stats-grid .kpi-card{min-height:0}
}
.stats-grid .kpi-icon{display:grid!important;place-items:center!important;justify-content:center!important;align-content:center!important}
.stats-grid .kpi-icon svg{display:block;margin:0!important}
.option-disabled{opacity:.48;cursor:not-allowed!important}
.option-disabled input{cursor:not-allowed}
.anonymous-limit-note{color:var(--danger);font-weight:600}
.metal-combined strong{font-size:1.12rem!important}
.metal-combined.turnover-card strong{font-size:1rem!important}
.calculator-bottom-bar{position:sticky;bottom:0;z-index:15;border:1px solid var(--anthrazit-soft);border-top:0;border-radius:0;background:var(--text);color:var(--surface);box-shadow:0 -9px 24px rgba(0,0,0,.18);backdrop-filter:none}
.discount-compact-group{align-items:center;gap:8px}
.compact-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--line-strong);white-space:nowrap}
.discount-stage-buttons{align-items:center;flex:0 1 auto}
.discount-stage-button{border:1px solid var(--anthrazit-soft);background:var(--ink);border-radius:0;color:var(--surface);text-align:left;box-shadow:none}
.discount-stage-button span{color:var(--line-strong);line-height:1.1}
.discount-stage-button strong{margin-top:2px;line-height:1.15;white-space:nowrap}
.discount-stage-button:hover, .discount-stage-button.active{border-color:var(--frame-accent);background:var(--ink);box-shadow:none}
.discount-stage-button.active span{color:var(--frame-accent)}
.calculator-action .button{height:36px;padding:7px 12px;border-radius:0}
.agreed-price input{font-size:.92rem}
.calculator-card{border-bottom-left-radius:0;border-bottom-right-radius:0}
.calculation-totals.two{grid-template-columns:repeat(2,1fr)}
.customer-workflow-card{padding:0;overflow:hidden}
.customer-toggle{border:0}
.customer-toggle>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;cursor:pointer;background:var(--surface-soft);border-bottom:1px solid transparent}
.customer-toggle[open]>summary{border-bottom-color:var(--line)}
.customer-toggle>summary::-webkit-details-marker{display:none}
.customer-toggle>summary>span:first-child{display:flex;align-items:center;gap:11px}
.customer-toggle summary strong, .customer-toggle summary small{display:block}
.customer-toggle summary small{font-size:.72rem;color:var(--muted);margin-top:2px}
.summary-icon{width:34px;height:34px;border-radius:0;display:grid;place-items:center;background:var(--line);color:var(--gold-dark)}
.summary-icon .icon{width:17px;height:17px}
.toggle-label{display:flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;color:var(--gold-dark)}
.toggle-label .icon{width:14px;height:14px;transition:.2s}
.customer-toggle[open] .toggle-label .icon{transform:rotate(90deg)}
.purchase-customer-form{padding:20px}
.customer-saved-details{padding:18px 20px;margin:0}
.confirmation-inline.done{background:var(--surface-soft)}
.fixed-payment-method{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:0}
.fixed-payment-method>span strong, .fixed-payment-method>span small{display:block}
.fixed-payment-method>span small{font-size:.7rem}
.payment-method-field{min-width:220px}
.inventory-correction + .table-card .table-title{padding:14px 20px}
.inventory-correction + .table-card .table-title h2{font-size:1.05rem}
@media(max-width:1350px){
.calculator-bottom-bar{grid-template-columns:1fr}
.discount-stage-button{width:86px;min-width:86px}
}
@media(max-width:950px){
.discount-compact-group{align-items:flex-start;flex-direction:column}
.discount-stage-buttons{display:grid;grid-template-columns:repeat(4,1fr)}
.discount-stage-button{width:auto;min-width:0}
.workflow-payment-section .button{grid-column:1/-1}
}
@media(max-width:620px){
.calculator-bottom-bar{position:static}
.discount-stage-buttons{grid-template-columns:1fr 1fr}
.calculator-action .button{width:100%}
.confirmation-actions .button{width:100%}
.customer-toggle>summary{padding:15px}
.purchase-customer-form{padding:15px}
}
.discount-compact-group .compact-label{display:block;margin:0 0 4px 2px}
.discount-stage-button span{font-size:.6rem}
.discount-stage-button strong{font-size:.71rem}
.metric-pair{border:1px solid var(--anthrazit-soft);border-radius:0;background:var(--ink)}
.metric-pair>span{display:block;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.metric-pair strong{display:flex;justify-content:space-between;gap:7px;color:var(--line-strong)}
.metric-pair b{color:var(--surface);white-space:nowrap}
.agreed-field{color:var(--line);font-size:.7rem;gap:4px}
.agreed-field input{height:36px;background:var(--surface)}
.calculator-submit{height:36px;align-self:end}
.calculator-table{min-width:620px}
.list-search{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:0;box-shadow:var(--shadow)}
.list-search>.icon{color:var(--muted)}
.list-search input{border:0;box-shadow:none!important;padding:7px 4px}
.list-search .button{padding:8px 13px}
.row-actions form{margin:0}
.button.small{padding:7px 10px;font-size:.78rem}
.cash-entry-form input[name="document_no"]{max-width:145px}
.export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
.export-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.export-card>div{flex:1}
.export-card h2{margin-bottom:6px}
.export-card p{margin:0}
.export-card .button{width:100%}
.export-month{margin-bottom:20px}
.account-edit-details summary .icon{width:15px;height:15px}
.checkbox-line{flex-direction:row;align-items:center}
.checkbox-line input{width:auto}
.account-actions .button{width:100%}
.kpi-icon, .stats-grid .kpi-icon{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
.kpi-icon .icon, .stats-grid .kpi-icon .icon{display:block!important;margin:0!important;transform:none!important}
@media(max-width:1300px){
.calculator-bottom-bar{grid-template-columns:196px 1fr 200px 1fr}
.calculator-submit{grid-column:1/-1;width:100%}
.export-grid{grid-template-columns:1fr 1fr}
.cash-entry-form{grid-template-columns:repeat(3,1fr)}
.cash-entry-form .button{grid-column:1/-1}
}
@media(max-width:850px){
.calculator-bottom-bar{grid-template-columns:1fr 1fr}
.discount-compact-group{grid-column:1/-1}
.discount-stage-buttons{width:100%}
.calculator-submit{grid-column:1/-1}
.export-grid{grid-template-columns:1fr}
.list-search{align-items:stretch;flex-wrap:wrap}
.list-search input{flex:1;min-width:200px}
}
@media(max-width:520px){
.calculator-bottom-bar{grid-template-columns:1fr}
.discount-stage-buttons{grid-template-columns:1fr 1fr}
.calculator-table{min-width:560px}
.cash-entry-form{grid-template-columns:1fr}
.list-search input, .list-search .button{width:100%}
.opos-pay{width:100%}
}
.header-new-purchase{height:40px;padding:0 14px;border-radius:0;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--frame-accent),var(--frame-accent));color:var(--text);font-weight:700;box-shadow:0 8px 20px rgba(183,145,72,.22)}
.header-new-purchase:hover{color:var(--text);transform:translateY(-1px);box-shadow:0 10px 25px rgba(183,145,72,.3)}
.header-new-purchase .icon{width:17px;height:17px}
.field-invalid{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(189,73,73,.12)!important}
.field-error{color:var(--danger)!important;font-size:.72rem!important;font-weight:600!important}
.flash-message.alert{margin-top:0}
.modal-x{position:absolute;right:14px;top:14px;z-index:2}
.calculator-table .input-suffix{min-width:0}
.agreed-field .agreed-price{max-width:136px}
.agreed-field input{width:136px}
.metric-pair{min-width:0}
.calculator-submit{padding-left:11px;padding-right:11px}
.purchase-workflow-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.workflow-payment-section>.button{height:52px}
.fixed-payment-method{padding:8px 12px}
.fixed-payment-method>span strong{color:var(--surface)}
.fixed-payment-method>span small{color:var(--line-strong)}
.customer-fields{position:relative;margin-top:14px}
.customer-picker-label{position:relative}
/* Die Symbolspalte war auf feste 20px gesetzt, das Symbol ist mit seinem
   Außenabstand aber 29px breit – die Lupe wurde am linken Rand abgeschnitten.
   Jetzt richtet sich die Spalte nach dem Symbol, der Abstand kommt vom
   Container. Damit kann kein Symbolwechsel die Konstruktion wieder sprengen. */
.customer-picker-control{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding-left:11px;border:1px solid var(--line-strong);border-radius:0;background:var(--surface);overflow:hidden;transition:.18s}
.customer-picker-control:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,79,.13)}
.customer-picker-control>.icon{margin-left:0;color:var(--muted)}
.customer-picker-control input{border:0;border-radius:0;box-shadow:none!important;padding-left:9px;min-width:0}
/* Der Container zeigt den Fokus über :focus-within mit Rahmen und Ring.
   Ein zweiter Ring am Feld darin wäre nur Unruhe. */
.customer-picker-control input:focus-visible{outline:none}
.customer-add-button{align-self:stretch;border:0;border-left:1px solid var(--line);background:var(--surface-sunken);color:var(--gold-deep);padding:0 12px;display:flex;align-items:center;gap:6px;font-weight:700}
.customer-add-button:hover{background:var(--gold-line)}
.customer-add-button .icon{width:15px;height:15px}
.customer-results{position:absolute;top:76px;left:0;right:0;z-index:20;max-height:280px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:0;box-shadow:0 18px 48px rgba(30,31,27,.18)}
.customer-result{width:100%;border:0;background:var(--surface);padding:10px 11px;border-radius:0;text-align:left;display:block;color:var(--text)}
.customer-results .customer-result[hidden], .customer-results .customer-result.is-search-hidden, .customer-results .customer-results-empty[hidden]{display:none!important}
.customer-result:hover, .customer-result:focus{background:var(--surface-sunken);outline:none}
.customer-result strong, .customer-result small{display:block}
.customer-result small{font-size:.72rem;color:var(--muted);margin-top:2px}
.customer-results-empty{padding:18px;text-align:center;color:var(--muted)}
.selected-customer{padding:10px 11px;border-radius:0;background:var(--bg);border:1px solid var(--success-line);display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:9px}
.selected-customer[hidden]{display:none}
.selected-customer>.icon{color:var(--success)}
.selected-customer strong, .selected-customer small{display:block}
.selected-customer small{font-size:.72rem;color:var(--muted)}
.customer-modal{width:min(760px,calc(100vw - 28px))}
.customer-modal-fields{margin-top:6px}
.modal-actions{display:flex;justify-content:flex-end;margin-top:18px}
.qr-modal{width:min(470px,calc(100vw - 28px));text-align:center}
.qr-code{width:226px;min-height:226px;padding:8px;margin:18px auto;background:var(--surface);border:1px solid var(--line);border-radius:0;display:grid;place-items:center}
.qr-code img, .qr-code canvas{max-width:100%;height:auto!important}
.qr-link{font-size:.72rem}
.privacy-note{display:block;margin-top:10px;color:var(--muted)}
.metal-flow-values{display:grid;grid-template-columns:1fr;gap:5px;margin-top:8px}
.metal-flow-values span{display:flex;justify-content:space-between;gap:20px;padding-top:5px;border-top:1px solid rgba(0,0,0,.07)}
.metal-flow-values b{white-space:nowrap}
.accounts-compact-list{display:grid}
.account-compact-row{display:grid;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:0;box-shadow:0 7px 22px rgba(38,35,28,.045)}
.account-compact-row.active-account{border-color:var(--frame-accent);background:var(--surface)}
.account-compact-row .account-card-icon{width:40px;height:40px;border-radius:0}
.account-compact-main>span, .account-compact-main>small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-compact-main>span{font-size:.79rem;margin-top:2px}
.account-compact-main>small{font-size:.72rem;margin-top:1px}
.account-compact-actions form{margin:0}
.account-compact-actions .button.small{height:36px}
.account-edit-modal{width:min(610px,calc(100vw - 28px))}
.icon-button.danger-soft{color:var(--danger);background:var(--danger-tint);border-color:var(--danger-line)}
@media(max-width:1400px){
.calculator-bottom-bar{grid-template-columns:168px 135px minmax(175px,1fr) 145px}
.calculator-submit{grid-column:1/-1;width:100%}
}
@media(max-width:1250px){
.purchase-workflow-grid{grid-template-columns:1fr}
.account-compact-row{grid-template-columns:42px minmax(220px,1fr) auto}
.account-compact-actions{grid-column:1/-1;border-top:1px solid var(--line);padding-top:9px}
}
@media(max-width:950px){
.header-new-purchase span{display:none}
.header-new-purchase{width:40px;padding:0;justify-content:center}
.calculator-bottom-bar{grid-template-columns:1fr 1fr}
.discount-compact-group{grid-column:1/-1}
.discount-stage-buttons{width:100%}
.calculator-submit{grid-column:1/-1}
.confirmation-actions .button{flex:1}
.workflow-payment-section>.button{grid-column:1/-1;width:100%}
}
@media(max-width:680px){
.calculator-bottom-bar{grid-template-columns:1fr}
.agreed-field .agreed-price, .agreed-field input{max-width:none;width:100%}
.confirmation-actions .button{width:100%}
.account-compact-row{grid-template-columns:38px minmax(0,1fr)}
.account-compact-row>.badge{grid-column:2}
.account-compact-actions{grid-column:1/-1;flex-wrap:wrap}
.account-compact-actions .button{flex:1}
.customer-results{top:74px}
}
.discount-compact-group{min-width:0}
.discount-stage-button{min-height:36px;padding:4px 6px;overflow:visible}
.discount-stage-button .stage-price, .discount-stage-button.active .stage-price{display:block!important;visibility:visible!important;opacity:1!important;color:var(--surface)!important;white-space:nowrap}
.discount-stage-button.active{background:var(--ink)!important;border-color:var(--frame-accent)!important;color:var(--surface)!important}
.agreed-field input{font-size:.84rem;padding-left:9px}
.metric-pair{padding:6px 8px!important;min-height:52px}
.metric-pair>span{font-size:.58rem!important}
.metric-pair strong{font-size:.7rem!important;line-height:1.25}
.purchase-customer-form>.customer-fields+label{margin-top:16px}
.id-document-link{min-height:42px}
.confirmation-actions .button{min-height:44px}
.payment-method-field{margin:0}
.payment-method-field select, .workflow-payment-section>.button, .fixed-payment-method{height:52px;min-height:52px}
.workflow-payment-section>.button{align-self:end}
.fixed-payment-method{background:var(--ink)!important;border-color:var(--anthrazit-soft)!important;color:var(--surface)!important}
.fixed-payment-method>.icon{color:var(--frame-accent)!important}
.fixed-payment-method strong{color:var(--surface)!important}
.fixed-payment-method small{color:var(--line-strong)!important}
.fine-finalize-modal{width:min(620px,calc(100vw - 28px))}
.finalize-summary{padding:13px 15px;border-radius:0;background:var(--surface-sunken);border:1px solid var(--gold-line);display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center}
.finalize-summary span, .finalize-summary small{color:var(--muted)}
.finalize-summary strong{font-size:1.2rem}
.finalize-summary small{grid-column:1/-1}
.post-id-upload .inline-form{align-items:center}
.post-id-upload .button{min-height:44px}
.customer-list-card{width:100%}
.buyer-picker{position:relative}
.buyer-picker .customer-results{top:76px}
.sale-due-note{margin-top:2px}
.customer-modal .modal-actions{position:sticky;bottom:-1px;background:rgba(255,255,255,.96);padding-top:12px;padding-bottom:2px}
.inventory-overview.inventory-simple{max-width:980px}
.inventory-icon{align-items:center!important;justify-content:center!important;line-height:0!important}
.inventory-icon .icon{display:block!important;margin:0!important;transform:none!important;vertical-align:middle}
.cash-opening-card{margin-bottom:18px}
.cash-opening-card .section-heading{margin-bottom:18px}
.cash-opening-card .inline-form{align-items:end}
.cash-current{padding:11px 15px;border-radius:0;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-align:right}
.cash-current span{display:block;color:var(--muted);font-size:.7rem}
.cash-current strong{display:block;font-size:1.16rem;margin-top:2px}
.cash-entry-form .cash-document-number{min-width:110px!important}
.kpi-icon, .inventory-icon, .section-icon, .workflow-action-icon, .account-card-icon{line-height:0}
.kpi-icon .icon, .inventory-icon .icon, .section-icon .icon, .workflow-action-icon .icon, .account-card-icon .icon{display:block;margin:auto}
@media(max-width:1450px){
.discount-stage-buttons{width:270px}
}
@media(max-width:1050px){
.discount-stage-buttons{width:100%;grid-template-columns:repeat(4,1fr)}
.workflow-payment-section>.button{grid-column:1/-1;width:100%}
}
@media(max-width:720px){
.agreed-field .agreed-price, .agreed-field input, .values-metric{width:100%!important;max-width:none!important}
.inventory-overview.inventory-simple{grid-template-columns:1fr}
.cash-current{width:100%;text-align:left}
}
.calculator-table .input-suffix{width:74px!important;max-width:74px!important}
.calculator-table .weight-input{padding-left:6px!important}
.calculator-table th:nth-child(2), .calculator-table td:nth-child(2){width:86px!important}
.discount-stage-button .stage-price, .discount-stage-button.active .stage-price, .discount-stage-button.active strong{display:block!important;visibility:visible!important;opacity:1!important;color:var(--surface)!important;line-height:1.15!important;min-height:14px!important}
.agreed-field .agreed-price, .agreed-field input{width:104px!important;max-width:104px!important}
.inventory-total{display:flex!important;align-items:center!important}
.inventory-icon{position:relative!important;display:block!important;flex:0 0 54px!important;padding:0!important;margin:0!important;overflow:hidden!important}
.inventory-icon>.icon, .inventory-icon>svg{position:absolute!important;left:50%!important;top:50%!important;margin:0!important;transform:translate(-50%,-50%)!important}
.inventory-total>div{align-self:center}
.purchase-customer-form>.customer-fields~label{margin-top:16px}
.purchase-customer-form>.customer-fields~label+label{margin-top:10px}
.id-document-link{padding:10px 15px!important}
.save-customer-button{margin-top:18px!important}
.confirmation-actions .button{width:100%!important;margin:0!important}
.workflow-payment-section .payment-method-field select, .workflow-payment-section>.button{height:52px!important;min-height:52px!important}
label>.label-caption{display:inline-flex!important;align-items:baseline!important;gap:3px!important;vertical-align:baseline!important;white-space:nowrap!important}
label>.label-caption+.input-suffix, label>.label-caption+input, label>.label-caption+select, label>.label-caption+textarea{margin-top:0!important}
.field-error{display:block;line-height:1.3;margin-top:5px}
@media(max-width:1450px){
.values-metric{width:124px!important}
}
@media(max-width:1050px){
.agreed-field .agreed-price, .agreed-field input, .values-metric{width:100%!important;max-width:none!important}
}
@media(max-width:720px){
.discount-stage-buttons{grid-template-columns:1fr 1fr!important}
.inventory-icon{flex-basis:48px!important;width:48px!important;height:48px!important}
.inventory-icon>.icon, .inventory-icon>svg{width:24px!important;height:24px!important}
}
.calculator-table input[type=number]::-webkit-outer-spin-button, .calculator-table input[type=number]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}
.calculator-table input[type=number]{-moz-appearance:textfield}
.calculator-table .weight-input{width:84px!important;min-width:84px!important;max-width:84px!important;padding-right:10px!important}
.calculator-submit{justify-self:end}
.anonymous-limit-note{display:block;margin-top:10px}
.save-customer-button.with-margin{margin-top:6px}
.selected-customer{margin-top:10px;margin-bottom:4px}
.payment-method-field{display:flex;flex-direction:column;align-self:stretch}
.payment-method-field .field-label{display:block;font-size:.82rem;font-weight:700;color:var(--line-strong)}
.payment-method-field .field-label em{font-style:normal;color:var(--frame-accent)}
.workflow-payment-section .button{min-height:52px}
.payment-method-field select{display:flex;align-items:center;height:52px;min-height:52px;padding:0 40px 0 18px;border-radius:0;border:1px solid rgba(212,184,120,.65);background-color:var(--surface);color:var(--text);font-weight:600;box-shadow:0 0 0 4px rgba(212,184,120,.10)}
.payment-method-field select:focus{outline:none;border-color:var(--frame-accent);box-shadow:0 0 0 4px rgba(212,184,120,.18)}
.fixed-payment-method.compact{min-height:52px;border-radius:0;align-self:stretch}
.fixed-payment-method.compact>span strong{font-size:1rem}
.fixed-payment-method.compact>span small{margin-top:2px}
.cash-warning{display:block;min-height:18px;margin-top:2px}
.paid-workflow-summary{display:grid;gap:12px;padding:16px 18px 18px;border-top:1px solid var(--line);background:var(--success-tint)}
.workflow-summary-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.workflow-summary-row:last-child{border-bottom:0;padding-bottom:0}
.workflow-summary-row h3{margin:2px 0 4px;font-size:1rem}
.workflow-summary-row p{margin:0;color:var(--muted)}
.summary-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.summary-pill{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border-radius:0;background:var(--gold-tint);color:var(--anthrazit);font-weight:700}
.customer-saved-details dd{text-align:right}
.detail-list small{display:block}
.inventory-total span{font-size:1rem}
.inventory-icon{width:70px!important;height:70px!important;border-radius:0}
.inventory-icon>.icon, .inventory-icon>svg{width:34px!important;height:34px!important}
@media(max-width:980px){
.calculator-submit{width:100%;max-width:none}
}
@media(max-width:620px){
.calculator-table .weight-input{width:74px!important;min-width:74px!important;max-width:74px!important}
.summary-actions{flex-direction:column;align-items:stretch}
.summary-pill{justify-self:start}
}
.calculator-table .agreed-price input[type=number]::-webkit-outer-spin-button, .calculator-table .agreed-price input[type=number]::-webkit-inner-spin-button, .agreed-price input[type=number]::-webkit-outer-spin-button, .agreed-price input[type=number]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}
.values-metric{width:180px!important}
.calculator-submit{width:220px!important}
.confirmation-inline>.workflow-action-icon{grid-column:1;grid-row:1}
.inline-secondary-actions .button{width:100%!important;justify-content:center!important}
.confirmation-actions.vertical .button{width:100%!important;min-width:0!important;justify-content:center!important}
.customer-workflow-card .workflow-payment-section{border-radius:0;border:0!important;border-top:1px solid var(--anthrazit-soft)!important;box-shadow:none!important}
.customer-workflow-card .workflow-payment-section>.button{grid-column:auto!important}
.customer-workflow-card .fixed-payment-method.compact{padding:14px 16px!important}
.document-viewer-modal{width:min(1180px,calc(100vw - 36px))!important;max-width:1180px!important;height:min(850px,calc(100vh - 36px))!important;max-height:none!important;border-radius:0}
.document-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.document-viewer-head h2{margin:2px 0 0}
.document-viewer-frame{min-height:420px}
.document-viewer-frame iframe{display:block;width:100%;height:100%;border:0;background:var(--surface)}
.document-viewer-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);background:var(--surface)}
.document-viewer-actions .button{min-width:150px}
@media(max-width:1450px){
.calculator-submit{grid-column:1/-1!important;width:100%!important;max-width:none!important}
}
@media(max-width:1050px){
.values-metric{width:100%!important}
}
@media(max-width:720px){
.calculator-bottom-bar{grid-template-columns:1fr!important}
.customer-workflow-card .workflow-payment-section{grid-template-columns:1fr!important;padding:16px!important}
.document-viewer-modal{width:100vw!important;height:100dvh!important;max-width:none!important;border-radius:0}
.document-viewer-frame{height:calc(100% - 152px);min-height:300px}
.document-viewer-actions{display:grid;grid-template-columns:1fr 1fr}
.document-viewer-actions .button{min-width:0;width:100%}
}
.calculator-bottom-bar{width:100%!important;grid-template-columns:minmax(340px,1.55fr) minmax(165px,.72fr) minmax(235px,1.02fr) minmax(190px,.82fr) minmax(275px,1.18fr)!important}
.discount-compact-group, .agreed-field, .values-metric, .calculator-submit{width:100%!important;min-width:0!important}
.discount-compact-group{align-self:stretch!important;display:grid!important;grid-template-rows:auto 1fr!important}
.discount-stage-buttons{width:100%!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
.discount-stage-button{width:100%!important;min-width:0!important;height:100%!important}
.agreed-field .agreed-price{height:100%!important}
.agreed-price input{height:100%!important;min-height:54px!important}
.agreed-price input[type=number]::-webkit-outer-spin-button, .agreed-price input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none!important;appearance:none!important;margin:0!important}
.agreed-price input[type=number]{-moz-appearance:textfield!important}
.metric-pair{height:100%!important;justify-content:center!important}
.values-metric{min-width:235px!important}
.calculator-submit{max-width:none!important;min-height:62px!important;justify-content:center!important;white-space:nowrap!important}
.customer-mode{display:grid!important;min-height:54px!important;padding:6px!important;box-sizing:border-box!important}
.customer-mode label{border:1px solid transparent!important;box-sizing:border-box!important;font-weight:600!important}
.customer-mode label:has(input:checked){border-color:var(--frame-accent)!important;background:var(--surface-soft)!important}
.customer-mode label.option-disabled{opacity:.55!important}
.upload-status{display:inline-flex;align-items:center;gap:7px;border-radius:0;background:var(--surface-sunken);color:var(--muted);font-weight:700}
.upload-status.success{background:var(--success-tint);color:var(--success)}
.compact-id-upload .button{width:100%!important;min-width:0!important;min-height:48px!important;margin:0!important}
.confirmation-secondary-row .button, .confirmation-actions .button{width:100%!important;min-width:0!important;justify-content:center!important;white-space:nowrap!important}
.customer-workflow-card .workflow-payment-section{grid-template-columns:minmax(280px,1.2fr) minmax(280px,.9fr) minmax(280px,.9fr)!important;align-items:end!important;gap:18px!important;padding:24px!important;margin:0!important}
.customer-workflow-card .workflow-payment-section .payment-step-copy{grid-column:auto!important;align-self:center!important}
.customer-workflow-card .workflow-payment-section .payment-method-field, .customer-workflow-card .workflow-payment-section .fixed-payment-method, .customer-workflow-card .workflow-payment-section>.button{width:100%!important;min-width:0!important;margin:0!important}
.payment-method-field{gap:7px!important}
.payment-method-field .field-label{line-height:1.2!important;margin:0!important}
.payment-method-field select, .customer-workflow-card .workflow-payment-section>.button, .fixed-payment-method.compact{height:58px!important;min-height:58px!important;border-radius:0}
.customer-workflow-card .workflow-payment-section>.button{align-self:end!important;justify-content:center!important}
.fixed-payment-method.compact{padding:12px 16px!important}
.document-viewer-modal{overflow:hidden!important}
.document-viewer-frame{border:1px solid var(--line)!important;border-radius:0;overflow:hidden!important;background:var(--line)!important}
.document-viewer-frame iframe{border-radius:0}
.accounts-compact-list{gap:10px!important}
.account-compact-row{grid-template-columns:46px minmax(260px,1fr) auto minmax(330px,auto)!important;padding:13px 15px!important;gap:14px!important}
.account-compact-actions{display:grid!important;grid-template-columns:auto auto!important;align-items:center!important;gap:10px!important;justify-content:end!important}
.account-primary-actions, .account-utility-actions{display:flex!important;align-items:center!important;gap:7px!important}
.account-primary-actions{padding-right:10px!important;border-right:1px solid var(--line)!important}
.account-primary-actions form, .account-utility-actions form{margin:0!important}
.account-primary-actions .button{min-width:105px!important;justify-content:center!important}
.account-utility-actions{padding:5px 7px!important;border-radius:0;background:var(--bg)!important}
.account-utility-actions .icon-button{width:36px!important;height:36px!important}
@media(max-width:1450px){
.calculator-bottom-bar{grid-template-columns:minmax(310px,1.45fr) minmax(155px,.7fr) minmax(215px,1fr) minmax(175px,.8fr) minmax(250px,1.1fr)!important}
.account-compact-row{grid-template-columns:44px minmax(230px,1fr) auto!important}
.account-compact-actions{grid-column:1/-1!important;border-top:1px solid var(--line)!important;padding-top:10px!important;justify-content:end!important}
}
@media(max-width:1050px){
.calculator-bottom-bar{grid-template-columns:1fr 1fr!important}
.discount-compact-group{grid-column:1/-1!important}
.calculator-submit{grid-column:1/-1!important}
.customer-workflow-card .workflow-payment-section{grid-template-columns:1fr 1fr!important}
.customer-workflow-card .workflow-payment-section .payment-step-copy{grid-column:1/-1!important}
.customer-workflow-card .workflow-payment-section>.button{grid-column:auto!important}
}
@media(max-width:700px){
.calculator-bottom-bar{grid-template-columns:1fr!important}
.discount-stage-buttons{grid-template-columns:1fr 1fr!important}
.discount-compact-group, .calculator-submit{grid-column:auto!important}
.customer-mode{grid-template-columns:1fr!important}
.customer-workflow-card .workflow-payment-section{grid-template-columns:1fr!important;padding:18px!important}
.customer-workflow-card .workflow-payment-section .payment-step-copy{grid-column:auto!important}
.document-viewer-frame{margin:0 10px 12px!important}
.document-viewer-actions{padding:12px 10px 14px!important}
.account-compact-row{grid-template-columns:40px minmax(0,1fr)!important}
.account-compact-row>.badge{grid-column:2!important}
.account-compact-actions{grid-column:1/-1!important;grid-template-columns:1fr!important;justify-content:stretch!important}
.account-primary-actions{border-right:0!important;padding-right:0!important}
.account-primary-actions .button{flex:1!important}
.account-utility-actions{justify-content:flex-end!important}
}
.purchase-process-step{border-top:1px solid var(--line);padding:24px;background:var(--surface)}
.purchase-process-step[hidden]{display:none!important}
.process-step-heading{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:start}
.process-step-number{display:grid;place-items:center;width:48px;height:48px;border-radius:0;background:var(--line);color:var(--gold-deep);font-size:1.05rem;font-weight:700}
.process-step-heading h2{margin:3px 0 6px;font-size:1.25rem}
.process-step-heading p{margin:0;color:var(--muted);line-height:1.5}
.process-step-amount{align-self:center;font-size:1.65rem;white-space:nowrap}
.step-two-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 0 64px}
.process-action-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-content:start;border:1px solid var(--line);border-radius:0;background:var(--surface-soft);min-width:0}
.process-action-card>.button, .process-action-card>form, .process-action-card>.step-id-secondary, .process-action-card>.upload-status, .process-action-card>.signature-done{grid-column:1/-1}
.process-action-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:0;background:var(--line);color:var(--gold-dark)}
.process-action-icon .icon{width:21px;height:21px}
.process-action-card strong, .process-action-card small{display:block}
.process-action-card small{margin-top:3px;color:var(--muted);line-height:1.4}
.step-id-upload .button{min-height:46px;margin:0;justify-content:center}
.step-id-secondary .button{width:100%;min-width:0;justify-content:center}
.process-step-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0 0 64px;padding-top:16px;border-top:1px solid var(--line)}
.process-step-footer>span{color:var(--muted);font-size:.78rem}
.process-step-footer .button{min-width:230px;justify-content:center;flex-shrink:0}
.step-three{background:var(--text);color:var(--surface);border-color:var(--anthrazit-soft)}
.step-three .process-step-number{background:var(--anthrazit);color:var(--frame-accent)}
.step-three .eyebrow, .step-three .process-step-heading p{color:var(--line-strong)}
.step-three-grid{display:grid;gap:16px;margin:20px 0 0 64px}
.step-three .payment-method-field{display:grid;gap:7px;min-width:0}
.step-three .payment-method-field .field-label{color:var(--line-strong);line-height:1.2}
.step-three .payment-method-field select{width:100%;height:58px;min-height:58px;border:1px solid var(--frame-accent);border-radius:0;background-color:var(--surface);color:var(--text);padding:0 40px 0 17px;font-size:1rem;font-weight:600;box-shadow:0 0 0 4px rgba(208,182,109,.10)}
.step-three .payment-choice{height:58px;min-height:58px;padding:10px 16px!important;border-radius:0}
.step-three .payment-confirm-button{width:100%;height:58px;min-height:58px;justify-content:center;margin:0}
.step-three .cash-warning{min-height:0;margin-top:2px;color:var(--warning-line)}
.inventory-alloy-card, .pickup-history{margin-top:18px}
.pickup-form{display:grid;gap:18px}
.pickup-stock-list{display:grid;gap:9px;max-height:48vh;overflow:auto;padding-right:4px}
.pickup-stock-row{grid-template-columns:minmax(0,1fr) 190px;padding:13px 14px;border:1px solid var(--line);border-radius:0;background:var(--surface-soft)}
.pickup-stock-row>div:first-of-type{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
.pickup-stock-row>div:first-of-type small{grid-column:2;color:var(--muted);margin-top:3px}
.pickup-stock-row label{margin:0}
.sale-document-date{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:14px 16px;border:1px solid var(--line);border-radius:0;background:var(--surface-soft)}
.sale-document-date label{width:min(280px,100%);margin:0}
.sale-document-date p{display:flex;align-items:center;gap:7px;margin:0;color:var(--muted)}
.sale-material-head{grid-template-columns:auto minmax(0,1fr)!important}
.document-viewer-modal{padding:0 18px 18px!important}
.document-viewer-head{margin:0 -18px;padding-left:20px;padding-right:20px}
.document-viewer-frame{margin:0!important}
.document-viewer-actions{margin:0 -18px -18px;padding:14px 20px 18px!important}
@media(max-width:1050px){
.step-two-grid{grid-template-columns:1fr;margin-left:0}
.process-step-footer, .step-three-grid{margin-left:0}
.step-three-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
.purchase-process-step{padding:17px}
.process-step-heading{grid-template-columns:42px minmax(0,1fr)}
.process-step-number{width:42px;height:42px;border-radius:0}
.process-step-amount{grid-column:2;justify-self:start;font-size:1.35rem}
.step-two-grid{grid-template-columns:1fr;margin-top:16px}
.process-step-footer{align-items:stretch;flex-direction:column;margin-top:15px}
.process-step-footer .button{width:100%;min-width:0}
.step-three-grid{grid-template-columns:1fr;margin-top:16px}
.pickup-stock-row{grid-template-columns:1fr}
.sale-document-date{align-items:stretch;flex-direction:column}
.sale-document-date label{width:100%}
.document-viewer-modal{padding:0 10px 12px!important}
.document-viewer-head{margin:0 -10px;padding:14px 13px}
.document-viewer-actions{margin:0 -10px -12px;padding:12px 10px!important}
}
@media(max-width:1450px) and (min-width:1051px){
.calculator-bottom-bar{grid-template-columns:minmax(260px,1.35fr) minmax(145px,.72fr) minmax(205px,1fr) minmax(175px,.86fr)!important}
.calculator-bottom-bar .values-metric, .calculator-bottom-bar .fine-metric{min-width:0!important}
}
.agreed-field .agreed-price input{height:34px!important;min-height:34px!important;padding-top:5px!important;padding-bottom:5px!important;line-height:1.1!important}
.calculator-bottom-bar{padding-top:7px!important;padding-bottom:7px!important}
.step-two-grid.smartphone-only{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch}
.step-two-grid.smartphone-only .process-action-card{height:100%;grid-template-rows:auto auto 1fr auto;align-content:start}
.step-two-grid.smartphone-only .process-action-card>.button{align-self:end}
.upload-status.optional{background:var(--surface-sunken);color:var(--gold-deep)}
.final-gross-list{display:grid;gap:9px}
.final-gross-row{display:grid!important;grid-template-columns:minmax(0,1fr) 170px;align-items:center;gap:18px;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:var(--surface-soft);margin:0!important}
.final-gross-row>span strong, .final-gross-row>span small{display:block}
.final-gross-row>span small{margin-top:3px;color:var(--muted)}
.final-gross-row .input-suffix{width:100%}
.final-gross-row .input-suffix input{height:42px;min-height:42px}
.sale-document-date .label-caption, .fine-finalize-modal .label-caption{display:inline-flex!important;align-items:baseline!important;gap:4px!important;white-space:nowrap!important}
.process-step-footer .button:disabled{opacity:.55}
@media(max-width:880px){
.final-gross-row{grid-template-columns:minmax(0,1fr) 150px}
}
@media(max-width:540px){
.final-gross-row{grid-template-columns:1fr;gap:9px}
.final-gross-row .input-suffix{width:100%}
.step-two-grid.smartphone-only .process-action-card{grid-template-rows:auto}
.agreed-field .agreed-price input{height:40px!important;min-height:40px!important}
}
.upload-status{justify-self:start!important;width:auto!important;max-width:100%;box-sizing:border-box}
.process-action-card .button.full{border-radius:0}
#openMobileUpload{padding-left:16px!important;padding-right:16px!important}
.customer-mode{align-items:stretch!important}
.customer-mode label{min-height:56px!important;margin:0!important}
.step-three-grid{grid-template-columns:minmax(200px,1fr) minmax(260px,1fr)!important}
.step-three-grid>*{min-width:0!important;box-sizing:border-box!important}
.step-three .payment-method-field select{box-sizing:border-box!important}
.payment-confirm-wrap{display:flex;align-items:flex-end;width:100%;min-width:0;box-sizing:border-box}
.payment-confirm-wrap .payment-confirm-button{width:100%!important;min-width:0!important;box-sizing:border-box!important}
.step-three .payment-choice{align-self:end!important;width:100%!important;box-sizing:border-box!important}
.final-gross-row{cursor:default}
.pickup-form label>.label-caption{display:inline-flex!important;align-items:baseline!important;gap:4px!important;white-space:nowrap!important}
.tax-notes{margin-top:22px!important}
.tax-notes p{font-size:.9rem!important;line-height:1.5!important;margin:10px 0 0!important}
@media(max-width:850px){
.step-three-grid{grid-template-columns:1fr!important}
.payment-confirm-wrap{padding-top:0!important}
.step-three .payment-choice, .step-three .payment-method-field, .payment-confirm-wrap{width:100%!important}
}
@media(max-width:540px){
.upload-status{font-size:.72rem!important;padding:8px 11px!important}
}
.upload-status{margin-top:5px!important;padding:4px 9px!important;min-height:28px!important;font-size:.72rem!important;line-height:1.1!important}
.upload-status .icon{width:14px!important;height:14px!important}
.process-action-card{padding:14px!important}
.process-action-card .button.full{min-height:42px!important;padding:9px 12px!important}
.step-two-grid.smartphone-only{gap:12px!important}
.id-policy-setting{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;border:1px solid var(--line);border-radius:0;background:var(--surface-soft)}
.id-policy-setting>.section-icon{border-radius:0}
.id-policy-setting strong, .id-policy-setting small{display:block}
.id-policy-setting small{margin-top:3px;color:var(--muted);line-height:1.35}
.compact-toggle{display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;cursor:pointer;position:relative}
.compact-toggle input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.compact-toggle>span{position:relative;width:42px;height:24px;border-radius:0;background:var(--line-strong);box-shadow:inset 0 0 0 1px var(--line-strong);transition:.18s}
.compact-toggle>span:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:0;background:var(--surface);box-shadow:0 2px 5px rgba(0,0,0,.18);transition:.18s}
.compact-toggle input:checked+span{background:var(--frame-accent)}
.compact-toggle input:checked+span:after{transform:translateX(18px)}
.compact-toggle b{white-space:nowrap}
.settings-inline-note .section-icon{width:34px;height:34px;flex:0 0 auto}
.settings-inline-note>div{min-width:0}
.settings-inline-note strong, .settings-inline-note small{display:block}
@media(max-width:700px){
.id-policy-setting{grid-template-columns:38px minmax(0,1fr)}
.compact-toggle{grid-column:1/-1;justify-content:flex-end}
.settings-inline-note{min-height:0}
}
.agreed-field{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-self:stretch!important;min-width:0!important}
.agreed-field>.compact-label{display:block!important;margin:0 0 6px!important;color:var(--line-strong)!important;font-size:.66rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.08em!important;line-height:1!important;white-space:nowrap!important}
.agreed-field>.compact-label em{font-style:normal;color:var(--frame-accent)}
.agreed-field .agreed-price{margin-top:auto!important}
#confirmationStatus, #idUploadStatus{height:28px!important;min-height:28px!important;padding:4px 9px!important;display:inline-flex!important;align-items:center!important;box-sizing:border-box!important}
.final-gross-row.dental-row{grid-template-columns:minmax(0,1fr) 150px 170px}
.dental-fineness-field{margin:0!important}
.dental-fineness-field>span{display:block;margin-bottom:4px;font-size:.7rem;color:var(--muted);font-weight:700}
.gross-final-input{align-self:end}
.mobile-camera-upload{display:none}
.camera-capture-button{cursor:pointer}
.touch-device .desktop-qr-upload{display:none!important}
.touch-device .mobile-camera-upload .button{width:100%}
.id-policy-setting{padding:10px 12px!important;gap:11px!important}
.id-policy-setting>.section-icon{width:34px!important;height:34px!important}
.id-policy-setting small{font-size:.72rem!important}
.compact-toggle b{font-size:.72rem!important}
.potential-card .kpi-icon{background:var(--surface-sunken);color:var(--success)}
@media(max-width:1250px){
.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.stats-grid{grid-template-columns:1fr}
.final-gross-row.dental-row{grid-template-columns:1fr}
.dental-fineness-field, .gross-final-input{width:100%}
}
.mobile-upload-page{min-height:100vh;min-height:100svh;padding:max(22px,env(safe-area-inset-top))
    max(18px,env(safe-area-inset-right))
    max(22px,env(safe-area-inset-bottom))
    max(18px,env(safe-area-inset-left));background:radial-gradient(circle at 20% 0,var(--surface) 0,var(--surface-sunken) 48%,var(--line) 100%);display:grid;align-items:center}
.mobile-upload-wrap{width:min(100%,560px);margin:0 auto}
.mobile-upload-card{width:100%;padding:clamp(26px,6vw,42px);border:1px solid var(--line);border-radius:0;background:var(--surface);box-shadow:var(--shadow-strong);overflow:hidden}
.mobile-upload-card>.brand-mark{width:48px;height:48px;margin-bottom:24px;border-radius:0}
.mobile-upload-card h1{margin-bottom:12px;font-size:clamp(1.75rem,7vw,2.35rem)}
.mobile-upload-card>p{margin:0 0 24px;font-size:1rem;line-height:1.6}
.mobile-upload-card form{display:grid;gap:16px;margin-top:22px}
.mobile-upload-card form label{gap:9px}
.mobile-upload-card input[type=file]{padding:13px;min-height:50px;background:var(--surface-soft)}
.mobile-upload-card .button.full{min-height:52px}
.mobile-upload-card .privacy-note{display:block;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);line-height:1.55}
.mobile-upload-success{display:flex;align-items:center;gap:9px;margin-top:22px;padding:14px 16px;border-radius:0;background:var(--success-tint);color:var(--success);font-weight:700}
@media(max-width:420px){
.mobile-upload-page{align-items:start;padding:max(14px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(16px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left))}
.mobile-upload-card{padding:24px 19px 26px;border-radius:0}
.mobile-upload-card>.brand-mark{margin-bottom:20px}
.mobile-upload-card>p{margin-bottom:20px}
}
.agreed-field>.compact-label.field-label{margin-bottom:6px!important}
.payment-confirm-wrap{padding-top:0!important;align-self:end!important;height:auto!important}
.step-three-grid{align-items:end!important}
.step-three .payment-method-field{position:relative!important;align-self:end!important;height:auto!important}
.step-three .cash-warning{position:absolute!important;left:0;top:calc(100% + 5px);margin:0!important;z-index:2}
.step-three .payment-confirm-button, .step-three .payment-method-field select, .step-three .payment-choice{height:58px!important;min-height:58px!important}
.inventory-overview.inventory-simple{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.value-total{background:linear-gradient(135deg,var(--ink),var(--anthrazit-line))!important}
.value-total .inventory-icon{color:var(--frame-accent)!important}
.opening-stock-list{max-height:52vh}
@media(max-width:1100px){
.inventory-overview.inventory-simple{grid-template-columns:1fr 1fr!important}
.value-total{grid-column:1/-1}
}
@media(max-width:680px){
.inventory-overview.inventory-simple{grid-template-columns:1fr!important}
.value-total{grid-column:auto}
.step-three .cash-warning{position:static!important;margin-top:5px!important}
}
.discount-compact-group, .agreed-field{display:grid!important;grid-template-rows:12px minmax(0,1fr)!important;align-self:end!important;height:100%!important}
.discount-compact-group>.compact-label, .agreed-field>.compact-label.field-label{margin:0 0 6px 2px!important;padding:0!important;line-height:12px!important;height:12px!important;align-self:end!important}
.discount-compact-group .discount-stage-buttons, .agreed-field .agreed-price{align-self:end!important;margin:0!important}
.pickup-modal form>.button.full{margin-bottom:14px!important}
.calculator-bottom-bar>*{min-width:0!important;box-sizing:border-box!important}
.calculator-bottom-bar .discount-compact-group{display:flex!important;height:auto!important;flex-direction:column!important;justify-content:flex-end!important;align-self:stretch!important}
.calculator-bottom-bar .discount-stage-buttons{display:flex!important;flex:1 1 auto!important;width:100%!important;gap:6px!important}
.calculator-bottom-bar .discount-stage-button{flex:1 1 0!important;width:auto!important;min-width:74px!important}
.calculator-bottom-bar .agreed-field{height:auto!important}
.calculator-bottom-bar .metric-pair{padding:8px 10px!important}
.calculator-bottom-bar .compact-label{min-height:12px!important;margin:0 0 6px 2px!important}
.calculator-bottom-bar .agreed-price, .calculator-bottom-bar .agreed-price input{width:100%!important;min-width:0!important}
.calculator-bottom-bar .input-suffix{min-width:0!important}
.mobile-camera-upload{gap:8px!important}
.camera-capture-button{overflow:hidden!important}
.camera-capture-button input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;pointer-events:auto!important;cursor:pointer!important}
.camera-file-name{display:block;margin:0;color:var(--muted);font-size:.72rem;line-height:1.35}
.camera-upload-submit{min-height:42px!important}
.mobile-file-status{display:block;color:var(--muted);font-size:.78rem;line-height:1.4}
.app-modal{position:fixed!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;margin:0!important;width:min(720px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;max-height:calc(100svh - 32px)!important;overflow:auto!important}
.app-modal.customer-modal, .app-modal.fine-finalize-modal{width:min(880px,calc(100vw - 32px))!important}
.app-modal::backdrop{background:rgba(18,20,18,.58);backdrop-filter:blur(2px)}
.cash-entry-form>*{width:auto!important;min-width:0!important;height:46px!important}
.cash-entry-form select[name="entry_type"]{flex:0 1 135px!important}
.cash-entry-form input[name="entry_date"]{flex:0 1 160px!important}
.cash-entry-form input[name="amount"]{flex:0 1 145px!important}
.cash-entry-form .cash-document-number{flex:0 1 155px!important;max-width:none!important}
.cash-entry-form input[name="booking_text"]{flex:1 1 230px!important}
.cash-entry-form .button{flex:0 0 130px!important}
.month-navigation{justify-content:center!important;width:100%!important}
.month-navigation>.icon-button{position:static!important;flex:0 0 44px!important;width:44px!important;height:44px!important;margin:0!important}
.month-navigation>.filter-bar{display:flex!important;flex:0 1 240px!important;margin:0!important;padding:0!important;min-width:0!important}
.month-navigation>.filter-bar label{width:100%!important;min-width:0!important;margin:0!important}
.month-navigation>.filter-bar input[type="month"]{width:100%!important;min-width:0!important;height:44px!important;padding-right:12px!important}
.stats-visual-grid>.stats-chart-card{flex:0 1 40%!important;min-width:0!important}
.stats-visual-grid>.metal-flow-card{flex:1 1 60%!important;min-width:0!important}
.metal-flow-values span{min-width:0!important}
.metal-flow-values b{font-size:.9rem!important}
.inventory-total{min-width:0!important;overflow:hidden!important}
.inventory-total>div{min-width:0!important}
.inventory-total strong{line-height:1.05!important;white-space:nowrap!important}
.inventory-total small{line-height:1.35!important}
@media(max-width:1280px){
.calculator-bottom-bar{flex-wrap:wrap!important}
.calculator-bottom-bar .discount-compact-group{flex:1 1 100%!important}
.calculator-bottom-bar .agreed-field{flex:1 1 175px!important}
.calculator-bottom-bar .values-metric{flex:1 1 165px!important}
.calculator-bottom-bar .fine-metric{flex:1 1 145px!important}
.calculator-bottom-bar .calculator-submit{flex:1 1 230px!important;width:auto!important;max-width:none!important}
}
@media(max-width:1024px){
.calculator-bottom-bar{gap:8px!important}
.calculator-bottom-bar .discount-stage-button{min-width:0!important}
.cash-entry-form>*{flex:1 1 calc(33.333% - 10px)!important;max-width:none!important}
.cash-entry-form input[name="booking_text"]{flex-basis:calc(66.666% - 10px)!important}
.cash-entry-form .button{flex-basis:calc(33.333% - 10px)!important}
.stats-visual-grid>.stats-chart-card{flex-basis:38%!important}
.stats-visual-grid>.metal-flow-card{flex-basis:62%!important}
}
@media(max-width:800px){
.calculator-bottom-bar{position:static!important;flex-wrap:wrap!important}
.calculator-bottom-bar .discount-compact-group{flex-basis:100%!important}
.calculator-bottom-bar .agreed-field, .calculator-bottom-bar .values-metric, .calculator-bottom-bar .fine-metric{flex:1 1 calc(50% - 8px)!important}
.stats-visual-grid{flex-direction:column!important}
.stats-visual-grid>.stats-chart-card, .stats-visual-grid>.metal-flow-card{flex:1 1 auto!important;width:100%!important}
.inventory-total strong{font-size:2.12rem!important}
.app-modal, .app-modal.customer-modal, .app-modal.fine-finalize-modal{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100svh - 20px)!important;padding:20px 16px!important}
}
@media(max-width:680px){
.calculator-bottom-bar .discount-stage-buttons{flex-wrap:wrap!important}
.calculator-bottom-bar .discount-stage-button{flex:1 1 calc(50% - 4px)!important}
.calculator-bottom-bar .agreed-field, .calculator-bottom-bar .values-metric, .calculator-bottom-bar .fine-metric{flex-basis:100%!important}
.cash-entry-form>*{flex:1 1 calc(50% - 8px)!important}
.cash-entry-form input[name="booking_text"], .cash-entry-form .button{flex-basis:100%!important}
.month-navigation{gap:8px!important}
.month-navigation>.filter-bar{flex-basis:min(210px,calc(100vw - 116px))!important}
.inventory-total strong{font-size:1.95rem!important}
}
@media(max-width:460px){
.cash-entry-form>*{flex-basis:100%!important}
.calculator-bottom-bar .discount-stage-button{font-size:.76rem!important}
.month-navigation>.icon-button{flex-basis:40px!important;width:40px!important;height:40px!important}
.month-navigation>.filter-bar input[type="month"]{height:40px!important}
.inventory-total strong{font-size:1.78rem!important}
}
.form-grid>*, .inline-form>*{min-width:0!important;box-sizing:border-box!important}
.form-grid label>input, .form-grid label>select, .form-grid label>textarea, .inline-form input, .inline-form select, .inline-form textarea{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.calculator-bottom-bar .discount-compact-group>.compact-label{align-self:flex-start!important;width:100%!important;text-align:left!important;margin-left:0!important}
.calculator-bottom-bar .fine-metric{flex:0 1 126px!important;min-width:116px!important}
.calculator-bottom-bar .agreed-field{flex-basis:160px!important}
.calculator-bottom-bar .calculator-submit{flex-basis:235px!important}
.touch-device .mobile-camera-upload{display:flex!important;flex-direction:column!important}
.camera-capture-button{position:relative!important;isolation:isolate!important}
.camera-capture-button input[type=file]{display:block!important;position:absolute!important;z-index:5!important;inset:0!important;width:100%!important;height:100%!important;min-height:100%!important;opacity:.001!important;pointer-events:auto!important;cursor:pointer!important;font-size:100px!important}
.camera-file-name.error, .mobile-file-status.error{color:var(--danger)!important}
.cash-entry-form{flex-wrap:wrap!important}
@media(min-width:1251px){
.cash-entry-form select[name="entry_type"]{flex:0 1 130px!important}
.cash-entry-form input[name="entry_date"]{flex:0 1 165px!important}
.cash-entry-form input[name="amount"]{flex:0 1 135px!important}
.cash-entry-form .cash-document-number{flex:0 1 150px!important}
.cash-entry-form input[name="booking_text"]{flex:1 1 210px!important}
.cash-entry-form .button{flex:0 0 130px!important}
}
@media(min-width:701px) and (max-width:1250px){
.cash-entry-form select[name="entry_type"], .cash-entry-form input[name="entry_date"], .cash-entry-form input[name="amount"], .cash-entry-form .cash-document-number{flex:1 1 calc(25% - 8px)!important;max-width:none!important}
.cash-entry-form input[name="booking_text"]{flex:1 1 calc(75% - 5px)!important;max-width:none!important}
.cash-entry-form .button{flex:1 1 calc(25% - 5px)!important;max-width:none!important}
}
@media(max-width:700px){
.cash-entry-form>input:not([type=hidden]), .cash-entry-form>select{flex:1 1 calc(50% - 6px)!important;max-width:none!important}
.cash-entry-form input[name="booking_text"], .cash-entry-form .button{flex-basis:100%!important}
}
@media(max-width:460px){
.cash-entry-form>input:not([type=hidden]), .cash-entry-form>select{flex-basis:100%!important}
}
.month-navigation{display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;margin-bottom:22px!important}
.month-navigation-label{display:block;font-size:.78rem;font-weight:700;color:var(--text);text-align:center}
.month-navigation-controls>.icon-button{position:static!important;flex:0 0 44px!important;width:44px!important;height:44px!important;margin:0!important}
.month-navigation-controls>.filter-bar{flex:1 1 auto!important;margin:0!important;padding:0!important}
.month-navigation-controls>.filter-bar label{display:block!important;width:100%!important;margin:0!important}
.month-navigation-controls input[type=month]{width:100%!important;height:44px!important;min-width:0!important;margin:0!important;padding:0 14px!important;text-align:center!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.stats-visual-grid{display:flex!important;gap:18px!important;align-items:stretch!important}
.stats-visual-grid>.stats-chart-card, .stats-visual-grid>.metal-flow-card{flex:1 1 50%!important;width:auto!important;min-width:0!important}
@media(max-width:760px){
.stats-visual-grid{flex-direction:column!important}
.stats-visual-grid>.stats-chart-card, .stats-visual-grid>.metal-flow-card{width:100%!important}
}
.inventory-total strong{font-size:clamp(1.55rem,2.15vw,2.15rem)!important;letter-spacing:-.035em!important;overflow:visible!important;text-overflow:clip!important}
.inventory-total small{font-size:.76rem!important}
@media(min-width:761px) and (max-width:1250px){
.inventory-overview.inventory-simple{gap:12px!important}
.inventory-total{padding:17px 15px!important;gap:12px!important}
.inventory-icon{width:50px!important;height:50px!important;flex-basis:50px!important}
.inventory-icon>.icon, .inventory-icon>svg{width:24px!important;height:24px!important}
.inventory-total strong{font-size:1.72rem!important}
}
.app-modal form.form-grid, .app-modal .form-grid{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:12px!important}
.app-modal .form-grid>label{flex:1 1 calc(50% - 6px)!important;min-width:220px!important;margin:0!important}
.app-modal .form-grid>.span-2, .app-modal .form-grid>button.span-2, .app-modal .form-grid>div.span-2{flex:1 1 100%!important;width:100%!important}
.app-modal input:not([type=hidden]), .app-modal select, .app-modal textarea, .app-modal .input-suffix{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
.app-modal .input-suffix input{width:100%!important;min-width:0!important}
.pickup-stock-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}
.pickup-stock-row>div:first-of-type{flex:1 1 auto!important;min-width:0!important}
.pickup-stock-row>label{flex:0 1 210px!important;min-width:170px!important}
@media(max-width:700px){
.app-modal .form-grid>label{flex-basis:100%!important;min-width:0!important}
.pickup-stock-row{flex-direction:column!important;align-items:stretch!important}
.pickup-stock-row>label{flex:1 1 auto!important;min-width:0!important;width:100%!important}
}
.fine-finalize-modal .form-grid>label.span-2{flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
.fine-finalize-modal input[type=date]{display:block!important;inline-size:calc(100% - 2px)!important;max-inline-size:calc(100% - 2px)!important;min-inline-size:0!important;box-sizing:border-box!important;margin-inline:0!important}
.month-navigation-controls{display:grid!important;grid-template-columns:44px minmax(0,300px) 44px!important;align-items:center!important;justify-content:center!important;width:min(100%,430px)!important;gap:10px!important}
.month-navigation-controls>.filter-bar{display:block!important;width:100%!important;min-width:0!important}
.month-navigation-controls .month-select{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:100%!important;min-width:0!important;height:44px!important;padding:0 42px 0 14px!important;text-align:center!important;text-align-last:center!important;box-sizing:border-box!important;background-color:var(--surface)!important}
.pickup-value-line{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
.pickup-value-line .input-suffix{flex:1 1 145px!important;min-width:0!important}
.pickup-material-value{flex:0 0 112px!important;display:inline-flex!important;align-items:center!important;justify-content:flex-end!important;min-height:42px!important;padding:0 10px!important;border-radius:0;background:var(--surface-sunken)!important;color:var(--anthrazit-soft)!important;font-weight:700!important;white-space:nowrap!important}
.pickup-total-value{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important;padding:14px 16px!important;border:1px solid var(--gold-line)!important;border-radius:0;background:var(--surface-sunken)!important}
.pickup-total-value span, .pickup-total-value strong, .pickup-total-value small{display:block!important}
.pickup-total-value strong{margin-left:auto!important;font-size:1.2rem!important}
.pickup-total-value small{flex-basis:100%!important;color:var(--muted)!important}
@supports (-webkit-touch-callout:none) @media (min-width:700px){
.app-modal.fine-finalize-modal{width:min(760px,calc(100vw - 80px))!important;max-width:min(760px,calc(100vw - 80px))!important;padding:26px!important}
.fine-finalize-modal input[type=date]{-webkit-appearance:none!important;appearance:none!important;width:calc(100% - 2px)!important;max-width:calc(100% - 2px)!important;min-width:0!important}
.month-navigation-controls{grid-template-columns:44px minmax(0,300px) 44px!important}
}
@media(max-width:700px){
.month-navigation-controls{grid-template-columns:40px minmax(0,1fr) 40px!important;width:100%!important}
.month-navigation-controls .month-select{height:40px!important}
.pickup-value-line{align-items:stretch!important;flex-direction:column!important}
.pickup-material-value{flex-basis:auto!important;width:100%!important;justify-content:flex-start!important}
}
.app-modal.document-viewer-modal{width:min(860px,calc(100vw - 32px))!important;max-width:860px!important;height:min(94svh,1120px)!important;max-height:min(94svh,1120px)!important;margin:auto!important;border-radius:0}
.document-viewer-frame{width:100%!important;min-width:0!important;aspect-ratio:210/297!important;height:auto!important;max-height:calc(94svh - 142px)!important;flex:1 1 auto!important}
.document-viewer-modal{display:none;flex-direction:column!important}
.document-viewer-modal[open]{display:flex!important}
.document-viewer-head, .document-viewer-actions{flex:0 0 auto!important}
@media(max-width:700px){
.app-modal.document-viewer-modal{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;height:min(92svh,980px)!important;max-height:92svh!important;border-radius:0}
.document-viewer-frame{max-height:calc(92svh - 136px)!important}
}
.calculator-bottom-bar .agreed-field>.compact-label{white-space:nowrap!important}
.app-modal .form-grid, .app-modal form.form-grid, .pickup-form .form-grid{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:12px!important;width:100%!important;min-width:0!important}
.app-modal .form-grid>label, .pickup-form .form-grid>label{flex:1 1 260px!important;width:auto!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.app-modal .form-grid>label.span-2, .pickup-form .form-grid>label.span-2{flex-basis:100%!important}
.app-modal label, .pickup-form label{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.app-modal input:not([type=hidden]), .app-modal select, .app-modal textarea, .pickup-form input:not([type=hidden]), .pickup-form select, .pickup-form textarea{display:block!important;inline-size:100%!important;width:100%!important;min-inline-size:0!important;min-width:0!important;max-inline-size:100%!important;max-width:100%!important;box-sizing:border-box!important;margin-inline:0!important}
/* Die Zeile darüber setzt jedes Feld im Dialog auf display:block – für ein
   <select> ist das falsch: Neuere Chrome-Versionen stellen es als Flex-Container
   dar (appearance:base-select), und als Block steht die Beschriftung wieder an
   der Oberkante statt mittig, das Feld wirkt dadurch zu hoch. Deshalb hier
   zurück auf Flex mit mittiger Ausrichtung wie ausserhalb von Dialogen. */
.app-modal select, .pickup-form select{display:flex!important;align-items:center!important}
.app-modal input[type=date], .pickup-form input[type=date]{-webkit-appearance:none!important;appearance:none!important;text-align:left!important}
.pickup-modal{width:min(780px,calc(100vw - 32px))!important;max-width:780px!important}
.pickup-modal .pickup-form{width:100%!important;min-width:0!important;overflow:hidden!important}
.pickup-modal .pickup-form>.form-grid:first-of-type>label{flex:1 1 calc(50% - 6px)!important}
@media(max-width:700px){
.pickup-modal .pickup-form>.form-grid:first-of-type>label{flex-basis:100%!important}
}
@supports (-webkit-touch-callout:none){
.app-modal input[type=date], .pickup-form input[type=date]{inline-size:100%!important;width:100%!important;max-width:100%!important;min-width:0!important}
}
.calculator-bottom-bar{display:flex!important;flex-wrap:nowrap!important;align-items:flex-end!important;justify-content:stretch!important;gap:12px!important;padding:14px 14px 10px!important}
.calculator-bottom-bar .discount-compact-group{flex:1 1 610px!important;min-width:420px!important;max-width:none!important}
.calculator-bottom-bar .agreed-field{flex:0 0 156px!important;width:156px!important;min-width:156px!important;max-width:156px!important;margin:0!important;padding:0!important;align-self:stretch!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important}
.calculator-bottom-bar .agreed-field>.compact-label{width:100%!important;min-height:12px!important;margin:0 0 6px 0!important;padding:0!important;line-height:12px!important;text-align:left!important}
.calculator-bottom-bar .agreed-field .agreed-price{margin:0!important}
.calculator-bottom-bar .agreed-field .agreed-price input{height:48px!important;min-height:48px!important;padding-top:0!important;padding-bottom:0!important}
.calculator-bottom-bar .values-metric{flex:0 1 245px!important;width:auto!important;min-width:210px!important;max-width:280px!important;padding:9px 14px!important}
.calculator-bottom-bar .fine-metric{display:none!important}
.calculator-bottom-bar .calculator-submit{flex:0 0 270px!important;width:270px!important;min-width:245px!important;max-width:270px!important}
.camera-capture-button{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:9px!important}
.camera-capture-button>.icon, .camera-capture-button>svg{order:-1!important;flex:0 0 auto!important;margin:0!important}
@media(max-width:1400px){
.calculator-bottom-bar{flex-wrap:wrap!important}
.calculator-bottom-bar .discount-compact-group{flex:1 1 100%!important;min-width:0!important}
.calculator-bottom-bar .agreed-field{flex:0 0 160px!important;width:160px!important;min-width:160px!important;max-width:160px!important}
.calculator-bottom-bar .values-metric{flex:1 1 220px!important;min-width:0!important;max-width:none!important}
.calculator-bottom-bar .calculator-submit{flex:1 1 260px!important;width:auto!important;min-width:0!important;max-width:none!important}
}
@media(max-width:800px){
.calculator-bottom-bar .agreed-field, .calculator-bottom-bar .values-metric{flex:1 1 calc(50% - 6px)!important;width:auto!important;min-width:0!important;max-width:none!important}
.calculator-bottom-bar .calculator-submit{flex:1 1 100%!important;width:100%!important;min-width:0!important}
}
@media(max-width:560px){
.calculator-bottom-bar .agreed-field, .calculator-bottom-bar .values-metric{flex-basis:100%!important}
}
.calculator-bottom-bar .agreed-field .agreed-price{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;margin-left:0!important;margin-right:0!important;align-self:stretch!important}
.calculator-bottom-bar .agreed-field .agreed-price input{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important}
.cash-opening-card .cash-opening-form{display:grid!important;grid-template-columns:minmax(170px,.8fr) minmax(220px,1fr) auto!important;align-items:end!important;gap:12px!important;width:100%!important;min-width:0!important}
.cash-opening-form>label{display:flex!important;min-width:0!important;width:auto!important;margin:0!important}
.cash-opening-form>label>input, .cash-opening-form .input-suffix, .cash-opening-form .input-suffix>input, .cash-opening-form>.button{width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important}
.cash-opening-form>label>input, .cash-opening-form .input-suffix>input, .cash-opening-form>.button{height:48px!important;min-height:48px!important;max-height:48px!important;margin:0!important}
.cash-opening-form input[type=date]{display:block!important;-webkit-appearance:none!important;appearance:none!important;padding:0 12px!important;line-height:normal!important}
.cash-opening-form input[type=date]::-webkit-date-and-time-value{min-height:0!important;height:auto!important;line-height:normal!important;padding:0!important;text-align:left!important}
.cash-opening-form input[type=date]::-webkit-datetime-edit{padding:0!important}
.cash-opening-form input[type=date]::-webkit-calendar-picker-indicator{margin:0!important;padding:0!important}
.cash-opening-form>.button{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 16px!important}
.cash-entry-form{display:grid!important;grid-template-columns:165px 170px 150px minmax(210px,1fr) 130px!important;align-items:stretch!important;gap:10px!important;width:100%!important;min-width:0!important}
.cash-entry-form>input:not([type=hidden]), .cash-entry-form>select, .cash-entry-form>.button{flex:none!important;display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;height:48px!important;min-height:48px!important;max-height:48px!important;block-size:48px!important;min-block-size:48px!important;max-block-size:48px!important;margin:0!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box!important;line-height:normal!important;overflow:hidden!important}
.cash-entry-form>select{display:flex!important;align-items:center!important;padding-left:12px!important;padding-right:34px!important}
.cash-entry-form>input[type=date]{-webkit-appearance:none!important;appearance:none!important;padding-left:12px!important;padding-right:12px!important;text-align:left!important;font-size:16px!important}
.cash-entry-form>input[type=date]::-webkit-date-and-time-value{min-height:0!important;height:auto!important;line-height:normal!important;padding:0!important;text-align:left!important}
.cash-entry-form>input[type=date]::-webkit-datetime-edit{padding:0!important}
.cash-entry-form>input[type=date]::-webkit-calendar-picker-indicator{margin:0!important;padding:0!important}
.cash-entry-form>.button{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 15px!important}
@media(min-width:1051px) and (max-width:1250px){
.cash-entry-form{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.cash-entry-form input[name="booking_text"]{grid-column:span 2!important}
.cash-entry-form>.button{grid-column:span 1!important}
}
@media(min-width:601px) and (max-width:1050px){
.cash-opening-card .cash-opening-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.cash-opening-form>.button{grid-column:1/-1!important}
.cash-entry-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.cash-entry-form input[name="booking_text"], .cash-entry-form>.button{grid-column:1/-1!important}
}
@media(max-width:600px){
.cash-opening-card .cash-opening-form, .cash-entry-form{grid-template-columns:minmax(0,1fr)!important}
.cash-opening-form>.button, .cash-entry-form input[name="booking_text"], .cash-entry-form>.button{grid-column:auto!important}
}
.opening-stock-fields{flex:0 1 210px;min-width:170px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:end}
.opening-stock-fields.has-fineness{flex-basis:400px;grid-template-columns:minmax(145px,.85fr) minmax(170px,1fr)}
.opening-stock-fields>label{margin:0!important;min-width:0!important}
.opening-stock-fields .input-suffix{width:100%!important;min-width:0!important}
.opening-stock-fields input{min-width:0!important}
@media(max-width:700px){
.opening-stock-fields, .opening-stock-fields.has-fineness{flex:1 1 auto;width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:460px){
.opening-stock-fields, .opening-stock-fields.has-fineness{grid-template-columns:1fr}
}
.fine-finalize-modal .final-gross-list{display:grid!important;gap:8px!important;max-height:min(52vh,540px);overflow:auto;overscroll-behavior:contain;padding:0 4px 2px 0}
.final-alloy-divider{position:sticky;top:0;z-index:3;display:flex;align-items:center;min-height:42px;padding:5px 2px;background:linear-gradient(var(--surface) 75%,rgba(255,255,255,.88))}
.final-alloy-divider .material-pill{margin:0}
.alloy-finalize-row{grid-template-columns:minmax(0,1fr) 170px!important;min-height:68px;padding:10px 12px!important;border-radius:0;background:var(--surface-soft)!important;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.alloy-finalize-row.dental-row{grid-template-columns:minmax(0,1fr) 150px 170px!important}
.alloy-finalize-row.has-original-weight{border-color:var(--gold-line)!important}
.alloy-finalize-row.has-final-weight{border-color:var(--frame-accent)!important;background:var(--surface-soft)!important;box-shadow:inset 3px 0 0 var(--frame-accent)}
.alloy-finalize-row>span{min-width:0}
.alloy-finalize-row>span strong{font-size:.92rem}
.alloy-finalize-row>span small{font-size:.72rem;line-height:1.3}
.alloy-finalize-row .gross-final-input, .alloy-finalize-row .dental-fineness-field{min-width:0!important;width:100%!important}
.alloy-finalize-row .input-suffix input{height:44px!important;min-height:44px!important;max-height:44px!important}
.fine-finalize-modal .finalize-summary small b{color:var(--text);font-weight:700}
@media(max-width:760px){
.fine-finalize-modal .final-gross-list{max-height:none;overflow:visible;padding-right:0}
.final-alloy-divider{position:static;background:var(--surface)}
.alloy-finalize-row, .alloy-finalize-row.dental-row{grid-template-columns:minmax(0,1fr) minmax(130px,160px)!important}
.alloy-finalize-row.dental-row>span{grid-column:1/-1}
}
@media(max-width:520px){
.alloy-finalize-row, .alloy-finalize-row.dental-row{grid-template-columns:1fr!important;gap:8px!important}
.alloy-finalize-row.dental-row>span{grid-column:auto}
}
.cashbook-actions{min-width:82px;white-space:nowrap}
.cash-edit-modal{width:min(680px,calc(100vw - 28px))}
.cash-edit-form{margin-top:18px}
.cash-edit-form .field-locked input, .cash-edit-form .field-locked select{background:var(--surface-sunken)!important;color:var(--muted)!important;border-color:var(--line-strong)!important;cursor:not-allowed!important}
.cash-edit-form input[readonly]{opacity:1}
.cash-edit-lock-note{padding:11px 13px;border:1px solid var(--gold-line);border-radius:0;background:var(--bg);color:var(--gold-deep);font-size:.78rem;line-height:1.45}
.cash-edit-lock-note[hidden]{display:none!important}
@media(max-width:620px){
.cash-edit-form{grid-template-columns:1fr!important}
.cash-edit-form .span-2{grid-column:auto!important}
.cashbook-actions{min-width:76px}
}
.detail-back-button{margin:0 0 16px;padding:8px 12px;font-size:.82rem;box-shadow:none}
.detail-back-button+.eyebrow{margin-top:0}
@media(max-width:620px){
.detail-back-button{width:100%;margin-bottom:14px}
}
#pickupModal .pickup-stock-row>label.pickup-amount-field{flex:0 0 390px!important;min-width:340px!important;width:390px!important}
#pickupModal .pickup-value-line{display:grid!important;grid-template-columns:minmax(155px,1fr) 68px 112px!important;align-items:center!important;gap:8px!important;width:100%!important}
#pickupModal .pickup-value-line .input-suffix{width:100%!important;min-width:0!important;flex:none!important}
#pickupModal .pickup-weight-input,#pickupModal .pickup-quantity-input{width:100%!important;min-width:0!important}
#pickupModal .pickup-max-button{width:68px!important;min-width:68px!important;height:42px!important;min-height:42px!important;padding:0 8px!important;margin:0!important;font-size:.78rem!important;line-height:1!important;white-space:nowrap!important;box-shadow:none!important}
#pickupModal .pickup-material-value{width:112px!important;min-width:112px!important;max-width:112px!important;box-sizing:border-box!important}
@media(max-width:700px){
#pickupModal .pickup-stock-row>label.pickup-amount-field{flex:1 1 auto!important;width:100%!important;min-width:0!important}
#pickupModal .pickup-value-line{grid-template-columns:minmax(0,1fr) 68px!important}
#pickupModal .pickup-material-value{grid-column:1/-1!important;width:100%!important;min-width:0!important;max-width:none!important;justify-content:flex-start!important}
}
.stats-year-section{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.stats-year-heading{margin-bottom:18px}
.stats-year-heading h2{margin:1px 0 0}
.stats-year-heading p{margin:6px 0 0;color:var(--muted)}
.year-navigation{margin-bottom:18px!important}
.annual-stats-grid{margin-bottom:18px}
.annual-table-card{margin-top:0}
.annual-table .year-month-link{color:var(--text);font-weight:700;text-decoration:none}
.annual-table .year-month-link:hover{text-decoration:underline}
.annual-table .positive{color:var(--success)}
.annual-table .negative{color:var(--danger)}
.standalone-metal-flow{margin-bottom:18px}
.metal-flow-rows{display:grid;gap:12px}
@media(min-width:701px){
.metal-flow-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.profit-chart-card{margin-top:0;margin-bottom:18px}
.profit-chart{display:flex;gap:8px;padding:20px 4px 4px;min-width:560px}
.profit-chart-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;border-radius:0;padding:6px 2px 8px;transition:.15s}
.profit-chart-col:hover{background:var(--surface-soft)}
.profit-chart-col.current{background:var(--success-tint);box-shadow:inset 0 0 0 1px var(--success-line)}
.profit-chart-upper{height:90px;display:flex;align-items:flex-end;justify-content:center;width:100%}
.profit-chart-lower{height:90px;display:flex;align-items:flex-start;justify-content:center;width:100%}
.profit-bar{width:60%;max-width:26px;display:block}
.profit-bar.positive{border-radius:0;background:linear-gradient(180deg,var(--success),var(--success));min-height:0}
.profit-bar.negative{border-radius:0;background:linear-gradient(0deg,var(--success-line),var(--success));min-height:0}
.profit-chart-baseline{width:100%;height:1px;background:var(--line);flex:0 0 auto}
.profit-chart-label{margin-top:8px;font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.profit-chart-col.current .profit-chart-label{color:var(--gold-dark)}
@media(max-width:760px){
.stats-year-section{margin-top:28px;padding-top:24px}
.stats-year-heading{align-items:flex-start}
.annual-table{min-width:760px}
}
.annual-stats-grid .stock-value-card .kpi-icon{background:var(--surface-sunken);color:var(--silver)}
@media(max-width:1100px){
}
@media(max-width:680px){
}
.split-grid>*{min-width:0}
.customer-mode{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
.setting-switch{display:flex;flex-direction:row;align-items:center;gap:13px;padding:14px 15px;border:1px solid var(--line);border-radius:0;background:var(--surface-soft);margin-top:16px;cursor:pointer}
.setting-switch>input{width:20px;height:20px;min-height:0;flex:0 0 auto;margin:0}
.setting-switch>span strong,.setting-switch>span small{display:block}
.setting-switch>span small{margin-top:3px;color:var(--muted);font-weight:400}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.pagination-info{color:var(--muted);font-size:.85rem;text-align:center;flex:1 1 auto}
.pagination-info small{display:block;margin-top:2px}
.pagination [aria-disabled="true"]{opacity:.45;pointer-events:none;cursor:default}
@media(max-width:560px){
.pagination{flex-direction:column}
.pagination .button{width:100%;justify-content:center}
}
@media(max-width:850px){
.calculator-bottom-bar .discount-compact-group{align-self:flex-start!important;height:auto!important}
.calculator-bottom-bar .discount-stage-buttons{align-self:flex-start!important;height:auto!important;flex-grow:0!important}
}
.paid-workflow-summary{container-type:inline-size}
@media (min-width:701px) and (max-width:1100px){
.app-modal.pickup-modal[open]{display:flex!important;flex-direction:column!important;height:calc(100svh - 32px)!important;max-height:calc(100svh - 32px)!important;overflow:hidden!important}
.pickup-modal>.section-heading{flex:0 0 auto!important}
.pickup-modal .pickup-form{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important;gap:14px!important}
.pickup-modal .pickup-form>.form-grid:first-of-type{flex:0 0 auto!important}
.pickup-modal .pickup-stock-list{flex:1 1 auto!important;min-height:120px!important;max-height:none!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:6px!important}
.pickup-modal .pickup-total-value,.pickup-modal .pickup-form>.button.full{flex:0 0 auto!important}
.pickup-modal .pickup-form>.button.full{margin-bottom:0!important}
}
.data-table td.profit-cell{white-space:nowrap;font-variant-numeric:tabular-nums}
.data-table td.profit-cell.is-positive{color:var(--success);font-weight:500}
.data-table td.profit-cell.is-negative{color:var(--danger);font-weight:500}
.data-table td.profit-cell small{display:block;font-weight:400;color:var(--muted)}
.material-check-review{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;margin:18px 0 16px;border:1px solid var(--border,var(--line));border-radius:0;background:var(--surface-soft,var(--surface-soft))}
.material-check-review>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.material-check-review small{color:var(--muted,var(--muted));line-height:1.4}
.material-check-review .purchase-edit-button{flex:0 0 auto;min-height:34px;padding:7px 11px;border-radius:0;font-size:12.5px;font-weight:600;gap:6px;white-space:nowrap}
.material-check-review .purchase-edit-button .icon{width:14px;height:14px}
@media(max-width:720px){
.material-check-review{align-items:flex-start;flex-direction:column;gap:11px}
.material-check-review .purchase-edit-button{width:auto;align-self:flex-start;justify-content:flex-start}
}
.purchase-location-card{padding:16px 18px!important;display:grid;grid-template-columns:minmax(210px,260px) minmax(0,1fr);align-items:center;gap:18px}
.purchase-location-head{display:flex;align-items:center;gap:11px;min-width:0;text-align:left}
.purchase-location-head>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.purchase-location-head strong{font-size:14px;line-height:1.25;text-align:left}
.purchase-location-head .required-star{display:inline;color:var(--danger,var(--danger))}
.purchase-location-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:9px;min-width:0;text-align:left}
.purchase-location-option{position:relative;display:block;margin:0;cursor:pointer;text-align:left;min-width:0}
.purchase-location-option>input{position:absolute;top:0;left:0;width:1px!important;min-width:0!important;max-width:1px!important;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none;clip-path:inset(50%);overflow:hidden}
.purchase-location-tile{min-height:42px;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:9px 12px;border:1px solid var(--border,var(--line));border-radius:0;background:var(--surface,var(--surface));font-size:13px;font-weight:500;text-align:left;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.purchase-location-tile>svg{width:15px;height:15px;color:var(--muted,var(--muted));flex:0 0 auto}
.purchase-location-tile>span{text-align:left}
.purchase-location-tile>i{display:none;margin-left:2px;font-style:normal}
.purchase-location-option>input:checked+.purchase-location-tile{border-color:var(--accent,var(--success));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,var(--success)) 14%,transparent);background:color-mix(in srgb,var(--accent,var(--success)) 5%,white)}
.purchase-location-option>input:checked+.purchase-location-tile>i{display:inline-flex}
.purchase-location-option>input:checked+.purchase-location-tile>i svg{width:14px;height:14px}
.purchase-location-option>input:focus-visible+.purchase-location-tile{outline:2px solid var(--accent,var(--success));outline-offset:2px}
@media(max-width:720px){
.purchase-location-card{grid-template-columns:1fr;align-items:stretch;gap:12px}
.purchase-location-options{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}
.purchase-location-tile>i{margin-left:auto}
}
@media(max-width:440px){
.purchase-location-options{grid-template-columns:1fr}
}
@media(max-width:800px){
#calculatorForm{width:100%;min-width:0}
#calculatorForm .calculator-card{width:100%;min-width:0;max-width:100%;overflow:hidden}
#calculatorForm .calculator-table{width:100%;min-width:0!important;table-layout:fixed}
#calculatorForm .calculator-table th,#calculatorForm .calculator-table td{padding-left:8px;padding-right:8px;white-space:normal;overflow-wrap:anywhere}
#calculatorForm .calculator-table th:nth-child(1),#calculatorForm .calculator-table td:nth-child(1){width:34%}
#calculatorForm .calculator-table th:nth-child(2),#calculatorForm .calculator-table td:nth-child(2){width:25%!important}
#calculatorForm .calculator-table th:nth-child(3),#calculatorForm .calculator-table td:nth-child(3){width:18%}
#calculatorForm .calculator-table th:nth-child(4),#calculatorForm .calculator-table td:nth-child(4){width:23%}
#calculatorForm .calculator-table .input-suffix{width:100%!important;max-width:100%!important;min-width:0!important}
#calculatorForm .calculator-table .weight-input{width:100%!important;min-width:0!important;max-width:100%!important}
}
@media(max-width:480px){
#calculatorForm .calculator-table{font-size:.82rem}
#calculatorForm .calculator-table th{font-size:.64rem;letter-spacing:.035em}
#calculatorForm .calculator-table th,#calculatorForm .calculator-table td{padding-left:5px;padding-right:5px}
#calculatorForm .calculator-table th:nth-child(1),#calculatorForm .calculator-table td:nth-child(1){width:32%}
#calculatorForm .calculator-table th:nth-child(2),#calculatorForm .calculator-table td:nth-child(2){width:27%!important}
#calculatorForm .calculator-table th:nth-child(3),#calculatorForm .calculator-table td:nth-child(3){width:18%}
#calculatorForm .calculator-table th:nth-child(4),#calculatorForm .calculator-table td:nth-child(4){width:23%}
}
#calculatorForm{width:100%;max-width:100%;min-width:0}
#calculatorForm .calculator-card,#calculatorForm .purchase-location-card,#calculatorForm .calculator-bottom-bar{width:100%;max-width:100%;min-width:0}
#calculatorForm .calculator-table{width:100%;max-width:100%;min-width:0!important;table-layout:fixed}
#calculatorForm .calculator-table th,#calculatorForm .calculator-table td{white-space:normal;overflow-wrap:anywhere}
#calculatorForm .calculator-table .input-suffix,#calculatorForm .calculator-table .weight-input{width:100%!important;max-width:100%!important;min-width:0!important}
#calculatorForm .purchase-location-options,#calculatorForm .purchase-location-option,#calculatorForm .purchase-location-tile{max-width:100%;min-width:0}
#calculatorForm .purchase-location-tile>span{min-width:0;overflow-wrap:anywhere}
#calculatorForm .calculator-bottom-bar>*{min-width:0!important;max-width:100%;box-sizing:border-box}
#calculatorForm .calculator-bottom-bar .discount-stage-buttons{min-width:0!important;max-width:100%!important}
#calculatorForm .calculator-bottom-bar .discount-stage-button{min-width:0!important}
.article-card .section-heading{margin-bottom:14px}
.article-picker{position:relative}
.article-results{position:absolute;top:76px;left:0;right:0;z-index:20;max-height:340px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:0;box-shadow:0 18px 48px rgba(30,31,27,.18)}
.article-result{width:100%;border:0;background:var(--surface);padding:9px 10px;border-radius:0;text-align:left;display:flex;align-items:center;gap:11px;color:var(--text)}
.article-result:hover{background:var(--surface-soft)}
.article-result>span{min-width:0;display:block}
.article-result strong{display:block;font-size:.94rem}
.article-result small{display:block;color:var(--muted);font-size:.79rem;overflow-wrap:anywhere}
.article-spec-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 18px;margin:14px 0 0}
.article-spec-list>div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.article-spec-list dt{color:var(--muted);font-size:.8rem}
.article-spec-list dd{margin:0;font-weight:500;font-size:.85rem;text-align:right;overflow-wrap:anywhere}
.article-rows{display:grid;gap:10px;margin-top:14px}
.article-row,.article-sale-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:0;background:var(--surface)}
.article-row-main,.article-sale-main{flex:1 1 220px;min-width:0}
.article-row-main strong,.article-sale-main strong{display:block;font-size:.94rem}
.article-row-main small,.article-sale-main small{display:block;color:var(--muted);font-size:.78rem;overflow-wrap:anywhere}
.article-row-premium{margin-top:2px;font-weight:500}
.article-qty{flex:0 0 92px}
.article-price{flex:0 0 150px}
.article-tax{flex:1 1 230px;min-width:0}
.article-qty>span,.article-price>span,.article-tax>span{display:block;font-size:.74rem;color:var(--muted);margin-bottom:3px}
.article-qty input,.article-price .input-suffix,.article-tax select{width:100%}
.article-row-values{flex:0 0 215px;display:grid;gap:2px}
.article-row-values span{display:flex;justify-content:space-between;gap:8px;font-size:.79rem;color:var(--muted)}
.article-row-values b{color:var(--text);font-weight:600}
.article-empty{margin-top:12px}
.article-sale-list{display:grid;gap:10px;margin-top:12px;max-height:520px;overflow:auto;padding-right:2px}
.article-sale-row[hidden]{display:none!important}
.article-sale-row.is-selected{border-color:var(--gold);background:var(--surface-soft);box-shadow:0 6px 18px rgba(184,149,82,.13)}
.article-sale-hint{margin-top:3px;color:var(--gold-dark)!important;font-weight:500}
.article-sale-card .customer-picker-label{margin-top:6px}
.filter-card{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.filter-card .customer-picker-label{flex:1 1 320px;min-width:0}
.article-catalog-table td{vertical-align:top}
.article-catalog-table td small{display:block;color:var(--muted);font-size:.78rem}
.data-table tr.row-inactive{opacity:.55}
.ai-lookup-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px dashed var(--gold-light);border-radius:0;background:var(--surface-soft)}
.ai-lookup-box strong{display:flex;align-items:center;gap:7px}
.ai-lookup-box small{display:block;margin-top:3px;color:var(--muted);font-size:.79rem;max-width:52ch}
.ai-lookup-result .alert{margin:0}
.article-modal{max-width:780px}
.article-item-row td strong{color:var(--gold-dark)}
@media (max-width:820px){
.article-qty,.article-price,.article-tax,.article-row-values{flex:1 1 100%}
}
.metric-pair strong[hidden]{display:none}
.article-empty[hidden],.article-results[hidden]{display:none}
.sale-preview{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){
.sale-preview{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.sale-preview{grid-template-columns:1fr}
}
.calculator-alloy-grid{display:grid;gap:14px;align-items:start;margin-bottom:14px}
.calculator-alloy-grid>.alloy-column{margin-bottom:0}
.alloy-column-head{padding:12px 12px 0}
@media (min-width:1080px){
.calculator-alloy-grid{grid-template-columns:1fr 1fr}
}
.article-card{overflow:visible!important}
.article-card .article-picker{position:relative}
.article-card .article-results{z-index:30}
.article-card .settings-inline-note{margin-bottom:12px;align-items:flex-start}
.article-card .settings-inline-note small{max-width:none}
.article-check-list{display:grid;gap:6px;margin:16px 0 4px;padding:11px 13px;border:1px solid var(--line);border-radius:0;background:var(--surface-soft)}
.article-check-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:.83rem;line-height:1.35}
.article-check-row+.article-check-row{padding-top:6px;border-top:1px dashed var(--line)}
.article-check-row>strong{flex:0 0 auto}
.article-check-row>span{color:var(--muted);overflow-wrap:anywhere}
.ai-search-panel{margin:12px 0 0;padding:13px;border:1px dashed var(--gold-light);border-radius:0;background:var(--surface-soft)}
.ai-search-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ai-search-head strong{font-size:.9rem}
.ai-search-panel>.muted-note{margin:10px 0 0}
.ai-search-panel .alert{margin:0}
.ai-hit{display:flex;gap:13px;align-items:flex-start;padding:11px;border:1px solid var(--line);border-radius:0;background:var(--surface)}
.ai-hit+.ai-hit{margin-top:9px}
.ai-hit-body{flex:1 1 auto;min-width:0}
.ai-hit-body strong{display:block;font-size:.94rem}
.ai-hit-body small{display:block;color:var(--muted);font-size:.78rem;overflow-wrap:anywhere}
.ai-hit-body .badge{margin-top:6px}
.ai-hit .ai-adopt{flex:0 0 auto;align-self:center;white-space:nowrap}
@media (max-width:700px){
.ai-hit{flex-direction:column}
.ai-hit .ai-adopt{width:100%;justify-content:center}
}
#calculatorForm .calculator-bottom-bar{display:grid!important;
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.75fr) minmax(0,1fr)!important;
    align-items:end!important;
    gap:14px!important;
    padding:14px 16px!important;
    width:100%!important;max-width:100%!important;
    overflow:visible!important;}
#calculatorForm .calculator-bottom-bar>*{grid-column:auto!important;
    flex:none!important;
    width:auto!important;max-width:none!important;min-width:0!important;
    height:auto!important;min-height:0!important;
    margin:0!important;
    align-self:end!important;}
#calculatorForm .calculator-bottom-bar .discount-compact-group{display:flex!important;flex-direction:column!important;gap:10px!important;align-items:stretch!important;
    max-width:620px!important;}
#calculatorForm .calculator-bottom-bar .discount-stage-row{display:block!important;flex:0 0 auto!important;min-width:0!important;height:auto!important}
#calculatorForm .calculator-bottom-bar .discount-stage-row>.compact-label{display:block!important;margin:0 0 5px 2px!important;padding:0!important;
    height:auto!important;min-height:0!important;line-height:1.15!important;align-self:auto!important;}
#calculatorForm .calculator-bottom-bar .discount-stage-buttons{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;width:100%!important;height:auto!important;flex:none!important;align-self:auto!important;}
#calculatorForm .calculator-bottom-bar .discount-stage-button{display:flex!important;flex-direction:column!important;justify-content:center!important;
    width:auto!important;min-width:0!important;height:38px!important;min-height:0!important;max-height:38px!important;
    padding:3px 7px!important;flex:none!important;overflow:hidden!important;}
#calculatorForm .calculator-bottom-bar .discount-stage-button span{font-size:.6rem!important;line-height:1.1!important;margin:0!important}
#calculatorForm .calculator-bottom-bar .discount-stage-button strong{font-size:.74rem!important;line-height:1.1!important;margin:1px 0 0!important}
#calculatorForm .calculator-bottom-bar .agreed-fields{display:flex!important;flex-direction:column!important;gap:10px!important;align-items:stretch!important;}
#calculatorForm .calculator-bottom-bar .agreed-fields .agreed-field{display:block!important;flex:0 0 auto!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    margin:0!important;padding:0!important;
    grid-template-rows:none!important;align-self:auto!important;justify-content:flex-start!important;}
#calculatorForm .calculator-bottom-bar .agreed-fields .agreed-field>.compact-label{display:block!important;margin:0 0 5px 2px!important;padding:0!important;
    height:auto!important;min-height:0!important;line-height:1.15!important;align-self:auto!important;}
#calculatorForm .calculator-bottom-bar .agreed-fields .agreed-price{display:block!important;position:relative!important;flex:0 0 auto!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    height:38px!important;min-height:0!important;max-height:38px!important;
    margin:0!important;align-self:auto!important;}
#calculatorForm .calculator-bottom-bar .agreed-fields .agreed-price input{display:block!important;box-sizing:border-box!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    height:38px!important;min-height:0!important;max-height:38px!important;
    margin:0!important;padding:6px 30px 6px 11px!important;font-size:.92rem!important;}
#calculatorForm .calculator-bottom-bar .agreed-fields .agreed-price>span{position:absolute!important;right:11px!important;top:50%!important;transform:translateY(-50%)!important;}
#calculatorForm .calculator-bottom-bar .calculator-actions{display:flex!important;flex-direction:column!important;gap:10px!important;align-items:stretch!important;}
#calculatorForm .calculator-bottom-bar .calculator-actions .values-metric{width:100%!important;max-width:none!important;min-width:0!important;height:auto!important;
    margin:0!important;padding:9px 13px!important;align-self:auto!important;flex:none!important;}
#calculatorForm .calculator-bottom-bar .calculator-actions .calculator-submit{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    height:42px!important;min-height:0!important;margin:0!important;
    grid-column:auto!important;align-self:auto!important;flex:none!important;}
@media (max-width:1180px){
#calculatorForm .calculator-bottom-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
#calculatorForm .calculator-bottom-bar .calculator-actions{grid-column:1/-1!important}
#calculatorForm .calculator-bottom-bar .calculator-actions .calculator-submit{max-width:340px!important;margin-left:auto!important}
}
@media (max-width:760px){
#calculatorForm .calculator-bottom-bar{grid-template-columns:minmax(0,1fr)!important;padding:12px!important}
#calculatorForm .calculator-bottom-bar .discount-stage-buttons{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#calculatorForm .calculator-bottom-bar .calculator-actions .calculator-submit{max-width:none!important;margin-left:0!important}
}
.ai-model-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:0;background:var(--surface-soft);font-size:.82rem}
.ai-model-list>small{width:100%;color:var(--muted)}
.ai-model-chip{border:1px solid var(--line);background:var(--surface);border-radius:0;padding:4px 10px;font-size:.78rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ai-model-chip:hover{border-color:var(--gold);background:var(--surface-soft)}
.ai-search-panel .alert{margin:0 0 10px}
.setting-switch{align-items:flex-start}
.form-grid label.setting-switch,
.app-modal .form-grid>label.setting-switch{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:13px!important;}
.setting-switch>input[type="checkbox"],
.form-grid label.setting-switch>input[type="checkbox"],
.app-modal .form-grid>label.setting-switch>input[type="checkbox"]{width:20px!important;min-width:20px!important;max-width:20px!important;
    height:20px!important;min-height:20px!important;
    flex:0 0 auto!important;margin:2px 0 0!important;}
.setting-switch>span{flex:1 1 auto;min-width:0}
/* Einfache Checkbox mit Beschriftung daneben. Die allgemeine Regel
   .form-grid label>input zieht jedes Eingabefeld auf 100 % Breite; bei einer
   Checkbox landete das Kästchen dadurch mitten in der Zeile und der Text rechts
   daneben brach um. */
.form-grid label.checkbox-line,
.app-modal .form-grid>label.checkbox-line{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important}
.form-grid label.checkbox-line>input[type="checkbox"],
.app-modal .form-grid>label.checkbox-line>input[type="checkbox"]{width:20px!important;min-width:20px!important;max-width:20px!important;
    height:20px!important;min-height:20px!important;flex:0 0 auto!important;margin:0!important}
.ai-hit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.ai-hit-link{padding:4px 10px!important;font-size:.76rem!important}
#calculatorForm .calculator-bottom-bar{position:static!important;bottom:auto!important;z-index:auto!important;
    box-shadow:none!important;border-top:1px solid var(--anthrazit-soft)!important;border-radius:0;
    margin-top:14px!important;}
.fine-finalize-modal .final-gross-list,
.app-modal.fine-finalize-modal .final-gross-list{max-height:none!important;overflow:visible!important;overscroll-behavior:auto!important;padding-right:0!important;}
body.modal-scroll-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.app-modal{overscroll-behavior:contain}
.app-modal.pickup-modal[open]{display:block!important;height:auto!important;max-height:calc(100svh - 32px)!important;overflow:auto!important;}
.pickup-modal .pickup-form{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;
    height:auto!important;min-height:0!important;overflow:visible!important;flex:0 0 auto!important;}
.pickup-modal .pickup-stock-list,
.pickup-modal .pickup-form>.pickup-stock-list,
.app-modal .pickup-stock-list{max-height:none!important;overflow:visible!important;overflow-y:visible!important;
    overscroll-behavior:auto!important;padding-right:0!important;flex:0 0 auto!important;min-height:0!important;}
.ai-search-progress{display:flex;align-items:center;gap:9px;margin:0;color:var(--muted);font-size:.85rem}
.ai-search-progress b{color:var(--text);font-variant-numeric:tabular-nums}
.ai-spinner{width:15px;height:15px;flex:0 0 auto;border:2px solid var(--line);border-top-color:var(--gold);border-radius:0;animation:ai-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){
.ai-spinner{animation-duration:2.4s}
}
.buyer-vat-required{display:flex;gap:11px;margin:12px 0 0;padding:12px 14px;border:1px solid var(--gold-light);border-radius:0;background:var(--danger-tint)}
.buyer-vat-required[hidden]{display:none!important}
.buyer-vat-required>.section-icon{flex:0 0 auto;color:var(--gold-dark);line-height:1}
.buyer-vat-required>.section-icon svg{width:18px;height:18px}
.buyer-vat-required>div{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0}
.buyer-vat-required strong{font-size:.9rem}
.buyer-vat-required small{color:var(--muted);font-size:.78rem;line-height:1.45}
.buyer-vat-required label{display:flex;flex-direction:column;gap:4px;margin-top:5px;max-width:280px;font-size:.8rem}
.buyer-vat-required input{width:100%;padding:8px 10px;border:1px solid var(--gold-light);border-radius:0;font-size:.88rem;background:var(--danger-tint)}
.login-card .brand.large{margin-bottom:0;font-size:1.05rem}
.login-intro{margin:26px 0 24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.login-intro h1{margin:0;font-size:2rem;line-height:1.12;letter-spacing:-.022em}
.login-intro p{margin:9px 0 0;max-width:38ch;color:var(--muted);font-size:.93rem;line-height:1.5;text-wrap:pretty}
.login-card form{margin:0}
.login-card label input{margin-top:7px;height:46px;border-radius:0;background:var(--surface-soft)}
.login-card label input:focus{background:var(--surface)}
.login-card label small{display:block;margin-top:7px;color:var(--muted);font-size:.78rem;font-weight:400}
.login-card .button.full{margin-top:9px;height:48px;border-radius:0;font-size:.95rem}
@media(max-width:620px){
.login-intro{margin:22px 0 20px;padding-bottom:20px}
.login-intro h1{font-size:1.7rem}
}
.ledger-explainer{display:flex;gap:13px;margin:0 0 18px;padding:15px 17px;border:1px solid var(--gold-light);border-radius:0;background:var(--surface-soft)}
.ledger-explainer>.section-icon{flex:0 0 auto;color:var(--gold-dark);line-height:1}
.ledger-explainer strong{display:block;margin-bottom:4px;font-size:.94rem}
.ledger-explainer p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.55;max-width:80ch}
.ledger-alert{margin:0 0 18px}
.ledger-alert div{display:flex;flex-direction:column;gap:2px}
.ledger-alert span{font-size:.83rem;opacity:.9}
.ledger-search input[type="search"]{flex:1 1 230px;width:auto;min-width:0}
.ledger-search select{flex:0 0 auto;width:auto;min-width:180px;white-space:nowrap;font-size:.87rem}
.ledger-all{display:inline-flex;flex-direction:row!important;align-items:center;flex:0 0 auto;gap:7px;margin:0 0 0 4px;font-size:.84rem;color:var(--muted);white-space:nowrap}
.ledger-all>span{font-weight:400}
.ledger-all input[type="checkbox"]{width:17px!important;height:17px!important;min-width:17px!important;margin:0!important;flex:0 0 auto}
.ledger-account{margin-bottom:18px;padding:0;overflow:hidden}
.ledger-account.has-difference{border-color:var(--danger-line);box-shadow:0 0 0 1px var(--danger-line) inset}
.ledger-account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:19px 22px 15px}
/* Der Kontokopf ist zugleich der Schalter zum Aufklappen. Ohne list-style:none
   setzt der Browser ein eigenes Dreieck davor und bricht die Zeile. */
summary.ledger-account-head{cursor:pointer;list-style:none;user-select:none;align-items:center;justify-content:flex-start;gap:14px}
/* Ohne das verteilt space-between den Bestand zwischen Namen und Winkel und
   er stünde in der Mitte statt rechts. */
summary.ledger-account-head>.ledger-account-balance{margin-left:auto}
summary.ledger-account-head::-webkit-details-marker{display:none}
summary.ledger-account-head:hover{background:var(--surface-sunken)}
/* Das Kennzeichen sitzt in der Kopfzeile, damit man am zugeklappten Konto
   erkennt, dass dort etwas nicht stimmt. */
.konto-kennzeichen{display:inline-block;margin-top:5px}
summary.ledger-account-head>.chevron{width:18px;height:18px;flex:0 0 auto;color:var(--muted);transition:transform .18s ease}
.ledger-account[open]>summary.ledger-account-head>.chevron{transform:rotate(90deg)}
.ledger-account[open]>summary.ledger-account-head{border-bottom:1px solid var(--line)}
.ledger-account-head h2{margin:6px 0 0;font-size:1.16rem}
.ledger-account-head small{display:block;margin-top:3px;color:var(--muted);font-size:.79rem}
.ledger-account-balance{flex:0 0 auto;text-align:right}
.ledger-account-balance span{display:block;color:var(--muted);font-size:.76rem;letter-spacing:.03em;text-transform:uppercase}
.ledger-account-balance strong{display:block;margin-top:2px;font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums}
.ledger-account-balance small{display:block;margin-top:2px;color:var(--muted);font-size:.78rem}
.ledger-origin{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0;padding:11px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-soft);font-size:.83rem;line-height:1.5}
.ledger-origin .icon{width:16px;height:16px;color:var(--gold-dark)}
.ledger-account .ledger-table{margin:0}
.ledger-table th.num,.ledger-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger-table td small{display:block;margin-top:2px;color:var(--muted);font-size:.76rem}
.ledger-date{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger-table td.in{color:var(--success);font-weight:500}
.ledger-table td.out{color:var(--gold-deep);font-weight:500}
.ledger-table td.saldo{font-weight:700}
.ledger-table td.saldo.is-negative{color:var(--danger)}
.ledger-row.is-correction td:nth-child(2)>span{color:var(--warning);font-weight:500}
.ledger-check{display:flex;align-items:flex-start;gap:10px;margin:0;padding:14px 22px;font-size:.86rem;line-height:1.55;border-top:1px solid var(--line)}
.ledger-check .icon{flex:0 0 auto;margin-top:2px}
.ledger-check.is-good{background:var(--bg);color:var(--success)}
.ledger-check.is-good .icon{color:var(--success)}
.ledger-check.is-bad{background:var(--bg);color:var(--danger)}
.ledger-check.is-neutral{background:var(--surface-soft);color:var(--muted)}
.ledger-check.is-neutral .icon{color:var(--muted)}
.ledger-check.is-bad .icon{color:var(--danger)}
@media(max-width:760px){
.ledger-search{flex-wrap:wrap}
.ledger-search input[type="search"],.ledger-search select{flex:1 1 100%}
.ledger-account-head{flex-direction:column;gap:10px;padding:16px 15px 12px}
  /* Schmal steht der Winkel neben dem Bestand statt in einer eigenen Zeile. */
  summary.ledger-account-head{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  summary.ledger-account-head>div:first-child{flex:1 1 100%;order:1}
  summary.ledger-account-head>.ledger-account-balance{flex:1 1 auto;order:2}
  summary.ledger-account-head>.chevron{order:3;align-self:center}
.ledger-account-balance{text-align:left}
.ledger-origin,.ledger-check{padding-left:15px;padding-right:15px}
}
.convert-modal .convert-search-label{position:relative}
.convert-results{position:absolute;left:0;right:0;top:100%;z-index:5;max-height:264px;overflow:auto;margin-top:5px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:0;box-shadow:var(--shadow-strong)}
.convert-results[hidden]{display:none!important}
.convert-hit{display:block;width:100%;text-align:left;padding:8px 11px;border:0;border-radius:0;background:none}
.convert-hit:hover{background:var(--surface-soft)}
.convert-hit strong{display:block;font-size:.88rem}
.convert-hit small{display:block;margin-top:2px;color:var(--muted);font-size:.77rem}
.convert-empty{margin:0;padding:11px;color:var(--muted);font-size:.83rem}
.convert-chosen{display:block;padding:11px 13px;border:1px solid var(--gold-light);border-radius:0;background:var(--surface-soft)}
.convert-chosen[hidden]{display:none!important}
.convert-chosen strong{display:block;font-size:.9rem}
.convert-chosen small{display:block;margin-top:3px;color:var(--muted);font-size:.79rem}
.convert-preview{margin:0;color:var(--muted);font-size:.83rem;line-height:1.5;min-height:1.2em}
.convert-preview.is-bad{color:var(--danger);font-weight:500}
.purchase-location-card.is-missing{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(164,61,61,.14)!important;animation:standortHinweis .5s ease}
.purchase-location-card.is-missing .purchase-location-head strong{color:var(--danger)}
.purchase-location-card.is-missing .purchase-location-tile{border-color:var(--danger-line)}
@media(prefers-reduced-motion:reduce){
.purchase-location-card.is-missing{animation:none}
}
.signature-pad-wrap{position:relative;margin:12px 0 10px;border:1px solid var(--line);border-radius:0;background:var(--surface);overflow:hidden}
.signature-pad{display:block;width:100%;height:190px;touch-action:none;cursor:crosshair;background:var(--surface)}
.signature-baseline{position:absolute;left:22px;right:22px;bottom:46px;height:1px;background:var(--line);pointer-events:none}
.signature-placeholder{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:var(--line-strong);font-size:.83rem;letter-spacing:.04em;pointer-events:none}
.signature-placeholder[hidden]{display:none}
.signature-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.signature-actions .button{min-width:132px}
.signature-field{display:flex;flex-direction:column;gap:5px;margin:0 0 10px;font-size:.85rem;font-weight:500;color:var(--text-soft)}
.signature-field input{height:44px;border-radius:0}
.signature-legal{margin:0 0 12px;color:var(--muted);font-size:.79rem;line-height:1.55}
.signature-done{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:0;background:var(--bg);color:var(--success);font-size:.82rem;font-weight:500;line-height:1.45}
.signature-done .icon{flex:0 0 auto}
.signature-hint{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}
.signature-hint .icon{flex:0 0 auto;margin-top:2px}
.signature-modal{max-width:660px}
.signature-card{text-align:left}
.signature-summary{margin:14px 0;padding:13px 15px;border:1px solid var(--line);border-radius:0;background:var(--surface-soft);font-size:.86rem}
.signature-summary-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.signature-summary-head span{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
.signature-summary ul{list-style:none;margin:9px 0;padding:0;display:grid;gap:6px}
.signature-summary li{display:flex;justify-content:space-between;gap:12px}
.signature-summary li b{white-space:nowrap;font-variant-numeric:tabular-nums}
.signature-summary-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:9px;border-top:1px solid var(--line)}
.signature-summary-total strong{font-size:1.15rem}
@media(max-width:520px){
.signature-pad{height:160px}
.signature-actions .button{flex:1 1 auto;min-width:0}
}
.process-action-card .button{white-space:normal;text-align:center;line-height:1.25;min-height:42px;padding-left:12px;padding-right:12px}
.process-action-card .button>span{min-width:0}
.process-action-card .upload-status{white-space:normal;line-height:1.35}
.touch-only{display:none!important}
.touch-device .touch-only{display:inline-flex!important}
.touch-device .touch-only.full{width:100%}
@media(max-width:820px){
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{font-size:16px!important}
.calculator-table .weight-input{padding-left:5px!important;padding-right:5px!important}
}
.th-kurz{display:none}
@media(max-width:800px){
#calculatorForm .calculator-table .th-lang{display:none}
#calculatorForm .calculator-table .th-kurz{display:inline}
#calculatorForm .calculator-table th{overflow-wrap:normal;word-break:normal;hyphens:none}
}
.document-mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 4px}
.document-mode-option{position:relative;margin:0;cursor:pointer}
.document-mode-option>input{position:absolute;top:0;left:0;width:1px!important;min-width:0!important;max-width:1px!important;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none;clip-path:inset(50%)}
.document-mode-tile{display:flex;gap:11px;height:100%;padding:14px 15px;border:1px solid var(--line);border-radius:0;background:var(--surface);transition:.16s ease}
.document-mode-tile>.icon{flex:0 0 auto;margin-top:2px;color:var(--muted)}
.document-mode-tile strong{display:block;font-size:.92rem}
.document-mode-tile small{display:block;margin-top:4px;color:var(--muted);font-size:.79rem;line-height:1.45}
.document-mode-option>input:checked+.document-mode-tile{border-color:var(--gold);background:var(--surface-soft);box-shadow:0 0 0 2px rgba(184,149,82,.16)}
.document-mode-option>input:checked+.document-mode-tile>.icon{color:var(--gold-dark)}
.document-mode-option>input:focus-visible+.document-mode-tile{outline:2px solid var(--gold);outline-offset:2px}
.record-sale-note{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:13px 15px;border:1px solid var(--gold-light);border-radius:0;background:var(--surface-soft);font-size:.85rem;line-height:1.55}
.record-sale-note .icon{flex:0 0 auto;margin-top:2px;color:var(--gold-dark)}
@media(max-width:640px){
.document-mode-choice{grid-template-columns:1fr}
}
.sale-form.is-record-mode .tax-type-field{display:none!important}
.sale-form.is-record-mode .preview-vat-row{display:none!important}
.step-two-grid.is-single{grid-template-columns:minmax(0,1fr)}
.step-id-block{margin:0 20px}
.step-id-block .process-action-card{background:var(--surface-soft)}
.customer-toggle>.save-customer-button{display:flex;margin:16px 20px 20px!important;width:calc(100% - 40px)}
@media(max-width:760px){
.step-id-block{margin:0 15px}
.customer-toggle>.save-customer-button{margin:14px 15px 15px!important;width:calc(100% - 30px)}
}
.ai-cache-badge{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 9px;border-radius:0;background:var(--bg);color:var(--success);font-size:.74rem;font-weight:600}
.ai-cache-badge .icon{width:14px;height:14px}
.ai-search-head .ai-fresh{margin-left:auto;padding:5px 11px;font-size:.76rem}
.ai-web-offer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:11px 13px;border:1px solid var(--line);border-radius:0;background:var(--surface-soft)}
.ai-web-offer>span{flex:1 1 220px;min-width:0;color:var(--muted);font-size:.83rem;line-height:1.5}
.ai-web-offer.is-recommended{border-color:var(--gold-light);background:var(--surface-soft)}
.ai-web-offer.is-recommended>span{color:var(--warning);font-weight:500}
.ai-settings-body{display:flex;flex-direction:column;gap:14px;padding:4px 24px 24px}
.ai-settings-body>.settings-inline-note{margin:0}
.ai-settings-body>.form-grid{margin:0}
.ai-settings-body>.muted-note{margin:0;padding-top:4px;border-top:1px solid var(--line)}
.ai-model-list[hidden]{display:none!important}
@media(max-width:760px){
.ai-settings-body{padding:4px 15px 16px;gap:12px}
}
.ai-diag{display:inline-block;margin-top:4px;color:var(--faint);font-size:.72rem;font-variant-numeric:tabular-nums}

/* ===========================================================================
   TEIL C · Gerüst mit waagerechter Navigation
   ---------------------------------------------------------------------------
   Steht bewusst NACH Teil B: Dort machen Altregeln die Seitenleiste unter
   800px zu einem waagerecht scrollbaren Streifen und setzen das Raster von
   .app-shell auf zwei Spalten. Dieser Teil löst beides ab. Eine frühere
   Platzierung würde von Teil B überschrieben.

   Der Aufbau hat kein Seitenmenü mehr:
     Zeile 1  Topbar  – Marke, Kurse, Konto          (klebt)
     Zeile 2  Haupt   – acht tägliche Ziele + Zahnrad (klebt)
     Zeile 3  Unter   – nur im Einstellungsbereich
              Inhalt  – volle Breite

   Flach statt nach Fachgebieten gruppiert: Eine Gruppe wie "Stammdaten &
   Finanzen" muss man erst entschlüsseln, und ein Klick darauf springt
   unerwartet auf irgendeine erste Unterseite.
   ======================================================================== */

/* --- Klickbare Tabellenzeilen ------------------------------------------
   Der Zeiger zeigt an, dass die ganze Zeile reagiert. Der Verweis in der
   ersten Zelle erbt die Textfarbe, damit die Zeile nicht wie ein Link
   aussieht – geklickt wird sie ohnehin überall. */
.row-link{cursor:pointer}
.row-link-main{color:inherit}
.row-link-main:hover{color:inherit}
.row-link:hover{background:var(--surface-soft)}

/* --- Kein Seitenmenü mehr: eine Spalte, volle Breite. ------------------- */
.app-shell{display:block;min-height:0}
.content{max-width:1560px}

/* --- Zeile 1 · Topbar --------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:32;border-bottom:1px solid var(--frame-line)}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}

/* --- Zeile 2 · tägliche Ziele ------------------------------------------- */
.haupt{
  position:sticky;top:var(--topbar-h);z-index:31;
  display:flex;align-items:stretch;
  height:44px;
  padding:0 calc(var(--content-pad) - 14px);
  background:var(--frame);
  border-bottom:1px solid var(--frame-line);
  overflow-x:auto;scrollbar-width:none;
}
.haupt::-webkit-scrollbar{display:none}
.haupt-punkt{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:0 14px;
  font-size:.875rem;font-weight:500;
  color:var(--frame-text);
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .15s ease,border-color .15s ease;
}
.haupt-punkt .icon{width:16px;height:16px;color:var(--frame-muted)}
.haupt-punkt:hover{color:var(--frame-text-strong)}
.haupt-punkt:hover .icon{color:var(--frame-text)}
.haupt-punkt.active{color:var(--frame-text-strong);border-bottom-color:var(--frame-accent)}
.haupt-punkt.active .icon{color:var(--frame-accent)}
/* Das Zahnrad sitzt rechts und ist durch eine Trennlinie abgesetzt: Es gehört
   nicht zur täglichen Reihe, sondern führt aus ihr heraus. */
.haupt-einstellungen{
  margin-left:auto;
  border-left:1px solid var(--frame-line);
  padding-left:16px;
}

/* Zwischen 801 und 1100px passen neun Einträge mit Symbol nicht nebeneinander –
   die Leiste müsste gescrollt werden und Punkte wären versteckt. Dort entfallen
   die Symbole, nicht die Wörter: Ein Wort sagt eindeutig, wohin es geht, ein
   Symbol muss gedeutet werden. */
@media (min-width:801px) and (max-width:1100px){
  .haupt-punkt{padding:0 10px;gap:0;font-size:.8125rem}
  .haupt-punkt .icon{display:none}
  .haupt-einstellungen{padding-left:12px}
}

/* --- Zeile 3 · nur im Einstellungsbereich -------------------------------- */
.unter{
  display:flex;align-items:stretch;
  height:42px;
  padding:0 calc(var(--content-pad) - 12px);
  background:var(--surface);
  border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.unter::-webkit-scrollbar{display:none}
.unter-punkt{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:0 12px;
  font-size:.8125rem;font-weight:500;
  color:var(--muted);
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.unter-punkt .icon{width:15px;height:15px}
.unter-punkt:hover{color:var(--text)}
.unter-punkt.active{color:var(--text);border-bottom-color:var(--gold)}

/* --- Schublade und Fußleiste: auf breiten Ansichten unsichtbar ---------- */
.schublade,.fuss,.drawer-schalter,.drawer-schliessen{display:none}
#drawer{position:absolute;width:1px;height:1px;opacity:0;margin:0}

/* ===========================================================================
   Unter 800px – dieselbe Grenze wie in Teil B, wo .app-shell einspaltig wird.
   Eine andere Grenze hinterliesse dazwischen eine leere Navigationsspalte.
   ======================================================================== */
@media (max-width:800px){
  .haupt,.unter{display:none}
  .topbar{position:sticky;top:0}
  .drawer-schalter{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;flex:0 0 auto;
    color:var(--frame-text-strong);cursor:pointer;
  }
  .drawer-schalter:hover{background:var(--frame-soft)}

  .schublade{
    display:flex;flex-direction:column;gap:1px;
    position:fixed;top:0;left:0;bottom:0;z-index:40;
    width:264px;max-width:82vw;
    padding:12px 10px;
    background:var(--frame);
    border-right:1px solid var(--frame-line);
    overflow-y:auto;overflow-x:hidden;
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  body:has(#drawer:checked) .schublade{transform:translateX(0)}
  .drawer-schliessen{
    display:flex;align-items:center;gap:8px;
    margin:0 0 8px;padding:8px 10px;
    border:0;background:transparent;
    color:var(--frame-text);font-size:.8125rem;cursor:pointer;
  }
  .drawer-schliessen:hover{background:var(--frame-soft);color:var(--frame-text-strong)}
  body:has(#drawer:checked) .drawer-schliessen::after{
    content:"";position:fixed;inset:0;z-index:-1;
    background:rgba(33,33,32,.42);
  }

  .fuss{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:38;
    background:var(--frame);
    border-top:1px solid var(--frame-line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .fuss a,.fuss label{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:8px 4px;
    color:var(--frame-text);
    font-size:.625rem;font-weight:500;
    border-top:2px solid transparent;
    cursor:pointer;
  }
  .fuss .icon{width:19px;height:19px;color:var(--frame-muted)}
  .fuss span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .fuss .active{color:var(--frame-text-strong);border-top-color:var(--frame-accent)}
  .fuss .active .icon{color:var(--frame-accent)}
  .content{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .schublade{transition:none}
}

/* ===========================================================================
   TEIL D · Zweispaltige Vorgangsansicht
   ---------------------------------------------------------------------------
   Links die Vorgangsliste, rechts der geöffnete Vorgang. Der nächste Vorgang
   ist damit ein Klick entfernt statt drei (zurück, suchen, öffnen).

   Die Liste klebt und scrollt für sich. Ohne eigenen Scrollbereich müsste man
   im langen Ankaufsformular erst wieder hochscrollen, um den nächsten Vorgang
   zu erreichen; die Spalte wäre dann nur Dekoration.
   ======================================================================== */
.zweispaltig{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:20px;
  align-items:start;
}

.nebenliste{
  position:sticky;
  top:calc(var(--topbar-h) + 44px + 16px);
  max-height:calc(100vh - var(--topbar-h) - 44px - 32px);
  display:flex;flex-direction:column;min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
}
.nebenliste-kopf{
  flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  background:var(--surface-soft);
  font-size:.875rem;
}
.nebenliste-alle{margin-left:auto;font-size:.75rem}
.nebenliste-koerper{flex:1 1 auto;min-height:0;overflow-y:auto}

.nebeneintrag{
  display:block;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  border-left:2px solid transparent;
  color:var(--text);
}
.nebeneintrag:last-child{border-bottom:0}
.nebeneintrag:hover{background:var(--surface-soft);color:var(--text)}
.nebeneintrag.active{background:var(--surface-sunken);border-left-color:var(--gold)}
.nebeneintrag-oben{display:flex;align-items:baseline;gap:8px}
.nebeneintrag-nr{font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums}
.nebeneintrag-betrag{margin-left:auto;font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.nebeneintrag-unten{display:flex;align-items:center;gap:8px;margin-top:3px}
.nebeneintrag-kunde{
  font-size:.8125rem;color:var(--muted);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nebeneintrag-unten .badge{margin-left:auto;flex:0 0 auto}
.nebeneintrag-datum{display:block;margin-top:2px;font-size:.6875rem;color:var(--faint)}

.vorgangsdetail{min-width:0}

/* Unter 1180px reicht die Breite nicht für beides: Der Ankaufsvorgang hat
   breite Tabellen und darf nicht gequetscht werden. Die Liste wird dort zu
   einem waagerechten Streifen über dem Vorgang. */
@media (max-width:1180px){
  .zweispaltig{display:block}
  .nebenliste{position:static;max-height:none;margin-bottom:18px}
  .nebenliste-koerper{display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
  .nebeneintrag{
    flex:0 0 auto;width:210px;
    border-bottom:0;border-right:1px solid var(--line);
    border-left:0;border-top:2px solid transparent;
  }
  .nebeneintrag:last-child{border-right:0}
  .nebeneintrag.active{border-left-color:transparent;border-top-color:var(--gold)}
}

/* Auf dem Telefon ist der Streifen mehr Ablenkung als Nutzen. */
@media (max-width:640px){
  .nebenliste{display:none}
}

/* ===========================================================================
   TEIL E · Statistiken
   ---------------------------------------------------------------------------
   Vorher standen Monats- und Jahresauswertung als neun Blöcke untereinander,
   mit zwei getrennten Zeitnavigationen. Jetzt zwei Ansichten mit einer
   Navigation, die sich der Ansicht anpasst.
   ======================================================================== */
.stats-leiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}

/* Bereichswahl als zusammenhängender Schalter. Wird von der Statistik
   (.stats-tabs) und vom Bestand (.ansicht-tabs) benutzt – eine Gestaltung,
   zwei Namen, damit das vorhandene Markup unverändert bleibt. */
.stats-tabs,.ansicht-tabs{display:inline-flex;border:1px solid var(--line-strong);background:var(--surface);max-width:100%;overflow-x:auto;scrollbar-width:none}
.stats-tabs::-webkit-scrollbar,.ansicht-tabs::-webkit-scrollbar{display:none}
.ansicht-tabs{margin-bottom:18px}
.stats-tab,.ansicht-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;
  font-size:.875rem;font-weight:500;color:var(--muted);
  border-right:1px solid var(--line-strong);
  white-space:nowrap;flex:0 0 auto;
}
.stats-tab:last-child,.ansicht-tab:last-child{border-right:0}
.stats-tab .icon,.ansicht-tab .icon{width:16px;height:16px}
.stats-tab:hover,.ansicht-tab:hover{background:var(--surface-soft);color:var(--text)}
.stats-tab.active,.ansicht-tab.active{background:var(--ink);color:var(--on-dark)}
.stats-tab.active:hover,.ansicht-tab.active:hover{background:var(--ink-soft);color:var(--on-dark)}
.stats-tab.active .icon,.ansicht-tab.active .icon{color:var(--frame-accent)}
/* Anzahl im Reiter: Sie beantwortet die Frage "lohnt das Hinsehen" schon
   vorher – ohne sie müsste man jeden Bereich einmal öffnen. */
.tab-zahl{
  margin-left:2px;padding:0 6px;
  font-size:.75rem;font-variant-numeric:tabular-nums;
  background:var(--surface-sunken);border:1px solid var(--line);color:var(--muted);
}
.ansicht-tab.active .tab-zahl{background:var(--anthrazit-soft);border-color:var(--anthrazit-line);color:var(--frame-text)}
.stats-tab.active .tab-zahl{background:var(--anthrazit-soft);border-color:var(--anthrazit-line);color:var(--frame-text)}

.stats-zeitraum{display:inline-flex;align-items:center;gap:6px}
/* Pfeile auf Feldhöhe: 34 neben 38 sieht nach Versehen aus. */
.stats-zeitraum .icon-button{width:38px;height:38px}
.stats-zeitform{display:inline-flex;margin:0}
/* input/select sind global width:100% – in der Leiste zählt die Inhaltsbreite. */
/* Der Zeitraum steht zwischen zwei Pfeilen und wird als Ganzes gelesen –
   linksbündig wirkte er wie ein Formularfeld, in dem etwas fehlt. Zentriert
   sowohl über text-align (klassische Darstellung) als auch über
   justify-content (Chrome stellt gestaltete Auswahlfelder als Flex dar). */
.stats-zeitform select{width:auto;min-width:170px;text-align:center;justify-content:center}
.stats-hinweis{margin-left:auto;font-size:.8125rem;color:var(--muted)}

/* Fünf Kennzahlen im Monat, vier im Jahr: eine feste Spaltenzahl liesse in
   einem der beiden Fälle eine Lücke. auto-fit verteilt beides sauber. */
.kpi-grid.stats-grid{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}

/* Ertrag je Standort und Feingehalt nebeneinander. Die Spaltenzahl richtet
   sich danach, wie viele Kinder tatsächlich da sind: Ist die Standortfunktion
   abgeschaltet, bleibt nur der Feingehalt übrig – dann eine schmale Spalte,
   statt ihn über die volle Breite zu ziehen. Das erspart eine Fallunterscheidung
   im PHP und kann nicht mit ihr auseinanderlaufen. */
.stats-paar{display:grid;gap:16px;align-items:start;grid-template-columns:minmax(0,560px)}
/* Zweite Spalte breiter als zuvor: Bei 380px lag die Feingehalt-Tabelle mit
   1px Rest an der Kante – mit längeren Beträgen hätte .table-card{overflow:
   hidden} sie abgeschnitten statt umzubrechen. */
.stats-paar:has(> * + *){grid-template-columns:minmax(0,1fr) minmax(0,430px)}
/* Im Jahr stehen zwei Tabellen nebeneinander, beide brauchen gleich viel. */
.stats-paar.gleich:has(> * + *){grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:1100px){
  .stats-paar,
  .stats-paar:has(> * + *),
  .stats-paar.gleich:has(> * + *){grid-template-columns:minmax(0,1fr)}
}

/* Der Feingehalt ist eine Randinformation. In voller Breite und mit normaler
   Zeilenhöhe beanspruchte er so viel Platz wie die Kennzahlen darüber – das
   verschiebt die Gewichtung. Schmaler, enger, kleinere Schrift. */
.nebeninfo{max-width:560px}
.nebeninfo .table-title{padding:10px 14px}
.nebeninfo .table-title h2{font-size:.875rem}
.nebeninfo .data-table{font-size:.8125rem}
.nebeninfo .data-table th,.nebeninfo .data-table td{padding:7px 14px}
.nebeninfo .material-pill{font-size:.6875rem;padding:2px 7px}

/* Diagramm links, abgeleitete Werte rechts. Der Platz neben einem in der
   Breite begrenzten Diagramm stand sonst leer; die Werte dort beantworten,
   was im Verlauf selbst nicht steht. */
.stats-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:16px;align-items:start}

.chart-card{padding:0;overflow:hidden}
.chart-flaeche{padding:14px 12px 10px}
/* Waagerechte Balken: Die Höhe ergibt sich aus zwölf Zeilen, nicht aus der
   Seitenbreite. Ein Deckel für die Breite hält die Beschriftung lesbar –
   ohne ihn skaliert die Schrift mit und wird auf breiten Bildschirmen
   unnötig gross, auf schmalen unlesbar klein. */
.profit-chart-svg{display:block;width:100%;max-width:620px;min-width:420px;height:auto;overflow:visible;margin:0 auto}

/* Kennwerte als Beschreibungsliste: Begriff und Wert gehören zusammen. */
.kennwerte{margin:0;padding:0}
.kennwerte>div{
  display:flex;align-items:baseline;gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.kennwerte>div:last-child{border-bottom:0}
.kennwerte dt{flex:1 1 auto;min-width:0;font-size:.8125rem;color:var(--muted)}
.kennwerte dd{
  margin:0;flex:0 0 auto;text-align:right;
  font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.kennwerte dd small{display:block;font-weight:400;color:var(--muted);font-variant-numeric:normal}

/* Unter 1000px reicht die Breite nicht für zwei Spalten: Das Diagramm braucht
   Platz für die Monatsnamen, die Kennwerte für ihre Beträge. */
@media (max-width:1000px){
  .stats-zwei{grid-template-columns:minmax(0,1fr)}
  .chart-flaeche{overflow-x:auto}
  .profit-chart-svg{min-width:420px}
}

.chart-grid{stroke:var(--line);stroke-width:1}
.chart-zero{stroke:var(--line-strong)}
.chart-achse{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.chart-monat{fill:var(--muted);font-size:11px}
.chart-monat.aktuell{fill:var(--text);font-weight:600}

/* Unsichtbare Trefferfläche über die volle Spaltenhöhe: Eine niedrige Säule
   wäre sonst kaum zu treffen. */
.chart-treffer{fill:transparent}
a:hover .chart-treffer{fill:var(--surface-soft)}

.chart-balken{fill:var(--gold);transition:fill .15s ease}
.chart-balken.negativ{fill:var(--danger)}
.chart-balken.aktuell{fill:var(--ink)}
a:hover .chart-balken{fill:var(--gold-deep)}
a:hover .chart-balken.negativ{fill:var(--danger)}
a:hover .chart-balken.aktuell{fill:var(--ink-soft)}

@media (max-width:760px){
  .stats-leiste{gap:10px}
  .stats-hinweis{margin-left:0;width:100%}
  .stats-zeitraum{flex:1 1 auto}
  .stats-zeitform{flex:1 1 auto}
  .stats-zeitform select{width:100%;min-width:0}
  .chart-flaeche{padding:14px 10px 6px}
  /* Bei waagerechten Balken steht jeder Monatsname in seiner eigenen Zeile –
     Ausdünnen ist nicht mehr nötig. */
}

/* --- Ankaufseinstellungen -------------------------------------------------
   Vorher war die Seite ein einziges Formular mit vierzig Feldern; die
   Erklärung stand jeweils unter den Zahlen, die sie erklären sollte, und
   acht Felder hießen gleich („Stufe 1“ bis „Stufe 4“, zweimal). Jetzt hat
   jedes Thema eine eigene Karte mit der Erklärung oben, und die beiden
   Stufenblöcke stehen als eine Tabelle nebeneinander. */
.einstellungen-ankauf{display:flex;flex-direction:column;gap:18px}
.einstellungs-block>.section-heading p{max-width:78ch;color:var(--muted);font-size:.83rem;line-height:1.5}
.einstellungs-block>.section-heading h2{font-size:1.05rem}
.einstellungs-block>.form-grid{margin-top:16px}
/* Prozent- und Eurofelder brauchen keine halbe Kartenbreite. Ein schmales Feld
   zeigt schon durch seine Grösse, dass hier eine kurze Zahl hingehört. */
.einstellungs-block>.form-grid .input-suffix{width:150px;max-width:100%}
.einstellungs-block .id-policy-setting{padding-right:14px}

/* Die Stufentabelle: schmale Eingabefelder, damit die Prozentzahl als Zahl
   lesbar bleibt und die Beispielrechnung darunter Platz hat. */
/* width:auto genügt hier nicht: Die Tabelle füllt als Blockelement trotzdem
   die ganze Karte und die drei Spalten stünden weit auseinander. max-content
   lässt sie auf ihren Inhalt schrumpfen, max-width hält sie schmal genug. */
.stufen-tabelle{margin-top:16px;width:max-content;max-width:100%}
.stufen-tabelle th[scope=row]{width:1%;white-space:nowrap;font-weight:600;color:var(--text);text-transform:none;letter-spacing:0}
.stufen-tabelle td{vertical-align:top}
.stufen-tabelle .input-suffix{width:104px;max-width:100%}
.stufen-tabelle input{min-width:0;width:100%}
.stufen-beispiel{display:block;margin-top:5px;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.stufen-hinweis{margin-top:12px}
.einstellungen-speichern{display:flex;justify-content:flex-end}
@media(max-width:620px){
  /* Quer bleibt sie auch schmal – sie rollt dann im eigenen Rahmen. */
  .stufen-tabelle .input-suffix{width:92px}
}

/* Detailfenster Materialabholung: Summen in der Kopfzeile, darunter Reiter */
button.ansicht-tab{border-top:0;border-bottom:0;border-left:0;background:transparent;border-radius:0}
.abholung-tabs{margin:16px 0}
.abholung-panel[hidden]{display:none}
.abholung-summen{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
.abholung-summen:empty{display:none}
.abholung-summe{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.abholung-summe strong{color:var(--text);font-size:1.15rem;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------
   Handyansicht – Korrekturen (16.09.2026)
   --------------------------------------------------------------------- */
.nur-schmal{display:none}
/* Die Tabellenüberschrift sitzt in .table-title; das mobile Innenpolster
   für freistehende h2 darf dort nicht greifen, sonst rutscht der Titel
   unter den rechten Text. */
.table-card .table-title h2{padding:0}
@media (max-width:720px){
  .nur-breit{display:none}
  .nur-schmal{display:inline}

  /* Bereichsreiter füllen die Breite statt seitwärts zu scrollen. */
  .ansicht-tabs{display:flex;width:100%}
  .ansicht-tab{flex:1 1 0;justify-content:center;padding:9px 4px;gap:4px;min-width:0;font-size:.8rem}
  .ansicht-tab .tab-zahl{padding:0 4px;font-size:.7rem}
  .ansicht-tabs .ansicht-tab .icon{display:none}

  /* Aufklappbare Tabellentitel: rechter Text darf unter den Titel. */
  .collapsible-section>summary.table-title{flex-wrap:wrap}
  .collapsible-section>summary.table-title h2{flex:1 1 auto}

  /* Dashboard-Kacheln: Platz für das Symbol oben, sonst überlappt der Titel. */
  .quick-grid a{min-height:0;padding-top:80px}

  /* Ankaufsschritte: Knopf bzw. Status unter den Text statt daneben. */
  .workflow-summary-row{grid-template-columns:48px minmax(0,1fr)}
  .workflow-summary-row>:nth-child(3){grid-column:2/-1;justify-self:start}
  .workflow-summary-row .summary-actions .button{width:100%;justify-content:center}

  /* Summenzeile mit Kleingedrucktem darf umbrechen. */
  .data-table tfoot th small{white-space:normal}

  /* Kartenansicht für breite Tabellen (Beschriftung per Skript). */
  .table-card:has(.karten-tabelle){overflow-x:visible}
  .table-scroll:has(>.karten-tabelle){overflow-x:visible}
  .karten-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .karten-tabelle, .karten-tabelle tbody, .karten-tabelle tfoot, .karten-tabelle tr{display:block;width:100%}
  .karten-tabelle{min-width:0!important;width:100%!important}
  .karten-tabelle tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .karten-tabelle tbody tr:last-child{border-bottom:0}
  .karten-tabelle tfoot tr{background:var(--surface-sunken);border-top:1px solid var(--line-strong)}
  .karten-tabelle td, .karten-tabelle tfoot th{
    display:block;position:relative;border:0;padding:4px 0 4px 42%!important;
    text-align:right;white-space:normal;overflow-wrap:anywhere;background:transparent;min-height:26px;padding-right:0!important
  }
  .karten-tabelle td::before, .karten-tabelle tfoot th::before{
    content:attr(data-label);position:absolute;left:0;top:6px;width:40%;
    text-align:left;color:var(--muted);font-size:.72rem;font-weight:500;
    letter-spacing:.04em;text-transform:uppercase;line-height:1.3
  }
  .karten-tabelle td:not([data-label]), .karten-tabelle tfoot th:not([data-label]){padding-left:0!important}
  /* Erste Zelle ist der Titel der Karte. */
  .karten-tabelle tbody td:first-child, .karten-tabelle tfoot th:first-child{padding:0 0 6px!important;text-align:left;font-size:.95rem}
  .karten-tabelle tbody td:first-child::before, .karten-tabelle tfoot th:first-child::before{content:none}
  .karten-tabelle td small, .karten-tabelle tfoot th small{display:block}
  .karten-tabelle td.row-actions, .karten-tabelle td:has(>.row-actions){display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;padding:8px 0 0!important}
  .karten-tabelle td.row-actions::before, .karten-tabelle td:has(>.row-actions)::before{content:none}
  .karten-tabelle td.empty, .karten-tabelle td[colspan]{padding:20px 0!important;text-align:center}
  .karten-tabelle td.empty::before{content:none}
  .karten-tabelle .right{text-align:right}
  /* Standorte: Formularzeilen als Block – Name über die volle Breite,
     darunter Standard und Status, Aktionen rechts. */
  .table-scroll:has(>.standort-tabelle){overflow-x:visible}
  .standort-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .standort-tabelle, .standort-tabelle tbody{display:block;width:100%}
  .standort-tabelle tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
  .standort-tabelle td{display:block;padding:0;border:0}
  .standort-tabelle td:first-child, .standort-tabelle td:last-child{grid-column:1/-1}
  .standort-tabelle td:first-child input{width:100%}
  .standort-tabelle td:last-child .row-actions{justify-content:flex-end}
  /* Leere Zellen ergeben in der Karte nur eine Überschrift ohne Wert. */
  .karten-tabelle .zelle-leer{display:none}
}

/* --- Schutz der Marge vor Kundenblicken --------------------------------
   Materialwert und Gewinn stehen auf der Vorgangsseite in einem zugeklappten
   Bereich.
   Kundendialoge haben einen blickdichten Hintergrund, damit beim
   Unterschreiben nichts von der Seite dahinter durchscheint. */
.calculation-totals.eins{grid-template-columns:1fr}
.interne-kalkulation{margin-top:14px;border:1px solid var(--line);background:var(--surface-soft)}
.interne-kalkulation>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;cursor:pointer;user-select:none;-webkit-user-select:none;font-size:.85rem;color:var(--text-soft)}
.interne-kalkulation>summary::-webkit-details-marker{display:none}
.interne-kalkulation>summary>span:first-child{display:inline-flex;align-items:center;gap:8px}
.interne-kalkulation>summary:hover{background:var(--surface-sunken)}
.interne-kalkulation[open]>summary{border-bottom:1px solid var(--line)}
.interne-kalkulation-hinweis{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.interne-kalkulation>.data-table{margin:0}
.interne-kalkulation>.calculation-totals{margin:0;padding:12px 14px}
.kunden-dialog::backdrop{background:#2e2e2c; /* fest, weil ältere Browser Variablen im ::backdrop nicht kennen */ backdrop-filter:none;opacity:1}
.signature-abbrechen{display:block;margin:14px auto 0;background:none;border:0;color:var(--muted);font-size:.85rem;text-decoration:underline;cursor:pointer;padding:6px 10px}
.danke-dialog{max-width:460px;text-align:center;padding:40px 32px}
.danke-dialog h2{margin:14px 0 8px}
.danke-dialog p{margin:0 0 26px;line-height:1.5}
.danke-haken{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--gold-tint);color:var(--gold-deep)}
.danke-haken .icon{width:32px;height:32px}
.danke-weiter{background:none;border:0;color:var(--muted);font-size:.85rem;text-decoration:underline;cursor:pointer;padding:6px 10px}