:root{
  --bg0:#07080a;
  --bg1:#0e1014;
  --card:rgba(17,20,26,.92);
  --line:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --acc:#d18a45;
  --glow:rgba(209,138,69,.28);
  --event:#ff9800;
}

/* ================= GLOBAL / TYPO NORMALIZE ================= */

html,body{ height:100%; }

html{
  background: var(--bg0);

  /* FIX: Android/Chrome/Edge Schrift-Autoscaling unterbinden + Basis normieren */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
}

body{
  margin:0;
  color:var(--text);
  background:transparent;
  overflow-x:hidden;
  min-height:100%;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;      /* FIX: konsistent über Browser */
  line-height: 1.45;    /* FIX: konsistent */
  font-weight: 400;     /* FIX: verhindert „dicker“ wirkend */
}

/* FIX: Chromium autosize kann auch in nested Containern greifen */
*{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Hintergrund */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(1100px 600px at 18% 0%, rgba(209,138,69,.08), transparent 60%),
    radial-gradient(900px 520px at 90% 18%, rgba(0,170,255,.06), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-repeat:no-repeat;
  background-size:cover;
}

/* Links */
a{ 
  color:#fff; 
  text-decoration:none; 
}
.small-muted > a{ color:var(--muted)!important; }

/* FIX: iOS/Android Overscroll / „weißer Bounce“ */
body{ overscroll-behavior-y: none; }
@supports (-webkit-touch-callout: none){
  body{ -webkit-overflow-scrolling: touch; }
}

/* Bootstrap Container Gutter (global konsistent) */
.container, .container-fluid{
  --bs-gutter-x: 1.25rem;
}

/* Smooth Anchor Jump unter Sticky Navbar */
section[id]{ scroll-margin-top:78px; }

/* ================= NAVBAR ================= */

.navbar{
  backdrop-filter:blur(10px);
  background:rgba(10,12,15,.55)!important;
  border-bottom:1px solid var(--line);
}

.nav-link{ color:rgba(255,255,255,.78)!important; }
.nav-link:hover{ color:#fff!important; }

.brand-logo{
  height:40px;
  width:auto;
  display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.brand-text{ margin-left:.35rem; }

/* ================= LEAGUES ================= */
.ligen-list{ display:flex; flex-direction:column; gap:.7rem; }
.ligen-item{
  padding:.75rem .9rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.ligen-team{ font-weight:700; color:rgba(255,255,255,.68); line-height:1.25; }
.ligen-meta{ font-size:.9rem; color:rgba(255,255,255,.68); margin-top:.15rem; }

/* ================= HERO ================= */

.hero{
  min-height:76vh;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 700px at 30% 30%, rgba(209,138,69,.22), transparent 62%),
    radial-gradient(900px 520px at 70% 15%, rgba(0,170,255,.10), transparent 58%),
    url("up.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(.95) contrast(1.05) brightness(.75);
  transform:scale(1.02);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,6,8,.55) 0%, rgba(5,6,8,.85) 60%, rgba(5,6,8,.98) 100%);
}

.hero .container{ position:relative; z-index:1; }

/* Typo stabilisieren (Browser-unabhängig) */
h1,h2,h3,h4,h5,h6{
  color:#fff!important;
  line-height:1.15;
  font-weight:700;
}

.hero h1{
  letter-spacing:-0.02em;
  text-shadow:0 14px 45px rgba(0,0,0,.55);
}

/* Bootstrap lead/display stabilisieren */
.lead{
  color:rgba(255,255,255,.75);
  font-size: 1.05rem;
  line-height: 1.4;
}
.display-4{
  font-size: clamp(1.8rem, 5vw, 3.2rem);
}

/* Desktop/Tablet Chips */
.hero-info{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,18,24,.55);
  font-size:.9rem;
  color:rgba(255,255,255,.90);
}
.chip i{ color:var(--acc); }

/* optional (aktuell aus) */
.hero-facts{
  display:none;
  margin:.55rem 0 .85rem;
  padding:.75rem .9rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(15,18,24,.45);
  backdrop-filter: blur(6px);
}
.hero-facts .fact{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  font-size:.92rem;
  color:rgba(255,255,255,.86);
  line-height:1.25;
  margin:.32rem 0;
}
.hero-facts .fact i{
  width:18px;
  text-align:center;
  color:var(--acc);
  margin-top:.05rem;
}

/* ================= CARDS ================= */

.card-dark{
  background:linear-gradient(180deg, var(--card), rgba(12,14,18,.95));
  border:1px solid var(--line);
  border-radius:1.25rem;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  overflow:hidden;
}

/* card-body immer flex, damit Buttons sauber unten kleben */
.card-dark .card-body{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

.icon-pill{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(209,138,69,.14);
  border:1px solid rgba(209,138,69,.22);
  color:var(--acc);
  flex:0 0 auto;
}

.small-muted{ color:var(--muted)!important; }

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin:.85rem 0;
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  box-shadow:0 0 0 4px rgba(0,0,0,.25);
}
.dot-open{ background:#22c55e; }
.dot-closed{ background:#ef4444; }

/* ================= BADGES ================= */

.badge-soft{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:rgba(255,255,255,.92)!important;
  font-weight:600;
}
.badge-soft i{ color:rgba(255,255,255,.92)!important; }

.badge-event{
  background:rgba(255,152,0,.12)!important;
  border:1px solid rgba(255,152,0,.22)!important;
  color:#ffcc80!important;
  font-weight:700;
}

/* ================= TYPO / SECTIONS ================= */

.hint{ color: var(--muted); }

section.py-5{
  padding-top:1.2rem!important;
  padding-bottom:1.2rem!important;
}

.section-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.6rem;
  flex-wrap:wrap;
}
.section-title h2{
  margin:0;
  letter-spacing:-0.01em;
  line-height:1.15;
}

/* ================= BUTTONS ================= */

.btn-acc{
  --bs-btn-bg:var(--acc);
  --bs-btn-hover-bg:#e19b55;
  --bs-btn-color:#14110f;
  box-shadow:0 14px 45px rgba(209,138,69,.22);
}

.btn-ghost{
  --bs-btn-color:rgba(255,255,255,.88);
  --bs-btn-border-color:rgba(255,255,255,.18);
  --bs-btn-hover-bg:rgba(255,255,255,.06);
}

/* ================= IMAGES ================= */

.img-cover{
  width:100%;
  height:270px;
  object-fit:cover;
  display:block;
}

/* ================= DRINKS / TABLE ================= */

.table-compact td{ padding:.35rem .25rem !important; }

.price{
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.92);
}
.drink-name{ font-size:.95rem; }
.drink-note{ font-size:.82rem; color:rgba(255,255,255,.60); }
.drink-price{ text-align:right; white-space:nowrap; }

/* FIX: „weißer Strich“ durch Bootstrap Table box-shadow */
.table > :not(caption) > * > *{ box-shadow:none !important; }

.table{
  --bs-table-bg: transparent;
  --bs-table-color: rgba(255,255,255,.82);
  --bs-table-border-color: rgba(255,255,255,.10);
}
.table *{ border-color: rgba(255,255,255,.10) !important; }
.table tbody tr{ border-bottom:1px solid rgba(255,255,255,.08) !important; }

.table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

/* ================= MAP ================= */

.map-wrap{
  position:relative;
  border-radius:1.25rem;
  overflow:hidden;
  min-height:360px;
}

iframe{ display:block; width:100%; height:100%; border:0; }

.map-logo-overlay{
  position:absolute;
  top:125px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
}
.map-logo-overlay img{
  height:48px;
  width:auto;
  display:block;
}

/* ================= FOOTER ================= */

.footer{
  border-top:1px solid var(--line);
  color:rgba(255,255,255,.72);
  background: transparent;
}
.footer, .footer *{ background-color: transparent; }

/* ================= MODAL ================= */

.modal-content{
  background: linear-gradient(180deg, #12151b, #0c0f14);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.4rem;
  box-shadow: 0 40px 120px rgba(0,0,0,.65);
  color: rgba(255,255,255,.88);
}

.modal-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 1.8rem;
}

.modal-title{
  font-weight: 700;
  letter-spacing: -.01em;
}

.modal-body{
  padding: 2rem 2rem;
  max-height: 70vh;
  overflow-y: auto;
}

.modal-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.2rem 1.8rem;
}

.legal-section{ margin-bottom: 2rem; }

.legal-section h6{
  font-weight: 600;
  margin-bottom: .6rem;
  color: var(--acc);
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.legal-section p{
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  margin-bottom: .6rem;
}

.legal-section strong{ color: rgba(255,255,255,.92); }

.legal-section a{
  color: var(--acc);
  text-decoration: none;
}
.legal-section a:hover{ text-decoration: underline; }

.modal-body::-webkit-scrollbar{ width: 6px; }
.modal-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.15);
  border-radius: 999px;
}

/* ================= MOBILE ================= */

@media (max-width:650.98px){

  /* echter Rand links/rechts */
  .container{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .container, .container-fluid{
    --bs-gutter-x: 1.25rem;
  }

  /* sehr kleine Geräte */
  @media (max-width:380px){
    .container{
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
    .container, .container-fluid{
      --bs-gutter-x: 1.1rem;
    }
  }

  /* HERO kompakt */
  .hero{ min-height: 42vh; }

  .hero .container{
    padding-top: 2.85rem!important;
    padding-bottom: 2.55rem!important;
  }

  .hero-info{ display:none!important; }

  .hero h1{
    margin-bottom:.7rem!important;
    font-size:1.8rem;
    line-height:1.15;
  }

  .hero .lead{
    margin-bottom:.55rem!important;
    font-size:.94rem;
    line-height:1.4;
  }

  .hero .btn{
    padding:.55rem .85rem;
    font-size:.9rem;
  }

  section.py-5{
    padding-top:.9rem!important;
    padding-bottom:.9rem!important;
  }

  #aktivitaeten{ padding-top:.5rem!important; }
  #aktivitaeten .section-title{ margin-bottom:.3rem!important; }

  /* Events Tabelle Mobile Layout */
  .events-table .events-row{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap:.35rem .6rem;
    padding:.55rem 0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .events-table .events-row > td{
    display:block;
    padding:0 !important;
    border:0 !important;
  }

  .events-table .ev-td-when{ grid-column:1; grid-row:1; }
  .events-table .ev-td-title{ grid-column:1; grid-row:2; }
  .events-table .ev-td-badge{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
  }

  .ev-title{
    display:block;
    line-height:1.25;
    font-weight:700;
  }

  .ev-when{
    display:block;
    font-size:.92rem;
    color:rgba(255,255,255,.72);
  }

  .map-logo-overlay{ top:120px; }
  .map-logo-overlay img{ height:34px; }

  body{ padding-bottom: env(safe-area-inset-bottom); }
}

/* ================= OPTIONAL: Chromium minimal kleiner (falls Android weiter „zu groß“) ================= */
/* Wenn es bei Chrome/Edge Android immer noch dicker/größer ist, lass das aktiv.
   Wenn es dann zu klein wird -> diesen Block wieder löschen. */
@supports (-webkit-appearance: none) and (not (-webkit-touch-callout: none)){
  body{ font-size: 15.5px; }
}

/* Kleine Utilities */
.text-small{ font-size: 15px; }
.text-rot{ color: red; }

/* falls im HTML noch vorhanden */
.w-hand{ margin-top:0 !important; }