/* ELEMENT4 · Mehr Platz am Rechner
   Am Handy bleibt alles wie es ist – die Regeln greifen erst ab 1000 px
   Fensterbreite. Dort werden Eingabefenster breiter, damit zweispaltige
   Zeilen (Datum/Betrag, Konto/Kostenstelle) nebeneinander Platz haben
   und weniger gescrollt werden muss. */
@media (min-width:1000px){
  .e4-sheet{ max-width:760px; padding:22px 26px calc(22px + env(safe-area-inset-bottom,0px)); }
  .e4-sheet h3{ font-size:20px; margin-bottom:16px; }
  /* Alle Felder auf gleicher Kante – einspaltige Zeilen laufen so weit wie
     die zweispaltigen Raster darüber. */
  .e4-sheet textarea{ min-height:130px; }

  .modal{ max-width:720px; padding:22px 24px; }
  .modal .box{ max-width:820px; padding:22px 24px; }
  .modal-box{ max-width:840px; padding:24px 26px calc(24px + env(safe-area-inset-bottom)); border-radius:16px; }
}
@media (min-width:1500px){
  .e4-sheet{ max-width:880px; }
  .modal-box{ max-width:960px; }
  .modal .box{ max-width:900px; }
}

/* Sehr schmale Handys (iPhone SE & Co., 320 px): die Kopfzeile muss umbrechen
   dürfen, sonst ragen „Abmelden" und die Knöpfe über den Bildschirmrand. */
@media (max-width:360px){
  .who{gap:5px}
  .who-actions{flex-wrap:wrap;justify-content:flex-end;gap:5px}
  .who > div{flex-wrap:wrap;justify-content:flex-end;gap:5px;display:flex}
  /* Die Knopfleiste darf schrumpfen und umbrechen – sonst schiebt sie sich
     über den rechten Rand hinaus. */
  .who .who-actions,.who > div:last-child{flex:1 1 auto;min-width:0;max-width:100%}
  .who button,.who a,.who .portal-home-btn{font-size:12.5px;padding:6px 9px}
  .who .knopf-ico{width:15px;height:15px}
  .e4-glocke{padding:6px 9px}
}