/* ==========================================================================
   Design „Atelier“ – ruhig, hell, Taupe-Akzent; Kopfzeile in einer Reihe
   Reihenfolge: app.css → themes/hell.css → themes/atelier.css
   Aktivieren: config/app.php → 'design' => 'atelier'

   Kopfzeile (Computer): Logo links · Menü · Button „Termin buchen“ rechts
   Farben anpassen: nur die Tokens im :root-Block ändern.
   ========================================================================== */

:root {
    --c-bg: #f8f6f3;
    --c-surface: #fff;
    --c-text: #3b3533;
    --c-heading: #1f1b19;
    --c-ink: #3b3533;
    --c-muted: #857a74;
    --c-line: #e8e2dc;

    --c-accent: #a8968a;           /* Linien, Symbole */
    --c-accent-strong: #86705f;    /* Button, Links, aktiver Menüpunkt – weiße Schrift darauf ≥ 4,5 : 1 */
    --c-accent-soft: #f1ece7;
    --c-gold: var(--c-accent);
    --c-gold-dark: var(--c-accent-strong);

    --logo-height: 124px;
    --logo-height-sticky: 56px;
}

body { background: var(--c-bg); }

/* Kopfzeile -------------------------------------------------------------- */
.site-header { background: color-mix(in srgb, var(--c-bg) 94%, transparent); }
.navbar { border: 0; background: none; }

@media (min-width: 1025px) {
    .site-header {
        display: grid; grid-template-columns: auto 1fr auto; align-items: center;
        column-gap: 2rem;
        padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    }
    .site-header.is-stuck { box-shadow: 0 1px 0 var(--c-line), 0 8px 24px rgb(31 27 25 / 0.06); }
    .logobar { padding: 0.7rem 0; justify-content: flex-start; }
    .logobar__logo img { max-width: none; }
    .site-header.is-stuck .logobar { padding-block: 0.4rem; }

    .nav { justify-content: center; gap: 0.4rem; }
    .navbar .nav__item--l1 > .nav__link {
        font-family: var(--font-sans); font-size: 1rem; font-weight: 400;
        text-transform: none; letter-spacing: 0.01em;
        color: var(--c-text); padding: 1.1rem 0.8rem;
    }
    .navbar .nav__item--l1.has-children > .nav__link { padding-right: 0.15rem; }
    .navbar .nav__item--l1 > .nav__link::after {
        left: 0.8rem; right: 0.8rem; bottom: 0.45rem; height: 2px;
        background: var(--c-accent);
    }
    .navbar .nav__item--l1.has-children > .nav__link::after { right: 0.15rem; }
    .navbar .nav__item--l1:hover > .nav__link,
    .navbar .nav__item--l1.is-current > .nav__link { color: var(--c-accent-strong); }
    .nav__sub { border-top: 2px solid var(--c-accent); }

    /* Button „Termin buchen“ */
    .header-cta {
        display: inline-block;
        font-size: 0.95rem; font-weight: 400; letter-spacing: 0.08em; padding: 1rem 1.9rem;
        border-radius: 3px; background: var(--c-accent-strong); border-color: var(--c-accent-strong); color: #fff;
    }
    .header-cta:hover { background: #6f5c4e; border-color: #6f5c4e; color: #fff; }

    /* Sprachwahl klein oben rechts über dem Button */
    .topbar { top: 0.2rem; right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
    .topbar__inner { padding: 0.2rem 0; }
}

/* Handy & Tablet: Logo links, Sprachwahl oben rechts, Menüleiste darunter */
@media (max-width: 1024px) {
    :root { --logo-height: 64px; }
    .navbar { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
    .navbar .nav__item--l1 > .nav__link {
        font-family: var(--font-sans); font-size: 0.9rem; font-weight: 400;
        text-transform: none; letter-spacing: 0.01em;
    }
    .navbar .nav__item--l1.is-current > .nav__link { color: var(--c-accent-strong); text-decoration-color: var(--c-accent); }
}

/* Inhalte ---------------------------------------------------------------- */
.button, button.button, input[type="submit"] { border-radius: 3px; }
.site-footer { background: var(--c-accent-soft); border-top: 1px solid var(--c-line); }
.site-footer__logo img { width: 150px; }

/* Überschriften: Playfair Display (nahe an der Schrift der EDS-Printvorlagen) ---- */
:root { --font-heading: "Playfair Display", "Antic Didone", Georgia, serif; }
h1, h2, h3, h4, .section__title, .home-hero__title, .tile__title, .card__title, .accordion__summary, .prices__title {
    font-family: var(--font-heading); font-weight: 500; letter-spacing: 0;
}
.home-hero__title { font-weight: 400; letter-spacing: -0.01em; font-size: clamp(2.4rem, 1.1rem + 3.7vw, 4.7rem); }
.home-hero__content { width: min(100%, 680px); }
.tile__title, .card__title { font-weight: 400; }
.accordion__summary { font-weight: 400; }

/* Goldbraune Bögen oben links ------------------------------------------------
   Startseite: im Startbild. Unterseiten: in der freien Seitenfläche oben links,
   hinter den Inhaltskarten – so laufen sie aus der Ecke heraus, ohne abgeschnitten zu werden. */
:root { --arcs: url("../../img/boegen.svg"); }
.home-hero::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: -1.5%; top: -2%; width: clamp(200px, 26vw, 420px); aspect-ratio: 1;
    background: var(--arcs) left top / contain no-repeat; opacity: 0.9;
}
body:not(.page-startseite) .main { position: relative; }
body:not(.page-startseite) .main::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: 0; top: 0; width: clamp(200px, 21vw, 330px); aspect-ratio: 1;
    background: var(--arcs) left top / contain no-repeat;
    opacity: 0.75;
    -webkit-mask-image: linear-gradient(135deg, #000 35%, transparent 80%);
            mask-image: linear-gradient(135deg, #000 35%, transparent 80%);
}
body:not(.page-startseite) .main > * { position: relative; z-index: 1; }
/* Handy: dort liegen die Inhalte flach auf dem Grund – Bögen nur ganz klein in der Ecke */
@media (max-width: 700px) {
    body:not(.page-startseite) .main::before { width: 110px; opacity: 0.55; }
}

/* Gold-Buttons mit der Goldtextur aus dem Design „klassisch“ ------------------
   Schrift dunkel (Espresso), weil Weiß auf Gold schlecht lesbar ist. */
:root {
    --btn-gold: #d8b25c url("../../img/gold.jpg") center / 100% 100%;
    --btn-gold-text: #2a1d15;
}
.button, button.button, input[type="submit"], .header-cta, .video-embed__play,
.card:hover .card__link.button, .button--ghost:hover {
    background: var(--btn-gold);
    border-color: #c49a45;
    color: var(--btn-gold-text);
    text-shadow: 0 1px 0 rgb(255 255 255 / 0.35);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 2px 6px rgb(120 84 32 / 0.18);
}
.button:hover, button.button:hover, input[type="submit"]:hover, .header-cta:hover,
.card .card__link.button:hover {
    background: var(--btn-gold);
    border-color: #b08743;
    color: #000;
    filter: brightness(1.06) saturate(1.05);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 4px 12px rgb(120 84 32 / 0.25);
}
/* Umriss-Buttons (z. B. „Mehr erfahren“ in den Kacheln) bekommen einen Goldrand */
.card .card__link.button, .button--ghost { border-color: #c49a45; color: #7a5a24; background: transparent; box-shadow: none; text-shadow: none; }
/* weichere Buttons: abgerundete Ecken */
.button, button.button, input[type="submit"], .header-cta, .video-embed__play,
.card .card__link.button, .button--ghost { border-radius: 999px; }
@media (min-width: 1025px) { .header-cta { border-radius: 999px; padding-inline: 2.1rem; } }
/* Gold gedämpft, damit die Buttons mit der ruhigen Seite harmonieren:
   weniger Sättigung und Kontrast, etwas heller und wärmer; Schatten leiser. */
.button, button.button, input[type="submit"], .header-cta, .video-embed__play,
.card:hover .card__link.button, .button--ghost:hover {
    filter: sepia(0.25) saturate(0.8) contrast(0.82) brightness(1.1);
    border-color: rgb(196 154 69 / 0.45);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 1px 3px rgb(120 84 32 / 0.10);
    text-shadow: none;
}
.button:hover, button.button:hover, input[type="submit"]:hover, .header-cta:hover {
    filter: sepia(0.18) saturate(0.95) contrast(0.88) brightness(1.1);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 3px 10px rgb(120 84 32 / 0.16);
}
/* Heller, eleganter: zarter Perlmutt-Schleier über dem Gold, feine Schrift mit Sperrung */
:root {
    --btn-gold: linear-gradient(180deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.12) 55%, rgb(255 255 255 / 0.22)),
                #e2c888 url("../../img/gold.jpg") center / 100% 100%;
    --btn-gold-text: #3a2a1e;
}
.button, button.button, input[type="submit"], .header-cta, .video-embed__play,
.card:hover .card__link.button, .button--ghost:hover {
    filter: sepia(0.2) saturate(0.75) contrast(0.74) brightness(1.2);
    border: 1px solid rgb(201 166 98 / 0.55);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 1px 2px rgb(120 84 32 / 0.08);
    font-weight: 500; letter-spacing: 0.14em;
}
.button:hover, button.button:hover, input[type="submit"]:hover, .header-cta:hover {
    filter: sepia(0.15) saturate(0.88) contrast(0.8) brightness(1.16);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 4px 14px rgb(120 84 32 / 0.14);
}
/* Einheitlicher Button-Stil wie in den Kacheln: hell mit Goldrand, beim Überfahren
   blendet das Gold schnell ein (eigene Ebene ::before, damit Opacity animiert werden kann). */
.button, button.button, .header-cta, .video-embed__play, .card .card__link.button, .button--ghost {
    position: relative; isolation: isolate; overflow: hidden;
    background: transparent;
    border: 1px solid rgb(196 154 69 / 0.75);
    color: #7a5a24;
    filter: none; box-shadow: none; text-shadow: none;
    transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.button::before, button.button::before, .header-cta::before, .video-embed__play::before, .card .card__link.button::before, .button--ghost::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--btn-gold);
    filter: sepia(0.2) saturate(0.75) contrast(0.74) brightness(1.2);
    opacity: 0; transition: opacity 0.25s ease;
}
.button:hover, button.button:hover, .header-cta:hover, .video-embed__play:hover, .button--ghost:hover,
.card:hover .card__link.button, .button:focus-visible {
    background: transparent; filter: none;
    color: var(--btn-gold-text); border-color: rgb(196 154 69 / 0.5);
    box-shadow: 0 3px 12px rgb(120 84 32 / 0.14);
}
.button:hover::before, button.button:hover::before, .header-cta:hover::before, .video-embed__play:hover::before,
.button--ghost:hover::before, .card:hover .card__link.button::before, .button:focus-visible::before { opacity: 1; }
/* Button in der Kopfzeile auf hellem Grund gut sichtbar halten */
.header-cta { background: rgb(255 255 255 / 0.55); }
@media (prefers-reduced-motion: reduce) { .button::before, .header-cta::before { transition: none; } }

/* Menü einzeilig halten, wenn das Fenster schmaler wird; Untermenüs immer obenauf */
@media (min-width: 1025px) {
    .nav { flex-wrap: nowrap; }
    .nav__item--l1 { flex: none; }
    .nav__sub { z-index: 70; }
    .nav__item--l1:hover, .nav__item--l1:focus-within { z-index: 71; }
}
@media (min-width: 1025px) and (max-width: 1549px) {
    .site-header { column-gap: 1.2rem; }
    .nav { gap: 0; }
    .navbar .nav__item--l1 > .nav__link { font-size: 0.93rem; padding-inline: 0.55rem; }
    .navbar .nav__item--l1 > .nav__link::after { left: 0.55rem; right: 0.55rem; }
    .navbar .nav__item--l1.has-children > .nav__link::after { right: 0.15rem; }
    .header-cta { padding-inline: 1.4rem; font-size: 0.85rem; letter-spacing: 0.1em; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
    :root { --logo-height: 96px; }
    .navbar .nav__item--l1 > .nav__link { font-size: 0.88rem; padding-inline: 0.42rem; }
    .navbar .nav__item--l1 > .nav__link::after { left: 0.42rem; right: 0.42rem; }
    .header-cta { padding-inline: 1.1rem; letter-spacing: 0.06em; }
}