/* 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}
.typ-badge[data-typ="Workshop"]{background:#e76f51}
.typ-badge[data-typ="Vortrag"]{background:#457b9d}
.typ-badge[data-typ="Expertpanel"]{background:#6a4c93}
.typ-badge[data-typ="Interview"]{background:#e9c46a;color:#333}
.typ-badge[data-typ="Roadtrip Girls.Hub"]{background:#f4a261}
.typ-badge[data-typ="eCamper"]{background:#2a9d8f}
.typ-badge[data-typ="Reisebericht"]{background:#8d99ae}
.typ-badge[data-typ="Demo"]{background:#e63946}
.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-partners{display:flex;justify-content:center;align-items:center;gap:2rem;margin:1.2rem -1.5rem -2rem;padding:1rem 1.5rem 4.5rem;background:rgba(0,0,0,.06);border-radius:0 0 0 0}
.footer-partners img{height:52px;width:auto;opacity:.7;transition:opacity .2s}
.footer-partners a:hover img{opacity:1}\n.app-version{color:var(--text-light,#999);font-size:.65rem;opacity:.5;margin:.25rem 0 0;text-align:center}
/* 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)}

/* ═══ WAITING LINKS (index.php) ═══ */
.wait-links {
  margin: .55rem 0 1.1rem;
  padding: .68rem .85rem .7rem;
  border: 1px solid color-mix(in srgb, var(--as-beige) 65%, white);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  box-shadow: 0 3px 12px rgba(55,47,44,.06);
  position: relative;
}
.wait-links::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--as-orange), var(--as-rot));
}
.wait-links-line {
  font-size: .76rem;
  color: var(--text-light);
  line-height: 1.55;
  margin: 0;
  padding-left: .35rem;
}
.wait-prefix {
  color: color-mix(in srgb, var(--text-light) 90%, white);
  margin-right: .32rem;
}
.wait-topic {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--as-warmgrau);
  margin-right: .25rem;
}
.wait-link-list {
  margin-right: .35rem;
}
.wait-link {
  color: var(--as-braun-dark);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--as-beige) 75%, white);
  transition: color .15s, border-color .15s;
}
.wait-link:hover {
  color: var(--as-rot);
  border-color: var(--as-rot);
}
.wait-sep {
  margin: 0 .22rem;
  color: color-mix(in srgb, var(--as-beige) 90%, white);
}
.wait-divider {
  margin: 0 .3rem;
  color: var(--as-orange);
}

/* ═══ SW UPDATE NOTICE ═══ */
.sw-update-notice {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(92vw, 460px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .55rem .65rem .55rem .8rem;
  border: 1px solid color-mix(in srgb, var(--as-beige) 75%, white);
  border-radius: 12px;
  background: rgba(55,47,44,.92);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(5px);
}
.sw-update-text {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--as-hellbeige);
}
.sw-update-actions {
  display: inline-flex;
  gap: .35rem;
}
.sw-update-actions button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: .3rem .55rem;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
.sw-update-later {
  background: transparent;
  color: var(--as-beige);
  border-color: rgba(191,183,175,.45) !important;
}
.sw-update-refresh {
  background: var(--as-rot);
  color: #fff;
}
.sw-update-refresh:hover { background: var(--as-dunkelrot); }

/* ═══ 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; }

/* ═══ CROSS-LINKING ═══ */
.cross-link-section {
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
}
.cross-link-section h3 {
    font-size: .7rem;
    font-weight: 600;
    color: var(--as-beige);
    margin-bottom: .75rem;
    letter-spacing: .03em;
}
.cross-link-scroll-wrap {
    position: relative;
}
.cross-link-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: .5rem;
    width: 2.5rem;
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none;
}
.cross-link-row {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cross-link-row::-webkit-scrollbar { display: none; }
.cross-link-card {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 210px;
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    font-size: .8rem;
    background: var(--card);
    transition: border-color .15s;
}
.cross-link-card:hover { border-color: var(--as-rot); }
.cross-link-card .typ-badge {
    font-size: .6rem;
    padding: .15rem .4rem;
    margin-bottom: .1rem;
    background: transparent;
    border: 1px solid currentColor;
    color: var(--as-warmgrau);
}
.cross-link-card strong { font-size: .82rem; line-height: 1.3; }
.cross-link-card > span { color: var(--text-light); font-size: .75rem; }
.cross-link-logo {
    width: 44px;
    height: 22px;
    object-fit: contain;
    margin-bottom: .15rem;
}