/* ==========================================================================
   LEBEN IST MEER — Design-Tokens und Basis
   Farbwerte stammen 1:1 aus dem freigegebenen Canvas / CI-Guide.
   ========================================================================== */

:root{
  /* Marke */
  --lim-navy:      #063B5A;   /* Tiefsee — Headlines, dunkle Flächen */
  --lim-atlantik:  #009CA8;   /* Atlantik — Primäraktion, Links */
  --lim-atlantik-d:#00707A;   /* Atlantik dunkel — Hover, AA-Text */
  --lim-sand:      #EFE4D6;   /* Sand — Ruheflächen */
  --lim-gold:      #C5A944;   /* Gold — Conversion-CTA */
  --lim-gold-d:    #A88F32;   /* Gold Hover */
  --lim-lagune:    #3CC1C3;
  --lim-seafoam:   #B7D1CA;
  --lim-petrol:    #2E5770;   /* kursive Headline-Teile */
  --lim-muschel:   #E4C4AF;
  --lim-tiefe:     #04263B;   /* Footer, Overlays */
  --lim-schaum:    #F4FAFB;   /* Seitenhintergrund */
  --lim-muted:     #4A6A7A;   /* Fließtext gedämpft */
  --lim-footer-tx: #A9C2CE;

  /* DISG */
  --lim-disg-d: #B85252;
  --lim-disg-i: #C5A944;
  --lim-disg-s: #2E7A60;
  --lim-disg-g: #2E5770;

  /* Maße */
  --lim-wrap: 1180px;
  --lim-gutter: 24px;
  --lim-radius: 20px;
  --lim-header-h: 76px;

  --lim-font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Reset (aus dem Canvas übernommen) ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--lim-header-h) + 16px)}
img{max-width:100%;display:block;height:auto}
summary::-webkit-details-marker{display:none}
summary{list-style:none}
input,textarea,button,select{font-family:inherit}
::selection{background:var(--lim-gold);color:var(--lim-navy)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  font-family:var(--lim-font);
  /* Der Canvas-Wrapper steht auf 400. 300 war zu leicht — 23.08.2026 korrigiert. */
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--lim-navy);
  background:var(--lim-schaum);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

a{color:var(--lim-atlantik-d)}

/* ---------- Zugänglichkeit ---------- */
.lim-skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--lim-gold);color:var(--lim-navy);
  padding:14px 22px;border-radius:0 0 12px 0;font-weight:600;text-decoration:none;
}
.lim-skip:focus{left:0}
:focus-visible{outline:3px solid var(--lim-atlantik);outline-offset:3px;border-radius:4px}
.lim-visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- Layout ---------- */
.lim-wrap{max-width:var(--lim-wrap);margin:0 auto;padding:0 var(--lim-gutter)}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.lim-header{
  position:sticky;top:0;z-index:100;
  background:var(--lim-schaum);
  border-bottom:1px solid rgba(6,59,90,.08);
}
.lim-nav{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--lim-header-h);gap:24px;
}
.lim-brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto}
.lim-brand__stack{display:flex;flex-direction:column;line-height:1}
.lim-brand__logo{height:30px;width:auto}
.lim-brand__claim{
  font-size:12px;font-weight:600;letter-spacing:3.4px;
  color:var(--lim-atlantik);text-transform:uppercase;margin-top:8px;
}

.lim-menu{display:flex;align-items:center;gap:22px;list-style:none;flex-wrap:nowrap;white-space:nowrap}
.lim-menu > li{position:relative}
/* :not(.lim-btn) — sonst überschreibt diese Regel den Gold-CTA im Menü. */
.lim-menu a:not(.lim-btn),
.lim-menu button:not(.lim-btn){
  font-size:14px;color:var(--lim-navy);text-decoration:none;
  padding:4px 0;display:block;position:relative;
  background:none;border:0;cursor:pointer;
}
.lim-menu button:not(.lim-btn){display:flex;align-items:center;gap:7px}
.lim-menu .lim-caret{font-size:9px;color:var(--lim-gold)}
/* Goldener Aktiv-Indikator */
.lim-menu .current-menu-item > a::after,
.lim-menu .current-menu-ancestor > a::after,
.lim-menu .is-active > a::after,
.lim-menu .is-active > button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--lim-gold);border-radius:2px;
}

/* Events-Dropdown */
.lim-sub{
  position:absolute;top:calc(100% + 14px);left:-18px;
  background:#fff;border-radius:16px;
  box-shadow:0 14px 44px rgba(6,59,90,.14);
  padding:10px;min-width:268px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.lim-has-sub:hover .lim-sub,
.lim-has-sub:focus-within .lim-sub,
.lim-sub.is-open{opacity:1;visibility:visible;transform:none}
.lim-sub a{
  display:block;padding:12px 16px;border-radius:11px;
  text-decoration:none;transition:background .18s;
}
.lim-sub a:hover,.lim-sub a:focus-visible{background:var(--lim-schaum)}
.lim-sub__kicker{
  display:block;font-size:10px;font-weight:700;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--lim-gold);
}
.lim-sub__title{display:block;font-size:15px;font-weight:600;color:var(--lim-navy);margin-top:3px}
.lim-sub__meta{display:block;font-size:12.5px;color:var(--lim-muted)}

/* Burger */
.lim-burger{
  display:none;background:none;border:0;cursor:pointer;
  padding:10px;margin-right:-10px;flex-direction:column;gap:6px;
}
.lim-burger span{display:block;width:26px;height:2px;background:var(--lim-navy);border-radius:2px;transition:transform .2s,opacity .2s}
.lim-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.lim-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lim-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Mobile-Panel */
.lim-panel{
  display:none;background:#fff;
  box-shadow:0 20px 40px rgba(6,59,90,.12);
  padding:8px var(--lim-gutter) 26px;
}
.lim-panel.is-open{display:block}
.lim-panel ul{list-style:none;max-width:var(--lim-wrap);margin:0 auto}
.lim-panel > ul > li{border-bottom:1px solid rgba(6,59,90,.07)}
.lim-panel > ul > li:last-child{border-bottom:0;padding-top:14px}
.lim-panel a{display:block;padding:15px 0;font-size:16px;color:var(--lim-navy);text-decoration:none}
.lim-panel__group{padding:15px 0}
.lim-panel__kicker{
  display:block;font-size:10px;font-weight:700;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--lim-gold);
}
.lim-panel__sub{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.lim-panel__sub a{padding:0;font-size:16px}

@media(max-width:1080px){
  .lim-menu{display:none}
  .lim-burger{display:flex}
}
/* Der CTA bleibt laut Handoff auch mobil sichtbar. */
.lim-nav-cta{flex:0 0 auto;margin-left:auto;white-space:nowrap}
.lim-nav-cta__kurz{display:none}
@media(max-width:600px){
  .lim-nav{gap:14px}
  .lim-nav-cta{padding:10px 16px;font-size:13px}
  .lim-brand__logo{height:24px}
  .lim-brand__claim{font-size:10px;letter-spacing:2.4px}
}
/* Ganz schmal: kurzer Knopftext, damit Burger und CTA nebeneinander passen. */
@media(max-width:560px){
  .lim-nav{gap:10px}
  .lim-nav-cta__lang{display:none}
  .lim-nav-cta__kurz{display:inline}
  .lim-brand__claim{display:none}
  .lim-brand{flex:0 1 auto;min-width:0}
  .lim-brand__logo{height:auto;width:clamp(118px,34vw,150px);max-width:100%}
  .lim-burger{padding:10px 4px;margin-right:-4px}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.lim-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:600;
  padding:13px 26px;border-radius:32px;
  text-decoration:none;border:0;cursor:pointer;
  transition:background .2s,transform .2s,color .2s,border-color .2s;
}
.lim-btn:hover{transform:translateY(-2px)}
/* Laufweite trägt im Canvas nur ein Teil der Buttons. */
.lim-btn--tracked{letter-spacing:.4px}
/* Der CTA in der Navigation ist im Canvas etwas kompakter. */
.lim-menu .lim-btn{padding:12px 24px}

/* Gold = Conversion. Trägt IMMER dunklen Text — Weiß auf Gold fällt mit 2,3:1 durch. */
.lim-btn--gold{background:var(--lim-gold);color:var(--lim-navy);box-shadow:0 6px 20px rgba(197,169,68,.32)}
.lim-btn--gold:hover{background:var(--lim-gold-d);color:var(--lim-navy)}

.lim-btn--primary{background:var(--lim-atlantik);color:#fff;box-shadow:0 6px 20px rgba(0,156,168,.28)}

.lim-btn--navy{background:var(--lim-navy);color:#fff}
.lim-btn--ghost{background:transparent;color:var(--lim-navy);border:1px solid rgba(6,59,90,.28)}
.lim-btn--light{background:#fff;color:var(--lim-navy)}

/* Handoff: ALLE Hover-Zustände gehen auf Gold mit Tiefsea-Text. */
.lim-btn--primary:hover,
.lim-btn--navy:hover,
.lim-btn--ghost:hover,
.lim-btn--light:hover{background:var(--lim-gold);color:var(--lim-navy);border-color:var(--lim-gold)}

/* ==========================================================================
   Typografie-Bausteine
   ========================================================================== */
.lim-kicker{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--lim-gold);
}
.lim-kicker--pill{
  padding:7px 16px;border-radius:32px;
  background:rgba(197,169,68,.14);
}
.lim-divider{width:48px;height:3px;background:var(--lim-gold);border-radius:3px;border:0;margin:0}
/* Erkennungsmerkmal der Marke: fetter Teil + kursiv-leichter Teil.
   Ohne die 300 erbt das <em> die 700 der Überschrift. */
em,.lim-em{font-style:italic;font-weight:300;color:var(--lim-petrol)}
.lim-on-dark em,.lim-on-dark .lim-em{color:var(--lim-sand)}

/* ==========================================================================
   Karten
   ========================================================================== */
.lim-card{
  background:#fff;border-radius:var(--lim-radius);
  padding:34px 30px;position:relative;overflow:hidden;
  box-shadow:0 10px 34px rgba(6,59,90,.07);
}
.lim-card--gold-top::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--lim-gold);
}

/* ==========================================================================
   Formulare
   ========================================================================== */
.lim-field{
  width:100%;padding:15px 18px;border-radius:14px;
  border:1px solid rgba(6,59,90,.18);background:#fff;
  font-size:16px;color:var(--lim-navy);
}
.lim-field:focus{outline:0;border-color:var(--lim-atlantik);box-shadow:0 0 0 3px rgba(0,156,168,.18)}
.lim-consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6}
.lim-consent input{margin-top:5px;flex:0 0 auto;width:18px;height:18px;accent-color:var(--lim-atlantik)}
.lim-formnote{font-size:14px;margin-top:14px}
.lim-formnote--ok{color:var(--lim-atlantik-d)}
.lim-formnote--err{color:var(--lim-disg-d)}

/* ==========================================================================
   Footer
   ========================================================================== */
.lim-footer{
  background:var(--lim-navy);color:#fff;
  font-size:15px;padding:66px 0 30px;
}
.lim-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px}
.lim-footer h4{
  color:#fff;font-size:13px;letter-spacing:2.4px;
  text-transform:uppercase;margin-bottom:18px;font-weight:700;
}
.lim-footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.lim-footer a{color:#fff;text-decoration:none;transition:color .2s}
.lim-footer a:hover{color:var(--lim-gold)}
.lim-footer__logo{height:30px;width:auto;max-width:100%}
.lim-footer__claim{
  display:block;font-size:12px;font-weight:600;letter-spacing:3.4px;color:var(--lim-lagune);
  text-transform:uppercase;margin-top:8px;
}
.lim-footer__intro{margin-top:16px;font-size:14.5px;line-height:1.7}
.lim-social{display:flex;gap:12px;margin-top:18px}
.lim-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#fff;transition:.2s;
}
.lim-social a:hover{background:var(--lim-gold);border-color:var(--lim-gold);color:var(--lim-navy)}
.lim-footer__bar{
  padding-top:22px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13.5px;
}
.lim-footer__bar nav{display:flex;gap:20px;flex-wrap:wrap}

/* ==========================================================================
   Reveal beim Scrollen — respektiert prefers-reduced-motion
   ========================================================================== */
.lim-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.lim-reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .lim-reveal{opacity:1;transform:none}
}

/* ==========================================================================
   Uferlinie — die Surferin läuft unten am Footer entlang
   Werte 1:1 aus dem Design-Handoff (19s, Wippen 1s, Beine ±15/16°)
   ========================================================================== */
.lim-shore{
  margin-top:44px;
  position:relative;
  height:58px;
  overflow:hidden;
}
.lim-shore__line{
  position:absolute;left:0;right:0;bottom:0;
  height:2px;background:rgba(255,255,255,.3);
}
.lim-surfer{
  position:absolute;bottom:2px;left:-70px;z-index:2;
  animation:lim-surf 19s linear infinite;
}
.lim-surfer__svg{
  width:62px;height:auto;display:block;
  fill:var(--lim-lagune);
  animation:lim-surf-bob 1s ease-in-out infinite;
}
.lim-surfer__leg{transform-box:view-box}
.lim-surfer__leg--a{transform-origin:182px 216px;animation:lim-leg-a 1s ease-in-out infinite}
.lim-surfer__leg--b{transform-origin:180px 216px;animation:lim-leg-b 1s ease-in-out infinite}

@keyframes lim-surf     {0%{left:-70px}          100%{left:100%}}
@keyframes lim-surf-bob {0%,100%{transform:translateY(0)}    50%{transform:translateY(-3px)}}
@keyframes lim-leg-a    {0%,100%{transform:rotate(-16deg)}   50%{transform:rotate(15deg)}}
@keyframes lim-leg-b    {0%,100%{transform:rotate(15deg)}    50%{transform:rotate(-16deg)}}

/* Wer Bewegung reduziert haben will, sieht sie stehen. */
@media(prefers-reduced-motion:reduce){
  .lim-surfer,.lim-surfer__svg,.lim-surfer__leg{animation:none}
  .lim-surfer{left:12%}
}