/* =========================================================
   MDM — Mobile & Tablet Optimierungen
   Eingebunden nach styles.css und layout.css
   ========================================================= */

/* ── 1. Globaler Overflow-Schutz ── */
html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── 2. Tablet (max 860px) ── */
@media (max-width: 860px) {

  /* Hero: Logo ist ein PNG 800×130px — Größe via inline-style geregelt.
     --mdm-fs steuert nur hero-tag-Schriftgröße + hero-kicker padding. */
  .hero-mdm-block {
    --mdm-fs: clamp(90px, 16vw, 130px);
  }
  .hero-grid {
    padding-block: clamp(40px, 7vw, 70px);
  }
  .hero-lead {
    font-size: 16px;
    margin: 18px 0 24px;
  }

  /* Section headings */
  .sec-head h2 { font-size: clamp(26px, 5vw, 38px); }
  .sec-head { margin-bottom: 28px; }

  /* Feature articles */
  .feature h3 { font-size: clamp(22px, 3.5vw, 32px); }

  /* Issue year numbers */
  .issue-info .yr { font-size: clamp(48px, 9vw, 90px); }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ── 3. Smartphone (max 600px) ── */
@media (max-width: 600px) {

  /* Base */
  body { font-size: 15px; }

  /* Topbar: einzeilig kompakt */
  .topbar .wrap {
    min-height: 28px;
    font-size: 10px;
    letter-spacing: .08em;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Site-Header kleiner */
  .site-header .wrap { min-height: 56px; }
  .mdm-nav-logo { height: 18px; }

  /* Hero: MDM-Logo auf Smartphone — --mdm-fs wirkt nur auf hero-tag */
  .hero-mdm-block {
    --mdm-fs: 72px;   /* fest: tag-font = 72×0.112 ≈ 8px → wird via inline-style überschrieben */
  }
  .hero {
    min-height: 0;
    overflow: hidden;
  }
  .hero-grid {
    padding-block: clamp(32px, 8vw, 52px);
    max-width: 100%;
  }
  .hero-kicker {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }

  /* Hero-Text */
  .hero-lead {
    font-size: 14px;
    line-height: 1.5;
    margin: 14px 0 20px;
    max-width: 100%;
  }

  /* Buttons: untereinander, volle Breite */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .btn {
    justify-content: center;
    text-align: center;
    font-size: 12px;
    padding: .75em 1.2em;
  }

  /* Section headings */
  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
  }
  .sec-head h2 { font-size: clamp(24px, 6.5vw, 32px); }
  .sec-head .lead { font-size: 14px; }

  /* Feature articles */
  .feature {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .feature h3 { font-size: clamp(20px, 5.5vw, 28px); }
  .feature p { font-size: 14px; }
  .feature .by { font-size: 13px; }

  /* Artikel-Buttons */
  .feature [class*="btn"] {
    font-size: 12px;
    padding: .7em 1em;
  }

  /* Year dividers */
  .year-header { gap: 12px; margin: 40px 0 20px; }
  .year-num { font-size: clamp(32px, 8vw, 44px) !important; }
  .year-desc { font-size: 13px; }

  /* Semester-Header */
  .sem-header { margin: 24px 0 14px; }

  /* Issue section */
  .issue-info .yr { font-size: clamp(44px, 11vw, 72px); }
  .issue-info h3 { font-size: clamp(18px, 4.5vw, 24px); }
  .issue-info .toc li { font-size: 13px; }

  /* Projekt-Kacheln */
  .pdf-grid--sq {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .pdf-grid--sq .pdf-card h3 {
    font-size: clamp(12px, 2.8vw, 14px);
  }
  .pdf-grid--sq .pdf-card .ex { display: none; } /* Zu viel Text auf kleinem Screen */

  /* Abschlussarbeiten: Kachel vertikal, volle Breite */
  .thesis-card .th-info h3 { font-size: 13px; }
  .thesis-card .th-info .ex { font-size: 11px; -webkit-line-clamp: 2; }

  /* Video-Grid */
  .vid-grid { grid-template-columns: 1fr; gap: 16px; }
  .vid-card { flex-direction: row; }
  .vid-card .vc-thumb { flex: 0 0 130px; }

  /* MDD/Magazin-Grid: 1 Spalte + Lead-Text kürzen */
  #mdd2026 { grid-template-columns: 1fr !important; }
  .card-lead {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Artikel-Grid */
  .artikel-grid { grid-template-columns: 1fr !important; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .foot-brand .wordmark { font-size: 22px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Linestrip dünner */
  .linestrip { height: 32px; }

  /* PDF overlay auf Handy */
  #pdf-overlay .pdf-frame-wrap {
    width: 100%;
    height: 90vh;
    margin: 5vh 0 0;
    border-radius: 8px 8px 0 0;
  }
}

/* ── 4. Sehr kleine Screens (max 380px) ── */
@media (max-width: 380px) {
  .hero-mdm-block { --mdm-fs: 52px; }
  .hero-actions .btn { font-size: 11px; padding: .7em 1em; }
  .pdf-grid--sq { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 5. Tablet Landscape / iPad (601–980px) ── */
@media (min-width: 601px) and (max-width: 980px) {
  .hero-mdm-block { --mdm-fs: clamp(100px, 16vw, 140px); } /* nur für hero-tag Schriftgröße */
  .hero-lead { font-size: 16px; }
  .hero-actions { flex-wrap: wrap; gap: 10px; }
  .hero-actions .btn { font-size: 12px; }

  /* 2 Spalten statt 3 in Feature-Grid */
  .feature { gap: clamp(20px, 3vw, 36px); }

  /* PDF-Grid: 3 Spalten auf Tablet */
  .pdf-grid--sq { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── 6. Touch-friendly tap targets ── */
@media (hover: none) {
  .btn { min-height: 44px; }
  .nav a { min-height: 44px; display: flex; align-items: center; }
  .pdf-card .open-hint { opacity: 0.6; } /* hint immer leicht sichtbar auf Touch */
  .story-link .open-hint { opacity: 0.5; }
}