/*
Theme Name: Küchengespräche Flyer
Description: Einseitiges Theme für Familiencoaching in Leipzig im Design des Flyers (Libre Baskerville, Poppins, Olivenzweig).
Version: 2.0
Text Domain: kuechengespraeche-flyer
*/
:root{--bg:#F3F0E1;--bg2:#E6E9D0;--card:#FAF8EC;--ink:#0D3F33;--green:#0D3F33;--sage:#798151;--rose:#C76546;--sun:#E29A34;--line:#D3D7B8;--salmon:#D97F68;--sagel:#D6DAB8;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#18211B;--bg2:#202C23;--card:#243028;--ink:#E9E7D6;--green:#A9D0A0;--sage:#8FA574;--rose:#E39B8F;--sun:#E8B955;--line:#38473B;--salmon:#E39A86;--sagel:#2C3A2F}}
:root[data-theme="dark"]{--bg:#18211B;--bg2:#202C23;--card:#243028;--ink:#E9E7D6;--green:#A9D0A0;--sage:#8FA574;--rose:#E39B8F;--sun:#E8B955;--line:#38473B;--salmon:#E39A86;--sagel:#2C3A2F}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.75 'Poppins',system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
:where(#kg-site>header a,main a,#kg-site>footer a){color:inherit}
.script{font-family:'Libre Baskerville',Georgia,'Times New Roman',serif;font-weight:700;color:var(--green);line-height:1.2}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
#kg-site>header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;height:68px}.bar>.btn{justify-self:end}
.brand{white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.6rem}
.brand svg{width:40px;height:40px}
#kg-site>header nav{display:flex;gap:clamp(12px,1.6vw,22px);align-items:center;white-space:nowrap}
#kg-site>header nav a{text-decoration:none;font-weight:600;font-size:.95rem}
#kg-site>header nav a:hover{color:var(--rose)}
.btn{display:inline-block;background:var(--green);color:var(--bg);padding:11px 24px;border-radius:999px;text-decoration:none;font-weight:700;border:2px solid var(--green);cursor:pointer;font:inherit;font-weight:700}
.btn.alt{background:transparent;color:var(--green)}
.btn:hover{background:var(--rose);border-color:var(--rose);color:#fff}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
@media(max-width:1100px){.bar{display:flex;justify-content:space-between}#kg-site>header nav{display:none}}
.hero{padding:64px 22px 56px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.6rem,9vw,5.6rem);margin:0 0 14px}
.hero p.lead{font-size:1.25rem;margin:0 0 26px;max-width:34ch}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.chips span{background:var(--bg2);border-radius:999px;padding:5px 16px;font-size:.92rem;font-weight:600}
.scene{position:relative;border-radius:46% 54% 50% 50%/55% 45% 55% 45%;aspect-ratio:7/8;overflow:hidden;background:var(--bg2);max-width:440px;margin:0 auto;width:100%}.scene img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.hero{grid-template-columns:1fr}}
main section{padding:68px 0}
main section.tint{background:var(--bg2)}
main h2{font-size:clamp(2.3rem,5vw,3.2rem);margin:0 0 18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:28px}}
.big{font-size:1.4rem;margin-top:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:30px}
.card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:26px}
.card .ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px}
.card .ic svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin:0;font-size:1.12rem;line-height:1.35}
.home{display:flex;gap:18px;align-items:flex-start}
.home svg{flex:none;width:46px;height:46px}
.ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.ticks li{padding-left:34px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:20px;height:20px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.6A4.5 4.5 0 0 1 20 10c0 5.800-8 11-8 11z' fill='none' stroke='%23C76546' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E")}
.online{display:flex;align-items:center;gap:14px;margin-top:30px;border-top:1px solid var(--line);padding-top:18px;font-size:1.5rem}
.online svg{width:46px;height:46px;stroke:var(--green);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.about{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:center}
@media(max-width:700px){.about{grid-template-columns:1fr}}
.portrait{aspect-ratio:1;border-radius:50% 50% 46% 54%/55% 50% 50% 45%;background:var(--bg2);display:grid;place-items:center;text-align:center;padding:24px;color:var(--green);font-weight:600;border:2px dashed var(--sage)}
.todo{background:var(--bg2);border-left:4px solid var(--sun);padding:2px 10px;border-radius:4px}
main details{background:var(--card);border:1px solid var(--line);border-radius:20px;margin-bottom:12px;overflow:hidden}
main summary{list-style:none;cursor:pointer;padding:18px 24px;font-weight:700;display:flex;justify-content:space-between;gap:16px}
main summary::-webkit-details-marker{display:none}
main summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--rose);transition:transform .2s}
main details[open] summary::after{transform:rotate(45deg)}
main details p{margin:0;padding:0 24px 20px}
main form{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:30px;display:grid;gap:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.row{grid-template-columns:1fr}}
main label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
main input,main textarea,main select{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;width:100%}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.9rem}
.check input{width:auto;margin-top:6px}
.done{display:none;margin:0;color:var(--green);font-weight:700}
.close{background:var(--green);color:var(--bg);text-align:center;border-radius:42px;padding:54px 24px;margin:0 0 20px}
.close .script{color:var(--bg);font-size:clamp(2.4rem,6vw,3.6rem);margin:0 0 10px}
.close .btn{background:var(--bg);color:var(--green);border-color:var(--bg);margin-top:14px}
#kg-site>footer{border-top:1px solid var(--line);padding:34px 0 40px;font-size:.92rem}
#kg-site>footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center}
#kg-site>footer a{margin-right:18px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body.admin-bar header{top:32px}@media(max-width:782px){body.admin-bar header{top:46px}}
.screen-reader-text{position:absolute;left:-9999px}
.page-body{padding:56px 0}.page-body h1{font:700 3rem 'Caveat',cursive;color:var(--green)}

.hero>*,.two>*,.about>*{min-width:0}.hero h1{overflow-wrap:anywhere}
@media(max-width:480px){.brand{font-size:1.3rem;gap:6px}.brand svg{width:32px;height:32px}.bar .btn{padding:9px 16px;font-size:.95rem}.hero{padding-top:40px}}

.card{padding:0;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--rose)}
.card-btn{display:block;width:100%;height:100%;padding:26px;margin:0;background:none;border:0;border-radius:26px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.card-btn:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
.card .ic{display:grid}
.ct{display:block;font-weight:700;font-size:1.12rem;line-height:1.35}
.more{display:block;margin-top:14px;font-weight:700;font-size:.92rem;color:var(--green);text-decoration:underline;text-underline-offset:3px}
main dialog{border:0;border-radius:28px;padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--card);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.28)}
main dialog::backdrop{background:rgba(24,33,27,.6)}
main dialog[open]{animation:dlg .18s ease-out}
@keyframes dlg{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dlg-in{position:relative;padding:34px 32px 30px}
.dlg-in .ic{width:56px;height:56px;border-radius:50%;margin-bottom:14px}
.dlg-in .ic svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dlg-in h3{font-size:2.1rem;margin:0 0 12px;padding-right:36px}
.dlg-in p{margin:0 0 14px}
.dlg-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--bg2);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.dlg-x:hover{background:var(--line)}
.dlg-x:focus-visible,main dialog .btn:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.dlg-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
body:has(dialog[open]){overflow:hidden}
@media(prefers-reduced-motion:reduce){.card,main dialog[open]{transition:none;animation:none}}
.card{display:flex}
.card-btn{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.more{margin-top:auto;padding-top:14px}
.dlg-in .ticks{margin-bottom:16px}

html body{display:block!important}
#kg-site{display:block!important;width:100%!important;max-width:none!important;float:none!important;flex:0 0 100%;min-width:0;margin:0;padding:0}

/* ===== Flyer-Design ===== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff) format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff) format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff) format('woff')}
.brand img{display:block;height:46px;width:auto}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(.9)}}
:root[data-theme="dark"] .brand img{filter:brightness(0) invert(.9)}
#kg-site>header nav a{font-size:.88rem;font-weight:500}
@media(max-width:1180px){.bar{display:flex;justify-content:space-between}#kg-site>header nav{display:none}}
.btn{font-weight:500}
main{overflow-x:clip}
.hero{grid-template-columns:1.05fr .95fr;gap:48px}
.hero h1{font-size:clamp(2.1rem,6vw,3.5rem);margin:0 0 16px;line-height:1.15}
.hero p.lead{font-size:1.1rem;max-width:36ch}
.chips span{font-weight:500;font-size:.88rem}
.scene-wrap{position:relative;padding-bottom:26px}
.scene-wrap::before{content:"";position:absolute;right:-6%;bottom:0;width:72%;aspect-ratio:1;background:var(--sagel);border-radius:62% 38% 55% 45%/48% 58% 42% 52%}
.scene{position:relative;z-index:1;aspect-ratio:36/26;max-width:none;width:100%;margin:0;border-radius:32px 32px 38% 32px/32px 32px 16% 32px;background:var(--bg2)}
.olive{position:absolute;z-index:2;height:auto;pointer-events:none}
.olive-a{width:30%;right:-5%;bottom:-3%}
main h2{font-size:clamp(1.55rem,3.4vw,2.2rem);margin:0 0 18px}
.big{font-size:1.1rem}
.online{font-size:1.2rem}
.online.script{font-weight:400}
.home .home-badge{flex:none;width:58px;height:58px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.home .home-badge svg{width:30px;height:30px}
.close{position:relative;overflow:hidden;background:var(--sagel);color:var(--green);border-radius:58px 42px 62px 38px/46px 56px 40px 60px;padding:56px 24px}
.close .script{color:var(--green);font-size:clamp(1.6rem,4vw,2.3rem);margin:0 0 10px}
.close .btn{background:var(--green);color:var(--bg);border-color:var(--green);margin-top:16px}
.close .btn:hover{background:var(--rose);border-color:var(--rose);color:#fff}
.close>p,.close>a{position:relative;z-index:1}
.olive-b{width:min(180px,26%);right:2%;bottom:-8%}
.dlg-in h3{font-size:1.4rem}
@media(max-width:640px){.olive-b{width:90px;right:-12px;bottom:-14px;opacity:.5}.hero{padding-top:32px}}

.hero h1{font-size:clamp(1.8rem,4.2vw,2.7rem);overflow-wrap:normal;hyphens:none}
#kg-site>footer .wrap>span{display:flex;flex-wrap:wrap;gap:6px 18px}
#kg-site>footer a{margin-right:0}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:32px}}

.dlg-in .kicker{margin:0 0 4px;font-weight:500;font-size:.88rem;opacity:.8}
.close p a{font-weight:700;text-underline-offset:3px}