/* =============================================================================
   mobile.css — Smartphone-Optimierungen (Phase 1: Fundament · 2: Navigation ·
                3: Bestellungen & Sträuße · 4: Tabellen · 5: Feinschliff ·
                6: Verbleibende Seiten)
   =============================================================================
   WICHTIG:
   - Diese Datei wird in index.html ohne media-Attribut eingebunden (lädt also
     immer), ist aber INTERN per @media gekapselt:
       • @media (max-width:768px) { … }  → der gesamte Mobile-Block weiter unten.
       • @media (min-width:769px)  { … }  → ganz am Ende; blendet nur die rein
         mobilen Elemente (Hamburger/Drawer) auf dem Desktop aus.
     Dadurch können Regeln hier die Desktopansicht NICHT verändern – und
     css/portal.css bleibt komplett frei von Mobile-Sonderfällen.
   - Umgekehrt gilt: Desktop-Styles stehen weiterhin in css/portal.css.
   - Faustregel:
       • Etwas nur am Handy ändern  → hier (mobile.css).
       • Etwas nur am Desktop ändern → portal.css.
       • Etwas, das überall gleich ist (z. B. Farben) → portal.css (:root).

   Aufbau (alles innerhalb @media (max-width:768px)):
     1. Grundlagen (Layout, Schrift, Touch)
     2. Topbar & Navigation
     3. Modals → Vollbild-Sheets
     4. Formulare & 2-Spalten-Raster → 1 Spalte
     5. Seiten/Komponenten (Firmen, Monatsübersicht …)
     6. Bestellungen & Sträuße (Phase 3)
     7. Tabellen mobil nutzbar (Phase 4)
     8. Feinschliff & Test: Touch/Scroll/Safe-Area (Phase 5)
     9. Verbleibende Seiten: Login, Einstellungen, Audit, DHL … (Phase 6)
    10. Firmen-Maske: Bestellungen, Modals, Sträuße, Adressbuch, Profil, Datenschutz (portal-company)
    11. Sehr schmale Phones (≤480px)
   Danach: DESKTOP-BLOCK (@media (min-width:768.02px)) nur zum Ausblenden der
   rein mobilen Navigationselemente.
   ============================================================================= */

/* ===========================================================================
   MOBILE-BLOCK — gilt ausschließlich für Smartphones/schmale Screens (≤768px)
   =========================================================================== */
@media (max-width:768px){

/* ------------------------------------------------------------------ 1. Grundlagen */

/* Mehr Inhaltsbreite auf kleinen Screens */
.main{padding:1rem}
.page-header{margin-bottom:.85rem}

/* Touch-Ziele großzügiger */
.btn{min-height:44px}
.btn-sm{min-height:36px}

/* iOS zoomt Formularfelder NICHT mehr automatisch, wenn die Schrift ≥16px ist */
.field-group input,
.field-group select,
.field-group textarea,
.date-dropdown-trigger{font-size:16px}

/* ------------------------------------------------------------------ 2. Topbar & Navigation */

.topbar{padding:0 1rem;height:52px}
.topbar-logo img{max-height:30px;max-width:46vw}
.topbar-right{gap:.6rem}
.user-badge{font-size:var(--text-xs);max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-label{display:none}

/* Auf dem Smartphone werden die Desktop-Reiter durch eine Hamburger-Leiste +
   Drawer ersetzt (gleiche Reiter, gleiche Funktion, bessere Übersicht). */
.nav-tabs{display:none}

/* Schlanke Leiste mit Menü-Button + aktuellem Seitennamen */
.mobile-nav-bar{
  display:flex;
  align-items:center;
  gap:.75rem;
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:8px 1rem;
  position:sticky;
  top:0;
  z-index:40;
}
.mobile-nav-toggle{
  border:1px solid var(--border);
  background:var(--white);
  color:var(--text);
  border-radius:8px;
  width:40px;
  height:40px;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mobile-nav-toggle:active{background:var(--cream)}
.mobile-nav-current{
  font-family:var(--font-serif);
  font-size:var(--text-lg);
  font-weight:400;
  line-height:var(--leading-tight);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Overlay + Drawer (von links einschiebend) */
.mobile-nav-overlay{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(44,36,32,.45);
  z-index:120;
}
.mobile-nav-drawer{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:min(82vw,320px);
  background:var(--white);
  box-shadow:2px 0 24px rgba(44,36,32,.25);
  display:flex;
  flex-direction:column;
  padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  animation:mobileDrawerIn .18s ease-out;
}
@keyframes mobileDrawerIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.mobile-nav-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 8px 12px;
  border-bottom:1px solid var(--border);
  margin-bottom:.5rem;
}
.mobile-nav-drawer-title{
  font-family:var(--font-serif);
  font-size:var(--text-lg);
  letter-spacing:.03em;
}
.mobile-nav-close{
  border:none;
  background:transparent;
  font-size:24px;
  line-height:1;
  color:var(--text-light);
  cursor:pointer;
  width:40px;
  height:40px;
  border-radius:8px;
}
.mobile-nav-close:active{background:var(--cream)}
.mobile-nav-item{
  display:block;
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  padding:14px 12px;
  border-radius:8px;
  cursor:pointer;
  min-height:48px;
}
.mobile-nav-item:active{background:var(--cream)}
.mobile-nav-item.active{
  background:var(--rose-light);
  color:var(--rose-dark);
  font-weight:var(--weight-semibold);
}

/* ------------------------------------------------------------------ 3. Modals → Vollbild-Sheets */

.modal-overlay{padding:0;align-items:stretch}
.modal{
  max-width:100%;
  width:100%;
  max-height:100%;
  min-height:100%;
  border-radius:0;
  padding:1.1rem;
}
/* Das bereits feste Body/Footer-Layout (Bestelldetail) auf Vollhöhe ziehen */
.modal-admin-order{max-height:100%;height:100%}
.modal.modal-day-popup{max-width:100%}
.modal-admin-order .modal-header{padding:1.1rem 1.1rem 0}
.modal-admin-order-body{padding:0 1.1rem 1rem}
.modal-admin-order-footer{padding:.75rem 1.1rem 1.1rem}

/* Aktions-Buttons in Modals: volle Breite, gut tippbar */
.modal-actions .btn{min-height:46px}

/* Lightbox (Sträuße) als Vollbild */
.catalog-lightbox-panel{max-width:100%;max-height:100%;min-height:100%;border-radius:0}

/* ------------------------------------------------------------------ 4. Formulare & Raster → 1 Spalte */

.form-row{grid-template-columns:1fr}
.detail-grid{grid-template-columns:1fr}
.bouquet-options{grid-template-columns:1fr 1fr}
.stat-grid{grid-template-columns:1fr}
.settings-grid{grid-template-columns:1fr}

/* ------------------------------------------------------------------ 5. Seiten / Komponenten */

/* Seitenkopf: Titel oben, Aktionen darunter volle Breite */
.page-header{flex-direction:column;align-items:stretch}
.page-header .btn{width:100%}

/* Monatsnavigation (Zurück / Monat / Weiter + Aktionen) */
.month-nav{gap:.5rem}
.month-nav .btn,
.month-nav button{flex:1 1 auto}
.month-label{min-width:0;flex:1 1 100%;order:-1}

/* Bestellungen: Kalender kompakter, Hover-Hints (Touch) ausblenden */
.cal-day{min-height:62px;padding:4px}
.day-hint{display:none}
.cal-nav{gap:.5rem;flex-wrap:wrap}

/* Sträuße: Karten einspaltig (Bilder groß & klar) */
.bouquet-admin-grid{grid-template-columns:1fr}
.bouquet-admin-img,
.bouquet-admin-media-preview,
.bouquet-admin-no-img{height:200px}

/* Firmen: Aktionen 2-spaltig, volle Kartenbreite */
.company-card{flex-direction:column;align-items:stretch}
.company-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}

/* Listenzeilen mit Aktionen (Bestellungen einer Firma) volle Breite */
.company-order-row-actions{width:100%}

/* Zusammenfassungs-Karten (Monatsübersicht/Rechnungen): Aktionen umbrechen */
.company-summary-item{flex-direction:column;align-items:stretch}

/* Info-/Filterleisten dürfen umbrechen */
.order-filter-bar{padding:.6rem}

/* ------------------------------------------------------------------ 6. Phase 3: Bestellungen & Sträuße */

/* Bestellungen – Toolbar (Ansicht/Filter/Monatsnavigation) gestapelt,
   Segmente über die volle Breite und gut tippbar */
.orders-toolbar{padding:10px;gap:10px}
.orders-toolbar-admin{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.toolbar-group{width:100%;justify-content:center}
.toolbar-slot-hidden{display:none}            /* versteckte Slots beanspruchen keinen Platz mehr */
.btn-segment{display:flex;width:100%}
.btn-segment .toolbar-btn,
.btn-segment-cal-nav>*{flex:1}
.toolbar-btn{padding:10px 8px;font-size:var(--text-sm)}
.toolbar-cal-nav{min-width:0}

/* Kalender-Monatswahl: Bottom-Sheet statt abgeschnittenem Dropdown */
.toolbar-month-backdrop{
  display:block;
  position:fixed;
  inset:0;
  z-index:125;
  background:rgba(44,36,32,.45);
}
.toolbar-month-panel{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:auto;
  transform:none;
  width:100%;
  min-width:0;
  max-width:none;
  border-radius:16px 16px 0 0;
  z-index:126;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 32px rgba(44,36,32,.18);
}
.toolbar-month-panel-row select{
  font-size:16px;
  padding:10px 12px;
}
.toolbar-month-panel-actions .toolbar-btn{min-height:48px}

/* Bestellliste – Datum + Infos oben, Badges/Aktionen volle Breite darunter */
.list-item{grid-template-columns:auto 1fr;gap:.55rem .85rem}
.list-item-aside{
  grid-column:1 / -1;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
}

/* Admin-Produktionstabelle scrollt bereits horizontal (.admin-prod-scroll);
   weitere Tabellen-Feinheiten siehe Abschnitt 7 (Phase 4). */

/* Sträuße – Lightbox (Vollbild kam in Phase 1) komfortabler */
.catalog-lightbox-panel{padding:1rem}
.catalog-lightbox-collage{grid-template-columns:1fr 1fr}
.catalog-lightbox-collage.count-1{grid-template-columns:1fr}

/* ------------------------------------------------------------------ 7. Phase 4: Tabellen mobil nutzbar */

/* Hinweis: Die meisten Tabellen sind im Markup bereits in Scroll-Container
   gewickelt und scrollen dadurch von Haus aus horizontal:
     • .admin-prod-table   → .admin-prod-scroll
     • .dhl-labels-table   → .dhl-labels-table-wrap
     • E-Mail-Logs/Audit   → umgebendes div mit overflow-x:auto
   Hier ergänzen wir nur, was noch fehlt bzw. die Lesbarkeit verbessert. */

/* Monatsübersicht-Tabelle hat KEINEN Wrapper im Markup → selbst scrollbar
   machen. display:block + overflow-x:auto behält die Spaltenausrichtung und
   erlaubt horizontales Wischen statt zerquetschter Spalten. */
.month-table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}

/* Sanftes Touch-Scrollen auch in den bestehenden Wrappern */
.admin-prod-scroll,
.dhl-labels-table-wrap{-webkit-overflow-scrolling:touch}

/* Zellen kompakter, damit pro Bildschirmbreite mehr sichtbar ist */
.admin-prod-table th,.admin-prod-table td,
.dhl-labels-table th,.dhl-labels-table td,
.month-table th,.month-table td{padding:8px 10px}
.audit-table thead th,.audit-table tbody td{padding:9px 10px}

/* ------------------------------------------------------------------ 8. Phase 5: Feinschliff & Test (Querschnitt 1–5) */

/* iPhone-Notch/Home-Indikator: Sticky-Modal-Fußleiste & Drawer nicht unter die
   Systemleiste rutschen lassen (viewport-fit=cover in index.html). */
.modal-admin-order-footer{padding-bottom:calc(1.1rem + env(safe-area-inset-bottom))}
.mobile-nav-drawer{padding-bottom:env(safe-area-inset-bottom)}

/* Kein 300ms-Tap-Delay / kein versehentlicher Doppeltipp-Zoom auf Bedienelementen */
.btn,.btn-sm,.toolbar-btn,.nav-tab,.mobile-nav-item,.mobile-nav-toggle,
.day-summary-count,.day-summary-line{touch-action:manipulation}

/* Modal-Body scrollt eigenständig; die Seite dahinter wird nicht mitgescrollt */
.modal-admin-order-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* Sehr breite Produktionstabelle: erste Spalte (Strauß-Name) bleibt beim
   horizontalen Wischen sichtbar. tbody/thead-Zellen haben bereits einen
   deckenden Hintergrund, daher keine Überlappung. */
.admin-prod-table tbody th{position:sticky;left:0;z-index:1}
.admin-prod-table thead th:first-child{position:sticky;left:0;z-index:2}

/* iOS soll die Schriftgröße (z. B. beim Drehen) nicht eigenmächtig vergrößern */
html{-webkit-text-size-adjust:100%}

/* ------------------------------------------------------------------ 9. Phase 6: Verbleibende Seiten & Randfälle */

/* Login – kompakter, mehr Platz für Formular */
.auth-wrap{align-items:flex-start;padding:1rem 0;min-height:100dvh}
.auth-card{padding:1.75rem 1.25rem;max-width:100%;border-radius:12px;margin:auto 0;box-shadow:0 4px 24px rgba(44,36,32,.08)}
.auth-logo{margin-bottom:1.5rem}
.auth-logo img{max-height:56px}

/* Firmen-Dashboard (KPI-Karten) einspaltig */
.company-dashboard{grid-template-columns:1fr}

/* Kontaktbanner unter dem Titel umbrechen */
.contact-banner{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}

/* Profil-/Einstellungs-/Rechnungs-Panels kompakter */
.profile-section,.email-panel{padding:1rem;margin-bottom:1rem}

/* Filterleisten (Bestellungen, Produktion …) volle Breite, iOS-freundlich */
.order-filter-bar{flex-direction:column;align-items:stretch;gap:.6rem}
.order-filter-bar select,
.order-filter-bar input[type=search]{
  width:100%;
  max-width:none;
  min-width:0;
  font-size:16px;
  padding:10px 12px;
}

/* Audit-Log: Filter gestapelt, Tabelle darf horizontal scrollen */
.audit-filter-bar{flex-direction:column;align-items:stretch}
.audit-filter-bar > div{width:100%;min-width:0!important;flex:none!important}
.audit-filter-bar select,
.audit-filter-bar input{
  width:100%;
  min-width:0!important;
  font-size:16px;
  box-sizing:border-box;
}
.audit-table-card{overflow:visible;padding:10px}

/* Einstellungen: Farbkarten einspaltig */
.theme-color-grid{grid-template-columns:1fr}

/* Monatsübersicht / Rechnungen: Aktionszeilen volle Breite */
.company-summary-item > div:last-child{width:100%}
.company-summary-item .btn{flex:1 1 calc(50% - 4px);min-height:40px}

/* DHL-Label: Bearbeiten/Aktionen gut tippbar */
.dhl-label-edit-actions .btn,
.dhl-label-actions .btn{flex:1 1 calc(50% - 4px);min-height:44px}

/* Produktion Pack-Karten: Kopfzeile stapelt sich */
.admin-prod-pack-head{flex-direction:column;align-items:stretch}
.admin-prod-pack-controls{width:100%}
.admin-prod-pack-controls .btn{flex:1}

/* Monatsmail-Vorschau: Felder untereinander */
.monthly-preview-bar{flex-direction:column;align-items:stretch}
.monthly-preview-bar .field-group,
.monthly-preview-bar .btn{width:100%}

/* Kleine Modals (Tagesliste, Vorschau …): Buttons untereinander */
.modal:not(.modal-admin-order) .modal-actions{flex-direction:column;margin-top:1rem}
.modal:not(.modal-admin-order) .modal-actions .btn{width:100%;flex:none}

/* Listen & Tages-Popup: größere Tap-Flächen */
.list-item{padding:14px 12px;min-height:56px}
.day-popup-item{min-height:52px;padding:12px 14px}

/* Adressbuch: Aktionsbuttons volle Kartenbreite */
.company-card > div:last-child{width:100%}
.company-card > div:last-child .btn{flex:1 1 calc(50% - 4px);min-height:40px}

/* ------------------------------------------------------------------ 10. Firmen-Maske (body.portal-company) */

/* Bestellungen – Filter: Zähler unter den Feldern statt rechts gequetscht */
body.portal-company .order-filter-bar .order-filter-bar-count{
  width:100%;
  margin-left:0;
  margin-top:.35rem;
  padding-top:.5rem;
  border-top:1px solid var(--border);
  font-size:var(--text-sm)!important;
}

/* Listengruppen („Morgen“, „Diese Woche“ …): Summe unter dem Titel */
body.portal-company .list-group-header{
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin:14px 0 6px;
  padding:10px 12px;
}
body.portal-company .list-group-header-stats{
  margin-left:0;
  white-space:normal;
  font-size:var(--text-sm);
}

/* Status-Badge: größer und in der Aktionszeile gut sichtbar */
body.portal-company .list-item-aside .order-status-badge{
  font-size:var(--text-xs);
  padding:6px 12px;
  min-height:32px;
}

/* Empfängername in der Liste etwas prominenter */
body.portal-company .list-primary{
  font-size:var(--text-lg);
}

/* KPI-Dashboard: „Nächste Lieferung“ hervorheben */
body.portal-company .company-dashboard-card:first-child{
  border-color:var(--rose);
  background:var(--rose-light);
}

/* KPI-Dashboard: auf Mobile standardmäßig eingeklappt */
body.portal-company .company-dashboard-details{
  margin-bottom:.75rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--white);
}
body.portal-company .company-dashboard-details summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  color:var(--text);
}
body.portal-company .company-dashboard-details summary::-webkit-details-marker{display:none}
body.portal-company .company-dashboard-summary-hint{
  display:block;
  font-weight:400;
  font-size:var(--text-xs);
  color:var(--text-light);
  margin-top:4px;
  line-height:var(--leading-normal);
}
body.portal-company .company-dashboard-details .company-dashboard{
  padding:0 12px 12px;
  border-top:1px solid var(--border);
  gap:.65rem;
}

/* Kalender-Hilfe: standardmäßig eingeklappt (<details>) */
body.portal-company .cal-help-details{
  padding:10px 12px;
  margin-top:.75rem;
}
body.portal-company .cal-help-details summary{
  cursor:pointer;
  list-style:none;
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  color:var(--text);
  line-height:var(--leading-tight);
}
body.portal-company .cal-help-details summary::-webkit-details-marker{display:none}
body.portal-company .cal-help-details .cal-help-body{
  margin-top:10px;
  font-size:var(--text-xs);
  color:var(--text-light);
}

/* Bestellungen: „+ Neue Bestellung“ fix unten (Daumenreichweite) */
body.portal-company .orders-page-company{
  padding-bottom:calc(4.75rem + env(safe-area-inset-bottom));
}
body.portal-company .company-orders-fab{
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  left:1rem;
  right:1rem;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:35;
  min-height:52px;
  font-size:var(--text-base);
  box-shadow:0 4px 20px rgba(44,36,32,.18);
  touch-action:manipulation;
}
body.portal-company .orders-page-company .company-orders-header-btn{display:none}

/* Datenschutz: besser lesbar auf schmalen Screens */
body.portal-company .privacy-page{
  padding:1rem;
  font-size:var(--text-sm);
  line-height:var(--leading-relaxed);
}
body.portal-company .privacy-page h2{
  font-size:var(--text-lg);
  line-height:var(--leading-tight);
  margin:0 0 .5rem;
}
body.portal-company .privacy-page h3{
  font-size:var(--text-md);
  margin-top:1.25rem;
  margin-bottom:.5rem;
}
body.portal-company .privacy-page p,
body.portal-company .privacy-page li{
  font-size:var(--text-sm);
  line-height:var(--leading-relaxed);
}
body.portal-company .privacy-page ul{
  padding-left:1.15rem;
}
body.portal-company .privacy-page hr{
  margin:1.25rem 0;
}

/* Bestell-Modals: Straußauswahl als große, volle Breite-Karten */
body.portal-company .order-form-bouquets{
  grid-template-columns:1fr;
  gap:.65rem;
}
body.portal-company .order-form-bouquets .bouquet-card{
  display:grid;
  grid-template-columns:72px 1fr auto;
  grid-template-rows:auto auto;
  gap:2px 12px;
  align-items:center;
  text-align:left;
  padding:12px 14px;
  min-height:76px;
}
body.portal-company .order-form-bouquets .bouquet-card img,
body.portal-company .order-form-bouquets .bouquet-card > div:first-child{
  grid-row:1 / span 2;
  width:72px!important;
  height:72px!important;
  margin:0!important;
  border-radius:8px!important;
  object-fit:cover;
}
body.portal-company .order-form-bouquets .bouquet-card h4{
  grid-column:2;
  margin:0;
  align-self:end;
  font-size:var(--text-sm);
}
body.portal-company .order-form-bouquets .bouquet-card .price{
  grid-column:2;
  align-self:start;
  font-size:var(--text-md);
}
body.portal-company .order-form-bouquets .bouquet-card:active{
  transform:scale(.99);
}

/* Bestell-Modal: Checkbox-Optionen (Extras/Anlass, Jährlich, Adressbuch, Versandart) */
body.portal-company .modal-admin-order .repeat-wrap{
  padding:14px;
  min-height:52px;
  align-items:center;
}
body.portal-company .modal-admin-order .repeat-wrap input[type=checkbox]{
  width:20px;
  height:20px;
  margin-top:0;
}
body.portal-company .modal-admin-order .repeat-wrap .repeat-label{
  font-size:var(--text-sm);
}
body.portal-company .modal-admin-order .repeat-wrap .repeat-label small{
  font-size:var(--text-xs);
  margin-top:4px;
  line-height:var(--leading-normal);
}
body.portal-company .shipping-option-list{display:flex;flex-direction:column;gap:.5rem}
body.portal-company .shipping-option-item{margin-top:0}

/* Adressbuch-Vorschläge größer tippbar */
body.portal-company .address-suggest-item{
  padding:12px 14px;
  min-height:48px;
}

/* Modal-Footer: Gesamtpreis immer sichtbar über den Buttons */
body.portal-company .order-modal-total{
  font-size:var(--text-sm);
  margin-bottom:.65rem;
  padding-bottom:.65rem;
  border-bottom:1px solid var(--border);
  line-height:var(--leading-normal);
}
body.portal-company .order-modal-total strong{
  font-size:var(--text-md);
  color:var(--rose-dark);
}

/* Sträuße-Katalog: Touch-Feedback statt Hover, größere Bilder & Preis */
body.portal-company .bouquet-catalog-grid .bouquet-admin-card-clickable{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
body.portal-company .bouquet-catalog-grid .bouquet-admin-card-clickable:hover{
  transform:none;
  box-shadow:none;
}
body.portal-company .bouquet-catalog-grid .bouquet-admin-card-clickable:active{
  transform:scale(.985);
  box-shadow:0 4px 18px rgba(44,36,32,.12);
}
body.portal-company .bouquet-catalog-grid .bouquet-admin-img,
body.portal-company .bouquet-catalog-grid .bouquet-admin-media-preview{
  height:220px;
}
body.portal-company .bouquet-catalog-grid .bouquet-admin-body{
  padding:12px 14px 14px;
}
body.portal-company .bouquet-catalog-grid .bouquet-admin-body .price{
  font-size:var(--text-xl);
  margin-top:.2rem;
}
body.portal-company .bouquet-catalog-grid .bouquet-gallery-count{
  font-size:var(--text-xs);
  padding:4px 10px;
}
body.portal-company .bouquet-catalog-heading{
  font-size:var(--text-lg);
  margin-top:1.5rem;
}

/* Adressbuch */
body.portal-company .address-book-empty{
  text-align:center;
  padding:2rem 1.25rem;
  background:var(--white);
  border:1px dashed var(--border);
  border-radius:12px;
}
body.portal-company .address-book-empty-hint{
  font-size:var(--text-sm);
  color:var(--text-light);
  margin:0 0 1.25rem;
  line-height:var(--leading-relaxed);
}
body.portal-company .address-book-empty .btn{
  min-height:48px;
  width:100%;
  max-width:280px;
}
body.portal-company .address-book-card .company-card-info h4{
  font-size:var(--text-md);
}
body.portal-company .address-book-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  width:100%;
}
body.portal-company .address-book-card-actions .btn{
  min-height:44px;
  flex:1 1 calc(50% - 4px);
}

/* Unternehmensdaten */
body.portal-company .profile-page .profile-section h3{
  font-size:var(--text-md);
}
body.portal-company .profile-page .checkbox-wrap{
  padding:14px;
  min-height:52px;
  align-items:center;
  margin-top:1rem;
}
body.portal-company .profile-page .checkbox-wrap input[type=checkbox]{
  width:20px;
  height:20px;
  margin-top:0;
  flex-shrink:0;
}
body.portal-company .profile-page .checkbox-label{
  font-size:var(--text-sm);
  line-height:var(--leading-normal);
}
body.portal-company .profile-page .btn-save{
  min-height:48px;
  font-size:var(--text-base);
}

/* ------------------------------------------------------------------ 11. Sehr schmale Phones (≤480px) */
@media (max-width:480px){
  .main{padding:.75rem}

  .auth-card{padding:1.5rem 1rem}

  /* Strauß-Auswahl im Bestellformular auf 1 Spalte */
  .bouquet-options{grid-template-columns:1fr}

  /* Kalender noch kompakter, damit der Monat komplett sichtbar bleibt */
  .cal-day{min-height:52px}
  .cal-dow{padding:6px 2px;font-size:10px}
  .holiday-label{display:none}                /* spart Platz auf sehr schmalen Phones */

  /* Sträuße-Aktionen (3 Buttons) besser tippbar */
  .bouquet-admin-actions{grid-template-columns:1fr 1fr}

  /* Stat-Karten als kompakte 1er-Liste */
  .stat-grid{grid-template-columns:1fr}

  /* Lightbox-Collage auf sehr schmalen Phones einspaltig groß */
  .catalog-lightbox-collage{grid-template-columns:1fr}

  /* Rechnungen/Monatsübersicht: Aktionsbuttons einspaltig */
  .company-summary-item .btn{flex:1 1 100%}
  .dhl-label-edit-actions .btn,
  .dhl-label-actions .btn{flex:1 1 100%}

  /* Adressbuch: Buttons untereinander */
  body.portal-company .address-book-card-actions .btn{flex:1 1 100%}

  /* Sträuße-Katalog: etwas kompaktere Bildhöhe auf sehr schmalen Phones */
  body.portal-company .bouquet-catalog-grid .bouquet-admin-img,
  body.portal-company .bouquet-catalog-grid .bouquet-admin-media-preview{height:200px}
}

} /* === Ende MOBILE-BLOCK (≤768px) === */

/* ===========================================================================
   DESKTOP-BLOCK — gilt ab >768px (lückenlos an den Mobile-Block anschließend).
   Hier NUR die rein mobilen Elemente ausblenden, damit der in js/02-app.js
   immer mitgerenderte Hamburger/Drawer auf dem Desktop unsichtbar bleibt.
   (Bewusst hier statt in portal.css, damit portal.css frei von Mobile-Logik
    bleibt. Diese Regel betrifft AUSSCHLIESSLICH neue Mobile-Elemente und
    verändert KEIN bestehendes Desktop-Element.)
   =========================================================================== */
@media (min-width:768.02px){
  .mobile-nav-bar,.mobile-nav-overlay,.company-orders-fab{display:none}
  /* Firmen-KPI: auf Desktop immer offen, ohne Summary-Leiste */
  body.portal-company .company-dashboard-details{
    margin-bottom:0;
    border:none;
    border-radius:0;
    background:transparent;
  }
  body.portal-company .company-dashboard-details summary{display:none}
  body.portal-company .company-dashboard-details .company-dashboard{
    padding:0;
    border-top:none;
  }
}