/* ==========================================================================
   ImmoProfi OS  ·  ip-mobile.css  ·  Handy-Grundregeln
   --------------------------------------------------------------------------
   EINE Datei fuer die Handy-Darstellung ALLER internen Seiten.
   Wird NICHT von den Seiten selbst eingebunden, sondern automatisch von den
   zwei gemeinsamen Bausteinen:
       /var/www/ep-lib/staff_nav.php     (ep_staff_nav_css)   -> Mitarbeiter
       /var/www/html/admin/chrome.php    (ip_admin_chrome)    -> GF/Admin
   Wer eine neue interne Seite baut und einen der beiden Bausteine einbindet,
   bekommt diese Regeln automatisch mit. Nichts pro Seite kopieren.

   EIN BREAKPOINT FUER ALLES: 700px.
   Im Bestand gibt es historisch 15 verschiedene (640/820/560/700/680/600/900
   /768/760/620/…). Neue Handy-Regeln bitte NUR noch mit 700px schreiben,
   damit nicht drei Layouts bei drei verschiedenen Breiten umspringen.

   WICHTIG: Alles steht bewusst INNERHALB der 700px-Regel. Oberhalb von 700px
   aendert diese Datei nichts - die Desktop-Ansicht bleibt Pixel fuer Pixel
   wie vorher. Das ist nachgewiesen (Pixelvergleich, siehe Tagesbericht
   21.07.2026).

   Stand: 21.07.2026 - Schritt 1, 1b und 2.
   Noch NICHT enthalten und bewusst spaeteren Schritten vorbehalten:
     Schritt 3 = Tabellen wischbar,
     Schritt 4 = Tippflaechen 44px + Mindestschriftgroesse.
   ========================================================================== */

/* --------------------------------------------------------------------------
   AUSSERHALB DES BREAKPOINTS: nur genau eine Zeile.
   Der Menue-Knopf steht im Quelltext jeder internen Seite, darf am Rechner
   aber nicht zu sehen sein. Ohne diese Zeile waere er dort ein sichtbarer
   Knopf - und die Desktop-Ansicht damit veraendert.
   -------------------------------------------------------------------------- */
.ip-burger { display: none; }

@media (max-width: 700px) {

  /* --- 1 · Bilder und Grafiken sprengen nie den Bildschirm ----------------
     "height:auto" gehoert zwingend dazu: ohne diese Zeile wuerde ein Bild
     mit fester Breiten- UND Hoehenangabe beim Verkleinern verzerrt.
     Seiten-CSS mit eigener Angabe (z. B. ".sn-logo img{height:34px}") ist
     spezifischer und behaelt Vorrang - das Logo bleibt also unveraendert. */
  img, video {
    max-width: 100%;
    height: auto;
  }
  svg {
    max-width: 100%;
  }

  /* --- 2 · Tabellen laufen nicht mehr aus dem Bild ------------------------
     Bremst breite Tabellen auf die Bildschirmbreite ein. Der Inhalt wird
     dadurch enger, ist aber vollstaendig sichtbar - besser als eine Seite,
     die sich waagerecht verschieben laesst und halbe Spalten versteckt.
     Das komfortable seitliche Wischen kommt in Schritt 3. */
  table {
    max-width: 100%;
  }

  /* --- 3 · Kein Zoom-Sprung beim Antippen von Eingabefeldern --------------
     iOS Safari zoomt automatisch in die Seite hinein, sobald ein Feld eine
     Schrift KLEINER als 16px hat. Danach steht die Seite verschoben und der
     Nutzer muss von Hand zurueckzoomen. 16px verhindert das zuverlaessig.
     Gilt nur am Handy - am Schreibtisch bleiben die Felder wie gewohnt.

     WARUM "!important" (Schritt 1b, 21.07.2026)?
     Ohne das wirkt die Regel praktisch nicht: "input{...}" hat die
     Spezifitaet 0-0-1 und verliert gegen jedes Seiten-CSS der Bauart
     ".addform input{font-size:14px}" (0-1-1). Gemessen blieben 192 von 198
     Feldern unveraendert. Die Ausnahme ist hier bewusst und eng begrenzt:
     nur unter 700px, nur fuer Eingabefelder, und 16px ist ohnehin das Ziel.

     "max-width" und "box-sizing" gehoeren zwingend dazu: die groessere
     Schrift macht Felder mit fester Breitenangabe breiter. Ohne die beiden
     Zeilen entsteht dadurch neuer waagerechter Ueberlauf (gemessen an den
     Bewerbungen: 17px -> 75px). Mit ihnen bleibt der Ueberlauf exakt gleich. */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* =======================================================================
     4 · MENUE EINKLAPPEN  (Schritt 2, 21.07.2026)
     -----------------------------------------------------------------------
     Vorher brach das Menue in 4-7 Zeilen um: 291px (Mitarbeiter-Leiste) bis
     609px (Bewerbungen) - auf einem iPhone bis zu 82 % des ersten Bildschirms,
     bevor der erste Inhalt kam. Jetzt: eine Zeile mit Logo und Menue-Knopf.

     Wie es funktioniert: Der Knopf setzt die Klasse "ip-menu-auf" auf das
     <html>-Element (siehe ep_mobile_burger() in nav.php). Alles Weitere macht
     ausschliesslich dieses CSS. Deshalb reicht EIN Knopf fuer BEIDE Menues.
     ======================================================================= */

  /* --- der Knopf selbst ------------------------------------------------- */
  .ip-burger {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; margin-left: auto;
    width: 44px; height: 44px;          /* 44px = bequeme Tippflaeche */
    padding: 0; cursor: pointer;
    background: #fff; color: #5d595a;
    border: 1px solid #e1e1e1; border-radius: 10px;
  }
  .ip-burger svg { width: 22px; height: 22px; }
  .ip-burger:active { background: #f4f4f4; }
  html.ip-menu-auf .ip-burger { background: #ca2f56; color: #fff; border-color: #ca2f56; }

  /* ACHTUNG SPEZIFITAET - bitte beim Erweitern beibehalten:
     Beide Bausteine geben ihr eigenes <style> SPAETER im Dokument aus als
     diese Datei. Bei gleicher Spezifitaet gewinnt das spaetere - eine Regel
     wie ".ip-nav{display:none}" waere also wirkungslos. Deshalb ist ueberall
     der Elementname mit angegeben ("nav.ip-nav", "header.ip-head",
     "div.sn-bar"): das gibt einen Punkt mehr und setzt sich durch.
     Im Vorschau-Test am 21.07.2026 genau daran gescheitert. */

  /* ZUGEKLAPPT DARF NICHTS UMBRECHEN.
     Beide Leisten stehen auf "flex-wrap:wrap". Passt eine Zeile nicht, schiebt
     Flexbox dann das letzte Element in eine neue Zeile - statt den Titel
     schmaler zu machen. Genau so landete der Menue-Knopf auf Seiten mit langem
     Titel ("Produktivitaets-Cockpit") in Zeile zwei: 111px statt 65px.
     Mit "nowrap" muss stattdessen der Titel schrumpfen. Aufgeklappt wird
     "wrap" weiter unten wieder eingeschaltet - dort ist der Umbruch gewollt. */
  div.sn-bar, header.ip-head { flex-wrap: nowrap; }
  html.ip-menu-auf div.sn-bar,
  html.ip-menu-auf header.ip-head { flex-wrap: wrap; }

  /* --- Mitarbeiter-Leiste (staff_nav.php) ------------------------------- */
  div.sn-bar { padding: 10px 14px; gap: 10px; }
  /* Die Leiste heisst seit dem 24.07.2026 einheitlich "nav.pn" (portal_nav.php) –
     frueher .sn-nav hier und .ip-nav im Admin-Kopf. */
  div.sn-bar nav.pn,
  div.sn-bar .sn-champ,
  div.sn-bar .sn-user,
  div.sn-bar .sn-logout { display: none; }
  div.sn-bar .sn-sep { display: none; }

  html.ip-menu-auf div.sn-bar nav.pn {
    display: flex; flex-direction: column; width: 100%;
    /* flex-basis muss mit: Am Rechner traegt die Leiste "flex:1" (= basis 0),
       damit sie den freien Platz in der Leiste fuellt. Ohne diese Zeile bliebe
       sie am Handy in derselben Zeile wie das Logo, statt darunter zu rutschen. */
    flex: 0 0 100%;
    gap: 2px; margin: 6px 0 0; padding-top: 8px;
    border-top: 1px solid #eee;
  }
  html.ip-menu-auf div.sn-bar nav.pn a { padding: 12px 12px; font-size: 15px; border-radius: 8px; }
  html.ip-menu-auf div.sn-bar .sn-champ { display: block; width: 100%; margin: 8px 0 0; }
  html.ip-menu-auf div.sn-bar .sn-user {
    display: flex; width: 100%; margin-top: 10px;
    padding-top: 10px; border-top: 1px solid #eee;
  }
  html.ip-menu-auf div.sn-bar .sn-logout { display: inline-block; margin-top: 10px; padding: 10px 16px; }

  /* --- Admin-Chrome (admin/chrome.php) ---------------------------------- */
  header.ip-head { padding: 10px 14px; gap: 10px; }
  /* Der Titel-Kasten ist das einzige Kind ohne Klasse. Ohne "min-width:0"
     schrumpft ein Flex-Element nicht unter seine Textbreite - lange Titel wie
     "Produktivitaets-Cockpit" schoben den Menue-Knopf dann in eine zweite
     Zeile (gemessen: 111px statt 65px). Mit dieser Zeile darf der Titel
     umbrechen und alles bleibt in einer Reihe. */
  header.ip-head > div:not([class]) { min-width: 0; flex: 1 1 auto; }
  header.ip-head .ip-ttl { font-size: 1.02rem; line-height: 1.2; }
  header.ip-head .ip-sub { display: none; }  /* Untertitel spart eine Zeile */
  header.ip-head .ip-champ,
  header.ip-head .ip-meta,
  header.ip-head .ip-gear { display: none; }
  nav.pn { display: none; }

  html.ip-menu-auf header.ip-head .ip-champ {
    display: block; width: 100%; margin: 8px 0 0 0 !important;   /* schlaegt das inline margin-left:auto */
  }
  html.ip-menu-auf header.ip-head .ip-meta {
    display: flex; width: 100%; margin: 10px 0 0;
    padding-top: 10px; border-top: 1px solid #ece8ee;
  }
  html.ip-menu-auf header.ip-head .ip-gear { display: inline-block; margin: 8px 0 0; }
  html.ip-menu-auf nav.pn {
    display: flex; flex-direction: column; padding: 6px 14px 12px; gap: 2px;
  }
  /* In der Spalte stoert der Unterstrich des aktiven Punktes - stattdessen
     ein dezent hinterlegter Balken wie in der Mitarbeiter-Leiste. */
  html.ip-menu-auf nav.pn a {
    padding: 12px; border-bottom: 0; margin-bottom: 0;
    border-radius: 8px; font-size: 15px; white-space: normal;
  }
  html.ip-menu-auf nav.pn a.on { background: rgba(202,47,86,.10); }
  /* Aufklapp-Gruppen stehen am Handy als Akkordeon untereinander, statt zu
     schweben - antippen oeffnet, nochmal antippen schliesst (<details>). */
  html.ip-menu-auf nav.pn details.pn-gr { width: 100%; }
  html.ip-menu-auf nav.pn details.pn-gr > summary {
    padding: 12px; font-size: 15px; border-bottom: 0; margin-bottom: 0;
  }
  html.ip-menu-auf nav.pn .pn-liste {
    position: static; box-shadow: none; border: 0; border-left: 2px solid #f0ecef;
    border-radius: 0; margin: 0 0 6px 10px; padding: 0 0 0 8px;
  }

  /* =======================================================================
     5 · BREITE TABELLEN WISCHBAR MACHEN  (Schritt 3, 21.07.2026)
     -----------------------------------------------------------------------
     ANWENDUNG: NICHT pauschal auf alle Tabellen! Die Tabelle wird auf der
     jeweiligen Seite von Hand in einen Rahmen gesetzt:

         <div class="ip-tab-wisch"><table> … </table></div>

     WARUM NICHT PAUSCHAL: Eine Regel wie "table{display:block;
     width:max-content}" fuer alle Tabellen wurde am 21.07.2026 gemessen -
     sie hat drei Seiten VERSCHLECHTERT (Handbuch-Kontrolle 223px -> 517px
     Ueberlauf), weil verschachtelte und schmale Tabellen dadurch aufgeblaeht
     werden. Deshalb gezielt je Tabelle.

     WARUM NICHT EINFACH "max-width:100%": Eine Tabelle wird nie schmaler als
     ihre Mindestbreite (Spaltenzahl, nicht umbrechende Zellen). Sie muss in
     einen eigenen Rahmen, der scrollt - die Seite selbst bleibt dann ruhig.
     ======================================================================= */
  .ip-tab-wisch {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Schatten-Hinweis an den Raendern: die beiden weissen Flaechen kleben am
       Inhalt ("local"), die beiden Schatten am Rahmen ("scroll"). Dadurch
       verdeckt Weiss den Schatten genau dann, wenn man am Anfang bzw. Ende
       angekommen ist - der Hinweis erscheint also nur, solange es wirklich
       noch etwas zu wischen gibt. Rein per CSS, ohne JavaScript. */
    background-image:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(20,18,26,.18), rgba(20,18,26,0)),
      linear-gradient(to left,  rgba(20,18,26,.18), rgba(20,18,26,0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  /* Die Tabelle darf im Rahmen wieder ihre natuerliche Breite annehmen -
     sonst wuerde die Grundregel aus Schritt 1 (table{max-width:100%}) sie
     hier wieder zusammendruecken und es gaebe nichts zu wischen. */
  .ip-tab-wisch > table { max-width: none; }

  /* -----------------------------------------------------------------------
     LISTEN-TABELLE ALS KARTEN  (Schritt 3, 21.07.2026)
     Fuer Tabellen, in denen jede Zeile EIN Ding ist und rechts ein Knopf
     steht. Wischen reicht dort nicht: der Knopf liegt am rechten Rand und
     wird leicht uebersehen. Deshalb wird jede Zeile zu einer Karte und der
     Knopf wandert unter die Angaben - ueber die volle Breite, gut zu treffen.

     ANWENDUNG: Klasse an die Tabelle, zusaetzlich zur eigenen:
         <table class="obj ip-tab-karten">

     VORAUSSETZUNG: Die Kopfzeile ist die erste Zeile der Tabelle (kein
     eigenes <thead>) - sie wird ausgeblendet, weil Spaltenueberschriften
     ohne Spalten keinen Sinn ergeben. Die Aktionsspalte ist die letzte.
     -------------------------------------------------------------------- */
  table.ip-tab-karten,
  table.ip-tab-karten tbody,
  table.ip-tab-karten tr,
  table.ip-tab-karten td,
  table.ip-tab-karten th { display: block; }
  table.ip-tab-karten tr:first-child { display: none; }   /* Kopfzeile */
  table.ip-tab-karten tr {
    border: 1px solid #ece8ee; border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; background: #fff;
  }
  table.ip-tab-karten td { border: 0; padding: 3px 0; }
  table.ip-tab-karten td:empty { display: none; }
  table.ip-tab-karten td:last-child { margin-top: 10px; }
  table.ip-tab-karten td:last-child > a,
  table.ip-tab-karten td:last-child > button {
    display: block; width: 100%; text-align: center;
    padding: 13px 12px; box-sizing: border-box;
  }

  /* =======================================================================
     6 · RASTER SCHRUMPFEN LASSEN  (Schritt 3b, 21.07.2026)
     -----------------------------------------------------------------------
     DAS PROBLEM: Ein Grid- oder Flex-Kind hat von Haus aus "min-width:auto"
     und wird deshalb NIE schmaler als der Mindestbedarf seines Inhalts. Steckt
     eine breite Tabelle drin, bläht sich der Kasten drumherum auf (gemessen:
     489px auf einem 390px-Bildschirm) - und nimmt einen wischbaren Rahmen aus
     Schritt 3 gleich mit, der dadurch wirkungslos bleibt. Nicht die Tabelle
     laeuft ueber, sondern ihr Elternteil.

     ANWENDUNG: gezielt an den betroffenen Raster-Kasten schreiben, z. B.
         <div class="cols ip-schrumpfbar ip-eine-spalte">
     Die seitenlokalen Namen (.cols, .ranks, .grid) bleiben bewusst in der
     jeweiligen Seite - hier stehen nur die allgemeinen Bausteine.

     Dieselbe Falle gab es schon beim Seitentitel in Schritt 2. Merksatz: bei
     waagerechtem Ueberlauf immer erst die ELTERN pruefen, nicht das Element.
     ======================================================================= */

  /* Darf schmaler werden als sein Inhalt - fuer den Kasten und seine Kinder,
     denn beide sind an der Kette beteiligt. */
  .ip-schrumpfbar,
  .ip-schrumpfbar > * { min-width: 0; }

  /* Mehrspaltige Raster auf eine Spalte. Nebeneinander ist auf 390px ohnehin
     nicht lesbar. */
  .ip-eine-spalte { grid-template-columns: 1fr; }

  /* Fuer einzelne Elemente mit unteilbar langem Inhalt - typisch ein Knopf mit
     Dateinamen darin. Er darf schmaler werden als sein Text, der Text bricht
     dann um. "anywhere" auch mitten im Wort, weil Dateinamen keine Leerzeichen
     haben (Schritt 3c, 21.07.2026). */
  .ip-umbruch {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }


  /* --- Das Label "Intern" neben dem Logo am Handy ausblenden -----------
     (Schritt 6, 24.07.2026) Es war mit 10px die letzte zu kleine Schriftstelle
     auf allen 11 Mitarbeiter-Seiten. Vergroessern kam nicht in Frage: direkt
     neben dem Logo bekaeme es bei 13px deutlich zu viel Gewicht. Am Handy
     zaehlt jeder Millimeter in der Kopfzeile - und die Information "intern"
     ist fuer angemeldete Mitarbeiter ohnehin selbstverstaendlich.
     Am Rechner bleibt es unveraendert stehen. */
  div.sn-bar .sn-logo-sub { display: none; }
}