/* Tablr-Homepage (tablr.de) – umgesetzt aus Claude Design „Startseite“. */

@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}

:root{
  --tb-blue:#389bff;
  --tb-blue-hover:#3493ec;
  --tb-ink:#1d1d1f;
  --tb-muted:#6e6e73;
  --tb-muted-dark:#a1a1a6;
  --tb-grey:#86868b;
  --tb-soft:#f5f5f7;
  --tb-line:#d2d2d7;
  --tb-dark-line:#333336;
  --tb-frame:rgb(201,197,179);
  --tb-nav-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:var(--tb-ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{overflow-x:clip}
a{color:var(--tb-blue)}
a:hover{color:var(--tb-blue-hover)}
[id]{scroll-margin-top:var(--tb-nav-h)}
input,textarea,button{font-family:inherit}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.tb-wrap{max-width:1120px;margin:0 auto}
.tb-blue{color:var(--tb-blue)}
.tb-dark{background:#000;color:#f5f5f7}
.tb-soft{background:var(--tb-soft)}
.tb-brand{background:var(--tb-blue);color:#fff}
.tb-brand .tb-card{color:var(--tb-ink)}

/* ── Buttons & Links ─────────────────────────────────────── */
.tb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border:0;border-radius:980px;background:var(--tb-blue);color:#fff;font-size:17px;font-weight:500;line-height:1.3;text-align:center;text-decoration:none;cursor:pointer;transition:background .15s}
.tb-btn:hover{background:var(--tb-blue-hover);color:#fff}
.tb-link{display:inline-flex;align-items:center;min-height:44px;color:var(--tb-blue);font-size:17px;text-decoration:none}
.tb-link:hover{text-decoration:underline}

/* ── Typografie ──────────────────────────────────────────── */
.tb-eyebrow{margin:0;text-align:center;font-size:17px;font-weight:600;color:var(--tb-muted)}
.tb-h2{margin:0 auto;max-width:820px;text-align:center;font-size:clamp(36px,5.4vw,64px);font-weight:700;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
.tb-h2--gap{margin-bottom:clamp(48px,7vw,72px)}
.tb-h4{margin:0;font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.tb-h5{margin:0;font-size:clamp(24px,2.8vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.tb-lead{margin:28px auto 0;max-width:700px;text-align:center;font-size:clamp(17px,1.9vw,19px);line-height:1.65;color:var(--tb-muted);text-wrap:pretty}
.tb-dark .tb-lead{color:var(--tb-muted-dark);max-width:680px}

/* ── Navigation ──────────────────────────────────────────── */
.tb-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.tb-nav__bar{max-width:1120px;margin:0 auto;padding:0 20px;height:var(--tb-nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.tb-nav__brand{display:flex;align-items:center;min-height:44px}
.tb-nav__brand img{height:36px;width:auto;display:block}
.tb-nav__links{display:flex;align-items:center;gap:28px}
.tb-nav__links a{padding:12px 0;font-size:15px;color:var(--tb-ink);text-decoration:none;opacity:.85}
.tb-nav__links a:hover,.tb-nav__links a.is-active{opacity:1;color:var(--tb-blue)}
.tb-nav__actions{display:flex;align-items:center;gap:8px}
.tb-nav__cta{min-height:44px;padding:0 20px;font-size:15px;white-space:nowrap}
.tb-nav__toggle{display:none;width:44px;height:44px;padding:0;border:0;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.tb-nav__toggle span{display:block;width:18px;height:1.5px;background:var(--tb-ink);transition:transform .2s}
.tb-nav__toggle[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.tb-nav__toggle[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.tb-nav__menu{padding:8px 20px 24px;display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.06)}
.tb-nav__menu[hidden]{display:none}
.tb-nav__menu a{display:flex;align-items:center;min-height:44px;padding:10px 0;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--tb-ink);text-decoration:none}
.tb-nav__menu a.is-active{color:var(--tb-blue)}
@media (max-width:999px){
  .tb-nav__links{display:none}
  .tb-nav__toggle{display:flex}
}
@media (min-width:1000px){.tb-nav__menu{display:none!important}}
@media (max-width:400px){
  .tb-nav__bar{gap:12px}
  .tb-nav__brand img{height:30px}
  .tb-nav__cta{padding:0 16px;font-size:14px}
}

/* ── Footer ──────────────────────────────────────────────── */
.tb-footer{background:var(--tb-soft);color:var(--tb-muted);padding:56px 20px 40px}
.tb-footer .tb-wrap{display:flex;flex-direction:column;gap:32px}
.tb-footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:32px;border-bottom:1px solid var(--tb-line);font-size:14px}
.tb-footer__brand{display:flex;flex-direction:column;gap:14px}
.tb-footer__brand img{height:34px;width:auto;display:block;align-self:flex-start}
.tb-footer__brand p{margin:0;font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--tb-ink)}
.tb-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px;font-size:13px}
.tb-footer__bottom>span{padding:12px 0}
.tb-footer__links{display:flex;flex-wrap:wrap;gap:4px 24px}
.tb-footer__links a{padding:12px 0;color:#424245;text-decoration:none}
.tb-footer__links a:hover{color:var(--tb-blue)}

/* ── Einblenden beim Scrollen (site.js) ──────────────────── */
.tb-reveal{opacity:0;transform:translateY(40px) scale(.98)}
.tb-reveal-ready{transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}

/* ── 1 Hero ──────────────────────────────────────────────── */
.tb-hero{padding:clamp(56px,9vw,112px) 20px clamp(80px,10vw,140px);text-align:center;overflow:hidden}
.tb-hero__inner{max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.tb-hero h1{margin:0;font-size:clamp(44px,7.6vw,96px);font-weight:700;letter-spacing:-.025em;line-height:1.02}
.tb-hero h1 span{display:block}
.tb-hero__sub{margin:28px 0 0;max-width:640px;font-size:clamp(18px,2vw,21px);line-height:1.55;text-wrap:pretty}
.tb-hero__meta{margin:16px 0 0;font-size:14px;color:var(--tb-muted)}
.tb-hero__ctas{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 28px}
.tb-hero__try{margin-top:44px;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:12px}
.tb-hero__hint{margin:0;font-size:15px;font-weight:500;color:var(--tb-ink);text-wrap:balance}
.tb-hero__hint span{color:var(--tb-blue);font-weight:700}
.tb-hero__payoff{margin:0;font-size:15px;line-height:1.5;color:var(--tb-muted);animation:tb-wa-pop .35s ease-out}
.tb-hero__payoff strong{color:var(--tb-ink);font-weight:600}
.tb-hero__payoff a{display:block;margin-top:2px;font-weight:500;text-decoration:none}
.tb-hero__payoff a:hover{text-decoration:underline}
.tb-hero__cuisine{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;animation:tb-wa-pop .35s ease-out}
.tb-hero__cuisine[hidden]{display:none}
.tb-hero__cuisine p{margin:0;font-size:15px;font-weight:500;color:var(--tb-ink)}
.tb-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tb-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:980px;border:1px solid #e8e8ed;background:#fff;font-size:14px;font-weight:500;color:var(--tb-ink);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.tb-chip:hover{border-color:var(--tb-blue)}
.tb-chip:focus-visible{outline:2px solid var(--tb-blue);outline-offset:2px}
.tb-chip[aria-pressed=true]{background:var(--tb-blue);border-color:var(--tb-blue);color:#fff}
/* Leuchten, solange noch niemand selbst getippt hat */
.tb-hero__name.is-idle{animation:tb-name-glow 2.4s ease-in-out infinite}
@keyframes tb-name-glow{0%,100%{box-shadow:0 0 0 0 rgba(56,155,255,0)}50%{box-shadow:0 0 0 6px rgba(56,155,255,.18)}}
.tb-hero__name input.is-demo{color:var(--tb-muted)}
/* Vorschau-Handy „ploppt“, wenn ein eigener Name drinsteht */
.tb-mock__frame.is-pop{animation:tb-mock-pop .55s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tb-mock-pop{0%,100%{transform:none}40%{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.tb-hero__name.is-idle,.tb-mock__frame.is-pop,.tb-hero__payoff,.tb-hero__cuisine,.tb-mock__body.is-swap{animation:none}}
.tb-hero__name{margin-top:0;display:flex;align-items:center;gap:10px;width:100%;max-width:400px;min-height:56px;padding:0 20px;border-radius:980px;background:var(--tb-soft);border:1px solid #e8e8ed}
.tb-hero__name:focus-within{border-color:var(--tb-blue)}
.tb-hero__name input{flex:1;min-width:0;height:44px;border:0;background:transparent;font-size:17px;font-weight:600;color:var(--tb-ink);text-align:center;outline:none}
.tb-hero__name input::placeholder{color:#a1a1a6;font-weight:500}

/* Vorschau-Handy – Farben kommen als CSS-Variablen (--p-*) */
.tb-mock{margin-top:56px;position:relative;width:320px;max-width:100%;height:660px}
.tb-mock__shadow{position:absolute;left:50%;bottom:-40px;width:520px;height:120px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.18),transparent);pointer-events:none}
.tb-mock__frame{position:relative;height:100%;border-radius:56px;background:#111;padding:11px;box-shadow:0 40px 80px -20px rgba(0,0,0,.35),inset 0 0 0 2px #2a2a2c}
.tb-mock__screen{--p-tint:color-mix(in srgb,var(--p-ac) 28%,var(--p-bg));position:relative;height:100%;border-radius:46px;overflow:hidden;background:var(--p-bg);color:var(--p-fg);text-align:left;display:flex;flex-direction:column;transition:background .25s,color .25s}
.tb-mock__island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000;z-index:3}
.tb-mock__status{flex:none;height:44px;display:flex;justify-content:space-between;align-items:center;padding:6px 26px 0;font-size:14px;font-weight:600}
.tb-mock__battery{width:16px;height:10px;border-radius:2px;border:1.5px solid var(--p-fg)}
.tb-mock__header{flex:none;height:46px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--p-line)}
.tb-mock__burger{display:flex;flex-direction:column;gap:4px;width:18px}
.tb-mock__burger span{height:2px;background:var(--p-fg);border-radius:1px}
.tb-mock__title{max-width:150px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-mock__login{justify-self:end;padding:5px 10px;border-radius:980px;background:var(--p-pill);font-size:11px;font-weight:600}
.tb-mock__body{flex:1;min-height:0;overflow:hidden;padding:16px 12px 0}
.tb-mock__badge{display:inline-block;padding:3px 7px;border-radius:5px;background:var(--p-tint);font-size:11px;font-weight:500}
.tb-mock__headline{margin-top:8px;font-size:18px;font-weight:700;line-height:1.3}
.tb-mock__cta{display:inline-block;margin-top:8px;padding:5px 8px;border-radius:6px;background:var(--p-ac);color:var(--p-ink);font-size:11px;font-weight:600}
.tb-mock__banner{margin-top:12px;height:105px;border-radius:6px;background:var(--p-ac);display:flex;align-items:center;justify-content:flex-end;padding-right:22px;overflow:hidden}
.tb-mock__banner span{font-size:68px;line-height:1;transform:rotate(-10deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.tb-mock__dots{margin-top:8px;display:flex;justify-content:center;gap:5px}
.tb-mock__dots span{width:5px;height:5px;border-radius:50%;background:var(--p-dot)}
.tb-mock__dots span.is-active{background:var(--p-ac)}
.tb-mock__info{margin-top:12px;padding:8px;border-radius:6px;background:var(--p-card);display:flex;gap:8px}
.tb-mock__info>div{flex:1;padding:8px 4px;border-radius:5px;background:var(--p-card2);text-align:center}
.tb-mock__info strong{display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:700}
.tb-mock__info i{width:6px;height:6px;border-radius:50%;background:#34c759}
.tb-mock__info small{display:block;margin-top:2px;font-size:9px;color:var(--p-muted)}
.tb-mock__cats-title{margin-top:12px;font-size:16px;font-weight:700}
.tb-mock__cats{margin-top:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;font-size:9px;line-height:1.3}
.tb-mock__cats span{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:50%;background:var(--p-cat);margin:0 8px 5px;font-size:22px;line-height:1}
.tb-mock__cats b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-mock__body.is-swap{animation:tb-mock-swap .4s ease-out}
@keyframes tb-mock-swap{0%{opacity:.25;transform:translateY(4px)}100%{opacity:1;transform:none}}
.tb-mock__tabbar{flex:none;height:70px;border-top:1px solid var(--p-line);background:var(--p-bg);display:grid;grid-template-columns:repeat(5,1fr);align-items:start;padding:10px 4px 0;font-size:8.5px;font-weight:600;color:var(--p-muted);text-align:center}
.tb-mock__tabbar>div{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.tb-mock__tabbar>div.is-active{color:var(--p-ac)}
.tb-mock__tabbar span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-mock__tab-name b{height:22px;display:flex;align-items:center;max-width:100%;font-size:9px;font-weight:700;color:var(--p-fg);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-mock__cart{position:relative}
.tb-mock__cart em{position:absolute;top:-4px;left:calc(50% + 4px);min-width:14px;height:14px;border-radius:7px;background:#ff3b30;color:#fff;font-size:8px;font-style:normal;line-height:14px}

.tb-pickers{margin-top:72px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px}
.tb-picker{display:flex;flex-direction:column;align-items:center;gap:10px}
.tb-picker>span{font-size:14px;color:var(--tb-muted)}
.tb-picker>div{display:flex;gap:10px}
.tb-pickers__note{flex:1 1 100%;margin:4px 0 0;text-align:center;font-size:14px;color:var(--tb-muted);text-wrap:balance}
.tb-swatch{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(0,0,0,.12);cursor:pointer;transition:box-shadow .2s}
.tb-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--tb-ink)}
.tb-swatch:focus-visible{outline:2px solid var(--tb-blue);outline-offset:4px}

/* ── 2 Schmerz + Rechner ─────────────────────────────────── */
.tb-pain{padding:clamp(100px,14vw,180px) 20px;text-align:center}
.tb-pain__intro{max-width:900px;margin:0 auto}
.tb-pain .tb-eyebrow{color:var(--tb-grey)}
.tb-pain__intro h2{margin:16px auto 0;max-width:760px;font-size:clamp(30px,4.4vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.tb-pain__figure{margin-top:clamp(48px,7vw,80px)}
.tb-pain__figure>div:not(.tb-pain__amount){font-size:clamp(28px,3.6vw,40px);font-weight:600;letter-spacing:-.02em;color:var(--tb-grey)}
.tb-pain__amount{font-size:clamp(72px,17vw,220px);font-weight:700;letter-spacing:-.045em;line-height:.95;white-space:nowrap;background:linear-gradient(180deg,#fff 30%,#8e8e93);-webkit-background-clip:text;background-clip:text;color:transparent}
.tb-pain__text{margin:clamp(40px,6vw,64px) auto 0;max-width:640px;font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--tb-muted-dark);text-wrap:pretty}
.tb-pain__text span{color:#f5f5f7}

.tb-calc{margin-top:clamp(100px,13vw,170px);text-align:left}
.tb-calc .tb-h2{color:#f5f5f7}
.tb-calc__grid{margin-top:clamp(48px,7vw,80px);display:flex;flex-wrap:wrap;gap:20px}
.tb-calc__inputs,.tb-calc__result{flex:1 1 420px;min-width:0;border-radius:28px;padding:clamp(24px,4vw,44px);display:flex;flex-direction:column}
.tb-calc__inputs{background:#1d1d1f;gap:36px}
.tb-calc__inputs label{display:flex;flex-direction:column;gap:8px}
.tb-calc__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:clamp(18px,1.8vw,20px);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.tb-calc__label strong{font-size:clamp(28px,3vw,34px);font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.tb-calc__inputs input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--tb-blue);cursor:pointer}
.tb-calc__hint{font-size:15px;line-height:1.45;color:var(--tb-muted-dark)}
.tb-calc__result{background:#000;border:1px solid var(--tb-dark-line);gap:28px}
.tb-calc__result-label{margin:0;font-size:18px;font-weight:600;color:#f5f5f7}
.tb-calc__big{margin-top:6px;font-size:clamp(60px,8vw,104px);font-weight:700;letter-spacing:-.045em;line-height:.95;color:var(--tb-blue);white-space:nowrap}
.tb-calc__unit{margin:10px 0 0;font-size:16px;color:var(--tb-muted-dark)}
.tb-calc__rows{display:flex;flex-direction:column}
.tb-calc__rows-title{margin:0;padding-bottom:10px;border-bottom:1px solid var(--tb-dark-line);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tb-grey)}
.tb-calc__today{margin:0;padding:16px 0;border-bottom:1px solid var(--tb-dark-line);font-size:15px;line-height:1.55;color:var(--tb-muted-dark)}
.tb-calc__today b{font-weight:600;color:#f5f5f7}
.tb-calc__rows strong.is-plus{color:#34c759}
.tb-calc__net[hidden]{display:none!important}
.tb-calc__rows>div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--tb-dark-line);font-size:16px}
.tb-calc__rows>div>span{color:var(--tb-muted-dark)}
.tb-calc__rows>div>span small{display:block;margin-top:2px;font-size:13px;color:var(--tb-grey)}
.tb-calc__rows>div>strong{font-weight:600;text-align:right;white-space:nowrap}
.tb-calc__rows>.tb-calc__net{align-items:baseline;padding:20px 0 0;border-bottom:0}
.tb-calc__net>span{font-size:18px;font-weight:600;color:#f5f5f7!important}
.tb-calc__net>strong{font-size:26px;font-weight:700!important;letter-spacing:-.02em;color:var(--tb-blue);white-space:nowrap}
.tb-calc__cta{margin-top:auto;display:flex;min-height:52px;padding:10px 24px;font-size:16px}

/* ── Kapitel mit großem Claim (Restaurant / App / Kunden) ── */
.tb-chapter{position:relative}
.tb-claim{height:170vh;position:relative}
.tb-claim>div{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 20px}
.tb-claim h2{position:relative;margin:0;font-size:clamp(40px,12vw,180px);font-weight:700;letter-spacing:-.035em;line-height:1;text-align:center;will-change:transform,opacity}
.tb-claim.has-name{height:300vh}
.tb-claim__name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 20px;font-size:clamp(36px,9vw,140px);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-align:center;overflow-wrap:anywhere;color:var(--tb-blue);opacity:0;pointer-events:none;will-change:transform,opacity}
.tb-claim:not(.has-name) .tb-claim__name{display:none}
/* Gerichte der gewählten Küche schweben am Rand vorbei (site.js setzt Position und Parallax) */
.tb-claim__food{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
.tb-claim__food.is-on{opacity:1}
.tb-claim__food span{position:absolute;font-size:calc(clamp(44px,7.5vw,112px) * var(--s,1));line-height:1;will-change:transform;filter:drop-shadow(0 14px 22px rgba(0,0,0,.22))}
.tb-claim__food span.is-far{filter:blur(1px) drop-shadow(0 10px 16px rgba(0,0,0,.15));opacity:.85}
.tb-chapter__body{padding:0 20px clamp(100px,12vw,160px)}

.tb-row{display:flex;flex-wrap:wrap;gap:20px}
.tb-row--spaced{margin-top:clamp(48px,7vw,80px)}
.tb-row--spaced-lg{margin-top:clamp(56px,8vw,96px);align-items:stretch}
.tb-stack{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:20px}

.tb-card{flex:1 1 320px;min-width:0;border-radius:28px;padding:clamp(28px,4vw,40px);background:#fff;display:flex;flex-direction:column}
.tb-card--soft{background:var(--tb-soft)}
.tb-card--black{background:#000;color:#f5f5f7}
.tb-card__kicker{margin:0;font-size:15px;font-weight:600;color:var(--tb-muted)}
.tb-card--black .tb-card__kicker{color:var(--tb-grey)}

.tb-store{flex:1 1 460px;padding:clamp(28px,4vw,48px);justify-content:space-between;gap:40px;min-height:420px}
.tb-store__listing{background:#fff;border-radius:24px;padding:22px;box-shadow:0 20px 40px -24px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:18px;max-width:460px;overflow:hidden}
.tb-store__top{display:flex;gap:16px;align-items:center}
.tb-store__top>div:last-child{min-width:0;flex:1}
.tb-store__icon{flex:none;width:84px;height:84px;border-radius:20px;background:linear-gradient(145deg,#5aaeff,var(--tb-blue) 45%,#1f6fc2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;letter-spacing:-.02em}
.tb-store__name{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-store__cat{margin-top:2px;font-size:13px;color:var(--tb-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-store__get{margin-top:10px;display:inline-flex;align-items:center;min-height:30px;padding:0 20px;border-radius:980px;background:var(--tb-blue);color:#fff;font-size:14px;font-weight:600}
.tb-store__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 0;border-top:1px solid #ececf0;border-bottom:1px solid #ececf0;text-align:center}
.tb-store__facts>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tb-store__facts>div+div{border-left:1px solid #ececf0}
.tb-store__facts strong{font-size:15px;font-weight:700;color:#6e6e73;white-space:nowrap}
.tb-store__facts span{font-size:11px;color:#a1a1a6}
.tb-store__shots{display:flex;gap:10px;margin-right:-22px;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.tb-store__shots img{flex:none;width:118px;height:236px;object-fit:cover;object-position:top;border-radius:14px;border:1px solid #ececf0;background:#111}
/* Screenshots gleiten nacheinander herein, sobald die Kachel eingeblendet ist */
[data-reveal]:not(.tb-reveal) .tb-store__shots img{animation:tb-store-in .7s cubic-bezier(.2,.7,.2,1) .3s both}
[data-reveal]:not(.tb-reveal) .tb-store__shots img:nth-child(2){animation-delay:.42s}
[data-reveal]:not(.tb-reveal) .tb-store__shots img:nth-child(3){animation-delay:.54s}
@keyframes tb-store-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tb-store__shots img{animation:none!important}}
.tb-store__claim{margin:0;max-width:420px;font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.25}

.tb-menu-card,.tb-google-card{flex:1;justify-content:space-between;gap:24px}
.tb-menu-card{gap:20px}
.tb-menu-card{min-height:220px}
/* Webshop-Miniatur (nachgebaut aus dem Dark Mode des echten Webshops) */
.tb-shop{border-radius:16px;background:#1c1c1c;border:1px solid #333336;overflow:hidden;font-size:11px;line-height:1.3;color:#f5f5f7}
.tb-shop__bar{display:flex;align-items:center;gap:4px;padding:6px 10px;background:#262626}
.tb-shop__bar i{flex:none;width:6px;height:6px;border-radius:50%;background:#4a4a4d}
.tb-shop__bar span{flex:1;min-width:0;margin-left:8px;padding:2px 10px;border-radius:980px;background:#1c1c1c;color:var(--tb-muted-dark);font-size:10px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-shop__body{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:10px;padding:8px 10px 10px}
.tb-shop__side{display:flex;flex-direction:column;gap:2px}
.tb-shop__side span{padding:4px 8px;border-radius:7px;color:#d1d1d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-shop__side .is-active{background:#f5f5f7;color:#1c1c1c;font-weight:600}
.tb-shop__main{display:flex;flex-direction:column;gap:6px}
.tb-shop__title strong{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-shop__dish{display:flex;gap:8px;padding:8px;border-radius:12px;background:#2a2a2a}
.tb-shop__dish>div:first-child{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.tb-shop__dish b{font-weight:600;overflow-wrap:anywhere}
.tb-shop__dish [data-part=price]{font-size:13px;font-weight:700}
.tb-shop__img{position:relative;flex:none;width:50px;height:50px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:27px}
.tb-shop__img em{position:absolute;right:4px;bottom:4px;width:18px;height:18px;border-radius:50%;background:#2a2a2a;color:#fff;font-style:normal;font-size:12px;line-height:18px;text-align:center}
.tb-menu-card__big{font-size:clamp(30px,3.2vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.tb-menu-card p:last-child{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--tb-muted-dark)}
.tb-google-card{flex:none;min-height:180px}
.tb-google-card__note{margin:0;font-size:16px;font-weight:600;line-height:1.45;color:var(--tb-ink)}
/* Nachgebauter Google-Eintrag (Farben wie bei Google) */
.tb-gmb{background:#fff;border-radius:18px;padding:16px;box-shadow:0 12px 30px -18px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:12px}
.tb-gmb__head{display:flex;flex-direction:column;gap:2px;min-width:0}
.tb-gmb__head strong{font-size:18px;font-weight:600;color:#202124;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-gmb__rating,.tb-gmb__meta{font-size:13px;color:#4d5156}
.tb-gmb__rating i{font-style:normal;color:#fbbc04;letter-spacing:1px}
.tb-gmb__meta b{font-weight:500;color:#188038}
.tb-gmb__actions{display:flex;flex-wrap:wrap;gap:8px}
.tb-gmb__actions span{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:980px;border:1px solid #dadce0;background:#fff;font-size:13px;font-weight:500;color:#0b57d0;white-space:nowrap}
.tb-gmb__actions .is-order{position:relative;border-color:#0b57d0;background:#0b57d0;color:#fff}
.tb-gmb__actions .is-order::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:2px solid #0b57d0;opacity:0;animation:tb-gmb-ping 2.4s ease-out 1s infinite}
@keyframes tb-gmb-ping{0%{opacity:.7;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.tb-gmb__actions .is-order::after{animation:none}}

/* Deine App */
.tb-card--wide{flex:1 1 100%}
.tb-pay{padding:clamp(28px,5vw,56px);flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;min-height:340px}
.tb-pay__text{flex:1 1 360px;min-width:0}
.tb-pay__text p{margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--tb-muted)}
.tb-pay__text strong{color:var(--tb-ink);font-weight:500}
.tb-pay__text p+p{margin-top:12px}
.tb-pay__logos{flex:0 1 420px;min-width:0;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tb-pay__logos li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:16px 8px;border-radius:18px;background:var(--tb-soft);font-size:13px;font-weight:500;color:var(--tb-muted);text-align:center}
.tb-pay__logos img{display:block;width:40px;height:40px}
.tb-pay__logos img.is-wordmark{width:58px;height:58px;margin:-9px 0}
/* Logos ploppen nacheinander auf, sobald die Kachel eingeblendet ist */
[data-reveal]:not(.tb-reveal) .tb-pay__logos li{animation:tb-wa-pop .45s cubic-bezier(.2,.9,.3,1.2) both}
[data-reveal]:not(.tb-reveal) .tb-pay__logos li:nth-child(2){animation-delay:.08s}
[data-reveal]:not(.tb-reveal) .tb-pay__logos li:nth-child(3){animation-delay:.16s}
[data-reveal]:not(.tb-reveal) .tb-pay__logos li:nth-child(4){animation-delay:.24s}
[data-reveal]:not(.tb-reveal) .tb-pay__logos li:nth-child(5){animation-delay:.32s}
[data-reveal]:not(.tb-reveal) .tb-pay__logos li:nth-child(6){animation-delay:.4s}
@media (prefers-reduced-motion:reduce){.tb-pay__logos li{animation:none!important}}
@media (max-width:420px){.tb-pay__logos{gap:8px}.tb-pay__logos li{min-height:96px;padding:14px 4px;font-size:12px;white-space:nowrap}.tb-pay__logos img{width:34px;height:34px}.tb-pay__logos img.is-wordmark{width:50px;height:50px;margin:-8px 0}}

.tb-feature{gap:28px;min-height:380px}
.tb-feature p{margin:12px 0 0;font-size:17px;line-height:1.6;color:var(--tb-muted)}
.tb-feature--phone{flex:1 1 420px;min-height:360px}
.tb-feature__stage{margin-top:auto;margin-bottom:calc(-1 * clamp(28px,4vw,40px));display:flex;justify-content:center}
.tb-qr{margin:auto 0;align-self:center;padding:16px;border-radius:20px;background:#fff;border:1px solid #e8e8ed;line-height:0}
.tb-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:980px;background:#e6f2ff;color:#1f6fc2;font-size:13px;font-weight:600}

.tb-notifs{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.tb-notif{padding:12px 14px;border-radius:20px;background:var(--tb-soft);display:flex;gap:12px;align-items:flex-start;text-align:left}
.tb-notif--older{opacity:.6;transform:scale(.96)}
.tb-notif__icon{flex:none;width:38px;height:38px;border-radius:10px;background:var(--tb-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.tb-notif__body{min-width:0;flex:1;font-size:14px;line-height:1.4}
.tb-notif__body>div:first-child{display:flex;justify-content:space-between;gap:8px}
.tb-notif__body strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-notif__body small{flex:none;font-size:12px;color:var(--tb-grey)}

/* Push-Kachel: Sperrbildschirm im halben Handy */
.tb-pushphone{position:relative;display:flex;flex-direction:column;align-items:center;padding:40px 12px 0;background:radial-gradient(120% 80% at 30% 10%,#2b3a67 0%,#141a2e 45%,#000 100%);color:#fff;text-align:center}
.tb-pushphone__island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#000}
.tb-pushphone__date{font-size:13px;color:rgba(255,255,255,.75)}
.tb-pushphone__time{font-size:60px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.tb-pushphone__list{margin-top:22px;width:100%;display:flex;flex-direction:column;gap:8px}
.tb-pushphone .tb-notif--glass{margin-top:0;max-width:none;padding:10px 12px;border-radius:18px}
.tb-pushphone .tb-notif__icon{width:34px;height:34px;border-radius:9px;font-size:12px}
.tb-pushphone .tb-notif__body{font-size:13px;line-height:1.35}
.tb-pushphone .tb-notif__body small{font-size:11px}
/* Neue Nachricht fällt von oben ein, sobald die Kachel eingeblendet ist */
/* Neue Nachricht „kommt an“, sobald das Handy selbst im Bild ist (site.js: is-armed → is-pushed) */
.tb-pushphone.is-armed .tb-pushphone__new{opacity:0}
.tb-pushphone.is-armed .tb-pushphone__new~.tb-notif{transform:translateY(-48px) scale(.96)}
.tb-pushphone.is-pushed .tb-pushphone__new{animation:tb-push-in .7s cubic-bezier(.2,.9,.3,1.2) .4s both}
.tb-pushphone.is-pushed .tb-pushphone__new~.tb-notif{animation:tb-push-shift .5s ease .4s both}
@keyframes tb-push-in{from{opacity:0;transform:translateY(-28px) scale(.92)}to{opacity:1;transform:none}}
@keyframes tb-push-shift{from{transform:translateY(-48px) scale(.96)}to{transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){.tb-pushphone__new,.tb-pushphone__new~.tb-notif{animation:none!important}}

.tb-halfphone{width:300px;max-width:100%;aspect-ratio:300/330;border-radius:50px 50px 0 0;border:3px solid var(--tb-frame);border-bottom:none;background:#000;padding:7px 7px 0}
.tb-halfphone__screen{width:100%;height:100%;border-radius:42px 42px 0 0;overflow:hidden;background:center top/cover no-repeat}

.tb-loyalty{flex:1 1 100%;min-width:0;border-radius:28px;overflow:hidden;position:relative;background:#111 center/cover no-repeat;min-height:400px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;padding:clamp(28px,5vw,48px) clamp(28px,5vw,48px) 0}
.tb-loyalty::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
.tb-loyalty__text{position:relative;padding-bottom:clamp(28px,5vw,48px);flex:1 1 280px;max-width:400px;color:#fff}
.tb-loyalty__text p{margin:16px 0 0;font-size:18px;line-height:1.6;color:#f5f5f7}
.tb-loyalty__art{position:relative;display:flex;align-items:flex-end;margin:0 auto;max-width:100%}
.tb-loyalty__art img{position:relative;border-radius:12px}
.tb-loyalty__card2{width:clamp(110px,15vw,180px);margin-bottom:84px;margin-right:-60px;z-index:1}
.tb-loyalty__card1{width:clamp(108px,15vw,176px);margin-bottom:64px;margin-right:-40px;z-index:2}
.tb-loyalty__art .tb-halfphone{width:clamp(200px,24vw,300px);position:relative;z-index:3}
@media (max-width:600px){
  /* Auf dem Handy nur das iPhone zeigen – mit den Karten daneben wird es zu schmal. */
  .tb-loyalty__card1,.tb-loyalty__card2{display:none}
  .tb-loyalty__art .tb-halfphone{width:260px}
}

.tb-wa{background:rgb(239,234,226);display:flex;flex-direction:column;font-size:13px;line-height:17px;text-align:left}
.tb-wa__bar{background:rgb(0,128,105);color:#fff;padding:32px 18px 10px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.tb-wa__bar>div:last-child{min-width:0}
.tb-wa__bar strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-wa__bar small{display:block;font-size:11px;opacity:.85}
.tb-wa__avatar{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:rgb(0,128,105);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.tb-wa__chat{flex:1;min-height:0;overflow:hidden;padding:12px 12px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;transition:opacity .4s}
.tb-wa__chat.is-fading{opacity:0}
.tb-wa__out{flex:none;align-self:flex-end;max-width:78%;background:rgb(217,253,211);padding:7px 10px;border-radius:10px 10px 2px 10px}
.tb-wa__in{flex:none;align-self:flex-start;max-width:86%;background:#fff;border-radius:10px 10px 10px 2px;overflow:hidden}
.tb-wa__in--text{padding:7px 10px}
.tb-wa__in-text{padding:7px 10px}
.tb-wa__cart{margin:0 6px 6px;padding:8px 10px;border-radius:8px;background:rgb(246,246,246);display:flex;flex-direction:column;gap:2px}
.tb-wa__cart small{font-size:11px;color:var(--tb-muted)}
.tb-wa__cart strong{margin-top:4px;font-size:12px;font-weight:600}
.tb-wa__order{border-top:1px solid rgb(234,234,234);padding:8px 10px;text-align:center;color:rgb(0,128,105);font-weight:600;transition:background .15s}
.tb-wa__order.is-tapped{background:rgb(225,245,238)}
.tb-wa__input{flex:none;margin:0 8px 10px;display:flex;align-items:center;gap:8px}
.tb-wa__input>span{flex:1;min-width:0;height:34px;padding:0 12px;border-radius:17px;background:#fff;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;white-space:nowrap}
.tb-wa__input>span:has(i){justify-content:flex-start}
.tb-wa__input i{font-style:normal;color:var(--tb-grey)}
.tb-wa__input b{flex:none;width:34px;height:34px;border-radius:50%;background:rgb(0,128,105);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:400}
/* Animation (site.js) */
.tb-wa [data-wa-msg].is-hidden{display:none}
.tb-wa [data-wa-msg].is-new{animation:tb-wa-pop .35s cubic-bezier(.2,.9,.3,1.2)}
.tb-wa__typing{flex:none;align-self:flex-start;display:flex;gap:4px;padding:10px 12px;border-radius:10px 10px 10px 2px;background:#fff;animation:tb-wa-pop .25s ease-out}
.tb-wa__typing i{width:6px;height:6px;border-radius:50%;background:#9a9a9a;animation:tb-wa-dot 1s infinite ease-in-out}
.tb-wa__typing i:nth-child(2){animation-delay:.15s}
.tb-wa__typing i:nth-child(3){animation-delay:.3s}
@keyframes tb-wa-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tb-wa-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* Deine Kunden – dieselben Karten wie bei „Deine App“, nur dunkel */
.tb-card--dark{background:#1c1c1e;color:#f5f5f7}
.tb-card--dark p{color:var(--tb-muted-dark)}
.tb-feature--text{min-height:0}
.tb-crm{flex:2 1 520px;overflow:hidden}
.tb-crm__panel{margin-top:auto;border-radius:20px;background:#fff;color:var(--tb-ink);padding:clamp(16px,2.4vw,24px);overflow:hidden}
/* Schmal: Panel läuft wie das Handy nebenan bis an den Kartenrand, damit die Tabelle Platz hat */
@media (max-width:600px){
  .tb-crm__panel{margin:0 calc(-1 * clamp(28px,4vw,40px)) calc(-1 * clamp(28px,4vw,40px));border-radius:20px 20px 0 0}
  .tb-crm__table{font-size:13px}
  .tb-crm__last{white-space:nowrap}
}
.tb-crm__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.tb-crm__head strong{font-size:17px;font-weight:600}
.tb-crm__head>span{font-size:13px;color:var(--tb-grey)}
.tb-crm__table{font-size:14px}
.tb-crm__table>div{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(max-content,.8fr) minmax(0,1fr);column-gap:12px;border-bottom:1px solid #e8e8ed}
.tb-crm__table>div:last-child{border-bottom:0}
.tb-crm__table span{padding:12px 0}
.tb-crm__th span{padding:8px 0;font-size:12px;color:var(--tb-grey)}
.tb-crm__last{color:var(--tb-muted)}
.tb-crm__table .is-overdue .tb-crm__last{color:#d46b00;font-weight:500}
.tb-crm__table span small{display:block;margin-top:2px;font-size:12px;color:var(--tb-grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-crm.is-flash .is-overdue{animation:tb-crm-flash 1.4s ease-out}
@keyframes tb-crm-flash{0%,35%{background:rgba(255,159,10,.16)}100%{background:transparent}}
.tb-crm__hint{margin-top:14px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--tb-soft);font-size:13px;color:var(--tb-ink)}
.tb-crm__hint i{width:8px;height:8px;border-radius:50%;background:var(--tb-blue);flex:none;transition:background .3s}
.tb-crm__hint.is-sent i{background:#34c759}
.tb-crm__hint small{display:block;margin-top:2px;font-size:12px;color:var(--tb-muted)}

.tb-notif--glass{margin-top:auto;width:100%;max-width:340px;padding:14px;border-radius:22px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.tb-notif--glass .tb-notif__icon{background:#fff;color:var(--tb-ink)}
.tb-notif--glass .tb-notif__body small{color:rgba(255,255,255,.6)}
.tb-comeback{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1.2)}
.tb-comeback .tb-notif__body b{font-weight:600}
.tb-comeback.is-waiting{opacity:0;transform:translateY(-16px) scale(.96)}
@media (prefers-reduced-motion:reduce){.tb-crm.is-flash .is-overdue{animation:none}.tb-comeback{transition:none}}

/* ── 6 Preise ────────────────────────────────────────────── */
.tb-pricing{padding:clamp(100px,13vw,170px) 20px}
.tb-tiers{margin-top:clamp(48px,7vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.tb-tier{background:#fff;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:6px;min-height:240px;box-shadow:0 0 0 1px rgba(0,0,0,.04);transition:box-shadow .3s ease}
.tb-tier.is-active{box-shadow:0 0 0 2px var(--tb-blue)}
.tb-tier__head{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:28px}
.tb-tier__head strong{font-size:22px;font-weight:700;letter-spacing:-.02em}
.tb-tier__badge{display:none;font-size:12px;font-weight:600;color:#1f6fc2;background:#e6f2ff;padding:4px 10px;border-radius:980px}
.tb-tier.is-active .tb-tier__badge{display:inline-block}
.tb-tier__range,.tb-tier__note{font-size:14px;color:var(--tb-muted)}
.tb-tier__note{font-size:13px;min-height:18px}
.tb-tier__price{margin-top:auto;padding-top:28px;display:flex;align-items:baseline;gap:4px;font-size:16px;color:var(--tb-muted)}
.tb-tier__price span{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--tb-ink)}

.tb-included{margin-top:16px;background:#fff;border-radius:24px;padding:clamp(24px,4vw,40px)}
.tb-included>p{margin:0 0 20px;font-size:17px;font-weight:600}
.tb-included ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px 32px;font-size:16px;line-height:1.5}
.tb-included li{display:flex;gap:12px;align-items:flex-start}
.tb-included li::before{content:"✓";flex:none;color:var(--tb-blue);font-weight:700}

.tb-contracts{margin-top:16px;display:flex;flex-wrap:wrap;gap:16px}
.tb-contracts>div{flex:1 1 320px;min-width:0;background:#fff;border-radius:24px;padding:clamp(24px,4vw,40px)}
.tb-contracts>div>p:first-child{margin:0;font-size:17px;font-weight:600}
.tb-contracts__price{margin-top:20px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:16px;color:var(--tb-muted)}
.tb-contracts__price span{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--tb-ink)}
.tb-contracts__terms{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--tb-muted)}
.tb-pricing__setup{margin:24px 0 0;max-width:860px;font-size:15px;line-height:1.6}
.tb-pricing__setup strong{font-weight:600}
.tb-pricing__fine{margin:12px 0 0;max-width:860px;font-size:13px;line-height:1.6;color:var(--tb-muted)}

/* ── 7 Referenz + 8 Vertrauen ────────────────────────────── */
.tb-refs{padding:clamp(100px,13vw,170px) 20px}
.tb-refs__grid{margin-top:clamp(48px,7vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.tb-ref{background:var(--tb-soft);border-radius:28px;padding:40px 24px 32px;display:flex;flex-direction:column;align-items:center;gap:24px}
.tb-ref__phone{width:220px;height:450px;border-radius:40px;background:#111;padding:8px;box-shadow:0 30px 60px -24px rgba(0,0,0,.35)}
.tb-ref__phone>div{width:100%;height:100%;border-radius:32px;overflow:hidden;background:#fff}
.tb-ref__phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.tb-ref__name{text-align:center}
.tb-ref__name strong{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em}
.tb-ref__name span{display:block;margin-top:2px;font-size:15px;color:var(--tb-muted)}
.tb-ref{color:var(--tb-ink);text-decoration:none}
.tb-ref--link{transition:transform .25s ease,box-shadow .25s ease}
.tb-ref--link:hover{color:var(--tb-ink);transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(0,0,0,.35)}
.tb-ref--link:focus-visible{outline:2px solid var(--tb-blue);outline-offset:4px}
.tb-ref__cta{margin-top:-8px;font-size:15px;font-weight:500;color:var(--tb-blue)}
.tb-ref--link:hover .tb-ref__cta{text-decoration:underline}
.tb-ref__empty{border-radius:28px;border:1.5px dashed var(--tb-line);min-height:320px}

.tb-trust{padding:0 20px clamp(100px,12vw,150px)}
.tb-trust__grid{border-top:1px solid var(--tb-line);padding-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px}
.tb-trust__big{font-size:clamp(40px,4.4vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1}
.tb-trust__grid p{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--tb-muted)}
.tb-trust__grid p.tb-trust__title{margin-top:16px;font-size:17px;font-weight:600;color:var(--tb-ink)}

/* ── So funktioniert's ───────────────────────────────────── */
.tb-hiw-hero{padding:clamp(72px,11vw,150px) 20px clamp(64px,8vw,110px);text-align:center}
.tb-hiw-hero__inner{max-width:1000px;margin:0 auto}
.tb-hiw-hero h1{margin:16px 0 0;font-size:clamp(44px,7.4vw,96px);font-weight:700;letter-spacing:-.025em;line-height:1.02}
.tb-hiw-hero h1 span{display:block}
.tb-hiw-hero__sub{margin:28px auto 0;max-width:600px;font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--tb-muted)}
.tb-hiw-hero__cta{margin-top:32px;display:flex;justify-content:center}

.tb-steps{padding:clamp(90px,12vw,160px) 20px}
.tb-steps ol{max-width:1200px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:48px 28px}
.tb-steps li{position:relative;border-top:2px solid var(--tb-dark-line);padding-top:28px}
/* Punkt auf der Zeitleiste + blaue Füllung der Linie (::after) */
.tb-steps li::before{content:"";position:absolute;z-index:1;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:#f5f5f7}
.tb-steps li::after{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--tb-blue);transform:scaleX(0);transform-origin:left}
.tb-steps li:first-child::before{background:var(--tb-blue)}
.tb-steps li:first-child::after{transform:none}
.tb-steps__num{font-size:clamp(88px,10vw,128px);font-weight:700;letter-spacing:-.05em;line-height:.9;overflow:hidden;padding-top:.06em}
.tb-steps__num span{display:inline-block}

/* Animation (site.js setzt --animate und schaltet die Schritte nacheinander mit .is-on frei) */
.tb-steps--animate li:nth-child(n)::before{background:#f5f5f7;transition:background .3s}
.tb-steps--animate li:nth-child(n)::after{transform:scaleX(0);transition:transform .9s cubic-bezier(.65,0,.35,1) .15s}
.tb-steps--animate .tb-steps__num span{transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.7,.2,1) .1s}
.tb-steps--animate h2,.tb-steps--animate p{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.tb-steps--animate h2{transition-delay:.3s}
.tb-steps--animate p{transition-delay:.42s}
.tb-steps--animate li.is-on::before{background:var(--tb-blue);animation:tb-dot-pop .6s ease-out}
.tb-steps--animate li.is-on::after,.tb-steps--animate li.is-on .tb-steps__num span,.tb-steps--animate li.is-on h2,.tb-steps--animate li.is-on p{transform:none;opacity:1}
@keyframes tb-dot-pop{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(56,155,255,.6)}40%{transform:scale(1.5)}100%{transform:scale(1);box-shadow:0 0 0 14px rgba(56,155,255,0)}}
.tb-steps h2{margin:20px 0 0;font-size:clamp(22px,2.4vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.tb-steps p{margin:12px 0 0;font-size:17px;line-height:1.6;color:var(--tb-muted-dark);text-wrap:pretty}

/* ── Rechtliches ──────────────────────────────────────────── */
.tb-legal-hero{padding:clamp(72px,10vw,130px) 20px clamp(40px,5vw,64px);text-align:center}
.tb-legal-hero__inner{max-width:1000px;margin:0 auto}
.tb-legal-hero__claim{margin:16px 0 0;font-size:clamp(44px,7vw,88px);font-weight:700;letter-spacing:-.025em;line-height:1.02}
.tb-legal-hero__sub{margin:24px auto 0;max-width:560px;font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--tb-muted);text-wrap:pretty}
.tb-legal-tabs{margin-top:36px;display:inline-flex;gap:4px;padding:4px;border-radius:980px;background:var(--tb-soft);max-width:100%}
.tb-legal-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:980px;font-size:15px;font-weight:500;color:var(--tb-muted);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.tb-legal-tabs a:hover{color:var(--tb-ink)}
.tb-legal-tabs a[aria-current=page]{background:#fff;color:var(--tb-ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
@media (max-width:400px){.tb-legal-tabs a{padding:0 14px}}

.tb-legal{padding:0 20px clamp(100px,12vw,160px)}
.tb-legal__grid{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:48px 72px;align-items:flex-start}
.tb-legal__aside{flex:1 1 220px;max-width:260px;display:flex;flex-direction:column;gap:4px;font-size:14px;border-top:1px solid var(--tb-line);padding-top:20px}
.tb-legal__aside span{margin-bottom:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tb-muted)}
.tb-legal__aside p{margin:0;line-height:1.55;color:var(--tb-muted)}
.tb-legal__doc{flex:1 1 520px;min-width:0;max-width:760px;border-top:1px solid var(--tb-line);padding-top:40px;font-size:17px;line-height:1.7;color:#424245}
.tb-legal__doc h1{margin:0;font-size:clamp(32px,4vw,48px);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--tb-ink)}
/* Inhalte aus dem Admin-Editor */
.tb-legal__content{margin-top:8px;overflow-wrap:break-word}
.tb-legal__content h2,.tb-legal__content h3,.tb-legal__content h4{margin:32px 0 6px;font-size:19px;font-weight:600;line-height:1.35;color:var(--tb-ink)}
.tb-legal__content h3,.tb-legal__content h4{font-size:17px}
.tb-legal__content p{margin:0 0 12px;text-wrap:pretty}
.tb-legal__content ul,.tb-legal__content ol{margin:0 0 12px;padding-left:1.3em}
.tb-legal__content li{margin:4px 0}
.tb-legal__content strong,.tb-legal__content b{font-weight:600;color:var(--tb-ink)}
.tb-legal__content a{text-decoration:none}
.tb-legal__content a:hover{text-decoration:underline}

/* ── FAQ ───────────────────────────────────────────────── */
.tb-faq{padding:clamp(80px,12vw,140px) 20px}
.tb-faq__inner{max-width:820px;margin:0 auto}
.tb-faq h2{margin:0 0 48px;text-align:center;font-size:clamp(36px,5vw,56px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.tb-faq__list{border-top:1px solid var(--tb-line)}
.tb-faq__item{border-bottom:1px solid var(--tb-line)}
.tb-faq__q{width:100%;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--tb-ink)}
.tb-faq__q span{font-size:clamp(18px,2.2vw,22px);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.tb-faq__q i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--tb-soft);display:flex;align-items:center;justify-content:center;font-size:20px;font-style:normal;line-height:1;transition:transform .3s ease}
.tb-faq__q[aria-expanded=true] i{transform:rotate(45deg)}
.tb-faq__a{margin:0;padding:0 52px 28px 0;font-size:18px;line-height:1.6;color:var(--tb-muted);text-wrap:pretty}

/* ── Kontakt ──────────────────────────────────────────── */
.tb-contact{padding:clamp(80px,12vw,160px) 20px}
.tb-contact__grid{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,96px);align-items:flex-start}
.tb-contact__intro{flex:1 1 380px;min-width:0}
.tb-contact__intro h2{margin:0;font-size:clamp(44px,6.5vw,80px);font-weight:700;letter-spacing:-.02em;line-height:1.04}
.tb-contact__intro h2 span{display:block}
.tb-contact__intro p{margin:28px 0 0;max-width:440px;font-size:19px;line-height:1.6;color:var(--tb-muted-dark);text-wrap:pretty}
.tb-contact__photo{display:block;margin-top:36px;width:112px;height:112px;border-radius:50%;object-fit:cover}
.tb-contact__photo--empty{display:flex;align-items:center;justify-content:center;border:2px dashed var(--tb-dark-line);background:#1c1c1e;color:var(--tb-grey)}
.tb-contact__card{flex:1 1 420px;min-width:0;background:#1c1c1e;border-radius:28px;padding:clamp(24px,4vw,40px)}

.tb-form{display:flex;flex-direction:column;gap:16px}
.tb-form label,.tb-form legend{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--tb-muted-dark)}
.tb-form__row{display:flex;flex-wrap:wrap;gap:16px}
.tb-form__row>label{flex:1 1 200px}
.tb-form input:not([type=radio]):not([type=checkbox]),.tb-form textarea{min-height:52px;border-radius:14px;border:1px solid #3a3a3c;background:#000;color:#f5f5f7;padding:0 16px;font-size:17px;outline:none;transition:border-color .15s}
.tb-form textarea{padding:14px 16px;line-height:1.5;resize:vertical}
.tb-form input:focus,.tb-form textarea:focus{border-color:var(--tb-blue)}
.tb-form__ranges{margin:0;padding:0;border:0;min-width:0}
.tb-form__ranges legend{padding:0;margin-bottom:8px}
.tb-form__ranges>div{display:flex;flex-wrap:wrap;gap:8px}
.tb-form__ranges label{flex:1 1 110px;position:relative;display:block}
.tb-form__ranges input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tb-form__ranges span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;border-radius:980px;border:1px solid #3a3a3c;color:#f5f5f7;font-size:15px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}
.tb-form__ranges input:checked+span{background:var(--tb-blue);border-color:var(--tb-blue)}
.tb-form__ranges input:focus-visible+span{outline:2px solid var(--tb-blue);outline-offset:2px}
.tb-form__hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.tb-form label.tb-form__consent{flex-direction:row;gap:12px;align-items:flex-start;padding:6px 0;line-height:1.5;cursor:pointer}
.tb-form__consent input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--tb-blue)}
.tb-form__error{margin:0;padding:12px 16px;border-radius:14px;background:rgba(255,69,58,.15);color:#ff6961;font-size:14px;line-height:1.5}
.tb-form__submit{min-height:52px;margin-top:4px}
.tb-form__submit:disabled{opacity:.6;cursor:default}
.tb-form__promise{margin:0;text-align:center;font-size:14px;color:var(--tb-grey)}
.tb-sent{padding:40px 0;text-align:center;outline:none}
.tb-sent__title{font-size:40px;font-weight:700;letter-spacing:-.02em}
.tb-sent p{margin:12px 0 0;font-size:18px;line-height:1.6;color:var(--tb-muted-dark)}