/* Kein seitliches Scrollen auf der ganzen Website (13.09.2026) */
html, body { overflow-x: clip; max-width: 100vw; }  /* clip statt hidden: hidden macht html/body zum Scroll-Container und blockiert das Mausrad */
#root { max-width: 100vw; overflow-x: clip; }
/* =====================================================================
   NeoCasa – Feinschliff fuer die Bedienung am Telefon.

   Bewusst als eigene Datei: die Suchseite wird von React gerendert und
   laedt neocasa.css nicht. Diese Datei liegt auf allen Seiten und aendert
   nur Verhalten, das unabhaengig vom Aufbau der jeweiligen Seite gilt.
   Es werden keine fremden Klassennamen ueberschrieben - das waere bei
   einem Bundle, dessen Quellcode hier nicht vorliegt, zu riskant.
   ===================================================================== */

/* Randbereiche moderner Telefone: Kerbe oben, Bedienleiste unten.
   Erst zusammen mit viewport-fit=cover im Kopf der Seite wirksam. */
:root {
  --nc-safe-top: env(safe-area-inset-top, 0px);
  --nc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nc-safe-left: env(safe-area-inset-left, 0px);
  --nc-safe-right: env(safe-area-inset-right, 0px);
}

html {
  /* iOS vergroessert Text im Querformat eigenmaechtig; das zerreisst
     jedes Layout, das auf feste Groessen setzt. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Das Ueberdehnen am Seitenende zeigt sonst den weissen Hintergrund
     des Browsers - der deutlichste Hinweis darauf, dass man doch nur
     eine Webseite vor sich hat. */
  overscroll-behavior-y: contain;
}

@media (pointer: coarse) {
  /* Die Verzoegerung von rund 300 Millisekunden vor jedem Tippen faellt
     damit weg. Sie ist der Hauptgrund, warum sich Webseiten am Telefon
     traeger anfuehlen als Apps. */
  a, button, [role="button"], input, select, textarea, label, summary {
    touch-action: manipulation;
  }
  /* Der graue Kasten beim Antippen wirkt wie ein Browserartefakt. */
  a, button, [role="button"], summary {
    -webkit-tap-highlight-color: transparent;
  }
  /* Bedienelemente, die kleiner als eine Fingerkuppe sind, trifft man
     nicht zuverlaessig. 44 Punkte sind die uebliche Untergrenze. */
  button, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  /* Unter 16 Pixeln zoomt iOS beim Hineintippen in ein Feld hinein und
     springt danach nicht zurueck. */
  input, select, textarea {
    font-size: max(16px, 1em);
  }
}

/* Seitliches Wischen zwischen Bildern und Kacheln soll einrasten statt
   irgendwo stehenzubleiben. */
.nc-lb-strip,
.nc-snap-x {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.nc-lb-strip > *,
.nc-snap-x > * { scroll-snap-align: center; }

/* Im installierten Zustand gibt es keine Browserleisten mehr. Dann darf
   der Inhalt bis an den Rand, muss aber die Systemflaechen aussparen. */
@media (display-mode: standalone) {
  body {
    padding-left: var(--nc-safe-left);
    padding-right: var(--nc-safe-right);
  }
  /* Text markieren ist in einer App unueblich und stoert beim Wischen.
     Eingabefelder und Fliesstext bleiben ausdruecklich markierbar. */
  body { -webkit-user-select: none; user-select: none; }
  p, li, td, h1, h2, h3, input, textarea, [contenteditable] {
    -webkit-user-select: text; user-select: text;
  }
}

/* Wer das Ausblenden von Bewegung eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   Notbehelf fuer die Suchseite (React), bis der Quellcode vorliegt.

   Die Suche legt Liste und Karte in ein Raster:
     grid h-screen grid-rows-[auto_1fr] lg:grid-cols-[minmax(480px,44%)_1fr]
   Ein Rasterfeld traegt von sich aus min-width:auto und darf deshalb nicht
   schmaler werden als sein Inhalt. Am Telefon blies das den Listenbereich
   auf die Breite auf, die er am Rechner haette: gemessen 975 statt 390
   Pixel, einzelne Inseratskarten 925 Pixel breit. Die Seite liess sich
   seitwaerts schieben und die Karten ragten aus dem Bild.

   min-width:0 hebt genau diese Sperre auf. Unterhalb von 1024 Pixeln, wo
   die zweispaltige Ansicht ohnehin nicht gilt, aendert das sonst nichts.

   Gehoert langfristig in app/src als Tailwind-Klasse min-w-0 am Rasterfeld.
   ===================================================================== */
@media (max-width: 1023px) {
  .grid.h-screen > * { min-width: 0; }
}

/* ---------- Beschreibungstext gegliedert (desc-format.js / nc_description_html) ---------- */
.nc-desc { color: var(--ink-soft, #4b5563); line-height: 1.65; font-size: 1rem; }
.nc-desc p { margin: 0 0 14px; }
.nc-desc p:last-child, .nc-desc ul:last-child { margin-bottom: 0; }
.nc-desc h4 { margin: 20px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink, #111827); }
.nc-desc h4:first-child { margin-top: 0; }
.nc-desc ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.nc-desc li { position: relative; padding: 10px 14px 10px 40px; background: var(--bg-2, #f3f6f4); border: 1px solid var(--line, #e5e9e7); border-radius: 10px; }
.nc-desc li::before { content: ""; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand, #0e8a52); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat; }
.nc-desc li b, .nc-desc p b { color: var(--ink, #111827); font-weight: 600; }
@media (min-width: 720px) { .nc-desc ul { grid-template-columns: 1fr 1fr; } .nc-desc ul:has(li:only-child) { grid-template-columns: 1fr; } }

/* ---------- Startseite: Funktionskarten (14.09.2026) ----------
   Die App-CSS schaltet Karten-Raster mit 4+ Karten auf «auto-fit 200px» um.
   Auf breiten Bildschirmen entstehen so 5 schmale Spalten und die dunkle
   Karte wird endlos hoch; die festen 220px-Zeilen lassen laengere Texte
   ueberlaufen. Hier: 3 Spalten, Zeilen mindestens 220px, sonst nach Inhalt. */
@media (min-width: 768px) {
  .grid.gap-5.md\:grid-cols-3:has(> :nth-child(4)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(220px, auto);
  }
}