/* =========================
    Basis / Layout
    ========================= */
:root {
    /* Vereinsfarben kannst du hier anpassen */
    --primary: #949494;
    --primary-dark: #004025;
    --secondary: #f0f0f0;
    --accent: #ffcc00;
    --text: #222;
    --text-muted: #666;
    --bg: #ffffff;
    --max-width: 1100px;
    --radius: 8px;
}

* {box-sizing: border-box;margin: 0;padding: 0;}
body {font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;background: var(--bg);color: var(--text);line-height: 1.6;}
img {max-width: 100%;height: auto;margin: 0 auto;display: block;}
a {color: inherit; text-decoration: none;}
main {padding: 2.5rem 0 3rem;}
.container {width: 100%;max-width: var(--max-width);margin: 0 auto;padding: 0 1rem;}
.page {min-height: 100vh;display: flex;flex-direction: column;}
.page-header {margin-bottom: 2rem;text-align: center;}
.page-header h1 {font-size: 2rem;margin-bottom: 0.5rem;}
.page-header p {font-size: 0.95rem;color: var(--text-muted);}

/* Header Bild */
.page-header-image {width: 100%; max-height: 200px; overflow: hidden;border-radius: 12px;margin-bottom: 1rem;}
.header-img {width: 100%;height: 240px;object-fit: cover; object-position: 50% 53%;}

@media (max-width: 900px){.header-img {object-position: 50% 53%;}}
@media (max-width: 700px){.header-img {object-position: 50% 65%;}}
@media (max-width: 500px){.header-img {object-position: 50% 165%;}}

section {margin-bottom: 2.5rem;}
section.block {
  background: linear-gradient(180deg, #eeeeee 0%, #fdfdfd 100%);
  border: 1px solid #cccccc;
  box-shadow: 0 6px 24px rgba(0,0,0,0.035);
  position: relative;  
  padding: 1rem;
}
.section-header {margin-bottom: 2.5rem;border-left: 8px solid var(--primary);padding-left: 0.75rem;}
.section-header h2 {font-size: 1.8rem;margin-bottom: 0.15rem;}
.section-header p {font-size: 0.9rem;color: var(--text-muted);}

/* Honeypot */
.hp {position:absolute;left:-5000px;opacity:0} 

/* =========================
    Zurück-Button
    ========================= */
.page-head-row{display: grid;grid-template-columns: auto 1fr auto;margin-bottom: 1.5rem;}
.page-head-left{justify-self: start;}
.page-head-right{width: 2.5rem;} /* gleiche Breite wie Button links (optisch) */
.page-header{ text-align: center;}
@media (max-width: 700px){
  .page-head-row{grid-template-columns: auto 1fr;row-gap: .75rem;}
  .page-head-right{display: none;}
  .page-header{text-align: left;}
}

.back-btn-wrapper {margin: 2rem 0 1rem 0;}
.back-btn {display: inline-flex;align-items: center;gap: 0.2rem;background: #f3f3f3;border: 1px solid #d0d0d0; padding: 0.3rem 0.8rem;border-radius: 8px;cursor: pointer;font-size: 1rem;font-weight: 600;color: #333;text-decoration: none;transition: background 0.2s;margin: 0rem 0.4rem;}
.back-btn:hover {background: #e7e7e7;}
.back-btn i {font-size: 1.1rem;}

/* =========================
    Button - Allg
    ========================= */    
.actions{display:flex;gap:.5rem;align-items:center;margin-top:1rem}
.btn{ display:inline-block; padding:.6rem 1rem; border-radius:999px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
.btn-primary{ background: var(--accent, #ffcc00); color:#000; }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-ghost{ border:1px solid #cfcfcf; color: var(--text, #222); background:#fff; }
.btn-ghost:hover{ background:#f6f6f6; }

.btn-disabled{ opacity:.45; pointer-events:none; cursor:not-allowed;}

.form-result { margin-top: .8rem; }
.form-result .ok  { background:#f2fbf4; border:1px solid #cde9d6; color:#0f5b2a; padding:.7rem 1rem; border-radius:10px; }
.form-result .err { background:#fff6f6; border:1px solid #f1cccc; color:#7f1d1d; padding:.7rem 1rem; border-radius:10px; }