/*
Theme Name:   Surfcampfinder Child
Description:  Kompakte Design-Regeln für Single-Templates & Dashboard-Tiles
Author:       Sven
Template:     hello-elementor
Version:      1.1
*/

/* ---------- GLOBAL IMPORT (Hello‑Elementor Basis) ---------- */


/* ---------- GLOBALE VARIABLEN ---------- */
:root{
  /* Keyfact / Card Basics */
  --keyfact-pad:     clamp(16px,4vw,24px);
  --keyfact-gap:     clamp(16px,3vw,24px);
  --keyfact-radius:  16px;
  --keyfact-shadow:  0 2px 8px rgba(0,0,0,.06);
  --keyfact-bg:      #F3FAF8;
  --keyfact-head:    #003976;
  --keyfact-text:    #3B4045;

  /* Einheitliche Hover‑Effekte */
  --card-hover-shadow:    0 4px 12px rgba(0,0,0,.09);
  --card-hover-translate: -2px;
  --card-transition:      .2s ease;
	
  /* Tables */
  --table-head-bg:        #003976;  
  --table-head-color:     #F3FAF8;
  --table-row-bg:         #EAF5FF;
  --table-row-alt-bg:     #F3FAF8;
  --table-cell-pad:       12px 16px;
  --table-border-color:   rgba(0,0,0,.1);
  --table-font-size:      0.9rem;
  --header-offset:      120px;
}

/* =====================================================================
   1. SECTION – Single‑Template Layout
   ===================================================================== */
@media (min-width:1025px){
  .elementor-location-single .e-con > .e-con-inner{
    row-gap:24px !important;
    column-gap:32px !important;
  }
}
@media (min-width:769px) and (max-width:1024px){
  .elementor-location-single .e-con > .e-con-inner{
    row-gap:16px !important;
    column-gap:24px !important;
  }
}
@media (max-width:768px){
  .elementor-location-single .e-con > .e-con-inner{
    row-gap:16px !important;
    column-gap:16px !important;
  }
}

@media (min-width:1025px){
  .elementor-location-single > .e-con + .e-con{margin-top:96px!important;}
}
@media (min-width:769px) and (max-width:1024px){
  .elementor-location-single > .e-con + .e-con{margin-top:64px!important;}
}
@media (max-width:768px){
  .elementor-location-single > .e-con + .e-con{margin-top:48px!important;}
}

.elementor-location-single > .e-con.e-parent{
  --site-gap-inline: clamp(20px,6vw,96px);
  padding-inline: var(--site-gap-inline);
}
@media (min-width:1440px){
  .elementor-location-single > .e-con.e-parent{
    --site-gap-inline: clamp(48px,8vw,128px);
  }
}
.elementor-location-single > .e-con.e-parent.full-width{
  padding-inline:0!important;
}

/* ---------- Utility Spacing für Section / Content-Block ---------- */
body .elementor-element.section{
  /* top clamp ‑ rest 0 */
  padding: clamp(32px,6vw,64px) 0 0 !important;
}
body .elementor-element.content-block{
  padding: clamp(24px,4vw,48px) 0 0 !important;
}

/* =====================================================================
   2. COMPONENT – Dashboard‑Tiles (Keyfacts)
   ===================================================================== */
#keyfacts-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:var(--keyfact-gap);
}
@media (max-width:1024px){#keyfacts-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ #keyfacts-grid{grid-template-columns:repeat(2,1fr);} }

.keyfact,
.keyfact>.e-con-inner{
  padding:var(--keyfact-pad) !important;
  background:var(--keyfact-bg) !important;
  border-radius:var(--keyfact-radius) !important;
  box-shadow:var(--keyfact-shadow);
}
.keyfact{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  transition:var(--card-transition);
}
.keyfact:hover{
  transform:translateY(var(--card-hover-translate));
  box-shadow:var(--card-hover-shadow);
}

.keyfact .elementor-icon-box-icon svg,
.keyfact .elementor-icon-box-icon i{
  font-size:clamp(32px,5vw,36px);
  margin-bottom:8px;
  line-height:1;
  color:var(--keyfact-head);
}
.keyfact .elementor-icon-box-title{
  font-size:1rem; line-height:1.3; margin:0 0 4px;
  font-weight:700; color:var(--keyfact-head);
}
.keyfact .elementor-icon-box-description{
  font-size:.875rem; line-height:1.4; margin:0;
  color:var(--keyfact-text);
}

/* =====================================================================
   3. CTA Scroll‑Cards
   ===================================================================== */
.scroll-cards-main{position:relative;overflow:hidden;padding-inline:0 !important;}
.card{will-change:transform;}
@media (prefers-reduced-motion:reduce){.card{transition:none !important;}}
.scroll-cards-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:clamp(280px,40vw,560px);text-align:center;z-index:4;}
.scroll-cards-overlay .elementor-widget-lottie{display:flex !important;justify-content:center !important;}
.scroll-cards-overlay .elementor-widget-lottie svg{margin:0 auto !important;}
@media (max-width:768px){.scroll-cards-main{padding-bottom:30vh;}}

/* =====================================================================
   4. UTILITIES & LAYOUT HELPERS
   ===================================================================== */

/* ---------- 4.1 Responsive Image – .desktopPhoto ---------- */
.desktopPhoto{aspect-ratio:3/4;width:100%;background-size:cover;background-position:center;}
.desktopPhoto img{width:100%;height:100%;object-fit:cover;}
@media (max-width:665px){.desktopPhoto{display:none!important;}}

/* ---------- 4.2 Two-Column Content Layout ---------- */
.layout-two-col{display:flex;gap:clamp(16px,4vw,48px);}  
@media (min-width:1025px){
  .layout-two-col .main-content{flex:1 1 0;min-width:0;}
  .layout-two-col .sidebar{flex:0 0 clamp(280px,30%,400px);} 
  .layout-two-col .sidebar--sticky{position:sticky;top:var(--header-offset) !important;}
}
@media (max-width:1024px){
  .layout-two-col{flex-direction:column;}
  .layout-two-col .sidebar{order:2;flex:1 1 100%;margin-top:24px;}
  .layout-two-col .sidebar--sticky{position:static;}
}

/* ---------- 4.3 Auto‑Hide Header ---------- */
.auto-hide-header{transition:transform .35s ease-out;will-change:transform;}
.auto-hide-header.is-hidden{transform:translateY(-100%);} 
@media (prefers-reduced-motion:reduce){.auto-hide-header{transition:none !important;}}
@media (min-width:1025px){.auto-hide-header{transform:none !important;}}

/* =====================================================================
   5. Card‑List
   ===================================================================== */
.card-list{row-gap:clamp(16px,2.5vw,28px);}    /* Abstand zwischen den Zeilen */
.card-item{transition:var(--card-transition);will-change:transform,box-shadow;}
.card-item:hover{
  transform:translateY(var(--card-hover-translate));
  box-shadow:0 4px 12px rgba(255,255,255,.15), var(--card-hover-shadow);
}
.card-item p{margin:0 !important;}

.card-item-framed {
  box-shadow: var(--keyfact-shadow);
  border-radius: var(--keyfact-radius);
  transition: transform var(--card-transition), box-shadow var(--card-transition);
}

.card-item-framed:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(var(--card-hover-translate));
}

/* checklist‑compact mobil full‑width */
@media (max-width:767px){
  .checklist-compact{
    margin-left:-22.5px;
    margin-right:-22.5px;
    width:calc(100% + 45px);
  }
}

/* =====================================================================
   6. Surfspot‑Grid & Spot‑Cards
   ===================================================================== */
/* 6.1 Grid-Layout ----------------------------------------------------- */

/* ≥ 1025 px → 2 Spalten, großes Gap */
@media (min-width: 1025px){
  .spots-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 4vw, 32px);
  }
}

/* 769 – 1024 px → 2 Spalten, kleineres Gap */
@media (min-width: 769px) and (max-width: 1024px){
  .spots-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 4vw, 24px);
  }
}

/* ≤ 768 px → 1 Spalte */
@media (max-width: 768px){
  .spots-grid{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 16px);
  }
}

/* 6.2 Card-Shell */
.spot-card{
  background: var(--keyfact-bg);
  border-radius: var(--keyfact-radius);
  padding: var(--keyfact-pad);
  box-shadow: var(--keyfact-shadow);
  display: flex;
  flex-direction: column;
  transition: var(--card-transition);
  will-change: transform, box-shadow;
}

/* Hover/Focus */
@media (hover: hover){
  .spot-card:hover{
    transform: translateY(var(--card-hover-translate));
    box-shadow: var(--card-hover-shadow);
  }
}
.spot-card:focus-within{
  transform: translateY(var(--card-hover-translate));
  box-shadow: var(--card-hover-shadow);
}

/* Basis‑Content */
.spot-card h4{font-size:1.125rem;margin:0 0 8px;color:var(--keyfact-head);} 
.spot-card .spot-meta{font-size:.875rem;margin:0 0 12px;color:var(--keyfact-text);} 

/* Make card head (title + intro) look clickable */
.spot-card h4,
.spot-card .spot-meta{
  cursor: pointer;
}

/* 6.3 Accordion ------------------------------------------------------- */

.spot-detail{
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.spot-card.is-open .spot-detail{
  max-height: 1000px;
}

/* 6.4 Toggle-Button --------------------------------------------------- */

.spot-card .toggle-detail,
.spot-card .toggle-detail.elementor-button {
  /* Layout zurück auf Link-Optik */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: auto !important;
  padding: 0 !important;

  /* sämtliche Button-Stile neutralisieren */
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;

  /* Typo */
  font: 600 .9rem/1 'Open Sans', sans-serif;
  color: var(--keyfact-head) !important;  /* #003976 */
  cursor: pointer;
  text-decoration: none;
}

/* Hover / Accessibility */
@media (hover:hover){
  .spot-card .toggle-detail:hover{
    color: #5DAFFF !important;
  }
}
.spot-card .toggle-detail:focus-visible{
  outline: 2px solid #FFCD5D;
  outline-offset: 2px;
}

/* Pfeil-Icon */
.spot-card .toggle-icon{
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform .25s ease;
}
.spot-card.is-open .toggle-icon{
  transform: rotate(180deg);
}

/* =====================================================================
   7. COMPONENT - Data Tables (EAEL)
   ===================================================================== */

/* Grundtable */
.eael-data-table-wrap .eael-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
}

/* Headerzellen */
.eael-data-table-wrap .eael-data-table thead th {
  background: var(--table-head-bg)    !important;
  color:      var(--table-head-color) !important;
  padding:    var(--table-cell-pad)   !important;
  font-weight: 700                    !important;
  text-align: left                    !important;
  vertical-align: middle              !important;
}

/* Bodyzellen */
.eael-data-table-wrap .eael-data-table tbody td {
  padding:       var(--table-cell-pad)   !important;
  color:         var(--keyfact-text)     !important;
  border-bottom: 1px solid var(--table-border-color) !important;
  vertical-align: top                    !important;
}

/* Zeilen-Striping (odd/even + EAEL Klassen) */
.eael-data-table-wrap .eael-data-table tbody tr:nth-child(odd)  td,
.eael-data-table-wrap .eael-data-table tbody tr.odd            td {
  background: var(--table-row-bg) !important;
}
.eael-data-table-wrap .eael-data-table tbody tr:nth-child(even) td,
.eael-data-table-wrap .eael-data-table tbody tr.even           td {
  background: var(--table-row-alt-bg) !important;
}

/* Abgerundete Ecken oben */
.eael-data-table-wrap .eael-data-table thead th:first-child { border-top-left-radius: 16px !important; }
.eael-data-table-wrap .eael-data-table thead th:last-child  { border-top-right-radius:16px !important; }

/* Rahmen & Schatten des gesamten Widgets */
.eael-data-table-wrap {
  border-radius: var(--keyfact-radius);
  box-shadow:    var(--keyfact-shadow);
  overflow: hidden;
}

/* Optional: horizontales Scrollen bei sehr schmalen Screens */
@media (max-width: 600px){
  .eael-data-table-wrap .eael-data-table { display: block; overflow-x: auto; }
}

/* -------------------- Mobile-Umbau (EAEL) -------------------- */
@media (max-width: 767px){

  /* Label (Spaltenüberschrift) typografisch angleichen */
  .eael-data-table-wrap.custom-responsive-option-enable 
  .eael-data-table .th-mobile-screen .data-table-header-text{
    font-weight: 700;
    color: var(--keyfact-head);
    display: block;
    margin-bottom: 2px;
  }

  /* Zelle als Flex: Label + Inhalt vertikal zentriert nebeneinander */
  .eael-data-table-wrap.custom-responsive-option-enable 
  .eael-data-table tbody td > .td-content-wrapper{
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Label-Box (links) ausrichten */
  .eael-data-table-wrap.custom-responsive-option-enable 
  .eael-data-table tbody td .th-mobile-screen{
    display: flex;
    align-items: center;
    justify-content: flex-start; /* linksbündig */
    margin-right: 10px;
    padding: 0;
    line-height: 1.2;
    min-width: 96px; /* sorgt für sauberes Raster */
  }

  /* Label-Text ohne Extramargins, linksbündig */
  .eael-data-table-wrap.custom-responsive-option-enable 
  .eael-data-table .th-mobile-screen .data-table-header-text{
    margin: 0;
    text-align: left;
  }
}


/* =====================================================================
   8. SUMMARY BOX (Fazit)
   ===================================================================== */

/* Layout: Bild links, Karten rechts */
.summary-box{
  display:flex;
  align-items:stretch;
  gap:clamp(16px,4vw,48px);
}
@media (max-width:1024px){
  .summary-box{flex-direction:column;}
  .summary-box__image, .summary-box__cards{
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* Mobile: Bild & Karten 100% Breite (überstimmt evtl. Elementor-Inline-Widths) */
@media (max-width: 767px){
  .summary-box__image,
  .summary-box__cards{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Bildbereich (Container mit Hintergrundbild) */
.summary-box__image{
  flex: 0 0 40%;
  max-width: 40%;
  border-radius:var(--keyfact-radius);
  overflow:hidden;
}
.summary-box__image.e-con{
  min-height:clamp(220px,32vw,360px);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Cards-Wrapper */
.summary-box__cards{
  flex: 1 1 60%;
  min-width: 0;
  display:grid;
  grid-template-columns:1fr; /* vertikal gestapelt */
  gap:var(--keyfact-gap);
  align-content:start;
}

/* Einzelne Card (native Container) */
.summary-box__card{
  background:var(--keyfact-bg);
  border-radius:var(--keyfact-radius);
  padding:16px;
  box-shadow:var(--keyfact-shadow);
  transition:var(--card-transition);
  will-change:transform,box-shadow;
}
@media (hover:hover){
  .summary-box__card:hover{
    transform:translateY(var(--card-hover-translate));
    box-shadow:var(--card-hover-shadow);
  }
}

/* Spacing-Reset & Typo innerhalb der Card */
.summary-box__card > .e-con-inner{
  --widgets-spacing:0px;
  gap:0 !important;
}
.summary-box__card .elementor-widget{ margin:0 !important; }
.summary-box__card .elementor-heading-title{
  margin:0 !important;
  color:var(--keyfact-head);
}
.summary-box__card .elementor-widget-text-editor{ margin:0 !important; }
.summary-box__card p{
  margin:0 !important;
  color:var(--keyfact-text);
}