/* ==========================================================================
   Designsystem LK Digital Transformations (Relaunch 2026-09)
   Schwarz / Weiß / Grau – runde Karten, schwebende Navigation, helle und
   dunkle Abschnitte im Wechsel. Wird nach tailwind.css und style.css geladen.
   ========================================================================== */

:root {
    --ds-bg: #f6f6f5;
    --ds-surface: #ffffff;
    --ds-surface-2: #efefee;
    --ds-border: #e4e4e2;
    --ds-border-strong: #cfcfcc;
    --ds-text: #0b0b0b;
    --ds-muted: #5b5b58;
    --ds-soft: #8b8b87;
    --ds-dark: #0b0b0b;
    --ds-dark-2: #151515;
    --ds-dark-border: #2a2a2a;
    --ds-dark-muted: #a3a3a0;
    --ds-radius: 1.25rem;
    --ds-radius-sm: 0.75rem;
    --ds-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
    --ds-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.05), 0 16px 40px -16px rgba(0, 0, 0, 0.22);
}

body {
    background-color: var(--ds-bg);
    color: var(--ds-text);
}

/* ---------- Layout ---------- */
.ds-container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}
@media (min-width: 768px) {
    .ds-container { padding-inline: 2rem; }
}
.ds-section { padding-block: 5rem; }
@media (min-width: 768px) {
    .ds-section { padding-block: 7rem; }
}
.ds-section--tight { padding-block: 3.5rem; }

.ds-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
    .ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .ds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ds-span-2 { grid-column: span 1; }
@media (min-width: 768px) {
    .ds-span-2 { grid-column: 1 / -1; }
}

.ds-split { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 1024px) {
    .ds-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; }
}

/* ---------- Typografie ---------- */
.ds-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ds-soft);
}
.ds-h1,
.ds-h2,
.ds-h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: inherit;
    text-wrap: balance;
}
.ds-h1 {
    font-size: clamp(2.5rem, 6.2vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}
.ds-h2 {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
}
.ds-h3 {
    font-size: 1.3rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.ds-muted-line { color: var(--ds-soft); }
.ds-lead {
    max-width: 40rem;
    margin-top: 1.25rem;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ds-muted);
}
.ds-text {
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--ds-muted);
}
.ds-head { margin-bottom: 3rem; }
.ds-head--center { text-align: center; }
.ds-head--center .ds-lead { margin-inline: auto; }
.ds-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

/* ---------- Buttons ---------- */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out-strong);
}
.ds-btn:active { transform: scale(0.97); }
.ds-btn svg { width: 1rem; height: 1rem; transition: transform 0.25s var(--ease-out-strong); }
.ds-btn--primary { background: var(--ds-text); color: #fff; }
.ds-btn--secondary { background: var(--ds-surface); color: var(--ds-text); border-color: var(--ds-border-strong); }
.ds-btn--light { background: #fff; color: var(--ds-text); }
.ds-btn--ghost-dark { background: transparent; color: #fff; border-color: #3a3a3a; }
.ds-btn--sm { min-height: 2.5rem; padding: 0.55rem 1.1rem; font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) {
    .ds-btn--primary:hover { background: #2b2b2b; }
    .ds-btn--secondary:hover { border-color: var(--ds-text); }
    .ds-btn--light:hover { background: #e9e9e7; }
    .ds-btn--ghost-dark:hover { border-color: #fff; }
    .ds-btn:hover svg { transform: translateX(3px); }
}
.ds-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.ds-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--ds-text);
}
.ds-link svg { width: 1rem; height: 1rem; transition: transform 0.25s var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine) {
    .ds-link:hover svg,
    .ds-card:hover .ds-link svg { transform: translateX(3px); }
}

/* ---------- Karten ---------- */
.ds-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out-strong);
}
@media (min-width: 768px) {
    .ds-card { padding: 2.25rem; }
}
a.ds-card { color: inherit; }
@media (hover: hover) and (pointer: fine) {
    a.ds-card:hover {
        border-color: var(--ds-border-strong);
        box-shadow: var(--ds-shadow-hover);
        transform: translateY(-3px);
    }
}
.ds-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.ds-card .ds-h3 { margin-bottom: 0.6rem; }
.ds-card__foot {
    margin-top: auto;
    padding-top: 1.5rem;
}
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--ds-surface-2);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
}
.ds-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.ds-meta span {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ds-muted);
}

.ds-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-2);
    color: var(--ds-text);
}
.ds-icon svg { width: 1.3rem; height: 1.3rem; }

/* ---------- Hero ---------- */
.ds-hero {
    position: relative;
    overflow: hidden;
    padding-top: 9rem;
    padding-bottom: 5rem;
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(0, 0, 0, 0.06), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--ds-bg) 100%);
}
.ds-hero::before {
    /* feines Raster, zum Rand hin ausgeblendet */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 30%, transparent 75%);
    pointer-events: none;
}
.ds-hero > * { position: relative; }
@media (min-width: 768px) {
    .ds-hero { padding-top: 11rem; padding-bottom: 7rem; }
}
.ds-hero__grid { display: grid; gap: 3rem; align-items: end; }
@media (min-width: 1024px) {
    .ds-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; }
}

/* Schritte-Karte (Glas-Optik) */
.ds-steps {
    padding: 1.75rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ds-steps__title {
    margin-bottom: 1.1rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ds-steps ol { display: grid; gap: 0.9rem; }
.ds-steps li { display: flex; align-items: center; gap: 0.85rem; font-size: 0.95rem; color: var(--ds-muted); }
.ds-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--ds-border-strong);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ds-text);
    background: #fff;
}

/* ---------- Dunkle Abschnitte ---------- */
.ds-dark {
    background: var(--ds-dark);
    color: #fff;
}
.ds-dark .ds-eyebrow { color: var(--ds-dark-muted); }
.ds-dark .ds-lead,
.ds-dark .ds-text { color: var(--ds-dark-muted); }
.ds-dark .ds-muted-line { color: #7a7a77; }
.ds-dark .ds-card {
    background: var(--ds-dark-2);
    border-color: var(--ds-dark-border);
    box-shadow: none;
}
.ds-dark .ds-icon { background: #222; color: #fff; }
.ds-dark .ds-num { background: #fff; border-color: #fff; color: #000; }
.ds-dark .ds-badge { background: #222; color: #fff; }
.ds-dark .ds-link { color: #fff; }

.ds-step-card .ds-num { width: 2.5rem; height: 2.5rem; font-size: 0.8rem; margin-bottom: 1.5rem; }
.ds-step-card .ds-eyebrow { margin-bottom: 0.4rem; }
.ds-result {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.5rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: #222;
    font-size: 0.78rem;
    color: #e6e6e4;
}
.ds-result svg { width: 0.9rem; height: 0.9rem; }
.ds-wide-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.5rem;
    margin-top: 1.25rem;
}
.ds-wide-card > div { flex: 1 1 18rem; }

/* ---------- Chips (Links zu Regionen/Leistungen) ---------- */
.ds-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ds-text);
    transition: border-color 0.2s ease;
}
.ds-chip svg { width: 0.9rem; height: 0.9rem; color: var(--ds-soft); }
@media (hover: hover) and (pointer: fine) {
    .ds-chip:hover { border-color: var(--ds-text); }
}

/* ---------- Blogkarten ---------- */
.ds-post { padding: 0; overflow: hidden; }
.ds-post__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ds-surface-2); position: relative; }
.ds-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine) {
    .ds-post:hover .ds-post__img img { transform: scale(1.04); }
}
.ds-post__body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem; }
.ds-post__date { margin-top: auto; padding-top: 1.25rem; font-size: 0.8rem; color: var(--ds-soft); }

/* ---------- FAQ im Kartenstil ---------- */
.ds-faq { display: grid; gap: 0.75rem; }
.ds-faq .faq-item {
    padding-inline: 1.5rem;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}
.ds-faq .faq-toggle {
    padding-block: 1.25rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ds-faq .faq-answer { font-size: 0.95rem; }

/* ---------- Vertrauensleiste ---------- */
.ds-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-top: 3rem;
    font-size: 0.8rem;
    color: #8a8a87;
}
.ds-trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.ds-trust svg { width: 0.9rem; height: 0.9rem; }

/* ---------- Navigation (schwebend) ---------- */
.ds-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding: 0.9rem 1rem;
    transition: padding 0.3s var(--ease-out-strong);
}
@media (min-width: 768px) {
    .ds-nav { padding: 1.25rem 1.5rem; }
}
.ds-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 80rem;
    margin-inline: auto;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ds-nav.is-scrolled .ds-nav__bar,
.ds-nav--solid .ds-nav__bar {
    background: rgba(255, 255, 255, 0.82);
    border-color: var(--ds-border);
    box-shadow: var(--ds-shadow);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.ds-nav__logo { display: inline-block; line-height: 0; }
.ds-nav__logo svg { width: clamp(150px, 42vw, 210px); height: auto; }
.ds-nav__links {
    display: none;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
}
@media (min-width: 900px) {
    .ds-nav__links { display: flex; }
}
.ds-nav__links a {
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ds-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.ds-nav__links a:hover { color: var(--ds-text); background: var(--ds-surface-2); }
.ds-nav__links a[aria-current="page"] { color: var(--ds-text); background: var(--ds-surface-2); }
.ds-nav__cta { display: none; }
@media (min-width: 900px) {
    .ds-nav__cta { display: inline-flex; }
}
.ds-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.75rem;
    border-radius: 999px;
    background: var(--ds-text);
    position: relative;
    z-index: 60;
}
.ds-nav__toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
@media (min-width: 900px) {
    .ds-nav__toggle { display: none; }
}
.ds-nav .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    padding: 6rem 2rem 2rem;
    background: #fff;
}
.ds-nav .mobile-menu a {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    padding-block: 0.35rem;
}
.ds-nav .mobile-menu .ds-btn {
    margin-top: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    letter-spacing: 0;
}
@media (min-width: 900px) {
    .ds-nav .mobile-menu { display: none; }
}

/* ---------- Footer (dunkel) ---------- */
.ds-footer {
    background: var(--ds-dark);
    color: var(--ds-dark-muted);
    padding-block: 4rem 2.5rem;
    border-top: 1px solid var(--ds-dark-border);
}
.ds-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
    .ds-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 0.8fr; }
}
.ds-footer__title {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}
.ds-footer ul { display: grid; gap: 0.6rem; }
.ds-footer a { font-size: 0.9rem; color: var(--ds-dark-muted); transition: color 0.2s ease; }
.ds-footer a:hover { color: #fff; }
.ds-footer__logo { display: inline-block; line-height: 0; margin-bottom: 1.25rem; }
.ds-footer__logo svg { width: 210px; height: auto; }
/* Logo invertiert: weiße Kachel mit schwarzer Schrift, weißer Firmenname */
.ds-footer__logo rect { fill: #fff; }
.ds-footer__logo polyline,
.ds-footer__logo line:not([x1="80"]) { stroke: #000; }
.ds-footer__logo text[fill="#fff"] { fill: #000; }
.ds-footer__logo text[fill="#000"] { fill: #fff; }
.ds-footer__logo line[x1="80"] { stroke: #333; }
.ds-footer__about { max-width: 22rem; font-size: 0.9rem; line-height: 1.6; }
.ds-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-dark-border);
    font-size: 0.8rem;
}
.ds-footer__social { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
.ds-footer__social svg { width: 1rem; height: 1rem; }

/* Dunkler Abschluss-Aufruf direkt über dem dunklen Footer */
.ds-cta { text-align: center; }
.ds-cta .ds-actions { justify-content: center; }
.ds-cta .ds-h2 { font-size: clamp(2.25rem, 5vw, 4rem); }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
    .ds-btn, .ds-btn svg, .ds-link svg, .ds-card, .ds-chip,
    .ds-post__img img, .ds-nav, .ds-nav__bar {
        transition-duration: 0.001ms !important;
    }
}

/* Feinschliff nach erstem Entwurf */
.ds-hero__title { max-width: 16.5em; font-size: clamp(2.5rem, 5.6vw, 4.75rem); }
.ds-hero__grid { margin-top: 2.5rem; }
.ds-hero .ds-lead { margin-top: 0; }
.ds-wide-card { flex-direction: row; }
.ds-nav.is-scrolled .ds-nav__bar,
.ds-nav--solid .ds-nav__bar { background: rgba(255, 255, 255, 0.94); }
.ds-hero { padding-bottom: 3.5rem; }
@media (min-width: 768px) { .ds-hero { padding-bottom: 4.5rem; } }
.ds-hero__grid { align-items: center; }
.ds-hero + .ds-section { padding-top: 3.5rem; }

/* ==========================================================================
   Seitenrahmen für Unterseiten
   ========================================================================== */
.ds-main { padding-bottom: 6rem; }
.ds-main:has(> .ds-cta:last-child) { padding-bottom: 0; }
.ds-hero--page { padding-bottom: 3.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) {
    .ds-hero--page { padding-top: 10rem; padding-bottom: 4.5rem; margin-bottom: 5rem; }
}
.ds-page-title { max-width: 18em; font-size: clamp(2.25rem, 5vw, 4.25rem); }
.ds-hero--page .ds-lead { margin-top: 1.5rem; }
.ds-main > .ds-cta { margin-top: 3rem; }

/* ==========================================================================
   Skin-Schicht: stellt das bestehende Tailwind-Markup der Unterseiten im
   neuen Stil dar (Karten, Buttons, Bilder, FAQ, Formulare)
   ========================================================================== */
.ds-skin main h2.font-headline,
.ds-skin main h3.font-headline { letter-spacing: -0.03em; }
.ds-skin main h2.text-4xl { letter-spacing: -0.035em; }

/* Karten */
.ds-skin main .bg-surface-container-lowest {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
}
.ds-skin main a.bg-surface-container-lowest {
    transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
    .ds-skin main a.bg-surface-container-lowest:hover,
    .ds-skin main .group.bg-surface-container-lowest:hover {
        background: var(--ds-surface);
        border-color: var(--ds-border-strong);
        box-shadow: var(--ds-shadow-hover);
        transform: translateY(-3px);
    }
}
.ds-skin main .bg-surface-container-low { background: var(--ds-surface-2); border-radius: var(--ds-radius); }
.ds-skin main .service-card::before { display: none; }
.ds-skin main .border-t.border-outline-variant\/30 { border-color: var(--ds-border); }

/* Bilder und Bildkacheln */
.ds-skin main .rounded-sm { border-radius: var(--ds-radius); }
.ds-skin main .h-80.relative.overflow-hidden,
.ds-skin main .h-96.relative.overflow-hidden,
.ds-skin main .project-card,
.ds-skin main .blog-card { border-radius: var(--ds-radius); overflow: hidden; }

/* Buttons: Pillen, normale Schreibweise */
.ds-skin main .btn-primary,
.ds-skin main a.bg-primary.text-white,
.ds-skin main button.bg-primary {
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
}
.ds-skin main .btn-primary::before { border-radius: 999px; }
.ds-skin main a.inline-flex.uppercase,
.ds-skin main a.uppercase.tracking-widest {
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
}
.ds-skin main a.border.uppercase,
.ds-skin main a[class*="border-2"] { border-radius: 999px; }

/* Kleine Kategorie-Badges (Blog) */
.ds-skin main span.bg-primary.text-white { border-radius: 999px; padding: 0.3rem 0.75rem; letter-spacing: 0.08em; }
.ds-skin .blog-filter { border-radius: 999px; }

/* Inline-Aufrufe in Blogartikeln (schwarze Box) */
.ds-skin main .bg-primary.rounded-xl { border-radius: var(--ds-radius); }
.ds-skin main .bg-primary.rounded-xl a { border-radius: 999px; text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; }

/* FAQ im Kartenstil */
.ds-skin main .faq-list { display: grid; gap: 0.75rem; }
.ds-skin main .faq-list > .faq-item {
    padding-inline: 1.5rem;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}
.ds-skin main .faq-list > .faq-item .faq-toggle { padding-block: 1.25rem; font-size: 1.05rem; }

/* Formulare: Kartenfläche, abgerundete Felder */
.ds-skin main form.bg-surface-container-lowest { padding: 2rem; }
@media (min-width: 768px) { .ds-skin main form.bg-surface-container-lowest { padding: 3rem; } }
.ds-skin main .form-input {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg);
    padding: 0.85rem 1rem;
}
.ds-skin main .form-input:focus { border-color: var(--ds-text); background: #fff; }
.ds-skin main input[type="checkbox"] { border-radius: 0.35rem; }

/* Preis-Tabelle (Preise-Seite) */
.ds-skin main table { border-collapse: separate; border-spacing: 0; }
.ds-skin main .overflow-x-auto { border-radius: var(--ds-radius); }

/* Korrekturen nach Rollout-Durchsicht */
/* Tabellen: Zellen nie einzeln runden */
.ds-skin main td,
.ds-skin main th { border-radius: 0 !important; }
.ds-skin main th.bg-primary { border-top-right-radius: var(--ds-radius) !important; }

/* Schwarze Karten (hervorgehobene Pakete, Blog-Box) */
.ds-skin main div.bg-primary:not(.absolute) { border-radius: var(--ds-radius); }

/* Etiketten in Kartenecken als Pillen */
.ds-skin main .absolute.top-0.right-0.text-xs {
    top: 1rem;
    right: 1rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

/* Große Icons als Kacheln wie auf der Startseite */
.ds-skin main .material-symbols-outlined.text-4xl.mb-6,
.ds-skin main .material-symbols-outlined.text-3xl.mb-6,
.ds-skin main .material-symbols-outlined.text-4xl.mb-8,
.ds-skin main .material-symbols-outlined.text-3xl.mb-8 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-2);
    font-size: 1.35rem;
}
.ds-skin main .bg-primary .material-symbols-outlined.text-3xl.mb-6,
.ds-skin main .bg-primary .material-symbols-outlined.text-4xl.mb-6 { background: #222; color: #fff; }

/* Button + Textlink nebeneinander auf einer Linie */
.ds-skin main a.btn-primary { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.ds-skin main a.btn-primary + a.inline-flex { vertical-align: middle; }

/* Logo-Größe einheitlich (überschreibt die alte href-abhängige Regel aus style.css) */
.ds-nav .ds-nav__logo { flex-shrink: 0; }
.ds-nav .ds-nav__logo > svg { width: clamp(200px, 60vw, 290px); height: auto; }
.ds-footer .ds-footer__logo > svg { width: 240px; height: auto; }

/* Einheitlicher Seitenrand auf dem Handy (alte Blöcke px-8 → wie .ds-container) */
@media (max-width: 767px) {
    .ds-skin main .max-w-7xl.px-8,
    .ds-skin main .max-w-3xl.px-8 { padding-inline: 1.25rem; }
}
.ds-skin main span.bg-primary.text-white { white-space: nowrap; }

/* Weiße Buttons in schwarzen Karten */
.ds-skin main div.bg-primary a.bg-white { border-radius: 999px; text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; }

/* Barrierefreiheit: kleine graue Texte mit mindestens 4.5:1 Kontrast */
.ds-eyebrow { color: #6b6b67; }
.ds-post__date { color: var(--ds-muted); }
.ds-dark .ds-eyebrow { color: var(--ds-dark-muted); }