@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/fraunces.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;src:url(fonts/fraunces-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --paper:#f7f3ea; --mist:#dfe3d1; --sage:#e1e7d5; --pine:#2f3c2a; --moss:#4b5e3c; --moss2:#3d4e30;
  --red:#b0472a; --ink:#24281f; --muted:#4e5345; --stone:#dcd6c6; --rule:#d6d1c1;
  --on-pine:#eef0e6; --line:#7a8270; --faint:#a3a493; --err:#9a3a22;
  --display:'Fraunces',Georgia,serif; --sans:'Figtree',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
img{max-width:100%;display:block}
picture{display:contents}
source{display:none}
a{color:inherit}
h1,h2,h3,.h-line{font-family:var(--display);font-weight:400;margin:0;line-height:1.08;text-wrap:balance;letter-spacing:-.015em}
h1,.h-line{font-size:clamp(2.5rem,6vw,4.2rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:1.4rem}
p{margin:0;max-width:62ch}
.lead{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.45}
.soft{color:var(--muted)}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--moss)}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
[hidden]{display:none!important}
/* two layouts in one page: .ph shows only on the phone (below 760 px), .dt only from 760 px */
@media (min-width:760px){.ph{display:none!important}}
@media (max-width:759px){.dt{display:none!important}}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
:is(#termin,#main):focus{outline:none}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:68px;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:1.3rem;white-space:nowrap;letter-spacing:-.01em}
.brand img{width:36px;height:36px}
.brand,.cta{flex-shrink:0}
.nav{display:flex;gap:4px 24px;flex-wrap:wrap;margin-left:auto;font-weight:500;font-size:.98rem}
.nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;color:var(--pine)}
.nav a[aria-current="page"]{border-bottom-color:var(--moss)}
.nav a:hover{border-bottom-color:var(--rule)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:9px 20px;border-radius:999px;border:1.5px solid var(--moss);background:var(--moss);color:var(--on-pine);font:600 .98rem var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--moss2);border-color:var(--moss2)}
.btn.ghost{background:transparent;color:var(--pine);border-color:var(--pine)}
.btn.ghost:hover{background:var(--sage)}
.nav a.m-only{display:none}
.menu{display:none}
.nav-cta{display:none}
@media (max-width:1180px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);flex-direction:column;gap:0;padding:8px max(16px,env(safe-area-inset-left,0px)) 16px}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--rule)}
  .nav a.m-only{display:block}
  .nav a[aria-current="page"]{border-bottom-color:var(--rule);font-weight:600}
  .menu{display:inline-flex;margin-left:auto}
}
@media (max-width:860px){
  .top .cta{display:none}
  .nav-cta{display:inline-flex;margin-top:16px;align-self:start}
}

/* hero */
.hero{position:relative;background:var(--pine);color:var(--on-pine);min-height:100vh;min-height:100svh;display:grid;align-items:end;isolation:isolate}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);z-index:-2;background-color:var(--bg)}
.hero .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(36,40,31,.5) 0,rgba(36,40,31,.05) 22%,rgba(36,40,31,.05) 45%,rgba(36,40,31,.62) 100%)}
.hero .copy{padding-block:56px 44px;display:grid;gap:14px}
.hero h1{color:#fff;max-width:14ch}
.hero .sub{color:#fff;font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:48ch}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;padding-top:8px}
.hero .btn.ghost{color:#fff;border-color:#fff}
.hero .btn.ghost:hover{background:rgba(255,255,255,.14)}
.hero .btn{background:var(--paper);color:var(--pine);border-color:var(--paper)}
.hero .btn:hover{background:#fff;border-color:#fff}
.hero .btn.ghost{background:transparent}

/* figures strip */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--rule);padding-top:24px}
.figures div{display:grid;gap:4px}
.figures .big{font-family:var(--display);font-size:1.7rem;line-height:1.1;color:var(--pine)}
.figures .sub{font-size:.92rem;color:var(--muted)}
@media (max-width:860px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
.strip{padding-block:32px 8px}

/* sections */
.sec{padding-block:72px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.split .text{display:grid;gap:16px}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:28px;align-items:start}}
.photo{overflow:hidden;background:var(--mist);border-radius:4px}
.photo img{width:100%;height:100%;object-fit:cover}
.opener{aspect-ratio:16/8;max-width:100%}
@media (max-width:600px){.opener{aspect-ratio:4/3}}
figcaption{font-size:.85rem;color:var(--muted);padding-top:8px}
.more{font-weight:600;color:var(--moss);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:end}
.duo .photo:first-child{aspect-ratio:3/4}
.duo .photo:last-child{aspect-ratio:4/3}
@media (max-width:600px){.duo{grid-template-columns:1fr}}

/* facts */
.facts{display:grid;gap:0;border-top:1px solid var(--rule);max-width:62ch}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule)}
.facts dt{color:var(--muted);font-weight:500}
.facts dd{margin:0}
.facts dd span{display:block}
@media (max-width:480px){.facts div{grid-template-columns:1fr;gap:2px}}

/* quotes */
.quotes{background:var(--sage);padding-block:64px}
.quotes .wrap{display:grid;gap:28px}
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
@media (max-width:860px){.qgrid{grid-template-columns:1fr;gap:28px}}
blockquote{margin:0;display:grid;gap:12px}
blockquote p{font-family:var(--display);font-size:1.3rem;line-height:1.35;color:var(--pine)}
blockquote cite{font-style:normal;color:var(--muted);font-size:.95rem}

/* page-end picker: the next free viewing times as words; a click opens the popover */
.days{display:grid;gap:4px}
.day{display:grid;grid-template-columns:150px 1fr;gap:8px 20px;align-items:baseline;padding:10px 0;border-top:1px solid var(--rule)}
.day:last-child{border-bottom:1px solid var(--rule)}
.day .d{font-family:var(--display);font-size:1.15rem;color:var(--pine)}
.day .d small{display:block;font-family:var(--sans);font-size:.82rem;color:var(--muted)}
.slots{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:baseline}
.slot{appearance:none;background:none;border:0;padding:8px 6px;min-height:44px;font:500 1.05rem var(--sans);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:2px}
.slot:hover{text-decoration-color:var(--rule)}
.slot[aria-pressed="true"]{color:var(--moss);font-weight:600;text-decoration-color:var(--moss)}
.slot:disabled{color:#a3a493;text-decoration:line-through;text-decoration-color:#a3a493;text-decoration-thickness:1px;cursor:default}
@media (max-width:520px){.day{grid-template-columns:1fr;gap:0}}
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px 28px;border-top:1px solid var(--rule);padding-top:20px}
.months div{display:grid;gap:4px}
.months dt{font-weight:600}
.months dd{margin:0;font-variant-numeric:tabular-nums;color:var(--muted)}

/* topic pages */
.page-head{padding-block:56px 32px;display:grid;gap:18px}
@media (min-width:760px){.page-head:has(.h-line) h1{font-size:clamp(1.4rem,2.2vw,1.75rem)}}
.band{padding-block:48px;display:grid;gap:28px}
.pics{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
.pics .photo{grid-column:span 12}
.bigquote{padding-block:40px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bigquote p{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;max-width:28ch;color:var(--pine)}
.closing{padding-block:64px;display:grid;gap:14px}
.qa{display:grid;border-top:1px solid var(--rule);max-width:70ch}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.qa summary::after{content:"+";font-family:var(--display);font-size:1.3rem;color:var(--muted)}
.qa details[open] summary::after{content:"–"}
.qa .a{padding:0 0 18px}
.qa ul{margin:0;padding-left:1.2em;display:grid;gap:4px}

/* the date field above the wedding calendar (assets/site.js): one input, no button */
.xask-f{display:flex;max-width:70ch}
.xask-f input{flex:1;min-width:0;min-height:46px;padding:10px 16px;border:1px solid rgba(36,40,31,.11);border-radius:10px;background-color:#f5f1e8;box-shadow:inset 0 1px 2px rgba(36,40,31,.09);font:inherit;color:var(--ink)}
.xask-f input:focus{outline:none;background-color:#fff;border-color:var(--moss);box-shadow:0 0 0 3px rgba(75,94,60,.16)}
.xask-f input::placeholder{color:var(--muted)}

/* ---------- footer: the garden (Codex, Garden Edition, PR #2; numbers are the reference's) ---------- */
.garden-footer{--gutter:clamp(24px,6vw,96px);background:linear-gradient(180deg,var(--paper) 25%,#edf0e1 70%,#e1e7d5 100%);color:var(--pine);overflow:hidden;padding-top:72px;font:400 18px/1.55 var(--sans)}
.garden-footer .shell{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.garden-footer a{color:inherit}
.garden-footer :focus-visible{outline:3px solid var(--moss);outline-offset:5px}
.garden-wordmark{display:block;font-family:Fraunces,Georgia,serif;font-size:clamp(100px,24vw,340px);font-weight:400;line-height:1.05;letter-spacing:-.065em;text-align:center;text-decoration:none;padding:0 0 28px}
.garden-footer .footer-main{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-block:12px 20px}
.garden-footer address{font-size:15px;font-style:normal;text-align:left;line-height:1.7}
.footer-email{font-size:17px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.garden-footer .footer-links{display:flex;gap:16px;flex-wrap:wrap}
.garden-footer .footer-links a{display:inline-block;padding:12px 0;font-size:15px;text-decoration:none}
.garden-footer .footer-links a:hover{text-decoration:underline}
.forest{height:clamp(360px,36vw,550px);position:relative;isolation:isolate;overflow:hidden;margin-top:0;background:radial-gradient(ellipse at 50% 100%,#cdd9bc55,transparent 65%)}
.tree-layer{position:absolute;pointer-events:none;transform:translate3d(0,0,0)}
.forest.in-view .tree-layer{will-change:transform}
.tree-layer img{display:block;width:100%;height:auto;max-width:none}
.garden-distance{width:125%;bottom:-20%;left:-12.5%;z-index:0;opacity:.22}
.garden-pond{width:51%;bottom:-10%;left:26%;z-index:1}
.garden-maple{width:40%;bottom:-15%;right:-2%;z-index:2}
.garden-pine{width:43%;bottom:-24%;left:-4%;z-index:3}
.garden-ferns-far{width:28%;bottom:-9%;right:9%;z-index:4}
.garden-ferns-near{width:27%;bottom:-9%;left:12%;z-index:5}
.breeze{transform-origin:50% 91%;animation:garden-breeze 24s ease-in-out infinite alternate;animation-play-state:paused}
.breeze-maple{--breeze-angle:1.8deg;animation-duration:12s;animation-delay:-7s}
.breeze-pine{--breeze-angle:1.1deg;animation-duration:15s;animation-delay:-4s}
.breeze-ferns{--breeze-angle:2.8deg;animation-duration:9s;animation-delay:-3s}
.garden-ferns-far .breeze{animation-duration:11s;animation-delay:-8s}
.forest.in-view:not(.is-still) .breeze{animation-play-state:running}
.forest.is-still .breeze{animation-play-state:paused}
/* pause/play for the garden (assets/garden-motion.js): 32px circle, 44px touch target, bottom-right corner of the scene */
.forest-motion{display:grid;place-items:center;position:relative;z-index:3;width:32px;height:32px;margin:-44px max(12px,env(safe-area-inset-right,0px)) 12px auto;padding:0;border:0;border-radius:50%;background:#f7f3eacc;color:var(--muted);cursor:pointer}
.forest-motion::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.forest-motion:hover{color:var(--pine)}
.forest-motion[hidden]{display:none}
.forest-motion svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes garden-breeze{from{transform:rotate(calc(-1 * var(--breeze-angle)))}to{transform:rotate(var(--breeze-angle))}}
.garden-footer .footer-small{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;z-index:3;color:#4e5345;background:#e1e7d5;border-top:1px solid #c7cdb8;padding-block:18px calc(18px + env(safe-area-inset-bottom));font-size:12px;line-height:1.5}
@media (min-width:1800px){.forest{height:36vw;max-height:none}}
@media (max-width:1100px){.garden-footer .footer-main{gap:24px}}
@media (max-width:760px){
  .garden-footer{--gutter:24px;padding-top:48px}.garden-wordmark{font-size:clamp(100px,26vw,192px);padding-bottom:22px}
  .garden-footer .footer-main{display:grid;grid-template-columns:1fr;gap:14px;padding-top:0;padding-bottom:0}.garden-footer address{font-size:14px}.footer-email{font-size:16px}.garden-footer .footer-links{gap:26px}.garden-footer .footer-links a{font-size:14px}
  .forest{height:330px;margin-top:0}
  .garden-distance{width:1050px;left:calc(50% - 525px);bottom:-30px;opacity:.18}
  .garden-pond{width:430px;left:calc(50% - 215px);bottom:-3px}
  .garden-maple{width:300px;right:-134px;bottom:26px}
  .garden-pine{width:335px;left:-155px;bottom:-13px}
  .garden-ferns-far{width:205px;right:-90px;bottom:-13px}
  .garden-ferns-near{width:215px;left:-66px;bottom:-17px}
  .garden-footer .footer-small{padding-block:16px calc(16px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.forest .tree-layer{transform:none!important;will-change:auto!important}.forest .breeze{animation-play-state:paused!important}}
.garden-pond canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.garden-pond.is-animated img{visibility:hidden}

/* two treatments of the contact section, A and B */

/* ---------- Kontakt: the 16 Oct garden-page section (Mac, ~/.bah-338-mock/garden-page), taken over as it was.
   Three parts side by side from 1100 px, the moss ball on its rock, free Saturdays in an ensō. ---------- */
:is(#termin,#vdlg,#rq){--bar:64px;--r-s:14px;background:var(--paper)}
@media (max-width:759px){:is(#termin,#vdlg,#rq){--r-s:12px}}
:is(#termin,#vdlg,#rq) .h2{color:var(--pine);letter-spacing:-.03em}
:is(#termin,#vdlg,#rq) .eyebrow{font-size:15.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--moss)}
:is(#termin,#vdlg,#rq) .tl{font-size:16px;font-weight:600;color:var(--moss);text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1.5px}
:is(#termin,#vdlg,#rq) .tl:hover{text-decoration-line:underline}
:is(#termin,#vdlg,#rq) .tl.go{border:0;background:none;padding:0;font:inherit;font-weight:600;cursor:pointer}
:is(#termin,#vdlg,#rq) .figures.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.figures.n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
:is(#termin,#vdlg,#rq) .frows{margin:32px 0 0;border-top:1px solid var(--rule)}
:is(#termin,#vdlg,#rq) .frows div{display:grid;grid-template-columns:minmax(0,1fr);padding:16px 0 18px;border-bottom:1px solid var(--rule)}
:is(#termin,#vdlg,#rq) .frows dt{font-size:16px;font-weight:600}
:is(#termin,#vdlg,#rq) .frows dd{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
:is(#termin,#vdlg,#rq) .frows a{color:var(--moss);font-weight:600}
:is(#termin,#vdlg,#rq) .btn{min-height:54px;padding:0 30px;font-size:16.5px}
:is(#termin,#vdlg,#rq) .btn:disabled{opacity:.35;cursor:not-allowed}
:is(#termin,#vdlg,#rq) .head p{margin-top:16px;max-width:52ch;font-size:18px}
:is(#termin,#vdlg,#rq) .where{margin-top:56px}
:is(#termin,#vdlg,#rq) .where a{color:var(--moss);font-weight:600}
:is(#termin,#vdlg,#rq) .where .tl{display:inline-block;margin-top:8px;font-size:inherit}
:is(#termin,#vdlg,#rq) .acts3{max-width:680px;margin-top:40px}
:is(#termin,#vdlg,#rq) .panel{scroll-margin-top:calc(var(--bar) + 16px);padding:8px 0 40px}
:is(#termin,#vdlg,#rq) .panel>.sub{max-width:52ch;color:var(--muted)}
:is(#termin,#vdlg,#rq) .h3x{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.15}
:is(#termin,#vdlg,#rq) .panel>.h3x+.sub{margin-top:8px}
:is(#termin,#vdlg,#rq) form,:is(#termin,#vdlg,#rq) .xcal,:is(#termin,#vdlg,#rq) .vpick{margin-top:24px}

/* calendar: free = white day with a fine line, taken = grey with a red stroke, the word in the legend */
:is(#termin,#vdlg,#rq) .ans{min-height:1.6em;margin-top:18px}
:is(#termin,#vdlg,#rq) .ans .yes{font-size:17px}
:is(#termin,#vdlg,#rq) .ans .yes b{font-weight:600;color:var(--moss)}
:is(#termin,#vdlg,#rq) .ans .no{font-size:16px;color:var(--err)}
:is(#termin,#vdlg,#rq) .ans .acts{gap:14px 24px;margin-top:16px}

/* viewing: weeks and times as quiet white fields; taken times struck through with the same red line */
:is(#termin,#vdlg,#rq) .weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
:is(#termin,#vdlg,#rq) .weeks button{display:grid;gap:2px;justify-items:start;padding:10px 14px;border:0;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule);text-align:left;cursor:pointer;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
:is(#termin,#vdlg,#rq) .weeks button:hover{box-shadow:inset 0 0 0 1.5px var(--moss)}
:is(#termin,#vdlg,#rq) .weeks b{font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
:is(#termin,#vdlg,#rq) .weeks span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
:is(#termin,#vdlg,#rq) .weeks button[aria-pressed="true"]{background:var(--moss);color:#fff;box-shadow:none}
:is(#termin,#vdlg,#rq) .weeks button[aria-pressed="true"] span{color:var(--sage)}
:is(#termin,#vdlg,#rq) .vrows{display:grid;gap:18px;margin-top:24px}
:is(#termin,#vdlg,#rq) .vrow{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:560px){:is(#termin,#vdlg,#rq) .vrow{grid-template-columns:150px minmax(0,1fr);align-items:start;gap:16px}:is(#termin,#vdlg,#rq) .vd{display:flex;flex-direction:column;justify-content:center;min-height:44px}}
:is(#termin,#vdlg,#rq) .vd b{display:block;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
:is(#termin,#vdlg,#rq) .vd span{display:inline-block;margin-top:2px;font-size:13px;font-weight:600;color:var(--moss)}
:is(#termin,#vdlg,#rq) .vt{display:flex;flex-wrap:wrap;gap:8px}
:is(#termin,#vdlg,#rq) .vt button{min-width:76px;height:44px;padding:0 14px;border:0;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule);font-size:16px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
:is(#termin,#vdlg,#rq) .vt button:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--moss)}
:is(#termin,#vdlg,#rq) .vt button[aria-pressed="true"]{background:var(--moss);color:#fff;box-shadow:none}
:is(#termin,#vdlg,#rq) .vt button:disabled{background:transparent;box-shadow:none;color:var(--faint);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px;cursor:not-allowed}
:is(#termin,#vdlg,#rq) .xleg{margin-top:16px;font-size:14px;color:var(--muted)}
:is(#termin,#vdlg,#rq) .vform{margin-top:32px}
:is(#termin,#vdlg,#rq) .xpick{margin-bottom:18px;font-size:17px}
:is(#termin,#vdlg,#rq) .xpick b{font-weight:600;color:var(--moss)}

/* fields: white, a fine line, the label above; names and e-mail are asked once */
:is(#termin,#vdlg,#rq) .fields{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;text-align:left}
@media (min-width:760px){:is(#termin,#vdlg,#rq) .fields{grid-template-columns:1fr 1fr}}
:is(#termin,#vdlg,#rq) .fld.full{grid-column:1/-1}
:is(#termin,#vdlg,#rq) .fld label{display:block;font-size:14px;font-weight:600;color:var(--muted)}
:is(#termin,#vdlg,#rq) .fld input,:is(#termin,#vdlg,#rq) .fld select,:is(#termin,#vdlg,#rq) .fld textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background-color:#fff;font:inherit;font-size:17px;color:var(--ink);transition:border-color .3s ease,box-shadow .3s ease}
:is(#termin,#vdlg,#rq) .fld select{padding-right:40px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 55%,calc(100% - 17px) 55%;background-size:5px 5px;background-repeat:no-repeat}
:is(#termin,#vdlg,#rq) .fld textarea{min-height:7em;line-height:1.6;resize:none;field-sizing:content}
:is(#termin,#vdlg,#rq) .fld input:focus,:is(#termin,#vdlg,#rq) .fld select:focus,:is(#termin,#vdlg,#rq) .fld textarea:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 1px var(--moss)}
:is(#termin,#vdlg,#rq) .fld input::placeholder,:is(#termin,#vdlg,#rq) .fld textarea::placeholder{color:var(--muted)}
:is(#termin,#vdlg,#rq) .fld :is(input,textarea)[aria-invalid="true"]{border-color:var(--err)}
:is(#termin,#vdlg,#rq) .xknown button{margin-left:8px;padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--moss);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
:is(#termin,#vdlg,#rq) .xknown{font-size:16px;color:var(--muted)}
:is(#termin,#vdlg,#rq) .xknown b{font-weight:600;color:var(--ink)}
:is(#termin,#vdlg,#rq) .xmore{margin-top:16px}
:is(#termin,#vdlg,#rq) .xmore summary{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;color:var(--moss);cursor:pointer;list-style:none}
:is(#termin,#vdlg,#rq) .xmore summary::-webkit-details-marker{display:none}
:is(#termin,#vdlg,#rq) .xmore summary::before{content:"+";display:inline-block;width:1.2em;font-size:20px;font-weight:400}
:is(#termin,#vdlg,#rq) .xmore[open] summary::before{content:"−"}
:is(#termin,#vdlg,#rq) .xmore summary span{margin-left:6px;font-weight:400;color:var(--muted)}
:is(#termin,#vdlg,#rq) .xmore summary:hover{text-decoration:underline;text-underline-offset:5px}
:is(#termin,#vdlg,#rq) .xmore .fields{margin-top:12px}
:is(#termin,#vdlg,#rq) .send{margin-top:24px}
:is(#termin,#vdlg,#rq) .send .btn{width:100%}
@media (min-width:760px){:is(#termin,#vdlg,#rq) .send .btn{width:auto;min-width:280px}}
:is(#termin,#vdlg,#rq) .err{margin-top:14px;font-size:15px;color:var(--err)}
:is(#termin,#vdlg,#rq) .fine{max-width:58ch;margin-top:12px;font-size:14px;color:var(--muted)}

/* sent */
:is(#termin,#vdlg,#rq) .xdone{display:grid;justify-items:start;gap:10px;padding:16px 0}
:is(#termin,#vdlg,#rq) .ok{display:block;width:44px;height:44px;fill:none;stroke:var(--moss);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(#termin,#vdlg,#rq) .ok circle{fill:none;stroke:var(--rule)}
:is(#termin,#vdlg,#rq) .xdone .q{max-width:24ch;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.15}
:is(#termin,#vdlg,#rq) .xdone .q:focus{outline:none}
:is(#termin,#vdlg,#rq) .xdone .sub{max-width:46ch;color:var(--muted)}

/* desktop: the parts one below the other, the address beside them */
@media (min-width:900px){
  :is(#termin,#vdlg,#rq) .panel{padding:0}
  :is(#termin,#vdlg,#rq) #x-date,:is(#termin,#vdlg,#rq) #x-viewing{margin-top:56px;padding-top:48px;border-top:1px solid var(--rule)}
}
@media (min-width:1000px){
  :is(#termin,#vdlg,#rq) .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  :is(#termin,#vdlg,#rq) .head,:is(#termin,#vdlg,#rq) .acts3{grid-column:1/8}
  :is(#termin,#vdlg,#rq) .acts3{max-width:none;margin-top:64px}
  :is(#termin,#vdlg,#rq) .where{grid-column:9/13;grid-row:1/3;margin-top:0}
}

/* on Start: the brochure button is the red action */
:is(#termin,#vdlg,#rq) #pSend:not(:disabled){background:var(--red);border-color:var(--red)}
:is(#termin,#vdlg,#rq) #pSend:not(:disabled):hover{background:var(--err);border-color:var(--err)}
@media (min-width:760px) and (max-width:899px){:is(#termin,#vdlg,#rq) .where{display:none}}
@media (min-width:1000px){
  :is(#termin,#vdlg,#rq) .head{grid-column:1/8}
  :is(#termin,#vdlg,#rq) .where{grid-column:9/13;grid-row:1;align-self:end;border-top-color:var(--line)}
  :is(#termin,#vdlg,#rq) .acts3{grid-column:1/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 48px;align-items:start;margin-top:64px}
  :is(#termin,#vdlg,#rq) #x-viewing{grid-column:1/-1}
  :is(#termin,#vdlg,#rq) .panel,:is(#termin,#vdlg,#rq) #x-date,:is(#termin,#vdlg,#rq) #x-viewing{margin:0;padding:22px 0 0;border:0;border-top:1px solid var(--line)}
  :is(#termin,#vdlg,#rq) .fields{grid-template-columns:minmax(0,1fr)}
  :is(#termin,#vdlg,#rq) .send .btn{width:100%;min-width:0}
  :is(#termin,#vdlg,#rq) .weeks button[aria-pressed="true"]{background:#fff;color:var(--moss);box-shadow:inset 0 0 0 2px var(--moss)}
  :is(#termin,#vdlg,#rq) .weeks button[aria-pressed="true"] span{color:var(--moss)}
}
@media (min-width:1100px){
  :is(#termin,#vdlg,#rq) .acts3{grid-template-columns:repeat(3,minmax(0,1fr))}
  :is(#termin,#vdlg,#rq) #x-viewing{grid-column:auto}
  :is(#termin,#vdlg,#rq) .vrow{grid-template-columns:minmax(0,1fr);gap:10px}
  :is(#termin,#vdlg,#rq) .vt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  :is(#termin,#vdlg,#rq) .vt button{min-width:0;padding:0}
  :is(#termin,#vdlg,#rq) .weeks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* soft corners, as the garden page had them */
:is(#termin,#vdlg,#rq) :is(.mhead button,.msel,.weeks button,.vt button,.fld input,.fld select,.fld textarea){border-radius:var(--r-s)}
:is(#termin,#vdlg,#rq) .vt button{border-radius:999px}

/* Kontakt in the live site's order: the calendar beside the request form, the contact line below (owner 2026-10-19) */
:is(#termin,#vdlg,#rq) .promise{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:15px;color:var(--muted)}
:is(#termin,#vdlg,#rq) .promise li::before{content:"–";margin-right:8px;color:var(--moss)}
:is(#termin,#vdlg,#rq) .fld .opt{font-weight:400}
:is(#termin,#vdlg,#rq) .fld .fhint{margin:6px 0 0;font-size:13px;color:var(--muted)}
:is(#termin,#vdlg,#rq) #pW{background-color:var(--paper);cursor:default;min-height:0;line-height:1.45;overflow:hidden;overflow-wrap:anywhere}
:is(#termin,#vdlg,#rq) #pW:focus{border-color:var(--line);box-shadow:none}
:is(#termin,#vdlg,#rq) .clr{margin-left:8px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--moss);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (min-width:900px){:is(#termin,#vdlg,#rq) .ans .acts{display:none}}
@media (min-width:1000px){
  :is(#termin,#vdlg,#rq) .acts3.two{grid-column:1/13;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px 72px;margin-top:56px}
  :is(#termin,#vdlg,#rq) .acts3.two .fields{grid-template-columns:1fr 1fr}
  :is(#termin,#vdlg,#rq) .acts3.two .send .btn{width:auto;min-width:280px}
  :is(#termin,#vdlg,#rq) .where.three{grid-column:1/13;grid-row:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin:64px 0 0;border-top:0;align-self:start}
  :is(#termin,#vdlg,#rq) .where.three div{border-top:1px solid var(--line);border-bottom:0}
}

/* the viewing times as a popover from the header button, the same element as on the page */
.vdlg{width:min(820px,calc(100% - 32px));max-height:min(90vh,100% - 32px);margin:auto;padding:0;border:0;border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -20px rgba(36,40,31,.5);overflow:auto}
.vdlg::backdrop{background:rgba(36,40,31,.45)}
.vdlg-in{padding:28px clamp(20px,4vw,40px) 36px}
.vdlg-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px}
.vdlg-head h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.vdlg .x{width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
.vdlg .x:hover{background:var(--sage)}
#vdlg #x-viewing{display:block;margin:0;padding:0;border:0}
#vdlg #x-viewing .h3x{display:none}
#vdlg .sub{max-width:62ch;color:var(--muted)}
#vdlg .weeks{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
#vdlg .vrow{grid-template-columns:150px minmax(0,1fr);gap:16px}
@media (max-width:559px){#vdlg .vrow{grid-template-columns:minmax(0,1fr)}}
#vdlg .vt{display:flex}
#vdlg .vt button{min-width:76px;padding:0 14px}
@media (min-width:760px){#vdlg .fields{grid-template-columns:1fr 1fr}#vdlg .send .btn{width:auto;min-width:280px}}
@media (prefers-reduced-motion:no-preference){:is(.vdlg,.rq)[open]{animation:vdlg-in .25s ease}}
@keyframes vdlg-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* the request parts in Kontakt (src/partials/flow.mjs): a plain frame from 760 px (.dt); the phone opens them in #rq */
.rq-frame{display:contents}

/* text pages: buttons and links in a row, legal text */
.figures.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.figures.n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.legal{display:grid;gap:36px;max-width:70ch}
.legal section{display:grid;gap:12px}
.legal h2{font-size:1.4rem}
.legal a{color:var(--moss)}

/* header over the hero (Start): clear at the top, solid after a short scroll or with the menu open */
.top.over{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent}
.top.over.solid{background:var(--paper);border-bottom-color:var(--rule)}
.top.over:not(.solid) .brand,.top.over:not(.solid) .nav a{color:#fff}
.top.over:not(.solid) .nav a[aria-current="page"]{border-bottom-color:#fff}
.top.over:not(.solid) .menu{color:#fff;border-color:#fff}
.top.over:not(.solid) .cta{background:var(--paper);color:var(--pine);border-color:var(--paper)}

/* Start, second section: the text and the four key facts on the left, one photo on the right */
.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.intro .it{display:grid;gap:14px;align-content:center}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;margin:20px 0 0;padding-top:24px;border-top:1px solid var(--rule)}
.kpis dt{font:600 .74rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.kpis dd{margin:4px 0 0;font:400 clamp(1.7rem,2.6vw,2.4rem)/1.05 var(--display);color:var(--pine)}
.intro .ip{overflow:hidden;border-radius:4px;aspect-ratio:5/4}
.intro .ip img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.intro{grid-template-columns:1fr}}
.orte-h{padding-bottom:clamp(32px,4vw,56px)}
.spread{display:grid;gap:24px clamp(24px,4vw,64px)}
.spread+.spread{margin-top:clamp(64px,8vw,120px)}
.spread .txt{display:grid;gap:12px;align-content:start}
.spread h3{font-size:clamp(1.8rem,3vw,2.5rem)}
.spread .sub{font:italic 400 clamp(1.15rem,1.6vw,1.35rem)/1.35 var(--display);color:var(--moss2)}
.spread.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"big txt" "big small"}
.spread.split.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"txt big" "small big"}
.spread.split .big{grid-area:big;aspect-ratio:4/5}
.spread.split .txt{grid-area:txt;padding-top:8px}
.spread.split .small{grid-area:small;aspect-ratio:4/3;align-self:end}
.wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"big big" "txt note";align-items:start}
.wide .big{grid-area:big;aspect-ratio:16/7}
.wide .txt{grid-area:txt;padding-top:8px}
.note{grid-area:note;display:grid;gap:8px;background:var(--sage);padding:24px 28px;border-radius:4px}
.note.plain{background:none;padding:8px 0 0}
.note .nh{font:400 1.5rem/1.2 var(--display);color:var(--pine)}
.tag-band{background:var(--sage)}
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 28px}
.timeline li{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:1px solid var(--line)}
.timeline .n{font:600 .74rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.timeline h3{font-size:1.5rem}
.timeline p{font-size:1rem}
@media (max-width:1000px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .spread.split,.spread.split.flip{grid-template-columns:1fr;grid-template-areas:"big" "txt" "small"}
  .wide{grid-template-columns:1fr;grid-template-areas:"big" "txt" "note"}
  .wide .big{aspect-ratio:4/3}
}
@media (max-width:520px){.timeline{grid-template-columns:1fr}}
.pack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;margin:0}
.pack div{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:1px solid var(--line)}
.pack dt{font:600 .74rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.pack dd{margin:0;display:grid;gap:4px}
.pack div:last-child{border-top-style:dashed}
.pack div:last-child dd{color:var(--muted)}
@media (max-width:860px){.pack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pack{grid-template-columns:1fr;gap:28px}}

/* The calendar as a raised card: square day tiles, Saturdays tinted, booked days pressed in (owner 2026-10-20) */
:is(#termin,#vdlg,#rq) #x-date{padding:24px 24px 20px;background:#fffdf8;border:1px solid rgba(36,40,31,.07);border-radius:18px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(36,40,31,.06),0 12px 24px -12px rgba(36,40,31,.18),0 32px 64px -32px rgba(47,60,42,.38)}
:is(#termin,#vdlg,#rq) .mhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
:is(#termin,#vdlg,#rq) .msel{display:inline-flex;align-items:center;gap:8px;min-width:0;height:44px;padding:0 10px 0 6px;border:0;border-radius:10px;background:transparent;font:500 24px/1 var(--display);letter-spacing:-.01em;color:var(--ink);cursor:pointer}
:is(#termin,#vdlg,#rq) .msel:hover,:is(#termin,#vdlg,#rq) .msel[aria-expanded="true"]{background:rgba(36,40,31,.05)}
:is(#termin,#vdlg,#rq) .msel svg{color:var(--muted);transition:transform .2s ease}
:is(#termin,#vdlg,#rq) .msel[aria-expanded="true"] svg{transform:rotate(180deg)}
:is(#termin,#vdlg,#rq) .mnav{display:flex;gap:6px}
:is(#termin,#vdlg,#rq) .mnav button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:linear-gradient(#fff,#f2eee3);color:var(--ink);cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(36,40,31,.1),0 2px 4px -1px rgba(36,40,31,.16);transition:transform .15s ease,box-shadow .2s ease}
:is(#termin,#vdlg,#rq) .mnav button:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(36,40,31,.14),0 6px 10px -4px rgba(36,40,31,.25)}
:is(#termin,#vdlg,#rq) .mnav button:active:not(:disabled){transform:none;box-shadow:inset 0 2px 4px rgba(36,40,31,.15),0 0 0 1px rgba(36,40,31,.12)}
:is(#termin,#vdlg,#rq) .mnav button:disabled{opacity:.35;cursor:default;box-shadow:0 0 0 1px rgba(36,40,31,.1)}
:is(#termin,#vdlg,#rq) .msat{margin-top:10px;font-size:14px;font-weight:600;color:var(--moss2)}
:is(#termin,#vdlg,#rq) .msat:not(:empty){display:inline-block;padding:5px 12px;border-radius:999px;background:var(--sage)}
:is(#termin,#vdlg,#rq) .xcal .wd,:is(#termin,#vdlg,#rq) .xcal .days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
:is(#termin,#vdlg,#rq) .xcal .wd{margin-top:16px;text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
:is(#termin,#vdlg,#rq) .xcal .wd span:nth-child(6){color:var(--moss)}
:is(#termin,#vdlg,#rq) .xcal .days{margin-top:8px}
:is(#termin,#vdlg,#rq) .xcal .days button{aspect-ratio:1;width:100%;padding:0;border:0;border-radius:10px;font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
:is(#termin,#vdlg,#rq) .xcal .fr{background:linear-gradient(#fff,#f8f5ee);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(36,40,31,.09),0 1px 2px rgba(36,40,31,.07),0 3px 6px -3px rgba(36,40,31,.14)}
:is(#termin,#vdlg,#rq) .xcal .fr.sat{background:linear-gradient(#edf1e4,#dfe6d2);color:var(--moss2);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(75,94,60,.3),0 1px 2px rgba(36,40,31,.07),0 3px 6px -3px rgba(47,60,42,.22)}
:is(#termin,#vdlg,#rq) .xcal .days .fr:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px var(--moss),0 8px 14px -6px rgba(47,60,42,.35)}
:is(#termin,#vdlg,#rq) .xcal .bk{background:#e9e4d8;color:var(--faint);box-shadow:inset 0 1px 3px rgba(36,40,31,.14)}
:is(#termin,#vdlg,#rq) .xcal .days .bk{font-weight:500;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px;cursor:help}
:is(#termin,#vdlg,#rq) .xcal .days .off{background:none;box-shadow:none;font-weight:400;color:var(--faint);cursor:default}
:is(#termin,#vdlg,#rq) .xcal .days button.sel,:is(#termin,#vdlg,#rq) .xcal .legend .sel{background:linear-gradient(#5b7550,var(--moss2));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px var(--moss2),0 10px 18px -8px rgba(47,60,42,.6)}
:is(#termin,#vdlg,#rq) .xcal .days button.sel{transform:translateY(-2px)}
:is(#termin,#vdlg,#rq) .xcal .legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
:is(#termin,#vdlg,#rq) .xcal .legend span{display:flex;align-items:center;gap:8px}
:is(#termin,#vdlg,#rq) .xcal .legend i{display:block;width:18px;height:18px;border-radius:5px}
/* date words above the month header (assets/site.js): one field; the words ring the days they name */
:is(#termin,#vdlg,#rq) .xask{margin-bottom:18px}
:is(#termin,#vdlg,#rq) .xask label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--moss2)}
:is(#termin,#vdlg,#rq) .xask-f{margin-top:0}
:is(#termin,#vdlg,#rq) .xask-l{margin:8px 0 0;font-size:14px;color:var(--muted)}
:is(#termin,#vdlg,#rq) .xask-l:empty{display:none}
:is(#termin,#vdlg,#rq) .xcal .days button.mk:not(:focus-visible),:is(#termin,#vdlg,#rq) .xcal .legend .mk{outline:1px solid var(--moss);outline-offset:-4px}
:is(#termin,#vdlg,#rq) .xcal .days button.sel.mk:not(:focus-visible){outline-color:var(--paper)}
:is(#termin,#vdlg,#rq) .xcal .legend .mk{padding:2px 8px;outline-offset:0;border-radius:5px}
:is(#termin,#vdlg,#rq) .xcal .legend .mk[hidden]{display:none}
@media (max-width:520px){:is(#termin,#vdlg,#rq) #x-date{padding:18px 12px 14px;border-radius:16px}:is(#termin,#vdlg,#rq) .xcal .wd,:is(#termin,#vdlg,#rq) .xcal .days{gap:5px}:is(#termin,#vdlg,#rq) .msel{font-size:21px}}
@media (prefers-reduced-motion:reduce){:is(#termin,#vdlg,#rq) :is(.mhead button,.xcal .days button){transition:none;transform:none!important}}

/* The request form as a sheet of paper beside the calendar: one step lower, sunken fields, raised red button (owner 2026-10-20) */
:is(#termin,#vdlg,#rq) #x-prices{padding:24px 24px 20px;background:#fffdf8;border:1px solid rgba(36,40,31,.07);border-radius:18px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(36,40,31,.05),0 10px 22px -14px rgba(36,40,31,.16)}
:is(#termin,#vdlg,#rq) #x-prices>.eyebrow{margin-bottom:6px}
:is(#termin,#vdlg,#rq) #x-prices .promise{gap:6px;font-size:15px;color:var(--ink)}
:is(#termin,#vdlg,#rq) #x-prices .promise li{display:flex;align-items:baseline;gap:10px}
:is(#termin,#vdlg,#rq) #x-prices .promise li::before{content:"";flex:none;width:10px;height:5px;margin:0 2px 0 1px;border:solid var(--moss);border-width:0 0 2px 2px;transform:translateY(-3px) rotate(-45deg)}
:is(#termin,#vdlg,#rq) #x-prices .grp{max-width:none;margin:22px 0 14px;padding-top:18px;border-top:1px solid var(--rule);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--moss)}
:is(#termin,#vdlg,#rq) #x-prices .fields{gap:16px}
:is(#termin,#vdlg,#rq) #x-prices .fields+.grp{margin-top:20px}
:is(#termin,#vdlg,#rq) #x-prices .fld label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
:is(#termin,#vdlg,#rq) #x-prices .fld .opt{letter-spacing:0;text-transform:none;font-size:13px}
:is(#termin,#vdlg,#rq) #x-prices .fld :is(input,textarea){padding:12px 14px;border:1px solid rgba(36,40,31,.11);border-radius:10px;background-color:#f5f1e8;box-shadow:inset 0 1px 2px rgba(36,40,31,.09);transition:background-color .2s ease,box-shadow .2s ease,border-color .2s ease}
:is(#termin,#vdlg,#rq) #x-prices .fld :is(input,textarea):focus{background-color:#fff;border-color:var(--moss);box-shadow:0 0 0 3px rgba(75,94,60,.16)}
:is(#termin,#vdlg,#rq) #x-prices .fld :is(input,textarea)[aria-invalid="true"]{border-color:var(--err)}
:is(#termin,#vdlg,#rq) #x-prices .wbox{position:relative}
:is(#termin,#vdlg,#rq) #x-prices #pW{cursor:default}
:is(#termin,#vdlg,#rq) #x-prices #pW.has{padding-right:44px;border-color:var(--moss2);background:linear-gradient(#5b7550,var(--moss2));color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 12px -8px rgba(47,60,42,.6)}
:is(#termin,#vdlg,#rq) #x-prices .clr{position:absolute;top:13px;right:8px;display:grid;place-items:center;width:28px;height:28px;margin:0;border-radius:50%;color:rgba(255,255,255,.85);text-decoration:none;background:none}
:is(#termin,#vdlg,#rq) #x-prices .clr:hover{color:#fff;background:rgba(255,255,255,.16)}
:is(#termin,#vdlg,#rq) #x-prices .send{margin-top:22px}
:is(#termin,#vdlg,#rq) #x-prices .send .btn{width:100%;min-width:0;min-height:54px}
:is(#termin,#vdlg,#rq) #x-prices #pSend:not(:disabled){background:linear-gradient(#bd5434,var(--red));border-color:#9f3f25;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px -1px rgba(120,40,20,.3),0 10px 20px -10px rgba(120,40,20,.55);transition:transform .15s ease,box-shadow .2s ease}
:is(#termin,#vdlg,#rq) #x-prices #pSend:not(:disabled):hover{background:linear-gradient(#b44d2e,var(--err));transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 8px -2px rgba(120,40,20,.32),0 16px 26px -12px rgba(120,40,20,.6)}
:is(#termin,#vdlg,#rq) #x-prices #pSend:not(:disabled):active{transform:none;box-shadow:inset 0 2px 4px rgba(60,20,10,.35)}
:is(#termin,#vdlg,#rq) #x-prices .fine{max-width:none;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px}
@media (min-width:1000px){:is(#termin,#vdlg,#rq) .acts3.two :is(#x-prices,#x-date){padding:28px 28px 22px;border:1px solid rgba(36,40,31,.07)}}
@media (max-width:520px){:is(#termin,#vdlg,#rq) #x-prices{padding:20px 16px 16px;border-radius:16px}}
@media (prefers-reduced-motion:reduce){:is(#termin,#vdlg,#rq) #x-prices #pSend{transition:none;transform:none!important}}

/* Kontakt head: a short title, and the viewing as a quiet box beside it (owner 2026-10-20) */
:is(#termin,#vdlg,#rq) .head .eyebrow{margin-bottom:8px}
:is(#termin,#vdlg,#rq) .visit{display:grid;gap:8px;justify-items:start;margin-top:28px;padding:20px 22px;border:1px solid var(--rule);border-radius:14px;background:rgba(255,253,248,.6)}
:is(#termin,#vdlg,#rq) .visit .vk{font:400 22px/1.2 var(--display);color:var(--pine)}
:is(#termin,#vdlg,#rq) .visit p:not(.vk){font-size:15px;color:var(--muted);max-width:40ch}
:is(#termin,#vdlg,#rq) .visit .btn{margin-top:6px;min-height:42px;padding:8px 18px;font-size:15px}
@media (min-width:1000px){:is(#termin,#vdlg,#rq) .visit{grid-column:9/13;grid-row:1;align-self:end;margin-top:0}}

/* The viewing popover in the calendar's language: a raised card, square tiles for weeks and times,
   taken times pressed in, the chosen one solid green, sunken fields (owner 2026-10-20) */
#vdlg.vdlg{background:#fffdf8;border:1px solid rgba(36,40,31,.07);border-radius:20px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(36,40,31,.08),0 24px 48px -16px rgba(36,40,31,.32),0 60px 120px -40px rgba(47,60,42,.45)}
.vdlg::backdrop{background:rgba(36,40,31,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#vdlg .x{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:12px;background:linear-gradient(#fff,#f2eee3);font-size:22px;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(36,40,31,.1),0 2px 4px -1px rgba(36,40,31,.16);transition:transform .15s ease,box-shadow .2s ease}
#vdlg .x:hover{background:linear-gradient(#fff,#f2eee3);transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(36,40,31,.14),0 6px 10px -4px rgba(36,40,31,.25)}
#vdlg .x:active{transform:none;box-shadow:inset 0 2px 4px rgba(36,40,31,.15),0 0 0 1px rgba(36,40,31,.12)}
#vdlg :is(.weeks button,.vt button:not(:disabled)){border:0;background:linear-gradient(#fff,#f8f5ee);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(36,40,31,.09),0 1px 2px rgba(36,40,31,.07),0 3px 6px -3px rgba(36,40,31,.14);transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
#vdlg :is(.weeks button,.vt button:not(:disabled)):hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px var(--moss),0 8px 14px -6px rgba(47,60,42,.35)}
#vdlg .weeks button{border-radius:12px;padding:11px 14px}
#vdlg .vt button{height:46px;border-radius:10px;font-weight:600}
#vdlg :is(.weeks,.vt) button[aria-pressed="true"]{background:linear-gradient(#5b7550,var(--moss2));color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px var(--moss2),0 10px 18px -8px rgba(47,60,42,.6)}
#vdlg .weeks button[aria-pressed="true"] span{color:var(--sage)}
#vdlg .vt button:disabled{border:0;border-radius:10px;background:#e9e4d8;color:var(--faint);font-weight:500;box-shadow:inset 0 1px 3px rgba(36,40,31,.14)}
#vdlg .vrows{gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
#vdlg .vd b{font-size:15px;font-weight:600}
#vdlg .xleg{max-width:none;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
#vdlg .xpick{display:inline-block;padding:8px 14px;border-radius:10px;background:var(--sage);font-size:16px}
#vdlg .fld :is(input,textarea,select){padding:12px 14px;border:1px solid rgba(36,40,31,.11);border-radius:10px;background-color:#f5f1e8;box-shadow:inset 0 1px 2px rgba(36,40,31,.09);transition:background-color .2s ease,box-shadow .2s ease,border-color .2s ease}
#vdlg .fld :is(input,textarea,select):focus{background-color:#fff;border-color:var(--moss);box-shadow:0 0 0 3px rgba(75,94,60,.16)}
#vdlg .fld label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
#vdlg #vSend:not(:disabled){min-height:52px;background:linear-gradient(#5b7550,var(--moss2));border-color:var(--moss2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px -1px rgba(36,40,31,.25),0 10px 20px -10px rgba(47,60,42,.6);transition:transform .15s ease,box-shadow .2s ease}
#vdlg #vSend:not(:disabled):hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 8px -2px rgba(36,40,31,.28),0 16px 26px -12px rgba(47,60,42,.65)}
#vdlg #vSend:not(:disabled):active{transform:none;box-shadow:inset 0 2px 4px rgba(20,30,15,.35)}
#vdlg .fine{max-width:none;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);font-size:13px}
@media (prefers-reduced-motion:reduce){#vdlg :is(.x,.weeks button,.vt button,#vSend){transition:none;transform:none!important}}

/* Month picker tiles: they replace the day grid while open (owner 2026-10-20: no system list) */
:is(#termin,#vdlg,#rq) .xcal.picking :is(.msat,.wd,.days,.legend,.ans){display:none}
:is(#termin,#vdlg,#rq) .xcal.picking .mnav{visibility:hidden}
:is(#termin,#vdlg,#rq) .mpick{display:grid;gap:18px;margin-top:14px}
:is(#termin,#vdlg,#rq) .mpick[hidden]{display:none}
:is(#termin,#vdlg,#rq) .my p{margin-bottom:8px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--moss)}
:is(#termin,#vdlg,#rq) .mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
:is(#termin,#vdlg,#rq) .mgrid button{height:46px;padding:0;border:0;border-radius:10px;font:600 15px/1 var(--sans);cursor:pointer;background:linear-gradient(#fff,#f8f5ee);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(36,40,31,.09),0 1px 2px rgba(36,40,31,.07),0 3px 6px -3px rgba(36,40,31,.14);transition:transform .15s ease,box-shadow .2s ease}
:is(#termin,#vdlg,#rq) .mgrid button:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px var(--moss),0 8px 14px -6px rgba(47,60,42,.35)}
:is(#termin,#vdlg,#rq) .mgrid button[aria-pressed="true"]{background:linear-gradient(#5b7550,var(--moss2));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px var(--moss2),0 10px 18px -8px rgba(47,60,42,.6)}
:is(#termin,#vdlg,#rq) .mgrid button:disabled{background:none;box-shadow:none;font-weight:400;color:var(--faint);cursor:default}
@media (prefers-reduced-motion:reduce){:is(#termin,#vdlg,#rq) :is(.mgrid button,.msel svg){transition:none;transform:none!important}}

/* ---------- The phone (below 760 px): the approved mock mock/phone-e (owner 2026-10-21), its CSS ported.
   One spacing rhythm (8 px), radii 12/16/24, type 12/14/16/20 Figtree and 20/24/28/32/40 Fraunces.
   Phone-only parts carry .ph and p-* classes (src/partials/phone.mjs); the shared parts are restyled here.
   Motion (owner 2026-10-21, "less is more"): the menu, the request page and the viewing sheet;
   opacity and transform only; nothing with reduced motion. ---------- */
@media (max-width:759px){
  :root{--card:#fffdf8;--hair:rgba(36,40,31,.14);--soft:#5d6255;--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--barh:calc(68px + var(--sb));--toph:calc(56px + var(--st))}
  body{font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}
  img{height:auto}
  html:has(.nav.open,dialog[open]){overflow:hidden}
  @media (prefers-reduced-motion:reduce){*,::before,::after{transition:none!important;animation:none!important}}
  main{padding-top:var(--toph)}
  main.cover{padding-top:0}
  :is(.bk,.p-round,.nav .x,.rq .x,.p-next,.p-tl) svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* slim header: brand in the middle, Menü on the right; hidden while a gallery shows (Start: see below) */
  .top,.top.over{position:fixed;top:0;left:0;right:0;background:rgba(247,243,234,.96);border-bottom:1px solid var(--hair)}
  .top.away{visibility:hidden}
  /* Start: the header shows from the first screen, the brand on the left; clear with light text over the opening photo */
  .top.over .wrap>.brand{grid-area:1/1;justify-self:start;padding-left:8px}
  .top.over.away{visibility:visible;background:none;border-bottom-color:transparent}
  .top.over.away>.wrap>:is(.brand,.menu){color:#fbf9f3;border-color:rgba(251,249,243,.55);text-shadow:0 1px 8px rgba(17,21,14,.3)}
  .top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;height:var(--toph);min-height:0;padding:var(--st) 8px 0}
  .top .bk{grid-area:1/1;justify-self:start;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--pine)}
  .top .bk svg{width:22px;height:22px}
  .brand{grid-area:1/2;gap:8px;min-height:44px;font-size:18px;line-height:1;color:var(--pine)}
  .brand img{width:26px;height:26px}
  .top .menu{position:relative;grid-area:1/3;justify-self:end;margin:0 8px 0 0;min-height:40px;padding:0 16px;border:1px solid rgba(47,60,42,.3);background:transparent;color:var(--pine);font-size:14px}
  .top .menu::before{content:"";position:absolute;inset:-3px 0} /* 40 px to see, 44 px to tap */

  /* the menu: a full-screen paper layer, large links, the legal links small at the bottom */
  .nav{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;gap:0;margin:0;padding:calc(var(--st) + 6px) 24px calc(var(--sb) + 24px);border:0;background:var(--paper);overflow-y:auto}
  /* it opens quietly: the layer fades in and rises 10 px, the links follow 30 ms apart (350 ms in all); it closes faster */
  .nav{visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .15s ease-in,transform .15s ease-in,visibility 0s .15s}
  .nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .24s cubic-bezier(.2,.7,.3,1),transform .24s cubic-bezier(.2,.7,.3,1)}
  .nav>a{opacity:0;transform:translateY(6px);transition:opacity .1s,transform .1s}
  .nav.open>a{opacity:1;transform:none;transition:opacity .14s ease-out,transform .14s ease-out}
  .nav.open>a:nth-of-type(2){transition-delay:30ms}.nav.open>a:nth-of-type(3){transition-delay:60ms}.nav.open>a:nth-of-type(4){transition-delay:90ms}.nav.open>a:nth-of-type(5){transition-delay:.12s}
  .nav.open>a:nth-of-type(6){transition-delay:.15s}.nav.open>a:nth-of-type(7){transition-delay:.18s}.nav.open>a:nth-of-type(8){transition-delay:.21s}
  .nav .mh{display:flex;align-items:center;justify-content:space-between;margin:0 -8px 24px 0}
  .nav .mh .brand{padding:0;border:0}
  .nav .x,.rq .x{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#ece6d8;color:var(--ink);cursor:pointer}
  .nav .x svg,.rq .x svg{width:18px;height:18px}
  .nav>a,.nav>a.m-only{display:flex;align-items:center;min-height:48px;padding:0;border:0;font:400 28px/1.1 var(--display);letter-spacing:-.015em;color:var(--pine);text-decoration:none}
  .nav>a[aria-current="page"],.top.over:not(.solid) .nav>a[aria-current="page"]{border:0;font-weight:400;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
  .nav .nav-cta{display:none}
  .nav .mlegal{display:flex;flex-wrap:wrap;column-gap:24px;margin-top:auto;padding-top:24px;border-top:1px solid var(--hair)}
  .nav .mlegal a{display:flex;align-items:center;min-height:44px;padding:0;border:0;font-size:14px;color:var(--soft);text-decoration:none}

  /* bottom bar: two actions; hidden while the menu or a dialog is open */
  .pbar{position:fixed;z-index:5;left:0;right:0;bottom:0;display:flex;gap:10px;padding:10px 16px calc(10px + var(--sb));background:rgba(247,243,234,.9);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-top:1px solid var(--hair)}
  .pbar .btn{flex:1;min-height:48px;padding:0 24px;font-size:16px}
  .pbar .btn.ghost,.p-acts .btn{border:1px solid rgba(47,60,42,.35);background:var(--card);color:var(--pine)}
  .pbar .main,.pbar .main:hover{border-color:var(--red);background:var(--red);color:#fff}
  body:has(.nav.open,dialog[open]) .pbar{display:none}

  /* Start: the opening photo fills the first screen */
  .hero{display:block;height:100svh;min-height:560px;color:#fbf9f3}
  .hero img{object-position:var(--pos-ph);background-color:var(--bg-ph)}
  .hero .shade{background:linear-gradient(rgba(17,21,14,.6),rgba(17,21,14,.25) 132px,rgba(17,21,14,0) 240px),linear-gradient(to top,rgba(17,21,14,.82),rgba(17,21,14,.45) 24%,rgba(17,21,14,0) 58%)}
  .hero .copy{position:absolute;left:32px;right:32px;bottom:calc(var(--barh) + 48px);display:block;padding:0}
  .hero h1{max-width:none;font:400 40px/1.04 var(--display);letter-spacing:-.02em;color:#fbf9f3}
  .hero .p-where{margin-top:16px;font-size:14px;letter-spacing:.02em;color:rgba(251,249,243,.85)}
  .hero .sub,.hero .acts{display:none}

  /* Start: four place tiles, three facts */
  .p-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:24px 16px 0}
  .p-tile{position:relative;display:block;overflow:hidden;aspect-ratio:1/1.12;border-radius:16px;background:var(--sage)}
  .p-tile img{width:100%;height:100%;object-fit:cover}
  .p-tile::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(rgba(20,24,16,0),rgba(20,24,16,.62))}
  .p-tile span{position:absolute;z-index:1;left:16px;bottom:14px;font:400 20px/1 var(--display);color:#fff}
  .p-facts{display:flex;gap:8px;margin:16px 16px 0}
  .p-facts div{flex:1;padding:12px;border:1px solid var(--hair);border-radius:16px;background:var(--card)}
  .p-facts dt{font-size:12px;font-weight:500;color:var(--soft)}
  .p-facts dd{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--pine)}

  /* Start sections, swipes, quotes, photo strip */
  .p-sec{padding-top:56px}
  .p-h2{margin:0 24px 16px;font:400 28px/1.1 var(--display);letter-spacing:-.015em;color:var(--pine)}
  .p-swipe,.p-strip{display:flex;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .p-swipe{gap:12px;padding:0 16px 4px;scroll-padding:0 16px;scroll-snap-type:x mandatory}
  .p-swipe::-webkit-scrollbar,.p-strip::-webkit-scrollbar,.p-track::-webkit-scrollbar{display:none}
  .p-dcard{flex:0 0 74%;display:block;scroll-snap-align:start;color:inherit;text-decoration:none}
  .p-dcard img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px}
  .p-dcard b{display:block;margin-top:12px;font:400 20px/1.15 var(--display);color:var(--pine)}
  .p-dcard span{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--soft)}
  .p-dcard i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--faint)}
  .p-pack{margin:0 16px;padding:0 16px;border:1px solid var(--hair);border-radius:16px;background:var(--card)}
  .p-pack details+details{border-top:1px solid var(--hair)}
  .p-pack .p-sum{font:400 20px/1.2 var(--display);color:var(--pine)}
  .p-list{margin:0;padding:0 0 12px;list-style:none}
  .p-list li{padding:9px 0;border-top:1px solid var(--hair);font-size:14px}
  .p-list li:first-child{border-top:0}
  .p-not{margin:12px 24px 0;font-size:14px;color:var(--soft)}
  .p-qcard{flex:0 0 84%;display:flex;flex-direction:column;justify-content:space-between;gap:0;min-height:260px;margin:0;padding:24px;scroll-snap-align:start;border:1px solid var(--hair);border-radius:24px;background:var(--card)}
  .p-qcard p,.p-big p,.p-mi .p-big p{margin:0;font:300 20px/1.4 var(--display);color:var(--ink)}
  .p-qcard cite{display:block;margin-top:24px;font-style:normal;font-size:14px;color:var(--soft)}
  .p-qcard cite b{font-weight:600;color:var(--pine)}
  .p-qphoto{flex:0 0 62%;margin:0;overflow:hidden;scroll-snap-align:start;border-radius:24px}
  .p-qphoto img{width:100%;height:100%;object-fit:cover}
  .p-strip{gap:8px;padding:0 16px;scroll-snap-type:x proximity}
  .p-strip img{flex:none;width:auto;max-width:none;height:248px;object-fit:cover;scroll-snap-align:start;border-radius:12px}
  .p-tl{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:8px 24px 0;font-weight:600;color:var(--pine);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .p-tl svg{width:16px;height:16px}
  .p-acard{margin:0 16px;overflow:hidden;border:1px solid var(--hair);border-radius:24px;background:var(--card)}
  .p-acard img{width:100%;aspect-ratio:16/10;object-fit:cover}
  .p-in{padding:16px 24px 8px}
  .p-in address{font-style:normal;font-size:16px;line-height:1.5}
  .p-in address b{font-weight:600;color:var(--pine)}
  .p-links{display:flex;flex-wrap:wrap;column-gap:24px}
  .p-links .p-tl{margin:0}
  .p-us{display:flex;align-items:center;gap:16px;margin:0 24px}
  .p-us img{flex:none;width:96px;height:96px;object-fit:cover;border-radius:50%}
  .p-us p{margin:0;font-size:16px;color:var(--soft)}

  /* folding rows (Was dazugehört, questions, Mehr erfahren): a drawn plus that turns into a cross when open */
  :is(.p-sum,.qa summary){display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:6px 0;list-style:none;cursor:pointer}
  :is(.p-sum,.qa summary)::-webkit-details-marker{display:none}
  :is(.p-sum,.qa summary)::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--pine),var(--pine)) center/12px 1.5px no-repeat,linear-gradient(var(--pine),var(--pine)) center/1.5px 12px no-repeat}
  details[open]>:is(.p-sum,summary)::after{transform:rotate(45deg)}
  .qa details{border:0}
  .qa{max-width:none;padding:0 16px;border:1px solid var(--hair);border-radius:16px;background:var(--card)}
  .p-sec .qa{margin:0 16px}
  .qa details+details{border-top:1px solid var(--hair)}
  .qa summary{font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
  .qa details[open] summary::after{content:""}
  .qa .a{padding:0 0 16px;font-size:14px;color:var(--soft)}
  .qa .more{color:var(--pine);text-decoration-thickness:1px}

  /* place pages: swipe gallery, then the paper body with the name, chips, short lines and "Mehr erfahren" */
  .p-gal{position:relative;height:60svh;min-height:400px;background:var(--pine)}
  .p-gal::after{content:"";position:absolute;inset:0 0 auto;height:120px;background:linear-gradient(rgba(17,21,14,.35),rgba(17,21,14,0));pointer-events:none}
  .p-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .p-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always}
  .p-round{position:absolute;z-index:2;top:calc(var(--st) + 12px);left:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,253,248,.92);color:var(--ink)}
  .p-round svg{width:20px;height:20px}
  .p-count{position:absolute;z-index:2;right:16px;bottom:36px;padding:6px 12px;border-radius:999px;background:rgba(20,24,16,.5);font-size:12px;font-weight:600;letter-spacing:.02em;color:#fff}
  main.cover .page-head,.p-place .p-body{position:relative;z-index:1;margin-top:-24px;padding:24px 24px 0;border-radius:24px 24px 0 0;background:var(--paper)}
  main.cover .page-head .lead{display:none}
  .page-head h1,.p-vh{font:400 32px/1.08 var(--display);letter-spacing:-.02em;color:var(--pine)}
  .p-body{padding:0 24px 16px}
  .p-place{margin-top:32px;scroll-margin-top:var(--toph)}
  .p-place .p-body{padding-bottom:16px}
  .p-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
  .p-chip{padding:7px 12px;border-radius:999px;background:var(--sage);font-size:14px;font-weight:600;color:var(--pine)}
  .p-lines p{max-width:32ch;margin:0 0 6px;font-size:16px;color:var(--soft)}
  .p-more{margin-top:24px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .p-more>.p-sum{font-weight:600;color:var(--pine)}
  .p-mi{padding:0 0 24px}
  .p-mi .p-mh{margin:24px 0 8px;font:400 20px/1.2 var(--display);letter-spacing:-.015em;text-wrap:balance;color:var(--pine)}
  .p-mi>.p-mh:first-child{margin-top:8px}
  .p-mi p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--ink)}
  .p-mi .p-list li{padding:8px 0}
  .p-rows{margin:0}
  .p-rows div{padding:10px 0;border-top:1px solid var(--hair)}
  .p-rows div:first-child{border-top:0}
  .p-rows dt{font-size:12px;font-weight:600;color:var(--soft)}
  .p-rows dd{margin:2px 0 0;font-size:14px;line-height:1.5}
  .p-fig{margin:16px 0 0}
  .p-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
  .p-big{display:block;margin:24px 0 0}
  .p-big cite{display:block;margin-top:12px;font-size:14px;color:var(--soft)}
  .p-next{display:flex;align-items:center;gap:16px;margin-top:24px;padding:12px;border:1px solid var(--hair);border-radius:16px;background:var(--card);color:var(--ink);text-decoration:none}
  .p-next img{flex:none;width:64px;height:64px;object-fit:cover;border-radius:12px}
  .p-next span{flex:1;font-size:14px;color:var(--soft)}
  .p-next b{display:block;font:400 20px/1.2 var(--display);color:var(--pine)}
  .p-next svg{flex:none;width:20px;height:20px;color:var(--pine)}

  /* calm pages (Termine, Fragen, Über uns, Anfahrt, legal): a head, a photo, cards */
  .page-head{display:block;padding:24px 24px 0}
  .page-head .eyebrow{display:none}
  .page-head .lead{max-width:34ch;margin-top:12px;font-size:16px;line-height:1.45;color:var(--soft)}
  .p-cph{margin:24px 16px 0}
  .p-cph img,.photo.opener{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px}
  .photo.opener{margin-top:8px}
  .band{gap:16px;padding-block:24px 0}
  .band>h2,.split h2{font:400 24px/1.15 var(--display);color:var(--pine)}
  .split{gap:16px}
  .split .text{gap:8px}
  .split .text p{color:var(--soft)}
  .split>.photo{aspect-ratio:4/3!important;border-radius:24px}
  .split .text .photo{border-radius:16px}
  .figures,.figures.n3{grid-template-columns:1fr 1fr;gap:8px;padding-top:0;border-top:0}
  .figures>div{align-content:start;gap:2px;padding:12px;border:1px solid var(--hair);border-radius:16px;background:var(--card)}
  .figures.n3>div:last-child{grid-column:1/-1}
  .figures .eyebrow{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--soft)}
  .figures .big{font:600 14px/1.3 var(--sans);color:var(--pine)}
  .figures .sub{font-size:12px;line-height:1.35;color:var(--soft)}
  .p-acts{display:flex;gap:10px;margin:16px 16px 0}
  .p-acts .btn{flex:1;min-height:48px;padding:0 16px;font-size:14px}
  .facts{max-width:none;padding:8px 16px;border:1px solid var(--hair);border-radius:16px;background:var(--card)}
  .facts div{grid-template-columns:1fr;gap:2px;padding:10px 0;border-bottom:0;border-top:1px solid var(--hair)}
  .facts div:first-child{border-top:0}
  .facts dt{font-size:12px;font-weight:600;color:var(--soft)}
  .facts dd{font-size:14px;line-height:1.5}
  .band .acts{flex-wrap:nowrap;gap:10px;margin-top:0}
  .band .acts>a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;border:1px solid rgba(47,60,42,.35);border-radius:999px;background:var(--card);font-size:14px;font-weight:600;text-align:center;color:var(--pine);text-decoration:none}
  .bigquote{padding:32px 24px 0;border:0}
  .bigquote p{max-width:none;font:300 20px/1.4 var(--display);color:var(--ink)}
  .bigquote cite{font-size:14px;color:var(--soft)}
  .closing:has([data-picker]){display:none}
  .closing{padding:24px}
  #freie-samstage{gap:8px;margin:24px 16px 0;padding:8px 16px 16px;border:1px solid var(--hair);border-radius:16px;background:var(--card)}
  #freie-samstage h2{padding-top:12px;font:600 16px/1.3 var(--sans);color:var(--pine)}
  #freie-samstage .soft{font-size:14px}
  #freie-samstage .months{grid-template-columns:auto 1fr;gap:6px 16px;padding:0;border:0;font-size:14px}
  #freie-samstage .months div{display:contents}
  #freie-samstage .months dt{color:var(--soft)}
  .band:has(.legal){padding:0 24px}
  .legal,.legal section{gap:0}
  .legal h2{margin:24px 0 6px;font:600 16px/1.3 var(--sans);color:var(--pine);hyphens:auto}
  .legal p{margin:0 0 8px;font-size:14px;line-height:1.6;hyphens:auto;overflow-wrap:break-word}
  .legal a{color:var(--pine)}

  /* Kontakt: one calm column, the day grid with free and taken days by words, then the fields */
  #termin{padding:56px 0 24px;scroll-margin-top:var(--toph)}
  #termin .wrap{padding:0 24px}
  :is(#termin,#vdlg,#rq) .h2{font:400 28px/1.1 var(--display)}
  :is(#termin,#vdlg,#rq) .eyebrow{font-size:14px}
  :is(#termin,#vdlg,#rq) .head p{margin-top:12px;font-size:16px;color:var(--soft)}
  :is(#termin,#vdlg,#rq) .visit{margin-top:24px;padding:16px;border:1px solid var(--hair);border-radius:16px;background:var(--card)}
  :is(#termin,#vdlg,#rq) .visit .vk{font-size:20px}
  :is(#termin,#vdlg,#rq) .visit p:not(.vk){font-size:14px;color:var(--soft)}
  :is(#termin,#vdlg,#rq) .visit .btn{min-height:44px;font-size:14px;background:var(--card);border:1px solid rgba(47,60,42,.35)}
  :is(#termin,#vdlg,#rq) .acts3{margin-top:32px}
  :is(#termin,#vdlg,#rq) .panel{padding:0 0 32px}
  :is(#termin,#vdlg,#rq) .h3x{font:600 20px/1.2 var(--sans);letter-spacing:-.005em;color:var(--pine)}
  :is(#termin,#vdlg,#rq) :is(#x-date,#x-prices){padding:0 0 32px;border:0;border-radius:0;background:none;box-shadow:none}
  :is(#termin,#vdlg,#rq) form,:is(#termin,#vdlg,#rq) .xcal{margin-top:16px}
  :is(#termin,#vdlg,#rq) .mnav button,:is(#termin,#vdlg,#rq) .mgrid button{border:1px solid var(--hair);border-radius:12px;background:var(--card);box-shadow:none;transition:none;transform:none}
  :is(#termin,#vdlg,#rq) .mnav button{width:44px;height:44px}
  :is(#termin,#vdlg,#rq) .mnav button:hover:not(:disabled),:is(#termin,#vdlg,#rq) .mgrid button:hover:not(:disabled){transform:none;box-shadow:none;border-color:var(--moss)}
  :is(#termin,#vdlg,#rq) .mgrid button[aria-pressed="true"]{border-color:var(--pine);background:var(--pine);color:#fff;box-shadow:none}
  :is(#termin,#vdlg,#rq) .msel{font-size:20px}
  :is(#termin,#vdlg,#rq) .xcal .wd,:is(#termin,#vdlg,#rq) .xcal .days{gap:4px}
  :is(#termin,#vdlg,#rq) .xcal .wd{font-size:12px;letter-spacing:0;text-transform:none;color:var(--soft)}
  :is(#termin,#vdlg,#rq) .xcal .wd span:nth-child(6){color:inherit}
  :is(#termin,#vdlg,#rq) .xcal .days button{aspect-ratio:auto;height:44px;border-radius:12px;font:500 16px/1 var(--sans);transition:none;transform:none}
  :is(#termin,#vdlg,#rq) .xcal :is(.fr,.fr.sat){background:var(--card);color:var(--ink);box-shadow:none}
  :is(#termin,#vdlg,#rq) .xcal .days .fr:hover{transform:none;box-shadow:inset 0 0 0 1px var(--moss)}
  :is(#termin,#vdlg,#rq) .xcal .bk{background:none;box-shadow:none;color:var(--faint)}
  :is(#termin,#vdlg,#rq) .xcal .days .bk{text-decoration-color:currentColor;text-decoration-thickness:1px}
  :is(#termin,#vdlg,#rq) .xcal .days .off{color:#c9c5b5}
  :is(#termin,#vdlg,#rq) .xcal .days button.sel{background:var(--pine);color:#fff;box-shadow:none;transform:none}
  :is(#termin,#vdlg,#rq) .xcal .legend{justify-content:center;gap:4px 8px;margin-top:12px;padding-top:0;border-top:0;font-size:12px;color:var(--soft)}
  :is(#termin,#vdlg,#rq) .xcal .legend i,:is(#termin,#vdlg,#rq) .xcal .legend span:has(.sat){display:none}
  :is(#termin,#vdlg,#rq) .xcal .legend span+span::before{content:"·";margin-right:4px}
  :is(#termin,#vdlg,#rq) .xcal .legend .mk::before{content:none}
  :is(#termin,#vdlg,#rq) .xcal .legend span:has(.bk){text-decoration:line-through}
  :is(#termin,#vdlg,#rq) .ans .yes{min-height:52px;padding:14px 16px;border-radius:16px;background:var(--sage);font-size:14px;font-weight:600;color:var(--pine)}
  :is(#termin,#vdlg,#rq) .ans .yes b{color:inherit}
  :is(#termin,#vdlg,#rq) .fld label,:is(#termin,#vdlg,#rq) #x-prices .fld label{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--soft)}
  :is(#termin,#vdlg,#rq) .fld :is(input,select,textarea),:is(#termin,#vdlg,#rq) #x-prices .fld :is(input,textarea){min-height:50px;padding:12px 14px;border:1px solid #d6d0bf;border-radius:12px;background-color:var(--card);box-shadow:none;font-size:16px;transition:none}
  :is(#termin,#vdlg,#rq) .fld :is(input,select,textarea):focus,:is(#termin,#vdlg,#rq) #x-prices .fld :is(input,textarea):focus{outline:2px solid var(--moss);outline-offset:0;border-color:transparent;box-shadow:none}
  :is(#termin,#vdlg,#rq) #x-prices #pW.has{border-color:transparent;background:var(--sage);color:var(--pine);box-shadow:none}
  :is(#termin,#vdlg,#rq) #x-prices .clr{color:var(--pine);background:none}
  :is(#termin,#vdlg,#rq) #x-prices .grp{font-size:14px;letter-spacing:0;text-transform:none;color:var(--soft)}
  :is(#termin,#vdlg,#rq) .send{margin-top:32px}
  :is(#termin,#vdlg,#rq) :is(#x-prices #pSend,#vSend):not(:disabled){min-height:48px;border-color:var(--red);background:var(--red);box-shadow:none;transition:none;transform:none}
  :is(#termin,#vdlg,#rq) .where{margin-top:0;padding:8px 16px;border:1px solid var(--hair);border-radius:16px;background:var(--card)}
  :is(#termin,#vdlg,#rq) .frows div{padding:10px 0;border-bottom:0;border-top:1px solid var(--hair)}
  :is(#termin,#vdlg,#rq) .frows div:first-child{border-top:0}
  :is(#termin,#vdlg,#rq) .frows dt{font-size:12px;color:var(--soft)}
  :is(#termin,#vdlg,#rq) .frows dd{font-size:14px;color:var(--ink)}

  /* the request page: full screen; the title and the close button stay at the top, then the calendar, the picked day in
     one line and the fields in one column. The desktop titles, the promise list and the date field are not needed here. */
  #termin .head .btn{width:100%;margin-top:16px;min-height:48px;border-color:var(--red);background:var(--red);color:#fff}
  .rq{inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0 24px calc(32px + var(--sb));border:0;background:var(--paper);color:inherit;overflow-y:auto;overscroll-behavior:contain}
  .rq::backdrop{background:rgba(36,40,31,.25)}
  .rq-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 -24px;padding:calc(var(--st) + 8px) 16px 8px 24px;background:var(--paper)}
  .rq-head h2{font:400 28px/1.1 var(--display);letter-spacing:-.015em;color:var(--pine)}
  .rq-lead{margin:0;font-size:14px;line-height:1.45;color:var(--soft)}
  #rq :is(.h3x,#x-prices>.eyebrow,#x-prices>.sub,.promise,.grp,.fld:has(#pW),.ans .acts){display:none}
  #rq #x-date{padding-bottom:8px}
  #rq form{display:grid;gap:16px;margin-top:0}

  /* the viewing popover as a bottom sheet */
  .vdlg,#vdlg.vdlg{width:100%;max-width:100%;max-height:90svh;margin:auto 0 0;border:0;border-radius:24px 24px 0 0;background:var(--paper);box-shadow:none}
  .vdlg-in{padding:8px 24px calc(24px + var(--sb))}
  .vdlg-in::before{content:"";display:block;width:36px;height:5px;margin:2px auto 10px;border-radius:999px;background:#cfc8b6}
  .vdlg-head h2{font:600 20px/1.2 var(--sans);color:var(--pine)}
  #vdlg .x,#vdlg .x:hover{width:44px;height:44px;border-radius:50%;background:#ece6d8;box-shadow:none;transition:none;transform:none}
  #vdlg .sub{font-size:14px;color:var(--soft)}
  #vdlg .weeks{grid-template-columns:1fr 1fr}
  #vdlg :is(.weeks button,.vt button:not(:disabled)),#vdlg :is(.weeks button,.vt button:not(:disabled)):hover{border:1px solid var(--hair);border-radius:16px;background:var(--card);box-shadow:none;transition:none;transform:none}
  #vdlg :is(.weeks,.vt) button[aria-pressed="true"]{border-color:var(--pine);background:var(--pine);color:#fff;box-shadow:none;transform:none}
  #vdlg .vt button:disabled{border-radius:16px}
  #vdlg .xpick{display:block;padding:14px 16px;border-radius:16px;font-size:14px}

  /* footer: pine, the brand, address, links in two columns, the credits; the garden picture is desktop only */
  .garden-footer{margin-top:56px;padding:48px 24px calc(var(--barh) + 32px);background:var(--pine);color:#dfe4d3;font-size:14px;line-height:1.45}
  .garden-footer .shell{max-width:none;padding:0}
  .garden-footer :focus-visible{outline-color:#fbf9f3}
  .garden-wordmark{display:flex;align-items:center;gap:12px;padding:0;font:400 26px/1 var(--display);letter-spacing:0;text-align:left;color:#fbf9f3}
  .garden-wordmark::before{content:"";width:40px;height:40px;border-radius:50%;background:var(--paper) url(img/logo-tree.png) center/30px no-repeat}
  .garden-footer .footer-main{display:block;padding:0}
  .garden-footer address{margin-top:24px;font-size:14px;line-height:1.6}
  .footer-email{font-size:14px;color:#fbf9f3}
  .garden-footer .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:24px;padding:8px 0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
  .garden-footer .footer-links a{display:flex;align-items:center;min-height:44px;padding:0;font-size:14px;color:#fbf9f3}
  .forest,.forest-motion{display:none}
  .garden-footer .footer-small{display:block;margin-top:16px;padding:0;border:0;background:none;font-size:12px;line-height:1.6;color:#b9c0aa}
  .garden-footer .footer-small span{display:block}
}