/*
 * Vorschau Startseite mobil, 02.11.2026 (Alex: „die seite wirkt auf mobile (samsung s22) noch recht textlastig“).
 * Seit 02.11.2026 Standard der Startseite (Variante B, Alex); Vorschau ?mobil=a bzw. ?mobil=aus nur außerhalb trigonus.de (functions.php, Block tg_mobil_vorschau).
 * Alle Regeln nur unter 768 px. Wortlaut unverändert.
 * Doku: external_projects/trigonus-legacy/arbeit/startseite-mobil/90-bericht.md
 */
@media (max-width: 767px) {

  /* ---------- A: Kopf (Zusatz Alex: Subtagline mobil aus, Abstand Tagline–Logo kleiner) ---------- */
  body.tg26.tg-mobil-a .header_section .logo .tg-tagline2 { display: none; }
  body.tg26.tg-mobil-a .header_section .logo > a { min-height: 44px; }
  body.tg26.tg-mobil-a .header_section .logo p:first-of-type { margin-top: 2px; }

  /* ---------- A: H1 ---------- */
  /* Heute 27 px: „Den Wind steuert niemand.“ ist bei 360 px 330,6 px breit, Spalte 330 px → „niemand.“ bricht allein um (3 Zeilen).
     clamp: 360 px → 23,8 px, 412 px → 26 px, 320 px → 21 px; je Satz eine Zeile. */
  body.tg26.tg-mobil-a .tg-h3--fahne .tg-h3__fahne .tg-h3__h1,
  body.tg26.tg-mobil-a #tg-start .tg-h3__h1 { font-size: clamp(20px, 6.6vw, 26px); line-height: 1.18; }

  /* ---------- A: Hero-Block straffen ---------- */
  body.tg26.tg-mobil-a #tg-start .tg-h3__ich ol a { padding-top: 8px; padding-bottom: 8px; }
  body.tg26.tg-mobil-a #tg-start .tg-h3__ich small { line-height: 1.35; }
  body.tg26.tg-mobil-a #tg-start .tg-h3__beleg { margin-top: 20px; }
  /* 02.11.2026 Gesetz der Nähe: H1 → Einleitung vorher 22 px (12 px Rand + 10 px Rasterabstand), H2 → Text 16 px; jetzt 12 px wie am Desktop */
  body.tg26.tg-mobil-a .tg-h3--fahne .tg-h3__fahne { margin-bottom: 2px; }

  /* ---------- A: Abschnittsrhythmus und Typo ---------- */
  body.tg26.tg-mobil-a #tg-start .tg-sa__blk { padding-top: 32px; padding-bottom: 40px; }
  body.tg26.tg-mobil-a #tg-start .tg-sa__blk h2 { font-size: 24px; }
  body.tg26.tg-mobil-a #tg-start .tg-sa__blk p,
  body.tg26.tg-mobil-a #tg-start .tg-sa__blk li { line-height: 1.5; }
  body.tg26.tg-mobil-a #tg-start .tg-sa__liste > li { padding-top: 18px; padding-bottom: 18px; }
  body.tg26.tg-mobil-a #tg-start .tg-sa__haken > li { padding-top: 14px; padding-bottom: 14px; }
  body.tg26.tg-mobil-a #tg-start .tg-sa__blk h3.tg-sa__haken-kopf { margin-top: 32px; }

  /* ---------- B: Icons der Einstiegsliste als Kreis (Bildanker statt reiner Textliste) ---------- */
  body.tg26.tg-mobil-b #tg-start .tg-h3__ich ol a { grid-template-columns: 38px 1fr; column-gap: 12px; align-items: start; }
  body.tg26.tg-mobil-b #tg-start .tg-h3__ic { width: 38px; height: 38px; border-radius: 50%; background: #EEF2FA; color: var(--tg-logo, #13318a); font-size: 17px; transform: none; margin-top: 2px; }

  /* ---------- B: Belege als Karten ---------- */
  body.tg26.tg-mobil-b #tg-start .tg-h3__chronik { gap: 8px; border-top: 0; }
  /* 02.11.2026 Alex: Doppellinie über den Belegen (2 px Linie des Belegblocks + 3 px Kartenoberkanten, 8 px Abstand) → Linie des Blocks entfällt */
  body.tg26.tg-mobil-b #tg-start .tg-h3__beleg { border-top: 0; }
  body.tg26.tg-mobil-b #tg-start .tg-h3__chronik li,
  body.tg26.tg-mobil-b #tg-start .tg-h3__chronik li:nth-child(odd),
  body.tg26.tg-mobil-b #tg-start .tg-h3__chronik li:nth-child(even) { padding: 10px 10px 12px; border: 0; border-top: 3px solid var(--tg-logo, #13318a); background: #F4F7FC; border-radius: 0 0 6px 6px; }

  /* ---------- Villa randlos (seit 02.11.2026 auch in A, Alex) ---------- */
  body.tg26.tg-mobil-a #tg-start .tg-sa__villa { margin-left: -15px; margin-right: -15px; }
  body.tg26.tg-mobil-a #tg-start .tg-sa__villa img { border: 0; outline: 0; }
  body.tg26.tg-mobil-a #tg-start .tg-sa__villa figcaption { padding-left: 15px; padding-right: 15px; }

  /* ---------- B: lange Absätze einklappen (Skript js/startseite-mobil-vorschau.js setzt .tg-mk) ---------- */
  body.tg26.tg-mobil-b .tg-mk { position: relative; overflow: hidden; max-height: var(--tg-mk-h, 6.5em);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent); }
  body.tg26.tg-mobil-b #tg-start .tg-mk:not(.tg-mk--offen) { margin-bottom: 0; }
  body.tg26.tg-mobil-b .tg-mk.tg-mk--offen { max-height: none; -webkit-mask-image: none; mask-image: none; }
  body.tg26.tg-mobil-b .tg-mk-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0 0 4px; padding: 6px 0; border: 0; background: none;
    font: 600 15px/1.2 "Open Sans", Arial, sans-serif; color: var(--tg-brand, #13318a); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  body.tg26.tg-mobil-b .tg-mk-knopf::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  body.tg26.tg-mobil-b .tg-mk-knopf[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
}
@media (min-width: 768px) {
  .tg-mk-knopf { display: none !important; }
}