/* CI angelehnt an kv-bauernheim.de: Roboto light / Roboto Slab bold uppercase,
   Nachtblau-Header, hellgrauer Grund, weiße Karten (14px, weicher Schatten),
   Rot #c0392b für Datum/Akzente, blaue Pill-Buttons. Schriften lokal (DSGVO). */
@font-face{font-family:"Roboto";font-weight:300;font-display:swap;src:url(fonts/roboto-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-weight:400;font-display:swap;src:url(fonts/roboto-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-weight:700;font-display:swap;src:url(fonts/roboto-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Roboto Slab";font-weight:700;font-display:swap;src:url(fonts/roboto-slab-latin-700-normal.woff2) format("woff2")}

:root{
  --navy:#1c1f4a; --navy-2:#2e3160;
  --bg:#f5f5f5; --card:#fff; --ink:#040404; --head:#4a4a4a; --text:#555; --muted:#8a8a8a; --line:#e3e3e3;
  --rot:#c0392b; --blau:#116cc1; --blau-hell:#1297dd;
  --soft:#eef3f9; --ok:#2f7d4f; --err:#c0392b;
  --radius:14px; --shadow:0 2px 10px rgba(0,0,0,.08);
  --slab:"Roboto Slab",Georgia,serif; --sans:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:300 16px/1.55 var(--sans)}
strong,b{font-weight:700}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px 48px}

/* Kopf wie auf der Vereinsseite: Nachtblau, nach unten verlaufend, V-förmige Unterkante */
header.hero{position:relative;color:#f5f5f5;text-align:center;padding:0 16px 110px;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 18%,#4a4d74 60%,#8d8fa8 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),50% 100%,0 calc(100% - 46px))}
.topbar{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px 0}
.topbar img{height:64px;width:auto;display:block}
.topbar .verein{font-weight:300;text-transform:uppercase;letter-spacing:.04em;font-size:15px;text-align:left}
header.hero .kicker{margin:34px 0 0;font-weight:300;font-size:clamp(20px,3vw,28px);text-transform:uppercase;letter-spacing:.02em}
header.hero h1{margin:2px 0 16px;font:700 clamp(32px,6vw,52px)/1.08 var(--slab);text-transform:uppercase;color:#fff}
header.hero .termin{display:inline-block;background:var(--card);color:var(--ink);border-radius:var(--radius);padding:10px 18px;box-shadow:var(--shadow);text-align:left}
header.hero .termin .datum{display:block;color:var(--rot);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
header.hero .termin .wo{font-size:14px;color:var(--text)}
header.hero p{max-width:620px;margin:18px auto 0;font-size:17px}
.intro{margin-top:-60px;position:relative}

.box{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.box p{color:var(--text)}

/* Überschriften im Muster „AKTUELLE / VERANSTALTUNGEN“ */
.titel{text-align:center;margin:44px 0 20px}
.titel .klein{display:block;font-weight:300;font-size:22px;text-transform:uppercase;color:var(--head)}
.titel h2{margin:0;font:700 clamp(24px,4vw,32px)/1.15 var(--slab);text-transform:uppercase;color:var(--head)}
h2{font:700 22px/1.2 var(--slab);text-transform:uppercase;color:var(--head);margin:32px 0 14px}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.lat{background:var(--card);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);outline:2px solid transparent;transition:outline-color .15s,transform .15s}
.lat.gewaehlt{outline-color:var(--blau)}
.lat .bild{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--soft)}
.platzhalter,.lat .bild.platzhalter{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9aa3b8;gap:6px}
.platzhalter svg{width:40%}
.platzhalter span{font-size:13px}
.lat .inhalt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.lat .nr{color:var(--rot);font-weight:700;font-size:12px;text-transform:uppercase}
.lat h3{margin:0;font:700 18px/1.2 var(--slab);text-transform:uppercase;color:var(--head)}
.lat p{margin:0;color:var(--text);font-size:14px;flex:1}
.stepper{display:flex;align-items:center;gap:8px;margin-top:8px}
.stepper button{width:40px;height:40px;border-radius:50%;border:0;background:var(--soft);font:400 20px var(--sans);cursor:pointer;color:var(--blau)}
.stepper button:hover{background:#dde8f5}
.stepper input{width:56px;height:40px;text-align:center;font:400 18px var(--sans);border:1px solid var(--line);border-radius:8px}
.stepper label{font-size:13px;color:var(--muted);margin-right:auto;text-transform:uppercase}

.felder{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.felder .voll{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:4px;font-weight:400;font-size:14px;color:var(--head);text-transform:uppercase;letter-spacing:.02em}
label.f input,label.f textarea{font:300 16px var(--sans);text-transform:none;letter-spacing:0;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
label.f input:focus,label.f textarea:focus,.stepper input:focus{outline:2px solid var(--blau-hell);outline-offset:-1px;border-color:transparent}
label.f small{font-weight:300;color:var(--muted);text-transform:none;letter-spacing:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text)}
.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--blau)}
.summe{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius);padding:14px 18px;margin-top:20px;position:sticky;bottom:12px}
.summe strong{font-size:18px}

.btn{background:var(--blau);color:#f5f5f5;border:0;border-radius:48px;padding:13px 28px;font:700 15px var(--sans);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--blau-hell)}
.btn.rot{background:var(--rot);border-radius:8px;text-transform:none;font-weight:600;letter-spacing:0}
.btn.sek{background:#fff;color:var(--head);box-shadow:inset 0 0 0 1px var(--line)}
.btn.sek:hover{background:var(--bg)}
.btn.klein{padding:6px 14px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.meldung{padding:14px 18px;border-radius:var(--radius);margin:16px 0;box-shadow:var(--shadow);background:#fff;border-left:5px solid}
.meldung.ok{color:var(--ok)}
.meldung.err{color:var(--err)}
.hp{position:absolute;left:-9999px}
footer{text-align:center;color:var(--muted);font-size:13px;margin-top:40px}
footer img{height:56px;display:block;margin:0 auto 8px;opacity:.9}

/* Admin */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg);font-weight:700;text-transform:uppercase;font-size:12px;color:var(--head)}
tr.erledigt td{color:#b0b0b0;text-decoration:line-through}
.tabwrap{overflow-x:auto}
.kacheln{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.kachel{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.kachel .zahl{font:700 32px/1 var(--slab);color:var(--navy)}
.kachel .lbl{color:var(--rot);font-size:12px;font-weight:700;text-transform:uppercase;margin-top:6px}
.typ{margin-bottom:14px}
.typ h3{display:flex;justify-content:space-between;margin:0 0 8px;font:700 16px var(--slab);text-transform:uppercase;color:var(--head)}
.leiste{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0}
.leiste .rechts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.adminkopf{background:var(--navy);color:#f5f5f5}
.adminkopf .wrap{display:flex;align-items:center;gap:14px;padding:12px 16px}
.adminkopf img{height:48px}
.adminkopf strong{font:700 18px var(--slab);text-transform:uppercase}

@media (max-width:640px){.felder{grid-template-columns:1fr} .topbar img{height:52px}}
@media print{.noprint{display:none!important} body{background:#fff} .box,.kachel{box-shadow:none;border:1px solid #ddd}}

/* ---------- Smartphone & Tablet ---------- */
.stand{font:300 14px var(--sans);color:var(--muted);text-transform:none}
html{-webkit-text-size-adjust:100%}
button,a,input,label{-webkit-tap-highlight-color:transparent}
.stepper button{width:44px;height:44px;touch-action:manipulation}
.stepper input{height:44px}
.aktionen{white-space:nowrap}
.aktionen form{display:inline}

/* Tablet: 3 Laternen nebeneinander, etwas kompaktere Abstände */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .titel{margin:36px 0 16px}
}

/* Tablet hochkant & große Phones: 2 Spalten */
@media (max-width:760px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .lat .inhalt{padding:12px}
  .lat h3{font-size:16px}
  .stepper{gap:6px}
  .stepper label{display:none}
  .stepper{justify-content:space-between}
  .kacheln{grid-template-columns:repeat(3,1fr)}
}

/* Smartphone: Laternen als Querkarten (Bild links, Text rechts) */
@media (max-width:560px){
  .wrap{padding:0 12px calc(96px + env(safe-area-inset-bottom))}
  header.hero{padding:0 14px 84px;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),50% 100%,0 calc(100% - 26px))}
  .topbar{padding:10px 0;gap:10px}
  .topbar img{height:44px}
  .topbar .verein{font-size:13px}
  header.hero .kicker{margin-top:18px;font-size:17px}
  header.hero h1{font-size:30px;margin-bottom:12px}
  header.hero p{font-size:15px;margin-top:14px}
  .intro{margin-top:-46px}
  .box{padding:16px}
  .titel{margin:30px 0 14px}
  .titel .klein{font-size:16px}
  .titel h2{font-size:22px}

  .grid{grid-template-columns:1fr;gap:12px}
  .lat{flex-direction:row;min-height:168px}
  .lat .bild{width:38%;max-width:150px;aspect-ratio:auto;height:auto;flex:0 0 auto;object-fit:cover}
  .lat .bild.platzhalter svg{width:55%}
  .lat .inhalt{padding:12px 12px 12px 14px;gap:4px;min-width:0}
  .lat h3{font-size:16px}
  .lat p{font-size:13px;line-height:1.45}
  .stepper{margin-top:6px;justify-content:flex-start;gap:10px}

  .felder{grid-template-columns:1fr;gap:14px}

  /* Summenleiste fest am unteren Rand */
  .summe{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:16px 16px 0 0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(0,0,0,.12);z-index:20;flex-wrap:nowrap}
  .summe span{font-size:14px;line-height:1.3}
  .summe strong{font-size:15px}
  .summe .btn{padding:12px 18px;font-size:14px;flex:0 0 auto}

  /* Admin */
  .adminkopf .wrap{padding:10px 12px}
  .adminkopf img{height:36px}
  .adminkopf strong{font-size:15px}
  .leiste .rechts{margin-left:0;display:grid;grid-template-columns:1fr 1fr;width:100%}
  .leiste .rechts .btn{text-align:center;padding:12px 10px;font-size:13px}
  .leiste .rechts .btn.rot{grid-column:1/-1}
  h2{font-size:19px}
  .kachel{padding:12px}
  .kachel .zahl{font-size:26px}
  .kachel .lbl{font-size:11px}
  .grid[style]{grid-template-columns:1fr!important}

  /* Bestellungen als Karten */
  table.karten,table.karten tbody,table.karten tr,table.karten td{display:block;width:100%}
  table.karten tr:first-child{display:none}
  table.karten tr{border-bottom:1px solid var(--line);padding:10px 0}
  table.karten tr:last-child{border-bottom:0}
  table.karten td{border:0;padding:3px 0;display:flex;gap:10px}
  table.karten td[data-label]::before{content:attr(data-label);flex:0 0 86px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);padding-top:2px}
  table.karten td[data-label="Bemerkung"]:empty{display:none}
  table.karten td.aktionen{padding-top:8px;display:flex;gap:8px;flex-wrap:wrap}
  table.karten td.aktionen form{display:flex;gap:8px}
  table.karten td.aktionen .btn{padding:10px 14px}
  .box.tabwrap{padding:4px 16px}
}