/* ==========================================================================
   Design „hell“ – leicht, modern, ruhig
   Wird NACH app.css geladen und überschreibt nur, was sich ändern soll.
   Aktivieren: config/app.php → 'design' => 'hell'

   Idee
     - warmes Off-White statt Grau, weiße Flächen ohne goldene Schatten
     - eine einzige Akzentfarbe (gedecktes Bronze) statt Goldtextur
     - Didone-Schrift nur für Überschriften, Fließtext serifenlos
     - Kopf, Menü, Fußzeile und Schnellkontakt hell und schlank

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

:root {
    /* Akzent – eine Farbe für alles Hervorgehobene */
    --c-accent: #9a7752;         /* Linien, Icons, Punkte */
    --c-accent-strong: #7a5c3d;  /* Buttons, Links, Preise (gut lesbar auf Weiß) */
    --c-accent-soft: #f3ede5;    /* zarte Flächen: Hover, Fußzeile, Hinweise */

    /* Grundfarben */
    --c-text: #2f2a2c;
    --c-heading: #2a2426;
    --c-ink: #2f2a2c;
    --c-muted: #7b7174;
    --c-bg: #fbfaf8;
    --c-surface: #fff;
    --c-line: #ebe5de;

    /* Alte Gold-Tokens auf den Akzent umlenken – so werden auch Stellen ruhig,
       die hier nicht einzeln überschrieben sind */
    --c-gold: var(--c-accent);
    --c-gold-dark: var(--c-accent-strong);
    --c-gold-shadow: #d9cfc4;
    --gold-texture: none;

    --c-accordion: transparent;
    --c-accordion-hover: var(--c-accent-soft);
    --c-accordion-text: var(--c-heading);

    /* Schriften */
    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --font-heading: "Antic Didone", Georgia, "Times New Roman", serif;
    --font-body: var(--font-sans);
    --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --lh: 1.7;

    /* Formen & Schatten – flach und leise */
    --radius: 14px;
    --radius-s: 8px;
    --shadow-card: 0 1px 2px rgb(47 42 44 / 0.04), 0 8px 28px rgb(47 42 44 / 0.05);
    --shadow-soft: 0 1px 2px rgb(47 42 44 / 0.05), 0 4px 14px rgb(47 42 44 / 0.05);
    --shadow-button: none;

    --logo-height: clamp(56px, 4vw + 40px, 96px);
    --logo-height-sticky: 44px;
}

/* Basis ------------------------------------------------------------------ */
body { color: var(--c-text); background: var(--c-bg); }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-variant-caps: normal;
    letter-spacing: 0.01em;
}
h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); }

a { text-decoration-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }
a:hover { color: var(--c-accent-strong); }
:focus-visible { outline-color: var(--c-accent); }
hr, .rule { border-top-color: var(--c-line); }
.rule { width: 64px; margin-inline: auto; border-top: 2px solid var(--c-accent); }

/* Alle ehemals goldenen Flächen werden neutral */
.gold { background: var(--c-surface); background-image: none; }

/* Abschnitte: weiß, ohne goldenen Schein */
.section--card .section__inner {
    box-shadow: var(--shadow-card);
    border: 1px solid color-mix(in srgb, var(--c-line) 60%, transparent);
}
.section__intro { color: var(--c-muted); }
/* Handy: keine Karten in Karten – Abschnitte stehen flach auf Weiß */
@media (max-width: 700px) {
    body { background: var(--c-surface); }
    .section--card .section__inner { box-shadow: none; border: 0; padding: 0.5rem 0; background: none; }
    .main > .section + .section { padding-top: var(--space); border-top: 1px solid var(--c-line); }
}

/* Kopfbereich ------------------------------------------------------------ */
.site-header { background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: blur(10px); }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--c-line), 0 6px 20px rgb(47 42 44 / 0.06); }

/* Sprachwahl sitzt rechts oben im Logobereich statt in eigener Leiste */
.topbar { border-top: 0; position: absolute; top: 0; right: 0; z-index: 2; background: none; }
.topbar__inner { padding: 0.6rem var(--gutter); }
.topbar__link, .lang-switch__item {
    background: none; box-shadow: none; border-radius: 999px;
    color: var(--c-muted); font-family: var(--font-sans); letter-spacing: 0.08em;
    padding: 0.15rem 0.55rem;
}
.topbar__link:hover, .lang-switch__item:hover { background: var(--c-accent-soft); color: var(--c-text); }
.lang-switch__item.is-active { background: none; color: var(--c-accent-strong); font-weight: 700; }

.logobar { background: none; padding-block: 0.6rem; }

.navbar { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.nav__link {
    font-family: var(--font-sans);
    font-weight: 500; font-variant-caps: normal;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--c-text);
}
.nav__toggle { color: var(--c-muted); }

@media (min-width: 1025px) {
    .nav__item--l1 > .nav__link {
        font-size: 0.8rem; padding: 1rem 0.9rem;
        border-radius: 0; background: none !important;
        position: relative;
    }
    .nav__item--l1.has-children > .nav__link { padding-right: 0.15rem; }
    /* feine Akzentlinie statt Fläche */
    .nav__item--l1 > .nav__link::after {
        content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.55rem;
        height: 1px; background: var(--c-accent);
        transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
    }
    .nav__item--l1.has-children > .nav__link::after { right: 0.15rem; }
    .nav__item--l1:hover > .nav__link::after,
    .nav__item--l1:focus-within > .nav__link::after,
    .nav__item--l1.is-current > .nav__link::after { transform: scaleX(1); }
    .nav__item--l1:hover > .nav__link,
    .nav__item--l1.is-current > .nav__link { color: var(--c-accent-strong); }

    .nav__sub {
        border: 1px solid var(--c-line); border-radius: var(--radius-s);
        box-shadow: 0 12px 32px rgb(47 42 44 / 0.10);
        padding: 0.4rem;
    }
    .nav__sub .nav__link {
        font-size: 0.92rem; text-transform: none; letter-spacing: 0.01em;
        padding: 0.55rem 0.8rem; border-radius: 6px;
    }
    .nav__sub .nav__item:hover > .nav__link,
    .nav__sub .nav__item:focus-within > .nav__link,
    .nav__sub .nav__item.is-current > .nav__link {
        background: var(--c-accent-soft); color: var(--c-accent-strong);
    }
}

/* Handy & Tablet: weißer, schlanker Kopf */
@media (max-width: 1024px) {
    :root { --bottom-bar: 60px; --logo-height: 52px; }
    .navbar { border-bottom: 0; }
    .topbar { top: 50%; translate: 0 -50%; right: calc(var(--gutter) + 52px); }
    .topbar__inner { padding: 0 0.25rem; }
    .logobar { padding-right: calc(var(--gutter) + 150px); }
    .menu-button .icon { width: 30px; height: 30px; }

    .nav { padding: 0.25rem 0 1rem; }
    .nav__item { border-bottom: 1px solid var(--c-line); }
    .nav__sub .nav__item:last-child { border-bottom: 0; }
    .nav__link { font-size: 0.9rem; padding: 0.95rem var(--gutter); }
    .nav__item--l1 > .nav__link:hover { color: var(--c-accent-strong); }
    .nav__item.is-current > .nav__link { color: var(--c-accent-strong); text-decoration: none; }
    .nav__sub { background: var(--c-bg); border-top: 1px solid var(--c-line); }
    .nav__sub .nav__link { font-size: 0.95rem; text-transform: none; letter-spacing: 0.01em; padding-block: 0.75rem; }
    .nav__sub--l3 { background: var(--c-accent-soft); }
    .nav__toggle .icon { width: 22px; height: 22px; }
}

/* Fußzeile --------------------------------------------------------------- */
.site-footer { background: var(--c-accent-soft); color: var(--c-text); border-top: 1px solid var(--c-line); }
.site-footer__contact { font-weight: 400; }
.site-footer__contact .icon { color: var(--c-accent); }
.site-footer a { color: var(--c-text); text-decoration-color: color-mix(in srgb, var(--c-accent) 40%, transparent); }
.site-footer a:hover { color: var(--c-accent-strong); }
.site-footer__legal a { color: var(--c-muted); }
.site-footer__copy { color: var(--c-muted); opacity: 1; }

/* Schnellkontakt --------------------------------------------------------- */
.quick-contact__item { color: var(--c-text); }
.quick-contact__item .icon { color: var(--c-accent); }
.quick-contact__text { color: var(--c-muted); text-decoration: none; }

@media (min-width: 1025px) {
    .quick-contact__item {
        border: 1px solid var(--c-line); border-right: 0;
        border-radius: 999px 0 0 999px;
        box-shadow: 0 6px 20px rgb(47 42 44 / 0.08);
        padding: 0.7rem 1rem;
        translate: 226px 0;
    }
    .quick-contact li + li { margin-top: 0.45rem; }
    .quick-contact__item .icon { width: 22px; height: 22px; color: var(--c-accent); }
    .quick-contact__item:hover, .quick-contact__item:focus-visible { background: var(--c-surface); color: var(--c-text); }
    .quick-contact__item:hover .icon, .quick-contact__item:focus-visible .icon { color: var(--c-accent-strong); }
}
@media (max-width: 1024px) {
    .quick-contact {
        background: color-mix(in srgb, var(--c-surface) 94%, transparent); backdrop-filter: blur(10px);
        border-top: 1px solid var(--c-line); box-shadow: none;
    }
    .quick-contact li + li { border-left: 0; }
    .quick-contact__item {
        background: none; color: var(--c-muted);
        font-weight: 500; font-size: 0.72rem; letter-spacing: 0.04em;
    }
    .quick-contact__item .icon { width: 22px; height: 22px; }
}

/* Buttons ---------------------------------------------------------------- */
.button, button.button, input[type="submit"] {
    font-family: var(--font-sans); font-variant-caps: normal;
    font-size: 0.85rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.8rem 1.6rem; border-radius: 999px;
    background: var(--c-accent-strong); color: #fff;
    border: 1px solid var(--c-accent-strong);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.button:hover, button.button:hover, input[type="submit"]:hover {
    background: transparent; color: var(--c-accent-strong); box-shadow: none;
}
.button--ghost { background: transparent; color: var(--c-accent-strong); }
.button--ghost:hover { background: var(--c-accent-strong); color: #fff; }

/* Hero & Video ----------------------------------------------------------- */
.hero__frame { background: var(--c-accent-soft); }
.hero__caption { background: linear-gradient(to top, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0)); }
.hero--bronze .hero__title { color: var(--c-heading); font-weight: 400; text-shadow: none; letter-spacing: 0.04em; }
.hero-video { box-shadow: none; background: var(--c-accent-soft); }
.hero-video__claim { background: rgb(255 255 255 / 0.75); backdrop-filter: blur(6px); }

/* Bild + Text ------------------------------------------------------------ */
.media__img { border-radius: var(--radius); box-shadow: none; }
.media__subtitle { font-weight: 500; color: var(--c-accent-strong); }

/* Listen ----------------------------------------------------------------- */
.list--dot li::before { background: var(--c-accent); width: 0.4em; height: 0.4em; top: 0.7em; }
.list--check li::before { color: var(--c-accent); }
.list--numbered li::before { background: var(--c-accent-strong); }

/* Karten ----------------------------------------------------------------- */
.card {
    border: 1px solid var(--c-line); border-radius: var(--radius);
    box-shadow: none; padding: 0; overflow: hidden;
    transition: box-shadow 0.35s, translate 0.35s;
}
.card:hover { box-shadow: var(--shadow-card); translate: 0 -3px; }
.card__media { border-radius: 0; }
.card__body { padding: 1.1rem 1.2rem 0.4rem; }
.card__title { font-family: var(--font-heading); font-weight: 400; font-size: 1.25rem; }
.card__text { color: var(--c-muted); }
.card__link { margin: 0.8rem 0 1.3rem; }
.card .card__link.button { background: transparent; color: var(--c-accent-strong); border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); padding: 0.6rem 1.3rem; font-size: 0.78rem; }
.card:hover .card__link.button { background: var(--c-accent-strong); border-color: var(--c-accent-strong); color: #fff; }

/* Akkordeon: Linien statt grauer Balken ---------------------------------- */
.accordion__heading {
    background: none; padding: 0 0 0.6rem; margin-bottom: 0.4rem;
    font-size: var(--fs-h2); border-bottom: 1px solid var(--c-line); border-radius: 0;
}
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__item + .accordion__item { margin-top: 0; }
.accordion__summary {
    font-family: var(--font-heading); font-weight: 400; font-variant-caps: normal;
    font-size: 1.25rem; padding: 1.05rem 0.4rem; border-radius: 0; background: none;
}
.accordion__summary:hover, .accordion__item[open] > .accordion__summary { background: none; color: var(--c-accent-strong); }
/* Plus/Minus-Symbol statt goldener Kugel */
.accordion__dot {
    position: relative; width: 26px; height: 26px;
    background: none; border: 1px solid var(--c-accent);
}
.accordion__dot::before, .accordion__dot::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 10px; height: 1.5px; background: var(--c-accent);
    translate: -50% -50%; transition: rotate 0.3s;
}
.accordion__dot::after { rotate: 90deg; }
.accordion__item[open] .accordion__dot { rotate: 0deg; }
.accordion__item[open] .accordion__dot::after { rotate: 0deg; }
@media (max-width: 600px) {
    .accordion__summary { font-size: 1.1rem; padding: 0.9rem 0.2rem; }
    .accordion__dot { width: 22px; height: 22px; }
}

/* Preise ----------------------------------------------------------------- */
.prices__title { font-variant-caps: normal; font-weight: 400; }
.prices__row { border-bottom: 1px solid var(--c-line); }
.prices__amount { color: var(--c-accent-strong); font-weight: 600; }
.pricelist-toc a { border-color: var(--c-line); color: var(--c-text); font-size: 0.9rem; }
.pricelist-toc a:hover { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-strong); }

/* Vorher/Nachher, Video, Galerie ---------------------------------------- */
.before-after img { box-shadow: 0 4px 14px rgb(47 42 44 / 0.12); }
.before-after__title, .clip__title { font-family: var(--font-heading); font-weight: 400; font-size: 1.15rem; }
.clip__video { box-shadow: none; }
.gallery__link { border-radius: var(--radius-s); }
.video-embed__play { background: var(--c-accent-strong); font-family: var(--font-sans); font-variant-caps: normal; }

/* Reiter ----------------------------------------------------------------- */
.tabs__tab {
    font-family: var(--font-sans); font-size: 0.9rem;
    border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface);
}
.tabs__tab:hover, .tabs__tab[aria-selected="true"] { background: var(--c-accent-soft); color: var(--c-accent-strong); border-color: var(--c-accent); }
@media (min-width: 900px) {
    .tabs--side .tabs__list { border-right-color: var(--c-line); }
    .tabs--side .tabs__tab {
        font-family: var(--font-heading); font-size: 1.2rem;
        border: 0; border-right: 2px solid transparent; border-radius: 0; margin-right: -1px;
        background: none;
    }
    .tabs--side .tabs__tab:hover, .tabs--side .tabs__tab[aria-selected="true"] {
        background: none; color: var(--c-accent-strong); border-right-color: var(--c-accent);
    }
}

/* Zitat, Hinweise, Kontakt ---------------------------------------------- */
.quote { color: var(--c-accent-strong); }
.quote--signature { color: var(--c-accent); }
.notice--box { background: var(--c-accent-soft); border-left-color: var(--c-accent); }
.contact-info__list .icon { color: var(--c-accent); }

/* Formulare -------------------------------------------------------------- */
.input, .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="date"],
.form select, .form textarea {
    border: 1px solid var(--c-line); border-radius: var(--radius-s); box-shadow: none;
}
.form textarea { border-radius: var(--radius-s); }
.form input:focus, .form select:focus, .form textarea:focus {
    border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 20%, transparent);
}
.form__label { font-weight: 500; }
.choice { border: 1px solid var(--c-line); box-shadow: none; }
.choice:hover { background: var(--c-accent-soft); color: var(--c-text); }
.choice:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.wizard__bar { background: var(--c-accent); }
.wizard__step > legend, .wizard__question { font-family: var(--font-heading); font-variant-caps: normal; }
.slot { border-color: var(--c-line); border-radius: 999px; }
.slot:hover { background: var(--c-accent-soft); color: var(--c-accent-strong); border-color: var(--c-accent); }

/* Vorschau-Banner -------------------------------------------------------- */
.preview-banner { background: var(--c-heading); }
.preview-banner a { color: #fff; }