/*
Theme Name: Goldeck Child
Theme URI: https://kaerntens-sportberg.at/goldeck-child
Description: Child Theme Kärntens Sportberg Goldeck
Author: S. Schaeffler
Author URI: https://simon-schaeffler.com
Template: hello-elementor
Version: 1.0.2
Text Domain: goldeck-child
*/
html, body,
button, input, select, textarea,
.ksghr-btn, .ksghr-chip, .ksghr-cta,
.ksghr-sub, .ksghr-content, .ksghr-dots,
.ksghr-nav, .cc-chip, .cc-dot, .cc-chip-label,
.hero__box-image__content, .stretch-link__link {font-family:'Raleway', sans-serif;}
h1, h2, h3, h4, h5, h6, .ksghr-title, .ksghr-sub {font-family:'Michroma',sans-serif;}

/* ================================
Custom scrollbar
================================= */
body::-webkit-scrollbar {
    width: 9px
}
body::-webkit-scrollbar-track {
    background-color: #e9ebf3
}
body::-webkit-scrollbar-thumb {
    background-color: #d7fc69
}
html {
    scrollbar-color: #d7fc69 #0f0b12;
    scrollbar-width: thin
}
html.qodef-scrollbar--appeared {
    overflow-y: scroll!important
}
.scrollbar-track .scrollbar-thumb {
    background: #d7fc69;
    border-radius: 0
}
.scrollbar-track.scrollbar-track-x {
    height: 9px
}
.scrollbar-track.scrollbar-track-x .scrollbar-thumb {
    height: 100%
}
.scrollbar-track.scrollbar-track-y {
    width: 9px
}
.scrollbar-track.scrollbar-track-y .scrollbar-thumb {
    width: 100%
}

/* ================================
   KSGK Buttons – Varianten & Größen
   Nutzung:
   - Variante via Modifier an .ksgk-btn anhängen:
     --filled   (Primär, gefüllt)
     --outlined (Kontur)
     --textual  (Textlink mit Pfeil/Chevron)
   - Größen (beliebig kombinierbar):
     --sm  (kleiner)
     --lg  (größer)
     --full (100% Breite)

   Beispiele:
   <a class="ksgk-btn ksgk-btn--filled">...</a>
   <a class="ksgk-btn ksgk-btn--outlined ksgk-btn--lg">...</a>
   <a class="ksgk-btn ksgk-btn--textual ksgk-btn--sm">...</a>
   <a class="ksgk-btn ksgk-btn--filled ksgk-btn--full">...</a>
================================= */
:root{
  --ksgk-btn-font: Syne, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  --ksgk-btn-fg: #fff;
  --ksgk-btn-bg: #101010;
  --ksgk-btn-bd: #101010;
  --ksgk-btn-fg--outlined: #101010;
  --ksgk-btn-bg--outlined: transparent;
  --ksgk-btn-bd--outlined: #101010;
  --ksgk-btn-fg--textual: #101010;
  --ksgk-btn-fs: 1rem;
  --ksgk-btn-fw: 700;
  --ksgk-btn-tt: uppercase;
  --ksgk-btn-lh: 1.5;
  --ksgk-btn-py: 17px; 
  --ksgk-btn-px: 28px;
  --ksgk-btn-radius: 0;
  --ksgk-btn-bw: 2px;
  --ksgk-btn-underline-w: 18px; 
  --ksgk-btn-underline-h: 2px;
  --ksgk-ease: cubic-bezier(.33,1,.68,1);
  --ksgk-dur: .3s;
  --ksgk-focus: 2px solid #5DD62C;
  --ksgk-focus-offset: 3px;
}

.ksgk-m-button { 
  display: inline-block; 
}

.ksgk-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  vertical-align: middle;
  font-family: var(--ksgk-btn-font);
  font-size: var(--ksgk-btn-fs);
  font-weight: var(--ksgk-btn-fw);
  line-height: var(--ksgk-btn-lh);
  text-transform: var(--ksgk-btn-tt);
  text-decoration: none;
  padding: var(--ksgk-btn-py) var(--ksgk-btn-px);
  min-height: 24px; 
  width: auto;
  margin: 0;
  border-radius: var(--ksgk-btn-radius);
  outline: 0;
  border: var(--ksgk-btn-bw) solid transparent;
  transition:
    color var(--ksgk-dur) ease-out,
    background-color var(--ksgk-dur) ease-out,
    border-color var(--ksgk-dur) ease-out;
}

/* Größen */
.ksgk-btn--sm{ padding: 15px 25px; }
.ksgk-btn--lg{ padding: 19px 40px; }
.ksgk-btn--full{ width: 100%; text-align: center; justify-content: center; }

/* Varianten */
.ksgk-btn--filled{
  color: var(--ksgk-btn-fg);
  background-color: var(--ksgk-btn-bg);
  border-color: var(--ksgk-btn-bd);
}

.ksgk-btn--outlined{
  color: var(--ksgk-btn-fg--outlined);
  background-color: var(--ksgk-btn-bg--outlined);
  border-color: var(--ksgk-btn-bd--outlined);
}

/* Label + animierte Unterstreichung (für filled & outlined) */
.ksgk-btn__label{ position: relative; }
.ksgk-btn--filled .ksgk-btn__label::after,
.ksgk-btn--outlined .ksgk-btn__label::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--ksgk-btn-bw));
  display: block;
  width: var(--ksgk-btn-underline-w);
  height: var(--ksgk-btn-underline-h);
  background-color: currentColor;
  transition: width var(--ksgk-dur) ease-out;
}
.ksgk-btn--filled:hover .ksgk-btn__label::after,
.ksgk-btn--outlined:hover .ksgk-btn__label::after{
  width: 100%;
}

/* Textual-Variante */
.ksgk-btn--textual{
  padding: 0 !important;
  font-size: 14px;
  letter-spacing: -.025em;
  text-transform: none !important;
  color: var(--ksgk-btn-fg--textual);
  background: transparent;
  border: 0;
}
/* Textual: Chevron dezent von rechts → links einblenden */
.ksgk-btn--textual .ksgk-btn__arrow{
  margin-left: 8px;
  inline-size: 18px;
  block-size: 18px;
  transform: translateX(6px);
  opacity: 0;
  transition:
    transform var(--ksgk-dur) var(--ksgk-ease),
    opacity  var(--ksgk-dur) ease-out;
  flex-shrink: 0;
}
.ksgk-btn--textual:hover .ksgk-btn__arrow,
.ksgk-btn--textual:focus-visible .ksgk-btn__arrow{
  transform: translateX(0);
  opacity: 1;
}

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce){
  .ksgk-btn--textual .ksgk-btn__arrow{
    transition: opacity .01ms linear;
    transform: none;
  }
}
/* Fokus-Styling (sichtbar, nur wenn per Tastatur) */
.ksgk-btn:focus-visible{
  outline: var(--ksgk-focus);
  outline-offset: var(--ksgk-focus-offset);
}

/* Disabled-Zustände für <a aria-disabled="true"> */
.ksgk-btn[aria-disabled="true"]{
  opacity: .5; pointer-events: none;
}

/* Bevorzugt reduzierte Bewegung */
@media (prefers-reduced-motion: reduce){
  .ksgk-btn,
  .ksgk-btn__label::after,
  .ksgk-btn--textual .ksgk-btn__arrow path{
    transition: none !important;
  }
}

/* Optional: CTA-Wrapper (falls du später Reihen nutzt) */
.ksgk-cta{
  position: relative; display: inline-block; width: 100%; padding: 39px 0;
}
.ksgk-cta__inner{ display: flex; align-items: center; }
.ksgk-cta--stretched .ksgk-cta__inner{ justify-content: space-between; }
.ksgk-cta--centered .ksgk-cta__inner{ justify-content: center; }
.ksgk-cta__content{ padding-right: 20px; }
.ksgk-cta__content > *{ margin: 0; }
.ksgk-cta__button{ flex: 0 0 auto; }