:root{
    --tief:#2d376d;      /* tiefes Meerblau */
    --blau:#5a82b4;      /* Wal-Blau */
    --tuerkis:#a9c6e0;   /* helles Türkis */
    --sand:#f6efe6;      /* warmer Sandton */
    --creme:#fcf9f4;     /* cremeweiß */
    --akzent:#e8a87c;    /* warmes Korall/Sonne */
    --text:#33424a;
    --textlight:#5d6b72;
    --weiss:#ffffff;
    --schatten:0 18px 50px -20px rgba(45,55,109,.35);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    color:var(--text);
    background:var(--creme);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.nav-logo{font-family:"Iowan Old Style",Palatino,Georgia,serif}
  .ui{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(252,249,244,.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(45,55,109,.1);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1120px;margin:0 auto}
  .nav-logo{display:flex;align-items:center;gap:12px;font-size:1.25rem;color:var(--tief);font-weight:600}
  .nav-logo .mark{width:42px;height:42px;flex:none}
  .nav-logo img.nav-mark{height:72px;width:auto;display:block}
  .nav-logo small{display:block;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--blau);font-family:-apple-system,sans-serif}
  nav.menu{display:flex;gap:28px;align-items:center}
  nav.menu a{font-family:-apple-system,sans-serif;font-size:.92rem;color:var(--textlight);transition:color .2s}
  nav.menu a:hover{color:var(--tief)}
  .nav-cta{background:var(--tief);color:#fff !important;padding:10px 20px;border-radius:30px;font-size:.9rem !important;transition:background .2s}
  .nav-cta:hover{background:var(--blau)}
  .burger{display:none;background:none;border:0;cursor:pointer;font-size:1.6rem;color:var(--tief)}
  @media(max-width:860px){
    nav.menu{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--creme);padding:24px;gap:18px;box-shadow:var(--schatten);transform:translateY(-130%);transition:transform .3s;border-bottom:1px solid rgba(45,55,109,.1)}
    nav.menu.open{transform:translateY(0)}
    .burger{display:block}
  }

  /* ---------- HERO ---------- */
  .hero{position:relative;overflow:hidden;background:linear-gradient(165deg,#e9eff9 0%,var(--sand) 100%)}
  .hero-inner{display:grid;grid-template-columns:1fr 1.12fr;gap:48px;align-items:center;max-width:1120px;margin:0 auto;padding:84px 24px 96px}
  .hero .eyebrow{font-family:-apple-system,sans-serif;letter-spacing:3px;text-transform:uppercase;font-size:.78rem;color:var(--blau);margin-bottom:18px}
  .hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.15;color:var(--tief);margin-bottom:14px;font-weight:600}
  .hero h1 em{color:var(--akzent);font-style:italic}
  .hero .sub{font-size:1.15rem;color:var(--textlight);margin-bottom:14px}
  .hero .claim{font-size:1.35rem;color:var(--tief);font-style:italic;margin-bottom:30px}
  .btn-row{display:flex;gap:14px;flex-wrap:wrap}
  .btn{display:inline-block;padding:14px 28px;border-radius:32px;font-family:-apple-system,sans-serif;font-size:.95rem;transition:transform .2s,box-shadow .2s}
  .btn-primary{background:var(--tief);color:#fff;box-shadow:var(--schatten)}
  .btn-primary:hover{transform:translateY(-2px)}
  .btn-ghost{border:1.5px solid var(--blau);color:var(--tief)}
  .btn-ghost:hover{background:rgba(61,143,176,.08)}
  .hero-art{position:relative}
  .hero-card{background:var(--weiss);border-radius:28px;padding:34px;box-shadow:var(--schatten);position:relative}
  .hero-card .whale{width:130px;display:block;margin:0 auto 10px}
  .hero-card .logo-full{width:260px;max-width:100%;height:auto;display:block;margin:0 auto 16px;mix-blend-mode:normal}
  .hero-card h3{text-align:center;color:var(--tief);font-size:1.3rem;margin-bottom:4px}
  .hero-card .role{text-align:center;font-family:-apple-system,sans-serif;font-size:.82rem;color:var(--blau);letter-spacing:1px;margin-bottom:18px}
  .hero-card ul{list-style:none;font-family:-apple-system,sans-serif;font-size:.9rem;color:var(--textlight)}
  .hero-card li{padding:7px 0 7px 26px;position:relative;border-bottom:1px dashed rgba(45,55,109,.12)}
  .hero-card li:last-child{border:0}
  .hero-card li:before{content:"";position:absolute;left:0;top:14px;width:10px;height:10px;border-radius:50%;background:var(--tuerkis)}
  /* sanfte Wellen unten */
  .waves{display:block;width:100%;height:60px;margin-top:-1px}
  @media(max-width:860px){.hero-inner{grid-template-columns:1fr;padding:56px 24px 64px;text-align:center}.btn-row{justify-content:center}.hero-card{text-align:left}}

  /* ---------- SECTION BASIS ---------- */
  section{padding:84px 0}
  .section-tag{font-family:-apple-system,sans-serif;letter-spacing:3px;text-transform:uppercase;font-size:.76rem;color:var(--blau);text-align:center;margin-bottom:12px}
  .section-title{font-size:clamp(1.7rem,3.2vw,2.5rem);color:var(--tief);text-align:center;margin-bottom:18px;font-weight:600}
  .section-lead{max-width:680px;margin:0 auto 56px;text-align:center;color:var(--textlight);font-size:1.1rem}

  /* ---------- ANSATZ ---------- */
  .ansatz{background:var(--creme)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .step{background:var(--weiss);border-radius:20px;padding:30px 24px;box-shadow:0 10px 30px -22px rgba(45,55,109,.5);border-top:4px solid var(--tuerkis);transition:transform .25s}
  .step:hover{transform:translateY(-6px)}
  .step .num{font-family:-apple-system,sans-serif;font-size:.8rem;letter-spacing:2px;color:var(--blau)}
  .step h3{font-size:1.18rem;color:var(--tief);margin:8px 0 8px}
  .step p{font-size:.95rem;color:var(--textlight)}
  @media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}

  /* ---------- ANGEBOTE ---------- */
  .angebote{background:linear-gradient(180deg,#eaf0fa,#fcf9f4)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .card{background:var(--weiss);border-radius:22px;padding:32px 28px;box-shadow:0 14px 38px -26px rgba(45,55,109,.55);transition:transform .25s,box-shadow .25s;border:1px solid rgba(126,196,207,.25)}
  .card:hover{transform:translateY(-6px);box-shadow:var(--schatten)}
  .card .ic{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,var(--tuerkis),var(--blau));display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .card .ic svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8}
  .card h3{font-size:1.25rem;color:var(--tief);margin-bottom:10px}
  .card p{font-size:.96rem;color:var(--textlight)}
  .more-list{margin-top:48px;background:var(--weiss);border-radius:22px;padding:34px;box-shadow:0 14px 38px -28px rgba(45,55,109,.5)}
  .more-list h3{color:var(--tief);text-align:center;margin-bottom:22px;font-size:1.3rem}
  .chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
  .chip{font-family:-apple-system,sans-serif;font-size:.88rem;background:var(--sand);color:var(--tief);padding:9px 18px;border-radius:30px;border:1px solid rgba(61,143,176,.18)}
  @media(max-width:860px){.cards{grid-template-columns:1fr}}

  /* ---------- ÜBER MICH ---------- */
  .ueber{background:var(--tief);color:#e9eff9;position:relative;overflow:hidden}
  .ueber-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
  .ueber .portrait{background:rgba(255,255,255,.07);border-radius:24px;padding:40px;text-align:center;border:1px solid rgba(255,255,255,.15)}
  .ueber .portrait .whale{width:120px;margin:0 auto 16px;display:block}
  .ueber .portrait h3{font-size:1.5rem;margin-bottom:6px;color:#fff}
  .ueber .portrait .role{font-family:-apple-system,sans-serif;font-size:.82rem;letter-spacing:1px;color:var(--tuerkis)}
  .ueber h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:20px}
  .ueber p{color:#d3e6ea;margin-bottom:16px;font-size:1.05rem}
  .ueber .signature{font-style:italic;color:var(--tuerkis);font-size:1.2rem;margin-top:8px}
  @media(max-width:860px){.ueber-inner{grid-template-columns:1fr;gap:34px}}

  /* ---------- ZITAT ---------- */
  .zitat{background:var(--sand);text-align:center}
  .zitat blockquote{max-width:760px;margin:0 auto;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--tief);font-style:italic;line-height:1.5}
  .zitat .by{font-family:-apple-system,sans-serif;font-size:.9rem;letter-spacing:2px;text-transform:uppercase;color:var(--blau);margin-top:22px}

  /* ---------- KONTAKT ---------- */
  .kontakt{background:var(--creme)}
  .kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:var(--weiss);border-radius:26px;overflow:hidden;box-shadow:var(--schatten)}
  .kontakt-info{padding:48px}
  .kontakt-info h2{color:var(--tief);font-size:2rem;margin-bottom:8px}
  .kontakt-info .lead{color:var(--textlight);margin-bottom:28px}
  .kontakt-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;font-family:-apple-system,sans-serif}
  .kontakt-row .ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--sand);display:flex;align-items:center;justify-content:center}
  .kontakt-row .ic svg{width:20px;height:20px;stroke:var(--tief);fill:none;stroke-width:1.8}
  .kontakt-row .lbl{font-size:.76rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--blau)}
  .kontakt-row .val{font-size:1.05rem;color:var(--text)}
  .kontakt-note{margin-top:24px;background:var(--sand);border-radius:14px;padding:16px 20px;font-family:-apple-system,sans-serif;font-size:.92rem;color:var(--tief)}
  .kontakt-side{background:linear-gradient(165deg,var(--blau),var(--tief));color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:center}
  .kontakt-side h3{font-size:1.5rem;margin-bottom:14px}
  .kontakt-side p{color:#dcecef;margin-bottom:26px}
  .kontakt-side .btn-light{background:#fff;color:var(--tief);align-self:flex-start;padding:14px 28px;border-radius:30px;font-family:-apple-system,sans-serif;font-weight:600;transition:transform .2s}
  .kontakt-side .btn-light:hover{transform:translateY(-2px)}
  .kontakt-side .small-links{margin-top:30px;font-family:-apple-system,sans-serif;font-size:.85rem}
  .kontakt-side .small-links a{color:#cfe6ea;text-decoration:underline;margin-right:16px}
  @media(max-width:860px){.kontakt-grid{grid-template-columns:1fr}.kontakt-info,.kontakt-side{padding:34px}}

  /* ---------- FOOTER ---------- */
  footer{background:var(--tief);color:#bcd6dd;padding:46px 0;text-align:center;font-family:-apple-system,sans-serif;font-size:.88rem}
  footer .flinks{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
  footer .flinks a{color:#cfe6ea}
  footer .flinks a:hover{color:#fff}

  /* ---------- FLIESSENDE WELLEN ---------- */
  .waves .layer,.wave-sep .layer{transform-box:view-box;transform-origin:0 0}
  .wave-sep{line-height:0;overflow:hidden}
  .wave-sep svg{display:block;width:100%;height:72px}
  .wave-sep .back{opacity:.5}
  .flowA{animation:waveA 16s linear infinite}
  .flowB{animation:waveB 11s linear infinite}
  .hero .waves .front{animation:waveA 18s linear infinite}
  .hero .waves .back{animation:waveB 12s linear infinite;opacity:.5}
  @keyframes waveA{from{transform:translateX(0)}to{transform:translateX(-480px)}}
  @keyframes waveB{from{transform:translateX(0)}to{transform:translateX(480px)}}
  @media(prefers-reduced-motion:reduce){.flowA,.flowB,.hero .waves .front,.hero .waves .back{animation:none}}

  /* ---------- HERO: Leistungen + Bühnenbild ---------- */
  .hero-leistungen{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;margin:6px 0 30px;font-family:-apple-system,sans-serif;font-size:1rem}
  .hero-leistungen li{position:relative;padding-left:26px;color:var(--text)}
  .hero-leistungen li:before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--tuerkis),var(--blau))}
  .hero-photo{position:relative;margin:0}
  .hero-photo:after{content:"";position:absolute;right:-20px;bottom:-20px;width:62%;height:72%;background:linear-gradient(135deg,var(--tuerkis),var(--blau));border-radius:28px;opacity:.3;z-index:0}
  .hero-photo img{position:relative;z-index:1;width:100%;height:auto;display:block;border-radius:24px;box-shadow:var(--schatten)}
  .hero-badge{position:absolute;left:18px;bottom:18px;z-index:2;background:rgba(252,249,244,.92);backdrop-filter:blur(6px);padding:11px 18px;border-radius:14px;box-shadow:0 12px 30px -16px rgba(45,55,109,.55);font-family:-apple-system,sans-serif;line-height:1.35}
  .hero-badge strong{display:block;color:var(--tief);font-size:1.02rem}
  .hero-badge span{font-size:.82rem;color:var(--blau)}
  @media(max-width:860px){.hero-leistungen{justify-items:center;text-align:left;max-width:340px;margin-left:auto;margin-right:auto}.hero-photo:after{display:none}}
  @media(max-width:520px){.hero-leistungen{grid-template-columns:1fr;max-width:260px}}

  .ueber .portrait .portrait-photo{width:100%;max-width:330px;height:auto;display:block;margin:0 auto 20px;border-radius:18px;box-shadow:0 22px 50px -20px rgba(0,0,0,.5)}

/* ---------- Multi-Page Ergänzungen ---------- */
/* Angebots-Karten als Links */
.cards a.card{color:inherit;text-decoration:none;display:block}
.card .mehr{display:inline-block;margin-top:14px;font-family:-apple-system,sans-serif;font-size:.9rem;color:var(--blau);font-weight:600;transition:color .2s}
.card:hover .mehr{color:var(--tief)}

/* Downloads */
.downloads{background:var(--sand)}
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.dl-card{display:flex;align-items:center;gap:16px;background:var(--weiss);border-radius:16px;padding:20px 24px;text-decoration:none;color:var(--text);box-shadow:0 12px 30px -22px rgba(45,55,109,.5);transition:transform .2s,box-shadow .2s;border:1px solid rgba(126,196,207,.25)}
.dl-card:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.dl-card .dl-ic{flex:none;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--tuerkis),var(--blau));display:flex;align-items:center;justify-content:center}
.dl-card .dl-ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dl-card .dl-t{font-family:-apple-system,sans-serif}
.dl-card .dl-t strong{display:block;color:var(--tief);font-size:1rem}
.dl-card .dl-t span{font-size:.82rem;color:var(--textlight)}
@media(max-width:680px){.dl-grid{grid-template-columns:1fr}}

/* Footer Leistungen */
.footer-leistungen{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center;margin-bottom:16px}
.footer-leistungen a{color:#cfe6ea;font-family:-apple-system,sans-serif;font-size:.86rem;text-decoration:none}
.footer-leistungen a:hover{color:#fff}

/* ---------- Leistungs-Unterseiten ---------- */
.page-hero{background:linear-gradient(165deg,#e9eff9 0%,var(--sand) 100%);padding:96px 0 70px}
.page-hero .wrap{max-width:860px}
.page-hero .eyebrow{font-family:-apple-system,sans-serif;letter-spacing:3px;text-transform:uppercase;font-size:.78rem;color:var(--blau);margin-bottom:14px}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);color:var(--tief);line-height:1.15;margin-bottom:16px}
.page-hero p.intro{font-size:1.2rem;color:var(--textlight);max-width:680px}
.crumbs{font-family:-apple-system,sans-serif;font-size:.85rem;color:var(--textlight);margin-bottom:22px}
.crumbs a{color:var(--blau);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-body{background:var(--creme);padding:72px 0}
.page-body .wrap{max-width:760px}
.page-body h2{color:var(--tief);font-size:1.6rem;margin:36px 0 14px}
.page-body h2:first-child{margin-top:0}
.page-body p{margin-bottom:16px;font-size:1.06rem}
.page-body ul.ticks{list-style:none;margin:6px 0 22px}
.page-body ul.ticks li{position:relative;padding:7px 0 7px 30px;border-bottom:1px dashed rgba(45,55,109,.14);font-family:-apple-system,sans-serif}
.page-body ul.ticks li:last-child{border:0}
.page-body ul.ticks li:before{content:"";position:absolute;left:0;top:14px;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--tuerkis),var(--blau))}
.page-cta{background:linear-gradient(135deg,var(--blau),var(--tief));color:#fff;border-radius:22px;padding:38px 34px;margin-top:40px;text-align:center}
.page-cta h3{font-size:1.5rem;margin-bottom:10px}
.page-cta p{color:#dcecef;margin-bottom:22px}
.page-cta .btn-light{display:inline-block;background:#fff;color:var(--tief);padding:14px 28px;border-radius:30px;font-family:-apple-system,sans-serif;font-weight:600;text-decoration:none;transition:transform .2s}
.page-cta .btn-light:hover{transform:translateY(-2px)}
.related{background:var(--sand);padding:60px 0}
.related .rel-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.related a{background:var(--weiss);border:1px solid rgba(61,143,176,.18);color:var(--tief);padding:10px 18px;border-radius:30px;font-family:-apple-system,sans-serif;font-size:.9rem;text-decoration:none;transition:transform .2s}
.related a:hover{transform:translateY(-2px)}