:root{
  --container: 1100px;
  --teal: #0a8f96;
  --orange: #f2a400;
  --green: #7fd21a; /* NEU: fuer Foerderer Hintergrund */
  --line: #e2e8f0;
  --shadow: 0 18px 50px rgba(2, 6, 23, .18);

  /* Farben aus deinen Screenshots */
  --logo-blue: #088890;   /* Screenshot 1 (Ausgewählt/Warenkorb) */
  --logo-green: #90c018;  /* Screenshot 2 (Verkauft/Belegt) */

  --grid-gap: #e5e7eb;    /* Hellgrau Zwischenraum */
  --lines: #6b7280;       /* Dunkelgrau Linien */

  /* Tooltip Position (wird per JS gesetzt) */
  --tt-x: 0px;
  --tt-y: 0px;
}

*{ box-sizing:border-box; }
body{
  padding-top: 95px;
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0f172a;
  background:#fff;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

/* HEADER */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  z-index: 99999;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}
.brand-logo{ height:77px; width:auto; }

.main-nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex:1;
  justify-content:center;
}
.nav-link{
  font-weight:800;
  letter-spacing:.04em;
  font-size:13px;
  padding:8px 10px;
  color:#0b1220;
}
.nav-link.is-active{
  border-bottom:3px solid var(--orange);
  padding-bottom:10px;
}

.social{
  display:flex;
  gap:10px;
  align-items:center;
}
.social-link{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
}
.social-link img{ width:22px; height:22px; }

/* PANELS */
.panel{
  background: var(--teal);
  color:#fff;
  padding:56px 0 64px;
  position: relative;
}

/* NEU: panel-farben pro Abschnitt */
#foerderer-section.panel{
  background: var(--green);
}
#hauptsponsor-section.panel{
  background: var(--orange);
}

.back-btn{
  position:absolute;
  left:24px;
  top:22px;
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  font-size:20px;
  border:2px solid rgba(255,255,255,.55);
}
.back-btn:hover{ background: rgba(255,255,255,.12); }

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items:center;
}

.text h1,
.panel-title{
  margin:0 0 14px;
  font-size:34px;
  line-height:1.05;
  font-weight:900;
}
.text p{
  margin:0;
  max-width: 44ch;
  line-height:1.5;
  font-size:13px;
  opacity:.95;
}

.btn-outline{
  display:inline-block;
  margin-top:14px;
  padding:10px 22px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.6);
  color:#fff;
  font-weight:800;
}
.btn-outline:hover{ background: rgba(255,255,255,.10); }

.btn-outline.dark{
  color:#0f172a;
  border-color:#0f172a;
}
.btn-outline.dark:hover{
  background:#0f172a;
  color:#fff;
}

/* Placeholder boxes */
.placeholder-box{
  background:#e5e5e5;
  color:#9aa0a6;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:900;
  min-height:220px;
  border-radius:4px;
}
.placeholder-box.big{
  min-height:280px;
  border-radius:8px;
}

/* EXTRA section */
.extra{
  padding: 34px 0 10px;
  background:#fff;
}
.extra-inner{
  background:#fff;
  border-radius:14px;
  box-shadow: 0 14px 40px rgba(2, 6, 23, .10);
  border: 1px solid rgba(226,232,240,.9);
  padding: 18px;
}
.center{ text-align:center; }

/* CONTACT BLOCKS */
.contact-block{
  text-align:center;
  padding: 48px 0 60px;
}
.contact-image{
  display: block;
  margin: 0 auto 10px;
  max-width: 200px;
  opacity: 0.85;
}
.contact-block h3{
  margin:0 0 6px;
  color:#0b1220;
  font-weight:900;
}
.contact-block p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#64748b;
}
.contact-block a{
  color:#0a8f96;
  font-weight:800;
}

/* Responsive */
@media (max-width: 920px){
  .main-nav{ display:none; }
  .split{ grid-template-columns:1fr; }
}

/* =========================================
   PITCH (Rahmen + Linienoverlay)
========================================= */

.pitch{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  background:#000;          /* schwarzer Rahmen */
  padding: 14px;
  border-radius: 16px;
}

.pitch-lines{
  pointer-events: none;
  position: absolute;
  inset: 14px;
  z-index: 50;
  border-radius: 12px;
}

/* Mittellinie */
.half-line{
  position:absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--lines);
  transform: translateX(-1.5px);
}

/* Mittelkreis */
.center-circle{
  position: absolute !important;
  width: 18% !important;
  aspect-ratio: 1 / 1 !important;
  border: 3px solid var(--lines) !important;
  border-radius: 50% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Sechzehner */
.box{
  position: absolute !important;
  top: 22% !important;
  width: 14.65% !important;
  height: 56% !important;
  border: 3px solid var(--lines) !important;
}

.box.left{
  left: 0;
  border-left: none !important;
}

.box.right{
  right: 0;
  border-right: none !important;
}

/* =========================================
   Anteil-Grid (50 x 28 Felder)
========================================= */

.share-grid-wrapper{
  background: transparent;
  border-radius: 12px;
  padding: 0;
  overflow:auto;
}

/* Hintergrund = Zwischenräume (Hellgrau) */
.share-grid{
  position: relative;
  display:grid;
  grid-template-columns: repeat(50, 1fr);
  grid-template-rows: repeat(28, 1fr);
  gap: 3px;
  min-width: 1000px;
  padding: 10px;
  border-radius: 12px;
  background: var(--grid-gap);
}

/* Freie Felder = Weiß */
.share-cell{
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor:pointer;
  padding:0;
  transition: background .15s ease, border-color .15s ease;
}

/* Hover */
.share-cell:hover{
  background:#f8fafc;
}

/* Ausgewählt / Warenkorb = Farbe aus Screenshot 1 */
.share-cell.is-active{
  background: var(--logo-blue) !important;
  border-color: var(--logo-blue) !important;
}

/* Fokus */
.share-cell:focus-visible{
  outline: 2px solid var(--logo-blue);
  outline-offset: 2px;
}

/* Belegt/Verkauft = Farbe aus Screenshot 2 */
.share-cell.is-locked,
.share-cell.is-locked.is-active{
  background: var(--logo-green) !important;
  border-color: var(--logo-green) !important;
  cursor: not-allowed !important;
}

.share-cell.is-locked:hover,
.share-cell.is-locked.is-active:hover{
  background: var(--logo-green) !important;
}

/* ================= TOOLTIP (VERKAUFT) ================= */

.share-cell.is-sold{
  position: relative;
}

/* FIXED Tooltip: wird NIE von overflow abgeschnitten */
.share-cell.is-sold::after{
  content: attr(data-buyer);
  position: fixed;
  left: var(--tt-x);
  top: var(--tt-y);
  transform: translate(12px, -50%);
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
}

.share-cell.is-sold:hover::after{
  opacity: 1;
}

.share-cell.is-sold:not([data-buyer])::after{
  display: none;
}

/* ===== Modal ===== */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 200;
}

.modal.is-open{
  display: block;
}

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.55);
}

.modal-card{
  position: relative;
  width: min(520px, calc(100% - 40px));
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(2,6,23,.35);
  overflow: hidden;
}

.modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-head h3{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
}

.modal-close{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.modal-body{
  padding: 16px;
  color: #0f172a;
}

.modal-line{
  margin: 8px 0;
  color: #334155;
}

.modal-total{
  margin: 14px 0 10px;
  font-size: 16px;
  color: #0f172a;
}

.modal-actions{
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.modal-hint{
  margin: 12px 0 0;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

/* Käufer-Form im Modal */
.buyer-form{
  margin: 14px 0 6px;
  display: grid;
  gap: 10px;
}

.buyer-label{
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  display: grid;
  gap: 6px;
}

.buyer-input{
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.buyer-input:focus{
  border-color: #94a3b8;
}

.buyer-error{
  margin: 2px 0 0;
  color: #dc2626;
  font-size: 12px;
  min-height: 16px;
}

/* NEU: Checkbox-Style */
.buyer-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  user-select: none;
}

.buyer-check input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--logo-blue);
}

.blocker123{
  height: 10px;
  overflow: hidden;
}
/* === FORCE PANEL COLORS (ganz unten lassen) === */
:root{
  --green: #90c018; /* falls noch nicht vorhanden */
}

#foerderer-section{
  background: var(--green) !important;
}

#werbepartner-section{
  background: var(--teal) !important;
}

#hauptsponsor-section{
  background: var(--orange) !important;
}
.visual{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 300px;
  max-height: 300px;
}
/* FOOTER SHARE */
.site-footer{
  background: #ecfeff;
  border-top: 1px solid rgba(226,232,240,.7);
  padding: 40px 0 28px;
}
.footer-inner{
  display: grid;
  place-items: center;
  gap: 14px;
}
.footer-title{
  margin: 0;
  text-align: center;
  color: var(--teal-dark);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}
.footer-social{
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer-social-link{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #0b7e83;
  display: grid;
  place-items: center;
}
.footer-social-link img{
  width: 16px;
  height: 16px;
  filter: brightness(10);
}

.footer-links{
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(15, 23, 42, .65);
}
.footer-links a:hover{
  color: rgba(15, 23, 42, .9);
}