/* style.css – Adventure Southside 2026 · v2 Hero + Action Cards */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --as-rot: #CF3628; --as-dunkelrot: #9E3323;
    --as-braun-dark: #372F2C; --as-braun: #652D23;
    --as-warmgrau: #6E6159; --as-beige: #BFB7AF;
    --as-hellbeige: #D7D2CB; --as-sand: #F5F0EB;
    --as-orange: #F18864; --as-pfirsich: #FAC8B1;
    --as-signal: #E42313;
    --primary: var(--as-rot); --primary-dark: var(--as-braun-dark);
    --secondary: var(--as-orange); --bg: var(--as-sand);
    --card: #fff; --text: var(--as-braun-dark);
    --text-light: var(--as-warmgrau); --border: var(--as-hellbeige);
    --success: #40916c; --error: var(--as-signal);
    --radius: 12px;
    --shadow-sm: 0 1px 4px rgba(55,47,44,.06);
    --shadow-md: 0 4px 16px rgba(55,47,44,.10);
    --shadow-lg: 0 8px 32px rgba(55,47,44,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'PT Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}

/* ═══ HERO (index.php) ═══ */
.hero{background:linear-gradient(160deg,var(--as-braun-dark) 0%,#4a3f3a 50%,var(--as-braun) 100%);
  color:#fff;text-align:center;padding:2rem 1.5rem 1.5rem;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--as-rot),var(--as-orange),var(--as-rot))}
.hero-top{display:flex;justify-content:center;align-items:center;gap:2rem;margin-bottom:.75rem;text-decoration:none}
.hero-logo{height:52px;width:auto;filter:brightness(0) invert(1);opacity:.92;transition:opacity .2s}
.hero-logo:hover{opacity:1}
.hero-date{font-size:.85rem;color:var(--as-pfirsich);letter-spacing:.04em;font-weight:700}

/* ═══ SUB-PAGE HEADER ═══ */
header{display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 1.25rem;background:var(--as-braun-dark);color:#fff}
header .back{color:var(--as-pfirsich);text-decoration:none;font-size:.9rem;font-weight:700;transition:color .15s}
header .back:hover{color:#fff}
header .badge{background:var(--as-rot);color:#fff;padding:.3rem .8rem;border-radius:20px;
  font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}

.logo-bar{display:flex;justify-content:center;align-items:center;gap:1.5rem;padding:.8rem 1rem;
  background:var(--as-braun-dark);border-bottom:3px solid var(--as-rot);text-decoration:none}
.logo-bar img{height:72px;width:auto;filter:brightness(0) invert(1);opacity:.85}

/* ═══ LANDING (index.php) ═══ */
.landing{max-width:480px;margin:0 auto;padding:1.5rem 1.25rem 3rem}
.workshop-card{background:var(--card);border-radius:var(--radius);padding:1.5rem;
  margin-bottom:1.25rem;box-shadow:var(--shadow-md);border-left:4px solid var(--as-rot);position:relative}
.workshop-card h1{font-size:1.35rem;line-height:1.3;margin-bottom:.4rem;color:var(--as-braun-dark);padding-right:2.5rem}

/* Fav-Button auf Workshop-Landing */
.fav-btn-landing{
  position:absolute;top:1.2rem;right:1.2rem;
  background:none;border:none;font-size:1.5rem;cursor:pointer;
  padding:.2rem;line-height:1;opacity:.35;transition:opacity .15s,transform .15s;flex-shrink:0}
.fav-btn-landing:hover{opacity:.7;transform:scale(1.15)}
.fav-btn-landing.active{opacity:1}
.share-btn-landing{
  position:absolute;top:3.2rem;right:1.2rem;
  background:none;border:none;cursor:pointer;
  padding:.2rem;line-height:1;opacity:.35;transition:opacity .15s,transform .15s;
  color:var(--text)}
.share-btn-landing:hover{opacity:.7;transform:scale(1.15)}
.share-btn-landing svg{display:block}
.typ-badge{display:inline-block;background:var(--as-dunkelrot);color:#fff;
  padding:.15rem .5rem;border-radius:4px;font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.meta-row{display:flex;gap:1rem;margin-top:.75rem;flex-wrap:wrap}
.meta-item{font-size:.85rem;color:var(--text-light);font-weight:700}
.action-hint{text-align:center;font-size:.85rem;color:var(--text-light);
  margin-bottom:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* Action Cards – 2×2 Grid */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.action-card{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.5rem;background:var(--card);padding:1.4rem 1rem 1.2rem;border-radius:var(--radius);
  text-decoration:none;color:var(--text);box-shadow:var(--shadow-sm);border:2px solid var(--border);
  transition:all .2s ease;position:relative;overflow:hidden}
.action-card::before{content:'';position:absolute;left:0;top:0;right:0;height:0;
  background:var(--as-rot);transition:height .2s}
.action-card:hover{border-color:var(--as-rot);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.action-card:hover::before{height:3px}
.action-card:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.action-icon{font-size:2.2rem;width:56px;height:56px;display:flex;
  align-items:center;justify-content:center;background:var(--as-sand);border-radius:14px;flex-shrink:0}
.action-label{font-size:1rem;font-weight:700;display:block;color:var(--as-braun-dark);line-height:1.2}
.action-desc{font-size:.75rem;color:var(--text-light);display:block;margin-top:.1rem;line-height:1.35}
/* Gesperrte Cards */
.card-locked{
  opacity:.5;pointer-events:none;cursor:not-allowed;position:relative;
  background:var(--as-sand);border-style:dashed}
.card-locked .card-hint{
  display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;
  color:var(--as-dunkelrot);margin-top:.25rem;font-weight:700}
/* Programm-Banner */
.programm-banner{display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--as-braun-dark);color:#fff;padding:.9rem 1.25rem;border-radius:var(--radius);
  text-decoration:none;font-weight:700;font-size:.95rem;margin-top:1.25rem;
  box-shadow:var(--shadow-sm);transition:all .2s ease;letter-spacing:.02em}
.programm-banner:hover{background:var(--as-warmgrau);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.programm-banner:active{transform:translateY(0)}

/* ═══ MAIN (sub-pages) ═══ */
main{max-width:600px;margin:0 auto;padding:1.5rem}
h1{font-size:1.4rem;margin-bottom:1rem;line-height:1.3;color:var(--as-braun-dark);font-weight:700}
h2{font-size:1.05rem;margin:1.5rem 0 .75rem;color:var(--as-dunkelrot);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}

/* ═══ BUTTONS ═══ */
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:var(--radius);text-decoration:none;
  font-family:'PT Sans',sans-serif;font-size:1.05rem;font-weight:700;text-align:center;
  border:none;cursor:pointer;transition:transform .1s,box-shadow .15s,background .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--as-rot);color:#fff;box-shadow:0 3px 8px rgba(207,54,40,.3)}
.btn-primary:hover{background:var(--as-dunkelrot);box-shadow:0 4px 12px rgba(158,51,35,.35)}
.btn-secondary{background:var(--as-braun-dark);color:var(--as-pfirsich);box-shadow:0 3px 8px rgba(55,47,44,.2)}
.btn-secondary:hover{background:var(--as-warmgrau);color:#fff}
.btn-block{display:block;width:100%}

/* ═══ ALERTS ═══ */
.alert{padding:1rem 1.5rem;border-radius:var(--radius);margin-bottom:1rem;text-align:center}
.alert.success{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.alert.error{background:#fce4e4;color:var(--as-signal);border:1px solid #f5c6c6}

/* ═══ STAR RATING ═══ */
.rating-group{background:var(--card);padding:1rem 1.2rem;border-radius:var(--radius);
  margin-bottom:.75rem;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:border-color .2s}
.rating-group:focus-within{border-color:var(--as-orange)}
.rating-group label{display:block;font-weight:700;margin-bottom:.5rem;font-size:.95rem;color:var(--as-braun-dark)}
.stars{display:flex;gap:.4rem;font-size:2rem;cursor:pointer}
.stars .star{color:var(--as-hellbeige);transition:color .15s,transform .1s;user-select:none}
.stars .star.active{color:var(--as-orange)}
.stars .star:hover{color:var(--as-rot);transform:scale(1.15)}

/* ═══ FORMS ═══ */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-weight:700;margin-bottom:.5rem;color:var(--as-braun-dark)}
textarea{width:100%;padding:.75rem;border:2px solid var(--as-hellbeige);border-radius:8px;
  font-size:1rem;resize:vertical;font-family:'PT Sans',sans-serif;color:var(--text);
  background:var(--card);transition:border-color .2s,box-shadow .2s}
textarea:focus{outline:none;border-color:var(--as-rot);box-shadow:0 0 0 3px rgba(207,54,40,.12)}
textarea::placeholder{color:var(--as-beige)}

/* ═══ Q&A ═══ */
.qa-form{margin-bottom:2rem}
.qa-form textarea{margin-bottom:.75rem}
.questions-list{display:flex;flex-direction:column;gap:.75rem}
.question-card{display:flex;gap:.75rem;align-items:flex-start;background:var(--card);padding:1rem;
  border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:box-shadow .2s}
.question-card:hover{box-shadow:var(--shadow-md)}
.question-card.answered{opacity:.55;border-left:3px solid var(--success)}
.upvote-form{flex-shrink:0}
.upvote-btn{background:none;border:2px solid var(--as-hellbeige);border-radius:8px;
  padding:.4rem .6rem;cursor:pointer;font-size:.85rem;color:var(--text-light);text-align:center;
  min-width:48px;font-family:'PT Sans',sans-serif;font-weight:700;transition:all .15s}
.upvote-btn:hover{border-color:var(--as-rot);color:var(--as-rot);
  background:rgba(207,54,40,.05);transform:scale(1.05)}
.question-text{flex:1}
.question-text p{margin-bottom:.3rem;line-height:1.4}
.status-badge{font-size:.75rem;color:var(--success);font-weight:700}
.empty{color:var(--text-light);text-align:center;padding:2rem 0}

/* ═══ FAQ SECTION ═══ */
.faq-section{background:var(--card);border-top:3px solid var(--as-hellbeige);padding:2rem 1.25rem 1.5rem}
.faq-inner{max-width:480px;margin:0 auto}
.faq-title{text-align:center;font-size:.95rem;color:var(--as-braun-dark);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:1rem}
.faq-item{border-bottom:1px solid var(--border);padding:.65rem 0}
.faq-item:last-child{border-bottom:none}
.faq-item summary{font-weight:700;font-size:.9rem;color:var(--as-braun-dark);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:.5rem;padding:.25rem 0;transition:color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'▸';color:var(--as-rot);font-size:.85rem;transition:transform .2s;flex-shrink:0}
.faq-item[open] summary::before{transform:rotate(90deg)}
.faq-item summary:hover{color:var(--as-rot)}
.faq-item p{font-size:.85rem;color:var(--text-light);line-height:1.5;padding:.5rem 0 .25rem 1.1rem}
.faq-item a{color:var(--as-rot);text-decoration:none;font-weight:700}
.faq-item a:hover{text-decoration:underline}

/* ═══ FOOTER ═══ */
footer{text-align:center;padding:2rem 1.5rem;color:var(--text-light);font-size:.8rem}
.footer-logo{height:96px;margin-bottom:.5rem;opacity:.5;filter:grayscale(100%);transition:opacity .2s}
.footer-logo:hover{opacity:.8}
footer p{margin-top:.3rem}
footer a{color:var(--text-light);text-decoration:none;transition:color .15s}
footer a:hover{color:var(--as-rot)}
/* Footer CTA row */
.footer-cta-row{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0 .8rem}
.ticket-btn{display:inline-flex;align-items:center;gap:.4rem;
  background:var(--as-rot);color:#fff;border:2px solid var(--as-rot);
  padding:.55rem 1.1rem;border-radius:8px;font-size:.82rem;font-weight:700;
  cursor:pointer;font-family:inherit;text-decoration:none;
  transition:background .15s,border-color .15s,transform .1s;line-height:1.3}
.ticket-btn:hover{background:var(--as-dunkelrot);border-color:var(--as-dunkelrot)}
.ticket-btn:active{transform:scale(.97)}
.share-btn{display:inline-flex;align-items:center;gap:.4rem;background:none;
  border:2px solid var(--as-beige);color:var(--text-light);padding:.55rem 1.1rem;
  border-radius:8px;font-size:.82rem;cursor:pointer;font-family:inherit;
  transition:border-color .15s,color .15s;line-height:1.3}
.share-btn:hover{border-color:var(--as-rot);color:var(--as-rot)}

/* ═══ WALL (Beamer) ═══ */
body.wall{background:var(--as-braun-dark)}
.wall .logo-bar{background:transparent;border-bottom:none;padding:1.5rem}
.wall .logo-bar img{height:48px;opacity:.7}
.wall .wall-header{border-bottom:3px solid var(--as-rot);padding-bottom:1.5rem}
.wall .wall-question{background:rgba(255,255,255,.06);border-left:4px solid var(--as-rot);backdrop-filter:blur(4px)}
.wall .wall-votes{color:var(--as-orange)}

/* ═══ RESPONSIVE ═══ */
@media(min-width:420px){
  .hero{padding:2.5rem 2rem 1.75rem}
  .hero-logo{height:90px}
  .hero-date{font-size:.9rem}
  .action-card{padding:1.5rem 1.2rem}
  .action-icon{width:60px;height:60px;font-size:2.4rem}
}
/* ── Upvote States (Spam-Schutz) ── */
.upvote-btn.voted {
    border-color: var(--as-rot);
    color: var(--as-rot);
    background: rgba(207,54,40,0.08);
    cursor: default;
}
.upvote-btn:disabled { opacity: 0.7; cursor: default; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.upvote-btn.shake { animation: shake 0.4s ease; }