/* ═══════════════════════════════════════════════════════════════════
   Teamwork.com (Website) · Bausteine
   Alles unter der Wurzel .twc – keine Regeln auf html/body/*.
   Werte aus tokens.css; Messwerte und Herkunft: references/messliste.md.
   Marke umschalten: <div class="twc" data-marke="original|neutral">
     original = Teamwork-Logo, -Symbole und -Bilder (nur Vorlage)
     neutral  = gleiche Machart, Platzhalter statt Teamwork-Eigentum
   ═══════════════════════════════════════════════════════════════════ */
@font-face { font-family: "Work Sans"; src: url("fonts/work-sans-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

.twc { background: var(--twc-page); color: var(--twc-ink); font: var(--twc-w-regular) 14px/1.6 var(--twc-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.twc, .twc :where(*, *::before, *::after) { box-sizing: border-box; }
.twc :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
.twc :where(h1, h2, h3, h4) { font-size: inherit; font-weight: inherit; }
.twc :where(ul) { list-style: none; }
.twc :where(a) { color: inherit; text-decoration: none; }
.twc :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.twc :where(img, svg, video) { display: block; max-width: 100%; }
.twc :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--twc-purple); outline-offset: 3px; }
.twc [hidden] { display: none !important; }
.twc .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Marke umschalten */
.twc[data-marke="original"] .twc-only-neutral,
.twc:not([data-marke="original"]) .twc-only-original { display: none !important; }

/* Platzhalter für Bilder in der neutralen Marke: weiche Fläche mit Bildzeile */
.twc .twc-ph { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: var(--ph-ratio, 4 / 3); border-radius: var(--twc-r-lg); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)); box-shadow: var(--twc-sh-glass); color: var(--twc-muted); font: var(--twc-w-medium) 14px/1.45 var(--twc-font); letter-spacing: var(--twc-ls-small); overflow: hidden; }
.twc .twc-ph::before { content: ""; position: absolute; inset: 14px 14px auto; height: 10px; border-radius: 99px; background: var(--twc-sand-2); box-shadow: 0 22px 0 -2px var(--twc-sand), 0 44px 0 -2px var(--twc-sand); width: 46%; }
.twc .twc-ph::after { content: ""; position: absolute; inset: auto 14px 14px; height: 46%; border-radius: 10px; background: linear-gradient(90deg, #ece6ff 0 22%, transparent 22% 26%, #ffe1f2 26% 52%, transparent 52% 56%, #e7f3ff 56% 100%); opacity: .9; }

/* ── Raster ─────────────────────────────────────────────────────── */
.twc .twc-container { width: 100%; max-width: var(--twc-container); margin-inline: auto; padding-inline: var(--twc-gutter); }
.twc .twc-section { position: relative; padding-block: var(--twc-section-y); }
.twc .twc-section--hero { padding-top: var(--twc-hero-top); padding-bottom: 42px; }
.twc .twc-section--flush-top { padding-top: 0; }

/* ── Typografie ─────────────────────────────────────────────────── */
.twc .twc-h-huge    { font-size: var(--twc-h-huge);    line-height: var(--twc-h-huge-lh); letter-spacing: var(--twc-h-huge-ls); font-weight: var(--twc-w-semibold); color: var(--twc-ink); text-wrap: balance; }
.twc .twc-h-section { font-size: var(--twc-h-section); line-height: var(--twc-h-section-lh); font-weight: var(--twc-w-semibold); color: var(--twc-ink); text-wrap: balance; }
.twc .twc-h-medium  { font-size: var(--twc-h-medium);  line-height: var(--twc-h-medium-lh); font-weight: var(--twc-w-semibold); color: var(--twc-ink); text-wrap: balance; }
.twc .twc-h-small   { font-size: var(--twc-h-small);   line-height: var(--twc-h-small-lh); font-weight: var(--twc-w-bold); color: var(--twc-ink); }
.twc .twc-h-xsmall  { font-size: var(--twc-h-xsmall);  line-height: var(--twc-h-xsmall-lh); font-weight: var(--twc-w-regular); color: var(--twc-ink); }
.twc .twc-h-heavy   { font-weight: var(--twc-w-heavy); }
.twc .twc-p-lead    { font-size: var(--twc-p-lead);   line-height: var(--twc-p-lead-lh);   letter-spacing: var(--twc-ls-text); color: var(--twc-text-2); }
.twc .twc-p-huge    { font-size: var(--twc-p-huge);   line-height: var(--twc-p-huge-lh);   letter-spacing: var(--twc-ls-text); color: var(--twc-text-2); }
.twc .twc-p-large   { font-size: var(--twc-p-large);  line-height: var(--twc-p-large-lh);  letter-spacing: var(--twc-ls-text); color: var(--twc-ink); }
.twc .twc-p-medium  { font-size: var(--twc-p-medium); line-height: var(--twc-p-medium-lh); letter-spacing: var(--twc-ls-text); color: var(--twc-text); }
.twc .twc-p-small   { font-size: var(--twc-p-small);  line-height: var(--twc-p-small-lh);  letter-spacing: var(--twc-ls-text); font-weight: var(--twc-w-medium); color: var(--twc-text-2); }
.twc .twc-p-xsmall  { font-size: var(--twc-p-xsmall); line-height: var(--twc-p-xsmall-lh); letter-spacing: var(--twc-ls-small); font-weight: var(--twc-w-medium); color: var(--twc-text); }
.twc .twc-caps      { text-transform: uppercase; }
.twc .twc-hint      { font-size: 14px; line-height: 1.45; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-muted); text-transform: uppercase; }

/* Glanz über einem Wort im Hero: ein heller Streifen fährt einmal von rechts nach links */
.twc .twc-shine { font-weight: var(--twc-w-black); color: var(--twc-ink); background-image: linear-gradient(100deg, var(--twc-ink) calc(50% - var(--twc-shine-spread) * 2), #6a6a80 calc(50% - var(--twc-shine-spread)), var(--twc-line-soft) 50%, #6a6a80 calc(50% + var(--twc-shine-spread)), var(--twc-ink) calc(50% + var(--twc-shine-spread) * 2)); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: twc-shine 2s cubic-bezier(.2,.6,.8,.4) 1.2s both, twc-shine-grow 2s ease-in-out 1.2s both; }
@keyframes twc-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes twc-shine-grow { 0%, 100% { --twc-shine-spread: 2.5%; } 50% { --twc-shine-spread: 6%; } }

/* ── Knöpfe ─────────────────────────────────────────────────────── */
/* Gefüllt (Schiefer) · Umrandet · Text · Violett. Größen: huge 72 · large 64 · medium 56 · small 40 px */
.twc .twc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 16px 24px; border-radius: var(--twc-r-btn-large); background: var(--twc-ink); color: var(--twc-white); font-size: 16px; line-height: 24px; font-weight: var(--twc-w-semibold); letter-spacing: var(--twc-ls-text); white-space: nowrap; text-underline-offset: 4px; transition: background-color var(--twc-dur-fast) var(--twc-ease-btn), box-shadow var(--twc-dur-fast) var(--twc-ease-btn), transform var(--twc-dur-fast) var(--twc-ease-btn); }
.twc .twc-btn:hover, .twc .twc-btn.is-hover { box-shadow: var(--twc-sh-press); text-decoration: underline; }
.twc .twc-btn:active { transform: translateY(1px); }
.twc .twc-btn--huge  { height: 72px; padding: 20px 32px; border-radius: var(--twc-r-btn-huge); font-size: 19px; line-height: 31.92px; }
.twc .twc-btn--large { height: 64px; padding: 20px 32px; border-radius: var(--twc-r-btn-large); }
.twc .twc-btn--small { height: 40px; padding: 9px 16px; border-radius: var(--twc-r-btn-small); font-size: 14px; line-height: 21.98px; letter-spacing: var(--twc-ls-small); }
.twc .twc-btn--purple { background: var(--twc-purple); }
.twc .twc-btn--outlined { background: transparent; color: var(--twc-ink); box-shadow: var(--twc-sh-ring); }
.twc .twc-btn--outlined:hover, .twc .twc-btn--outlined.is-hover { background: var(--twc-ink); color: var(--twc-white); box-shadow: var(--twc-sh-ring); text-decoration: none; }
.twc .twc-btn--block { width: 100%; }
/* Textknopf: feine graue Linie, beim Darüberfahren legt sich eine kräftige Linie darüber */
.twc .twc-btn--text { height: auto; padding: 10px 0 0; border-radius: 0; background: none; color: var(--twc-ink); font-size: 18px; line-height: 28px; font-weight: var(--twc-w-medium); }
.twc .twc-btn--text:hover, .twc .twc-btn--text.is-hover { box-shadow: none; text-decoration: none; }
.twc .twc-btn--text > span { position: relative; padding-bottom: 3px; }
.twc .twc-btn--text > span::before,
.twc .twc-btn--text > span::after { content: ""; position: absolute; left: 0; right: 0; }
.twc .twc-btn--text > span::before { bottom: 0; height: 1px; background: var(--twc-line-soft); }
.twc .twc-btn--text > span::after { bottom: 0; height: 2px; background: var(--twc-ink); opacity: 0; transition: opacity var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-btn--text:hover > span::after, .twc .twc-btn--text.is-hover > span::after { opacity: 1; }
/* Violetter Textknopf (Preiskarten) */
.twc .twc-btn--ghost { height: 40px; padding: 9px 16px; border-radius: var(--twc-r-btn-small); background: none; color: var(--twc-purple); font-size: 14px; line-height: 21.98px; letter-spacing: var(--twc-ls-small); }
.twc .twc-btn--ghost:hover, .twc .twc-btn--ghost.is-hover { background: rgba(137,94,247,.1); box-shadow: none; text-decoration: none; }
.twc .twc-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.twc .twc-btns--start { justify-content: flex-start; }

/* ── Tag (Pille mit Großbuchstaben) ─────────────────────────────── */
.twc .twc-tag { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 14px; border: 1px solid var(--twc-border); border-radius: 100px; background: var(--twc-white); }
.twc .twc-tag__icon { width: 24px; height: 23px; flex: none; }
.twc .twc-tag__label { font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-ink-deep); text-transform: uppercase; white-space: nowrap; }
.twc .twc-tag--small { gap: 6px; padding: 5px 10px; background: transparent; }
.twc .twc-tag--small .twc-tag__label { color: var(--twc-pink); }
.twc .twc-eyebrow { font-size: 18px; line-height: 1.45; font-weight: var(--twc-w-bold); letter-spacing: var(--twc-ls-text); color: var(--twc-violet-hot); text-transform: uppercase; }

/* ── Kopfleiste ─────────────────────────────────────────────────── */
/* Oben durchsichtig; ab dem ersten Scrollen weiß 90 % mit Weichzeichner und Haarlinie */
.twc .twc-nav-wrap { position: sticky; top: 0; z-index: 50; height: 0; }
.twc .twc-nav { position: relative; z-index: 2; height: var(--twc-nav-h); background: transparent; transition: background-color var(--twc-dur-ui) var(--twc-ease-ui), backdrop-filter var(--twc-dur-ui) var(--twc-ease-ui), box-shadow var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-nav.is-scrolled, .twc .twc-nav.is-open { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--twc-sh-nav); }
.twc .twc-nav__inner { position: relative; display: flex; align-items: center; height: 100%; padding-block: 11px; }
.twc .twc-nav__logo { display: flex; align-items: center; height: 50px; padding: 5.5px 0 14.5px; margin-right: 20px; color: var(--twc-ink); }
.twc .twc-nav__logo img { width: 165px; height: auto; }
.twc .twc-wordmark { font-size: 24px; font-weight: var(--twc-w-bold); letter-spacing: -.5px; line-height: 1; padding-top: 9px; }
.twc .twc-wordmark b { color: var(--twc-pink); }
.twc .twc-nav__links { display: flex; align-items: center; gap: 4px; }
.twc .twc-nav__cta { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.twc .twc-nav__cta .twc-btn { margin-left: 8px; }
.twc .twc-nav-link { display: flex; align-items: center; gap: 4px; height: 41px; padding: 10px 7px; border-radius: var(--twc-r-sm); font-size: 14px; line-height: 21px; color: var(--twc-ink); transition: background-color var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-nav-link:hover, .twc .twc-nav-link.is-hover, .twc .twc-nav-link[aria-expanded="true"] { background: var(--twc-grey-bg); }
.twc .twc-nav-link[aria-expanded="true"] { background: var(--twc-white); }
.twc .twc-nav-link__chev { width: 12px; height: 12px; transition: transform var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-nav-link[aria-expanded="true"] .twc-nav-link__chev { transform: rotate(180deg); }
.twc .twc-nav-link__spark { width: 18px; height: 18px; }

/* Mega-Menü: öffnet nach 0,3 s, blendet in 0,2 s ein; dahinter wird die Seite grau-unscharf */
.twc .twc-mega { position: absolute; top: calc(100% + 10px); left: var(--twc-gutter); right: var(--twc-gutter); border: 3px solid var(--twc-divider); border-radius: var(--twc-r-lg); background: var(--twc-white); box-shadow: var(--twc-sh-menu); overflow: hidden; opacity: 0; visibility: hidden; transition: opacity var(--twc-dur-ui) var(--twc-ease-ui), visibility var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-mega.is-open { opacity: 1; visibility: visible; transition-delay: var(--twc-dur-menu-delay); }
.twc .twc-mega__banner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px; background: linear-gradient(90deg, #f6c8e6, #f7d0ea); font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-ink); }
.twc .twc-mega__banner u { text-underline-offset: 3px; }
.twc .twc-mega__body { display: grid; grid-template-columns: 250px 1fr 233px; gap: 0 30px; padding: 32px 26px 32px; }
.twc .twc-mega__side { padding-right: 16px; border-right: 1px solid var(--twc-divider); }
.twc .twc-mega__title { margin: 0 12px 22px; font-size: 15.75px; line-height: 1.45; font-weight: var(--twc-w-bold); letter-spacing: var(--twc-ls-text); color: var(--twc-muted); text-transform: uppercase; }
.twc .twc-mega__tab { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; margin-bottom: 5px; border-radius: 6px; font-size: 15.75px; font-weight: var(--twc-w-bold); letter-spacing: var(--twc-ls-text); text-align: left; color: var(--twc-ink); transition: background-color var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-mega__tab:hover, .twc .twc-mega__tab[aria-selected="true"] { background: var(--twc-grey-bg); }
.twc .twc-mega__tab[aria-selected="true"] svg { color: var(--twc-pink); }
.twc .twc-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; align-content: start; }
.twc .twc-mega__item { display: grid; grid-template-columns: 24px 1fr; gap: 6px 14px; align-items: center; }
.twc .twc-mega__item b { font-size: 15.75px; font-weight: var(--twc-w-bold); letter-spacing: var(--twc-ls-text); }
.twc .twc-mega__item span { grid-column: 2; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-muted); }
.twc .twc-mega__item:hover b { text-decoration: underline; text-underline-offset: 4px; }
.twc .twc-mega__explore { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 34px; border-radius: var(--twc-r-pill); background: var(--twc-grad-menu-cta); font-size: 14px; font-weight: var(--twc-w-semibold); letter-spacing: var(--twc-ls-text); }
.twc .twc-mega__feature { display: grid; gap: 6px; align-content: start; }
.twc .twc-mega__feature .twc-ph { --ph-ratio: 233 / 137; border-radius: 8px; margin-bottom: 18px; background: linear-gradient(135deg, #fbd3ec, #f3b6e2); }
.twc .twc-mega__feature img { border-radius: 8px; margin-bottom: 18px; }
.twc .twc-mega__feature b { font-size: 16px; letter-spacing: var(--twc-ls-text); }
.twc .twc-mega__feature p { font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-muted); }
.twc .twc-mega__feature a { justify-self: start; margin-top: 16px; font-size: 14px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); text-decoration: underline; text-underline-offset: 6px; }
.twc .twc-mega__foot { display: flex; gap: 16px; padding: 14px 24px; background: var(--twc-grey-bg); }
.twc .twc-pill-link { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 1px solid var(--twc-divider); border-radius: var(--twc-r-pill); background: var(--twc-white); font-size: 14px; font-weight: var(--twc-w-semibold); letter-spacing: var(--twc-ls-small); color: var(--twc-text); transition: border-color var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-pill-link:hover { border-color: var(--twc-border); }
.twc .twc-nav-overlay { position: fixed; inset: 0; z-index: 1; background: rgba(120,120,128,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--twc-dur-ui) var(--twc-ease-ui), visibility var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-nav-overlay.is-open { opacity: 1; visibility: visible; transition-delay: var(--twc-dur-menu-delay); }

/* ── Hero (einspaltig, zentriert) ───────────────────────────────── */
.twc .twc-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 47px; }
.twc .twc-hero .twc-h-huge { max-width: 1100px; margin-top: 7px; }
.twc .twc-hero .twc-h-xsmall { max-width: 680px; margin-top: 21px; }
.twc .twc-hero .twc-btns { margin-top: 42px; }
.twc .twc-hero .twc-hint { margin-top: 21px; }

/* Hero zweispaltig (Produktseiten): rosa Kreise oben, Bild rechts */
.twc .twc-hero2 { position: relative; overflow: hidden; padding-block: 120px; isolation: isolate; }
.twc .twc-hero2::before { content: ""; position: absolute; z-index: -1; inset: -67px -152px auto; height: 807px; background: var(--twc-grad-hero-blobs); opacity: .8; }
.twc .twc-hero2__grid { display: grid; grid-template-columns: 577px 1fr; gap: 40px; align-items: center; }
.twc .twc-hero2 .twc-h-huge { margin: 6px 0 14px; font-weight: var(--twc-w-heavy); color: #000; }
.twc .twc-hero2 .twc-p-large { margin-bottom: 42px; color: #000; }
.twc .twc-hero2 .twc-hint { margin-top: 18px; line-height: 21px; }
.twc .twc-hero2__media { border-radius: var(--twc-r-lg); overflow: hidden; aspect-ratio: 577 / 395; background: linear-gradient(135deg, #ff8a6b, #ff6f61 45%, #ff9a80); display: grid; place-items: center; padding: 18px; }

/* ── Produkt-Reiter mit Bühne ───────────────────────────────────── */
.twc .twc-ptabs__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px; margin-bottom: 30px; }
.twc .twc-ptab { position: relative; display: flex; align-items: center; gap: 10px; height: 62px; padding: 9px 21px; border-radius: var(--twc-r-pill); background: var(--twc-sand); color: var(--twc-ink); overflow: clip; isolation: isolate; transition: box-shadow .3s; }
.twc .twc-ptab:hover, .twc .twc-ptab.is-hover { box-shadow: inset 0 0 0 1px var(--twc-sand-2); }
.twc .twc-ptab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--twc-sand-2); transform: scaleX(0); transform-origin: left; transition: transform var(--twc-dur-pill) var(--twc-ease-spring); }
.twc .twc-ptab::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--twc-grad-diagonal); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity var(--twc-dur-fast); pointer-events: none; }
.twc .twc-ptab[aria-selected="true"]::after { opacity: 1; }
.twc .twc-ptab[aria-selected="true"]::before { animation: twc-countdown var(--twc-dur-tab-cycle) linear both; }
.twc .twc-ptabs.is-paused .twc-ptab[aria-selected="true"]::before { animation-play-state: paused; }
.twc .twc-ptab__icon { width: 24px; height: 24px; flex: none; }
.twc .twc-ptab__label { font-size: 16px; line-height: 23.2px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-text); white-space: nowrap; }
@keyframes twc-countdown { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.twc .twc-stage { position: relative; display: grid; border-radius: var(--twc-r-lg); background: var(--twc-grad-stage); overflow: clip; min-height: 585px; }
.twc .twc-stage__panel { grid-area: 1 / 1; display: flex; justify-content: center; align-items: center; padding: 60px 0 0; visibility: hidden; transition: visibility .7s; }
.twc .twc-stage__panel.is-active { visibility: visible; }
.twc .twc-stage__panel--bottom { align-items: flex-end; }
.twc .twc-stage__panel.is-active .twc-stage__media { animation: twc-panel-in .6s var(--twc-ease-spring) both; }
.twc .twc-stage__panel:not(.is-active) .twc-stage__media { opacity: 0; }
.twc .twc-stage__media { position: relative; width: min(800px, 73%); }
.twc .twc-stage__media > img, .twc .twc-stage__media > .twc-ph { border-radius: 10px 10px 0 0; }
.twc .twc-stage__media .twc-ph { --ph-ratio: 800 / 460; border-radius: 12px 12px 0 0; }
@keyframes twc-panel-in { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } to { opacity: 1; transform: none; } }
/* Glasebene: schwebt über dem Bild, 8 px Weichzeichner, heller Verlaufsrand */
.twc .twc-glass { position: absolute; padding: 10px; border-radius: var(--twc-r-glass); background: rgba(255,255,255,.02); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--twc-sh-glass); }
.twc .twc-glass::after { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.4) 40%, rgba(255,255,255,.6)); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.twc .twc-glass > * { border-radius: 10px; }
.twc .twc-stage__play { position: absolute; right: 16px; bottom: 16px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--twc-r-xs); background: var(--twc-white); color: var(--twc-pink); transition: background .2s; }
.twc .twc-stage__play:hover { background: var(--twc-sand); }
.twc .twc-stage__play svg { width: 16px; height: 16px; }

/* ── Laufband (Logos) ───────────────────────────────────────────── */
.twc .twc-marquee__title { margin-bottom: 55px; text-align: center; font-size: 18px; line-height: 26.11px; letter-spacing: var(--twc-ls-text); color: var(--twc-text-2); }
.twc .twc-marquee__title strong { font-weight: var(--twc-w-bold); color: var(--twc-ink); }
.twc .twc-marquee { overflow: clip; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.twc .twc-marquee__track { display: flex; width: max-content; animation: twc-marquee var(--twc-dur-marquee) linear infinite; }
.twc .twc-marquee--reverse .twc-marquee__track { animation-direction: reverse; }
.twc .twc-marquee:hover .twc-marquee__track { animation-play-state: paused; }
.twc .twc-marquee__strip { display: flex; align-items: center; gap: 80px; padding-right: 80px; }
.twc .twc-marquee__logo { font-size: 30px; font-weight: var(--twc-w-bold); letter-spacing: -.5px; color: var(--twc-ink); opacity: .9; white-space: nowrap; }
@keyframes twc-marquee { to { transform: translateX(-50%); } }

/* ── Kennzahlen ─────────────────────────────────────────────────── */
.twc .twc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.twc .twc-stat { display: flex; flex-direction: column; min-height: 262px; padding: 36px 32px 32px; border-radius: var(--twc-r-lg); background: var(--twc-sand); }
.twc .twc-stat__label { margin-bottom: 6px; font-size: 18px; line-height: 28px; font-weight: var(--twc-w-bold); letter-spacing: var(--twc-ls-text); color: var(--twc-text); text-transform: uppercase; }
.twc .twc-stat__value { font-size: 54px; line-height: 1.15; letter-spacing: -1px; font-weight: var(--twc-w-semibold); color: var(--twc-ink); font-variant-numeric: tabular-nums; }
.twc .twc-stat__text { margin-top: auto; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-text); }

/* ── Statement: Wörter färben sich beim Scrollen nacheinander dunkel ─ */
.twc .twc-statement { max-width: 907px; font-size: 54px; line-height: 1.15; letter-spacing: -1px; font-weight: var(--twc-w-regular); color: var(--twc-text); }
.twc .twc-statement__word { color: var(--twc-sand-2); transition: color .35s ease-out; }
.twc .twc-statement__word.is-revealed { color: var(--twc-text); }

/* ── Stapelkarten ───────────────────────────────────────────────── */
/* Jede Karte klebt 96 px unter der Fensterkante; die vorige wird kleiner (95 %) und blasser */
.twc .twc-stack { display: grid; gap: 40px; }
.twc .twc-card { position: sticky; top: var(--twc-sticky-top); display: grid; grid-template-columns: 560px 1fr; border-radius: var(--twc-r-xl); background: var(--twc-white); box-shadow: var(--twc-sh-stack); overflow: clip; transform-origin: 50% 0; transform: scale(var(--twc-recede, 1)); }
.twc .twc-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--twc-page); opacity: var(--twc-veil, 0); pointer-events: none; }
.twc .twc-card__copy { display: flex; flex-direction: column; align-items: flex-start; padding: 48px 52px 42px; }
.twc .twc-card__copy .twc-tag { margin-bottom: 10px; }
.twc .twc-card__copy .twc-h-medium { margin-bottom: 18px; max-width: 456px; }
.twc .twc-card__copy .twc-p-medium { max-width: 456px; margin-bottom: 36px; }
.twc .twc-card__copy .twc-btns { margin-top: auto; padding-top: 36px; }
.twc .twc-card__media { display: flex; align-items: center; margin: 20px 20px 20px 0; border-radius: var(--twc-r-lg); overflow: clip; }
.twc .twc-card__media:has(> .twc-ph:not([hidden])) { background: var(--twc-grad-stage); }
.twc[data-marke="original"] .twc-card__media:has(> img.twc-only-original) { background: none; }
.twc .twc-card__media > img { width: 100%; border-radius: var(--twc-r-lg); }
.twc .twc-card__media > .twc-ph { --ph-ratio: 614 / 448; margin: 40px; width: auto; flex: 1; }
.twc .twc-card--bare { position: static; grid-template-columns: 359px 1fr; gap: 90px; box-shadow: none; transform: none; }
.twc .twc-card--bare::after { display: none; }
.twc .twc-card--bare .twc-card__copy { padding: 35px 0 0; }

/* Aufzählung mit Haken */
.twc .twc-bullets { display: grid; gap: 10px; }
.twc .twc-bullets li { display: flex; gap: 10px; font-size: 18px; line-height: 26.11px; letter-spacing: var(--twc-ls-text); color: #000; }
.twc .twc-bullets__mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: #1c1c39; color: var(--twc-white); }
.twc .twc-bullets__mark svg { width: 20px; height: 20px; }
/* Große Haken (Produktseiten): 32 px Kreis nur umrandet */
.twc .twc-checks { display: grid; gap: 20px; }
.twc .twc-checks li { display: flex; gap: 12px; font-size: 18px; line-height: 1.33; letter-spacing: var(--twc-ls-text); color: var(--twc-ink); }
.twc .twc-checks__mark { flex: none; width: 32px; height: 32px; margin-top: -3px; border: 2px solid var(--twc-ink); border-radius: 50%; color: var(--twc-ink); }
/* Violette Haken (Preiskarten) */
.twc .twc-vchecks li { display: flex; gap: 10px; padding: 11px 0; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-muted); }
.twc .twc-vchecks__mark { flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; background: var(--twc-purple); color: var(--twc-white); display: grid; place-items: center; }
.twc .twc-vchecks__mark svg { width: 15px; height: 15px; }

/* ── Abschnittskopf ─────────────────────────────────────────────── */
.twc .twc-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 80px; }
.twc .twc-shead__main { max-width: 855px; }
.twc .twc-shead__main .twc-tag { margin-bottom: 16px; }
.twc .twc-shead__main .twc-p-lead, .twc .twc-shead__main .twc-p-huge { margin-top: 26px; }
.twc .twc-shead--center { justify-content: center; text-align: center; }
.twc .twc-shead--center .twc-shead__main { max-width: 920px; }

/* ── Reiterkarte (Branchen) ─────────────────────────────────────── */
.twc .twc-tabcard { display: grid; grid-template-columns: 269px 1fr; gap: 70px; padding: 28px; border-radius: var(--twc-r-xl); background: var(--twc-white); box-shadow: var(--twc-sh-soft); }
.twc .twc-tabcard__list { display: grid; gap: 10px; align-content: start; padding-top: 23px; }
.twc .twc-tabcard__tab { position: relative; padding: 10px 20px; border-radius: 200px; overflow: clip; isolation: isolate; text-align: left; font-size: 18px; line-height: 26.1px; letter-spacing: var(--twc-ls-text); color: var(--twc-ink); transition: background-color var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-tabcard__tab:hover, .twc .twc-tabcard__tab.is-hover { background: var(--twc-sand); }
.twc .twc-tabcard__tab[aria-selected="true"] { background: var(--twc-sand); }
.twc .twc-tabcard__tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--twc-grey-2); transform: scaleX(0); transform-origin: left; }
.twc .twc-tabcard__tab[aria-selected="true"]::before { animation: twc-countdown var(--twc-dur-tab-cycle) linear both; }
.twc .twc-tabcard__aside .twc-btns { margin-top: 33px; padding-left: 20px; }
.twc .twc-tabcard__panel[hidden] { display: none; }
.twc .twc-tabcard__panel { animation: twc-fade .4s ease-in-out both; }
.twc .twc-tabcard__panel .twc-card__media { margin: 0; background: linear-gradient(135deg, #fde3ef, #efe3ff); }
.twc .twc-tabcard__panel .twc-h-small { margin-bottom: 16px; }
.twc .twc-tabcard__panel .twc-p-medium { margin-bottom: 32px; }
.twc .twc-tabcard__panel .twc-btns { margin-top: 40px; }
@keyframes twc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Segment-Umschalter (Vergleich mit Wettbewerbern) ──────────── */
.twc .twc-segment { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: var(--twc-r-pill); background: #f4f1ed; }
.twc .twc-segment [role="tab"] { padding: 10px 24px; border-radius: var(--twc-r-pill); font-size: 16px; line-height: 23.2px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-text); color: var(--twc-ink); transition: background-color var(--twc-dur-ui) var(--twc-ease-ui), box-shadow var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-segment [role="tab"]:hover { background: rgba(255,255,255,.6); }
.twc .twc-segment [role="tab"][aria-selected="true"] { background: var(--twc-white); box-shadow: var(--twc-sh-soft); }

/* ── App-Kacheln (Anbindungen) ──────────────────────────────────── */
.twc .twc-apps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-block: 80px 64px; }
.twc .twc-marquee { min-width: 0; max-width: 100%; }
.twc .twc-app { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 10px; background: var(--twc-white); box-shadow: var(--twc-sh-plan); font-weight: var(--twc-w-bold); font-size: 20px; color: var(--twc-white); }

/* ── Kundenstimmen-Reiter mit Fortschrittsbalken ───────────────── */
.twc .twc-qtabs { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 30px; }
.twc .twc-qtab { position: relative; padding: 16px 5px; text-align: center; font-size: 18px; line-height: 27px; font-weight: var(--twc-w-bold); color: var(--twc-muted); border-radius: 0 0 8px 8px; transition: background-color var(--twc-dur-ui) var(--twc-ease-ui), color var(--twc-dur-ui) var(--twc-ease-ui); }
.twc .twc-qtab:hover { background: rgba(239,232,223,.3); }
.twc .twc-qtab[aria-selected="true"] { color: var(--twc-ink); }
.twc .twc-qtab::before, .twc .twc-qtab::after { content: ""; position: absolute; top: -6px; left: 0; height: 6px; border-radius: 100px; }
.twc .twc-qtab::before { right: 0; background: var(--twc-sand-2); }
.twc .twc-qtab::after { width: 0; background: var(--twc-pink); }
.twc .twc-qtab[aria-selected="true"]::after { animation: twc-fill var(--twc-dur-quote-cycle) linear both; }
@keyframes twc-fill { from { width: 0; } to { width: 100%; } }
.twc .twc-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; min-height: 420px; padding: 56px; border-radius: var(--twc-r-quote); background: var(--twc-white); box-shadow: var(--twc-sh-soft); }
.twc .twc-quote blockquote { font-size: 32px; line-height: 1.15; color: var(--twc-ink); }
.twc .twc-quote figcaption { margin-top: 24px; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-semibold); letter-spacing: var(--twc-ls-small); color: var(--twc-text); }
.twc .twc-quote__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ── Preisplan-Karten (Startseite) ─────────────────────────────── */
.twc .twc-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.twc .twc-plan { position: relative; display: grid; align-content: start; padding: 32px; border-radius: var(--twc-r-md); background: var(--twc-white); box-shadow: var(--twc-sh-plan); color: var(--twc-text); min-height: 404px; transition: color .2s; }
.twc .twc-plan::before { content: ""; position: absolute; inset: 0; z-index: 1; padding: 1px; border-radius: inherit; background: var(--twc-grad-diagonal); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .2s; pointer-events: none; }
.twc .twc-plan:hover::before, .twc .twc-plan.is-hover::before { opacity: 1; }
.twc .twc-plan:hover { color: var(--twc-ink); }
.twc .twc-plan--highlighted { border-radius: 0 0 var(--twc-r-md) var(--twc-r-md); }
.twc .twc-plan--highlighted::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; border-radius: var(--twc-r-md) var(--twc-r-md) 0 0; background: var(--twc-grad-horizontal); }
.twc .twc-plan--highlighted::before { top: -16px; }
.twc .twc-plan__tag { position: absolute; top: 20px; right: 20px; padding: 4px 10px; border-radius: 100px; background: var(--twc-pink-20); font-size: 14px; line-height: 17.22px; font-weight: var(--twc-w-semibold); letter-spacing: .54px; color: var(--twc-ink); }
.twc .twc-plan__name { font-size: 28px; line-height: 1.15; font-weight: var(--twc-w-semibold); color: var(--twc-ink); }
.twc .twc-plan__desc { margin: 24px 0 32px; font-size: 16px; line-height: 23.2px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-text); color: var(--twc-text-2); }
.twc .twc-plan__price { font-size: 36px; line-height: 41.4px; font-weight: var(--twc-w-bold); color: var(--twc-ink); }
.twc .twc-plan__note { margin-top: 4px; font-size: 16px; line-height: 23.2px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-text); color: var(--twc-text-2); }
.twc .twc-plan__link { margin-top: auto; padding-top: 30px; font-size: 14px; line-height: 17.5px; font-weight: var(--twc-w-semibold); letter-spacing: .54px; color: var(--twc-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Preisseite ─────────────────────────────────────────────────── */
.twc .twc-price-head { position: relative; text-align: center; margin-bottom: 20px; }
.twc .twc-price-head .twc-h-huge { font-weight: var(--twc-w-heavy); }
.twc .twc-price-head .twc-p-large { max-width: 850px; margin: 11px auto 14px; }
.twc .twc-period { position: absolute; right: 0; bottom: -58px; display: flex; align-items: center; gap: 12px; }
.twc .twc-period__opt { font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-muted); opacity: .5; transition: opacity .1s ease-in-out; cursor: pointer; }
.twc .twc-period__opt.is-active { color: var(--twc-text); opacity: 1; }
.twc .twc-period__save { position: absolute; right: 50px; top: -24px; display: flex; gap: 4px; font-size: 12.6px; line-height: 18.27px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-purple); white-space: nowrap; }
.twc .twc-period__save svg { width: 26px; height: 26px; margin-top: 2px; }
/* Schalter */
.twc .twc-switch { position: relative; width: 64px; height: 32px; flex: none; border-radius: 9999px; background: var(--twc-muted); transition: background-color .2s; }
.twc .twc-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 9999px; background: #f7f7fc; transition: transform .1s; }
.twc .twc-switch[aria-checked="true"]::after { transform: translateX(32px); }
.twc .twc-switch--purple[aria-checked="true"] { background: var(--twc-purple); }

.twc .twc-pcards { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1440px; margin: 78px auto 0; }
.twc .twc-pcard { position: relative; display: flex; flex-direction: column; padding: 48px 35px 28px; border: 1px solid var(--twc-border-cool); border-left-width: 0; background: var(--twc-white); letter-spacing: var(--twc-ls-text); }
.twc .twc-pcard:first-child { border-left-width: 1px; border-radius: var(--twc-r-lg) 0 0 var(--twc-r-lg); }
.twc .twc-pcard:last-child { border-radius: 0 var(--twc-r-lg) var(--twc-r-lg) 0; }
.twc .twc-pcard--highlighted { margin-top: -20px; padding-top: 68px; border: 1px solid #e5dbff; border-radius: var(--twc-r-lg); background: linear-gradient(var(--twc-lilac-head), var(--twc-white) 30%); box-shadow: 0 8px 16px rgba(0,0,0,.04); z-index: 1; }
.twc .twc-pcard--highlighted + .twc-pcard { border-left-width: 0; }
.twc .twc-pcard__badge { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 100px; background: var(--twc-purple); font-size: 12px; font-weight: var(--twc-w-bold); color: var(--twc-white); }
.twc .twc-pcard__name { font-size: 32px; line-height: 29.44px; font-weight: var(--twc-w-black); color: #1c1c39; }
.twc .twc-pcard--highlighted .twc-pcard__name, .twc .twc-pcard--highlighted .twc-pcard__amount { color: var(--twc-purple); }
.twc .twc-pcard__desc { min-height: 100px; margin-top: 25px; font-size: 16px; line-height: 23.2px; font-weight: var(--twc-w-medium); color: var(--twc-text-2); }
.twc .twc-pcard__price { display: flex; align-items: flex-start; gap: 10px; min-height: 46px; margin-bottom: 25px; }
.twc .twc-pcard__amount { font-size: 46px; line-height: 46px; font-weight: var(--twc-w-black); color: var(--twc-ink); }
.twc .twc-pcard__amount sup { font-size: 16px; vertical-align: 22px; margin-left: 1px; }
.twc .twc-pcard__billed { padding-top: 5px; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); color: var(--twc-muted); }
.twc .twc-pcard__cond { margin-bottom: 20px; font-size: 14px; line-height: 22px; font-weight: var(--twc-w-medium); color: var(--twc-muted); }
.twc .twc-pcard__helper { margin-top: 16px; text-align: center; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-muted); }
.twc .twc-pcard__fhead { margin: 50px 0 12px; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-text); }
.twc .twc-pcard__fhead b { color: var(--twc-ink); }
.twc .twc-pcard--highlighted .twc-pcard__fhead b.twc-v { color: var(--twc-purple); }
.twc .twc-pcard .twc-btn--ghost { margin-top: auto; }
/* KI-Kasten: 2-px-Rand aus drehendem Farbkreis (blau → pink → orange), 8 s je Runde */
.twc .twc-ai-box { position: relative; margin: 40px -17px 22px; padding: 20px 29px 12px; border-radius: var(--twc-r-ai); background: var(--twc-white); }
.twc .twc-ai-box::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: var(--twc-grad-ai-ring); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: twc-ring var(--twc-dur-ai-ring) linear infinite; pointer-events: none; }
@keyframes twc-ring { to { --twc-angle: -360deg; } }
.twc .twc-ai-box__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-bold); letter-spacing: var(--twc-ls-small); color: var(--twc-text); }
.twc .twc-ai-box__head:hover span { text-decoration: underline 1px dashed; text-underline-offset: 4px; }
.twc .twc-ai-box li { display: flex; gap: 10px; padding: 9px 0; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: var(--twc-text); }
.twc .twc-ai-box li svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.twc .twc-ai-box li.is-strong { font-weight: var(--twc-w-bold); padding-bottom: 14px; }
.twc .twc-ai-box li u { text-decoration: underline 1px dashed var(--twc-muted); text-underline-offset: 5px; }

/* Vergleichstabelle */
.twc .twc-compare { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.twc .twc-compare th, .twc .twc-compare td { padding: 20px 10px; border-left: 1px solid var(--twc-border-tab); text-align: center; vertical-align: middle; }
.twc .twc-compare th:first-child, .twc .twc-compare td:first-child { border-left: 0; text-align: left; padding-left: 20px; }
.twc .twc-compare thead th { padding: 30px 10px 34px; border-bottom: 1px solid var(--twc-border-tab); vertical-align: top; font-weight: var(--twc-w-regular); }
.twc .twc-compare thead th:first-child { vertical-align: middle; }
.twc .twc-compare .is-hl { border-left-color: var(--twc-purple-20); background: var(--twc-lilac-cell); }
.twc .twc-compare thead .is-hl { background: linear-gradient(var(--twc-lilac-head), transparent); }
.twc .twc-compare__plan { display: block; font-size: 24px; line-height: 27.6px; font-weight: var(--twc-w-bold); color: var(--twc-ink); }
.twc .is-hl .twc-compare__plan { color: var(--twc-purple); }
.twc .twc-compare__amount { display: block; margin: 14px 0 8px; font-size: 32px; line-height: 36.8px; color: var(--twc-ink); }
.twc .twc-compare__note { display: block; margin-bottom: 24px; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-text); color: var(--twc-muted); }
.twc .twc-compare__group td { padding: 34px 20px 18px; border-left: 0; text-align: left; font-size: 24px; line-height: 27.6px; color: var(--twc-ink); }
.twc .twc-compare tbody tr:not(.twc-compare__group):nth-child(even) td { background-color: var(--twc-grey-bg); }
.twc .twc-compare tbody tr:not(.twc-compare__group):nth-child(even) td.is-hl { background-color: var(--twc-lilac-cell); }
.twc .twc-compare tbody td:first-child { font-size: 14px; line-height: 22.4px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-text); color: var(--twc-ink); }
.twc .twc-compare .twc-vchecks__mark { width: 20px; height: 20px; margin: 0 auto; }
.twc .twc-compare .twc-vchecks__mark svg { width: 20px; height: 20px; }

/* FAQ: Linien oben/unten, Hauch beim Darüberfahren, Plus wird Minus */
.twc .twc-faq { max-width: 898px; margin-inline: auto; }
.twc .twc-faq details { border-top: 1px solid var(--twc-border); border-bottom: 1px solid var(--twc-border); margin-top: -1px; }
.twc .twc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 29px 20px; list-style: none; transition: background .2s; }
.twc .twc-faq summary::-webkit-details-marker { display: none; }
.twc .twc-faq summary:hover, .twc .twc-faq summary.is-hover { background-image: linear-gradient(rgba(11,14,31,.03), transparent); }
.twc .twc-faq summary span { font-size: 19px; line-height: 31.92px; font-weight: var(--twc-w-semibold); color: var(--twc-ink-deep); }
.twc .twc-faq summary i { position: relative; flex: none; width: 16px; height: 16px; }
.twc .twc-faq summary i::before, .twc .twc-faq summary i::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: var(--twc-ink); transition: transform .3s var(--twc-ease-std); }
.twc .twc-faq summary i::after { transform: rotate(90deg); }
.twc .twc-faq details[open] summary i::after { transform: rotate(0); }
.twc .twc-faq__body { padding: 0 20px 29px; font-size: 16px; line-height: 25.6px; color: var(--twc-text); overflow: hidden; }
.twc .twc-faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--twc-ease-std), content-visibility .4s allow-discrete; }
.twc .twc-faq details[open]::details-content { block-size: auto; }
.twc { interpolate-size: allow-keywords; }

/* Zusatzkarten (Preisseite) */
.twc .twc-addons { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.twc .twc-addon { display: grid; gap: 12px; align-content: start; padding: 30px 24px; border-radius: var(--twc-r-md); background: var(--twc-white); box-shadow: var(--twc-sh-card); }
.twc .twc-addon h3 { font-size: 24px; line-height: 27.6px; font-weight: var(--twc-w-bold); }
.twc .twc-addon p { max-width: 400px; font-size: 16px; line-height: 24px; letter-spacing: var(--twc-ls-text); color: var(--twc-ink); }
.twc .twc-addon a { justify-self: start; margin-top: 14px; font-size: 18px; letter-spacing: var(--twc-ls-text); text-decoration: underline; text-underline-offset: 6px; }

/* ── Sicherheits- und Schlusskarte ─────────────────────────────── */
.twc .twc-security { display: flex; align-items: center; gap: 60px; padding: 40px 48px; border: 1px solid var(--twc-sand); border-radius: var(--twc-r-lg); background: var(--twc-white); box-shadow: var(--twc-sh-soft); }
.twc .twc-security__copy { flex: 0 0 411px; }
.twc .twc-security__copy .twc-h-small { margin-bottom: 16px; font-weight: var(--twc-w-semibold); }
.twc .twc-security__marks { display: flex; gap: 19px; margin-left: auto; }
.twc .twc-seal { display: grid; place-items: center; width: 142px; height: 142px; border-radius: 50%; border: 2px solid var(--twc-sand-2); background: radial-gradient(circle, var(--twc-white) 60%, var(--twc-sand) 61%); text-align: center; font-size: 13px; line-height: 1.2; font-weight: var(--twc-w-bold); letter-spacing: 1px; color: var(--twc-ink); text-transform: uppercase; }
.twc .twc-cta { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 506px; padding: 124px 48px 124px; border-radius: var(--twc-r-lg); overflow: clip; isolation: isolate; text-align: center; background: var(--twc-grad-cta); }
.twc .twc-cta > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.twc .twc-cta .twc-p-huge { margin: 42px 0 42px; color: var(--twc-ink); }
.twc .twc-cta .twc-h-huge { font-weight: var(--twc-w-semibold); }

/* ── Fußzeile ───────────────────────────────────────────────────── */
.twc .twc-footer { background: var(--twc-grey-bg); letter-spacing: var(--twc-ls-footer); }
.twc .twc-footer__nav { display: grid; grid-template-columns: 52px repeat(5, auto); justify-content: space-between; gap: 24px; padding-block: 90px 40px; }
.twc .twc-footer__dot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--twc-ink); color: var(--twc-white); font-size: 28px; font-weight: var(--twc-w-bold); line-height: 1; padding-bottom: 4px; }
.twc .twc-footer__dot b { color: var(--twc-pink); }
.twc .twc-footer__title { display: block; margin-bottom: 23px; font-size: 13px; line-height: 20.8px; font-weight: var(--twc-w-bold); letter-spacing: 1px; text-transform: uppercase; color: var(--twc-ink); }
.twc .twc-footer__sub { margin: 4px 0 2px; font-size: 14px; line-height: 20.3px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); color: #000; }
.twc .twc-footer__link { display: block; padding: 5.6px 0; font-size: 14px; line-height: 22.4px; font-weight: var(--twc-w-light); letter-spacing: 1px; color: var(--twc-ink); text-decoration: underline transparent; text-underline-offset: 8px; transition: text-decoration-color .4s; }
.twc .twc-footer__link:hover, .twc .twc-footer__link.is-hover { text-decoration-color: var(--twc-ink); }
.twc .twc-footer__bar { display: flex; align-items: center; justify-content: space-between; padding-block: 38px; border-top: 1px solid var(--twc-divider); }
.twc .twc-footer__copy { font-size: 14px; line-height: 20.3px; letter-spacing: var(--twc-ls-small); color: #000; }
.twc .twc-footer__legal { display: flex; gap: 40px; margin-top: 11px; }
.twc .twc-footer__legal a { font-size: 14px; line-height: 22.4px; letter-spacing: 1px; color: var(--twc-ink); text-decoration: underline transparent; text-underline-offset: 8px; transition: text-decoration-color .4s; }
.twc .twc-footer__legal a:hover { text-decoration-color: var(--twc-ink); }
.twc .twc-footer__social { display: flex; gap: 17px; }
.twc .twc-footer__social a { display: grid; place-items: center; width: 24px; height: 24px; color: var(--twc-ink); opacity: .85; transition: opacity .2s; }
.twc .twc-footer__social a:hover { opacity: 1; }

/* ── Einblenden beim Scrollen ───────────────────────────────────── */
.twc .twc-reveal { opacity: 0; transform: translateY(5%); transition: opacity .4s ease-in-out, transform .6s ease-in-out; }
.twc .twc-reveal.is-in { opacity: 1; transform: none; }

/* ── Weniger Bewegung: alles steht, nichts läuft von allein ────── */
@media (prefers-reduced-motion: reduce) {
  .twc *, .twc *::before, .twc *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .twc .twc-marquee__track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .twc .twc-marquee__strip + .twc-marquee__strip { display: none; }
  .twc .twc-shine { animation: none !important; -webkit-text-fill-color: currentColor; background: none; }
  .twc .twc-reveal { opacity: 1; transform: none; }
  .twc .twc-statement__word { color: var(--twc-text); }
  .twc .twc-card { position: static; transform: none; }
  .twc .twc-card::after { opacity: 0; }
  .twc .twc-ptab[aria-selected="true"]::before, .twc .twc-tabcard__tab[aria-selected="true"]::before { animation: none !important; transform: scaleX(1); }
  .twc .twc-qtab[aria-selected="true"]::after { animation: none !important; width: 100%; }
}

/* ── Schmalere Bildschirme (Tablet, Handy): nur keine Brüche ───── */
@media (max-width: 1100px) {
  .twc .twc-nav__links { display: none; }
  .twc .twc-card { grid-template-columns: 1fr; }
  .twc .twc-card__media { margin: 0 20px 20px; }
  .twc .twc-stats, .twc .twc-plans { grid-template-columns: repeat(2, 1fr); }
  .twc .twc-pcards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .twc .twc-pcard, .twc .twc-pcard:first-child, .twc .twc-pcard:last-child { border: 1px solid var(--twc-border-cool); border-radius: var(--twc-r-lg); }
  .twc .twc-pcard--highlighted { margin-top: 0; }
  .twc .twc-hero2__grid, .twc .twc-tabcard, .twc .twc-quote { grid-template-columns: 1fr; gap: 32px; }
  .twc .twc-card--bare { grid-template-columns: 1fr; gap: 32px; }
  .twc .twc-security { flex-direction: column; align-items: flex-start; }
  .twc .twc-security__copy { flex-basis: auto; }
  .twc .twc-security__marks { margin-left: 0; flex-wrap: wrap; }
  .twc .twc-footer__nav { grid-template-columns: repeat(3, 1fr); }
  .twc .twc-shead { flex-direction: column; align-items: flex-start; }
  .twc .twc-mega__body { grid-template-columns: 1fr; }
  .twc .twc-mega__side { border-right: 0; }
  .twc .twc-compare-wrap { overflow-x: auto; }
  .twc .twc-compare { min-width: 900px; }
  .twc .twc-period { position: static; justify-content: center; margin-top: 40px; }
}
@media (max-width: 640px) {
  .twc { --twc-h-huge: 38px; --twc-h-section: 34px; --twc-h-medium: 32px; --twc-h-small: 26px; --twc-h-xsmall: 20px; --twc-p-lead: 18px; --twc-p-huge: 18px; }
  .twc .twc-statement, .twc .twc-stat__value { font-size: 38px; }
  .twc .twc-stats, .twc .twc-plans, .twc .twc-pcards, .twc .twc-addons, .twc .twc-quote__nums { grid-template-columns: 1fr; }
  .twc .twc-hero { padding-inline: 0; }
  .twc :where(h1, h2, h3, .twc-h-huge, .twc-h-section, .twc-h-medium) { hyphens: auto; overflow-wrap: anywhere; }
  .twc .twc-shead__main { min-width: 0; max-width: 100%; }
  .twc .twc-pcards { grid-template-columns: minmax(0, 1fr); }
  .twc .twc-tag__label { white-space: normal; }
  .twc .twc-btn--huge { height: 60px; padding: 14px 26px; font-size: 17px; }
  .twc .twc-btns .twc-btn { width: 100%; }
  .twc .twc-btns .twc-btn--text { width: auto; }
  .twc .twc-card__copy { padding: 32px 24px; }
  .twc .twc-footer__nav { grid-template-columns: 1fr 1fr; }
  .twc .twc-footer__bar { flex-direction: column; align-items: flex-start; gap: 24px; }
  .twc .twc-ptabs__list { gap: 12px; }
  .twc .twc-ptab { height: 48px; padding: 6px 16px; }
  .twc .twc-stage { min-height: 300px; }
  .twc .twc-nav__cta .twc-nav-link { display: none; }
  .twc .twc-quote { padding: 28px; }
  .twc .twc-quote blockquote { font-size: 24px; }
  .twc .twc-qtabs { grid-template-columns: 1fr 1fr; }
  .twc .twc-tabcard { padding: 20px; }
  .twc .twc-cta { padding: 64px 24px; min-height: 0; }
  .twc .twc-security { padding: 28px 24px; }
}