/* Theme "aquarell" — Regenbogenleicht.
 *
 * Direct heir of the watercolor rainbow splash behind the lion
 * logo: white paper, translucent color washes bleeding in from
 * the hero corners, gradient headlines, a soft rainbow rotation
 * on card hairlines. The friendliest possible "this is the brand
 * from the flyer" recognition moment. */

.kq-style-aquarell {
  --kq-bg: #fdfcfa;
  --kq-surface: #ffffff;
  --kq-tint: #f5f1f7;
  --kq-line: #e7e2ea;

  --kq-ink: #33303a;
  --kq-ink-700: #55505e;
  --kq-ink-500: #767083;

  --kq-primary: #b23a63;      /* watercolor rose */
  --kq-primary-ink: #ffffff;
  --kq-accent: #2c7f72;       /* splash turquoise */
  --kq-warm: #f2b84b;         /* splash sun */
  --kq-cool: #7a7fd0;         /* splash violet-blue */

  --kq-radius: 20px;
  --kq-radius-sm: 12px;
  --kq-font-display: "Optima", "Candara", "Segoe UI", system-ui, sans-serif;
  --kq-font-body: "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --kq-shadow: 0 10px 34px rgb(124 84 158 / 0.14);
}

[data-theme="dark"] .kq-style-aquarell,
.kq-style-aquarell:where([data-theme="dark"] *) {
  --kq-bg: #1a1722;
  --kq-surface: #241f2e;
  --kq-tint: #201b29;
  --kq-line: #383144;

  --kq-ink: #f0ecf5;
  --kq-ink-700: #c9c2d4;
  --kq-ink-500: #968da6;

  --kq-primary: #e888a8;
  --kq-primary-ink: #2a1220;
  --kq-accent: #5fc4b5;
  --kq-warm: #f4c96e;
  --kq-cool: #9fa4e8;

  --kq-shadow: 0 10px 34px rgb(0 0 0 / 0.45);
}

/* Watercolor washes bleeding into the hero from three corners. */
.kq-style-aquarell .kq-hero {
  background:
    radial-gradient(38rem 24rem at 8% 0%, rgb(226 96 139 / 0.14), transparent 65%),
    radial-gradient(34rem 22rem at 92% 12%, rgb(47 158 143 / 0.13), transparent 65%),
    radial-gradient(40rem 26rem at 55% 108%, rgb(122 127 208 / 0.14), transparent 70%);
}
[data-theme="dark"] .kq-style-aquarell .kq-hero,
.kq-style-aquarell:where([data-theme="dark"] *) .kq-hero {
  background:
    radial-gradient(38rem 24rem at 8% 0%, rgb(232 136 168 / 0.10), transparent 65%),
    radial-gradient(34rem 22rem at 92% 12%, rgb(95 196 181 / 0.09), transparent 65%),
    radial-gradient(40rem 26rem at 55% 108%, rgb(159 164 232 / 0.10), transparent 70%);
}
/* Gradient headline accent (large text: AA-large is met at both ends). */
.kq-style-aquarell .kq-hero__copy h1 em {
  background: linear-gradient(90deg, var(--kq-primary), var(--kq-cool));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* CTA dipped in two watercolor pigments (both ends pass AA vs white/dark ink). */
.kq-style-aquarell .kq-btn--primary {
  background: linear-gradient(105deg, var(--kq-primary), #94508f);
}
[data-theme="dark"] .kq-style-aquarell .kq-btn--primary,
.kq-style-aquarell:where([data-theme="dark"] *) .kq-btn--primary {
  background: linear-gradient(105deg, var(--kq-primary), #b79ae0);
}
/* Rainbow rotation on card hairlines — the splash, systematized. */
.kq-style-aquarell .kq-card { border-top: 3px solid var(--kq-primary); }
.kq-style-aquarell .kq-cards .kq-card:nth-child(3n+2) { border-top-color: var(--kq-accent); }
.kq-style-aquarell .kq-cards .kq-card:nth-child(3n)   { border-top-color: var(--kq-cool); }
.kq-style-aquarell .kq-section--tint {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--kq-primary) 6%, var(--kq-tint)),
    var(--kq-tint) 45%,
    color-mix(in srgb, var(--kq-accent) 7%, var(--kq-tint)));
}
.kq-style-aquarell .kq-quote-inline {
  padding-left: var(--kq-5);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--kq-primary), var(--kq-cool)) 1;
}
.kq-style-aquarell .kq-footer {
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--kq-primary), var(--kq-warm), var(--kq-accent), var(--kq-cool)) 1;
}
.kq-style-aquarell .kq-hero__media img { box-shadow: var(--kq-shadow); }