.elementor-kit-236{--e-global-color-primary:#FF484B;--e-global-color-secondary:#C7E75F;--e-global-color-text:#070707;--e-global-color-accent:#F5FFD5;--e-global-color-168015b:#575468;--e-global-color-c981bc6:#77738D;--e-global-color-e62d2f9:#F3F3F3;--e-global-color-fa33034:#E5282B;--e-global-color-fbe2509:#FFFFFF;--e-global-typography-primary-font-family:"SpaceGrotesk";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-236 e-page-transition{background-color:#FFBC7D;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   GLOBAL DESIGN SYSTEM – ELEMENTOR
   Typography + Colors + Spacing + Buttons
========================================================= */

html {
  font-size: 16px;
}

:root {
  /* =====================================================
     COLORS
  ===================================================== */
  --penalty-rot: #FF484B;
  --penalty-rot-dark: #E5282B;
  --gras-gruen: #C7E75F;
  --soft-lime: #F5FFD5;
  --stadion-grau: #575468;
  --stadion-grau-light: #77738D;
  --tribuenen-grau: #F3F3F3;
  --schoner-schwarz: #070707;
  --ball-weiss: #FFFFFF;

  /* =====================================================
     FONTS
  ===================================================== */
  --font-heading-main: "Space Grotesk", sans-serif;
  --font-heading-sub: "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;

  /* =====================================================
     TYPOGRAPHY SIZES
  ===================================================== */
  --fs-h1: clamp(2.63rem, 2.30488rem + 1.36585vw, 3.50rem);
  --fs-h2: clamp(2.25rem, 2.02134rem + 0.97561vw, 2.88rem);
  --fs-h3: clamp(1.50rem, 1.40854rem + 0.39024vw, 1.75rem);
  --fs-h4: clamp(1.13rem, 1.07927rem + 0.19512vw, 1.25rem);
  --fs-intro: clamp(1.00rem, 0.95427rem + 0.19512vw, 1.13rem);
  --fs-p: clamp(0.88rem, 0.82927rem + 0.19512vw, 1.00rem);
  --fs-small: clamp(0.88rem, 0.87500rem + 0vw, 0.88rem);
  --fs-button: clamp(0.88rem, 0.82927rem + 0.19512vw, 1.00rem);

  /* =====================================================
     LINE HEIGHTS
  ===================================================== */
  --lh-heading: 1.3;
  --lh-body: 1.5;
  --lh-button: 1.2;

   /* =====================================================
     BUTTONS
  ===================================================== */
  --button-radius: 10px;
  --button-margin: 0px;
  --button-padding: 14px 24px;
  --button-font-weight: 600;
  --button-transition: all 0.3s ease;
}

/* =========================================================
   TYPOGRAPHY CLASSES
   Diese Klassen in Elementor unter "CSS-Klassen" eintragen
========================================================= */

/* H1 */
.typo-h1 .elementor-heading-title {
  font-family: var(--font-heading-main);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
}

/* H2 */
.typo-h2 .elementor-heading-title {
  font-family: var(--font-heading-main);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

/* H3 */
.typo-h3 .elementor-heading-title {
  font-family: var(--font-heading-sub);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-heading);
}

/* H4 */
.typo-h4 .elementor-heading-title {
  font-family: var(--font-heading-sub);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-heading);
}

/* Intro Light */
.typo-intro-light,
.typo-intro-light p,
.typo-intro-light li,
.typo-intro-light a,
.typo-intro-light span {
  font-family: var(--font-body);
  font-size: var(--fs-intro);
  font-weight: 300;
  line-height: var(--lh-body);
}

/* Intro Medium */
.typo-intro-medium,
.typo-intro-medium p,
.typo-intro-medium li,
.typo-intro-medium a,
.typo-intro-medium span {
  font-family: var(--font-body);
  font-size: var(--fs-intro);
  font-weight: 500;
  line-height: var(--lh-body);
}

/* Paragraph Light */
.typo-p,
.typo-p p,
.typo-p li,
.typo-p a,
.typo-p span,
.typo-p .elementor-icon-list-text {
  font-family: var(--font-body);
  font-size: var(--fs-p);
  font-weight: 300;
  line-height: var(--lh-body);
}

/* Paragraph Medium */
.typo-p-med,
.typo-p-med p,
.typo-p-med li,
.typo-p-med a,
.typo-p-med span,
.typo-p-med .elementor-icon-list-text {
  font-family: var(--font-body);
  font-size: var(--fs-p);
  font-weight: 500;
  line-height: var(--lh-body);
}

/* Small Paragraph Medium */
.typo-small,
.typo-small p,
.typo-small li,
.typo-small a,
.typo-small span,
.typo-small .elementor-icon-list-text {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-body);
}

/* =========================================================
   COLOR UTILITY CLASSES
========================================================= */

.color-penalty-rot {
  color: var(--penalty-rot);
}

.color-gras-gruen {
  color: var(--gras-gruen);
}

.color-stadion-grau {
  color: var(--stadion-grau);
}

.color-schoner-schwarz {
  color: var(--schoner-schwarz);
}

.color-ball-weiss {
  color: var(--ball-weiss);
}

.bg-penalty-rot {
  background-color: var(--penalty-rot);
}

.bg-gras-gruen {
  background-color: var(--gras-gruen);
}

.bg-soft-lime {
  background-color: var(--soft-lime);
}

.bg-stadion-grau {
  background-color: var(--stadion-grau);
}

.bg-tribuenen-grau {
  background-color: var(--tribuenen-grau);
}

.bg-schoner-schwarz {
  background-color: var(--schoner-schwarz);
}

.bg-ball-weiss {
  background-color: var(--ball-weiss);
}

/* =========================================================
   BUTTONS
   Klassen im Button-Widget unter "CSS-Klassen" eintragen
========================================================= */

/* Basis für Elementor Buttons */
.btn-primary .elementor-button,
.btn-secondary .elementor-button,
.btn-tertiary .elementor-button {
  border-radius: var(--button-radius);
  border: none;
  outline: none;
  margin: var(--button-margin);
  padding: var(--button-padding);
  font-family: var(--font-heading-sub);
  font-size: var(--fs-button);
  font-weight: var(--button-font-weight);
  line-height: var(--lh-button);
  text-decoration: none;
  box-shadow: none;
  transition: var(--button-transition);
}

/* Primary Button */
.btn-primary .elementor-button {
  background-color: var(--penalty-rot);
  color: var(--ball-weiss);
}

.btn-primary .elementor-button:hover,
.btn-primary .elementor-button:focus {
  background-color: var(--penalty-rot-dark);
  color: var(--ball-weiss);
  border: none;
  outline: none;
  box-shadow: none;
}

/* Secondary Button */
.btn-secondary .elementor-button {
  background-color: var(--stadion-grau);
  color: var(--ball-weiss);
}

.btn-secondary .elementor-button:hover,
.btn-secondary .elementor-button:focus {
  background-color: var(--stadion-grau-light);
  color: var(--ball-weiss);
  border: none;
  outline: none;
  box-shadow: none;
}

/* Tertiary Button */
.btn-tertiary .elementor-button {
  background-color: var(--ball-weiss);
  color: var(--stadion-grau);
}

.btn-tertiary .elementor-button:hover,
.btn-tertiary .elementor-button:focus {
  background-color: var(--tribuenen-grau);
  color: var(--stadion-grau);
  border: none;
  outline: none;
  box-shadow: none;
}

/* Optional: Icon im Button sauber mitführen */
.btn-primary .elementor-button-icon,
.btn-secondary .elementor-button-icon,
.btn-tertiary .elementor-button-icon {
  color: inherit;
}

/* =========================================================
   GHOST BUTTON
   Outline Button / Secondary CTA
========================================================= */

.btn-ghost .elementor-button {
  background: transparent;
  color: var(--stadion-grau);
  border: 2px solid var(--stadion-grau);
  border-radius: var(--button-radius);
  margin: var(--button-margin);
  padding: var(--button-padding);
  font-family: var(--font-heading-sub);
  font-size: var(--fs-button);
  font-weight: var(--button-font-weight);
  line-height: var(--lh-button);
  text-decoration: none;
  box-shadow: none;
  transition: var(--button-transition);
}

/* Hover */

.btn-ghost .elementor-button:hover,
.btn-ghost .elementor-button:focus {
  background: var(--stadion-grau);
  color: var(--ball-weiss);
  border-color: var(--stadion-grau);
}

/* Icon übernimmt automatisch Farbe */

.btn-ghost .elementor-button-icon {
  color: inherit;
}

/* Optional: kleiner Abstand zum Text */

.btn-ghost .elementor-button-icon {
  margin-left: 8px;
}

/* =========================================================
   SECTION / CONTAINER PADDING – FLUID VARIANTS
========================================================= 
*//* variables (edit here)*/

:root {
    /* Global Padding Variables - Editable */
    /* Left and Right Padding All /Sections/Containers*/
    --fluid-side-padding-min: 1.25rem; /* 20px */
    --fluid-side-padding-max: 5rem;   /* 80px */

    /* Top and Bottom Padding All Containers*/
    --section-xxl-padding-min: 9.375rem; /* 150px */
    --section-xxl-padding-max: 10rem; /* 160px */ 
  
    --section-xl-padding-min: 6.875rem; /* 110px */
    --section-xl-padding-max: 7.5rem; /* 120px */
  
    --section-l-padding-min: 5.625rem; /* 90px */
    --section-l-padding-max: 6.25rem; /* 100px */
  
    --section-m-padding-min: 5rem; /* 80px */
    --section-m-padding-max: 5rem; /* 80px */
  
    --section-s-padding-min: 3.75rem; /* 60px */
    --section-s-padding-max: 3.75rem; /* 60px */
  
    --section-xs-padding-min: 2.5rem; /* 40px */
    --section-xs-padding-max: 2.5rem; /* 40px */
  
    --section-xxs-padding-min: 1.5rem; /* 24px */
    --section-xxs-padding-max: 1.5rem; /* 24px */
    
    --section-header-padding-min: 1.25rem; /* 20px */
    --section-header-padding-max: 1.25rem; /* 20px */

  
    /* Hero Sections Height Variable */
    --section-hero-height: 60vh; /* 60% the screen height */
  
    /* Offset Padding for Overlay Headers */
    --section-offset-header: 80px; /* Adjust to the overlay header's negative margin */

    /* Width For Narrow Sections*/
    --section-narrow: 62.5rem; /* 1000px */
    --section-narrow-xs: 45rem; /* 720px */
  }


/* CSS Template (do not edit below) */
  
  
  /* Section/Container Padding - Fluid Variants */
  .section-xxl {
    padding-top: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
    padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-xl {
    padding-top: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
    padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-l {
    padding-top: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
    padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-m {
    padding-top: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
    padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-s {
    padding-top: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
    padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-xs {
    padding-top: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
    padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-xxs {
    padding-top: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
    padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-header {
    padding-top: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
    padding-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  /* Hero Container/Sections Height */
  .section-hero {
    min-height: var(--section-hero-height)!important;
  }

  .section-hero .e-con-inner {
    justify-content: center!important;
}
  
  /* Full Width Sections - No Side Padding */

  .section-full div {
    max-width: 100%!important;
  }
  

  /* Narrow Sections */
  .section-narrow .e-con-inner {
    max-width: var(--section-narrow)!important;
  }

  .section-narrow-xs .e-con-inner {
    max-width: var(--section-narrow-xs)!important;
  }


  /* Offset Padding for Overlay Headers */
  .section-offset {
    padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
  }

/* =========================================
   GLOBAL MARKER SYSTEM
   Standardfarbe: #C7E75F
========================================= */

.marker{
    display: inline;
    padding: 0 0.08em;
    border-radius: 2px;

    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;

    background-image: linear-gradient(#C7E75F,#C7E75F);
    background-repeat: no-repeat;
    background-position: 0 85%;
    background-size: 100% 0.35em;
}


/* =========================================
   THICK MARKER
========================================= */

.marker-thick{
    background-size: 100% 0.55em;
}


/* =========================================
   THIN MARKER
========================================= */

.marker-thin{
    background-size: 100% 0.25em;
}


/* =========================================
   ANIMATED MARKER (Standardfarbe)
========================================= */

.marker-animate{
    background-image: linear-gradient(#C7E75F,#C7E75F);
    background-repeat: no-repeat;
    background-position: 0 85%;
    background-size: 0% 0.35em;

    animation: markerReveal 0.7s ease forwards;
}


/* =========================================
   ANIMATED MARKER LIGHT (#F5FFD5)
========================================= */

.marker-animate-light{
    background-image: linear-gradient(#F5FFD5,#F5FFD5);
    background-repeat: no-repeat;
    background-position: 0 85%;
    background-size: 0% 0.35em;

    animation: markerReveal 0.7s ease forwards;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes markerReveal{
    to{
        background-size: 100% 0.35em;
    }
}

/* =================================
   WORD WRAPPING / HYPHENATION
================================= */

/* Headlines: sauber, nicht aggressiv umbrechen */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

/* Fließtext: robuster umbrechen */
p, li, a, span,
.elementor-text-editor {
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'SpaceGrotesk';
	font-display: auto;
	src: url('https://hockey-versicherungen.de/wp-content/uploads/2026/03/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://hockey-versicherungen.de/wp-content/uploads/2026/03/Poppins-Light.woff2') format('woff2'),
		url('https://hockey-versicherungen.de/wp-content/uploads/2026/03/Poppins-Light.woff') format('woff');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://hockey-versicherungen.de/wp-content/uploads/2026/03/Poppins-Medium.woff2') format('woff2'),
		url('https://hockey-versicherungen.de/wp-content/uploads/2026/03/Poppins-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://hockey-versicherungen.de/wp-content/uploads/2026/03/Poppins-SemiBold.woff2') format('woff2'),
		url('https://hockey-versicherungen.de/wp-content/uploads/2026/03/Poppins-SemiBold.woff') format('woff');
}
/* End Custom Fonts CSS */