/* ------------------------------------------------------------------
   2026-09-23 - Mobile: Artikel nicht mehr rechts abgeschnitten.
   Ursache: Artikel-Raster mit `1fr` (= minmax(auto,1fr)) waechst auf die
   Mindestbreite des breitesten Kindes (z.B. CTA mit festem 220px-Foto),
   html/body haben overflow-x:hidden -> der Rest wird unsichtbar abgeschnitten.
   Gilt fuer beide Artikel-Vorlagen (.main-layout/.article-card und
   .blog-article-layout/.blog-article--white).
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .main-layout, .blog-article-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .main-layout > *, .blog-article-layout > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 700px) {
  .hero-area { padding-left: 16px !important; padding-right: 16px !important; }
  .main-layout, .blog-article-layout, .related-section { padding-left: 12px !important; padding-right: 12px !important; }
  .article-card, .blog-article--white { padding: 28px 20px !important; }
  .article-card, .blog-article--white, .article-card *, .blog-article--white * { overflow-wrap: break-word; }
  .article-card h1, .blog-article--white h1 { font-size: 1.75rem !important; }
  .article-card h2, .blog-article--white h2 { font-size: 1.4rem !important; }
  .article-card img, .article-card svg, .article-card video, .article-card iframe,
  .blog-article--white img, .blog-article--white svg, .blog-article--white video, .blog-article--white iframe { max-width: 100%; height: auto; }
  .article-card table, .blog-article--white table { display: block; max-width: 100%; overflow-x: auto; }
  .article-card pre, .blog-article--white pre { max-width: 100%; overflow-x: auto; }
  /* CTA mit Daniel-Foto: Foto ueber den Text statt daneben */
  .cta-section { padding: 1.5rem !important; }
  .cta-section > div[style*="display:flex"], .cta-section > div[style*="display: flex"] { flex-direction: column; gap: 20px !important; align-items: flex-start !important; }
  .cta-section > div[style*="display"] > div[style*="flex-shrink:0"], .cta-section > div[style*="display"] > div[style*="flex-shrink: 0"] { width: 100% !important; max-width: 260px; height: auto !important; aspect-ratio: 11 / 15; }
  .cta-section .cta-button { white-space: normal; }
  .related-grid { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: 1fr !important; }
  .data-highlight, .source-box, .chart-container { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
  .quote-box { padding-right: 1.1rem !important; }
  /* Inline-Raster in Artikeln (Verwandte Artikel, Kachel-Reihen) einspaltig */
  .article-card div[style*="grid-template-columns:repeat(3"], .article-card div[style*="grid-template-columns: repeat(3"],
  .article-card div[style*="grid-template-columns:repeat(4"], .article-card div[style*="grid-template-columns: repeat(4"],
  .blog-article--white div[style*="grid-template-columns:repeat(3"], .blog-article--white div[style*="grid-template-columns: repeat(3"],
  .blog-article--white div[style*="grid-template-columns:repeat(4"], .blog-article--white div[style*="grid-template-columns: repeat(4"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Footer: Spalten untereinander */
  .footer__links, .footer__grid { grid-template-columns: minmax(0, 1fr) !important; }
  .footer__brand, .footer__links > * { min-width: 0; max-width: 100%; }
  /* Footer der uebersetzten Artikel (.site-footer/.footer-inner) */
  .footer-inner { grid-template-columns: minmax(0, 1fr) !important; gap: 1.5rem !important; }
  .footer-inner > * { min-width: 0; }
}

/* Blog-Uebersicht: Cluster-Kopfzeile darf umbrechen (Meta-Angabe lief rechts raus) */
@media (max-width: 600px) {
  .bcluster-header { flex-wrap: wrap; }
  .bcluster-meta { margin-left: 0; flex-basis: 100%; }
}

/* Blog-Uebersicht: Hauptkarte je Themenblock war auf dem Handy nur das Bild.
   Ursache im Index-CSS: `.bcluster-main, .bcluster-grid--four .bcluster-main .bcard-img { height:180px }`
   trifft durch das Komma auch die Karte selbst -> Titel + Anreisser abgeschnitten. */
@media (max-width: 900px) {
  .bcluster-main { height: auto !important; }
}

/* Blog-Uebersicht: Abschluss-CTA mit Daniel-Foto untereinander statt nebeneinander */
@media (max-width: 700px) {
  .blog-cta-section { padding: 36px 16px !important; }
  .blog-cta-section > div[style*="display:flex"] { flex-direction: column; gap: 20px !important; }
  .blog-cta-section > div[style*="display:flex"] > div[style*="flex-shrink:0"] { width: 100% !important; max-width: 240px; height: auto !important; aspect-ratio: 3 / 4; }
  .blog-cta-section > div[style*="display:flex"] > div { min-width: 0; max-width: 100%; }
}

/* ------------------------------------------------------------------
   2026-09-23 Nachbesserung nach der Live-Pruefung (Agenten-Review, 49 Befunde):
   (a) Woerter rissen ohne Trennstrich mitten durch -> Silbentrennung + weniger Einrueckung
   (b) Diagramme wurden im jetzt schmalen Artikel zu klein -> Diagrammkasten auf Kartenbreite,
       breite SVG-Diagramme behalten eine lesbare Mindestbreite und scrollen im Kasten
   (c) CTA-Text wurde nach 3 Zeilen abgeschnitten (alte Kuerzung aus blog-v4.css)
   (d) Handy-Menue zeigte nur 1 von 7 Eintraegen, Menue-Symbol fast unsichtbar (bestand vorher)
   (e) Blog-Index: Kennzahl "2600+" bei 320 px rechts abgeschnitten (bestand vorher)
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  /* (a) */
  .article-card :is(p, li, h1, h2, h3, h4, blockquote, td),
  .blog-article--white :is(p, li, h1, h2, h3, h4, blockquote, td) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 6 5; }
  .article-card :is(a, button, .cta-button, .cta-btn), .blog-article--white :is(a, button, .cta-button, .cta-btn) { -webkit-hyphens: manual; hyphens: manual; }
  .article-card .benefit-frame, .article-card .benefit-recap,
  .blog-article--white .benefit-frame, .blog-article--white .benefit-recap { padding: 20px 16px !important; }
  .article-card .benefit-list, .article-card .benefit-recap-list,
  .blog-article--white .benefit-list, .blog-article--white .benefit-recap-list { margin-left: 0 !important; padding-left: 0 !important; }
  /* (b) */
  .article-card .chart-container, .blog-article--white .chart-container {
    margin-left: -18px !important; margin-right: -18px !important;
    padding-left: 4px !important; padding-right: 4px !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .chart-container svg[viewBox^="0 0 5"], .chart-container svg[viewBox^="0 0 6"] { min-width: 460px; max-width: none; }
  /* (c) */
  html .cta-box .cta-content p { display: block; -webkit-line-clamp: unset; max-height: none; overflow: visible; }
}
@media (max-width: 768px) {
  /* (d) Die Nav hat backdrop-filter -> sie wird Bezugsrahmen fuer das fixierte Menue,
     `bottom:0` rechnet dann gegen die 73 px hohe Nav statt gegen den Bildschirm. */
  .nav__links.active { bottom: auto !important; height: calc(100vh - 72px); height: calc(100dvh - 72px); }
  .nav .nav__hamburger span { background: #F5F0E8 !important; }
}
@media (max-width: 400px) {
  /* (e) */
  .bhero-stats { flex-wrap: wrap; row-gap: 16px; }
}

/* ------------------------------------------------------------------
   2026-09-24 Runde 3 nach der zweiten Live-Pruefung:
   Menue jetzt benutzbar -> Untermenue sichtbar, zugeklappte Sprachlisten ohne Leerraum,
   lesbare Sprachen, Platz unter dem Menue-CTA fuer den Chat-Button; CTA-Knopf bricht
   ausgewogen um; Karten-Titel im Blog-Index; Logo der US-Serie nicht mehr angeschnitten.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .nav__links.active { padding-bottom: 104px !important; }
  .nav__links.active .nav-dropdown-menu { display: flex !important; flex-direction: column; align-items: center; padding: 4px 0 0 !important; }
  .nav__links.active .nav-dropdown-menu a.nav-dropdown-item { padding: 6px 12px; font-size: 0.85rem; }
  .nav__links.active .lang-switcher:not(.active) .lang-switcher__dropdown { display: none !important; }
  .nav__links.active .lang-switcher__option { color: #E8EDF4 !important; }
  .nav__links.active .lang-switcher__option.active { color: #D4AF37 !important; }
  .nav__tagline { display: none !important; }
}
@media (max-width: 700px) {
  .cta-button, .cta-btn { text-wrap: balance; }
}
@media (max-width: 600px) {
  .bcard-title, .bside-title { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 6 5; }
}