/* Smartphone-Anpassungen (feedback.lernkit.de). Gilt NUR für Telefone:
   Hochformat = Breite ≤ 760 px, Querformat = Höhe ≤ 500 px.
   iPad (Hochformat ≥ 768 px breit, Querformat ≥ 744 px hoch) und Desktop bleiben unberührt.
   Inline-Styles erscheinen je nach Seite als "padding:38px…" (statisch) oder "padding: 38px…" (React) – beide Schreibweisen sind erfasst. */

/* ---- Hoch- und Querformat ---- */
@media (max-width:760px), (orientation:landscape) and (max-height:500px) {
  html, body { overflow-x:hidden; }
  /* Beta-Hinweis in der Kopfzeile kurz fassen */
  .beta-hinweis, .beta { font-size:0 !important; line-height:0 !important; padding:0 6px !important; flex:1 1 auto !important; }
  .beta-hinweis strong, .beta strong { display:none !important; }
  .beta-hinweis::before, .beta::before { content:"Beta-Version · Darstellung ohne Gewähr"; font:400 10.5px/1.3 'Inter',sans-serif; color:#64748B; }
  body > header, body > div > header { padding-left:14px !important; padding-right:14px !important; }
  /* Karten dürfen innen scrollen statt die ganze Seite zu verbreitern */
  main > section, main > div > section, main > div > div > section { max-width:100%; overflow-x:auto; }
}

/* ---- Hochformat ---- */
@media (max-width:760px) and (orientation:portrait) {
  [style*="padding:38px 32px 34px"], [style*="padding: 38px 32px 34px"], [style*="padding:44px 32px 40px"], [style*="padding: 44px 32px 40px"] { padding:22px 18px 20px !important; }
  [style*="padding:38px 32px 34px"] h1, [style*="padding: 38px 32px 34px"] h1, [style*="padding:44px 32px 40px"] h1, [style*="padding: 44px 32px 40px"] h1 { font-size:28px !important; line-height:1.15 !important; margin:4px 0 8px !important; }
  [style*="padding:38px 32px 34px"] p, [style*="padding: 38px 32px 34px"] p, [style*="padding:44px 32px 40px"] p, [style*="padding: 44px 32px 40px"] p { font-size:14px !important; line-height:1.45 !important; }
  main { padding-left:12px !important; padding-right:12px !important; }
  /* Startseite: Kacheln untereinander */
  .tiles, div[style*="grid-template-columns:repeat(3, 1fr)"], div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns:1fr !important; }
}

/* ---- Querformat (Telefon) ---- */
@media (orientation:landscape) and (max-height:500px) {
  .beta-hinweis, .beta { display:none !important; }
  body > header, body > div > header { min-height:44px !important; padding-top:4px !important; padding-bottom:4px !important; }
  /* Banner schlank: nur Zeile + Titel; Hinweistext und Tags ausgeblendet */
  [style*="padding:38px 32px 34px"], [style*="padding: 38px 32px 34px"], [style*="padding:44px 32px 40px"], [style*="padding: 44px 32px 40px"] { padding:8px 16px 8px !important; }
  [style*="padding:38px 32px 34px"] h1, [style*="padding: 38px 32px 34px"] h1, [style*="padding:44px 32px 40px"] h1, [style*="padding: 44px 32px 40px"] h1 { font-size:20px !important; line-height:1.15 !important; margin:1px 0 0 !important; }
  [style*="padding:38px 32px 34px"] > div > *:nth-child(n+3), [style*="padding: 38px 32px 34px"] > div > *:nth-child(n+3), [style*="padding:44px 32px 40px"] > div > *:nth-child(n+3), [style*="padding: 44px 32px 40px"] > div > *:nth-child(n+3), [style*="padding:38px 32px 34px"] > p, [style*="padding: 38px 32px 34px"] > p, [style*="padding:44px 32px 40px"] > p, [style*="padding: 44px 32px 40px"] > p, [style*="padding:38px 32px 34px"] > div > p, [style*="padding: 38px 32px 34px"] > div > p, [style*="padding:44px 32px 40px"] > div > p, [style*="padding: 44px 32px 40px"] > div > p { display:none !important; }
  [style*="padding:38px 32px 34px"] > div, [style*="padding: 38px 32px 34px"] > div, [style*="padding:44px 32px 40px"] > div, [style*="padding: 44px 32px 40px"] > div { display:block !important; }
  main { padding-top:12px !important; padding-left:12px !important; padding-right:12px !important; }
  /* Startseite: höchstens zwei Kacheln nebeneinander */
  .tiles, div[style*="grid-template-columns:repeat(3, 1fr)"], div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns:1fr 1fr !important; }
  /* Seiten mit .hero-Karte (Slider, Terminabfrage, Pad, Kanban, Board-Work) */
  .hero-kard .hero, .kard > .hero, .wrap .hero { padding:10px 18px 10px !important; }
  .hero-kard .hero h1, .kard > .hero h1, .wrap .hero h1 { font-size:20px !important; margin:0 !important; }
  .kard > .hero > p, .kard > .hero > .eb, .wrap .hero p { display:none !important; }
  .ov .kard > .hero > p { display:block !important; }
}