/* Kaffeegespräche - Stylesheet */
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('lora-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('lora-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('lora-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('nunito-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('nunito-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('nunito-latin-700-normal.woff2') format('woff2')}

:root{
  --kobalt:#1F2F6B; --blau:#3F6FB5; --hellblau:#9DBDE6; --porzellan:#F8F5EF;
  --creme:#FBF6EE; --milch:#E3CFB4; --karamell:#B7835A; --schoko:#4A2E22; --espresso:#2E1C15;
  --terracotta:#C8674A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--schoko);background:var(--creme);line-height:1.6;font-variant-ligatures:no-common-ligatures}
h1,h2,h3,.lora{font-family:Lora,Georgia,serif;font-variant-ligatures:no-common-ligatures}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- Entwurfs-Hinweis ---------- */


/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(251,246,238,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--milch);transition:box-shadow .3s}
header.scrolled{box-shadow:0 4px 18px rgba(74,46,34,.10)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Lora,serif;font-weight:600;font-size:1.3rem;color:var(--schoko)}
.logo svg{flex:none}
.menu{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-weight:600;font-size:.95rem;position:relative;padding:4px 0}
.menu a:not(.cta)::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--blau);transition:width .25s}
.menu a:not(.cta):hover::after{width:100%}
.cta{background:var(--kobalt);color:#fff!important;padding:9px 18px!important;border-radius:999px;transition:background .2s,transform .2s}
.cta:hover{background:var(--blau);transform:translateY(-1px)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:var(--schoko);margin:5px 0;border-radius:2px}
@media(max-width:820px){
  .burger{display:block}
  .menu{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--creme);border-bottom:1px solid var(--milch);max-height:0;overflow:hidden;transition:max-height .3s}
  .menu.open{max-height:420px}
  .menu li{width:100%;text-align:center;border-top:1px solid var(--milch)}
  .menu a{display:block;padding:14px}
  .menu .cta{margin:12px auto;display:inline-block}
}

/* ---------- Kachel-Streifen ---------- */
.strip{display:block;width:100%;height:32px}
.strip.small{height:22px}

/* ---------- Hero ---------- */
.hero{padding:56px 0 64px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}
.pre{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);font-weight:700;margin:0 0 10px}
.hero h1{font-size:clamp(2.4rem,5.6vw,3.6rem);font-weight:600;margin:0;line-height:1.08}
.claim{font-family:Lora,serif;font-style:italic;font-size:1.2rem;color:#6b4a3a;margin:12px 0 14px;line-height:1.45}
.satz{margin:0 0 26px;font-size:1.08rem}
.btn{display:inline-block;background:var(--kobalt);color:#fff;text-decoration:none;font-weight:700;padding:14px 28px;border-radius:999px;box-shadow:0 4px 14px rgba(31,47,107,.25);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(31,47,107,.3);background:var(--blau)}
.portrait{position:relative;max-width:290px;width:100%;justify-self:center}
.portrait img{border-radius:18px;box-shadow:0 12px 30px rgba(74,46,34,.25)}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;text-align:center}.portrait{max-width:240px;margin:10px auto 0}}

/* ---------- Sektionen ---------- */
section{padding:72px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 38px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.3rem);margin:8px 0 6px;font-weight:600}
.sec-head p{margin:0;color:#6b4a3a}
.tile-icon{display:inline-block}
.bg-porzellan{background:var(--porzellan)}
.bg-tiles{background-color:var(--creme);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%239DBDE6' stroke-width='1.2' opacity='.35'%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Cpath d='M40 10 Q48 26 40 40 Q32 26 40 10Z M40 70 Q48 54 40 40 Q32 54 40 70Z M10 40 Q26 32 40 40 Q26 48 10 40Z M70 40 Q54 32 40 40 Q54 48 70 40Z'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- Karten + Hover ---------- */
.card{background:#fff;border:1px solid var(--milch);border-radius:16px;padding:24px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Crect width='24' height='6' fill='%231F2F6B'/%3E%3Ccircle cx='6' cy='3' r='1.6' fill='%239DBDE6'/%3E%3Ccircle cx='18' cy='3' r='1.6' fill='%23F8F5EF'/%3E%3C/svg%3E");transform:scaleX(0);transform-origin:left;transition:transform .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(74,46,34,.14);border-color:var(--hellblau)}
.card:hover::before{transform:scaleX(1)}
.card .corner{position:absolute;right:-14px;bottom:-14px;width:64px;height:64px;opacity:.18;transition:opacity .3s,transform .5s}
.card:hover .corner{opacity:.55;transform:rotate(45deg)}

/* Kennst du das */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.quote p{font-family:Lora,serif;font-style:italic;font-size:1.08rem;margin:0}
.quote .qm{font-family:Lora,serif;font-size:3rem;line-height:.6;color:var(--hellblau);display:block;margin-bottom:6px}
.bridge{text-align:center;max-width:640px;margin:36px auto 0;font-size:1.12rem}
.bridge strong{font-family:Lora,serif;font-weight:600}

/* So läuft es ab */
.steps-wrap{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:stretch}
.ablauf-img{position:relative;min-height:360px}
.ablauf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.steps{display:grid;gap:16px}
.step{display:flex;gap:18px;align-items:flex-start}
.num{flex:none;width:52px;height:52px}
.step h3{margin:0 0 4px;font-size:1.15rem}
.step p{margin:0}
.ablauf-img img{border-radius:18px;box-shadow:0 10px 26px rgba(74,46,34,.2)}
@media(max-width:980px){.steps-wrap{grid-template-columns:280px 1fr}}
@media(max-width:820px){.steps-wrap{grid-template-columns:1fr}.ablauf-img{max-width:280px;width:100%;margin:0 auto;min-height:0}.ablauf-img img{position:static;height:auto}}

/* Pakete */
.packages{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.packages .pkg{grid-column:span 2}.packages .pkg:nth-child(4){grid-column:2 / span 2}@media(max-width:900px){.packages{grid-template-columns:1fr 1fr}.packages .pkg,.packages .pkg:nth-child(4){grid-column:auto}}@media(max-width:560px){.packages{grid-template-columns:1fr}}
.pkg{text-align:center;display:flex;flex-direction:column}
.pkg .icon{margin:4px auto 10px}
.pkg h3{margin:0;font-size:1.25rem}
.pkg .meta{font-size:.85rem;color:#7a5c4d;margin:2px 0 10px}
.pkg p{font-size:.95rem;margin:0 0 14px;flex:1}
.pkg .price{position:relative;z-index:1;font-family:Lora,serif;font-weight:600;font-size:1.5rem;color:var(--kobalt)}
.pkg .old{font-size:.8rem;color:#9a8378;text-decoration:line-through;margin-left:6px}
.pkg.rec{border:2px solid var(--blau)}
.badge{position:absolute;top:22px;right:-40px;width:150px;text-align:center;background:var(--blau);color:#fff;font-size:.7rem;font-weight:700;padding:4px 0;transform:rotate(45deg);z-index:2}
.pkg-note{text-align:center;margin-top:24px;font-size:.95rem}
.pkg-note small{display:block;color:#8a6f62;margin-top:4px}

/* Über mich */
.about{display:grid;grid-template-columns:300px minmax(0,600px);justify-content:center;gap:56px;align-items:start}
.about-side{position:sticky;top:96px;max-width:300px;width:100%;justify-self:center}
.about-quote{margin:22px 0 0;padding:18px 20px 18px 20px;background:var(--porzellan);border:1px solid var(--milch);border-left:4px solid var(--kobalt);border-radius:12px;text-align:left}
.about-quote p{margin:0;font-family:Lora,serif;font-style:italic;font-size:1.02rem;line-height:1.5;color:var(--schoko)}
.about-img{position:relative;width:100%}
.about-img img{border-radius:18px;box-shadow:0 12px 30px rgba(74,46,34,.25)}
.about-text p{margin:0 0 14px}
.about-text h2{font-size:clamp(1.7rem,3.6vw,2.2rem);margin:0 0 14px;font-weight:600}
.about-text .end{font-family:Lora,serif;font-style:italic;font-size:1.15rem;color:var(--kobalt)}
@media(max-width:820px){.about{grid-template-columns:1fr}.about-side{position:static;max-width:300px;margin:0 auto}.about-img{max-width:230px;margin:0 auto}}

/* FAQ */
.faq{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq details{padding:0}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font-family:Lora,serif;font-weight:600;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:18px;height:18px;margin-top:-9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l3 6 6 3-6 3-3 6-3-6-6-3 6-3z' fill='%233F6FB5'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 22px 18px;margin-top:-4px}
.faq .ans ul{padding-left:18px;margin:6px 0 0}

/* Schluss / Buchung (Schoko-Akzent) */
.dark{background:var(--schoko);color:var(--creme);text-align:center;position:relative}
.dark h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 10px;font-weight:600}
.dark p{margin:0 auto 26px;max-width:560px;color:#eadccb}
.dark .btn{background:var(--hellblau);color:var(--espresso)}
.dark .btn:hover{background:#fff}

footer{background:var(--espresso);color:#cdb9a6;font-size:.88rem;padding:26px 0}
.foot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
.foot a{text-decoration:none}.foot a:hover{color:#fff}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}

/* ---------- Scroll-Aufbau ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.left{transform:translateX(-36px)}
.js .reveal.right{transform:translateX(36px)}
.js .reveal.zoom{transform:scale(.94)}
.js .reveal.visible{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none;transition:none}.card,.card::before,.corner{transition:none}}

/* Unterseiten (Impressum, Datenschutz, AGB) */
.legal{max-width:780px;margin:0 auto;padding:56px 20px 72px}
.legal h1{font-size:clamp(1.8rem,4vw,2.4rem);margin:0 0 18px;font-weight:600}
.legal h2{font-size:1.25rem;margin:30px 0 8px;font-weight:600}
.legal p,.legal li{margin:0 0 10px}
.legal .todo{background:#FFF4D6;border-left:4px solid var(--karamell);padding:10px 14px;border-radius:6px;font-size:.92rem}
.legal .back{display:inline-block;margin-top:28px;font-weight:700;color:var(--kobalt)}
.skip{position:absolute;left:-999px;top:0;background:var(--kobalt);color:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:10px;top:10px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:6px}
.dark .mail{margin:18px auto 0;font-size:.92rem;color:#eadccb}.dark .mail a{color:#fff}

/* FAQ: ruhiger Hover - Kästen werden hellblau mit blauem Rand, ohne Anheben und ohne Kachelband */
.faq details.card{transition:background-color .25s,border-color .25s}
.faq details.card::before{display:none}
.faq details.card:hover{transform:none;box-shadow:none;background:#EEF4FC;border-color:var(--hellblau)}
.faq details.card[open]{background:#F4F8FD;border-color:var(--hellblau)}

/* Ornament-Linie oben (Rauten & Punkte, ohne Ausblenden) */
.orn-line{height:18px;background-color:var(--creme);border-bottom:1px solid var(--milch);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M6 4.5L10.5 9L6 13.5L1.5 9Z' fill='%233F6FB5'/%3E%3Ccircle cx='19' cy='9' r='2' fill='%231F2F6B'/%3E%3Ccircle cx='28' cy='9' r='2' fill='%231F2F6B'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:center}
/* Kachel-Trenner: 5 Kacheln A, links und rechts zarte hellblaue Linie, die ausläuft */
.tile-divider{display:flex;align-items:center;justify-content:center;padding:14px 0;background:var(--creme)}
.tl-tiles{display:flex;flex:none;margin:0 14px}.tl-tiles svg{display:block}
.tl-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hellblau))}
.tl-line.r{background:linear-gradient(270deg,transparent,var(--hellblau))}
@media(max-width:480px){.tl-tiles svg{width:32px;height:32px}}

/* Pakete: hellblauer Hintergrund */
.bg-hellblau{background:#E6EFFA}

/* Hervorhebungen im Fließtext */
.about-text strong{font-weight:700;color:var(--schoko)}

/* Vertrauensleiste unter dem Kopfbereich (kein Hover) */
.trust{padding:22px 0 26px;background:var(--porzellan);border-top:1px solid var(--milch);border-bottom:1px solid var(--milch)}
.trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;text-align:center}
.trust-list li{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600;font-size:.95rem;line-height:1.3;color:var(--schoko)}
.trust-list svg{display:block;width:44px;height:44px}
@media(max-width:900px){.trust-list{grid-template-columns:repeat(3,1fr);row-gap:22px}}
@media(max-width:520px){.trust-list{grid-template-columns:repeat(2,1fr)}.trust-list li:last-child{grid-column:1 / -1}}

/* Überleitung als Karte mit Kachel (liegt auf dem Kachel-Hintergrund von „Dein Thema“, kein Hover) */
.bridge-card{position:relative;max-width:680px;margin:64px auto 0;background:#fff;border:1px solid var(--milch);border-radius:22px;padding:44px 28px 36px;text-align:center;box-shadow:0 10px 30px rgba(74,46,34,.08)}
.bridge-card .bc-tile{position:absolute;top:-24px;left:50%;transform:translateX(-50%);display:block}
.bridge-card .bc-title{font-family:Lora,serif;font-weight:600;font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1.2;color:var(--kobalt);margin:4px 0 12px}
.bridge-card .bc-text{margin:0 0 24px;font-size:1.12rem;line-height:1.6;color:var(--schoko)}
@media(max-width:520px){.bridge-card{padding:40px 20px 30px}}

/* Hero: Aufbau nacheinander + drei Schritte mit geschwungenen Pfeilen (Treppe) */
.claim span{display:inline-block}
.hs0{transition-delay:.1s!important}.hs1{transition-delay:.8s!important}
.hs3{transition-delay:1.6s!important}
.hero-schritte{margin:22px 0 10px;font-size:1.08rem;line-height:1.55;max-width:640px}
.hs-row{margin:0}
.hs-pfeil{display:grid;grid-template-columns:46px 1fr;column-gap:6px;align-items:start;margin-top:18px}
.hs-pfeil + .hs-pfeil{margin-left:52px}
.hs-arrow{display:block;margin-top:-18px;overflow:visible}
.hs-line,.hs-head{fill:none;stroke:var(--blau);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hs-ziel > span{font-weight:700;color:var(--kobalt)}
/* Pfeil zeichnet sich komplett, danach erscheint der Text (--t = Startzeit der Zeile) */
.hs4{--t:2.3s}.hs5{--t:3.8s}
.js .reveal.hs-pfeil{opacity:1;transform:none;transition:none}
.js .hs-pfeil .hs-line{stroke-dasharray:1 2;stroke-dashoffset:1.05;transition:stroke-dashoffset .7s ease-in-out var(--t)}
.js .hs-pfeil .hs-head{opacity:0;transition:opacity .25s ease calc(var(--t) + .65s)}
.js .hs-pfeil > span{opacity:0;transform:translateX(-8px);transition:opacity .7s ease calc(var(--t) + .95s),transform .7s ease calc(var(--t) + .95s)}
.js .hs-pfeil.visible .hs-line{stroke-dashoffset:0}
.js .hs-pfeil.visible .hs-head,.js .hs-pfeil.visible > span{opacity:1;transform:none}
.js .hs-pfeil > span{display:block}
.hs-pfeil > span{text-wrap:balance}
@media(max-width:820px){.hero-schritte{text-align:left;margin:22px auto 10px;max-width:460px}.hs-pfeil + .hs-pfeil{margin-left:34px}}
@media (prefers-reduced-motion: reduce){.js .hs-pfeil .hs-line{stroke-dashoffset:0;transition:none}.js .hs-pfeil .hs-head,.js .hs-pfeil > span{opacity:1;transform:none;transition:none}.js .hs-mk path{stroke-dashoffset:0!important;transition:none!important}}
.hs-wort{font-weight:700;color:var(--kobalt)}

/* Vertrauensleiste: Linie läuft durch, Punkte erscheinen nacheinander, Zahlen zählen hoch (startet per JS nach dem Hero) */
.trust-inner{position:relative}
.trust-line{position:absolute;left:0;right:0;top:22px;height:2px;background:linear-gradient(90deg,transparent,var(--hellblau) 12%,var(--hellblau) 88%,transparent);transform-origin:left center}
.trust-list{position:relative}
.trust-list svg{background:var(--porzellan);border-radius:50%;box-shadow:0 0 0 6px var(--porzellan)}
.zahl{display:inline-block;text-align:right;font-weight:800;color:var(--kobalt)}.zahl2{min-width:2ch}
.js .trust-line{transform:scaleX(0)}
.js .trust-list li{opacity:0;transform:scale(.85)}
.js .trust.los .trust-line{transform:scaleX(1);transition:transform 3.2s linear}
.js .trust.los .trust-list li{opacity:1;transform:none;transition:opacity .5s ease calc(.3s + var(--i)*.62s),transform .5s ease calc(.3s + var(--i)*.62s)}
@media(max-width:900px){.trust-line{display:none}}
@media (prefers-reduced-motion: reduce){.js .trust-line{transform:none}.js .trust-list li{opacity:1;transform:none;transition:none!important}}

/* Marker unter dem Ziel-Satz: zeichnet sich von links nach rechts, nachdem der Text da ist */
.hs-marker{position:relative;display:inline-block;z-index:0}
.hs-mk{position:absolute;left:-4px;bottom:-2px;width:calc(100% + 8px);height:14px;z-index:-1;overflow:visible}
.hs-mk path{fill:none;stroke:var(--hellblau);stroke-width:9;stroke-linecap:round;opacity:.75}
.js .hs-mk path{stroke-dasharray:1 2;stroke-dashoffset:1.05;transition:stroke-dashoffset .8s ease-in-out calc(var(--t) + 1.6s)}
.js .hs-pfeil.visible .hs-mk path{stroke-dashoffset:0}
.hs-m-kurz{position:relative;display:inline-block;white-space:nowrap;z-index:0}
.hs-m-kurz .hs-mk{display:none}
@media(max-width:520px){.hs-ziel > span{text-wrap:wrap}.hs-m-voll{display:inline}.hs-m-voll > .hs-mk{display:none}.hs-m-kurz .hs-mk{display:block}}

/* Schnell-Modus (per JS beim schnellen Scrollen): alles ohne Verzögerung und sehr kurz einblenden */
html.schnell .reveal,html.schnell .reveal *,html.schnell .trust *,html.schnell .hs-mk path{transition-duration:.25s!important;transition-delay:0s!important;animation-duration:.25s!important;animation-delay:0s!important}
html.sofort .reveal.visible,html.sofort .reveal.visible *,html.sofort .trust.los,html.sofort .trust.los *{transition:none!important;animation:none!important}

/* Handy: nichts darf seitlich überstehen (kein Hin-und-her-Wischen) */
html,body{overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
.pkg.rec{overflow:hidden}