/* Easing-Tokens: eine Kurve pro Zweck, statt jede Regel ihre eigene erfinden zu lassen. */
:root{
  --cuepal-ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --cuepal-ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
}

/* Scroll-Reveal: Eingang = ease-out, 500ms, Stagger 60ms. */
.cuepal-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--cuepal-ease-out), transform .5s var(--cuepal-ease-out);}
.cuepal-reveal.is-visible{opacity:1;transform:translateY(0);}
.cuepal-reveal-2{transition-delay:.06s;}
.cuepal-reveal-3{transition-delay:.12s;}
.cuepal-reveal-4{transition-delay:.18s;}
@media (prefers-reduced-motion: reduce){
  .cuepal-marquee-track{animation:none;}
  .cuepal-reveal, .cuepal-reveal-2, .cuepal-reveal-3, .cuepal-reveal-4{opacity:1;transform:none;transition:none;}
}

/* Header: stretch to full viewport width like the alignfull sections (the header block itself has no alignfull class) */
.cuepal-header{max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw!important;}

/* Header: never let the logo or CTA button get squeezed/wrapped by the flex row */
.cuepal-header{flex-wrap:wrap;row-gap:0.75rem;}
.cuepal-header-logo{flex-shrink:0;}
.cuepal-header-nav{flex-shrink:1;min-width:0;}
.cuepal-header-cta{flex-shrink:0;}
.cuepal-header-cta .wp-block-button__link{white-space:nowrap;}

/* Smooth in-page anchor scrolling */
html{scroll-behavior:smooth;}

/* Kill the default WP block-gap margin right after the full-bleed hero, so the fade blends straight into the next section instead of exposing a raw background-color gap. */
.cuepal-hero-scrim.wp-block-cover + *{margin-block-start:0!important;}

/* Sticky header, gains a shadow once the page is scrolled */
.cuepal-header{position:sticky;top:0;z-index:40;transition:box-shadow .3s ease, background-color .3s ease;background-color:rgba(20,19,16,0.6)!important;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);}
.cuepal-header.is-scrolled{box-shadow:0 12px 30px rgba(0,0,0,0.35);background-color:rgba(20,19,16,0.82)!important;}

/* Scroll-progress bar, injected by reveal.js */
#cuepal-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;background:var(--wp--preset--color--accent);z-index:9999;transition:transform .1s linear;}

/* Buttons: base + always-on focus-visible state (keyboard users get feedback regardless of pointer type) */
.wp-block-button__link{transition:transform .16s var(--cuepal-ease-out), box-shadow .16s var(--cuepal-ease-out), background-color .2s ease, color .2s ease;}
/* Press-Feedback fuer jeden Zeigertyp, nicht nur fuer Touch: die Taste reagiert beim Druecken, nicht erst beim Loslassen. */
.wp-block-button__link:active{transform:translateY(-1px) scale(0.98);}
.wp-block-button.is-style-outline .wp-block-button__link{background-color:transparent!important;border:2px solid var(--wp--preset--color--ink)!important;color:var(--wp--preset--color--ink)!important;font-weight:700!important;}
.wp-block-button__link:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(78,189,56,0.35);outline:2px solid var(--wp--preset--color--accent);outline-offset:3px;}
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible{background-color:var(--wp--preset--color--ink);color:var(--wp--preset--color--bg);}

/* Nav links: base + always-on focus-visible underline */
.cuepal-header-nav .wp-block-navigation-item__content{position:relative;transition:color .2s ease;}
.cuepal-header-nav .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--wp--preset--color--accent);transition:right .2s var(--cuepal-ease-out);
}
.cuepal-header-nav .wp-block-navigation-item__content:focus-visible{color:var(--wp--preset--color--accent);}
.cuepal-header-nav .wp-block-navigation-item__content:focus-visible::after{right:0;}

/* ---- Mouse/trackpad only: real hover effects, guarded so they never get "stuck" on a tap ---- */
@media (hover: hover) and (pointer: fine){
  .wp-block-button__link:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(78,189,56,0.35);}
  .wp-block-button.is-style-outline .wp-block-button__link:hover{
    background-color:var(--wp--preset--color--ink);
    color:var(--wp--preset--color--bg);
    box-shadow:0 10px 24px rgba(246,244,238,0.18);
  }
  .cuepal-header-cta .wp-block-button__link:hover{transform:translateY(-2px);}
  .cuepal-header-nav .wp-block-navigation-item__content:hover{color:var(--wp--preset--color--accent);}
  .cuepal-header-nav .wp-block-navigation-item__content:hover::after{right:0;}
  #leistungen .wp-block-columns .wp-block-group{transition:transform .2s var(--cuepal-ease-out), box-shadow .2s var(--cuepal-ease-out);}
  #leistungen .wp-block-columns .wp-block-group:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(0,0,0,0.3);}
  .wp-block-cover:not(.cuepal-hero-scrim){overflow:hidden;}
  .wp-block-cover:not(.cuepal-hero-scrim) .wp-block-cover__image-background,
  .wp-block-cover:not(.cuepal-hero-scrim) .wp-block-cover__video-background{transition:transform .3s var(--cuepal-ease-out);}
  .wp-block-cover:not(.cuepal-hero-scrim):hover .wp-block-cover__image-background,
  .wp-block-cover:not(.cuepal-hero-scrim):hover .wp-block-cover__video-background{transform:scale(1.06);}
  .cuepal-hero-scrim.wp-block-cover:hover{transform:none;}
  .cuepal-faq-item summary:hover{color:var(--wp--preset--color--accent);}
}

/* ---- Touchscreens: no hover exists, so give an immediate tap/press response instead ---- */
@media (hover: none){
  .wp-block-button__link{transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;}
  .wp-block-button__link:active{transform:scale(0.95);box-shadow:0 6px 16px rgba(78,189,56,0.3);}
  .wp-block-button.is-style-outline .wp-block-button__link:active{
    background-color:var(--wp--preset--color--ink);
    color:var(--wp--preset--color--bg);
  }
  #leistungen .wp-block-columns .wp-block-group{transition:transform .15s ease, box-shadow .15s ease;}
  #leistungen .wp-block-columns .wp-block-group:active{transform:scale(0.98);box-shadow:0 10px 20px rgba(0,0,0,0.3);}
  .cuepal-header-nav .wp-block-navigation-item__content:active{color:var(--wp--preset--color--accent);}
  .cuepal-header-nav .wp-block-navigation-item__content:active::after{right:0;}
  .cuepal-faq-item summary:active{color:var(--wp--preset--color--accent);}
}

/* Leistungen-Bento: linke Karte auf volle Höhe der drei rechten Karten strecken */
.cuepal-leistungen-col{display:flex;}
.cuepal-leistungen-col>.wp-block-group{flex:1;min-width:0;display:flex;flex-direction:column;}
.cuepal-heading-left{text-align:left!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;align-self:stretch!important;}
.cuepal-leistungen-col .is-layout-constrained>:where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important;}
.cuepal-fill-cover{flex:1;min-height:140px;}

/* Events: endlos durchlaufende Foto/Video-Galerie */
.cuepal-marquee-wrap{overflow:hidden;border-radius:20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.cuepal-marquee-track{display:flex;gap:1rem;width:max-content;animation:cuepal-marquee 34s linear infinite;}
.cuepal-marquee-item{flex:0 0 auto;width:240px;height:300px;border-radius:16px;background:var(--wp--preset--color--surface);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.cuepal-marquee-item img,.cuepal-marquee-item video{width:100%;height:100%;object-fit:cover;display:block;}
.cuepal-marquee-item span{font-size:0.8rem;color:rgba(246,244,238,0.45);}
@keyframes cuepal-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (hover: hover) and (pointer: fine){
  .cuepal-marquee-wrap:hover .cuepal-marquee-track{animation-play-state:paused;}
}

/* Leistungen-Karte: kompaktes Karussell innerhalb der Karte, gleiche Mechanik wie bei Events */
.cuepal-marquee-wrap--card{width:100%;min-width:0;max-width:100%;overflow:hidden;border-radius:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.cuepal-marquee-wrap--card .cuepal-marquee-track{height:100%;gap:0.75rem;animation-duration:22s;}
.cuepal-marquee-wrap--card .cuepal-marquee-item{width:130px;height:100%;border-radius:12px;}

/* Photo/video placeholders: gentle pulse on the "folgt" caption, works the same on every device since it's not hover-based */
.cuepal-marquee-item span{animation:cuepal-pulse 2.4s ease-in-out infinite;}
@keyframes cuepal-pulse{0%,100%{opacity:.45;}50%{opacity:.85;}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .cuepal-header{transition:none;}
  .wp-block-button__link{transition:none;}
  .wp-block-button__link:hover, .wp-block-button__link:focus-visible, .wp-block-button__link:active{transform:none;}
  .cuepal-header-nav .wp-block-navigation-item__content::after{transition:none;}
  #leistungen .wp-block-columns .wp-block-group{transition:none;}
  #leistungen .wp-block-columns .wp-block-group:hover, #leistungen .wp-block-columns .wp-block-group:active{transform:none;}
  .wp-block-cover{transition:none;}
  .wp-block-cover:hover{transform:none;}
  .wp-block-cover .wp-block-paragraph{animation:none;}
  #cuepal-progress{transition:none;}
}

/* Back-to-top button */
#cuepal-to-top{position:fixed;right:calc(1.25rem + env(safe-area-inset-right, 0px));bottom:calc(1.25rem + env(safe-area-inset-bottom, 0px));width:48px;height:48px;border-radius:999px;background:var(--wp--preset--color--accent);color:var(--wp--preset--color--bg);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;border:none;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s ease, transform .25s ease;z-index:9998;box-shadow:0 10px 24px rgba(0,0,0,0.35);}
#cuepal-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
@media (hover: hover) and (pointer: fine){
  #cuepal-to-top:hover{transform:translateY(-3px);}
}
@media (hover: none){
  #cuepal-to-top:active{transform:scale(0.92);}
}
@media (prefers-reduced-motion: reduce){
  #cuepal-to-top{transition:none;}
}

/* FAQ accordion */
.cuepal-faq-item{border-bottom:1px solid rgba(246,244,238,0.14);padding:1.1rem 0;}
.cuepal-faq-item:first-of-type{border-top:1px solid rgba(246,244,238,0.14);}
.cuepal-faq-item summary{cursor:pointer;font-family:var(--wp--preset--font-family--heading, inherit);font-weight:600;font-size:1.05rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:color .2s ease;}
.cuepal-faq-item summary::-webkit-details-marker{display:none;}
.cuepal-faq-item summary::after{content:'+';color:var(--wp--preset--color--accent);font-size:1.3rem;font-weight:400;flex-shrink:0;transition:transform .25s ease;}
.cuepal-faq-item[open] summary::after{transform:rotate(45deg);}
.cuepal-faq-item summary:focus-visible{color:var(--wp--preset--color--accent);}
.cuepal-faq-item p{margin-top:0.75rem;}
@media (prefers-reduced-motion: reduce){
  .cuepal-faq-item summary::after{transition:none;}
}

/* ===== Redesign 2026-08: "Atmospheric Precision" (Mint/Amber Stage Manager) ===== */

/* Eyebrow badge: pill with pulsing dot, used for hero/section kickers */
.cuepal-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .9rem;border-radius:999px;background:rgba(246,244,238,0.06);border:1px solid rgba(246,244,238,0.12);}
.cuepal-badge .cuepal-badge-dot{width:8px;height:8px;border-radius:999px;background:var(--wp--preset--color--accent);box-shadow:0 0 12px var(--wp--preset--color--accent);animation:cuepal-badge-pulse 2s ease-in-out infinite;flex-shrink:0;}
.cuepal-badge .cuepal-badge-label{font-family:var(--wp--preset--font-family--heading);font-weight:700;letter-spacing:.18em;font-size:.72rem;text-transform:uppercase;color:var(--wp--preset--color--accent);}
@keyframes cuepal-badge-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* Glow text: subtle mint text-shadow for hero/CTA headlines */
.cuepal-text-glow{text-shadow:0 0 24px rgba(78,189,56,0.35);}
.cuepal-text-glow-amber{text-shadow:0 0 24px rgba(255,191,0,0.3);}

/* Gradient CTA button: EVERY accent-filled button sitewide automatically gets the mint "stage light" gradient */
.wp-block-button__link.has-accent-background-color,.cuepal-btn-grad .wp-block-button__link,a.cuepal-btn-grad{
  background:linear-gradient(135deg, var(--wp--preset--color--accent) 0%, #2F8A26 100%)!important;
  color:#141310!important;
  border:none!important;
}

/* ===== Redesign 2026-08 v2: strukturelles Bento/Editorial-Redesign ===== */
:root{
  --cuepal-s1:#131313;
  --cuepal-s2:#1A1919;
  --cuepal-s3:#201F1F;
  --cuepal-s4:#262626;
}

.cuepal-surface-1{background-color:var(--cuepal-s1)!important;}
.cuepal-surface-2{background-color:var(--cuepal-s2)!important;}
.cuepal-surface-3{background-color:var(--cuepal-s3)!important;}
.cuepal-surface-4{background-color:var(--cuepal-s4)!important;}

@media (hover: hover) and (pointer: fine){
  .cuepal-hover-lift{transition:transform .2s var(--cuepal-ease-out), background-color .2s var(--cuepal-ease-out);}
  .cuepal-hover-lift:hover{transform:translateY(-4px);background-color:var(--cuepal-s3)!important;}
}
@media (hover: none){
  .cuepal-hover-lift{transition:transform .15s ease;}
  .cuepal-hover-lift:active{transform:scale(0.98);}
}

.cuepal-check-list{list-style:none;padding-left:0;margin:0;display:flex;flex-direction:column;gap:.85rem;}
.cuepal-check-list li{position:relative;padding-left:1.9rem;font-size:0.95rem;}
.cuepal-check-list li::before{content:"";position:absolute;left:0;top:0.15em;width:1.15rem;height:1.15rem;border-radius:999px;background:var(--wp--preset--color--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/70% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/70% no-repeat;}

.cuepal-bento-cover.wp-block-cover{border-radius:2rem;min-height:22rem;}
.cuepal-bento-cover.wp-block-cover .wp-block-cover__inner-container{padding:2.5rem;}

.cuepal-figure-xl{font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:clamp(2.5rem,5vw,4rem);line-height:1;}

.cuepal-trust-strip{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;}
.cuepal-trust-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:999px;background:var(--cuepal-s2);font-size:.85rem;font-weight:600;}
.cuepal-trust-chip .cuepal-trust-dot{width:6px;height:6px;border-radius:999px;background:var(--wp--preset--color--accent);flex-shrink:0;}

/* Full-bleed hero: bottom-fade scrim for text legibility + scroll indicator */
.cuepal-hero-scrim.wp-block-cover{position:relative;}
.cuepal-hero-scrim.wp-block-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(20,19,16,0.5) 0%, rgba(20,19,16,0.25) 38%, rgba(20,19,16,0) 62%);-webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 32%, rgba(0,0,0,0) 70%);mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 32%, rgba(0,0,0,0) 70%);pointer-events:none;z-index:1;}
.cuepal-hero-scrim.wp-block-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(30,28,23,0) 0%, rgba(30,28,23,0) 85%, rgba(30,28,23,0.011) 85.9%, rgba(30,28,23,0.043) 86.9%, rgba(30,28,23,0.092) 87.8%, rgba(30,28,23,0.156) 88.75%, rgba(30,28,23,0.232) 89.7%, rgba(30,28,23,0.316) 90.6%, rgba(30,28,23,0.407) 91.6%, rgba(30,28,23,0.5) 92.5%, rgba(30,28,23,0.593) 93.4%, rgba(30,28,23,0.684) 94.4%, rgba(30,28,23,0.768) 95.3%, rgba(30,28,23,0.844) 96.25%, rgba(30,28,23,0.908) 97.2%, rgba(30,28,23,0.957) 98.1%, rgba(30,28,23,0.989) 99.1%, rgba(30,28,23,1) 100%);pointer-events:none;z-index:1;}
.cuepal-hero-scrim.wp-block-cover .wp-block-cover__inner-container{position:relative;z-index:2;}
.cuepal-hero-scrim.wp-block-cover__inner-container,.cuepal-hero-scrim .wp-block-cover__inner-container,.cuepal-hero-scrim h1,.cuepal-hero-scrim p{color:var(--wp--preset--color--ink)!important;}
.wp-block-button.is-style-outline .wp-block-button__link{background-color:rgba(20,19,16,0.45)!important;}
.cuepal-scroll-indicator{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;z-index:5;}
.cuepal-scroll-indicator span{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,244,238,0.55);font-weight:700;}
.cuepal-scroll-line{width:1px;height:3.5rem;background:linear-gradient(180deg,var(--wp--preset--color--accent),transparent);}

/* Eyebrow used inline above bento-card headings */
.cuepal-card-eyebrow{display:block;font-family:var(--wp--preset--font-family--heading);font-weight:700;letter-spacing:.15em;font-size:.7rem;text-transform:uppercase;margin-bottom:.6rem;}
.cuepal-card-eyebrow.is-amber{color:var(--wp--preset--color--secondary);}
.cuepal-card-eyebrow.is-mint{color:var(--wp--preset--color--accent);}

/* Section eyebrow: small uppercase kicker line above headings, amber variant available */
.cuepal-eyebrow{display:block;font-family:var(--wp--preset--font-family--heading);font-weight:700;letter-spacing:.2em;font-size:.75rem;text-transform:uppercase;margin-bottom:.75rem;}
.cuepal-eyebrow.is-amber{color:var(--wp--preset--color--secondary);}
.cuepal-eyebrow.is-mint{color:var(--wp--preset--color--accent);}

/* Benefit row: icon + heading + text, used for "Warum CUE PAL" style sections */
.cuepal-benefit{display:flex;gap:1.25rem;align-items:flex-start;}
.cuepal-benefit-icon{width:3rem;height:3rem;border-radius:.9rem;background:rgba(246,244,238,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.4rem;}

/* Bento cards: larger, softer radius matching the new visual language */
.cuepal-card-xl{border-radius:2rem!important;overflow:hidden;}

/* Stats/benefit strip divider bars */
.cuepal-stat-value{font-family:var(--wp--preset--font-family--heading);font-weight:700;}

/* ===== Motion- und Mobile-Politur 2026-09 =====
   Reihenfolge beachtet: dieser Block steht bewusst am Dateiende und ueberschreibt
   frueher definierte Werte. Quelle der Regeln: Emil Kowalski (Motion, Mobile-Feel)
   und Apples WWDC-Designvortraege (Materialien, Typografie). */

/* --- Mobile-Basis: die Tells, die eine Website am Telefon als Website entlarven --- */
html{
  -webkit-tap-highlight-color:transparent; /* kein grauer Blitz beim Antippen */
  -webkit-text-size-adjust:100%;           /* kein Font-Aufblasen im Querformat */
  text-size-adjust:100%;
}

/* Bedienelemente: sofortiger Tap statt Verzoegerung, und kein Markieren beim Halten.
   Fliesstext bleibt bewusst markierbar, Adressen und Telefonnummern muss man kopieren koennen. */
.wp-block-button__link,
.cuepal-header-nav .wp-block-navigation-item__content,
.cuepal-faq-item summary,
#cuepal-to-top,
button,
[role="button"]{
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}

/* --- Scroll-Indikator: am Telefon lag er ueber dem Haupt-Button --- */
@media (max-width: 781px){
  .cuepal-scroll-indicator{display:none;}
}

/* --- Typografie: Laufweite gehoert zur Schriftgroesse, nicht ein Wert fuer alles.
   Grosse Zeilen brauchen negative Laufweite, Fliesstext keine. --- */
h1, .cuepal-figure-xl{letter-spacing:-0.025em;}
h2{letter-spacing:-0.02em;}
h3{letter-spacing:-0.015em;}
body, p, li{letter-spacing:0;}

/* --- Glas-Header: wer Transparenz oder mehr Kontrast eingestellt hat, bekommt eine feste Flaeche --- */
@media (prefers-reduced-transparency: reduce){
  .cuepal-header{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background-color:rgba(20,19,16,0.97)!important;
  }
  .cuepal-badge{background:var(--cuepal-s2);}
}
@media (prefers-contrast: more){
  .cuepal-header{background-color:#141310!important;border-bottom:1px solid rgba(246,244,238,0.35);}
  .cuepal-text-glow, .cuepal-text-glow-amber{text-shadow:none;}
  .cuepal-faq-item{border-bottom-color:rgba(246,244,238,0.4);}
}

/* --- Reduzierte Bewegung: weniger und sanfter, nicht komplett aus.
   Farbwechsel bleiben, weil sie verstaendlich machen was passiert. Bewegung faellt weg. --- */
@media (prefers-reduced-motion: reduce){
  .cuepal-header{transition:background-color .3s ease, box-shadow .3s ease;}
  .wp-block-button__link{transition:background-color .2s ease, color .2s ease;}
  .cuepal-hover-lift{transition:background-color .2s ease;}
  .cuepal-header-nav .wp-block-navigation-item__content{transition:color .2s ease;}
  .cuepal-faq-item summary{transition:color .2s ease;}
  /* Dauerschleifen anhalten: beide liefen bisher auch bei reduzierter Bewegung weiter. */
  .cuepal-badge .cuepal-badge-dot{animation:none;opacity:1;}
  .cuepal-marquee-item span{animation:none;opacity:.7;}
  #cuepal-to-top{transition:opacity .2s ease;}
  #cuepal-to-top.is-visible{transform:none;}
  #cuepal-to-top{transform:none;}
}

/* ===== Kontakt-Abschluss verstaerkt (impeccable bolder, 19.09.2026) =====
   Der Abschnitt war der einzige der Seite ohne ein einziges Gestaltungsmittel:
   zwei Buttons in einer grauen Box, kaum vom Footer zu unterscheiden, und mit
   der kleinsten Ueberschrift der ganzen Seite. Er bekommt jetzt die Mittel, die
   der Hero laengst benutzt (Vollbild-Foto, Verlaufs-Scrim, Glow, grosse Zeile).
   Nichts Neues erfunden: gleiche Farben, gleiche Schrift, gleiche Bausteine.
   Bild 66, Blick von der Buehne ins Publikum, Gegenperspektive zum Hero. */

#kontakt{
  position:relative;
  isolation:isolate;
  background-image:url("https://cuepal9213.live-website.com/wp-content/uploads/2026/08/a0871177-2488-441e-b986-9ec0d62dade2-1536x1024.jpg");
  background-size:cover;
  background-position:center 45%;
  background-repeat:no-repeat;
  padding-top:9rem!important;
  padding-bottom:9rem!important;
}
@media (min-width: 1200px){
  #kontakt{background-image:url("https://cuepal9213.live-website.com/wp-content/uploads/2026/08/a0871177-2488-441e-b986-9ec0d62dade2-2048x1366.jpg");}
}
@media (max-width: 781px){
  #kontakt{
    background-image:url("https://cuepal9213.live-website.com/wp-content/uploads/2026/08/a0871177-2488-441e-b986-9ec0d62dade2-1024x683.jpg");
    padding-top:6rem!important;padding-bottom:6rem!important;
  }
}

/* Scrim: zur Mitte hin dicht genug fuer sauberen Textkontrast, an den Raendern
   bleibt das Foto sichtbar. Gleiche Mechanik wie im Hero, nur auf die zentrierte
   Komposition dieses Abschnitts ausgerichtet. */
#kontakt::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 72% 82% at 50% 50%, rgba(20,19,16,0.72) 0%, rgba(20,19,16,0.62) 48%, rgba(20,19,16,0.5) 78%, rgba(20,19,16,0.4) 100%),
    linear-gradient(180deg, rgba(20,19,16,0.55) 0%, rgba(20,19,16,0.2) 22%, rgba(20,19,16,0.2) 74%, rgba(20,19,16,0.82) 92%, rgba(20,19,16,1) 100%);
}
#kontakt>*{position:relative;z-index:1;}

/* Am Telefon schneidet das Bild anders an: es steht dort der helle, ausgeleuchtete
   Publikumsbereich hinter dem Text. Der radiale Scrim ist fuer diesen Ausschnitt zu
   schwach, deshalb bekommt Schmalformat einen gleichmaessig dichteren Verlauf. */
@media (max-width: 781px){
  #kontakt::before{
    background:linear-gradient(180deg, rgba(20,19,16,0.72) 0%, rgba(20,19,16,0.78) 30%, rgba(20,19,16,0.8) 70%, rgba(20,19,16,0.93) 92%, rgba(20,19,16,1) 100%);
  }
}

/* Die graue Innenbox faellt weg: der Inhalt steht direkt im Bild. */
#kontakt>.wp-block-group{
  background-color:transparent!important;
  background:none!important;
  padding-top:0!important;padding-bottom:0!important;
  padding-left:0!important;padding-right:0!important;
  border-radius:0!important;
}

/* Ueberschrift auf die Staerke, die der Hero vorgibt, plus denselben Glow.
   Laufweite bleibt oberhalb der -0.04em-Grenze. */
#kontakt h2{
  font-size:clamp(2.25rem, 5vw, 3.75rem)!important;
  line-height:1.02!important;
  letter-spacing:-0.028em!important;
  text-shadow:0 0 28px rgba(78,189,56,0.38);
  max-width:18ch;margin-left:auto;margin-right:auto;
  text-wrap:balance;
}

/* Alles um den Zug herum wird leiser, damit die beiden Buttons der Zielpunkt sind. */
#kontakt h2+p{
  color:rgba(246,244,238,0.82)!important;
  max-width:46ch;margin-left:auto!important;margin-right:auto!important;
  margin-top:1.25rem!important;margin-bottom:2.5rem!important;
}
#kontakt .wp-block-buttons+p{
  color:rgba(246,244,238,0.72)!important;
  margin-top:2.25rem!important;
  letter-spacing:0.01em;
}

/* Hoeherer Kontrast und weniger Transparenz: Scrim wird dicht, Glow faellt weg. */
@media (prefers-contrast: more){
  #kontakt::before{background:rgba(20,19,16,0.93);}
  #kontakt h2{text-shadow:none;}
}
@media (prefers-reduced-transparency: reduce){
  #kontakt::before{
    background:linear-gradient(180deg, rgba(20,19,16,0.9) 0%, rgba(20,19,16,0.88) 80%, rgba(20,19,16,1) 100%);
  }
}

/* Ankersprung-Korrektur: der Header klebt oben und ist rund 190px hoch, die
   Sprungziele hatten aber kein scroll-margin. Jeder Klick in der Navigation
   landete damit hinter dem Header, die Ueberschrift des Ziels war verdeckt. */
#top, #leistungen, #events, #ueber-uns, #faq, #kontakt{
  scroll-margin-top:13rem;
}

/* ===== Direktkontakt rechts unten + Hover-Nachtrag (19.09.2026) =====
   Zwei runde Schaltflaechen, Anrufen und E-Mail, als schwebende Glasebene ueber
   dem Inhalt. Dasselbe Materialprinzip wie der Header: durchscheinende Flaeche
   mit Unschaerfe dahinter, hier mit 90 Prozent Deckkraft. Der Pfeil nach oben
   sitzt darunter und ist bewusst dunkel gehalten: Werkzeug, keine Hauptaktion. */

#cuepal-quick{
  position:fixed;
  right:calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom:calc(1.25rem + env(safe-area-inset-bottom, 0px) + 60px);
  z-index:9997;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

.cuepal-quick-btn{
  width:48px;height:48px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(78,189,56,0.55);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(246,244,238,0.4);
  color:#141310;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  text-decoration:none;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
  transition:transform .16s var(--cuepal-ease-out), box-shadow .16s var(--cuepal-ease-out), background-color .2s ease;
}
.cuepal-quick-btn svg{width:21px;height:21px;display:block;}

@media (hover: hover) and (pointer: fine){
  .cuepal-quick-btn:hover{
    transform:translateY(-3px);
    background:rgba(78,189,56,0.78);
    box-shadow:0 14px 30px rgba(78,189,56,0.4);
  }
}
.cuepal-quick-btn:active{transform:scale(0.94);}
.cuepal-quick-btn:focus-visible{
  outline:2px solid var(--wp--preset--color--accent);
  outline-offset:3px;
  transform:translateY(-3px);
}

/* Der Pfeil nach oben bekommt dasselbe Material, aber dunkel: er ordnet sich den
   beiden Kontaktknoepfen unter, statt als dritter gruener Kreis mit ihnen zu konkurrieren. */
#cuepal-to-top{
  background:rgba(20,19,16,0.55)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(246,244,238,0.4)!important;
  color:var(--wp--preset--color--ink)!important;
}
#cuepal-to-top svg{width:21px;height:21px;display:block;}

/* Wer Transparenz reduziert oder mehr Kontrast eingestellt hat, bekommt volle Flaechen. */
@media (prefers-reduced-transparency: reduce){
  .cuepal-quick-btn{background:var(--wp--preset--color--accent);-webkit-backdrop-filter:none;backdrop-filter:none;}
  #cuepal-to-top{background:#141310!important;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media (prefers-contrast: more){
  .cuepal-quick-btn{background:var(--wp--preset--color--accent);border-color:#141310;}
  #cuepal-to-top{background:#141310!important;border-color:rgba(246,244,238,0.6)!important;}
}
@media (prefers-reduced-motion: reduce){
  .cuepal-quick-btn{transition:background-color .2s ease;}
  .cuepal-quick-btn:hover, .cuepal-quick-btn:active, .cuepal-quick-btn:focus-visible{transform:none;}
}

/* Hover-Nachtrag: die Karte "Ein Ansprechpartner, volle Verantwortung" traegt zwar
   cuepal-card-xl, aber nicht cuepal-hover-lift, und lag ausserhalb der Spaltenregel
   fuer die Leistungskarten. Sie war damit die einzige Karte im Abschnitt ohne
   Reaktion auf den Mauszeiger. */
@media (hover: hover) and (pointer: fine){
  #leistungen > .wp-block-columns.cuepal-card-xl{
    transition:transform .2s var(--cuepal-ease-out), box-shadow .2s var(--cuepal-ease-out);
  }
  #leistungen > .wp-block-columns.cuepal-card-xl:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(0,0,0,0.3);
  }
}
@media (hover: none){
  #leistungen > .wp-block-columns.cuepal-card-xl{transition:transform .15s var(--cuepal-ease-out);}
  #leistungen > .wp-block-columns.cuepal-card-xl:active{transform:scale(0.99);}
}
@media (prefers-reduced-motion: reduce){
  #leistungen > .wp-block-columns.cuepal-card-xl{transition:none;}
  #leistungen > .wp-block-columns.cuepal-card-xl:hover,
  #leistungen > .wp-block-columns.cuepal-card-xl:active{transform:none;}
}