.elementor-kit-8{--e-global-color-primary:#E3A857;--e-global-color-secondary:#355976;--e-global-color-text:#4A3B3E;--e-global-color-accent:#E8927E;--e-global-color-95925324:#355976;--e-global-color-75f1b40b:#24404F;--e-global-color-84983555:#AFC6D2;--e-global-color-7f4121b9:#E3A857;--e-global-color-6335ba80:#C98C3C;--e-global-color-4671dcbe:#E8927E;--e-global-color-f9e2a893:#7E9370;--e-global-color-e5bdb5cf:#F6EBCD;--e-global-color-700290ba:#4A3B3E;--e-global-color-4d5b8173:#7A6A67;--e-global-color-9b4a507e:#FBF2E3;--e-global-color-fd4edac8:#FFFBF3;--e-global-color-db438f1a:#F5E6D3;--e-global-color-59a2eaaa:#E8D9C3;--e-global-typography-primary-font-family:"Fraunces";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Fraunces";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Karla";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Karla";--e-global-typography-accent-font-weight:700;--e-global-typography-70444c9a-font-family:"Fraunces";--e-global-typography-70444c9a-font-weight:500;--e-global-typography-c096ff2f-font-family:"Karla";--e-global-typography-c096ff2f-font-weight:400;--e-global-typography-6b6abaa9-font-family:"Karla";--e-global-typography-6b6abaa9-font-weight:700;color:#4A3B3E;font-family:"Karla", Sans-serif;font-size:1em;font-weight:400;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#C98C3C;}.elementor-kit-8 a:hover{color:#E8927E;}.elementor-kit-8 h1{color:#24404F;font-family:"Fraunces", Sans-serif;font-size:3.33em;font-weight:400;line-height:1.15em;}.elementor-kit-8 h2{color:#24404F;font-family:"Fraunces", Sans-serif;font-size:2.44em;font-weight:500;line-height:1.15em;}.elementor-kit-8 h3{color:#24404F;font-family:"Fraunces", Sans-serif;font-size:1.67em;font-weight:500;line-height:1.15em;}.elementor-kit-8 h4{color:#24404F;font-family:"Karla", Sans-serif;font-size:1.22em;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-8 h1{font-size:2.59em;}.elementor-kit-8 h2{font-size:2em;}.elementor-kit-8 h3{font-size:1.53em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8 h1{font-size:2em;}.elementor-kit-8 h2{font-size:1.63em;}.elementor-kit-8 h3{font-size:1.38em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   LEBENS-GEZEITEN — Kit Custom CSS
   Komponenten-Klassen, die ergänzend zu den nativen Elementor-Controls
   (Global Colors / Global Typography / Theme Style) verwendet werden, um
   exakt das freigegebene Design (DESIGN.md "lebens-gezeiten") zu reproduzieren.

   Hinweis: Elementors eigene Widget-CSS (z.B. ".elementor-widget-heading
   .elementor-heading-title { font-size: var(--e-global-typography-...) }")
   ist spezifischer als Kit-Theme-Style-Regeln und die einfachen Klassen
   unten — daher tragen die typografie-/farbkritischen Regeln hier gezielt
   !important, um zuverlässig zu gewinnen.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --color-bg:            #FBF2E3;
  --color-bg-card:       #FFFBF3;
  --color-bg-warm:       #F5E6D3;
  --color-text:          #4A3B3E;
  --color-heading:       #24404F;
  --color-text-muted:    #7A6A67;
  --color-navy:          #355976;
  --color-navy-light:    #AFC6D2;
  --color-cream-logo:    #F6EBCD;
  --color-marigold:      #E3A857;
  --color-marigold-dark: #C98C3C;
  --color-coral:         #E8927E;
  --color-sage:          #7E9370;
  --color-border:        #E8D9C3;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Karla', -apple-system, BlinkMacSystemFont, sans-serif;

  /* em statt px: skaliert relativ zur geerbten Basis-Schriftgröße (body,
     18px Desktop / 16px Mobil, siehe body-Regel unten) und passt sich so
     automatisch responsiv an, ohne dass jeder Breakpoint einzeln jede
     Komponente ueberschreiben muss. Basis: 1em = 18px (Desktop-Body). */
  --fs-xs:   0.72em;
  --fs-sm:   0.83em;
  --fs-base: 1em;
  --fs-lg:   1.22em;
  --fs-xl:   1.67em;
  --fs-2xl:  2.44em;
  --fs-3xl:  3.33em;

  --lh-tight: 1.15;
  --lh-normal: 1.65;

  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  112px;

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-full: 999px;
  --shadow-soft: 0 12px 32px -12px rgba(62, 42, 61, 0.18);
  --shadow-hover: 0 18px 40px -14px rgba(62, 42, 61, 0.26);

  --transition: 220ms ease;
}

body.page-template-elementor_canvas,
body.page-template-elementor_header_footer {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
}
/* Basis-Schriftgröße responsiv reduzieren — da alle --fs-* Tokens in em
   definiert sind, skaliert dadurch automatisch die gesamte Typografie
   (Überschriften, Fließtext, Zitate, Karten, Footer, …) mit, ohne dass
   jede Komponente einzeln pro Breakpoint überschrieben werden muss. */
@media (max-width: 1024px) {
  body.page-template-elementor_canvas,
  body.page-template-elementor_header_footer { font-size: 17px !important; }
  /* größte Überschriften zusätzlich gezielt in em nachjustieren, damit sie
     auf Tablet nicht nur proportional, sondern spürbar kleiner werden
     (verhindert Zeilenumbrüche mitten im Wort) */
  :root {
    --fs-3xl: 2.59em;
    --fs-2xl: 2em;
    --fs-xl:  1.53em;
  }
}
@media (max-width: 767px) {
  body.page-template-elementor_canvas,
  body.page-template-elementor_header_footer { font-size: 16px !important; }
  :root {
    --fs-3xl: 2em;
    --fs-2xl: 1.63em;
    --fs-xl:  1.38em;
  }
}
@media (max-width: 400px) {
  body.page-template-elementor_canvas,
  body.page-template-elementor_header_footer { font-size: 15px !important; }
  :root {
    --fs-3xl: 1.87em;
    --fs-2xl: 1.53em;
  }
}
body.page-template-elementor_header_footer .elementor-header-footer + #wrapper-content,
body.page-template-elementor_header_footer #main-content,
body.page-template-elementor_header_footer #content {
  background: var(--color-bg) !important;
}
body.page-template-elementor_header_footer .container.page-header-inner { display: none !important; }
body.page-template-elementor_header_footer #site-header { background: var(--color-bg) !important; box-shadow: none !important; }
body.page-template-elementor_header_footer #site-footer-wrap { background: var(--color-navy) !important; }

/* Heading-Widget: Elementor's eigene .elementor-heading-title Regel
   (font-size: var(--e-global-typography-primary-font-size)) hat höhere
   Spezifität als Kit-Theme-Style — hier explizit mit !important gewinnen. */
.elementor-widget-heading h1.elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: var(--fs-3xl) !important;
  line-height: var(--lh-tight) !important;
  color: var(--color-heading) !important;
}
.elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: var(--fs-2xl) !important;
  line-height: var(--lh-tight) !important;
  color: var(--color-heading) !important;
}
.elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: var(--fs-xl) !important;
  line-height: var(--lh-tight) !important;
  color: var(--color-heading) !important;
}
.elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--fs-lg) !important;
  line-height: var(--lh-tight) !important;
  color: var(--color-heading) !important;
}
.elementor-widget-heading div.elementor-heading-title,
.elementor-widget-heading span.elementor-heading-title {
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
}
.elementor-widget-text-editor .elementor-widget-container p {
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text) !important;
  line-height: var(--lh-normal) !important;
}
.elementor-widget-text-editor a,
.elementor-widget-heading a { color: var(--color-marigold-dark) !important; }
.elementor-widget-text-editor a:hover,
.elementor-widget-heading a:hover { color: var(--color-coral) !important; }

/* Container-Boxing: Elementors eigene per-Element-Regel für content_width:full
   setzt max-width selbst; unsere .container-Klasse muss das mit !important
   überschreiben, um die 1120px-Spalte zu erzwingen. */
.container.e-con {
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding-inline: var(--space-md) !important;
}
.section.e-con { padding-block: var(--space-xl) !important; }
@media (max-width: 780px) {
  .section.e-con { padding-block: var(--space-lg) !important; }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy) !important;
  font-weight: 700 !important;
  margin-bottom: var(--space-xs);
}

.lead, .lead p {
  font-family: var(--font-body) !important;
  font-size: var(--fs-lg) !important;
  color: var(--color-text-muted) !important;
}

blockquote, .lg-blockquote, .lg-blockquote p {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: var(--fs-xl) !important;
  color: var(--color-heading) !important;
}
.lg-blockquote {
  border-left: 3px solid var(--color-navy);
  margin: var(--space-md) 0;
  padding: 0 0 0 var(--space-md);
}

/* Navigation */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.nav__logo .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: var(--fs-lg) !important;
  color: var(--color-navy) !important;
  font-weight: 500 !important;
}
.nav__logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
}
.nav__links ul.elementor-icon-list-items,
.site-footer ul.elementor-icon-list-items {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.nav__links ul.elementor-icon-list-items { flex-wrap: wrap; gap: 0 2rem; }
.nav__links .elementor-icon-list-item a {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  text-decoration: none;
  padding: 0 !important;
}
.nav__links .elementor-icon-list-item a:hover,
.nav__links .is-active a { color: var(--color-marigold-dark) !important; }
.nav__links .elementor-icon-list-icon,
.site-footer .elementor-icon-list-icon { display: none !important; }
.nav__links .elementor-icon-list-text,
.site-footer .elementor-icon-list-text { padding: 0 !important; }

/* Native WP-Menü (nav-menu Widget) — Hauptmenü im Header */
.nav__links .elementor-nav-menu__container { gap: 0 2rem !important; flex-wrap: wrap !important; }
.nav__links li.menu-item { margin-inline-end: 2rem !important; }
.nav__links li.menu-item:last-child { margin-inline-end: 0 !important; }
.nav__links .elementor-item {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  padding: 0 !important;
  margin-inline-end: 2rem !important;
}
.nav__links .elementor-item:last-child { margin-inline-end: 0 !important; }
.nav__links .elementor-item:hover,
.nav__links .elementor-item.elementor-item-active { color: var(--color-marigold-dark) !important; }
.nav__links .elementor-menu-toggle { color: var(--color-navy) !important; }
.nav__links .elementor-nav-menu--dropdown { background: var(--color-bg-card) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; }
.nav__links .elementor-nav-menu--dropdown .elementor-item { color: var(--color-text) !important; padding: 0.6rem 1rem !important; }

/* Native WP-Menü (nav-menu Widget) — Footer-Menü, vertikal */
.footer-nav .elementor-nav-menu__container { gap: 0.5rem !important; align-items: flex-start !important; }
.footer-nav li.menu-item { margin-bottom: 0.5rem !important; }
.footer-nav li.menu-item:last-child { margin-bottom: 0 !important; }
.footer-nav .elementor-item {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 400 !important;
  color: var(--color-navy-light) !important;
  padding: 0 !important;
}
.footer-nav .elementor-item:hover { color: var(--color-coral) !important; }

/* Bild-Komponenten */
.photo-frame {
  position: relative;
  width: 100%;
}
.photo-frame::before {
  content: "";
  position: absolute;
  top: 1rem; left: -1rem; right: -1rem; bottom: -1rem;
  background: var(--color-marigold);
  border-radius: var(--radius-md);
  z-index: 0;
}
.photo-frame .elementor-widget-container,
.photo-frame img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-soft);
}

.figure img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  width: 100%;
  height: auto;
}
.figcaption {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-xs) !important;
  font-family: var(--font-body) !important;
  color: var(--color-text-muted) !important;
  text-align: center;
}

.nature-strip img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* Tide-Divider */
.tide-divider { width: 100%; height: 90px; overflow: hidden; line-height: 0; }
.tide-divider svg { width: 100%; height: 100%; }
.tide-divider .tide-path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

/* Karten */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-marigold);
  margin-bottom: var(--space-sm);
}
.card__icon--coral { background: var(--color-coral); }
.card__icon--navy { background: var(--color-navy); }

/* Badges */
.badge {
  display: inline-block;
  background: var(--color-navy-light);
  color: var(--color-navy) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
}

/* Buttons */
.btn-primary .elementor-button,
.btn-primary.elementor-button {
  background: var(--color-marigold) !important;
  color: var(--color-heading) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
  box-shadow: var(--shadow-soft);
  padding: 0.85rem 1.75rem !important;
  transition: transform var(--transition), background var(--transition);
  fill: var(--color-heading);
}
.btn-primary .elementor-button:hover,
.btn-primary.elementor-button:hover {
  background: var(--color-marigold-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.btn-ghost .elementor-button,
.btn-ghost.elementor-button {
  background: transparent !important;
  color: var(--color-navy) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border: 2px solid var(--color-navy) !important;
  border-radius: var(--radius-full) !important;
  padding: calc(0.85rem - 2px) calc(1.75rem - 2px) !important;
}
.btn-ghost .elementor-button:hover,
.btn-ghost.elementor-button:hover {
  background: var(--color-navy) !important;
  color: var(--color-cream-logo) !important;
}

/* Testimonial */
.testimonial {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border-left: 4px solid var(--color-coral);
}
.testimonial--navy { border-left-color: var(--color-navy); }
.testimonial__quote, .testimonial__quote p {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: var(--fs-lg) !important;
  color: var(--color-heading) !important;
  margin-bottom: var(--space-xs);
}
.testimonial__name {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  color: var(--color-sage) !important;
  margin-top: var(--space-xs);
}

/* Kontakt-Info-Liste */
.contact-info .elementor-icon-list-items { gap: 0 !important; }
.contact-info .elementor-icon-list-item {
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  color: var(--color-text) !important;
}
.contact-info .elementor-icon-list-item:last-child { border-bottom: none; }
.contact-info .elementor-icon-list-icon,
.contact-info .elementor-icon-list-icon i { font-size: 8px !important; color: var(--color-marigold) !important; width: auto !important; }
.contact-info .elementor-icon-list-text { padding-inline-start: 0.5em !important; }
.contact-info a { color: var(--color-marigold-dark) !important; text-decoration: none; }
.contact-info a:hover { color: var(--color-coral) !important; }

/* Page-Hero mit Naturfoto-Hintergrund (Overlay nativ via background_overlay) */
.page-hero .eyebrow { color: var(--color-marigold) !important; }
.page-hero h1.elementor-heading-title { color: var(--color-cream-logo) !important; }
.page-hero .lead, .page-hero .lead p { color: var(--color-navy-light) !important; }

/* Footer */
.site-footer { background: var(--color-navy); color: var(--color-cream-logo); }
.site-footer h4.elementor-heading-title {
  color: var(--color-cream-logo) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700 !important;
}
.site-footer .elementor-widget-text-editor p { color: var(--color-navy-light) !important; }
.site-footer .elementor-icon-list-item a,
.site-footer .elementor-icon-list-item,
.site-footer .elementor-icon-list-text {
  color: var(--color-navy-light) !important;
  font-family: var(--font-body) !important;
}
.site-footer .elementor-icon-list-item a:hover,
.site-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--color-coral) !important; }
.nav__links .elementor-icon-list-text { color: inherit !important; }
.contact-info .elementor-icon-list-text { color: var(--color-text) !important; }
.footer__bottom, .footer__bottom p {
  border-top: 1px solid rgba(246,235,205,0.2);
  padding-top: var(--space-sm);
  margin-top: var(--space-md);
  font-size: var(--fs-xs) !important;
  font-family: var(--font-body) !important;
  color: var(--color-navy-light) !important;
  text-align: center !important;
}

/* Formular */
.lg-form .elementor-field-label {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--color-heading) !important;
}
.lg-form .elementor-field {
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-bg-card) !important;
  color: var(--color-text) !important;
}
.lg-form .elementor-field:focus { border-color: var(--color-marigold) !important; }
.lg-form .elementor-button {
  background: var(--color-marigold) !important;
  color: var(--color-heading) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
}
.lg-form .elementor-button:hover { background: var(--color-marigold-dark) !important; color: #fff !important; }

.section--warm { background: var(--color-bg-warm); border-radius: var(--radius-md); }

/* Split-Layout Spaltenbreiten (Hero/Intro/Bio) — Elementors eigene
   Flex-Item-Regeln nutzen "flex-basis: auto", daher hier fix mit
   !important erzwingen statt der nativen (nur selbstbezogenen) width-Control. */
.split-left { flex: 0 1 50% !important; max-width: 50% !important; }
.split-right { flex: 0 1 38% !important; max-width: 38% !important; }
@media (max-width: 900px) {
  .split-left, .split-right { flex: 1 1 100% !important; max-width: 100% !important; }
}

@media (max-width: 780px) {
  .nav__links .elementor-icon-list-items { justify-content: flex-start; }
}

/* Überschriften- und Fließtext-Größen skalieren jetzt automatisch mit der
   responsiven Body-Basisschrift (siehe body-Regel weiter oben) + gezielt
   nachjustierten em-Tokens — keine zusätzlichen Selektor-Überschreibungen
   nötig, da alle Komponenten (Karten, Zitate, Footer, Formular, …) bereits
   var(--fs-*) verwenden. *//* End custom CSS */