/*
Theme Name: LaVidaKids
Theme URI: https://www.kinderparty-lavidakids.at/
Author: Paradox
Description: Verspieltes WordPress-Theme fuer LaVidaKids: Kindergeburtstage, Kinderanimation und Vermietung in Wien, Wien Umgebung und Niederoesterreich. 1:1 Umsetzung des Marken-Designs mit dynamischem Farbsystem, Anfrageformular mit WhatsApp und SEO-Grunddaten.
Version: 2.2.4
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lavidakids
*/

:root{
  --c-primary:#ff4d4d;
  --c-primary-d:#e23e3e;
  --c-secondary:#1fb6ac;
  --c-secondary-d:#17998f;
  --c-accent:#ffe14d;
  --c-accent-d:#e0a400;
  --c-pink:#ff7eb3;
  --c-purple:#8a6bff;
  --c-ink:#16161d;
  --c-ink-soft:#3a3a44;
  --c-muted:#5b5b66;
  --c-page:#fffdf5;
  --c-page-2:#fff4e0;
  --c-border:#e2ddcf;
  --c-on-primary:#ffffff;
  --c-on-secondary:#ffffff;
  --c-on-purple:#ffffff;
  --c-on-accent:#16161d;
  --font-display:'Fredoka',system-ui,sans-serif;
  --font-body:'Poppins',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);background:var(--c-page);color:var(--c-ink);line-height:1.55}
img{max-width:100%;display:block}
/* No sideways scrolling on phones, even if page content brings something too wide. */
html,body{overflow-x:clip}
a{color:inherit}
:focus-visible{outline:3px solid var(--c-secondary);outline-offset:2px;border-radius:6px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@keyframes lvk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes lvk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lvk-pop{0%{transform:scale(.96);opacity:0}100%{transform:scale(1);opacity:1}}
.lvk-link{cursor:pointer;transition:color .15s ease}
.lvk-link:hover{color:var(--c-primary)!important}
.lvk-card{transition:transform .18s ease}
.lvk-card:hover{transform:translateY(-6px)}
.lvk-btn{transition:all .15s ease}
.lvk-btn:hover,.lvk-bb>.wp-block-button__link:hover{filter:brightness(1.06);transform:translateY(-2px)}
.lvk-fig{transition:all .15s ease}
.lvk-fig:hover{transform:translateY(-4px) rotate(-2deg);border-color:var(--c-accent)!important}
.lvk-gal-img{transition:transform .35s ease}
.lvk-gal:hover .lvk-gal-img{transform:scale(1.06)}

.lvk-wrap{max-width:1180px;margin:0 auto}
.lvk-eyebrow{font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:0}
.lvk-d1{font-family:var(--font-display);font-weight:700;line-height:.97;font-size:clamp(42px,8.5vw,66px)}
.lvk-d2{font-family:var(--font-display);font-weight:700;line-height:1.02;font-size:clamp(34px,6vw,54px)}
.lvk-d3{font-family:var(--font-display);font-weight:700;line-height:1.05;font-size:clamp(30px,4.6vw,42px)}

.lvk-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lvk-price-scroll{border:2px solid var(--c-ink);border-radius:22px;background:#fff;overflow-x:auto;-webkit-overflow-scrolling:touch}
.lvk-price-table{width:100%;min-width:760px;border-collapse:collapse;font-size:14px}
.lvk-price-table th,.lvk-price-table td{padding:10px 16px;text-align:center;vertical-align:middle}
.lvk-price-table th:first-child,.lvk-price-table td:first-child{text-align:left;position:sticky;left:0;background:#fff;min-width:200px;border-right:2px solid var(--c-border);font-weight:600}
.lvk-price-table thead th{font-family:var(--font-display);font-weight:700;font-size:16px;padding:16px;border-bottom:2px solid var(--c-ink)}
.lvk-price-table tbody td{color:var(--c-ink-soft)}
.lvk-price-table tbody tr:nth-child(even) td{background:var(--c-page-2)}
.lvk-price-table tfoot td{border-top:2px solid var(--c-ink)}
.lvk-price-table tfoot tr+tr td{border-top:0;padding-bottom:16px}
.lvk-price-table tfoot td:first-child{font-size:12px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.05em}
.lvk-price-note{text-align:center;color:var(--c-muted);font-size:13px;margin:10px 0 0}
.lvk-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.lvk-grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.lvk-gal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;grid-auto-rows:220px}
.lvk-figcard{background:#fff;border:2px solid var(--c-border);border-radius:18px;text-align:center}
.lvk-figcard.lvk-fig-photo{overflow:hidden;cursor:pointer}
.lvk-figcard--emoji{padding:18px 10px}
/* height:auto, so the width/height attributes from WordPress do not override the square. */
.lvk-figcard__img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.lvk-figcard__emoji{font-size:34px;line-height:1}
/* Names hyphenate instead of widening their column. */
.lvk-figcard__name{font-weight:700;font-size:13.5px;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:anywhere}
.lvk-fig-photo .lvk-figcard__name{padding:8px 6px}
.lvk-figcard--emoji .lvk-figcard__name{margin-top:8px}

.lvk-header{position:sticky;top:0;z-index:50;background:var(--c-page);border-bottom:2px solid var(--c-ink)}
.lvk-logo{height:var(--lvk-logo-h,42px);width:auto;display:block}
.lvk-logo-footer{height:var(--lvk-logo-h-footer,64px);width:auto;display:block}
.lvk-logo-pic{display:block}
.lvk-header--static{position:static}
.lvk-nav{display:flex;align-items:center;gap:26px}
.lvk-navlinks{display:flex;align-items:center;gap:26px}
.lvk-brand{flex-shrink:0}
.lvk-header .lvk-btn{white-space:nowrap}
.lvk-burger{display:none;width:46px;height:46px;border:2px solid var(--c-ink);border-radius:11px;background:var(--c-page);align-items:center;justify-content:center;cursor:pointer}
.lvk-burger span{display:block;width:22px;height:2.5px;background:var(--c-ink);position:relative}
.lvk-burger span::before,.lvk-burger span::after{content:"";position:absolute;left:0;width:22px;height:2.5px;background:var(--c-ink)}
.lvk-burger span::before{top:-7px}
.lvk-burger span::after{top:7px}

.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:60px;height:60px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(37,211,102,.45);transition:transform .2s ease;text-decoration:none}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;fill:#fff}

.lvk-prose>*+*{margin-top:1.05em}
.lvk-prose h2{font-family:var(--font-display);font-weight:700;font-size:26px;margin-top:1.5em}
.lvk-prose h3{font-family:var(--font-display);font-weight:700;font-size:20px;margin-top:1.3em}
.lvk-prose a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.lvk-prose ul{padding-left:20px;display:flex;flex-direction:column;gap:8px;margin:10px 0}
.lvk-prose ol{padding-left:20px;display:flex;flex-direction:column;gap:12px;margin:12px 0}
.lvk-prose img{border-radius:16px;border:2px solid var(--c-ink)}

.lvk-pagi{display:flex;justify-content:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.lvk-pagi .page-numbers{display:inline-flex;min-width:46px;height:46px;align-items:center;justify-content:center;padding:0 14px;border:2px solid var(--c-ink);border-radius:11px;background:#fff;font-family:var(--font-display);font-weight:700;text-decoration:none}
.lvk-pagi .page-numbers.current{background:var(--c-primary);color:var(--c-on-primary)}
.lvk-pagi a.page-numbers:hover{background:var(--c-accent);color:var(--c-ink)}

/* =========================================================================
   Page sections
   Extracted verbatim from the inline style="" attributes that used to live in
   front-page.php and template-*.php, so those files can become block patterns.
   Every colour still resolves through the --c-* custom properties that
   inc/dynamic-css.php writes from the Customizer.
   Declared after .lvk-wrap (so section max-widths win) and before the media
   queries (so the responsive rules still win).
   ========================================================================= */

/* --- shared section pieces ---------------------------------------------- */
.lvk-sec-title{margin:8px 0 0}
.lvk-sec-lead{font-size:16px;color:var(--c-ink-soft);max-width:600px;margin:12px auto 0}
.lvk-sec-lead--narrow{max-width:560px}
.lvk-note{text-align:center;color:var(--c-muted);font-size:14px}
.lvk-note--gap-lg{margin-top:22px}
.lvk-note--gap-xl{margin-top:26px}
.lvk-underline-link{font-weight:700;color:var(--c-ink);text-decoration:none;border-bottom:3px solid var(--c-accent);padding-bottom:3px}
.lvk-btn-block,.lvk-bb--block>.wp-block-button__link{display:block;text-align:center;background:var(--c-ink);color:#fff;padding:14px;border-radius:11px;font-weight:700;text-decoration:none}
.lvk-btn-block--primary,.lvk-bb--block-primary>.wp-block-button__link{background:var(--c-primary)}

/* --- front page: hero --------------------------------------------------- */
.lvk-hero{display:flex;flex-wrap:wrap;min-height:520px}
.lvk-hero__copy{flex:1 1 480px;background:var(--c-primary);padding:64px 6vw 64px 8vw;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.lvk-hero__ring{position:absolute;top:-40px;right:-40px;width:170px;height:170px;border:16px solid rgba(255,255,255,.16);border-radius:50%}
.lvk-hero__dot{position:absolute;bottom:36px;right:54px;width:26px;height:26px;background:var(--c-accent);border-radius:50%}
.lvk-hero__star{position:absolute;bottom:120px;right:140px;color:var(--c-accent);font-size:26px;font-family:'Fredoka'}
.lvk-hero__title{color:#fff;margin:0 0 18px}
.lvk-hero__eyebrow{display:block;color:rgba(255,255,255,.85);margin-bottom:14px;margin-top:0}
.lvk-hero__lead{font-size:18px;line-height:1.55;color:rgba(255,255,255,.95);margin:0 0 30px;max-width:400px}
.lvk-hero__actions{display:flex;gap:13px;flex-wrap:wrap}
.lvk-hero__btn,.lvk-bb--hero>.wp-block-button__link{background:var(--c-ink);color:#fff;padding:16px 30px;border-radius:11px;font-weight:700;font-size:16px;text-decoration:none}
.lvk-hero__btn--phone,.lvk-bb--hero-phone>.wp-block-button__link{background:#fff;color:var(--c-primary);padding:16px 26px}
.lvk-hero__media{flex:1 1 420px;background:var(--c-secondary);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:420px}
.lvk-hero__media-star{position:absolute;top:42px;left:46px;color:var(--c-accent);font-size:34px;font-family:'Fredoka';font-weight:700}
.lvk-hero__media-dot{position:absolute;top:90px;right:60px;width:18px;height:18px;background:var(--c-primary);border-radius:50%}
.lvk-hero__img{width:74%;height:68%;object-fit:cover;border-radius:20px;box-shadow:0 22px 50px rgba(0,0,0,.28);transform:rotate(3deg)}
.lvk-hero__badge{position:absolute;bottom:40px;left:40px;background:var(--c-accent);color:var(--c-ink);font-weight:700;padding:13px 19px;border-radius:13px;font-size:15px;transform:rotate(-4deg);box-shadow:0 8px 20px rgba(0,0,0,.18);margin:0}

/* --- front page: ticker ------------------------------------------------- */
.lvk-ticker{background:var(--c-ink);color:#fff;padding:15px 0;overflow:hidden;white-space:nowrap}
.lvk-ticker__track{display:inline-flex;align-items:center;width:max-content;animation:lvk-marquee 24s linear infinite;font-family:'Fredoka';font-weight:600;font-size:18px}
.lvk-ticker__item{margin:0 20px}
.lvk-ticker__sep{margin:0 6px}

/* --- front page: steps -------------------------------------------------- */
.lvk-steps{padding:84px 28px 40px}
.lvk-steps__head{text-align:center;margin-bottom:46px}
.lvk-steps__eyebrow{color:var(--c-secondary)}
.lvk-step{text-align:center}
.lvk-step__icon{width:70px;height:70px;margin:0 auto 16px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:32px;transform:rotate(-5deg)}
.lvk-step__no{font-family:'Fredoka';font-weight:600;font-size:13px;color:var(--c-secondary);margin:0}
.lvk-step__title{font-family:'Fredoka';font-weight:600;font-size:20px;margin:4px 0 6px}
.lvk-step__text{font-size:14.5px;color:var(--c-muted);line-height:1.5}

/* --- front page: packages teaser --------------------------------------- */
.lvk-packages{padding:54px 28px}
.lvk-packages__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.lvk-packages__eyebrow{color:var(--c-primary)}
/* Compact package list. The prices stay next to the name on every width; a
   long name wraps inside its own column instead. */
.lvk-pkglist{background:#fff;border:2px solid var(--c-ink);border-radius:22px;overflow:hidden;max-width:700px;margin:0 auto}
.lvk-pkgrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 26px;border-left:6px solid var(--lvk-row-accent,var(--c-secondary))}
.lvk-pkgrow:nth-child(even){background:var(--c-page-2)}
.lvk-pkgrow__name{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.2;color:var(--c-ink)}
.lvk-pkgrow__prices{display:flex;gap:28px;flex:none}
.lvk-pkgrow__price{text-align:right}
.lvk-pkgrow__label{font-size:11px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.lvk-pkgrow__amount{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--c-ink);white-space:nowrap}
.lvk-pkgrow__price--mit .lvk-pkgrow__amount{color:var(--c-primary)}
/* The comparison table as an accordion, for screens too narrow for the table. */
.lvk-pkgacc{display:none}
.lvk-pkgacc summary{list-style:none;cursor:pointer}
.lvk-pkgacc summary::-webkit-details-marker{display:none}
.lvk-pkgacc .lvk-pkgrow__label,.lvk-pkgacc .lvk-pkgrow__amount{display:block}
.lvk-pkgacc__item+.lvk-pkgacc__item{border-top:1px solid var(--c-border)}
.lvk-pkgacc__item:nth-child(even)>.lvk-pkgrow,.lvk-pkgacc__item:nth-child(even)>.lvk-pkgacc__list{background:var(--c-page-2)}
.lvk-pkgacc__toggle{display:block;margin-top:3px;font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--c-muted)}
.lvk-pkgacc__toggle::after{content:" ▾"}
.lvk-pkgacc__item[open] .lvk-pkgacc__toggle::after{content:" ▴"}
.lvk-pkgacc__list{list-style:none;margin:0;padding:0 26px 18px 58px;border-left:6px solid var(--lvk-row-accent,var(--c-secondary))}
.lvk-pkgacc__list li{position:relative;padding:4px 0 4px 22px;font-size:14.5px;line-height:1.45;color:var(--c-ink-soft)}
.lvk-pkgacc__list li::before{content:"✓";position:absolute;left:0;font-weight:700;color:var(--lvk-row-accent,var(--c-secondary))}
@media(max-width:820px){
  .lvk-price-scroll,.lvk-price-note{display:none}
  .lvk-pkgacc{display:block}
}

/* --- promo bar (front page, Zusatzleistungen, Vermietung) --------------- */
.lvk-promo{background:var(--c-ink);color:#fff;border-radius:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:22px auto 0;padding:26px 30px;max-width:700px;gap:16px}
.lvk-promo--addons{margin:30px 0 0;padding:28px 32px;max-width:none;gap:18px}
.lvk-promo--rent{margin:26px 0 0;padding:30px 32px;max-width:none;gap:18px}
.lvk-promo__title{font-family:'Fredoka';font-weight:700;font-size:20px;color:var(--c-accent);margin:0}
.lvk-promo__title--lg{font-size:24px}
.lvk-promo__text{font-size:14.5px;color:rgba(255,255,255,.82);margin-top:4px;margin-bottom:0}
.lvk-promo__text--lg{font-size:15px;color:rgba(255,255,255,.84)}
.lvk-promo__btn,.lvk-bb--promo>.wp-block-button__link{background:var(--c-primary);color:#fff;padding:13px 24px;border-radius:11px;font-weight:700;text-decoration:none;white-space:nowrap}
.lvk-promo__btn--wide,.lvk-bb--promo-wide>.wp-block-button__link{padding:14px 26px;white-space:normal}
.lvk-promo__btn--rent,.lvk-bb--promo-rent>.wp-block-button__link{padding:15px 28px;white-space:normal}

/* --- front page: figures ------------------------------------------------ */
.lvk-figures{background:var(--c-page-2);padding:74px 0;margin-top:30px}
.lvk-figures__inner{padding:0 28px}
.lvk-figures__head{text-align:center;margin-bottom:40px}
.lvk-figures__eyebrow{color:var(--c-primary)}

/* --- front page: reviews ------------------------------------------------ */
.lvk-reviews{padding:80px 28px}
.lvk-reviews__head{text-align:center;margin-bottom:42px}
.lvk-reviews__eyebrow{color:var(--c-secondary)}
.lvk-review{background:#fff;border:2px solid var(--c-ink);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px}
.lvk-review__stars{color:#ffb800;font-size:18px;letter-spacing:2px}
.lvk-review__text{font-size:15.5px;line-height:1.6;color:var(--c-ink);margin:0;flex:1}
.lvk-review__foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--c-border);padding-top:14px}
.lvk-review__avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:700;color:#fff;font-size:18px}
.lvk-review__name{font-weight:700;font-size:14.5px;margin:0}
.lvk-review__role{font-size:13px;color:var(--c-muted);margin:0}

/* --- front page: closing CTA -------------------------------------------- */
.lvk-cta{background:var(--c-ink);color:#fff}
.lvk-cta__inner{padding:64px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px}
.lvk-cta__title{margin:0 0 12px}
.lvk-cta__highlight{color:var(--c-accent)}
.lvk-cta__text{font-size:17px;color:rgba(255,255,255,.8);margin:0;max-width:440px}
.lvk-cta__actions{display:flex;gap:14px;flex-wrap:wrap}
.lvk-cta__btn,.lvk-bb--cta>.wp-block-button__link{background:var(--c-primary);color:#fff;padding:18px 34px;border-radius:12px;font-weight:700;font-size:17px;text-decoration:none}
.lvk-cta__btn--call,.lvk-bb--cta-call>.wp-block-button__link{background:var(--c-secondary);padding:18px 30px}

/* --- page hero (Kinderpartys, Vermietung, Kontakt, Galerie) ------------- */
.lvk-pagehero{color:#fff;padding:60px 28px;text-align:center;position:relative;overflow:hidden}
.lvk-pagehero--primary{background:var(--c-primary)}
.lvk-pagehero--secondary{background:var(--c-secondary)}
.lvk-pagehero--accent{background:var(--c-accent);color:var(--c-ink)}
.lvk-pagehero--tight{padding:56px 28px}
.lvk-pagehero__eyebrow{color:rgba(255,255,255,.85)}
.lvk-pagehero__eyebrow-wide{font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.lvk-pagehero__eyebrow-wide--gold{color:#b07a00}
.lvk-pagehero__title{margin:10px 0 12px}
.lvk-pagehero__lead{font-size:18px;color:rgba(255,255,255,.92);max-width:560px;margin:0 auto}
.lvk-pagehero__lead--narrow{max-width:520px}
.lvk-pagehero__lead--ink{color:#4a4030}
.lvk-pagehero__star{position:absolute;top:24px;left:8%;color:var(--c-accent);font-size:30px}
.lvk-pagehero__star--tl{left:9%}
.lvk-pagehero__star--tr{left:auto;right:10%}
.lvk-pagehero__dot{position:absolute;bottom:30px;right:10%;width:22px;height:22px;background:var(--c-primary);border-radius:50%}
.lvk-pagehero__dot--accent{bottom:28px;background:var(--c-accent)}
.lvk-pagehero__emoji{position:absolute;font-size:30px}
.lvk-pagehero__emoji--tr{top:26px;right:10%}
.lvk-pagehero__emoji--bl{bottom:26px;left:8%}

/* --- Kinderpartys: Zeit-Pakete ------------------------------------------ */
.lvk-kp-packages{padding:70px 28px 40px}
.lvk-kp-packages__head{text-align:center;margin-bottom:34px}
.lvk-kp-packages__eyebrow{color:var(--c-primary)}
.lvk-kp-packages__more{text-align:center;margin-top:14px}
.lvk-callout{background:var(--c-page-2);border:2px dashed var(--c-border);border-radius:18px;max-width:760px;margin:26px auto 0;padding:22px 28px;text-align:center}
.lvk-callout__title{font-family:'Fredoka';font-weight:700;font-size:17px;color:var(--c-ink);margin:0}
.lvk-callout__text{font-size:14.5px;line-height:1.6;color:var(--c-ink-soft);margin:10px 0 0}

/* --- Kinderpartys: Spiele ----------------------------------------------- */
.lvk-games{background:var(--c-page-2);padding:70px 0;overflow:hidden}
.lvk-games__inner{padding:0 28px;display:flex;flex-wrap:wrap;gap:50px;align-items:center}
.lvk-games__media{flex:1 1 360px}
.lvk-games__img{width:100%;border-radius:24px;box-shadow:0 20px 44px rgba(0,0,0,.16);transform:rotate(-2deg)}
.lvk-games__copy{flex:1 1 360px}
.lvk-games__eyebrow{color:var(--c-primary)}
.lvk-games__title{margin:8px 0 16px}
.lvk-games__text{font-size:16px;line-height:1.6;color:var(--c-ink-soft);margin:0 0 20px}
.lvk-games__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lvk-games__chip{background:#fff;border:2px solid var(--c-ink);border-radius:14px;padding:14px;font-weight:700;font-size:14.5px;margin:0;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:anywhere}

/* --- Kinderpartys: Motto-Party ------------------------------------------ */
.lvk-motto{padding:74px 28px}
.lvk-motto__head{text-align:center;margin-bottom:40px}
.lvk-motto__eyebrow{color:var(--c-primary)}
.lvk-motto__cols{display:flex;flex-wrap:wrap;gap:30px;align-items:stretch}
.lvk-motto__features{flex:2 1 340px;background:#fff;border:2px solid var(--c-ink);border-radius:22px;padding:30px 28px}
.lvk-checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px;font-size:15px;color:var(--c-ink-soft)}
.lvk-motto__price{flex:1 1 260px;background:var(--c-ink);border-radius:22px;padding:30px 28px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.lvk-motto__amount{font-family:'Fredoka';font-weight:700;font-size:36px;color:var(--c-accent);margin:0}
.lvk-motto__amount-note{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:20px;margin-top:0}
.lvk-motto__extras{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:rgba(255,255,255,.86)}

/* --- Kinderpartys: Figuren & Saisonales --------------------------------- */
.lvk-kp-figures{padding:74px 28px}
.lvk-kp-figures__head{text-align:center;margin-bottom:40px}
.lvk-kp-figures__eyebrow{color:var(--c-secondary)}
.lvk-season{padding:0 28px 74px}
.lvk-season__head{text-align:center;margin-bottom:40px}
.lvk-season__eyebrow{color:var(--c-secondary)}
.lvk-season__card{background:#fff;border:2px solid var(--c-border);border-radius:18px;padding:22px 14px;text-align:center}
.lvk-season__emoji{font-size:38px;margin:0}
.lvk-season__name{font-weight:700;font-size:15px;margin-top:10px;margin-bottom:0}

/* --- Kinderpartys: Zusatzleistungen ------------------------------------- */
.lvk-addons{background:var(--c-page-2);padding:74px 0}
.lvk-addons__inner{padding:0 28px}
.lvk-addons__head{text-align:center;margin-bottom:40px}
.lvk-addons__eyebrow{color:var(--c-primary)}
.lvk-addon{background:#fff;border:2px solid var(--c-ink);border-radius:22px;padding:26px;text-align:center}
.lvk-addon__emoji{font-size:36px;margin:0}
.lvk-addon__title{font-family:'Fredoka';font-weight:700;font-size:19px;margin:10px 0 4px}
.lvk-addon__price{font-family:'Fredoka';font-weight:700;font-size:22px;margin:0}
.lvk-addon__price--primary{color:var(--c-primary)}
.lvk-addon__price--secondary{color:var(--c-secondary)}
.lvk-addon__price--accent{color:var(--c-accent-d)}

/* --- Vermietung --------------------------------------------------------- */
.lvk-rent{max-width:1020px;padding:74px 28px}
.lvk-rent__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.lvk-rent__card{background:#fff;border:2px solid var(--c-ink);border-radius:24px;overflow:hidden}
.lvk-rent__visual{height:200px;display:flex;align-items:center;justify-content:center;font-size:88px;margin:0}
.lvk-rent__visual--primary{background:var(--c-primary)}
.lvk-rent__visual--secondary{background:var(--c-secondary)}
.lvk-rent__body{padding:28px}
.lvk-rent__title{font-family:'Fredoka';font-weight:700;font-size:26px;margin:0 0 4px}
.lvk-rent__price{font-family:'Fredoka';font-weight:700;font-size:30px;margin-bottom:14px;margin-top:0}
.lvk-rent__price--primary{color:var(--c-primary)}
.lvk-rent__price--secondary{color:var(--c-secondary)}
.lvk-rent__list{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--c-ink-soft)}

/* --- Kontakt ------------------------------------------------------------ */
.lvk-contact{max-width:1080px;padding:64px 28px;display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}
.lvk-contact__form{flex:1 1 460px}
.lvk-contact__aside{flex:1 1 300px;display:flex;flex-direction:column;gap:16px}
.lvk-contact__link{text-decoration:none;color:inherit}
.lvk-contact__tile{border-radius:18px;padding:22px;display:flex;align-items:center;gap:14px}
.lvk-contact__tile--ink{background:var(--c-ink);color:#fff}
.lvk-contact__tile--outline{background:#fff;border:2px solid var(--c-ink)}
.lvk-contact__icon{font-size:30px}
.lvk-contact__label{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0}
.lvk-contact__label--primary{color:var(--c-primary)}
.lvk-contact__label--secondary{color:var(--c-secondary)}
.lvk-contact__label--gold{color:#b07a00}
.lvk-contact__label--block{margin-bottom:10px}
.lvk-contact__value{font-weight:700;font-size:18px}
.lvk-contact__value--mail{font-size:15px;overflow-wrap:anywhere}
.lvk-contact__area{background:var(--c-page-2);border:2px solid var(--c-ink);border-radius:18px;padding:22px}
.lvk-contact__area-title{font-weight:700;font-size:16px;margin:0}
.lvk-contact__area-text{font-size:14px;color:var(--c-muted);margin-top:4px;margin-bottom:0}
.lvk-contact__social{display:flex;gap:12px}
.lvk-social-btn{flex:1;text-align:center;color:#fff;padding:14px;border-radius:13px;font-weight:700;text-decoration:none}
.lvk-social-btn--primary{background:var(--c-primary)}
.lvk-social-btn--secondary{background:var(--c-secondary)}

/* --- Galerie ------------------------------------------------------------ */
.lvk-gallery{padding:64px 28px}
.lvk-gal{border-radius:20px;overflow:hidden;cursor:pointer;border:2px solid var(--c-ink)}
.lvk-gal--feature{grid-column:span 2;grid-row:span 2}
.lvk-gal-img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Rechtstexte (AGB, Datenschutz, Impressum) -------------------------- */
.lvk-legal-hero{background:var(--c-ink);color:#fff;padding:54px 28px;text-align:center}
.lvk-legal-hero__eyebrow{color:var(--c-accent)}
.lvk-legal-hero__title{margin:10px 0 0}
.lvk-legal{padding:56px 28px;max-width:820px}

/* --- FAQ ----------------------------------------------------------------
   Native <details>/<summary> accordion: no library, no theme JavaScript. The
   question row is styled through .lvk-faq__q rather than through `summary`, so
   the editor's always-expanded <div> stand-in (assets/js/blocks.js) gets the
   same look without duplicating any of it.
   ------------------------------------------------------------------------ */
.lvk-faq{padding:74px 28px}
.lvk-faq__head{text-align:center;margin-bottom:38px}
.lvk-faq__eyebrow{color:var(--c-purple)}
.lvk-faq__list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.lvk-faq__item{background:#fff;border:2px solid var(--c-ink);border-radius:18px}
.lvk-faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 24px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.35;list-style:none}
/* Three declarations for one job: Firefox honours list-style, Safari needs the
   -webkit pseudo-element, Chrome drops the marker once summary is not a
   list-item box. */
.lvk-faq__q::-webkit-details-marker{display:none}
.lvk-faq__q::marker{content:""}
.lvk-faq__q-text{flex:1 1 auto}
/* Chevron drawn from two borders so the section needs no icon font or SVG. */
.lvk-faq__icon{flex:0 0 auto;width:12px;height:12px;margin-top:6px;border-right:3px solid var(--c-primary);border-bottom:3px solid var(--c-primary);transform:translateY(-3px) rotate(45deg);transition:transform .18s ease}
.lvk-faq__item[open] .lvk-faq__icon{transform:translateY(2px) rotate(225deg)}
.lvk-faq__a{padding:0 24px 22px;font-size:15.5px;color:var(--c-ink-soft)}
.lvk-faq__a>*{margin:0}
.lvk-faq__a>*+*{margin-top:10px}
.lvk-faq__a ul,.lvk-faq__a ol{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.lvk-faq__a a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
/* The global :focus-visible ring is --c-secondary, which only reaches about
   2.5:1 against the page background. The question row is the only keyboard
   target in this section, so it gets an --c-ink ring instead: ink is the body
   text colour in every Customizer scheme, so it clears 4.5:1 wherever the
   section's own text is legible. Offset puts it clear of the 2px card border.
   Declared before the pattern-DOM block so nothing here depends on it. */
.lvk-faq__q:focus-visible{outline:3px solid var(--c-ink);outline-offset:3px;border-radius:16px}
.lvk-faq__item:hover{border-color:var(--c-primary)}

/* --- Ueber uns ----------------------------------------------------------
   "Ueber uns" and "Warum wir" exist only as block patterns, without a
   hardcoded PHP version, so they need nothing from the pattern-DOM block
   below. These rules target the pattern markup directly, and every element
   sets its own margin so core's flow-layout spacing (at :where() specificity)
   never applies.
   ------------------------------------------------------------------------ */
.lvk-about{padding:74px 0}
.lvk-about__inner{padding:0 28px;display:flex;flex-wrap:wrap;gap:50px;align-items:center}
.lvk-about__copy{flex:1 1 380px;margin:0}
.lvk-about__eyebrow{color:var(--c-secondary)}
.lvk-about__title{margin:8px 0 16px}
.lvk-about__text{font-size:16px;line-height:1.6;color:var(--c-ink-soft);margin:0}
.lvk-about__text+.lvk-about__text{margin-top:14px}
.lvk-about__points{margin:22px 0 0}
.lvk-about__media{flex:1 1 340px;position:relative;margin:0}
.lvk-about__img{margin:0}
/* Fixed 4:3 frame + cover: the client swaps this image from the media library,
   and without it a portrait upload would double the height of the section. */
.lvk-about__img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;border:2px solid var(--c-ink);box-shadow:0 20px 44px rgba(0,0,0,.16);transform:rotate(2deg)}
/* Badge sits on the (unrotated) media column, the same trick as the hero
   badge, so swapping the image never moves it. */
.lvk-about__badge{position:absolute;left:16px;bottom:20px;max-width:72%;margin:0;background:var(--c-accent);color:var(--c-ink);font-weight:700;font-size:15px;padding:12px 18px;border-radius:13px;transform:rotate(-4deg);box-shadow:0 8px 20px rgba(0,0,0,.18)}

/* --- Warum wir ----------------------------------------------------------- */
.lvk-why{background:var(--c-page-2);padding:74px 0}
.lvk-why__inner{padding:0 28px}
.lvk-why__head{text-align:center;margin:0 0 40px}
.lvk-why__eyebrow{color:var(--c-primary)}
.lvk-why__grid{margin:0}
.lvk-why__card{background:#fff;border:2px solid var(--c-ink);border-radius:22px;padding:26px 24px;margin:0}
.lvk-why__icon{width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;transform:rotate(-5deg);margin:0}
.lvk-why__icon--primary{background:var(--c-primary)}
.lvk-why__icon--secondary{background:var(--c-secondary)}
.lvk-why__icon--accent{background:var(--c-accent)}
.lvk-why__icon--purple{background:var(--c-purple)}
.lvk-why__title{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.3;margin:18px 0 0}
.lvk-why__text{font-size:14.5px;line-height:1.55;color:var(--c-muted);margin:8px 0 0}

/* =========================================================================
   Block pattern DOM
   The patterns in /patterns rebuild the same sections out of core blocks, so a
   few wrappers differ from the hardcoded PHP: core/group adds .wp-block-group,
   core/heading and core/paragraph replace plain <h2>/<p>/<div>, core/image
   wraps the <img> in a <figure>, and core/button nests the link inside
   .wp-block-button. The rules below normalise only those differences.
   The button styles are not repeated here: the .lvk-bb--* selectors sit on the
   existing button rules above. None of these selectors match the hardcoded PHP
   sections.
   ========================================================================= */
.lvk-blocks{display:flow-root}
/* A stray non-section block (a loose paragraph, an image the client dropped
   between two patterns) stays readable instead of running edge to edge. */
.lvk-blocks>:not([class*="lvk-"]){max-width:820px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}

/* The eyebrow is a <span> inside the heading in the PHP sections and a sibling
   paragraph in the patterns. */
p.lvk-eyebrow,p.lvk-pagehero__eyebrow-wide{margin-top:0}

/* core/buttons brings its own flex layout at a specificity that would beat a
   bare .lvk-*__actions class, so restate the section rules at .wp-block-buttons
   specificity. Values are identical to the originals. */
.wp-block-group.lvk-hero__actions{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin:0}
.wp-block-group.lvk-cta__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:0}
.lvk-hero__actions>.wp-block-buttons,.lvk-cta__actions>.wp-block-buttons{margin:0}
.wp-block-buttons.lvk-bb-stack{display:block;margin:0}
.wp-block-button.lvk-bb--block,.wp-block-button.lvk-bb--block-primary{width:100%}

/* core/group layout adds a block-start margin to every child; the grid
   containers space their children with gap instead. */
.wp-block-group.lvk-grid-3>*,.wp-block-group.lvk-grid-4>*,.wp-block-group.lvk-grid-6>*,
.wp-block-group.lvk-games__grid>*,.wp-block-group.lvk-motto__cols>*,
.wp-block-group.lvk-rent__grid>*,.wp-block-group.lvk-faq__list>*{margin-block-start:0;margin-block-end:0}
/* Same for the flex rows of the hero, where the margin would push the photo
   column down and misalign the phone button. */
.wp-block-group.lvk-hero>*,.wp-block-group.lvk-hero__media>*,
.wp-block-group.lvk-hero__actions>*{margin-block-start:0;margin-block-end:0}

/* core/image puts the class on the <figure>, the theme styles the <img>. */
.wp-block-image.lvk-hero__img{margin:0;width:74%;height:68%}
.wp-block-image.lvk-hero__img img{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 22px 50px rgba(0,0,0,.28);transform:rotate(3deg)}
/* A plain image block in the photo column (not the framed .lvk-hero__img)
   covers the whole column, however tall the text column gets. */
.lvk-hero__media>.wp-block-image:not(.lvk-hero__img){align-self:stretch;flex:1 1 100%;margin:0}
.lvk-hero__media>.wp-block-image:not(.lvk-hero__img) img{width:100%;height:100%;object-fit:cover}
.wp-block-image.lvk-games__img{margin:0}
.wp-block-image.lvk-games__img img{width:100%;border-radius:24px;box-shadow:0 20px 44px rgba(0,0,0,.16);transform:rotate(-2deg)}

/* The "Alle Pakete ansehen" link is a bare <a> in the PHP section and a
   paragraph in the pattern. */
p.lvk-packages__morelink{margin:0}

@media(max-width:900px){
  .lvk-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lvk-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lvk-gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}
}
/* Below this width logo, links and button no longer fit in one row. */
@media(max-width:980px){
  .lvk-navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--c-page);border-bottom:2px solid var(--c-ink);flex-direction:column;align-items:stretch;gap:0;padding:6px 0}
  .lvk-navlinks.open{display:flex}
  .lvk-navlinks>*{padding:14px 28px!important;border-bottom:1px solid var(--c-border)}
  .lvk-burger{display:flex}
}
@media(max-width:760px){
  .lvk-logo{height:calc(var(--lvk-logo-h,42px) * 0.8)}
  .lvk-logo-footer{height:calc(var(--lvk-logo-h-footer,64px) * 0.8)}
}
@media(max-width:620px){
  .lvk-faq{padding:54px 20px}
  .lvk-faq__q{padding:16px 18px;font-size:16.5px;gap:14px}
  .lvk-faq__a{padding:0 18px 18px;font-size:15px}
  .lvk-grid-3{grid-template-columns:minmax(0,1fr)}
  .lvk-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lvk-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lvk-gal-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:200px}
  .lvk-gal-grid>*{grid-column:auto!important;grid-row:auto!important}
  .lvk-about{padding:54px 0}
  .lvk-about__inner{padding:0 20px;gap:32px}
  .lvk-why{padding:54px 0}
  .lvk-why__inner{padding:0 20px}
  .lvk-why__head{margin-bottom:30px}
  /* Two columns of card text are too narrow below 620. Only this grid:
     .lvk-grid-4 stays 2-up for Zusatzleistungen and Saisonales, where a card is
     a price or a single word. Must come after the .lvk-grid-4 rule above (same
     specificity, later wins). */
  .lvk-why__grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:480px){
  /* Long German words in headings ("Geschäftsbedingungen") break with a hyphen. */
  .lvk-d1,.lvk-d2,.lvk-d3,h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:break-word}
  .lvk-hero__actions,.wp-block-group.lvk-hero__actions{flex-direction:column;align-items:stretch;width:100%}
  /* In an edited hero the buttons can sit in a row group of their own; stack that row too. */
  .lvk-hero__copy .wp-block-group:has(>.lvk-hero__actions,>.lvk-hero__btn){flex-direction:column;align-items:stretch;flex-wrap:wrap}
  .lvk-hero__actions>*,.lvk-hero__actions .wp-block-button,.lvk-hero__actions .wp-block-button__link,.lvk-hero__btn{width:100%;text-align:center;white-space:nowrap}
  .lvk-hero__star,.lvk-hero__dot{display:none}
  .lvk-grid-6{gap:10px}
  .lvk-figcard--emoji{padding:14px 6px}
  .lvk-figcard__emoji{font-size:30px}
  .lvk-figcard__name{font-size:12px}
  .lvk-fig-photo .lvk-figcard__name{padding:7px 4px}
  .lvk-pkgrow{padding:16px 14px;gap:10px}
  .lvk-pkgrow__name{font-size:16px;gap:6px}
  .lvk-pkgrow__prices{gap:14px}
  .lvk-pkgrow__label{font-size:9.5px;letter-spacing:.03em}
  .lvk-pkgrow__amount{font-size:17px}
  .lvk-pkgacc__list{padding:0 14px 16px 44px}
  .lvk-pkgacc__list li{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}