.elementor-kit-57{--e-global-color-primary:#C86B4A;--e-global-color-secondary:#8A9A7B;--e-global-color-text:#43392F;--e-global-color-accent:#D89B5C;--e-global-color-primarydeep:#A94E32;--e-global-color-gold:#E8C48A;--e-global-color-textsoft:#6F6456;--e-global-color-bgbase:#F7F1E8;--e-global-color-bgwarm:#F3E9DA;--e-global-color-bgalt:#EBE0CE;--e-global-color-card:#FCF9F3;--e-global-color-border:#DED2BE;--e-global-color-dark:#3A322B;--e-global-typography-primary-font-family:"Fraunces";--e-global-typography-primary-font-size:3.75em;--e-global-typography-primary-font-weight:300;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-line-height:1.05em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Fraunces";--e-global-typography-secondary-font-size:2.5em;--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-line-height:1.08em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"Mulish";--e-global-typography-text-font-size:1.125em;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-line-height:1.8em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"Fraunces";--e-global-typography-accent-font-size:1.375em;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-font-style:italic;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0em;--e-global-typography-h3style-font-family:"Fraunces";--e-global-typography-h3style-font-size:1.875em;--e-global-typography-h3style-font-weight:400;--e-global-typography-h3style-text-transform:none;--e-global-typography-h3style-font-style:normal;--e-global-typography-h3style-line-height:1.15em;--e-global-typography-h3style-letter-spacing:-0.02em;--e-global-typography-kicker-font-family:"Mulish";--e-global-typography-kicker-font-size:0.9375em;--e-global-typography-kicker-font-weight:600;--e-global-typography-kicker-text-transform:uppercase;--e-global-typography-kicker-font-style:normal;--e-global-typography-kicker-line-height:1.4em;--e-global-typography-kicker-letter-spacing:0.14em;--e-global-typography-lead-font-family:"Mulish";--e-global-typography-lead-font-size:1.375em;--e-global-typography-lead-font-weight:400;--e-global-typography-lead-text-transform:none;--e-global-typography-lead-font-style:normal;--e-global-typography-lead-line-height:1.6em;--e-global-typography-lead-letter-spacing:0em;--e-global-typography-numstyle-font-family:"Fraunces";--e-global-typography-numstyle-font-size:6em;--e-global-typography-numstyle-font-weight:300;--e-global-typography-numstyle-text-transform:none;--e-global-typography-numstyle-font-style:normal;--e-global-typography-numstyle-line-height:0.8em;--e-global-typography-numstyle-letter-spacing:0em;background-color:#F7F1E8;color:#43392F;font-family:"Mulish", Georgia, serif;font-size:1.125em;font-weight:400;line-height:1.8em;}.elementor-kit-57 button,.elementor-kit-57 input[type="button"],.elementor-kit-57 input[type="submit"],.elementor-kit-57 .elementor-button{background-color:#C86B4A;font-family:"Mulish", Georgia, serif;font-size:1em;font-weight:600;color:#F7F1E8;border-radius:2.5em 2.5em 2.5em 2.5em;}.elementor-kit-57 button:hover,.elementor-kit-57 button:focus,.elementor-kit-57 input[type="button"]:hover,.elementor-kit-57 input[type="button"]:focus,.elementor-kit-57 input[type="submit"]:hover,.elementor-kit-57 input[type="submit"]:focus,.elementor-kit-57 .elementor-button:hover,.elementor-kit-57 .elementor-button:focus{background-color:#A94E32;color:#F7F1E8;}.elementor-kit-57 e-page-transition{background-color:#FFBC7D;}.elementor-kit-57 a{color:#A94E32;}.elementor-kit-57 a:hover{color:#C86B4A;}.elementor-kit-57 h1{color:#43392F;font-family:"Fraunces", Georgia, serif;font-size:3.75em;font-weight:300;line-height:1.05em;letter-spacing:-0.02em;}.elementor-kit-57 h2{color:#43392F;font-family:"Fraunces", Georgia, serif;font-size:2.5em;font-weight:300;line-height:1.08em;letter-spacing:-0.02em;}.elementor-kit-57 h3{color:#43392F;font-family:"Fraunces", Georgia, serif;font-size:1.875em;font-weight:400;line-height:1.15em;}.elementor-kit-57 h4{color:#43392F;font-family:"Mulish", Georgia, serif;font-size:1.25em;font-weight:700;line-height:1.3em;}.elementor-kit-57 h5{color:#43392F;font-family:"Mulish", Georgia, serif;font-size:1.0625em;font-weight:600;}.elementor-kit-57 h6{color:#6F6456;font-family:"Mulish", Georgia, serif;font-size:0.9375em;font-weight:600;text-transform:uppercase;letter-spacing:0.14em;}.elementor-kit-57 input:not([type="button"]):not([type="submit"]),.elementor-kit-57 textarea,.elementor-kit-57 .elementor-field-textual{font-family:"Mulish", Georgia, serif;font-size:1em;color:#43392F;background-color:#FCF9F3;border-radius:0.6em 0.6em 0.6em 0.6em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0em;--container-default-padding-right:0em;--container-default-padding-bottom:0em;--container-default-padding-left:0em;}.elementor-widget:not(:last-child){--kit-widget-spacing:0em;}.elementor-element{--widgets-spacing:0em 0em;--widgets-spacing-row:0em;--widgets-spacing-column:0em;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-57{--e-global-typography-primary-font-size:2.875em;--e-global-typography-secondary-font-size:2.125em;--e-global-typography-h3style-font-size:1.625em;--e-global-typography-lead-font-size:1.25em;--e-global-typography-numstyle-font-size:4.5em;}.elementor-kit-57 h1{font-size:2.875em;}.elementor-kit-57 h2{font-size:2.125em;}.elementor-kit-57 h3{font-size:1.625em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-57{--e-global-typography-primary-font-size:2.125em;--e-global-typography-secondary-font-size:1.75em;--e-global-typography-text-font-size:1.0625em;--e-global-typography-h3style-font-size:1.375em;--e-global-typography-lead-font-size:1.125em;--e-global-typography-numstyle-font-size:3.5em;font-size:1.0625em;}.elementor-kit-57 h1{font-size:2.125em;}.elementor-kit-57 h2{font-size:1.75em;}.elementor-kit-57 h3{font-size:1.375em;}.elementor-kit-57 h4{font-size:1.125em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   STILLGLUECK - Custom CSS (Premium-Layer, CSS-only)
   Modernes Scroll-Driven Motion, keine JS-Abhaengigkeit,
   graceful degradation in alten Browsern (Fallback = sichtbar)
   ============================================================ */

/* ----------------------------------------------------------------
   1. GLOBALE FARB-VARIABLEN
---------------------------------------------------------------- */
:root {
  --sg-primary: #C86B4A;
  --sg-primarydeep: #A94E32;
  --sg-secondary: #8A9A7B;
  --sg-text: #43392F;
  --sg-textsoft: #6F6456;
  --sg-accent: #D89B5C;
  --sg-gold: #E8C48A;
  --sg-bgbase: #F7F1E8;
  --sg-bgwarm: #F3E9DA;
  --sg-bgalt: #EBE0CE;
  --sg-card: #FCF9F3;
  --sg-border: #DED2BE;
  --sg-dark: #3A322B;
  --sg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ----------------------------------------------------------------
   2. SMOOTH-SCROLL
---------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6em;
}

em {
  color: var(--sg-primary);
  font-style: italic;
}

/* ----------------------------------------------------------------
   3. SCROLL-PROGRESS-INDICATOR (oben, modern, kein JS)
   Funktioniert in Chrome/Edge/Opera. Safari = unsichtbar.
---------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 0.18em;
    width: 100%;
    background: linear-gradient(
      to right,
      var(--sg-primary),
      var(--sg-accent)
    );
    transform-origin: left;
    transform: scaleX(0);
    z-index: 9999;
    animation: sg-scroll-progress linear;
    animation-timeline: scroll(root);
  }
}
@keyframes sg-scroll-progress {
  to { transform: scaleX(1); }
}

/* ----------------------------------------------------------------
   4. PAGE-LOAD HERO REVEAL (Letter-Spacing tightens + blur-clear)
   Headline fadet edel ein beim Laden - kein JS, kein Verstecken
---------------------------------------------------------------- */
@keyframes sg-letter-reveal {
  from {
    letter-spacing: 0.06em;
    opacity: 0;
    filter: blur(0.18em);
    transform: translateY(0.4em);
  }
  to {
    letter-spacing: -0.025em;
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

.elementor-section:first-of-type h1,
.e-con:first-of-type h1,
[data-elementor-type="wp-page"] h1:first-of-type {
  animation: sg-letter-reveal 1.4s 0.25s var(--sg-ease) backwards;
}

/* Lead-Text faded sanft hinterher */
@keyframes sg-fade-up {
  from { opacity: 0; transform: translateY(1.5em); }
  to   { opacity: 1; transform: none; }
}

.elementor-section:first-of-type .elementor-widget-text-editor:first-of-type,
.e-con:first-of-type .elementor-widget-text-editor:first-of-type {
  animation: sg-fade-up 1.2s 0.7s var(--sg-ease) backwards;
}

.elementor-section:first-of-type .elementor-widget-button,
.e-con:first-of-type .elementor-widget-button {
  animation: sg-fade-up 1.2s 1s var(--sg-ease) backwards;
}

/* ----------------------------------------------------------------
   5. SCROLL-DRIVEN SECTION REVEAL (modernster CSS-Standard)
   Sektionen faden sanft ein wenn sie in den Viewport scrollen
---------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .elementor-section:not(:first-of-type),
  .e-con.e-flex:not(:first-of-type),
  section:not(:first-of-type) {
    animation: sg-section-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}
@keyframes sg-section-reveal {
  from { opacity: 0; transform: translateY(2.5em); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------
   6. SCROLL-DRIVEN IMAGE PARALLAX (Bild bewegt sich subtil)
---------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .sg-blob,
  .sg-blob-alt,
  .elementor-widget-image:has(img[class*="sg-blob"]) {
    animation: sg-image-parallax linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}
@keyframes sg-image-parallax {
  from { transform: translateY(2em); }
  to   { transform: translateY(-2em); }
}

/* ----------------------------------------------------------------
   7. BLOB-BILDER (per Klasse - Hero: sg-blob, Ueber-mich: sg-blob-alt)
---------------------------------------------------------------- */
.sg-blob,
.sg-blob-alt,
.sg-blob .elementor-widget-container,
.sg-blob-alt .elementor-widget-container {
  overflow: hidden !important;
}

.sg-blob img,
img.sg-blob,
.elementor-widget-image.sg-blob img,
.e-image.sg-blob img {
  border-radius: 62% 38% 47% 53% / 55% 42% 58% 45% !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  animation: sg-blob-a 20s ease-in-out infinite alternate;
  transition: transform 800ms var(--sg-ease);
}

.sg-blob-alt img,
img.sg-blob-alt,
.elementor-widget-image.sg-blob-alt img,
.e-image.sg-blob-alt img {
  border-radius: 38% 62% 53% 47% / 42% 55% 45% 58% !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  animation: sg-blob-b 24s ease-in-out infinite alternate;
  transition: transform 800ms var(--sg-ease);
}

.sg-blob:hover img,
.sg-blob-alt:hover img,
.elementor-widget-image.sg-blob:hover img,
.elementor-widget-image.sg-blob-alt:hover img {
  transform: scale(1.03);
}

@keyframes sg-blob-a {
  0%   { border-radius: 62% 38% 47% 53% / 55% 42% 58% 45%; }
  50%  { border-radius: 48% 52% 60% 40% / 45% 55% 45% 55%; }
  100% { border-radius: 55% 45% 40% 60% / 60% 38% 62% 40%; }
}
@keyframes sg-blob-b {
  0%   { border-radius: 38% 62% 53% 47% / 42% 55% 45% 58%; }
  50%  { border-radius: 52% 48% 42% 58% / 55% 45% 55% 45%; }
  100% { border-radius: 45% 55% 60% 40% / 38% 58% 42% 62%; }
}

/* Fallback fuer alte JSON-Imports mit IDs */
#hero-image-placeholder,
#ueber-image-placeholder {
  position: relative;
  overflow: hidden;
}
#hero-image-placeholder {
  border-radius: 62% 38% 47% 53% / 55% 42% 58% 45%;
  animation: sg-blob-a 20s ease-in-out infinite alternate;
}
#ueber-image-placeholder {
  border-radius: 38% 62% 53% 47% / 42% 55% 45% 58%;
  animation: sg-blob-b 24s ease-in-out infinite alternate;
}
#hero-image-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 25%,
    rgba(232, 196, 138, 0.35) 0%,
    rgba(232, 196, 138, 0) 60%
  );
  pointer-events: none;
  z-index: 2;
}

/* ----------------------------------------------------------------
   8. BUTTON LIFT bei Hover (Premium-Touch)
---------------------------------------------------------------- */
.elementor-button {
  transition: transform 320ms var(--sg-ease),
              box-shadow 320ms ease,
              background-color 220ms ease,
              color 220ms ease;
  will-change: transform;
}
.elementor-button:hover {
  transform: translateY(-0.18em);
  box-shadow:
    0 0.6em 1.6em rgba(169, 78, 50, 0.22),
    0 0.2em 0.5em rgba(169, 78, 50, 0.12);
}
.elementor-button:active {
  transform: translateY(-0.05em);
  transition-duration: 120ms;
}

/* ----------------------------------------------------------------
   9. LINK-UNDERLINE-WAVE bei Hover
---------------------------------------------------------------- */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor p a:not(.elementor-button) {
  background-image: linear-gradient(
    to right,
    var(--sg-primary) 0%,
    var(--sg-primary) 100%
  );
  background-size: 0% 0.08em;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 380ms var(--sg-ease), color 220ms ease;
  text-decoration: none;
  padding-bottom: 0.15em;
  color: var(--sg-primary);
}
.elementor-widget-text-editor a:not(.elementor-button):hover,
.elementor p a:not(.elementor-button):hover {
  background-size: 100% 0.08em;
  color: var(--sg-primarydeep);
}

/* ----------------------------------------------------------------
   10. HERO HEADLINE TWEAKS
---------------------------------------------------------------- */
#hero-headline {
  text-indent: -0.05em;
  letter-spacing: -0.025em;
}
@media (min-width: 1024px) {
  #hero-headline {
    margin-left: -0.5em;
  }
}

/* ----------------------------------------------------------------
   11. LEISTUNGEN 01/02/03 - Hover-Akzent
---------------------------------------------------------------- */
.stillglueck-leist-row {
  transition: background-color 240ms ease;
}
.stillglueck-leist-row:hover {
  background-color: var(--sg-card);
}

/* ----------------------------------------------------------------
   12. KONTAKT-CTA - helle Schrift auf Terrakotta
---------------------------------------------------------------- */
.stillglueck-cta-light h2,
.stillglueck-cta-light .elementor-heading-title,
.stillglueck-cta-light p {
  color: var(--sg-bgbase) !important;
}
.stillglueck-cta-light .elementor-button {
  background-color: var(--sg-bgbase) !important;
  color: var(--sg-primarydeep) !important;
}
.stillglueck-cta-light .elementor-button:hover {
  background-color: var(--sg-card) !important;
  color: var(--sg-primary) !important;
}

/* ----------------------------------------------------------------
   13. STICKY HEADER mit Glas-Effekt
---------------------------------------------------------------- */
.sg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(247, 241, 232, 0.92);
  backdrop-filter: blur(0.6em);
  -webkit-backdrop-filter: blur(0.6em);
  transition: background-color 300ms ease, padding 300ms ease;
}

/* Header shrinkt beim Scroll - mit scroll() Animation, kein JS! */
@supports (animation-timeline: scroll()) {
  .sg-header {
    animation: sg-header-shrink linear both;
    animation-timeline: scroll(root);
    animation-range: 0 200px;
  }
}
@keyframes sg-header-shrink {
  to {
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    background-color: rgba(247, 241, 232, 0.98);
    box-shadow: 0 0.1em 1.5em rgba(67, 57, 47, 0.08);
  }
}

/* Wordmark */
#sg-wordmark .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.025em;
}

/* ----------------------------------------------------------------
   14. HEADER NAVIGATION mit Wave-Underline
---------------------------------------------------------------- */
#sg-nav-links .sg-nav,
.sg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6em;
  margin: 0;
  align-items: center;
  justify-content: flex-end;
}
.sg-nav a {
  color: var(--sg-text);
  text-decoration: none;
  position: relative;
  padding: 0.2em 0;
  transition: color 200ms ease;
}
.sg-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  height: 0.08em;
  width: 0;
  background: var(--sg-primary);
  transition: width 320ms var(--sg-ease);
}
.sg-nav a:hover,
.sg-nav a.active {
  color: var(--sg-primarydeep);
}
.sg-nav a:hover::after,
.sg-nav a.active::after {
  width: 100%;
}
@media (max-width: 767px) {
  .sg-nav {
    justify-content: center;
    gap: 1em 1.4em;
  }
}
#sg-header-cta a.elementor-button {
  font-size: 0.95em;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------
   15. FOOTER
---------------------------------------------------------------- */
.sg-footer {
  color: var(--sg-bgalt);
}
#sg-footer-brand .elementor-heading-title {
  color: var(--sg-bgbase) !important;
}

.sg-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-footer-links li {
  margin: 0 0 0.4em 0;
}
.sg-footer-links a {
  color: var(--sg-bgalt);
  text-decoration: none;
  position: relative;
  padding-left: 0;
  transition: color 200ms ease, padding-left 220ms ease;
}
.sg-footer-links a:hover {
  color: var(--sg-gold);
  padding-left: 0.4em;
}
.sg-footer-links a::before {
  content: "→";
  position: absolute;
  left: -1em;
  opacity: 0;
  transition: opacity 220ms ease;
  color: var(--sg-gold);
}
.sg-footer-links a:hover::before {
  opacity: 1;
}

.sg-footer-contact a {
  color: var(--sg-bgbase);
  text-decoration: none;
  border-bottom: 0.05em dotted var(--sg-textsoft);
  transition: color 200ms ease, border-color 200ms ease;
}
.sg-footer-contact a:hover {
  color: var(--sg-gold);
  border-bottom-color: var(--sg-gold);
}

.sg-footer-legal {
  color: var(--sg-textsoft);
  margin: 0;
}
.sg-footer-legal a {
  color: var(--sg-bgalt);
  text-decoration: none;
}
.sg-footer-legal a:hover {
  color: var(--sg-gold);
}

/* ----------------------------------------------------------------
   16. CAPTION (alte Platzhalter-Texte)
---------------------------------------------------------------- */
.sg-img-caption {
  font-style: italic;
  color: var(--sg-textsoft);
  font-size: 0.95em;
  line-height: 1.5;
  display: block;
}
#hero-image-placeholder em,
#ueber-image-placeholder em {
  color: var(--sg-textsoft) !important;
  font-style: italic;
}
#hero-image-placeholder .elementor-heading-title,
#ueber-image-placeholder .elementor-heading-title {
  color: var(--sg-textsoft) !important;
}

/* ----------------------------------------------------------------
   17. FOKUS-RING
---------------------------------------------------------------- */
.elementor-button:focus-visible,
a:focus-visible {
  outline: 0.125em solid var(--sg-accent);
  outline-offset: 0.25em;
}

/* ----------------------------------------------------------------
   18. REDUZIERTE ANIMATION respektieren
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
    scroll-behavior: auto !important;
  }
  body::before { display: none; }
}/* End custom CSS */