/*
Theme Name: Hello Elementor Child - SKOLL
Template: hello-elementor
Version: 1.0.0
Description: SKOLL Relaunch Child-Theme, Designsystem Phase 4
*/

:root{
  /* Markenfarben, verbindlich */
  --skoll-rubin:#D61E5C;
  --skoll-orange:#E3731A;
  --skoll-blau:#363A8B;
  --skoll-gruen-dunkel:#1E763C;
  --skoll-gruen-hell:#409F39;
  --skoll-taupe:#635C4D;

  /* Abgeleitete Tonwerte */
  --rubin-dunkel:#A81647;
  --orange-text:#B85A0D;
  --blau-dunkel:#2A2D6E;
  --gruen-dunkel-tief:#175C2F;

  /* Neutrale Skala, aus Taupe entwickelt */
  --n-900:#2E2A24;
  --n-700:#4A443A;
  --n-600:#635C4D;
  --n-400:#9A9184;
  --n-300:#C7C0B4;
  --n-200:#E4DFD6;
  --n-100:#F1EEE8;
  --n-050:#F8F6F2;
  --weiss:#FFFFFF;

  /* Semantisch */
  --text:var(--n-900);
  --text-body:var(--n-600);
  --text-leise:var(--n-400);
  --primaer:var(--skoll-rubin);
  --primaer-hover:var(--rubin-dunkel);
  --flaeche:var(--n-050);
  --flaeche-2:var(--n-100);
  --linie:var(--n-200);
  --fokus:var(--skoll-rubin);
  --fehler:#B3261E;

  /* Typografie */
  --font-head:"Noto Serif",Georgia,"Times New Roman",serif;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;

  --t-display:clamp(2.5rem,7vw,4.5rem);
  --t-h1:clamp(2rem,5.5vw,3.5rem);
  --t-h2:clamp(1.625rem,4vw,2.5rem);
  --t-h3:clamp(1.375rem,2.6vw,1.75rem);
  --t-h4:1.25rem;
  --t-intro:1.25rem;
  --t-body:1.125rem;
  --t-small:1rem;
  --t-caption:0.875rem;
  --t-label:0.75rem;

  --lh-tight:1.15;
  --lh-head:1.25;
  --lh-body:1.65;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --sektion:clamp(48px,8vw,96px);

  --radius:4px;
  --radius-gross:8px;
  --breite-max:1200px;
  --breite-text:68ch;
}

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Serif';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/noto-serif-600-latin.woff2') format('woff2');
}

body{
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--text-body);
  background:var(--weiss);
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  color:var(--text);
  line-height:var(--lh-head);
}
h1{font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:-.015em}
h2{font-size:var(--t-h2);letter-spacing:-.01em}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4);font-family:var(--font-body);font-weight:700}
p{max-width:var(--breite-text)}

:where(a,button,input,select,summary):focus-visible{
  outline:3px solid var(--fokus) !important;
  outline-offset:2px;
  border-radius:2px;
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:#D61E5C;color:#fff;padding:12px 20px;font-weight:700;text-decoration:none;border-radius:0 0 4px 0;}
.skip-link:focus{left:0;}


/* Eigene Markierungsfarbe, damit Buttons/Nav beim Klicken nicht durch die System-Akzentfarbe unlesbar werden */
::selection{background:#D61E5C;color:#fff;}
::-moz-selection{background:#D61E5C;color:#fff;}

a, button, .elementor-button, .e-button-base, .elementor-nav-menu a, .elementor-nav-menu .elementor-item {
  -webkit-user-select:none;
  user-select:none;
}


/* ================= SKOLL Buttons, robust gegen Elementor-Defaults ================= */
.skoll-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:16px;
  text-decoration:none !important;border-radius:4px;min-height:48px;
  padding:14px 24px;cursor:pointer;text-transform:none !important;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
  border:2px solid transparent;
}
.skoll-btn:active{transform:scale(0.98);}
.skoll-btn-full{width:100%;}

.skoll-btn-primary,.skoll-btn-primary:visited{background-color:#D61E5C !important;color:#fff !important;border-color:#D61E5C !important;}
.skoll-btn-primary:hover,.skoll-btn-primary:focus-visible{background-color:#A81647 !important;border-color:#A81647 !important;color:#fff !important;}

.skoll-btn-outline,.skoll-btn-outline:visited{background-color:transparent !important;color:#A81647 !important;border-color:#D61E5C !important;}
.skoll-btn-outline:hover,.skoll-btn-outline:focus-visible{background-color:#D61E5C !important;color:#fff !important;border-color:#D61E5C !important;}

.skoll-btn-text,.skoll-btn-text:visited{background:transparent !important;color:#A81647 !important;text-decoration:underline !important;padding:0 !important;min-height:auto !important;border:none !important;font-weight:600 !important;}
.skoll-btn-text:hover,.skoll-btn-text:focus-visible{color:#D61E5C !important;}

.skoll-btn-text-spezial,.skoll-btn-text-spezial:visited{background:transparent !important;color:#B85A0D !important;text-decoration:underline !important;padding:0 !important;min-height:auto !important;border:none !important;font-weight:600 !important;}
.skoll-btn-text-spezial:hover,.skoll-btn-text-spezial:focus-visible{color:#E3731A !important;}

.skoll-btn-text-digital,.skoll-btn-text-digital:visited{background:transparent !important;color:#363A8B !important;text-decoration:underline !important;padding:0 !important;min-height:auto !important;border:none !important;font-weight:600 !important;}
.skoll-btn-text-digital:hover,.skoll-btn-text-digital:focus-visible{color:#2A2D6E !important;}

/* Login-Button im Header, gleiche robuste Logik */
#login-btn, #login-btn:visited{background-color:#D61E5C !important;color:#fff !important;}
#login-btn:hover, #login-btn:focus-visible{background-color:#A81647 !important;color:#fff !important;}

/* ================= Header-Politur ================= */
header.elementor-location-header{
  border-bottom:1px solid #E4DFD6;
}
.elementor-nav-menu .elementor-item{
  position:relative;
  letter-spacing:.01em;
}
.elementor-nav-menu .elementor-item::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:2px;
  height:2px;
  background:#D61E5C;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
.elementor-nav-menu .elementor-item:hover::after,
.elementor-nav-menu .elementor-item:focus-visible::after{
  transform:scaleX(1);
}

/* ================= Nav-Hover, hart gegen das Valentina-Template-Erbe abgesichert ================= */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted{
  color:#A81647 !important;
}

/* ================= Testimonial-Karussell: Namenszeile immer auf gleicher Ebene ================= */
.elementor-widget-testimonial-carousel .swiper-wrapper{
  align-items:stretch;
}
.elementor-widget-testimonial-carousel .swiper-slide{
  height:auto;
  display:flex;
}
.elementor-testimonial{
  display:flex;
  flex-direction:column;
  width:100%;
}
.elementor-testimonial__content{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex:1;
}
.elementor-testimonial__cite{
  margin-top:16px;
}