/* ------------------------------------------------------------------
   Best-Wellness . Anpassungen fuer Telefon und kleines Tablet
   Friecom, September 2026

   Greift ausschliesslich unterhalb der angegebenen Breiten.
   Die Gestaltung am Rechner bleibt unveraendert.
   ------------------------------------------------------------------ */

/* === 1. Seitenbreite ============================================== */
@media (max-width: 860px) {

  /* Ohne diese Regel zaehlen Innenabstaende zur Elementbreite hinzu.
     Dadurch werden Bloecke breiter als das Display und die Seite
     laesst sich seitlich verschieben. */
  *, *::before, *::after { box-sizing: border-box; }

  img, svg, video, iframe { max-width: 100%; }
}

@media (max-width: 700px) {

  /* Raster mit fester Mindestspaltenbreite koennen darunter nicht
     schrumpfen und ragen ueber den Rand. Ab 280 px Mindestbreite passt
     am Telefon ohnehin nur eine Spalte, also wird gestapelt. */
  [style*="minmax(280px"], [style*="minmax(300px"],
  [style*="minmax(320px"], [style*="minmax(340px"],
  [style*="minmax(360px"], [style*="minmax(380px"],
  [style*="minmax(400px"], [style*="minmax(420px"],
  [style*="minmax(440px"], [style*="minmax(460px"],
  [style*="minmax(480px"], [style*="minmax(500px"] {
    grid-template-columns: 1fr !important;
  }

  /* Zweispaltige Aufteilungen mit Randleiste und feste Zweier- oder
     Dreierraster stapeln ebenfalls. */
  [style*="grid-template-columns: minmax(170px"],
  [style*="grid-template-columns: minmax(180px"],
  [style*="grid-template-columns: minmax(240px"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 0.8fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {

  /* Auf schmalen Telefonen reicht auch fuer die kleineren Raster
     die Breite nicht mehr fuer zwei Spalten. */
  [style*="minmax(200px"], [style*="minmax(220px"],
  [style*="minmax(230px"], [style*="minmax(240px"],
  [style*="minmax(260px"],
  [style*="grid-template-columns: 150px"] {
    grid-template-columns: 1fr !important;
  }

  /* Massangaben wie "Schenkel 2 x 210 cm . H 200 cm" sind gegen
     Umbruch gesperrt und ragen dadurch ueber den Rand. Am schmalen
     Telefon duerfen sie umbrechen. */
  [style*="white-space: nowrap"] { white-space: normal !important; }

  /* Lange Bezeichnungen und Adressen sollen umbrechen statt
     die Zeile zu sprengen. */
  h1, h2, h3, p, a, li, td { overflow-wrap: break-word; }

  /* Tabellen bekommen einen eigenen Schiebebereich,
     statt die ganze Seite breit zu machen. */
  table { display: block; overflow-x: auto; max-width: 100%; }
}

/* === 2. Ueberschriften ============================================ */
@media (max-width: 640px) {

  /* Lange deutsche Woerter wie "Wirkungsweise" sind bei 60 px breiter
     als ein Telefondisplay. Das Wort kann nicht umbrechen und zieht
     die ganze Spalte ueber den Rand hinaus. Darum kleiner setzen. */
  [style*="font-size: 60px"] { font-size: 33px !important; }
  [style*="font-size: 58px"] { font-size: 32px !important; }
  [style*="font-size: 56px"] { font-size: 32px !important; }
  [style*="font-size: 52px"] { font-size: 31px !important; }
  [style*="font-size: 50px"] { font-size: 30px !important; }
  [style*="font-size: 46px"] { font-size: 29px !important; }
  [style*="font-size: 44px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 27px !important; }
  [style*="font-size: 38px"] { font-size: 26px !important; }
  [style*="font-size: 36px"] { font-size: 25px !important; }

  /* Mitwachsende Groessen: nur die Untergrenze absenken. */
  [style*="clamp(38px"] { font-size: clamp(26px, 7.4vw, 38px) !important; }
  [style*="clamp(40px"] { font-size: clamp(27px, 7.8vw, 40px) !important; }

  /* Raster- und Flexfelder duerfen schmaler werden als ihr laengstes
     Wort. Ohne diese Regel bestimmt das Wort die Spaltenbreite. */
  section > *, main > *, div > * { min-width: 0; }

  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
}

/* === 3. Bilder ==================================================== */
@media (max-width: 640px) {

  /* Aufmacher: die Kabine ist quadratisch fotografiert. In einem
     620 px hohen Kasten bleibt oben und unten viel Leere. */
  [style*="min-height: 620px"] {
    min-height: 0 !important;
    padding: 20px !important;
  }
  [style*="max-height: 620px"] { max-height: 74vw !important; }

  /* Querformat-Aufnahmen werden bei 520 px Hoehe stark beschnitten,
     es bleibt nur ein schmaler Ausschnitt uebrig. */
  img[style*="height: 520px"] {
    height: 62vw !important;
    min-height: 210px;
  }
  img[style*="height: 480px"] {
    height: 58vw !important;
    min-height: 200px;
  }
  img[style*="height: 440px"] {
    height: 54vw !important;
    min-height: 190px;
  }

  /* Modellkarten: die Kabinen sind quadratisch aufgenommen. Im
     4:3-Rahmen bleibt links und rechts Luft, die Kabine wirkt klein. */
  [style*="aspect-ratio: 4 / 3"] { aspect-ratio: 1 / 1 !important; }

  /* Sehr hohe Bildkaesten auf Bildschirmhoehe begrenzen. */
  [style*="height: 100vh"] { height: auto !important; min-height: 78vh; }
}

/* === 4. Bedienbarkeit ============================================= */
@media (max-width: 640px) {

  /* Schaltflaechen und Verweise gross genug zum Antippen. */
  a[style*="padding"], button { min-height: 44px; }

  /* Telefonnummern und E-Mail-Adressen nie abschneiden. */
  a[href^="tel:"], a[href^="mailto:"] { overflow-wrap: anywhere; }
}