/* Layout: one centered column, shared header (title + trail-marker nav), cream run cards on forest green */
:root{
  --bg:#5d8048; --bg-deep:#4a6a38; --card:#f7f4e8; --ink:#1f2a18; --muted:#5b6650;
  --chalk:#fffdf5; --flour:#e9e3c9; --accent:#d9a521; --line:#d7d0b2;
  --f-display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-body:"Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--chalk);font-family:var(--f-body);font-size:16px;line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:0 48px;
  background-image:url("Bilder/Website_Pictures/topo.svg");background-size:640px 640px;background-position:center top}
/* Hintergrund: Höhenlinien (Trail-Karte) + sanftes Licht/Schatten im selben Grün, fest hinter dem Inhalt */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 12% 0%, rgba(255,253,245,.13), transparent 70%),
    radial-gradient(ellipse 50% 40% at 95% 30%, rgba(217,165,33,.07), transparent 70%),
    radial-gradient(ellipse 70% 55% at 85% 100%, rgba(31,48,22,.38), transparent 70%),
    radial-gradient(ellipse 45% 40% at 0% 75%, rgba(31,48,22,.22), transparent 70%)}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:860px;margin:0 auto}
/* Header */
.site-head{text-align:center;padding-block:44px 28px}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--flour);opacity:.85;margin:0 0 10px}
.site-title{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem, 6vw, 3.6rem);line-height:1.02;margin:0;
  letter-spacing:-.02em;text-wrap:balance;color:var(--chalk)}
.site-title a{text-decoration:none}
/* Title flanked by the hash logo: right as-is, left mirrored horizontally */
.site-title{display:flex;align-items:center;justify-content:center;gap:clamp(10px, 2.5vw, 24px)}
.title-icon{flex:none;width:clamp(44px, 9vw, 96px);height:auto}
.title-icon--mirror{transform:scaleX(-1)}
.trail{display:flex;justify-content:center;gap:10px;margin:18px 0 26px;color:var(--flour)}
.trail span{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}
.trail span:nth-child(2){opacity:.5}.trail span:nth-child(3){opacity:.3}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
nav a{display:inline-block;text-decoration:none;font-weight:600;font-size:.95rem;padding:9px 16px;border-radius:999px;
  border:1.5px solid rgba(255,253,245,.45);color:var(--chalk);transition:background .15s, color .15s, border-color .15s}
nav a:hover{background:rgba(255,253,245,.14);border-color:var(--chalk)}
nav a[aria-current="page"]{background:var(--chalk);color:var(--bg-deep);border-color:var(--chalk)}
/* Content */
main{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.festive{background:var(--accent);color:var(--ink);border-radius:18px;padding:22px 26px}
.festive-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.festive .go{text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
.festive .go:hover{opacity:.75}
.festive .lbl{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;opacity:.75}
.festive .big{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,4.5vw,2.3rem);line-height:1.05;display:block}
.festive .go{font-weight:700;white-space:nowrap}
.act-list{list-style:none;margin:16px 0 0;padding:0;border-top:1.5px solid rgba(31,42,24,.22)}
.act-list li{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1.5px solid rgba(31,42,24,.22)}
.act-date{flex:0 0 7.5em;font-weight:600;font-variant-numeric:tabular-nums}
.act-cat{font-weight:700;text-decoration:none;min-width:0;overflow-wrap:anywhere}
.act-cat::after{content:" ↓";opacity:.6}
.act-cat:hover{text-decoration:underline;text-underline-offset:3px}
.act-empty{font-style:italic;opacity:.75}
html{scroll-behavior:smooth}
.run[id]{scroll-margin-top:16px}
.run:target{box-shadow:0 0 0 4px var(--accent)}
.run{background:var(--card);color:var(--ink);border-radius:16px;padding:22px 26px}
.run h2{font-family:var(--f-display);font-weight:700;font-size:1.45rem;margin:0 0 4px;text-wrap:balance}
.run .tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--bg-deep);background:var(--flour);padding:3px 10px;border-radius:999px;margin-bottom:14px}
.run dl{display:grid;grid-template-columns:130px 1fr;margin:12px 0 0;border-top:1px solid var(--line)}
.run dt,.run dd{padding:10px 0;border-bottom:1px solid var(--line);margin:0}
.run dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);padding-top:12px}
.run dd{font-weight:500;min-width:0;white-space:pre-line;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.run dd.tba{color:var(--muted);font-style:italic;font-weight:400}
.note{text-align:center;margin:10px auto 0;max-width:60ch;color:var(--chalk)}
.note strong{font-weight:700}
.fb{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.fb:hover{color:var(--accent)}
.center{text-align:center}
.page-h{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.2rem);margin:0;text-wrap:balance}
.lead{max-width:62ch;margin:6px 0 0;color:var(--flour)}
.panel{background:var(--card);color:var(--ink);border-radius:16px;padding:22px 26px}
.panel h3{font-family:var(--f-display);margin:0 0 6px;font-size:1.15rem}
.panel p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.ph{aspect-ratio:4/3;max-width:100%;border-radius:12px;background:repeating-linear-gradient(45deg,var(--flour) 0 10px,var(--card) 10px 20px);
  display:grid;place-items:center;color:var(--muted);font-size:.85rem;border:1px solid var(--line)}
footer{text-align:center;margin-top:40px;font-size:.85rem;color:var(--flour);opacity:.85}
@media (max-width:520px){ .run dl{grid-template-columns:1fr} .run dt{border-bottom:0;padding-bottom:0} .run,.panel{padding:18px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} html{scroll-behavior:auto} }
/* Log-In-Popup (fest, nicht veränderbar) */
.login-dialog{width:360px;height:420px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);padding:0;border:0;border-radius:18px;
  background:var(--bg);overflow:hidden;resize:none;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.login-dialog::backdrop{background:rgba(20,30,15,.55)}
.login-dialog iframe{display:block;width:100%;height:100%;border:0}
.login-dialog .close{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;
  color:var(--chalk);font-size:1.4rem;line-height:1;cursor:pointer}
.login-dialog .close:hover{background:rgba(255,253,245,.15)}
/* Run-Listen auf den Unterseiten */
.run-list{overflow-x:auto;margin-top:8px}
.runs-table{width:100%;border-collapse:collapse;font-size:.95rem;color:var(--ink)}
.runs-table th{text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);padding:8px 10px 8px 0;border-bottom:1px solid var(--line)}
.runs-table td{white-space:pre-line;padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.runs-table td:nth-child(2){white-space:nowrap}
/* Eingabemaske */
.form label{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:16px 0 6px}
.form label:first-child{margin-top:0}
.form input,.form select,.form textarea{width:100%;font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.form textarea{min-height:80px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form .loaded{margin:14px 0 0;padding:9px 12px;border-radius:10px;background:var(--flour);color:var(--ink);font-size:.9rem;font-weight:600}
.form .loaded[hidden]{display:none}
.form .err{color:#8a2a1a;font-size:.88rem;min-height:1.2em;margin:12px 0 0}
.btn{font:inherit;font-weight:700;padding:11px 22px;border:0;border-radius:999px;background:var(--accent);color:var(--ink);cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn.danger{background:#b5452e;color:#fff}
.form .actions{margin-top:18px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.form .actions [hidden]{display:none}
.btn.danger-ghost{color:#8a2a1a;border-color:#c99a8e}
@media (max-width:520px){ .form .row{grid-template-columns:1fr} }
/* Popups (wie Log-In-Fenster) */
.modal{width:380px;max-width:calc(100vw - 32px);padding:22px;border:0;border-radius:18px;background:var(--bg);color:var(--chalk);resize:none;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.modal::backdrop{background:rgba(20,30,15,.55)}
.modal h2{font-family:var(--f-display);font-weight:800;font-size:1.5rem;text-align:center;margin:0 0 14px}
.modal .panel p{color:var(--ink)}
.modal .buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
/* Webmaster-Bereich */
.wm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.wm-actions .btn{text-decoration:none}
/* Dropbox-Einrichtung */
.steps{margin:0;padding-left:1.3em;color:var(--ink)}
.steps li{margin:0 0 14px}
.steps li:last-child{margin:0}
.status{font-weight:700;color:var(--ink)!important;margin-bottom:14px!important}
.status.ok{color:#2f6b1f!important}
/* Hasher-Liste */
.sort-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.sort-head h3{margin:0}
.sort-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sort-lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-right:2px}
.sort-btn{font:inherit;font-size:.88rem;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:transparent;color:var(--ink)}
.sort-btn:hover{border-color:var(--muted)}
.sort-btn[aria-pressed="true"]{background:var(--bg-deep);border-color:var(--bg-deep);color:var(--chalk)}
.sort-btn .dir:empty{display:none}
.hasher-table th.num,.hasher-table td.num{text-align:right;white-space:nowrap}
.hasher-table td:first-child{color:var(--muted);width:3.5em}
.hasher-table td:nth-child(2){white-space:normal;overflow-wrap:anywhere}
.hasher-table th:last-child,.hasher-table td:last-child{padding-right:0}

/* Songbook PDF, horizontally centered on song.html */
.pdf-embed{display:flex;flex-direction:column;align-items:center;gap:12px}
.pdf-embed iframe{display:block;width:100%;max-width:820px;height:min(85vh, 1100px);border:0;border-radius:12px;background:var(--card)}
.pdf-link{margin:0;text-align:center}
.pdf-link a{color:var(--chalk);font-weight:600}

/* Album: photo grid + full-size viewer (album.js) */
.album h3{margin-bottom:2px}
.album>p{margin-bottom:16px}
.album-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.album-photo{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--flour)}
.album-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.album-photo:hover img,.album-photo:focus-visible img{transform:scale(1.04)}
.album-photo:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.viewer{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(15,20,12,.94);color:var(--chalk)}
.viewer::backdrop{background:rgba(15,20,12,.94)}
.viewer[open]{display:flex;align-items:center;justify-content:center}
.viewer img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 96px);object-fit:contain;border-radius:6px}
.viewer button{position:absolute;border:0;background:rgba(15,20,12,.6);color:var(--chalk);font:600 1.6rem/1 var(--f-body);
  width:48px;height:48px;border-radius:50%;cursor:pointer}
.viewer button:hover{background:rgba(15,20,12,.85)}
.viewer .v-close{top:14px;right:14px}
.viewer .v-prev{left:14px;top:50%;transform:translateY(-50%)}
.viewer .v-next{right:14px;top:50%;transform:translateY(-50%)}
.viewer .v-count{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:.9rem;color:var(--flour)}
@media (max-width:520px){ .album-grid{grid-template-columns:repeat(2,1fr)} .viewer .v-prev,.viewer .v-next{top:auto;bottom:6px;transform:none} }

/* Hasher search (hashers.html): sits centered between "Hash names" and "Sort by" */
.hasher-search{display:flex;align-items:center;gap:6px;flex:0 1 300px;margin:0 auto}
.hasher-search input{flex:1 1 0;min-width:0;width:100%;font:inherit;font-size:.92rem;padding:6px 14px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.hasher-search input:focus{outline:none;border-color:var(--bg-deep);box-shadow:0 0 0 3px rgba(93,128,72,.25)}
.search-btn{background:var(--bg-deep);border-color:var(--bg-deep);color:var(--chalk);flex:none}
.search-btn:hover{background:var(--bg);border-color:var(--bg)}
.hasher-table tr.hit td{background:rgba(217,165,33,.35);font-weight:700;animation:hit-flash 1.6s ease-out}
.hasher-table tr.hit td:first-child{box-shadow:inset 4px 0 0 var(--accent);padding-left:8px}
@keyframes hit-flash{0%,30%{background:var(--accent)}100%{background:rgba(217,165,33,.35)}}
@media (max-width:620px){ .hasher-search{flex:1 1 100%;max-width:100%;min-width:0} }

/* Upcoming Hares (angeles.html): darker beige panel, past dates muted */
.hares-panel{background:var(--flour)}
.hares-panel .runs-table th,.hares-panel .runs-table td{border-bottom-color:#cfc6a2}
.hares-table tr.past td{color:var(--muted)}
.hares-table td:first-child{width:7.5em;white-space:nowrap}
.hares-table td:nth-child(2){white-space:normal}

/* Who / When / Price under the hash page title */
.hash-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;max-width:68ch;margin:8px 0 0;color:var(--flour)}
.hash-facts dt{font-weight:700;color:var(--chalk)}
.hash-facts dd{margin:0}

/* About: "What is Hash House Harriers?" panel */
.about-h3 h4{font-family:var(--f-display);font-size:1rem;margin:20px 0 8px;color:var(--ink)}
.about-h3 ul{margin:0;padding-left:1.2em;color:var(--muted)}
.about-h3 li{margin:0 0 8px;max-width:72ch}
.about-h3 li::marker{color:var(--accent)}
.about-h3 strong{color:var(--ink)}
.about-h3>p{max-width:72ch}

/* Webmaster line in every footer */
.webmaster{display:inline-block;margin-top:6px}
.wm-gap{display:inline-block;width:2.5em}
.webmaster a{color:inherit}
/* Upcoming / Past runs: same look as "Next run", one block per run */
.run-group .run-list{overflow:visible;margin-top:0}
.run-group .run-list > p{margin:12px 0 0;color:var(--muted)}
.run-group .run-list dl + dl{margin-top:22px;border-top:3px solid var(--bg)}
.pager-wrap{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pager-btn{font:inherit;font-size:.9rem;font-weight:600;min-width:38px;padding:6px 12px;border-radius:999px;cursor:pointer;
  background:transparent;border:1.5px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.pager-btn:hover:not(:disabled){border-color:var(--muted)}
.pager-btn[aria-current="page"]{background:var(--bg-deep);border-color:var(--bg-deep);color:var(--chalk);cursor:default}
.pager-btn:disabled:not([aria-current]){opacity:.4;cursor:default}
.pager-info{margin:0;font-size:.82rem;color:var(--muted)}
.run-group{scroll-margin-top:16px}
.wm-actions [hidden]{display:none}
.form.locked input:disabled,.form.locked textarea:disabled{background:var(--flour);color:var(--muted);cursor:not-allowed}
.form input[aria-invalid="true"]{border-color:#b5452e}