/* ==========================================================================
   KE Super Headline Widget
   Vereint Dual / Rotierend / Highlight + Badge + Hintergrund-Container.
   Klassenpräfix: ke-super-headline (Wrapper) + ke-sh-* (intern).
   ========================================================================== */

/* Wrapper — flex-column, damit das Badge (align-self) über der Überschrift
   liegt und den Inhalt nach unten drückt. text-align (Ausrichtung) wird vom
   Control gesetzt und vererbt sich auf den Headline-Text. */
.ke-super-headline {
    display: flex;
    flex-direction: column;
}

.ke-sh-link {
    text-decoration: none;
    color: inherit;
}
.ke-sh-link:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   Badge / Tag
   -------------------------------------------------------------------------- */
.ke-sh-badge {
    display: inline-block;
    align-self: flex-start;          /* „Links" (Default) */
    background-color: #6366f1;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}
.ke-sh-badge-pos-left  .ke-sh-badge { align-self: flex-start; }
.ke-sh-badge-pos-right .ke-sh-badge { align-self: flex-end; }
.ke-sh-badge-pos-full  .ke-sh-badge { align-self: stretch; display: block; text-align: left; }

/* --------------------------------------------------------------------------
   Icon · Untertitel · Trennlinie (gemeinsam, alle Modi)
   Ausrichtung folgt dem vererbten text-align (Control „Ausrichtung").
   -------------------------------------------------------------------------- */
.ke-sh-headline-icon {
    display: block;
    line-height: 1;
}
.ke-sh-headline-icon i {
    display: inline-block;
    font-size: 48px;
    color: #667eea;
}
.ke-sh-headline-icon svg {
    display: inline-block;
    width: 48px;
    height: 48px;
    fill: #667eea;
    vertical-align: middle;
}
.ke-sh-icon-pos-above { margin-bottom: 14px; }
.ke-sh-icon-pos-below { margin-top: 14px; }

.ke-sh-subheading {
    margin-top: 12px;
    color: #666666;
    line-height: 1.5;
}

.ke-sh-divider {
    display: block;
    line-height: 0;
}
/* inline-flex → Ausrichtung folgt dem vererbten text-align (links/mitte/rechts) */
.ke-sh-divider-row {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    vertical-align: middle;
}
.ke-sh-divider-line {
    display: inline-block;
    width: 80px;
    border-top: 2px solid #dddddd;
}
.ke-sh-divider-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.ke-sh-divider-icon i {
    display: inline-block;
    font-size: 24px;
    color: #667eea;
}
.ke-sh-divider-icon svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    fill: #667eea;
    vertical-align: middle;
}
.ke-sh-divider-pos-above { margin-bottom: 14px; }
.ke-sh-divider-pos-below { margin-top: 14px; }

/* ==========================================================================
   Modus: DUAL
   ========================================================================== */
.ke-sh-text {
    margin: 0;
    padding: 0;
}

/* Modus: Farb-Verlauf (durchgängige Headline) — ein Text-Span.
   box-decoration-break: clone → Background/Padding pro Zeile bei Umbruch.
   Bei Farbverlauf wird .ke-sh-gradient zu inline-block (siehe unten). */
.ke-sh-single {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Kontur / Outline — transparente Füllung, nur Strich (Controls setzen Farbe/Stärke). */
.ke-sh-single.ke-sh-outline {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #333;
    text-stroke: 2px #333;
    display: inline-block;
}

/* 3D-Tiefe — gestaffelter text-shadow-Stack, Tiefe + Farbe via CSS-Variablen. */
.ke-sh-single.ke-sh-3d {
    --ke-sh-3d-depth: 8px;
    --ke-sh-3d-color: #c7c7c7;
    text-shadow:
        calc(var(--ke-sh-3d-depth) * 0.125) calc(var(--ke-sh-3d-depth) * 0.125) 0 var(--ke-sh-3d-color),
        calc(var(--ke-sh-3d-depth) * 0.25)  calc(var(--ke-sh-3d-depth) * 0.25)  0 var(--ke-sh-3d-color),
        calc(var(--ke-sh-3d-depth) * 0.375) calc(var(--ke-sh-3d-depth) * 0.375) 0 var(--ke-sh-3d-color),
        calc(var(--ke-sh-3d-depth) * 0.5)   calc(var(--ke-sh-3d-depth) * 0.5)   0 var(--ke-sh-3d-color),
        calc(var(--ke-sh-3d-depth) * 0.625) calc(var(--ke-sh-3d-depth) * 0.625) 0 var(--ke-sh-3d-color),
        calc(var(--ke-sh-3d-depth) * 0.75)  calc(var(--ke-sh-3d-depth) * 0.75)  0 var(--ke-sh-3d-color),
        calc(var(--ke-sh-3d-depth) * 0.875) calc(var(--ke-sh-3d-depth) * 0.875) 0 var(--ke-sh-3d-color),
        var(--ke-sh-3d-depth) var(--ke-sh-3d-depth) 0 var(--ke-sh-3d-color);
}

/* Eine Zeile — natürlicher Inline-Textfluss; box-decoration-break clone für
   Highlighter-Effekte (Background/Padding pro Line). */
.ke-sh-dual-inline .ke-sh-text { display: block; }
.ke-sh-dual-inline .ke-sh-first,
.ke-sh-dual-inline .ke-sh-second,
.ke-sh-dual-inline .ke-sh-third {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Umbruch zwischen Teilen */
.ke-sh-dual-block .ke-sh-text { display: block; }
.ke-sh-dual-block .ke-sh-first,
.ke-sh-dual-block .ke-sh-second,
.ke-sh-dual-block .ke-sh-third { display: block; }

/* Gradient-Text */
.ke-super-headline .ke-sh-gradient { display: inline-block; }

/* Gradient-Teile im Block-Layout müssen block bleiben, sonst kein Umbruch
   (höhere Spezifität schlägt die inline-block-Regel darüber). */
.ke-super-headline.ke-sh-dual-block .ke-sh-gradient { display: block; }

/* Trennzeichen */
.ke-sh-separator { display: inline; }
@media (max-width: 767px) {
    .ke-sh-separator { display: none; }
}

/* ==========================================================================
   Modus: ROTIEREND / HIGHLIGHT — gemeinsamer Wrapper
   ========================================================================== */
.ke-sh-anim { display: block; }

.ke-sh-wrapper {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.ke-sh-prefix,
.ke-sh-suffix {
    display: inline;
    line-height: inherit;
}

.ke-sh-rotating {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    line-height: inherit;
    overflow: visible;
}

.ke-sh-word {
    display: inline-block;
    white-space: nowrap;
    line-height: inherit;
}

/* Cursor (Schreibmaschine) */
.ke-sh-cursor {
    display: inline-block;
    line-height: inherit;
    animation: ke-sh-cursor-blink 0.7s infinite;
}
@keyframes ke-sh-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── Wort-Animationen: Enter ─────────────────────────────────────────── */
@keyframes ke-sh-slide-up   { from { transform: translateY(100%);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ke-sh-slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ke-sh-fade       { from { opacity: 0; } to { opacity: 1; } }
@keyframes ke-sh-zoom       { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ke-sh-rotate     { from { transform: rotateX(90deg); opacity: 0; } to { transform: rotateX(0deg); opacity: 1; } }
@keyframes ke-sh-flip       { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0deg); opacity: 1; } }
@keyframes ke-sh-bounce {
    0%   { transform: translateY(100%); opacity: 0; }
    50%  { transform: translateY(-20px); opacity: 1; }
    70%  { transform: translateY(10px); }
    85%  { transform: translateY(-5px); }
    100% { transform: translateY(0); opacity: 1; }
}

/* ── Wort-Animationen: Exit ──────────────────────────────────────────── */
@keyframes ke-sh-slide-up-out   { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes ke-sh-slide-down-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%);  opacity: 0; } }
@keyframes ke-sh-fade-out       { from { opacity: 1; } to { opacity: 0; } }
@keyframes ke-sh-zoom-out       { from { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } }
@keyframes ke-sh-rotate-out     { from { transform: rotateX(0deg); opacity: 1; } to { transform: rotateX(-90deg); opacity: 0; } }
@keyframes ke-sh-flip-out       { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(-90deg); opacity: 0; } }
@keyframes ke-sh-bounce-out     { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } }

/* Enter-Klassen (vom JS gesetzt, gefixte Verdrahtung) */
.ke-sh-word.ke-sh-animating {
    animation-duration: var(--ke-sh-anim-speed, 500ms);
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}
.ke-sh-word.ke-sh-anim-slide-up   { animation-name: ke-sh-slide-up; }
.ke-sh-word.ke-sh-anim-slide-down { animation-name: ke-sh-slide-down; }
.ke-sh-word.ke-sh-anim-fade       { animation-name: ke-sh-fade; }
.ke-sh-word.ke-sh-anim-zoom       { animation-name: ke-sh-zoom; }
.ke-sh-word.ke-sh-anim-rotate     { animation-name: ke-sh-rotate; transform-origin: center bottom; perspective: 1000px; }
.ke-sh-word.ke-sh-anim-flip       { animation-name: ke-sh-flip; transform-style: preserve-3d; perspective: 1000px; }
.ke-sh-word.ke-sh-anim-bounce     { animation-name: ke-sh-bounce; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* Exit-Klassen */
.ke-sh-word.ke-sh-animating-out {
    animation-duration: var(--ke-sh-anim-speed, 500ms);
    animation-fill-mode: both;
    animation-timing-function: ease-in;
}
.ke-sh-word.ke-sh-anim-slide-up-out   { animation-name: ke-sh-slide-up-out; }
.ke-sh-word.ke-sh-anim-slide-down-out { animation-name: ke-sh-slide-down-out; }
.ke-sh-word.ke-sh-anim-fade-out       { animation-name: ke-sh-fade-out; }
.ke-sh-word.ke-sh-anim-zoom-out       { animation-name: ke-sh-zoom-out; }
.ke-sh-word.ke-sh-anim-rotate-out     { animation-name: ke-sh-rotate-out; transform-origin: center bottom; perspective: 1000px; }
.ke-sh-word.ke-sh-anim-flip-out       { animation-name: ke-sh-flip-out; transform-style: preserve-3d; perspective: 1000px; }
.ke-sh-word.ke-sh-anim-bounce-out     { animation-name: ke-sh-bounce-out; }

/* ==========================================================================
   Modus: HIGHLIGHT (SVG)
   ========================================================================== */
.ke-sh-highlight {
    position: relative;
    display: inline-block;
}
.ke-sh-highlight-text {
    position: relative;
    z-index: 1;
}
.ke-sh-highlight-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    pointer-events: none;
    z-index: 2;
}
.ke-sh-highlight.ke-sh-highlight-back  .ke-sh-highlight-svg { z-index: 0; }
.ke-sh-highlight.ke-sh-highlight-front .ke-sh-highlight-svg { z-index: 2; }

.ke-sh-highlight svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: var(--ke-primary);
}
.ke-sh-highlight svg path,
.ke-sh-highlight svg line,
.ke-sh-highlight svg ellipse {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;   /* Initial verborgen; JS animiert via transition */
}

/* Shape-spezifische Anpassungen */
.ke-sh-anim--highlighted[data-shape="circle"] .ke-sh-highlight-svg {
    width: calc(100% + 30px);
    height: calc(100% + 40px);
}
.ke-sh-anim--highlighted[data-shape="underline"] .ke-sh-highlight-svg,
.ke-sh-anim--highlighted[data-shape="curly"] .ke-sh-highlight-svg,
.ke-sh-anim--highlighted[data-shape="double_underline"] .ke-sh-highlight-svg,
.ke-sh-anim--highlighted[data-shape="underline_zigzag"] .ke-sh-highlight-svg {
    top: auto;
    bottom: -5px;
    transform: translateX(-50%);
    height: 20px;
}
.ke-sh-anim--highlighted[data-shape="double"] .ke-sh-highlight-svg {
    height: calc(100% + 30px);
}
.ke-sh-anim--highlighted[data-shape="strikethrough"] .ke-sh-highlight-svg {
    height: 10px;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Editor-Preview: SVG immer sichtbar (keine Animation) */
.elementor-editor-active .ke-sh-highlight svg path,
.elementor-editor-active .ke-sh-highlight svg line,
.elementor-editor-active .ke-sh-highlight svg ellipse {
    stroke-dashoffset: 0;
}

/* ==========================================================================
   Modus: TAG (Pill / Label-Block)
   Wrapper ist der h-Tag (block, erbt text-align → positioniert den inline-flex
   Tag). Visuelle Basis-Defaults hier, feinere Steuerung über die Controls.
   ========================================================================== */
.ke-sh-tag-wrapper {
    margin: 0;
    padding: 0;
}
.ke-sh-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #eef2ff;   /* Fallback, Control überschreibt */
    padding: 6px 14px;
    border-radius: 999px;        /* Pille */
    line-height: 1.2;
    vertical-align: middle;
    max-width: 100%;
}
.ke-sh-tag-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4f46e5;
}
.ke-sh-tag-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.ke-sh-tag-icon i { color: #4f46e5; }
.ke-sh-tag-icon svg { width: 16px; height: 16px; fill: #4f46e5; }
.ke-sh-tag-text { color: #4f46e5; font-weight: 600; }

/* ==========================================================================
   Modus: MARQUEE (Lauftext)
   Nahtlose Endlos-Schleife: JS füllt den Track mit genug Kopien und
   verdoppelt ihn, die CSS-Animation verschiebt um -50% (= ein Satz).
   ========================================================================== */
.ke-sh-marquee {
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
}
.ke-sh-marquee-track {
    display: inline-flex;
    width: max-content;
    will-change: transform;
    animation: ke-sh-marquee-scroll var(--ke-sh-mq-duration, 20s) linear infinite;
}
.ke-sh-marquee[data-direction="right"] .ke-sh-marquee-track {
    animation-direction: reverse;
}
.ke-sh-marquee[data-pause="yes"]:hover .ke-sh-marquee-track {
    animation-play-state: paused;
}
.ke-sh-marquee-item {
    white-space: nowrap;
    padding-right: 50px;   /* Fallback, Control überschreibt */
}
@keyframes ke-sh-marquee-scroll {
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ke-sh-marquee-track { animation: none; }
}

/* ==========================================================================
   Modus: TEXT-PFAD (Text entlang Kurve)
   ========================================================================== */
.ke-sh-textpath { display: block; width: 100%; }
.ke-sh-textpath svg {
    width: 100%;
    height: auto;
    overflow: visible;      /* Text darf über den Pfad hinausragen */
    display: block;
}
.ke-sh-textpath text { font-weight: 700; }
.ke-sh-textpath-line { fill: none; stroke: #dddddd; stroke-width: 2; }
.ke-sh-textpath-line--hidden { stroke: none !important; }