/* Mobile Navigation: Sticky-Kopfzeile mit „Menü“-Button, Navigation klappt darunter auf. */
.nav-toggle { display:none; }

@media (max-width:860px) {
  .site-header {
    position:sticky; top:0; z-index:100;
    height:64px; min-height:64px; padding:0 20px;
    flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:12px;
    box-shadow:0 2px 14px #32171a40;
  }
  .brand { font-size:22px; white-space:nowrap; }

  .nav-toggle {
    display:inline-flex; align-items:center; gap:10px;
    margin:0; padding:10px 12px; background:transparent; color:#fff;
    border:1px solid #ffffff55; border-radius:4px;
    font:700 13px Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  }
  .nav-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .nav-icon { position:relative; display:inline-block; width:22px; height:16px; }
  .nav-icon span {
    position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px;
    transition:transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .nav-icon span:nth-child(1) { top:0; }
  .nav-icon span:nth-child(2) { top:7px; }
  .nav-icon span:nth-child(3) { top:14px; }
  .nav-open .nav-icon span:nth-child(1) { top:7px; transform:rotate(45deg); }
  .nav-open .nav-icon span:nth-child(2) { opacity:0; }
  .nav-open .nav-icon span:nth-child(3) { top:7px; transform:rotate(-45deg); }

  .site-header nav.site-nav {
    position:absolute; left:0; right:0; top:100%;
    display:flex; flex-direction:column; gap:0; width:auto; padding:0;
    background:var(--wine); overflow:hidden; white-space:normal;
    max-height:0; visibility:hidden;
    transition:max-height .3s ease, visibility 0s linear .3s;
    box-shadow:0 14px 24px #32171a40;
  }
  .nav-open nav.site-nav { max-height:420px; visibility:visible; transition:max-height .3s ease, visibility 0s; }
  .site-header nav.site-nav a,
  .site-header nav.site-nav a:not(:first-child) {
    display:block; padding:15px 20px; font:16px Arial,sans-serif; color:#fff;
    border-top:1px solid #ffffff1f;
  }
  .site-header nav.site-nav a:active,
  .site-header nav.site-nav a:hover { background:var(--wine2); }

  /* Sprungziele nicht unter der festen Kopfzeile verstecken */
  section[id], [id="teilnehmen"], [id="faq"], [id="regeln"] { scroll-margin-top:76px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header nav.site-nav, .nav-icon span { transition:none !important; }
}

/* "overflow-x:hidden" auf body macht body zum Scroll-Container und verhindert die feste Kopfzeile.
   "clip" schneidet genauso ab, ohne Sticky zu stören; ältere Browser nutzen nur html. */
html { overflow-x:hidden; }
body { overflow-x:visible; }
@supports (overflow:clip) { html, body { overflow-x:clip; } }

/* ---------- Admin-Navigation ---------- */
.admin-nav-links { display:contents; }

@media (max-width:860px) {
  /* Im Adminbereich ist die Admin-Leiste die feste Leiste, nicht die öffentliche Kopfzeile. */
  body:has(.admin-nav) .site-header { position:static; box-shadow:none; }

  .admin-nav {
    position:sticky; top:0; z-index:110;
    display:block; margin:0 -18px 28px; padding:0;
    overflow:visible; white-space:normal; border-radius:0;
    background:#fff; box-shadow:0 4px 18px #32171a26;
  }
  .admin-nav .nav-toggle.admin-nav-toggle {
    display:flex; align-items:center; gap:10px; width:100%;
    margin:0; padding:14px 18px; border:0; border-radius:0;
    background:#fff; color:var(--wine);
    font:700 13px Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  }
  .admin-nav-current { margin-left:auto; color:var(--muted); font-weight:400; letter-spacing:0; text-transform:none; font-size:14px; }
  .admin-nav-links {
    position:absolute; left:0; right:0; top:100%;
    display:flex; flex-direction:column;
    background:#fff; overflow:hidden;
    max-height:0; visibility:hidden;
    transition:max-height .3s ease, visibility 0s linear .3s;
    box-shadow:0 14px 24px #32171a26;
  }
  .admin-nav.nav-open .admin-nav-links { max-height:560px; visibility:visible; transition:max-height .3s ease, visibility 0s; }
  .admin-nav .admin-nav-links a { padding:14px 18px; border-top:1px solid #eadfd1; border-radius:0; font-size:15px; color:var(--ink); }
  .admin-nav .admin-nav-links a.active { background:var(--wine); color:#fff; }
}

/* Schmale Handys und große Systemschrift: nichts darf seitlich aus dem Bild laufen. */
h1, h2, h3, .eyebrow, .brand { overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
@media (max-width:860px) {
  .site-header { gap:10px; }
  .brand { flex:1 1 auto; min-width:0; font-size:clamp(17px, 5.6vw, 22px); overflow:hidden; text-overflow:clip; }
  .nav-toggle { flex:none; }
  .form-section { grid-template-columns:minmax(0,1fr); }
  .form-section > *, .form-intro { min-width:0; }
}
@media (max-width:420px) {
  h2 { font-size:clamp(26px, 8.6vw, 36px); }
  .legal h1, .admin-panel h1, .admin-login h1 { font-size:clamp(28px, 9.5vw, 42px); }
  .hero h1 { font-size:clamp(40px, 14vw, 54px); }
}
@media (max-width:360px) {
  .nav-toggle { padding:10px; gap:0; }
  .nav-toggle .nav-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
.admin-nav-links a.admin-nav-own:not(.active) { color:var(--wine); box-shadow:inset 0 -3px 0 var(--gold); }