/* Hüllen der Seitenbausteine: Im Frontend erzeugt die Hülle keine eigene Box, das Markup des Bausteins
   ordnet sich direkt in den umgebenden Container ein. Im Editor bleibt die Hülle eine Box, damit sie
   auswählbar ist. */
body:not(.elementor-editor-active) .elementor-widget.t2k-durchlass {
  display: contents;
}

/* Bilder mit Next-Gen-Auslieferung per <picture>: Das <picture> erzeugt keine Box, das <img> bleibt
   Flex- bzw. Grid-Kind mit seinen Klassen (siehe includes/imagify.php). */
picture.t2k-bildhuelle {
  display: contents;
}

/* Die <source>-Einträge dürfen dabei kein eigenes Flex-Kind werden (sonst zählt der Abstand des Containers mit). */
picture.t2k-bildhuelle > source {
  display: none;
}

/* Linienpfeil in Knöpfen wie auf der Lernapp-Seite: Größe, Abstand und leichtes Nachrechtsrücken beim Darüberfahren.
   Gilt für Elementor-Knöpfe mit dem hochgeladenen Pfeil-Symbol und für die Knöpfe der Seitenbausteine. */
.elementor-button .elementor-button-icon svg.t2k-knopf-pfeil {
  width: 1.05em;
  height: 1.05em;
  overflow: visible;
  transition: transform .2s ease;
}

.elementor-button .elementor-button-content-wrapper:has(> .elementor-button-icon > svg.t2k-knopf-pfeil) {
  gap: 8px;
}

@media (hover: hover) {
  .elementor-button:hover .elementor-button-icon svg.t2k-knopf-pfeil {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-button .elementor-button-icon svg.t2k-knopf-pfeil {
    transition: none;
  }
}

/* Übersichts-Kasten der FAQ-Seite („Wie kann mir Talk2Kids helfen?“, Kundenwahl 10.10.2026 Variante A „Navy-Bühne“):
   hebt sich von den übrigen Fragen ab – dunkelblaue Fläche mit goldenem und pinkem Schimmer, kleine goldene Zeile
   „Auf einen Blick“ über der Frage, Frage weiß und größer, geöffnet ein goldener Pfeilkreis. Die Zeile steht nur im
   Stylesheet (Vorleseprogramme überspringen sie). Die Kacheln bleiben weiß. */
.t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item,
.t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item[open] {
  border-color: #2E3B78;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(234, 184, 75, .3) 0%, rgba(234, 184, 75, 0) 46%),
    radial-gradient(80% 70% at 0% 100%, rgba(217, 43, 123, .16) 0%, rgba(217, 43, 123, 0) 55%),
    linear-gradient(160deg, #27326C 0%, #1E2857 55%, #18214A 100%);
  box-shadow: 0 26px 54px -30px rgba(30, 40, 87, .6);
}

@media (hover: hover) {
  .t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item:not([open]):hover {
    border-color: #4A5899;
    box-shadow: 0 26px 54px -30px rgba(30, 40, 87, .6);
  }
}

.t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item-title-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item-title-header::before {
  content: "Auf einen Blick";
  content: "Auf einen Blick" / "";
  color: #EAB84B;
  font: 700 11px/1.2 "Montserrat", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item-title-text {
  color: #FFFFFF;
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

.t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  border-color: #EAB84B;
  background: linear-gradient(180deg, #F7D970 0%, #D49C2C 100%);
  box-shadow: 0 6px 16px -6px rgba(234, 184, 75, .6);
}

.t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item[open] .e-n-accordion-item-title-icon::before {
  background: #1E2857;
}

.t2k-faq-seite .t2k-faq-gruppe--ueberblick .t2k-faq-box .e-n-accordion-item > .e-con {
  border-top-color: rgba(255, 255, 255, .14);
}

.t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item > .e-con p:not(.t2k-angebot__text) {
  color: rgba(255, 255, 255, .88);
}

.t2k-faq-seite .t2k-faq-gruppe--ueberblick .t2k-angebot {
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .55);
}

@media (max-width: 767px) {
  .t2k-faq-seite .t2k-faq-gruppe--ueberblick .e-n-accordion-item-title-text {
    font-size: 19px !important;
  }
}

/* Angebots-Kacheln (FAQ-Seite „Wie kann mir Talk2Kids helfen?“, Kundenwunsch 10.10.2026): Medaillon, Etikett, Titel,
   eine Zeile Text und Links mit Linienpfeil. Untereinander; ab Tablet zwei Spalten. */
.t2k-angebote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 6px;
}

@media (min-width: 768px) {
  .t2k-angebote {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.t2k-angebot {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 16px;
  border: 1px solid #EFE4CC;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(30, 40, 87, .04), 0 12px 28px -22px rgba(30, 40, 87, .28);
  font-family: "Montserrat", sans-serif;
  text-align: left;
}

.t2k-angebot__medaillon {
  flex: none;
  width: 64px;
  height: 64px;
}

.t2k-angebot__medaillon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.t2k-angebot__inhalt {
  min-width: 0;
}

.t2k-angebot__etikett {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(226, 186, 116, .7);
  border-radius: 999px;
  background: linear-gradient(160deg, #FFF9EA 0%, #F6E7C4 100%);
  color: #1E2857;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.elementor .t2k-angebot .t2k-angebot__titel {
  margin: 8px 0 4px;
  padding: 0;
  color: #1E2857;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.elementor .t2k-angebot .t2k-angebot__text {
  margin: 0 0 10px;
  padding: 0;
  color: #4A5170;
  font-size: 14.5px;
  line-height: 1.5;
}

.t2k-angebot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.elementor .t2k-angebot .t2k-angebot__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  color: #1E2857;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: none;
}

.elementor .t2k-angebot .t2k-angebot__link span {
  border-bottom: 1.5px solid #DBC379;
}

.t2k-angebot__link svg.t2k-knopf-pfeil {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  overflow: visible;
  transition: transform .2s ease;
}

@media (hover: hover) {
  .elementor .t2k-angebot .t2k-angebot__link:hover {
    color: #635323;
  }

  .t2k-angebot__link:hover svg.t2k-knopf-pfeil {
    transform: translateX(3px);
  }
}

.t2k-angebot__link:focus-visible {
  outline: 2px solid #1E2857;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .t2k-angebot {
    gap: 12px;
    padding: 16px 14px 14px;
  }

  .t2k-angebot__medaillon {
    width: 52px;
    height: 52px;
  }
}

/* Angebots-Medaillons, ruhig animiert: Schein atmet, Hörer klingelt kurz und die Schallwellen schwingen nacheinander,
   Play-Zeichen pulsieren, Herz schlägt, Stern funkelt, Fortschrittsbalken füllt sich, Mikrofon schwebt. Die Ausschläge
   sind auf die kleine Medaillon-Größe (64 bzw. 52 px) abgestimmt, sonst bleibt die Bewegung unsichtbar. */
.t2k-an-schein,
.t2k-an-klingeln,
.t2k-an-welle,
.t2k-an-puls,
.t2k-an-herz,
.t2k-an-funkeln,
.t2k-an-balken,
.t2k-an-schweben {
  transform-box: fill-box;
  transform-origin: center;
}

.t2k-an-schein {
  animation: t2k-an-schein 5s ease-in-out infinite;
}

@keyframes t2k-an-schein {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.06); }
}

.t2k-an-klingeln {
  animation: t2k-an-klingeln 3.6s ease-in-out infinite;
}

@keyframes t2k-an-klingeln {
  0%, 30%, 100% { transform: rotate(0deg); }
  5% { transform: rotate(-9deg); }
  10% { transform: rotate(8deg); }
  15% { transform: rotate(-7deg); }
  20% { transform: rotate(5deg); }
  25% { transform: rotate(-2deg); }
}

.t2k-an-welle {
  transform-origin: 0 100%;
  animation: t2k-an-welle 1.8s ease-in-out infinite;
}

.t2k-an-welle--2 {
  animation-delay: .3s;
}

@keyframes t2k-an-welle {
  0%, 100% { opacity: .15; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1.06); }
}

.t2k-an-puls {
  animation: t2k-an-puls 2.4s ease-in-out infinite;
}

@keyframes t2k-an-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.t2k-an-herz {
  animation: t2k-an-herz 2.4s ease-in-out infinite;
}

@keyframes t2k-an-herz {
  0%, 45%, 100% { transform: scale(1); }
  12% { transform: scale(1.4); }
  24% { transform: scale(1.08); }
  34% { transform: scale(1.3); }
}

.t2k-an-funkeln {
  animation: t2k-an-funkeln 3s ease-in-out infinite;
}

@keyframes t2k-an-funkeln {
  0%, 100% { opacity: .75; transform: scale(.82) rotate(-10deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(12deg); }
}

.t2k-an-balken {
  transform-origin: 0 50%;
  animation: t2k-an-balken 4s ease-in-out infinite;
}

@keyframes t2k-an-balken {
  0%, 100% { transform: scaleX(.15); }
  60%, 85% { transform: scaleX(1.47); }
}

.t2k-an-schweben {
  animation: t2k-an-schweben 2.6s ease-in-out infinite alternate;
}

@keyframes t2k-an-schweben {
  from { transform: translateY(3px); }
  to { transform: translateY(-6px); }
}

.t2k-angebot:nth-child(2) .t2k-an-schein { animation-delay: -1.25s; }
.t2k-angebot:nth-child(3) .t2k-an-schein { animation-delay: -2.5s; }
.t2k-angebot:nth-child(4) .t2k-an-schein { animation-delay: -3.75s; }

@media (prefers-reduced-motion: reduce) {
  .t2k-angebot__link svg.t2k-knopf-pfeil {
    transition: none;
  }

  .t2k-an-schein,
  .t2k-an-klingeln,
  .t2k-an-welle,
  .t2k-an-puls,
  .t2k-an-herz,
  .t2k-an-funkeln,
  .t2k-an-balken,
  .t2k-an-schweben {
    animation: none;
  }
}