/* ============================================================
   WERKBANK App — PRO Mobile Polish
   Loaded AFTER werkbank.css. Native-feeling iOS/Android.
   ============================================================ */

/* ── Foundation: iOS/Android-Grundfixes ────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
}

body {
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lange Texte: overflow-wrap überall, hyphens NUR im Fließtext */
* {
  overflow-wrap: break-word;
}

p, li, dd, dt, blockquote, .text-prose, .kommentar__text, .msg-bubble {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphens-limit-chars: 8 4 4;
}

/* Brand, Buttons, Nav, Section-Titel, Labels NIE getrennt — bleiben kompakt.
   iOS Safari unterstützt hyphens-limit-chars nicht zuverlässig, daher für
   kurze Titel-Elemente komplett aus. */
.btn, button, .pill,
.topbar, .topbar__title,
.sidebar, .brand, .brand__name,
.stat-card__label,
.bd-section__title, .akte-section__title,
.akte-stat__label, .akte-stat__num,
.tm-card__name, .akte-list-row__title,
.akte-list-row__sub, .akte-list-row__badge,
label, .form-label,
.modal__title, .wb-modal__title,
.akte-nav a, .quick-actions a {
  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
}

/* Card-Titel + Headlines: erlaubt Silbentrennung wenn nötig (statt mitten im Wort) */
h1, h2, h3, h4, h5, h6,
.page-header__title, .page-header__subtitle,
.baustelle-card__title,
.aufgabe-card__title, .problem-card__title,
.bericht-card__title, .welcome-step__title,
.welcome-hero__title, .signup-form__title,
.signup-side__headline {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphens-limit-chars: 10 5 4; /* lange Wörter trennen sich an Silbengrenze */
  word-break: normal;
}

/* Mobile: Create-Row Buttons kompakter — kein Text-Overflow */
@media (max-width: 600px) {
  .create-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .create-row .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 8px;
    font-size: 0.84rem;
  }
  /* Diktier-Button bleibt full-width */
  .create-row .btn--diktat {
    flex: 1 1 100%;
    font-size: 0.92rem;
    padding: 12px 16px;
  }
  /* "Leistungsfeststellung" ist zu lang — abkürzen via CSS */
  .btn--create--leistungsfeststellung {
    font-size: 0.78rem;
    letter-spacing: -0.01em;
  }
}

code, pre, .url-text, [class*="email"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Bilder/Videos nie über Container hinaus */
img, video, svg, iframe, canvas {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
}

/* ── INPUTS: iOS Zoom-Prevention (16px Minimum) ────── */
input,
textarea,
select {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  font-size: inherit;
}

/* App-spezifische Klassen — zwingend 16px+ auf Mobile */
@media (max-width: 600px) {
  .form-input,
  .form-select,
  .form-textarea,
  .wb-modal__input,
  .wb-modal__select,
  .wb-modal__textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
    line-height: 1.4;
    min-height: 46px;       /* angenehm groß zum Tippen */
    padding: 12px 14px;
    border-radius: 10px;
  }

  textarea,
  .form-textarea,
  .wb-modal__textarea {
    min-height: 100px;
    padding: 12px 14px;
  }

  /* Labels über Inputs, nie daneben */
  .form-group,
  .wb-modal__field {
    display: block;
  }

  .form-label,
  .wb-modal__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.86rem;
  }
}

/* ── Touch-Targets: alle Buttons mindestens 44×44 px ── */
@media (pointer: coarse) {
  button,
  .btn,
  .pill,
  [role="button"],
  a.card__link,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Tap-Feedback statt Hover */
  .btn:active,
  .pill:active,
  .card:active {
    transform: scale(0.98);
    transition: transform 0.08s ease;
  }
}

/* ── App-Layout: 100dvh, Safe-Area-Insets ── */
.app-layout {
  min-height: 100vh;
  min-height: 100dvh;
}

@media (max-width: 768px) {
  .main-content {
    padding-top: max(var(--space-3), env(safe-area-inset-top));
    padding-bottom: max(96px, calc(72px + env(safe-area-inset-bottom)));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .page-header {
    padding-top: 12px;
    padding-bottom: 12px;
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }

  .page-header__title {
    font-size: 1.5rem !important;
    line-height: 1.15;
    margin: 0;
  }

  .page-header__subtitle {
    font-size: 0.88rem;
  }

  .page-body {
    padding: 0;
  }
}

/* ── Topbar Mobile: Sticky + Safe-Area-Top ── */
@media (max-width: 768px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-top: env(safe-area-inset-top, 0);
    background: var(--color-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
  }
}

/* ── Bottom-Nav: Safe-Area-Bottom Respektieren ── */
.bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

/* Floating-Bottom-Nav darf kein content verdecken */
@media (max-width: 768px) {
  body.has-bottom-nav .main-content,
  .app-layout .main-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── Cards: einheitliches Mobile-Padding ── */
@media (max-width: 600px) {
  .card,
  .baustelle-card,
  .aufgabe-card,
  .problem-card,
  .bericht-card,
  .bd-section,
  .stat-card,
  .welcome-step,
  .pricing-card,
  .calc-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  /* Card-Listen — knappere Gaps */
  .card-grid,
  .cards-list,
  .baustellen-list,
  .berichte-list {
    gap: 12px !important;
  }
}

/* ── Modale auf Mobile: Bottom-Sheet-Stil ── */
@media (max-width: 600px) {
  .wb-modal-bd {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .wb-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 20px 20px 0 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    animation: slideUp 0.25s ease-out;
  }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .wb-modal__head {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 2;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--color-border);
  }

  .wb-modal__title {
    font-size: 1.15rem;
  }

  /* Drag-Indikator oben am Sheet */
  .wb-modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    margin: 8px auto 0;
  }

  .wb-modal__body {
    padding: 16px 20px;
    max-height: calc(92dvh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wb-modal__foot {
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
    z-index: 2;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column-reverse; /* Primary-Button oben */
    gap: 8px;
  }

  .wb-modal__btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: 1rem;
  }
}

/* ── Legacy-Modals (modal-backdrop / modal) auch als Bottom-Sheet ── */
@media (max-width: 600px) {
  .modal-backdrop.is-open .modal,
  .modal-backdrop .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    margin: auto 0 0 !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
}

/* Diktat-Modal (KI) auch Bottom-Sheet */
@media (max-width: 600px) {
  .diktat-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .diktat-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 18px max(20px, env(safe-area-inset-bottom)) !important;
  }

  .diktat-typ {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .diktat-typ button {
    padding: 8px 6px;
    font-size: 0.84rem;
  }

  .diktat-mic__btn {
    width: 96px;
    height: 96px;
  }

  .diktat-actions {
    flex-direction: column;
    gap: 8px;
  }

  .diktat-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* ── Filter-Pills: horizontal scrollbar auf Mobile ── */
@media (max-width: 600px) {
  .filter-pills,
  .pill-row,
  .errlog-filter {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 4px 16px 12px;
    gap: 8px;
    /* v341: sonst wächst die Leiste auf Inhaltsbreite und lässt sich nicht wischen */
    min-width: 0;
    max-width: calc(100% + 32px);
    touch-action: pan-x pan-y;
  }

  .filter-pills::-webkit-scrollbar,
  .pill-row::-webkit-scrollbar,
  .errlog-filter::-webkit-scrollbar {
    display: none;
  }

  .pill,
  .filter-pills button,
  .errlog-filter button {
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 36px;
    padding: 8px 14px !important;
    font-size: 0.9rem;
  }
}

/* ── Create-Row: vertikal stapeln auf engen Geräten ── */
@media (max-width: 600px) {
  .create-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .create-row .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 10px 12px;
    font-size: 0.86rem;
    min-height: 44px;
  }

  /* Diktat-Button immer Full-Width */
  .create-row .btn--diktat {
    flex: 1 1 100%;
    min-height: 50px;
  }
}

/* ── Tabellen: horizontal scrollbar ── */
@media (max-width: 600px) {
  .table-wrap,
  .errlog-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px 8px;
  }

  table {
    font-size: 0.86rem;
  }

  .errlog-table {
    font-size: 0.82rem;
  }

  .errlog-table th,
  .errlog-table td {
    padding: 8px 6px !important;
  }
}

/* ── Listen-Items: bequem tappbar ── */
@media (max-width: 600px) {
  .list-item,
  .baustelle-card,
  .aufgabe-card,
  .problem-card,
  .bericht-card {
    min-height: 56px;
  }

  .list-item__title,
  .baustelle-card__title {
    font-size: 1rem;
    line-height: 1.3;
  }
}

/* ── Login/Signup auf Mobile ── */
@media (max-width: 720px) {
  .signup-wrap {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100dvh;
    box-shadow: none !important;
  }

  .signup-side {
    padding: 32px 24px !important;
    min-height: auto;
  }

  .signup-side__perks,
  .signup-side__quote {
    display: none !important;
  }

  .signup-form {
    padding: 32px 24px max(32px, env(safe-area-inset-bottom)) !important;
  }

  .signup-form__title {
    font-size: 1.5rem !important;
  }
}

/* ── Willkommen-Page: kompakter auf Mobile ── */
@media (max-width: 600px) {
  .welcome-hero {
    padding: 28px 18px 24px !important;
  }

  .welcome-hero__title {
    font-size: 1.6rem !important;
  }

  .welcome-step {
    grid-template-columns: 48px 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .welcome-step__num {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.1rem !important;
  }

  .welcome-step__action {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 8px;
    min-height: 44px;
  }

  .welcome-tip__list {
    grid-template-columns: 1fr !important;
  }

  .welcome-footer {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .welcome-footer__actions {
    flex-direction: column;
    width: 100%;
  }

  .welcome-footer__actions .welcome-step__action,
  .welcome-footer__actions .btn-link {
    width: 100%;
    justify-content: center;
  }
}

/* ── Status-Page Mobile ── */
@media (max-width: 600px) {
  .service {
    grid-template-columns: 16px 1fr auto !important;
    gap: 12px !important;
    padding: 14px 18px !important;
  }

  .service__latency {
    display: none !important;
  }

  .service__name {
    font-size: 0.95rem !important;
  }

  .service__desc {
    font-size: 0.78rem !important;
    line-height: 1.4;
  }

  .overall {
    padding: 24px 20px !important;
  }

  .overall__icon {
    width: 64px !important;
    height: 64px !important;
    font-size: 2rem !important;
  }
}

/* ── Error-Log Mobile ── */
@media (max-width: 600px) {
  .errlog-detail {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 18px max(20px, env(safe-area-inset-bottom)) !important;
    border-radius: 20px 20px 0 0 !important;
    min-height: 70dvh;
  }

  .errlog-detail-bd {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .errlog-detail__row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* ── Messenger Mobile (Bubble-Polish) ── */
@media (max-width: 768px) {
  .msg-wrap {
    height: calc(100dvh - 60px - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 0;
    margin: 0;
  }

  .msg-channels {
    width: 100% !important;
    max-width: 100% !important;
  }

  .msg-bubble {
    max-width: 86%;
    font-size: 0.94rem;
  }

  .msg-input-row {
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }

  .msg-input {
    font-size: 16px !important;
    min-height: 44px;
  }
}

/* ── Plan-Viewer (PDF/Bild): pinch-zoom erlauben ── */
.plan-viewer,
.plan-canvas,
.foto-lightbox {
  touch-action: pinch-zoom;
}

/* ── Toast: Über bottom-nav + safe-area ── */
@media (max-width: 768px) {
  #toast-container,
  #toast {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    left: 16px !important;
    right: 16px !important;
    max-width: 100% !important;
  }
}

/* ── Stempel-Page: großer Button, Mobile-first ── */
@media (max-width: 600px) {
  .stempel-btn,
  .clock-in-btn {
    min-height: 80px;
    font-size: 1.2rem;
  }
}

/* ── Sidebar auf Mobile sicher versteckt ── */
@media (max-width: 768px) {
  .sidebar {
    display: none !important;
  }
}

/* ── Anchor-Scroll: berücksichtigt sticky topbar ── */
[id]:not(html):not(body) {
  scroll-margin-top: 80px;
}

/* ── A11y: Focus für Tastatur ── */
*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ── Reduced-Motion respektieren ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Caret nur in Inputs sichtbar ── */
*:not(input):not(textarea):not([contenteditable="true"]) {
  caret-color: transparent;
}

/* ── PWA: Standalone-Mode bekommt korrektes Safe-Area-Top ── */
@media all and (display-mode: standalone) {
  .topbar {
    padding-top: max(env(safe-area-inset-top), 12px);
  }
}

/* ── Print: nur Inhalt drucken ── */
@media print {
  .sidebar,
  .topbar,
  .bottom-nav,
  .btn,
  .toast,
  #toast-container {
    display: none !important;
  }

  .main-content {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   Sprint 2 — Mobile-Polish Round
   ════════════════════════════════════════════════════════════ */

/* ── iOS-Zoom-Prevention Safety-Net ─────────────────────── */
/* Auf Touch-Geräten Input/Textarea/Select MIN 16px font-size,
   sonst zoomt iOS Safari beim Focus aggressiv ins Input rein. */
@media (max-width: 768px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: max(16px, 1rem) !important;
  }
}

/* ── Tap-Feedback ohne Hover-Stickiness ─────────────────── */
/* Auf Touch-Devices: kein Hover-Style behält haften.
   Stattdessen :active als primäres Klick-Feedback. */
@media (hover: none), (pointer: coarse) {
  /* Hover-Sticky aus — Touch zeigt keinen klebenden Background mehr */
  /* v385: a/button/.btn NICHT mehr hier – „inherit" übernahm Hintergrund und
     Rahmenfarbe vom Elternelement (dunkler Knopf wurde weiß, Rahmen an einer
     Seite unsichtbar). Knöpfe werden unten gezielt auf ihren Grundzustand gesetzt. */
  .item-row:hover, .kpi-card:hover,
  .quick-action:hover, .bo-quick:hover,
  .nav-item:hover, .nav-section__header:hover,
  .bn-sheet .nav-item:hover, .bn-sheet a:hover,
  .sidebar__org-switcher-item:hover, .topbar__msg-btn:hover,
  .topbar__search-btn:hover, .sidebar__search-trigger:hover,
  .pd-status-chip:hover {
    background: inherit !important;
    border-color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
    color: inherit !important;
    filter: none !important;
  }
  /* Knöpfe: beim Antippen kein klebender Hover-Zustand, sondern Grundzustand */
  .btn--primary:hover:not(:disabled) { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important; }
  .btn--secondary:hover:not(:disabled) { background: var(--color-surface) !important; border-color: var(--color-border-strong) !important; color: var(--color-text) !important; }
  .btn--ghost:hover:not(:disabled) { background: transparent !important; color: var(--color-text-muted) !important; }
  .btn--danger:hover:not(:disabled) { background: var(--color-danger) !important; border-color: var(--color-danger) !important; color: #fff !important; }
  .btn:hover { transform: none !important; box-shadow: none !important; filter: none !important; }
  /* Aktive Nav-States bleiben aber sichtbar */
  .nav-item.is-active,
  .nav-item--active,
  .bottom-nav__item--active {
    background: var(--color-accent-light, rgba(15,42,68,.10)) !important;
    color: var(--color-accent-text, #0F2A44) !important;
  }
  /* Active-Feedback: sanftes Tap-Down */
  a:active, button:active, .btn:active,
  .item-row:active, .kpi-card:active,
  .quick-action:active, .bo-quick:active,
  .nav-item:active, .bn-sheet .nav-item:active {
    transform: scale(0.985);
    transition: transform .08s ease;
  }
}

/* ── Tap-Highlight + Callout disable ────────────────────── */
* {
  -webkit-tap-highlight-color: rgba(15,42,68,0.10);
  -webkit-touch-callout: none;
}
/* Aber: Text-Selection bleibt erlaubt in Inhaltsbereichen */
.msg-bubble__text, .item-row__title, .item-row__sub,
.page-header__title, p, td, li, .text-selectable {
  -webkit-touch-callout: default;
  user-select: text;
}

/* ── Pin-Buttons + andere Mini-Icons: 40px Tap-Area ─────── */
@media (pointer: coarse) {
  .nav-item__fav,
  .topbar__close,
  .modal__close,
  .item-row__chev,
  .quick-action__close,
  .filter-chip__close {
    position: relative;
  }
  .nav-item__fav::before,
  .topbar__close::before,
  .modal__close::before {
    content: '';
    position: absolute;
    inset: -8px;   /* 8px Außen-Polster → 24+16 = 40px Touch-Area */
  }
}

/* ── Elastischer Bounce am Listen-Ende (iOS-Feel) ─────── */
/* Strategie: Browser-Pull-to-Refresh blockiert, aber elastisches
   Nachgeben am Ende von Listen behält iOS-typisches App-Gefühl.
   - body: contain → blockiert Page-zu-Browser-Chain
   - Listen + Containers: -webkit-overflow-scrolling: touch (Momentum)
   - Scroll-Boxen in Modals: contain damit Background nicht mitbouncet
*/
html {
  /* explizit auto = iOS-Default Bounce */
  overscroll-behavior-y: auto;
}
body {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Hauptscroll-Container der App: Momentum + natürlicher Bounce am Ende */
main.main-content,
.page-body,
.bo-section,
.dash-grid,
.crm-main,
.st-wrap,
.bd-body {
  -webkit-overflow-scrolling: touch;
}

/* Dedizierte Scroll-Boxen (Listen mit eigener Höhe, Modals):
   contain damit Bounce nicht ins Page-Layout durchschlägt */
.msg-stream,
.modal-body,
.modal__body,
.wb-modal__body,
.scroll-y,
.ek-body,
.lightbox__body,
.dm-picker-modal__list {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── iOS-PWA: Bottom-Nav mit Safe-Area-Inset ────────────── */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── 100dvh statt 100vh: kein Layout-Sprung bei iOS-Toolbar ─ */
@supports (height: 100dvh) {
  .full-height,
  .modal-bg {
    height: 100dvh;
    min-height: 100dvh;
  }
  /* msg-wrap-outer NICHT — die ist position:fixed top:60 bottom:0, height würde Composer abschneiden */
}

/* ════════════════════════════════════════════════════════════
   Mobile Sweep — v163: globaler Safety-Net über alle Seiten
   ════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* ── 1) Flex-Overflow-Schutz ─────────────────────────── */
  /* Allgemeines Problem: flex-Items haben default min-width:auto = Content-Breite.
     Damit reisst lange Text seinen Parent auf. Fix: min-width:0 erzwingen. */
  .item__body,
  .item__head > div,
  .card__body,
  .mt-row__body,
  .item-row__body,
  .pin-popup__body,
  .modal__head > div,
  .page-header > div,
  .bn-row > *,
  [class*="__body"],
  [class*="__text"],
  [class*="__title"]:not(button):not(a) {
    min-width: 0;
  }

  /* Texte allgemein: overflow-wrap break-word ist sicher (bricht nur lange Wörter ohne Leerzeichen),
     NICHT anywhere/break-all (das bricht jeden Buchstaben). */
  .item__title,
  .card__title,
  .mt-row__title,
  .item-row__title {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
  }

  /* ── 2) Page-Header Action-Rows einheitlich ───────────── */
  .page-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }
  .page-header > div:last-child:not(:only-child) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .page-header > div:last-child:not(:only-child) > .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
  }
  /* Primärer Button (btn--primary, btn--danger, btn--lila) bekommt volle Breite */
  .page-header > div:last-child:not(:only-child) > .btn--primary,
  .page-header > div:last-child:not(:only-child) > .btn--danger {
    flex: 1 1 100%;
  }

  /* Aber: Auf NICHT Page-Headers (sondern in Sub-Toolbars) nicht touchen */
  .filter-bar .btn,
  .modal__head .btn,
  .toolbar .btn {
    flex: initial;
  }

  /* ── 3) Inline font-size:11px / 12px hochziehen auf Cards/Pills ── */
  /* Lesbarkeit auf kleinen Displays. Aber: Badges/Counter dürfen klein bleiben */
  .item__beschreibung,
  .item__meta,
  .pr-card__body,
  .mt-row__sub,
  .item-row__sub {
    font-size: 12px;
  }
  /* "Datum / Autor"-Meta einen Tick größer als 11px für besseres Tap-Erkennen */
  .item__meta--people {
    font-size: 12px !important;
  }

  /* ── 4) Cards: Padding etwas großzügiger für Touch ──── */
  .item, .mt-row, .item-row, .pr-card, .kpi-card, .card {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* ── 5) Badge-Reihen brechen sauber um ──────────────── */
  .item__badges,
  .item-row__badges {
    flex-wrap: wrap !important;
  }

  /* ── 6) Tables horizontal scrollen statt rausragen ──── */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* ── 7) Hover-Override noch breiter (Sidebar-Items, Org-Switcher, Quickactions) ── */
  /* Wird ergänzt zum bestehenden @media (hover: none) Block —
     hier explizit für Touch-Mobile durchsetzen */
  .nav-item:hover, .nav-section__header:hover,
  .bn-sheet a:hover, .bn-sheet button:hover,
  .pd-status-chip:hover, .lbl-pill:hover,
  .item:hover, .mt-row:hover, .pr-card:hover,
  .kpi-card:hover, .quick-action:hover, .item-row:hover {
    background: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* ── 8) Modal-Buttons: Footer-Reihen brechen sauber um ── */
  .modal__foot, .modal__footer, .wb-modal__footer {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal__foot > .btn,
  .modal__footer > .btn,
  .wb-modal__footer > .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── 9) Lange Pill-/Badge-Inhalte sauber abschneiden ── */
  .pill-projekt, .pill-baustelle, .pill, .badge,
  [class*="-pill"]:not(.lbl-pill):not(.filter-pill) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── 10) Filter-Pills horizontal scrollbar lassen ──── */
  .filter-pills, .filter-bar__pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-pills::-webkit-scrollbar, .filter-bar__pills::-webkit-scrollbar { display: none; }
  .filter-pills > *, .filter-bar__pills > * {
    flex-shrink: 0;
  }
}

/* ── 11) Touch-Hover-Sticky-Schutz (alle Devices ohne Hover) ── */
@media (hover: none), (pointer: coarse) {
  /* Sehr breiter Sweep: alle interaktiven Elemente die einen :hover-Style haben dürften */
  .nav-item:hover, .nav-section__header:hover, .nav-section__header,
  .sidebar__org-switcher-item:hover,
  .topbar__msg-btn:hover, .topbar__search-btn:hover, .sidebar__search-trigger:hover,
  .bn-sheet a:hover, .bn-sheet .nav-item:hover, .bn-sheet button:hover,
  .pd-status-chip:hover, .lbl-pill:hover, .filter-pill:hover,
  .item:hover, .mt-row:hover, .pr-card:hover,
  .kpi-card:hover, .quick-action:hover, .item-row:hover, .bo-quick:hover {
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  /* Active-States bleiben mit Werkbank-Lila sichtbar */
  .nav-item.is-active,
  .nav-item--active,
  .bottom-nav__item--active,
  .pd-status-chip.is-active {
    background: var(--color-accent-light, rgba(15,42,68,.10)) !important;
  }
}


/* ── Mobile: Label-Filter-Bar ausblenden ──────────────── */
/* Labels werden auf Mobile über die globale Suche gefunden statt als Filter-Reihe oben. */
@media (max-width: 700px) {
  .lbl-filter-bar {
    display: none !important;
  }
}


/* ── Backoffice-Liste Mobile (v329): kompakte Zeile, Aktionen in EINER Reihe darunter ── */
@media (max-width: 700px) {
  .bo-section { padding: 14px 16px !important; }
  .bo-row {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 12px; row-gap: 10px;
    align-items: center !important;
    min-height: 56px;
  }
  .bo-row__main { grid-column: 2; min-width: 0; }
  .bo-row__name { font-size: 15px; white-space: normal; overflow-wrap: break-word; }
  .bo-row__sub { font-size: 13px; line-height: 1.35; }
  .bo-row__end { grid-column: 3; }
  .bo-row__actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: nowrap; width: auto; }
  .bo-row__actions .bo-btn { flex: 1 1 0; min-height: 44px; justify-content: center; font-size: 14px; padding: 0 10px; }
  .bo-row__actions .bo-btn--primary { flex: 1.4 1 0; }
}


/* ── Mitarbeiter-Akte Mobile: List-Rows stacken statt gequetschtes Side-by-Side ──── */
@media (max-width: 700px) {
  .akte-list-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
  }
  .akte-list-row__main {
    width: 100%;
  }
  .akte-list-row__title {
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Sub-Text: kein UPPERCASE auf Mobile (zu breit), kleineres Tracking */
  .akte-list-row__sub {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    font-weight: 500;
    overflow-wrap: break-word;
  }
  /* Badges + Arrow als zweite Zeile, sauber nebeneinander */
  .akte-list-row__badges {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .akte-list-row__arrow {
    position: absolute;
    right: 12px;
    top: 14px;
    color: var(--color-text-muted);
  }
}


/* ── Messenger Composer GARANTIERT sichtbar auf Mobile ──── */
/* Behebt Bug wo Composer in leeren Channels verschwunden ist.
   Höhere Spezifität als Watchdog-Inline-Styles damit der Composer immer am Boden bleibt. */
@media (max-width: 768px) {
  /* Einspalter: Liste ODER Chat. Die frühere Regel „.msg-thread{display:flex!important}"
     hat .is-hidden-mobile ausgehebelt → Liste und Chat lagen nebeneinander, Liste 750 px breit. */
  .msg-wrap { grid-template-columns: minmax(0, 1fr) !important; }
  .msg-channels.is-hidden-mobile,
  .msg-thread.is-hidden-mobile { display: none !important; }
  .msg-channels { min-width: 0; }
  .msg-thread:not(.is-hidden-mobile) {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  .msg-thread .msg-stream {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto;
  }
  .msg-thread .msg-composer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0 !important;
    display: block !important;
    visibility: visible !important;
    z-index: 5;
    background: #fff;
    border-top: 1px solid var(--color-border);
  }
  .msg-thread .msg-composer__row {
    display: flex !important;
    gap: 8px;
    align-items: flex-end;
  }
  .msg-thread .msg-composer__input {
    display: block !important;
    flex: 1;
  }
  /* Watchdog-Inline-Styles via class override neutralisieren */
  body.is-kbd-open .msg-composer {
    position: relative !important;
    bottom: auto !important;
  }
}

/* v325: iOS-Statusleiste — Inhalt läuft beim Scrollen nicht mehr sichtbar unter Uhr/Akku */
@media (max-width: 768px) {
  html::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px);
    background: var(--color-surface); z-index: 9999; pointer-events: none;
  }
}

/* ── v364: Handy – nichts darf aus Karten/Kacheln laufen (Scan aller Seiten 03.11.2026) ── */
[class*="-grid"] > *, [class*="-quick"] > *, [class*="-card"] > *, [class*="-kachel"] > * { min-width: 0; }
.bo-quick__title, .tm-card__name, .card__title, h1, h2, h3 { overflow-wrap: anywhere; }
.bo-quick__title { hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 700px) {
  .tm-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .tm-card { min-width: 0; max-width: 100%; }
  .tp-kpi-bar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible !important; }
  .tp-kpi { min-width: 0 !important; }
}

/* v366c: Avatar oben rechts immer rund (die 44-px-Mindesthöhe für [role=button] machte ihn oval) */
.sidebar__avatar[role="button"] { width: 40px; height: 40px; min-width: 40px; min-height: 40px; aspect-ratio: 1 / 1; padding: 0; border-radius: 50%; }