/* r65-handy.css — ausgelagert am 2026-08-11 (Gewichts-Operation Teil 2). Quelle: byte-gleicher Inline-Block, Hash 2d4e9ac76f59. ACHTUNG: Aenderung wirkt auf alle Seiten, die diese Datei laden. */

/* ============================================================
   r65-handy  ·  2026-07-30  ·  Handy-Feinschliff (Kuerzel: handy)
   Steht bewusst ganz unten im Seitenkoerper: viele Seiten laden ihre
   eigenen Stil-Bloecke erst dort nach und wuerden einen Block im Kopf
   ueberstimmen. Wirkt NUR bis 440 Pixel Bildschirmbreite - am Rechner
   aendert sich nichts.
   Drei Ziele: (1) nichts laeuft seitlich aus dem Bild,
   (2) jede Tipp-Flaeche ist mindestens 44 Pixel hoch,
   (3) kein Text faellt unter 16 Pixel.
   ============================================================ */
@media (max-width:440px){

  /* 1. Lange Merk-Zeilen duerfen umbrechen, statt aus dem Bild zu laufen */
  .chip, .chip a, .s2q-chip, .t-item, .pl-item,
  .aug-proof-line .pl-item, .s2q-chips .s2q-chip{ white-space:normal !important; }

  /* 2. Kopfleiste bleibt im Bild */
  .topbar, #topbar, .ml-topbar, .k-topbar, header.top, header.topbar{
    column-gap:8px; padding-left:12px; padding-right:12px;
  }
  .langswitch, .lang-switch, #langToggle, .nav-right, .top-actions{
    column-gap:0; min-width:0;
  }
  .langswitch button, .lang-switch button, .lang-btn, #langToggle button{
    min-width:44px !important; padding-left:5px; padding-right:5px;
  }
  .brand, .ml-brand, .k-brand, .marke, .brand-mark, .topnav{ min-width:0; }

  /* 3. Tipp-Flaechen mindestens 44 Pixel hoch */
  .topbar a, .topbar button, #topbar a, #topbar button,
  .ml-topbar a, .k-topbar a, header.top a, header.kopf a,
  .container > header a, .foot-links a, .k-foot__links a, footer nav a,
  .sr-row a, .funnel-line a, .wg-nav a, .rueckweg-2807 a, .zurueck a,
  .links a, .wc-top a, .wc-related a, .lex-verwandt a, .augnx-links a,
  .footer-links a, .ps-weiter a, .knopfreihe button, .nl-consent label,
  .machine-caption a, .introcard a, .chips .chip a, .s2q-chip a,
  a.back, a.back-play, a.back-link, a.wc-back, a.mailbtn, a.t-item, a.chip,
  a.mt-pill, a.badge, a.check, a.tlink, a.pna-link, a.wn-more, a.scrollcue,
  a.augnx-link, a.card-link, a.sprung-inhalt, a.skip-link, a.skip,
  #pLink, #pClose, #cardX, #kiPanelX, #kiBadge, #navtoggle, .nav-toggle,
  button#klang, button#klangKnopf{
    min-height:44px !important; display:inline-flex; align-items:center;
    box-sizing:border-box;
  }
  ul.vita-list li details summary{
    min-height:44px !important; display:flex; align-items:center;
  }
  .toolbar input, .toolbar select{ min-height:44px !important; }

  /* 4. Knoepfe, die nur ein Zeichen zeigen, brauchen auch Breite */
  .sr-row a, #cardX, #kiPanelX, #pClose, #navtoggle, .nav-toggle,
  .knopfreihe button, button#klang, button#klangKnopf{
    min-width:44px !important; justify-content:center;
  }

  /* 5. Ankreuz-Kaestchen gross genug zum Treffen */
  .nl-consent input[type=checkbox]{ width:26px; height:26px; }

  /* 6. Nachtrag: diese Bedien-Links waren als Fliesstext gesetzt. Eine
     Mindesthoehe wirkt bei Fliesstext nicht - deshalb hier die Form
     ausdruecklich auf Flaeche stellen. Fliesstext-Links MITTEN im Satz
     sind bewusst NICHT dabei, sonst wuerden Zeilen auseinandergerissen. */
  .funnel-line a, footer > a, .evidence a, .begriffs-werk figcaption a,
  .augnx-links a, .wg-nav a, .foot-links a, .k-foot__links a,
  .rueckweg-2807 a, .ps-weiter > a, .chips .chip > a{
    display:inline-flex !important; align-items:center;
    min-height:44px !important;
  }

  /* 7. Sonderfall Fuss-Wegweiser (footer .funnel-line):
     Diese Links tragen die Sprach-Marke data-de bzw. data-en. Die
     Sprach-Umschaltung setzt darauf display:inline mit Vordrang - die Form
     laesst sich dort also nicht aendern, eine Mindesthoehe verpufft.
     Deshalb kommt die Hoehe hier ueber den Innenabstand, und der
     Zeilenabstand waechst mit, damit sich die Flaechen nicht ueberlappen. */
  footer .funnel-line{ line-height:48px !important; }
  footer .funnel-line a{
    padding-top:15px !important; padding-bottom:15px !important;
  }

  /* 8. Gleiches Muster in den Fuss-Leisten mit den Pflicht-Links
     (Impressum, Datenschutz, Haftung ...). Auch dort stehen die Links als
     Fliesstext mit Trennpunkten dazwischen. */
  .footbar, footer .wrap.foot, body > .footer > span{
    line-height:48px !important;
  }
  .footbar > span > a, footer .wrap.foot > span > a, body > .footer > span > a{
    padding-top:15px !important; padding-bottom:15px !important;
  }
}