/* ============================================================
   likoer24 — SEO-Landingpages (/firmengeschenke/, /vereine/, …)
   Mobile-first. Design-Tokens aus src/colors_and_type.css REPLIZIERT,
   weil dist/configurator.css auf den LPs NICHT geladen wird.
   KEINE externen Fonts — Roboto kommt vom Theme, sonst System-Stack.
   ============================================================ */

:root {
  /* ---- Brand-Palette (Quelle: src/colors_and_type.css) ---- */
  --lk-berry:      #962550;
  --lk-berry-900:  #5D1631;
  --lk-berry-800:  #781D40;
  --lk-berry-600:  #AC1952;
  --lk-berry-100:  #F4E2EB;
  --lk-berry-50:   #FBF3F7;
  --lk-ink:        #101927;
  --lk-ink-500:    #2A3447;
  --lk-lila:       #BDA0B7;
  --lk-lila-100:   #ECE0E8;
  --lk-stone:      #8695A7;
  --lk-stone-700:  #5C6B7E;
  --lk-stone-200:  #D6DDE4;
  --lk-stone-100:  #ECEFF2;
  --lk-stone-50:   #F6F8FA;
  --lk-cream:      #FBF9F6;
  --lk-white:      #FFFFFF;

  --lk-font-body:  "Roboto", "Helvetica Neue", "Arial", system-ui, sans-serif;

  --lk-r-md:   6px;
  --lk-r-lg:   10px;
  --lk-r-xl:   16px;

  --lk-shadow-md:    0 4px 12px rgba(16, 25, 39, 0.08), 0 2px 4px rgba(16, 25, 39, 0.04);
  --lk-shadow-berry: 0 12px 28px -8px rgba(150, 37, 80, 0.35);

  --lk-lp-max: 1080px;
}

/* ---- Grundgerüst ---- */
.lk24-lp {
  font-family: var(--lk-font-body);
  color: var(--lk-ink);
  line-height: 1.7;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

.lk24-lp-inner {
  max-width: var(--lk-lp-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.lk24-lp-inner--narrow {
  max-width: 760px;
}

.lk24-lp-section {
  padding: 2.5rem 0;
}

.lk24-lp-center {
  text-align: center;
}

/* ---- Typo ---- */
.lk24-lp-h2 {
  font-family: var(--lk-font-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--lk-ink);
  margin: 0 0 1rem;
}

.lk24-lp-p {
  margin: 0 0 1.1em;
  color: var(--lk-ink-500);
}

.lk24-lp-note {
  font-size: 0.875rem;
  color: var(--lk-stone-700);
  margin: 0.75rem 0 0;
}

/* ---- CTA-Buttons (Konfigurator-Stil: Berry, weiß, abgerundet) ---- */
.lk24-lp-cta {
  display: inline-block;
  background: var(--lk-berry);
  color: var(--lk-white) !important;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  padding: 0.9rem 1.9rem;
  border-radius: var(--lk-r-lg);
  text-decoration: none !important;
  box-shadow: var(--lk-shadow-berry);
  transition: background 220ms cubic-bezier(0.2, 0.65, 0.25, 1), transform 140ms ease;
}

.lk24-lp-cta:hover,
.lk24-lp-cta:focus {
  background: var(--lk-berry-800);
  color: var(--lk-white) !important;
  transform: translateY(-1px);
}

.lk24-lp-cta--invert {
  background: var(--lk-white);
  color: var(--lk-berry) !important;
  box-shadow: var(--lk-shadow-md);
}

.lk24-lp-cta--invert:hover,
.lk24-lp-cta--invert:focus {
  background: var(--lk-berry-100);
  color: var(--lk-berry-900) !important;
}

/* ---- Hero ---- */
.lk24-lp-hero {
  background: linear-gradient(180deg, var(--lk-berry-50) 0%, var(--lk-cream) 100%);
  border-bottom: 3px solid var(--lk-berry);
  padding: 3rem 0 2.75rem;
  text-align: center;
}

.lk24-lp-hero__headline {
  font-family: var(--lk-font-body);
  font-weight: 700;
  font-size: clamp(1.625rem, 4.2vw, 2.5rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--lk-ink);
  margin: 0 0 0.75rem;
}

.lk24-lp-hero__subline {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--lk-ink-500);
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

.lk24-lp-hero__cta-row {
  margin: 0 0 1rem;
}

.lk24-lp-hero__trust {
  font-size: 0.875rem;
  color: var(--lk-stone-700);
  margin: 0;
}

/* ---- Benefits-Grid: 1 → 2 → 3 Spalten ---- */
.lk24-lp-benefits {
  background: var(--lk-stone-50);
}

.lk24-lp-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.lk24-lp-benefit {
  background: var(--lk-white);
  border: 1px solid var(--lk-stone-200);
  border-radius: var(--lk-r-xl);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--lk-shadow-md);
}

.lk24-lp-benefit__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--lk-berry);
  margin: 0 0 0.5rem;
}

.lk24-lp-benefit__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--lk-ink-500);
}

@media (min-width: 600px) {
  .lk24-lp-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .lk24-lp-benefits__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Schritte (nummeriert) ---- */
.lk24-lp-steps__list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.lk24-lp-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.lk24-lp-step__num {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--lk-berry);
  color: var(--lk-white);
  font-weight: 700;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lk24-lp-step__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0.25rem 0 0.4rem;
  color: var(--lk-ink);
}

.lk24-lp-step__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--lk-ink-500);
}

@media (min-width: 800px) {
  .lk24-lp-steps__list { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Preistabelle (Mobile: horizontal scrollbar) ---- */
.lk24-lp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0 0;
  border: 1px solid var(--lk-stone-200);
  border-radius: var(--lk-r-lg);
}

.lk24-lp-table {
  width: 100%;
  min-width: 640px; /* 5 Spalten inkl. Grundpreis (PAngV) */
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--lk-white);
}

.lk24-lp-table th,
.lk24-lp-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--lk-stone-100);
}

.lk24-lp-table thead th {
  background: var(--lk-berry-50);
  color: var(--lk-berry-900);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.lk24-lp-table tbody tr:nth-child(even) {
  background: var(--lk-stone-50);
}

.lk24-lp-table tbody tr:last-child td {
  border-bottom: 0;
}

.lk24-lp-table__label {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--lk-lila-100);
  color: var(--lk-berry-900);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.lk24-lp-pricing .lk24-lp-center {
  margin-top: 1.75rem;
}

/* ---- Galerie ---- */
.lk24-lp-gallery {
  background: var(--lk-cream);
}

.lk24-lp-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}

.lk24-lp-gallery__item {
  margin: 0;
  text-align: center;
}

/* Produkt-PNGs (Flaschen, teils transparent): contain statt cover —
   nichts abschneiden, ruhige weiße Kacheln. */
.lk24-lp-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--lk-white);
  padding: 0.75rem;
  box-sizing: border-box;
  border: 1px solid var(--lk-stone-200);
  border-radius: var(--lk-r-lg);
  box-shadow: var(--lk-shadow-md);
}

.lk24-lp-gallery__caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lk-ink-500);
}

@media (min-width: 640px) {
  .lk24-lp-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  .lk24-lp-gallery__grid { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
}

/* Foto-Variante (echte Anlass-Fotos, z.B. /hochzeit/): randlos, cover 4:3 */
.lk24-lp-gallery--photo .lk24-lp-gallery__grid {
  grid-template-columns: repeat(2, 1fr);
}

.lk24-lp-gallery--photo .lk24-lp-gallery__item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 0;
  border: 0;
}

@media (min-width: 800px) {
  .lk24-lp-gallery--photo .lk24-lp-gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

/* ---- Sorten-Detail (/sorten/) ---- */
.lk24-lp-sorten__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.lk24-lp-sorte {
  background: var(--lk-white);
  border: 1px solid var(--lk-stone-200);
  border-radius: var(--lk-r-xl);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--lk-shadow-md);
  text-align: center;
}

.lk24-lp-sorte img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  margin: 0 auto 0.75rem;
}

.lk24-lp-sorte__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lk-ink);
  margin: 0 0 0.25rem;
}

.lk24-lp-sorte__meta {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lk-berry);
  margin: 0 0 0.6rem;
}

.lk24-lp-sorte__text {
  font-size: 0.9375rem;
  color: var(--lk-ink-500);
  margin: 0 0 0.6rem;
}

.lk24-lp-sorte__fit {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--lk-stone-700);
  margin: 0;
}

.lk24-lp-sorten__doors {
  text-align: center;
  margin: 1.75rem 0 0.5rem;
  color: var(--lk-ink-500);
}

.lk24-lp-sorten__doors a {
  color: var(--lk-berry-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 700px) {
  .lk24-lp-sorten__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .lk24-lp-sorten__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- FAQ (details/summary) ---- */
.lk24-lp-faq__item {
  border: 1px solid var(--lk-stone-200);
  border-radius: var(--lk-r-md);
  background: var(--lk-white);
  margin: 0 0 0.625rem;
  overflow: hidden;
}

.lk24-lp-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 2.5rem 0.9rem 1rem;
  font-weight: 600;
  color: var(--lk-ink);
  position: relative;
  user-select: none;
}

.lk24-lp-faq__q::-webkit-details-marker {
  display: none;
}

.lk24-lp-faq__q::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--lk-berry);
  line-height: 1;
}

.lk24-lp-faq__item[open] .lk24-lp-faq__q::after {
  content: "\2212"; /* − */
}

.lk24-lp-faq__item[open] .lk24-lp-faq__q {
  border-bottom: 1px solid var(--lk-stone-100);
  background: var(--lk-berry-50);
}

.lk24-lp-faq__a {
  padding: 0.9rem 1rem;
  color: var(--lk-ink-500);
  font-size: 0.9375rem;
}

.lk24-lp-faq__a p {
  margin: 0;
}

/* ---- Kontakt-Box ---- */
.lk24-lp-contact__box {
  background: var(--lk-berry-50);
  border: 1px solid var(--lk-berry-100);
  border-radius: var(--lk-r-xl);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.lk24-lp-contact__heading {
  font-size: 1.375rem;
}

.lk24-lp-contact__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0 0;
}

.lk24-lp-contact__link {
  color: var(--lk-berry-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lk24-lp-contact__link:hover {
  color: var(--lk-berry-900);
}

@media (min-width: 600px) {
  .lk24-lp-contact__links { flex-direction: row; justify-content: center; gap: 2rem; }
}

/* ---- Final-CTA ---- */
.lk24-lp-final {
  background: var(--lk-berry);
  padding: 3rem 0;
}

.lk24-lp-final__headline {
  font-family: var(--lk-font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--lk-white);
  margin: 0 0 1.5rem;
}

/* ---- Cross-Link ---- */
.lk24-lp-cross {
  padding: 1.75rem 0 3rem;
}

.lk24-lp-cross__link {
  color: var(--lk-berry-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lk24-lp-cross__link:hover {
  color: var(--lk-berry-900);
}