/* =========================================================================
   Platzübersicht GC Pleiskirchen – Stylesheet (Contao 5.7)
   ---------------------------------------------------------------------------
   - Alle Regeln sind unter .gcp-platzuebersicht gescopt -> keine Kollision
     mit dem Contao-Theme.
   - Farben an die ECHTE Marke (Live-Theme golfclubpleiskirchen.de) angepasst:
       Grün     #1f3d2b   (war im Design #1f5d4c)
       Bordeaux #7a1234   (war im Design #7a2240)
       Creme    #f6f2eb   (war im Design #efe7d4)
   - Schriften: Lora (Serif) + Lato (Sans) – beide werden vom Theme bereits
     selbst gehostet -> kein Google-Fonts-CDN nötig (DSGVO).
   ========================================================================= */

.gcp-platzuebersicht {
  /* --- Markenfarben (verifiziert gegen Live-Theme) --- */
  --green:    #1f3d2b;   /* Marken-Grün */
  --green-d:  #16301f;   /* dunkleres Grün (Überschriften/Ränder) */
  --maroon:   #7a1234;   /* Marken-Bordeaux (Akzent) */
  --maroon-d: #770914;   /* Bordeaux dunkel / Hover */
  --paper:    #f6f2eb;   /* Creme / Kartenpapier */
  --page:     #fbfbf9;   /* Seitenhintergrund */
  --sand:     #c8b07a;   /* Sand / Gold-Akzent */
  --ink:      #26352c;   /* Text */
  --sans: "Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Lora", Georgia, serif;

  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.gcp-platzuebersicht * { box-sizing: border-box; }

/* Optionaler Kopfbereich (kann entfallen, wenn die Contao-Seite bereits
   eine eigene Überschrift mitbringt) */
.gcp-platzuebersicht .gcp-masthead .eyebrow {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--maroon); font-weight: 700;
}
.gcp-platzuebersicht .gcp-masthead h1 {
  font-family: var(--serif); font-weight: 600; color: var(--green-d);
  font-size: clamp(30px, 4.4vw, 46px); margin: 8px 0 0; line-height: 1.04;
}
.gcp-platzuebersicht .gcp-masthead p {
  max-width: 60ch; margin: 12px 0 0; color: #4d5a50; font-size: 16px;
}
.gcp-platzuebersicht .gcp-divider {
  height: 1px; background: linear-gradient(90deg, var(--green), transparent);
  margin: 24px 0 26px;
}
/*
.gcp-platzuebersicht .gcp-frame {
  background: #fff; border-radius: 18px; padding: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 50px -28px rgba(22,48,31,.5);
  border: 1px solid rgba(31,61,43,.10);
}*/
.gcp-platzuebersicht .gcp-frame {
  background: none;
  box-shadow: none;
  border: none;
}

/* ===== Karte ===== */
.gcp-platzuebersicht .rsrt-wrap {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--paper);
}
.gcp-platzuebersicht .rsrt-svg { display: block; width: 100%; height: auto; }
.gcp-platzuebersicht .rsrt-hole:hover .rsrt-marker-c { filter: brightness(1.05); }
.gcp-platzuebersicht .rsrt-hole:focus-visible .rsrt-marker-c {
  stroke: var(--maroon); stroke-width: 3;
}
.gcp-platzuebersicht .rsrt-hole { outline: none; }

/* ===== Detailpanel ===== */
.gcp-platzuebersicht .rsrt-panel {
  position: absolute; top: 16px; right: 16px; bottom: 16px; width: 360px;
  display: flex; flex-direction: column;
  background: rgba(246,242,235,.975); backdrop-filter: blur(5px);
  border: 1px solid rgba(31,61,43,.22); border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 20px 44px -20px rgba(22,48,31,.6);
  transform: translateX(22px); opacity: 0; pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.gcp-platzuebersicht .rsrt-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.gcp-platzuebersicht .rsrt-close {
  position: absolute; top: 8px; right: 12px; border: none; background: none;
  font-size: 26px; line-height: 1; color: #8a8470; cursor: pointer; z-index: 2;
}
.gcp-platzuebersicht .rsrt-panel-head { display: flex; align-items: center; gap: 12px; }
.gcp-platzuebersicht .rsrt-pnum {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  background: var(--maroon); color: #fff; display: grid; place-items: center;
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  box-shadow: 0 8px 18px -8px rgba(122,18,52,.7);
}
.gcp-platzuebersicht .rsrt-pmeta { flex: 1; }
.gcp-platzuebersicht .rsrt-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--maroon); font-weight: 700;
}
.gcp-platzuebersicht .rsrt-pmeta h4 {
  font-family: var(--serif); margin: 1px 0 0; font-size: 25px;
  color: var(--green-d); font-weight: 600;
}
.gcp-platzuebersicht .rsrt-pnav { display: flex; gap: 6px; }
.gcp-platzuebersicht .rsrt-pnav button {
  width: 34px; height: 34px; border: 1px solid rgba(31,61,43,.3);
  background: #fff; color: var(--green-d);
  border-radius: 9px; font-size: 18px; cursor: pointer;
  transition: background .15s; line-height: 1;
}
.gcp-platzuebersicht .rsrt-pnav button:hover { background: rgba(31,61,43,.09); }

.gcp-platzuebersicht .rsrt-tees {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 16px 0 14px;
}
.gcp-platzuebersicht .rsrt-tee { text-align: center; }
.gcp-platzuebersicht .rsrt-tee-chip {
  display: block; padding: 8px 0; border-radius: 9px; border: 1.5px solid;
  font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
}
.gcp-platzuebersicht .rsrt-tee label {
  display: block; margin-top: 5px; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #7a8278;
}

.gcp-platzuebersicht .rsrt-illu {
  flex: 1; min-height: 0; background: #fff; border-radius: 12px;
  border: 1px solid rgba(31,61,43,.12); padding: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gcp-platzuebersicht .rsrt-illu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gcp-platzuebersicht .rsrt-note {
  font-size: 13px; color: #4d5a50; margin: 12px 4px 0;
  font-style: italic; font-family: var(--serif);
}

.gcp-platzuebersicht .rsrt-legend {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 12px 8px 4px; font-size: 12.5px; color: #5b6760;
}
.gcp-platzuebersicht .rsrt-legend span { display: inline-flex; align-items: center; gap: 7px; }
.gcp-platzuebersicht .rsrt-legend .hint { margin-left: auto; font-style: italic; color: var(--maroon); }
.gcp-platzuebersicht .rsrt-legend .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.gcp-platzuebersicht .dot.grn { background: #4f8f5a; }
.gcp-platzuebersicht .dot.snd { background: #ecdfb6; border: 1px solid #d7c79a; }
.gcp-platzuebersicht .dot.wtr { background: #7ba0b2; }
.gcp-platzuebersicht .dot.bld { background: var(--maroon); border-radius: 2px; }

.gcp-platzuebersicht .gcp-footnote { margin-top: 14px; font-size: 13px; color: #6b766e; }
.gcp-platzuebersicht .gcp-footnote b { color: var(--green-d); }

@media (max-width: 820px) {
  .gcp-platzuebersicht .rsrt-panel {
    position: static; width: auto; bottom: auto; transform: none; opacity: 1;
    display: none; margin: 12px; max-height: none;
  }
  .gcp-platzuebersicht .rsrt-panel.open { display: flex; }
  .gcp-platzuebersicht .rsrt-illu { min-height: 52vh; }
}