/* ---------- Immo Guy: Responsive-Retrofit (Phase 6) ----------
   Erweitert den bisher festen 430px-Handy-Rahmen (".phone") um zwei zusaetzliche
   Breakpoints, ohne die Basis-Mobilansicht zu veraendern (mobile-first: alles
   unterhalb von 700px bleibt exakt wie vor dieser Datei). Wird per <link> auf
   jeder Seite mit dem .phone-Muster eingebunden, NACH dem seiteneigenen
   <style>-Block - so gewinnen diese Regeln bei gleicher Spezifitaet.
   Siehe CHANGELOG.txt Version 108 und KONZEPT-VERMIETER-ERWEITERUNG.md,
   Abschnitt "Responsive Design". */

@media (min-width:700px){
  .phone{ max-width:600px; }
  /* .shell ist das Rent-Gegenstueck zu .phone (siehe rent-dashboard.html) - hatte
     bisher ein fest verdrahtetes max-width:640px ohne Wachstum bei mehr Platz,
     waehrend .phone bis 760px mitwaechst. Nutzerbericht 17.08.2026: Check- und
     Rent-Seiten wirkten auf Desktop "unterschiedlich groß" - genau dieser
     Unterschied. Jetzt dieselben Breakpoints wie .phone. */
  .shell{ max-width:600px; }
  /* .fab (meine-immobilien.html, "+ Neue Immobilie") folgt denselben
     Breakpoints wie .phone - sonst blieb der Button bei festen 430px haengen,
     waehrend die Kartenspalte darueber breiter wurde (Nutzerbericht
     17.08.2026: "wird nicht sauber angezeigt, zentrieren"). */
  .fab{ max-width:600px; }
  .stats-row{ gap:14px; }
  /* Bugreport 18.08.2026: "der Umschalter der Ansicht hat keine Funktion mehr"
     (Desktop). Ursache war die Zeile, die hier bis Version 341 stand -
     .property-list ungescoped auf 2 Spalten gezwungen, TROTZ des
     :not(.grid-view)-Blocks direkt darunter, der die Listen-Ansicht dann
     wieder auf das Karten-Layout zurueckdrehte (Grund damals: eine echte
     Listen-Zeile passte nicht in eine schmale Grid-Spalte, siehe Nutzerbericht
     17.08.2026). Ergebnis: Grid- und Listen-Ansicht sahen auf Desktop absolut
     identisch aus - der Toggle veraenderte die aktive Klasse, aber nichts
     Sichtbares mehr. Jetzt bekommt NUR die Karten-Ansicht die Mehrspaltigkeit;
     die Listen-Ansicht bleibt einspaltig (voller .phone-Breite) und behaelt
     dadurch ihre kompakte Zeilen-Optik aus der Basis-CSS (weiter oben in
     meine-immobilien.html) - der Ueberlapp-Grund von damals (schmale Spalte)
     entfaellt so, ohne dass die beiden Ansichten wieder gleich aussehen. */
  .property-list.grid-view{ grid-template-columns:1fr 1fr; }
}

@media (min-width:1000px){
  .phone{ max-width:760px; }
  .shell{ max-width:760px; }
  .fab{ max-width:760px; }
  .property-list.grid-view{ grid-template-columns:1fr 1fr 1fr; }
}

/* Bottom-Navigation wird auf Desktop-Breite zur festen oberen Topbar.
   :has() sorgt dafuer, dass NUR Seiten mit einer echten nav.bottom-nav
   betroffen sind - alle anderen Seiten (Formulare, Unterseiten) bleiben
   unangetastet, ohne dass jede Seite einzeln markiert werden muss.
   Der Content-Bereich (.phone) bleibt dabei ueber body{justify-content:center}
   horizontal mittig - die Topbar schiebt ihn nur per padding-top nach unten. */
@media (min-width:900px){
  body:has(nav.bottom-nav){
    padding-top:76px;
  }
  nav.bottom-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
    top:0 !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    height:76px;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:8px;
    padding:0 24px;
    border-top:none;
    border-bottom:1px solid var(--border);
  }
  nav.bottom-nav .nav-item{
    flex:0 0 auto;
    flex-direction:row;
    justify-content:center;
    gap:8px;
    padding:10px 18px;
    border-radius:10px;
  }

  /* Ab hier genug Platz fuer eine einzeilige Kopfzeile (siehe components.js,
     wo flex-wrap:wrap die Handy-Vorgabe ist) - Umschalter+Konto-Badge wieder
     neben Titel/Begruessung statt in eigener Zeile. !important noetig aus
     demselben Grund wie bei nav.bottom-nav oben: components.js haengt sein
     CSS per JS ans Ende von <head> und gewinnt sonst die Kaskade, auch
     innerhalb dieser Media Query. */
  header{ flex-wrap:nowrap !important; }
  .header-toggle-slot{ flex:0 0 auto !important; justify-content:flex-end !important; }

  /* Ab hier sitzt die Nav-Leiste oben statt unten (siehe oben) - .fab braucht
     also keinen Nav-Abstand mehr am unteren Rand, nur noch einen normalen
     Rand zum Viewport. */
  .fab{ bottom:24px; }
}

/* ---------- Seite auf die Handybreite zwingen (Version 383) ----------
   Nutzerbericht 21.08.2026 mit zwei Screenshots: "In der mobilen ansicht,
   sollte das bild auf das format vom Handy gezwungen werden. wenn ich auf
   nachrichten gehe kann ich [seitlich schieben]". Auf den Bildern ist die
   ganze Seite verschoben – einmal ist der Titel links abgeschnitten, einmal
   der Sende-Knopf rechts.

   URSACHE im konkreten Fall war die Nachrichten-Eingabe: ein <textarea> in
   einer Flex-Zeile hat von sich aus min-width:auto, also eine automatische
   MINDESTbreite aus seinem cols-Attribut (20 Zeichen). Zusammen mit dem
   44px-Anhangknopf und dem breiten Textknopf "Senden" passte die Zeile auf
   schmalen Geräten nicht mehr – und weil eine Flex-Zeile nicht umbricht,
   wuchs stattdessen die ganze Seite. Version 382 hat genau das behoben
   (min-width:0 am Feld, 34px-Symbolknöpfe statt Textknopf).

   WARUM TROTZDEM DIESE REGELN: der Fehler war auf dem Handy des Nutzers zu
   sehen, im Testbrowser aber nicht – Chrome auf Android nimmt die
   automatische Mindestbreite ernst, Chrome auf dem Rechner schrumpft das Feld
   trotzdem. Ein Fehler, den man lokal nicht sieht, lässt sich lokal auch nicht
   ausschließen. Deshalb hier eine Grenze, die unabhängig von der Ursache gilt:
   nichts kann die Seite noch seitlich aufziehen.

   overflow-x:clip statt hidden ist der Grund, warum zwei Zeilen dastehen:
   "hidden" macht aus <html> einen Scrollbehaelter und bricht damit
   position:sticky (meine-immobilien.html hat eine klebende Kopfzeile,
   rundgang.html ebenfalls). "clip" schneidet nur ab, ohne Scrollbehaelter –
   moderne Browser nehmen die zweite Zeile, aeltere fallen auf die erste
   zurueck. */
html{
  overflow-x:hidden;
  overflow-x:clip;
}
body{ max-width:100%; }

/* Einzelne Bausteine, die erfahrungsgemaess ausbrechen: Medien mit eigener
   Naturgroesse und Kaesten mit unumbrechbarem Inhalt. Tabellen und
   Code-Bloecke duerfen dabei INNEN scrollen - abschneiden waere dort
   Informationsverlust, seitlich schieben der ganzen Seite aber auch keine
   Loesung.
   BEWUSST OHNE <svg>: die App zeichnet ihre Symbole als Inline-SVG mit fester
   Groesse (width="18" o.ae.). Ein max-width:100% darauf rechnet gegen den
   umgebenden Kasten und laesst Symbole in engen Flex-Zeilen zusammenfallen -
   es wuerde also genau die Icons kaputtmachen, die nie zu breit waren. */
img, video, canvas, iframe{ max-width:100%; }
table, pre{ max-width:100%; overflow-x:auto; }

/* Eingabefelder in Flex-Zeilen: siehe Ursache oben. min-width:0 nimmt ihnen
   die automatische Mindestbreite, sodass sie schrumpfen statt die Zeile
   aufzuziehen. Bewusst nur fuer Felder INNERHALB einer Flex-Zeile - ein Feld,
   das allein in einem Formular steht, soll seine Breite behalten. */
input, textarea, select{ max-width:100%; }
.chat-eingabe input, .chat-eingabe textarea,
.send-row input, .send-row textarea,
.composer-row input, .composer-row textarea{ min-width:0; }
