/* ============================================================
   LAUFKALENDER — shared design for ALL Bundesland pages.
   Edit ONCE here → every state page (Hessen, Bayern, …) updates.
   Loaded after shared.css. Content stays individual per page.
   ============================================================ */

/* ── BREADCRUMB ── */
.breadcrumb{background:var(--navy2,#01223A);padding:12px 5vw;font-size:0.78rem;color:rgba(255,255,255,0.4)}
.breadcrumb a{color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s}
.breadcrumb a:hover{color:var(--green)}
.breadcrumb span{margin:0 6px}

/* ── HERO ── */
.lk-hero{background:var(--navy);padding:120px 5vw 80px;position:relative;overflow:hidden}
.lk-hero::before{content:'';position:absolute;top:-140px;right:-100px;width:600px;height:600px;background:radial-gradient(circle,rgba(5,222,163,0.16) 0%,transparent 65%);pointer-events:none}
.lk-hero::after{content:'';position:absolute;bottom:-100px;left:-60px;width:400px;height:400px;background:radial-gradient(circle,rgba(86,255,214,0.07) 0%,transparent 65%);pointer-events:none}
.lk-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1240px;margin:0 auto}
.lk-hero h1{font-size:clamp(2.4rem,4vw,4.2rem);font-weight:800;color:#fff;line-height:1.08;letter-spacing:-0.02em;margin-bottom:20px}
.lk-hero .lk-sub{font-size:1rem;color:rgba(255,255,255,0.55);line-height:1.75;max-width:480px;margin-bottom:36px}
.lk-hero-img{width:100%;max-width:460px;border-radius:20px;box-shadow:0 32px 80px rgba(5,222,163,0.18);position:relative;z-index:1}

/* ── APP CTA STRIP ── */
.app-strip{background:linear-gradient(135deg,rgba(5,222,163,0.1),rgba(86,255,214,0.05));border-top:1px solid rgba(5,222,163,0.18);border-bottom:1px solid rgba(5,222,163,0.18);padding:40px 5vw}
.app-strip-inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;max-width:1240px;margin:0 auto}
.app-strip h3{font-size:1.3rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;margin-bottom:6px}
.app-strip p{color:var(--mid);font-size:0.9rem}
.app-strip-badges{display:flex;gap:12px;align-items:center;flex-shrink:0}
.app-strip-badges img{height:44px}
.app-strip-badges a{transition:transform 0.2s;display:block}
.app-strip-badges a:hover{transform:translateY(-2px)}

/* ── EVENT TABLE ── */
.events-section{background:var(--white)}
.events-table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--blight);margin-top:40px}
table.events-table{width:100%;border-collapse:collapse;font-size:0.88rem}
table.events-table th{background:var(--navy);color:rgba(255,255,255,0.7);font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px 20px;text-align:left;white-space:nowrap}
table.events-table td{padding:16px 20px;border-bottom:1px solid var(--blight);vertical-align:top;color:var(--mid);line-height:1.55}
table.events-table tr:last-child td{border-bottom:none}
table.events-table tr:hover td{background:rgba(5,222,163,0.03)}
table.events-table td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}
table.events-table a{color:var(--navy);font-weight:700;text-decoration:none;transition:color 0.2s}
table.events-table a:hover{color:var(--green)}
.dist-chip{display:inline-block;background:linear-gradient(135deg,rgba(5,222,163,0.12),rgba(86,255,214,0.07));color:var(--green);font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px;margin:2px 2px 2px 0;white-space:nowrap}
.highlight-row td{background:linear-gradient(135deg,rgba(5,222,163,0.04),rgba(86,255,214,0.02))}

/* ── EVENT CARDS ── */
.event-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.ev-card{background:var(--off);border:1px solid var(--blight);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;position:relative;overflow:hidden}
.ev-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform 0.35s}
.ev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(5,222,163,0.25)}
.ev-card:hover::after{transform:scaleX(1)}
.ev-card-date{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--green)}
.ev-card h3{font-size:1rem;font-weight:800;color:var(--navy);line-height:1.3;letter-spacing:-0.01em}
.ev-card .location{font-size:0.82rem;color:var(--light);display:flex;align-items:center;gap:5px}
.ev-card p{font-size:0.85rem;color:var(--mid);line-height:1.65;flex:1}
.ev-card .ev-link{color:var(--green);font-size:0.82rem;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:5px;transition:gap 0.2s;margin-top:auto}
.ev-card .ev-link:hover{gap:9px}
.ev-card .dists{display:flex;flex-wrap:wrap;gap:4px}

/* ── CITY SECTIONS ── */
.city-section{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;padding:64px 0;border-bottom:1px solid var(--blight)}
.city-section:last-child{border-bottom:none}
.city-section.reverse{direction:rtl}
.city-section.reverse>*{direction:ltr}
.city-badge{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--green2);font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:16px}
.city-section h3{font-size:1.5rem;font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:12px}
.city-section p{font-size:0.92rem;color:var(--mid);line-height:1.75;margin-bottom:16px}
.city-section .event-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.city-section .event-list li{display:flex;align-items:flex-start;gap:10px;font-size:0.88rem;color:var(--mid);line-height:1.5}
.city-section .event-list li::before{content:'→';color:var(--green);font-weight:700;flex-shrink:0}
.city-section .event-list a{color:var(--navy);font-weight:600;text-decoration:none;transition:color 0.2s}
.city-section .event-list a:hover{color:var(--green)}
.city-visual{background:var(--navy);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.city-visual::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(5,222,163,0.2) 0%,transparent 65%);pointer-events:none}
.city-visual .city-name{font-size:clamp(2rem,3.5vw,3rem);font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.05;white-space:nowrap;letter-spacing:-0.02em}
.city-visual .city-stat{font-size:0.8rem;color:rgba(255,255,255,0.4);margin-bottom:8px}
.city-events-mini{display:flex;flex-direction:column;gap:10px}
.mini-event{background:rgba(255,255,255,0.06);border-radius:10px;padding:12px 16px;border:1px solid rgba(255,255,255,0.08)}
.mini-event-name{font-size:0.85rem;font-weight:700;color:#fff}
.mini-event-dist{font-size:0.72rem;color:rgba(255,255,255,0.4);margin-top:3px}

/* ── REGIONS NAV ── */
.regions-section{background:var(--off)}
.regions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.region-link{background:var(--white);border:1px solid var(--blight);border-radius:10px;padding:14px 18px;text-decoration:none;color:var(--navy);font-size:0.85rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;transition:all 0.2s}
.region-link:hover{border-color:var(--green);color:var(--green);background:linear-gradient(135deg,rgba(5,222,163,0.05),transparent)}
.region-link.active{background:var(--navy);color:var(--green2);border-color:var(--navy)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .lk-hero-inner{grid-template-columns:1fr;text-align:center}
  .lk-hero-inner .eyebrow,.lk-hero-inner .store-row{justify-content:center}
  .lk-hero-img{max-width:280px;margin:0 auto}
  .app-strip-inner{grid-template-columns:1fr}
  .event-cards{grid-template-columns:1fr 1fr}
  .city-section{grid-template-columns:1fr;gap:32px}
  .city-section.reverse{direction:ltr}
  .regions-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .event-cards{grid-template-columns:1fr}
  .regions-grid{grid-template-columns:1fr 1fr}
  .lk-hero{padding:104px 5vw 60px}
  .app-strip-badges{flex-direction:column;align-items:flex-start}
}


/* ── COMMUNITY-EINSCHUB (App-Promo + Foto-Slider, kompakt) ── */
.lk-appcom{background:linear-gradient(135deg,rgba(5,222,163,0.1),rgba(86,255,214,0.05));border-top:1px solid rgba(5,222,163,0.18);border-bottom:1px solid rgba(5,222,163,0.18);padding:44px 5vw}
.lk-appcom-inner{max-width:1240px;margin:0 auto}
.lk-appcom-head{text-align:center;max-width:700px;margin:0 auto 24px}
.lk-appcom-head h3{font-size:1.4rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;margin-bottom:7px}
.lk-appcom-head p{color:var(--mid);font-size:0.9rem;line-height:1.55}
.lk-appcom .ev-track > div{width:212px !important;height:376px !important;flex:0 0 212px !important}
@media(max-width:600px){.lk-appcom{padding:36px 6vw}.lk-appcom .ev-track > div{width:196px !important;height:348px !important;flex-basis:196px !important}}

/* Empfohlene Events innerhalb des Community-Einschubs */
.lk-appcom-events{margin-top:40px;padding-top:34px;border-top:1px solid rgba(5,222,163,0.22)}
.lk-appcom-events-head{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:22px;text-align:center}
.lk-appcom-events-head .ev-band-star{width:32px;height:32px}
.lk-appcom-events-head h4{font-size:1.18rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em}


/* App-Feature-Abschnitt: mobil Bild gross unter den Buttons (wie Startseite) */
@media(max-width:900px){
  .lk-appfeat{grid-template-columns:1fr !important;gap:32px !important}
  .lk-appfeat-img{max-width:340px !important}
}