/* ============================================================
   mobil.css — Handy und iPad.

   Bewusst zurückhaltend: nichts wird umgestaltet, es werden nur
   Dinge repariert, die auf Touch-Geräten weh tun.
   Wird auf jeder Seite NACH ux2026.css geladen.

   WICHTIG: Regeln, die Scroll-Verhalten verändern (overscroll-behavior,
   scroll-snap, -webkit-overflow-scrolling), stehen ausschließlich in
   Touch-Abfragen. Global gesetzt haben sie am Schreibtisch das Scrollen
   mit zwei Fingern auf dem Trackpad blockiert.
   ============================================================ */

/* ---------- Grundlagen ---------- */

html {
  /* Kein Zoom-Sprung beim Drehen, aber Pinch-Zoom bleibt erlaubt */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Graue Blitzer beim Antippen weg — Rückmeldung kommt unten selbst */
  -webkit-tap-highlight-color: transparent;
}

/* Gummiband-Effekt nur auf echten Touch-Geräten bremsen. Am Schreibtisch
   hat diese Regel das Scrollen mit zwei Fingern auf dem Trackpad gestört. */
@media (hover: none) and (pointer: coarse) {
  body { overscroll-behavior-y: contain; }
}

/* Echte Fensterhöhe (100vh ist auf dem iPhone zu groß, weil die
   Adressleiste mitgerechnet wird). mobil.js setzt --vh. */
.lp-vh { height: calc(var(--vh, 1vh) * 100); }

/* ---------- Sichere Bereiche (Notch, Home-Balken) ---------- */

@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  /* Feste Leisten am unteren Rand nicht unter den Home-Balken schieben */
  .toast, #rcFloat, .lp-tabbar {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* ---------- Eingabefelder ---------- */

/* Unter 16px zoomt iOS beim Antippen hinein und kommt nicht zurück. */
@media (max-width: 900px) {
  input, select, textarea, .rc-in {
    font-size: 16px !important;
  }
  /* Ausnahme: Felder, die bewusst winzig sind */
  input.lp-tiny, .pl-grid input { font-size: 15px !important; }
}

/* ---------- Tippflächen ---------- */

@media (hover: none) and (pointer: coarse) {
  button, .pill, .back, .app, .tab, a.btn, .rc-k, .rc-tab, .sk-it {
    /* Apple empfiehlt 44 pt — hier als Mindesthöhe, ohne das Layout zu sprengen */
    min-height: 40px;
  }
  button, .pill, .back, .rc-k, .rc-tab {
    touch-action: manipulation;   /* kein Doppeltipp-Zoom auf Knöpfen */
  }
  /* Sichtbare Rückmeldung beim Antippen, weil :hover auf Touch nichts tut */
  button:active, .pill:active, .back:active, .app:active, .rc-k:active {
    transform: scale(.97);
    opacity: .88;
  }
  /* Effekte, die nur mit Maus Sinn haben, bleiben aus */
  .app:hover, .ht-card:hover, .card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ---------- Waagerecht scrollende Reihen ----------
   Nur auf Touch-Geräten und nur bei Elementen, die wirklich scrollen.
   Global gesetzt hat scroll-snap das senkrechte Scrollen behindert. */

@media (hover: none) and (pointer: coarse) {
  .ht-row {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .ht-card { scroll-snap-align: start; }
}

/* ---------- Handy: eine Spalte, mehr Luft ---------- */

@media (max-width: 640px) {
  .wrap, .page, main { padding-left: 14px !important; padding-right: 14px !important; }

  /* Zweispaltige Raster fallen auf eine Spalte */
  .grid, .dash, .cols, .two, .split {
    grid-template-columns: 1fr !important;
  }
  /* Kachelraster: zwei Spalten sind auf dem Handy noch gut greifbar */
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .apps .app.main { grid-column: 1 / -1; }
  .app { padding: 13px !important; }
  .app h3 { font-size: 14px !important; }
  .app p { font-size: 11.5px !important; }

  h1 { font-size: clamp(21px, 6vw, 27px) !important; }
  .card { border-radius: 15px !important; }
  .card.pad, .panel { padding: 14px !important; }

  /* Tabellen dürfen seitlich scrollen statt zu zerbrechen */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Fenster/Overlays fast bildschirmfüllend */
  .bk-box, .pl-box, .sk-box, .modal-box, #modal > div {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 80px) !important;
  }
  #skWrap { align-items: flex-start; padding-top: 7vh !important; }
}

/* ---------- Ganz schmal (iPhone SE, geteilter Bildschirm) ---------- */

@media (max-width: 380px) {
  .apps { grid-template-columns: 1fr !important; }
  .ht-card { min-width: 128px; }
}

/* ---------- iPad ---------- */

@media (min-width: 641px) and (max-width: 1180px) {
  .apps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid { gap: 16px; }
  /* Auf dem iPad ist der Finger auch der Zeiger */
  button, .pill, .back { min-height: 40px; }
}

/* iPad im Hochformat: Planer und Mail brauchen ihre Spalten nicht nebeneinander */
@media (min-width: 641px) and (max-width: 900px) and (orientation: portrait) {
  .three-col, .mailgrid, .plannergrid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Handy im Querformat ---------- */

@media (max-height: 460px) and (orientation: landscape) {
  .hero { margin-bottom: 10px !important; }
  .hero p { display: none; }
  #heute { margin: 10px 0 0 !important; }
  .rc-body { max-height: 30vh !important; }
}

/* ---------- Untere Leiste (nur Handy, von mobil.js gesetzt) ---------- */

.lp-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 880;
  display: none;
  justify-content: space-around;
  align-items: stretch;
  padding: 4px 4px 0;
  background: var(--card2, rgba(255, 255, 255, .96));
  border-top: 1px solid var(--line, rgba(20, 45, 40, .14));
  backdrop-filter: saturate(1.6) blur(14px);
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
}
.lp-tabbar a, .lp-tabbar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 2px 8px;
  border: none;
  background: none;
  text-decoration: none;
  color: var(--muted, #5b6b64);
  font: inherit;
  font-size: 9.5px;
  font-weight: 600;
  cursor: pointer;
}
.lp-tabbar .i { font-size: 19px; line-height: 1 }
.lp-tabbar .on { color: var(--acc, #0e9488) }
.lp-tabbar span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  body.lp-hastabs .lp-tabbar { display: flex }
  /* Platz schaffen, damit die Leiste nichts verdeckt */
  body.lp-hastabs { padding-bottom: 62px }
  body.lp-hastabs .toast { bottom: 74px }
  body.lp-hastabs #rcFloat { bottom: calc(70px + env(safe-area-inset-bottom)) }
}

/* Als App vom Home-Bildschirm gestartet: oben etwas Luft für die Statusleiste */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top) }
}

/* ---------- Weniger Bewegung, wenn gewünscht ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}