/* LAVELAL Webkomponenten 0.5.0 – nur innerhalb .lavelal-wk. */
.lavelal-wk {
  --lw-purple: #823f7c;
  --lw-gold: #deac5e;
  --lw-tint: #f7f3f9;
  --lw-ink: #29242c;
  --lw-border: #ded6e2;
  color: var(--lw-ink);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.65;
}
.lavelal-wk *, .lavelal-wk *::before, .lavelal-wk *::after { box-sizing: border-box; }
.lavelal-wk h1, .lavelal-wk h2, .lavelal-wk h3 { color: var(--lw-ink); line-height: 1.16; font-family: inherit; letter-spacing: -.025em; overflow-wrap: break-word; hyphens: manual; }
/* Kurze Überschriftenwörter bleiben ganz. Lange Modellnamen dürfen auf schmalen
   Displays weiter automatisch getrennt werden; break-word bleibt als Rückfall. */
.lavelal-wk .lavelal-wk-model h3 { hyphens: auto; }
.lavelal-wk h1 { font-size: clamp(2rem, 3.6vw, 3.25rem); margin: 0 0 1.25rem; }
.lavelal-wk h2 { font-size: clamp(1.65rem, 2.7vw, 2.25rem); margin: 0 0 1rem; }
.lavelal-wk h3 { font-size: 1.3rem; margin: 0 0 1rem; }
.lavelal-wk p { margin: 0 0 1rem; }
.lavelal-wk a:not(.lavelal-wk-button) { color: var(--lw-purple); text-decoration: underline; text-underline-offset: .18em; }
.lavelal-wk a:focus-visible, .lavelal-wk summary:focus-visible { outline: 3px solid var(--lw-purple); outline-offset: 4px; border-radius: 3px; }
.lavelal-wk-page { max-width: 1160px; margin-inline: auto; padding-block: 24px 56px; }
.lavelal-wk-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-bottom: 32px; }
.lavelal-wk-hero > *, .lavelal-wk-choices > *, .lavelal-wk-models > * { min-width: 0; }
/* Native Gruppen verwenden weiterhin Flow-Abstände. In unseren Flex-/Grid-
   Reihen übernimmt gap den Abstand; zusätzliche Kind-Margins würden versetzen. */
.lavelal-wk .lavelal-wk-hero > *,
.lavelal-wk .lavelal-wk-actions > *,
.lavelal-wk .lavelal-wk-steps > * { margin: 0 !important; min-width: 0; }
.lavelal-wk-kicker { color: var(--lw-purple); font-size: .88rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 12px !important; }
.lavelal-wk-hero figure { margin: 0; }
.lavelal-wk-hero img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.lavelal-wk-intro { font-size: 1.125rem; max-width: 43rem; }
.lavelal-wk-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lavelal-wk-choice { border: 1px solid var(--lw-border); border-top: 4px solid var(--lw-purple); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; background: white; }
.lavelal-wk-choice:nth-child(2) { border-top-color: var(--lw-gold); }
.lavelal-wk-choice h2 { font-size: 1.65rem; }
.lavelal-wk-offer { font-weight: 600; font-size: 1.2rem; margin-top: auto !important; padding-top: 8px; }
.lavelal-wk-offer span { font-size: inherit; }
.lavelal-wk-fineprint { font-size: .9rem; line-height: 1.5; }
.lavelal-wk a.lavelal-wk-button, .lavelal-wk a.lavelal-wk-button:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 20px; border: 2px solid var(--lw-purple); border-radius: 8px;
  background: var(--lw-purple); color: white; text-decoration: none; text-align: center;
  font: inherit; font-weight: 600; line-height: 1.25; white-space: normal;
}
/* Astra darf normale Inhaltslinks unterstreichen. Nur diese CTA-Links ausnehmen,
   auch bei besuchten Links, Hover und Fokus. Den Fokusrahmen nicht entfernen. */
.lavelal-wk a.lavelal-wk-button { text-decoration: none !important; }
.lavelal-wk a.lavelal-wk-button-secondary, .lavelal-wk a.lavelal-wk-button-secondary:visited { background: white; color: var(--lw-purple); }
.lavelal-wk .lavelal-wk-button:hover { filter: brightness(.94); color: white; }
.lavelal-wk .lavelal-wk-button-secondary:hover { background: var(--lw-tint); color: var(--lw-purple); filter: none; }
.lavelal-wk-section { margin-top: 64px; scroll-margin-top: 24px; }
.lavelal-wk-section > p { max-width: 50rem; }
.lavelal-wk-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.lavelal-wk-model { padding: 26px 22px; border: 1px solid var(--lw-border); border-radius: 8px; background: white; }
.lavelal-wk-price { font-size: 2rem; font-weight: 600; color: var(--lw-purple); line-height: 1.2; }
.lavelal-wk-model ul { margin: 20px 0 0; padding-left: 1.15em; }
.lavelal-wk-model li { margin-bottom: 10px; padding-left: 3px; }
.lavelal-wk .lavelal-wk-model-next { margin-top: 24px; margin-bottom: 16px; }
.lavelal-wk-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
.lavelal-wk-step { border-top: 2px solid var(--lw-gold); padding-top: 20px; }
.lavelal-wk-note { border-radius: 8px; background: var(--lw-tint); padding: 32px; }
.lavelal-wk details.wp-block-details { border-bottom: 1px solid var(--lw-border); margin-block: 0; padding: 12px 0; }
.lavelal-wk summary { cursor: pointer; font-weight: 600; min-height: 48px; padding: 10px 0; }
.lavelal-wk details p { margin: 16px 0 4px; max-width: 52rem; }
.lavelal-wk-ending { padding-top: 28px; border-top: 1px solid var(--lw-border); }
.lavelal-wk .lavelal-wk-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; margin-block: 24px 16px; }
@media (max-width: 850px) {
  .lavelal-wk-hero { grid-template-columns: 1fr; gap: 20px; }
  .lavelal-wk-hero img { aspect-ratio: 16 / 7; max-height: 280px; }
  .lavelal-wk-models { grid-template-columns: 1fr; }
  .lavelal-wk-steps { grid-template-columns: 1fr; gap: 16px; }
  .lavelal-wk-section { margin-top: 44px; }
}
@media (max-width: 640px) {
  .lavelal-wk-choices { grid-template-columns: 1fr; gap: 20px; }
  .lavelal-wk-choice, .lavelal-wk-note { padding: 22px; }
  .lavelal-wk .lavelal-wk-actions { flex-direction: column; }
  .lavelal-wk a.lavelal-wk-button { width: 100%; }
  .lavelal-wk-hero img { aspect-ratio: 16 / 6; }
}
@media (prefers-reduced-motion: reduce) {
  .lavelal-wk *, .lavelal-wk *::before, .lavelal-wk *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Austauschbare Referenzbilder der neuen Oasen, außerhalb der Pflanzenkarten. */
.lavelal-wk .lavelal-wk-oase-gallery > figure { margin: 0 !important; min-width: 0; }
.lavelal-wk .lavelal-wk-oase-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }

/* Vier Oasen: native, einzeln bearbeitbare Karten; nur neue Klassen. */
.lavelal-wk .lavelal-wk-oasengrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 28px; }
.lavelal-wk .lavelal-wk-oasengrid > * { margin: 0 !important; min-width: 0; }
.lavelal-wk .lavelal-wk-oasenkarte { border: 1px solid var(--lw-border); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; background: #fff; }
.lavelal-wk .lavelal-wk-oasenkarte figure { margin: 0 0 20px; }
.lavelal-wk .lavelal-wk-oasenkarte img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.lavelal-wk .lavelal-wk-oasenkarte figcaption { font-size: .85rem; line-height: 1.4; margin-top: 8px; }
.lavelal-wk .lavelal-wk-card-facts { margin-top: auto; padding-top: 12px; }
.lavelal-wk .lavelal-wk-card-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lavelal-wk .lavelal-wk-bilanz { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-block: 24px; }
.lavelal-wk .lavelal-wk-bilanz p { margin: 0; padding: 20px; border-radius: 8px; background: var(--lw-tint); }
.lavelal-wk .lavelal-wk-bilanz strong { display: block; font-size: 1.8rem; color: var(--lw-purple); line-height: 1.2; }
.lavelal-wk .lavelal-wk-bilanz span { display: block; font-size: .95rem; margin-top: 8px; }
@media (max-width: 640px) {
  .lavelal-wk .lavelal-wk-oasengrid { grid-template-columns: 1fr; gap: 20px; }
  .lavelal-wk .lavelal-wk-oasenkarte { padding: 22px; }
  .lavelal-wk .lavelal-wk-bilanz { grid-template-columns: 1fr; gap: 10px; }
  .lavelal-wk .lavelal-wk-bilanz p { padding: 16px 20px; }
}