:root{
    --ink:#12141C;
    --ink-soft:#5A6472;
    --paper:#FAFAF7;
    --panel:#EFEDE4;
    --slate:#243244;
    --slate-dark:#131C26;
    --teal:#7CBB37;
    --teal-light:#A3D673;
    --teal-dark:#5C9A28;
    --amber:#F5B301;
    --line: rgba(24,33,41,0.12);
    --white:#FFFFFF;
    --display: "Archivo", sans-serif;
    --body: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-padding-top:96px;}
  @media (max-width:900px){ html{scroll-padding-top:82px;} }
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
  h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-0.015em;}
  p{margin:0;}

  /* ---------- Header ---------- */
  header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(250,250,247,0.85);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line);
    transform:translateY(0);transition:transform .3s ease;}
  header.nav-hidden{transform:translateY(-100%);}
  body{padding-top:71px;}
  @media (max-width:900px){ body{padding-top:65px;} }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1200px;margin:0 auto;gap:20px;}
  .logo{display:flex;align-items:center;flex-shrink:0;}
  .logo img{height:34px;width:auto;max-width:none;display:block;object-fit:contain;}
  .nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500;}
  .nav-links a{text-decoration:none;}
  .nav-links a:hover{color:var(--teal);}
  /* ---------- Aufklappmenü "Leistungen" ---------- */
  .nav-hat{position:relative;}
  .nav-hat > a::after{
    content:"";display:inline-block;width:6px;height:6px;margin-left:6px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
  }
  .nav-hat:hover > a::after{transform:rotate(225deg) translateY(-4px);}
  .nav-klapp{
    position:absolute;top:100%;left:-14px;min-width:250px;
    background:var(--white);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 20px 44px -16px rgba(24,33,41,0.28);
    padding:8px;margin:0;list-style:none;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  /* Unsichtbare Brücke, damit das Menü beim Weg zur Maus nicht zuklappt */
  .nav-hat::before{content:"";position:absolute;top:100%;left:0;right:0;height:14px;}
  .nav-hat:hover .nav-klapp, .nav-hat:focus-within .nav-klapp{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .nav-klapp li{margin:0;}
  .nav-klapp a{
    display:block;padding:10px 14px;border-radius:9px;
    font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;
    transition:background .15s ease, color .15s ease;
  }
  .nav-klapp a:hover{background:var(--panel);color:var(--teal-dark);}
  .nav-klapp hr{border:none;border-top:1px solid var(--line);margin:6px 8px;}

  .nav-right{display:flex;align-items:center;gap:16px;white-space:nowrap;}
  .nav-contact{font-size:14px;text-decoration:none;font-weight:600;color:var(--ink);padding:11px 20px;border-radius:100px;background:var(--panel);border:none;transition:background .18s ease;}
  .nav-contact:hover{background:rgba(24,33,41,0.1);}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:100px;font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;font-family:var(--body);}
  .btn-primary{background:var(--teal);color:var(--ink);box-shadow:0 8px 24px rgba(124,187,55,0.32);}
  .btn-primary:hover{background:var(--teal-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 12px 28px rgba(124,187,55,0.4);}
  .btn-ghost{border-color:var(--line);color:var(--ink);background:var(--white);}
  .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);}
  header .btn{padding:11px 22px;border-radius:100px;}
  @media (max-width:900px){ .nav-links{display:none;} .nav{padding:14px 20px;} }
  @media (max-width:520px){ .nav-contact{padding:10px 14px;font-size:13.5px;} }

  /* ---------- Hero ---------- */
  .hero{position:relative;padding:52px 0 24px;}
  .hero-glow{position:absolute;top:-220px;right:-160px;width:640px;height:640px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(124,187,55,0.30), rgba(124,187,55,0) 70%);
    filter:blur(10px);pointer-events:none;z-index:0;}
  .hero-glow2{position:absolute;top:180px;bottom:-320px;left:-320px;width:860px;
    background:radial-gradient(ellipse 55% 62% at 30% 32%, rgba(217,138,43,0.16), rgba(217,138,43,0.06) 48%, rgba(217,138,43,0) 80%);
    filter:blur(14px);pointer-events:none;z-index:0;}
  .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;}
  .hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:100px;padding:7px 14px 7px 8px;font-size:13px;font-weight:600;margin:0 0 24px;box-shadow:0 2px 10px rgba(24,33,41,0.05);}
  .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(124,187,55,0.18);}
  .hero h1{font-size:clamp(34px,4.8vw,54px);line-height:1.05;max-width:14ch;font-weight:800;}
  .hero h1 .accent{background:linear-gradient(100deg, var(--teal) 15%, var(--teal-light) 60%);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero-lede{margin-top:22px;font-size:18.5px;color:var(--ink-soft);max-width:44ch;}
  .hero-ctas{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;}
  .hero-trust-wrap{position:relative;z-index:1;}
  .hero-trust{
    margin-top:36px;display:flex;gap:clamp(20px,2vw,38px);
    justify-content:flex-start;
    margin-left:0;
    /* WICHTIG: Begrenzung auf die Breite der Textspalte. Ohne sie bleiben
       die Beschreibungen einzeilig und die drei Angaben ziehen sich
       ueber die ganze Mitte. */
    max-width:calc((100% - 48px) / 2.15);
  }
  .trust-cell{flex:1 1 0;padding:0;text-align:left;min-width:0;}
  /* Schrift waechst mit der Fensterbreite mit */
  .trust-cell strong{
    display:block;font-family:var(--display);font-weight:800;line-height:1.2;margin-bottom:4px;
    font-size:clamp(17px,1.45vw,26px);
  }
  .trust-cell span{
    color:var(--ink-soft);line-height:1.35;
    font-size:clamp(11.5px,0.92vw,16px);
  }
  .hero-media{position:relative;container-type:inline-size;container-name:bild;}
  .hero-media-inner{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(24,33,41,0.35);}
  .hero-media-inner img{width:100%;height:440px;object-fit:cover;display:block;}
  .hero-float{position:absolute;left:-16px;top:32px;background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);border-radius:13px;box-shadow:0 12px 28px rgba(24,33,41,0.18);padding:12px 16px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,0.6);min-width:132px;}
  .stars{color:var(--amber) !important;font-size:15px;letter-spacing:1px;}
  .hero-float .stars{font-size:10px;letter-spacing:.3px;}
  .hero-float strong{display:block;font-family:var(--display);font-size:15px;font-weight:800;line-height:1.15;}
  .hero-float span{font-size:10.5px;color:var(--ink-soft);}
  .hero-badge-float{position:absolute;right:-16px;bottom:32px;background:var(--slate);color:var(--white);border-radius:13px;padding:14px 18px;box-shadow:0 12px 28px rgba(19,28,38,0.36);min-width:132px;}
  .hero-badge-float strong{display:block;font-family:var(--display);font-size:19px;font-weight:800;line-height:1.15;}
  .hero-badge-float span{font-size:11.5px;color:#AEBAC5;}

  @media (prefers-reduced-motion:no-preference){
    .hero h1,.hero-lede,.hero-ctas,.hero-media{animation:rise .65s cubic-bezier(.2,.7,.2,1) both;}
    .hero-lede{animation-delay:.06s;}
    .hero-ctas{animation-delay:.12s;}
    .hero-media{animation-delay:.1s;}
    @keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  }

  /* ---------- Section shell ---------- */
  section{padding:96px 0;}
  .section-head{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;margin-bottom:48px;}
  .section-head h2{font-size:21px;font-weight:600;max-width:34ch;line-height:1.35;margin-top:10px;}
  .section-head p{max-width:52ch;color:var(--ink-soft);font-size:15px;line-height:1.6;}
  .kicker{display:block;font-family:var(--display);font-size:clamp(26px,3vw,34px);font-weight:800;color:var(--teal);line-height:1.1;letter-spacing:-0.01em;}

  /* ---------- ZAHLEN (animated counters) ---------- */
  .stats-band{background:transparent;position:relative;}
  .stats-band::before{content:"";position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:820px;height:420px;
    background:radial-gradient(ellipse at center, rgba(124,187,55,0.12), rgba(124,187,55,0) 70%);pointer-events:none;}
  .stats-head{position:relative;text-align:center;margin-bottom:52px;}
  .stats-band .kicker{color:var(--teal);}
  .stats-band h2{color:var(--ink);}
  .stats-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  .stat-cell{background:var(--white);padding:36px 28px;}
  .stat-num{font-family:var(--display);font-weight:900;font-size:clamp(34px,4vw,46px);color:var(--ink);display:flex;align-items:baseline;gap:2px;line-height:1;}
  .stat-num .suffix{font-size:0.55em;color:var(--teal);}
  .stat-label{margin-top:10px;font-size:13.5px;color:var(--ink-soft);}

  /* ---------- Leistungen ---------- */
  .service-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto;}
  /* 7 Leistungen + Rechner = 8 Felder. Damit in der letzten Reihe kein
     Loch bleibt, nimmt die Rechner-Kachel dort zwei Spalten ein. */
  @media (min-width:961px){
    .service-bento .promo-card{grid-column:span 2;}
  }
  .service-card{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;display:flex;flex-direction:column;text-decoration:none;color:inherit;}
  .service-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -16px rgba(24,33,41,0.18);border-color:transparent;}
  .service-photo{position:relative;height:112px;overflow:hidden;}
  .service-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
  .service-card:hover .service-photo img{transform:scale(1.06);}
  .service-icon{position:absolute;left:14px;bottom:-18px;width:36px;height:36px;border-radius:9px;background:var(--white);box-shadow:0 6px 14px rgba(24,33,41,0.14);display:flex;align-items:center;justify-content:center;}
  .service-icon svg{width:18px;height:18px;stroke:var(--teal);}
  .service-body{padding:26px 22px 22px;flex:1;}
  .service-card h3{font-size:16.5px;}
  .service-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-top:6px;}
  /* Hero + Logo-Leiste füllen beim Öffnen genau eine Bildschirmhöhe */
  @media (min-width:901px){
    /* flex-start statt center: bei mittiger Ausrichtung ragt zu hoher Inhalt
       oben hinter die Kopfzeile und der Hinweis wird angeschnitten. */
    .hero{min-height:calc(100vh - 215px);display:flex;flex-direction:column;justify-content:flex-start;}
    /* ALLE Bloecke im Hero brauchen volle Breite. Ohne width:100% schrumpft
       ein Block auf seine Inhaltsbreite und wird durch margin:0 auto der
       .wrap-Klasse mittig gesetzt - genau das passierte der Trust-Reihe. */
    .hero > .wrap{width:100%;}
  }

  /* Banner skalieren mit der BILDBREITE, nicht mit dem Fenster */
  @container bild (min-width: 0px){
    .hero-float{
      left:-3cqw;
      top:6cqw;
      border-radius:2.4cqw;
      padding:2.2cqw 3cqw;
      gap:1.8cqw;
      min-width:24cqw;
    }
    .hero-float .stars{font-size:clamp(6px,1.85cqw,10px);letter-spacing:.3px;}
    .hero-float strong{font-size:clamp(8px,2.8cqw,15px);}
    .hero-float span{font-size:clamp(6px,1.95cqw,10.5px);}

    .hero-badge-float{
      right:-3cqw;
      bottom:6cqw;
      border-radius:2.4cqw;
      padding:2.6cqw 3.3cqw;
      min-width:24cqw;
    }
    .hero-badge-float strong{font-size:clamp(9px,3.5cqw,19px);}
    .hero-badge-float span{font-size:clamp(6px,2.1cqw,11.5px);}
  }

  .hero-float .label-kurz{display:none;}
  /* Bei schmalem Bild: Sterne weg, Kurztext -> gleiche Groesse wie "versichert" */
  @container bild (max-width: 340px){
    .hero-float .label-lang{display:none;}
    .hero-float .label-kurz{display:block;}
    /* Innenabstand oben verkleinern, damit die Sterne nicht schweben */
    .hero-float{padding:1.4cqw 3cqw 2.2cqw;}
    .hero-float .stars{
      display:block;font-size:clamp(6px,1.6cqw,10px);
      line-height:1;margin:0 0 0.4cqw;
    }
    .hero-float strong{line-height:1.05;margin:0;}
    .hero-float .label-kurz{line-height:1.1;margin:0.3cqw 0 0;}
  }

  /* ---------- Referenzen-Laufband ---------- */
  .marken{padding:20px 0 14px;overflow:hidden;}
  .marken-titel{text-align:center;font-size:13px;font-weight:700;color:var(--ink-soft);
    letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;}
  .marken-band{
    position:relative;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .marken-spur{
    display:flex;width:max-content;gap:0;align-items:center;
    /* WICHTIG: Standard-Abstaende der Liste entfernen. Der linke Innenabstand
       einer <ul> steht nur EINMAL am Anfang und macht die beiden Haelften
       unterschiedlich lang -> sichtbarer Sprung beim Umlauf. */
    margin:0;padding:0;list-style:none;
    will-change:transform;backface-visibility:hidden;
  }
  .marken-spur li{
    list-style:none;flex-shrink:0;margin-right:64px;
    font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-0.02em;
    color:var(--ink-soft);opacity:.55;white-space:nowrap;
    transition:opacity .25s ease, color .25s ease;
  }
  .marken-spur li:hover{opacity:1;color:var(--ink);}
  /* Falls echte Logodateien vorliegen: <li><img src="logo.svg" alt="Firmenname"></li> */
  .marken-spur img{
    height:clamp(34px,4.4vw,56px);width:auto;display:block;
    filter:grayscale(1);opacity:.55;
    transition:filter .25s ease, opacity .25s ease;
  }
  /* Beim Ueberfahren zeigt das jeweilige Logo seine Originalfarben.
     Das ist jetzt gefahrlos, weil die Leiste dabei stehen bleibt und die
     Bewegung nicht mehr von einer CSS-Animation kommt. */
  .marken-spur li:hover img{filter:none;opacity:1;}

  @media (max-width:640px){
    .marken{padding:36px 0 4px;}
    .marken-spur li{margin-right:30px;}
    .marken-spur li{font-size:18px;}
  }

  /* ---------- Sofort-Rechner-Kachel ---------- */
  .promo-card{
    position:relative;overflow:hidden;text-decoration:none;
    background:linear-gradient(150deg, var(--slate) 0%, var(--slate-dark) 100%);
    border:none;color:var(--white);
    display:flex;flex-direction:column;justify-content:space-between;
    padding:24px 22px;
  }
  .promo-card:hover{box-shadow:0 20px 40px -16px rgba(19,28,38,0.45);}
  .promo-card::before{
    content:"";position:absolute;top:-70px;right:-50px;width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle, rgba(124,187,55,0.30), rgba(124,187,55,0) 70%);pointer-events:none;
  }
  .promo-icon{
    position:relative;width:40px;height:40px;border-radius:10px;background:rgba(124,187,55,0.2);
    display:flex;align-items:center;justify-content:center;
  }
  .promo-icon svg{width:21px;height:21px;stroke:var(--teal-light);}
  .promo-body{position:relative;margin-top:14px;}
  .promo-kicker{display:block;font-size:12px;font-weight:700;color:var(--teal-light);margin-bottom:4px;}
  .promo-card h3{font-size:16.5px;color:var(--white);}
  .promo-card p{font-size:13.5px;color:#B7C0C7;line-height:1.5;margin-top:6px;}

  /* ---------- Mission ---------- */
  .mission{background:var(--paper);}
  /* minmax(0, ...) ist entscheidend: ohne die 0 als Untergrenze darf eine
     Spalte nicht schmaler werden als ihr Inhalt. Sobald der Browser die
     echte Videoauflösung kennt, wuerde die Videospalte sonst aufblaehen
     und den Text zusammenquetschen. */
  .mission-grid{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:56px;align-items:center;}
  .mission-media{display:flex;flex-direction:column;gap:12px;min-width:0;}
  .mission-video{
    position:relative;border-radius:16px;overflow:hidden;background:#000;min-width:0;
    box-shadow:0 24px 50px -24px rgba(24,33,41,0.35);
    aspect-ratio:16 / 9;
  }
  .mission-video video{width:100%;height:100%;max-width:100%;display:block;object-fit:cover;background:#000;}
  .mission-text{margin-top:18px;font-size:16px;color:var(--ink-soft);line-height:1.65;max-width:46ch;}
  .mission-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .mission-list li{font-size:15px;padding-left:38px;position:relative;line-height:1.5;}
  .mission-list li::before{
    content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
    background:rgba(124,187,55,0.12);
  }
  .mission-list li::after{
    content:"";position:absolute;left:8px;top:9px;width:9px;height:5px;
    border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);
    transform:rotate(-45deg);
  }
  .mission-people{margin-top:36px;display:flex;align-items:center;gap:14px;padding-top:26px;border-top:1px solid var(--line);}
  .mission-avatar{width:46px;height:46px;border-radius:50%;background:var(--slate);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;}
  .mission-people strong{display:block;font-size:15px;}
  .mission-people span{font-size:13px;color:var(--ink-soft);}


  /* ---------- Instagram-Hinweis ---------- */
  .insta-box{
    margin:0;display:flex;flex-direction:row;align-items:center;gap:12px;
    padding:12px 16px;border-radius:12px;text-decoration:none;color:var(--ink);
    background:var(--white);border:1px solid var(--line);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .insta-box:hover{transform:translateY(-2px);box-shadow:0 18px 36px -18px rgba(24,33,41,0.28);border-color:transparent;}
  .insta-ico{
    width:34px;height:34px;border-radius:9px;flex-shrink:0;color:var(--white);
    background:linear-gradient(45deg,#F09433,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888);
    display:flex;align-items:center;justify-content:center;
  }
  .insta-ico svg{width:18px;height:18px;}
  .insta-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
  .insta-text strong{font-family:var(--display);font-size:14px;font-weight:700;line-height:1.25;}
  .insta-text span{font-size:12px;color:var(--ink-soft);line-height:1.35;}
  .insta-pfeil{font-size:16px;color:var(--teal-dark);flex-shrink:0;transition:transform .18s ease;}
  .insta-box:hover .insta-pfeil{transform:translateX(4px);}
  @media (max-width:640px){
    .insta-box{padding:10px 13px;gap:10px;}
    .insta-ico{width:30px;height:30px;border-radius:8px;}
    .insta-ico svg{width:16px;height:16px;}
    .insta-text{flex:1;min-width:0;}
    .insta-text strong{font-size:13px;line-height:1.2;}
    /* Beschreibung weglassen - die Karte soll nur ein schmaler Hinweis sein */
    .insta-text > span{display:none;}
    .insta-pfeil{font-size:15px;}
  }

  /* ---------- Warum wir ---------- */
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .why-card{background:var(--white);border-radius:16px;padding:26px;border:1px solid var(--line);}
  .why-num{font-family:var(--display);font-weight:800;font-size:13px;color:var(--teal);}
  .why-card h3{font-size:18px;margin:12px 0 10px;}
  .why-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}

  /* ---------- Bewertung ---------- */
  .rating-band{background:var(--panel);border-radius:24px;margin:0 32px;max-width:1136px;margin-left:auto;margin-right:auto;padding:0;}
  .rating-inner{padding:56px;display:grid;grid-template-columns:0.6fr 1.4fr;gap:48px;align-items:center;}
  .rating-score{font-family:var(--display);font-size:68px;font-weight:900;line-height:1;}
  .rating-band .stars{font-size:20px;margin-top:10px;display:block;}
  .rating-sub{font-size:14px;color:var(--ink-soft);margin-top:8px;}
  .rating-note{font-size:15px;color:var(--ink-soft);line-height:1.7;max-width:52ch;}
  .rating-note strong{color:var(--ink);}
  .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 56px 56px;}
  .review-card{background:var(--white);border-radius:14px;padding:24px;border:1px solid var(--line);}
  .review-card .stars{font-size:14px;display:block;margin-bottom:10px;}
  .review-card p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0;}
  .review-source{display:block;margin-top:14px;font-size:12px;color:var(--ink-soft);opacity:.75;}

  /* ---------- FAQ ---------- */
  .faq-list{border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;gap:20px;
    font-family:var(--display);font-weight:600;font-size:17px;
    padding:24px 0;cursor:pointer;list-style:none;
    -webkit-tap-highlight-color:transparent;
  }
  /* Standard-Dreieck des Browsers entfernen */
  .faq-q::-webkit-details-marker{display:none;}
  .faq-q::marker{content:"";}
  .faq-q .plus{font-size:20px;color:var(--teal);transition:transform .2s ease;flex-shrink:0;}
  .faq-item[open] .faq-q .plus{transform:rotate(45deg);}
  .faq-a{overflow:hidden;}
  .faq-a p{padding:0 0 24px;font-size:15px;color:var(--ink-soft);max-width:60ch;line-height:1.65;}
  @media (prefers-reduced-motion:no-preference){
    .faq-item[open] .faq-a{animation:faqAuf .28s ease;}
  }
  @keyframes faqAuf{
    from{opacity:0;transform:translateY(-6px);}
    to{opacity:1;transform:translateY(0);}
  }

  /* ---------- CTA band ---------- */
  .cta-band{background:var(--ink);color:var(--paper);border-radius:28px;margin:0 32px;max-width:1136px;margin-left:auto;margin-right:auto;overflow:hidden;position:relative;}
  .cta-band::before{content:"";position:absolute;top:-120px;right:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle, rgba(163,214,115,0.24), rgba(163,214,115,0) 70%);}
  .cta-head{position:relative;padding:64px 64px 0;text-align:center;}
  .cta-inner{position:relative;padding:40px 64px 64px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start;text-align:left;}
  .cta-band h2{color:var(--white);font-size:21px;font-weight:600;max-width:28ch;margin-top:10px;}
  .cta-band .kicker{color:#C3E6A0;}
  .cta-inner > div:first-child p{color:#B7C0C7;margin-top:14px;max-width:42ch;font-size:15.5px;}
  .cta-band .btn-primary{margin-top:26px;}

  /* ---------- Kontaktbereich links ---------- */
  .cta-contact{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;}
  .cta-contact li{display:flex;gap:14px;align-items:flex-start;}
  .cta-ico{
    width:38px;height:38px;border-radius:10px;flex-shrink:0;
    background:rgba(124,187,55,0.16);display:flex;align-items:center;justify-content:center;
  }
  .cta-ico svg{width:19px;height:19px;stroke:var(--teal-light);}
  .cta-contact strong{display:block;font-family:var(--display);font-size:13px;font-weight:700;color:var(--white);margin-bottom:2px;}
  .cta-contact a, .cta-contact span{font-size:14.5px;color:#B7C0C7;text-decoration:none;line-height:1.5;}
  .cta-contact a:hover{color:var(--teal-light);}

  .cta-promise{
    margin-top:30px;padding:16px 18px;border-radius:12px;
    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
    display:flex;align-items:center;gap:14px;
  }
  .cta-promise p{font-size:13.5px;color:#C7CFD8;line-height:1.5;margin:0;}
  .cta-pulse{position:relative;width:12px;height:12px;flex-shrink:0;}
  .cta-pulse span{
    position:absolute;inset:3px;border-radius:50%;background:var(--teal);
  }
  .cta-pulse::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    border:2px solid var(--teal);opacity:.7;
  }
  @media (prefers-reduced-motion:no-preference){
    .cta-pulse::before{animation:ctaPuls 2.2s ease-out infinite;}
    @keyframes ctaPuls{
      0%{transform:scale(.5);opacity:.8;}
      100%{transform:scale(1.9);opacity:0;}
    }
  }

  .cta-checks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .cta-checks li{position:relative;padding-left:28px;font-size:14px;color:#C7CFD8;}
  .cta-checks li::before{
    content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
    background:rgba(124,187,55,0.18);
  }
  .cta-checks li::after{
    content:"";position:absolute;left:5.5px;top:7px;width:7px;height:4px;
    border-left:2px solid var(--teal-light);border-bottom:2px solid var(--teal-light);
    transform:rotate(-45deg);
  }

  /* Sanftes Einblenden beim Scrollen */
  /* Wichtig: .reveal ist von sich aus SICHTBAR. Nur wenn das Skript
     laeuft und die Erkennung sicher funktioniert, wird kurz versteckt. */
  .reveal{opacity:1;transform:none;}
  @media (prefers-reduced-motion:no-preference){
    .reveal.vorbereitet{opacity:0;transform:translateY(14px);}
    .reveal.vorbereitet{transition:opacity .5s ease, transform .5s ease;}
    .reveal.vorbereitet.sichtbar{opacity:1;transform:translateY(0);}
  }

  .form-card{background:var(--white);color:var(--ink);border-radius:18px;padding:30px;}
  .form-card h3{font-size:19px;margin-bottom:4px;}
  .form-card .form-sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:20px;display:block;}
  .form-row{margin-bottom:14px;}
  .form-row label{font-size:13px;font-weight:600;display:block;margin-bottom:6px;}
  .form-row input, .form-row textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-family:var(--body);font-size:14.5px;background:var(--paper);}
  .form-row textarea{resize:vertical;min-height:80px;}
  .form-legal{font-size:12px;color:var(--ink-soft);margin-top:10px;}
  .form-card .btn{width:100%;margin-top:6px;border-radius:10px;}

  /* ---------- Footer ---------- */
  footer{background:#000000;color:#9AA5AD;padding:50px 0 28px;font-size:13.5px;margin-top:96px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,0.1);}
  .foot-logo img{height:24px;width:auto;display:block;}
  .foot-desc{margin-top:14px;max-width:32ch;line-height:1.6;}
  .foot-social{display:flex;gap:12px;margin-top:20px;}
  .foot-social a{
    width:40px;height:40px;border-radius:10px;
    background:rgba(255,255,255,0.08);
    display:flex;align-items:center;justify-content:center;
    color:#8B98A3;transition:background .18s ease, color .18s ease, transform .18s ease;
  }
  .foot-social a:hover{background:var(--teal);color:var(--ink);transform:translateY(-2px);}
  .foot-social svg{width:19px;height:19px;}
  .foot-col h4{font-family:var(--body);color:var(--white);font-size:13px;font-weight:600;margin-bottom:14px;}
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
  .foot-col a{text-decoration:none;}
  .foot-col a:hover{color:var(--white);}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;}
  .foot-bottom ul{display:flex;gap:20px;list-style:none;padding:0;margin:0;}
  .foot-bottom a{text-decoration:none;}

  /* Hero bleibt zweispaltig bis 640px — Bild rechts neben der Überschrift */
  @media (max-width:960px) and (min-width:641px){
    .hero{padding:56px 0 40px;}
    .hero-grid{grid-template-columns:1fr 1fr;gap:28px;}
    .hero h1{font-size:clamp(24px,3.6vw,34px);max-width:16ch;}
    .hero-lede{font-size:15px;margin-top:14px;}
    .hero-ctas{margin-top:20px;gap:10px;}
    .hero-ctas .btn{padding:11px 16px;font-size:13.5px;}
    .hero-media-inner img{height:380px;min-height:0;}
    .hero-trust{margin-top:26px;gap:22px;max-width:calc((100% - 28px) / 2);}

  }
  @media (max-width:960px){
    .service-bento{grid-template-columns:repeat(2,1fr);}
    .mission-grid{grid-template-columns:1fr;gap:28px;}
    /* Video nutzt die volle Breite - ohne 100vw, das die Bildlaufleiste
       mitzaehlt und dadurch nach rechts verschiebt. */
    .mission-video{
      border-radius:0;
      width:auto;max-width:none;
      margin-left:-32px;margin-right:-32px;
      transform:none;
    }
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .rating-inner{grid-template-columns:1fr;padding:40px;}
    .review-grid{grid-template-columns:1fr;padding:0 40px 40px;}
    .cta-head{padding:48px 40px 0;}
    .cta-inner{grid-template-columns:1fr;padding:32px 40px 48px;gap:32px;}
    .msg-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .rating-band, .cta-band{margin:0 20px;}
  }
  @media (max-width:640px){
    .wrap{padding:0 20px;}
    section{padding:64px 0;}
    /* Überschrift und Bild auch auf dem Handy nebeneinander */
    .hero{padding:24px 0 32px;}
    .hero-grid{grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
    .hero-media{order:0;margin-top:56px;}
    .hero-badge{font-size:11px;padding:5px 10px 5px 6px;margin-bottom:16px;}
    .logo img{height:30px;}
    .nav{gap:10px;}
    .menu-toggle{width:38px;height:38px;}
    .hero h1{font-size:clamp(19px,5.4vw,26px);max-width:14ch;}
    .hero-lede{font-size:13px;margin-top:10px;}
    .hero-ctas{margin-top:16px;gap:8px;flex-direction:column;align-items:stretch;}
    .hero-ctas .btn{width:100%;padding:11px 14px;font-size:13.5px;}
    .hero-media-inner img{height:260px;min-height:0;}
    .hero-trust{
      margin-top:22px;max-width:none;width:100%;
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:0;border-top:1px solid var(--line);padding-top:14px;
    }
    .trust-cell{
      flex:none;padding:0 8px;text-align:center;
      border-right:1px solid var(--line);border-left:none;
      display:flex;flex-direction:column;justify-content:flex-start;
    }
    .trust-cell:first-child{padding-left:0;}
    .trust-cell:last-child{border-right:none;padding-right:0;}
    .trust-cell strong{font-size:12.5px;margin-bottom:3px;line-height:1.15;}
    .trust-cell span{font-size:9.5px;line-height:1.3;}
    .service-bento{grid-template-columns:1fr;}
    .service-card{min-height:150px;}
    .why-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .section-head{gap:12px;}
    .stats-grid{grid-template-columns:1fr;}
    .rating-inner{padding:28px;}
    /* ----- Anfrage-Bereich: Abstaende auf dem Handy ausgleichen ----- */
    .cta-head{padding:32px 20px 0;}
    .cta-band .kicker{font-size:clamp(22px,6.5vw,28px);}
    .cta-band h2{font-size:17px;margin-top:8px;max-width:none;}
    .cta-inner{padding:22px 20px 32px;gap:22px;}
    .cta-inner > div:first-child p{font-size:14px;margin-top:12px;max-width:none;}
    .cta-band .btn-primary{margin-top:20px;}
    .cta-contact{margin-top:22px;gap:14px;}
    .cta-contact strong{font-size:12.5px;}
    .cta-contact a, .cta-contact span{font-size:13.5px;line-height:1.45;}
    .cta-promise{margin-top:22px;padding:12px 14px;gap:10px;}
    .cta-promise p{font-size:12.5px;line-height:1.45;}
    .cta-checks{margin-top:18px;gap:8px;}
    .cta-checks li{font-size:13px;padding-left:24px;}
    .form-card{padding:22px 18px;border-radius:14px;}
    .form-card h3{font-size:17px;}
    .form-card .form-sub{font-size:12.5px;margin-bottom:16px;line-height:1.4;}
    .form-row{margin-bottom:12px;}
    .form-row label{font-size:12.5px;margin-bottom:5px;}
    .form-row input, .form-row textarea{padding:12px;font-size:15px;border-radius:9px;}
    .form-row textarea{min-height:96px;}
    .form-card .btn{margin-top:10px;padding:14px 18px;font-size:15px;}
    .form-legal{font-size:11.5px;margin-top:12px;line-height:1.45;}
    .msg-row-2{grid-template-columns:1fr;}
    .msg-side, .msg-form{padding:24px;}
    .review-grid{padding:0 28px 28px;}
    .rating-band, .cta-band{margin:0 20px;border-radius:18px;}
    .nav{padding:10px 14px;gap:8px;}
    .logo img{height:26px;}
    .nav-contact{display:inline-flex;padding:8px 11px;font-size:12.5px;border-radius:100px;}
    .nav-right{gap:7px;}
    header .btn{padding:8px 12px;font-size:12.5px;}
    .menu-toggle{width:34px;height:34px;border-radius:9px;}
    .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{width:15px;}
  }
  /* ---------- Großes Kontaktformular ---------- */
  .msg-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:32px;align-items:start;}
  .msg-side{background:var(--panel);border-radius:18px;padding:32px;}
  .msg-side h3{font-family:var(--display);font-size:16px;font-weight:700;}
  .msg-info{list-style:none;margin:12px 0 0;padding:0;}
  .msg-info li{font-size:14.5px;color:var(--ink-soft);padding-left:18px;position:relative;margin-bottom:8px;line-height:1.5;}
  .msg-info li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--teal);}
  .msg-person{display:flex;gap:14px;align-items:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
  .msg-avatar{width:46px;height:46px;border-radius:50%;background:var(--slate);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;flex-shrink:0;}
  .msg-person strong{display:block;font-size:15px;}
  .msg-person span{display:block;font-size:13px;color:var(--ink-soft);}
  .msg-person a{display:block;font-size:13.5px;color:var(--teal-dark);text-decoration:none;font-weight:600;margin-top:2px;}
  .msg-form{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:32px;}
  .msg-form h3{font-family:var(--display);font-size:19px;font-weight:700;margin-bottom:20px;}
  .msg-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .msg-badges{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
  .msg-badges li{font-size:12.5px;color:var(--ink-soft);background:var(--panel);border-radius:100px;padding:6px 12px;}

  html, body{max-width:100%;overflow-x:hidden;}

  /* ---------- Fester Anruf-Button ---------- */

  @media (max-width:400px){
    .nav{padding:9px 12px;gap:6px;}
    .logo img{height:23px;}
    .nav-contact{padding:7px 9px;font-size:11.5px;}
    header .btn{padding:7px 10px;font-size:11.5px;}
    .nav-right{gap:6px;}
    .menu-toggle{width:32px;height:32px;}
  }

  /* ---------- Mobiles Menü ---------- */
  .menu-toggle{
    display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;
    background:var(--white);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;
  }
  .menu-toggle span{
    display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;
    transition:background .2s ease;
  }
  .menu-toggle span::before, .menu-toggle span::after{
    content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;
    transition:transform .25s ease, top .2s ease;
  }
  .menu-toggle span::before{top:-6px;}
  .menu-toggle span::after{top:6px;}
  body.menu-offen .menu-toggle span{background:transparent;}
  body.menu-offen .menu-toggle span::before{top:0;transform:rotate(45deg);}
  body.menu-offen .menu-toggle span::after{top:0;transform:rotate(-45deg);}

  .mobil-menu{
    position:fixed;left:0;right:0;top:0;z-index:45;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:80px 20px 24px;
    transform:translateY(-100%);transition:transform .3s ease;
    box-shadow:0 20px 40px -20px rgba(19,28,38,0.25);
  }
  body.menu-offen .mobil-menu{transform:translateY(0);}
  .mobil-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
  .mobil-menu li{border-bottom:1px solid var(--line);}
  .mobil-menu li:last-child{border-bottom:none;}
  .mobil-menu a{
    display:block;padding:15px 4px;text-decoration:none;
    font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink);
  }
  .mobil-menu a:hover{color:var(--teal-dark);}
  .mobil-menu .menu-klapp summary{
    display:flex;align-items:center;justify-content:space-between;
    padding:15px 4px;cursor:pointer;list-style:none;
    font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink);
  }
  .mobil-menu .menu-klapp summary::-webkit-details-marker{display:none;}
  .mobil-menu .menu-klapp summary::marker{content:"";}
  .mobil-menu .menu-klapp summary::after{
    content:"+";font-size:20px;font-weight:400;color:var(--teal-dark);
  }
  .mobil-menu .menu-klapp[open] summary::after{content:"\2013";}
  .mobil-menu .menu-unter{list-style:none;margin:0 0 8px;padding:0 0 0 14px;}
  .mobil-menu .menu-unter li{border-bottom:none;}
  .mobil-menu .menu-unter a{padding:11px 4px;font-size:15px;font-weight:500;color:var(--ink-soft);}

  .mobil-menu .menu-tel{
    display:block;margin-top:18px;text-align:center;padding:13px;
    background:var(--panel);border-radius:10px;text-decoration:none;
    font-weight:600;font-size:15px;color:var(--ink);
  }
  @media (max-width:900px){
    .menu-toggle{display:flex;}
  }
  @media (min-width:901px){
    .mobil-menu{display:none;}
  }

  /* ---------- Cookie-Banner ---------- */
  .cookie-bar{
    position:fixed;left:20px;bottom:20px;z-index:120;max-width:420px;
    background:var(--white);border:1px solid var(--line);border-radius:16px;
    box-shadow:0 20px 50px -14px rgba(19,28,38,0.32);
    padding:22px 24px;display:none;
  }
  .cookie-bar.offen{display:block;}
  @media (prefers-reduced-motion:no-preference){
    .cookie-bar.offen{animation:cookieRein .35s cubic-bezier(.2,.7,.2,1) both;}
    @keyframes cookieRein{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  }
  .cookie-bar h4{font-family:var(--display);font-size:16px;font-weight:700;margin:0 0 8px;}
  .cookie-bar p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0;}
  .cookie-bar a{color:var(--teal-dark);}
  .cookie-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
  .cookie-actions .btn{flex:1;padding:11px 16px;font-size:14px;border-radius:10px;white-space:nowrap;}
  .cookie-link{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;}
  .cookie-link:hover{color:var(--white);}
  @media (max-width:520px){
    .cookie-bar{left:14px;right:14px;bottom:14px;max-width:none;padding:20px;}
  }

  /* ---------- WhatsApp-Knopf ---------- */
  .wa-fab{
    position:fixed;right:20px;bottom:158px;z-index:90;
    display:flex;align-items:center;gap:10px;
    background:#25D366;color:#fff;text-decoration:none;
    border-radius:100px;padding:15px 20px 15px 15px;
    box-shadow:0 12px 28px rgba(37,211,102,0.4);
    font-family:var(--body);font-weight:600;font-size:14.5px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .wa-fab:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(37,211,102,0.5);}
  .wa-fab-icon{
    width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.22);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .wa-fab-icon svg{width:20px;height:20px;fill:#fff;}
  .wa-fab-text{display:flex;flex-direction:column;line-height:1.25;}
  .wa-fab-text small{font-size:11px;font-weight:500;opacity:.9;}
  @media (max-width:520px){
    .wa-fab{right:14px;bottom:140px;padding:14px;}
    .wa-fab-text{display:none;}
  }
  body.rechner-offen .wa-fab{display:none;}

  .call-fab{
    position:fixed;right:20px;bottom:90px;z-index:90;
    display:flex;align-items:center;gap:10px;
    background:var(--teal);color:var(--ink);text-decoration:none;
    border-radius:100px;padding:15px 20px 15px 15px;
    box-shadow:0 12px 28px rgba(124,187,55,0.4);
    font-family:var(--body);font-weight:600;font-size:14.5px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .call-fab:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(124,187,55,0.48);}
  .call-fab-icon{
    width:36px;height:36px;border-radius:50%;background:rgba(18,20,28,0.12);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;
  }
  .call-fab-icon svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;}
  .call-fab-icon::after{
    content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(18,20,28,0.28);
  }
  @media (prefers-reduced-motion:no-preference){
    .call-fab-icon::after{animation:callPulse 2s ease-out infinite;}
    @keyframes callPulse{
      0%{transform:scale(0.8);opacity:.8;}
      100%{transform:scale(1.5);opacity:0;}
    }
  }
  .call-fab-text{display:flex;flex-direction:column;line-height:1.25;}
  .call-fab-text small{font-size:11px;font-weight:500;opacity:.85;}
  @media (max-width:520px){
    .call-fab{right:14px;bottom:80px;padding:14px;}
    .call-fab-text{display:none;}
  }

  /* ---------- Preisrechner-Modal ---------- */
  .calc-overlay{
    position:fixed;inset:0;background:rgba(19,28,38,0.55);backdrop-filter:blur(4px);
    display:none;align-items:center;justify-content:center;z-index:200;padding:20px;
  }
  .calc-overlay.open{display:flex;}
  body.rechner-offen .cookie-bar, body.rechner-offen .call-fab{display:none;}
  .calc-modal{
    background:var(--white);border-radius:20px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;
    padding:32px;position:relative;box-shadow:0 40px 80px -20px rgba(19,28,38,0.4);
  }
  @media (prefers-reduced-motion:no-preference){
    .calc-overlay.open .calc-modal{animation:calcRise .3s cubic-bezier(.2,.7,.2,1) both;}
    @keyframes calcRise{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
  }
  .calc-close{
    position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:50%;
    background:var(--panel);border:none;font-size:18px;cursor:pointer;color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;
  }
  .calc-close:hover{background:var(--line);}
  .calc-dots{display:flex;gap:6px;margin-bottom:18px;}
  .calc-dot{width:22px;height:4px;border-radius:2px;background:var(--panel);}
  .calc-dot.active{background:var(--teal);}
  .calc-kicker{font-size:12.5px;font-weight:700;color:var(--teal);}
  .calc-modal h3{font-family:var(--display);font-size:22px;font-weight:700;margin-top:6px;}
  .calc-modal .calc-sub{font-size:14px;color:var(--ink-soft);margin-top:6px;}
  .calc-step{display:none;margin-top:24px;}
  .calc-step.active{display:block;}
  .calc-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .calc-option{
    border:1.5px solid var(--line);border-radius:12px;padding:14px;text-align:left;
    background:var(--white);cursor:pointer;font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink);
    transition:border-color .15s ease, background .15s ease;
  }
  .calc-option span{display:block;font-size:12px;font-weight:400;color:var(--ink-soft);margin-top:3px;}
  .calc-option:hover{border-color:var(--teal-light);}
  .calc-option.selected{border-color:var(--teal);background:rgba(124,187,55,0.06);}
  .calc-field{margin-top:18px;}
  .calc-field label{font-size:13px;font-weight:600;display:block;margin-bottom:8px;}
  .calc-slider-row{display:flex;align-items:center;gap:14px;}
  .calc-slider-row input[type="range"]{flex:1;accent-color:var(--teal);}
  .calc-slider-value{font-family:var(--display);font-weight:800;font-size:20px;min-width:70px;text-align:right;}
  .calc-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;}
  .calc-nav .btn{flex:1;}
  .calc-back{background:var(--panel);color:var(--ink);}
  .calc-back:hover{background:var(--line);}
  .calc-result{background:var(--panel);border-radius:14px;padding:24px;margin-top:20px;text-align:center;}
  .calc-result .calc-price{font-family:var(--display);font-size:36px;font-weight:800;color:var(--teal-dark);}
  .calc-result .calc-price span{font-size:15px;font-weight:500;color:var(--ink-soft);}
  .calc-result p{font-size:12.5px;color:var(--ink-soft);margin-top:10px;line-height:1.5;}
  .calc-custom-note{background:var(--panel);border-radius:14px;padding:20px;margin-top:20px;font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

  /* Seitenrand ist auf schmalen Bildschirmen 20px - muss NACH der
     960px-Regel stehen, sonst wird sie überschrieben. */
  @media (max-width:640px){
    .mission-video{margin-left:-20px;margin-right:-20px;}
  }

  /* ================= Leistungsseiten ================= */
  .ls-hero{padding:56px 0 40px;background:var(--paper);position:relative;}
  .ls-krume{font-size:13px;color:var(--ink-soft);margin-bottom:18px;}
  .ls-krume a{color:var(--ink-soft);text-decoration:none;}
  .ls-krume a:hover{color:var(--teal-dark);}
  .ls-hero h1{font-family:var(--display);font-weight:900;letter-spacing:-0.03em;
    font-size:clamp(30px,4.4vw,52px);line-height:1.04;max-width:20ch;margin:0;}
  .ls-lede{margin-top:18px;font-size:clamp(15px,1.2vw,18px);color:var(--ink-soft);
    line-height:1.65;max-width:62ch;}
  .ls-hero-ctas{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;}

  .ls-abschnitt{padding:56px 0;}
  .ls-abschnitt.hell{background:var(--white);}
  .ls-kicker{font-family:var(--display);font-weight:800;color:var(--teal);
    font-size:clamp(24px,2.8vw,32px);line-height:1.1;margin:0;}
  .ls-abschnitt h2{font-size:20px;font-weight:600;margin:8px 0 0;}
  .ls-text{margin-top:20px;font-size:16px;color:var(--ink-soft);line-height:1.7;max-width:70ch;}
  .ls-text p{margin:0 0 16px;}
  .ls-text p:last-child{margin-bottom:0;}

  .ls-schritte{list-style:none;margin:28px 0 0;padding:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
  .ls-schritte li{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px;}
  .ls-abschnitt.hell .ls-schritte li{background:var(--paper);}
  .ls-schritte .nr{font-family:var(--display);font-weight:800;font-size:13px;color:var(--teal-dark);
    letter-spacing:.06em;}
  .ls-schritte strong{display:block;font-family:var(--display);font-size:17px;font-weight:700;margin:8px 0 6px;}
  .ls-schritte span{font-size:14px;color:var(--ink-soft);line-height:1.55;}

  .ls-liste{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .ls-liste li{font-size:15.5px;padding-left:32px;position:relative;line-height:1.55;}
  .ls-liste li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;
    border-radius:50%;background:rgba(124,187,55,0.18);}
  .ls-liste li::after{content:"";position:absolute;left:6.5px;top:8px;width:7px;height:4px;
    border-left:2px solid var(--teal-dark);border-bottom:2px solid var(--teal-dark);
    transform:rotate(-45deg);}

  .ls-preis{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px;}
  .ls-preis-karte{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;}
  .ls-abschnitt.hell .ls-preis-karte{background:var(--paper);}
  .ls-preis-karte .was{font-size:14px;color:var(--ink-soft);}
  .ls-preis-karte .wert{font-family:var(--display);font-weight:800;font-size:26px;margin:6px 0 8px;}
  .ls-preis-karte .hinweis{font-size:13px;color:var(--ink-soft);line-height:1.5;}
  .ls-preis-fuss{margin-top:18px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:70ch;}

  .ls-faq{margin-top:26px;}
  .ls-cta{background:var(--slate-dark);color:var(--white);border-radius:22px;
    padding:44px 40px;margin:0 auto;max-width:1200px;text-align:center;}
  .ls-cta h2{font-family:var(--display);font-weight:900;font-size:clamp(24px,3vw,36px);
    margin:0 0 12px;color:var(--white);}
  .ls-cta p{color:#AEBAC5;font-size:16px;line-height:1.6;margin:0 auto 26px;max-width:52ch;}
  .ls-cta-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  .ls-cta .btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.35);}
  .ls-cta .btn-ghost:hover{background:rgba(255,255,255,0.1);}

  .ls-quer{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;}
  .ls-quer a{font-size:14px;padding:10px 16px;border-radius:100px;background:var(--panel);
    color:var(--ink);text-decoration:none;font-weight:500;transition:background .15s ease;}
  .ls-quer a:hover{background:rgba(24,33,41,0.1);}

  @media (max-width:640px){
    .ls-hero{padding:36px 0 28px;}
    .ls-abschnitt{padding:40px 0;}
    .ls-cta{padding:32px 22px;border-radius:18px;margin:0 20px;}
    .ls-hero-ctas .btn{width:100%;}
  }

  /* ---------- Leistungsbereich auf einen Blick ----------
     Auf breiten Bildschirmen kompakter, damit alle acht Felder
     nach dem Sprung auf "Leistungen" gleichzeitig sichtbar sind. */
  @media (min-width:961px){
    #leistungen{padding:64px 0 72px;}
    #leistungen .section-head{margin-bottom:30px;gap:8px;}
    .service-photo{height:88px;}
    .service-body{padding:22px 18px 16px;}
    .service-card h3{font-size:15.5px;}
    .service-card p{font-size:12.5px;margin-top:4px;}
    .service-bento{gap:16px;}
    .service-icon{width:32px;height:32px;bottom:-16px;left:12px;}
    .service-icon svg{width:16px;height:16px;}
  }
  /* Bei flachen Fenstern (z. B. Laptop) noch eine Stufe kompakter */
  @media (min-width:961px) and (max-height:820px){
    #leistungen{padding:48px 0 56px;}
    #leistungen .section-head{margin-bottom:22px;}
    .service-photo{height:74px;}
    .service-body{padding:18px 16px 14px;}
    .service-card p{display:none;}
  }

  /* ---------- Bewertungen an den Warum-Bereich anschliessen ----------
     Die Google-Bewertungen sollen optisch zum Abschnitt "Warum SAXSEN"
     gehoeren, nicht als eigener Block wirken. */
  .warum-anschluss{padding-bottom:24px;}
  .bewertung-anschluss{padding-top:0;}
  @media (max-width:640px){
    .warum-anschluss{padding-bottom:18px;}
  }

  /* ---------- Sprung auf "Warum wir" ----------
     Der globale Sprungabstand (96px) und der Innenabstand des Abschnitts
     (96px) ergaben zusammen fast 200px Leerraum ueber der Ueberschrift.
     Negativer scroll-margin zieht das Sprungziel wieder nach oben. */
  #warum{padding-top:32px;scroll-margin-top:-58px;}
  @media (max-width:640px){
    #warum{padding-top:24px;scroll-margin-top:-36px;}
  }

  /* ================= Kontaktseite ================= */
  .page-head{text-align:center;max-width:640px;margin:0 auto 48px;}
  .page-head h1{font-size:21px;font-weight:600;margin-top:10px;line-height:1.35;}
  .page-head p{margin-top:14px;color:var(--ink-soft);font-size:15px;}
  body.seite-kontakt section{padding:72px 0 96px;}
  body.seite-kontakt .form-row textarea{min-height:110px;}

  /* ================= Impressum & Datenschutz (body.seite-recht) ================= */
  body.seite-recht .back{font-size:14px;text-decoration:none;color:var(--ink-soft);}
  body.seite-recht .logo span{color:var(--teal);}
  body.seite-recht main{padding:64px 0 100px;}
  body.seite-recht h1{font-size:clamp(30px,4vw,40px);margin-bottom:44px;}
  body.seite-recht h2{font-size:19px;margin:34px 0 10px;}
  body.seite-recht h1,body.seite-recht h2{font-family:var(--display);font-weight:700;}
  body.seite-recht strong{color:var(--ink);}
  body.seite-recht ul{color:var(--ink-soft);padding-left:20px;margin:0 0 12px;}
  body.seite-recht li{margin-bottom:6px;}
  body.seite-recht footer a{text-decoration:none;color:#8B98A3;}
  body.seite-recht .cookie-actions .btn-ghost{border-color:var(--line);color:var(--ink);background:var(--white);}
  body.seite-recht .cookie-actions .btn-primary{background:var(--teal);color:var(--ink);}

  /* ============ Kontaktseite auf Tablet und Handy ============
     Die Regel  body.seite-kontakt section  weiter oben ist
     spezifischer als die allgemeinen Handy-Regeln und hat deren
     Abstände überschrieben. Deshalb hier ausdrücklich nachgezogen. */

  @media (max-width:960px){
    /* Info und Formular untereinander. Die gleichlautende Regel weiter
       oben im Stylesheet wird von der spaeteren zweispaltigen Regel
       ueberschrieben - deshalb hier am Ende erneut. */
    .msg-grid{grid-template-columns:1fr;gap:20px;}
    body.seite-kontakt section{padding:56px 0 64px;}
    .page-head{margin-bottom:32px;}
    .msg-side{padding:26px;}
  }

  @media (max-width:640px){
    .msg-grid{gap:14px;}
    body.seite-kontakt section{padding:36px 0 44px;}
    .page-head{margin-bottom:24px;padding:0 4px;}
    .page-head h1{font-size:18.5px;margin-top:8px;line-height:1.3;}
    .page-head p{margin-top:11px;font-size:14px;line-height:1.55;}
    .msg-side{padding:20px;border-radius:14px;}
    .msg-info{margin-top:10px;}
    .msg-badges{margin-top:16px;gap:6px;}
    .msg-person{margin-top:24px;padding-top:18px;gap:11px;}
    .msg-avatar{width:40px;height:40px;font-size:14px;}
    body.seite-kontakt .form-row textarea{min-height:92px;}
  }

  @media (max-width:400px){
    body.seite-kontakt section{padding:28px 0 36px;}
    .page-head h1{font-size:17.5px;}
    .msg-side, .msg-form{padding:16px;}
  }

  /* ============ Kontaktformular auf dem Handy ============
     Diese Regeln stehen absichtlich am Ende der Datei.
     Die zugehoerigen Rechner-Regeln (.msg-row-2 zweispaltig,
     .msg-form mit 32px Innenabstand) stehen weiter oben NACH
     den bisherigen Handy-Regeln und haben diese ueberschrieben.
     Bei gleicher Gewichtung gewinnt in CSS die spaetere Regel. */

  @media (max-width:640px){
    /* Name/Firma und E-Mail/Telefon untereinander statt nebeneinander */
    .msg-row-2{grid-template-columns:1fr;gap:0;}

    /* Formularkasten kompakter */
    .msg-form{padding:20px;border-radius:14px;}
    .msg-form h3{font-size:17px;margin-bottom:14px;}

    /* Felder groesser zum Antippen, 16px verhindert das Hineinzoomen auf iPhone */
    .form-row{margin-bottom:12px;}
    .form-row label{font-size:12.5px;margin-bottom:5px;}
    .form-row input, .form-row textarea{padding:12px;font-size:16px;border-radius:9px;}
    .msg-form .btn{width:100%;padding:14px 18px;font-size:15px;}
    .form-legal{font-size:11.5px;line-height:1.45;margin-top:12px;}
  }

  @media (max-width:400px){
    .msg-form{padding:16px;}
    .msg-form h3{font-size:16px;}
  }

  /* ============ WhatsApp- und Anruf-Knopf auf dem Handy ============
     Vorher: beide 64px hoch (14px + 36px + 14px), Anruf bei 80px,
     WhatsApp bei 140px -> Ueberlappung von 4px.
     Jetzt: beide 52px hoch (11px + 30px + 11px), Anruf bei 74px,
     WhatsApp bei 140px -> 14px Abstand dazwischen. */

  @media (max-width:520px){
    .wa-fab, .call-fab{padding:11px;right:14px;}
    .wa-fab-icon, .call-fab-icon{width:30px;height:30px;}
    .wa-fab-icon svg, .call-fab-icon svg{width:17px;height:17px;}
    .call-fab{bottom:74px;}
    .wa-fab{bottom:140px;}
  }