/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Verhindert horizontales Scrollen auf den Seiten */
body {
    overflow-x: hidden;
}

/* Globale Maximalbreite und Zentrierung, ohne Layouts <1920px zu stören */
:root { --site-max: 1920px; }

@media (min-width: 1921px) {

  /* 1) Inhalt in ALLEN Elementor-Varianten begrenzen & zentrieren */
  .elementor-section.elementor-top-section > .elementor-container,
  .elementor-section.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap,
  .elementor-location-header .elementor-container,
  .elementor-location-footer .elementor-container,
  .e-con, .e-con-inner {
    /* max-width: var(--site-max) !important; */
     margin-left: auto !important; 
     margin-right: auto !important; 
  }
	
	 /* Fachartikel-Unterseite(Vorlage) explizit freistellen */
  .elementor.elementor-1623 :is(.e-con) {
      margin-left: 0 !important;
	  margin-right: 0 !important;
	}

  /* 2) Gestretchte Bereiche: Hintergrund darf full width bleiben,
        aber der INHALT wird gecappt & mittig gesetzt */
  .elementor-section.elementor-section-stretched > .elementor-container,
  .e-con.e-con--stretch > .e-con-inner {
    /* max-width: var(--site-max) !important; */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) Gegen „breiter als erlaubt“ durch 100vw/Fixed-Widths in Widgets */
  .elementor-section .elementor-container,
  .elementor-section .e-con,
  .elementor-section .elementor-widget,
  .elementor-section .elementor-column,
  .elementor .elementor-widget-wrap {
    max-width: 100% !important;
    width: auto !important;
  }

  /* 4) Medienelemente nicht überlaufen lassen */
  img, video, canvas, iframe {
    /* max-width: 100% !important; */
    height: auto;
  }
}

/* Optional: horizontales Scrollen killen, falls jemand 100vw + Scrollbar nutzt */
html, body { overflow-x: hidden; }


.option-content {
  display: flex;
  align-items: flex-start;
  gap: 1em;
}

.option-letter {
  color: rgb(102, 153, 255);
  display: block;
  font-family: "Półtawski Nowy", sans-serif;
  font-size: 56px;
  font-weight: 500;
  min-width: 40px;
  line-height: 1;
}

.option-text {
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1.4;
}



/* Coverflow Slider – global, aber sauber gescoped */
.coverflow-wrap .myCoverflow {
	max-width:1300px;
	margin-inline:auto;
}
.coverflow-wrap .swiper {
	width:100%;
	padding:50px 0;
}
.coverflow-wrap .swiper-wrapper{
	overflow:visible;
}
.coverflow-wrap .swiper-slide {
	position:relative;width:250px;height:350px;
	transition:transform .4s ease,z-index .4s ease;
}
.coverflow-wrap .swiper-slide img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .6s cubic-bezier(.25,.46,.45,.94);
}
.coverflow-wrap .slide-caption {
	position:absolute;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	bottom:0px;
	left:10px;
	right:10px;
	background:rgba(255,255,255,.85);
	padding:15px;
	height:160px;
	opacity:0;
	transform:translateY(10px);
	transition:opacity .4s ease,transform .4s ease;
	pointer-events:none;
}
.coverflow-wrap .scale-1 .slide-caption {
	opacity:1;
	transform:translateY(0);
	pointer-events:auto;
}
.coverflow-wrap .slide-caption .meta {
	font-size:13px;
	color:#333;
	margin-bottom:5px;
}
.coverflow-wrap .slide-caption h3 {
	margin:0;
	font-size:18px;
}
.coverflow-wrap .slide-caption h3 a {
	color:#3366ff;
	text-decoration:none;
}
/* Farbe nicht mehr weiß, da es nicht lesbar war */
.coverflow-wrap .white-text {
	color:#333;
}
.coverflow-wrap .scale-1 img{transform:scale(1.2);z-index:10}
.coverflow-wrap .scale-2 img{transform:scale(.8);z-index:5}
.coverflow-wrap .scale-3 img{transform:scale(1);z-index:1}

.coverflow-wrap .swiper-nav-below {
	display:flex;
	justify-content:center;
	gap:150px;
	margin-top:20px;
}
.coverflow-wrap .swiper-button-prev,
.coverflow-wrap .swiper-button-next{
	position:static;
	width:20px;
	height:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	color:#6699FF;
	font-size:20px;
}
.coverflow-wrap .swiper-button-prev::after,
.coverflow-wrap .swiper-button-next::after{font-size:30px}

@media (max-width:1024px){.coverflow-wrap .swiper-nav-below{gap:80px}}
@media (max-width:768px){.coverflow-wrap .swiper-slide{width:200px;height:300px}}

/* =========================
   Coverflow: Tablet
   ========================= */
@media (max-width: 1024px) {
  .coverflow-wrap .swiper { padding: 40px 0; }
  .coverflow-wrap .swiper-slide { width: 220px; height: 320px; }

  /* Caption kompakter + näher am Rand */
  .coverflow-wrap .slide-caption {
    left: 12px; right: 12px; bottom: 6px;
    padding: 12px;
    height: auto;            /* flexible Höhe statt fix */
    min-height: 120px;
  }
  .coverflow-wrap .slide-caption .meta { font-size: 12px; }
  .coverflow-wrap .slide-caption h3 {
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere; /* lange Worte umbrechen */
  }

  /* Navigation näher zusammen, Pfeile etwas kleiner */
  .coverflow-wrap .swiper-nav-below { gap: 80px; }
  .coverflow-wrap .swiper-button-prev::after,
  .coverflow-wrap .swiper-button-next::after { font-size: 26px; }

  /* Scale etwas moderater auf Tablet */
  .coverflow-wrap .scale-1 img { transform: scale(1.15); }
  .coverflow-wrap .scale-2 img { transform: scale(0.85); }
}

/* =========================
   Coverflow: Mobile (≤768)
   ========================= */
@media (max-width: 768px) {
  .coverflow-wrap .swiper { padding: 30px 0; }

  /* Breite am Viewport ausrichten, Verhältnis ~1:1.4 wie Desktop (250x350) */
  .coverflow-wrap .swiper-slide {
    width: 70vw;             /* füllt angenehm die Mitte */
    max-width: 320px;
    height: calc(70vw * 1.4);
    max-height: 440px;
  }

  .coverflow-wrap .slide-caption {
    left: 10px; right: 10px; bottom: 6px;
    padding: 12px;
    height: auto;
    min-height: 110px;
  }
  .coverflow-wrap .slide-caption .meta { font-size: 12px; }
  .coverflow-wrap .slide-caption h3 {
    font-size: clamp(16px, 4vw, 18px);
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  /* Navigation: bessere Tap-Targets, weniger Abstand */
  .coverflow-wrap .swiper-nav-below { gap: 48px; margin-top: 24px; }
  .coverflow-wrap .swiper-button-prev,
  .coverflow-wrap .swiper-button-next { width: 36px; height: 36px; }
  .coverflow-wrap .swiper-button-prev::after,
  .coverflow-wrap .swiper-button-next::after { font-size: 24px; }

  /* Scale auf kleinen Screens noch dezenter (wirkt ruhiger) */
  .coverflow-wrap .scale-1 img { transform: scale(1.12); }
  .coverflow-wrap .scale-2 img { transform: scale(0.90); }
}

/* =========================
   Very small phones (≤420)
   ========================= */
@media (max-width: 420px) {
  .coverflow-wrap .slide-caption {
    padding: 10px;
    min-height: 100px;
  }
  .coverflow-wrap .slide-caption h3 { font-size: 15px; }
}

.quiz-intro {
  font-size: .95rem;
  line-height: 1.4;
  opacity: .9;
}

/* Quiz CTA als "Ribbon"-Button */
.quiz-cta-btn{
  --btn-bg: #6EA4FF;           /* Grundfarbe */
  --btn-bg-hover: #5D95FF;     /* Hover */
  --btn-bg-active: #4F86F0;    /* Active */
  --btn-shadow: rgba(0,0,0,.12);

  display:inline-block;
  padding: 12px 22px;
  background: var(--btn-bg);
  color:#fff !important;
  text-decoration:none;
  font-weight:600;
  font-style: italic;          /* wie im Screenshot */
  line-height:1;
  box-shadow: 0 6px 16px var(--btn-shadow);
  transition: transform .06s ease, opacity .2s ease, background-color .2s ease;
  
  /* Parallelogramm-Form */
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

/* Hover/Active/Focus */
.quiz-cta-btn:hover{ background: var(--btn-bg-hover); opacity:.95; }
.quiz-cta-btn:active{ background: var(--btn-bg-active); transform: translateY(1px); }
.quiz-cta-btn:focus-visible{
  outline: 2px solid #1f4fff; outline-offset: 3px;
}

/* Optional: etwas Abstand nach oben, wenn nötig */
.result-actions .quiz-cta-btn{ margin-top: 8px; }


.result-actions {
	text-align: center;
}

.Y2IQFc {
	font-family: "Inter";
}

#quiz-question p {
	font-family: "Inter";
}

#next-question {
	margin-top: 10px;
	font-family: "Inter";
	font-weight: bold;
	border-width: 0 0 2px 2px;
}

/* Zähler je Grid neu starten */
.has-counter { counter-reset: loopitem; }

/* Pro Item +1 */
.has-counter .e-loop-item { counter-increment: loopitem; position: relative; }

/* Zahl ausgeben: Variante A – direkt am Item, ohne Extra-Element */
.has-counter .e-loop-item::before {
  content: counter(loopitem, decimal-leading-zero);
  position: absolute;
  font-family: "Półtawski Nowy";
  font-weight: 500;
  font-size: 56px;
  color: #6699FF;
  top: -10px;
  left: -5px;
}

/* Schrittzähler */
#quiz-app .quiz-step {
	font-family: "Inter";
	padding-bottom: 20px;
}

/* Progressbar-Farben */
#quiz-app .quiz-progress-bar {
	background: #EEEFF2;   /* Track-Farbe (optional) */
}
#quiz-app .quiz-progress-fill {
	background: #6699ff;   /* deine Farbe für den Fortschritt */
}

/* ------------------------------- */
/* ---------- WRAPPER ------------ */
/* ------------------------------- */
.big-screen-wrapper {
	padding-left: 20px;
	padding-right: 20px;
}

@media (min-width: 768px) {
    .big-screen-wrapper {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1440px) {
    .big-screen-wrapper {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (min-width: 1440px) and (max-width: 1920px) {
    .big-screen-wrapper {
		padding-left:  calc((100% - 1180px) / 2);
		padding-right: calc((100% - 1180px) / 2);
    }
}

@media (min-width: 1921px) {
    .big-screen-wrapper {
        padding-left: calc(50% - 880px);
        padding-right: calc(50% - 880px);
    }
}