/*
 * SIGWART Das Zahnatelier — Custom Stylesheet
 * Figma source: pD3mIirAZuwZNqp1K2P5oR / node 70:2
 * Phase 4 — Styling only
 * Structure: Root Variables → Typography → Layout → Components → Utilities
 */

/* ============================================================
   1. ROOT VARIABLES
   ============================================================ */

:root {
    /* Brand colours */
    --sw-gold:           #d3c195;
    --sw-black:          #000000;
    --sw-white:          #ffffff;
    --sw-cream:          #faf9f6;

    /* Text colours */
    --sw-text:           #4a5565;
    --sw-text-light:     #6a7282;
    --sw-text-muted:     #99a1af;
    --sw-text-white80:   rgba(255,255,255,0.8);

    /* UI colours */
    --sw-border:         #f3f4f6;
    --sw-border-dark:    rgba(255,255,255,0.1);
    --sw-icon-bg:        #faf9f6;
    --sw-overlay-light:  rgba(0,0,0,0.1);
    --sw-overlay-mid:    rgba(0,0,0,0.2);

    /* Typography */
    --sw-font:           'Inter', sans-serif;
    --sw-fw-light:       300;
    --sw-fw-regular:     400;
    --sw-fw-medium:      500;
    --sw-fw-bold:        700;

    /* Spacing */
    --sw-section-pt:     128px;
    --sw-gap-xl:         96px;
    --sw-gap-lg:         80px;
    --sw-gap-md:         64px;
    --sw-gap-sm:         32px;

    /* Borders & radius */
    --sw-radius:         6px;
    --sw-radius-pill:    9999px;

    /* Shadows */
    --sw-shadow-btn:     0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1);
    --sw-shadow-card:    0 1px 2px rgba(0,0,0,0.1);
}

/* ============================================================
   2. INTER FONT IMPORT
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

body,
.sigwart-hero,
.sigwart-about,
.sigwart-services,
.sigwart-modern,
.sigwart-gallery,
.sigwart-journey,
.sigwart-contact,
.sigwart-navbar,
.sigwart-footer {
    font-family: var(--sw-font);
}

/* ============================================================
   3. TYPOGRAPHY HELPERS
   ============================================================ */

.sigwart-label {
    font-family: var(--sw-font);
    font-size: 14px;
    font-weight: var(--sw-fw-regular);
    color: var(--sw-gold);
    letter-spacing: 2.8px;
    text-transform: uppercase;
    line-height: 20px;
    margin-bottom: 16px;
}

.sigwart-label--light {
    color: var(--sw-gold);
}

.sigwart-h2 {
    font-family: var(--sw-font);
    font-size: 48px;
    font-weight: var(--sw-fw-bold);
    line-height: 1.25;
    color: var(--sw-black);
    margin-bottom: 24px;
}

.sigwart-h2--light {
    color: var(--sw-white);
}

.sigwart-h2--display {
    font-size: 72px;
    letter-spacing: -3.6px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0;
}

.sigwart-body {
    font-family: var(--sw-font);
    font-size: 18px;
    font-weight: var(--sw-fw-light);
    line-height: 1.75;
    color: var(--sw-text);
    margin-bottom: 20px;
}

.sigwart-body-lg {
    font-family: var(--sw-font);
    font-size: 20px;
    font-weight: var(--sw-fw-light);
    line-height: 1.625;
    color: var(--sw-text-light);
}

.sigwart-body--muted {
    color: var(--sw-text-muted);
}

/* ============================================================
   4. GLOBAL SECTION LAYOUT
   ============================================================ */

.sigwart-section {
    padding-top: var(--sw-section-pt);
    padding-bottom: var(--sw-section-pt);
}

.sigwart-section__inner {
    padding-left: 24px;
    padding-right: 24px;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

.sigwart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    height: 70px;
    font-family: var(--sw-font);
    font-size: 18px;
    font-weight: var(--sw-fw-medium);
    letter-spacing: 0.9px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--sw-radius);
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.sigwart-btn--gold {
    background-color: var(--sw-gold);
    color: var(--sw-black);
    border: none;
    box-shadow: var(--sw-shadow-btn);
}

.sigwart-btn--gold:hover {
    opacity: 0.9;
    color: var(--sw-black);
    text-decoration: none;
}

.sigwart-btn--outline {
    background-color: transparent;
    color: var(--sw-white);
    border: 1px solid var(--sw-white);
    box-shadow: var(--sw-shadow-btn);
    font-weight: var(--sw-fw-light);
}

.sigwart-btn--outline:hover {
    background-color: rgba(255,255,255,0.1);
    color: var(--sw-white);
    text-decoration: none;
}

.sigwart-btn--dark {
    background-color: var(--sw-black);
    color: var(--sw-white);
    border: none;
    height: 60px;
    padding: 0 24px;
    font-weight: var(--sw-fw-light);
}

.sigwart-btn--dark:hover {
    background-color: #1a1a1a;
    color: var(--sw-white);
    text-decoration: none;
}

.sigwart-link-underline {
    display: inline-block;
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-regular);
    color: var(--sw-black);
    text-decoration: none;
    border-bottom: 1px solid var(--sw-black);
    padding-bottom: 4px;
    transition: opacity 0.2s ease;
}

.sigwart-link-underline:hover {
    opacity: 0.7;
    color: var(--sw-black);
}

/* ============================================================
   6. NAVBAR
   ============================================================ */

.sigwart-outside-header {
    position: relative;
    z-index: 100;
}

.sigwart-navbar {
    background-color: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sw-border);
    height: 97px;
    display: flex;
    align-items: center;
}

.sigwart-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 24px;
}

.sigwart-navbar .logo-image {
    max-height: 67px;
    width: auto;
}

/* Nav links */
.sigwart-navbar .nav-link,
.sigwart-navbar .menu a {
    font-family: var(--sw-font);
    font-size: 14px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-black);
    text-decoration: none;
    padding: 0 12px;
    transition: opacity 0.2s ease;
}

.sigwart-navbar .nav-link:hover,
.sigwart-navbar .menu a:hover {
    opacity: 0.6;
}

/* Termin CTA in nav */
.sigwart-navbar .nav-cta,
.sigwart-navbar .menu .nav-cta a {
    background-color: var(--sw-black);
    color: var(--sw-white);
    padding: 12px 24px;
    border-radius: var(--sw-radius);
    font-size: 14px;
    font-weight: var(--sw-fw-light);
    height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   7. HERO SECTION
   ============================================================ */

.sigwart-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: -97px; /* pull under navbar */
}

.sigwart-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/sigwart-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.sigwart-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.35) 0%,
        rgba(0,0,0,0.55) 100%
    );
    z-index: 1;
}

.sigwart-hero__content {
    position: relative;
    z-index: 2;
    padding-top: 130px; /* clear navbar */
}

.sigwart-hero__label {
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-white80);
    letter-spacing: 3.2px;
    text-transform: uppercase;
    margin-bottom: 24px;
    line-height: 24px;
}

.sigwart-hero__logo-wrap {
    margin-bottom: 32px;
}

.sigwart-hero__logo-img {
    max-width: 696px;
    height: auto;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.15));
}

.sigwart-hero__doctor {
    border-left: 2px solid var(--sw-gold);
    padding: 8px 0 8px 26px;
    margin-bottom: 48px;
}

.sigwart-hero__doctor-name {
    font-family: var(--sw-font);
    font-size: 30px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-white);
    line-height: 36px;
    margin-bottom: 8px;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.12));
}

.sigwart-hero__doctor-title {
    font-family: var(--sw-font);
    font-size: 18px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-white80);
    letter-spacing: 0.45px;
    line-height: 28px;
    margin-bottom: 0;
}

.sigwart-hero__cta-wrap {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

/* ============================================================
   8. ABOUT SECTION
   ============================================================ */

.sigwart-about {
    background-color: var(--sw-white);
}

.sigwart-about__row {
    gap: 0;
    margin-bottom: var(--sw-gap-xl);
}

.sigwart-about__image-wrap {
    height: 730px;
    overflow: hidden;
    border-radius: var(--sw-radius);
}

.sigwart-about__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sigwart-about__text {
    max-width: 584px;
}

.sigwart-about__text .sigwart-h2 {
    margin-top: 16px;
}

/* Feature cards */
.sigwart-card {
    background-color: var(--sw-white);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    padding: 32px;
    height: 100%;
    box-shadow: var(--sw-shadow-card);
    transition: box-shadow 0.2s ease;
}

.sigwart-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.sigwart-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--sw-icon-bg);
    border-radius: var(--sw-radius-pill);
    margin-bottom: 24px;
}

.sigwart-card__icon {
    width: 24px;
    height: 24px;
}

.sigwart-card__title {
    font-family: var(--sw-font);
    font-size: 20px;
    font-weight: var(--sw-fw-bold);
    color: var(--sw-black);
    line-height: 28px;
    margin-bottom: 12px;
}

.sigwart-card__text {
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-light);
    line-height: 26px;
    margin-bottom: 0;
}

/* ============================================================
   9. SERVICES SECTION
   ============================================================ */

.sigwart-services {
    background-color: var(--sw-white);
}

.sigwart-services__header {
    border-bottom: none;
}

/* Service item — top border style */
.sigwart-service-item {
    border-top: 1px solid var(--sw-black);
    padding: 32px 32px 32px 0;
    height: 100%;
}

.sigwart-service-item__title {
    font-family: var(--sw-font);
    font-size: 30px;
    font-weight: var(--sw-fw-bold);
    color: var(--sw-gold);
    line-height: 36px;
    margin-bottom: 16px;
}

.sigwart-service-item__text {
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-light);
    line-height: 26px;
    margin-bottom: 24px;
}

.sigwart-service-item__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sw-font);
    font-size: 14px;
    font-weight: var(--sw-fw-medium);
    color: var(--sw-black);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sigwart-service-item__link:hover {
    opacity: 0.6;
    color: var(--sw-black);
}

.sigwart-service-item__arrow {
    width: 16px;
    height: 16px;
}

/* ============================================================
   10. MODERN / ANXIETY SECTION
   ============================================================ */

.sigwart-modern {
    background-color: var(--sw-white);
}

.sigwart-modern__image-wrap {
    position: relative;
    height: 540px;
    border-radius: var(--sw-radius);
    overflow: hidden;
}

.sigwart-modern__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sigwart-modern__image-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--sw-overlay-light);
    border-radius: var(--sw-radius);
}

.sigwart-modern__text {
    max-width: 584px;
}

.sigwart-modern__text .sigwart-h2 {
    margin-top: 16px;
}

/* Checklist */
.sigwart-checklist {
    list-style: none;
    padding: 0;
    margin: 32px 0 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sigwart-checklist__item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--sw-font);
    font-size: 18px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-black);
    line-height: 28px;
}

.sigwart-checklist__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ============================================================
   11. GALLERY SECTION
   ============================================================ */

.sigwart-gallery {
    background-color: var(--sw-black);
    padding-top: var(--sw-section-pt);
    padding-bottom: var(--sw-section-pt);
}

.sigwart-gallery__header {
    margin-bottom: var(--sw-gap-lg);
    max-width: 672px;
}

/* Masonry-style grid using CSS columns */
.sigwart-gallery__grid {
    columns: 4;
    column-gap: 10px;
}

.sigwart-gallery__item {
    break-inside: avoid;
    position: relative;
    border-radius: var(--sw-radius);
    overflow: hidden;
    margin-bottom: 10px;
}

.sigwart-gallery__image {
    width: 100%;
    display: block;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
    object-fit: cover;
}

.sigwart-gallery__item-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--sw-overlay-mid);
    transition: background-color 0.3s ease;
}

.sigwart-gallery__item:hover .sigwart-gallery__image {
    opacity: 1;
    transform: scale(1.02);
}

.sigwart-gallery__item:hover .sigwart-gallery__item-overlay {
    background-color: rgba(0,0,0,0.05);
}

/* Vary heights for masonry feel */
.sigwart-gallery__item--1 .sigwart-gallery__image { height: 380px; }
.sigwart-gallery__item--2 .sigwart-gallery__image { height: 280px; }
.sigwart-gallery__item--3 .sigwart-gallery__image { height: 320px; }
.sigwart-gallery__item--4 .sigwart-gallery__image { height: 450px; }
.sigwart-gallery__item--5 .sigwart-gallery__image { height: 300px; }

/* ============================================================
   12. JOURNEY SECTION
   ============================================================ */

.sigwart-journey {
    background-color: var(--sw-cream);
}

.sigwart-journey__header {
    margin-bottom: var(--sw-gap-md);
    max-width: 672px;
    margin-left: auto;
    margin-right: auto;
}

.sigwart-journey__header .sigwart-label {
    display: block;
    text-align: center;
}

.sigwart-journey__intro {
    color: var(--sw-text-light);
    max-width: 672px;
    text-align: center;
    margin-bottom: 0;
}

/* Steps row */
.sigwart-journey__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-top: 8px;
}

/* Connecting line between steps */
.sigwart-journey__connector {
    position: absolute;
    top: 32px;
    left: calc(12.5% + 32px);
    right: calc(12.5% + 32px);
    height: 1px;
    background-color: #e5e7eb;
    z-index: 0;
}

.sigwart-journey__step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.sigwart-journey__icon-wrap {
    width: 64px;
    height: 64px;
    background-color: var(--sw-white);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.sigwart-journey__icon {
    width: 24px;
    height: 24px;
}

.sigwart-journey__step-label {
    font-family: var(--sw-font);
    font-size: 12px;
    font-weight: var(--sw-fw-bold);
    color: var(--sw-gold);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sigwart-journey__step-title {
    font-family: var(--sw-font);
    font-size: 20px;
    font-weight: var(--sw-fw-bold);
    color: var(--sw-black);
    line-height: 28px;
    margin-bottom: 12px;
}

.sigwart-journey__step-text {
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-light);
    line-height: 26px;
    margin-bottom: 0;
}

/* ============================================================
   13. CONTACT SECTION
   ============================================================ */

.sigwart-contact {
    background-color: var(--sw-white);
}

.sigwart-contact__info {
    max-width: 584px;
    padding-right: 48px;
}

.sigwart-contact__info .sigwart-h2 {
    margin-top: 16px;
}

.sigwart-contact__doctor-card {
    background-color: var(--sw-cream);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    padding: 24px;
    margin: 32px 0;
}

.sigwart-contact__doctor-name {
    font-family: var(--sw-font);
    font-size: 20px;
    font-weight: var(--sw-fw-bold);
    color: var(--sw-black);
    line-height: 28px;
    margin-bottom: 4px;
}

.sigwart-contact__doctor-specialty {
    font-family: var(--sw-font);
    font-size: 14px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-gold);
    line-height: 20px;
    margin-bottom: 0;
}

.sigwart-contact__details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sigwart-contact__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sigwart-contact__item-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 4px;
}

.sigwart-contact__item-label {
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-bold);
    color: var(--sw-black);
    line-height: 24px;
    margin-bottom: 4px;
}

.sigwart-contact__item-text {
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-light);
    line-height: 24px;
    margin-bottom: 0;
}

.sigwart-contact__item-link {
    text-decoration: none;
    transition: color 0.2s ease;
}

.sigwart-contact__item-link:hover {
    color: var(--sw-black);
}

/* Map / right image */
.sigwart-contact__map-wrap {
    height: 100%;
    min-height: 560px;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    overflow: hidden;
}

.sigwart-contact__map {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   14. FOOTER
   ============================================================ */

#container_footer.container_footer,
.sigwart-footer {
    background-color: var(--sw-black);
    border-top: 1px solid var(--sw-border-dark);
    padding-top: 81px;
    padding-bottom: 0;
}

#container_footer .wrapper960 {
    max-width: 1280px;
    padding-left: 24px;
    padding-right: 24px;
}

/* Footer logo */
#container_footer .footerlogo img,
#container_footer .footer-logo-image {
    max-height: 78px;
    width: auto;
    margin-bottom: 24px;
}

/* Footer tagline */
#container_footer .footermeta {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 64px;
    align-items: start;
    padding-bottom: 64px;
}

#container_footer .copyright p {
    font-family: var(--sw-font);
    font-size: 14px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-muted);
    line-height: 20px;
}

/* Footer nav */
#container_footer .footermenu a,
#container_footer .footermenu li {
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-muted);
    text-decoration: none;
    line-height: 24px;
    transition: color 0.2s ease;
}

#container_footer .footermenu a:hover {
    color: var(--sw-white);
}

/* ============================================================
   14b. FOOTER — SIGWART STRUCTURE
   ============================================================ */

.sigwart-footer__inner {
    padding-bottom: 0;
}

.sigwart-footer__top {
    display: grid;
    grid-template-columns: 1fr 272px 272px;
    gap: 64px;
    padding-bottom: 64px;
}

.sigwart-footer__logo {
    max-height: 78px;
    width: auto;
    margin-bottom: 24px;
    display: block;
}

.sigwart-footer__tagline {
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-muted);
    line-height: 26px;
    margin-bottom: 16px;
    max-width: 384px;
}

.sigwart-footer__address {
    font-family: var(--sw-font);
    font-size: 14px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-light);
    line-height: 20px;
    margin-bottom: 0;
}

.sigwart-footer__col-label {
    font-family: var(--sw-font);
    font-size: 12px;
    font-weight: var(--sw-fw-bold);
    color: var(--sw-gold);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.sigwart-footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sigwart-footer__nav-list a {
    font-family: var(--sw-font);
    font-size: 16px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sigwart-footer__nav-list a:hover {
    color: var(--sw-white);
}

/* Footer bottom bar */
.sigwart-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--sw-border-dark);
    padding: 32px 0;
}

.sigwart-footer__copyright {
    font-family: var(--sw-font);
    font-size: 14px;
    font-weight: var(--sw-fw-light);
    color: var(--sw-text-light);
    line-height: 20px;
    margin-bottom: 0;
}

.sigwart-footer__totop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--sw-radius);
    color: var(--sw-white);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sigwart-footer__totop:hover {
    border-color: rgba(255,255,255,0.5);
    background-color: rgba(255,255,255,0.05);
    color: var(--sw-white);
}

/* ============================================================
   15. UTILITY CLASSES
   ============================================================ */

/* Remove default wrappers around sigwart sections */
.sigwart-outside-header + * {
    margin-top: 0;
}

/* Ensure wrapper960 doesn't constrain full-width sections */
.sigwart-hero .container-xxl,
.sigwart-gallery .container-xxl {
    max-width: 1725px;
}

/* ============================================================
   16. RESPONSIVE — PHASE 6
   Mobile-first. Bootstrap breakpoints only.
   ============================================================ */

/* ---- xs / base (< 576px) --------------------------------- */

:root {
    --sw-section-pt: 64px;
}

.sigwart-h2             { font-size: 32px; }
.sigwart-h2--display    { font-size: 40px; letter-spacing: -1px; }
.sigwart-body           { font-size: 16px; }
.sigwart-body-lg        { font-size: 17px; }

/* Hero */
.sigwart-hero           { min-height: 100svh; }
.sigwart-hero__logo-img { max-width: 90vw; }
.sigwart-hero__doctor-name { font-size: 22px; }
.sigwart-hero__cta-wrap { flex-direction: column; gap: 12px; }
.sigwart-btn            { height: 56px; font-size: 15px; width: 100%; }
.sigwart-btn--dark      { width: auto; }

/* About */
.sigwart-about__image-wrap { height: 260px; border-radius: var(--sw-radius); }
.sigwart-about__text    { padding-left: 0 !important; margin-top: 24px; }
.sigwart-about__row     { margin-bottom: 48px; }

/* Services */
.sigwart-service-item   { padding: 24px 0 24px 0; }

/* Modern */
.sigwart-modern__image-wrap { height: 280px; }
.sigwart-modern__text   { padding-left: 0 !important; margin-top: 24px; }

/* Gallery — single column on xs */
.sigwart-gallery__grid  { columns: 1; }
.sigwart-gallery__item--1 .sigwart-gallery__image,
.sigwart-gallery__item--2 .sigwart-gallery__image,
.sigwart-gallery__item--3 .sigwart-gallery__image,
.sigwart-gallery__item--4 .sigwart-gallery__image,
.sigwart-gallery__item--5 .sigwart-gallery__image { height: 220px; }

/* Journey */
.sigwart-journey__steps { grid-template-columns: 1fr; gap: 40px; }
.sigwart-journey__connector { display: none; }

/* Contact */
.sigwart-contact__info  { padding-right: 0; }
.sigwart-contact__map-wrap { min-height: 280px; margin-top: 32px; }

/* Footer */
.sigwart-footer__top    { grid-template-columns: 1fr; gap: 40px; }
.sigwart-footer__bottom { flex-direction: column; gap: 16px; text-align: center; }

/* ---- sm (≥ 576px) ---------------------------------------- */

@media (min-width: 576px) {
    .sigwart-h2         { font-size: 36px; }
    .sigwart-h2--display { font-size: 52px; }
    .sigwart-hero__cta-wrap { flex-direction: row; }
    .sigwart-btn        { width: auto; }
    .sigwart-gallery__grid { columns: 2; }
}

/* ---- md (≥ 768px) ---------------------------------------- */

@media (min-width: 768px) {
    :root { --sw-section-pt: 80px; }

    .sigwart-h2         { font-size: 40px; }
    .sigwart-h2--display { font-size: 60px; }

    .sigwart-about__image-wrap { height: 480px; }
    .sigwart-modern__image-wrap { height: 400px; }

    .sigwart-gallery__grid { columns: 3; }

    .sigwart-journey__steps { grid-template-columns: repeat(2, 1fr); }
    .sigwart-journey__connector { display: none; }

    .sigwart-footer__top { grid-template-columns: 1fr 1fr; }
    .sigwart-footer__bottom { flex-direction: row; text-align: left; }
}

/* ---- lg (≥ 992px) ---------------------------------------- */

@media (min-width: 992px) {
    :root { --sw-section-pt: 96px; }

    .sigwart-h2         { font-size: 48px; }
    .sigwart-h2--display { font-size: 64px; }

    .sigwart-about__image-wrap { height: 600px; }
    .sigwart-about__text { padding-left: 3rem !important; }

    .sigwart-modern__image-wrap { height: 480px; }
    .sigwart-modern__text { padding-left: 3rem !important; }

    .sigwart-gallery__grid { columns: 4; }

    .sigwart-journey__steps { grid-template-columns: repeat(4, 1fr); }
    .sigwart-journey__connector { display: block; }

    .sigwart-contact__info { padding-right: 48px; }
    .sigwart-contact__map-wrap { margin-top: 0; }

    .sigwart-footer__top { grid-template-columns: 1fr 272px 272px; }
}

/* ---- xl (≥ 1200px) --------------------------------------- */

@media (min-width: 1200px) {
    :root { --sw-section-pt: 112px; }

    .sigwart-h2--display { font-size: 72px; letter-spacing: -3.6px; }
    .sigwart-about__image-wrap { height: 680px; }
}

/* ---- xxl (≥ 1400px) -------------------------------------- */

@media (min-width: 1400px) {
    :root { --sw-section-pt: 128px; }

    .sigwart-about__image-wrap { height: 730px; }
    .sigwart-modern__image-wrap { height: 540px; }

    .sigwart-hero__doctor-name  { font-size: 30px; }
}

/* ---- Mobile navigation toggle ---------------------------- */

@media (max-width: 991.98px) {
    .sigwart-navbar {
        height: 72px;
    }
    .sigwart-navbar .nav-link,
    .sigwart-navbar .menu a {
        font-size: 16px;
        padding: 10px 0;
    }
    .sigwart-navbar .nav-cta {
        margin-top: 12px;
        width: 100%;
        justify-content: center;
    }
    .sigwart-hero {
        margin-top: -72px;
    }
    .sigwart-hero__content {
        padding-top: 100px;
    }
}

/* ---- Print ------------------------------------------------ */

@media print {
    .sigwart-hero__bg,
    .sigwart-hero__overlay,
    .sigwart-gallery,
    .sigwart-footer__totop { display: none; }
    .sigwart-hero { min-height: auto; padding: 40px 0; }
    .sigwart-hero__content { color: #000; }
}


/* ================================================================
   SW GRID — j51 BlockHelper Integration
   Echte HTML-Struktur:
   .top-Xa[style="max-width:X%"] > .module > .module_surround
     > (.module_header) + .module_content > .mod-custom > h3/p/img
   ================================================================ */

/* --- Section-Wrapper --- */
.sw-section {
  padding-top: var(--sw-section-pt);
  padding-bottom: var(--sw-section-pt);
}

.sw-section--showcase {
  background: var(--sw-black);
  color: var(--sw-white);
  padding-top: 0;
  padding-bottom: 0;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sw-section--article {
  background: var(--sw-cream);
}

.sw-section--base {
  background: var(--sw-border);
  padding-top: calc(var(--sw-section-pt) * 0.5);
  padding-bottom: calc(var(--sw-section-pt) * 0.5);
}

.sw-breadcrumb {
  padding: 0.75rem 0;
  background: var(--sw-cream);
  border-bottom: 1px solid var(--sw-border);
}

/* --- BlockHelper: äußerer Wrapper --- */
.block_holder {
  padding: 0 !important;
  margin: 0;
}

/* --- BlockHelper: Flex-Zeile ---
   WICHTIG: max-width via Inline-Style wird überschrieben,
   damit CSS gap (2rem) korrekt funktioniert.
   flex: 1 1 0  →  gleichmäßige Verteilung egal ob 2,3,4 Module
   ---------------------------------------------------------------- */
.block_holder_margin {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Spalten-Divs: inline max-width überschreiben, flex-grow nutzen */
.block_holder_margin > div[class*="showcase-"],
.block_holder_margin > div[class*="top-"],
.block_holder_margin > div[class*="bottom-"],
.block_holder_margin > div[class*="base-"] {
  flex: 1 1 0 !important;
  max-width: 100% !important;   /* override BlockHelper inline-style */
  min-width: 0;
  box-sizing: border-box;
}

/* clear-Div des BlockHelper ausblenden */
.block_holder_margin > div.clear {
  display: none !important;
}

/* .module-Wrapper (direkt in Spalte) */
.block_holder_margin > div > .module {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Modul-Surround */
.block_holder_margin > div > .module > .module_surround {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Modul-Titel (module_header) immer ausblenden */
.block_holder_margin .module_header,
.block_holder_margin .module_title {
  display: none !important;
}

/* Modul-Inhalt */
.block_holder_margin > div > .module > .module_surround > .module_content {
  flex: 1;
}

/* mod-custom: volle Höhe */
.block_holder_margin .mod-custom {
  height: 100%;
}

/* ================================================================
   SW TYPOGRAFIE — h1–h6, p, a in Modulen
   ================================================================ */

.module_content h1,
.module_content h2,
.module_content h3,
.module_content h4,
.module_content h5,
.module_content h6 {
  font-family: var(--sw-font);
  color: var(--sw-black);
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}

.module_content h1 { font-size: clamp(2rem,   4vw, 3.5rem); }
.module_content h2 { font-size: clamp(1.5rem,  3vw, 2.5rem); }
.module_content h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.module_content h4 { font-size: 1.25rem; }
.module_content h5 { font-size: 1.1rem; }

/* h6 = Label-Stil (Gold, Caps) */
.module_content h6 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sw-gold);
  margin-bottom: 0.75rem;
}

.module_content p {
  font-family: var(--sw-font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sw-text);
  margin-bottom: 1rem;
}

.module_content a {
  color: var(--sw-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.module_content a:hover {
  border-bottom-color: var(--sw-gold);
}

/* Listen in Modulen */
.module_content ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
}
.module_content ul li {
  padding: 0.4rem 0 0.4rem 2rem;
  position: relative;
  color: var(--sw-text);
  font-size: 1rem;
  line-height: 1.6;
}
.module_content ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sw-gold);
  font-weight: 700;
}

/* Showcase-Bereich: heller Text */
.sw-section--showcase .module_content h1,
.sw-section--showcase .module_content h2,
.sw-section--showcase .module_content h3,
.sw-section--showcase .module_content p {
  color: var(--sw-white);
}

/* ================================================================
   SW BILDER — Responsive
   ================================================================ */

.module_content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sw-radius);
}

/* Bild als einziger Inhalt einer Spalte → Cover */
.block_holder_margin > div > .module > .module_surround > .module_content > .mod-custom > img:only-child,
.block_holder_margin > div > .module > .module_surround > .module_content > .mod-custom > p:only-child > img {
  width: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* ================================================================
   SW RESPONSIVE
   ================================================================ */

@media (max-width: 575.98px) {
  .sw-section { --sw-section-pt: 48px; }

  /* Alle Spalten: full-width auf Mobile */
  .block_holder_margin > div[class*="showcase-"],
  .block_holder_margin > div[class*="top-"],
  .block_holder_margin > div[class*="bottom-"],
  .block_holder_margin > div[class*="base-"] {
    flex-basis: 100% !important;
  }

  .block_holder_margin { gap: 1.5rem !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  /* 3+ Spalten → max. 2 pro Zeile */
  .block_holder_margin > div[class*="top-"],
  .block_holder_margin > div[class*="bottom-"],
  .block_holder_margin > div[class*="base-"] {
    flex-basis: calc(50% - 1rem) !important;
    flex-grow: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* 4+ Spalten → max. 2 pro Zeile */
  .block_holder_margin > div[class*="base-"] {
    flex-basis: calc(50% - 1rem) !important;
    flex-grow: 0 !important;
  }
}

/* ================================================================
   ZEILEN-SPEZIFISCHE STILE
   ================================================================ */

/* -- Feature-Karten (top-2): Rahmen-Card-Stil -- */
#sw-top-2 .block_holder_margin > div > .module > .module_surround > .module_content {
  background: var(--sw-white);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius);
  padding: 2rem;
  height: 100%;
  box-sizing: border-box;
}
#sw-top-2 .module_content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sw-black);
  margin-bottom: 0.75rem;
}

/* -- Leistungen (bottom-1, bottom-2): Obere schwarze Linie -- */
#sw-bottom-1 .block_holder_margin > div > .module > .module_surround > .module_content,
#sw-bottom-2 .block_holder_margin > div > .module > .module_surround > .module_content {
  padding-top: 2rem;
  border-top: 2px solid var(--sw-black);
  height: 100%;
  box-sizing: border-box;
}
#sw-bottom-1 .module_content h3,
#sw-bottom-2 .module_content h3 {
  color: var(--sw-gold);
  font-size: 1.75rem;
  font-weight: 700;
}
#sw-bottom-1 .module_content a,
#sw-bottom-2 .module_content a {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
  color: var(--sw-black);
  border-bottom: 1px solid var(--sw-black);
  padding-bottom: 2px;
}

/* -- Galerie (base-1): Dunkler Hintergrund -- */
#sw-base-1 {
  background: var(--sw-black) !important;
}
#sw-base-1 .module_content h2,
#sw-base-1 .module_content h3,
#sw-base-1 .module_content p {
  color: var(--sw-white);
}
#sw-base-1 .module_content h6 {
  color: var(--sw-gold);
}
#sw-base-1 .module_content img {
  width: calc(50% - 0.375rem);
  height: 260px;
  object-fit: cover;
  display: inline-block;
  margin: 0.25rem;
  opacity: 0.85;
  transition: opacity 0.3s;
  border-radius: var(--sw-radius);
  vertical-align: top;
}
#sw-base-1 .module_content img:first-of-type {
  width: 100%;
  height: 360px;
  margin: 0 0 0.5rem 0;
  display: block;
}
#sw-base-1 .module_content img:hover { opacity: 1; }

/* -- Journey (base-2): Cream, zentriert -- */
#sw-base-2 {
  background: var(--sw-cream) !important;
}
#sw-base-2 .block_holder_margin > div > .module > .module_surround > .module_content {
  text-align: center;
  padding-top: 2rem;
  border-top: 2px solid var(--sw-border);
  box-sizing: border-box;
}
#sw-base-2 .module_content h6 {
  color: var(--sw-gold);
  margin-bottom: 0.25rem;
}
#sw-base-2 .module_content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
#sw-base-2 .module_content p {
  font-size: 0.9375rem;
  color: var(--sw-text-light);
}

/* -- Footer Modul-Stile -- */
.sigwart-footer .module_content ul {
  list-style: none;
  padding: 0;
  margin-top: 0.75rem;
}
.sigwart-footer .module_content ul li::before {
  display: none;
}
.sigwart-footer .module_content ul li {
  padding: 0.3rem 0;
}
.sigwart-footer .module_content ul li a {
  color: var(--sw-text-muted);
  font-size: 0.9375rem;
  border-bottom: none;
}
.sigwart-footer .module_content ul li a:hover {
  color: var(--sw-gold);
}
.sigwart-footer .module_content p strong {
  display: block;
  color: var(--sw-gold);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.sigwart-footer .module_content p {
  color: var(--sw-text-muted);
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}