/* ==========================================================================
   GROWIT — Adaptions-Layer
   Wird auf jeder Seite ALS LETZTES eingebunden und korrigiert zwei Dinge,
   die sich über alle Seiten ziehen:
     A) Darstellung auf jeder Bildschirmbreite (320 px bis 4K)
     B) sichtbare Kanten in Farbverläufen
   Jede Regel hier beruht auf einer gemessenen Stelle, nicht auf Vermutung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A1 · Kein seitliches Wackeln mehr
   Das ausgeblendete Mobil-Menü steht rechts neben der Seite und erzeugte
   auf schmalen Geräten bis zu 100 px Überbreite. `clip` schneidet das ab,
   ohne — anders als `hidden` — den mitscrollenden Kopfbereich zu zerstören.
   -------------------------------------------------------------------------- */
html { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}
body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   A2 · Mitwachsender Seitenrand statt fester 48 px
   Auf dem Telefon bleibt so mehr Platz für Inhalt, auf großen Monitoren
   bekommt die Seite Luft.
   -------------------------------------------------------------------------- */
:root { --gutter: clamp(18px, 4.4vw, 48px); }
.shell { width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; }

/* Sehr breite Monitore: Inhalt darf etwas mitwachsen, sonst wirkt die Seite verloren */
@media (min-width: 1660px) { :root { --shell: 1290px; } }
@media (min-width: 2100px) { :root { --shell: 1380px; } }

/* Nichts darf aus seinem Kasten ragen */
img, svg, video, canvas, iframe { max-width: 100%; }
h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   A3 · Zwischenstufe „Tablet quer" (bisher sprang das Layout von 1200 auf 900)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Logo-Wand Partnerseite: 6 Logos waren nur noch 130 px breit */
  .pk-wall__row { grid-template-columns: repeat(3, 1fr); row-gap: clamp(24px, 4vw, 34px); }
}

@media (max-width: 960px) {
  /* Formular: zwei Felder nebeneinander wurden zu schmal zum Tippen */
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------------------------
   A4 · Telefon: Bausteine, die noch zweispaltig gequetscht waren
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  /* Kennzahlen: vier Zahlen nebeneinander wurden unter 1000 px zu gedrängt */
  .valueline__stats { grid-template-columns: repeat(2, 1fr); }
}

/* Bank-Schritte auf der Startseite: drei Karten nebeneinander liessen ab
   1000 px nur noch 156 px pro Absatz — gemessen. */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

/* Auf dem kleinsten Telefon frassen die beiden Innenabstaende (dunkle Tafel
   40 px + Karte 26 px) 132 der 320 verfuegbaren Pixel auf. Der Fliesstext
   stand dadurch nur 179 px breit — gemessen. */
@media (max-width: 560px) {
  .bank__panel { padding: clamp(22px, 5.6vw, 40px); border-radius: var(--r-lg); }
  .step { padding: 20px 18px 22px; }
  .steps { margin-top: 34px; gap: 14px; }
}

/* KI-Seite, Nutzen-Karten: drei Spalten ergaben ab 900 px 165 px Textbreite. */
@media (max-width: 900px) {
  .roi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .roi-grid { grid-template-columns: 1fr; }
}

/* Leistungsumfang: Symbol und Text nebeneinander liessen auf dem kleinsten
   Telefon nur 182 px fuer den Text. Untereinander liest es sich besser. */
@media (max-width: 400px) {
  .deliver-item { flex-direction: column; gap: 12px; }
}

@media (max-width: 680px) {
  /* KI-Seite: Nutzen-Kacheln hatten Überschrift + Fließtext auf 185 px */
  .ki-benefits, .ki-benefits--2, .gen-benefits { grid-template-columns: 1fr; }
  .lx-compare, .vs-grid { grid-template-columns: 1fr; }
  .deliver-grid { grid-template-columns: 1fr; }
}

/* Foto-Mosaik: unter 520 px standen die Bilder nur noch 130 px breit
   nebeneinander. Untereinander wirken sie deutlich hochwertiger.
   Wichtig: das Spann-Kommando des ersten Fotos muss mit zurückgesetzt
   werden, sonst legt der Browser eine leere zweite Spalte an. */
@media (max-width: 520px) {
  .lx-trio { grid-template-columns: 1fr; grid-template-rows: auto; }
  .lx-trio > .lx-shot:nth-child(1) { grid-column: auto; grid-row: auto; }
}

@media (max-width: 480px) {
  /* Kennzahlen auf der Startseite: 135 px pro Zahl war zu eng für die Beschriftung */
  .valueline__stats { grid-template-columns: 1fr; gap: 0; }
  .vstat { padding: 18px 0; border-top: 1px solid var(--line); }
  .vstat:first-child { border-top: 0; padding-top: 0; }
  .vstat::before { display: none !important; }
}

/* Redaktionsplan-Grafik (Social / Wohnungsgenossenschaften):
   sieben Wochentage nebeneinander wurden auf dem Telefon 26 px schmal. */
@media (max-width: 620px) {
  .lx-cal { padding: 14px 12px; }
  .lx-cal__grid { gap: 4px; }
  .lx-cal__day { padding: 8px 2px; min-width: 0; }
  .lx-cal__day span { font-size: .62rem; letter-spacing: 0; }
  .lx-cal__tag { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   A4b · Automatisierungs-Rad (KI-Seite) auf dem Telefon
   Der Beschreibungstext stand in der Radmitte. Dort ist der Kreis 169 px
   breit — der Text lief über den Rand und legte sich über die Symbole.
   Auf schmalen Geräten bleibt in der Mitte nur Nummer, Titel und Balken;
   der Text wandert als eigene Karte unter die Pfeile.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .mietwheel__hub-text { display: none; }
  .mietwheel__hub-title { font-size: clamp(.98rem, 4.4vw, 1.2rem); }
  .mietwheel__hub-bar { margin-top: 12px; }
  .mietwheel__mobiltext {
    max-width: 46ch;
    margin: clamp(18px, 4vw, 26px) auto 0;
    padding: 18px 20px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .84);
    font-size: .95rem;
    line-height: 1.6;
    text-align: left;
  }
}
@media (min-width: 701px) {
  .mietwheel__mobiltext { display: none; }
}

/* --------------------------------------------------------------------------
   A5 · Bedienbarkeit auf Touchgeräten: nichts unter 44 px antippbar
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .nav a, .footer a, .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .faq-item summary, .faq-q { min-height: 48px; }
}

/* --------------------------------------------------------------------------
   B · Sichtbare Kanten in Farbverläufen
   Große weiche Verläufe zeigen auf vielen Bildschirmen Ringe („Banding"),
   weil nur 256 Helligkeitsstufen zur Verfügung stehen. Eine hauchfeine
   Körnung über der Seite bricht diese Stufen auf — dasselbe Mittel, das
   Druckereien als Rasterung nutzen. Sichtbar ist sie nicht, die Ringe sind weg.
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media print { body::after { display: none; } }

/* --------------------------------------------------------------------------
   Sehr schmale Geräte (bis 400 px)
   Der große Button hat dort nicht mehr in einer Zeile Platz. Statt ihn
   abzuschneiden, darf der Text umbrechen und das Polster schrumpfen.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding: 15px 20px; font-size: .96rem; max-width: 100%; }
  .btn--lg svg { flex: 0 0 auto; }
  .bank__panel .btn--lg,
  .lsec--cta .btn--lg { width: 100%; justify-content: center; }
}