/*
 Theme Name:   Naikido Child
 Theme URI:    https://naikido.at
 Description:  Divi Child Theme für naikido.at (Dynamic Divi 5 Version)
 Author:       Michael Simöl
 Template:     Divi
 Version:      1.2.0
*/

/* =============================================================================
   NAIKIDO DESIGN SYSTEM (DYNAMIC MAPPING)
   ============================================================================= */
:root {
    /* Farben aus Divi 5 Global Colors abgreifen (mit deinen alten Werten als Fallback) */
    --nk-color-yellow:       var(--gcid-primary-color, #FDBE01);      /* Naikido Gelb — Buttons, CTAs, Akzente */
    --nk-color-yellow-hover: var(--gcid-secondary-color, #C49400);    /* Gelb Hover */
    --nk-color-link:         var(--gcid-link-color, #6B3F1F);         /* Link-Farbe */
    --nk-color-link-hover:   var(--gcid-link-hover-color, #8B5A2B);   /* Link Hover */
    --nk-color-dark:         var(--gcid-heading-color, #2D2420);      /* Dunkel — Navigation, Footer */
    --nk-color-brown:        var(--gcid-body-color, #4A3B2E);         /* Braun Mittel */
    --nk-color-muted-text:   var(--gcid-e18gayof0g, #7A6B5D);         /* Muted — Fließtext, Untertitel */
    --nk-color-muted-light:  var(--gcid-ccmhxjqdfb, #9B8070);         /* Muted Hell - Fließtext auf dunklem Hintergrund */
    --nk-color-light-bg:     var(--gcid-xnnztai4dh, #FAF7F2);         /* Hintergrund Hell */
    --nk-color-sand-bg:      var(--gcid-mnb0u5o535, #EDE6DA);         /* Section Alt */
    
    /* Zusätzliche spezifische Nuancen (falls nicht in Divi angelegt, bleiben Fallbacks aktiv) */
    --nk-color-adresse-bg:   var(--gcid-adresse-bg, #3D2E29);
    --nk-color-karte-border: var(--gcid-karte-border, #D4C9B8);
    --nk-color-line-border:  var(--gcid-line-border, #C9BEA8);
}

/* =============================================================================
   GLOBAL
   ============================================================================= */
html {
    scroll-behavior: smooth;
}

/* =============================================================================
   NAVIGATION / MENÜ
   ============================================================================= */

/* Normale Menülinks */
.et_pb_menu nav ul li a {
    color: var(--nk-color-yellow) !important;
}

/* Hover */
.et_pb_menu nav ul li a:hover {
    color: var(--nk-color-yellow-hover) !important;
}

/* Aktive / aktuelle Seite */
.et_pb_menu nav ul li.current-menu-item > a,
.et_pb_menu nav ul li.current_page_item > a,
.et_pb_menu nav ul li.current-menu-ancestor > a {
    color: var(--nk-color-sand-bg) !important;
}

/* Dropdown */
.et_pb_menu nav ul ul li a {
    color: var(--nk-color-sand-bg) !important;
}

.et_pb_menu nav ul ul li a:hover {
    color: var(--nk-color-yellow) !important;
}

.et_pb_scroll_top {
    background-color: var(--nk-color-yellow) !important;
    color: var(--nk-color-dark);
    border-radius: 4px;
}

.et_pb_scroll_top:hover {
    background-color: var(--nk-color-yellow-hover);
    color: var(--nk-color-dark);
}

/* =============================================================================
   LINKS
   ============================================================================= */

.et_pb_text a,
.et_pb_blurb a {
    color: var(--nk-color-sand-bg) !important;
    text-decoration: none;
}

.et_pb_text a:hover,
.et_pb_blurb a:hover {
    color: var(--nk-color-yellow) !important;
}

/* =============================================================================
   EYEBROW-TEXT (kleine Überschrift über H2)
   ============================================================================= */

.nk-eyebrow-section {
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--nk-color-yellow);
    margin-bottom: 12px;
}

/* =============================================================================
   HERO-SEKTION (Startseite Sektion 1) — Mobile + Tablet Layout (≤1024px)
   Stand 2026-09-03 (v3): Struktur wurde im Divi-Builder ein zweites Mal
   umgebaut — jetzt 5 eigene Rows statt einer Spalte mit 7 Geschwistern:
     Row 1: Eyebrow "30 Jahre Naikido Shiatsu" + Trennlinie
     Row 2: Überschrift "Berühren. Begleiten. Verändern."
     Row 3: Unterzeile "Berufsbegleitende Shiatsu Ausbildung..."
     Row 4: Zitat-Absatz
     Row 5: beide Buttons zusammengefasst
   Gewünscht: Row 1+2 bleiben als Overlay im Bild (wie am Desktop), Row 3-5
   fließen darunter auf dunklem Grund.

   Lösung: CSS Grid statt Flex auf der Sektion. Das Bild (::before) spannt
   Grid-Row 1+2, Row 1 bekommt eine "1fr"-Spur (schluckt automatisch die
   Differenz zwischen Bildhöhe und tatsächlicher Eyebrow-Höhe), Row 2 eine
   "auto"-Spur (immer exakt Überschrift-Höhe) mit align-self:end — dadurch
   sitzen Eyebrow+Überschrift IMMER exakt am unteren Bildrand, unabhängig
   von der tatsächlichen Textlänge/Schriftgröße (kein hartcodierter Wert
   nötig, im Gegensatz zu einem festen Höhen-Offset). Row 3-5 fließen ganz
   normal in eigenen auto-Spuren darunter.

   WICHTIGE BROWSER-EIGENHEIT (live getestet): Ein ::before-Pseudo-Element
   mit aspect-ratio zwingt die Grid-Spuren, die es überspannt, NICHT
   zuverlässig zur nötigen Höhe — mit echten <div>-Elementen funktioniert
   das Spannen korrekt, mit aspect-ratio auf einem Pseudo-Element nicht.
   Deshalb hier bewusst "height: 75vw" (= 4:3 bei 100% Bildbreite) statt
   "aspect-ratio: 4/3" — mit expliziter Höhe funktioniert das Spannen.

   Zwei Bugs behoben, die unabhängig vom Foto-Crop bereits jetzt live
   bestehen (nicht erst durch diesen Fix entstanden):
   1. Divi setzt margin-top:-60px !important auf .et_pb_row_1 (Desktop-
      Feinjustierung, zieht Row 1 nach oben in Richtung Bildmitte) — würde
      im neuen Layout die Eyebrow zu weit nach oben aus dem Bild schieben.
   2. Die Buttons haben eine feste width:350px !important — bei ~390px
      Screenbreite ragen sie über den Rand hinaus.

   ACHTUNG: Bilddatei ist hier separat referenziert (wie in Divis eigener
   Regel) — bei Austausch des Hero-Fotos über den Divi-Builder muss dieser
   Pfad manuell nachgezogen werden. Relativer Pfad statt fester Domain, damit
   es auf jeder Umgebung (Produktion, lokal) funktioniert.

   WICHTIG — Scoping auf body.home (Stand 2026-09-07): .et_pb_section_1,
   .et_pb_row_1-5 etc. sind rein positionsbasierte Divi-Klassen ("1. Sektion
   auf dieser Seite"), keine seitenweit eindeutigen IDs — jede andere Seite,
   deren erster Content-Bereich zufällig ebenfalls .et_pb_section_1 ist,
   bekam sonst dieselbe Hero-Behandlung (Bild, Gradient, Grid-Layout) mit.
   Live verifiziert z.B. auf der Kontakt-Seite. Fix: alle Selektoren dieses
   Blocks mit body.home prefixen — WordPress setzt .home automatisch nur auf
   der als Startseite konfigurierten Seite.
   ============================================================================= */

@media (max-width: 1024px) {
    html body.home .et_pb_section_1 {
        display: grid !important;
        grid-template-columns: 1fr;
        /* Row 1 = flexible Spur (schluckt die "Restbild-Höhe"),
           Row 2 = exakt Überschrift-Höhe, Row 3-5 = exakt eigene Höhe */
        grid-template-rows: 1fr auto auto auto auto;
        min-height: 0 !important;
        background-image: none !important;
        background-color: var(--nk-color-dark);
        /* Divi legt zwischen den (vormals Flex-)Kindern der Sektion über
           --vertical-gap automatisch einen Abstand an — beide Formen nötig,
           da Divis eigene Regel für --vertical-gap sonst noch durchschlägt */
        gap: 0 !important;
        --vertical-gap: 0px !important;
    }

    html body.home .et_pb_section_1::before {
        content: "";
        grid-row: 1 / 3;
        grid-column: 1;
        width: 100%;
        /* height statt aspect-ratio — siehe Kommentar oben zur Grid-Spanning-
           Eigenheit von aspect-ratio auf Pseudo-Elementen. 75vw = 4:3 bei
           100% Bildbreite. */
        height: 75vw;
        /* Dezenter Verlauf am unteren Bildrand, damit die überlagerte
           Überschrift lesbar bleibt, egal was im Foto an der Stelle ist.
           Relativ zu dieser CSS-Datei:
           wp-content/themes/divi-child/ → ../../uploads/ */
        background-image:
            linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0) 65%),
            linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%),
            url("../../uploads/hero_1.jpg");
        background-size: cover;
        background-position: center;
    }

    html body.home .et_pb_row_1.et_pb_row {
        grid-row: 1;
        grid-column: 1;
        align-self: end;
        /* Bug 1 (siehe oben): Desktop-Feinjustierung neutralisieren */
        margin-top: 0 !important;
        margin-left: 0 !important;
        padding: 0 20px 45px 20px;
    }

    html body.home .et_pb_row_2.et_pb_row {
        grid-row: 2;
        grid-column: 1;
        align-self: end;
        margin-top: 0 !important;
        margin-left: 0 !important;
        padding: 0 20px 80px 20px;
    }

    html body.home .et_pb_row_3.et_pb_row {
        grid-row: 3;
        grid-column: 1;
        padding: 24px 20px 0;
    }

    html body.home .et_pb_row_4.et_pb_row {
        grid-row: 4;
        grid-column: 1;
        padding: 20px 20px;
    }

    html body.home .et_pb_row_5.et_pb_row {
        grid-row: 5;
        grid-column: 1;
        padding: 0px 20px 32px;
    }

    /* Bug 2 (siehe oben): feste 350px-Buttonbreite sprengt schmale Screens.
       Divis Selektor ist ungewöhnlich spezifisch (body #page-container ...)
       — hier 1:1 übernommen + zusätzliche Klasse für höhere Spezifität. */
    html body.home #page-container .et_pb_section .et_pb_button_0.et_pb_button,
    html body.home #page-container .et_pb_section .et_pb_button_1.et_pb_button {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* Ab Tablet-Breite etwas mehr Luft, da mehr Platz vorhanden ist */
@media (min-width: 768px) and (max-width: 1024px) {
    html body.home .et_pb_row_1.et_pb_row,
    html body.home .et_pb_row_2.et_pb_row,
    html body.home .et_pb_row_3.et_pb_row,
    html body.home .et_pb_row_4.et_pb_row,
    html body.home .et_pb_row_5.et_pb_row {
        padding-left: 40px;
        padding-right: 40px;
    }
	html body.home .et_pb_row_1.et_pb_row {
        padding-bottom: 250px;
    }

    html body.home .et_pb_row_2.et_pb_row {
        padding-bottom: 80px;
    }
    html body.home .et_pb_row_3.et_pb_row {
        padding-top: 20px;
    }
	html body.home .et_pb_row_4.et_pb_row {
        padding-top: 20px;
    }

    html body.home .et_pb_row_5.et_pb_row {
        padding-bottom: 44px;
    }
}

/* =============================================================================
   ZITAT-SEKTION (Startseite Sektion 5)
   ============================================================================= */

.nk-zitat {
    text-align: center;
    padding: 0 20px;
}

.nk-zitat-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    /* Fließend zwischen kleinstem Handy und Desktop statt fixer Breakpoint-Sprünge */
    font-size: clamp(1.35rem, 1rem + 2.2vw, 2rem);
    line-height: 1.6;
    color: var(--nk-color-light-bg);
    margin: 0 0 32px 0;
    padding: 0;
    border: none;
    quotes: none;
    overflow-wrap: break-word;
}

.nk-zitat-text::before,
.nk-zitat-text::after {
    content: none !important;
}

.nk-zitat-autor {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nk-color-yellow);
}

/* =============================================================================
   STANDORT / ADRESSE (Startseite Sektion 4)
   ============================================================================= */

.nk-adresse {
    background: var(--nk-color-adresse-bg);
    border-radius: 8px;
    border-top: 3px solid var(--nk-color-yellow);
    padding: 32px;
}

.nk-adresse-label {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nk-color-yellow);
    margin-bottom: 8px;
}

.nk-adresse-text {
    color: var(--nk-color-sand-bg);
    line-height: 1.75;
    overflow-wrap: break-word;
}

.nk-adresse-text a {
    color: var(--nk-color-sand-bg) !important;
    text-decoration: none;
    border-bottom: none;
}

.nk-adresse-text a:hover {
    color: var(--nk-color-yellow) !important;
}

/* =============================================================================
   LISTEN (allgemein — z.B. Ausbildungsseite)
   ============================================================================= */

.nk-liste {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 32px 0 !important;
}

.nk-liste li {
    list-style: none !important;
    color: var(--nk-color-brown);
    padding: 8px 0 8px 20px;
    border-bottom: 0.5px solid var(--nk-color-sand-bg);
    position: relative;
}

.nk-liste li::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 2px;
    background: var(--nk-color-yellow);
    display: block;
}

.nk-liste li::marker {
    content: "" !important;
}

/* =============================================================================
   FOOTER NAVIGATION
   ============================================================================= */

.nk-footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nk-footer-nav li {
    margin-bottom: 10px;
}

.nk-footer-nav a {
    color: var(--nk-color-sand-bg) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

.nk-footer-nav a:hover {
    color: var(--nk-color-yellow-hover) !important;
}

/* Copyright-Zeile Links */
.nk-copyright a {
    color: var(--nk-color-muted-text) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

.nk-copyright a:hover {
    color: var(--nk-color-yellow) !important;
}

/* =============================================================================
   ZWEI WEGE KARTEN (Ausbildungsseite Sektion 2)
   ============================================================================= */

.nk-weg-karte {
    background: var(--nk-color-light-bg);
    border-radius: 8px;
    border: 0.5px solid var(--nk-color-karte-border);
    border-top: 3px solid var(--nk-color-yellow);
    padding: 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nk-weg-haupt {
    background: var(--nk-color-dark);
    border-color: var(--nk-color-brown);
    border-top-color: var(--nk-color-yellow);
}

.nk-weg-label {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nk-color-yellow);
}

.nk-weg-titel {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--nk-color-light-bg);
    margin: 0;
}

.nk-weg-lehrgang .nk-weg-titel {
    color: var(--nk-color-dark);
}

.nk-weg-desc {
    color: var(--nk-color-muted-text);
    margin: 0;
    flex: 1;
}

.nk-weg-haupt .nk-weg-desc {
    color: var(--nk-color-muted-light);
}

.nk-weg-liste {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}

.nk-weg-liste li {
    list-style: none !important;
    color: var(--nk-color-muted-text);
    padding: 7px 0 7px 18px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
    position: relative;
}

.nk-weg-lehrgang .nk-weg-liste li {
    border-bottom-color: var(--nk-color-sand-bg);
    color: var(--nk-color-brown);
}

.nk-weg-liste li::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 2px;
    background: var(--nk-color-yellow);
    display: block;
}

.nk-weg-liste li::marker {
    content: "" !important;
}

.nk-weg-btn {
    display: inline-block;
    background: var(--nk-color-yellow);
    color: var(--nk-color-dark) !important;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none !important;
    border-bottom: none !important;
    text-align: center;
    transition: background 0.2s;
    margin-top: auto;
}

.nk-weg-btn:hover {
    background: var(--nk-color-yellow-hover);
    color: var(--nk-color-dark) !important;
}

.nk-weg-btn-alt {
    background: transparent;
    color: var(--nk-color-dark) !important;
    border: 1px solid var(--nk-color-dark) !important;
}

.nk-weg-btn-alt:hover {
    background: var(--nk-color-dark);
    color: var(--nk-color-light-bg) !important;
}

/* =============================================================================
   AUSBILDUNGS-HIGHLIGHTS (Ausbildungsseite Sektion 3)
   ============================================================================= */

.nk-ausb-highlights {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 8px 0 24px;
    border-top: 0.5px solid var(--nk-color-line-border);
}

.nk-ausb-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--nk-color-line-border);
}

.nk-ausb-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--nk-color-yellow);
    color: var(--nk-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-style: normal;
}

.nk-ausb-label {
    color: var(--nk-color-dark);
}

.nk-ausb-sub {
    color: var(--nk-color-muted-text);
    margin-top: 2px;
}

/* =============================================================================
   BLURB LINKS (Mehr erfahren)
   ============================================================================= */

.et_pb_blurb .et_pb_more_button {
    color: var(--nk-color-link) !important;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--nk-color-yellow);
    padding-bottom: 2px;
    text-decoration: none !important;
    transition: color 0.2s;
}

.et_pb_blurb .et_pb_more_button:hover {
    color: var(--nk-color-yellow) !important;
}

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

@media (max-width: 768px) {
    /* .nk-zitat-text font-size: siehe clamp() an der Basis-Regel weiter oben */

    .nk-weg-karte {
        padding: 24px;
    }

    .nk-ausb-row {
        gap: 12px;
        /* Icon oben ausrichten statt vertikal zentriert, falls Label+Sub auf
           schmalen Screens auf mehrere Zeilen umbricht */
        align-items: flex-start;
    }

    .nk-ausb-icon {
        margin-top: 2px;
    }

    .nk-adresse {
        padding: 24px;
    }

    .nk-shiatsu-kachel,
    .nk-naikan-frage {
        padding: 28px 20px;
    }

    .nk-stimmt-item {
        gap: 14px;
        align-items: flex-start;
    }

    .nk-stimmt-icon {
        margin-top: 2px;
    }

    .nk-legal-toc {
        padding: 16px 16px 16px 32px;
    }

    .nk-footer-legal {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* Sehr kleine Handys (z.B. iPhone SE, ältere Android-Geräte) */
@media (max-width: 380px) {
    .nk-weg-karte,
    .nk-adresse {
        padding: 18px;
    }

    .nk-shiatsu-kachel,
    .nk-naikan-frage {
        padding: 24px 16px;
    }

    .nk-weg-btn,
    .nk-btn-primary,
    .nk-btn-secondary,
    .nk-cta-btn-primary,
    .nk-cta-btn-secondary {
        max-width: 100%;
    }
}

/* Handys quer / sehr niedriger Viewport — Sektionen mit viel vertikalem
   Padding würden sonst überproportional viel vom sichtbaren Bereich fressen */
@media (max-height: 500px) and (orientation: landscape) {
    .nk-adresse,
    .nk-weg-karte {
        padding: 18px 24px;
    }

    .nk-zitat-text {
        margin-bottom: 16px;
    }
}

/* =============================================================================
   1-JAHRES-LEHRGANG (Ausbildungsseite Sektion 6)
   ============================================================================= */

.nk-ausb-highlights-gold {
    border-top-color: rgba(139, 96, 0, 0.2); /* Nuancierte Border beibehalten */
}

.nk-ausb-highlights-gold .nk-ausb-row {
    border-bottom-color: rgba(139, 96, 0, 0.2);
}

.nk-ausb-highlights-gold .nk-ausb-icon {
    background: var(--nk-color-dark);
    color: var(--nk-color-yellow);
}

.nk-ausb-highlights-gold .nk-ausb-label {
    color: var(--nk-color-dark);
}

.nk-ausb-highlights-gold .nk-ausb-sub {
    color: #6B4F00; /* Spezifischer Dunkelgold-Ton */
}

/* Button-Gruppe */
.nk-btn-gruppe {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.nk-btn-primary {
    display: inline-block;
    background: var(--nk-color-dark);
    color: var(--nk-color-light-bg) !important;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background 0.2s;
}

.nk-btn-primary:hover {
    background: var(--nk-color-link);
    color: var(--nk-color-light-bg) !important;
}

.et_pb_text .nk-btn-primary,
.et_pb_text .nk-btn-primary:link,
.et_pb_text .nk-btn-primary:visited {
    color: var(--nk-color-light-bg) !important;
    border-bottom: none !important;
}

.et_pb_text .nk-btn-primary:hover {
    color: var(--nk-color-light-bg) !important;
}

.nk-btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--nk-color-dark) !important;
    border: 1px solid var(--nk-color-dark) !important;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.2s;
}

.nk-btn-secondary:hover {
    background: var(--nk-color-link);
    color: var(--nk-color-light-bg) !important;
}

.et_pb_text .nk-btn-secondary:hover {
    color: var(--nk-color-light-bg) !important;
}

@media (max-width: 768px) {
    .nk-btn-gruppe {
        flex-direction: column;
    }
}

/* Sektion ausblenden wenn Plugin leer zurückliefert */
.nk-laufende-wrapper:empty {
    display: none;
}

.nk-laufende-wrapper:empty ~ * {
    display: none;
}

/* =============================================================================
   STIMMT SHIATSU FÜR MICH (Ausbildungsseite Sektion 7)
   ============================================================================= */

.nk-stimmt {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 0.5px solid var(--nk-color-line-border);
}

.nk-stimmt-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 0.5px solid var(--nk-color-line-border);
}

.nk-stimmt-icon {
    color: var(--nk-color-yellow);
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    width: 24px;
    text-align: center;
}

.nk-stimmt-text {
    color: var(--nk-color-brown);
    line-height: 1.6;
}

/* =============================================================================
   CTA ABSCHLUSS (Ausbildungsseite Sektion 8)
   ============================================================================= */

.nk-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.nk-cta-btn-primary {
    display: inline-block;
    background: var(--nk-color-yellow);
    color: var(--nk-color-dark) !important;
    padding: 14px 32px;
    border-radius: 4px;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background 0.2s;
}

.nk-cta-btn-primary:hover {
    background: var(--nk-color-yellow-hover);
    color: var(--nk-color-dark) !important;
}

.nk-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--nk-color-sand-bg) !important;
    border: 1px solid var(--nk-color-sand-bg) !important;
    padding: 14px 32px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s;
}

.nk-cta-btn-secondary:hover {
    background: var(--nk-color-sand-bg);
    color: var(--nk-color-dark) !important;
}

@media (max-width: 480px) {
    .nk-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* =============================================================================
   KONTAKTSEITE
   ============================================================================= */

.nk-kontakt-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 0.5px solid var(--nk-color-line-border);
    margin-bottom: 32px;
}

.nk-kontakt-block {
    padding: 16px 0;
    border-bottom: 0.5px solid var(--nk-color-line-border);
}

.nk-kontakt-label {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nk-color-yellow);
    margin-bottom: 6px;
}

.nk-kontakt-text {
    color: var(--nk-color-brown);
    line-height: 1.7;
    overflow-wrap: break-word;
}

.nk-kontakt-text a {
    color: var(--nk-color-brown) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(107,63,31,0.3) !important;
    transition: color 0.2s;
}

.nk-kontakt-text a:hover {
    color: var(--nk-color-link-hover) !important;
}

/* Divi Map Modul abrunden */
.et_pb_map_container {
    border-radius: 8px;
    overflow: hidden;
}

/* =============================================================================
   SHIATSU-SEITE — Kacheln
   ============================================================================= */
.nk-zitat-klein {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--nk-color-link);
    border-left: 3px solid var(--nk-color-yellow);
    padding-left: 16px;
    margin-top: 24px;
    line-height: 1.6;
}

.nk-shiatsu-kachel {
    background: var(--nk-color-light-bg);
    border-radius: 8px;
    border-top: 3px solid var(--nk-color-yellow);
    padding: 36px 28px;
    text-align: center;
    height: 100%;
}

.nk-shiatsu-kachel img {
    border-radius: 8px;
    border: 1px solid var(--nk-color-dark);
}

.nk-shiatsu-text {
    color: var(--nk-color-brown);
    line-height: 1.7;
    margin: 0;
}

/* =============================================================================
   NAIKAN-SEITE
   ============================================================================= */

/* 3 Fragen Kacheln */
.nk-naikan-frage {
    border-radius: 8px;
    border-top: 3px solid var(--nk-color-yellow);
    padding: 36px 28px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.nk-naikan-nr {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nk-color-yellow);
    color: var(--nk-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-style: italic;
    flex-shrink: 0;
}

.nk-naikan-frage-text {
    color: var(--nk-color-sand-bg);
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

/* Ablauf Kacheln */
.nk-naikan-ablauf {
    background: var(--nk-color-sand-bg);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nk-naikan-ablauf-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.nk-naikan-ablauf-content {
    padding: 20px;
    flex: 1;
}

.nk-naikan-ablauf-titel {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--nk-color-dark);
    margin-bottom: 8px;
}

.nk-naikan-ablauf-content p {
    color: var(--nk-color-brown);
    line-height: 1.6;
    margin: 0;
}

/* =============================================================================
   RECHTLICHE SEITEN (Impressum, Datenschutz, AGB)
   ============================================================================= */

.nk-legal {
    color: var(--nk-color-dark);
    line-height: 1.8;
}

.nk-legal h2 {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
    color: var(--nk-color-dark);
    margin-top: 40px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--nk-color-sand-bg);
}

.nk-legal p {
    color: var(--nk-color-brown);
    margin-bottom: 12px;
    font-size: 1rem;
}

/* Barrierefreies Blau für Rechtstexte belassen */
.nk-legal a,
.nk-legal a:link,
.nk-legal a:visited {
    color: #1a5276 !important;
    border-bottom: 1px solid rgba(26,82,118,0.3) !important;
    font-size: 1rem;
}

.nk-legal strong {
    color: var(--nk-color-dark);
    font-weight: 600;
}

.nk-legal-stand {
    color: var(--nk-color-muted-text);
    font-size: 0.85rem;
    margin-bottom: 32px;
}

.nk-legal-toc {
    background: var(--nk-color-light-bg);
    border-left: 3px solid var(--nk-color-yellow);
    padding: 20px 20px 20px 40px;
    margin-bottom: 32px;
    border-radius: 0 4px 4px 0;
}

.nk-legal-toc li {
    margin-bottom: 6px;
}

.nk-legal-toc a {
    color: var(--nk-color-brown) !important;
    border-bottom: none !important;
}

.nk-legal-toc a:hover {
    color: var(--nk-color-link) !important;
}

/* Footer Legal Bar */
.nk-footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.nk-footer-legal a {
    color: var(--nk-color-muted-light) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

.nk-footer-legal a:hover {
    color: var(--nk-color-yellow) !important;
}

.nk-footer-legal-sep {
    color: var(--nk-color-brown);
    font-size: 0.8rem;
}

.nk-footer-legal-copy {
    color: var(--nk-color-muted-light);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}