/* ===================================================================
   CIRCLEONE — Dark Theme (Kundenwunsch 08/2026)
   Lädt NACH components.css und dreht die Seite auf dunkle Flächen
   mit weißen und goldenen Schriften. Gold #C8A775 erreicht auf allen
   hier verwendeten Flächen mindestens 6,9:1 — kleine Schrift in Gold
   ist damit auf Dunkel zulässig.
   =================================================================== */

/* ── Grundflächen ────────────────────────────────────────────────── */
body {
  background: var(--surface-1);
  color: var(--text-mid);
}

.sec--paper { background: var(--surface-2); }
.sec--soft  { background: var(--surface-2); }
.sec--dark  { background: var(--surface-0); }

/* ── Typografie ──────────────────────────────────────────────────── */
h1, h2, h3, h4, .display, .h1--page, .h2, .h3, .h4 { color: var(--text-hi); }
h1, h2, .display { font-weight: var(--fw-semi); }
.lead { color: var(--text-mid); }
p, li, dd { color: var(--text-mid); }
.eyebrow { color: var(--co-gold); }
.prose strong { color: var(--text-hi); }
.prose a:not(.btn) { color: var(--co-gold); }
.link-gold { color: var(--co-gold); }
:focus-visible { outline-color: var(--co-gold); }

/* ── Header: weiß mit schwarzer Schrift, goldene Hovers (09.08.) ── */
.site-header {
  background: #FFFFFF;
  border-bottom-color: rgba(28, 30, 29, .08);
}
.site-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
          backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 12px 36px rgba(16, 18, 17, .12);
}
.nav__links > li > a,
.nav__links > li > button { color: #1C1E1D; }
.nav__links > li > a:hover,
.nav__links > li > button:hover,
.nav__links > li > a[aria-current="page"] { color: #8F6B32; }
.burger span, .burger span::before, .burger span::after { background: #1C1E1D; }
.burger[aria-expanded="true"] span { background: transparent; }

.nav__drop {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
          backdrop-filter: blur(20px) saturate(130%);
  border-color: rgba(28, 30, 29, .08);
  box-shadow: 0 24px 60px rgba(16, 18, 17, .16);
}
.nav__drop a { color: #3A3D3B; }
.nav__drop a:hover { background: rgba(200, 167, 117, .12); color: #8F6B32; }
.nav__drop small { color: #8F6B32; }

.nav__cta .btn--ghost { color: #1C1E1D; border-color: rgba(28, 30, 29, .4); }
.nav__cta .btn--ghost:hover { background: #1C1E1D; border-color: #1C1E1D; color: #fff; }
.nav__cta .btn--primary { background: var(--co-gold); border-color: var(--co-gold); color: var(--surface-0); }
.nav__cta .btn--primary:hover { background: #D8BC92; border-color: #D8BC92; }

/* ── Buttons global ──────────────────────────────────────────────── */
.btn--primary { background: var(--co-gold); border-color: var(--co-gold); color: var(--surface-0); }
.btn--primary:hover, .btn--primary:focus-visible { background: #D8BC92; border-color: #D8BC92; color: var(--surface-0); }
.btn--ghost { color: var(--text-hi); border-color: rgba(255, 255, 255, .32); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--text-hi); color: var(--surface-0); border-color: var(--text-hi); }

/* ── Karten und Flächen ──────────────────────────────────────────── */
.sec .step-card, .sec--paper .step-card, .sec--dark .step-card,
.step-card,
.price-card,
.quote,
.post-card,
.media-item,
.hours-box,
.contact-card {
  background: var(--surface-3);
  border-color: var(--line-dark);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.step-card { border-top-color: var(--co-gold); }
.price-card--feature { border-top-color: var(--co-gold); }
.notice { background: var(--surface-3); border-left-color: var(--co-gold); }
.usp { border-left-color: var(--co-gold); }

.step-card h3, .price-card h3, .quote blockquote, .post-card h3,
.hours-box h3, .media-item h3, .notice h3, .usp h3 { color: var(--text-hi); }
.price { color: var(--co-gold); }
.price small { color: var(--text-low); }
.price-card__tag, .post-card time, .media-item__meta,
.quote figcaption, .contact-card dt, .block__num { color: var(--co-gold); }
.hours th { color: var(--text-low); }
.hours td { color: var(--text-hi); }
.stars { color: var(--co-gold); }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq__item { border-bottom-color: var(--line-dark); }
.faq__q { color: var(--text-hi); }
.faq__q:hover { color: var(--co-gold); }

/* ── Formulare: dunkle Schale, dunkle Felder, weiße Schrift ─────── */
.form-shell {
  background: var(--surface-3);
  border-color: var(--line-dark);
  border-top-color: var(--co-gold);
}
.sec--dark .form-shell { background: var(--surface-3); }
.field label, .field .label { color: var(--text-mid); }
.field-control {
  background: var(--surface-1);
  border-color: var(--line-dark);
  color: var(--text-hi);
}
.field-control::placeholder { color: var(--text-low); }
.field-control:focus-visible {
  border-color: var(--co-gold);
  box-shadow: 0 0 0 3px rgba(200, 167, 117, .28);
}
select.field-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8A775' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
select.field-control option { background: var(--surface-1); color: var(--text-hi); }
.check label { color: var(--text-mid); }
.check input { accent-color: var(--co-gold); }
.form-shell .btn[type="submit"] { background: var(--co-gold); color: var(--surface-0); border-color: var(--co-gold); }
.form-shell .btn[type="submit"]:hover { background: #D8BC92; }
.form-status[data-state="success"] { color: #7FC79B; }

/* ── Tabellen, Pager, Breadcrumb ─────────────────────────────────── */
table.data th { background: var(--surface-3); color: var(--text-hi); }
table.data th, table.data td { border-bottom-color: var(--line-dark); }
table.data td { color: var(--text-mid); }
.pager a, .pager span { border-color: var(--line-dark); color: var(--text-mid); }
.pager [aria-current="page"] { background: var(--co-gold); color: var(--surface-0); border-color: var(--co-gold); }
.crumb { color: var(--text-low); }
.crumb a:hover { color: var(--co-gold); }
.crumb li + li::before { color: var(--co-gold); }

/* ── Standortleiste bleibt am dunkelsten ─────────────────────────── */
.locbar { background: var(--surface-0); }

/* ── Sticky CTA ──────────────────────────────────────────────────── */
.sticky-cta {
  background: rgba(16, 18, 17, .92);
  border-top-color: var(--line-dark);
}

/* ── Galerie-Hinweistext, Kleinkram ──────────────────────────────── */
.sec [style*="color:var(--co-graphite)"] { color: var(--text-low) !important; }
.media { background: var(--surface-3); }

/* ── Skip-Link ───────────────────────────────────────────────────── */
.skip-link { background: var(--co-gold); color: var(--surface-0); }

/* ═══════════════════════════════════════════════════════════════════
   LIQUID LOOK (Kundenwunsch 09.08.) — Glas, weiche Schatten, Tiefe
   ═══════════════════════════════════════════════════════════════════ */

/* Dunkle Sektionen bekommen weiche Gold-Glows als Tiefenebene */
.sec--dark {
  background-image:
    radial-gradient(720px 480px at 10% -5%, rgba(200, 167, 117, .10), transparent 65%),
    radial-gradient(560px 420px at 96% 105%, rgba(255, 255, 255, .05), transparent 60%);
}
.sec--soft, body > main > .sec:not(.sec--paper):not(.sec--dark) {
  background-image:
    radial-gradient(640px 440px at 88% -8%, rgba(200, 167, 117, .07), transparent 62%);
}

/* Karten: transluzente Glasflächen mit mehrschichtigen Schatten */
.step-card, .price-card, .quote, .post-card, .hours-box, .contact-card, .notice, .media-item {
  background: rgba(36, 39, 37, .62);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
          backdrop-filter: blur(18px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .42), 0 3px 10px rgba(0, 0, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.step-card:hover, .price-card:hover, .post-card:hover, .media-item:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 167, 117, .4);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .32),
              inset 0 1px 0 rgba(255, 255, 255, .08);
}
.step-card { border-top: 3px solid var(--co-gold); }
.price-card--feature { border-top: 3px solid var(--co-gold); }
.usp { background: rgba(36, 39, 37, .5); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  border-left: 3px solid var(--co-gold); padding-right: 18px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .3); }

/* Buttons: weiches Gold-Leuchten + sanfter Lift */
.btn { transition: transform .2s ease, box-shadow .25s ease, background .2s ease,
       border-color .2s ease, color .2s ease; }
.btn--primary, .btn--gold { box-shadow: 0 12px 30px rgba(200, 167, 117, .26); }
.btn--primary:hover, .btn--gold:hover { transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(200, 167, 117, .38); }
.btn--ghost:hover { transform: translateY(-2px); }

/* Schwebende Ebenen: Float, Sticky-CTA (Nav-Dropdown ist oben hell definiert) */
.wa-float__menu { background: rgba(26, 28, 27, .88);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.wa-float { box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 4px 14px rgba(200, 167, 117, .3); }
.sticky-cta { -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%); }

/* Bilder: weicher abgesetzt */
.media, .mgal__item { box-shadow: 0 24px 60px rgba(0, 0, 0, .4); border-radius: var(--r-lg); overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   WEISSE BLÖCKE (Kundenwunsch 09.08.) — sec--paper wieder hell:
   schwarze Schrift, tiefgoldene Headlines, helle Glas-Karten
   ═══════════════════════════════════════════════════════════════════ */
.sec--paper {
  background: #FBFAF7;
  background-image:
    radial-gradient(720px 460px at 8% -6%, rgba(200, 167, 117, .12), transparent 62%),
    radial-gradient(560px 420px at 100% 108%, rgba(200, 167, 117, .08), transparent 60%);
}
.sec--paper h1, .sec--paper h2 { color: #8F6B32; }
.sec--paper h3, .sec--paper h4 { color: #1C1E1D; }
.sec--paper p, .sec--paper li, .sec--paper dd { color: #3A3D3B; }
.sec--paper .lead { color: #2A2D2B; }
.sec--paper .eyebrow { color: #8F6B32; }
.sec--paper .prose strong { color: #1C1E1D; }
.sec--paper .prose a:not(.btn), .sec--paper .link-gold { color: #8F6B32; }
.sec--paper [style*="color:var(--co-graphite)"] { color: #5A5E5B !important; }

.sec--paper .step-card, .sec--paper .price-card, .sec--paper .quote,
.sec--paper .post-card, .sec--paper .hours-box, .sec--paper .contact-card,
.sec--paper .notice, .sec--paper .media-item, .sec--paper .usp {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(28, 30, 29, .08);
  box-shadow: 0 24px 60px rgba(28, 30, 29, .12), 0 2px 8px rgba(28, 30, 29, .06),
              inset 0 1px 0 rgba(255, 255, 255, .9);
}
.sec--paper .step-card:hover, .sec--paper .price-card:hover, .sec--paper .post-card:hover,
.sec--paper .media-item:hover {
  border-color: rgba(143, 107, 50, .4);
  box-shadow: 0 34px 80px rgba(28, 30, 29, .16), 0 4px 12px rgba(28, 30, 29, .08);
}
.sec--paper .step-card { border-top: 3px solid var(--co-gold); }
.sec--paper .usp { border-left: 3px solid var(--co-gold); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.sec--paper .step-card h3, .sec--paper .price-card h3, .sec--paper .post-card h3,
.sec--paper .hours-box h3, .sec--paper .media-item h3, .sec--paper .notice h3,
.sec--paper .usp h3, .sec--paper .quote blockquote { color: #1C1E1D; }
.sec--paper .price { color: #8F6B32; }
.sec--paper .price small, .sec--paper .post-card time, .sec--paper .media-item__meta { color: #6A6E6B; }
.sec--paper .price-card__tag, .sec--paper .quote figcaption, .sec--paper .contact-card dt,
.sec--paper .block__num { color: #8F6B32; }
.sec--paper .hours th { color: #6A6E6B; }
.sec--paper .hours td { color: #1C1E1D; }
.sec--paper .stars { color: #B08D4F; }
.sec--paper .faq__item { border-bottom-color: rgba(28, 30, 29, .12); }
.sec--paper .faq__q { color: #1C1E1D; }
.sec--paper .faq__q:hover { color: #8F6B32; }
.sec--paper .btn--ghost { color: #1C1E1D; border-color: rgba(28, 30, 29, .4); }
.sec--paper .btn--ghost:hover, .sec--paper .btn--ghost:focus-visible {
  background: #1C1E1D; color: #fff; border-color: #1C1E1D; }
.sec--paper table.data th { background: #F2EEE7; color: #1C1E1D; }
.sec--paper table.data th, .sec--paper table.data td { border-bottom-color: rgba(28, 30, 29, .1); }
.sec--paper table.data td { color: #3A3D3B; }
.sec--paper .media { background: #EFEBE3; }
.sec--paper .form-shell {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(28, 30, 29, .08); border-top: 3px solid var(--co-gold);
  box-shadow: 0 24px 60px rgba(28, 30, 29, .12); }
.sec--paper .field label, .sec--paper .field .label, .sec--paper .check label { color: #3A3D3B; }
.sec--paper .field-control { background: #fff; border-color: rgba(28, 30, 29, .18); color: #1C1E1D; }
.sec--paper .field-control::placeholder { color: #9A9E9A; }
.sec--paper select.field-control option { background: #fff; color: #1C1E1D; }
.sec--paper .form-status[data-state="success"] { color: #1E7A46; }

/* Rechtstexte dunkel */
.legal .legal__title, .legal h2, .legal h3 { color: var(--text-hi); }
.legal h2 { color: var(--co-gold); }
.legal p, .legal li, .legal dd { color: var(--text-mid); }
.legal a { color: var(--co-gold); }