/* Seite /work: drei Demos, die per Name und Farbe in die Marke des Kunden wechseln. Alles in rem wie style.css. */
.w-seite{--b:#1F5FBF;--b-t:#fff;--r:.625rem;--f:var(--sans);--b-weich:color-mix(in srgb,var(--b) 11%,#fff)}
.w-hero .in{padding-top:clamp(8.5rem,20vh,11rem);padding-bottom:3.5rem}
.w-hero h1{max-width:46rem}
.w-hero .lead{margin-top:1.25rem}
.w-hero .zeile{margin-bottom:1.25rem}

.w-marke{background:rgb(255 255 255/.94);border-block:1px solid var(--linie);position:relative;z-index:40}
@media(min-width:1024px){.w-marke{position:sticky;top:calc(4.75rem + 1px);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}}
.w-marke-in{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.875rem 1.75rem;padding-block:.875rem}
.w-feld{display:grid;gap:.3125rem;min-width:0}
.w-feld>span,.w-feld>label{font-size:.8125rem;font-weight:500;color:var(--ton)}
.w-feld-name{flex:1 1 11rem;max-width:18rem}
.w-seite .w-text{width:100%;height:2.5rem;min-height:0;padding:0 .75rem;border:1px solid #D6D6DC;border-radius:.375rem;font:500 .9375rem/1 var(--sans);color:var(--tinte);background:#fff}
.w-seite .w-text:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:transparent}
.w-farben{display:flex;align-items:center;gap:.4375rem;height:2.5rem}
.w-farbe{width:1.75rem;height:1.75rem;border-radius:50%;border:0;padding:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgb(0 0 0/.08);transition:transform .15s}
.w-farbe:hover{transform:scale(1.1)}
.w-farbe[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--tinte)}
.w-farbe:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.w-eigen{position:relative;width:1.75rem;height:1.75rem;border-radius:50%;background:conic-gradient(#F2591D,#E9407A,#6A4BFF,#1F5FBF,#1F6F54,#F2C230,#F2591D);cursor:pointer;overflow:hidden;box-shadow:inset 0 0 0 1px rgb(0 0 0/.08)}
.w-eigen input{position:absolute;inset:-.5rem;width:calc(100% + 1rem);height:calc(100% + 1rem);min-height:0;opacity:0;cursor:pointer;padding:0;border:0}
.w-eigen:focus-within{outline:2px solid var(--akzent);outline-offset:3px}
.w-eigen.an{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--tinte)}
.w-links{display:flex;flex-direction:column;gap:.375rem;margin-left:auto;min-width:0}
.w-links-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem}
.w-link-info{width:0;min-width:100%;font-size:.75rem;line-height:1.3;color:var(--ton);text-align:right;overflow-wrap:anywhere}
#m-kunde:disabled{background:#EDEDF0;color:var(--grau);box-shadow:none;cursor:not-allowed;transform:none}
@media(max-width:1023px){.w-links{margin-left:0}.w-link-info{text-align:left}}

.w-seg{display:inline-flex;flex-wrap:wrap;gap:.125rem;padding:.1875rem;background:var(--nebel);border-radius:.5rem;max-width:100%}
.w-seg label{position:relative;cursor:pointer}
.w-seg input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.w-seg span{display:block;min-width:2.125rem;padding:.4375rem .75rem;border-radius:.3125rem;font-size:.9375rem;font-weight:500;line-height:1.25;text-align:center;color:var(--ton);transition:background-color .15s,color .15s,box-shadow .15s}
.w-seg input:checked+span{background:#fff;color:var(--tinte);box-shadow:0 0 0 1px rgb(19 19 21/.06),0 .0625rem .25rem rgb(19 19 21/.12)}
.w-seg input:focus-visible+span{outline:2px solid var(--akzent);outline-offset:1px}
.w-seg input:disabled{cursor:not-allowed}
.w-seg input:disabled+span{opacity:.38;text-decoration:line-through}

.w-demo h2{margin-bottom:2.5rem}
.w-app{background:#fff;border:1px solid var(--linie);border-radius:1rem;box-shadow:var(--schatten);overflow:hidden}
.w-app-kopf{display:flex;align-items:center;gap:.625rem;min-height:3.5rem;padding:.625rem 1.25rem;border-bottom:1px solid var(--linie)}
.w-logo{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:calc(var(--r)*.6);background:var(--b);color:var(--b-t);font:600 .875rem/1 var(--f);transition:background-color .2s,color .2s}
.w-name{font-family:var(--f);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.w-app-titel{color:var(--ton);font-size:.9375rem;white-space:nowrap}
.w-app-titel::before{content:"·";margin-right:.625rem;color:var(--grau)}
.w-muster{margin-left:auto;flex:none;padding:.1875rem .5625rem;border-radius:99rem;background:var(--nebel);color:var(--ton);font-size:.8125rem;font-weight:500;white-space:nowrap}
@media(max-width:520px){.w-app-titel{display:none}}

.w-steuer{display:grid;gap:1.5rem;align-content:start;padding:1.75rem;min-width:0}
.w-steuer fieldset{border:0;margin:0;padding:0;min-width:0}
.w-steuer legend,.w-regler-kopf label{display:block;padding:0;margin-bottom:.5rem;font-size:.9375rem;font-weight:500;color:var(--tinte)}
.w-regler-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.w-regler-kopf output{font-weight:600;font-variant-numeric:tabular-nums;font-size:.9375rem}
.w-seite .w-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:1.75rem;margin:0;padding:0;border:0;box-shadow:none;background:transparent;cursor:pointer;--p:0%}
.w-range::-webkit-slider-runnable-track{height:.3125rem;border-radius:99rem;background:linear-gradient(to right,var(--b) var(--p),var(--linie) var(--p))}
.w-range::-moz-range-track{height:.3125rem;border-radius:99rem;background:var(--linie)}
.w-range::-moz-range-progress{height:.3125rem;border-radius:99rem;background:var(--b)}
.w-range::-webkit-slider-thumb{-webkit-appearance:none;width:1.375rem;height:1.375rem;margin-top:-.53125rem;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px rgb(19 19 21/.14),0 .125rem .375rem rgb(19 19 21/.24)}
.w-range::-moz-range-thumb{width:1.375rem;height:1.375rem;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px rgb(19 19 21/.14),0 .125rem .375rem rgb(19 19 21/.24)}
.w-seite .w-range:focus{outline:0}
.w-seite .w-range:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:.25rem}
.w-haken{display:grid;gap:.4375rem}
.w-haken label{display:flex;align-items:center;gap:.625rem;min-height:1.75rem;font-size:.9375rem;cursor:pointer}
.w-haken input{flex:none;width:1.125rem;height:1.125rem;margin:0;accent-color:var(--b);cursor:pointer}
.w-seite .w-haken input:focus{outline:0}
.w-seite .w-haken input:focus-visible{outline:2px solid var(--b);outline-offset:2px}

.w-rechner{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.w-rechner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.w-ergebnis{display:flex;flex-direction:column;padding:2rem 1.75rem;background:var(--b);color:var(--b-t);transition:background-color .2s,color .2s;min-width:0}
.w-klein{font-size:.9375rem}
.w-matt{opacity:.76}
.w-preis{font-family:var(--f);font-size:clamp(2.75rem,2.2rem + 1.8vw,4rem);line-height:1.1;letter-spacing:-.03em;font-weight:500;font-variant-numeric:tabular-nums;margin-top:.25rem}
.w-balken{display:flex;gap:.125rem;height:.4375rem;margin-top:1.5rem;border-radius:99rem;overflow:hidden;background:color-mix(in srgb,var(--b-t) 16%,transparent)}
.w-balken i{display:block;height:100%;width:0;background:var(--b-t);transition:width .25s}
.w-balken i+i{opacity:.55}
.w-posten{display:grid;gap:0;margin:1.25rem 0 1.5rem}
.w-posten>div{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;border-top:1px solid color-mix(in srgb,var(--b-t) 20%,transparent);font-size:.9375rem}
.w-posten dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500}
.w-cta{display:flex;align-items:center;justify-content:center;min-height:2.875rem;padding:.5rem 1.25rem;border:0;border-radius:var(--r);background:var(--b-t);color:var(--b);font:600 .9375rem/1.2 var(--f);cursor:pointer;margin-top:auto;transition:opacity .15s,background-color .2s,color .2s}
.w-cta:hover{opacity:.9}
.w-cta:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.w-cta:disabled{opacity:.7;cursor:default}
.w-cta-marke{background:var(--b);color:var(--b-t);margin-top:0;flex:none}
.w-cta-marke:focus-visible{outline-color:var(--b)}
.w-fluss{list-style:none;display:grid;gap:.375rem;margin-top:1.125rem;font-size:.9375rem}
.w-fluss[hidden]{display:none}
.w-fluss li{display:flex;align-items:center;gap:.5rem;opacity:.35;transition:opacity .25s}
.w-fluss li::before{content:"";flex:none;width:1.125rem;height:1.125rem;border-radius:50%;box-shadow:inset 0 0 0 .09375rem currentColor}
.w-fluss li.an{opacity:1}
.w-fluss li.an::before{background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17.2-5-5 1.9-1.9 3.1 3.1 6.8-6.8 1.9 1.9-8.7 8.7z'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17.2-5-5 1.9-1.9 3.1 3.1 6.8-6.8 1.9 1.9-8.7 8.7z'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:none}
.w-demohinweis{margin-top:.75rem}

.w-konfig{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"bild" "steuer" "summe"}
@media(min-width:900px){.w-konfig{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"bild steuer" "summe steuer"}.w-konfig .w-steuer{border-left:1px solid var(--linie)}}
.w-bild{grid-area:bild;position:relative;background:linear-gradient(180deg,var(--b-weich),#fff 78%);min-width:0;display:flex;align-items:flex-end}
.w-bild svg{display:block;width:100%;height:auto}
.w-mass{position:absolute;left:1.25rem;top:1rem;font-size:.9375rem;font-weight:500;font-variant-numeric:tabular-nums}
.w-konfig .w-steuer{grid-area:steuer}
.w-regel{font-size:.875rem;color:var(--ton);padding:.5rem .75rem;background:var(--nebel);border-radius:.375rem}
.w-summe{grid-area:summe;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.75rem;border-top:1px solid var(--linie)}
.w-summe .w-klein{color:var(--ton)}
.w-summe-preis{font-family:var(--f);font-size:clamp(1.75rem,1.5rem + .8vw,2.25rem);line-height:1.15;letter-spacing:-.02em;font-weight:500;font-variant-numeric:tabular-nums}

.w-browser{background:var(--nebel);border:1px solid var(--linie);border-radius:1rem;box-shadow:var(--schatten);overflow:hidden}
.w-leiste{display:flex;align-items:center;gap:.875rem;padding:.5rem 1rem;background:#fff;border-bottom:1px solid var(--linie)}
.w-punkte{display:flex;gap:.3125rem;flex:none}
.w-punkte i{width:.625rem;height:.625rem;border-radius:50%;background:#DEDEE3}
.w-adresse{flex:1 1 0;min-width:0;padding:.3125rem .75rem;border-radius:.375rem;background:var(--nebel);color:var(--ton);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-geraete{flex:none}
.w-buehne{display:flex;justify-content:center;padding:1rem}
.w-lp{width:100%;background:#fff;border-radius:.625rem;box-shadow:0 0 0 1px rgb(19 19 21/.06),0 .5rem 1.5rem -.75rem rgb(19 19 21/.2);container-type:inline-size;height:40rem;overflow:auto;transition:max-width .35s ease;scrollbar-width:thin;font-family:var(--f)}
.w-lp:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.w-lp-in{display:grid;gap:2.5rem;padding:1rem 1.25rem 1.25rem}
@container(min-width:44rem){.w-lp-in{gap:4rem;padding:1.25rem 2.5rem 1.5rem}}
.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.lp-marke{display:flex;align-items:center;gap:.5rem;min-width:0}
.lp-links{display:none;gap:1.5rem;color:var(--ton);font-size:.9375rem}
@container(min-width:44rem){.lp-links{display:flex}}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:2.5rem;padding:.4375rem 1rem;border:0;border-radius:var(--r);background:var(--b);color:var(--b-t);font:600 .9375rem/1.2 var(--f);cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s}
.lp-btn:hover{opacity:.92}
@container(max-width:23rem){.lp-nav .lp-btn{display:none}}
.lp-gross{min-height:3rem;padding-inline:1.5rem;font-size:1rem}
.lp-hero{display:grid;gap:2rem;align-items:center}
@container(min-width:44rem){.lp-hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3rem}}
.lp-zeile{font-size:.9375rem;font-weight:600;color:var(--tinte);opacity:.7;margin-bottom:.75rem}
.lp-titel{font-size:clamp(1.875rem,7cqi,3.25rem);line-height:1.08;letter-spacing:-.025em;font-weight:500;text-wrap:balance}
.lp-klein{font-size:clamp(1.5rem,4.5cqi,2.25rem)}
.lp-text{margin:1rem 0 1.5rem;color:var(--ton);font-size:1.0625rem;line-height:1.5;max-width:30rem}
.lp-karte{padding:1.25rem;border-radius:calc(var(--r)*1.4);background:var(--b-weich)}
.lp-k-t{font-weight:600;margin-bottom:.75rem}
.lp-karte ul{list-style:none;display:grid;gap:.5rem;font-size:.9375rem}
.lp-karte li{display:flex;align-items:center;gap:.5rem;color:var(--ton)}
.lp-karte li::before{content:"";width:1rem;height:1rem;flex:none;border-radius:calc(var(--r)*.35);background:#fff;box-shadow:inset 0 0 0 1px rgb(19 19 21/.18)}
.lp-karte li.an{color:var(--tinte)}
.lp-karte li.an::before{background:var(--b);box-shadow:none}
.lp-fort{height:.375rem;margin-top:1rem;border-radius:99rem;background:#fff;overflow:hidden}
.lp-fort i{display:block;width:75%;height:100%;background:var(--b)}
.lp-drei{display:grid;gap:1.25rem}
@container(min-width:34rem){.lp-drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-drei>div{padding-top:1rem;border-top:.125rem solid var(--b)}
.lp-drei b{display:block;font-weight:600;margin-bottom:.25rem}
.lp-drei p{color:var(--ton);font-size:.9375rem;line-height:1.45}
.lp-form{display:grid;gap:1.125rem;padding:1.5rem;border-radius:calc(var(--r)*1.4);background:var(--nebel)}
.lp-felder{display:grid;gap:.875rem}
@container(min-width:34rem){.lp-felder{grid-template-columns:1fr 1fr}}
.lp-felder label{display:block;margin-bottom:.25rem;font-size:.875rem;font-weight:500}
.w-seite .lp-felder input{width:100%;height:2.75rem;padding:0 .75rem;border:1px solid #D6D6DC;border-radius:calc(var(--r)*.7);background:#fff;font:400 1rem var(--sans);color:var(--tinte)}
.w-seite .lp-felder input:focus{outline:2px solid var(--b);outline-offset:1px;border-color:transparent}
.lp-form .lp-btn{justify-self:start}
.lp-meldung{font-size:.9375rem;min-height:1.4em;color:var(--ton)}
.lp-fuss{display:flex;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1px solid var(--linie);color:var(--ton);font-size:.875rem}
@media(max-width:699px){.w-geraete{display:none}.w-lp{height:auto;overflow:visible}.w-buehne{padding:.625rem}}
.w-wp-beleg{margin-top:.875rem;font-size:.9375rem}
.w-wp-beleg a{color:var(--tinte);text-decoration:underline;text-underline-offset:.2em}
.w-fussnote{margin-top:1rem;font-size:.9375rem;color:var(--ton);max-width:46rem}

.w-schluss{padding-block:4.5rem;text-align:center}
.w-schluss .lead{margin:.75rem auto 0}
.w-schluss .w-antwort{margin:1rem auto 0;font-weight:500}
.w-schluss .cta{justify-content:center;margin-top:1.75rem}
@media(min-width:768px){.w-schluss{padding-block:6rem}}
/* Bericht eines Musterlaufs */
.w-tor .in{display:grid;gap:2.5rem}
@media(min-width:1024px){.w-tor .in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:4.5rem;align-items:start}}
.w-tor-liste>div{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding-block:.875rem;border-top:1px solid var(--linie)}
.w-tor-liste>div:first-child{border-top:0;padding-top:0}
.w-tor-liste dt{font-size:.9375rem;color:var(--tinte);min-width:0}
.w-tor-liste small{display:block;margin-top:.125rem;font-size:.875rem;color:var(--ton)}
.w-tor-liste dd{margin:0;font-size:.9375rem;font-weight:500;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Demo 4: Kundenportal */
.p-raster{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.p-raster{grid-template-columns:16rem minmax(0,1fr)}}
.p-t{margin-bottom:.625rem;font-size:.875rem;font-weight:500;color:var(--ton)}
.p-liste{padding:1.5rem;border-bottom:1px solid var(--linie);background:var(--nebel);min-width:0}
@media(min-width:900px){.p-liste{border-bottom:0;border-right:1px solid var(--linie)}}
.p-projekte{display:grid;gap:.25rem}
.p-proj{position:relative;display:block;width:100%;padding:.625rem 1.75rem .625rem .75rem;border:0;border-radius:calc(var(--r)*.7);background:transparent;color:var(--tinte);font:500 .9375rem/1.3 var(--f);text-align:left;cursor:pointer;transition:background-color .15s}
.p-proj small{display:block;margin-top:.125rem;font:400 .8125rem/1.3 var(--sans);color:var(--ton)}
.p-proj:hover{background:rgb(19 19 21/.04)}
.p-proj[aria-selected="true"]{background:#fff;box-shadow:0 0 0 1px rgb(19 19 21/.07),0 .0625rem .25rem rgb(19 19 21/.1)}
.p-proj:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
.p-proj.offen::after{content:"";position:absolute;right:.75rem;top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;border-radius:50%;background:var(--b)}
.p-detail{display:grid;gap:1.25rem;align-content:start;padding:1.5rem;min-width:0}
@media(min-width:640px){.p-detail{padding:1.75rem}}
.p-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.p-kopf h3{font-family:var(--f);font-size:1.25rem;line-height:1.3}
.p-kopf h3:focus{outline:0}
.p-status{flex:none;padding:.1875rem .625rem;border-radius:99rem;background:var(--b-weich);font-size:.8125rem;font-weight:500}
.p-stufen{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem;font-size:.8125rem;color:var(--grau)}
.p-stufen li{padding-top:.4375rem;border-top:.1875rem solid var(--linie);overflow-wrap:anywhere;transition:border-color .2s,color .2s}
.p-stufen li.an{border-color:var(--b);color:var(--tinte)}
.p-stufen li.jetzt{font-weight:500}
.p-frei{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;padding:1rem 1.125rem;border-radius:var(--r);background:var(--b-weich)}
.p-frei.ruhig{background:var(--nebel)}
.p-frei.ruhig .w-cta{display:none}
.p-frei-text{flex:1 1 13rem;min-width:0}
.p-frei-text b{display:block;font-weight:500}
.p-frei-text span{display:block;font-size:.9375rem;color:var(--ton)}
.p-zwei{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:680px){.p-zwei{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.p-dateien{list-style:none}
.p-dateien li{display:flex;justify-content:space-between;gap:.75rem;padding-block:.5rem;border-top:1px solid var(--linie);font-size:.9375rem}
.p-dateien span{min-width:0;overflow-wrap:anywhere}
.p-dateien small{flex:none;font-size:.8125rem;color:var(--ton)}
.p-chat{display:flex;flex-direction:column;gap:.375rem;max-height:11.5rem;overflow-y:auto;padding:.125rem}
.p-m{align-self:flex-start;max-width:88%;padding:.4375rem .6875rem;border-radius:calc(var(--r)*.8);background:var(--nebel);font-size:.9375rem;line-height:1.35;overflow-wrap:anywhere}
.p-m.ich{align-self:flex-end;background:var(--b);color:var(--b-t)}
.p-senden{display:flex;gap:.5rem;margin-top:.625rem}
.p-senden .w-text{flex:1 1 auto;min-width:0;width:auto}
.p-senden .w-cta{min-height:2.5rem;padding-inline:1rem}

/* Demo 5: Automatisierung */
@media(min-width:900px){.w-rechner.a-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}}
.a-raster .w-feld>label{font-size:.9375rem;color:var(--tinte)}
.a-lauf{padding:1.75rem;background:var(--nebel);border-top:1px solid var(--linie);min-width:0}
@media(min-width:900px){.a-lauf{border-top:0;border-left:1px solid var(--linie)}}
.a-zeit{list-style:none;display:grid}
.a-zeit li{position:relative;display:grid;grid-template-columns:1.625rem minmax(0,1fr);column-gap:.75rem;padding-bottom:1rem;opacity:.45;transition:opacity .25s}
.a-zeit li:last-child{padding-bottom:0}
.a-zeit li:not(:last-child)::before{content:"";position:absolute;left:calc(.8125rem - 1px);top:1.625rem;bottom:0;width:2px;background:var(--linie)}
.a-zeit li.an{opacity:1}
.a-zeit li.an:not(:last-child)::before{background:var(--b)}
.a-n{display:grid;place-items:center;width:1.625rem;height:1.625rem;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #D6D6DC;font-size:.8125rem;font-weight:600;transition:background-color .2s,color .2s}
.a-zeit li.an .a-n{background:var(--b);color:var(--b-t);box-shadow:none}
.a-zeit b{display:block;font-weight:500;line-height:1.625rem;font-size:.9375rem}
.a-zeit small{display:block;font-size:.875rem;line-height:1.35;color:var(--ton);overflow-wrap:anywhere}
.a-mail{margin-top:1.25rem;padding:1.125rem;border-radius:var(--r);border-top:.1875rem solid var(--b);background:#fff;box-shadow:0 0 0 1px rgb(19 19 21/.06);font-family:var(--f);font-size:.9375rem;overflow-wrap:anywhere}
.a-mail[hidden]{display:none}
.a-mail-kopf{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.a-mail-b{font-weight:600;margin-bottom:.25rem}

.w-blatt-link{margin-top:1.25rem;font-size:.9375rem;color:var(--ton)}
.w-blatt-link a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
@media(prefers-reduced-motion:reduce){.w-seite *{transition:none!important}}
/* Demo 6: Buchung */
.t-tage{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.375rem}
.t-zeiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem}
.t-tage label,.t-zeiten label{position:relative;cursor:pointer;min-width:0}
.t-tage input,.t-zeiten input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.t-tage span,.t-zeiten span{display:block;min-height:2.75rem;padding:.625rem .25rem;border-radius:var(--r);box-shadow:inset 0 0 0 1px #D6D6DC;font-size:.9375rem;font-weight:500;line-height:1.5;text-align:center;font-family:var(--f);transition:background-color .15s,color .15s,box-shadow .15s}
.t-tage span{padding-block:.4375rem;font-size:.8125rem;line-height:1.25;overflow-wrap:anywhere}
.t-tage small{display:block;font-size:.8125rem;font-weight:400;color:var(--ton)}
.t-tage label:hover span,.t-zeiten label:hover input:not(:disabled)+span{box-shadow:inset 0 0 0 1px var(--b)}
.t-tage input:checked+span,.t-zeiten input:checked+span{background:var(--b);color:var(--b-t);box-shadow:none}
.t-tage input:checked+span small{color:inherit;opacity:.8}
.t-tage input:focus-visible+span,.t-zeiten input:focus-visible+span{outline:2px solid var(--b);outline-offset:1px}
.t-zeiten input:disabled{cursor:not-allowed}
.t-zeiten input:disabled+span{opacity:.38;text-decoration:line-through}
.t-ueber{margin-bottom:.75rem;font-size:.875rem;font-weight:500;color:var(--ton)}
.t-karte{padding:1.125rem;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgb(19 19 21/.06);font-family:var(--f);font-size:.9375rem}
.t-karte-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;min-width:0}
.t-status{margin-left:auto;flex:none;padding:.1875rem .5625rem;border-radius:99rem;background:var(--nebel);color:var(--ton);font-size:.8125rem;font-weight:500;white-space:nowrap}
.t-status.an{background:var(--b);color:var(--b-t)}
.t-felder>div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.75rem;padding-block:.5rem;border-top:1px solid var(--linie)}
.t-felder>div[hidden]{display:none}
.t-felder dt{color:var(--ton)}
.t-felder dd{font-weight:500;overflow-wrap:anywhere}
/* Ansicht mit festem Namen: nur Überschrift und Demos, alle Akzente in der Markenfarbe */
.z-body::before,.z-body::after{content:none}
.z-seite{--akzent:var(--b);--akzent-d:var(--tinte)}
.z-seite::before{content:"";display:block;height:.375rem;background:var(--b);transition:background-color .2s}
.z-kopf{padding-top:clamp(3rem,2rem + 4vw,5.5rem)}
.z-kopf .w-logo{width:3rem;height:3rem;font-size:1.375rem;margin-bottom:1.5rem}
.z-kopf h1{font-family:var(--f);max-width:46rem}
.z-kopf .lead{margin-top:1rem}
.z-kopf + .abschnitt{padding-top:3.5rem}
.z-seite .zwei{font-family:var(--f)}
.z-seite .label.dunkel{color:var(--ton)}
.z-fuss .in{border-top:1px solid var(--linie);padding-block:1.25rem 2rem;font-size:.8125rem}
.z-fuss a{color:var(--ton);text-decoration:underline;text-underline-offset:.15em}