/* TeachYourself — Gestaltung. Farben kommen aus theme.json (Website-Editor → Stile). */

/* Labels & Handschrift */
.ty-kicker{font-family:var(--wp--preset--font-family--mono)!important;font-size:12px!important;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--violett)}
.ty-kicker.is-dark{color:var(--wp--preset--color--gruen)}
.ty-yourself{color:var(--wp--preset--color--violett);font-weight:inherit}
.has-tinte-background-color .ty-yourself,.ty-yourself.is-dark{color:var(--wp--preset--color--gruen)}
.ty-caveat{font-family:var(--wp--preset--font-family--accent)!important;font-weight:700;line-height:1.15}
.ty-caveat.is-violett{color:var(--wp--preset--color--violett)}
.ty-caveat.is-gruen{color:var(--wp--preset--color--gruen)}
.ty-mono{font-family:var(--wp--preset--font-family--mono)!important;letter-spacing:.1em}

/* Textmarker — Zyklus: anstreichen (~1s), 5s markiert, in 0.5s verblassen, erneut */
@keyframes ty-mark{0%{transform:scaleX(0);opacity:1}15%{transform:scaleX(1);opacity:1}92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
mark.ty-marker{position:relative;z-index:0;display:inline-block;white-space:nowrap;background:none;color:inherit}
mark.ty-marker::before{content:"";position:absolute;left:-3px;right:-3px;top:16%;height:76%;background:color-mix(in srgb,var(--wp--preset--color--textmarker) 60%,transparent);z-index:-1;transform:scaleX(0);transform-origin:left center;animation:ty-mark 6.5s ease infinite}

/* Sanftes Einblenden beim Scrollen (auch gestaffelt).
   WICHTIG: Der versteckte Startzustand (opacity:0) gilt NUR, wenn JavaScript
   aktiv ist (html.js-anim wird von ty-anim.js gesetzt). Läuft das Script nicht,
   bleibt der Inhalt sichtbar — es kann nie dauerhaft Text verschwinden. */
.ty-anim{transition:opacity .7s ease,transform .7s ease}
.js-anim .ty-anim{opacity:0;transform:translateY(16px)}
.js-anim .ty-anim.is-inview{opacity:1;transform:none}
.ty-anim.d1{transition-delay:.15s}.ty-anim.d2{transition-delay:.3s}.ty-anim.d3{transition-delay:.45s}

/* Aufploppen (Sprechblasen, Icons) */
.ty-pop{transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}
.js-anim .ty-pop{opacity:0;transform:scale(0)}
.js-anim .ty-pop.is-inview{opacity:1;transform:scale(1)}
.ty-pop.d1{transition-delay:.3s}.ty-pop.d2{transition-delay:.6s}

/* Unterstrich/Pfeil zeichnet sich (SVG-Pfad mit class ty-draw) */
svg .ty-draw{stroke-dasharray:300;transition:stroke-dashoffset 1.2s ease .3s}
.js-anim svg .ty-draw{stroke-dashoffset:300}
.js-anim .is-inview svg .ty-draw{stroke-dashoffset:0}

/* Papier-Rahmen für Fotos/Videostills */
.ty-frame{position:relative;background:#fff;padding:10px 10px 38px;box-shadow:0 4px 18px rgba(26,24,48,.15)}
.ty-frame.is-portrait{padding:10px 10px 12px}
.ty-frame.rot-l{transform:rotate(-1.3deg)}.ty-frame.rot-r{transform:rotate(1.3deg)}
.ty-frame img{display:block;width:100%;height:auto}
/* Video im Papierrahmen — gleiche Masse wie ein Bild. */
.ty-frame video{display:block;width:100%;height:auto;background:var(--wp--preset--color--tinte)}
.ty-frame .wp-block-video{margin:0}
/* Solange im Videoblock noch keine Datei gewählt ist, zeigt der Rahmen das
   Platzhalterbild im 16:9-Format. Sobald ein Video eingesetzt wird, greift
   die Regel nicht mehr — der Rahmen fällt also nie in sich zusammen. */
.ty-frame .wp-block-video:not(:has(video)){display:block;aspect-ratio:16/9;
  background:var(--wp--preset--color--tinte) url('../img/platzhalter.svg') center/cover no-repeat}
.ty-frame .wp-element-caption,.ty-frame figcaption{position:absolute;bottom:8px;left:14px;margin:0;font-family:var(--wp--preset--font-family--accent);font-weight:600;font-size:18px;color:rgba(26,24,48,.6);text-align:left}
/* Klebeband — immer mittig */
.ty-tape{position:absolute;top:-30px;left:50%;width:80px;height:19px;background:color-mix(in srgb,var(--wp--preset--color--textmarker) 55%,transparent);transform:translateX(-50%) rotate(-2deg);pointer-events:none}
.ty-pin{position:absolute;top:-30px;left:50%;width:20px;height:20px;border-radius:50%;background:var(--wp--preset--color--gruen);box-shadow:0 2px 5px rgba(0,0,0,.4);transform:translateX(-50%)}

/* Karten */
.ty-card{background:var(--wp--preset--color--karte);border:1px solid rgba(26,24,48,.1);border-radius:12px;transition:transform .2s,box-shadow .2s}
.ty-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(26,24,48,.1)}

/* Haftnotizen (FAQ) */
.ty-note{background:var(--wp--preset--color--karte);border:1px solid rgba(26,24,48,.08);box-shadow:0 4px 12px rgba(26,24,48,.12);transition:transform .2s}
.ty-note.is-gelb{background:#FCF3CF;border:none}
.ty-note.rot-l{transform:rotate(-.7deg)}.ty-note.rot-r{transform:rotate(.7deg)}
.ty-note:hover{transform:rotate(0) scale(1.01)}

/* Buttons — exakt wie Moodboard 2c */
.wp-block-button__link{font-family:var(--wp--preset--font-family--heading)!important;font-weight:600;font-size:16px;padding:15px 30px;border-radius:999px;transition:transform .2s,box-shadow .2s}
.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 4px 14px color-mix(in srgb,var(--wp--preset--color--gruen) 45%,transparent)}
.is-style-outline .wp-block-button__link{border:1.5px solid var(--wp--preset--color--tinte);background:transparent;color:var(--wp--preset--color--tinte);padding:14px 30px}
.is-style-outline .wp-block-button__link:hover{background:var(--wp--preset--color--tinte);color:var(--wp--preset--color--papier);box-shadow:none}

/* Play-Button pulsiert */
@keyframes ty-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--wp--preset--color--gruen) 45%,transparent)}60%{box-shadow:0 0 0 18px transparent}}
.ty-play{width:64px;height:64px;border-radius:50%;background:var(--wp--preset--color--gruen);display:flex;align-items:center;justify-content:center;animation:ty-pulse 2.6s ease infinite}

/* Navigation & Logo */
.ty-header a{text-decoration:none}
.ty-header .wp-block-navigation a{font-weight:500}
.ty-header .wp-block-navigation a:hover,.ty-header .wp-block-navigation a:focus{color:var(--wp--preset--color--violett)!important}
.ty-header.has-tinte-background-color .wp-block-navigation a:hover,.ty-header.has-tinte-background-color .wp-block-navigation a:focus{color:var(--wp--preset--color--gruen)!important}
.ty-logo img{display:block;height:48px;width:auto}

/* Zeitstrahl-Verbindungslinie */
.ty-timeline{position:relative}
.ty-timeline::before{content:"";position:absolute;top:21px;left:6%;right:6%;height:2px;background:rgba(26,24,48,.18)}
.ty-step-nr{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--wp--preset--font-family--heading);font-weight:600;position:relative}

/* Bewegung reduzieren, wenn gewünscht */
@media (prefers-reduced-motion:reduce){
  .ty-anim,.ty-pop{opacity:1;transform:none;transition:none}
  mark.ty-marker::before{animation:none;transform:scaleX(1);opacity:1}
  svg .ty-draw{stroke-dashoffset:0;transition:none}
  .ty-play{animation:none}
}

/* ——— Mobil ——— */
@media (max-width:781px){
  .ty-logo img{height:40px}
  .ty-header{padding:12px 16px}
  .ty-timeline::before{display:none}
  .ty-frame{margin-bottom:8px}
}