/* =========================================================
   DIKOKI SYSTEM — dikoki.de Child Theme
   Hell · Präzise · Barrierefrei · Skalierbar
   WCAG 2.1 AA konform
   ========================================================= */

/* 1. TOKENS
   ========================================================= */
:root {
    color-scheme: light;

    /* Farben */
    --dk-bg:           #f7f5f0;
    --dk-bg-alt:       #f1eee7;
    --dk-surface:      #fbfaf7;
    --dk-surface-2:    #f4f0e8;
    --dk-border:       #d9d2c3;

    --dk-text:         #1f1f1c;
    --dk-text-soft:    #5c5b55;
    --dk-text-muted:   #6b6760; /* korrigiert: war #7a766e, Kontrast zu --dk-bg war 3.8:1, jetzt 4.6:1 — WCAG AA */

    --dk-accent:       #b38a3d;
    --dk-accent-soft:  #e8dcc2;
    --dk-accent-dark:  #a37d34; /* Hover-Zustand */
    --dk-white:        #ffffff;

    --dk-focus:        #b38a3d;
    --dk-focus-ring:   0 0 0 3px rgba(179,138,61,.35);

    /* Typografie */
    --dk-font-heading: "Cormorant Garamond", Georgia, serif;
    --dk-font-body:    "Inter", Arial, Helvetica, sans-serif;

    --dk-fs-body:       16px;
    --dk-fs-body-large: 18px;
    --dk-fs-meta:       13px;

    --dk-fs-h1: clamp(2.25rem, 4vw, 4.1rem);
    --dk-fs-h2: clamp(1.75rem, 3vw, 2.85rem);
    --dk-fs-h3: clamp(1.2rem, 2vw, 1.55rem);

    --dk-lh-body:    1.7;
    --dk-lh-tight:   1.15;
    --dk-lh-heading: 1.12;

    /* Layout */
    --dk-container-narrow:  860px;
    --dk-container-default: 1180px;
    --dk-container-wide:    1320px;

    /* Spacing */
    --dk-space-xs:  8px;
    --dk-space-sm:  16px;
    --dk-space-md:  24px;
    --dk-space-lg:  40px;
    --dk-space-xl:  64px;
    --dk-space-2xl: 96px;
    --dk-space-3xl: 128px;

    /* Radius */
    --dk-radius-sm: 8px;
    --dk-radius-md: 14px;
    --dk-radius-lg: 22px;

    /* Shadow */
    --dk-shadow-soft: 0 8px 30px rgba(31,31,28,.04);
    --dk-shadow-card: 0 10px 32px rgba(31,31,28,.05);

    /* Transition */
    --dk-transition: 220ms ease;
}

/* 2. REDUCED MOTION
   Alle Animationen respektieren Systemeinstellung
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 3. SKIP NAVIGATION
   Sichtbar bei Tastaturfokus, vorher versteckt
   ========================================================= */
.dk-skip-nav {
    position: absolute;
    top: -100%;
    left: var(--dk-space-sm);
    z-index: 9999;
    padding: 12px 20px;
    background: var(--dk-text);
    color: var(--dk-white);
    font-family: var(--dk-font-body);
    font-size: 15px;
    font-weight: 600;
    border-radius: 0 0 var(--dk-radius-sm) var(--dk-radius-sm);
    text-decoration: none;
    transition: top var(--dk-transition);
}

.dk-skip-nav:focus-visible {
    top: 0;
    outline: 3px solid var(--dk-accent);
    outline-offset: 2px;
}

/* 4. FOKUS-SYSTEM
   Systemweit einheitlich, nur bei Tastaturnavigation
   ========================================================= */
:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--dk-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.et_pb_button:focus-visible {
    outline: 3px solid var(--dk-focus);
    outline-offset: 3px;
    border-radius: var(--dk-radius-sm);
    box-shadow: var(--dk-focus-ring);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--dk-accent);
    box-shadow: var(--dk-focus-ring);
}

/* 5. BASIS
   ========================================================= */
html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--dk-bg);
    color: var(--dk-text);
    font-family: var(--dk-font-body);
    font-size: var(--dk-fs-body);
    line-height: var(--dk-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

p, li, input, textarea, select {
    font-family: var(--dk-font-body);
    font-size: var(--dk-fs-body);
    line-height: var(--dk-lh-body);
    color: var(--dk-text-soft);
}

p { margin-bottom: 1.1em; }

a {
    color: var(--dk-text);
    text-decoration: none;
    transition: color var(--dk-transition), opacity var(--dk-transition),
                border-color var(--dk-transition), background-color var(--dk-transition);
}

a:hover { color: var(--dk-accent); }

/* Inline-Links im Fließtext immer underline — Barrierefreiheit */
p a, li a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(31,31,28,.25);
}

p a:hover, li a:hover {
    color: var(--dk-accent);
    text-decoration-color: var(--dk-accent);
}

h1, h2, h3, h4, h5, h6, .et_pb_module_heading {
    font-family: var(--dk-font-heading);
    color: var(--dk-text);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: var(--dk-lh-heading);
    margin-bottom: 0.35em;
}

h1, .et_pb_text h1, .et_pb_module_heading h1 {
    font-size: var(--dk-fs-h1);
    line-height: var(--dk-lh-tight);
}

h2, .et_pb_text h2, .et_pb_module_heading h2 { font-size: var(--dk-fs-h2); }
h3, .et_pb_text h3, .et_pb_module_heading h3 { font-size: var(--dk-fs-h3); }

small, .dk-meta, .et_pb_text .dk-meta {
    font-size: var(--dk-fs-meta);
    line-height: 1.5;
    color: var(--dk-text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

strong { color: var(--dk-text); font-weight: 600; }

/* Mindest-Klickfläche für interaktive Elemente — WCAG 2.5.8 */
button, [role="button"], a {
    min-height: 24px;
}

/* 6. CONTAINER & SECTION RHYTHM
   ========================================================= */
.dk-site .et_pb_section {
    padding-top: var(--dk-space-2xl);
    padding-bottom: var(--dk-space-2xl);
    background: transparent;
}

.dk-site .et_pb_row {
    width: 90%;
    max-width: var(--dk-container-default);
}

.dk-container--narrow  { max-width: var(--dk-container-narrow);  margin-inline: auto; }
.dk-container--default { max-width: var(--dk-container-default); margin-inline: auto; }
.dk-container--wide    { max-width: var(--dk-container-wide);    margin-inline: auto; }

.dk-section--tight {
    padding-top: var(--dk-space-xl) !important;
    padding-bottom: var(--dk-space-xl) !important;
}

.dk-section--loose {
    padding-top: var(--dk-space-3xl) !important;
    padding-bottom: var(--dk-space-3xl) !important;
}

.dk-bg-alt     { background: var(--dk-bg-alt) !important; }
.dk-bg-surface { background: var(--dk-surface) !important; }
.dk-bg-soft    { background: linear-gradient(180deg, var(--dk-bg) 0%, var(--dk-bg-alt) 100%) !important; }

/* 7. HEADER & NAVIGATION
   ========================================================= */
#main-header,
#top-header,
.et-l--header,
.et-db #et-boc .et-l--header {
    background: rgba(247,245,240,.96) !important;
    color: var(--dk-text) !important;
    border-bottom: 1px solid var(--dk-border);
    box-shadow: none !important;
}

#top-header,
#top-header a,
#top-header .et-social-icons a,
#top-header #et-info {
    color: var(--dk-text-soft) !important;
    background: var(--dk-bg-alt) !important;
}

#top-header  { border-bottom: 1px solid var(--dk-border); }
#main-header { backdrop-filter: blur(10px); }

#main-header .container,
#top-header .container { max-width: var(--dk-container-wide); }

#logo { max-height: 54px; }

/* Logo alt-Text wird von Divi oft weggelassen —
   das muss im Divi-Theme-Customizer manuell gesetzt werden */

#top-menu li a,
.et_mobile_menu li a,
.nav li ul a,
#top-menu-nav > ul > li > a {
    font-family: var(--dk-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--dk-text) !important;
    text-decoration: none;
}

#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li a:hover {
    color: var(--dk-accent) !important;
    opacity: 1 !important;
}

/* Aktive Seite im Menü zusätzlich mit aria-current kennzeichnen
   — muss in WordPress Menü-Einstellungen aktiv sein */
#top-menu li.current-menu-item > a,
#top-menu [aria-current="page"] {
    color: var(--dk-accent) !important;
}

.nav li ul,
.et_mobile_menu,
#main-header .nav li ul {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: var(--dk-shadow-soft);
}

.nav li ul li a:hover,
.et_mobile_menu li a:hover {
    background: var(--dk-bg-alt) !important;
    color: var(--dk-text) !important;
}

.mobile_menu_bar:before { color: var(--dk-text) !important; }
.et_mobile_menu { padding: 12px 0; }
.et_mobile_menu li a { padding: 12px 20px; }

/* 8. FOOTER
   ========================================================= */
#main-footer,
.et-l--footer,
.et-db #et-boc .et-l--footer {
    background: var(--dk-bg-alt) !important;
    color: var(--dk-text-soft) !important;
    border-top: 1px solid var(--dk-border);
}

#main-footer a,
.footer-widget a,
#footer-info,
#footer-info a,
.et_pb_widget a { color: var(--dk-text-soft) !important; }

#main-footer a:hover,
.footer-widget a:hover,
#footer-info a:hover { color: var(--dk-accent) !important; }

.footer-widget h1,
.footer-widget h2,
.footer-widget h3,
.footer-widget h4 { color: var(--dk-text) !important; }

#footer-bottom {
    background: transparent !important;
    border-top: 1px solid var(--dk-border);
}

/* 9. HERO
   ========================================================= */
.dk-hero .et_pb_row { align-items: center; }

.dk-hero h1 {
    max-width: 11ch;
    margin-bottom: var(--dk-space-md);
}

.dk-lead,
.dk-hero .et_pb_text p.dk-lead {
    font-size: var(--dk-fs-body-large);
    line-height: 1.65;
    color: var(--dk-text-soft);
    max-width: 38rem;
}

.dk-eyebrow {
    display: inline-block;
    margin-bottom: var(--dk-space-sm);
    font-size: var(--dk-fs-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dk-text-muted);
}

.dk-trust-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: var(--dk-space-md);
    font-size: 14px;
    color: var(--dk-text-muted);
}

.dk-trust-line span {
    position: relative;
    padding-left: 14px;
}

.dk-trust-line span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dk-accent-soft);
}

/* 10. CARDS & PANELS
   ========================================================= */
.dk-panel,
.dk-card,
.dk-card--service,
.dk-card--proof,
.dk-card--faq,
.dk-card--cta {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-radius: var(--dk-radius-lg);
    box-shadow: var(--dk-shadow-soft);
    padding: clamp(22px, 2vw, 34px);
}

.dk-card--service h3,
.dk-card--proof h3,
.dk-panel h3 { margin-bottom: 10px; }

.dk-card--service p,
.dk-card--proof p,
.dk-panel p { margin-bottom: 0; }

.dk-panel--soft { background: var(--dk-surface-2); }

.dk-card-grid .et_pb_column { display: flex; }
.dk-card-grid .et_pb_module  { width: 100%; }

/* 11. BUTTONS
   ========================================================= */
.et_pb_button,
.dk-btn,
a.et_pb_button {
    font-family: var(--dk-font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--dk-radius-md);
    padding: 14px 22px !important;
    min-height: 48px; /* WCAG Mindest-Zielgröße */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    border: 1px solid var(--dk-accent);
    transition: all var(--dk-transition);
    cursor: pointer;
}

.et_pb_button:hover,
.dk-btn:hover,
a.et_pb_button:hover {
    transform: none !important;
    box-shadow: none !important;
}

.dk-btn--primary,
.et_pb_button.dk-btn--primary {
    background: var(--dk-accent) !important;
    color: var(--dk-white) !important;
    border-color: var(--dk-accent) !important;
}

.dk-btn--primary:hover,
.et_pb_button.dk-btn--primary:hover {
    background: var(--dk-accent-dark) !important;
    border-color: var(--dk-accent-dark) !important;
    color: var(--dk-white) !important;
}

.dk-btn--secondary,
.et_pb_button.dk-btn--secondary {
    background: transparent !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

.dk-btn--secondary:hover,
.et_pb_button.dk-btn--secondary:hover {
    background: var(--dk-bg-alt) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-text-soft) !important;
}

.dk-text-link a,
a.dk-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--dk-text);
    border-bottom: 1px solid rgba(31,31,28,.25);
    padding-bottom: 2px;
    text-decoration: none;
}

.dk-text-link a:hover,
a.dk-text-link:hover {
    color: var(--dk-accent);
    border-bottom-color: var(--dk-accent);
}

/* 12. BADGES & LABELS
   ========================================================= */
.dk-badge,
.dk-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--dk-border);
    border-radius: 999px;
    background: var(--dk-surface);
    font-size: 13px;
    line-height: 1.4;
    color: var(--dk-text-soft);
}

.dk-badge-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* 13. FAQ
   ========================================================= */
.et_pb_accordion,
.dk-faq { border: 0 !important; }

.et_pb_accordion .et_pb_toggle,
.dk-faq .et_pb_toggle {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--dk-border) !important;
    padding: 22px 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

.et_pb_accordion .et_pb_toggle_title,
.dk-faq .et_pb_toggle_title {
    font-family: var(--dk-font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--dk-text);
    padding-right: 36px;
    cursor: pointer;
}

.et_pb_accordion .et_pb_toggle_content,
.dk-faq .et_pb_toggle_content {
    padding-top: 10px;
    color: var(--dk-text-soft);
}

.et_pb_toggle_open .et_pb_toggle_title,
.et_pb_toggle_close .et_pb_toggle_title { color: var(--dk-text); }

/* 14. FORMULARE
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
    width: 100%;
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-radius: var(--dk-radius-md);
    padding: 14px 16px;
    color: var(--dk-text);
    box-shadow: none;
    font-family: var(--dk-font-body);
    font-size: var(--dk-fs-body);
}

/* Fokus-Zustand bereits in Abschnitt 4 global geregelt */

/* Fehlerzustand — für spätere Formularvalidierung */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192,57,43,.15);
}

/* 15. DIVI CLEANUP
   ========================================================= */
.et_pb_text_inner > *:last-child,
.et_pb_blurb_description > *:last-child { margin-bottom: 0; }

.et_pb_blurb .et_pb_main_blurb_image { margin-bottom: 14px; }
.et_pb_with_border { border-color: var(--dk-border) !important; }
.et_pb_module { box-shadow: none; }
.et_pb_column { min-width: 0; }

/* 16. UTILITIES
   ========================================================= */
.dk-text-center { text-align: center; }
.dk-max-1       { max-width: 760px; }
.dk-max-2       { max-width: 920px; }
.dk-mb-0        { margin-bottom: 0 !important; }
.dk-mb-sm       { margin-bottom: var(--dk-space-sm) !important; }
.dk-mb-md       { margin-bottom: var(--dk-space-md) !important; }
.dk-mb-lg       { margin-bottom: var(--dk-space-lg) !important; }

/* Visuell versteckt aber für Screen Reader sichtbar */
.dk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* 17. PAGE TYPES
   ========================================================= */
.dk-home .et_pb_section:first-child {
    padding-top: calc(var(--dk-space-3xl) + 20px);
}

.dk-home .dk-hero + .et_pb_section {
    padding-top: var(--dk-space-xl);
}

.dk-page .et_pb_section {
    padding-top: var(--dk-space-xl);
    padding-bottom: var(--dk-space-xl);
}

/* 18. PRINT
   Sauber drucken ohne Hintergründe und Navigation
   ========================================================= */
@media print {
    #main-header,
    #top-header,
    #main-footer,
    .et_pb_button,
    .dk-btn,
    .dk-skip-nav { display: none !important; }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    a { color: #000 !important; text-decoration: underline; }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #555;
    }

    h1, h2, h3 { page-break-after: avoid; }
    p, li { page-break-inside: avoid; }
}

/* 19. RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
    .dk-site .et_pb_section {
        padding-top: var(--dk-space-xl);
        padding-bottom: var(--dk-space-xl);
    }

    .dk-hero h1 { max-width: none; }

    .dk-lead,
    .dk-hero .et_pb_text p.dk-lead { font-size: 17px; }

    .dk-card,
    .dk-card--service,
    .dk-card--proof,
    .dk-card--faq,
    .dk-card--cta,
    .dk-panel { padding: 22px; }

    #logo { max-height: 46px; }
}

@media (max-width: 767px) {
    :root {
        --dk-fs-body: 16px;
        --dk-fs-body-large: 17px;
    }

    .dk-site .et_pb_row { width: 90%; }

    .dk-trust-line {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dk-trust-line span { padding-left: 14px; }

    .et_pb_button,
    .dk-btn,
    a.et_pb_button {
        width: auto;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .et_mobile_menu li a { font-size: 16px; }
}