/* Leistungsteil: Website mit Vorher/Nachher, Widget-Galerie, Automations-Zeitleiste, Branchen-Umschalter */
.offer { padding: var(--section) 0 calc(var(--section) * .7); }
.offer[data-branch="werkstatt"] { --nb: #17140F; --nf: #F6EFE6; --na: #E8542A; --nt: #17140F; --tint: 232, 84, 42; }
.offer[data-branch="studio"] { --nb: #FBF6F2; --nf: #3B2A27; --na: #C98E7C; --nt: #FFFFFF; --tint: 233, 180, 160; }
.offer[data-branch="praxis"] { --nb: #F3F7F5; --nf: #10322F; --na: #1F6F68; --nt: #FFFFFF; --tint: 127, 209, 185; }

.offer__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; margin-bottom: 18px; }
.branch-bar { position: sticky; top: 92px; z-index: 30; display: flex; justify-content: flex-end; pointer-events: none; margin-bottom: clamp(24px, 4vw, 48px); }
.branch { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(20, 20, 23, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 30px -16px rgba(0,0,0,.8); }
.branch__label { font-size: 13px; color: var(--ink-soft); padding: 0 10px 0 12px; }
.branch button { font: 600 14px/1 var(--text); color: var(--ink); background: transparent; border: 0; padding: 11px 16px; border-radius: 999px; cursor: pointer; transition: background-color .16s var(--ease), color .16s var(--ease); }
.branch button:hover { background: rgba(255,255,255,.06); }
.branch button[aria-checked="true"] { background: var(--cobalt); color: #fff; }

.offer__block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.offer__tag { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt-hi); font-weight: 600; margin-bottom: 12px; }
.offer__title { font-family: var(--display); font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: clamp(2.8rem, 5vw, 4.8rem); line-height: .9; letter-spacing: -.01em; margin-bottom: 20px; }
.offer__promise { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; margin-bottom: 22px; }
.offer__promise .tick { align-self: center; }
.offer__promise small { flex-basis: 100%; padding-left: 30px; font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.offer__lead { font-size: 18px; color: #DCDDE4; max-width: 44ch; }
.offer__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; font-size: 17px; color: #DCDDE4; }
.offer__list li { display: flex; gap: 12px; align-items: baseline; }
.offer__list li::before { content: ""; flex: none; width: 10px; height: 11px; background: var(--cobalt-hi); clip-path: var(--check); transform: translateY(1px); }
.offer__case { padding: 16px 18px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; color: #DCDDE4; max-width: 46ch; }
.offer__case b { color: var(--ink); }
.tick { display: inline-block; flex: none; width: 18px; height: 19px; background: var(--cobalt-hi); clip-path: var(--check); }

/* Vorher / Nachher */
.ba__frame { border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07); }
.ba__bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: #E6E5E1; font-size: 12px; color: #55555E; }
.ba__bar i { width: 9px; height: 9px; border-radius: 50%; background: #C9C8C3; }
.ba__bar span { margin-left: 12px; background: #F4F3F0; padding: 3px 14px; border-radius: 99px; }
.ba__stage { --pos: 50%; position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; user-select: none; }
.ba__old, .ba__new { position: absolute; inset: 0; }
.ba__old { background: #DCDCDC repeating-linear-gradient(45deg, #E2E2E2 0 6px, #D8D8D8 6px 12px); color: #111; font-family: "Times New Roman", Times, serif; text-align: center; padding: 6% 8%; }
.old__h { font-size: clamp(16px, 2vw, 26px); color: #0000AA; font-weight: 700; margin-bottom: 10px; }
.old__nav { font-size: clamp(11px, 1.1vw, 14px); color: #0000EE; margin-bottom: 18px; }
.old__t { font-size: clamp(10px, 1vw, 13px); max-width: 46ch; margin: 0 auto 16px; }
.old__small { font-size: 10px; color: #555; margin-bottom: 10px; }
.old__warn { display: inline-block; font-family: var(--text); font-size: 12px; color: #fff; background: #B3261E; padding: 4px 10px; border-radius: 6px; }
.ba__new { background: var(--nb); color: var(--nf); padding: 5% 6%; clip-path: inset(0 0 0 var(--pos)); font-family: var(--text); }
.new__nav { display: flex; align-items: center; gap: 16px; font-size: clamp(11px, 1vw, 13px); margin-bottom: 9%; }
.new__nav b { margin-right: auto; font-size: clamp(12px, 1.2vw, 15px); }
.new__nav span { opacity: .7; }
.new__nav em { font-style: normal; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: var(--na); color: var(--nt); }
.new__kicker { font-size: clamp(10px, 1vw, 13px); opacity: .7; margin-bottom: 8px; }
.new__h { font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 3.4vw, 46px); line-height: .92; margin-bottom: 18px; }
.new__row { display: flex; gap: 8px; margin-bottom: 20px; }
.new__btn, .new__call { font-size: clamp(10px, 1vw, 13px); font-weight: 700; padding: 9px 15px; border-radius: 99px; }
.new__btn { background: var(--na); color: var(--nt); }
.new__call { box-shadow: inset 0 0 0 1.5px currentColor; }
.new__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.new__cards span { padding: 12px; border-radius: 10px; font-size: clamp(10px, .95vw, 12.5px); font-weight: 600; background: rgba(var(--tint), .18); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; pointer-events: none; }
.ba__handle i { width: 3px; align-self: stretch; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.ba__handle span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(11,11,12,.78); padding: 5px 8px; border-radius: 6px; }
.ba__range { display: block; margin-top: 14px; }
.ba__range input { width: 100%; accent-color: var(--cobalt); height: 28px; cursor: ew-resize; }
.ba__hint { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Widget-Galerie */
.offer__block--widgets { grid-template-columns: 1fr; align-items: start; }
.offer__copy--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.offer__copy--wide .offer__title { margin-bottom: 0; }
.offer__copy--wide .offer__promise { margin-bottom: 12px; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 14px; }
.tile { position: relative; overflow: hidden; border-radius: 20px; padding: 20px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 10px; }
.tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 100% 0%, rgba(var(--t, 74, 92, 255), .2), transparent 60%); }
.tile > * { position: relative; }
.tile__name { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.tile--book { grid-column: span 2; grid-row: span 2; --t: 74, 92, 255; }
.tile--open { --t: 52, 199, 89; }
.tile--reviews { --t: 251, 188, 5; }
.tile--call { --t: 138, 152, 255; }
.tile--wa { --t: 37, 211, 102; }
.tile--chat { grid-column: span 4; --t: 162, 107, 255; }

.book__service { font-family: var(--display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; }
.book__days, .book__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.book__days button, .book__slots button { font: 500 14px/1.2 var(--text); color: var(--ink); background: #1F1F25; border: 0; border-radius: 12px; padding: 12px 6px; cursor: pointer; box-shadow: inset 0 0 0 1px #2E2E36; transition: background-color .15s, box-shadow .15s; }
.book__days button b { display: block; font-size: 20px; font-weight: 700; margin-top: 2px; }
.book__days button:hover, .book__slots button:hover { box-shadow: inset 0 0 0 1px #5A5A66; }
.book__days button[aria-pressed="true"], .book__slots button[aria-pressed="true"] { background: var(--cobalt); box-shadow: none; color: #fff; }
.book__slots button:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.book__done { min-height: 48px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #fff; }
.book__done.is-on { padding: 12px 14px; border-radius: 12px; background: rgba(52, 199, 89, .14); box-shadow: inset 0 0 0 1px rgba(52, 199, 89, .5); }

.open__state { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; }
.open__state i { width: 12px; height: 12px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 0 rgba(52,199,89,.6); animation: ping 1.8s ease-out infinite; }
.open__state.is-closed i { background: #FF6B6B; animation: none; }
@keyframes ping { 80%, 100% { box-shadow: 0 0 0 9px rgba(52,199,89,0); } }
.open__hours { font-size: 14.5px; color: #DCDDE4; }

.rev__stars { font-size: 24px; letter-spacing: 3px; color: #FBBC05; line-height: 1; }
.rev__quote { font-size: 15px; line-height: 1.45; color: #E4E5EC; }
.rev__who { margin-top: auto; font-size: 12.5px; color: var(--ink-soft); }

.call__form { display: flex; gap: 6px; }
.call__form input { flex: 1; min-width: 0; font: 400 15px/1 var(--text); color: var(--ink); background: #0E0E11; border: 1px solid #2E2E35; border-radius: 10px; padding: 11px 12px; }
.call__form input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(74,92,255,.3); }
.call__form button { font: 600 14px/1 var(--text); color: #fff; background: var(--cobalt); border: 0; border-radius: 10px; padding: 0 14px; cursor: pointer; }
.call__done { font-size: 14px; color: #DCDDE4; }
.call__done.is-err { color: #FF8A8A; }

.wa__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--text); color: #0B2414; background: #25D366; border: 0; border-radius: 999px; padding: 12px 16px; cursor: pointer; }
.wa__btn::before { content: ""; width: 16px; height: 16px; background: currentColor; clip-path: polygon(50% 0, 100% 35%, 85% 100%, 15% 100%, 0 35%); border-radius: 50%; }
.wa__chat { padding: 10px 12px; border-radius: 12px 12px 12px 2px; background: #1F2C23; }
.wa__msg { font-size: 14px; line-height: 1.45; color: #E8F5EC; }

.chat__log { display: flex; flex-direction: column; gap: 8px; min-height: 64px; }
.chat__msg { max-width: 70ch; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.chat__msg--bot { align-self: flex-start; background: #23232B; border-bottom-left-radius: 4px; }
.chat__msg--me { align-self: flex-end; background: var(--cobalt); color: #fff; border-bottom-right-radius: 4px; }
.chat__msg--typing { color: var(--ink-soft); }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__chips button { font: 500 14px/1 var(--text); color: var(--ink); background: transparent; border: 0; border-radius: 999px; padding: 10px 14px; box-shadow: inset 0 0 0 1px #3A3A43; cursor: pointer; }
.chat__chips button:hover { box-shadow: inset 0 0 0 1px var(--cobalt-hi); }

/* Automations-Zeitleiste */
.offer__block--auto { align-items: start; }
.auto__copy { position: sticky; top: 160px; }
.auto__result { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: rgba(74, 92, 255, .12); box-shadow: inset 0 0 0 1px rgba(138, 152, 255, .35); font-size: 16px; font-weight: 500; max-width: 44ch; }
.auto__result .tick { margin-top: 2px; }
.flowline { list-style: none; margin: 0; padding: 0 0 0 0; position: relative; display: grid; gap: 22px; }
.flowline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.flowline::after { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: var(--cobalt); transform-origin: top; transform: scaleY(var(--flow, 1)); }
.flow__step { position: relative; padding-left: 40px; display: grid; gap: 8px; }
.flow__step::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--cobalt); z-index: 1; }
.flow__when { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt-hi); }
.flow__card { padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line), 0 20px 40px -26px rgba(0,0,0,.9); max-width: 52ch; }
.flow__card--trigger { box-shadow: inset 0 0 0 1.5px var(--cobalt), 0 20px 40px -26px rgba(0,0,0,.9); }
.flow__card b { font-size: 16px; }
.flow__ch { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; }
.flow__card p { font-size: 16px; line-height: 1.5; color: #E4E5EC; }
.flow__st { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #7BE39A; }
.flow__st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html.motion .flow__step { opacity: .25; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.motion .flow__step.is-in { opacity: 1; transform: none; }
html.motion .flow__step .flow__st { opacity: 0; transition: opacity .4s var(--ease) .5s; }
html.motion .flow__step.is-in .flow__st { opacity: 1; }

/* Zusagen */
.promises { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.promises li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 20px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.promises .tick { grid-row: span 2; margin-top: 3px; }
.promises b { font-size: 17px; line-height: 1.3; }
.promises small { font-size: 14px; color: var(--ink-soft); }

/* Wechsel der Branche: Inhalte blenden weich um */
[data-k] { transition: opacity .25s var(--ease); }
.offer.is-switching [data-k] { opacity: 0; }

@media (max-width: 1000px) {
  .offer__block, .offer__copy--wide { grid-template-columns: 1fr; }
  .auto__copy { position: static; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--book, .tile--chat { grid-column: span 2; }
  .tile--book { grid-row: auto; }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .branch-bar { top: 76px; justify-content: center; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .tile--book, .tile--chat { grid-column: auto; }
  .promises { grid-template-columns: 1fr; }
  .branch__label { display: none; }
  .branch button { padding: 10px 13px; }
  .book__days button, .book__slots button { padding: 10px 4px; font-size: 13px; }
  .ba__handle span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .open__state i { animation: none; } }
/* Korrekturen: Umschalter unten schwebend, Galerie ohne Leerraum, WhatsApp-Icon */
.branch-bar { position: sticky; top: auto; bottom: 18px; justify-content: center; margin: 28px auto 0; }
.wa__btn::before { content: none; }
.wa__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.tile--book { grid-row: auto; }
@media (min-width: 1001px) { .tile--chat { grid-column: span 2; } }
.bento { grid-auto-rows: minmax(190px, auto); }
@media (max-width: 1000px) { .branch-bar { top: auto; bottom: 12px; } }
.tile__why { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); font-size: 14px; line-height: 1.45; color: #C4C5CF; }
.rev__who { margin-top: 0; }
.book__done { color: var(--ink-soft); font-weight: 500; }
.book__done.is-on { color: #fff; font-weight: 600; }
/* Runde 4: Umschalter fest im Kopf, Vorher/Nachher mit Griff im Bild, Galerie ohne Leerraum */
.offer__head { align-items: flex-end; }
.branch-bar { position: static; margin: 0; display: block; pointer-events: auto; }
.ba__label { position: absolute; top: 12px; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(11,11,12,.78); padding: 6px 9px; border-radius: 6px; pointer-events: none; }
.ba__label--old { left: 12px; }
.ba__label--new { right: 12px; }
.ba__handle { z-index: 2; gap: 0; }
.ba__handle span { display: none; }
.ba__handle b { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.ba__handle b::before, .ba__handle b::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; margin-top: -6px; }
.ba__handle b::before { left: 7px; border-right-color: #0B0B0C; }
.ba__handle b::after { right: 7px; border-left-color: #0B0B0C; }
.ba__stage .ba__range { position: absolute; inset: 0; z-index: 4; margin: 0; }
.ba__stage .ba__range input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__stage:has(input:focus-visible) .ba__handle b { outline: 3px solid var(--cobalt-hi); outline-offset: 3px; }
.ba__hint { margin-top: 12px; }
@media (min-width: 1001px) {
  .bento { grid-auto-rows: minmax(150px, auto); }
  .tile--book { grid-row: span 2; }
  .tile--chat { grid-column: span 4; }
}
@media (max-width: 1000px) { .branch-bar { width: 100%; } .branch { flex-wrap: wrap; } }
.ba__old { padding-top: 56px; }
.ba__new { padding-top: 52px; }