/* Keep the AIO footer at the viewport bottom when content is short. */
body.aioCommunity > #wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.aioCommunity > #wrapper > #container {
  flex: 1 0 auto;
}

body.aioCommunity > #wrapper > #header,
body.aioCommunity > #wrapper > footer {
  flex-shrink: 0;
}

html {
  scroll-behavior: smooth;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.dark .textHightlightM1 {
  text-shadow: 1px 0 0 #2300ff, -1px 0 0 #00d0ff, -3px 0px 8px #0014ff, 0 -1px 0 #0006ff;
}


.textShadowM3 {
  text-shadow:
  1px 0 0 #00ffaf,
 -1px 0 0 #00ffaf,
  0 1px 0 #00ffaf,
  0 -1px 0 #00ffaf;
}
.rotate-y-180 {
  transform: rotateY(180deg);
}

.heroHeader h1 {
  text-shadow: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
}

.heroHeader h2 {
  text-shadow: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
}

.dark .textShadowM3 {
  text-shadow: none;
}

.ts-wrapper .item {
  color: white;
}

/* ⚡ Smooth, constant-speed shimmer (no start/stop feel) */
.shimmer-card{
  position:relative;
  overflow:hidden;
  --shimmer-duration:2.8s;  /* schneller Lauf */
  --shimmer-tilt:18deg;
  --shimmer-scale:2.6;      /* groß genug -> keine Kanten */
  --shimmer-peak:0.10;      /* Helligkeit des Streifens (leicht) */
  --shimmer-pause: 30%; /* entspricht 100% - 70% Bewegung */
  --shimmer-cycle: 12s
}
.shimmer-card::after{
  content:"";
  position:absolute;
  inset:-60%;                        /* deutlich größer als die Karte */
  z-index:10;
  pointer-events:none;

  /* unveränderter, schmaler Lichtstreifen */
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 28%,
    rgba(255,255,255,0.05) 42%,
    rgba(255,255,255,var(--shimmer-peak)) 50%,
    rgba(255,255,255,0.05) 58%,
    rgba(255,255,255,0) 72%
  );
  transform-origin:center;
  transform:scale(var(--shimmer-scale)) rotate(var(--shimmer-tilt)) translate(-160%, -160%);

  /* ✅ weiche Ränder ohne Clipping über Masken (multiplizieren sich) */
  -webkit-mask:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);

  /* Bewegung + Glow wie gehabt (konstante Geschwindigkeit) */
  animation:
    aio-shimmer-move var(--shimmer-cycle, var(--shimmer-duration)) linear infinite,
    aio-shimmer-glow var(--shimmer-cycle, var(--shimmer-duration)) ease-in-out infinite;
}

/* Bewegung: 0–70 % läuft, danach bleibt er einfach außerhalb */
@keyframes aio-shimmer-move {
  0%    { transform: scale(var(--shimmer-scale)) rotate(var(--shimmer-tilt)) translate(-160%, -160%); }
  16.5% { transform: scale(var(--shimmer-scale)) rotate(var(--shimmer-tilt)) translate(160%, 160%); } /* Ende des Laufs */
  100%  { transform: scale(var(--shimmer-scale)) rotate(var(--shimmer-tilt)) translate(160%, 160%); } /* Pause */
}

/* Glühen: synchronisiert, damit Licht nur während Bewegung sichtbar ist */
@keyframes aio-shimmer-glow {
  0%, 16.5%, 100% { opacity: 0; }
  6%, 12%         { opacity: .45; }
}
@media (prefers-reduced-motion: reduce){
  .shimmer-card::after{ animation:none; }
}

/* Tilt: Perspektive + Smoothness */
.uiTilt { perspective: 900px; transform-style: preserve-3d; }
.tilt-item { will-change: transform; transition: transform 180ms cubic-bezier(.2,.6,.2,1); transform-style: preserve-3d; }
.uiTilt:hover .tilt-item { transition-duration: 90ms; } /* etwas direkter unter Hover */

/* Optionales Glare-Layer (wird per JS positioniert) */
.tilt-glare {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 45%);
  transition: opacity 180ms ease;
  border-radius: 0.75rem; /* match rounded-xl */
}

.apexcharts-svg {
  overflow: visible;
}

.radar-chart {
  width: 350px;
  height: 350px;
  background: none;
  position: relative;
  overflow: visible;
}
.apexcharts-xaxis-label {
  z-index: 10;
}
/* Optional für die Labels nahe Chart */
.apexcharts-xaxis-text {
  font-weight: 600;
  fill: white;
  filter: drop-shadow(0 0 1px #1A2B4A);
}

[data-competence-radar] {
  min-height: 340px;
}

@media (max-width: 1023.98px) {
  [data-competence-radar] {
    min-height: 320px;
  }
}

@media (max-width: 767.98px) {
  [data-competence-radar] {
    min-height: 300px;
  }
}

@media (max-width: 419.98px) {
  [data-competence-radar] {
    min-height: 240px;
  }
}




/* Panel animiert aus Opener-Position ins Zentrum */
.modal-anim-panel {
  transform-origin: center center;
  /* Startwerte werden per CSS-Variablen gesetzt */
  --from-x: 0px;
  --from-y: 0px;
  --from-scale: .92;
  --open-dur: 380ms;
  --close-dur: 260ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  opacity: 0;
}

.modal-anim-enter {
  transform: translate(var(--from-x), var(--from-y)) scale(var(--from-scale));
  opacity: 0;
}
.modal-anim-enter.modal-anim-active {
  transform: translate(0,0) scale(1);
  opacity: 1;
  transition: transform var(--open-dur) var(--ease), opacity 220ms ease-out;
}

.modal-anim-leave {
  transform: translate(0,0) scale(1);
  opacity: 1;
}
.modal-anim-leave.modal-anim-active {
  transform: translate(var(--from-x), var(--from-y)) scale(var(--from-scale));
  opacity: 0;
  transition: transform var(--close-dur) var(--ease), opacity 180ms ease-in;
}

/* Backdrop Animation */
[data-modal-ex-backdrop] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
[data-modal-ex-backdrop].is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}






.modal-anim-panel {
  opacity: 0;
  transform: scale(0.85);
  /* Will per JS bei Show/Hide geändert */
  transition: none;
}

.modal-anim-panel.modal-anim-grow {
  animation: modal-grow 350ms cubic-bezier(0.37,0.1,0.29,1.07) forwards;
}
@keyframes modal-grow {
  from {
    transform: translate(var(--modal-from-x, 0), var(--modal-from-y, 0)) scale(var(--modal-from-scale, 0.9));
    opacity: 0;
  }
  to {
    transform: translate(0,0) scale(1);
    opacity: 1;
  }
}

.modal-anim-panel.modal-anim-shrink {
  animation: modal-shrink 300ms cubic-bezier(0.37,0.1,0.29,1.07) forwards;
}
@keyframes modal-shrink {
  from {
    transform: translate(0,0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--modal-from-x, 0), var(--modal-from-y, 0)) scale(var(--modal-from-scale, 0.9));
    opacity: 0;
  }
}

article.exam-scenario-article h3{
    font-size: 1.5rem;
    line-height: 2rem;
}
article.exam-scenario-article p{
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: justify;
}

/* AIO certification exam form */

.surveyStyle h2 {
  font-size: 1.5rem;          /* text-2xl */
  line-height: 2rem;
  font-weight: 400;           /* font-normal */
  letter-spacing: 0;          /* tracking-normal */
  color: #000;
}

.surveyStyle h3 {
  font-size: 1.25rem;         /* text-xl */
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #000;
}

.surveyStyle h4,
.surveyStyle h5 {
  font-size: 1.125rem;        /* text-lg */
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-primary-600, #2563eb);
}

/* Dark mode toggled via <html class="dark"> */
html.dark .surveyStyle h2,
html.dark .surveyStyle h3 {
  color: #fff;
}

html.dark .surveyStyle h4,
html.dark .surveyStyle h5 {
  color: #fff;
}


.range-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: hsla(0, 0%, 100%, .15);
  outline: none;
}


.range-thumb::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.25);
}

/* Thumb */
.range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;

  width: 16px;
  height: 16px;
  margin-top: -5px !important;
  border-radius: 9999px;

  background-color: var(--color-primary-600, #2563eb);
  border: 2px solid var(--color-primary-600, #2563eb);
  box-shadow: 0 0 0 4px #fff;

  transition: transform 150ms ease;
}
.dark .range-thumb::-webkit-slider-thumb {
  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
}

.range-thumb:active::-webkit-slider-thumb,
.range-thumb:focus::-webkit-slider-thumb {
  background-color: var(--color-primary-600, #2563eb);
  border: 2px solid var(--color-primary-600, #2563eb);
  box-shadow: 0 0 0 4px #fff;
}

.dark .range-thumb:active::-webkit-slider-thumb,
.dark .range-thumb:focus::-webkit-slider-thumb {
  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
  border: 2px solid rgb(103 232 249 / var(--tw-bg-opacity));
}

.range-thumb::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: var(--color-primary-600, #2563eb);
}
.dark .range-thumb::-moz-range-track {
  background: rgb(103 232 249 / var(--tw-bg-opacity));
}

.range-thumb::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: var(--color-primary-600, #2563eb);
  border: 2px solid var(--color-primary-600, #2563eb);
  box-shadow: 0 0 0 4px #fff;
}

.dark .range-thumb::-moz-range-thumb {

  background: rgb(103 232 249 / var(--tw-bg-opacity));
  border: 2px solid rgb(103 232 249 / var(--tw-bg-opacity));
}


.range-thumb:hover::-webkit-slider-thumb,
.range-thumb:hover::-moz-range-thumb {
  transform: scale(1.25);
}

.range-thumb:disabled {
  cursor: not-allowed;
}

.range-thumb:disabled::-webkit-slider-thumb,
.range-thumb:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

.range-thumb:disabled:hover::-webkit-slider-thumb,
.range-thumb:disabled:hover::-moz-range-thumb {
  transform: none;
}

.defaultList ul {
  list-style: disc;
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.defaultList ol {
  list-style: decimal;
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.defaultList li {
  margin: 0.25rem 0;
}