/* =========================================================================
   Subdirektion Merz & Partner — Design System
   Warmes Papier · Reißbrett-Raster · feine Linien · harte Offset-Schatten
   ========================================================================= */

:root{
  --blue:        #1793D7;
  --blue-deep:   #0C2A3C;
  --blue-ink:    #0A2233;
  --orange:      #EC942D;
  --orange-dark: #CE7C18;
  --gray:        #5E5E5D;
  --paper:       #FFFFFF;
  --paper-toned: #F3EDE2;
  --ink:         #1E1E1A;
  --ink-soft:    #4A4943;
  --line:        #D8D0C2;

  --r:           3px;
  --maxw:        1200px;
  --gutter:      clamp(20px, 5vw, 64px);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:  "Caveat", "Segoe Script", cursive;

  --shadow-blue:   3px 3px 0 var(--blue-ink);
  --shadow-orange: 3px 3px 0 var(--orange);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--paper);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- Blueprint construction grid (deaktiviert) ------------------------- */
.blueprint{
  display:none !important;
  position:fixed;
  inset:-10vh -10vw;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(120,110,90,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,110,90,.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(120,110,90,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,110,90,.04) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 32px 32px, 32px 32px;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 30%, #000 45%, transparent 90%);
          mask-image: radial-gradient(130% 110% at 50% 30%, #000 45%, transparent 90%);
  will-change:transform;
}
.page{ position:relative; z-index:1; }

/* ---- Layout primitives -------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(56px, 8vw, 112px); }
.section--tight{ padding-block: clamp(40px,5vw,72px); }
.hairline{ height:1px; background:var(--line); border:0; margin:0; }
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 18px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--orange); display:inline-block; }
.eyebrow--center{ justify-content:center; }

/* ---- Typography --------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; color:var(--ink); margin:0; line-height:1.06; letter-spacing:-0.015em; }
.display{ font-size:clamp(2.6rem, 6vw, 4.7rem); font-weight:500; line-height:1.02; }
h2{ font-size:clamp(2rem, 4vw, 3.05rem); }
h3{ font-size:clamp(1.4rem, 2.4vw, 1.85rem); }
.lede{ font-size:clamp(1.12rem,1.5vw,1.35rem); line-height:1.55; color:var(--ink-soft); max-width:60ch; }
p{ margin:0 0 1em; }
.muted{ color:var(--ink-soft); }
.numeral{ font-family:var(--serif); font-weight:400; font-variant-numeric:lining-nums; line-height:.8; letter-spacing:-0.02em; }
a{ color:var(--blue); }

/* hand swoosh under keyword */
.kw{ position:relative; white-space:nowrap; color:var(--blue); }
.kw svg{ position:absolute; left:-4%; bottom:-0.34em; width:108%; height:.5em; overflow:visible; }
.kw svg path{
  fill:none; stroke:var(--orange); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:480; stroke-dashoffset:480;
}
.kw.drawn svg path{ animation:draw 1.1s .35s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .kw svg path{ stroke-dashoffset:0 !important; animation:none; } }
/* Auf schmalen Bildschirmen darf das Schlagwort umbrechen (sonst läuft es über den Rand) */
@media (max-width:600px){
  .kw{ white-space:normal; }
  .kw svg{ display:none; }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  font-family:var(--sans); font-weight:700; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:var(--r); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  line-height:1; white-space:nowrap;
}
.btn .ms{ font-size:20px; }
.btn--primary{ background:var(--orange); color:#fff; box-shadow:var(--shadow-blue); }
.btn--primary:hover{ background:var(--orange-dark); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--blue-ink); }
.btn--primary:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--blue-ink); }
.btn--ghost{ background:transparent; color:var(--blue-ink); border-color:var(--blue-ink); }
.btn--ghost:hover{ background:var(--blue-ink); color:var(--paper); transform:translate(-2px,-2px); box-shadow:var(--shadow-orange); }
.btn--blue{ background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn--blue:hover{ filter:brightness(1.05); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--blue-ink); }
.btn--lg{ padding:17px 30px; font-size:17px; }
.btn--block{ width:100%; }
.btn--ghost-light{ background:transparent; color:var(--paper); border-color:rgba(246,241,232,.4); }
.btn--ghost-light:hover{ background:var(--paper); color:var(--blue-ink); }

/* ---- Top utility bar ---------------------------------------------------- */
.utility{ background:var(--blue); color:rgba(255,255,255,.92); font-size:13.5px; }
.utility .wrap{ display:flex; align-items:center; gap:26px; min-height:42px; flex-wrap:wrap; }
.utility a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.utility a:hover{ color:#fff; }
.utility .ms{ font-size:17px; color:var(--orange); }
.utility .spacer{ flex:1; }
.utility .util-note{ color:rgba(255,255,255,.72); }
@media (max-width:720px){ .utility .util-note{ display:none; } }
/* Blaue Info-Leiste auf dem Handy ausblenden (Kontaktdaten stehen in Menü & Footer) */
@media (max-width:768px){ .utility{ display:none; } }

/* ---- Header / nav ------------------------------------------------------- */
.header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.header .wrap{ display:flex; align-items:center; gap:24px; min-height:84px; }
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:46px; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{ font-family:var(--sans); font-weight:600; font-size:15.5px; color:var(--ink); text-decoration:none; padding:10px 13px; border-radius:var(--r); position:relative; }
.nav a:hover{ color:var(--blue); }
.nav a::after{ content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.nav a:hover::after{ transform:scaleX(1); }
.nav .has-sub{ position:relative; }
.nav .submenu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:264px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-blue); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:70;
}
.nav .has-sub:hover .submenu, .nav .has-sub:focus-within .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav .submenu a{ display:flex; align-items:baseline; gap:10px; padding:11px 12px; border-radius:var(--r); }
.nav .submenu a::after{ display:none; }
.nav .submenu a:hover{ background:var(--paper-toned); }
.nav .submenu a .sn{ font-family:var(--serif); color:var(--orange); font-size:14px; width:24px; }
.nav .submenu a small{ display:block; font-weight:500; font-size:13px; color:var(--ink-soft); }
/* Mega-Menü Versicherungen */
.nav .submenu--mega{ min-width:592px; left:auto; right:0; padding:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px 24px; }
.mega__col{ display:flex; flex-direction:column; }
.mega__h{ font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-ink); display:flex; align-items:center; gap:8px; margin:0 0 9px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.mega__h .ms{ font-size:18px; color:var(--blue); }
.nav .submenu--mega a{ display:block; padding:7px 8px; border-radius:var(--r); font-weight:600; font-size:14.5px; color:var(--ink); }
.nav .submenu--mega a:hover{ background:var(--paper-toned); color:var(--blue); }
.nav .submenu--mega a::after{ display:none; }
.mega__all{ grid-column:1/-1; display:flex !important; align-items:center; gap:9px; margin-top:8px; padding:13px 15px !important; background:var(--blue-ink) !important; color:var(--paper) !important; font-weight:700 !important; font-size:14.5px !important; }
.mega__all:hover{ background:var(--orange) !important; color:#fff !important; }
.mega__rechner{ background:var(--orange) !important; color:#fff !important; }
.mega__rechner:hover{ background:var(--blue-ink) !important; color:#fff !important; }
/* Service-Mega: drei Spalten, etwas breiter */
.nav .submenu--service{ min-width:660px; grid-template-columns:1fr 1.15fr .85fr; }
.mega__all .ms{ font-size:19px; }
.header .btn{ margin-left:6px; }
.nav-toggle{ display:none; }
.burger{ display:none; }

@media (max-width:1024px){
  .nav, .header .btn--primary.desktop{ display:none; }
  .burger{ display:inline-flex; margin-left:auto; background:none; border:1.5px solid var(--blue-ink); color:var(--blue-ink); border-radius:var(--r); padding:8px 11px; cursor:pointer; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:14px; }
  .burger .ms{ font-size:22px; }
}

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:90; display:none; }
.drawer.open{ display:block; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(10,34,51,.45); }
.drawer__panel{ position:absolute; top:0; right:0; bottom:0; width:min(380px,86vw); background:var(--paper); padding:24px; overflow:auto; box-shadow:-6px 0 0 var(--blue-ink); display:flex; flex-direction:column; gap:4px; }
.drawer__panel a{ font-family:var(--sans); font-weight:600; font-size:18px; color:var(--ink); text-decoration:none; padding:13px 6px; border-bottom:1px solid var(--line); }
.drawer__panel a .sn{ font-family:var(--serif); color:var(--orange); margin-right:10px; }
.drawer .closex{ align-self:flex-end; background:none; border:0; cursor:pointer; color:var(--ink); font-size:30px; line-height:1; padding:4px; }

/* ---- Stamp -------------------------------------------------------------- */
.stamp{ display:block; }
.stamp .ring{ transform-origin:center; animation:spin 38s linear infinite; }
@media (prefers-reduced-motion: reduce){ .stamp .ring{ animation:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.stamp text{ font-family:var(--sans); font-weight:700; letter-spacing:.22em; fill:var(--blue-ink); text-transform:uppercase; }
.stamp .center{ font-family:var(--serif); font-weight:600; fill:var(--orange); letter-spacing:.02em; }
.stamp circle{ fill:none; stroke:var(--blue-ink); }
/* Stempel als Bild, dreht sich vollständig */
.stamp-img{ display:block; animation:spin 26s linear infinite; transform-origin:center; }
@media (prefers-reduced-motion: reduce){ .stamp-img{ animation:none; } }

/* ---- Reveal on scroll --------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ---- Placeholders (customer replaces) ---------------------------------- */
.ph{
  position:relative; border:1px dashed #b9ad96; border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg, rgba(120,110,90,.10) 0 2px, transparent 2px 11px),
    var(--paper-toned);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-soft); overflow:hidden;
}
.ph span{ font-family:"Courier New", monospace; font-size:12px; letter-spacing:.04em; padding:6px 10px; background:rgba(246,241,232,.78); border-radius:2px; }

/* ---- Footer ------------------------------------------------------------- */
.footer{ background:var(--blue-ink); color:rgba(246,241,232,.78); }
.footer a{ color:rgba(246,241,232,.78); text-decoration:none; }
.footer a:hover{ color:#fff; }
.footer h4{ color:var(--paper); font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; }

/* ---- Floating WhatsApp (entfernbar) ------------------------------------ */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:80; }
.wa-float__btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0;
  background:#25D366; color:#fff; border-radius:50%; width:68px; height:68px; padding:0;
  text-decoration:none; font-family:var(--sans); font-weight:700; font-size:16px; line-height:1;
  box-shadow:0 8px 24px rgba(10,34,51,.28); transition:transform .15s ease;
  animation:wapulse 2.6s ease-out infinite;
}
.wa-float__btn:hover{ transform:translateY(-2px); }
.wa-float__btn svg{ width:33px; height:33px; flex-shrink:0; }
.wa-float__num{ display:none; }
/* Kleines blaues SMP-Abzeichen, überlappend auf dem WhatsApp-Button */
.wa-float__btn::after{
  content:"SMP"; position:absolute; left:-5px; bottom:-5px;
  width:30px; height:30px; border-radius:50%;
  background:var(--blue); color:#fff;
  font-family:var(--sans); font-weight:800; font-size:10px; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid #fff; box-shadow:0 2px 7px rgba(10,34,51,.35);
  z-index:3; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .wa-float__btn{ animation:none; } }
@keyframes wapulse{
  0%{ box-shadow:0 8px 24px rgba(10,34,51,.28), 0 0 0 0 rgba(37,211,102,.45); }
  70%{ box-shadow:0 8px 24px rgba(10,34,51,.28), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 8px 24px rgba(10,34,51,.28), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:560px){
  .wa-float__btn{ width:56px; height:56px; }
  .wa-float__btn svg{ width:28px; height:28px; }
}

/* ---- Beratungs-Overlay -------------------------------------------------- */
.overlay{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; }
.overlay.open{ display:flex; }
.overlay__scrim{ position:absolute; inset:0; background:rgba(10,34,51,.55); backdrop-filter:blur(3px); animation:fade .2s ease; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.overlay__card{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:6px 6px 0 var(--blue-ink); width:min(640px,100%); padding:clamp(24px,4vw,40px); animation:pop .22s cubic-bezier(.2,.8,.2,1); max-height:90vh; overflow:auto; }
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.overlay__card .closex{ position:absolute; top:14px; right:16px; background:none; border:0; cursor:pointer; font-size:28px; line-height:1; color:var(--ink-soft); }
.overlay__card .closex:hover{ color:var(--ink); }

.way-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
@media (max-width:560px){ .way-grid{ grid-template-columns:1fr; } }
.way{
  display:flex; gap:14px; align-items:flex-start; text-align:left; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r); padding:18px; background:var(--paper);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.way:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-orange); border-color:var(--blue-ink); }
.way .ms{ font-size:26px; color:var(--blue); flex-shrink:0; }
.way strong{ display:block; font-family:var(--sans); font-weight:700; color:var(--ink); font-size:16px; }
.way small{ color:var(--ink-soft); font-size:13.5px; line-height:1.4; display:block; margin-top:3px; }
.way.way--wa .ms{ color:#25D366; }

/* ---- Verweildauer-Pop-up ------------------------------------------------ */
.timepop__card{ width:min(540px,100%); animation:pop .32s cubic-bezier(.2,.7,.3,1) both; }
.timepop__h{ font-size:clamp(1.5rem,3vw,2rem); line-height:1.12; margin:6px 0 0; }
.timepop__lede{ color:var(--ink-soft); margin:14px 0 0; font-size:16.5px; }
.timepop__lede strong{ color:var(--ink); }
.timepop__list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.timepop__list li{ display:flex; align-items:flex-start; gap:11px; font-weight:600; font-size:16px; color:var(--ink); }
.timepop__list .ms{ font-size:22px; color:var(--blue); flex-shrink:0; }
.timepop__trust{ margin:18px 0 0; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--blue-ink); }
.timepop__cta{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.timepop__cta .btn{ justify-content:center; }

/* ---- Consent banner ----------------------------------------------------- */
.consent{ position:fixed; left:0; right:0; bottom:0; z-index:95; background:var(--blue-ink); color:rgba(246,241,232,.9); padding:16px var(--gutter); display:none; }
.consent.show{ display:block; }
.consent .inner{ max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.consent p{ margin:0; font-size:13.5px; flex:1; min-width:240px; line-height:1.5; }
.consent a{ color:var(--orange); }
.consent .btn{ padding:10px 18px; font-size:14px; }

/* utility */
.center{ text-align:center; }
.flex{ display:flex; }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:28px; } .mt-l{ margin-top:48px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }