@charset "UTF-8";

/*
 * Hublify custom stylesheet
 *
 * @since: 14.12.2021
*/

/* ====================================================================
   Barlow Semi Condensed (Figma-Redesign, 17.09.2026)
   Selbst gehostet statt Google Fonts CDN -- wie Bootstrap im Layout
   ("lokal vorgehalten, kein CDN, wegen Consent/CCM19"), siehe
   layout--base.html.twig. Dateien: SIL Open Font License (OFL.txt liegt
   neben den .ttf-Dateien). Nur die vier tatsaechlich verwendeten Schnitte.
   ==================================================================== */

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed/BarlowSemiCondensed-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed/BarlowSemiCondensed-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed/BarlowSemiCondensed-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed/BarlowSemiCondensed-Bold.ttf') format('truetype');
}

.hfy-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    margin: -1rem .25rem 0 0;
}

.hfy-icon i {
    font-size: .8rem; line-height: 1.5rem;
}

.hfy-merchant-avatar {
    width: 92px;
    height: 92px;
    object-fit: contain;
}

.hfy-product-image {
    width: 56px; height: 56px;
    object-fit: contain;
}

/* Autoren-Avatare der Blog-Listen kommen aus hublify.image().render_picture()
   und stecken daher in einem <picture>. Das Theme bemasst nur das <img>
   (height: 100%) -- ohne Hoehe am Wrapper bliebe davon nichts uebrig. */
.blog-entry-author-ava picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hfy-point {
    display: inline-block;
    width: 8px; height: 8px;
    margin: 0 4px 1px 0;
    border-radius: 50%;
}

.badge {
    padding: 4px 8px 3px;
}

ul.unstyled {
    list-style: none;
    padding-left: 0;
}

p:last-child {
    margin-bottom: 0;
}

table.simple tr:first-child,
table.simple th {
    padding-top: 0 !important;
}

table.simple th:first-child,
table.simple td:first-child {
    padding-left: 0;
}

table.simple th:last-child,
table.simple td:last-child {
    padding-right: 0;
}

/* ====================================================================
   Navbar: aktiver / geoeffneter Menuepunkt
   Verlagert aus dem Inline-<style> in layout--base.html.twig (01.09.2026)
   ==================================================================== */

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link i,
.navbar-light .navbar-nav .nav-link.active i {
    color: #fff !important;
}

/* ====================================================================
   Header (Figma-Redesign 17.09.2026)
   https://www.figma.com/design/BevDlfeYh84OMjweJMvC43/praxisdienst-copy
   node-id 1:964 (logged-in) / 1:2005 (logged-out)

   Feste Marken-/UI-Farben aus dem Figma-Designsystem -- bewusst getrennt von
   den je Zielgruppe umschaltbaren --ppk-primary / --ppk-secondary Properties
   aus _comp--zielgruppe-branding.html.twig. Die Kopfzeile selbst ist Teil der
   Markenidentitaet und wechselt NICHT je Zielgruppe.
   ==================================================================== */

:root {
    --ppk-header-brand: #14757d;
    --ppk-header-dark: #003e46;
    --ppk-header-light: #1fb3c1;
    --ppk-header-blue: #35dceb;
    --ppk-header-neutral-100: #ffffff;
    --ppk-header-neutral-200: #ededed;
    --ppk-header-neutral-300: #cdcdcd;
    --ppk-header-neutral-400: #787b7d;
    --ppk-header-neutral-600: #181f24;
    /* Formular-Feedback (Atoms, 17.09.2026) -- "Success" ist im Design
       bewusst blau, nicht gruen; siehe Formular-Input-Field-Atom. */
    --ppk-semantic-red: #ff6b6b;
    --ppk-semantic-blue: #276ff5;
}

.ppk-header {
    background: var(--ppk-header-neutral-100);
    padding: 16px clamp(16px, 5vw, 96px);
}

.ppk-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    max-width: 1248px;
    margin: 0 auto;
}

.ppk-header__brand-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

.ppk-header__logo {
    display: block;
    line-height: 0;
}

.ppk-header__logo img {
    display: block;
    height: 64px;
    width: auto;
}

.ppk-header__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.ppk-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ppk-header-brand);
    text-decoration: none;
    white-space: nowrap;
}

/* Unterstrichen wird die AKTUELL geoeffnete Seite, nicht fest der erste
   Eintrag. Das Figma-Artboard zeigt die Unterstreichung an "Startseite", weil
   dort die Startseite gerendert ist -- es ist der Aktiv-Zustand, kein
   Home-Sonderfall. Welcher Eintrag aktiv ist, entscheidet
   _block--navbar-2-levels.html.twig. */

.ppk-nav-item--active {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ppk-nav-item__icon {
    width: 14px;
    height: 15px;
}

.ppk-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- Suche: klappt vom reinen Icon auf ein Eingabefeld auf -------------- */

.ppk-search__field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 48px;
    height: 45px;
    padding: 8px 12px;
    border-radius: 2px;
    background: transparent;
    cursor: text;
    transition: width .2s ease, background-color .2s ease;
}

.ppk-search__field:focus-within {
    width: 260px;
    background: var(--ppk-header-neutral-200);
}

.ppk-search__icon {
    flex: 0 0 auto;
    width: 19px;
    height: 24px;
    cursor: pointer;
}

.ppk-search__input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 14px;
    color: var(--ppk-header-neutral-600);
}

.ppk-search__field:focus-within .ppk-search__input {
    width: auto;
}

.ppk-header__divider {
    width: 1px;
    height: 40px;
    background: var(--ppk-header-neutral-300);
}

/* --- Warenkorb ----------------------------------------------------------- */

.ppk-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: var(--ppk-header-brand);
}

.ppk-cart__badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 13px;
    height: 13px;
    padding: 0 2px;
    border-radius: 50%;
    background: var(--ppk-header-light);
    color: var(--ppk-header-neutral-100);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
}

/* ====================================================================
   Atoms: Buttons (Figma-Redesign, erweitert 17.09.2026 fuer Login/Registrierung)
   https://www.figma.com/design/BevDlfeYh84OMjweJMvC43/praxisdienst-copy?node-id=2-3643

   Nicht ueber .btn-primary (das folgt --ppk-primary der Zielgruppe) --
   diese Buttons tragen bewusst die feste Marken-Gradient-Farbe aus dem
   Designsystem, unabhaengig vom Zielgruppen-Branding.

   Diese Klassen sind die neuen Standard-Buttons fuer NEU gebaute/restylte
   Bereiche (Header, Footer, Login, Registrierung). Die ca. 100 bestehenden
   Bootstrap-.btn-primary-Stellen im uebrigen Shop sind davon NICHT betroffen
   -- das waere eine eigene, separat zu planende Migration (siehe README.md § Offene Punkte).
   ==================================================================== */

.ppk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1px solid transparent;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.ppk-btn img,
.ppk-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.ppk-btn--lg {
    padding: 12px 20px;
    font-size: 20px;
    letter-spacing: 1.6px;
}

.ppk-btn--lg img,
.ppk-btn--lg svg {
    width: 24px;
    height: 24px;
}

/* Primary: dunkles Gradient (Standard) */

.ppk-btn--primary {
    background: linear-gradient(90deg, var(--ppk-header-brand), var(--ppk-header-dark));
    color: var(--ppk-header-neutral-100);
}

.ppk-btn--primary:hover,
.ppk-btn--primary:focus-visible {
    background: var(--ppk-header-dark);
    color: var(--ppk-header-neutral-100);
}

.ppk-btn--primary:active {
    background: var(--ppk-header-brand);
    color: var(--ppk-header-neutral-100);
    box-shadow: inset 0 0 20px rgba(0, 62, 70, 0.5);
}

/* Primary: helles Gradient (z.B. "Anmelden", "Konto beantragen") */

.ppk-btn--primary-light {
    background: linear-gradient(90deg, var(--ppk-header-blue), var(--ppk-header-light));
    color: var(--ppk-header-neutral-100);
}

.ppk-btn--primary-light:hover,
.ppk-btn--primary-light:focus-visible {
    background: var(--ppk-header-light);
    color: var(--ppk-header-neutral-100);
}

.ppk-btn--primary-light:active {
    background: var(--ppk-header-light);
    color: var(--ppk-header-neutral-100);
    box-shadow: inset 0 0 20px rgba(20, 117, 125, 0.5);
}

/* Secondary: nur Rahmen, drei Farbvarianten */

.ppk-btn--outline {
    border-color: var(--ppk-header-light);
    color: var(--ppk-header-light);
    background: transparent;
}

.ppk-btn--outline:hover,
.ppk-btn--outline:focus-visible {
    background: rgba(31, 179, 193, 0.1);
}

.ppk-btn--outline:active {
    background: rgba(31, 179, 193, 0.1);
    box-shadow: inset 0 0 20px rgba(20, 117, 125, 0.5);
}

.ppk-btn--outline-brand {
    border-color: var(--ppk-header-brand);
    color: var(--ppk-header-brand);
    background: transparent;
}

.ppk-btn--outline-brand:hover,
.ppk-btn--outline-brand:focus-visible {
    background: rgba(20, 117, 125, 0.1);
}

.ppk-btn--outline-brand:active {
    background: rgba(20, 117, 125, 0.1);
    box-shadow: inset 0 0 20px rgba(20, 117, 125, 0.5);
}

.ppk-btn--outline-white {
    border-color: var(--ppk-header-neutral-100);
    color: var(--ppk-header-neutral-100);
    background: transparent;
}

.ppk-btn--outline-white:hover,
.ppk-btn--outline-white:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

/* Text-only: kein Rahmen/Hintergrund, nur Text + optionales Icon */

.ppk-btn--text {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ppk-header-light);
}

.ppk-btn--text:hover,
.ppk-btn--text:focus-visible {
    color: var(--ppk-header-brand);
}

.ppk-btn--text-brand {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ppk-header-brand);
}

.ppk-btn--text-brand:hover,
.ppk-btn--text-brand:focus-visible {
    color: var(--ppk-header-dark);
}

.ppk-btn--text-white {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ppk-header-neutral-100);
}

.ppk-btn--text-white:hover,
.ppk-btn--text-white:focus-visible {
    color: var(--ppk-header-neutral-200);
}

.ppk-btn--sm {
    font-size: 14px;
    letter-spacing: 1.68px;
}

.ppk-btn--sm img,
.ppk-btn--sm svg {
    width: 24px;
    height: 24px;
}

/* Inline Textlink (z.B. innerhalb eines Fliesstext-Absatzes) -- bewusst OHNE
   Button-Typografie (Grossbuchstaben/Tracking), nur die Markenfarbe. */

.ppk-link {
    color: var(--ppk-header-light);
}

.ppk-link:hover,
.ppk-link:focus-visible {
    color: var(--ppk-header-brand);
}

.ppk-header__new-here {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ppk-header__new-here-label {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: var(--ppk-header-light);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ppk-header__logo img {
        height: 48px;
    }

    .ppk-header__new-here-label {
        display: none;
    }
}

/* ====================================================================
   Footer (Figma-Redesign 17.09.2026)
   https://www.figma.com/design/BevDlfeYh84OMjweJMvC43/praxisdienst-copy
   node-id 1:971 (Komponente 1:892)
   ==================================================================== */

.ppk-footer {
    background: var(--ppk-header-neutral-100);
    padding: 32px 20px 12px;
}

.ppk-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    max-width: 1248px;
    margin: 0 auto;
}

.ppk-footer__company,
.ppk-footer__faq {
    flex: 1 1 280px;
    min-width: 0;
}

.ppk-footer__company {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--ppk-header-neutral-600);
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.ppk-footer__company p {
    margin: 0;
}

.ppk-footer__tagline {
    font-size: 14px;
}

.ppk-footer__tagline sup {
    font-size: 9px;
}

.ppk-footer__address {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ppk-footer__company-name {
    font-weight: 700;
}

.ppk-footer__row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ppk-footer__label {
    font-weight: 700;
}

.ppk-footer__row-value {
    color: inherit;
    text-decoration: none;
}

.ppk-footer__faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ppk-footer__faq-title {
    margin: 0;
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ppk-header-neutral-600);
}

.ppk-footer__faq-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ppk-footer__link {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ppk-header-brand);
    text-decoration: none;
}

.ppk-footer__link:hover,
.ppk-footer__link:focus {
    text-decoration: underline;
}

.ppk-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1248px;
    margin: 24px auto 0;
}

.ppk-footer__divider {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--ppk-header-neutral-300);
}

.ppk-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ppk-footer__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ppk-footer__logo {
    display: block;
    line-height: 0;
}

.ppk-footer__logo img {
    display: block;
    height: 52px;
    width: auto;
}

.ppk-footer__copyright {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--ppk-header-neutral-600);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ppk-footer__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ====================================================================
   Atoms: Formular (Figma-Redesign 17.09.2026)
   https://www.figma.com/design/BevDlfeYh84OMjweJMvC43/praxisdienst-copy?node-id=2-3643
   Verwendet auf Login (page--myaccount-login) und Registrierung
   (_block--registration-forms). Wie bei den Buttons: neuer Standard fuer
   restylte Formulare, kein globales Bootstrap-.form-control-Override.
   ==================================================================== */

.ppk-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 220px;
    width: 100%;
    max-width: 400px;
    min-width: 188px;
}

/* Registrierung: weisse Karte auf Marken-Gradient -- derselbe Seitenhintergrund
   wie beim Login (.ppk-auth-page), nur breiter.

   Die Karte ist laut Figma (node-id 1-2631) 1248px breit und sitzt bei x=96 --
   also exakt buendig mit dem Inhalt der Kopfzeile. Deshalb traegt der Wrapper
   dieselbe Angabe wie .ppk-header: clamp(16px, 5vw, 96px) seitlich, Karte
   max. 1248px. Wer eines von beiden aendert, muss das andere mitziehen,
   sonst verspringt die Kante gegen den Header. */

.ppk-reg-page {
    background: linear-gradient(90deg, var(--ppk-header-brand), var(--ppk-header-dark));
    padding: 96px clamp(16px, 5vw, 96px);
}

.ppk-reg-card {
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    padding: 48px 64px;
    background: var(--ppk-header-neutral-100);
}

@media (max-width: 575.98px) {
    .ppk-reg-page {
        padding: 32px 16px;
    }

    .ppk-reg-card {
        padding: 32px 24px;
    }
}

.ppk-field--wide {
    max-width: none;
}

.ppk-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1.92px;
    color: var(--ppk-header-dark);
}

.ppk-label--white {
    color: var(--ppk-header-neutral-100);
}

.ppk-label__required {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: var(--ppk-header-light);
}

.ppk-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    background: var(--ppk-header-neutral-100);
    border: 1px solid var(--ppk-header-neutral-300);
    font-family: 'Roboto Flex', sans-serif;
    font-size: 18px;
    color: var(--ppk-header-neutral-600);
}

.ppk-input::placeholder {
    color: var(--ppk-header-neutral-300);
}

.ppk-input:focus {
    outline: 0;
    border-color: var(--ppk-header-light);
    background: var(--ppk-header-neutral-100);
}

.ppk-input:disabled {
    background: var(--ppk-header-neutral-200);
    border-color: var(--ppk-header-neutral-300);
    color: var(--ppk-header-neutral-300);
    cursor: not-allowed;
}

.ppk-input.is-invalid {
    border-color: var(--ppk-semantic-red);
    color: var(--ppk-semantic-red);
}

.ppk-input.is-valid {
    border-color: var(--ppk-semantic-blue);
    color: var(--ppk-semantic-blue);
}

select.ppk-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2314757D' d='M6.00001 10.5L6.00001 8.1L12 13.5L18 8.1L18 10.5L12 15.9L6.00001 10.5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 24px 24px;
    cursor: pointer;
}

.ppk-hint {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 12px;
    line-height: 1.2;
    color: var(--ppk-header-neutral-400);
}

/* --- Checkbox ------------------------------------------------------------- */

.ppk-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ppk-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    background: var(--ppk-header-neutral-100);
    border: 1px solid var(--ppk-header-light);
    cursor: pointer;
}

/* Haken laut Figma ("Formular – Checkbox", state=Checked): 10x10 Icon zentriert
   in der 18x18 Box, also 4px Luft ringsum. Ohne background-size skaliert der
   Browser das SVG auf die volle Boxgroesse -- der Haken sah zu gross aus. */

.ppk-checkbox:checked {
    background-color: var(--ppk-header-light);
    border-color: var(--ppk-header-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='white' d='M5 10H3L0 5H2L3.9082 8.18164L8 0H10L5 10Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}

.ppk-checkbox-text {
    flex: 1 1 0;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ppk-header-neutral-600);
}

.ppk-checkbox-text a {
    color: var(--ppk-header-light);
}

/* --- Formular-Abschnitt: Ueberschrift + Trennlinie ------------------------ */

/* margin-top trennt den Abschnitt vom vorangehenden Feldblock. Im Figma
   (node-id 1-2631) liegen zwischen dem letzten Element eines Abschnitts und
   der naechsten Zwischenheadline 32-46px; der vorangehende .ppk-form-row /
   .ppk-form-split bringt davon bereits 16px mit, die restlichen 32px stehen
   hier. Der erste Abschnitt im Formular bekommt keinen -- dort setzt die
   Ueberschrift "Konto erstellen" den Abstand. */

.ppk-form-section {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 32px 0 16px;
}

.ppk-form-section:first-child {
    margin-top: 0;
}

.ppk-form-section__title {
    flex-shrink: 0;
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ppk-header-brand);
}

/* Die Linie traegt laut Figma-Export (Line 3, stroke #14757D) die Markenfarbe,
   nicht das Neutral-Grau -- 1px stark wie bisher, aber deutlich dunkler und
   damit optisch "dicker". Die Trennlinie ueber "Sie haben bereits ein Konto?"
   (Line 4) bleibt dagegen grau. */

.ppk-form-section__line {
    flex: 1 1 0;
    height: 1px;
    background: var(--ppk-header-brand);
}

.ppk-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    margin: 0 0 16px;
}

.ppk-form-required-hint {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 12px;
    color: var(--ppk-header-neutral-600);
}

.ppk-form-required-hint .ppk-label__required {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

/* --- Zweispaltiger Abschnitt: Felderspalte + Dateiupload ------------------
   Figma "Konto erstellen" (node-id 1-2631): im Abschnitt "Ihre Person" stehen
   die Felder links untereinander, der Upload steht rechts daneben und laeuft
   ueber mehrere Feldzeilen. .ppk-form-row kann das nicht, weil es alle Felder
   in einen gemeinsamen Fluss legt. */

.ppk-form-split {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    margin: 0 0 16px;
}

.ppk-form-split__col {
    display: flex;
    flex-direction: column;
    /* 24px laut Figma: die Felder in "Ihre Person" stehen dort auf
       y=0/87/174/261 bei 63px Feldhoehe. */
    gap: 24px;
    flex: 1 1 320px;
    min-width: min(100%, 320px);
    max-width: 400px;
}

/* .ppk-field ist fuer .ppk-form-row gebaut (Flex-Richtung row), wo
   "flex: 1 1 220px" eine Mindest-BREITE meint. In der Spalte hier ist die
   Flex-Richtung column -- dieselbe Angabe wird dort zur Basis-HOEHE und
   flex-grow streckt jedes Feld zusaetzlich auf. Ergebnis waren riesige
   Luecken zwischen Anrede und Berufsgruppe. Deshalb: natuerliche Hoehe. */

.ppk-form-split .ppk-field {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
}

/* --- Dateiupload (Qualifikationsnachweis) ---------------------------------
   Das eigentliche <input type="file"> bleibt im DOM und bedienbar (Tastatur,
   Screenreader), ist aber optisch ersetzt: Klick und Drag-and-Drop laufen
   ueber das umgebende <label>. */

.ppk-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 124px;
    padding: 16px;
    text-align: center;
    background: var(--ppk-header-neutral-100);
    border: 1px dashed var(--ppk-header-neutral-300);
    cursor: pointer;
}

.ppk-upload:focus-within,
.ppk-upload.is-dragover {
    border-color: var(--ppk-header-light);
    background: var(--ppk-header-neutral-200);
}

.ppk-upload.is-invalid {
    border-color: var(--ppk-semantic-red);
}

/* Gesperrt, solange die gewaehlte Berufsgruppe keinen Nachweis vorsieht --
   dasselbe Ausgrau-Muster wie .ppk-input:disabled. */

.ppk-upload.is-disabled {
    background: var(--ppk-header-neutral-200);
    border-color: var(--ppk-header-neutral-300);
    cursor: not-allowed;
}

.ppk-upload.is-disabled .ppk-upload__icon,
.ppk-upload.is-disabled .ppk-upload__title,
.ppk-upload.is-disabled .ppk-upload__text {
    color: var(--ppk-header-neutral-300);
}

.ppk-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ppk-upload__icon {
    width: 48px;
    height: 48px;
    color: var(--ppk-header-light);
}

.ppk-upload__title {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.92px;
    color: var(--ppk-header-light);
}

.ppk-upload__text {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 12px;
    line-height: 1.3;
    color: var(--ppk-header-neutral-400);
}

.ppk-upload__file {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ppk-header-neutral-600);
    word-break: break-all;
}

/* --- Heading/Display (43px Bold) ------------------------------------------ */

.ppk-heading-display {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 43px;
    line-height: 1.1;
    color: var(--ppk-header-brand);
}

/* 32px zwischen "Konto erstellen" und der ersten Zwischenheadline (Figma:
   Ueberschrift endet bei y=95, Abschnitt "Ihre Person" beginnt bei y=127).
   Muss NACH .ppk-heading-display stehen -- die Regel setzt margin:0 und
   haette bei gleicher Spezifitaet sonst das letzte Wort. */

.ppk-reg-card__title {
    margin-bottom: 32px;
}

/* ====================================================================
   Auth-Seiten (Login): Kopfzeile + weisse Karte auf Marken-Gradient
   ==================================================================== */

.ppk-auth-page {
    background: linear-gradient(90deg, var(--ppk-header-brand), var(--ppk-header-dark));
    display: flex;
    justify-content: center;
    padding: 96px 20px;
}

.ppk-auth-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 528px;
    min-width: 0;
    padding: 48px 64px;
    background: var(--ppk-header-neutral-100);
}

@media (max-width: 575.98px) {
    .ppk-auth-card {
        padding: 32px 24px;
    }
}

/* ====================================================================
   Startseite, eingeloggt (Figma-Redesign 17.09.2026)
   https://www.figma.com/design/BevDlfeYh84OMjweJMvC43/praxisdienst-copy?node-id=1-964
   ==================================================================== */

/* --- Beitrags-Karussells ("Aktuelle Informationen" / "Weitere Informationen") --- */

.ppk-teaser-section {
    background: linear-gradient(90deg, var(--ppk-header-brand), var(--ppk-header-dark));
    padding: 32px clamp(16px, 5vw, 96px);
}

.ppk-teaser-section__inner {
    max-width: 1248px;
    margin: 0 auto;
}

.ppk-teaser-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
}

.ppk-teaser-section__title {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ppk-header-neutral-100);
}

/* .ppk-teaser-track bewusst OHNE display:flex/gap: tiny-slider berechnet die
   Slide-Breiten/Positionen selbst (per Transform, JS-Option "gutter": 24 statt
   CSS-gap) -- eigenes flex+gap zusaetzlich zur JS-Berechnung liess die Karten
   ueberlappen, siehe _block--home-teaser-carousel.html.twig. */

/* Das Slide-Element selbst bleibt unsichtbar: Breite und Abstand bestimmt
   tiny-slider (siehe Kommentar in _comp--home-teaser-card.html.twig).
   KEIN max-width hier -- eine Deckelung klemmt die von tiny-slider gesetzte
   Slide-Breite ab (z.B. 400 statt 424), waehrend der Slider weiter mit seiner
   eigenen Breite verschiebt: die Reihe wandert dann pro Karte aus dem Raster. */
.ppk-teaser-card {
    min-width: 0;
}

/* Die sichtbare weisse Karte. */
.ppk-teaser-card__box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    background: var(--ppk-header-neutral-100);
}

.ppk-teaser-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ppk-teaser-card__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* .ppk-btn ist inline-flex mit justify-content:center. In der Flex-SPALTE der
   Karte greift align-items:stretch, der Link wuerde also auf die volle
   Kartenbreite wachsen und sein Text mittig sitzen. flex-start haelt ihn
   linksbuendig und auf Inhaltsbreite; margin-top:auto schiebt ihn an den
   unteren Kartenrand, damit die Links bei gleich hohen Karten (siehe
   "Aktuelle Informationen" weiter unten) auf einer Linie stehen. */
.ppk-teaser-card__more {
    align-self: flex-start;
    margin-top: auto;
}

/* --- "Aktuelle Informationen": alle Karten gleich hoch ----------------------
   tiny-slider legt die Slides als inline-block nebeneinander (tiny-slider.css,
   .tns-horizontal.tns-subpixel > .tns-item). Jede Karte ist damit so hoch wie
   ihr eigener Inhalt -- bei unterschiedlich langen Teasertexten steht die
   Reihe unten ausgefranst. "height: 100%" hilft nicht: der Track hat keine
   aufgeloeste Hoehe, an der sich die Prozentangabe messen koennte.

   Deshalb wird der Track NACH der Initialisierung zum Flex-Container
   (.tns-horizontal kommt von tiny-slider selbst, die Regel greift also erst,
   wenn der Slider steht). align-items:stretch zieht alle Slides auf die Hoehe
   der hoechsten. Breite und Verschiebung bleiben unangetastet: die setzt
   tiny-slider inline bzw. per transform, flex-basis fasst sie nicht an.

   Nur die manuelle Variante. Die Center-Variante staffelt ihre Karten ueber
   vertical-align:middle am inline-block-Slide -- Flex wuerde das aushebeln. */

.ppk-teaser-track:not(.ppk-teaser-track--center).tns-horizontal {
    display: flex;
    align-items: stretch;
}

/* Breite kommt inline von tiny-slider -- weder wachsen noch schrumpfen. */
.ppk-teaser-track:not(.ppk-teaser-track--center) > .ppk-teaser-card {
    flex: 0 0 auto;
}

.ppk-teaser-track:not(.ppk-teaser-track--center) .ppk-teaser-card__box {
    height: 100%;
}

/* --- "Weitere Informationen" (Center-Variante) ------------------------------
   Genau EINE scharfe Karte in der Mitte, je zwei Nachbarn links/rechts nach
   hinten gestaffelt. Die Klassen .is-center/.is-near/.is-far setzt
   js/components/ppk-teaser-carousel.js -- NICHT .tns-slide-active verwenden,
   das traegt tiny-slider an allen sichtbaren Slides (Ursache des frueheren
   "umgekehrten" Looks). transform aendert den Dokumentfluss nicht, die
   Zeile bleibt also ausgerichtet. Transition-Dauer = JS-Option "speed". */

/* Der Stapel laeuft im Design ueber die volle Breite -- Titel und aeusserste
   Karte stehen auf derselben Kante. Daher hier kein 1248er-Korsett; die
   Begrenzung uebernimmt das Padding der Section. Die Obergrenze verhindert
   nur, dass die Mittelkarte auf sehr breiten Schirmen absurd gross wird. */
.ppk-teaser-section--center .ppk-teaser-section__inner {
    max-width: 1920px;
}

/* Luft oben/unten: die Karten sind unscharf, der Blur blutet ueber die Kante
   und wuerde sonst von tiny-sliders overflow:hidden (.tns-ovh) abgeschnitten. */
.ppk-teaser-section--center .ppk-teaser-stage .tns-ovh {
    padding: 24px 0;
}

.ppk-teaser-stage .tns-outer {
    margin: 0;
}

/* tiny-slider richtet Slides per inline-block oben aus; das Design zentriert
   die kleineren Nachbarn vertikal zur Mittelkarte. */
.ppk-teaser-track--center.tns-horizontal > .ppk-teaser-card.tns-item {
    vertical-align: middle;
}

/* Gestaffelt wird die BOX, nicht das Slide-Element: der Gutter steckt als
   padding im Slide und wuerde sonst mitskaliert -- die Karte saesse dann
   sichtbar ausserhalb ihrer Mitte.

   STAPEL-GEOMETRIE (aus dem Figma-Screenshot abgemessen, Viewport 2000px):
   Mittelkarte 654 breit; Nachbarn bei +/-359 mit Faktor 0.89; aeussere bei
   +/-575 mit Faktor 0.81. Die Karten ueberlappen sich also -- ihr Abstand
   (359) ist kleiner als ihre Breite.

   tiny-slider kann das nicht von sich aus: es setzt die Slides immer genau
   eine Slot-Breite auseinander, ein negativer "gutter" ist nicht vorgesehen.
   Deshalb bleibt das LAYOUT ein normales 3er-Karussell, und die Karten werden
   per translateX zur Mitte gezogen. Der Trick dabei: Prozente in translateX
   beziehen sich auf die eigene (unskalierte) Breite -- und die ist gleich der
   Slot-Breite. Damit sind alle Werte unten reine Verhaeltnisse und das
   Layout skaliert mit der Viewport-Breite mit, statt auf 2000px zu haengen:

     Nachbar:  1 Slot natuerlicher Abstand - 359/603 = 40% zurueckziehen
     Aeussere: 2 Slots - 575/603            = 105% zurueckziehen

   Reihenfolge translateX vor scale ist Absicht: scale wirkt zuerst (um die
   eigene Mitte), die Verschiebung bleibt dadurch in Slot-Prozenten rechenbar. */

.ppk-teaser-track--center .ppk-teaser-card__box {
    z-index: 1;
    opacity: 0;
    filter: blur(6px);
    transform: scale(0.81);
    /* Klickbar bleiben: ein Klick auf eine abgedunkelte Karte holt sie in die
       Mitte (ppk-teaser-carousel.js), statt ihren Link zu oeffnen. */
    cursor: pointer;
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
}

/* Korrektur-Zustand: die Tiefen wandern auf andere Karten (Loop-Sprung), das
   darf nicht durchblenden. Setzt ppk-teaser-carousel.js fuer einen Frame. */
.ppk-teaser-track--center.is-snapping .ppk-teaser-card__box {
    transition: none;
}

.ppk-teaser-track--center [data-ppk-depth="-2"] .ppk-teaser-card__box,
.ppk-teaser-track--center [data-ppk-depth="2"] .ppk-teaser-card__box {
    z-index: 1;
    opacity: 0.3;
}

.ppk-teaser-track--center [data-ppk-depth="-1"] .ppk-teaser-card__box,
.ppk-teaser-track--center [data-ppk-depth="1"] .ppk-teaser-card__box {
    z-index: 2;
    opacity: 0.55;
    filter: blur(3px);
    transform: scale(0.89);
}

.ppk-teaser-track--center .is-center .ppk-teaser-card__box {
    z-index: 3;
    opacity: 1;
    filter: none;
    transform: none;
    cursor: auto;
}

/* Der Stapel erst ab Tablet: einspaltig ist die Nachbarkarte eine ganze
   Viewport-Breite entfernt, 40% davon waeren mitten im Bild. */
@media (min-width: 768px) {
    .ppk-teaser-track--center [data-ppk-depth="-1"] .ppk-teaser-card__box {
        transform: translateX(40%) scale(0.89);
    }

    .ppk-teaser-track--center [data-ppk-depth="1"] .ppk-teaser-card__box {
        transform: translateX(-40%) scale(0.89);
    }

    .ppk-teaser-track--center [data-ppk-depth="-2"] .ppk-teaser-card__box {
        transform: translateX(105%) scale(0.81);
    }

    .ppk-teaser-track--center [data-ppk-depth="2"] .ppk-teaser-card__box {
        transform: translateX(-105%) scale(0.81);
    }
}

/* Einspaltig ist kein Platz zum Vergroessern -- die Karte wuerde seitlich
   abgeschnitten. */
@media (max-width: 767.98px) {
    .ppk-teaser-track--center .is-center .ppk-teaser-card__box {
        transform: none;
    }

    .ppk-teaser-section--center .ppk-teaser-stage .tns-ovh {
        padding: 0;
    }

    .ppk-teaser-pager {
        gap: 8px;
    }

    .ppk-teaser-pager__nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .ppk-teaser-pager__nav [data-nav] {
        font-size: 16px;
    }

    .ppk-teaser-pager__nav [data-nav].tns-nav-active {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ppk-teaser-track--center .ppk-teaser-card__box {
        transition: none;
    }
}

/* Pausieren/Abspielen -- Inhalt schreibt tiny-slider selbst (autoplayText),
   data-action ist "stop" solange das Karussell laeuft. */
.ppk-teaser-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border: 0;
    background: none;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1.92px;
    text-transform: uppercase;
    color: var(--ppk-header-neutral-100);
    cursor: pointer;
}

.ppk-teaser-toggle__icon {
    display: inline-block;
    width: 14px;
    height: 18px;
}

.ppk-teaser-toggle__icon--pause {
    border-left: 5px solid currentColor;
    border-right: 5px solid currentColor;
}

.ppk-teaser-toggle__icon--play {
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid currentColor;
}

/* Nummern-Pager: ‹ 01 02 03 … › */
.ppk-teaser-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

/* Rest (Groesse, Chevron) kommt aus der globalen [data-controls]-Regel. */
.ppk-teaser-pager .ppk-teaser-pager__arrow {
    color: var(--ppk-header-neutral-100);
}

.ppk-teaser-pager__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* tiny-slider setzt data-nav auch auf unsere Nummern-Buttons -- die globale
   Punkt-Regel weiter unten ([data-nav], !important) muss hier gezielt
   ueberstimmt werden. */
.ppk-teaser-pager__nav [data-nav] {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 1.2px;
    color: var(--ppk-header-neutral-300);
}

.ppk-teaser-pager__nav [data-nav].tns-nav-active {
    background-color: transparent !important;
    font-weight: 600;
    font-size: 26px;
    color: var(--ppk-header-neutral-100);
}

.ppk-teaser-card__media {
    position: relative;
    aspect-ratio: 376 / 255;
    overflow: hidden;
    background: var(--ppk-header-neutral-200);
}

/* hublify.image().render_picture() liefert das Bild in einem <picture>-Wrapper.
   Der ist per Default inline und ohne eigene Hoehe -- dann laeuft "height: 100%"
   am <img> ins Leere und das Bild verliert seine Flaeche. Deshalb bekommt der
   Wrapper hier (wie in allen Bildflaechen mit aspect-ratio) dieselben Masse. */
.ppk-teaser-card__media picture,
.ppk-teaser-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppk-teaser-card__badge {
    position: absolute;
    left: 0;
    top: 0;
    padding: 4px 8px;
    background: linear-gradient(90deg, var(--ppk-header-blue), var(--ppk-header-light));
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: var(--ppk-header-neutral-100);
}

.ppk-teaser-card__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--ppk-header-neutral-400);
}

.ppk-teaser-card__title {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.1;
    color: var(--ppk-header-dark);
}

.ppk-teaser-card__text {
    margin: 0;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ppk-header-neutral-600);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pfeil-/Punkt-Navigation kommt von tiny-slider selbst, erzeugt ueber das
   Theme (hfy-theme.min.css) via [data-nav]/[data-controls]-Attribute.

   BEWUSST UNSCOPED (nicht ".ppk-teaser-section [data-nav]"): tiny-slider
   haengt diese Elemente beim Init an einer Stelle ein, die wir vom Server
   aus nicht sicher vorhersagen koennen (mgl. Reparenting ausserhalb der
   urspruenglichen Container-Hierarchie) -- ein auf .ppk-teaser-section
   gescopter Selektor traf offenbar nicht, obwohl die Theme-Regel
   (.tns-carousel [data-nav]) sichtbar griff. Global + !important ist hier
   der zuverlaessigere Weg; betrifft site-weit alle tiny-slider-Karussells
   einheitlich auf die neue Markenfarbe statt der alten Theme-Akzentfarbe --
   das ist eine gewollte Nebenwirkung, kein Risiko. */

[data-controls] {
    padding: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    color: var(--ppk-header-neutral-300);
    font-size: 0 !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
}

[data-controls]::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 15.9V13.5L12 8.1L6 13.5V15.9L12 10.5L18 15.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 15.9V13.5L12 8.1L6 13.5V15.9L12 10.5L18 15.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(-90deg);
}

[data-controls="next"]::before {
    transform: rotate(90deg);
}

[data-nav] {
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: var(--ppk-header-neutral-300) !important;
    cursor: pointer;
}

[data-nav].tns-nav-active {
    background-color: var(--ppk-header-neutral-100) !important;
}

/* --- Angebote-Grid ("Unsere Angebote für Ihren Praxisbedarf") ------------- */

.ppk-shop-section {
    padding: 48px clamp(16px, 5vw, 96px) 80px;
}

.ppk-shop-section__inner {
    max-width: 1248px;
    margin: 0 auto;
}

.ppk-shop-section__heading {
    margin: 0 0 12px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 43px;
    line-height: 1.1;
    color: var(--ppk-header-brand);
}

.ppk-shop-section__line {
    width: 188px;
    height: 3px;
    margin: 0 0 24px;
    background: var(--ppk-header-neutral-300);
}

.ppk-shop-section__intro {
    width: 100%;
    margin: 0 0 48px;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ppk-header-neutral-600);
}

.ppk-shop-filters {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin: 0 0 24px;
}

.ppk-shop-filter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ppk-shop-filter__label {
    flex: 0 0 auto;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: var(--ppk-header-brand);
    text-align: right;
}

.ppk-shop-filter__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 256px;
    padding: 4px 8px 4px 36px;
    border: 0;
    background-color: var(--ppk-header-neutral-200);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2314757D' d='M6.00001 10.5L6.00001 8.1L12 13.5L18 8.1L18 10.5L12 15.9L6.00001 10.5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 6px center;
    background-size: 24px 24px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: var(--ppk-header-dark);
    cursor: pointer;
}

.ppk-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 991.98px) {
    .ppk-shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ppk-shop-grid {
        grid-template-columns: 1fr;
    }

    .ppk-shop-filters {
        align-items: stretch;
        width: 100%;
    }

    .ppk-shop-filter {
        justify-content: space-between;
    }

    .ppk-shop-filter__select {
        width: auto;
        flex: 1 1 auto;
    }
}

.ppk-product-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    background: var(--ppk-header-neutral-200);
}

.ppk-product-card__media {
    position: relative;
    aspect-ratio: 400 / 532;
    overflow: hidden;
    background: var(--ppk-header-neutral-300);
}

/* <picture>-Wrapper von render_picture() mitbemassen, siehe .ppk-teaser-card__media */
.ppk-product-card__media picture,
.ppk-product-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppk-product-card__badge {
    position: absolute;
    left: 0;
    top: 0;
    padding: 4px 8px;
    background: var(--ppk-header-neutral-200);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: var(--ppk-header-brand);
}

.ppk-product-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 136px;
}

.ppk-product-card__title {
    margin: 0 0 12px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
    color: var(--ppk-header-neutral-600);
}

.ppk-product-card__meta {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: var(--ppk-header-neutral-600);
}

.ppk-product-card__cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    background: linear-gradient(90deg, var(--ppk-header-blue), var(--ppk-header-light));
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: var(--ppk-header-neutral-100);
    text-decoration: none;
}

.ppk-product-card__cta:hover,
.ppk-product-card__cta:focus-visible {
    background: var(--ppk-header-light);
    color: var(--ppk-header-neutral-100);
}

.ppk-product-card__cta svg {
    width: 24px;
    height: 24px;
}

/* ====================================================================
   Service-Band "Noch Fragen?" (_block--service-faq.html.twig)
   ==================================================================== */

.ppk-service {
    background: linear-gradient(90deg, var(--ppk-header-brand), var(--ppk-header-dark));
    padding: 48px clamp(16px, 5vw, 96px);
    color: var(--ppk-header-neutral-100);
}

.ppk-service__inner {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    max-width: 1248px;
    margin: 0 auto;
}

/* Textspalte traegt die Breite: ohne Bild laeuft sie voll durch, mit Bild
   teilen sich beide Spalten die Zeile. flex-basis 0 statt auto, damit die
   langen Button-Beschriftungen die Spalte nicht aufblaehen. */
.ppk-service__text {
    flex: 1 1 0;
    min-width: 0;
}

/* Werte aus dem Figma-Knoten: Media max. 400px, Foto 488x287 rechts
   ausgerichtet und links beschnitten -- daher object-fit/object-position
   statt einer Skalierung auf die Spaltenbreite. */
.ppk-service__media {
    position: relative;
    flex: 1 1 0;
    max-width: 400px;
    min-width: 0;
    /* Bezugsgroesse fuer die cqw-Werte des Piktogramms (siehe unten) */
    container-type: inline-size;
}

.ppk-service__photo {
    display: block;
    width: 100%;
    aspect-ratio: 400 / 287;
    object-fit: cover;
    object-position: right center;
}

/* --- Sprechblasen-Piktogramm ---------------------------------------------
   Geometrie 1:1 aus Figma (Knoten 7:3923): Box 232x213.755, im Design bei
   left 906 / Foto-Start 944 -- es ragt also 38px nach links ueber das Foto
   hinaus (-9.5% von 400) und sitzt 7px unter dessen Oberkante.

   Die Glyphen sind Text (im Design ebenfalls Textebenen), ihre Groesse haengt
   an der Bildbreite: cqw = Prozent der Media-Spalte. Die px-Zeile davor ist
   der Rueckfall fuer Browser ohne Container-Queries -- dort sitzt das
   Piktogramm in Originalgroesse statt mitzuskalieren. */

.ppk-service__picto {
    position: absolute;
    left: -9.5%;
    top: 2.4%;
    width: 58%;
    aspect-ratio: 232 / 213.755;
}

.ppk-service__bubble {
    position: absolute;
    height: auto;
}

.ppk-service__bubble--lg {
    left: 18.1%;
    top: 0;
    width: 81.9%;
}

/* Im Design um die Hochachse gespiegelt (rotate(180) + scaleY(-1)). */
.ppk-service__bubble--sm {
    left: 0;
    top: 47.7%;
    width: 44.4%;
    transform: scaleX(-1);
}

.ppk-service__picto-mark,
.ppk-service__picto-dots {
    position: absolute;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.ppk-service__picto-mark {
    left: 46.6%;
    top: 3.3%;
    font-size: 121px;
    font-size: 30.2cqw;
    color: var(--ppk-header-neutral-100);
}

.ppk-service__picto-dots {
    left: 9%;
    top: 39.8%;
    font-size: 82px;
    font-size: 20.5cqw;
    color: var(--ppk-header-neutral-300);
}

/* Typo-Werte aus dem Figma-Design: H4 20px/2.4px, H1 32px, Abstand zwischen
   Kopfgruppe und Buttons 32px. */
.ppk-service__kicker {
    margin: 0 0 16px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ppk-header-neutral-100);
}

.ppk-service__title {
    margin: 0 0 16px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.1;
    color: var(--ppk-header-neutral-100);
}

.ppk-service__line {
    width: 188px;
    height: 3px;
    margin: 0 0 24px;
    border: 0;
    opacity: 1;
    background: var(--ppk-header-neutral-100);
}

.ppk-service__lead {
    margin: 0 0 24px;
    max-width: 62ch;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.ppk-service__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Buttons duerfen umbrechen: die Zielgruppen-Namen sind lang, und .ppk-btn
   setzt white-space:nowrap -- auf schmalen Spalten schoebe das sonst die
   ganze Section auf. */
.ppk-service__link {
    white-space: normal;
    text-align: left;
}

/* Noch ohne Ziel-Seite: sieht aus wie ein Button, ist aber keiner. Bewusst
   ohne Hover-Reaktion, damit der Unterschied sichtbar bleibt. */
.ppk-service__link--inactive {
    cursor: default;
    opacity: 0.85;
}

@media (max-width: 991.98px) {
    .ppk-service__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .ppk-service__media {
        order: -1;
        flex: 0 0 auto;
    }
}

/* ====================================================================
   Info-Karten "Gut zu wissen rund um Ihre Bestellung"
   (_block--info-cards.html.twig)
   ==================================================================== */

.ppk-info {
    padding: 48px clamp(16px, 5vw, 96px);
    background: var(--ppk-header-neutral-100);
}

.ppk-info__inner {
    max-width: 1248px;
    margin: 0 auto;
}

/* Typo/Abstaende aus dem Figma-Knoten 7:3894 uebernommen: H4 20px mit
   2.4px Laufweite in Primary Dark (NICHT Brand), H1 32px in Brand,
   Trennlinie 188px, 20px Abstand zu den Karten. */
.ppk-info__kicker {
    margin: 0 0 16px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ppk-header-dark);
}

.ppk-info__title {
    margin: 0 0 16px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.1;
    color: var(--ppk-header-brand);
}

.ppk-info__line {
    width: 188px;
    height: 3px;
    margin: 0 0 20px;
    border: 0;
    opacity: 1;
    background: var(--ppk-header-neutral-300);
}

/* auto-fit statt fester Spaltenzahl: der Block soll auch mit zwei oder vier
   Karten aufgehen, ohne dass hier eine Zahl nachgezogen werden muss. */
.ppk-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Karte: Polsterung 20, Radius 24, Flaeche #ededed -- alles aus dem
   Figma-Knoten. max-width 400 verhindert, dass zwei Karten auf breiten
   Schirmen unnoetig auslaufen (im Design ebenfalls gesetzt). */
.ppk-info__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
    padding: 20px;
    border-radius: 24px;
    background: var(--ppk-header-neutral-200);
}

.ppk-info__card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ppk-info__icon {
    flex-shrink: 0;
    color: var(--ppk-header-brand);
}

/* 44px Kreis mit 35px Glyphe, wie im Design. */
.ppk-info__icon svg {
    display: block;
    width: 44px;
    height: 44px;
}

.ppk-info__card-title {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
    color: var(--ppk-header-neutral-600);
}

.ppk-info__card-text {
    margin: 0;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ppk-header-neutral-600);
}

/* ====================================================================
   Beitrags-Detailseite ("Fachinformationen") -- Figma 21.09.2026
   https://www.figma.com/design/o7N52pClm3qyEB6BcIQrd4/Praxispaket.de?node-id=130-4440

   Aufbau: Hero auf Marken-Gradient (Bild randlos links), Rich-Text-Inhalt,
   Bestell-Claim mit Produkt-Teaser, Zurueck-Link. Das Karussell "Weitere
   Beitraege" nutzt die bestehenden .ppk-teaser-*-Regeln weiter oben.
   ==================================================================== */

/* --- Hero + Breadcrumb ---------------------------------------------------- */

.ppk-article-hero {
    background: linear-gradient(90deg, var(--ppk-header-brand), var(--ppk-header-dark));
}

.ppk-article-hero__bar {
    padding: 8px clamp(16px, 5vw, 96px);
}

.ppk-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 14px;
    color: var(--ppk-header-neutral-100);
}

.ppk-breadcrumb__link {
    color: var(--ppk-header-neutral-100);
    text-decoration: underline;
}

.ppk-breadcrumb__link:hover,
.ppk-breadcrumb__link:focus-visible {
    color: var(--ppk-header-neutral-200);
}

.ppk-breadcrumb__link--home {
    display: inline-flex;
    text-decoration: none;
}

.ppk-breadcrumb__link--home svg {
    width: 16px;
    height: 16px;
}

.ppk-breadcrumb__sep,
.ppk-breadcrumb__current {
    color: var(--ppk-header-neutral-200);
}

/* Das Bild sitzt buendig an der linken Fensterkante (kein Section-Padding
   links), der Text bekommt sein Padding selbst -- daher zwei Spalten ohne
   gemeinsamen Innenabstand. */
.ppk-article-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding-bottom: 16px;
}

.ppk-article-hero__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

/* <picture>-Wrapper von render_picture() mitbemassen, siehe .ppk-teaser-card__media */
.ppk-article-hero__media picture,
.ppk-article-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppk-article-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px clamp(24px, 6vw, 112px) 24px 24px;
}

.ppk-article-hero__badge {
    padding: 4px 8px;
    background: linear-gradient(90deg, var(--ppk-header-blue), var(--ppk-header-light));
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: var(--ppk-header-neutral-100);
}

.ppk-article-hero__meta {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--ppk-header-neutral-200);
}

.ppk-article-hero__title {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    color: var(--ppk-header-neutral-100);
}

.ppk-article-hero__rule {
    width: 120px;
    height: 2px;
    background: var(--ppk-header-neutral-100);
}

.ppk-article-hero__teaser {
    margin: 0;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ppk-header-neutral-100);
}

@media (max-width: 767.98px) {
    .ppk-article-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppk-article-hero__content {
        padding: 24px clamp(16px, 5vw, 24px);
    }

    .ppk-article-hero__title {
        font-size: 26px;
    }
}

/* --- Fliesstext ----------------------------------------------------------- */

.ppk-article-body {
    padding: 48px clamp(16px, 5vw, 96px) 16px;
}

.ppk-article-body__inner {
    max-width: 1248px;
    margin: 0 auto;
}

.ppk-article-body__footer {
    margin-top: 32px;
}

.ppk-article-body__cta {
    margin-top: 32px;
}

/* Typografie fuer redaktionelles HTML aus dem Editor (blog_article.body).
   Bewusst als eigene, wiederverwendbare Klasse .ppk-richtext und nicht auf
   die Beitragsseite gescopt -- dieselben Regeln gelten fuer jeden
   Rich-Text-Bereich im neuen Design. */

.ppk-richtext {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ppk-header-neutral-600);
}

.ppk-richtext h1,
.ppk-richtext h2,
.ppk-richtext h3,
.ppk-richtext h4,
.ppk-richtext h5,
.ppk-richtext h6 {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ppk-header-brand);
    margin: 32px 0 12px;
}

.ppk-richtext > :first-child {
    margin-top: 0;
}

.ppk-richtext h1 { font-size: 32px; }
.ppk-richtext h2 { font-size: 24px; }
.ppk-richtext h3 { font-size: 18px; }

.ppk-richtext h4 {
    font-size: 16px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
}

.ppk-richtext h5 { font-size: 16px; }
.ppk-richtext h6 { font-size: 14px; }

.ppk-richtext p,
.ppk-richtext ul,
.ppk-richtext ol {
    margin: 0 0 16px;
}

.ppk-richtext li {
    margin-bottom: 8px;
}

.ppk-richtext a {
    color: var(--ppk-header-light);
}

.ppk-richtext a:hover,
.ppk-richtext a:focus-visible {
    color: var(--ppk-header-brand);
}

.ppk-richtext img {
    max-width: 100%;
    height: auto;
}

.ppk-richtext hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--ppk-header-neutral-300);
    opacity: 1;
}

/* --- Bestell-Claim + Produkt-Teaser --------------------------------------- */

.ppk-article-offer {
    padding: 32px clamp(16px, 5vw, 96px);
}

.ppk-article-offer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    max-width: 1248px;
    margin: 0 auto;
}

.ppk-article-offer__claim {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 clamp(0px, 4vw, 48px);
}

.ppk-article-offer__claim-rule {
    height: 1px;
    background: var(--ppk-header-neutral-300);
}

.ppk-article-offer__claim-text {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    color: var(--ppk-header-brand);
}

.ppk-article-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 16px;
    background: var(--ppk-header-neutral-200);
}

.ppk-article-product__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--ppk-header-neutral-100);
}

/* <picture>-Wrapper von render_picture() mitbemassen, siehe .ppk-teaser-card__media */
.ppk-article-product__media picture,
.ppk-article-product__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ppk-article-product__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-right: 16px;
}

.ppk-article-product__badge {
    padding: 4px 8px;
    background: var(--ppk-header-neutral-100);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: var(--ppk-header-brand);
}

.ppk-article-product__title {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    color: var(--ppk-header-neutral-600);
}

.ppk-article-product__title a {
    color: inherit;
    text-decoration: none;
}

.ppk-article-product__meta {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ppk-header-neutral-400);
}

@media (max-width: 991.98px) {
    .ppk-article-offer__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppk-article-offer__claim {
        padding: 0;
    }
}

@media (max-width: 575.98px) {
    .ppk-article-product {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppk-article-product__body {
        padding-right: 0;
    }
}

/* --- Zurueck zur Uebersicht ----------------------------------------------- */

.ppk-article-back {
    display: flex;
    justify-content: center;
    padding: 32px clamp(16px, 5vw, 96px) 64px;
}

/* ====================================================================
   Produkt – Detailseite (_block--product-details-general.html.twig)
   https://www.figma.com/design/BevDlfeYh84OMjweJMvC43/praxisdienst-copy
   node-id 7-3974 (Beispiel Arzneimittel) / 7-3983 (Beispiel Sampling)

   Zwei gleich breite Spalten: links die Galerie auf dunklem Marken-
   Gradient (traegt auch den Breadcrumb), rechts die Produktinfos auf
   weiss. Ab 992px nebeneinander, darunter gestapelt.

   Token-Zuordnung Figma -> Projekt (die Figma-Namen sind um eine Stufe
   verschoben, das ist keine Verwechslung):
     neutral/300 #ededed -> --ppk-header-neutral-200
     neutral/400 #cdcdcd -> --ppk-header-neutral-300
     neutral/500 #787b7d -> --ppk-header-neutral-400
   ==================================================================== */

.ppk-pdp {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* --- Galerie-Panel ------------------------------------------------- */

.ppk-pdp__gallery {
    flex: 1 1 50%;
    min-width: 0;
    background: linear-gradient(90deg, var(--ppk-header-brand), var(--ppk-header-dark));
    /* Links die Seitenpolsterung wie in allen anderen Baendern, rechts
       laeuft das Panel bis zur Spaltenkante durch. */
    padding: 24px 24px 24px clamp(16px, 5vw, 96px);
}

.ppk-pdp__gallery-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 588px;
    margin-left: auto;
}

/* --- Breadcrumb im Panel ------------------------------------------- */

.ppk-pdp__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ppk-pdp__crumb {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ppk-header-neutral-100);
    text-decoration: underline;
}

.ppk-pdp__crumb:hover,
.ppk-pdp__crumb:focus-visible {
    color: var(--ppk-header-neutral-100);
}

/* Trenner als Pseudo-Element statt eigener Icons: im Design steht vor
   jedem Eintrag ausser dem Haus ein Chevron. */
.ppk-pdp__crumb + .ppk-pdp__crumb::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 16px;
    vertical-align: -3px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 6 8 7.4 12.6 12 8 16.6 9.4 18l6-6z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 6 8 7.4 12.6 12 8 16.6 9.4 18l6-6z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

.ppk-pdp__crumb--home {
    display: inline-flex;
    text-decoration: none;
}

.ppk-pdp__crumb--home svg {
    width: 24px;
    height: 24px;
}

.ppk-pdp__crumb--current {
    text-decoration: underline;
    cursor: default;
}

/* --- Galerie ------------------------------------------------------- */

/* Das Theme gibt der Galerie eine eigene Rahmen-/Hintergrundoptik. Auf
   dem dunklen Panel stoert die, das Bild steht im Design randlos. */
.ppk-pdp__gallery .product-gallery {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
}

/* Das Theme setzt hier Margins fuer das alte Nebeneinander-Layout. */
.ppk-pdp__gallery .product-gallery-preview {
    margin: 0;
    background: transparent;
}

.ppk-pdp__gallery .product-gallery-preview-item img {
    width: 100%;
    height: auto;
    display: block;
}

.ppk-pdp__gallery .product-gallery-thumblist {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Vorschaubilder: gleiche Breite, aktives Bild mit 3px Rahmen in
   Secondary Blue (Figma). Das Theme setzt feste 5rem x 5rem und Margins --
   beides muss hier weichen, sonst bleiben die Bilder briefmarkengross. */
.ppk-pdp__gallery .product-gallery-thumblist-item {
    flex: 1 1 0;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 0;
    /* Hochformat wie im Entwurf; Vorschaubilder duerfen beschnitten
       werden, das Hauptbild nicht (siehe unten). */
    aspect-ratio: 788.72 / 1049;
    overflow: hidden;
}

.ppk-pdp__gallery .product-gallery-thumblist-item.active {
    border-color: var(--ppk-header-blue);
}

.ppk-pdp__gallery .product-gallery-thumblist-item img,
.ppk-pdp__gallery .product-gallery-thumblist-item picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Das Theme dimmt nicht-aktive Vorschauen auf 0.6 -- im Entwurf sind
       alle gleich deckend, unterschieden wird nur ueber den Rahmen. */
    opacity: 1;
}

/* --- Produktinfos -------------------------------------------------- */

.ppk-pdp__info {
    flex: 1 1 50%;
    min-width: 0;
    background: var(--ppk-header-neutral-100);
    padding: 80px clamp(16px, 5vw, 96px) 48px 24px;
}

.ppk-pdp__info-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 580px;
}

.ppk-pdp__title {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.1;
    color: var(--ppk-header-neutral-600);
}

.ppk-pdp__line {
    width: 188px;
    height: 3px;
    margin: 0;
    border: 0;
    opacity: 1;
    background: var(--ppk-header-neutral-300);
}

/* --- Beschreibung (Rich Text) -------------------------------------- */

.ppk-pdp__desc {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ppk-header-neutral-600);
}

.ppk-pdp__desc > *:first-child { margin-top: 0; }
.ppk-pdp__desc > *:last-child { margin-bottom: 0; }

.ppk-pdp__desc p {
    margin: 0 0 12px;
}

.ppk-pdp__desc a {
    font-weight: 700;
    color: var(--ppk-header-light);
    text-decoration: underline;
}

/* Aufzaehlungen: 1.4 Zeilenhoehe und 8px Abstand wie im Design. */
.ppk-pdp__desc ul,
.ppk-pdp__desc ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.ppk-pdp__desc li {
    margin-bottom: 8px;
    line-height: 1.4;
}

.ppk-pdp__desc hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid var(--ppk-header-neutral-300);
    opacity: 1;
}

/* --- Bestellmaske -------------------------------------------------- */

.ppk-pdp__order {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: var(--ppk-header-neutral-200);
}

.ppk-pdp__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.ppk-pdp__price-value {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
    color: var(--ppk-header-neutral-600);
}

.ppk-pdp__price-crossed {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 14px;
    color: var(--ppk-header-neutral-400);
}

.ppk-pdp__badge {
    padding: 4px 8px;
    background: var(--ppk-semantic-red);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ppk-header-neutral-100);
}

.ppk-pdp__tax {
    margin: 0;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ppk-header-neutral-600);
}

/* Mengenwahl: 40x40-Felder. Die Zustandsklassen kommen von
   ppkSelectQty() (ppk-cart.js) -- deshalb hier btn-primary /
   btn-outline-secondary neu einkleiden und nicht umbenennen.
   Die Bootstrap-Regeln des Themes muessen dafuer ueberstimmt werden. */
.ppk-pdp__qty {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ppk-pdp__qty .ppk-qty-badge {
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 0;
    border-radius: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.28px;
    line-height: 1.2;
}

.ppk-pdp__qty .ppk-qty-badge.btn-primary {
    background: linear-gradient(90deg, var(--ppk-header-blue), var(--ppk-header-light));
    color: var(--ppk-header-neutral-100);
}

.ppk-pdp__qty .ppk-qty-badge.btn-outline-secondary {
    background: var(--ppk-header-neutral-100);
    color: var(--ppk-header-neutral-400);
}

.ppk-pdp__qty .ppk-qty-badge.btn-outline-secondary:hover,
.ppk-pdp__qty .ppk-qty-badge.btn-outline-secondary:focus-visible {
    background: var(--ppk-header-neutral-300);
    color: var(--ppk-header-neutral-600);
}

.ppk-pdp__qty-input {
    width: 96px;
    height: 40px;
    padding: 8px;
    border: 1px solid var(--ppk-header-neutral-300);
    background: var(--ppk-header-neutral-100);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--ppk-header-neutral-600);
}

.ppk-pdp__hint {
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    color: var(--ppk-header-neutral-400);
}

.ppk-pdp__cart {
    width: 100%;
    margin-top: 12px;
}

/* --- Zusatzangaben (nicht im Design vorgesehen) -------------------- */

.ppk-pdp__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ppk-header-neutral-600);
}

.ppk-pdp__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: inherit;
    text-decoration: none;
}

.ppk-pdp__meta-row--muted {
    color: var(--ppk-header-neutral-400);
}

.ppk-pdp__meta-label {
    font-weight: 700;
}

.ppk-pdp__variant {
    padding: 4px 8px;
    border: 1px solid var(--ppk-header-neutral-300);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--ppk-header-neutral-600);
    text-decoration: none;
}

.ppk-pdp__variant--active {
    border-color: var(--ppk-header-brand);
    background: var(--ppk-header-brand);
    color: var(--ppk-header-neutral-100);
}

/* --- Zurueck-Band -------------------------------------------------- */

.ppk-pdp-back {
    display: flex;
    justify-content: center;
    padding: 24px clamp(16px, 5vw, 96px);
    background: var(--ppk-header-neutral-100);
}

/* --- Gestapelt unter 992px ----------------------------------------- */

@media (max-width: 991.98px) {
    .ppk-pdp__gallery,
    .ppk-pdp__info {
        flex: 1 1 100%;
    }

    .ppk-pdp__gallery {
        padding: 24px clamp(16px, 5vw, 96px);
    }

    .ppk-pdp__gallery-inner {
        margin-left: 0;
        max-width: none;
    }

    .ppk-pdp__info {
        padding: 32px clamp(16px, 5vw, 96px);
    }

    .ppk-pdp__info-inner {
        max-width: none;
    }
}