@font-face{font-family:"Montserrat";font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:800;font-display:swap;src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:700;font-display:swap;src:url(fonts/playfair-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:900;font-display:swap;src:url(fonts/playfair-display-latin-900-normal.woff2) format("woff2")}

:root{--gruen:#046a38;--hell:#1d9a57;--akzent:#5fd08f;--dunkel:#0b2a1a;--creme:#f4efe6;--text:#12251a;--grau:#3d5a48;--rand:#6b7d72}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--text);background:var(--creme);line-height:1.5}
img{max-width:100%;height:auto;display:block}
a{color:var(--gruen)}a:hover{color:#023d20}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;line-height:1.15}
section{scroll-margin-top:76px}
.innen{max-width:1180px;margin:0 auto}
.abschnitt{padding:80px 24px}
.titel{margin:0 0 44px;font-size:clamp(32px,5vw,44px);text-align:center;color:var(--dunkel)}
.hell{background:#fff}
.dunkel{background:var(--dunkel);color:#fff}
.tapete{background-color:var(--creme);background-image:url(props.svg);background-size:420px 420px;background-attachment:fixed}
.tapete-gruen{background-color:var(--gruen);background-image:url(props.svg);background-size:360px 360px;background-blend-mode:screen;color:#fff}
@media (max-width:800px){.tapete{background-attachment:scroll}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(11,42,26,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 24px}
.marke{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.marke img{width:44px;height:44px}
.marke span{font-family:"Playfair Display",serif;font-weight:900;font-size:22px;letter-spacing:1px;white-space:nowrap}
.kopf nav{display:flex;align-items:center;gap:22px;font-weight:600;font-size:15px;white-space:nowrap}
.kopf nav a{color:#fff;text-decoration:none;padding:12px 0;position:relative;transition:color .25s}
.kopf nav a:not(.knopf)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--akzent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.kopf nav a:not(.knopf):hover::after,.kopf nav a.aktiv::after{transform:scaleX(1)}
.kopf nav a.aktiv{color:var(--akzent)}
.kopf nav a.knopf{color:var(--dunkel);background:#fff;padding:12px 20px}
.kopf nav a.knopf:hover{color:var(--dunkel)}
@media (max-width:860px){.kopf nav a:not(.knopf){display:none}.kopf .innen{padding:8px 16px}.marke img{width:38px;height:38px}.marke span{font-size:18px}.kopf nav a.knopf{padding:10px 16px;font-size:14px}}

/* Knöpfe & Karten */
.knopf{display:inline-block;border-radius:999px;font-weight:800;text-decoration:none;transition:transform .2s,box-shadow .2s,background-color .2s;cursor:pointer;border:none;font-family:inherit}
.knopf:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(4,106,56,.3)}
.knopf-gruen{background:var(--gruen);color:#fff;padding:16px 28px;font-size:17px}
.knopf-gruen:hover{color:#fff}
.knopf-weiss{background:#fff;color:var(--dunkel);padding:16px 28px;font-size:17px;border:2px solid var(--dunkel)}
.knopf-dunkel{background:var(--dunkel);color:#fff;padding:15px;text-align:center}
.knopf-dunkel:hover{color:#fff}
.karte{background:#fff;color:var(--text);border-radius:18px;transition:transform .3s,box-shadow .3s}
.karte:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.18)}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:28px;max-width:900px;margin:0 auto}

/* Start */
.start{padding:72px 24px 88px}
.start .innen{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.start-text{flex:1 1 440px;min-width:0;animation:ein .8s ease both}
.start-text .zeile{margin:0 0 14px;font-weight:800;letter-spacing:3px;font-size:14px;color:var(--gruen)}
.start h1{margin:0 0 22px;font-weight:900;font-size:clamp(40px,7vw,60px);line-height:1.05;color:var(--dunkel)}
.start-text p.lead{margin:0 0 32px;font-size:19px;line-height:1.6;max-width:540px}
.knoepfe{display:flex;flex-wrap:wrap;gap:14px}
.start-logo{flex:1 1 320px;display:flex;justify-content:center}
.start-logo img{width:100%;max-width:460px;animation:schweben 6s ease-in-out infinite}

/* Aufbau */
.aufbau .innen{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.aufbau figure{flex:2 1 520px;min-width:0;margin:0}
.aufbau figure img{border-radius:18px;box-shadow:0 18px 40px rgba(11,42,26,.25);width:100%}
.aufbau div.text{flex:1 1 300px;min-width:0}
.aufbau h2{margin:0 0 16px;font-size:40px;color:var(--dunkel)}
.aufbau p{margin:0 0 14px;font-size:18px;line-height:1.7}

/* Pakete */
.paket{padding:36px;display:flex;flex-direction:column;gap:18px}
.paket h3{margin:0;font-size:32px}
.paket .preis{margin:0;font-size:15px;font-weight:600;color:var(--grau)}
.paket .preis strong{font-size:44px;font-weight:800;color:var(--gruen)}
.preis-hinweis{margin:-12px 0 0;font-size:13px;color:var(--grau)}
.extra .marke-preis small{display:block;font-size:12px;font-weight:600;color:var(--grau);text-align:right}
.paket ul{margin:0;padding-left:20px;font-size:17px;line-height:1.9;flex-grow:1}
.paket.top{outline:5px solid var(--hell)}
.paket .kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:12px}
.abzeichen{background:var(--hell);color:#fff;font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px}
.untertitel{margin:-30px 0 44px;text-align:center;font-size:18px;color:#cfe3d6}

/* Extras */
.extra{padding:32px;border:2px solid var(--dunkel)}
.extra .kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.extra h3{margin:0;font-size:26px}
.extra .marke-preis{font-size:15px;font-weight:800;color:var(--gruen);white-space:nowrap}
.extra p{margin:0;font-size:16px;line-height:1.7}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.schritt{text-align:center;padding:12px}
.schritt b{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--gruen);color:#fff;font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center}
.schritt h3{margin:0 0 8px;font-size:20px;font-family:Montserrat,sans-serif}
.schritt p{margin:0;line-height:1.6}

/* Gebiet */
.gebiet .innen{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.gebiet .text{flex:1 1 380px;min-width:0}
.gebiet h2{margin:0 0 16px;font-size:clamp(32px,5vw,44px)}
.gebiet p{margin:0;font-size:18px;line-height:1.7}
.orte{flex:1 1 380px;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.orte li{background:var(--dunkel);padding:10px 16px;border-radius:999px;font-weight:600;transition:background-color .2s,transform .2s}
.orte li:hover{background:var(--hell);transform:scale(1.05)}

/* Formulare */
.feld{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.feld input,.feld select,.feld textarea{font:inherit;font-weight:400;font-size:16px;padding:13px;border:1.5px solid var(--rand);border-radius:10px;background:#fff;color:var(--text)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:3px solid var(--akzent);outline-offset:1px;border-color:var(--gruen)}
.fk{max-width:760px;margin:0 auto;text-align:center}
.fk h2{margin:0 0 10px;font-size:40px;color:var(--dunkel)}
.fk form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-end;margin-top:24px}
.fk .feld{text-align:left}
.fk input{width:160px}
.fk .knopf-gruen{padding:15px 28px;font-size:16px}
.ergebnis{margin:22px 0 0;font-size:18px;font-weight:600;min-height:28px;color:var(--dunkel)}
.fk small{display:block;margin-top:8px;color:var(--grau)}
.anfrage{max-width:760px;margin:0 auto;padding:40px;border:2px solid var(--dunkel)}
.anfrage:hover{transform:none;box-shadow:none}
.anfrage h2{margin:0 0 8px;font-size:40px;color:var(--dunkel)}
.anfrage form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px;margin-top:28px}
.ganz{grid-column:1/-1}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hinweis{font-size:14px;color:var(--grau);margin:0}
.meldung{margin:0;padding:14px 16px;border-radius:10px;font-weight:600}
.meldung.ok{background:#e3f4ea;color:#05532c}
.meldung.fehler{background:#fbe4e2;color:#8a1c12}
.meldung:empty{display:none}

/* Fuß */
.fuss{background:var(--dunkel);color:#cfe3d6;padding:40px 24px;font-size:15px}
.fuss .innen{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.fuss p{margin:0 0 6px}
.fuss strong{color:#fff}
.fuss a{color:#fff;padding:12px 0;display:inline-block}
.fuss nav{display:flex;gap:22px}

/* Rechtstexte */
.recht{max-width:820px;margin:0 auto;padding:56px 24px 80px}
.recht h1{font-size:44px;color:var(--dunkel);margin:0 0 28px}
.recht h2{font-size:24px;margin:36px 0 10px;color:var(--dunkel)}
.recht p,.recht li{line-height:1.7}

/* Bewegung */
@keyframes ein{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@supports (animation-timeline:view()){.rein{animation:ein linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== Startseite v3: transparenter Kopf, bildschirmfüllender Hero ===== */
.kopf{transition:background-color .35s ease,box-shadow .35s ease,-webkit-backdrop-filter .35s,backdrop-filter .35s}
.kopf-transparent{position:fixed;left:0;right:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.kopf-transparent .innen{padding-top:18px;padding-bottom:18px;transition:padding .35s ease}
.kopf-transparent.gescrollt{background:rgba(11,42,26,.86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 8px 30px rgba(0,0,0,.18)}
.kopf-transparent.gescrollt .innen{padding-top:10px;padding-bottom:10px}
.kopf-transparent:not(.gescrollt) nav a.knopf{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.kopf-transparent:not(.gescrollt) nav a.knopf:hover{background:#fff;color:var(--dunkel)}

.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:#fff;
  background:radial-gradient(1200px 700px at 78% 45%,#0f5a33 0%,rgba(15,90,51,0) 60%),radial-gradient(900px 600px at 10% 100%,#0d4a2b 0%,rgba(13,74,43,0) 60%),#0a2417;
  padding:120px 24px 96px}
.hero-muster{position:absolute;inset:-60px;background-image:url(props-hell.svg);background-size:380px 380px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(0,0,0,.35) 0%,#000 75%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(0,0,0,.35) 0%,#000 75%);
  animation:muster 60s linear infinite}
@keyframes muster{to{background-position:380px 380px}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;background:#fff;clip-path:ellipse(75% 100% at 50% 100%)}
.hero-innen{position:relative;z-index:1;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero .start-text{flex:1 1 480px;min-width:0;animation:ein .8s ease both}
.hero .zeile{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-weight:600;font-size:14px;letter-spacing:.5px;color:#d6efe0}
.hero .punkt{width:8px;height:8px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 4px rgba(95,208,143,.25);animation:puls 2s ease-in-out infinite}
@keyframes puls{50%{box-shadow:0 0 0 8px rgba(95,208,143,0)}}
.hero h1{margin:0 0 24px;font-weight:900;font-size:clamp(44px,7.4vw,92px);line-height:1;letter-spacing:-1px;color:#fff}
.hero h1 em{font-style:normal;color:var(--akzent)}
.hero .lead{margin:0 0 36px;font-size:clamp(17px,1.6vw,20px);line-height:1.65;max-width:560px;color:#cfe3d6}
.knopf-hell{background:#fff;color:var(--dunkel);padding:17px 30px;font-size:17px}
.knopf-hell:hover{color:var(--dunkel);box-shadow:0 12px 30px rgba(95,208,143,.35)}
.knopf-rand{background:transparent;color:#fff;padding:17px 30px;font-size:17px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.knopf-rand:hover{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 2px #fff}
.vorteile{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px;font-weight:600;color:#d6efe0}
.vorteile li{display:flex;align-items:center;gap:8px}
.vorteile li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2417' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;flex:none}
.hero .start-logo{position:relative;flex:1 1 360px;display:flex;justify-content:center}
.hero .start-logo img{position:relative;width:100%;max-width:500px;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.logo-schein{position:absolute;inset:8% 12%;border-radius:50%;background:radial-gradient(circle,rgba(95,208,143,.45) 0%,rgba(95,208,143,0) 65%);filter:blur(20px);animation:schein 6s ease-in-out infinite}
@keyframes schein{50%{transform:scale(1.08);opacity:.75}}
.runter{position:absolute;z-index:2;left:50%;bottom:100px;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);animation:hupf 2.2s ease-in-out infinite}
.runter:hover{color:#fff;background:rgba(255,255,255,.1)}
@keyframes hupf{50%{transform:translate(-50%,8px)}}
@media (max-width:860px){
  .hero{padding:100px 20px 110px;min-height:auto}
  .hero-innen{gap:36px}
  .hero .start-logo{order:-1;flex-basis:100%}
  .hero .start-logo img{max-width:240px}
  .hero::after{height:50px}
  .runter{display:none}
  .kopf-transparent .innen{padding-top:12px;padding-bottom:12px}
}
@media (max-height:760px) and (min-width:861px){.runter{display:none}}

/* v4: Scroll-Pfeil im Fluss statt absolut – überlappt nie mehr */
.hero{flex-direction:column;justify-content:center}
.runter{position:relative;left:auto;bottom:auto;transform:none;margin:44px auto 0;flex:none;animation:hupf4 2.2s ease-in-out infinite}
@keyframes hupf4{50%{transform:translateY(8px)}}
@media (max-height:760px) and (min-width:861px){.runter{display:flex}}
.hero{padding-bottom:120px}@media (max-width:860px){.hero{padding-bottom:80px}}

/* v5: Handy-Hero kompakter – Knopf ohne Scrollen sichtbar */
@media (max-width:860px){
  .hero{padding-top:84px;justify-content:flex-start}
  .hero-innen{gap:20px}
  .hero .start-logo img{max-width:150px}
  .logo-schein{inset:0}
  .hero .zeile{margin-bottom:14px;font-size:13px;padding:6px 12px}
  .hero h1{font-size:clamp(38px,11vw,52px);margin-bottom:16px}
  .hero .lead{font-size:16px;line-height:1.55;margin-bottom:24px}
  .knoepfe .knopf{padding:15px 24px;font-size:16px}
  .vorteile{margin-top:24px;gap:8px 18px;font-size:14px}
}
.extra .kopfzeile{flex-wrap:wrap}
.extra h3{min-width:0;overflow-wrap:anywhere}
@media (max-width:860px) and (max-height:700px){.hero .start-logo img{max-width:110px}.hero .lead{font-size:15px}}

/* v6: Handy – ganzer Startbereich auf einen Blick, kein doppeltes "anfragen" */
@media (max-width:860px){
  .kopf-transparent:not(.gescrollt) nav a.knopf{opacity:0;visibility:hidden;pointer-events:none}
  .kopf-transparent nav a.knopf{transition:opacity .3s ease,visibility .3s}
  .hero{padding:72px 20px 64px}
  .hero-innen{gap:14px}
  .hero .start-logo img{max-width:118px}
  .hero .zeile{margin-bottom:12px}
  .hero h1{font-size:clamp(36px,10.5vw,48px);margin-bottom:12px;letter-spacing:-.5px}
  .lead-mehr{display:none}
  .hero .lead{margin-bottom:20px}
  .knoepfe{flex-wrap:nowrap;gap:10px}
  .knoepfe .knopf{flex:1 1 0;text-align:center;padding:14px 10px;font-size:15px;white-space:nowrap}
  .vorteile{margin-top:18px;gap:6px 14px;font-size:13px}
  .vorteile li::before{width:16px;height:16px;background-size:10px}
  .hero::after{height:36px}
}
@media (max-width:860px) and (max-height:700px){.hero .start-logo img{max-width:96px}.hero{padding-top:66px}}
@media (max-width:340px){.knoepfe{flex-wrap:wrap}}


/* v7: moderne Scrollleiste */
html{scrollbar-width:thin;scrollbar-color:var(--hell) var(--dunkel)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--dunkel)}
::-webkit-scrollbar-thumb{background:var(--hell);border-radius:999px;border:2px solid var(--dunkel)}
::-webkit-scrollbar-thumb:hover{background:var(--akzent)}
::selection{background:var(--akzent);color:var(--dunkel)}

/* v11: FAQ */
.faq{max-width:820px;margin:0 auto}
.frage{border-bottom:1px solid #dfe7e2}
.frage summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-weight:600;font-size:18px;color:var(--dunkel)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-9px;border-right:2.5px solid var(--gruen);border-bottom:2.5px solid var(--gruen);transform:rotate(45deg);transition:transform .25s ease,margin .25s ease}
.frage[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.frage summary:hover{color:var(--gruen)}
.frage summary:focus-visible{outline:3px solid var(--akzent);outline-offset:4px;border-radius:6px}
.frage p{margin:0 0 22px;line-height:1.7;color:var(--text)}

/* v11: Scroll-Pfeil immer sichtbar – auf flachen Bildschirmen etwas kompakter */
@media (min-width:861px) and (max-height:900px){
  .hero{padding-top:100px;padding-bottom:84px}
  .hero h1{font-size:clamp(44px,6vw,76px);margin-bottom:18px}
  .hero .zeile{margin-bottom:16px}
  .hero .lead{margin-bottom:26px}
  .vorteile{margin-top:24px}
  .hero .start-logo img{max-width:420px}
  .runter{margin-top:28px}
}
@media (min-width:861px) and (max-height:740px){
  .hero h1{font-size:clamp(40px,5.2vw,62px)}
  .hero .lead{font-size:16px}
  .hero .start-logo img{max-width:340px}
  .runter{margin-top:20px}
}

/* v13: FAQ als Karten mit Plus/Minus */
#faq{background:var(--creme)}
.faq .titel{margin-bottom:12px}
.faq-unter{margin:0 0 36px;text-align:center;color:var(--grau);font-size:17px}
.frage{background:#fff;border:none;border-radius:16px;margin:0 0 12px;box-shadow:0 1px 2px rgba(11,42,26,.06),0 6px 20px rgba(11,42,26,.06);transition:box-shadow .25s ease,transform .25s ease}
.frage:hover{box-shadow:0 2px 4px rgba(11,42,26,.08),0 12px 30px rgba(11,42,26,.1)}
.frage summary{padding:22px 72px 22px 26px;font-size:17px}
.frage summary::after{content:"+";border:none;transform:none;width:36px;height:36px;margin-top:-18px;right:20px;border-radius:50%;background:#e8f5ee;color:var(--gruen);font-size:24px;font-weight:600;line-height:36px;text-align:center;transition:background-color .25s ease,color .25s ease,transform .3s ease}
.frage[open] summary::after{content:"+";transform:rotate(45deg);margin-top:-18px;background:var(--gruen);color:#fff}
.frage[open]{box-shadow:0 2px 4px rgba(11,42,26,.08),0 16px 40px rgba(11,42,26,.12)}
.frage p{padding:0 26px 24px;margin:0;color:#2c4337;animation:faqein .3s ease}
@keyframes faqein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:600px){.frage summary{padding:18px 64px 18px 20px;font-size:16px}.frage p{padding:0 20px 20px}.frage summary::after{right:14px}}

/* v15: Animationen nur über transform/opacity (flüssiger, kein Neuzeichnen) */
.hero-muster{inset:-380px 0 0 -380px;animation:muster2 60s linear infinite;will-change:transform}
@keyframes muster2{to{transform:translate3d(380px,380px,0)}}
.hero .punkt{position:relative;box-shadow:none;animation:none}
.hero .punkt::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:rgba(95,208,143,.35);animation:puls2 2s ease-out infinite}
@keyframes puls2{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}
.logo-schein{will-change:transform,opacity}
.hero-muster{inset:0;overflow:hidden;background-image:none;animation:none;will-change:auto}
.hero-muster::before{content:"";position:absolute;top:-380px;left:-380px;right:0;bottom:0;background-image:url(props-hell.svg);background-size:380px 380px;animation:muster2 60s linear infinite;will-change:transform}

/* v16: Handy – Startbereich füllt den ganzen Bildschirm */
@media (max-width:860px){
  .hero{min-height:100vh;min-height:100svh;justify-content:center}
}
@media (max-width:860px){.hero{min-height:calc(100vh + 36px);min-height:calc(100svh + 36px);padding-bottom:100px}}
@media (max-width:860px){.runter{display:flex;margin:22px auto 0;width:42px;height:42px}}@media (max-width:860px) and (max-height:620px){.runter{display:none}}
@media (max-width:860px){.hero .start-logo img{max-width:min(230px,26vh,62vw);max-width:min(230px,26svh,62vw)}.runter{width:48px;height:48px}}@media (max-width:860px) and (max-height:700px){.hero .start-logo img{max-width:min(170px,24svh)}}
.hero .start-logo picture{display:flex;justify-content:center;width:100%}
@media (max-width:860px){.hero .start-logo img{max-width:clamp(96px,calc(87vh - 445px),min(230px,62vw));max-width:clamp(96px,calc(87svh - 445px),min(230px,62vw))}}

/* v18: Desktop – Grün bis zur Unterkante, Bogen erst unterhalb */
@media (min-width:861px){
  .hero{min-height:calc(100vh + 90px);min-height:calc(100svh + 90px);padding-bottom:calc(96px + 90px)}
}
@media (min-width:861px) and (max-height:900px){.hero{padding-bottom:calc(84px + 90px)}}

/* v19: Scroll-Pfeil fest am unteren Bildrand, Platz dafür wird freigehalten */
.runter{position:absolute;left:50%;margin:0;transform:translateX(-50%);animation:hupf19 2.2s ease-in-out infinite}
@keyframes hupf19{50%{transform:translate(-50%,8px)}}
@media (min-width:861px){
  .runter{bottom:calc(90px + 28px)}
  .hero{padding-bottom:calc(90px + 28px + 46px + 28px)}
}
@media (max-width:860px){
  .runter{bottom:calc(36px + 20px)}
  .hero{padding-bottom:calc(36px + 20px + 48px + 18px)}
}
@media (max-width:860px) and (max-height:620px){.hero{padding-bottom:56px}}

/* v19: SEO – h1 ist die Kapsel, der Slogan sieht aus wie bisher */
.hero h1.zeile{font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.5px;color:#d6efe0;margin:0 0 22px}
.hero .hero-titel{font-family:"Playfair Display",Georgia,serif;margin:0 0 24px;font-weight:900;font-size:clamp(44px,7.4vw,92px);line-height:1;letter-spacing:-1px;color:#fff}
.hero .hero-titel em{font-style:normal;color:var(--akzent)}
@media (min-width:861px) and (max-height:900px){.hero .hero-titel{font-size:clamp(44px,6vw,76px);margin-bottom:18px}.hero h1.zeile{margin-bottom:16px}}
@media (min-width:861px) and (max-height:740px){.hero .hero-titel{font-size:clamp(40px,5.2vw,62px)}}
@media (max-width:860px){.hero .hero-titel{font-size:clamp(36px,10.5vw,48px);margin-bottom:12px;letter-spacing:-.5px}.hero h1.zeile{font-size:13px;margin-bottom:12px;padding:6px 12px}}
@media (max-width:860px){.hero h1.zeile{font-size:12px;letter-spacing:0;padding:6px 11px;gap:8px;white-space:nowrap;max-width:100%}}

/* v20: Zeichenzähler Nachricht */
.zeichen{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:2px;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;transition:background-color .25s,color .25s}
.zeichen.leer{background:#eef1ef;color:#5b6b62}
.zeichen.rot{background:#fbe4e2;color:#a32116}
.zeichen.gelb{background:#fff3d6;color:#7a5200}
.zeichen.gruen{background:#e3f4ea;color:#05532c}

/* v21: Pakete als Karussell am Handy */
.karussell-punkte{display:none}
@media (max-width:860px){
  #pakete .pakete-raster{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -24px;padding:8px 24px 18px;scroll-padding:0 24px}
  #pakete .pakete-raster::-webkit-scrollbar{display:none}
  #pakete .pakete-raster > .paket{flex:0 0 84%;scroll-snap-align:center;animation:none}
  #pakete .pakete-raster > .paket:hover{transform:none}
  .karussell-punkte{display:flex;justify-content:center;gap:8px;margin-top:6px}
  .karussell-punkte span{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);transition:width .25s ease,background-color .25s ease}
  .karussell-punkte span.an{width:24px;background:var(--akzent)}
}

/* v22: moderne PLZ-Eingabe, automatische Berechnung */
.fk .plz-form{display:block;margin:28px auto 0;max-width:420px}
.plz-feld{position:relative;display:flex;align-items:center;background:#fff;border:2px solid #d5e2da;border-radius:18px;padding:0 16px;box-shadow:0 6px 24px rgba(11,42,26,.08);transition:border-color .2s,box-shadow .2s}
.plz-feld:focus-within{border-color:var(--hell);box-shadow:0 0 0 5px rgba(95,208,143,.25),0 6px 24px rgba(11,42,26,.08)}
.plz-icon{flex:none;color:var(--gruen)}
.fk .plz-feld input{flex:1;min-width:0;width:auto;border:none;outline:none;background:transparent;font:inherit;font-size:22px;font-weight:600;letter-spacing:3px;padding:18px 12px;color:var(--dunkel)}
.fk .plz-feld input::placeholder{font-size:16px;font-weight:400;letter-spacing:0;color:#8a9a91}
.plz-status{flex:none;width:24px;height:24px;border-radius:50%}
.plz-form[data-zustand=laedt] .plz-status{border:3px solid #d5e2da;border-top-color:var(--hell);animation:dreh .8s linear infinite}
.plz-form[data-zustand=ok] .plz-status{background:var(--hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.plz-form[data-zustand=ok] .plz-feld{border-color:var(--hell)}
.plz-form[data-zustand=fehler] .plz-feld{border-color:#e0a39d}
@keyframes dreh{to{transform:rotate(360deg)}}
.fk .ergebnis{max-width:420px;margin:16px auto 0;font-size:16px;font-weight:500;color:var(--grau);min-height:24px}
.fk-karte{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:#e8f5ee;border-radius:16px;padding:16px 20px;animation:faqein .3s ease}
.fk-ort{display:flex;flex-direction:column;gap:2px;min-width:0}
.fk-ort strong{font-size:17px;color:var(--dunkel)}
.fk-ort span{font-size:13px;color:var(--grau)}
.fk-preis{flex:none;font-size:26px;font-weight:800;color:var(--gruen)}

/* v23: PLZ in fünf Einzelfeldern, Löschen-X, Standort-Knopf */
.fk .plz-form{max-width:440px}
.plz-zeile{position:relative;display:flex;justify-content:center;align-items:center;gap:10px}
.ziffern{display:flex;gap:10px}
.fk .ziffer{width:56px;height:68px;padding:0;text-align:center;font:inherit;font-size:30px;font-weight:700;color:var(--dunkel);background:#fff;border:2px solid #d5e2da;border-radius:14px;box-shadow:0 4px 16px rgba(11,42,26,.07);caret-color:var(--hell);transition:border-color .2s,box-shadow .2s,transform .15s}
.fk .ziffer:focus{outline:none;border-color:var(--hell);box-shadow:0 0 0 5px rgba(95,208,143,.25);transform:translateY(-2px)}
.fk .ziffer.voll{border-color:#9fd2b4}
.plz-form[data-zustand=ok] .ziffer{border-color:var(--hell);background:#f3faf6}
.plz-form[data-zustand=fehler] .ziffer{border-color:#e0a39d}
.plz-form[data-zustand=laedt] .ziffer{animation:ziffernpuls 1s ease-in-out infinite}
@keyframes ziffernpuls{50%{border-color:var(--hell)}}
.plz-x{position:absolute;right:-6px;top:50%;transform:translate(100%,-50%);width:40px;height:40px;border-radius:50%;border:none;background:#eef1ef;color:#3d5a48;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s,color .2s}
.plz-x:hover{background:#fbe4e2;color:#a32116}
.plz-x[hidden]{display:none}
.plz-gps{display:inline-flex;align-items:center;gap:8px;margin:16px auto 0;padding:10px 16px;border:none;border-radius:999px;background:transparent;color:var(--gruen);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .2s}
.plz-gps:hover{background:#e8f5ee}
.plz-gps:disabled{opacity:.7;cursor:wait}
.plz-gps.sucht svg{animation:dreh 1.2s linear infinite}
.plz-gps[hidden]{display:none}
@media (max-width:600px){
  .ziffern{gap:7px}
  .fk .ziffer{width:46px;height:58px;font-size:26px;border-radius:12px}
  .plz-x{position:static;transform:none;flex:none}
  .plz-zeile{gap:8px}
}
@media (max-width:360px){.fk .ziffer{width:42px;height:54px}}

/* v23: Fahrtkosten und Anfrage enger zusammen (beide weiß) */
#fahrtkosten{padding-bottom:24px}
#anfrage{padding-top:32px}
@media (max-width:860px){#fahrtkosten{padding-bottom:16px}#anfrage{padding-top:24px}}