/* ═══════════════════════════════════════════════════════════════════════
   mobil-unternehmen.css — Handy/Tablet-Regeln NUR für die Seiten
   Über uns · Referenzen · Standorte · Zertifikate · Ratgeber · drei Blog-
   Beiträge · Impressum · Datenschutz · Firmen-Identität (de + en).
   Wird als letztes Stylesheet geladen; Kopf und Fuß bleiben unberührt.
   Umbruchpunkte wie in site.css: Handy ≤ 600 px, Tablet 601–1024 px.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Handy UND Tablet (≤ 1024) ─────────────────────────────────────────── */
@media (max-width:1024px){
  /* Textlinks im Inhalt: Tippfläche auf 44 px heben, ohne den Zeilenabstand
     zu ändern (Innenabstand oben/unten wirkt bei Inline-Elementen nur auf
     die Trefferfläche, nicht auf den Textfluss). */
  .krumen a, .fliess a:not(.btn), .prosa a:not(.btn), .antwort a, .hinweis a, .kasten a,
  .branche a, .ok-liste a, .liste a, .beitrag-txt a, .karte a:not(.btn),
  .person a, .recht a{ padding-block:.7rem }
  .krumen a{ padding-block:.9rem }   /* 16 px Schrift → 45 px Trefferfläche */

  /* Lange Wörter in Karten (z. B. „Zuverlässigkeitsüberprüfung") laufen nicht
     mehr über die Kartenkante. */
  .karte p, .karte h3{ overflow-wrap:break-word; hyphens:auto }
  .branche li, .ok-liste li{ overflow-wrap:break-word }
}

/* ── Handy (≤ 600) ─────────────────────────────────────────────────────── */
@media (max-width:600px){
  /* Seitenkopf: „Datenschutzerklärung" sprengte bei 360 px die Grid-Spalte
     (1fr hat min-content-Breite) — minmax(0,…) + Notumbruch. */
  .kopf-grid{ grid-template-columns:minmax(0,1fr) }
  .kopf-txt{ min-width:0 }
  .kopf-txt h1{ overflow-wrap:break-word; hyphens:auto }

  /* Objekt-Schaustück (.ok) über dem Text: eigener Platz, nicht die halbe
     Seite — 18 rem statt 22 rem, Abstand zum Text fest. */
  .ok{ gap:1.4rem }
  .ok-bild{ max-width:min(100%,18rem) }
  .ok-txt{ min-width:0 }

  /* Abschluss-Aufruf: zwei Buttons untereinander, bündig (der zweite trug
     inline margin-left:.5rem und stand versetzt). */
  .split p > .btn{ margin-left:0 !important }
  .split p > .btn + .btn{ margin-top:.6rem }

  /* Blog-Schaustück (900 px breite Grafik mit 9–10 px Beschriftung): bei
     350 px wäre die Schrift 3,5 px. Die Grafik behält 680 px und wird im
     Kasten seitlich gewischt; die Überschrift steht ÜBER der Grafik statt
     darüberliegend und bleibt beim Wischen links kleben. */
  .raster{ grid-template-columns:minmax(0,1fr) }
  .raster > .artikel{ min-width:0; max-width:100% }
  .artikel .setpiece{ max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
                      scrollbar-width:thin; overscroll-behavior-x:contain }
  .artikel .setpiece-kopf{ position:sticky; left:0; top:auto; display:block;
                           padding:1rem 1.1rem .55rem; margin:0; width:max-content; max-width:100% }
  .artikel .setpiece svg{ width:680px; min-width:680px; max-width:none }

  /* Firmen-Identität: Vorschau-Kästen dürfen mitwachsen, Bild bleibt skaliert. */
  .karten--3 .karte figure{ height:auto !important; min-height:14rem; padding:.75rem }
  .karten--3 .karte figure img{ max-height:16rem !important }
}

/* ── Tablet (601–1024) ─────────────────────────────────────────────────── */
@media (min-width:601px) and (max-width:1024px){
  /* Objekt-Schaustück NEBEN dem Text (links), nicht darüber — Marcus' Wunsch
     für Tablet. site.css stellt es ≤ 900 px über den Text; hier zurück in
     zwei Spalten, beide mit minmax(0,…) gegen Überlauf. */
  .ok{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center;
       gap:clamp(1.5rem,4vw,3rem) }
  .ok-bild{ order:-1; max-width:none; width:100%; margin:0 }
  .ok-txt{ min-width:0 }

  /* Kachel-Raster mit drei Spalten (Zertifikate, Firmen-Identität) sind bei
     768 px zu schmal (Text lief über die Kartenkante, Buttons brachen um):
     zwei Spalten; bei ungerader Anzahl füllt die letzte Karte die Zeile —
     keine allein stehende Kachel. */
  .karten--3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .karten--3 > .karte:last-child:nth-child(odd){ grid-column:1 / -1 }

  /* Führung: zwei Personen nebeneinander ab 700 px (site.css erst ab 840). */
  @media (min-width:700px){ .fuehrung{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem } }
}

/* Ratgeber-Übersicht 601–799 px: statt drei riesiger Hochkant-Karten
   untereinander je Karte Bild links, Text rechts. Ab 800 px greift das
   Drei-Spalten-Raster aus site.css unverändert. */
@media (min-width:601px) and (max-width:799px){
  .beitraege .beitrag{ flex-direction:row; align-items:stretch }
  .beitraege .beitrag figure{ flex:0 0 42%; aspect-ratio:auto; min-height:15rem }
  .beitraege .beitrag-txt{ flex:1 1 auto; min-width:0 }
}