/* =========================================================
   T2med-Wechsel Landing — V2
   Nutzt Farbkonzept aus styles-v2.css
   Accent #007A9E · Light Blue #D7F4FA · Primary #004562
   ========================================================= */

/* ---------------------------------------------------------
   1. Hero
   --------------------------------------------------------- */
.lp-hero {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    overflow-y: visible;
    z-index: 2;
    color: var(--nw-on-dark);
    background: var(--grad-dark);
    padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3.5rem));
    padding-bottom: clamp(3.5rem, 6vw, 6rem);
    min-height: clamp(520px, 88vh, 820px);
}

.lp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--grad-dark);
}

.lp-hero__blur {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 90% 70% at 12% 18%,
            rgba(30, 136, 229, 0.22) 0%,
            transparent 58%
        ),
        radial-gradient(
            ellipse 55% 45% at 88% 12%,
            rgba(30, 136, 229, 0.1) 0%,
            transparent 52%
        ),
        radial-gradient(
            ellipse 80% 55% at 50% 108%,
            rgba(13, 71, 161, 0.55) 0%,
            transparent 62%
        );
}

.lp-hero__particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.85;
}

.lp-hero .container {
    position: relative;
    z-index: 2;
}

.lp-hero__content {
    max-width: min(100%, 68rem);
    padding-right: clamp(1.25rem, 14vw, 9rem);
}

.lp-hero__eyebrow {
    color: var(--color-accent);
}

.lp-hero__title {
    font-family: var(--font-heading);
    font-weight: var(--headline-weight-thin);
    font-size: clamp(2.35rem, 1.4rem + 3.6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0.6rem 0 0;
    color: #fff;
}

.lp-hero__title .headline-bold {
    font-weight: var(--headline-weight-bold);
}

.lp-hero__sub {
    margin: 1.5rem 0 0;
    max-width: 62ch;
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.6;
    color: var(--nw-on-dark-soft);
}

.lp-hero__actions {
    margin-top: 2.1rem;
}

.lp-hero__trust {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 2rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--nw-on-dark-soft);
}

.lp-hero__trust svg {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--color-accent);
}

.lp-hero .t2med__visual {
    top: auto;
    bottom: -14%;
    height: 86%;
    z-index: 1;
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .lp-hero .t2med__visual {
        animation: lp-hero-visual-in 2.8s cubic-bezier(0.16, 0.84, 0.24, 1) 0.35s both;
    }
}

@keyframes lp-hero-visual-in {
    from {
        transform: translateX(calc(100% + 5rem));
    }

    to {
        transform: translateX(0);
    }
}

.lp-hero .t2med__visual img {
    height: 100%;
    width: auto;
    max-width: none;
    object-position: 44% center;
}

/* ---------------------------------------------------------
   2. Praxisalltag — Tab-Navigation + Detail-Panel
   --------------------------------------------------------- */
.pain-focus {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) 1.05fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: stretch;
}

.pain-focus__nav {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
    align-self: stretch;
}

.pain-focus__tab {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--nw-line);
    border-radius: var(--radius);
    background: var(--nw-white);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.pain-focus__tab:hover:not(.is-active) {
    border-color: var(--nw-mint-soft);
    background: var(--nw-surface);
}

.pain-focus__tab.is-active {
    border-color: var(--nw-primary);
    background: var(--nw-surface);
    box-shadow: var(--shadow-soft);
}

.pain-focus__tab:focus-visible {
    outline: 2px solid var(--nw-mint);
    outline-offset: 2px;
}

.pain-focus__num {
    flex: none;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    color: var(--nw-accent);
}

.pain-focus__label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--nw-ink);
}

.pain-focus__tab.is-active .pain-focus__label {
    color: var(--nw-primary);
}

.pain-focus__stage {
    position: relative;
    min-height: clamp(240px, 28vw, 320px);
}

.pain-focus__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg);
    background: var(--grad-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-card);
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.4s var(--ease-soft),
        transform 0.4s var(--ease-soft),
        visibility 0.4s;
}

.pain-focus__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(120% 90% at 100% 0%, rgba(58, 166, 204, 0.28), transparent 55%);
    opacity: 0.65;
    pointer-events: none;
}

.pain-focus__panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.pain-focus__stage-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    color: var(--nw-accent);
    margin-bottom: 1rem;
}

.pain-focus__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
    color: #fff;
}

.pain-focus__text {
    margin: 0;
    max-width: 48ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--nw-on-dark-soft);
}

/* ---------------------------------------------------------
   3. Lösungsblock
   --------------------------------------------------------- */
.lp-solution {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.lp-solution__intro .btn {
    margin-top: 1.8rem;
}

.lp-solution__list {
    margin: 0;
}

.lp-solution__list li strong {
    color: var(--nw-ink);
}

/* ---------------------------------------------------------
   4. Prozess (5 Schritte — .step / .step__num aus Handout)
   --------------------------------------------------------- */
.lp-steps {
    grid-template-columns: repeat(5, 1fr);
}

/* ---------------------------------------------------------
   5. Trust / Stats
   --------------------------------------------------------- */
.lp-proof__stats {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* ---------------------------------------------------------
   6. Vorqualifizierungsmodul
   --------------------------------------------------------- */
.lp-qualify {
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding: clamp(1.8rem, 4vw, 3rem);
    border-radius: var(--radius-xl);
}

.section--dark .lp-qualify {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
}

.lp-qualify__head {
    text-align: center;
    margin-bottom: clamp(1.8rem, 3vw, 2.5rem);
}

.lp-qualify__head .section__intro {
    margin-inline: auto;
}

.lp-qualify__form .btn--block {
    margin-top: 0.5rem;
}

.lp-qualify__note {
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--nw-on-dark-muted);
}

.section--dark .lp-qualify .funnel-step__label {
    color: var(--nw-on-dark);
}

.section--dark .lp-qualify .funnel-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--nw-on-dark-soft);
}

.section--dark .lp-qualify .funnel-chip[aria-pressed="true"],
.section--dark .lp-qualify .funnel-chip:hover {
    background: rgba(215, 244, 250, 0.12);
    border-color: var(--nw-mint);
    color: #fff;
}

.section--dark .lp-qualify .funnel-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.section--dark .lp-qualify .funnel-input::placeholder {
    color: var(--nw-on-dark-muted);
}

.section--dark .lp-qualify .funnel-input:focus {
    border-color: var(--nw-mint);
    box-shadow: 0 0 0 4px var(--nw-mint-muted);
}

/* Mint — Interaktion (Handout) */
.funnel-chip[aria-pressed="true"],
.funnel-chip:hover {
    border-color: var(--nw-mint);
    color: var(--nw-primary);
}

.funnel-chip[aria-pressed="true"] {
    background: rgba(215, 244, 250, 0.1);
}

/* ---------------------------------------------------------
   Abschluss-CTA
   --------------------------------------------------------- */
.final-cta .cta-note {
    margin-top: 1.5rem;
    padding-top: 0;
}

/* ---------------------------------------------------------
   7. Responsiv
   --------------------------------------------------------- */
@media (max-width: 980px) {
    .lp-solution {
        grid-template-columns: 1fr;
    }

    .lp-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .pain-focus {
        grid-template-columns: 1fr;
    }

    .pain-focus__nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }

    .pain-focus__tab {
        flex: none;
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .lp-hero {
        min-height: auto;
    }

    .lp-hero__content {
        max-width: none;
        padding-right: 0;
    }

    .lp-hero .t2med__visual {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        animation: none;
        transform: none;
        height: auto;
        width: 100%;
        max-width: min(100%, 20rem);
        aspect-ratio: auto;
        margin: 2.5rem auto 0;
        overflow: visible;
        pointer-events: auto;
    }

    .lp-hero .t2med__visual img {
        position: static;
        width: 100%;
        height: auto;
        transform: none;
        will-change: auto;
    }
}

@media (max-width: 720px) {
    .lp-hero {
        padding-bottom: clamp(2.5rem, 8vw, 4rem);
    }

    .pain-focus__nav {
        grid-template-columns: 1fr;
    }

    .pain-focus__stage {
        min-height: 220px;
    }
}

@media (max-width: 560px) {
    .lp-steps {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------
   Entwicklung / Orientierung — horizontaler Pfad + Wechselpanel
   --------------------------------------------------------- */
.about-path {
    display: grid;
    gap: clamp(1.75rem, 3vw, 2.5rem);
}

.about-path__nav {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.about-path__nav::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 1.15rem;
    height: 2px;
    background: linear-gradient(90deg, var(--nw-mint), var(--nw-mint-muted));
    pointer-events: none;
}

.about-path__stop {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
}

.about-path__stop:focus-visible {
    outline: 2px solid var(--nw-mint);
    outline-offset: 4px;
    border-radius: var(--radius-lg);
}

.about-path__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--nw-primary);
    background: var(--nw-white);
    border: 2px solid var(--nw-line-strong, var(--nw-line));
    box-shadow: var(--shadow-soft);
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.about-path__stop.is-active .about-path__marker,
.about-path__stop:hover .about-path__marker {
    color: #fff;
    background: var(--grad-primary);
    border-color: transparent;
    transform: scale(1.08);
}

.about-path__name {
    font-family: var(--font-heading);
    font-weight: 650;
    font-size: 0.92rem;
    line-height: 1.25;
    color: var(--nw-ink-soft);
}

.about-path__stop.is-active .about-path__name {
    color: var(--nw-primary);
}

.about-path__stage {
    position: relative;
    min-height: 16.5rem;
}

.about-path__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-xl);
    background: var(--nw-white);
    border: 1px solid var(--nw-line);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity 0.4s var(--ease-soft),
        transform 0.4s var(--ease-soft),
        visibility 0.4s;
}

.about-path__panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.about-path__kicker {
    display: inline-block;
    margin-bottom: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nw-accent);
}

.about-path__title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.65rem);
    line-height: 1.25;
    color: var(--nw-ink);
}

.about-path__text {
    margin: 0 0 1.1rem;
    max-width: 40rem;
    color: var(--nw-ink-soft);
    line-height: 1.6;
    font-size: 1.05rem;
}

.about-path__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-path__tags li {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--nw-surface);
    border: 1px solid var(--nw-line);
    font-size: 0.82rem;
    color: var(--nw-ink-soft);
}

@media (max-width: 760px) {
    .about-path__nav {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.35rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .about-path__nav::-webkit-scrollbar {
        display: none;
    }

    .about-path__nav::before {
        display: none;
    }

    .about-path__stop {
        flex: 0 0 auto;
        min-width: 6.5rem;
        padding: 0.35rem;
    }

    .about-path__stage {
        min-height: 18rem;
    }
}

/* ---------------------------------------------------------
   Einblick in T2med: Screens-Galerie und PatMed-App
   --------------------------------------------------------- */
.lp-screens__grid {
    list-style: none;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}
.lp-screens__item figure {
    margin: 0;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.lp-screens__item figure:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}
.lp-screens__item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    background: var(--color-accent-soft);
}
.lp-screens__item figcaption {
    padding: .9rem 1.1rem 1.1rem;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--color-primary-dark);
}
.lp-screens__item figcaption strong {
    display: block;
    color: var(--color-primary);
    margin-bottom: .15rem;
}
.lp-screens__app {
    margin-top: clamp(2rem, 4vw, 3.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3.5vw, 3rem);
    overflow: hidden;
}
.lp-screens__app .eyebrow { color: var(--color-mint); }
.lp-screens__app-title {
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    line-height: 1.25;
    margin: .5rem 0 .75rem;
    color: var(--color-white);
}
.lp-screens__app-text p { margin: 0; opacity: .92; line-height: 1.6; }
.lp-screens__phones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    align-items: end;
}
.lp-screens__phones li:nth-child(2) { transform: translateY(-1rem); }
.lp-screens__phones img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55);
}
.lp-screens__note {
    margin: 1rem 0 0;
    font-size: .8rem;
    opacity: .65;
    text-align: right;
}
@media (max-width: 900px) {
    .lp-screens__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-screens__app { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .lp-screens__grid { grid-template-columns: 1fr; }
    .lp-screens__phones li:nth-child(2) { transform: none; }
}

/* Hero-Text darf auf breiten Bildschirmen nicht unter das freigestellte Hero-Bild laufen */
@media (min-width: 1101px) {
    .lp-hero:has(.pg-hero-visual) .lp-hero__sub {
        max-width: 34rem;
    }
}

/* ---------------------------------------------------------
   T2med-Seite: Feinschliff nach der Layoutprüfung (08.10.2026)
   Nur Selektoren, die ausschließlich die T2med-Seite treffen:
   .lp-hero--t2med, .lp-steps--t2med, #einblick, #lp-final-title.
   --------------------------------------------------------- */

/* Hero-Grafik: Die Geräte füllen nur rund 75 % der Bilddatei, der Rest ist transparent.
   Die Bildfläche bekommt das Seitenverhältnis der Geräte, das Bild wird um den leeren Rand
   vergrößert und verschoben. So stehen die Geräte groß und bündig an den Kanten. */
.lp-hero.lp-hero--t2med.lp-hero--t2med > .t2med__visual.t2med__visual {
    position: relative;
    aspect-ratio: 1451 / 965;
    height: auto;
    overflow: visible;
}
.lp-hero.lp-hero--t2med.lp-hero--t2med > .t2med__visual.t2med__visual img {
    position: absolute;
    left: -14.13%;
    top: -7.46%;
    width: 132.32%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: fill;
}

/* Handy: Geräte über die volle Textbreite (das Bild steht außerhalb des Containers) */
@media (max-width: 600px) {
    .lp-hero.lp-hero--t2med.lp-hero--t2med > .t2med__visual.t2med__visual {
        width: calc(100% - 2 * var(--edge));
        max-width: 26rem;
        margin: 2.5rem auto 0;
    }
}

/* Tablet: rechtsbündig mit der Textkante statt am Bildschirmrand angeschnitten */
@media (min-width: 601px) and (max-width: 900px) {
    .lp-hero.lp-hero--t2med.lp-hero--t2med > .t2med__visual.t2med__visual {
        width: min(80%, 34rem);
        margin: clamp(2rem, 5vw, 3rem) var(--edge) 0 auto;
    }
}
@media (min-width: 901px) and (max-width: 1199px) {
    /* Textspalte etwas breiter: „wechseln, mit Praxis-IT“ bleibt bei 1180 px auf einer Zeile */
    .lp-hero.lp-hero--t2med.lp-hero--t2med .lp-hero__content.lp-hero__content {
        max-width: 50rem;
    }
    .lp-hero.lp-hero--t2med.lp-hero--t2med > .t2med__visual.t2med__visual {
        width: min(66%, 38rem);
        margin: clamp(2rem, 4vw, 3rem) var(--edge) 0 auto;
    }
}

/* Desktop: Geräte neben dem Text, deutlich größer. Rechte Kante mit Abstand zum Bildschirmrand,
   auf breiten Bildschirmen bündig mit dem Menü-Button (Menüleiste max. 1520 px, Innenabstand
   --edge; die Bildspalte beginnt 18 % der Inhaltsbreite rechts der Mitte). */
@media (min-width: 1200px) {
    .lp-hero.lp-hero--t2med.lp-hero--t2med > .t2med__visual.t2med__visual {
        grid-column: media-start / full-end;
        justify-self: start;
        align-self: center;
        width: min(100% - var(--edge), 30.5rem + 0.36 * var(--edge));
        margin: 0;
    }
}

/* Deko-Leiterbahnen hinter dem Text nur noch angedeutet, außerhalb des Texts unverändert */
.lp-hero--t2med .lp-hero__particles {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) 60%, #000 80%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) 60%, #000 80%);
}
@media (min-width: 901px) and (max-width: 1199px) {
    .lp-hero--t2med .lp-hero__particles {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) calc(var(--edge) + 48rem), #000 calc(var(--edge) + 54rem));
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) calc(var(--edge) + 48rem), #000 calc(var(--edge) + 54rem));
    }
}
@media (min-width: 1200px) {
    .lp-hero--t2med .lp-hero__particles {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 38rem), rgba(0, 0, 0, 0.3) calc(50% - 34rem), rgba(0, 0, 0, 0.3) calc(50% + 9rem), #000 calc(50% + 13rem));
        mask-image: linear-gradient(90deg, #000 calc(50% - 38rem), rgba(0, 0, 0, 0.3) calc(50% - 34rem), rgba(0, 0, 0, 0.3) calc(50% + 9rem), #000 calc(50% + 13rem));
    }
}

/* Eyebrow auf dem Handy ausgewogen umbrechen statt „Karlsruhe“ allein in Zeile 2. Block statt
   inline-flex, damit „Praxis-IT“ (nobr) im Fließtext bleibt und die Leerzeichen erhalten bleiben. */
.lp-hero--t2med .lp-hero__eyebrow {
    display: block;
    text-wrap: balance;
}

/* Einblick: Kalender und Videosprechstunde sind 16:9 statt 16:10 und waren dadurch größer und
   seitlich angeschnitten. Jetzt gleiche Gerätegröße, Ober- und Unterkante wie die übrigen Mockups. */
#einblick .lp-screens__item img.lp-screens__img--kalender,
#einblick .lp-screens__item img.lp-screens__img--video {
    box-sizing: border-box;
    object-fit: contain;
    object-position: center top;
}
#einblick .lp-screens__item img.lp-screens__img--kalender {
    padding: 6.66% 2.99% 2.95%;
}
#einblick .lp-screens__item img.lp-screens__img--video {
    padding: 6.36% 4.49% 4.94%;
}
#einblick .lp-screens__item figcaption {
    text-wrap: pretty;
}

/* PatMed-App: Schatten folgt der Geräteform (vorher dunkle Rechtecke um die transparente Fläche),
   leerer Rand der Bilddateien abgeschnitten, damit die Geräte größer erscheinen. */
#einblick .lp-screens__phones img {
    aspect-ratio: 715 / 1448;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.38));
}
@media (max-width: 560px) {
    #einblick .lp-screens__phones {
        gap: 0.5rem;
    }
}

/* Ablauf: keine Verbindungslinie hinter dem letzten Schritt, im zweispaltigen Raster
   (bis 980 px) gar keine, weil sie dort ins Leere bzw. in den nächsten Kreis läuft */
.lp-steps--t2med .step:last-child::after {
    display: none;
}
@media (max-width: 980px) {
    .lp-steps--t2med .step::after {
        display: none;
    }
}

/* Vorprüfung und Abschluss-CTA auf dem Handy: Button einzeilig wie die übrigen großen Buttons */
@media (max-width: 480px) {
    .lp-qualify:has(#lp-qualify-title),
    .final-cta__card:has(> #lp-final-title) {
        padding-inline: 1.1rem;
    }
    .btn--lg[data-cta="lp-qualify-submit"],
    #lp-final-title ~ .cta-actions .btn--lg {
        padding-inline: 0.9rem;
    }
    /* Überschrift der Vorprüfung vier statt fünf Zeilen („direkt“ stand allein) */
    #lp-qualify-title {
        font-size: 1.75rem;
    }
}

/* Abschluss-CTA: Telefon und Mail ohne hängenden Trennpunkt. Desktop eine bzw. zwei saubere
   Zeilen, Handy Mail in eigener Zeile ohne Punkt. */
#lp-final-title ~ .cta-note {
    max-width: 62ch;
}
@media (max-width: 560px) {
    #lp-final-title ~ .cta-note .cta-note__sep {
        display: none;
    }
    #lp-final-title ~ .cta-note a[href^="mailto:"] {
        display: block;
        margin-top: 0.15rem;
    }
}

/* Leiterbahnen im Hero nicht hinter Logo und Menü */
.lp-hero__particles {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--nav-h) - 1.5rem), #000 calc(var(--nav-h) + 2.5rem));
    mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--nav-h) - 1.5rem), #000 calc(var(--nav-h) + 2.5rem));
}