/* =========================================================
   Tennisferien – Frontend Styles
   Marke: Navy #1B2341 / Blau #113286 / Akzent Amber #F59E0B
   Fonts: Exo (Headings), Inter (Body) – mit System-Fallback
   ========================================================= */

.tf-camps, .tf-camps *,
.tf-detail, .tf-detail *,
.tf-form-wrapper, .tf-form-wrapper * { box-sizing: border-box; }

/* ---------- Übersicht ---------- */
.tf-camps { max-width: 1200px; margin: 0 auto; padding: 80px 24px; }
.tf-camps__header { text-align: center; margin: 0 0 56px; }
.tf-camps__label {
  display: inline-block; font-family: 'Exo', sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: #F59E0B; margin: 0 0 12px;
}
.tf-camps__title {
  font-family: 'Exo', sans-serif; font-style: italic;
  font-size: clamp(26px, 3.5vw, 38px); font-weight: 700;
  color: #1B2341; line-height: 1.2; margin: 0 0 12px;
}
.tf-camps__desc {
  font-family: 'Inter', sans-serif; font-size: 16px; color: #6B7280;
  max-width: 600px; margin: 0 auto; line-height: 1.7;
}
.tf-camps__empty { text-align: center; color: #6B7280; font-family: 'Inter', sans-serif; }

.tf-camps__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

/* ---------- Karte ---------- */
.tf-camp {
  background: #fff; border-radius: 16px; overflow: hidden;
  border: 1px solid #E5E7EB; box-shadow: 0 4px 24px rgba(11,26,62,.06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tf-camp:hover {
  transform: translateY(-6px); box-shadow: 0 16px 48px rgba(11,26,62,.12);
  border-color: #F59E0B;
}
.tf-camp__link { display: block; text-decoration: none; color: inherit; }
.tf-camp__image { aspect-ratio: 16/9; overflow: hidden; position: relative; background: #EEF1F6; }
.tf-camp__img, .tf-camp__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.tf-camp:hover .tf-camp__img, .tf-camp:hover .tf-camp__image img { transform: scale(1.05); }

.tf-camp__date-badge {
  position: absolute; top: 16px; left: 16px; background: #F59E0B; color: #fff;
  font-family: 'Exo', sans-serif; font-style: italic; font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 8px;
}
.tf-camp__status {
  position: absolute; top: 16px; right: 16px; font-family: 'Exo', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 50px;
}
.tf-camp__status--open  { background: #ECFDF5; color: #059669; }
.tf-camp__status--few   { background: #FFFBEB; color: #B45309; }
.tf-camp__status--closed{ background: #FEF2F2; color: #B91C1C; }
.tf-camp__status--past  { background: #F3F4F6; color: #6B7280; }

.tf-camp--past .tf-camp__image img,
.tf-camp--past .tf-camp__img { filter: grayscale(60%); opacity: .85; }

.tf-camp__body { padding: 24px; }
.tf-camp__location {
  font-family: 'Exo', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: #F59E0B; margin: 0 0 8px;
}
.tf-camp__name {
  font-family: 'Exo', sans-serif; font-style: italic; font-size: 22px; font-weight: 700;
  color: #1B2341; line-height: 1.25; margin: 0 0 10px;
}
.tf-camp__text {
  font-family: 'Inter', sans-serif; font-size: 14px; color: #6B7280;
  line-height: 1.7; margin: 0 0 18px;
}
.tf-camp__details { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 20px; }
.tf-camp__detail {
  display: flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; color: #374151;
}
.tf-camp__detail svg { width: 14px; height: 14px; stroke: #9CA3AF; }

.tf-camp__btn {
  display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; color: #113286; transition: gap .3s ease, color .3s ease;
}
.tf-camp:hover .tf-camp__btn { gap: 10px; color: #0540D6; }
.tf-camp__btn svg { width: 14px; height: 14px; }

/* ---------- Detailseite ---------- */
.tf-detail__hero {
  max-width: 1100px; margin: 32px auto 0; padding: 0 24px;
}
.tf-detail__hero-img {
  display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover;
  border-radius: 18px; box-shadow: 0 16px 48px rgba(11,26,62,.14);
}
.tf-detail {
  display: grid; grid-template-columns: 320px 1fr; gap: 40px;
  max-width: 1100px; margin: 48px auto; padding: 0 24px;
  font-family: 'Inter', sans-serif;
}
.tf-detail__side { position: relative; }
.tf-detail__card {
  position: sticky; top: 24px; background: #1B2341; color: #fff;
  border-radius: 16px; padding: 28px 26px; box-shadow: 0 16px 48px rgba(11,26,62,.18);
}
.tf-detail__badge {
  display: inline-block; font-family: 'Exo', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 5px 12px; border-radius: 50px;
  margin-bottom: 18px;
}
.tf-detail__badge--open  { background: #ECFDF5; color: #059669; }
.tf-detail__badge--few   { background: #FFFBEB; color: #B45309; }
.tf-detail__badge--closed{ background: #FEF2F2; color: #B91C1C; }
.tf-detail__badge--past  { background: rgba(255,255,255,.14); color: #D1D5DB; }
.tf-detail__eyebrow {
  font-family: 'Exo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #F59E0B; margin: 14px 0 2px;
}
.tf-detail__date, .tf-detail__region { font-size: 17px; font-weight: 600; margin: 0; }
.tf-detail__facts { list-style: none; margin: 20px 0 0; padding: 0; }
.tf-detail__facts li {
  display: flex; align-items: center; gap: 10px; font-size: 14px;
  padding: 9px 0; border-top: 1px solid rgba(255,255,255,.12);
}
.tf-detail__facts svg { width: 16px; height: 16px; stroke: #F59E0B; flex: 0 0 auto; }
.tf-detail__cta {
  display: block; text-align: center; margin-top: 24px; padding: 13px 20px;
  background: #F59E0B; color: #1B2341; font-family: 'Exo', sans-serif; font-weight: 700;
  font-style: italic; border-radius: 10px; text-decoration: none; transition: background .25s ease;
}
.tf-detail__cta:hover { background: #FBBF24; }

.tf-detail__block { margin-bottom: 36px; }
.tf-detail__intro {
  margin: 0 0 36px; font-size: 16px; line-height: 1.75; color: #374151;
}
.tf-detail__intro > :first-child { margin-top: 0; }
.tf-detail__intro > :last-child { margin-bottom: 0; }
.tf-detail__intro p { margin: 0 0 16px; }
.tf-detail__intro img { max-width: 100%; height: auto; border-radius: 12px; }

/* Broschüren-CTA-Box */
.tf-brochure {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #1B2341; color: #fff; padding: 22px 24px; border-radius: 16px;
  box-shadow: 0 12px 36px rgba(11,26,62,.16); margin: 0 0 36px;
}
.tf-brochure__icon {
  flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: center;
  justify-content: center; background: rgba(245,158,11,.16); border-radius: 12px; color: #F59E0B;
}
.tf-brochure__icon svg { width: 24px; height: 24px; }
.tf-brochure__text { flex: 1 1 220px; }
.tf-brochure__title {
  font-family: 'Exo', sans-serif; font-style: italic; font-weight: 700; font-size: 19px; margin: 0 0 3px;
}
.tf-brochure__desc { margin: 0; font-size: 14px; color: #C7CDE0; line-height: 1.6; }
.tf-brochure__btn {
  flex: 0 0 auto; display: inline-block; background: #F59E0B; color: #1B2341;
  font-family: 'Exo', sans-serif; font-style: italic; font-weight: 700; font-size: 15px;
  padding: 12px 24px; border-radius: 999px; text-decoration: none;
  transition: background .25s ease, transform .25s ease;
}
.tf-brochure__btn:hover { background: #FBBF24; transform: translateY(-2px); }
.tf-detail__h {
  font-family: 'Exo', sans-serif; font-style: italic; font-size: 24px; font-weight: 700;
  color: #1B2341; margin: 0 0 18px;
}
.tf-detail__leistungen { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.tf-detail__leistungen li { display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: #374151; }
.tf-detail__leistungen svg { width: 16px; height: 16px; stroke: #059669; flex: 0 0 auto; margin-top: 2px; }

.tf-detail__prices { display: flex; flex-wrap: wrap; gap: 18px; }
.tf-price {
  flex: 1 1 160px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 14px;
  padding: 22px 20px; text-align: center;
}
.tf-price__label {
  font-family: 'Exo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #6B7280; margin: 0 0 6px;
}
.tf-price__value { font-family: 'Exo', sans-serif; font-size: 28px; font-weight: 700; color: #1B2341; margin: 0; }
.tf-price__note { font-size: 12px; color: #9CA3AF; margin: 6px 0 0; }

/* ---------- Formular ---------- */
.tf-form-wrapper {
  max-width: 720px; margin: 40px auto; padding: 36px 34px 32px;
  border-radius: 20px; background: #1B2341; color: #F9FAFB;
  box-shadow: 0 24px 60px rgba(11,26,62,.45); font-family: 'Inter', sans-serif;
}
.tf-heading h2 {
  margin: 0 0 4px; font-family: 'Exo', sans-serif; font-style: italic;
  font-size: 28px; font-weight: 700;
}
.tf-heading p { margin: 0 0 22px; color: #F59E0B; font-weight: 600; }

.tf-fieldset { border: none; margin: 0 0 22px; padding: 0; }
.tf-fieldset legend {
  font-family: 'Exo', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #F59E0B; padding: 0; margin: 0 0 12px;
}
.tf-row { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.tf-field { flex: 1; min-width: 200px; }
.tf-field label { display: block; font-size: 14px; color: #E5E7EB; }
.tf-field input, .tf-field textarea {
  width: 100%; margin-top: 6px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid #2C355A; background: #232C50; color: #F9FAFB; font-size: 14px;
  font-family: 'Inter', sans-serif;
}
.tf-field textarea { border-radius: 14px; resize: vertical; }
.tf-field input::placeholder, .tf-field textarea::placeholder { color: #7C86A8; }
.tf-field input:focus, .tf-field textarea:focus {
  outline: none; border-color: #F59E0B; box-shadow: 0 0 0 1px #F59E0B;
}

/* Pakete (Radio-Karten) */
.tf-pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tf-paket { position: relative; cursor: pointer; }
.tf-paket input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tf-paket__body {
  display: block; padding: 16px 18px; border-radius: 12px; border: 1px solid #2C355A;
  background: #232C50; transition: border-color .2s ease, background .2s ease;
}
.tf-paket input:checked + .tf-paket__body { border-color: #F59E0B; background: #2A335C; box-shadow: 0 0 0 1px #F59E0B inset; }
.tf-paket__label { display: block; font-weight: 600; font-size: 15px; }
.tf-paket__price { display: block; font-family: 'Exo', sans-serif; font-weight: 700; font-size: 20px; color: #F59E0B; margin-top: 4px; }
.tf-paket__note { display: block; font-size: 12px; color: #9CA3AF; margin-top: 4px; }

/* Wochen (Checkboxen) */
.tf-weeks { display: flex; flex-direction: column; gap: 8px; }
.tf-week { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #E5E7EB; cursor: pointer; }
.tf-week input { width: 18px; height: 18px; accent-color: #F59E0B; }

.tf-consent { margin: 4px 0 8px; }
.tf-consent label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #C7CDE0; }
.tf-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: #F59E0B; }

.tf-submit {
  display: block; margin: 22px auto 0; padding: 13px 40px; border-radius: 999px; border: none;
  background: #F59E0B; color: #1B2341; font-family: 'Exo', sans-serif; font-style: italic;
  font-weight: 700; font-size: 16px; cursor: pointer; transition: background .25s ease;
}
.tf-submit:hover { background: #FBBF24; }

.tf-form-closed { text-align: center; padding: 8px 0; }
.tf-form-closed__badge {
  display: inline-block; font-family: 'Exo', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; border-radius: 50px; margin-bottom: 12px;
}
.tf-form-closed__badge--past   { background: rgba(255,255,255,.14); color: #D1D5DB; }
.tf-form-closed__badge--closed { background: #FEF2F2; color: #B91C1C; }
.tf-form-closed p { margin: 0; color: #C7CDE0; }

/* Meldungen */
.tf-message { max-width: 720px; margin: 16px auto; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-family: 'Inter', sans-serif; }
.tf-success { background: #ECFDF5; color: #166534; border: 1px solid #BBF7D0; }
.tf-error   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.tf-error ul { margin: 0 0 0 18px; padding: 0; }

/* Responsive */
@media (max-width: 900px) { .tf-detail { grid-template-columns: 1fr; } .tf-detail__card { position: static; } }
@media (max-width: 768px) {
  .tf-camps__grid { grid-template-columns: 1fr; }
  .tf-detail__leistungen { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tf-camps { padding: 56px 16px; }
  .tf-form-wrapper { padding: 28px 20px; }
}

/* =========================================================
   Elementor-/Theme-Override-Schutz
   Elementor (Button-Widget, Text-Editor, Theme-Styles) setzt eigene
   Regeln für a / a:hover / button und neutralisiert dadurch unsere
   Hover-Effekte und Button-Optik. Die folgenden Regeln erhöhen die
   Spezifität (Namespace-Präfix) und erzwingen die nötigen Eigenschaften
   mit !important. Nur die tatsächlich überschriebenen Properties werden
   hart gesetzt – Layout/Spacing bleibt unangetastet.
   ========================================================= */

/* Links in der Karte nicht unterstreichen / nicht umfärben */
.tf-camps .tf-camp__link,
.tf-camps .tf-camp__link:hover,
.tf-camps .tf-camp__link:focus,
.tf-camps .tf-camp__link:active {
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Karten-Hover: Lift + Schatten + Rahmen wieder aktiv erzwingen */
.tf-camps .tf-camp {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
  will-change: transform;
}
.tf-camps .tf-camp:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(11,26,62,.12) !important;
  border-color: #F59E0B !important;
}

/* Bild-Zoom beim Hover */
.tf-camps .tf-camp__img,
.tf-camps .tf-camp__image img {
  transition: transform .5s ease !important;
}
.tf-camps .tf-camp:hover .tf-camp__img,
.tf-camps .tf-camp:hover .tf-camp__image img {
  transform: scale(1.05) !important;
}

/* „Details ansehen"-Pfeil */
.tf-camps .tf-camp__btn {
  color: #113286 !important;
  text-decoration: none !important;
  transition: gap .3s ease, color .3s ease !important;
}
.tf-camps .tf-camp:hover .tf-camp__btn {
  gap: 10px !important;
  color: #0540D6 !important;
}

/* Detailseiten-CTA als Button (Elementor-Button-Reset überschreiben) */
.tf-detail a.tf-detail__cta,
.tf-detail .tf-detail__cta {
  background: #F59E0B !important;
  background-image: none !important;
  color: #1B2341 !important;
  border: none !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background .25s ease, transform .25s ease !important;
  box-shadow: none !important;
}
.tf-detail a.tf-detail__cta:hover,
.tf-detail .tf-detail__cta:hover {
  background: #FBBF24 !important;
  color: #1B2341 !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

/* Broschüren-Button gegen Elementor-/Theme-Link-Styles absichern */
.tf-detail a.tf-brochure__btn,
.tf-brochure a.tf-brochure__btn {
  background: #F59E0B !important;
  background-image: none !important;
  color: #1B2341 !important;
  border: none !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .25s ease, transform .25s ease !important;
}
.tf-detail a.tf-brochure__btn:hover,
.tf-brochure a.tf-brochure__btn:hover {
  background: #FBBF24 !important;
  color: #1B2341 !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

/* Absende-Button im Formular */
.tf-form-wrapper button.tf-submit,
.tf-form-wrapper .tf-submit {
  background: #F59E0B !important;
  background-image: none !important;
  color: #1B2341 !important;
  border: none !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .25s ease, transform .25s ease !important;
  box-shadow: none !important;
}
.tf-form-wrapper button.tf-submit:hover,
.tf-form-wrapper .tf-submit:hover {
  background: #FBBF24 !important;
  color: #1B2341 !important;
  transform: translateY(-2px) !important;
}

/* Paket-Radiokarten: Hover-/Checked-Zustand absichern */
.tf-form-wrapper .tf-paket .tf-paket__body {
  transition: border-color .2s ease, background .2s ease !important;
}
.tf-form-wrapper .tf-paket:hover .tf-paket__body {
  border-color: #F59E0B !important;
}
.tf-form-wrapper .tf-paket input:checked + .tf-paket__body {
  border-color: #F59E0B !important;
  background: #2A335C !important;
  box-shadow: 0 0 0 1px #F59E0B inset !important;
}

/* =========================================================
   Beitragstitel auf Camp-Einzelseiten ausblenden
   Ergänzt den the_title-Filter: deckt die typischen Titel-Container
   von Themes und Elementor (Post-Title-Widget / Seitentitel) ab.
   Nur auf der Camp-Einzelseite aktiv (body.single-tennisreise).
   ========================================================= */
body.single-tennisreise .entry-title,
body.single-tennisreise h1.entry-title,
body.single-tennisreise .page-title,
body.single-tennisreise .post-title,
body.single-tennisreise .elementor-page-title,
body.single-tennisreise .elementor-widget-theme-post-title {
  display: none !important;
}