/* Theme "loewe" — Löwenherz.
 *
 * Julia's Canva Urkunde translated to the web: warm linen paper,
 * vivid orange display, amber highlighter. Orange family leads
 * everywhere (Helmer round 2); lilac survives ONLY as the discreet
 * marker of the "Für Einrichtungen" branch (nav underline + door).
 * Response to her 17.08 feedback: more orange (or orange+lilac mix),
 * the lion logo everywhere, watercolor corners like her Canva files.
 *
 * Color roles: --kq-primary/#a34a0e is the AA workhorse (links,
 * markers, focus — 5.3:1 on bg, 4.6:1 on tint). The vivid #ff751f
 * (2.4:1) lives in --kq-display and is ONLY used for display-scale
 * text (h1/h2), buttons and decoration — never body/small text. */

.kq-style-loewe {
  --kq-bg: #faf0e6;            /* warm linen — the B2C flyer paper */
  --kq-surface: #fffaf3;       /* cards: warm paper white */
  --kq-tint: #f7e4cd;          /* tinted sections: apricot cream (≈ #ffbd59 @22% over bg) */
  --kq-line: #ecdcc9;

  --kq-ink: #43362c;           /* warm ink brown (12.3:1 on bg) */
  --kq-ink-700: #6b5a4c;       /* 6.6:1 */
  --kq-ink-500: #756250;       /* 5.2:1 on bg, 4.7:1 on tint — AA for small text */

  --kq-primary: #a34a0e;       /* AA orange: links, markers, focus */
  --kq-primary-ink: #ffffff;
  --kq-accent: #a34a0e;        /* eyebrows/card icons — same AA orange */
  --kq-warm: #ffbd59;          /* FIXED — highlighter/accents (backgrounds/decoration only, never text) */
  --kq-cool: #7c5286;          /* lilac — ONLY marks the "Für Einrichtungen" door/nav (Sie branch); AA with white (6.2:1) */

  /* Theme-own tokens (not in base.css; only rules in this file use them): */
  --kq-display: #ff751f;       /* FIXED — display ONLY: h1/h2, primary button, brand. 2.4:1 — never text <24px */
  --kq-display-ink: #331c07;   /* text on vivid orange (6.0:1 on #ff751f) */
  --kq-hl: #ffbd59;            /* highlighter band under key words */
  --kq-lilac-tint: #f1e7f3;    /* flieder-inherited lilac tint for the Einrichtungen door */

  --kq-radius: 18px;
  --kq-radius-sm: 10px;
  --kq-font-display: "Chalkboard SE", "Segoe Print", "Comic Sans MS", sans-serif; /* like flieder: playful script without remote fonts (GDPR) */
  --kq-font-body: "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --kq-shadow: 0 8px 26px rgb(163 74 14 / 0.14);
}

/* Dark mode — deliberate "linen at night": warm night brown, not gray. */
[data-theme="dark"] .kq-style-loewe,
.kq-style-loewe:where([data-theme="dark"] *) {
  --kq-bg: #221a12;
  --kq-surface: #2c2318;
  --kq-tint: #2a2015;
  --kq-line: #453626;

  --kq-ink: #f6ede2;
  --kq-ink-700: #d4c5b3;
  --kq-ink-500: #a5947f;

  --kq-primary: #ffa057;       /* light AA orange: 8.5:1 on bg */
  --kq-primary-ink: #331c07;
  --kq-accent: #ffa057;
  --kq-warm: #ffbd59;          /* in dark only appears translucent (highlighter/decoration) */
  --kq-cool: #b28fd9;          /* light lilac (same as flieder dark) */

  --kq-display: #ff8c42;       /* display stays vivid but legible: 7.4:1 on bg */
  --kq-display-ink: #331c07;
  --kq-hl: #ffbd59;
  --kq-lilac-tint: #2b2130;

  --kq-shadow: 0 8px 26px rgb(0 0 0 / 0.5);
}

/* ── Display layer: headings + primary button in the Canva vivid orange ── */
.kq-style-loewe h1, .kq-style-loewe h2 { color: var(--kq-display); }
.kq-style-loewe h3, .kq-style-loewe h4 { color: var(--kq-ink); }
.kq-style-loewe .kq-btn--primary {
  background: var(--kq-display); color: var(--kq-display-ink);
  transform: rotate(-1deg); transition: transform .15s ease;
}
.kq-style-loewe .kq-btn--primary:hover { transform: rotate(0deg); filter: none; }

/* Eyebrows: brush-blob in the amber highlighter — orange family leads
 * (Helmer round 2: lilac only marks the Einrichtungen door, see below).
 * #331c07 on #ffbd59 = 9.7:1, AA in light and dark alike. */
.kq-style-loewe .kq-eyebrow {
  display: inline-block; padding: 3px 12px;
  background: var(--kq-hl); color: #331c07;
  border-radius: 4px 14px 6px 12px / 12px 5px 14px 6px;
  transform: rotate(-1.2deg);
}

/* Icons in circles: amber with dark ink (Urkunde "Du hast gelernt"). */
.kq-style-loewe .kq-card__ico, .kq-style-loewe .kq-channel__ico {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kq-hl); color: #331c07; border-radius: 50%;
}
.kq-style-loewe a.kq-card { transition: transform .15s ease; }
/* hover-lift only where hover exists — avoids iOS's "stuck" tap state */
@media (hover: hover) {
  .kq-style-loewe a.kq-card:hover { transform: rotate(.6deg) translateY(-2px); }
}

.kq-style-loewe .kq-quote-inline {
  border-left: 4px solid var(--kq-display);
  border-radius: 0 var(--kq-radius-sm) var(--kq-radius-sm) 0;
  background: color-mix(in srgb, var(--kq-hl) 14%, transparent);
  padding: var(--kq-3) var(--kq-4) var(--kq-3) var(--kq-5);
}

/* Closing stripe: all-orange family (vivid → amber → deep). */
.kq-style-loewe .kq-footer {
  border-top: 5px solid;
  border-image: linear-gradient(90deg, var(--kq-display) 0 40%, var(--kq-warm) 40% 80%, var(--kq-primary) 80%) 1;
}

/* Form error note: stays in the orange family but hotter than the
 * ok-note (vivid tint + border) so error ≠ ok without lilac: */
.kq-style-loewe .kq-form__note--err {
  background: color-mix(in srgb, var(--kq-display) 16%, transparent);
  color: var(--kq-primary);
  border-left: 4px solid var(--kq-display);
}

/* ── Brand mark ─────────────────────────────────────────────────
 * Footer: amber watercolor blob with the ink lion (monochrome reads
 * better on the footer's small scale next to text).
 * Header: the REAL color logo — lion in its white circle on the
 * rainbow watercolor splash (asset from Julia's Canva export (9));
 * the logo brings its own white circle, so it needs no badge
 * background and works on the dark linen too. */
.kq-style-loewe .kq-brand__mark {
  width: 44px; height: 44px;
  background: var(--kq-hl); color: #331c07;
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;  /* watercolor blob */
}
.kq-style-loewe .kq-brand__mark .kq-lion { height: 32px; width: auto; }
.kq-style-loewe .kq-brand__mark--logo {
  width: 48px; height: 48px;
  background: none; border-radius: 0;
}
.kq-style-loewe .kq-brand__mark--logo img { width: 100%; height: 100%; display: block; }

/* ── Canva watercolor corners (one per section, alternating) ───── */
.kq-style-loewe .kq-hero,
.kq-style-loewe .kq-section--tint,
.kq-style-loewe .kq-footer { position: relative; overflow: hidden; }
.kq-style-loewe .kq-hero::before,
.kq-style-loewe .kq-section--tint::before,
.kq-style-loewe .kq-footer::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background-size: contain; background-repeat: no-repeat;
}
/* Hero: top-right corner (the "base" wash). */
.kq-style-loewe .kq-hero::before {
  top: -40px; right: -60px; width: min(440px, 46vw); height: min(440px, 46vw);
  background-image: url("../img/deco/aquarell-tr.webp"); opacity: .55;
}
/* Tint sections: top-left, softer (text sits on top). */
.kq-style-loewe .kq-section--tint::before {
  top: -30px; left: -50px; width: min(360px, 40vw); height: min(380px, 40vw);
  background-image: url("../img/deco/aquarell-tl.webp"); opacity: .35;
}
/* Footer: bottom-left, closes the page like the Urkunde. */
.kq-style-loewe .kq-footer::before {
  bottom: -60px; left: -50px; width: min(400px, 42vw); height: min(380px, 42vw);
  background-image: url("../img/deco/aquarell-bl.webp"); opacity: .4;
}
/* Content always above the wash: */
.kq-style-loewe .kq-hero .kq-hero__inner,
.kq-style-loewe .kq-section--tint > .kq-container,
.kq-style-loewe .kq-footer > .kq-container { position: relative; z-index: 1; }
/* Dark mode: a light wash would glare — drop to a subtle presence. */
[data-theme="dark"] .kq-style-loewe .kq-hero::before,
[data-theme="dark"] .kq-style-loewe .kq-section--tint::before,
[data-theme="dark"] .kq-style-loewe .kq-footer::before { opacity: .12; }

/* (Ronda 4: the pastel splash aura behind the hero photo is gone —
 * Helmer: the photo sits clean on the linen. The asset stays in
 * deco/ in case a more discreet use appears later.) */

/* ── Golden stars: inline accent right after the hero title ──────
 * Ronda 4: absolutely-positioned over the eyebrow they covered the
 * end of "Resilienz…" — as an inline-block glued to the h1's last
 * word they can never cover any text, at any viewport. */
.kq-style-loewe .kq-hero__copy h1::after {
  content: ""; display: inline-block;
  width: 52px; height: 45px; margin-left: .15em;
  vertical-align: -6px;
  background: url("../img/deco/sterne.webp") no-repeat center / contain;
  opacity: .85;
}
[data-theme="dark"] .kq-style-loewe .kq-hero__copy h1::after { opacity: .4; }

/* ── Highlighter #ffbd59 under key words (<em> inside headings) ── */
.kq-style-loewe h1 em, .kq-style-loewe h2 em,
.kq-style-loewe .kq-journey__label em,
.kq-style-loewe .kq-quali-card h3 em {
  font-style: normal; color: var(--kq-ink);
  background-image: linear-gradient(100deg,
    color-mix(in srgb, var(--kq-hl) 65%, transparent) 0%,
    var(--kq-hl) 12% 88%,
    color-mix(in srgb, var(--kq-hl) 55%, transparent) 100%);
  background-repeat: no-repeat;
  background-size: 100% 42%;
  background-position: 0 88%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .12em;
}
/* Dark: translucent band so the light text keeps its contrast. */
[data-theme="dark"] .kq-style-loewe h1 em,
[data-theme="dark"] .kq-style-loewe h2 em,
[data-theme="dark"] .kq-style-loewe .kq-journey__label em,
[data-theme="dark"] .kq-style-loewe .kq-quali-card h3 em {
  background-image: linear-gradient(100deg,
    color-mix(in srgb, var(--kq-hl) 30%, transparent) 0 100%);
}

/* ── Qualification cards (ueber-mich): amber icon blobs, soft lift ── */
.kq-style-loewe .kq-quali-card {
  box-shadow: 0 6px 18px rgb(163 74 14 / 0.08);
}
.kq-style-loewe .kq-quali-card__ico {
  background: var(--kq-hl); color: #331c07;
  border-radius: 50% 42% 48% 45% / 46% 50% 44% 52%;
  transform: rotate(-3deg);
}
.kq-style-loewe .kq-quali-card:nth-child(even) .kq-quali-card__ico { transform: rotate(2.5deg); }
[data-theme="dark"] .kq-style-loewe .kq-quali-card {
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}

/* ── "Mein Weg" journey (ueber-mich, ronda 5): amber watercolor
 * blobs like the quali cards, hand-drawn dashed connector in the
 * display orange, highlighter on the key words (selector added to
 * the <em> rules above). ─────────────────────────────────────── */
.kq-style-loewe .kq-journey::before,
.kq-style-loewe .kq-journey__step:not(:last-child)::after {
  border-color: color-mix(in srgb, var(--kq-display) 45%, transparent);
}
.kq-style-loewe .kq-journey__ico {
  background: var(--kq-hl); color: #331c07;
  border-radius: 50% 42% 48% 45% / 46% 50% 44% 52%;
  transform: rotate(-3deg);
  box-shadow: 0 6px 18px rgb(163 74 14 / 0.10);
}
.kq-style-loewe .kq-journey__step:nth-child(even) .kq-journey__ico { transform: rotate(2.5deg); }
.kq-style-loewe .kq-journey__label { color: var(--kq-ink); }
[data-theme="dark"] .kq-style-loewe .kq-journey__ico { box-shadow: 0 6px 18px rgb(0 0 0 / 0.35); }

/* ── Facts rows & benefit tiles (Einrichtungen pages, ronda 5):
 * facts get the amber quote-tint, benefit tiles get the quali-card
 * lift with amber icon blobs. ─────────────────────────────────── */
.kq-style-loewe ul.kq-facts li {
  background: color-mix(in srgb, var(--kq-hl) 14%, transparent);
}
.kq-style-loewe ul.kq-facts li svg { color: var(--kq-primary); }
.kq-style-loewe ul.kq-benefits li { box-shadow: 0 6px 18px rgb(163 74 14 / 0.08); }
[data-theme="dark"] .kq-style-loewe ul.kq-benefits li { box-shadow: 0 6px 18px rgb(0 0 0 / 0.35); }
.kq-style-loewe .kq-benefits__ico {
  background: var(--kq-hl); color: #331c07;
  border-radius: 50% 42% 48% 45% / 46% 50% 44% 52%;
  transform: rotate(-3deg);
}
.kq-style-loewe ul.kq-benefits li:nth-child(even) .kq-benefits__ico { transform: rotate(2.5deg); }

/* ── Lion watermarks (logo presence, Julia's A2) ───────────────── */
/* CTA bands (Über mich "Kurse ansehen", Konzept "Kontakt"): Julia
 * (Sept 2026) — the lion sat behind the button and was so faint the
 * eyes vanished. Desktop: it now lives in the free middle between the
 * heading (left) and the button (right), on its own, and at a
 * visible strength. The band gets a min-height so the whole lion is
 * on screen. Mobile stacks heading and button, so there the lion
 * goes back to a discreet right-edge watermark. */
.kq-style-loewe .kq-cta-band { position: relative; min-height: 220px; }
.kq-style-loewe .kq-cta-band::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 170px; height: 212px; transform: translate(-50%, -50%) rotate(4deg);
  background: var(--kq-display); opacity: .22; pointer-events: none;
  -webkit-mask: url("../img/brand/loewe.svg") no-repeat center / contain;
  mask: url("../img/brand/loewe.svg") no-repeat center / contain;
}
[data-theme="dark"] .kq-style-loewe .kq-cta-band::after { opacity: .3; }
@media (max-width: 900px) {
  .kq-style-loewe .kq-cta-band { min-height: 0; }
  .kq-style-loewe .kq-cta-band::after {
    left: auto; right: 2%; width: 120px; height: 150px;
    transform: translateY(-50%) rotate(6deg); opacity: .08;
  }
}
.kq-style-loewe .kq-hero::after {
  content: ""; position: absolute; bottom: -40px; left: 46%;
  width: min(340px, 30vw); height: min(425px, 37vw);
  transform: rotate(-4deg);
  background: var(--kq-display); opacity: .06; pointer-events: none;
  -webkit-mask: url("../img/brand/loewe.svg") no-repeat center / contain;
  mask: url("../img/brand/loewe.svg") no-repeat center / contain;
}

/* ── Photo treatment: soft warm frame (Helmer round 3: the hard
 * polaroid frames toned down — thin warm-tinted mat, generous
 * rounded corners, lighter/more diffuse shadow, gentler tilt) ──── */
.kq-style-loewe .kq-polaroid {
  background: #fff7ec; padding: 6px; margin: 0;
  border-radius: 18px; box-shadow: 0 8px 28px rgb(67 54 44 / .10);
  transform: rotate(-1deg);
}
.kq-style-loewe .kq-polaroid--r { transform: rotate(.8deg); }
.kq-style-loewe .kq-polaroid img { border-radius: 13px; box-shadow: none; }
[data-theme="dark"] .kq-style-loewe .kq-polaroid { background: #efe3d3; box-shadow: 0 8px 28px rgb(0 0 0 / .35); }
/* Unframed photos (e.g. the Familien door) get the same soft corners. */
.kq-style-loewe .kq-door > img { border-radius: 14px; }
/* (The prose float layout lives in base.css — shared by all themes.) */

/* ── Nav: discreet lilac underline = the ONE remaining lilac marker,
 *   coding the "Für Einrichtungen" group (Sie); Kurse stays orange
 *   via --kq-primary (du) — the Familien/Einrichtungen dichotomy ── */
.kq-style-loewe .kq-nav__group-btn {
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--kq-cool) 45%, transparent);
  border-radius: var(--kq-radius-sm) var(--kq-radius-sm) 4px 4px;
}
/* Burger panel: the group-btn becomes a static label there (base.css),
 * so the lilac marker moves from a full-width underline to a discreet
 * left rail along the group's links — the dichotomy stays color-coded
 * on mobile too. */
@media (max-width: 900px) {
  .kq-style-loewe .kq-nav__group-btn { box-shadow: none; border-radius: var(--kq-radius-sm); }
  .kq-style-loewe .kq-nav__drop {
    margin-left: var(--kq-2);
    border-left: 3px solid color-mix(in srgb, var(--kq-cool) 45%, transparent);
    border-radius: 0;
  }
}

/* ── The two home doors: orange = Familien, lilac = Einrichtungen ── */
.kq-style-loewe .kq-door--familien {
  background: color-mix(in srgb, var(--kq-hl) 16%, var(--kq-surface));
  border-color: color-mix(in srgb, var(--kq-display) 30%, var(--kq-line));
  transform: rotate(-.4deg);
}
.kq-style-loewe .kq-door--einrichtungen {
  background: var(--kq-lilac-tint);
  border-color: color-mix(in srgb, var(--kq-cool) 30%, var(--kq-line));
  transform: rotate(.4deg);
}
.kq-style-loewe .kq-door--einrichtungen .kq-eyebrow { background: var(--kq-cool); color: #ffffff; }
/* Dark: --kq-cool flips to light lilac #b28fd9 — dark ink for AA (6.0:1). */
[data-theme="dark"] .kq-style-loewe .kq-door--einrichtungen .kq-eyebrow { color: #2b1b33; }
.kq-style-loewe .kq-door--familien .kq-eyebrow { background: var(--kq-display); color: #fff; }