/*
 * Startseite nach Design „JO-Style Startseite – Neuaufbau" (Canvas, Okt. 2026).
 * Desktop-Werte aus Main.dc.html (1440), Mobil-Werte aus Mobile.dc.html (390).
 * Alles unter .hv mit hv-Praefix, weil das Layout .btn/.nav/.h2 selbst belegt.
 * Ausgeliefert als public_html/css/home-v2-<hash>.css (CDN cacht ein Jahr).
 *
 * Das Layout setzt global box-sizing:border-box; das Design rechnet mit
 * content-box. Deshalb max-width = Designbreite + 2 x Seitenabstand.
 */

/* ---------- Grundlagen ---------- */
.hv{font-family:'Source Sans 3',system-ui,sans-serif;color:#4a4440;background:#f0edea;font-size:15.5px;line-height:1.7}
.hv section{padding:0}
.hv a{color:#6b5b50}
.hv a:hover{color:#564940}
.hv :focus-visible{outline:2px solid #6b5b50;outline-offset:3px}
.hv img{display:block;max-width:100%}
.hv blockquote{border:0;padding:0;font-size:inherit;font-style:normal;color:inherit}
.hv figure{margin:0}
.hv figcaption{margin:0;text-align:inherit;font-style:normal}
.hv .hv-m{display:none}
.hv [id]{scroll-margin-top:var(--nav-height,76px)}

.hv-wrap{max-width:1320px;margin:0 auto;padding-left:40px;padding-right:40px}
.hv-wrap--1000{max-width:1080px}
.hv-wrap--1100{max-width:1180px}
.hv-wrap--900{max-width:980px}

.hv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 34px;border-radius:999px;background:#6b5b50;font:700 11px/1 'Source Sans 3',sans-serif;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer}
.hv .hv-btn,.hv .hv-btn:hover{color:#fff}
.hv-btn:hover{background:#564940}
.hv-kick{margin:0 0 12px;font:italic 400 20.5px/1.3 'Playfair Display',Georgia,serif;color:#6b5b50}
.hv-h2{margin:0;font:800 30.5px/1.15 'Source Sans 3',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#2a2522}
.hv-rule{display:block;width:100%;max-width:440px;height:1px;background:#b8a080;margin:22px 0 0}
.hv-c{text-align:center}
.hv-c .hv-rule{margin-left:auto;margin-right:auto}
.hv .hv-more{font:700 11px/1 'Source Sans 3',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6b5b50;text-decoration:none;border-bottom:1px solid #6b5b50;padding-bottom:5px}
.hv-tile{text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;text-align:center}
.hv-list{list-style:disc;margin:32px 0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.hv-split__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:100px;align-items:center}

/* ---------- 1 Hero ---------- */
.hv-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:60px;align-items:center;padding-top:calc(var(--nav-height,76px) + 50px);padding-bottom:150px}
.hv-hero__h1{margin:0 0 34px;color:#2a2522}
.hv-hero__h1-main{display:block;font:800 clamp(49.5px,6.14vw,88.5px)/.92 'Source Sans 3',sans-serif;letter-spacing:-.01em;text-transform:uppercase;hyphens:manual}
.hv-hero__h1-sub{display:block;font:italic 400 34px/1.25 'Playfair Display',Georgia,serif;color:#6b5b50;margin-top:18px}
.hv-hero__intro{margin:0 0 40px;max-width:520px;font-size:17px}
.hv-hero__actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.hv-hero__media{display:flex;justify-content:flex-end}
.hv-hero__media img{width:100%;max-width:520px;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 0 0}

/* ---------- 2 Wann lohnt sich ---------- */
.hv-wann .hv-split__grid{padding-bottom:150px}
.hv-wann__img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:0 999px 0 0}
.hv-wann__close{margin:0;font:800 16px/1.35 'Source Sans 3',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#2a2522}

/* ---------- 3 Angebot / Kosten ---------- */
.hv-kosten .hv-wrap{padding-bottom:150px}
.hv-kosten .hv-head{margin-bottom:64px}
.hv-kosten__box{background:#f7f5f3;padding:80px 70px 70px}
.hv-kosten__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.hv-kosten .hv-tile img{width:260px;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:999px;margin-bottom:40px}
.hv-kosten .hv-tile h3{margin:0 0 18px;font:800 24px/1.1 'Source Sans 3',sans-serif;text-transform:uppercase;color:#2a2522}
.hv-kosten .hv-tile p{margin:0}
.hv-kosten__price{margin-top:70px;padding-top:44px;border-top:1px solid #d4cec8;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.hv-kosten__amount{font:400 54.5px/1 'Playfair Display',Georgia,serif;color:#2a2522}
.hv-kosten__note{margin:10px 0 0}

/* ---------- 4 Ueber mich ---------- */
.hv-ueber{background:#e4dfda}
.hv-ueber .hv-split__grid{padding-top:130px;padding-bottom:130px}
.hv-ueber__p1{margin:32px 0 18px}
.hv-ueber__p2{margin:0 0 36px}
.hv-links{display:flex;gap:34px}
.hv-ueber__img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;border-radius:999px 0 0 0}

/* ---------- 5 Was bringt ---------- */
.hv-bringt .hv-split__grid{padding-top:150px;padding-bottom:150px}
.hv-bringt .hv-list{margin-bottom:40px}
.hv-reels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hv-reel{display:block;position:relative}
.hv-reel + .hv-reel{margin-top:70px}
.hv-reel img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:999px 999px 0 0}
.hv-reel__play{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:52px;height:52px;border-radius:999px;background:#f0edea;display:flex;align-items:center;justify-content:center}
.hv-reel__play svg{width:18px;height:18px}

/* ---------- 6 Ablauf ---------- */
.hv-ablauf{background:#f7f5f3}
.hv-ablauf .hv-wrap{padding-top:130px;padding-bottom:130px}
.hv-ablauf .hv-head{margin-bottom:70px}
.hv-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;text-align:center}
.hv-steps__num{display:block;font:400 54.5px/1 'Playfair Display',Georgia,serif;color:#b8a080;margin-bottom:18px}
.hv-steps h3{margin:0 0 10px;font:800 16px/1.25 'Source Sans 3',sans-serif;text-transform:uppercase;color:#2a2522}
.hv-steps p{margin:0;font-size:14.5px}

/* ---------- 7 Mission ---------- */
.hv-mission .hv-wrap{padding-top:150px;padding-bottom:150px}
.hv-mission__text{margin:34px auto 50px;max-width:800px;font-size:17px}
.hv .hv-mission__quote{margin:0 0 18px;font:italic 400 37.5px/1.3 'Playfair Display',Georgia,serif;color:#2a2522}
.hv-mission__after{margin:0 auto 44px;max-width:640px}

/* ---------- 8 Feedback ---------- */
.hv-feedback{background:#e4dfda}
.hv-feedback .hv-wrap{padding-top:130px;padding-bottom:130px}
.hv .hv-feedback__main{margin:60px 0 0}
.hv-feedback__stars{color:#6b5b50;letter-spacing:.14em;margin-bottom:18px}
.hv .hv-feedback__main blockquote{margin:0 0 24px;font:italic 400 29px/1.4 'Playfair Display',Georgia,serif;color:#2a2522}
.hv .hv-feedback figcaption{font:700 11px/1 'Source Sans 3',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6b5b50}
.hv-feedback__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin-top:80px;text-align:left}
.hv .hv-feedback__grid figure{border-top:1px solid #c9bfb6;padding-top:26px}
.hv .hv-feedback__grid blockquote{margin:0 0 14px;font-size:14.5px;color:#2a2522}
.hv .hv-feedback__grid figcaption{font-size:11px}

/* ---------- 9 Kibbe-Typ ---------- */
.hv-kibbe .hv-wrap{padding-top:150px;padding-bottom:150px}
.hv-kibbe__intro{margin:28px auto 70px;max-width:640px}
.hv-kibbe__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px}
.hv-kibbe .hv-tile img{width:260px;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:999px;margin-bottom:34px}
.hv-kibbe .hv-tile h3{margin:0 0 12px;font:800 22px/1.15 'Source Sans 3',sans-serif;text-transform:uppercase;color:#2a2522}
.hv-kibbe .hv-tile p{margin:0 0 24px;max-width:360px}

/* ---------- 10 Wo ---------- */
.hv-wo{background:#f7f5f3}
.hv-wo .hv-split__grid{padding-top:130px;padding-bottom:130px;align-items:start}
.hv-wo__p1{margin:32px 0 18px}
.hv-wo__p2{margin:0}
.hv-reg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;border-top:1px solid #d4cec8}
.hv .hv-reg a{display:block;padding:14px 0;border-bottom:1px solid #d4cec8;color:#2a2522;text-decoration:none;font-weight:600}
.hv .hv-reg a:hover{color:#6b5b50}

/* ---------- 11 FAQ ---------- */
.hv-faq .hv-wrap{padding-top:150px;padding-bottom:130px}
.hv-faq .hv-head{margin-bottom:56px}
.hv-faq__list{border-top:1px solid #d4cec8}
.hv-faq__item{border-bottom:1px solid #d4cec8}
.hv-faq__item summary{list-style:none;min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;cursor:pointer}
.hv-faq__item summary::-webkit-details-marker{display:none}
.hv-faq__item h3{margin:0;font:400 19.5px/1.35 'Playfair Display',Georgia,serif;color:#2a2522}
.hv-faq__sign{flex:none}
.hv-faq__sign::before{content:"+";font:300 25.5px/1 'Source Sans 3',sans-serif;color:#6b5b50}
.hv-faq__item[open] .hv-faq__sign::before{content:"\2212"}
.hv-faq__item p{margin:0;padding:0 60px 28px 0}
.hv .hv-faq__item p a{text-decoration:underline;text-underline-offset:3px}

/* ---------- 12 Ratgeber ---------- */
.hv-rg .hv-wrap{padding-bottom:150px}
.hv-rg__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:50px;gap:40px}
.hv-rg__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.hv .hv-rg__card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;text-decoration:none;color:inherit}
.hv-rg__card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 0 0;margin-bottom:24px}
.hv-rg__card h3{margin:0;font:400 20.5px/1.3 'Playfair Display',Georgia,serif;color:#2a2522}

/* ---------- 13 Kontakt ---------- */
.hv-kontakt{background:#2a2522;color:#e4dfda}
.hv-kontakt .hv-split__grid{padding-top:130px;padding-bottom:130px}
.hv-kontakt__kick{margin:0 0 12px;font:italic 400 20.5px/1.3 'Playfair Display',Georgia,serif;color:#c9bfb6}
.hv-kontakt__h2{margin:0 0 26px;font:800 44px/1.08 'Source Sans 3',sans-serif;text-transform:uppercase;color:#f0edea}
.hv-kontakt__p{margin:0 0 30px;font-size:17px}
.hv-kontakt__wa{margin:0}
.hv .hv-kontakt__wa a{font:700 11px/1 'Source Sans 3',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f0edea;text-decoration:none;border-bottom:1px solid #f0edea;padding-bottom:5px}
.hv .hv-kontakt__wa a:hover{color:#fff}
.hv-form{background:#f0edea;padding:150px 44px 44px;border-radius:999px 999px 0 0;display:flex;flex-direction:column;gap:18px;color:#4a4440}
.hv-field{display:flex;flex-direction:column;gap:8px;font:700 11px/1 'Source Sans 3',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#4a4440}
.hv-field input,.hv-field textarea{width:100%;font:400 14.5px/1.4 'Source Sans 3',sans-serif;color:#2a2522;background:#fff;border:1px solid #d4cec8;border-radius:12px;padding:14px 16px;min-height:54px;outline:none;letter-spacing:0;text-transform:none}
.hv-field input:focus,.hv-field textarea:focus{border-color:#6b5b50;box-shadow:0 0 0 3px #6b5b5026}
.hv-form__btn{width:100%;margin-top:6px}
.hv-form__note{margin:0;font-size:12px;text-align:center}
.hv-form__ok,.hv-form__err{margin:0;padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.45}
.hv-form__ok{background:#e4dfda;color:#2a2522}
.hv-form__err{background:#f6e3df;color:#7a2e22}

/* ---------- Tablet: das Design kennt nur 1440 und 390 ---------- */
@media (max-width:1200px){
  .hv-split__grid{gap:56px}
  .hv-hero__grid{gap:40px}
  .hv-hero__h1-sub{font-size:27px}
  .hv-kosten__box{padding:64px 40px 56px}
  .hv-kosten__tiles{gap:32px}
  .hv-steps{gap:28px}
  .hv-kibbe__grid{gap:48px}
  .hv-kontakt__h2{font-size:37.5px}
}

/* ---------- Mobil (Mobile.dc.html) ---------- */
@media (max-width:900px){
  .hv{font-size:14.5px;line-height:1.65}
  .hv .hv-d{display:none}
  .hv span.hv-m{display:inline}
  .hv p.hv-m,.hv div.hv-m{display:block}
  .hv-cap{text-transform:capitalize}
  .hv-wrap{padding-left:16px;padding-right:16px}
  .hv-btn{display:flex;padding:0 26px}
  .hv-kick{margin:0 0 8px;font-size:16px}
  .hv-h2{font-size:21px;line-height:1.18}
  .hv-rule{width:120px;margin:16px 0 0}
  .hv-split__grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hv-list{margin:24px 0;padding-left:20px;gap:10px}

  /* 1 Hero: H1, Bild, Text, Button */
  .hv-hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:calc(var(--nav-height,76px) + 16px);padding-bottom:80px}
  .hv-hero__text{display:contents}
  .hv-hero__h1{order:1;margin:0 0 22px}
  .hv-hero__h1-main{font-size:49.5px;line-height:.95;letter-spacing:0}
  .hv-hero__h1-sub{font-size:21px;margin-top:12px}
  .hv-hero__media{order:2;display:block}
  .hv-hero__media img{max-width:none;height:400px;aspect-ratio:auto;object-position:50% 15%;margin-bottom:24px}
  .hv-hero__intro{order:3;margin:0 0 24px;font-size:inherit;max-width:none}
  .hv-hero__actions{order:4;display:block}

  /* 2 Wann */
  .hv-wann .hv-split__grid{padding-bottom:90px}
  .hv-wann__img{height:250px;aspect-ratio:auto;margin-bottom:32px}
  .hv-wann__close{font-size:13.5px}

  /* 3 Kosten */
  .hv-kosten .hv-wrap{padding-bottom:90px}
  .hv-kosten .hv-head{margin-bottom:36px}
  .hv-kosten__box{padding:44px 22px 36px}
  .hv-kosten__tiles{grid-template-columns:minmax(0,1fr);gap:44px}
  .hv-kosten .hv-tile img{width:180px;margin-bottom:24px}
  .hv-kosten .hv-tile h3{margin:0 0 10px;font-size:18.5px}
  .hv-kosten__price{margin-top:40px;padding-top:28px;display:block;text-align:center}
  .hv-kosten__amount{font-size:44px}
  .hv-kosten__note{margin:8px 0 24px}

  /* 4 Ueber mich: Bild oben */
  .hv-ueber .hv-split__grid{padding-top:80px;padding-bottom:80px}
  .hv-ueber__img{order:-1;height:300px;aspect-ratio:auto;object-position:50% 18%;margin-bottom:30px}
  .hv-ueber__p1{margin:24px 0 14px}
  .hv-ueber__p2{margin:0 0 26px}
  .hv-links{gap:28px}

  /* 5 Was bringt: Liste, Reels, Button */
  .hv-bringt .hv-split__grid{padding-top:90px;padding-bottom:90px}
  .hv-bringt__text{display:contents}
  .hv-bringt .hv-list{margin:24px 0 30px}
  .hv-reels{order:2;gap:12px;margin-bottom:30px}
  .hv-reel + .hv-reel{margin-top:0}
  .hv-reel__play{bottom:14px;width:44px;height:44px}
  .hv-reel__play svg{width:16px;height:16px}
  .hv-bringt__btn{order:3}

  /* 6 Ablauf */
  .hv-ablauf .hv-wrap{padding-top:80px;padding-bottom:80px}
  .hv-ablauf .hv-head{margin-bottom:40px}
  .hv-steps{display:flex;flex-direction:column;gap:30px;text-align:left}
  .hv-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px}
  .hv-steps__num{font-size:34px;margin:0}
  .hv-steps h3{margin:0 0 4px;font-size:14.5px;line-height:1.3}
  .hv-steps p{font-size:13.5px}

  /* 7 Mission */
  .hv-mission .hv-wrap{padding-top:90px;padding-bottom:90px}
  .hv-mission__text{margin:24px 0 34px;text-align:left;font-size:inherit;max-width:none}
  .hv .hv-mission__quote{margin:0 0 30px;font-size:24px}

  /* 8 Feedback: Wischleiste */
  .hv-feedback .hv-wrap{padding-top:80px;padding-bottom:80px}
  .hv .hv-feedback__main{margin:36px 0 0}
  .hv-feedback__stars{margin-bottom:12px}
  .hv .hv-feedback__main blockquote{margin:0 0 16px;font-size:19.5px}
  .hv .hv-feedback figcaption{font-size:11px}
  .hv-feedback__grid{display:flex;gap:14px;overflow-x:auto;margin:40px -16px 0;padding:0 16px 6px;scroll-snap-type:x mandatory}
  .hv .hv-feedback__grid figure{flex:0 0 280px;scroll-snap-align:start;padding-top:20px}
  .hv .hv-feedback__grid blockquote{margin:0 0 12px;font-size:13px}
  .hv .hv-feedback__grid figcaption{font-size:11px}

  /* 9 Kibbe-Typ */
  .hv-kibbe .hv-wrap{padding-top:90px;padding-bottom:90px}
  .hv-kibbe__intro{margin:20px 0 44px;max-width:none}
  .hv-kibbe__grid{display:block}
  .hv-kibbe .hv-tile + .hv-tile{margin-top:50px}
  .hv-kibbe .hv-tile img{width:180px;margin-bottom:22px}
  .hv-kibbe .hv-tile h3{margin:0 0 6px;font-size:17px;line-height:1.2}
  .hv-kibbe .hv-tile p{margin:0 0 16px}

  /* 10 Wo */
  .hv-wo .hv-split__grid{padding-top:80px;padding-bottom:80px}
  .hv-wo__pm{margin:24px 0 28px}
  .hv-reg{column-gap:16px}
  .hv .hv-reg a{display:flex;align-items:center;min-height:49px;padding:0;font-size:13px} /* 48 + 1px Rand wie im Design (content-box) */

  /* 11 FAQ */
  .hv-faq .hv-wrap{padding-top:90px;padding-bottom:70px}
  .hv-faq .hv-head{margin-bottom:32px}
  .hv-faq__item summary{min-height:64px;padding:16px 0;gap:16px}
  .hv-faq__item h3{font-size:16px}
  .hv-faq__sign::before{font-size:22px}
  .hv-faq__item p{padding:0 0 22px;font-size:13.5px}

  /* 12 Ratgeber: Wischleiste */
  .hv-rg .hv-wrap{padding-bottom:90px}
  .hv-rg__head{display:block;margin-bottom:28px}
  .hv-rg__grid{display:flex;gap:14px;overflow-x:auto;margin:0 -16px;padding:0 16px;scroll-snap-type:x mandatory}
  .hv .hv-rg__card{flex:0 0 240px;scroll-snap-align:start}
  .hv-rg__card img{height:280px;aspect-ratio:auto;margin-bottom:14px}
  .hv-rg__card h3{font-size:16px}

  /* 13 Kontakt: Text, Formular, WhatsApp — unten Platz fuer die klebende Leiste */
  .hv-kontakt .hv-split__grid{padding-top:80px;padding-bottom:158px}
  .hv-kontakt__text{display:contents}
  .hv-kontakt__kick{margin:0 0 8px;font-size:16px}
  .hv-kontakt__h2{margin:0 0 16px;font-size:29px;line-height:1.1}
  .hv-kontakt__p{margin:0 0 32px;font-size:inherit}
  .hv-form{order:2;width:100%;max-width:440px;margin-left:auto;margin-right:auto;padding:clamp(116px,33.5%,150px) 20px 26px;gap:14px} /* Halbkreis waechst mit der Breite: Breite begrenzen, Abstand oben mitwachsen lassen */
  .hv-kontakt__wa{order:3;margin:26px 0 0;text-align:center}
  .hv .hv-kontakt__wa a{font-size:11px}
  .hv-field{font-size:11px}
  .hv-field input,.hv-field textarea{font-size:16px; /* unter 16px zoomt iOS beim Antippen */ padding:13px 14px;min-height:52px}
  .hv-form__btn{margin-top:0}
  .hv-form__note{font-size:11px}

  /* Klebende CTA-Leiste */
  .hv .hv-sticky{display:block;position:sticky;bottom:0;z-index:20;margin-top:-78px;padding:12px 16px;background:#f0edeaf5;border-top:1px solid #d4cec8}
  .wa-float{bottom:96px}
}

/* Hinweis unter den Kundenstimmen (z. B. „aus dem Deutschen übersetzt") */
.hv-feedback__note{margin:28px 0 0;font-size:13px;color:#6b5b50;text-align:center}