:root {
      --green-950:#09281f;
      --green-900:#0d3528;
      --green-800:#124332;
      --green-700:#1f6b45;
      --green-500:#5fa46f;
      --green-300:#b7d8bd;
      --cream:#f7f3e8;
      --paper:#fffdf7;
      --sand:#e8dece;
      --brown:#9a7352;
      --ink:#17211d;
      --muted:#6d746f;
      --line:rgba(20,67,50,.14);
      --shadow:0 24px 70px rgba(9,40,31,.16);
      --shadow-soft:0 14px 40px rgba(9,40,31,.10);
      --radius:28px;
    }

    * { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; }
    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color:var(--ink);
      background:var(--cream);
      line-height:1.55;
      overflow-x:hidden;
    }

    a { color:inherit; text-decoration:none; }
    .wrap { width:min(1180px, calc(100% - 42px)); margin:0 auto; }

    header {
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(9,40,31,.94);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    nav {
      height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }

    .brand {
      line-height:1;
      color:white;
      display:flex;
      flex-direction:column;
      gap:5px;
    }

    .brand strong {
      font-size:30px;
      letter-spacing:-.06em;
      font-weight:900;
    }

    .brand strong span { color:#8ccb8f; }
    .brand small {
      font-size:13px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:rgba(255,255,255,.75);
      font-weight:700;
    }

    .navlinks {
      display:flex;
      align-items:center;
      gap:30px;
      color:rgba(255,255,255,.82);
      font-size:14px;
      font-weight:650;
    }

    .navlinks a {
      position:relative;
    }

    .navlinks a:hover { color:white; }
    .navlinks a.active::after {
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-12px;
      height:2px;
      background:#8ccb8f;
      border-radius:99px;
    }

    .nav-cta {
      background:linear-gradient(135deg, #75bd80, #4d965f);
      color:white !important;
      padding:13px 18px;
      border-radius:8px;
      box-shadow:0 14px 30px rgba(95,164,111,.25);
      font-weight:800;
    }

    .hero {
      background:
        radial-gradient(circle at 88% 30%, rgba(183,216,189,.72), transparent 24%),
        radial-gradient(circle at 10% 20%, rgba(255,255,255,.95), transparent 32%),
        linear-gradient(135deg, #fbfaf2 0%, #eef5ea 100%);
      min-height:710px;
      display:flex;
      align-items:center;
      padding:74px 0 70px;
      position:relative;
      overflow:hidden;
    }

    .hero::before {
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(9,40,31,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(9,40,31,.04) 1px, transparent 1px);
      background-size:64px 64px;
      mask-image:linear-gradient(90deg, black, transparent 70%);
      pointer-events:none;
    }

    .hero-grid {
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1fr .92fr;
      align-items:center;
      gap:78px;
    }

    .eyebrow {
      color:var(--green-700);
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:.18em;
      font-weight:900;
      margin-bottom:22px;
    }

    h1 {
      font-family: Georgia, "Times New Roman", serif;
      font-weight:500;
      font-size:clamp(45px, 6.3vw, 86px);
      line-height:.98;
      letter-spacing:-.06em;
      color:var(--green-950);
      margin-bottom:26px;
    }

    h1 span {
      color:var(--green-500);
      font-family: inherit;
    }

    .lead {
      color:#3e4942;
      font-size:20px;
      max-width:610px;
      margin-bottom:34px;
    }

    .hero-features {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:28px;
      margin:38px 0 36px;
      max-width:700px;
    }

    .hero-feature .circle {
      width:58px;
      height:58px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:#e8f2e4;
      color:var(--green-700);
      font-size:25px;
      margin-bottom:14px;
    }

    .hero-feature strong {
      display:block;
      color:var(--green-950);
      font-size:16px;
      margin-bottom:3px;
    }

    .hero-feature span {
      color:var(--muted);
      font-size:13px;
    }

    .hero-actions {
      display:flex;
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
    }

    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border-radius:8px;
      padding:16px 23px;
      font-weight:850;
      transition:.2s ease;
      border:1px solid transparent;
      cursor:pointer;
    }

    .btn.primary {
      background:linear-gradient(135deg, #66ad72, #3f8351);
      color:white;
      box-shadow:0 18px 36px rgba(63,131,81,.25);
    }

    .btn.ghost {
      color:var(--green-700);
      padding-left:8px;
    }

    .btn:hover { transform:translateY(-2px); }

    .hero-visual {
      position:relative;
      min-height:520px;
    }

    .blob {
      position:absolute;
      inset:0;
      border-radius:42% 58% 48% 52% / 48% 43% 57% 52%;
      background:linear-gradient(145deg, #dbe9d5, #c9dec3);
      transform:rotate(-5deg);
    }

    .portrait {
      position:absolute;
      inset:40px 58px 40px 44px;
      border-radius:42% 58% 48% 52% / 48% 43% 57% 52%;
      overflow:hidden;
      box-shadow:var(--shadow);
      display:flex;
      align-items:flex-start;
      justify-content:center;
      background:#dfe8d8;
    }

    .portrait img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center top;
      transform:scale(1.02);
    }

    .person {
      position:absolute;
      left:50%;
      bottom:0;
      transform:translateX(-50%);
      width:270px;
      height:390px;
      border-radius:150px 150px 30px 30px;
      background:
        radial-gradient(circle at 50% 8%, #f4d1b7 0 9%, transparent 10%),
        linear-gradient(#164f34 0 100%);
    }

    .person:before {
      content:"";
      position:absolute;
      left:50%;
      top:18px;
      transform:translateX(-50%);
      width:105px;
      height:105px;
      background:#f1c7aa;
      border-radius:50%;
      box-shadow:
        -20px -33px 0 -16px #2f2119,
        20px -33px 0 -16px #2f2119,
        0 -44px 0 -19px #2f2119;
    }

    .person:after {
      content:"";
      position:absolute;
      left:50%;
      bottom:-8px;
      transform:translateX(-50%);
      width:310px;
      height:130px;
      border-radius:22px;
      background:linear-gradient(135deg, #cfcfcf, #f7f7f7);
      box-shadow:0 -2px 0 rgba(255,255,255,.8) inset;
    }

    .floating-card {
      position:absolute;
      right:20px;
      bottom:60px;
      width:auto;
      min-width:320px;
      background:white;
      border-radius:14px;
      padding:16px 18px;
      box-shadow:var(--shadow);
      border:1px solid var(--line);
    }

    .floating-card strong {
      display:block;
      margin-bottom:7px;
      color:var(--green-950);
    }

    .floating-card span {
      color:var(--muted);
      font-size:14px;
    }

    .floating-card .heart {
      position:absolute;
      right:18px;
      top:50%;
      transform:translateY(-50%);
      width:44px;
      height:44px;
      border-radius:50%;
      background:#eaf3e4;
      display:grid;
      place-items:center;
      color:var(--green-700);
    }

    section { padding:84px 0; }
    .dark-section {
      background:
        radial-gradient(circle at 20% 10%, rgba(95,164,111,.28), transparent 28%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 10px),
        var(--green-950);
      color:white;
    }

    .section-head {
      text-align:center;
      max-width:820px;
      margin:0 auto 48px;
    }

    .label {
      color:#88c98c;
      font-size:13px;
      letter-spacing:.22em;
      text-transform:uppercase;
      font-weight:900;
      margin-bottom:12px;
    }

    h2 {
      font-family: Georgia, "Times New Roman", serif;
      font-size:clamp(34px,4.6vw,58px);
      line-height:1.05;
      font-weight:500;
      letter-spacing:-.045em;
      margin-bottom:14px;
    }

    .section-head p {
      color:rgba(255,255,255,.72);
      font-size:18px;
    }

    .light-head p { color:var(--muted); }

    .compare-shell {
      background:white;
      border-radius:14px;
      padding:0;
      overflow:hidden;
      box-shadow:0 28px 80px rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.18);
      position:relative;
    }

    .comparison {
      position:relative;
      width:100%;
      height:520px;
      overflow:hidden;
      user-select:none;
      touch-action:none;
      background:#eee;
    }

    .comparison img {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:contain; background:#ece7dc;
      object-position:top center;
      display:block;
      pointer-events:none;
    }

    .after-layer {
      position:absolute;
      inset:0;
      clip-path:inset(0 0 0 50%);
      z-index:2;
    }

    .tag {
      position:absolute;
      top:18px;
      z-index:8;
      padding:8px 12px;
      border-radius:7px;
      font-size:12px;
      font-weight:950;
      letter-spacing:.08em;
      text-transform:uppercase;
      box-shadow:0 10px 22px rgba(0,0,0,.18);
    }

    .tag.before {
      left:18px;
      background:#263630;
      color:white;
    }

    .tag.after {
      right:18px;
      background:#5a9d61;
      color:white;
    }

    .handle-line {
      position:absolute;
      top:0;
      bottom:0;
      left:50%;
      width:3px;
      background:white;
      z-index:6;
      box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 0 24px rgba(0,0,0,.25);
    }

    .handle {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:58px;
      height:58px;
      border-radius:50%;
      background:white;
      color:var(--green-950);
      display:grid;
      place-items:center;
      font-size:22px;
      font-weight:900;
      z-index:7;
      box-shadow:0 16px 38px rgba(0,0,0,.25);
    }

    .range {
      position:absolute;
      inset:0;
      z-index:10;
      opacity:0;
      width:100%;
      height:100%;
      cursor:ew-resize;
    }

    .more-btn {
      margin:28px auto 0;
      display:flex;
      width:max-content;
      background:#6eaf6f;
      color:white;
      border-radius:8px;
      padding:15px 24px;
      font-weight:850;
      box-shadow:0 18px 35px rgba(0,0,0,.24);
    }

    .services {
      background:
        radial-gradient(circle at 88% 30%, rgba(183,216,189,.58), transparent 24%),
        linear-gradient(135deg,#fbfaf2,#f0f7ef);
    }

    .cards {
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:18px;
    }

    .card {
      background:white;
      border:1px solid var(--line);
      border-radius:12px;
      padding:30px 22px;
      text-align:center;
      box-shadow:var(--shadow-soft);
      min-height:168px;
    }

    .card .icon {
      width:48px;
      height:48px;
      border-radius:50%;
      display:grid;
      place-items:center;
      margin:0 auto 18px;
      background:#edf7e9;
      color:var(--green-700);
      font-size:25px;
    }

    .card h3 {
      font-size:16px;
      color:var(--green-950);
      margin-bottom:8px;
    }

    .card p {
      font-size:14px;
      color:var(--muted);
    }

    .process {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }

    .step {
      background:white;
      border:1px solid var(--line);
      border-radius:18px;
      padding:26px;
      box-shadow:var(--shadow-soft);
    }

    .step b {
      font-family:Georgia,serif;
      font-size:46px;
      color:#9fbe9d;
      font-weight:400;
    }

    .step h3 {
      color:var(--green-950);
      margin:18px 0 8px;
      font-size:19px;
    }

    .step p {
      color:var(--muted);
      font-size:15px;
    }

    .legal {
      background:var(--paper);
    }

    .legal-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:24px;
      align-items:start;
    }

    .legal-card {
      background:white;
      border:1px solid var(--line);
      border-radius:18px;
      padding:34px;
      box-shadow:var(--shadow-soft);
    }

    .legal-card h2 {
      font-size:36px;
      margin-bottom:22px;
    }

    .legal-card h3 {
      margin:24px 0 8px;
      color:var(--green-950);
      font-size:18px;
    }

    .legal-card p, .legal-card li {
      color:var(--muted);
      font-size:15px;
      margin-bottom:10px;
    }

    .legal-card ul {
      padding-left:20px;
      margin:10px 0 16px;
    }

    footer {
      background:var(--green-950);
      color:rgba(255,255,255,.72);
      padding:54px 0 26px;
    }

    .footer-grid {
      display:grid;
      grid-template-columns:1.2fr .7fr .7fr 1fr 1.2fr;
      gap:34px;
      margin-bottom:40px;
    }

    footer h3 {
      color:#8ccb8f;
      text-transform:uppercase;
      letter-spacing:.18em;
      font-size:13px;
      margin-bottom:16px;
    }

    footer p, footer a {
      display:block;
      color:rgba(255,255,255,.72);
      font-size:14px;
      margin-bottom:9px;
    }

    .footer-brand strong {
      font-size:28px;
      color:white;
      letter-spacing:-.06em;
    }

    .footer-brand strong span { color:#8ccb8f; }

    .footer-cta {
      background:#6eaf6f;
      color:white;
      border-radius:8px;
      padding:15px 22px;
      font-weight:850;
      text-align:center;
      margin-top:16px;
    }

    .copyright {
      border-top:1px solid rgba(255,255,255,.1);
      padding-top:22px;
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      font-size:13px;
      color:rgba(255,255,255,.55);
    }

    @media(max-width:980px) {
      .navlinks a:not(.nav-cta) { display:none; }
      .hero-grid { grid-template-columns:1fr; gap:40px; }
      .hero-visual { min-height:450px; }
      .cards { grid-template-columns:repeat(2,1fr); }
      .process { grid-template-columns:1fr 1fr; }
      .footer-grid { grid-template-columns:1fr 1fr; }
      .legal-grid { grid-template-columns:1fr; }
      .comparison { height:460px; }
    }

    @media(max-width:620px) {
      .wrap { width:min(100% - 28px, 1180px); }
      nav { height:68px; }
      .brand strong { font-size:23px; }
      .brand small { font-size:10px; }
      .nav-cta { padding:10px 12px; font-size:13px; }
      .hero { padding:54px 0; min-height:auto; }
      .hero-features { grid-template-columns:1fr; gap:16px; }
      .hero-visual { display:none; }
      .cards, .process, .footer-grid { grid-template-columns:1fr; }
      .comparison { height:360px; }
      .legal-card { padding:24px; }
      section { padding:62px 0; }
    }
  
    .sliders-grid {
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:22px;
      align-items:stretch;
    }

    .sliders-grid .comparison {
      height:420px;
    }

    @media(max-width:980px) {
      .sliders-grid {
        grid-template-columns:1fr;
      }

      .sliders-grid .comparison {
        height:460px;
      }
    }

    @media(max-width:620px) {
      .sliders-grid .comparison {
        height:360px;
      }
    }

  
.comparison .range{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  z-index:999 !important;
  cursor:ew-resize !important;
}



/* === Mobile-Optimierung: Desktop unverändert, nur kleinere Viewports === */
img, svg, video, canvas { max-width:100%; height:auto; }
html, body { max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; }

@media (hover:none) and (pointer:coarse) {
  .btn:hover { transform:none; }
  .range { touch-action:pan-x; }
}

@media (max-width:980px) {
  header { position:sticky; }
  nav { gap:16px; }
  .navlinks { gap:12px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { width:min(520px, 100%); margin:0 auto; }
  .floating-card { right:8px; bottom:32px; width:min(280px, calc(100% - 16px)); }
}

@media (max-width:760px) {
  .wrap { width:min(100% - 32px, 1180px); }
  header { backdrop-filter:blur(14px); }
  nav { min-height:68px; height:auto; padding:12px 0; align-items:center; }
  .brand { min-width:0; }
  .brand strong { font-size:22px; white-space:nowrap; }
  .brand small { font-size:9px; letter-spacing:.14em; }
  .navlinks { margin-left:auto; }
  .nav-cta { white-space:nowrap; padding:10px 11px; font-size:12px; border-radius:8px; }

  .hero { padding:42px 0 52px; min-height:auto; }
  .hero-grid { gap:30px; }
  h1 { font-size:clamp(40px, 12vw, 58px); line-height:1; letter-spacing:-.055em; }
  .lead { font-size:17px; max-width:none; }
  .hero-features { grid-template-columns:1fr; gap:14px; margin:30px 0; }
  .hero-feature { display:grid; grid-template-columns:48px 1fr; column-gap:13px; align-items:center; }
  .hero-feature .circle { width:48px; height:48px; margin:0; font-size:21px; grid-row:1 / span 2; }
  .hero-actions { align-items:stretch; }
  .hero-actions .btn { width:100%; padding:15px 18px; }

  /* Das Portrait/Bild bleibt auf Mobile sichtbar. */
  .hero-visual { display:block !important; min-height:360px; height:360px; margin-top:4px; }
  .blob { inset:12px 4px 18px; }
  .portrait { inset:24px 22px 54px; border-radius:34% 66% 48% 52% / 44% 42% 58% 56%; }
  .portrait img { object-fit:cover; object-position:center top; transform:scale(1.01); }
  .floating-card { bottom:14px; left:50%; right:auto; transform:translateX(-50%); width:min(292px, calc(100% - 18px)); padding:16px 58px 16px 16px; }

  section { padding:58px 0; }
  .section-head { margin-bottom:32px; }
  h2 { font-size:clamp(32px, 10vw, 44px); }
  .section-head p { font-size:16px; }

  .compare-shell { border-radius:12px; }
  .comparison, .sliders-grid .comparison { height:auto !important; aspect-ratio: 4 / 3; min-height:260px; max-height:430px; }
  .comparison img { object-fit:contain; object-position:center top; }
  .handle { width:50px; height:50px; font-size:19px; }
  .tag { top:10px; padding:7px 9px; font-size:10px; }
  .tag.before { left:10px; }
  .tag.after { right:10px; }
  .range { touch-action:pan-x; }
  .more-btn { width:100%; justify-content:center; text-align:center; }

  .cards { gap:14px; }
  .card { padding:24px 18px; min-height:auto; }
  .process { gap:14px; }
  .step { padding:22px; }

  .footer-grid { gap:24px; }
  footer { padding:44px 0 24px; }
  footer p, footer a { font-size:14px; }
  .copyright { flex-direction:column; gap:8px; }
}

@media (max-width:420px) {
  .wrap { width:min(100% - 24px, 1180px); }
  nav { gap:10px; }
  .brand strong { font-size:20px; }
  .brand small { display:none; }
  .nav-cta { padding:9px 9px; font-size:11px; }
  h1 { font-size:39px; }
  .lead { font-size:16px; }
  .hero-visual { height:320px; min-height:320px; }
  .portrait { inset:20px 16px 50px; }
  .floating-card { font-size:13px; }
  .floating-card span { font-size:13px; }
  .comparison, .sliders-grid .comparison { min-height:230px; aspect-ratio: 3 / 3.2; }
  .legal-card { padding:20px; }
}

/* === Über mich Seite isoliert === */
.about-page {
  width: 100%;
  min-height: calc(100vh - 78px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
  background: var(--cream);
}

.about-section {
  width: min(1160px, 100%);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 34px;
  align-items: stretch;
}

.about-image-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  min-height: 620px;
}

.about-image-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 43% center;
}

.about-content-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 58px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-eyebrow {
  color: var(--green-700);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.about-content-card h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
  color: var(--green-950);
}

.about-intro {
  font-size: 20px;
  color: var(--muted);
  margin-bottom: 34px;
  max-width: 560px;
}

.about-text-block {
  display: grid;
  gap: 15px;
  color: var(--muted);
  font-size: 18px;
  max-width: 620px;
}

.about-text-block strong {
  color: var(--ink);
  font-weight: 700;
}

.about-highlight {
  margin-top: 30px;
  padding: 22px 24px;
  border-radius: 18px;
  background: #f3eee5;
  border-left: 5px solid var(--green-700);
  color: var(--ink);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
}

.about-button-row {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 850;
  transition: transform 0.2s ease, background 0.2s ease;
}

.about-btn-primary {
  background: linear-gradient(135deg, #66ad72, #3f8351);
  color: #fff;
}

.about-btn-secondary {
  background: #fff;
  color: var(--green-700);
  border: 1px solid rgba(31, 77, 56, 0.18);
}

.about-btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 920px) {
  .about-page {
    padding: 28px 16px;
    align-items: flex-start;
  }

  .about-section {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .about-image-card {
    min-height: 460px;
  }

  .about-image-card img {
    object-position: center 32%;
  }
}

@media (max-width: 560px) {
  .about-content-card,
  .about-image-card {
    border-radius: 20px;
  }

  .about-content-card {
    padding: 28px 22px;
  }

  .about-intro,
  .about-highlight {
    font-size: 18px;
  }

  .about-text-block {
    font-size: 16.5px;
  }

  .about-button-row {
    flex-direction: column;
  }

  .about-btn {
    width: 100%;
  }
}

/* === WhatsApp Floating Button === */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.whatsapp-float svg {
  width: 31px;
  height: 31px;
  fill: #ffffff;
}
@media (max-width: 620px) {
  .whatsapp-float {
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
  }
}

/* === WhatsApp Button in der Navigation === */
.nav-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  background: #25D366;
  color: #ffffff !important;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.22);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.nav-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(37, 211, 102, 0.28);
}

.nav-whatsapp svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.nav-whatsapp::after {
  display: none !important;
}

@media (max-width: 980px) {
  .navlinks a.nav-whatsapp {
    display: inline-flex;
  }
}

@media (max-width: 760px) {
  .nav-whatsapp {
    height: 40px;
    padding: 0 11px;
    font-size: 12px;
    white-space: nowrap;
  }
  .nav-whatsapp svg {
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 520px) {
  .nav-whatsapp span {
    display: none;
  }
  .nav-whatsapp {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
  }
}