/* ==========================================================================
   KE Content Box Widget
   ========================================================================== */

.ke-content-box {
    text-align: center;
    transition: var(--ke-transition);
    /* Füllt die Zelle des Widget-Wrappers. In Grid-/Flex-Containern strecken
       sich die Widget-Wrapper per Default (align-items:stretch) auf gleiche
       Zeilenhöhe; ohne height:100% blieb die .ke-content-box (Träger von
       Hintergrund/Border) auf Inhaltshöhe → Karten wirkten unterschiedlich hoch.
       Harmlos außerhalb eines Stretch-Kontexts: bei auto-hohem Wrapper rechnet
       height:100% zu auto (= Inhaltshöhe), also kein Effekt. */
    height: 100%;
    box-sizing: border-box;
}

/* ── Stil-Vorlagen (Presets, v1.1.22) ──────────────────────────────────────
   Liefern den Basis-Look. Niedrige Spezifität (0,1,0) → die manuellen
   Box-Controls (Elementor-Wrapper-Spezifität, nur bei gesetztem Wert
   ausgegeben) überschreiben jederzeit. „Standard" = keine Klasse = bisher. */
.ke-content-box--style-karte {
    background: #fff;
    border-radius: var(--ke-radius-lg);
    box-shadow: var(--ke-shadow-md);
}
.ke-content-box--style-minimal {
    background: var(--ke-gray-50);
    border-radius: var(--ke-radius-md);
}
.ke-content-box--style-outline {
    background: transparent;
    border: 1px solid var(--ke-gray-200);
    border-radius: var(--ke-radius-lg);
}
.ke-content-box--style-gradient {
    background: linear-gradient(135deg, var(--ke-primary), var(--ke-primary-dark));
    border-radius: var(--ke-radius-lg);
    box-shadow: var(--ke-shadow-md);
    color: #fff;
}
/* Gradient: heller Text-Default (Titel/Beschreibung), solange der Nutzer keine
   eigene Farbe setzt (Farb-Controls haben keinen Default → diese Regel greift). */
.ke-content-box--style-gradient .ke-content-box-title,
.ke-content-box--style-gradient .ke-content-box-description {
    color: #fff;
}
/* Glas: Look kommt aus .ke-glass (liquid-glass.css). Hier nur den Glas-Eckenradius
   (Default 16px) auf einen box-tauglichen Wert anheben — via Variable, damit kein
   border-radius-Konflikt mit .ke-glass entsteht. */
.ke-content-box--style-glas {
    --ke-glass-radius: var(--ke-radius-lg);
}

/* ── Akzentlinie — farbiger Balken via ::before ────────────────────────────
   Farbe/Dicke aus CSS-Variablen (von den Controls gesetzt). border-radius:inherit
   lässt den Balken der Box-Rundung folgen. */
.ke-content-box--accent {
    position: relative;
}
.ke-content-box--accent::before {
    content: '';
    position: absolute;
    background: var(--ke-cb-accent-color, var(--ke-primary));
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}
.ke-content-box--accent-top::before    { top: 0;    left: 0;  right: 0; height: var(--ke-cb-accent-size, 4px); }
.ke-content-box--accent-bottom::before { bottom: 0; left: 0;  right: 0; height: var(--ke-cb-accent-size, 4px); }
.ke-content-box--accent-left::before   { top: 0;    bottom: 0; left: 0; width:  var(--ke-cb-accent-size, 4px); }
.ke-content-box--accent-right::before  { top: 0;    bottom: 0; right: 0; width:  var(--ke-cb-accent-size, 4px); }

/* Icon-Position „Links"/„Rechts": Icon neben dem Text (Flex-Row).
   v1.1.21 — Klassennamen an das Render-Markup angepasst. Vorher hießen die
   Regeln .ke-content-box--layout-icon-* + .ke-content-box__icon-wrapper (BEM),
   das Render erzeugt aber .ke-content-box--icon-* + .ke-content-box-icon → die
   Selektoren matchten NIE, das Seiten-Layout war wirkungslos (alles „oben").
   Der Icon→Text-Abstand kommt aus dem „Abstand"-Control (icon_spacing,
   margin-right/left/bottom je Position). */
.ke-content-box--icon-left,
.ke-content-box--icon-right {
    display: flex;
    align-items: flex-start;
}

.ke-content-box--icon-right {
    flex-direction: row-reverse;
}

.ke-content-box--icon-left .ke-content-box-icon,
.ke-content-box--icon-right .ke-content-box-icon {
    flex-shrink: 0;
}

/* Icon-Ansicht (stacked/framed) + Form (circle/…/hexagon) jetzt generisch in
   base.css (.ke-icon--*) — geteilt mit ke-super-icon. Siehe v1.1.19. */

/* Emoji-Icon (icon_type=emoji): <img> aus kajinga-libs, Größe via icon_size-
   Selektor (greift auf .ke-content-box-icon img).
   inline-block (NICHT block): folgt so der „Ausrichtung" (text-align des
   Wrappers) genau wie das inline-<svg> der FA-Icons. Mit block blieb das Emoji
   immer linksbündig, während FA zentriert war. */
.ke-content-box-icon-img {
    display: inline-block;
    object-fit: contain;
}

.ke-content-box__title {
    margin: 0 0 15px;
    font-size: 1.5rem;
    line-height: 1.3;
}

.ke-content-box__description {
    margin: 0 0 20px;
    color: var(--ke-text-light);
    line-height: 1.6;
}

.ke-content-box__button {
    display: inline-flex;
    align-items: center;
    gap: var(--ke-space-2);
    padding: var(--ke-space-3) var(--ke-space-6);
    background: var(--ke-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--ke-radius-sm);
    font-weight: 600;
    transition: var(--ke-transition);
}

.ke-content-box__button:hover {
    background: var(--ke-primary-dark);
}


/* ══ Phase 2: Reicherer Inhalt (v1.1.23) ═══════════════════════════════════
   Badge · Untertitel · Feature-Liste · zweiter Button. Buttons-Wrapper und
   Feature-Liste sind inline-flex → folgen der „Ausrichtung" (text-align des
   Inhaltsblocks), bleiben aber intern links/zeilenweise. */

/* ── Badge ── */
.ke-content-box-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    background: var(--ke-primary);
    color: #fff;
    border-radius: 4px;
}
/* Badge im Fluss (über dem Titel) */
.ke-content-box-content > .ke-content-box-badge {
    margin-bottom: 12px;
}
/* Badge in der Ecke (absolut am .ke-content-box) */
.ke-content-box-badge--corner {
    position: absolute;
    top: 12px;
    z-index: 2;
    margin: 0;
}
.ke-content-box-badge--top-right { right: 12px; }
.ke-content-box-badge--top-left  { left: 12px; }

/* ── Untertitel / Eyebrow ── */
.ke-content-box-subtitle {
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ke-primary);
    line-height: 1.4;
}
.ke-content-box-subtitle--above { margin-bottom: 6px; }
.ke-content-box-subtitle--below { margin-top: 6px; }

/* ── Feature-Liste ── */
.ke-content-box-features {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: inline-flex;       /* folgt der Ausrichtung, intern linksbündig */
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.ke-content-box-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ke-content-box-feature-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ke-primary);
    line-height: 1.4;
}
.ke-content-box-feature-icon svg { width: 1em; height: 1em; fill: currentColor; }
.ke-content-box-feature-icon i   { font-size: inherit; }

/* ── Buttons-Wrapper (Button 1 + 2) ── */
.ke-content-box-buttons {
    display: inline-flex;       /* folgt der Ausrichtung */
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ── Sekundär-Button (Button 2) — Default-Look, von Controls überschreibbar ── */
.ke-content-box-button--secondary {
    background: transparent;
    color: var(--ke-primary);
    border: 2px solid var(--ke-primary);
}

/* ══ Phase 3: Hover & Interaktion (v1.1.24) ════════════════════════════════
   Reine CSS-Effekte. Animationen hinter prefers-reduced-motion. */

/* ── Box-Hover (vorher hatten ke-hover-* KEIN CSS → wirkungslos) ── */
.ke-content-box.ke-hover-float:hover  { transform: translateY(-8px); }
.ke-content-box.ke-hover-scale:hover  { transform: scale(1.03); }
.ke-content-box.ke-hover-shadow:hover { box-shadow: var(--ke-shadow-lg); }
.ke-content-box.ke-hover-glow:hover   { box-shadow: 0 0 24px var(--ke-cb-hover-color, var(--ke-primary)); }
.ke-content-box.ke-hover-border       { border: 2px solid transparent; }
.ke-content-box.ke-hover-border:hover { border-color: var(--ke-cb-hover-color, var(--ke-primary)); }

/* ── Icon-Hover-Animationen ── */
.ke-content-box-icon.ke-icon-anim-float,
.ke-content-box-icon.ke-icon-anim-rotate { transition: transform var(--ke-transition); }
@media (prefers-reduced-motion: no-preference) {
    .ke-content-box:hover .ke-icon-anim-float  { transform: translateY(-6px); }
    .ke-content-box:hover .ke-icon-anim-rotate { transform: rotate(18deg); }
    .ke-content-box:hover .ke-icon-anim-pulse  { animation: ke-social-pulse .6s ease; }
    .ke-content-box:hover .ke-icon-anim-bounce { animation: ke-cb-icon-bounce .6s ease; }
    .ke-content-box:hover .ke-icon-anim-shake  { animation: ke-cb-shake .5s ease; }
}
@keyframes ke-cb-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
@keyframes ke-cb-icon-bounce {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-8px); }
    50%      { transform: translateY(0); }
    70%      { transform: translateY(-4px); }
}

/* ── Reveal beim Hover (nur Frontend; im Editor via :not(--editor) sichtbar) ── */
@media (prefers-reduced-motion: no-preference) {
    .ke-content-box.ke-reveal-button:not(.ke-content-box--editor) .ke-content-box-buttons,
    .ke-content-box.ke-reveal-description:not(.ke-content-box--editor) .ke-content-box-description {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity var(--ke-transition), transform var(--ke-transition);
    }
    .ke-content-box.ke-reveal-button:not(.ke-content-box--editor):hover .ke-content-box-buttons,
    .ke-content-box.ke-reveal-description:not(.ke-content-box--editor):hover .ke-content-box-description {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══ Phase 4: Layout & Praxis (v1.1.25) ════════════════════════════════════ */

/* ── Button unten andocken (gleich hohe Karten im Grid) ──
   Nur bei Icon-Position „Oben" (gestapelt); bei Links/Rechts bleibt die Flex-Row. */
.ke-content-box--pin-bottom.ke-content-box--icon-top {
    display: flex;
    flex-direction: column;
}
.ke-content-box--pin-bottom.ke-content-box--icon-top .ke-content-box-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Ausrichtung im Flex-Modus aus der „Ausrichtung" (--ke-cb-items = start/center/end). */
    align-items: var(--ke-cb-items, center);
}
.ke-content-box--pin-bottom.ke-content-box--icon-top .ke-content-box-buttons {
    margin-top: auto;
}

/* ── Vertikale Ausrichtung (Icon-Position Links/Rechts, Flex-Zeile) ──
   Höhere Spezifität (0,2,0) als .ke-content-box--icon-left (align-items:flex-start). */
.ke-content-box--icon-left.ke-content-box--valign-center,
.ke-content-box--icon-right.ke-content-box--valign-center { align-items: center; }
.ke-content-box--icon-left.ke-content-box--valign-bottom,
.ke-content-box--icon-right.ke-content-box--valign-bottom { align-items: flex-end; }