/*
 * Startseite 2027 (Entwurf /startseite-2027.html) — Markup includes/start27.php.
 * Vorbild Otto 03.11.2026: apple.com/at (ruhige Flaechen, grosse kurze Titel,
 * wischbare Galerien, Punktleiste mit Fortschritt und Pause-Knopf).
 * Farben/Schriften aus den Tokens von kuzbari-2027.css (--kz27-*), Knoepfe
 * .k27-btn aus kuzbari-2027-kopf.css.
 */
.s27 {
    --s27-hero-h: calc(100svh - var(--k27-h, 112px) - var(--k27-thumb, 0px));
    --s27-dauer: 6s;
    --s27-glas: rgba(30, 28, 25, .42);
    font-family: var(--kz27-sans);
    color: var(--kz27-text);
}
.s27 *, .s27 *::before, .s27 *::after { box-sizing: border-box; }
.s27 img { display: block; max-width: 100%; height: auto; }
.s27 ul { margin: 0; padding: 0; list-style: none; }
.s27 li { margin: 0; padding: 0; list-style: none; }
.s27-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.s27-i { flex: none; width: 20px; height: 20px; }

/* ======================================================= Coverslider */
.s27-hero {
    position: relative;
    height: var(--s27-hero-h);
    min-height: 460px;
    max-height: 1100px;
    background: var(--kz27-dark);
    color: #fff;
    overflow: hidden;
}
.s27-hero-track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.s27-hero-track::-webkit-scrollbar { display: none; }
.s27-hero-track:focus-visible { outline: 2px solid var(--k27-gold-light, #cfae74); outline-offset: -4px; }
.s27-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.s27-slide picture, .s27-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.s27-slide::after {
    /* Lesbarkeit: dunkler Verlauf unten, wo Titel und Knoepfe stehen */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 16, 14, .72) 0%, rgba(18, 16, 14, .28) 34%, rgba(18, 16, 14, 0) 58%);
    pointer-events: none;
}
.s27-slide-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(84px, 13vh, 128px);
    z-index: 2;
    padding: 0 20px;
    text-align: center;
}
.s27-slide-k {
    margin: 0 0 12px;
    padding: 0;
    font-family: var(--kz27-display);
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 500;
    letter-spacing: .3em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 16px rgba(0, 0, 0, .35);
}
.s27-slide-h {
    margin: 0 0 22px;
    padding: 0;
    font-family: var(--kz27-display);
    font-size: clamp(27px, calc(7.4vw + 2px), 76px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 24px rgba(0, 0, 0, .25);
    text-wrap: balance;
}
.s27-slide-b {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.s27-slide-b .k27-btn { min-width: 170px; }
@media (max-width: 419px) {
    .s27-slide-b { flex-wrap: nowrap; gap: 10px; }
    .s27-slide-b .k27-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; letter-spacing: .1em; font-size: 12px; }
}

/* Punktleiste mit Fortschritt (Apple-Stil) und Pause/Play */
.s27-hero-nav {
    position: absolute;
    left: 50%;
    bottom: clamp(24px, 4.5vh, 44px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
}
.s27-hero-nav[hidden] { display: none; }
.s27-dots, .s27-play {
    background: var(--s27-glas);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
}
.s27-dots {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
}
.s27-dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: width .45s var(--k27-ease, ease);
}
.s27-dot span {
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    overflow: hidden;
    transition: width .45s var(--k27-ease, ease), background-color .2s;
}
.s27-dot:hover span { background: rgba(255, 255, 255, .85); }
.s27-dot[aria-selected="true"] { width: 60px; }
.s27-dot[aria-selected="true"] span { width: 44px; background: rgba(255, 255, 255, .32); }
.s27-dot[aria-selected="true"] span::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
    animation: s27-fuellen var(--s27-dauer) linear forwards;
}
.s27-hero.is-pause .s27-dot[aria-selected="true"] span::after { animation-play-state: paused; }
.s27-hero.is-stop .s27-dot[aria-selected="true"] span::after { animation: none; transform: scaleX(1); }
@keyframes s27-fuellen { to { transform: scaleX(1); } }
.s27-dot:focus-visible { outline: 2px solid #fff; outline-offset: -8px; border-radius: 999px; }
.s27-play {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}
.s27-play .s27-i { width: 18px; height: 18px; }
.s27-play .s27-i + .s27-i,
.s27-hero:is(.is-pause, .is-stop) .s27-play .s27-i:first-child { display: none; }
.s27-hero:is(.is-pause, .is-stop) .s27-play .s27-i + .s27-i { display: block; }
.s27-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Bildleiste unter dem Slider (gekoppelt) */
.s27-leiste {
    background: #fff;
    border-bottom: 1px solid var(--kz27-line);
}
.s27-leiste ul {
    display: flex;
    justify-content: safe center;
    gap: clamp(10px, 1.6vw, 22px);
    max-width: var(--kz27-max);
    margin: 0 auto;
    padding: 18px var(--kz27-pad) 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.s27-leiste ul::-webkit-scrollbar { display: none; }
.s27-leiste li { flex: 0 0 auto; scroll-snap-align: center; }
.s27-leiste-a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: clamp(76px, 10vw, 128px);
    color: var(--kz27-mute);
    text-decoration: none;
}
.s27-leiste-a img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 14px;
    opacity: .72;
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: opacity .25s, outline-color .25s, transform .3s var(--k27-ease, ease);
}
.s27-leiste-a span {
    font-family: var(--kz27-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.s27-leiste-a:hover img { opacity: 1; transform: translateY(-2px); }
.s27-leiste-a.is-aktiv { color: var(--kz27-ink); }
.s27-leiste-a.is-aktiv img { opacity: 1; outline-color: var(--kz27-gold); }
.s27-leiste-a:focus-visible { outline: none; }
.s27-leiste-a:focus-visible img { outline-color: var(--kz27-ink); }

/* ======================================================= Abschnitte */
.s27-sec { padding: var(--kz27-sec-y) 0; }
.s27-sec--weiss { background: #fff; }
.s27-sec--grau { background: var(--kz27-grey); }
.s27-in {
    max-width: var(--kz27-max);
    margin: 0 auto;
    padding: 0 var(--kz27-pad);
}
.s27-kopf { max-width: 760px; }
.s27-kopf .k27-kicker { margin-bottom: 16px; }
.s27-kopf .k27-kicker b { font-weight: 500; }
.s27-h {
    margin: 0 0 18px;
    padding: 0;
    font-family: var(--kz27-display);
    font-size: clamp(30px, 3.8vw, 52px);
    font-weight: 200;
    line-height: 1.08;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--kz27-ink);
    text-wrap: balance;
}
.s27-h b { font-weight: 400; }
.s27-lead {
    margin: 0;
    font-family: var(--kz27-accent);
    font-size: clamp(19px, 1.7vw, 23px);
    line-height: 1.5;
    color: var(--kz27-text);
}
.s27 p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; }
.s27 .s27-lead { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; }
.s27 .s27-finance .s27-lead { font-size: 17px; line-height: 1.7; }
.s27-claim {
    font-family: var(--kz27-accent);
    font-size: 22px !important;
    font-style: italic;
    color: var(--kz27-ink);
}
.s27-adresse { color: var(--kz27-ink); }
.s27-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0 !important;
}
.s27-knoepfe--mitte { justify-content: center; }
.s27-kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 48px;
    margin-bottom: clamp(28px, 3.6vw, 48px);
}
.s27-kopfzeile .s27-kopf { flex: 1 1 520px; }
.s27-kopfzeile > .s27-knoepfe { margin: 0 !important; flex: 0 0 auto; }

/* Text + Medium */
.s27-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}
@media (min-width: 900px) {
    .s27-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 80px); }
    .s27-split--links .s27-split-text { order: 2; }
}
.s27-video {
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .45);
}
.s27-karte-wien { width: 100%; border-radius: 18px; }

/* Wischbare Reihen (Aerzte, Karten) */
.s27-reihe {
    display: grid;
    grid-auto-flow: column;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--kz27-pad);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Reihe laeuft bis an den Rand, Inhalt bleibt in der Spalte */
    margin: 0 calc(-1 * var(--kz27-pad));
    padding: 4px var(--kz27-pad) 12px;
}
.s27-reihe::-webkit-scrollbar { display: none; }
.s27-reihe > li { scroll-snap-align: start; }
.s27-reihe--aerzte { grid-auto-columns: minmax(230px, 72%); }
@media (min-width: 700px) { .s27-reihe--aerzte { grid-auto-columns: calc((100% - 2 * var(--kz27-pad) - 3 * 20px) / 3.4); gap: 20px; } }
@media (min-width: 1100px) { .s27-reihe--aerzte { grid-auto-columns: calc((100% - 2 * var(--kz27-pad) - 3 * 20px) / 4); } }

.s27-reihe--karten { grid-auto-columns: minmax(250px, 80%); }
@media (min-width: 760px) {
    /* drei Karten: auf breiten Schirmen nebeneinander, nicht mehr wischbar */
    .s27-reihe--karten {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        overflow: visible;
        margin: 0;
        padding: 0;
    }
}

.s27-pfeile { display: flex; gap: 10px; }
.s27-pfeile[hidden] { display: none; }
@media (max-width: 699px) { .s27-pfeile { display: none; } }
.s27-pfeil {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--kz27-grey);
    color: var(--kz27-ink);
    cursor: pointer;
    transition: background-color .2s, opacity .2s;
}
.s27-pfeil:hover { background: #e6e6e4; }
.s27-pfeil:disabled { opacity: .35; cursor: default; }
.s27-pfeil:focus-visible { outline: 2px solid var(--kz27-ink); outline-offset: 2px; }

/* Arztkarten */
.s27-arzt {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    background: var(--kz27-grey);
    color: #fff;
    text-decoration: none;
}
.s27-arzt img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .6s var(--k27-ease, ease);
}
.s27-arzt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 16, 14, .78) 0%, rgba(18, 16, 14, 0) 46%);
}
.s27-arzt-text {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.s27-arzt-fach {
    font-family: var(--kz27-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--k27-gold-light, #cfae74);
}
.s27-arzt-name {
    font-family: var(--kz27-display);
    font-size: 21px;
    line-height: 1.2;
    color: #fff;
}
.s27-arzt:hover img { transform: scale(1.04); }
.s27-arzt:focus-visible { outline: 2px solid var(--kz27-ink); outline-offset: 3px; }

/* DocFinder-Auszeichnungen zentriert */
.s27-award {
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--kz27-line);
    text-align: center;
}
.s27-award p { max-width: 560px; margin: 0 auto 26px !important; color: var(--kz27-mute); }
.s27-award p b { color: var(--kz27-ink); font-weight: 500; }
.s27-award-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px clamp(14px, 2.2vw, 28px);
}
.s27-award-logos img { width: auto; height: clamp(54px, 6vw, 76px); }
@media (max-width: 699px) {
    .s27-award-logos { gap: 10px 8px; }
    .s27-award-logos img { height: 46px; }
}

/* Podcast: Styles der Startseite (kuzbari-2027.css, .kz27-home .kzh) */
.s27-podcast { padding: var(--kz27-sec-y) 0; }

/* Ratenzahlung: zentriert, gleicher Abstand oben und unten */
.s27-finance { text-align: center; }
.s27-finance .s27-kopf { margin: 0 auto; max-width: 720px; }
.s27-finance .k27-kicker { justify-content: center; }
.s27-finance .k27-kicker::after { content: ''; flex: none; width: 44px; height: 1px; background: currentColor; opacity: .8; }
.s27-finance .s27-lead { font-family: var(--kz27-sans); font-size: 17px; line-height: 1.7; }
.s27-finance .s27-knoepfe { justify-content: center; }

/* Kapitel-Karten */
.s27-karte {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    color: var(--kz27-text);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -22px rgba(0, 0, 0, .28);
    transition: transform .35s var(--k27-ease, ease), box-shadow .35s;
}
.s27-sec--weiss .s27-karte { background: var(--kz27-grey); box-shadow: none; }
.s27-karte-bild { display: block; overflow: hidden; }
.s27-karte-bild img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .6s var(--k27-ease, ease);
}
.s27-karte-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    padding: 22px 22px 24px;
}
.s27-karte-titel {
    font-family: var(--kz27-display);
    font-size: 21px;
    line-height: 1.25;
    color: var(--kz27-ink);
}
.s27-karte-text { font-size: 15px; line-height: 1.6; }
.s27-karte-mehr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    font-family: var(--kz27-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kz27-gold-text);
}
.s27-karte-mehr .s27-i { width: 16px; height: 16px; transition: transform .25s var(--k27-ease, ease); }
.s27-karte:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 22px 44px -24px rgba(0, 0, 0, .35); }
.s27-karte:hover .s27-karte-bild img { transform: scale(1.04); }
.s27-karte:hover .s27-karte-mehr .s27-i { transform: translateX(4px); }
.s27-karte:focus-visible { outline: 2px solid var(--kz27-ink); outline-offset: 3px; }

/* Natuerlichkeitsgarantie */
.s27-patienten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: clamp(28px, 3.6vw, 44px) !important;
}
@media (min-width: 760px) { .s27-patienten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.s27-patienten li { display: flex; flex-direction: column; gap: 10px; }
.s27-patienten img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.s27-patienten span { font-family: var(--kz27-display); font-size: 17px; color: var(--kz27-text); }
.s27-patienten b { font-weight: 400; color: var(--kz27-ink); }

/* Vertrauensleiste der Altseite (flickity) ohne Hellblau */
.s27-seite .flickity-wrap, .s27-seite .flickity-wrap .flickity-holder { background: #fff !important; }
.s27-seite .flickity-wrap { padding: 8px 0 var(--kz27-sec-y) !important; }

/* Handy: etwas engere Abschnitte */
@media (max-width: 699px) {
    .s27-sec, .s27-podcast { padding: 56px 0; }
    .s27-kopfzeile { margin-bottom: 24px; }
    .s27-kopfzeile > .s27-knoepfe { width: 100%; }
    .s27-kopfzeile > .s27-knoepfe .k27-btn { flex: 1 1 0; padding: 0 14px; letter-spacing: .1em; font-size: 12px; }
    .s27-knoepfe .k27-btn { white-space: normal; text-align: center; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce) {
    .s27 *, .s27 *::before, .s27 *::after { transition: none !important; }
    .s27-dot[aria-selected="true"] span::after { animation: none; transform: scaleX(1); }
}

/* Kicker im Slider am Handy einzeilig */
@media (max-width: 699px) {
    .s27-slide-k { font-size: 11px; letter-spacing: .16em; }
}