:root{--bg:#fffff0;--sf:#ffffff;--tx:#303030;--mu:#6b6b63;--ln:#dcdccb;--dk:#1d1d1f;--ak:#d02035;--ok:#2f6b3a;--on:#ffffff;--fh:Adamina,Georgia,serif;--fb:Roboto,system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17171a;--sf:#222226;--tx:#ececE4;--mu:#a2a299;--ln:#3a3a40;--dk:#f2f2ea;--ak:#e0394d;--ok:#7fc08a;--on:#ffffff;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#17171a;--sf:#222226;--tx:#ececE4;--mu:#a2a299;--ln:#3a3a40;--dk:#f2f2ea;--ak:#e0394d;--ok:#7fc08a;--on:#ffffff;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--tx);font:16px/1.55 var(--fb);margin:0}
.w{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{background:var(--dk);color:var(--bg)}
.top .w{padding-block:12px}
.logo{font:400 20px var(--fh);color:var(--bg);text-decoration:none}
.tag{display:inline-block;margin:18px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ak);border:1px solid var(--ak);padding:2px 8px;border-radius:3px}
h1{font:400 clamp(28px,5vw,42px)/1.15 var(--fh);margin:14px 0 8px;text-wrap:balance}
.lead{color:var(--mu);max-width:62ch;margin:0 0 28px}
.g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:820px){.g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){.g{grid-template-columns:1fr}
}
.o{background:var(--sf);border:2px solid var(--ln);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0;text-align:left;font:inherit;color:inherit}
.o h3{font:400 19px/1.2 var(--fh);margin:0}
.o p{margin:0;color:var(--mu);font-size:14px}
.ic{width:56px;height:56px;border-radius:50%;background:var(--ak);color:#fff;display:grid;place-items:center;margin-bottom:2px}
.ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.k{font:500 12px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.v{font-weight:500;overflow-wrap:anywhere;font-size:14px}
.b{margin-top:auto;padding-top:10px;display:flex;gap:8px;flex-wrap:wrap}
button.c,a.c{font:500 14px var(--fb);background:var(--dk);color:var(--bg);border:0;border-radius:6px;padding:10px 14px;cursor:pointer;text-decoration:none}
button.c.s{background:transparent;color:var(--tx);border:1px solid var(--ln)}
button:focus-visible,a:focus-visible{outline:3px solid var(--ak);outline-offset:2px}
.o.sel{border-color:var(--ak);box-shadow:0 0 0 3px color-mix(in srgb,var(--ak) 25%,transparent)}
.n{margin:22px 0 0;padding:14px 16px;border-left:3px solid var(--ak);background:var(--sf);border-radius:0 6px 6px 0;max-width:70ch}
.n small{display:block;color:var(--mu);margin-top:4px}
.cal{margin-top:18px;background:var(--sf);border:2px solid var(--ak);border-radius:8px;padding:18px}
#out{margin-top:12px}
.pf{display:grid;gap:12px;max-width:460px}
.pf label{display:grid;gap:4px;font-size:14px;color:var(--mu)}
.pf input{font:16px var(--fb);padding:10px;border:2px solid var(--ln);border-radius:6px;background:var(--bg);color:var(--tx)}
.ft{margin:36px 0 28px;color:var(--mu);font-size:13px;border-top:1px solid var(--ln);padding-top:14px}
.ic{color:var(--on)}
.st{display:flex;gap:6px;margin:6px 0 22px;flex-wrap:wrap;padding:0;list-style:none}
.st li{font-size:13px;padding:5px 12px;border-radius:999px;border:2px solid var(--ln);color:var(--mu)}
.st li.on{background:var(--ak);border-color:var(--ak);color:var(--on);font-weight:500}
.st li.done{border-color:var(--ak);color:var(--tx)}
.box{background:var(--sf);border:2px solid var(--ln);border-radius:8px;padding:18px;max-width:640px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--ln)}
.row:last-child{border:0}
.row b{display:block;font-weight:500}
.row span{font-size:13px;color:var(--mu)}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:40px;height:40px;border-radius:50%;border:2px solid var(--ln);background:var(--bg);color:var(--tx);font:20px var(--fb);cursor:pointer}
.qty output{min-width:1.5em;text-align:center;font-weight:500}
.sum{max-width:640px;margin-top:14px;padding:14px 16px;border-left:3px solid var(--ak);background:var(--sf);border-radius:0 6px 6px 0}
.ok{padding:14px 16px;border:2px solid var(--ok);border-radius:8px;background:var(--sf);max-width:640px}
.qr{width:120px;height:120px;border:2px dashed var(--mu);display:grid;place-items:center;font-size:12px;color:var(--mu);text-align:center;margin:10px 0}
.pay label{display:flex;gap:10px;align-items:center;padding:10px 0}
.tag{color:var(--tx);border-color:var(--ak)}
.b .c{background:var(--ak);color:var(--on)}
.b .c.s,button.c.s{background:transparent;color:var(--tx)}
#f.pf{max-width:none!important;display:block!important}
.cg{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:0 0 16px}
.cd{background:var(--sf);border:2px solid var(--ln);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px}
.cd.me{border-color:var(--ak)}
.cd h3{margin:0;font-size:17px}
.cd .kt{font-size:13px;color:var(--mu)}
.cd label{display:flex;flex-direction:column;gap:4px;font-size:14px}
.cd input{font:inherit;padding:10px;border-radius:6px;border:2px solid var(--ln);background:var(--bg);color:var(--tx)}
.hint{margin:0 0 12px;max-width:640px;color:var(--mu)}
.tk{border:3px solid var(--ak);border-radius:12px;margin:0 0 22px;background:var(--sf);overflow:hidden}
.tk.gift{border-style:dashed}
.tk>.th{background:var(--ak);color:#1a1a1a;padding:10px 16px;font-weight:700;font-size:17px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.tk>.th small{font-weight:400;font-size:13px}
.tk>.tp{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tk .cd{border:0;border-radius:0;background:transparent}
.tk .cd+.cd{border-left:2px dashed var(--ln)}
.tk .pl{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tx)}
#cards.cg{grid-template-columns:1fr}
.tk .cd.me{border:0}
.tk .cd:not(.opt){background:var(--bg)}
.tk .cd.opt .pl{color:var(--mu)}
@media(max-width:560px){.tk .cd+.cd{border-left:0;border-top:2px dashed var(--ln)}
}
.cd select{font:inherit;padding:10px;border-radius:6px;border:2px solid var(--ln);background:var(--bg);color:var(--tx)}

/* Buchungsstil Training (abgeleitet von HappyMe) */
.tf{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;max-width:960px;margin:0 0 6px}
.tf>label{display:block;cursor:pointer;position:relative}
.tf input{position:absolute;opacity:0;pointer-events:none}
.tf .tc{background:var(--sf);border:2px solid var(--ln);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:6px;height:100%;transition:border-color .15s,box-shadow .15s}
.tf>label:hover .tc{border-color:var(--ak)}
.tf input:checked+.tc{border-color:var(--ak);box-shadow:0 0 0 3px color-mix(in srgb,var(--ak) 25%,transparent)}
.tf input:focus-visible+.tc{outline:3px solid var(--ak);outline-offset:2px}
.tc .tn{font:400 19px/1.2 var(--fh)}
.tc .pr{font:400 30px/1.1 var(--fh);margin-top:4px}
.tc .pp{font-size:13px;color:var(--mu)}
.tc .sv{font-size:13px;font-weight:500;color:var(--ok)}
.tc .bd{position:absolute;top:18px;right:14px;width:auto;height:auto;display:block;background:var(--ak);color:var(--on);clip-path:none;font:700 12px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding:8px 12px;border-radius:3px;transform:rotate(8deg);box-shadow:inset 0 0 0 2px var(--ak),inset 0 0 0 3px rgba(255,255,255,.7);align-self:auto}.tf .tc{position:relative}.tc .tn{padding-right:104px;min-height:24px}.tc .pp,.tc .sv{min-height:1.4em}.tf .tc .qty{margin-top:auto;padding-top:12px}
.df{display:grid;gap:14px;max-width:640px;background:var(--sf);border:2px solid var(--ln);border-radius:8px;padding:18px}
.df label{display:flex;flex-direction:column;gap:4px;font-size:14px}
.df input[type=text],.df input[type=email],.df input[type=tel]{font:16px var(--fb);padding:10px;border-radius:6px;border:2px solid var(--ln);background:var(--bg);color:var(--tx)}
.df input:focus{border-color:var(--ak);outline:0}
.df .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.pay label.ck{align-items:flex-start;font-size:14px;color:var(--mu)}
.pay label.ck input{margin-top:4px}
.nt{max-width:640px;margin:0 0 22px;padding:14px 16px;border-left:3px solid var(--ak);background:var(--sf);border-radius:0 6px 6px 0;font-size:14px}
.nt a{color:var(--tx);font-weight:500}
.bk{margin:0 0 6px;font-size:14px}.bk a{color:var(--mu)}
#msg{min-height:1.4em;color:var(--ak);font-weight:500;margin:10px 0 0}
.top .w{display:flex;justify-content:space-between;align-items:center}
.top .w a.bl{color:var(--bg);font-size:13px;opacity:.8;text-decoration:none}
/* Mehrfachbuchung, Zahlarten */
.tf .tc{height:auto}
.tf .tc .qty{margin-top:auto}
.tf .tc.on,.tf .tc:has(output:not(:empty)):has(.qty button){}
.df .pm{display:grid;gap:10px}
.df .pm>b{font-weight:500}
.df .pm label.po{flex-direction:row;align-items:flex-start;gap:12px;border:2px solid var(--ln);border-radius:8px;padding:12px 14px;background:var(--bg);cursor:pointer;text-align:left;color:var(--tx)}
.df .pm label.po:has(input:checked){border-color:var(--ak);box-shadow:0 0 0 3px color-mix(in srgb,var(--ak) 25%,transparent)}
.df .pm label.po input{margin:3px 0 0;flex:none;accent-color:var(--ak)}
.df .pm label.po span{display:flex;flex-direction:column;gap:2px}
.df .pm label.po small{color:var(--mu);font-size:13px}
.df label.ck{flex-direction:row;gap:10px;align-items:flex-start;color:var(--mu)}
.df label.ck input{margin-top:4px;flex:none;accent-color:var(--ak)}
.cd.cx{background:var(--sf);border:2px solid var(--ln);border-radius:8px;padding:16px;margin:0 0 12px;max-width:640px;display:flex;flex-direction:column;gap:10px}
.cd.cx .pl{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cd.cx label{display:flex;flex-direction:column;gap:4px;font-size:14px}
.cd.cx select,.cd.cx input{font:16px var(--fb);padding:10px;border-radius:6px;border:2px solid var(--ln);background:var(--bg);color:var(--tx)}
.cd.cx .gf{display:grid;gap:10px}
#cards{max-width:640px;margin:0 0 6px}
/* Adressfelder, Notiz, Gutschein */
.df .rw{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.df .rw.a{grid-template-columns:3fr 1fr}
.df .rw.b{grid-template-columns:1fr 2fr}
@media(max-width:520px){.df .rw,.df .rw.a,.df .rw.b{grid-template-columns:1fr}}
.df .gp{border:0;padding:0;margin:0;display:grid;gap:12px}
.df .gp>legend{font-weight:500;padding:0;margin:0 0 4px}
.df textarea,.df select{font:16px var(--fb);padding:10px;border-radius:6px;border:2px solid var(--ln);background:var(--bg);color:var(--tx)}
.df textarea{min-height:90px;resize:vertical}
.df .cpr{display:flex;gap:8px;align-items:stretch}.df .cpr input{flex:1;min-width:0}
.df .cpr button{white-space:nowrap}
#cpm{font-size:14px;color:var(--mu);margin:4px 0 0;min-height:1.2em}