/* =========================================================================
   SiMu Studio – Interaktive Bausteine (Version 2)
   Wird nach styles.css geladen.
   ========================================================================= */

/* ---------- Lenis (weiches Scrollen) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Lade-Animation ---------- */
.loader { display: none; }
.intro .loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 300;
  background: var(--ink); color: var(--paper);
  animation: loaderFailsafe .01s 4.5s forwards; /* falls JS nicht lädt */
}
.loader__logo { display: flex; align-items: center; gap: clamp(14px, 3vw, 36px); padding: 0 24px; }
.loader__mark { height: clamp(90px, 16vw, 190px); width: auto; overflow: visible; flex: none; }
.loader__mark .lm-b { fill: var(--paper); }
.loader__wordwrap { display: block; overflow: hidden; }
.loader__word { display: block; height: clamp(70px, 13vw, 160px); width: auto; filter: invert(1) brightness(.96) sepia(.08); }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } }

/* Hero erst nach dem Auftritt zeigen – mit Sicherheitsnetz, falls JS fehlt */
.anim .hero-in { opacity: 0; animation: heroFailsafe .01s 5.5s forwards; }
@keyframes heroFailsafe { to { opacity: 1; } }
.no-js .scr:first-child { opacity: 1; transform: none; }

/* ---------- Maus-Begleiter ---------- */
.cursor { display: none; }
.has-cursor .cursor {
  display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent;
  transition: width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), margin .3s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, opacity .25s;
  opacity: 0;
}
.has-cursor .cursor.is-visible { opacity: 1; }
.has-cursor .cursor.on-dark { border-color: var(--paper); }
.has-cursor .cursor.is-link { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(254,108,4,.12); border-color: var(--accent); }
.has-cursor .cursor.is-label { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--accent); border-color: var(--accent); }
.cursor__label { color: #fff; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.is-label .cursor__label { opacity: 1; }

/* ---------- Hero: Wechselwort ---------- */
.hero__title { display: block; }
.hero__line { display: block; }
.rotator { display: inline-grid; vertical-align: top; }
.rotator__word {
  grid-area: 1 / 1; color: var(--accent); font-weight: 380; letter-spacing: -0.03em; padding-right: .06em;
  opacity: 0; transform: translateY(45%) rotate(3deg); filter: blur(6px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}
.rotator__word.is-active { opacity: 1; transform: none; filter: none; }
.rotator__word.is-out { opacity: 0; transform: translateY(-45%) rotate(-3deg); filter: blur(6px); }

/* ---------- Live-Vorschau ---------- */
.live { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: center; }
.live__glow { position: absolute; inset: 0 -5%; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-soft), transparent); z-index: 0; }
.phone {
  position: relative; z-index: 1; width: 274px; aspect-ratio: 9 / 19; flex: none;
  border-radius: 46px; background: #15120e; padding: 10px;
  box-shadow: inset 0 0 0 2px #2c2822, 0 2px 0 rgba(22,19,15,.08), 0 50px 80px -35px rgba(22,19,15,.55);
}
.phone__notch { position: absolute; z-index: 3; top: 18px; left: 50%; width: 86px; height: 22px; margin-left: -43px; border-radius: 20px; background: #15120e; }
.phone__screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; }

.live__panel {
  position: relative; z-index: 2; margin-left: -18px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 22px 24px; box-shadow: var(--shadow); display: grid; gap: 15px; max-width: 280px;
}
.live__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.live__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(254,108,4,.5); } 50% { box-shadow: 0 0 0 6px rgba(254,108,4,0); } }
.live__head p { margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.live__head em { color: var(--accent); }
.live__field { display: grid; gap: 6px; }
.live__field span, .live__label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.live__field input { font: 500 16px var(--font-sans); padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; }
.live__field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.live__group { display: grid; gap: 8px; }
.live__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.live__chips label, .live__swatches label { position: relative; cursor: pointer; }
.live__chips input, .live__swatches input { position: absolute; opacity: 0; pointer-events: none; }
.live__chips span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 14px; font-weight: 500; transition: all .2s; }
.live__chips label:hover span { border-color: var(--ink-3); }
.live__chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.live__chips input:focus-visible + span, .live__swatches input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.live__swatches { display: flex; gap: 10px; }
.live__swatches span { display: block; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(22,19,15,.15); transition: transform .2s, box-shadow .2s; }
.live__swatches label:hover span { transform: scale(1.08); }
.live__swatches input:checked + span { box-shadow: inset 0 0 0 1px rgba(22,19,15,.15), 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
.live__swatches small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.live__cta { width: 100%; }
.live .sticker { right: -6px; top: -30px; z-index: 3; }

/* Mini-Website im Handy */
.ms {
  --ms-bg: #f7f1e8; --ms-ink: #2a2118; --ms-acc: #b08445; --ms-soft: #ead9bf; --ms-btn: #fff; --ms-font: var(--font-serif); --ms-title-weight: 400;
  background: var(--ms-bg); color: var(--ms-ink); font-family: var(--font-sans);
  transition: background .6s ease, color .6s ease;
  padding: 46px 18px 16px; display: flex; flex-direction: column; gap: 11px;
}
.ms[data-pal="noir"]   { --ms-bg: #141414; --ms-ink: #f3efe8; --ms-acc: #d4af6a; --ms-soft: #2a2620; --ms-btn: #141414; --ms-font: var(--font-sans); --ms-title-weight: 750; }
.ms[data-pal="rose"]   { --ms-bg: #fbeef0; --ms-ink: #3b1f2b; --ms-acc: #c2527a; --ms-soft: #f3cfd9; --ms-btn: #fff; --ms-font: var(--font-serif); --ms-title-weight: 400; }
.ms[data-pal="salbei"] { --ms-bg: #eef1ea; --ms-ink: #1f2b22; --ms-acc: #4f7a5a; --ms-soft: #d3dfcf; --ms-btn: #fff; --ms-font: var(--font-sans); --ms-title-weight: 720; }
.ms__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms__logo { font-family: var(--ms-font); font-weight: 650; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms__menu { display: grid; gap: 4px; flex: none; }
.ms__menu i { width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.ms__hero { position: relative; display: grid; gap: 6px; }
.ms__art { position: relative; height: 138px; border-radius: 80px 80px 16px 16px; background: linear-gradient(160deg, var(--ms-soft), color-mix(in srgb, var(--ms-acc) 60%, var(--ms-soft))); overflow: hidden; display: grid; place-items: center; transition: background .6s; margin-bottom: 4px; }
.ms__art svg { position: relative; z-index: 1; width: 62px; height: 62px; color: var(--ms-bg); }
.ms__art::after { content: ""; position: absolute; width: 74px; height: 74px; border-radius: 50%; right: -16px; bottom: -16px; background: var(--ms-acc); opacity: .6; transition: background .6s; }
.ms__kicker { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; font-weight: 600; }
.ms__title { font-family: var(--ms-font); font-weight: var(--ms-title-weight); font-size: 27px; line-height: 1.02; letter-spacing: -0.03em; }
.ms__title em { color: var(--ms-acc); font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.ms__btn { justify-self: start; margin-top: 4px; background: var(--ms-acc); color: var(--ms-btn); font-weight: 650; font-size: 13px; padding: 9px 16px; border-radius: 999px; transition: background .6s; }
.ms__rating { font-size: 11px; opacity: .85; }
.ms__rating span { color: var(--ms-acc); letter-spacing: 1px; }
.ms__section { font-family: var(--ms-font); font-size: 16px; font-weight: var(--ms-title-weight); letter-spacing: -0.02em; }
.ms__list { list-style: none; margin: 0; padding: 0; }
.ms__list li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--ms-ink) 14%, transparent); }
.ms__list b { font-weight: 650; white-space: nowrap; }
.ms__hours { display: flex; align-items: center; gap: 7px; font-size: 11.5px; margin-top: auto; padding: 9px 12px; border-radius: 12px; background: var(--ms-soft); transition: background .6s; }
.ms__hours i { width: 7px; height: 7px; border-radius: 50%; background: #3fae5a; }
.ms__fab { position: absolute; right: 16px; bottom: 62px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 8px 18px -6px rgba(0,0,0,.4); }
.ms__fab svg { width: 20px; height: 20px; }

@media (max-width: 1180px) {
  .phone { width: 250px; }
  .ms__art { height: 112px; }
  .ms__title { font-size: 24px; }
  .ms__list li:nth-child(3) { display: none; }
}
@media (max-width: 960px) {
  .phone { width: 280px; }
  .ms__art { height: 130px; }
  .ms__list li:nth-child(3) { display: flex; }
  .live { grid-template-columns: 1fr; justify-items: center; max-width: 560px; margin-inline: auto; width: 100%; margin-top: 10px; }
  .live__panel { margin: -70px 0 0; max-width: 440px; width: 100%; }
  .live .sticker { right: 0; top: -10px; }
}

/* ---------- Geteilte Überschriften ---------- */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.swi { display: inline-block; will-change: transform; }

/* ---------- Vorher / Nachher ---------- */
.ba {
  --pos: 50%;
  position: relative; aspect-ratio: 16 / 9.4; border-radius: var(--radius); overflow: hidden;
  container-type: inline-size; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize;
  box-shadow: var(--shadow); border: 1px solid var(--line); background: #fff;
}
.ba:has(.ba__range:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; }
.ba__layer { position: absolute; inset: 0; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(22,19,15,.15), 0 0 20px rgba(0,0,0,.25); z-index: 3; pointer-events: none; }
.ba__handle span { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); transition: transform .2s, background .2s; }
.ba.is-drag .ba__handle span, .ba:hover .ba__handle span { transform: scale(1.1); background: var(--accent); }
.ba__handle svg { width: 24px; height: 24px; }
.ba__tag { position: absolute; z-index: 4; bottom: 16px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }
.ba__tag--l { left: 16px; background: #fff; color: #333; border: 1px solid #aaa; }
.ba__tag--r { right: 16px; background: var(--ink); color: var(--paper); }
.ba__range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; }

/* Vorher-Website: bewusst altmodisch */
.old { height: 100%; background: #d4d0c8 repeating-linear-gradient(45deg, #cfcbc2 0 2px, #d4d0c8 2px 8px); font-family: "Times New Roman", Times, serif; color: #000; padding: 0 3cqw 2cqw; display: flex; flex-direction: column; gap: 1.6cqw; overflow: hidden; }
.old__marquee { margin: 0 -3cqw; background: #ffff00; color: #ff0000; font-weight: bold; font-size: 1.5cqw; padding: .5cqw 0; white-space: nowrap; overflow: hidden; border-bottom: 2px solid #ff0000; }
.old__marquee span { display: inline-block; padding-left: 100%; animation: oldMarquee 16s linear infinite; }
@keyframes oldMarquee { to { transform: translateX(-100%); } }
.old__title { text-align: center; font-family: "Comic Sans MS", "Comic Sans", cursive; color: #000080; font-size: 2.4cqw; line-height: 1.2; text-shadow: 2px 2px 0 #9999ff; }
.old__title b { font-size: 4cqw; color: #cc00cc; }
.old__nav { text-align: center; font-size: 1.7cqw; color: #0000ee; }
.old__body { display: grid; grid-template-columns: 28cqw 1fr; gap: 2.5cqw; align-items: start; }
.old__img { height: 20cqw; border: 3px inset #fff; background: #bbb; display: grid; place-items: center; font-size: 1.4cqw; color: #555; font-family: Arial, sans-serif; }
.old__text { font-size: 1.65cqw; line-height: 1.35; }
.old__table { margin-top: 1.4cqw; border: 2px outset #eee; border-collapse: separate; background: #fff; width: 100%; font-size: 1.5cqw; }
.old__table td { border: 1px inset #ccc; padding: .4cqw .8cqw; }
.old__counter { align-self: center; font-family: Arial, sans-serif; font-size: 1.4cqw; }
.old__counter span { background: #000; color: #00ff00; font-family: "Courier New", monospace; padding: .2cqw .6cqw; letter-spacing: .2em; }
.old__foot { text-align: center; font-size: 1.15cqw; color: #444; font-style: italic; margin-top: auto; }

/* Nachher-Website */
.new { height: 100%; background: #f7f1e8; color: #2a2118; padding: 2.4cqw 4cqw 3cqw; display: flex; flex-direction: column; gap: 3cqw; }
.new__bar { display: flex; align-items: center; gap: 2.6cqw; font-size: 1.35cqw; }
.new__bar b { font-family: var(--font-serif); font-weight: 600; font-size: 2.1cqw; margin-right: auto; letter-spacing: -0.02em; }
.new__bar i { font-style: normal; background: #2a2118; color: #f7f1e8; padding: .8cqw 1.6cqw; border-radius: 99px; font-weight: 600; }
.new__hero { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3cqw; align-items: center; }
.new__copy small { font-size: 1.1cqw; letter-spacing: .16em; text-transform: uppercase; color: #8a7a62; font-weight: 600; }
.new__h { font-family: var(--font-serif); font-size: 6.4cqw; line-height: .98; letter-spacing: -0.035em; margin: 1.2cqw 0 1.6cqw; }
.new__h em { color: #b08445; }
.new__copy p { font-size: 1.55cqw; color: #5a4e3e; max-width: 34cqw; line-height: 1.5; }
.new__btns { display: flex; gap: 1cqw; margin-top: 2.2cqw; font-size: 1.35cqw; font-weight: 600; }
.new__btns i { font-style: normal; background: #b08445; color: #fff; padding: 1.1cqw 2cqw; border-radius: 99px; }
.new__btns span { border: 1.5px solid #2a2118; padding: 1.1cqw 2cqw; border-radius: 99px; }
.new__stars { margin-top: 2.2cqw; font-size: 1.5cqw; color: #b08445; letter-spacing: .1em; }
.new__stars span { color: #5a4e3e; letter-spacing: 0; margin-left: .6cqw; font-size: 1.3cqw; }
.new__art { position: relative; height: 100%; min-height: 30cqw; }
.new__arch { position: absolute; inset: 0 0 0 4cqw; border-radius: 30cqw 30cqw 2cqw 2cqw; background: linear-gradient(165deg, #ead9bf, #c79a5c); }
.new__circle { position: absolute; left: 0; bottom: 3cqw; width: 13cqw; height: 13cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3e3c8, #b08445); border: .7cqw solid #f7f1e8; }
.new__tag { position: absolute; right: -1cqw; top: 6cqw; background: #fff; border-radius: 99px; padding: 1cqw 1.6cqw; font-size: 1.3cqw; font-weight: 600; box-shadow: 0 1cqw 3cqw -1cqw rgba(0,0,0,.3); white-space: nowrap; }
.new__tag::before { content: ""; display: inline-block; width: .9cqw; height: .9cqw; border-radius: 50%; background: #3fae5a; margin-right: .7cqw; }
@media (max-width: 700px) {
  .ba { aspect-ratio: 16 / 11; }
  .ba__tag { bottom: 10px; font-size: 11px; padding: 5px 10px; }
  .ba__tag--l { left: 10px; } .ba__tag--r { right: 10px; }
  .ba__handle span { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .ba__handle svg { width: 20px; height: 20px; }
}

/* ---------- Projekte: Neigung ---------- */
.project__media { perspective: 1200px; }
.project__media .browser { transition: transform .5s cubic-bezier(.2,.8,.2,1); }

/* ---------- Scroll-Geschichte ---------- */
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.story__steps { list-style: none; margin: 0; padding: 0; }
.story__step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .5s ease; max-width: 30em; }
.story__step:first-child { min-height: 55vh; justify-content: flex-start; padding-top: 14vh; }
.story__step:last-child { min-height: 60vh; }
.story__step.is-active { opacity: 1; }
.story__num { font-family: var(--font-serif); font-style: italic; font-size: 56px; line-height: 1; color: var(--accent); }
.story__step h3 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.035em; margin: 16px 0 14px; }
.story__step p { color: #bdb3a4; font-size: 18px; }
.story__stage { position: sticky; top: max(96px, calc(50vh - 310px)); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.phone--story { width: 284px; }
.story__dots { display: flex; gap: 8px; }
.story__dots i { width: 8px; height: 8px; border-radius: 99px; background: #4a4339; transition: width .3s, background .3s; }
.story__dots i.is-active { width: 26px; background: var(--accent); }

.story__screens { background: #fff; color: #202124; font-family: Arial, Helvetica, sans-serif; }
.scr { position: absolute; inset: 0; padding: 50px 16px 18px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.scr.is-active { opacity: 1; transform: none; }
/* 1 Google */
.g__logo { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: -1px; }
.g__search { display: flex; align-items: center; justify-content: space-between; border: 1px solid #dfe1e5; border-radius: 99px; padding: 9px 14px; font-size: 13px; box-shadow: 0 1px 6px rgba(32,33,36,.18); }
.g__typed { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 1.5px solid #202124; width: 19ch; }
.js .scr--google .g__typed { width: 0; }
.scr--google.is-active .g__typed { animation: typing 1.3s steps(19) .3s forwards, caret .7s step-end 6; }
@keyframes typing { to { width: 19ch; } }
@keyframes caret { 50% { border-color: transparent; } }
.g__search i { width: 13px; height: 13px; border: 2px solid #4285f4; border-radius: 50%; position: relative; flex: none; }
.g__search i::after { content: ""; position: absolute; width: 2px; height: 6px; background: #4285f4; right: -4px; bottom: -5px; transform: rotate(-45deg); }
.g__map { height: 92px; flex: none; border-radius: 12px; background-color: #e8efe6; background-image: linear-gradient(90deg, transparent 48%, #fff 48% 52%, transparent 52%), linear-gradient(0deg, transparent 58%, #fff 58% 63%, transparent 63%); background-size: 60px 60px, 80px 46px; position: relative; overflow: hidden; }
.g__pin { position: absolute; left: 52%; top: 26%; width: 20px; height: 20px; border-radius: 50% 50% 50% 0; background: #ea4335; transform: rotate(-45deg); }
.js .g__pin { opacity: 0; transform: rotate(-45deg) translate(14px, -14px); }
.scr--google.is-active .g__pin { animation: pinDrop .5s cubic-bezier(.3,1.6,.5,1) 1.7s forwards; }
@keyframes pinDrop { to { transform: rotate(-45deg); opacity: 1; } }
.g__card { border: 1px solid #ebebeb; border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; font-size: 11.5px; }
.g__card b { font-size: 14px; color: #1a0dab; font-weight: 500; }
.g__stars { color: #e7711b; }
.g__stars em { color: #70757a; font-style: normal; }
.g__card small { color: #70757a; font-size: 11px; }
.g__open { color: #188038; font-style: normal; }
.g__card--top { border-color: #d2e3fc; box-shadow: 0 2px 10px rgba(66,133,244,.18); }
.js .g__card--top { opacity: 0; transform: translateY(10px); }
.scr--google.is-active .g__card--top { animation: fadeUp .5s ease 1.9s forwards; }
.g__card--dim { opacity: .5; }
.g__actions { display: flex; gap: 6px; margin-top: 6px; }
.g__actions span { flex: 1; text-align: center; padding: 6px 0; border-radius: 99px; border: 1px solid #dadce0; color: #1a73e8; font-weight: 600; font-size: 11px; position: relative; }
.g__tap::after, .s__btn::after, .b__pick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(26,115,232,.35); transform: scale(0); opacity: 0; pointer-events: none; }
.scr--google.is-active .g__tap::after { animation: tap .8s ease 2.8s 2; }
@keyframes tap { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
/* 2 Website */
.scr--site { background: #f7f1e8; color: #2a2118; font-family: var(--font-sans); }
.s__bar { display: flex; justify-content: space-between; align-items: center; }
.s__bar b { font-family: var(--font-serif); font-weight: 600; font-size: 16px; }
.s__bar span { width: 18px; height: 8px; border-top: 2px solid; border-bottom: 2px solid; }
.s__hero { position: relative; padding: 14px 0 6px; min-height: 120px; }
.s__arch { position: absolute; right: 0; top: 0; width: 92px; height: 112px; border-radius: 50px 50px 10px 10px; background: linear-gradient(160deg, #ead9bf, #c79a5c); }
.s__hero small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; font-weight: 600; }
.s__title { font-family: var(--font-serif); font-size: 26px; line-height: 1.02; letter-spacing: -0.03em; margin-top: 6px; position: relative; }
.s__title em { color: #b08445; }
.s__label { font-family: var(--font-serif); font-size: 17px; margin-top: 8px; }
.s__list { list-style: none; margin: 0; padding: 0; }
.s__list li { display: flex; justify-content: space-between; font-size: 12.5px; padding: 9px 0; border-bottom: 1px solid rgba(42,33,24,.12); }
.js .s__list li { opacity: 0; transform: translateX(-12px); }
.scr--site.is-active .s__list li { animation: fadeUp .45s ease forwards; }
.scr--site.is-active .s__list li:nth-child(2) { animation-delay: .12s; }
.scr--site.is-active .s__list li:nth-child(3) { animation-delay: .24s; }
.scr--site.is-active .s__list li:nth-child(4) { animation-delay: .36s; }
.s__btn { margin-top: auto; text-align: center; background: #b08445; color: #fff; font-weight: 650; font-size: 14px; padding: 13px; border-radius: 99px; position: relative; }
.s__btn::after { background: rgba(255,255,255,.6); }
.scr--site.is-active .s__btn::after { animation: tap .8s ease 1.2s 2; }
/* 3 Buchung */
.scr--book { font-family: var(--font-sans); color: #1d1b18; background: #fbfaf8; }
.b__head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.b__head span:first-child { font-size: 22px; line-height: 1; }
.b__service { font-size: 12px; background: #f1ebe2; border-radius: 10px; padding: 9px 12px; }
.b__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.b__days span { display: grid; gap: 2px; text-align: center; padding: 8px 0; border-radius: 12px; border: 1px solid #e5ded3; font-weight: 650; font-size: 15px; }
.b__days small { font-size: 10px; font-weight: 500; color: #8a8174; }
.b__days .is-sel { background: #1d1b18; color: #fff; border-color: #1d1b18; }
.b__days .is-sel small { color: #cfc7ba; }
.b__label { font-size: 12px; color: #8a8174; margin-top: 4px; }
.b__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b__slots span { text-align: center; padding: 10px 0; border-radius: 10px; border: 1px solid #e5ded3; font-size: 13px; font-weight: 600; position: relative; }
.b__slots .is-off { color: #c9c1b5; text-decoration: line-through; }
.scr--book.is-active .b__pick { animation: pick .4s ease 1s forwards; }
@keyframes pick { to { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.05); } }
.b__pick::after { background: rgba(254,108,4,.4); }
.scr--book.is-active .b__pick::after { animation: tap .7s ease .8s 1; }
.b__btn { margin-top: auto; text-align: center; background: #1d1b18; color: #fff; padding: 13px; border-radius: 99px; font-weight: 650; font-size: 13.5px; opacity: .35; }
.scr--book.is-active .b__btn { animation: btnOn .3s ease 1.4s forwards; }
@keyframes btnOn { to { opacity: 1; } }
/* 4 Bestätigung */
.scr--done { align-items: center; justify-content: center; text-align: center; background: #f2f7f1; color: #1f2b22; font-family: var(--font-sans); }
.d__check { width: 86px; height: 86px; flex: none; }
.d__check circle { fill: none; stroke: #3fae5a; stroke-width: 4; stroke-dasharray: 214; stroke-dashoffset: 214; }
.d__check path { fill: none; stroke: #3fae5a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; }
.scr--done.is-active .d__check circle, .quiz__done.is-active .d__check circle { animation: draw .7s ease .2s forwards; }
.scr--done.is-active .d__check path, .quiz__done.is-active .d__check path { animation: draw .45s ease .8s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.d__title { font-size: 22px; letter-spacing: -0.02em; margin-top: 6px; }
.scr--done p { font-size: 13px; color: #5b6a5e; }
.d__card { width: 100%; margin-top: 10px; background: #fff; border-radius: 16px; padding: 6px 14px; text-align: left; box-shadow: 0 10px 24px -14px rgba(0,0,0,.3); }
.d__card div { display: grid; padding: 9px 0; border-bottom: 1px solid #eef1ed; }
.d__card div:last-child { border: 0; }
.d__card small { font-size: 10.5px; color: #7a8a7d; }
.d__card b { font-size: 13.5px; }
.d__note { font-size: 11px; color: #7a8a7d; margin-top: 6px; }

@media (max-width: 860px) {
  .story__grid { grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; }
  .story__stage { top: 92px; width: 150px; gap: 10px; }
  .story__stage .phone--story { width: 284px; transform: scale(.528); transform-origin: top left; margin: 0 -134px -282px 0; align-self: flex-start; }
  .story__step { min-height: 60vh; }
  .story__step:first-child { min-height: 42vh; padding-top: 2vh; }
  .story__num { font-size: 40px; }
  .story__step h3 { font-size: 26px; margin: 10px 0; }
  .story__step p { font-size: 16px; }
}

/* ---------- Preisrechner ---------- */
.calc { margin-top: clamp(48px, 7vw, 90px); display: grid; grid-template-columns: 1.3fr .9fr; gap: 18px; align-items: start; }
.calc__options { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3.5vw, 40px); }
.calc__title { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.035em; }
.calc__title em { color: var(--accent); }
.calc__sub { color: var(--ink-2); margin-top: 8px; }
.calc__group { margin: 28px 0 0; font-size: 12.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.opt {
  width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; margin-top: 8px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--paper);
  font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .15s;
}
button.opt:hover { border-color: var(--ink-3); }
button.opt:active { transform: scale(.99); }
.opt[aria-pressed="true"] { border-color: var(--ink); background: #fff; }
.opt.is-locked { cursor: default; opacity: .78; }
.opt--qty { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.opt__text { display: grid; gap: 2px; }
.opt__text b { font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; }
.opt__text small { color: var(--ink-3); font-size: 13.5px; }
.opt__price { font-weight: 650; white-space: nowrap; font-size: 15.5px; }
.opt__toggle { width: 46px; height: 27px; border-radius: 99px; background: var(--line); position: relative; transition: background .25s; }
.opt__toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.opt[aria-pressed="true"] .opt__toggle, .opt__toggle.is-on { background: var(--accent); }
.opt[aria-pressed="true"] .opt__toggle::after, .opt__toggle.is-on::after { transform: translateX(19px); }
.opt.is-locked .opt__toggle { background: var(--ink-3); }
.qty { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1.5px solid var(--line); border-radius: 99px; padding: 3px; }
.qty button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--paper); font: 600 18px/1 var(--font-sans); color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.qty button:hover { background: var(--ink); color: var(--paper); }
.qty output { min-width: 26px; text-align: center; font-weight: 650; }
.opt.is-bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.015); } }

.calc__sum { position: sticky; top: 100px; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); display: grid; gap: 14px; }
.calc__sumlabel { font-size: 12.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #a59b8c; }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc__row > span { color: #bdb3a4; }
.calc__row b { font-size: clamp(34px, 3.6vw, 46px); letter-spacing: -0.04em; font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__row--year b { font-size: 24px; color: var(--accent); }
.calc__bar { height: 1px; background: #3a342b; }
.calc__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: #bdb3a4; }
.calc__items li { display: flex; justify-content: space-between; gap: 12px; }
.calc__items li.is-new { animation: itemIn .35s ease; }
@keyframes itemIn { from { opacity: 0; transform: translateY(6px); } }
.calc__items li b { color: var(--paper); font-weight: 600; white-space: nowrap; }
.calc__sum .btn { width: 100%; margin-top: 6px; }
.calc__note { color: #8a8174; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 960px) {
  .calc { grid-template-columns: 1fr; }
  /* Auf dem Handy läuft die Summe als kompakte Leiste unten mit */
  .calc__sum { top: auto; bottom: 10px; z-index: 6; gap: 6px; padding: 14px 18px 16px; box-shadow: 0 -6px 40px -8px rgba(22,19,15,.45); grid-template-columns: 1fr 1fr; align-items: end; }
  .calc__row { display: grid; gap: 0; }
  .calc__sumlabel, .calc__bar, .calc__items, .calc__note, .calc__row.calc__row--year { display: none; }
  .calc__row > span { font-size: 13px; }
  .calc__row b { font-size: 28px; }
  .calc__sum .btn { grid-column: 1 / -1; margin-top: 4px; padding: .85em 1em; }
}
@media (max-width: 520px) {
  .opt { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
  .opt:not(.opt--qty) .opt__price { grid-column: 2; margin-top: -8px; color: var(--ink-2); font-size: 14.5px; }
  .opt--qty { grid-template-columns: 1fr; }
  .qty { justify-self: start; }
}

/* ---------- Fragebogen ---------- */
.quiz { position: relative; align-content: start; min-height: 540px; }
.quiz__top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-3); min-height: 26px; }
.quiz__back { border: 0; background: none; font: 600 14px var(--font-sans); color: var(--ink); cursor: pointer; padding: 4px 0; }
.quiz__back:hover { color: var(--accent-ink); }
.quiz__progress { height: 5px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.quiz__progress i { display: block; height: 100%; width: 25%; background: var(--accent); border-radius: 99px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.quiz__step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; gap: 16px; }
.quiz__step.is-active { display: grid; animation: stepIn .5s cubic-bezier(.2,.8,.2,1); }
.quiz__step.is-active.is-back { animation-name: stepInBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(30px); } }
@keyframes stepInBack { from { opacity: 0; transform: translateX(-30px); } }
.no-js .quiz__step { display: grid; margin-bottom: 26px; }
.no-js .quiz__done, .no-js .quiz__next, .no-js .quiz__top, .no-js .quiz__progress { display: none; }
.quiz__step legend { font-size: clamp(26px, 3vw, 34px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 18px; padding: 0; }
.quiz__hint { color: var(--ink-3); font-size: 14px; margin-top: -10px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles--list { grid-template-columns: 1fr; }
.tile { position: relative; cursor: pointer; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile span { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); font-weight: 600; font-size: 16px; transition: all .2s; height: 100%; }
.tile svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.tile:hover span { border-color: var(--ink-3); transform: translateY(-2px); }
.tile input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tile input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.tile--wide { grid-column: 1 / -1; }
.quiz__package { background: var(--accent-soft); border-radius: 14px; padding: 12px 16px; display: grid; gap: 2px; }
.quiz__package small { color: var(--accent-ink); font-weight: 600; font-size: 12.5px; }
.quiz__package b { font-weight: 600; font-size: 14.5px; }
.quiz__next { justify-self: start; }
.quiz__done { text-align: center; justify-items: center; padding: 40px 0; }
.quiz__done h3 { font-size: 30px; }
.quiz__done p { color: var(--ink-2); max-width: 30em; }
.quiz__fallback { font-size: 14px; }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } .quiz { min-height: 0; } .quiz .btn { justify-self: stretch; } }

/* ---------- Footer-Schriftzug ---------- */
.footer__big > * { display: block; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .rotator__word, .scr, .quiz__step.is-active, .calc__items li.is-new { transition: none; animation: none; filter: none; }
  .old__marquee span { animation: none; padding-left: 0; }
  .js .scr--google .g__typed { width: 19ch; border: 0; animation: none !important; }
  .js .g__pin, .js .g__card--top, .js .s__list li { opacity: 1; transform: none; animation: none !important; }
  .js .g__pin { transform: rotate(-45deg); }
  .d__check circle, .d__check path { stroke-dashoffset: 0; animation: none !important; }
  .live__badge i { animation: none; }
}