/*
  creativecouch | Webdesign, SEO und GEO
  Paul Böstro
  Pappelweg 7, 35510 Butzbach
  https://creativecouch.de
*/
@layer tokens,base,layout,components,utilities,sections,pages,reveal,a11y;@layer sections{.abo-seite{--abo-rot:var(--cc-red-hover);min-height:80vh;min-height:80svh;padding:calc(var(--header-h) + clamp(5.6rem, 3rem + 5vw, 10rem)) 0 clamp(8rem, 5rem + 5vw, 12rem);background:var(--cc-mist);color:var(--cc-ink)}.abo-seite__in{display:grid;grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);gap:4.8rem 9.6rem;align-items:start}.abo-seite__kopf{display:grid;gap:3.2rem;align-content:start}.abo-seite__o,.abo-seite__liste-h{font-size:var(--fs-16);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)}.abo-seite__t{font-family:var(--font-head);font-size:var(--fs-88);line-height:1;letter-spacing:-.03em}.abo-seite__strong,.abo-seite__light{display:block}.abo-seite__strong{font-weight:800}.abo-seite__light{font-weight:300}.abo-seite__x{max-width:40ch;font-size:var(--fs-22);line-height:1.5;font-weight:300}.abo-seite__btns{display:flex;flex-wrap:wrap;gap:1.2rem}.abo-seite .btn:not(.btn--ghost){--b-bg:var(--abo-rot);--b-bd:var(--abo-rot);--b-bg-h:var(--cc-ink);--b-bd-h:var(--cc-ink);--i-fg:var(--abo-rot)}.abo-seite__liste{border-top:2px solid var(--cc-ink)}.abo-seite__liste-h{padding:1.6rem 0}.abo-seite__liste a{display:grid;gap:.4rem;padding:2rem 0;border-top:1px solid var(--cc-line-strong);color:var(--cc-ink);text-decoration:none}.abo-seite__liste b{font-family:var(--font-head);font-size:var(--fs-22);line-height:1.25}.abo-seite__liste a > span{font-size:var(--fs-16);color:var(--cc-muted)}.abo-seite__liste a:hover b,.abo-seite__liste a:focus-visible b{text-decoration:underline;text-underline-offset:.2em}.abo-seite__liste a:focus-visible{outline:3px solid var(--abo-rot);outline-offset:2px}.abo-form{display:grid;gap:1rem;border-top:2px solid var(--cc-ink)}.abo-form__label{font-family:var(--font-head);font-weight:700;font-size:var(--fs-17)}.abo-form__feld{min-width:0;min-height:5.6rem;padding:1.2rem 2rem;border:2px solid var(--cc-ink);border-radius:var(--pill);background:var(--cc-white);color:var(--cc-ink);font:inherit;font-size:var(--fs-19)}.abo-form__feld::placeholder{color:var(--cc-muted);opacity:1}.abo-form__feld:focus-visible{outline:3px solid var(--abo-rot);outline-offset:3px}.abo-form .btn{justify-self:start;margin-top:.4rem}.abo-form__fehler{display:none;gap:.8rem;align-items:flex-start;font-size:var(--fs-17);line-height:1.5;font-weight:600;color:var(--abo-rot)}.abo-form__fehler:target{display:flex}.abo-form__fehler{scroll-margin-top:calc(var(--header-h) + 14rem)}.abo-form:has(.abo-form__fehler:target) .abo-form__feld{border-color:var(--abo-rot)}.abo-form__fehler svg{flex:none;width:2rem;height:2rem;margin-top:.2rem}.abo-form__hinweis{font-size:var(--fs-16);line-height:1.5;font-weight:300;color:var(--cc-muted)}.abo-form__hinweis a{color:var(--abo-rot);text-decoration:underline;text-underline-offset:.2em}.abo-form__hinweis a:hover,.abo-form__hinweis a:focus-visible{text-decoration-thickness:2px}.abo-form__honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.abo-seite--wege .abo-seite__in{grid-template-columns:minmax(0, 1fr);gap:4.8rem}.abo-wege{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:2.4rem}.abo-weg{display:grid;gap:1.6rem;align-content:start;padding:clamp(2.8rem, 2rem + 2vw, 4.8rem);border-radius:1.6rem;background:var(--cc-white);box-shadow:var(--shadow-1)}.abo-weg--wa{background:var(--teal-50)}.abo-weg__o{font-size:var(--fs-16);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)}.abo-weg__t{font-family:var(--font-head);font-size:var(--fs-32);font-weight:700;line-height:1.2}.abo-weg__x{max-width:40ch;font-size:var(--fs-18);line-height:1.6;font-weight:300}.abo-weg > .btn{justify-self:start}.abo-weg__qrbox{display:flex;gap:1.6rem;align-items:center;margin-top:.8rem;font-size:var(--fs-16);line-height:1.5;font-weight:300;color:var(--cc-muted)}.abo-weg__qr{flex:none;width:12rem;height:12rem;border-radius:.8rem}.abo-form--karte{border-top:0}.abo-wege__fuss{font-size:var(--fs-16);line-height:1.5;font-weight:300;color:var(--cc-muted)}.abo-wege__fuss a{color:var(--abo-rot);text-decoration:underline;text-underline-offset:.2em}.abo-wege__fuss a:hover,.abo-wege__fuss a:focus-visible{text-decoration-thickness:2px}@media (max-width: 991px){.abo-wege{grid-template-columns:minmax(0, 1fr)}}@media (max-width: 991px),(hover: none){.abo-weg__qrbox{display:none}}@media (max-width: 991px){.abo-seite__in{grid-template-columns:minmax(0, 1fr)}}@media (max-width: 599px){.abo-weg > .btn,.abo-form .btn{justify-self:stretch;justify-content:space-between}}.abo-ablauf{--aa-ph:62rem;padding:clamp(6.4rem, 4rem + 5vw, 12rem) 0;background:var(--cc-paper);color:var(--cc-ink)}.abo-ablauf__in{display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"kopf handy" "liste handy";grid-template-rows:auto 1fr;gap:3.2rem clamp(4rem, 2rem + 4vw, 9.6rem);align-items:start;max-width:108rem}.abo-ablauf__kopf{grid-area:kopf;display:grid;gap:1.6rem}.abo-ablauf__o{font-size:var(--fs-16);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)}.abo-ablauf__t{font-family:var(--font-head);font-size:var(--fs-48);line-height:1.05;letter-spacing:-.02em}.abo-ablauf__t span{display:block}.abo-ablauf__t span:first-child{font-weight:800}.abo-ablauf__t span + span{font-weight:300}.abo-ablauf__liste{grid-area:liste;display:grid;gap:2.4rem;justify-items:start}.abo-ablauf__schritte{display:grid;gap:.8rem;width:100%;margin:0;padding:0;list-style:none}.abo-ablauf__schritt{display:grid;grid-template-columns:4.4rem minmax(0, 1fr);gap:1.6rem;align-items:start;padding:1.6rem;border-radius:1.6rem;transition:background-color .3s, box-shadow .3s}.abo-ablauf__nr{display:grid;place-items:center;width:4.4rem;height:4.4rem;border:2px solid var(--cc-mist);border-radius:50%;background:var(--cc-white);color:var(--teal-700);font-family:var(--font-head);font-size:var(--fs-19);font-weight:700;transition:background-color .3s, border-color .3s, color .3s}.abo-ablauf__schritt h3{font-family:var(--font-head);font-size:var(--fs-22);font-weight:700;line-height:1.3}.abo-ablauf__schritt p{margin-top:.4rem;max-width:44ch;font-size:var(--fs-17);font-weight:300;line-height:1.55}.abo-ablauf__schritt.is-aktiv{background:var(--cc-white);box-shadow:0 1px 0 var(--cc-mist), 0 .8rem 2.4rem rgba(13, 34, 37, .06)}.abo-ablauf__schritt.is-aktiv .abo-ablauf__nr{border-color:var(--cc-red);background:var(--cc-red);color:var(--cc-white)}.abo-ablauf__schritt.is-fertig .abo-ablauf__nr{border-color:var(--cc-teal);background:var(--cc-teal);color:var(--cc-white)}.abo-ablauf__knopf{min-height:4.4rem;padding:.8rem 2rem;border:2px solid var(--cc-mist);border-radius:99rem;background:none;color:var(--teal-700);font:inherit;font-size:var(--fs-16);font-weight:600;cursor:pointer;transition:border-color .2s}.abo-ablauf__knopf:hover,.abo-ablauf__knopf:focus-visible{border-color:var(--cc-teal)}.no-js .abo-ablauf__knopf{display:none}.aa-handy{--w:calc(var(--aa-ph) * .485);grid-area:handy;align-self:center;flex:none;box-sizing:border-box;width:var(--w);height:var(--aa-ph);padding:10px;border-radius:calc(var(--w) * .17);background:var(--cc-logo);box-shadow:0 30px 60px -20px rgba(13, 34, 37, .45), inset 0 0 0 2px var(--teal-900)}.aa-schirm{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--w) * .14);background:var(--teal-50);color:var(--cc-ink);font-family:var(--font);font-size:13px;line-height:1.4}.aa-schirm abbr{text-decoration:none}.aa-insel{position:absolute;top:9px;left:35%;z-index:9;width:30%;height:20px;border-radius:20px;background:var(--cc-black)}.aa-kopf{display:flex;flex:none;align-items:center;gap:10px;padding:40px 14px 10px;border-bottom:1px solid var(--cc-mist);background:var(--cc-white)}.aa-ava{display:grid;flex:none;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cc-logo);color:var(--cc-white);font-family:var(--font-head);font-size:13px;font-weight:700}.aa-ava--klein{width:26px;height:26px;font-size:10.5px}.aa-name{font-family:var(--font-head);font-size:14px;font-weight:700;line-height:1.2}.aa-unter{font-size:11px;color:var(--cc-muted)}.aa-chat{display:flex;flex:1;flex-direction:column;justify-content:flex-end;min-height:0;overflow:hidden;padding:0 10px}.aa-msg{flex:none;overflow:hidden}.js .aa-msg{max-height:0;opacity:0}.no-js .aa-msg--tippt{display:none}.aa-msg__in{padding-top:8px}.aa-b{width:fit-content;max-width:84%;padding:8px 11px 7px;border-radius:14px;border-bottom-left-radius:4px;background:var(--cc-white);box-shadow:0 1px 0 rgba(13, 34, 37, .06)}.aa-b--ich{margin-left:auto;border-bottom-left-radius:14px;border-bottom-right-radius:4px;background:var(--cc-mist)}.aa-zeit{display:block;margin-top:2px;font-size:10px;text-align:right;color:var(--cc-muted)}.aa-knopf{display:block;margin-top:8px;padding:8px 0 2px;border-top:1px solid var(--cc-mist);text-align:center;color:var(--teal-700);font-weight:600}.aa-punkte{display:inline-flex;gap:4px;padding:2px 0}.aa-punkte i{display:block;width:6px;height:6px;border-radius:50%;background:var(--teal-300)}.aa-link{display:block;margin-top:6px;overflow:hidden;border-radius:10px;background:var(--teal-50)}.aa-geo{position:relative;display:block;height:92px;overflow:hidden;background:var(--cc-logo)}.aa-geo::before{content:"";position:absolute;top:-50px;right:-40px;width:150px;height:150px;border-radius:50%;background:var(--cc-teal);opacity:.7}.aa-geo span{position:absolute;bottom:8px;left:12px;color:var(--cc-white);font-family:var(--font-head);font-size:30px;font-weight:700;letter-spacing:.04em}.aa-link b{display:block;padding:7px 9px 0;font-size:12px;font-weight:600;line-height:1.3}.aa-link small{display:block;padding:2px 9px 7px;font-size:11px;color:var(--cc-muted)}.aa-tag{text-align:center}.aa-tag span{display:inline-block;padding:3px 10px;border-radius:8px;background:var(--cc-white);color:var(--cc-muted);font-size:11px;font-weight:500}.aa-spur{margin:6px -10px 0 0;overflow:hidden}.aa-reihe{display:flex;gap:8px}.aa-karte{flex:none;width:76%;overflow:hidden;border-radius:12px;background:var(--cc-white);box-shadow:0 1px 0 rgba(13, 34, 37, .06)}.aa-karte img,.aa-karte__grafik{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}.aa-karte__grafik{position:relative;overflow:hidden;background:var(--cc-teal)}.aa-karte__grafik::before{content:"";position:absolute;inset:auto -20% -60% 30%;height:140%;border-radius:50%;background:var(--cc-logo);opacity:.55}.aa-karte__grafik::after{content:"";position:absolute;top:22%;left:14%;width:46%;height:46%;border:3px solid var(--cc-white);border-radius:8px;opacity:.9}.aa-karte p{padding:7px 9px 0;font-size:12px;line-height:1.35}.aa-karte em{font-style:normal;color:var(--cc-muted)}.aa-karte .aa-knopf{margin:7px 9px 0;padding:7px 0 8px;font-size:12px}.aa-eingabe{display:flex;flex:none;align-items:flex-end;gap:8px;padding:8px 10px 18px;background:var(--teal-50)}.aa-feld{flex:1;box-sizing:border-box;min-height:34px;max-height:76px;overflow:hidden;padding:8px 13px;border-radius:18px;background:var(--cc-white);font-size:13px;line-height:1.35}.aa-feld.is-leer{color:var(--cc-muted)}.aa-senden{display:grid;flex:none;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cc-teal)}.aa-senden svg{width:16px;height:16px;fill:var(--cc-white)}.aa-schatten{position:absolute;inset:0;z-index:4;background:rgba(13, 34, 37, .35);opacity:0}.aa-blatt{position:absolute;right:0;bottom:0;left:0;z-index:5;padding:10px 16px 22px;border-radius:18px 18px 0 0;background:var(--cc-white);transform:translateY(105%)}.aa-griff{width:36px;height:4px;margin:0 auto 10px;border-radius:4px;background:var(--cc-mist)}.aa-blatt__t{margin-bottom:6px;font-family:var(--font-head);font-size:14px;font-weight:700;text-align:center}.aa-wahl{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--cc-mist);border-radius:8px}.aa-wahl:last-child{border-bottom:0}.aa-wahl i{flex:none;box-sizing:border-box;width:16px;height:16px;border:1.5px solid var(--teal-300);border-radius:50%}.aa-wahl b{display:block;font-size:13px;font-weight:600}.aa-wahl small{display:block;font-size:11px;line-height:1.3;color:var(--cc-muted)}.aa-wahl.is-gewaehlt{background:var(--teal-50)}.aa-wahl.is-gewaehlt i{border:5px solid var(--cc-teal)}.aa-sperre{position:absolute;inset:0;z-index:7;box-sizing:border-box;padding-top:78px;background:var(--cc-logo);color:var(--cc-white);text-align:center;opacity:0}.aa-sperre__tag{font-size:14px;font-weight:500}.aa-sperre__uhr{margin-top:4px;font-family:var(--font-head);font-size:64px;font-weight:500;line-height:1;letter-spacing:-.02em}.aa-mitteilung{position:absolute;top:200px;right:10px;left:10px;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:16px;background:var(--cc-white);color:var(--cc-ink);text-align:left;opacity:0;transform:translateY(-40px)}.aa-mitteilung__x{flex:1}.aa-mitteilung b{display:flex;justify-content:space-between;font-size:12px}.aa-mitteilung em{font-style:normal;font-weight:400;font-size:11px;color:var(--cc-muted)}.aa-mitteilung span{display:block;font-size:12px;line-height:1.35}.aa-tipp{position:absolute;z-index:8;box-sizing:border-box;width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid rgba(196, 54, 54, .75);border-radius:50%;background:rgba(196, 54, 54, .28);opacity:0;pointer-events:none}.aa-blende{position:absolute;inset:0;z-index:10;background:var(--teal-50);opacity:0;pointer-events:none}@media (max-width: 767px){.abo-ablauf{--aa-ph:min(600px, 150vw)}.abo-ablauf__in{grid-template-columns:minmax(0, 1fr);grid-template-areas:"kopf" "handy" "liste";grid-template-rows:none}.aa-handy{justify-self:center}.abo-ablauf__schritt{padding:1.2rem}}@media (prefers-reduced-motion: reduce){.abo-ablauf__schritt,.abo-ablauf__nr{transition:none}}}
