/*
	Theme Name: KNOLLE-DESIGN-Theme
	Theme URI: https://knolle.biz/
	Description: Willkommen zum Knolle-Theme – die perfekte Grundlage für dein Webprojekt! Entwickelt und bereitgestellt von Jens Knolle, bietet dieses Theme eine Auswahl an durchdachten Features, die deine Arbeit mit Wordpress noch effizienter und kreativer machen.
	Author: Jens Knolle
	Author URI: https://knolle.biz/
	Template: Divi
	Version: 1.0.3
	Tag: Child Theme, Knolle Biz 
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ==========================================================================
   BASIC / RESET
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
}

@property --fluid {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}


#page-container { overflow: hidden; }


a[href^="#"] { cursor: pointer !important; }

.mce-panel .mce-stack-layout-item.mce-first {
  position: sticky !important;
  top: 0;
}



/* ==========================================================================
   ROOT: Design-System + Fluid in CSS (ohne JS)
   ========================================================================== */
:root {
  /* GLOBAL COLORS */
  --black: #0a0a0a;
  --white: #f5f4f0;
  --accent: #dcf047;
  --mid: #1e1e1e;
  --grey: #8a8a8a;
  --line: rgba(220,240,71,0.25);
  --kdac: #c9dd2e;

  /* TRANSITIONS */
  --tra-3s: all .3s ease-in-out;
  --tra-5s: all .5s ease-in-out;
  --tra-7s: all .7s ease-in-out;

  /* FLUID (CSS-only) : min 360px / max 1920px */
  --fluid: clamp(0, calc((100vw - 36rem) / 156rem), 1);

  /* FONT SIZES */
  /* --fs-body: 1.8rem; /* bewusst stabil */

  --fs-small: calc(1.2rem + 0.2rem * var(--fluid));
  --fs-foot:  calc(1rem + 0.2rem * var(--fluid));
  --fs-btn:   calc(1.4rem + 0.1rem * var(--fluid));
  --fs-lead:  calc(1.7rem + 0.3rem * var(--fluid));

  --fs-h5:    calc(1.8rem + 0.4rem * var(--fluid));
  --fs-h4:    calc(2.2rem + 0.6rem * var(--fluid));
  --fs-h3:    calc(2.6rem + 1.0rem * var(--fluid));
  --fs-h2:    calc(3.2rem + 1.6rem * var(--fluid));
  --fs-h1:    calc(3.4rem + 2.6rem * var(--fluid));

  /* FONT WEIGHTS */
  --fw-200: 200;
  --fw-400: 400;
  --fw-600: 600;
  --fw-800: 800;

  /* LINE HEIGHTS */
  --lh-body:  1.50;
  --lh-lead:  1.45;
  --lh-small: 1.30;

  --lh-h1:    1.10;
  --lh-h2:    1.20;
  --lh-h3:    1.25;
  --lh-h4:    1.30;
  --lh-h5:    1.35;

  /* SPACING FLUID */
  --space-xs:  calc(0.8rem + 0.4rem * var(--fluid));
  --space-s:   calc(1.2rem + 0.8rem * var(--fluid));
  --space-m:   calc(2.0rem + 1.2rem * var(--fluid));
  --space-l:   calc(3.2rem + 1.6rem * var(--fluid));
  --space-xl:  calc(4.8rem + 2.4rem * var(--fluid));
  --space-xxl: calc(7.2rem + 3.6rem * var(--fluid));

  --btn-p-t-b: calc(1.4rem + 0.3rem * var(--fluid));
  --btn-p-l-r: calc(2.8rem + 0.3rem * var(--fluid));
}

/* PADDING CLASSES */
.p-xs  { padding: var(--space-xs); }
.p-s   { padding: var(--space-s); }
.p-m   { padding: var(--space-m); }
.p-l   { padding: var(--space-l); }
.p-xl  { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }

/* ==========================================================================
   TYPO 
   ========================================================================== */
.et_pb_module.et_pb_text h1,
.et_pb_module.et_pb_heading h1 {
  font-family: var(--ff-title);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-800);
  letter-spacing: -1px;
}

.et_pb_module.et_pb_text h2,
.et_pb_module.et_pb_heading h2 {
  font-family: var(--ff-title);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -1px;
}

.et_pb_module.et_pb_text h3,
.et_pb_module.et_pb_heading h3 {
  font-family: var(--ff-title);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-200);
}

.et_pb_module.et_pb_text h4,
.et_pb_module.et_pb_heading h4,
h3.et_pb_toggle_title {
  font-family: var(--ff-title);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

.et_pb_module.et_pb_text h5,
.et_pb_module.et_pb_heading h5 {
  font-family: var(--ff-title);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
}

.et_pb_module.et_pb_text p,
.et_pb_blurb .et_pb_blurb_description p,
.et_pb_module .et_pb_toggle_content p {
  font-family: var(--ff-body);	
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-400);
}

/* Optional Lead Text (bh -> kd) */
.kd-lead,
.et_pb_text.lead p {
  font-family: var(--ff-body);	
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.et_pb_text.small p {
  font-family: var(--ff-body);	
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-600);
  display: inline-table;
  font-style: italic;
}

.et_pb_module.et_pb_text ol li,
.et_pb_module.et_pb_text ul li {
  font-family: var(--ff-body);	
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  padding-bottom: var(--space-s);
}

/* ==========================================================================
   CONTENT: Hyphenation + Link-Hover
   ========================================================================== */
body {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;	
}


/* ==========================================================================
   Custom Cursor (Divi-safe, Desktop only)
   ========================================================================== */
@media (hover:hover) and (pointer:fine){

  /* Hide native cursor */
  body{ cursor:none !important; }

  /* Prevent blend/stacking weirdness */
  body{ isolation:isolate; }

  /* Cursor layers */
  .cursor,
  .cursor-ring{
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2147483647 !important;
    transform: translate(-50%,-50%);
    will-change: transform, width, height, opacity;
  }

  .cursor{
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    transition: transform .1s, width .3s, height .3s, background .3s;
    mix-blend-mode: difference; /* Claude look */
  }

  .cursor-ring{
    width: 40px;
    height: 40px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    opacity: .5;
    transition: transform .15s ease-out, width .4s, height .4s, opacity .3s;
    mix-blend-mode: normal; /* wichtig: Ring nicht blenden */
  }

  /* Safety: cards shouldn't overlay cursor (only relevant if they have z-index) */
  .spm-card{ position: relative; z-index: 1; }

  /* Divi Visual Builder: don't hide the real cursor + disable custom cursor */
  body.et-fb,
  body.et-fb *{ cursor:auto !important; }
  body.et-fb .cursor,
  body.et-fb .cursor-ring{ display:none !important; }
}



.nohyphens {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

.nohyphens.et_pb_module {
  word-wrap: normal !important;
  overflow: visible !important;
}

p a:hover { text-decoration: underline !important; }

.whitelinks a { color: #ffffff; }
.blacklinks a { color: #000; }
.darklinks a { color: var(--black); }

/* Dateinamen unter Gallerybild entfernen */
.mfp-title { display: none !important; }

/* 3 Bilder nebeneinander on mobile */
@media only screen and (max-width: 980px) {
  .three-columns .et_pb_column { width: 33.33% !important; }
}

/* Fix Gallery-Thumb-Größe */
@media only screen and (max-width: 980px) {
  .et_pb_gallery_grid .et_pb_gallery_item img { width: 100%; }
}

/* ==========================================================================
   MENU: Mobile-Menü-Logik 
   ========================================================================== */
/* change hamburger icon to x when mobile menu is open */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
  content: '\4d';
}



/* Secondary Menu nach rechts */
@media only screen and (min-width: 768px) {
    #et-info { float:right !important; }
}




/* ==========================================================================
   GALLERY 
   ========================================================================== */
.et_pb_gallery .et_pb_gallery_item { border: 3px solid #f9f5f2; }
.et_pb_gallery .et_overlay { background: #121416; }

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  box-sizing: border-box;
  transition: var(--tra-5s);
}

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  content: '';
  background-color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 99;
}

.et_pb_gallery_image:before {
  width: 60px;
  height: 1px;
  left: 100%;
}

.et_pb_gallery_image:after {
  height: 60px;
  width: 1px;
  top: 0%;
}

.et_pb_gallery_item:hover .et_overlay {
  opacity: 0.7;
}

.et_pb_gallery_image:hover:before,
.et_pb_gallery_image:hover:after {
  opacity: 1;
  top: 50%;
  left: 50%;
}

.et_pb_inline_icon:before,
.et_overlay.et_pb_inline_icon:before {
  content: '';
}





/* ==========================================================================
   Button Styles 
   ========================================================================== */

.et_pb_button{
  clip-path: polygon(
    12px 0,
    100% 0,
    calc(100% - 12px) 100%,
    0 100%
  );
  transition: clip-path .3s ease, background-color .3s ease, color .3s ease;
  will-change: clip-path;
}

/* Hover: Schräge verstärken (12px -> 24px) */
.et_pb_button:hover{
  clip-path: polygon(
    24px 0,
    100% 0,
    calc(100% - 24px) 100%,
    0 100%
  );
}



/* ==========================================================================
   SPM Content Styles 
   ========================================================================== */

/* HERO diagonale Linien */
#hero {
  position: relative;
  overflow: hidden;
}

/* Auf Mobile: diagonale Linien ausblenden, overflow freigeben */
@media (max-width: 980px) {
  #hero { overflow: visible !important; }
  #hero:before,
  #hero:after { display: none; }
}

.sportpark-hero em {
	color: var(--accent);
    font-style: normal;
/*    display: block; */
}



/* HERO diagonale Linien */
#hero {
  position: relative;
  overflow: hidden;
}

/* Auf Mobile: diagonale Linien ausblenden, overflow freigeben */
@media (max-width: 980px) {
  #hero { overflow: visible !important; }
  #hero:before,
  #hero:after { display: none; }
}

#hero:before{
  content:"";
  position:absolute;
  top:-20%;
  right:-10%;
  width:70vw;
  height:120vh;
  border:1px solid rgba(220,240,71,0.25);
  transform:rotate(-18deg);
  transform-origin:top right;
  pointer-events:none;
}

#hero:after{
  content:"";
  position:absolute;
  top:-10%;
  right:5%;
  width:50vw;
  height:110vh;
  border:1px solid rgba(220,240,71,0.10);
  transform:rotate(-18deg);
  transform-origin:top right;
  pointer-events:none;
}

/* Sportarten Number Style */
.sport-number p{
  font-size:5rem;
  line-height:1;
  margin:0 0 16px;
  color: rgba(220,240,71,0.10);
}

/* === SPM CARD – Claude Style komplett sauber === */

.spm-card{
  position: relative;
  background: var(--mid); /* #1e1e1e */
  padding: 56px 40px;
  overflow: hidden;

  /* Schräge ausgeschnittene Ecke unten rechts */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 24px),
    calc(100% - 24px) 100%,
    0 100%
  );
}

/* Platz-Eigenschaften */
@media (min-width:1439px and max-width: 1500px) {
  .spm_court_property {
    flex-direction: column !important;
  }
}



/* === Diagonales Highlight === */
.spm-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    135deg,
    rgba(220,240,71,0.06) 0%,
    transparent 60%
  );
  opacity:0;
  transition: opacity .4s ease;
  pointer-events:none;
}

.spm-card:hover::before{
  opacity:1;
}

/* === Animierte Border-Bottom === */
.spm-card::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background: var(--accent); /* #dcf047 */

  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
  pointer-events:none;
}

.spm-card:hover::after{
  transform: scaleX(1);
}


/* === Schräge Ecken === */
.spm-clip {
	clip-path: polygon(
	  8% 0,
	  100% 0,
	  100% 92%,
	  92% 100%,
	  0 100%,
	  0 8%
	);
}



















/* ==========================================================================
   FOOTER 
   ========================================================================== */
.kd_footer_bottom .et_pb_column {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
}

.kd_footer_bottom .et_pb_image {
  width: 20px;
  max-width: 20px;
  margin-top: 3px;
}

.kd_footer_bottom .et_pb_menu__menu { padding: 0; }
.kd_footer_bottom .et_pb_module { width: 100%; }

.kd_footer_menu .et_pb_menu__menu {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
}

/* FOOTER KEIN HAMBURGER MENU */
.et-l.et-l--footer .et_pb_menu__menu { display: block !important; }
.et-l.et-l--footer .et_mobile_nav_menu { display: none !important; }

/* Footer-Menü linksbündig auf tablet und Mobile */
@media only screen and (max-width: 980px) {
  .et_pb_menu--style-left_aligned .et_pb_menu__wrap {
    justify-content: flex-start !important;
  }
}

/* ==========================================================================
   KUDO SECTION (aus alt behalten)
   ========================================================================== */
.kd-heart::after {
  content: "\e089";
  font-family: 'ETmodules';
  color: var(--kdac);
}

/* END */