/* Werbung 24/7 – mobile.css (Stand 2026-10-03)
   Gemeinsame Mobil-Korrekturen. Desktop (>= 1024 px) bleibt unverändert,
   außer: Hamburger-Menü-Elemente sind dort ausgeblendet. */

/* ---------- Grundlagen (Tablet + Mobil) ---------- */
@media (max-width: 1023px) {
  /* "anywhere" ließ Tabellen-/Flex-Spalten auf 1 Zeichen Breite schrumpfen */
  body { overflow-wrap: break-word; }
  img, video, canvas { max-width: 100%; }
  img { height: auto; }
  main p, main li, main td, main dd { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  main a[href^="mailto:"], main a[href^="http"] { overflow-wrap: anywhere; }

  /* Fließtext nie unter 14 px */
  .text-xs:not(.local-badge):not(.xmas-badge):not(.badge):not(.st) { font-size: .875rem; line-height: 1.35rem; }
  .local-badge, .xmas-badge, .badge { font-size: .8125rem; }

  /* genug Platz unten, damit der WhatsApp-Button den letzten Text/Links nicht verdeckt */
  footer[role="contentinfo"] { padding-bottom: 6rem; }

  /* Footer: lesbar + Tap-Ziele */
  footer[role="contentinfo"] ul.space-y-2\.5 > li { margin-top: 0 !important; }
  footer[role="contentinfo"] ul a { display: flex; align-items: center; min-height: 2.5rem; }
  footer[role="contentinfo"] p > a { display: inline-block; padding: .7rem .35rem; margin: -.35rem -.1rem; }
  footer[role="contentinfo"] ul + p.text-white, footer[role="contentinfo"] ul + p { margin-top: 1.25rem; }

  /* Karten-Darstellung statt Tabelle (Messekalender) */
  .fair-wrap { overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
  .fair-table, .fair-table tbody, .fair-table tr, .fair-table td { display: block; width: 100%; min-width: 0; }
  .fair-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .fair-table tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; row-gap: .15rem; align-items: center;
    background: #fff; border: 1px solid #e2e8f0 !important; border-radius: 1rem; padding: 1rem; margin-bottom: .75rem; min-width: 0;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
  }
  .fair-table td { padding: 0 !important; border: 0; white-space: normal !important; }
  .fair-table td:nth-child(1) { order: 1; font-weight: 700; color: #0f172a; font-size: .9375rem; }
  .fair-table td:nth-child(6) { order: 2; justify-self: end; text-align: right; }
  .fair-table td:nth-child(5) { order: 6; grid-column: 1 / -1; font-size: .875rem; line-height: 1.25rem; }
  .fair-table td:nth-child(5):empty { display: none; }
  .fair-table td:nth-child(5)::before { content: "Besucher: "; font-weight: 600; color: #64748b; }
  .fair-table td:nth-child(2) { order: 3; grid-column: 1 / -1; margin-top: .35rem; font-size: 1.0625rem; line-height: 1.35rem; }
  .fair-table td:nth-child(2) > div { margin-top: .15rem; font-size: .875rem; line-height: 1.25rem; }
  .fair-table td:nth-child(3) { order: 4; grid-column: 1 / -1; margin-top: .35rem; }
  .fair-table td:nth-child(4) { order: 5; grid-column: 1 / -1; font-size: .875rem; line-height: 1.25rem; }
  .fair-table td:nth-child(4) span { font-size: .875rem !important; }
  .fair-table td:nth-child(3)::before, .fair-table td:nth-child(4)::before {
    content: attr(data-label) ": "; font-weight: 600; color: #64748b; font-size: .875rem;
  }
  .fair-table td:nth-child(3) a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; font-size: 1rem; }
  .fair-table .st { font-size: .8125rem; padding: .3rem .8rem; }

  .fair-table tbody { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .fair-table tr { margin-bottom: 0; }
  /* Header-Elemente Tablet */
  nav[aria-label="Hauptnavigation"] a.w-9 { width: 2.75rem; height: 2.75rem; }
  nav[aria-label="Hauptnavigation"] .sm\:flex a.items-center { min-height: 2.75rem; }
  section#projekte a.text-amber-600.font-semibold { display: inline-block; padding: .7rem 0; }
  .grid-cols-3 > .p-6 { padding: .75rem; }
  .grid-cols-3 .text-4xl { font-size: 1.75rem; line-height: 2rem; }
  /* Tap-Ziele in Seiteninhalten */
  main a.py-2:not(.block):not(.flex):not(.inline-flex) { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; }
  main nav[aria-label] a, main > nav a { display: inline-block; padding: .7rem .55rem; margin: 0 -.45rem; }
  a.text-2xl { display: inline-block; padding: .4rem 0; }
  a.block.hover\:text-amber-600 { padding-top: .7rem; padding-bottom: .7rem; }
  .mtap { display: inline-block; padding: .7rem 0; margin: -.3rem 0; }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  /* WhatsApp-Floating-Button: kleiner, näher am Rand, deckt Inhalte weniger ab */
  a.fixed[href*="wa.me"] { width: 3rem; height: 3rem; right: 1rem; bottom: 1rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
  a.fixed[href*="wa.me"] .icon { font-size: 1.1rem; }

  /* Seiten-Container: einheitliche 16-px-Ränder (wie Navigation) */
  .max-w-screen-xl.px-6 { padding-left: 1rem; padding-right: 1rem; }

  /* Mini-Kennzahlen (3 Spalten) auf kleinen Displays */
  .badge { white-space: nowrap; }
  li.flex.justify-between > span.font-semibold { white-space: nowrap; margin-left: .75rem; }
  a.flex.justify-between.gap-3 { flex-wrap: wrap; row-gap: .15rem; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .fair-table tbody { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .fair-table tr { align-content: start; }
}

/* ---------- Mobil-Menü (Hamburger) ---------- */
.mnav-toggle, .mnav-panel { display: none; }
@media (max-width: 1023px) {
  .mnav-toggle {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; min-width: 3rem; padding: 0 .9rem;
    background: #fff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 1rem; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-toggle:hover { background: #f1f5f9; }
  .mnav-toggle:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  .mnav-toggle svg { width: 1.5rem; height: 1.5rem; flex: none; }
  .mnav-toggle .mnav-ic-close { display: none; }
  .mnav-toggle[aria-expanded="true"] .mnav-ic-open { display: none; }
  .mnav-toggle[aria-expanded="true"] .mnav-ic-close { display: block; }
  .mnav-panel { display: block; border-top: 1px solid #e2e8f0; padding: .25rem 0 1rem; max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
  html.js .mnav-panel:not(.is-open) { display: none; }
  .mnav-list { list-style: none; margin: 0; padding: 0; }
  .mnav-list a { display: flex; align-items: center; min-height: 3rem; padding: .5rem .25rem; font-size: 1.0625rem; font-weight: 600; color: #1e293b; text-decoration: none; border-bottom: 1px solid #f1f5f9; }
  .mnav-list a:hover, .mnav-list a:focus-visible { color: #b45309; background: #fffbeb; }
  .mnav-list a:focus-visible, .mnav-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: -3px; }
  .mnav-actions { display: grid; gap: .6rem; margin-top: 1rem; }
  .mnav-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .6rem 1rem; border-radius: 1.5rem; font-size: 1rem; font-weight: 700; text-decoration: none; text-align: center; }
  .mnav-btn-primary { background: #0f172a; color: #fff; }
  .mnav-btn-primary:hover { background: #1e293b; }
  .mnav-btn-wa { background: #25D366; color: #fff; }
  .mnav-btn-wa:hover { background: #128C7E; }
  .mnav-btn .icon { font-size: 1.25rem; }
  /* offenes Menü: Floating-WhatsApp ausblenden, damit nichts überdeckt wird */
  html.mnav-open a.fixed[href*="wa.me"] { display: none; }
}