/* ===== Noahs Arche – Responsive Fixes (mobil & Browser) ===== */

/* 0) Basisskalierung, sichere Defaults */
img, svg, video {max-width:100%; height:auto; display:block}
.container {max-width:1100px; margin:0 auto; padding:clamp(16px,2vw,24px)}
.logo {height:auto; max-height:56px}

/* Fallbacks für Browser ohne/backdrop-filter & clamp */
header {background:#ffffffE6}           /* leicht transparent statt blur */
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  header {background:#fff9; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}
}

/* Buttons & Touch-Ziele angenehmer */
.btn {min-height:44px; padding:12px 18px; border-radius:12px}
nav a {padding:8px 6px;}

/* Grids robuster machen (falls .grid-3/.grid-2 verwendet werden) */
.grid-3 {display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2 {display:grid; grid-template-columns:repeat(2,1fr); gap:18px}

/* Hero-Layout */
.hero-inner {display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.hero-image {width:100%; height:auto}

/* Karten */
.card {background:#fff; border:1px solid #dcdcdc; border-radius:16px; padding:16px}

/* Bänder/Infoboxen */
.band {display:flex; gap:12px; align-items:center; justify-content:space-between; 
       padding:12px 16px; border:1px solid #dcdcdc; border-radius:12px; background:#f8fafc}
.band.mini {padding:8px 12px}

/* ===== Breakpoints ===== */

/* <= 1200px: leichte Entzerrung */
@media (max-width: 1200px) {
  .hero-inner {grid-template-columns:1fr 1fr}
}

/* <= 992px: Tablet – größere Schriftabstände, 2er-Grid */
@media (max-width: 992px) {
  .grid-3 {grid-template-columns:repeat(2,1fr)}
  .hero-inner {grid-template-columns:1fr}
  .hero-card, .panel {margin-top:14px}
  .brand b {font-size:18px}
  nav {gap:8px}
}

/* <= 820px: iPad/kleine Laptops – Menü zentrieren, Lesbarkeit */
@media (max-width: 820px) {
  header .nav {flex-wrap:wrap; gap:10px}
  header nav {width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
  nav a {padding:10px 8px}
}

/* <= 768px: typische Smartphones – einspaltig, großzügige Ränder */
@media (max-width: 768px) {
  .grid-3, .grid-2 {grid-template-columns:1fr}
  .container {padding:16px}
  h1, h2 {line-height:1.25}
  .badge {display:inline-block; font-size:14px}
  .btn {width:100%; justify-content:center}
  .band {flex-direction:column; align-items:stretch}
  .hero-image {margin:8px 0 0}
}

/* <= 600px: kleine Phones – größere Tap-Ziele, Textbreite begrenzen */
@media (max-width: 600px) {
  body {font-size:16px; line-height:1.6}
  p, li {max-width:70ch}
  .brand img {max-height:44px}
  .brand b {font-size:17px}
  footer .container {gap:14px}
}

/* <= 480px: sehr schmale Geräte – alles zentriert, Luft lassen */
@media (max-width: 480px) {
  header .nav {justify-content:center}
  .kicker, small {font-size:12px}
  .subfoot {text-align:center}
}

/* ===== Safari/Edge kleine Kantenfälle ===== */

/* Verhindert klebenden Header auf iOS bei Scroll-Jitter */
@supports (-webkit-overflow-scrolling: touch) {
  header {position:sticky; top:0}
}

/* Sicherstellen, dass Links nicht um die Icons „springen“ */
.meta .chip {display:inline-flex; align-items:center}

/* Bilder in Karten nicht über die Rundung hinausragen */
.card img {border-top-left-radius:16px; border-top-right-radius:16px; object-fit:cover}

/* Navigation: Zeilenumbruch schön aussehen lassen */
nav a {white-space:nowrap}