/* ==========================================================================
   Design „Sand“ – warm, ruhig, mit feinen Goldakzenten
   Baut auf „hell“ auf: Reihenfolge app.css → themes/hell.css → themes/sand.css
   Aktivieren: config/app.php → 'design' => 'sand'

   Idee
     - helles Beige als Grund, Weiß bleibt die Hauptfläche (Karten, Kopf)
     - warme Sandtöne für zarte Flächen (Fußzeile, Hover, Hinweise)
     - Schrift in Espresso- und Brauntönen
     - Gold nur als Haarlinie und kleine Raute – nie als Fläche

   Farben anpassen: nur die Tokens im :root-Block ändern.
   ========================================================================== */

:root {
    /* Grund & Flächen */
    --c-bg: #f6efe6;             /* helles Beige */
    --c-surface: #fff;
    --c-sand: #eadcc8;           /* warmer Sand */
    --c-accent-soft: #f4ebe0;    /* zarter Sand für Flächen */
    --c-line: #eadfd1;

    /* Schrift – Espresso & Braun */
    --c-text: #4a3a30;
    --c-heading: #3b2a20;
    --c-ink: #3b2a20;
    --c-muted: #8c786a;

    /* Akzente */
    --c-accent-strong: #5c4130;  /* Espresso: Buttons, Links, Preise */
    --c-fine-gold: #c4a265;      /* feine Goldlinien & Rauten */
    --c-accent: var(--c-fine-gold);
    --c-gold: var(--c-fine-gold);
    --c-gold-dark: #9a7a45;

    --shadow-card: 0 1px 2px rgb(59 42 32 / 0.04), 0 10px 30px rgb(92 65 48 / 0.06);
    --shadow-soft: 0 1px 2px rgb(59 42 32 / 0.05), 0 6px 16px rgb(92 65 48 / 0.06);

    /* feine Raute als wiederverwendbares Ornament */
    --ornament: linear-gradient(var(--c-fine-gold), var(--c-fine-gold));
}

body { background: var(--c-bg); color: var(--c-text); }
::selection { background: var(--c-sand); color: var(--c-heading); }

/* Ornament unter Seiten- und Abschnittstiteln: ——◆—— ------------------- */
.section__title, .page-title { position: relative; padding-bottom: 0.9rem; }
.section__title::after, .page-title::after {
    content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
    width: 120px; height: 9px;
    background:
        linear-gradient(var(--c-fine-gold), var(--c-fine-gold)) left 50% / 48px 1px no-repeat,
        linear-gradient(var(--c-fine-gold), var(--c-fine-gold)) right 50% / 48px 1px no-repeat;
}
.section__title::before, .page-title::before {
    content: ""; position: absolute; left: 50%; bottom: 1px;
    width: 7px; height: 7px; translate: -50% 0; rotate: 45deg;
    border: 1px solid var(--c-fine-gold);
}
/* die bisherige Linie (hr.rule) entfällt, das Ornament ersetzt sie */
.section__title + .rule { display: none; }
.section__title + .rule + * { margin-top: 1.25rem; }

/* Abschnitte: weiß, mit hauchfeiner Goldkante oben ---------------------- */
.section--card .section__inner {
    border: 1px solid var(--c-line);
    border-top: 1px solid color-mix(in srgb, var(--c-fine-gold) 55%, var(--c-line));
}

/* Kopfbereich ------------------------------------------------------------ */
.site-header { background: color-mix(in srgb, #fff 94%, transparent); }
.site-header::before {                 /* goldene Haarlinie ganz oben */
    content: ""; display: block; height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-fine-gold) 20%, var(--c-fine-gold) 80%, transparent);
}
.navbar { border-top-color: var(--c-line); border-bottom-color: var(--c-line); }
.lang-switch__item.is-active { color: var(--c-gold-dark); }
@media (min-width: 1025px) {
    .nav__item--l1:hover > .nav__link,
    .nav__item--l1.is-current > .nav__link { color: var(--c-heading); }
    .nav__item--l1 > .nav__link::after { background: var(--c-fine-gold); }
    .nav__sub { border-top: 1px solid var(--c-fine-gold); }
    .nav__sub .nav__item:hover > .nav__link,
    .nav__sub .nav__item.is-current > .nav__link { color: var(--c-heading); }
}
@media (max-width: 1024px) {
    .nav__item.is-current > .nav__link { color: var(--c-heading); box-shadow: inset 2px 0 0 var(--c-fine-gold); }
}

/* Buttons: Espresso, Hover wird sandfarben ------------------------------ */
.button, button.button, input[type="submit"] {
    background: var(--c-accent-strong); border-color: var(--c-accent-strong); color: #fff;
}
.button:hover, button.button:hover, input[type="submit"]:hover {
    background: var(--c-accent-soft); border-color: var(--c-fine-gold); color: var(--c-heading);
}
.card .card__link.button { border-color: var(--c-fine-gold); color: var(--c-accent-strong); }
.card:hover .card__link.button { background: var(--c-accent-strong); border-color: var(--c-accent-strong); color: #fff; }

/* Links ------------------------------------------------------------------ */
a { text-decoration-color: color-mix(in srgb, var(--c-fine-gold) 70%, transparent); }
a:hover { color: var(--c-accent-strong); text-decoration-color: var(--c-fine-gold); }

/* Hero: Titel mit feinen Goldlinien links und rechts -------------------- */
.hero__caption { background: linear-gradient(to top, rgb(255 253 250 / 0.92), rgb(255 253 250 / 0)); }
.hero__title { display: inline-flex; align-items: center; gap: 1rem; }
.hero__title::before, .hero__title::after {
    content: ""; width: clamp(24px, 4vw, 56px); height: 1px; background: var(--c-fine-gold); flex: none;
}
.hero--left .hero__title::before { display: none; }
.hero-video { outline: 1px solid color-mix(in srgb, var(--c-fine-gold) 45%, transparent); outline-offset: 6px; }
.hero-video__claim { background: rgb(255 253 250 / 0.8); color: var(--c-heading); }

/* Bilder: zarter Goldrahmen mit Abstand -------------------------------- */
.media__img { outline: 1px solid color-mix(in srgb, var(--c-fine-gold) 45%, transparent); outline-offset: 6px; }
.media__figure.is-contain .media__img { outline: 0; }

/* Karten ----------------------------------------------------------------- */
.card { border-color: var(--c-line); position: relative; }
.card::after {                         /* Goldlinie wächst beim Überfahren */
    content: ""; position: absolute; left: 50%; bottom: 0; height: 2px; width: 0;
    background: var(--c-fine-gold); translate: -50% 0; transition: width 0.45s ease;
}
.card:hover::after { width: 60%; }
.card__title { color: var(--c-heading); }

/* Listen, Akkordeon, Reiter --------------------------------------------- */
.list--dot li::before {                /* kleine Raute statt Punkt */
    background: none; border: 1px solid var(--c-fine-gold); border-radius: 0; rotate: 45deg;
    width: 0.38em; height: 0.38em; top: 0.72em;
}
.list--check li::before { color: var(--c-fine-gold); }
.accordion__heading { border-bottom-color: color-mix(in srgb, var(--c-fine-gold) 50%, var(--c-line)); }
.accordion__summary:hover, .accordion__item[open] > .accordion__summary { color: var(--c-heading); }
.accordion__item[open] { background: linear-gradient(var(--c-accent-soft), transparent 90px); }
.tabs__tab:hover, .tabs__tab[aria-selected="true"] { color: var(--c-heading); border-color: var(--c-fine-gold); }
@media (min-width: 900px) {
    .tabs--side .tabs__tab:hover, .tabs--side .tabs__tab[aria-selected="true"] { color: var(--c-heading); border-right-color: var(--c-fine-gold); }
}

/* Preise ----------------------------------------------------------------- */
.prices__row { border-bottom: 1px dotted color-mix(in srgb, var(--c-fine-gold) 55%, var(--c-line)); }
.prices__amount { color: var(--c-accent-strong); }
.pricelist-toc a:hover { border-color: var(--c-fine-gold); color: var(--c-heading); }

/* Vorher/Nachher: feiner Goldring ---------------------------------------- */
.before-after img { box-shadow: 0 0 0 1px #fff, 0 0 0 2px color-mix(in srgb, var(--c-fine-gold) 60%, transparent), 0 6px 16px rgb(92 65 48 / 0.12); }

/* Zitat & Unterschrift ---------------------------------------------------- */
.quote { color: var(--c-accent-strong); }
.quote--signature { color: var(--c-gold-dark); }
.block-text.is-centered + .quote::before {
    content: ""; display: block; width: 7px; height: 7px; margin: 0 auto 0.8rem;
    border: 1px solid var(--c-fine-gold); rotate: 45deg;
}
.notice--box { background: var(--c-accent-soft); border-left: 2px solid var(--c-fine-gold); }

/* Fußzeile: Sand mit Goldlinie ----------------------------------------- */
.site-footer {
    background: var(--c-sand);
    background: linear-gradient(180deg, var(--c-accent-soft), var(--c-sand));
    border-top: 1px solid var(--c-fine-gold);
    color: var(--c-heading);
}
.site-footer__contact .icon { color: var(--c-gold-dark); }
.site-footer a { color: var(--c-heading); }
.site-footer__legal a, .site-footer__copy { color: #7a6456; }

/* Schnellkontakt --------------------------------------------------------- */
.quick-contact__item .icon { color: var(--c-gold-dark); }
@media (min-width: 1025px) {
    .quick-contact__item { border-color: color-mix(in srgb, var(--c-fine-gold) 45%, var(--c-line)); }
    .quick-contact__item:hover .icon { color: var(--c-accent-strong); }
}
@media (max-width: 1024px) {
    .quick-contact { border-top: 1px solid color-mix(in srgb, var(--c-fine-gold) 60%, transparent); }
    .quick-contact__item { color: var(--c-text); }
}

/* Formulare -------------------------------------------------------------- */
.form input:focus, .form select:focus, .form textarea:focus {
    border-color: var(--c-fine-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-fine-gold) 22%, transparent);
}
.choice:has(input:checked) { border-color: var(--c-fine-gold); }

/* Handy: Weiß überwiegt, Beige nur als Rahmen ---------------------------- */
@media (max-width: 700px) {
    body { background: #fff; }
    .section--card .section__inner { border: 0; }
    .main > .section + .section { border-top: 0; }
    .main > .section + .section .section__inner {
        padding-top: calc(var(--space) + 0.5rem);
        background: linear-gradient(90deg, transparent, var(--c-fine-gold), transparent) top center / 50% 1px no-repeat;
    }
}