:root{
  --bg:#f7f3ea; /* warmes Beige */
  --panel:#ffffff;
  --text:#1b1b1b;
  --muted:#6b7280;
  --primary:#1f6f3f; /* jagdgrün */
  --primary-contrast:#ffffff;
  --danger:#b91c1c;
  --success:#065f46;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.4; font-size:18px;
}
.site-header{padding:12px 16px}
.site-title{margin:0; font-size:1.25rem; color:var(--primary)}
.container{max-width:720px; margin:0 auto; padding:16px}

.card{background:var(--panel); border-radius:var(--radius); padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.06)}
.card-title{margin:0 0 12px; font-size:1.2rem}

.label{display:block; margin-top:12px; margin-bottom:6px; font-weight:600}
.input{width:100%; padding:14px 12px; border:1px solid #d1d5db; border-radius:12px; font-size:1rem}
.input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(31,111,63,.15)}
.code-row{display:flex; align-items:center; gap:8px}
.input.code{max-width:140px; text-align:center; letter-spacing:0.1em}
.sep{opacity:.6}

.btn{display:inline-block; margin-top:16px; padding:14px 16px; border-radius:9999px; border:1px solid #d1d5db; background:#fff; color:#111; text-decoration:none; font-weight:600}

/* /assets/css/app.css – Button-Schrift auf dem Handy größer machen */
.btn.primary{
  font-size: clamp(1.2rem, 3vw + 0.6rem, 1.35rem); /* ~21–22px auf Smartphones */
  padding: 16px 18px; /* etwas mehr Höhe für bessere Tap-Ziele */
background:var(--primary); color:var(--primary-contrast); border-color:transparent}
.btn.primary:active{transform:translateY(1px)}

.hint{color:var(--muted); font-size:.9rem; margin-top:8px}

.flash-wrap{margin-bottom:12px}
.flash{padding:12px; border-radius:12px; margin:8px 0; font-weight:600}
.flash.error{background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca}
.flash.success{background:#dcfce7; color:#065f46; border:1px solid #bbf7d0}
.flash.info{ background:#e0f2fe;   /* sky-100 */ color:#075985;        /* sky-800 */ border:1px solid #bae6fd /* sky-200 */}

.site-footer{padding:24px 16px; color:var(--muted); text-align:center}

/* Login-Button über volle Breite */
.btn.block{width:100%; display:block; text-align:center}

/* Code-Zeile auf volle Breite des E-Mail-Felds bringen */
.code-row{
  display:grid;                 /* überschreibt vorheriges flex */
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:8px;
  width:100%;
}
/* überschreibt die frühere max-width der Code-Felder */
.input.code{
  max-width:none;
  width:100%;
  text-align:center;
  letter-spacing:0.1em;
}

/* Status-Pills */
.pill{display:inline-block; padding:6px 10px; border-radius:9999px; font-weight:700; font-size:.95rem}
.status-open{background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe}
.status-registered{background:#dcfce7; color:#065f46; border:1px solid #bbf7d0}
.status-declined{background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca}


/* Dashboard Sektion */
.dash{margin-top:12px}
.dash-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.dash-label{color:var(--muted)}
.dash-value{font-weight:700}
.inline{display:block}


/* Zwei-Spalten Grid für Download & Zustimmung (stacked auf Mobile) */
.grid-2{display:grid; grid-template-columns:1fr; gap:8px;}
@media (min-width:560px){ .grid-2{grid-template-columns:1fr 1fr;} }


/* UVV-Metadaten */
.uvv-meta{margin-top:10px; color:var(--muted); display:grid; gap:4px}


/* Vollbreite Buttons (falls noch nicht gesetzt) */
.btn.block{width:100%; display:block; text-align:center}


/* Code-Zeile fix (wie vorher abgestimmt) */
.code-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; width:100%}
.input.code{max-width:none; width:100%; text-align:center; letter-spacing:0.1em}


/* Titel-Link wie Text (falls <a> im Titel) */
.site-title a{color:var(--primary); text-decoration:none; font:inherit}
.site-title a:visited{color:var(--primary)}
.site-title a:hover,.site-title a:focus{text-decoration:none}

.footer-links{display:inline-flex; gap:8px; align-items:center; margin-left:8px}
.footer-link{color:inherit; text-decoration:none; font-weight:600}
.footer-link:hover,.footer-link:focus{text-decoration:underline}
.footer-sep{opacity:.5}

.card + .card { margin-top: 12px; }
@media (min-width: 560px) { .card + .card { margin-top: 16px; } }

/* Handy-Text etwas kleiner */
@media (max-width: 420px){
  body { font-size: 16px; }              /* vorher 18px */
  .btn.primary { font-size: 1rem; }      /* statt großer clamp */
}

/* Lange Inhalte dürfen umbrechen, damit nichts „breit“ wird */
.card, .hunt, .uvv-meta, .desc { overflow-wrap: anywhere; word-break: break-word; }
code { word-break: break-all; font-size: .9rem; }

/* grün markierter „erledigt“-Button */
.btn.success{
  background: var(--success);
  color: var(--primary-contrast);
  border-color: transparent;
}
.btn.success:active{ transform: translateY(1px); }

/* Schüsseltreiben-Pills */
.pill.meal-in{background:#dcfce7; color:#065f46; border:1px solid #bbf7d0}
.pill.meal-out{background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca}
.pill.meal-unknown{background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe}

/* Spacing & Grid sind schon da; Ergänzung falls nötig */
.grid-2{display:grid; grid-template-columns:1fr; gap:8px}
@media (min-width:560px){ .grid-2{grid-template-columns:1fr 1fr} }
.card + .card{margin-top:12px}

/* Admin kompakte Liste */
.alist{display:flex; flex-direction:column; gap:8px}
.arow{display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #eee}
.a-left .a-line{line-height:1.2}
.a-left .a-line.sub{color:var(--muted); font-size:.9rem}

/* Icon-Buttons */
.icon-form{display:inline}
.icon-btn{
  background:none; border:none; padding:6px; margin:0; line-height:0; cursor:pointer; border-radius:999px;
}
.icon-btn:focus{outline:none; box-shadow:0 0 0 3px rgba(31,111,63,.2)}
.ico{width:22px; height:22px; display:inline-block}

/* Farben: ok = grün, bad = rot, muted = grau */
.icon-btn.ok{color:#065f46}     /* green-800 */
.icon-btn.bad{color:#b91c1c}    /* red-700 */
.icon-btn.muted{color:#9ca3af}  /* gray-400 */

/* Auf sehr kleinen Screens Schrift etwas kleiner */
@media (max-width:420px){
  .a-left .a-line{font-size:.95rem}
}

.label-static{padding:10px 12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; color:#6b7280}


/* Toolbar mittig; Button ist bereits .block = 100% Breite */
.toolbar.center{display:flex; justify-content:center; margin:8px 0}
.btn.block{width:100%; display:block; text-align:center}

/* Header als Flex: Titel links, Burger rechts */
.site-header{display:flex; align-items:center; justify-content:space-between}

/* Hamburger-Button */


/* Drawer + Backdrop */
.adm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:60}
.adm-drawer{position:fixed;top:0;right:0;height:100vh;width:85vw;max-width:360px;background:#fff;
  box-shadow:-12px 0 30px rgba(0,0,0,.15);padding:16px;transform:translateX(100%);transition:transform .2s ease;z-index:61}
.menu-open .adm-drawer{transform:translateX(0)}
.menu-open #admBackdrop{display:block}
.adm-nav a{display:block;padding:12px 10px;border-radius:12px;text-decoration:none;color:inherit;border:1px solid transparent}
.adm-nav a:hover{background:#f3f4f6}
.adm-nav hr{border:0;border-top:1px solid #eee;margin:10px 0}

/* Header als Flex: Titel links, Burger rechts */
.site-header{display:flex; align-items:center; justify-content:space-between}

/* WICHTIG: hidden-Attribut wirklich verbergen */
[hidden]{ display:none !important; }

/* Drawer + Backdrop */
.adm-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:60; }
.adm-drawer{
  position:fixed; top:0; right:0; height:100vh; width:85vw; max-width:360px;
  background:#fff; box-shadow:-12px 0 30px rgba(0,0,0,.15);
  padding:16px; transform:translateX(100%); transition:transform .2s ease; z-index:61;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
body.menu-open{ overflow:hidden; }                 /* kein Scrollen darunter */
body.menu-open #adminMenuPanel{ transform:translateX(0); }
body.menu-open #admBackdrop{ display:block !important; }

/* Menü-Links vertikal und hübsch */
.adm-nav a{ display:block; padding:12px 10px; border-radius:12px; text-decoration:none; color:inherit; }
.adm-nav a:hover{ background:#f3f4f6; }
.adm-nav hr{ border:0; border-top:1px solid #eee; margin:10px 0; }

/* Hamburger (ausgerichtet, ohne blauen Rand) */
.hamburger{
  inline-size:44px; block-size:44px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:transparent; border:0; padding:0; margin:0; line-height:0; color:var(--primary);
  border-radius:10px; -webkit-tap-highlight-color:transparent; appearance:none;
}
.hamburger:focus{ outline:none; }
.hamburger:focus-visible{ box-shadow:0 0 0 3px rgba(31,111,63,.25); }
.hamburger .bar{ width:22px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s, opacity .2s; }
.menu-open .hamburger .bar:nth-child(2){ opacity:0; }
.menu-open .hamburger .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-open .hamburger .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
button::-moz-focus-inner{ border:0; }

/* Standard-Hamburger wie gehabt … */
.a-line.sub{ color:var(--muted); font-size:.9rem }

.a-left-link{display:block; color:inherit; text-decoration:none; padding:6px 0; border-radius:8px}
.a-left-link:hover{background:#f9fafb}

.fieldset{border:1px solid #e5e7eb; border-radius:12px; padding:10px; margin:8px 0}
.fieldset legend{padding:0 6px; font-weight:600}
.radio{display:inline-flex; align-items:center; gap:6px; margin-right:12px}
.summary{display:grid; gap:6px; margin-bottom:10px}

/* Filter-Zeile */
.adm-filters{display:grid; grid-template-columns:1fr repeat(4, minmax(0, 160px)) auto; gap:8px; margin-bottom:10px}
@media (max-width:680px){ .adm-filters{ grid-template-columns:1fr 1fr; } .adm-filters .btn{ grid-column:1 / -1; } }

/* Chips/Badges */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chip{font-size:.8rem; padding:4px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#f9fafb; color:#374151}
.chip.ok{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46 }   /* grün */
.chip.bad{ background:#fef2f2; border-color:#fecaca; color:#991b1b }  /* rot */
.chip.muted{ background:#f3f4f6; border-color:#e5e7eb; color:#6b7280 }/* grau */


.pager{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px}
.pg-info{color:#6b7280}

/* Zähler-Chips: mehr Abstand nach unten */
.card .chips{ margin-bottom: 12px; }

/* Wrapper steuert Ein-/Ausblenden */
.filters-wrap .adm-filters{ display:none; }
.filters-wrap.open .adm-filters{ display:grid; }

/* Toggle-Button optisch unaufdringlich */
.filter-toggle{ margin-bottom:8px; }
.btn.ghost.small{ background:transparent; border:1px solid #e5e7eb; padding:6px 10px; border-radius:10px; }
.btn.ghost.small:hover{ background:#f9fafb; }

/* (bereits vorhanden) Layout der adm-filters bleibt wie zuvor */


/* Filter-Grid: Suche volle Breite, darunter 2×2 Selects, Button ganz unten */
.adm-filters{
  display:grid;
  grid-template-columns: 1fr 1fr;       /* 2 Spalten für die Selects */
  gap:10px;
  margin-top: 6px;                      /* Abstand zu den Chips */
}
.adm-filters .filter-search{
  grid-column: 1 / -1;                  /* Suche über die volle Breite */
}
.adm-filters .btn{
  grid-column: 1 / -1;                  /* Button eigene Zeile, volle Breite */
}

/* Mobile: ebenfalls 2 Spalten für die Selects; bei sehr schmalem Screen 1 Spalte */
@media (max-width: 420px){
  .adm-filters{ grid-template-columns: 1fr; }
}

/* Inputs schön strecken */
.adm-filters .input{ width:100%; }

/* Optional: etwas Luft unter der Toolbar */
.adm-filters{ margin-bottom: 8px; }


/* Wenn Menü offen: Button als X oben rechts über dem Drawer fixieren */
.menu-open .hamburger{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 70;                /* > Drawer (61) & Backdrop (60) */
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}


/* Firefox-Inner-Rand killen */
button::-moz-focus-inner{ border:0; }


/* Optional: animiertes X beim geöffneten Menü */
.menu-open .hamburger span:nth-child(2){ opacity:0; }
.menu-open .hamburger span:first-child{ transform:translateY(7px) rotate(45deg); }
.menu-open .hamburger span:last-child{  transform:translateY(-7px) rotate(-45deg); }


.toolbar{display:flex; justify-content:flex-start; margin-bottom:8px}
/* Mobile-first; passt ohne Zoomen auf 360-430px Breite */
@media (min-width:768px){
  body{font-size:18px}
  .input{font-size:1rem}
  .card{padding:20px}
}