/*
  Bestandssystem, Klick-Prototyp (Kopie von app/entwurf/entwurf.css, erweitert).
  Eigenes CSS NUR fuer die nachgebaute Admin-Huelle und die Attrappen
  (Prototypband, Seitenleiste, Speicherleiste, Toast, Packschein, E-Mail, Fuehrung)
  und fuer zwei Oberflaechen-Vorschlaege aus dem Rundgang (R-04/R-13 Kennzeichen gleich breit,
  R-17 gegliederte Schrittleiste).
  Alles innerhalb der App-Flaeche gestaltet Polaris selbst.
*/

:root {
  --huelle-grund: #f1f1f1;
  --huelle-leiste: #ebebeb;
  --huelle-dunkel: #1a1a1a;
  --huelle-text: #303030;
  --huelle-text-leise: #616161;
  --huelle-aktiv: #fafafa;
  --huelle-rand: #e3e3e3;
  --band-grund: #fff4d6;
  --band-rand: #e8c766;
  --leiste-breite: 240px;
  --kopf-hoehe: 56px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

/* Wurzel bei 16px: Polaris rechnet in rem (0.8125rem = 13px wie im Admin). Eine Wurzel von 13px
   machte alle Bausteine um ein Fuenftel zu klein (gemessen 23.10. am Seitenbild gegen die App). */
html { font-size: 100%; }
html, body {
  margin: 0;
  background: var(--huelle-grund);
  color: var(--huelle-text);
  line-height: 1.4;
}
body { font-size: 13px; }

/* ---------- Prototypband ---------- */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 16px;
  background: var(--band-grund);
  border-bottom: 1px solid var(--band-rand);
  font-size: 13px;
}
.band strong { font-weight: 650; }
.band-zustand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.umschalter {
  display: inline-flex;
  border: 1px solid #b8a15a;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.umschalter button {
  font: inherit;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  min-height: 32px;
  cursor: pointer;
  color: var(--huelle-text);
}
.umschalter button + button { border-left: 1px solid #b8a15a; }
.umschalter button[aria-pressed="true"] { background: var(--huelle-dunkel); color: #fff; font-weight: 600; }
.umschalter button:focus-visible { outline: 2px solid #005bd3; outline-offset: -2px; }

/* ---------- Kopfleiste und Speicherleiste ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--kopf-hoehe);
  background: var(--huelle-dunkel);
  color: #e3e3e3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
.kopf-titel { font-weight: 600; color: #fff; }
.kopf-hinweis { color: #b5b5b5; font-size: 12px; }
.menue-knopf {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.menue-knopf svg { width: 20px; height: 20px; color: #fff; }
.menue-knopf:focus-visible { outline: 2px solid #fff; }

.speicherleiste {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--huelle-dunkel);
  color: #fff;
}
.speicherleiste[hidden] { display: none; }
.speicherleiste-text { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.speicherleiste-knoepfe { display: flex; gap: 8px; }
.speicherleiste button {
  font: inherit;
  font-weight: 600;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #616161;
}
.speicherleiste .verwerfen { background: #303030; color: #fff; }
.speicherleiste .speichern { background: #fff; color: var(--huelle-dunkel); border-color: #fff; }
.speicherleiste button:focus-visible { outline: 2px solid #8cb4ff; outline-offset: 1px; }
.speicherleiste.wackeln { animation: wackeln 0.4s; }
@keyframes wackeln {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ---------- Grundlayout ---------- */
.rahmen {
  display: grid;
  grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
  min-height: calc(100vh - var(--kopf-hoehe));
}
main#app { min-width: 0; padding-bottom: 32px; }

/* ---------- Seitenleiste ---------- */
.seitenleiste {
  background: var(--huelle-leiste);
  border-right: 1px solid var(--huelle-rand);
  padding: 12px 8px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-gruppe { display: flex; flex-direction: column; gap: 2px; }
.nav-eintrag {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--huelle-text);
  text-decoration: none;
  font-weight: 550;
}
.nav-eintrag svg { width: 20px; height: 20px; flex: none; color: #4a4a4a; }
.nav-eintrag.grau { color: #8a8a8a; cursor: default; }
.nav-eintrag.grau svg { color: #b5b5b5; }
a.nav-eintrag:hover { background: #e3e3e3; }
a.nav-eintrag:focus-visible { outline: 2px solid #005bd3; outline-offset: -2px; }
.nav-eintrag.aktiv { background: var(--huelle-aktiv); font-weight: 650; }
.nav-abschnitt {
  margin: 14px 8px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--huelle-text-leise);
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-unter { display: flex; flex-direction: column; gap: 2px; padding-left: 28px; }
.nav-unter .nav-eintrag { font-weight: 450; min-height: 30px; }
.nav-unter .nav-eintrag.aktiv { font-weight: 650; }
.nav-app.aktiv-eltern { font-weight: 650; }
.nav-extern {
  margin-top: 20px;
  padding: 8px;
  border: 1px dashed #b5b5b5;
  border-radius: 8px;
  background: #f7f7f7;
}
.nav-extern .nav-abschnitt { margin: 0 0 2px; }
.nav-extern-hinweis { font-size: 12px; color: var(--huelle-text-leise); margin: 0 0 6px; }
.nav-extern .nav-eintrag { font-weight: 450; }
.nav-extern .nav-eintrag.aktiv { font-weight: 650; }

.schleier { display: none; }

/* ---------- Toast-Attrappe ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  z-index: 60;
  background: var(--huelle-dunkel);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 550;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: calc(100vw - 32px);
}
.toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Attrappen ausserhalb der App ---------- */
.aussen { max-width: 860px; margin: 0 auto; padding: 16px; }
.aussen-hinweis {
  border: 1px dashed #8a8a8a;
  border-radius: 12px;
  background: #fff;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.aussen-hinweis h1 { font-size: 16px; margin: 0 0 4px; }
.aussen-hinweis p { margin: 4px 0 0; color: var(--huelle-text-leise); }

/* Packschein: so wie die Druckroute ihn liefert (statisches HTML) */
.papier {
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 32px 36px;
  margin-bottom: 20px;
  font-size: 13px;
}
.papier h2 { font-size: 20px; margin: 0; }
.papier-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; }
.papier-meta { font-size: 14px; }
.papier table { width: 100%; border-collapse: collapse; }
.papier th, .papier td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #bbb; vertical-align: top; }
.papier th { font-size: 12px; text-transform: none; border-bottom: 1px solid #000; }
.papier .zahl { text-align: right; }
.papier .platz { font-weight: 700; white-space: nowrap; }
.papier .nr { font-family: "Courier New", monospace; font-size: 12px; overflow-wrap: anywhere; }
.kaestchen { display: inline-block; width: 18px; height: 18px; border: 2px solid #000; border-radius: 2px; vertical-align: middle; }
.papier-fuss { margin-top: 10px; font-size: 12px; color: #333; }
.seitenumbruch { text-align: center; font-size: 12px; color: var(--huelle-text-leise); margin: -10px 0 10px; }

/* Warn-E-Mail */
.mail {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.mail-kopf { padding: 14px 20px; border-bottom: 1px solid var(--huelle-rand); background: #fafafa; }
.mail-kopf dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.mail-kopf dt { color: var(--huelle-text-leise); }
.mail-kopf dd { margin: 0; overflow-wrap: anywhere; }
.mail-betreff { font-weight: 650; }
.mail-inhalt { padding: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #222; }
.mail-inhalt table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; }
.mail-inhalt th, .mail-inhalt td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #ddd; vertical-align: top; }
.mail-inhalt th { font-size: 12px; color: #555; }
.mail-inhalt .zahl { text-align: right; }
.mail-inhalt .nr { font-size: 12px; color: #555; overflow-wrap: anywhere; }
.mail-knopf { display: inline-block; background: #303030; color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.mail-fuss { margin-top: 16px; font-size: 12px; color: #666; }

/* ---------- Schmal (Handy) ---------- */
@media (max-width: 760px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .menue-knopf { display: inline-flex; }
  .kopf-hinweis { display: none; }
  .seitenleiste {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 85vw);
    z-index: 50;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 0.2s;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
  }
  body.menue-offen .seitenleiste { transform: translateX(0); }
  body.menue-offen .schleier { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 40; }
  .band { padding: 8px 12px; }
  .papier { padding: 16px; }
  /* Tabellen der Attrappen schmal als beschriftete Zeilenbloecke, damit nichts quer scrollt (R-D14) */
  .papier thead, .mail-inhalt thead { display: none; }
  .papier table, .papier tbody, .papier tr, .papier td,
  .mail-inhalt table, .mail-inhalt tbody, .mail-inhalt tr, .mail-inhalt td { display: block; width: 100%; }
  .papier tr, .mail-inhalt tr { border-bottom: 1px solid #bbb; padding: 6px 0; }
  .papier td, .mail-inhalt td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .papier td::before, .mail-inhalt td::before { content: attr(data-label); font-weight: 600; text-align: left; flex: none; }
  .papier .zahl, .mail-inhalt .zahl { text-align: right; }
  .papier .nr::before, .mail-inhalt .nr::before { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000; }
  .mail-inhalt { padding: 14px; }
}

@media print {
  .band, .kopf, .seitenleiste, .aussen-hinweis, .toast, .seitenumbruch { display: none !important; }
  .rahmen { display: block; }
  .papier { box-shadow: none; page-break-after: always; }
}

/* =====================================================================
   Ergaenzungen Klick-Prototyp (23.10.2026)
   ===================================================================== */
.band-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.band-knopf {
  font: inherit; border: 1px solid #b8a15a; border-radius: 8px; background: #fff; color: var(--huelle-text);
  padding: 6px 12px; min-height: 32px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.band-knopf:hover { background: #fffbef; }
.band-knopf:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.band-rechts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Kasten fuer Teile, die es nur im Prototyp gibt (Beispieldateien) */
.nur-prototyp {
  border: 1px dashed #b8a15a; border-radius: 12px; background: #fffbef; padding: 12px 14px;
}
.nur-prototyp-titel { font-weight: 650; margin: 0 0 4px; }
.nur-prototyp p { margin: 0 0 10px; color: var(--huelle-text-leise); }
.beispiel-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.beispiel-knopf {
  font: inherit; text-align: left; border: 1px solid #c9c9c9; border-radius: 10px; background: #fff;
  padding: 8px 12px; cursor: pointer; min-height: 44px; display: flex; flex-direction: column; gap: 2px;
}
.beispiel-knopf:hover { border-color: #8a8a8a; }
.beispiel-knopf:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.beispiel-knopf strong { font-weight: 650; }
.beispiel-knopf span { color: var(--huelle-text-leise); font-size: 12px; }

/* R-04 / R-13: Kennzeichen, die untereinander stehen, gleich breit und Text zentriert */
.kennzeichen-spalte { display: block; inline-size: 96px; }
.kennzeichen-spalte > s-badge { display: block; }
.kennzeichen-gleich { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px 12px; align-items: start; }

/* R-17: Schrittleiste mit einem Balkenabschnitt je Schritt, Bezeichnungen ueber die Breite verteilt */
.schrittleiste { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.schrittleiste .abschnitt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.schrittleiste .balken { height: 6px; border-radius: 3px; background: #e3e3e3; align-self: stretch; }
.schrittleiste .fertig .balken, .schrittleiste .jetzt .balken { background: #303030; }
.schrittleiste .abschnitt:last-child { align-items: flex-end; text-align: right; }
/* Schmal: nur die Abschnitte, der aktuelle Schritt steht in der Zeile darueber */
@media (max-width: 560px) {
  .schrittleiste .bezeichnung { display: none; }
}

/* Packschein im nachgebauten Druckdialog von Shopify */
.druckdialog { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.18); overflow: hidden; }
.druckdialog-kopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f1f1f1; border-bottom: 1px solid var(--huelle-rand); font-weight: 650; }
.druckdialog-kopf .app-zeichen { display: inline-flex; align-items: center; gap: 8px; }
.druckdialog-kopf .app-zeichen span { width: 20px; height: 20px; border: 1px solid #c9c9c9; border-radius: 5px; background: #fff; display: inline-block; }
.druckdialog-rumpf { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; padding: 16px; }
.druckdialog-vorschau { border: 1px solid var(--huelle-rand); max-height: 560px; overflow: auto; background: #fff; }
.druckdialog-vorschau .papier { box-shadow: none; margin: 0; padding: 20px 22px; font-size: 12px; }
.druckdialog-vorschau .trenner { height: 18px; background: #e3e3e3; }
.druckdialog-seite p { margin: 0 0 12px; }
.druckdialog-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--huelle-rand); }
.dialog-knopf { font: inherit; font-weight: 600; min-height: 32px; padding: 6px 12px; border-radius: 8px; cursor: pointer; border: 1px solid #c9c9c9; background: #fff; }
.dialog-knopf.primaer { background: #303030; color: #fff; border-color: #303030; }
.papier .ohne { font-weight: 400; font-style: italic; }

/* Einrichtungsschritt: Symbol, Text, Knoepfe wie in der App (auto 1fr auto). Schmal stehen die Knoepfe
   unter dem Text, sonst druecken zwei Knoepfe (Vorschlag R-10) den Text auf wenige Zeichen zusammen. */
.einr-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
@media (max-width: 560px) {
  .einr-zeile { grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
  .einr-zeile > :nth-child(3) { grid-column: 2; justify-self: start; }
}

/* Ueber diesen Prototyp */
.ueber-liste { margin: 0; padding-left: 20px; }
.ueber-liste li { margin: 4px 0; }

/* ---------- Fuehrung ---------- */
:root { --fuehrung-breite: 340px; }
@media (max-width: 1439px) { :root { --fuehrung-breite: 300px; } }
.fuehrung {
  position: fixed; z-index: 45; background: #fff; color: var(--huelle-text);
  border-left: 1px solid var(--huelle-rand); box-shadow: -2px 0 16px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
}
.fuehrung[hidden] { display: none; }
.f-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--huelle-rand); background: #fafafa; }
.f-kopf-titel { font-weight: 650; font: inherit; font-weight: 650; background: none; border: 0; padding: 6px 0; cursor: default; color: inherit; text-align: left; display: flex; align-items: center; gap: 8px; }
.f-kopf-knoepfe { display: flex; gap: 4px; }
.f-symbol { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: var(--huelle-text); display: inline-flex; align-items: center; justify-content: center; }
.f-symbol:hover { background: #ebebeb; }
.f-symbol:focus-visible, .f-knopf:focus-visible, .f-kopf-titel:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.f-klappen { display: none; }
.f-inhalt { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.f-stand { font-size: 12px; color: var(--huelle-text-leise); display: flex; flex-direction: column; gap: 6px; }
.f-balken { height: 6px; background: #ebebeb; border-radius: 3px; overflow: hidden; }
.f-balken span { display: block; height: 100%; background: #e0a800; border-radius: 3px; }
.f-titel { font-size: 16px; font-weight: 650; margin: 0; }
.f-text { margin: 0; font-size: 14px; line-height: 1.5; }
.f-knopf { font: inherit; font-weight: 600; min-height: 36px; padding: 6px 14px; border-radius: 8px; cursor: pointer; border: 1px solid #c9c9c9; background: #fff; color: var(--huelle-text); }
.f-knopf:hover { background: #f6f6f6; }
.f-knopf.primaer { background: #303030; border-color: #303030; color: #fff; }
.f-knopf.primaer:hover { background: #1a1a1a; }
.f-knopf[disabled] { opacity: .45; cursor: default; }
.f-aktionen { display: flex; flex-direction: column; gap: 14px; }
.f-zeigen { align-self: flex-start; background: #fff4d6; border-color: #e0a800; }
.f-zeigen:hover { background: #ffecb3; }
.f-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.f-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--huelle-rand); padding-top: 10px; }
.f-liste button { font: inherit; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 5px 8px; cursor: pointer; color: var(--huelle-text-leise); font-size: 12px; }
.f-liste button:hover { background: #f3f3f3; }
.f-liste button[aria-current="step"] { color: var(--huelle-text); font-weight: 650; background: #fff4d6; }

/* Hervorhebung nach „Zeigen“ */
.f-rahmen {
  position: absolute; z-index: 40; pointer-events: none; border: 3px solid #e0a800; border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(224, 168, 0, .25); animation: f-puls 1.2s ease-in-out 3; transition: opacity .4s;
}
@keyframes f-puls { 0%, 100% { box-shadow: 0 0 0 4px rgba(224,168,0,.15); } 50% { box-shadow: 0 0 0 10px rgba(224,168,0,.35); } }

/* Mittlere Breite mit offener Fuehrung: die nachgebaute Seitenleiste klappt hinter den Menueknopf wie auf
   dem Handy, sonst bleiben fuer die Tabellen der App unter 750 px und Spalten werden abgeschnitten
   (gemessen 23.10. an Nachbestellen bei 1280 px). */
@media (min-width: 1100px) and (max-width: 1439px) {
  body.mit-fuehrung .rahmen { grid-template-columns: minmax(0, 1fr); }
  body.mit-fuehrung .menue-knopf { display: inline-flex; }
  body.mit-fuehrung .seitenleiste {
    position: fixed; top: 0; bottom: 0; left: 0; width: 280px; z-index: 50; overflow-y: auto;
    transform: translateX(-105%); transition: transform 0.2s; box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
  }
  body.mit-fuehrung.menue-offen .seitenleiste { transform: translateX(0); }
  body.mit-fuehrung.menue-offen .schleier { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 40; }
}

/* Breiter Bildschirm: Leiste am rechten Rand, Inhalt rueckt nach links */
@media (min-width: 1100px) {
  .fuehrung { top: 0; right: 0; bottom: 0; width: var(--fuehrung-breite); }
  body.mit-fuehrung { padding-right: var(--fuehrung-breite); }
}
/* Schmal: Leiste unten, einklappbar */
@media (max-width: 1099px) {
  .fuehrung { left: 0; right: 0; bottom: 0; max-height: 42vh; border-left: 0; border-top: 1px solid var(--huelle-rand); box-shadow: 0 -2px 16px rgba(0,0,0,.12); border-radius: 14px 14px 0 0; }
  .f-klappen { display: inline-flex; }
  .f-kopf-titel { cursor: pointer; }
  .fuehrung.eingeklappt .f-inhalt { display: none; }
  body.mit-fuehrung { padding-bottom: 42vh; }
  body.mit-fuehrung.fuehrung-eingeklappt { padding-bottom: 60px; }
  .toast { bottom: calc(24px + var(--toast-abstand, 0px)); }
  .f-liste { display: none; }
  .f-inhalt { padding: 12px 16px 0; gap: 10px; }
  .f-text { font-size: 13px; }
  .f-aktionen { position: sticky; bottom: 0; flex-direction: row; justify-content: space-between; align-items: center; background: #fff; padding: 8px 0 12px; border-top: 1px solid var(--huelle-rand); }
  .f-aktionen .f-nav { margin-top: 0; }
}

@media (max-width: 760px) {
  .druckdialog-rumpf { grid-template-columns: minmax(0, 1fr); }
  .band-rechts { width: 100%; }
}
@media print {
  .fuehrung, .f-rahmen, .druckdialog-kopf, .druckdialog-fuss, .druckdialog-seite, .nur-prototyp { display: none !important; }
  body.mit-fuehrung { padding: 0; }
  .druckdialog { box-shadow: none; }
  .druckdialog-rumpf { display: block; padding: 0; }
  .druckdialog-vorschau { border: 0; max-height: none; overflow: visible; }
  .druckdialog-vorschau .trenner { break-after: page; height: 0; }
}