/* Bildschirmgrößen: volle Breite am 16:9-Monitor, iPad (quer/hoch) und iPhone.
   Wird NACH marke.css bzw. dem Stil der Hauptseite geladen und gilt für beide (.inhalt = eigene Seiten, .tab-panel = Hauptseite). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.menue-knopf { display: none; }

/* ---- Breite: Inhalt nutzt die ganze Fläche neben der Seitenleiste */
.inhalt, .tab-panel { max-width: none !important; }

/* ---- Breite Bildschirme (16:9, ab ca. 1600 px): mehr Spalten statt leerer Ränder */
@media (min-width: 1600px) {
  .inhalt { padding: 24px 36px 48px; }
  .kpi-raster { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .schnell { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .dg-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster3 { grid-template-columns: repeat(4, 1fr); }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .scroll { max-height: 76vh; }
}
@media (min-width: 2200px) {
  body { font-size: 16px; }
  .wrap { grid-template-columns: 250px minmax(0, 1fr); }
}

/* ---- iPhone / Notch: Ränder der sicheren Fläche beachten (viewport-fit=cover) */
.wrap > header { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right));
                 padding-top: max(14px, env(safe-area-inset-top)); }
#markleiste { bottom: max(16px, env(safe-area-inset-bottom)); }

/* ---- Touch-Geräte (iPhone, iPad): Felder mit 16 px, sonst zoomt Safari beim Antippen; größere Tippflächen */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  button, .knopf, .wahl a { min-height: 40px; }
  .tab-nav a.tab-link, .tab-nav button { padding-top: 11px; padding-bottom: 11px; }
  table.liste td, table.stat td { padding-top: 8px; padding-bottom: 8px; }
  table.kasse input { min-width: 84px !important; max-width: 110px !important; padding: 6px 6px !important; }
  table.kasse input.kurz { min-width: 66px !important; max-width: 76px !important; }
  table.kasse input.txt { min-width: 150px !important; max-width: 220px !important; }
}

/* ---- iPad quer und kleine Laptops (901–1366 px): Seitenleiste schmaler, Inhalt bekommt mehr Platz */
@media (min-width: 901px) and (max-width: 1366px) {
  .wrap { grid-template-columns: 190px minmax(0, 1fr); }
  .tab-nav a.tab-link, .tab-nav button { font-size: 14px; padding-left: 14px; padding-right: 10px; }
  .nav-gruppe { padding-left: 18px; }
  .inhalt { padding: 18px 20px 36px; }
  .tab-panel { padding-right: 20px; }
}

/* ---- iPad hoch und iPhone (bis 900 px): Menü über den Knopf, Tabellen seitlich wischen */
@media (max-width: 900px) {
  .menue-knopf { display: block; grid-column: 1; margin: 0; border: none; border-radius: 0; background: #3A3C3B; color: #E8CC73;
                 text-align: left; padding: 12px 16px; font-weight: 700; width: 100%; min-width: 0; }
  .wrap:not(.menue-offen) > .menue-knopf ~ .tab-nav { display: none; }
  .tab-nav { grid-row: auto !important; min-height: 0 !important; position: static; }
  .wrap { grid-template-columns: minmax(0, 1fr); }
  .tab-nav { flex-direction: column; flex-wrap: nowrap; padding: 4px 0 10px; }
  .tab-nav a.tab-link, .tab-nav button { border-left: 4px solid transparent; }
  .inhalt > .card, .tab-panel > .card, .card .scroll, .kassewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scroll { max-height: none; }
  /* Tagesumsätze: Tag-Spalte bleibt beim seitlichen Wischen stehen */
  table.kasse td.tag, table.kasse th.tag { position: sticky; left: 0; z-index: 2; background: #fff; }
  table.kasse tr.so td.tag { background: #F3F1EC; } table.kasse tr.ft td.tag { background: #F6EFD9; }
  table.kasse th.tag { z-index: 3; background: var(--accent-hell); }
  table.kasse tr.summe td.tag { background: #EDEAE2; }
}

/* ---- iPhone (bis 600 px) */
@media (max-width: 600px) {
  body { font-size: 14.5px; }
  .wrap > header { padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); gap: 10px; }
  .wrap > header .logo { height: 40px; }
  .wrap > header { flex-wrap: wrap; }
  .wrap > header h1 { font-size: 13px; padding-left: 10px; letter-spacing: .14em; }
  .eyebrow { padding: 0 16px 8px; font-size: 12px; }
  .inhalt { padding: 14px 12px 32px; }
  .tab-panel { padding: 14px 12px !important; }
  .card { padding: 14px 14px; border-radius: 10px; }
  h2.seitentitel { font-size: 19px; }
  .kpi-raster, .schnell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .w { font-size: 19px; white-space: normal; }
  .raster2, .raster3, .liste-detail, .dg-raster { grid-template-columns: minmax(0, 1fr); }
  .zeile { gap: 8px; }
  .zeile > .knopf, .zeile > button { flex: 1 1 auto; text-align: center; }
  table.stat { font-size: 13px; }
  dialog { max-width: calc(100vw - 24px); }
}