/* ══════════════════════════════════════════════════════════════════
   NEXETH — Lesbarkeit auf Telefon und Tablet (22.09.2026)
   ──────────────────────────────────────────────────────────────────
   Gemessen auf nexeth.art bei 375 px: 61 Textstellen unter 12 px auf der
   Startseite, 44 im Shop. Die kleinsten lagen bei 6,7 px.

   Die gesperrten Versalien-Labels sind Absicht und bleiben klein — sie
   sind Teil der Gestaltung. Angehoben wird nur bis zu einer Grenze, ab
   der sie auf einem Telefon überhaupt entzifferbar sind:

       Labels und Kürzel   →  mindestens 10 px
       Fließtext           →  mindestens 13 px

   Auf dem Desktop ändert sich nichts. Die Regeln greifen erst ab
   1023 px abwärts, also Tablet und Telefon.

   Warum keine pauschale Regel: eine Mindestgröße für „alles" gibt es in
   CSS nicht, und die Wurzelschrift anzuheben würde auch Abstände und
   Überschriften mitskalieren — das würde das Layout verschieben. Deshalb
   eine gezielte Liste, aus der Messung gewonnen.

   Warum !important: Viele dieser Labels werden über ID-Selektoren gesetzt
   (z. B. #ckBanner .ck-btn). Dagegen kommt keine Klassenregel an, egal in
   welcher Reihenfolge die Dateien geladen werden. Der Block ist eng gefasst
   — nur Schriftgröße und Sperrung, nur unter 1024 px — deshalb ist das hier
   vertretbar und nicht der Anfang einer !important-Kaskade.

   ENTFERNEN: diese Datei aus den HTML-Dateien austragen. Es hängt nichts
   anderes daran, keine bestehende Regel wurde angefasst.
══════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  /* ── Labels, Kürzel, Marken: mindestens 10 px ──────────────────── */
  .wc-meta,
  .shop-badge,
  .shop-tag,
  .gi-sub,
  .ck-btn,
  .ck-pill,
  .ck-drawer-title,
  #ckSave,
  .prod-badge,
  .prod-badge.print,
  .prod-badge.digital,
  .prod-edition,
  .prod-card-sub,
  .prod-ov-cta,
  .feed-tag-chip,
  .support-tile-logo,
  .footer-legal-link,
  .sayhi-link,
  .h-tag,
  .h-scroll-lbl,
  .r-num,
  .comm-pre,
  .sh-pre,
  .sh-btn,
  .shop-catalog-intro-back,
  .shop-catalog-intro-kicker,
  .show-more-btn,
  .pf-copy,
  .pf-badge,
  .lb-x,
  #cms_skills_pre,
  #cms_shop_pre {
    font-size: 10px !important;
  }

  /* Die Sperrung darf bei 10 px nicht mehr so weit sein — sonst zerfallen
     kurze Wörter in Einzelbuchstaben. */
  .shop-badge,
  .prod-badge,
  .prod-edition,
  .feed-tag-chip,
  .h-tag,
  .sh-pre,
  .comm-pre {
    letter-spacing: .18em !important;
  }

  /* ── Fließtext und Namen: mindestens 13 px ─────────────────────── */
  .shop-name,
  .gi-cap,
  .r-intro,
  #cms_patreon_btn_label,
  #cms_gumroad_btn_label {
    font-size: 13px !important;
  }

  /* ── Cookie-Banner und Einwilligungs-Schublade ─────────────────
     Hier standen Texte bei 7,0 px — ausgerechnet an der Stelle, an der
     eine Einwilligung informiert erfolgen muss. Der Text steht teils in
     Elementen ganz ohne Klasse, deshalb hier über den Behälter. */
  #ckBanner, #ckBanner *,
  #ckDrawer, #ckDrawer * {
    font-size: 11px !important;
    letter-spacing: .04em !important;
  }
  #ckBanner .ck-btn, #ckDrawer .ck-btn,
  #ckSave, .ck-pill {
    font-size: 11px !important;
    letter-spacing: .16em !important;
  }
  .ck-drawer-title {
    font-size: 12px !important;
    letter-spacing: .2em !important;
  }

  /* Formularbeschriftungen und Eingaben: 16 px verhindert, dass iOS beim
     Antippen automatisch hineinzoomt. Das ist der Grund für genau 16. */
  label { font-size: 12px !important; }
  input, select, textarea { font-size: 16px !important; }
}