/* PrintDeal — Seitengerüst (Chrome): Kopfzeile, Hauptnavigation, Inhaltsbereich,
   Seitenübergang, Testmodus-Banner und die zugehörigen responsiven Regeln.
   Reine Struktur/Rahmen — wiederverwendbare Bausteine liegen in komponenten.css,
   seitenspezifisches Layout in seiten.css. */

/* ---------- Kopfzeile (PrintDealKopfzeile.kt: Wortmarke + Logo zentriert) ---------- */

.kopfzeile {
  position: sticky;
  top: 0;
  /* Über der Hauptnavigation (40): Ab 640px klebt die Reiterleiste direkt
     unter der Kopfzeile und stünde bei gleichem Wert wegen der späteren
     DOM-Position davor — das Benutzermenü fährt aber genau dorthin aus.
     Modale Overlays (60), Snackbar (70) und Ladeoverlay (80) bleiben darüber. */
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
}

/* Eine Zeile: Wortmarke links, Navigation direkt daneben, Aktionen rechts.
   Früher zwei Zeilen (Kopfzeile plus eigene Reiterleiste) — das war die
   nach oben verschobene App-Navigation. */
.kopfzeile-inhalt {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--abstand-s) var(--abstand-l);
  display: flex;
  align-items: center;
  gap: var(--abstand-l);
}

.marke {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  background: none;
  border: 0;
  padding: var(--abstand-xs);
  cursor: pointer;
}

.marke-logo { width: 30px; height: 26px; }

.marke-wort { font-size: var(--title-medium); font-weight: 500; }
.marke-wort .print { color: var(--primary); }
.marke-wort .deal { color: var(--tertiary); }

.kopf-aktionen {
  /* Schiebt sich ans rechte Ende, egal wie breit die Navigation ausfällt. */
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
}

.symbol-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-pille);
  background: none;
  cursor: pointer;
  color: var(--on-surface-variant);
}
.symbol-knopf:hover { background: var(--surface-container-high); }
.symbol-knopf svg { width: 22px; height: 22px; }

/* ---------- Benutzermenü (Ausklappmenü der Kopfzeile) ----------
   Der Container ist der Bezugspunkt: das Menü fährt darunter aus und ist
   rechtsbündig am Auslöser ausgerichtet. */

.benutzermenue { position: relative; }

.menue {
  position: absolute;
  top: calc(100% + var(--abstand-xs));
  right: 0;
  /* Nur gegenüber den Geschwistern in der Kopfzeile relevant — die Kopfzeile
     selbst regelt den Stapel gegenüber dem Rest der Seite. */
  z-index: 1;
  min-width: 208px;
  padding: var(--abstand-xs);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-m);
  background: var(--surface-container-lowest);
  box-shadow: var(--schatten-schwebend);

  /* Geschlossen: unsichtbar UND nicht fokussierbar (visibility statt display,
     damit das Auf- und Zufahren animierbar bleibt). Die Verzögerung auf
     visibility lässt das Ausblenden zu Ende laufen, bevor es verschwindet. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 160ms ease-out,
    transform 160ms ease-out,
    visibility 0s linear 160ms;
}

.menue--offen {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 160ms ease-out,
    transform 160ms ease-out,
    visibility 0s;
}

/* Ohne Bewegung: sofort da bzw. weg, kein Nachlaufen der Sichtbarkeit. */
@media (prefers-reduced-motion: reduce) {
  .menue,
  .menue--offen { transition: none; }
}

.menue-eintrag {
  display: block;
  width: 100%;
  padding: var(--abstand-m) var(--abstand-l);
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--on-surface);
  font-size: var(--body-medium);
  text-decoration: none;
}

.menue-eintrag:hover { background: var(--surface-container-high); }

/* ---------- Druckerauswahl ----------
   Gleiches Ausklapp-Muster wie das Benutzermenü, nur mit Suchfeld und
   gruppierter Liste. Der Auslöser trägt den Namen des Druckers, nicht nur
   ein Symbol — die Wahl soll auf einen Blick ablesbar sein. */

.druckerauswahl { position: relative; }

.drucker-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-s);
  max-width: 220px;
  padding: var(--abstand-s) var(--abstand-m);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-pille);
  background: none;
  cursor: pointer;
  color: var(--on-surface-variant);
  font-size: var(--label-large);
  font-weight: 500;
}
.drucker-knopf:hover { background: var(--surface-container-high); }
.drucker-symbol { display: inline-flex; flex-shrink: 0; }
.drucker-symbol svg { width: 20px; height: 20px; }

/* Langer Modellname bricht nicht um, sondern wird gekürzt. */
.drucker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mit Auswahl deutlicher hervorgehoben — zusätzlich zur Farbe steht der
   Name im Knopf, die Unterscheidung hängt also nie allein am Farbton. */
.druckerauswahl--gewaehlt .drucker-knopf {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.menue--drucker {
  min-width: 288px;
  padding: 0;
  overflow: hidden;
}

.drucker-suchzeile {
  padding: var(--abstand-s);
  border-bottom: 1px solid var(--outline-variant);
}

.drucker-suchfeld {
  width: 100%;
  padding: var(--abstand-s) var(--abstand-m);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-s);
  background: var(--surface-container-low);
  color: var(--on-surface);
  font-size: var(--body-medium);
}

.drucker-liste {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: var(--abstand-xs);
}

.drucker-gruppe {
  padding: var(--abstand-s) var(--abstand-m) var(--abstand-xs);
  font-size: var(--label-medium);
  font-weight: 500;
  color: var(--on-surface-variant);
}

.drucker-eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
  width: 100%;
  padding: var(--abstand-s) var(--abstand-m);
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--on-surface);
  font-size: var(--body-medium);
}
.drucker-eintrag:hover { background: var(--surface-container-high); }
.drucker-eintrag[aria-checked="true"] {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.drucker-haken { width: 18px; height: 18px; flex-shrink: 0; }

.drucker-kein-treffer {
  padding: var(--abstand-m);
  font-size: var(--body-medium);
  color: var(--on-surface-variant);
}

/* Unterhalb der Tablet-Breite als Overlay statt als Dropdown: auf einem
   Handy ist für ein 288px-Menü neben dem Knopf kein Platz. */
@media (max-width: 639px) {
  .drucker-knopf { max-width: 132px; }
  .menue--drucker {
    position: fixed;
    top: 56px;
    left: var(--abstand-s);
    right: var(--abstand-s);
    min-width: 0;
    transform-origin: top center;
  }
  .drucker-liste { max-height: 60vh; }
}

/* ---------- Hauptnavigation ----------
   Die Navigation steht im Markup INNERHALB der Kopfzeile. Ab Tablet-Breite
   ist sie ein normales Element dieser Zeile; unter 640px löst sie sich per
   position:fixed daraus und wird wieder zur unteren Leiste (app-artig, dort
   ausdrücklich erwünscht). */

.hauptnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  background: var(--surface-container);
  border-top: 1px solid var(--outline-variant);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-ziel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--abstand-s) var(--abstand-xs) var(--abstand-m);
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--on-surface-variant);
  font-size: var(--label-medium);
  font-weight: 500;
  text-decoration: none;
}

.nav-ziel svg { width: 24px; height: 24px; }

.nav-ziel .nav-symbol {
  display: inline-flex;
  padding: 2px 14px;
  border-radius: var(--radius-pille);
}

.nav-ziel[aria-current="page"] { color: var(--on-surface); }
.nav-ziel[aria-current="page"] .nav-symbol {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

/* ---------- Inhalt ---------- */

main {
  /* Deutlich mehr Fläche auf großen Bildschirmen; die Liste bekommt den
     gesamten Platz rechts der Filterleiste. */
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--abstand-l);
}

/* ---------- Fußbereich ---------- */

/* Die Freihaltefläche für die fixierte untere Navigationsleiste und die
   schwebende Vergleichsleiste sitzt jetzt hier statt an <main>. Beide liegen
   über dem Dokumentende — läge der Abstand weiter an <main>, klaffte eine
   Lücke zwischen Inhalt und Fußbereich, und der Fußbereich verschwände
   trotzdem unter der Leiste. */
.fusszeile {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--abstand-l);
  padding-bottom: 132px;
  border-top: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
}

.fusszeile-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m) var(--abstand-l);
}

.fusszeile-links a {
  font-size: var(--body-medium);
  /* Unterstrichen, nicht nur eingefärbt: Im Fußbereich fehlt der Kontext,
     der einen Link sonst als solchen erkennbar macht. */
  text-decoration: underline;
  /* Trefferfläche für den Daumen, ohne die Zeile auseinanderzuziehen. */
  padding: var(--abstand-xs) 0;
}

.fusszeile-hinweis {
  margin-top: var(--abstand-m);
  font-size: var(--body-small);
  max-width: 70ch;
}

/* Weicher Seitenübergang beim Routenwechsel (js/router.js setzt die Klasse). */
.seite { animation: seite-einblenden 220ms ease-out; }

@keyframes seite-einblenden {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Testmodus- und Fehler-Banner (unter der Kopfzeile) ---------- */

/* Ruhige, schmale Hinweiszeile statt farbigem Vollbreiten-Balken: sichtbar,
   aber nicht beherrschend. Sobald echte Daten geladen sind, blendet js/app.js
   sie ganz aus. */
.testmodus-banner {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  /* Auf die Inhaltsbreite ausgerichtet, damit die Zeile bündig zum Text
     darunter beginnt. */
  width: min(100%, 1600px);
  margin: var(--abstand-s) auto 0;
  padding: 0 var(--abstand-l);
  font-size: var(--body-small);
  color: var(--on-surface-variant);
}
/* Kleines Symbol fester Größe, das nicht mitschrumpft. */
.testmodus-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--warnung-erhoeht);
}
.testmodus-banner strong { font-weight: 500; color: var(--on-surface); }
.testmodus-banner[hidden] { display: none; }

/* ---------- Responsiv ----------
   Handy: einspaltig, app-artig (untere Leiste).
   Tablet (ab 640px): zweispaltige Liste, Navigation oben.
   Desktop (ab 1024px): mehrspaltig plus dauerhafte Filterleiste. */

@media (min-width: 640px) {
  /* Teil der Kopfzeile statt eigener Leiste: keine eigene Fläche, kein
     eigener Rand, keine zweite Zeile. */
  .hauptnav {
    position: static;
    z-index: auto;
    background: none;
    border-top: 0;
    padding-bottom: 0;
    flex: 0 1 auto;
    gap: var(--abstand-xs);
  }
  .nav-ziel {
    flex: 0 0 auto;
    flex-direction: row;
    gap: var(--abstand-s);
    padding: var(--abstand-s) var(--abstand-m);
    border-radius: var(--radius-pille);
    font-size: var(--label-large);
    white-space: nowrap;
  }
  .nav-ziel svg { width: 20px; height: 20px; }
  .nav-ziel .nav-symbol { padding: 0; background: none !important; }
  .nav-ziel:hover { background: var(--surface-container-high); }
  /* Aktiv über Fläche UND Textfarbe — nicht allein über den Farbton. */
  .nav-ziel[aria-current="page"] {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
  }
  /* Ohne untere Leiste genügt Platz für die schwebende Vergleichsleiste. */
  .fusszeile { padding-bottom: 96px; }
}

/* Ab hier ist in der Kopfzeile Platz für die Beschriftungen; darunter
   zeigt die Navigation nur die Symbole, damit die Zeile nicht bricht. */
@media (min-width: 640px) and (max-width: 899px) {
  .nav-ziel span:not(.nav-symbol) { display: none; }
  .nav-ziel { padding: var(--abstand-s); }
}