/* Gemeinsamer Rahmen für alle Unterseiten (Etappe 1, 2026-10):
   Navigation, Abschluss-Box, Footer und Handy-Leiste wie auf der Startseite,
   dazu Marineblau + Sora/Nunito Sans über die bestehenden Seiten-Stile gelegt.
   Wird NACH dem jeweiligen Inline-<style> geladen und gewinnt deshalb bei gleicher Spezifität. */

:root {
  /* neue Werte (gleich wie static/home/home.css) */
  --tf-bg: oklch(0.17 0.035 258);
  --tf-bg-2: oklch(0.205 0.04 258);
  --tf-surface: oklch(0.235 0.042 258);
  --tf-line: oklch(0.36 0.04 258 / 0.55);
  --tf-line-strong: oklch(0.45 0.05 258 / 0.7);
  --tf-text: oklch(0.965 0.008 258);
  --tf-muted: oklch(0.76 0.025 258);
  --tf-dim: oklch(0.6 0.03 258);
  --tf-accent: oklch(0.64 0.17 256);
  --tf-accent-ink: oklch(0.985 0.005 258);
  --tf-cyan: oklch(0.76 0.12 215);
  --tf-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --tf-body: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;

  /* alte Variablen der Unterseiten auf die neue Palette umbiegen */
  --bg: var(--tf-bg);
  --bg-elev: var(--tf-bg-2);
  --bg-soft: var(--tf-bg-2);
  --bg-card: var(--tf-bg-2);
  --card: var(--tf-bg-2);
  --card-border: var(--tf-line);
  --line: var(--tf-line);
  --line-strong: var(--tf-line-strong);
  --cyan: var(--tf-cyan);
  --blue: var(--tf-accent);
  --text: var(--tf-text);
  --ink: var(--tf-text);
  --ink-soft: var(--tf-muted);
  --ink-mute: var(--tf-dim);
  --text-muted: var(--tf-muted);
  --text-dim: var(--tf-dim);
  --accent: var(--tf-accent);
  --accent-strong: var(--tf-accent);
  --accent-soft: oklch(0.64 0.17 256 / 0.14);
  --accent-ink: var(--tf-accent-ink);
  /* Verläufe werden zu Vollfarbe (keine Cyan-Blau-Verläufe mehr) */
  --gradient: linear-gradient(var(--tf-accent), var(--tf-accent));
  color-scheme: dark;
}

html, body { background: var(--tf-bg) !important; color: var(--tf-text); }
body { overflow-x: clip; -webkit-font-smoothing: antialiased; }

/* Schriften: überall Nunito Sans, Überschriften Sora */
body, body * { font-family: var(--tf-body) !important; }
body :is(h1, h2, h3, h4, .footer-logo, .tfx-cta-title, .tfx-btn) { font-family: var(--tf-display) !important; letter-spacing: -0.02em; }
body :is(code, pre, kbd) { font-family: ui-monospace, Menlo, monospace !important; }

/* Verlaufstext → einfarbig (Akzent), keine Leucht-Kugeln */
body :is(.gradient-text, .accent, .bento-stat, .stat-number) {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: var(--tf-cyan) !important;
}
.hero-glow-orb { display: none !important; }

/* Alte Navigation/Footer-Reste (falls eine Seite noch welche hat) ausblenden */
#navbar, #mobileMenu, .mobile-menu:not(.tfx-menu), .site-footer, .mobile-bar:not(.tfx-bar), body > .top-bar { display: none !important; }

/* Seiten ohne eigene Abstände oben (Kontakt, Support, Rechtliches) */
body.tfx-pad { padding-top: 72px !important; }

/* ─── Navigation ─── */
.tfx-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.tfx-nav { position: fixed; inset: 0 0 auto; z-index: 1000; border-bottom: 1px solid transparent; transition: background-color .3s ease, border-color .3s ease; }
.tfx-nav.is-scrolled, .tfx-nav.is-open { background: oklch(0.17 0.035 258 / 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--tf-line); }
.tfx-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.tfx-logo img { display: block; height: 34px; width: auto; }
.tfx-links { display: flex; align-items: center; gap: 24px; }
.tfx-links a { color: var(--tf-muted); text-decoration: none; font-size: .95rem; font-weight: 600; transition: color .2s; }
.tfx-links a:hover, .tfx-links a[aria-current="page"] { color: var(--tf-text); }
.tfx-actions { display: flex; align-items: center; gap: 12px; }
.tfx-login { color: var(--tf-muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.tfx-login:hover { color: var(--tf-text); }
.tfx-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--tf-line-strong); border-radius: 12px; background: transparent; color: var(--tf-text); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.tfx-burger span, .tfx-burger span::before, .tfx-burger span::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s, background-color .25s; }
.tfx-burger span::before, .tfx-burger span::after { content: ''; position: absolute; left: 0; }
.tfx-burger span::before { top: -6px; } .tfx-burger span::after { top: 6px; }
.tfx-burger[aria-expanded="true"] span { background: transparent; }
.tfx-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.tfx-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.tfx-menu { display: none; }
@media (max-width: 1060px) {
  .tfx-links, .tfx-login { display: none; }
  .tfx-burger { display: inline-flex; }
  .tfx-menu {
    position: fixed; inset: 72px 0 0; z-index: 999; display: grid; align-content: start; gap: 2px; overflow-y: auto;
    padding: 10px 16px 24px; background: var(--tf-bg-2); border-bottom: 1px solid var(--tf-line);
    transform: translateY(-110%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s;
  }
  .tfx-menu.is-open { transform: none; visibility: visible; transition: transform .3s ease; }
  .tfx-menu a { padding: 14px 8px; color: var(--tf-text); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--tf-line); }
}

/* ─── Buttons ─── */
.tfx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: .98rem; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: transform .25s ease, background-color .25s ease, border-color .25s ease; }
.tfx-btn-primary { background: var(--tf-accent); color: var(--tf-accent-ink) !important; }
.tfx-btn-primary:hover { background: oklch(0.69 0.17 256); transform: translateY(-1px); }
.tfx-btn-ghost { border-color: var(--tf-line-strong); color: var(--tf-text) !important; }
.tfx-btn-ghost:hover { border-color: var(--tf-text); }
.tfx-nav .tfx-btn { min-height: 42px; padding: 0 18px; font-size: .92rem; }
@media (max-width: 420px) { .tfx-nav .tfx-btn { padding: 0 14px; } }

/* ─── Abschluss-Box vor dem Footer ─── */
.tfx-cta { padding: clamp(56px, 8vw, 96px) 0; }
.tfx-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(26px, 4vw, 44px); border-radius: 22px; background: var(--tf-surface); border: 1px solid var(--tf-line); }
.tfx-cta-title { margin: 0 0 8px; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.2; color: var(--tf-text); }
.tfx-cta-text { margin: 0; color: var(--tf-muted); }
.tfx-cta-text strong { color: var(--tf-text); }
.tfx-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
@media (max-width: 820px) {
  .tfx-cta-box { flex-direction: column; align-items: flex-start; }
  .tfx-cta-actions { width: 100%; }
  .tfx-cta-actions .tfx-btn { flex: 1 1 220px; }
}

/* ─── Footer ─── */
.tfx-footer { border-top: 1px solid var(--tf-line); padding: 64px 0 120px; background: var(--tf-bg-2); color: var(--tf-text); }
.tfx-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.tfx-footer-brand img { display: block; height: 34px; width: auto; margin-bottom: 14px; }
.tfx-footer-brand p { margin: 0; color: var(--tf-muted); font-size: .95rem; max-width: 32ch; line-height: 1.6; }
.tfx-footer h4 { margin: 0 0 14px; font-family: var(--tf-body) !important; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tf-dim); }
.tfx-footer-col { display: grid; gap: 9px; align-content: start; }
.tfx-footer-col a { color: var(--tf-muted); text-decoration: none; font-size: .95rem; }
.tfx-footer-col a:hover { color: var(--tf-text); }
.tfx-footer-bottom { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--tf-line); color: var(--tf-dim); font-size: .88rem; }
@media (max-width: 900px) { .tfx-footer-grid { grid-template-columns: 1fr 1fr; } .tfx-footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1061px) { .tfx-footer { padding-bottom: 64px; } }

/* ─── Handy-Leiste unten ─── */
.tfx-bar { display: none; }
@media (max-width: 1060px) {
  .tfx-bar {
    position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 990;
    display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px; border-radius: 999px;
    background: oklch(0.2 0.04 258 / .92); border: 1px solid var(--tf-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transform: translateY(140%); transition: transform .35s ease;
  }
  .tfx-bar.is-shown { transform: none; }
  .tfx-bar a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; text-decoration: none; font-family: var(--tf-display) !important; font-weight: 600; font-size: .95rem; color: var(--tf-text); }
  .tfx-bar .tfx-bar-call { padding: 0 18px; border: 1px solid var(--tf-line-strong); }
  .tfx-bar .tfx-bar-trial { background: var(--tf-accent); color: var(--tf-accent-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .tfx-btn, .tfx-bar, .tfx-menu, .tfx-nav { transition: none; }
}

/* ─── Handy: nichts darf breiter als der Bildschirm sein (war vorher schon ein Problem) ─── */
body :is(img, video, iframe, svg) { max-width: 100%; }
@media (max-width: 1023px) {
  /* Breite Tabellen wischen innerhalb ihrer Box statt die Seite zu verschieben */
  body table { display: block !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Sicherheitsnetz: Inhaltsbereiche schneiden seitlichen Überstand ab (clip bricht „sticky“ nicht) */
  body :is(article, main, section) { overflow-x: clip; }
}
@media (max-width: 760px) {
  body :is(code, pre) { white-space: pre-wrap; overflow-wrap: anywhere; }
  body :is(p, li, td, th, a) { overflow-wrap: break-word; }
}

/* Artikel-Seiten (Software/Branchen) beginnen direkt unter der festen Navigation → Abstand oben */
.tfx-menu + article.article { padding-top: 112px !important; }
@media (max-width: 760px) { .tfx-menu + article.article { padding-top: 96px !important; } }

/* Lange deutsche Wörter in Überschriften sauber trennen statt abschneiden */
body :is(h1, h2, h3) { hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 760px) {
  /* Nur lange Wörter trennen (mind. 12 Zeichen, 5 vorne/hinten), sonst ganz lassen */
  body :is(h1, h2, h3) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }
  article.article h1 { font-size: clamp(1.75rem, 7.6vw, 2.2rem) !important; }
}

/* ═══ Etappe 2: Artikel-Vorlage (Blog, Software, Branchen, Themenseiten) ═══ */
article.article { max-width: 760px !important; padding-left: 20px !important; padding-right: 20px !important; font-size: 1.075rem !important; line-height: 1.8 !important; }
article.article p, article.article li { color: oklch(0.82 0.02 258) !important; }
article.article :is(p, li) strong { color: var(--tf-text) !important; }
article.article h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem) !important; line-height: 1.08 !important; margin: 18px 0 22px !important; }
article.article h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem) !important; line-height: 1.2 !important; margin: 72px 0 18px !important; padding-top: 28px; border-top: 1px solid var(--tf-line); scroll-margin-top: 96px; }
article.article h3 { font-size: clamp(1.15rem, 1.6vw, 1.3rem) !important; margin: 36px 0 10px !important; scroll-margin-top: 96px; }
article.article .article-lead { font-size: clamp(1.15rem, 1.7vw, 1.3rem) !important; color: var(--tf-text) !important; line-height: 1.65 !important; }
article.article a:not(.tfx-btn):not(.btn) { color: var(--tf-cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
article.article .article-meta { gap: 10px !important; color: var(--tf-dim) !important; }
article.article .article-meta .category { background: var(--accent-soft) !important; color: oklch(0.85 0.08 256) !important; border: 0 !important; }

/* Kästen: ganze Kontur statt Seitenstreifen, ruhige Fläche */
article.article .info-box { background: var(--tf-surface) !important; border: 1px solid var(--tf-line) !important; border-radius: 18px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 22px 24px !important; }
article.article .info-box strong { color: var(--tf-text) !important; }
article.article blockquote { border: 1px solid var(--tf-line) !important; border-radius: 18px !important; background: var(--tf-bg-2) !important; padding: 26px 28px !important; font-style: normal !important; font-size: 1.15rem !important; color: var(--tf-text) !important; position: relative; }
article.article blockquote::before { content: '„'; position: absolute; top: -18px; left: 22px; font: 700 3.4rem/1 var(--tf-display); color: var(--tf-accent); }

/* Häkchen-Listen */
article.article .check-list li { border-bottom-color: var(--tf-line) !important; }
article.article .check-list li::before { color: oklch(0.74 0.15 155) !important; background: none !important; }

/* Tabellen */
article.article table { border: 1px solid var(--tf-line) !important; border-radius: 16px !important; background: var(--tf-bg-2) !important; font-size: .95rem; }
article.article th { background: var(--tf-surface) !important; color: var(--tf-text) !important; font-weight: 700 !important; }
article.article :is(td, th) { border-color: var(--tf-line) !important; }

/* Alte Test-Box im Text an die neue Optik anpassen */
article.article .article-cta { background: var(--tf-surface) !important; border: 1px solid var(--tf-line) !important; border-radius: 22px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
article.article .article-cta::before, article.article .article-cta::after { display: none !important; }
article.article .article-cta :is(.btn, a.btn) { background: var(--tf-accent) !important; color: var(--tf-accent-ink) !important; border-radius: 999px !important; box-shadow: none !important; }

/* Bild im Artikelkopf (Top-Seiten) */
.tfx-figure { margin: 34px 0 10px; }
.tfx-figure img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--tf-line); }
.tfx-figure figcaption { margin-top: 10px; color: var(--tf-dim); font-size: .88rem; }
.tfx-phones { display: flex; justify-content: center; gap: 4%; padding: 28px 20px 0; border-radius: 20px; background: var(--tf-bg-2); border: 1px solid var(--tf-line); overflow: hidden; height: 360px; }
.tfx-phones img { width: 30%; max-width: 210px; height: auto; align-self: flex-start; border-radius: 22px; border: 6px solid oklch(0.12 0.03 258); }
.tfx-phones img:nth-child(2) { margin-top: 34px; }
@media (max-width: 600px) { .tfx-phones { height: 280px; } .tfx-phones img { width: 42%; } .tfx-phones img:nth-child(3) { display: none; } }

/* Lesefortschritt + Inhaltsverzeichnis (per frame.js, nur auf langen Artikeln) */
.tfx-progress { position: fixed; left: 0; right: 0; top: 72px; z-index: 998; height: 2px; background: transparent; pointer-events: none; }
.tfx-progress span { display: block; height: 100%; background: var(--tf-accent); transform-origin: left; transform: scaleX(0); }
.tfx-toc { display: none; }
@media (min-width: 1280px) {
  body.tfx-has-toc article.article { margin-left: max(24px, calc(50% - 520px)) !important; margin-right: auto !important; }
  .tfx-toc {
    display: block; position: fixed; top: 120px; left: calc(50% + 280px); width: 250px; max-height: calc(100vh - 360px); overflow-y: auto;
    padding: 18px 0 18px 18px; border-left: 1px solid var(--tf-line); transition: opacity .3s;
  }
  .tfx-toc.is-hidden { opacity: 0; pointer-events: none; }
  .tfx-toc p { margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tf-dim); }
  .tfx-toc a { display: block; padding: 6px 0; color: var(--tf-dim); text-decoration: none; font-size: .9rem; line-height: 1.35; transition: color .2s; }
  .tfx-toc a:hover { color: var(--tf-text); }
  .tfx-toc a.is-active { color: var(--tf-text); font-weight: 700; }
}

/* ─── Abschluss-Box mit zwei Wegen (Gründer / bestehende Unternehmen) ─── */
.tfx-cta-kicker { margin: 0 0 18px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tf-cyan); }
.tfx-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tfx-path { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 32px); border-radius: 22px; background: var(--tf-surface); border: 1px solid var(--tf-line); text-decoration: none !important; color: var(--tf-text); transition: border-color .25s ease, transform .25s ease; }
.tfx-path:hover { border-color: var(--tf-accent); transform: translateY(-2px); }
.tfx-path-tag { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: oklch(0.64 0.17 256 / 0.16); color: oklch(0.85 0.08 256); font-size: .76rem; font-weight: 800; }
.tfx-path-title { font-family: var(--tf-display) !important; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.25; }
.tfx-path-text { color: var(--tf-muted); line-height: 1.6; }
.tfx-path-go { margin-top: auto; padding-top: 8px; color: var(--tf-text); font-weight: 800; }
.tfx-path:hover .tfx-path-go { color: oklch(0.8 0.1 256); }
.tfx-benefits { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--tf-muted); font-weight: 600; font-size: .95rem; }
.tfx-benefits li::before { content: '✓\FE0E'; color: oklch(0.74 0.15 155); margin-right: 8px; font-weight: 800; }
.tfx-cta-alt { margin: 14px 0 0; color: var(--tf-dim); font-size: .95rem; }
.tfx-cta-alt a { color: var(--tf-cyan); }
@media (max-width: 760px) { .tfx-paths { grid-template-columns: 1fr; } }

/* ─── Hinweis mitten im Artikel ─── */
.tfx-inline { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin: 48px 0; padding: 22px 24px; border-radius: 18px; background: var(--tf-surface); border: 1px solid var(--tf-line); }
.tfx-inline-title { margin: 0 0 4px !important; font-family: var(--tf-display) !important; font-size: 1.15rem; font-weight: 600; color: var(--tf-text) !important; line-height: 1.3; }
.tfx-inline-text { margin: 0 !important; color: var(--tf-muted) !important; font-size: .98rem; line-height: 1.55 !important; }
@media (max-width: 640px) { .tfx-inline { grid-template-columns: 1fr; } .tfx-inline .tfx-btn { width: 100%; } }

/* ═══ Etappe 3: Seitenköpfe, Buttons, Karten der Unterseiten ═══ */
/* Leuchtkreise im Hintergrund aus */
body::before, body::after { display: none !important; }
.page-hero-grad { background: none !important; }

/* Seitenkopf: ruhiger, größere Einleitung, kein doppelter „Zur Startseite“-Knopf */
.page-hero-clean { padding-top: clamp(130px, 14vw, 180px) !important; padding-bottom: clamp(56px, 8vw, 96px) !important; }
.page-hero-clean .hero-back { display: none !important; }
.page-hero-clean h1 { font-size: clamp(2.3rem, 5.4vw, 4rem) !important; line-height: 1.06 !important; letter-spacing: -0.035em !important; }
.page-hero-clean :is(p, .page-hero-clean-lead) { font-size: clamp(1.05rem, 1.6vw, 1.22rem) !important; line-height: 1.65 !important; color: var(--tf-muted) !important; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* Alte Buttons in der Form der Startseite */
body .btn { border-radius: 999px !important; min-height: 48px; padding: 0 24px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; font-weight: 600 !important; font-size: .98rem !important; box-shadow: none !important; text-decoration: none !important; transition: transform .25s ease, background-color .25s ease, border-color .25s ease !important; }
body .btn-primary, body .btn:not(.btn-ghost):not(.btn-secondary) { background: var(--tf-accent) !important; color: var(--tf-accent-ink) !important; border: 1px solid transparent !important; }
body .btn-primary:hover, body .btn:not(.btn-ghost):not(.btn-secondary):hover { background: oklch(0.69 0.17 256) !important; transform: translateY(-1px); }
body :is(.btn-ghost, .btn-secondary) { background: transparent !important; color: var(--tf-text) !important; border: 1px solid var(--tf-line-strong) !important; }
body :is(.btn-ghost, .btn-secondary):hover { border-color: var(--tf-text) !important; }

/* Preiskarten */
.tf-plan { background: var(--tf-bg-2) !important; border: 1px solid var(--tf-line) !important; border-radius: 20px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.tf-plan:is(.pop, .popular, .featured, .is-popular) { background: var(--tf-surface) !important; border-color: var(--tf-accent) !important; }
.tf-price { color: var(--tf-text) !important; }

/* Funktions-Kacheln */
.bento-card { background: var(--tf-bg-2) !important; border: 1px solid var(--tf-line) !important; border-radius: 20px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: border-color .25s ease, transform .25s ease; }
.bento-card:hover { border-color: var(--tf-line-strong) !important; transform: translateY(-2px); }

/* Kontakt: Karten und Formular */
:is(.contact-form-card, .contact-info-card) { background: var(--tf-bg-2) !important; border: 1px solid var(--tf-line) !important; border-radius: 22px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:is(.contact-form-card, .contact-info-card)::before, :is(.contact-form-card, .contact-info-card)::after { display: none !important; }
.contact-page :is(input, select, textarea) { background: var(--tf-bg) !important; border: 1px solid var(--tf-line-strong) !important; border-radius: 12px !important; color: var(--tf-text) !important; font-size: 1rem !important; }
.contact-page :is(input, select, textarea):focus { border-color: var(--tf-accent) !important; outline: none !important; box-shadow: 0 0 0 3px oklch(0.64 0.17 256 / .2) !important; }
.contact-page :is(button[type=submit], .submit-btn) { background: var(--tf-accent) !important; color: var(--tf-accent-ink) !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important; min-height: 50px; font-weight: 700 !important; }
.contact-page :is(.contact-method, .quick-link) { background: var(--tf-bg) !important; border: 1px solid var(--tf-line) !important; border-radius: 14px !important; }
.contact-page .badge { background: var(--accent-soft) !important; color: oklch(0.85 0.08 256) !important; border: 0 !important; }

/* ─── Preise: „In jedem Paket enthalten“ als Wert-Karten ─── */
.tfx-value-lead { max-width: 62ch; margin: 0 auto 28px !important; text-align: center; color: var(--tf-muted) !important; font-size: 1.05rem; line-height: 1.6; }
.tfx-value { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.tfx-value-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border-radius: 18px; background: var(--tf-bg-2); border: 1px solid var(--tf-line); }
.tfx-value-card h3 { margin: 0 !important; font-size: 1.12rem !important; line-height: 1.3; color: var(--tf-text) !important; }
.tfx-value-card p { margin: 0 !important; color: var(--tf-muted) !important; font-size: .96rem; line-height: 1.6; }
.tfx-value-card.is-key { grid-column: span 2; background: var(--tf-surface); border-color: var(--tf-accent); }
.tfx-value-card.is-key h3 { font-size: 1.4rem !important; }
.tfx-value-tag { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: oklch(0.64 0.17 256 / 0.18); color: oklch(0.86 0.08 256); font-size: .76rem; font-weight: 800; }
.tfx-value-foot { max-width: 70ch; margin: 24px auto 0 !important; text-align: center; color: var(--tf-muted) !important; line-height: 1.6; }
.tfx-value-foot a { color: var(--tf-cyan); }
@media (max-width: 960px) { .tfx-value { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tfx-value { grid-template-columns: 1fr; } .tfx-value-card.is-key { grid-column: auto; } }
.tf-included { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; margin-top: clamp(56px, 8vw, 96px) !important; }
.tf-included > h2 { text-align: center; font-size: clamp(1.8rem, 3.6vw, 2.6rem) !important; margin: 0 0 14px !important; }
@media (min-width: 961px) { .tfx-value-card:last-child { grid-column: span 3; } }