/* =========================================================
   Praxisgründung & Neubezug Landing — V2
   Baut auf landing-t2med-v2.css / styles-v2.css auf
   Accent #007A9E · Light Blue #D7F4FA · Primary #004562
   ========================================================= */

/* ---------------------------------------------------------
   Hero — Neugruendung_hero (T2med-Visual-Pattern)
   --------------------------------------------------------- */
.lp-hero--pg .pg-hero-visual {
    top: auto;
    bottom: -10%;
    height: 88%;
    aspect-ratio: 1672 / 941;
    width: auto;
    max-width: min(58vw, 42rem);
    z-index: 1;
}

.lp-hero--pg .pg-hero-visual img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: center right;
}

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

.lp-hero--pg .lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

@media (max-width: 900px) {
    .lp-hero--pg .pg-hero-visual {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        animation: none;
        transform: none;
        height: auto;
        width: 100%;
        max-width: min(100%, 28rem);
        aspect-ratio: 1672 / 941;
        margin: 2.5rem auto 0;
        overflow: visible;
        pointer-events: auto;
    }

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

/* ---------------------------------------------------------
   Leistungs-Bento (8 Karten, 1 Feature)
   --------------------------------------------------------- */
.pg-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.9rem, 1.6vw, 1.25rem);
}

.pg-bento .card {
    margin: 0;
}

.pg-bento .card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: var(--nw-accent);
    font-weight: 650;
    text-decoration: none;
}

.pg-bento .card__link:hover {
    color: #fff;
}

.pg-bento .card__link svg {
    width: 16px;
    height: 16px;
}

.section--dark .pg-bento .card__text a {
    color: var(--nw-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.section--dark .pg-bento .card__text a:hover {
    color: #fff;
}

/* Bei 3er-Raster: Linie am Zeilenende innerhalb der Kachel halten */
.lp-steps--6 .step:nth-child(3n)::after {
    width: calc(100% - 58px - 1rem);
}

/* ---------------------------------------------------------
   Planung mit Gewerken — Split + Foto + Callout-Kachel
   --------------------------------------------------------- */
.pg-planning {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.pg-planning__visual {
    position: relative;
    margin-right: clamp(0.85rem, 2.8vw, 1.85rem);
    margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}

.pg-planning__media {
    margin: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--nw-line);
    box-shadow: var(--shadow-soft);
    aspect-ratio: 4 / 3;
    background: var(--nw-surface);
}

.pg-planning__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg-planning__checklist {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.pg-planning__checklist li {
    position: relative;
    padding-left: 1.55rem;
    color: var(--nw-ink-soft);
    line-height: 1.5;
}

.pg-planning__checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--nw-accent);
    box-shadow: 0 0 0 3px var(--nw-mint-muted);
}

.pg-planning__callout {
    position: absolute;
    z-index: 2;
    right: clamp(-1.25rem, -3vw, -0.7rem);
    top: 78%;
    width: min(90%, 21.5rem);
    padding: 1.2rem 1.3rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--nw-accent-soft);
    border: 1px solid var(--nw-line-strong);
    box-shadow: var(--shadow-card);
}

.pg-planning__callout strong {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--nw-primary);
    font-family: var(--font-heading);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
    line-height: 1.35;
}

.pg-planning__callout p {
    margin: 0;
    color: var(--nw-ink-soft);
    line-height: 1.55;
    font-size: 0.95rem;
}

/* ---------------------------------------------------------
   Prozess — 6 Schritte
   --------------------------------------------------------- */
.lp-steps--6 {
    grid-template-columns: repeat(3, 1fr);
}

/* ---------------------------------------------------------
   Checklisten-Teaser
   --------------------------------------------------------- */
.pg-checklist {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.pg-checklist__preview {
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.pg-checklist__preview li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--nw-on-dark-soft);
    line-height: 1.45;
}

.pg-checklist__preview svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    color: var(--nw-accent);
}

.pg-checklist__panel {
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--radius-xl);
    background: var(--nw-surface-card);
    border: 1px solid var(--nw-line);
    box-shadow: var(--shadow-card);
}

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

.pg-checklist__panel h3 {
    margin: 0 0 0.7rem;
    color: var(--nw-ink);
    font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem);
}

.pg-checklist__panel p {
    margin: 0 0 1.35rem;
    color: var(--nw-ink-soft);
    line-height: 1.55;
}

.pg-checklist__panel .btn {
    margin-bottom: 20px;
}

.pg-checklist__note {
    margin: 0;
    font-size: 0.88rem;
    color: var(--nw-ink-muted);
}

/* ---------------------------------------------------------
   Case-/Trust-Placeholder (ohne erfundene Referenzen)
   --------------------------------------------------------- */
.pg-case {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

.pg-case__visual {
    margin: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--nw-line);
    min-height: 16rem;
    background: var(--nw-surface);
}

.pg-case__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg-case__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--radius-xl);
    border: 1px solid var(--nw-line);
    background: var(--nw-white);
    box-shadow: var(--shadow-soft);
}

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

.pg-case__title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.2rem, 1rem + 0.55vw, 1.5rem);
}

.pg-case__text {
    margin: 0;
    color: var(--nw-ink-soft);
    line-height: 1.6;
}

.pg-case__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

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

.pg-case__meta a {
    color: inherit;
    text-decoration: none;
    font-weight: 650;
}

.pg-case__meta a:hover {
    color: var(--nw-primary);
}

/* ---------------------------------------------------------
   Responsiv
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    .pg-bento {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 980px) {
    .pg-planning,
    .pg-checklist,
    .pg-case {
        grid-template-columns: 1fr;
    }

    .pg-planning__visual {
        margin-right: 0.85rem;
        margin-bottom: 2.75rem;
        max-width: 36rem;
    }

    .pg-planning__callout {
        right: -0.55rem;
        top: 80%;
        width: min(92%, 21rem);
    }

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

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

    .lp-steps--6 {
        grid-template-columns: 1fr;
    }

    .pg-planning__visual {
        margin-right: 0;
        margin-bottom: 0;
    }

    .pg-planning__callout {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        margin-top: -1.75rem;
    }

    .lp-hero--pg .lp-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .lp-hero--pg .lp-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ---------------------------------------------------------
   Responsive-Korrekturen 15.09.2026
   --------------------------------------------------------- */
/* Hero-Grafik der Landingpages: höhenbasierte Box mit max-width schnitt das Bild am
   rechten Rand ab. Jetzt breitenbasiert, Bild vollständig sichtbar. */
@media (min-width: 901px) {
    .lp-hero--pg .pg-hero-visual {
        height: auto;
        aspect-ratio: auto;
        width: min(50vw, 42rem);
        max-width: none;
        bottom: -6%;
    }
    .lp-hero--pg .pg-hero-visual img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
}


/* ---------------------------------------------------------
   Leistungsseiten: Feinschliff nach der Layoutprüfung (08.10.2026)
   Gilt nur für Praxisgründung, Praxisübernahme und Softwarewechsel.
   Diese Datei laden auch Über uns, Karriere und Wissen, deshalb sind
   alle Regeln über die IDs der Leistungsseiten begrenzt.
   --------------------------------------------------------- */

/* Hero: dünner und fetter Teil der H1 immer in eigenen Zeilen, Vertrauenszeile ohne Einzelwort */
:is(#hero[aria-labelledby="pg-hero-title"], .lp-hero--po, .lp-hero--psw) .lp-hero__title .headline-bold {
    display: block;
}

:is(#hero[aria-labelledby="pg-hero-title"], .lp-hero--po, .lp-hero--psw) .lp-hero__trust {
    text-wrap: balance;
}

/* Leiterbahnen im Hero: oben in Menühöhe ausblenden, damit keine Linie oder kein Knoten
   an Logo, Menü oder Button stößt */
:is(#hero[aria-labelledby="pg-hero-title"], .lp-hero--po, .lp-hero--psw) .lp-hero__particles {
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--nav-h) - 1.25rem), #000 calc(var(--nav-h) + 3rem));
    mask-image: linear-gradient(to bottom, transparent calc(var(--nav-h) - 1.25rem), #000 calc(var(--nav-h) + 3rem));
}

/* Ablauf: Verbindungslinie nur zwischen zwei Schritten einer Reihe, nicht hinter dem letzten */
@media (min-width: 981px) {
    :is([aria-labelledby="pg-process-title"], [aria-labelledby="po-process-title"], [aria-labelledby="psw-process-title"]) .lp-steps--6 .step:is(:nth-child(3n), :last-child)::after {
        display: none;
    }
}

/* Ablauf: Beschreibungen einer Reihe starten auf einer Linie, auch wenn ein Titel zweizeilig ist */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 561px) {
        :is([aria-labelledby="pg-process-title"], [aria-labelledby="po-process-title"], [aria-labelledby="psw-process-title"]) .lp-steps--6 .step {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
            row-gap: 0;
            align-content: start;
        }
    }
}

/* Wechselpanel (Zeitplan, Praxisteam): Karte wächst mit dem Inhalt statt ihn abzuschneiden.
   Alle Panels liegen in derselben Rasterzelle, die Höhe richtet sich nach dem längsten. */
:is([aria-labelledby="pg-timeline-title"], [aria-labelledby="psw-team-title"]) .about-path__stage {
    display: grid;
    min-height: 0;
}

:is([aria-labelledby="pg-timeline-title"], [aria-labelledby="psw-team-title"]) .about-path__panel {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
}

/* Desktop: Text links, Schlagworte rechts, damit die breite Karte gefüllt ist */
@media (min-width: 901px) {
    :is([aria-labelledby="pg-timeline-title"], [aria-labelledby="psw-team-title"]) .about-path__panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
        column-gap: clamp(2rem, 4vw, 4rem);
        align-content: center;
        padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3rem);
    }

    :is([aria-labelledby="pg-timeline-title"], [aria-labelledby="psw-team-title"]) .about-path__panel > * {
        grid-column: 1;
    }

    :is([aria-labelledby="pg-timeline-title"], [aria-labelledby="psw-team-title"]) .about-path__text {
        margin-bottom: 0;
    }

    :is([aria-labelledby="pg-timeline-title"], [aria-labelledby="psw-team-title"]) .about-path__panel > .about-path__tags {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        align-content: center;
        gap: 0.5rem;
        padding: 0.5rem 0 0.5rem clamp(1.5rem, 3vw, 2.5rem);
        border-left: 1px solid var(--nw-line);
    }
}

/* Zeitplan mobil: vier Stationen passen nicht nebeneinander, statt angeschnittener
   Beschriftung zwei mal zwei Schaltflächen ohne seitliches Scrollen */
@media (max-width: 560px) {
    [aria-labelledby="pg-timeline-title"] .about-path__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        overflow: visible;
        padding-bottom: 0;
    }

    [aria-labelledby="pg-timeline-title"] .about-path__stop {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.6rem;
        min-width: 0;
        padding: 0.45rem 0.7rem 0.45rem 0.45rem;
        border: 1px solid var(--nw-line);
        border-radius: 999px;
        background: var(--nw-white);
        text-align: left;
    }

    [aria-labelledby="pg-timeline-title"] .about-path__stop.is-active {
        border-color: var(--nw-line-strong, var(--nw-line));
    }

    [aria-labelledby="pg-timeline-title"] .about-path__marker {
        flex: none;
        width: 2rem;
        height: 2rem;
    }

    [aria-labelledby="pg-timeline-title"] .about-path__stop.is-active .about-path__marker,
    [aria-labelledby="pg-timeline-title"] .about-path__stop:hover .about-path__marker {
        transform: none;
    }

    [aria-labelledby="pg-timeline-title"] .about-path__name {
        font-size: 0.85rem;
    }
}

/* Kennzahlen mobil: kompakte Zeilen mit Zahl links statt drei hoher Blöcke untereinander */
@media (max-width: 640px) {
    :is([aria-labelledby="pg-trust-title"], [aria-labelledby="po-trust-title"]) .stat-row {
        gap: 0.6rem;
        max-width: 24rem;
        margin-inline: auto;
    }

    :is([aria-labelledby="pg-trust-title"], [aria-labelledby="po-trust-title"]) .stat {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: center;
        gap: 0.9rem;
        padding: 0.85rem 1.15rem;
        text-align: left;
        background: var(--nw-white);
        border: 1px solid var(--nw-line);
    }

    :is([aria-labelledby="pg-trust-title"], [aria-labelledby="po-trust-title"]) .stat__num {
        font-size: 1.85rem;
        text-align: center;
    }

    :is([aria-labelledby="pg-trust-title"], [aria-labelledby="po-trust-title"]) .stat__label {
        margin: 0;
        line-height: 1.4;
    }
}

/* Infobox am Bild: bewusster Versatz, rechts bündig mit der Inhaltskante statt knapp daneben */
@media (min-width: 981px) {
    .pg-planning__visual {
        margin-right: 2rem;
    }

    .pg-planning__callout {
        right: -2rem;
    }
}

@media (min-width: 561px) and (max-width: 980px) {
    .pg-planning__visual {
        margin-right: 1.25rem;
    }

    .pg-planning__callout {
        right: -1.25rem;
    }
}

/* Projekterfahrung: Referenzen als eigener Textlink unter den Info-Schlagworten */
.pg-case__link {
    align-self: flex-start;
    margin-top: 1.1rem;
    font-size: 0.95rem;
    text-decoration: none;
}

/* Wissen: Titel einer Reihe gleich hoch, die Teaser beginnen auf einer Linie
   (bis 900 px stehen die Karten untereinander, dort ohne Mindesthöhe) */
@media (min-width: 901px) {
    :is([aria-labelledby="pg-wissen-title"], [aria-labelledby="po-wissen-title"], [aria-labelledby="psw-wissen-title"]) .wissen-card__title {
        min-height: 2lh;
    }
}

/* Langes Kompositum (KBV-IT-Sicherheitsrichtlinie) bleibt ganz, solange es in die Zeile passt.
   Ausgewogener Umbruch würde die weiche Trennstelle vorziehen, deshalb hier normal umbrechen. */
:is([aria-labelledby="pg-wissen-title"], [aria-labelledby="po-wissen-title"], [aria-labelledby="psw-wissen-title"]) .wissen-card__title:has(> .nobr) {
    text-wrap: wrap;
}

/* Kurze Texte ohne Einzelwort in der letzten Zeile */
:is([aria-labelledby="pg-faq-title"], [aria-labelledby="po-faq-title"], [aria-labelledby="psw-faq-title"]) .faq__trigger,
:is([aria-labelledby^="pg-"], [aria-labelledby^="po-"], [aria-labelledby^="psw-"]) .section__head--center .section__intro {
    text-wrap: balance;
}

.pg-checklist__note,
:is([aria-labelledby="pg-qualify-title"], [aria-labelledby="po-qualify-title"], [aria-labelledby="psw-qualify-title"]) .lp-qualify__note,
:is([aria-labelledby="pg-final-title"], [aria-labelledby="po-final-title"], [aria-labelledby="psw-final-title"]) .cta-note {
    text-wrap: balance;
}

/* Abschluss: Kontaktweg und Querverweise je in eigener Zeile statt mit Trennpunkt umbrochen */
.cta-note__item {
    display: block;
}

.cta-note__item + .cta-note__item {
    margin-top: 0.3rem;
}