/* Molin Landingpage v2 (2026-10-08): schlanker Hero, CTA-Button, klickbare Highlights, kompakter Schritt 2 */

/* ---------- Hero ---------- */
.mlv2-hero-content { margin-top: 0 !important; }
.mlv2-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 56rem; margin: 0 auto 1.75rem; }
.mlv2-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 9999px;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fbf8f1; font-size: .78rem; line-height: 1.2; cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  font-family: inherit;
}
.mlv2-chip:hover, .mlv2-chip:focus-visible { background: rgba(0,0,0,.6); border-color: #d4af6a; outline: none; }
.mlv2-chip:active { transform: scale(.97); }
.mlv2-chip svg { width: 1rem; height: 1rem; color: #d9b773; flex-shrink: 0; }
.mlv2-chip .mlv2-chip-go { opacity: .75; font-size: .9em; }
@media (min-width: 640px) { .mlv2-chip { font-size: .875rem; padding: .5rem 1rem; } }

.mlv2-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  padding: 1rem 1.9rem; border-radius: 9999px; border: 0; cursor: pointer;
  background: #c9a45c; color: #fff; font-family: inherit;
  font-weight: 700; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.mlv2-cta:hover { background: #b8913f; box-shadow: 0 16px 36px rgba(0,0,0,.45); }
.mlv2-cta:active { transform: scale(.98); }
.mlv2-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mlv2-dot { position: relative; width: .6rem; height: .6rem; flex-shrink: 0; }
.mlv2-dot::before, .mlv2-dot::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #fff; }
.mlv2-dot::after { animation: mlv2-ping 1.4s cubic-bezier(0,0,.2,1) infinite; }
@keyframes mlv2-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.mlv2-cta-sub { display: block; margin-top: .7rem; color: #f3ead8; font-size: .78rem; text-shadow: 0 1px 4px rgba(0,0,0,.8); }

@media (max-width: 639px) {
  .mlv2-hide-mobile { display: none !important; }
  .mlv2-hero { min-height: 82svh !important; padding-top: 1.5rem !important; padding-bottom: 2.25rem !important; }
  .mlv2-cta { width: 100%; max-width: 22rem; font-size: .9rem; padding: 1rem 1.25rem; }
}

/* Titelbilder ruhig: kein Zoom/Schwenk (v2.1) */
.mlv2-hero .hero-bg-slide { animation: none !important; transform: none !important; }
#hotel-gallery-slider { cursor: pointer; }

/* ---------- Galerie: kurzer Hinweis beim Sprung ---------- */
.mlv2-flash { animation: mlv2-flash 1.2s ease-out 1; }
@keyframes mlv2-flash { 0% { box-shadow: 0 0 0 0 rgba(201,164,92,.9); } 100% { box-shadow: 0 0 0 18px rgba(201,164,92,0); } }

/* ---------- Anfrage Schritt 2 ---------- */
.mlv2-offer {
  background: #f8f3e7; border: 1px solid #e6d3a8; border-radius: .9rem;
  padding: .7rem .85rem; margin: 0 0 .9rem; font-size: .82rem; line-height: 1.45; color: #1f2d24;
}
.mlv2-offer strong { color: #8a6a2b; }
.mlv2-row { display: grid; grid-template-columns: 5.2rem minmax(0,1fr); gap: .55rem; align-items: center; margin-bottom: .6rem; }
.mlv2-row.mlv2-top { align-items: start; }
.mlv2-row.mlv2-top .mlv2-lbl { padding-top: .6rem; }
.mlv2-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #334155; line-height: 1.2; }
.mlv2-in {
  width: 100%; padding: .6rem .75rem; background: #fbf9f4; border: 1px solid #e5e7eb; border-radius: .7rem;
  font-size: 16px; /* verhindert Zoom auf iPhone */ font-family: inherit; color: #1e293b; outline: none;
}
.mlv2-in:focus { border-color: #c9a45c; box-shadow: 0 0 0 2px rgba(201,164,92,.35); }
textarea.mlv2-in { resize: none; min-height: 0; overflow: hidden; }
/* v2.5: Info-Feld wie Telefon (Beschriftung links, Feld einzeilig, waechst beim Schreiben) */
.mlv2-in { line-height: 1.25; }
.mlv2-row.mlv2-info { align-items: center; }
.mlv2-sal { display: flex; gap: .35rem; }
.mlv2-sal .salutation-btn { padding-top: .45rem !important; padding-bottom: .45rem !important; font-size: .72rem !important; }
.mlv2-err { grid-column: 2; margin-top: -.3rem; }
@media (min-width: 640px) {
  .mlv2-row { grid-template-columns: 7rem minmax(0,1fr); }
  .mlv2-in { font-size: .875rem; }
}

/* ---------- v2.3 (2026-10-11): TOP-Kennzeichen, Wellnesscenter, neue FAQ ---------- */
b.mlv2-top { display: inline-block; background: #c9a45c; color: #fff; font-size: .68em; font-weight: 800; letter-spacing: .08em;
  padding: .12rem .42rem; border-radius: .35rem; margin-right: .3rem; vertical-align: 1px; }
.mlv2-chip[data-key="gourmet"] { border-color: rgba(212,175,106,.75); }
.mlv2-strip4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 64rem !important; gap: 1.25rem .75rem !important; }
@media (min-width: 768px) { .mlv2-strip4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.mlv2-spa-link { text-decoration: none; cursor: pointer; transition: transform .15s; }
.mlv2-spa-link:hover { transform: translateY(-1px); }
.mlv2-spa-link:hover .text-cream-200 { color: #fff; }
.mlv2-pricelist { list-style: none; margin: .6rem 0 .4rem; padding: 0; }
.mlv2-pricelist li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed #e6d3a8; }
.mlv2-pricelist li:last-child { border-bottom: 0; }
.mlv2-pricelist b { color: #8a6a2b; white-space: nowrap; }
.mlv2-small { font-size: .8rem; color: #64748b; margin-top: .5rem; }
.mlv2-faq-flash { animation: mlv2-flash 1.2s ease-out 1; }
.mlv2-pricelist small { display: block; font-size: .78rem; color: #94a3b8; margin-top: .1rem; }

/* ---------- v2.6 (2026-10-13): Hero schlank (Handy + Computer), Pool-Video Handy, Angebote eingeklappt, 3 Videos ---------- */
/* Gilt nur fuer Seiten mit <html class="... mlv26"> (Landingpages, nicht ChatGPT-Seiten / Overlay) */

/* 1) Hero: grosse dunkle Flaechen weg, nur leichte Abdunklung hinter der Schrift */
.mlv26 section.mlv2-hero .bg-gradient-to-t.z-20,
.mlv26 section.mlv2-hero [class*="radial-gradient"].z-20 { display: none !important; }
.mlv26 section.mlv2-hero > div.absolute.inset-0.z-0::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 62%; z-index: 21; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,20,15,.40) 0%, rgba(10,20,15,.16) 55%, rgba(10,20,15,0) 100%); }
.mlv26 section.mlv2-hero h1 { text-shadow: 0 2px 12px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45); }
/* weniger Text: nur 2 Highlights (Rest steht in der Leiste darunter und in der FAQ) */
.mlv26 section.mlv2-hero .mlv2-chips .mlv2-chip:nth-child(n+3) { display: none !important; }
.mlv26 section.mlv2-hero .mlv2-chip { background: rgba(0,0,0,.20) !important; border-color: rgba(255,255,255,.35) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* Formular: Ueberschrift weg (steht auf dem Button) */
.mlv26 section.mlv2-hero .bg-white\/95 > h3 { display: none !important; }
.mlv26 #hero-quick-form > div:not(.items-end) > label { white-space: nowrap; }

/* Handy (< 768 px): kompakt, Bild sichtbar, Beschriftung links / Feld rechts */
@media (max-width: 767px) {
  .mlv26 section.mlv2-hero { min-height: 0 !important; padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; align-items: flex-start !important; }
  .mlv26 section.mlv2-hero > div.absolute.inset-0.z-0::after { height: 46%; }
  .mlv26 section.mlv2-hero h1 { font-size: 1.65rem !important; line-height: 1.15 !important; margin-bottom: .6rem !important; }
  .mlv26 section.mlv2-hero .mlv2-chips { gap: .35rem !important; margin-bottom: .75rem !important; }
  .mlv26 section.mlv2-hero .mlv2-chip { font-size: .8rem !important; padding: .3rem .7rem !important; }
  .mlv26 section.mlv2-hero .bg-white\/95 { margin-top: 24vh; padding: .75rem .85rem !important; }
  .mlv26 #hero-quick-form { gap: .45rem !important; }
  .mlv26 #hero-quick-form > div:not(.items-end) { display: grid !important; grid-template-columns: 8.4rem 1fr; align-items: center; column-gap: .6rem; }
  .mlv26 #hero-quick-form > div:not(.items-end) > label { margin: 0 !important; font-size: .8rem !important; line-height: 1.1; }
  .mlv26 #hero-quick-form select, .mlv26 #hero-date-trigger { padding-top: .45rem !important; padding-bottom: .45rem !important; }
}
/* sehr schmale Handys: Beschriftung weg, die Felder sagen es selbst */
@media (max-width: 339px) {
  .mlv26 #hero-quick-form > div:not(.items-end) { grid-template-columns: 1fr; }
  .mlv26 #hero-quick-form > div:not(.items-end) > label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Tablet / kleiner Computer (768-1279 px): Felder nebeneinander, Beschriftung weg */
@media (min-width: 768px) and (max-width: 1279px) {
  .mlv26 section.mlv2-hero h1 { font-size: 2.6rem !important; line-height: 1.12 !important; }
  .mlv26 #hero-quick-form > div:not(.items-end) > label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mlv26 #hero-quick-form > div.items-end { align-items: stretch !important; }
}
/* grosser Computer (ab 1280 px): eine Zeile, Beschriftung links / Feld rechts */
@media (min-width: 1280px) {
  .mlv26 section.mlv2-hero h1 { font-size: 3.4rem !important; line-height: 1.1 !important; }
  .mlv26 section.mlv2-hero .bg-white\/95 { max-width: 66rem !important; padding: .9rem 1.1rem !important; }
  .mlv26 #hero-quick-form { grid-template-columns: 1.4fr 1.25fr 1fr 1.1fr !important; gap: 1rem !important; align-items: center; }
  .mlv26 #hero-quick-form > div:not(.items-end) { display: grid !important; grid-template-columns: auto 1fr; align-items: center; column-gap: .6rem; }
  .mlv26 #hero-quick-form > div:not(.items-end) > label { margin: 0 !important; }
  .mlv26 #hero-quick-form > div.items-end { align-items: center !important; }
}

/* 2) Pool-Video im Handy-Hero (per JS eingefuegt, liegt ueber den Slideshow-Bildern, unter der Abdunklung) */
.mlv2-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 15; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.mlv2-hero-video.is-on { opacity: 1; }

/* 3) Angebote: v2.23 wieder dauerhaft ausgeklappt (Handy + Computer) */
.mlv2-offers-toggle-wrap { display: none !important; }
.mlv26 #offers-mobile-toggle-btn { display: none !important; }
.mlv26 #offers-cards-grid { display: grid !important; margin-top: 1.5rem; }

/* 4) Drei Videos nebeneinander unter der Angebots-Ueberschrift (laden erst beim Hinscrollen) */
.mlv2-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; max-width: 46rem; margin: 2rem auto 0; }
.mlv2-vid { margin: 0; text-align: center; }
.mlv2-vid-box { position: relative; aspect-ratio: 9 / 16; border-radius: 1rem; overflow: hidden; background: #1b2a22 center / cover no-repeat; box-shadow: 0 6px 18px rgba(14,23,19,.18); }
.mlv2-vid-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mlv2-vid figcaption { margin-top: .45rem; font-size: .8rem; font-weight: 600; color: #1f3a2c; }
@media (max-width: 767px) {
  .mlv2-vids { gap: .4rem; margin-top: 1.25rem; }
  .mlv2-vid-box { border-radius: .7rem; }
  .mlv2-vid figcaption { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .mlv2-hero-video { display: none !important; } }

/* ---------- v2.7 (2026-10-13): Computer-Hero wie Handy (Text oben, Formular unten), ChatGPT-Seiten, Overlay hotelmolin.com kompakt + Farben ---------- */

/* 1) Landingpages ab 768 px: Ueberschrift + 2 Highlights oben, Anfrage unten direkt ueber dem gruenen Balken -> Bild frei */
@media (min-width: 768px) {
  .mlv26 section.mlv2-hero:not(.ki-hero) { height: clamp(560px, calc(100vh - 96px), 880px); min-height: 0 !important; max-height: none !important;
    align-items: stretch !important; padding-top: 2.75rem !important; padding-bottom: 1.75rem !important; }
  .mlv26 section.mlv2-hero:not(.ki-hero) .mlv2-hero-content { display: flex; flex-direction: column; width: 100%; }
  .mlv26 section.mlv2-hero:not(.ki-hero) .mlv2-hero-content > h1 { margin-bottom: .9rem !important; }
  .mlv26 section.mlv2-hero:not(.ki-hero) .mlv2-hero-content > .bg-white\/95 { margin-top: auto !important; width: 100%; }
}

/* 2) ChatGPT-Seiten (ki-hero): gleiche Regeln wie Landingpages */
.mlv26 .ki-hero-shade { background: linear-gradient(180deg, rgba(10,20,14,.42) 0%, rgba(10,20,14,.16) 45%, rgba(10,20,14,0) 70%) !important; }
.mlv26 .ki-lead { display: none !important; }
.mlv26 .ki-hero-facts li:nth-child(n+3) { display: none !important; }
.mlv26 .ki-hero-facts li { background: rgba(0,0,0,.22) !important; border-color: rgba(255,255,255,.3) !important; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.mlv26 .ki-hero { align-items: stretch !important; }
.mlv26 .ki-hero-inner { display: flex; flex-direction: column; }
.mlv26 .ki-quick { margin-top: auto !important; width: 100%; max-width: 66rem !important; }
@media (max-width: 767px) {
  .mlv26 .ki-hero { padding-bottom: 1.25rem !important; }
  .mlv26 .ki-hero-facts { grid-template-columns: 1fr !important; }
  .mlv26 .ki-quick #hero-quick-form { grid-template-columns: 1fr !important; }
  .mlv26 .ki-quick #hero-quick-form > div { grid-column: auto !important; }
  .mlv26 .ki-quick > div { padding: .75rem .85rem !important; }
}
@media (min-width: 768px) {
  .mlv26 .ki-hero { min-height: 0 !important; height: clamp(560px, calc(100vh - 112px), 880px); padding-top: 2.75rem !important; padding-bottom: 1.75rem !important; }
  .mlv26 .ki-hero-facts { grid-template-columns: 1fr 1fr !important; max-width: 46rem; }
}

/* 3) Overlay-Formular auf www.hotelmolin.com (Seiten /xx/anfrage-overlay/, <html class="mlv26-hp">): super kompakt, Farben wie hotelmolin.com */
.mlv26-hp #enquiry-modal > div { padding: 1.1rem 1.1rem 1rem !important; max-width: 34rem !important; border-radius: 1.25rem !important; }
.mlv26-hp #step-1 > div.text-xs:first-child, .mlv26-hp #step-1 > h3, .mlv26-hp #step-2 > div.text-xs:first-child { display: none !important; }
.mlv26-hp #enquiry-modal .flex.gap-2.mb-6 { margin-bottom: .9rem !important; padding-right: 2.6rem; }
.mlv26-hp #close-enquiry-modal { top: .55rem !important; right: .6rem !important; padding: .45rem !important; }
/* Schritt 1: Beschriftung links, Feld rechts */
.mlv26-hp #step-1 > .mb-5 { margin-bottom: .5rem !important; }
.mlv26-hp #step-1 > .mb-5, .mlv26-hp #step-1 > .grid > div { display: grid; grid-template-columns: 7rem minmax(0,1fr); align-items: center; column-gap: .6rem; }
.mlv26-hp #step-1 > .mb-5 > p { grid-column: 1 / -1; }
.mlv26-hp #step-1 > .grid { grid-template-columns: 1fr !important; gap: .5rem !important; margin-bottom: .75rem !important; }
.mlv26-hp #step-1 label { margin: 0 !important; font-size: .68rem !important; letter-spacing: .05em !important; color: #383837 !important; }
.mlv26-hp #open-calendar-btn { padding: .55rem .7rem !important; border-radius: .75rem !important; }
.mlv26-hp #open-calendar-btn .w-9 { width: 1.75rem !important; height: 1.75rem !important; }
.mlv26-hp #display-dates { font-size: .9rem !important; }
.mlv26-hp #select-adults, .mlv26-hp #select-children { padding: .55rem .7rem !important; border-radius: .75rem !important; }
.mlv26-hp #step-1 > .pt-4 { padding-top: .75rem !important; }
.mlv26-hp #btn-goto-step2, .mlv26-hp #btn-submit-wizard { padding-top: .85rem !important; padding-bottom: .85rem !important; border-radius: .9rem !important; }
@media (max-width: 380px) {
  .mlv26-hp #step-1 > .mb-5, .mlv26-hp #step-1 > .grid > div { grid-template-columns: 5.6rem minmax(0,1fr); }
}
/* Farben: Olivgruen #5e6837, Beige #e3dcd0 / #c7c0b3, Off-White #f8f7f3 (wie www.hotelmolin.com) statt Gold */
.mlv26-hp .bg-gold-400, .mlv26-hp .bg-gold-500 { background-color: #5e6837 !important; }
.mlv26-hp .hover\:bg-gold-400:hover, .mlv26-hp .hover\:bg-gold-500:hover { background-color: #4b5329 !important; }
.mlv26-hp .text-gold-300, .mlv26-hp .text-gold-400, .mlv26-hp .text-gold-500, .mlv26-hp .text-gold-600, .mlv26-hp .text-gold-700 { color: #5e6837 !important; }
.mlv26-hp .bg-gold-50, .mlv26-hp .bg-gold-50\/90 { background-color: #f3f1ea !important; }
.mlv26-hp .bg-gold-400\/20 { background-color: rgba(94,104,55,.14) !important; }
.mlv26-hp .border-gold-200, .mlv26-hp .border-gold-300, .mlv26-hp .border-gold-300\/80, .mlv26-hp .border-gold-400 { border-color: #c7c0b3 !important; }
.mlv26-hp .hover\:border-gold-300:hover, .mlv26-hp .hover\:border-gold-400:hover { border-color: #5e6837 !important; }
.mlv26-hp .focus\:ring-gold-400:focus { --tw-ring-color: rgba(94,104,55,.5) !important; }
.mlv26-hp .shadow-gold-400\/20, .mlv26-hp .hover\:shadow-gold-400\/20:hover, .mlv26-hp .hover\:shadow-gold-400\/30:hover { --tw-shadow-color: rgba(94,104,55,.2) !important; }
.mlv26-hp .bg-cream-50 { background-color: #f8f7f3 !important; }
.mlv26-hp .bg-\[\#ede3d1\] { background-color: #e3dcd0 !important; }
.mlv26-hp .border-\[\#b89868\] { border-color: #c7c0b3 !important; }
.mlv26-hp .text-forest-950, .mlv26-hp .text-forest-900 { color: #383837 !important; }
.mlv26-hp .mlv2-offer { background: #f3f1ea !important; border-color: #c7c0b3 !important; }
.mlv26-hp .mlv2-offer strong { color: #5e6837 !important; }
.mlv26-hp .mlv2-in:focus { border-color: #5e6837 !important; box-shadow: 0 0 0 2px rgba(94,104,55,.3) !important; }
.mlv26-hp .mlv2-lbl { color: #383837 !important; }
.mlv26-hp b.mlv2-top { background: #5e6837 !important; }
.mlv26-hp input[type="checkbox"] { accent-color: #5e6837; }

/* ---------- v2.8 / v2.23: Zimmer wieder dauerhaft ausgeklappt (Handy + Computer) ---------- */
.mlv26 #rooms-toggle-btn { display: none !important; }
.mlv26 #rooms-cards-grid { display: grid !important; margin-top: 1.5rem; }
.mlv26 #usps-mobile-toggle-btn { display: flex !important; width: 100%; padding: 1rem 1.25rem !important; border-radius: 1rem !important; font-size: 1rem !important; letter-spacing: .01em; }
.mlv26 #usps-cards-grid.grid { margin-top: .5rem; }
/* v2.8: Button im Hero-Formular am Computer einzeilig (1280-1440 px) */
@media (min-width: 1280px) {
  .mlv26 #hero-quick-form > div.items-end button { white-space: nowrap; font-size: .8rem !important; padding-left: .6rem !important; padding-right: .6rem !important; }
  .mlv26 #hero-quick-form { grid-template-columns: 1.35fr 1.2fr .95fr 1.3fr !important; }
}

/* ---------- v2.14 (2026-10-14): Winter-Hinweis nach dem Hero ---------- */
.mlv214-winter { background: #f8f7f3; border-bottom: 1px solid #e3dcd0; padding: 1.75rem 1rem; }
.mlv214-in { max-width: 56rem; margin: 0 auto; background: #fff; border: 1px solid #c7c0b3; border-radius: 1.25rem; padding: 1.4rem 1.4rem 1.5rem; box-shadow: 0 6px 24px rgba(56,56,55,.06); }
.mlv214-k { margin: 0 0 .2rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #5e6837; font-weight: 600; }
.mlv214-h { margin: 0 0 .8rem; font-family: inherit; font-size: 1.45rem; line-height: 1.25; color: #383837; font-weight: 600; }
.mlv214-l { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .55rem; }
.mlv214-l li { position: relative; padding-left: 1.35rem; font-size: .95rem; line-height: 1.45; color: #383837; }
.mlv214-l li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: #5e6837; }
.mlv214-l b { color: #383837; font-weight: 600; }
.mlv214-b { display: block; width: 100%; background: #5e6837; color: #fff; border: 0; border-radius: 1rem; padding: .95rem 1.25rem; font-size: 1rem; font-weight: 600; cursor: pointer; }
.mlv214-b:hover { background: #4b5329; }
@media (min-width: 768px) {
  .mlv214-winter { padding: 2.25rem 1.5rem; }
  .mlv214-in { padding: 1.75rem 2rem 1.9rem; }
  .mlv214-l { grid-template-columns: 1fr 1fr; column-gap: 1.75rem; }
  .mlv214-b { display: inline-block; width: auto; padding: .85rem 2rem; }
}

/* ---------- v2.25 (2026-10-19): Optimierte Kinderalter-Auswahl (Fokus, Highlight, 16px Touch-Targets am Handy) ---------- */
#child-ages-container {
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#child-ages-container.mlv2-needs-age {
  background: #fdf9ef !important;
  border: 2px solid #d4af6a !important;
  box-shadow: 0 4px 16px rgba(201,164,92,.18);
}
#child-ages-container.mlv2-ages-ok {
  background: #f4fbf7 !important;
  border: 1.5px solid #6ee7b7 !important;
  box-shadow: none;
}
#child-ages-container .child-age-select {
  min-height: 2.65rem;
  font-size: .85rem !important;
  padding: .55rem .7rem !important;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
@media (max-width: 639px) {
  #child-ages-container .child-age-select {
    font-size: 16px !important; /* verhindert iOS Auto-Zoom & vergroessert Touch-Feld */
    min-height: 2.85rem;
    padding: .6rem .75rem !important;
  }
}
#child-ages-container .child-age-select.is-empty {
  border: 2px solid #d4af6a !important;
  background-color: #fffef9 !important;
  color: #78350f !important;
  font-weight: 700 !important;
}
#child-ages-container .child-age-select.is-filled {
  border: 1.5px solid #10b981 !important;
  background-color: #ffffff !important;
  color: #064e3b !important;
  font-weight: 700 !important;
}
@keyframes mlv2AgePulse {
  0%, 100% { transform: translateX(0); box-shadow: 0 4px 16px rgba(201,164,92,.18); }
  20% { transform: translateX(-4px); box-shadow: 0 0 0 6px rgba(212,175,106,.35); }
  40% { transform: translateX(4px); box-shadow: 0 0 0 6px rgba(212,175,106,.35); }
  60% { transform: translateX(-3px); box-shadow: 0 0 0 4px rgba(212,175,106,.25); }
  80% { transform: translateX(3px); box-shadow: 0 0 0 2px rgba(212,175,106,.15); }
}
#child-ages-container.mlv2-age-pulse {
  animation: mlv2AgePulse .65s ease-in-out 1;
}
.mlv26-hp #child-ages-container.mlv2-needs-age {
  border-color: #5e6837 !important;
  background: #f5f4ec !important;
}
.mlv26-hp #child-ages-container .child-age-select.is-empty {
  border-color: #5e6837 !important;
  color: #383837 !important;
}