/*
 * Kim Callas – Ergänzungen zum YOOtheme-Style "kimcallas"
 * Nur was der Style Editor nicht abbildet: Markenelemente, Fokus/Motion, kleine Layout-Helfer.
 * Klassen werden im Builder über "CSS-Klasse" gesetzt (Präfix kc-).
 */

:root {
    --kc-accent-500: #3D6DAD;
    --kc-accent-600: #2E5888;
    --kc-focus: #1F5F9F;
    --kc-ink-strong: #18211C;
    --kc-ink-600: #4A534D;
    --kc-ink-muted: #5A625D;
    --kc-reed-500: #6F7B4F;
    --kc-reed-100: #EAEEDC;
    --kc-sky-100: #EEF4FB;
    --kc-sky-050: #EFF5FC;
    --kc-surface-warm: #F7F6F1;
    --kc-line: #DCE2DE;
    --kc-line-strong: #BCC7C1;
    --kc-yellow: #D9A525;
    --kc-error: #A33A32;
    --kc-radius-control: 12px;
    --kc-radius-card: 20px;
    --kc-radius-stage: 28px;
    --kc-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ */
/* Fokus: 3 px #1F5F9F + 2 px weißer Abstand, nie entfernen             */
/* ------------------------------------------------------------------ */

:where(a, button, input, select, textarea, [tabindex], .uk-button, .uk-navbar-nav > li > a):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px var(--kc-focus);
    border-radius: var(--kc-radius-control);
}

.uk-button:focus-visible { border-radius: 999px; }

:where(a, .uk-button, .uk-card, .uk-navbar-nav > li > a) {
    transition-duration: 140ms;
    transition-timing-function: ease-out;
}

/* ------------------------------------------------------------------ */
/* Header: aktive Seite mit 2-px-Unterstrich                           */
/* ------------------------------------------------------------------ */

.tm-header .uk-navbar-nav > li > a { position: relative; }
.tm-header .uk-navbar-right { flex-wrap: nowrap; gap: 16px; }

.tm-header .uk-navbar-nav > li.uk-active > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 24px;
    height: 2px;
    border-radius: 1px;
    background: var(--kc-accent-500);
}

.tm-header .uk-navbar-container:not(.uk-navbar-transparent) {
    border-bottom: 1px solid #E7E9E2;
}

/* Logo-Lockup: Name + Claim + "Bürgergeld 4 Life!" */
.kc-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.kc-logo__mark { width: 44px; height: 44px; flex: none; }
.kc-logo__text { display: flex; flex-direction: column; line-height: 1; }
.kc-logo__name { font-family: 'Outfit', sans-serif; font-size: 24px; color: var(--kc-ink-strong); }
.kc-logo__claim { margin-top: 5px; font: 600 11px/14px 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--kc-ink-strong); }
.kc-logo__life { margin-top: 2px; font: 600 12px/16px 'DM Sans', sans-serif; color: var(--kc-accent-600); }

@media (max-width: 959px) {
    .kc-logo__claim { display: none; }
    .kc-logo__name { font-size: 20px; }
}

/* ------------------------------------------------------------------ */
/* Markenelement 1: Wasserlinie unter einem Schlüsselwort               */
/* Verwendung: <span class="kc-wasserlinie">Am See.</span>             */
/* ------------------------------------------------------------------ */

.kc-wasserlinie {
    padding-bottom: .18em;
    background: url("../images/wasserlinie.svg") left bottom / 100% .32em no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ------------------------------------------------------------------ */
/* Markenelement 2: Schilflinie als Kapiteltrenner (max. 1× pro Seite)  */
/* Verwendung: Divider/HTML-Element mit Klasse kc-schilflinie           */
/* ------------------------------------------------------------------ */

.kc-schilflinie {
    display: block;
    height: 44px;
    margin: 0 0 48px;
    background: url("../images/schilflinie.svg") center bottom / auto 100% repeat-x;
    border: 0;
}

/* ------------------------------------------------------------------ */
/* Markenelement 3: Randnotiz im Du-Ton                                 */
/* ------------------------------------------------------------------ */

.kc-randnotiz {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    font: italic 400 15px/22px 'DM Sans', sans-serif;
    color: var(--kc-accent-600);
    transform: rotate(-3deg);
}

.kc-randnotiz::after {
    content: "";
    width: 56px;
    height: 40px;
    flex: none;
    background: url("../images/randnotiz-pfeil.svg") center / contain no-repeat;
}

/* ------------------------------------------------------------------ */
/* Sticker (max. 1 pro Seite, ≤ ±6°, nie in Formularen)                 */
/* ------------------------------------------------------------------ */

.kc-sticker {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #CBD891;
    box-shadow: 0 0 0 5px #FFFFFF, 0 12px 32px rgba(29, 48, 39, .08);
    transform: rotate(-6deg);
    color: var(--kc-ink-strong);
    text-align: center;
}

.kc-sticker > :first-child { font: 500 26px/1 'Outfit', sans-serif; }
.kc-sticker > :last-child { font: 600 10px/1.4 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------------------ */
/* Hero: lokaler Verlauf links (.94 → .48 bei 42 % → 0 bei 60 %)        */
/* Section-Klasse kc-hero-fade                                          */
/* ------------------------------------------------------------------ */

.kc-hero-fade { position: relative; }

.kc-hero-fade::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .48) 42%, rgba(255, 255, 255, 0) 60%);
}

.kc-hero-fade > * { position: relative; z-index: 1; }

@media (max-width: 959px) {
    .kc-hero-fade::before {
        background: linear-gradient(0deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, 0) 75%);
    }
}

/* Eyebrow: Versalien nur für Kapitelmarken */
.kc-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: 13px; color: var(--kc-accent-600); }
.kc-eyebrow::before { content: ""; display: inline-block; width: 32px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentColor; }
.kc-badge { background: #FFFFFF; color: var(--kc-ink-strong); font-size: 14px; padding: 6px 14px; box-shadow: 0 1px 0 var(--kc-line); }

/* ------------------------------------------------------------------ */
/* Zeitstrahl "Ein Tag am Kim Callas" (Grid-Klasse kc-timeline)         */
/* ------------------------------------------------------------------ */

.kc-timeline { position: relative; padding-top: 48px; }

.kc-timeline::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    right: 0;
    height: 1px;
    background: #B8C2BE;
}

.kc-timeline > * > .el-item { position: relative; }

.kc-timeline > * > .el-item::before {
    content: "";
    position: absolute;
    top: -41px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--kc-accent-500);
    box-shadow: 0 0 0 3px #FFFFFF;
}

.kc-timeline > * > .el-item::after {
    content: "";
    position: absolute;
    top: -27px;
    left: 50%;
    width: 1px;
    height: 24px;
    background: #B8C2BE;
}

.kc-timeline > :last-child > .el-item::before { background: var(--kc-yellow); }

@media (max-width: 959px) {
    .kc-timeline { padding-top: 0; }
    .kc-timeline::before,
    .kc-timeline > * > :first-child::before,
    .kc-timeline > * > .el-item::after { display: none; }
}

/* ------------------------------------------------------------------ */
/* Offene Grids statt Karten (Grid-Klasse kc-open)                      */
/* ------------------------------------------------------------------ */

.kc-open > * > * {
    padding-top: 28px;
    border-top: 2px solid var(--kc-line-strong);
}

.kc-facts > * + * > * { border-left: 1px solid var(--kc-line); padding-left: 24px; }

@media (max-width: 959px) {
    .kc-facts > * + * > * { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------------------------ */
/* Bewertungs-Feature                                                   */
/* ------------------------------------------------------------------ */

.kc-review-feature { background: var(--kc-sky-050); border-radius: var(--kc-radius-card); padding: 32px; }
.kc-review-feature blockquote,
.kc-review-feature .el-content { font: 300 24px/34px 'Outfit', sans-serif; color: var(--kc-ink-strong); }

/* ------------------------------------------------------------------ */
/* Footer                                                               */
/* ------------------------------------------------------------------ */

.kc-footer {
    position: relative;
    background: linear-gradient(180deg, #EEF4FB 0%, #FFFFFF 100%);
    padding-bottom: 64px;
}

.kc-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    background: url("../images/schilflinie.svg") center bottom / auto 100% repeat-x;
    opacity: .9;
    pointer-events: none;
}

.kc-footer .uk-nav-default > li > a { padding: 6px 0; font-size: 16px; color: var(--kc-ink-strong); }
.kc-footer .uk-nav-default > li > a:hover { color: var(--kc-accent-600); }

.kc-footer-bottom { font-size: 14px; color: var(--kc-ink-muted); }
.kc-footer-bottom a { color: var(--kc-ink-600); }

/* ------------------------------------------------------------------ */
/* Mobile Sticky-Bar mit Safe Area (Klasse kc-mobile-bar)               */
/* ------------------------------------------------------------------ */

.kc-mobile-bar {
    position: sticky;
    bottom: 0;
    z-index: 980;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
    background: #FFFFFF;
    border-top: 1px solid #E7E9E2;
    box-shadow: 0 -8px 24px rgba(29, 48, 39, .08);
}

@media (min-width: 960px) {
    .kc-mobile-bar { display: none; }
}

/* ------------------------------------------------------------------ */
/* Kalender-Zustände (falls Buchungskomponente UIkit-Klassen nutzt)     */
/* ------------------------------------------------------------------ */

.kc-legend-booked::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: #8A8E89;
    vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Reduced Motion                                                       */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}