/* Local Impeccable pass: brand-preserving layout, bolder hero, adapt, polish. */
:root {
  --pw-cream: #f8f6fc;
  --pw-cream-deep: #f2effa;
  --pw-marigold: #6734b8;
  --pw-marigold-soft: #d6c4f3;
  --pw-ink: #241638;
  --pw-ink-soft: #51465f;
  --pw-rule: #ded7e9;
  --accent: #6734b8;
  --radius: 12px;
}
html { scroll-padding-top: 100px; scrollbar-color: #89719f #f2effa; }
body.opt { background: #fff; font-size: 16px; line-height: 1.65; }
::selection { background: #d6c4f3; color: #241638; }
:focus-visible { outline: 3px solid #6734b8 !important; outline-offset: 5px; }
a { text-underline-offset: .22em; }
button, input { accent-color: var(--accent); }
.opt .container { max-width: 1280px; padding-inline: 40px; }
body.opt .nav { background: #241638; backdrop-filter: none; border-bottom: 1px solid #463456; }
.opt .nav-inner { max-width: 1360px; min-height: 84px; padding-inline: 40px; }
.opt .nav-logo { width: 218px; flex-shrink: 0; }
.opt .nav-logo img { width: 100%; height: auto; }
.opt .nav-links { gap: 24px; }
.opt .nav-links > a, .opt .nav-dropdown > a { color: #eee8f7; font-size: 14px; }
.opt .nav-links a:hover { color: #fff; }
.opt .nav-cta { background: #e5d5ff; color: #241638 !important; border-radius: 6px; padding: 12px 18px; }
.opt .nav-cta:hover { background: #fff; }
.opt .nav :focus-visible, .opt .final-ed :focus-visible, .opt .footer :focus-visible { outline-color: #e5d5ff !important; }
.opt .nav-dd-menu { background: #241638; }
.opt .nav-dd-menu a { color: #fff; }
.opt .nav-dd-menu a:hover { background: #463456; }
.opt .hero-editorial { padding: 156px 0 64px; background: #f2effa; border: 0; }
.opt .hero-editorial::before { display: none; }
.opt .hero-grid { grid-template-columns: .95fr 1.2fr; gap: 48px; align-items: center; }
.opt .hero-text { padding-bottom: 12px; min-width: 0; }
.opt h1.hero-h { font-size: clamp(52px, 5.8vw, 80px); line-height: 1.06; font-weight: 700; letter-spacing: -.035em; margin: 0 0 24px; }
.opt h1.hero-h em { font-style: normal; font-weight: 700; color: var(--accent); }
.opt h1.hero-h em::after { display: none; }
.opt .hero-sub { font-size: 17px; line-height: 1.8; max-width: 52ch; margin-bottom: 28px; }
.opt .hero-ctas { gap: 12px 24px; align-items: center; margin-bottom: 24px; }
.opt .btn-ink { background: var(--accent); border-color: var(--accent); border-radius: 6px; padding: 16px 20px; font-size: 15px; min-height: 54px; }
.opt .btn-ink:hover { background: #4d248c; border-color: #4d248c; transform: translateY(-2px); box-shadow: none; }
.opt .btn-link-ink { font-size: 15px; padding: 12px 0; border: 0; text-decoration: underline; }
.opt .btn-link-ink:hover { color: #4d248c; }
.opt .hero-meta { align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; font-size: 12px; margin-top: 24px; }
.opt .hero-meta strong { font-size: inherit; }
.opt .hero-meta-divider { height: 12px; background: #b6a7c8; }
.opt .hero-mockup { display: block; width: 100%; max-width: none; margin: 0; transform: none; position: relative; }
.opt .hero-mockup-frame { background: #fff; border: 0; border-radius: var(--radius); padding: 0; overflow: hidden; box-shadow: 0 24px 64px #24163824; transform: none; }
.opt .hero-mockup-dots { background: #e4dced; height: 34px; padding-left: 16px; display: flex; align-items: center; gap: 6px; }
.opt .hero-mockup-dots span, .opt .hero-mockup-dots span:nth-child(n) { background: #8c779e; width: 7px; height: 7px; }
.opt .hero-mockup img { width: 100%; height: auto; border: 0; border-radius: 0; }
.opt .hero-mockup::after { content: 'PetWorkers im Alltag ansehen →'; display: block; padding-top: 20px; text-align: right; font-size: 13px; font-weight: 600; color: #51465f; }
.opt .trust-strip-top { padding: 24px 16px; background: #fff; border-bottom: 1px solid var(--pw-rule); border-top: 0; }
.opt .trust-strip-top-inner { max-width: 1200px; justify-content: space-between; gap: 24px; }
.opt .trust-strip-top-item { font-size: 12px; letter-spacing: 0; gap: 12px; }
.opt .trust-strip-top-item img { height: 28px; }
.opt section.ed { padding-block: 96px; }
.opt section.ed.cream { background: #f8f6fc; }
.opt section.ed.cream-deep { background: #f2effa; }
.opt h2.ed-h { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.16; letter-spacing: -.025em; margin-bottom: 24px; text-wrap: balance; }
.opt h2.ed-h em { color: var(--accent); font-style: normal; font-weight: 700; }
.opt .ed-lead { font-size: 17px; line-height: 1.8; max-width: 65ch; }
.opt #problem { background: #241638; color: #fff; }
.opt .problem-scene { gap: 96px; grid-template-columns: .85fr 1.15fr; }
.opt .problem-clock { color: #fff; font-size: clamp(64px, 8vw, 112px); line-height: 1.02; letter-spacing: -.03em; }
.opt .problem-clock span { color: #d6c4f3; }
.opt .problem-caption { color: #d6c4f3; font-size: 16px; letter-spacing: .04em; margin-top: 24px; }
.opt #problem h2.ed-h { color: #fff; }
.opt #problem .problem-pains li { display: block; font-size: 16px; color: #eee8f7; padding-block: 18px; border-color: #4b3a5d; }
.opt #problem .problem-pains .num { display: none; }
.opt .compare-grid { gap: 32px; margin-top: 48px; }
.opt .compare-col { border-radius: var(--radius); padding: 32px; }
.opt .feature-row { gap: 72px; margin-bottom: 96px; grid-template-columns: 1fr 1.2fr; }
.opt .feature-text h3 { max-width: 20ch; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.2; }
.opt .feature-text p { line-height: 1.8; font-size: 16px; max-width: 60ch; }
.opt .feature-text li { font-size: 14px; padding-block: 8px; }
.opt .feature-visual, .opt .feature-visual.tilt-r, .opt .feature-visual.tilt-l { transform: none; padding: 24px; background: #ebe5f4; border-radius: var(--radius); }
.opt .feature-visual img { border: 0; border-radius: 4px; box-shadow: 0 12px 24px #2416381a; }
.opt .feature-link { min-height: 44px; align-items: center; color: var(--accent); border-bottom-width: 1px; }
.opt .branch-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.opt .branch-tile, .opt .branch-tile.big, .opt .branch-tile.half, .opt .branch-tile.narrow { grid-column: auto; grid-row: auto; background: none; border: 0; border-top: 1px solid var(--pw-rule); border-radius: 0; padding: 32px 32px 32px 0; min-height: 0; transform: none; box-shadow: none; }
.opt .branch-tile.big { grid-column: 1 / -1; max-width: none; }
.opt .branch-tile h3, .opt .branch-tile.big h3 { font-size: 26px; margin: 0 0 12px; }
.opt .branch-tile:hover { background: #f8f6fc; }
.opt .branch-tile p { max-width: 75ch; font-size: 16px; }
.opt .roi-panel { border-radius: var(--radius); border: 0; background: #fff; padding: 32px; box-shadow: none; }
.opt .roi-result { font-variant-numeric: tabular-nums; }
.opt .roi-label { font-size: 15px; }
.opt .roi-disclaimer { color: #51465f; }
.opt .pull-quote { border: 0; padding: 32px; border-radius: var(--radius); background: #fff; }
.opt .pull-quote::before { display: none; }
.opt .pull-quote.span-12 { background: #e9e0f5; padding: 48px; }
.opt .pull-quote blockquote { font-family: 'Open Sans', sans-serif; font-style: normal; font-size: 17px; line-height: 1.8; }
.opt .pull-quote.span-12 blockquote { font-size: clamp(20px, 2vw, 26px); line-height: 1.6; max-width: 70ch; }
.opt .pull-quote cite span { color: #51465f; }
.opt .steps-ed { gap: 40px; }
.opt .step-ed { border-color: var(--pw-rule); }
.opt .step-ed-num { font-size: 28px; color: var(--accent); }
.opt .step-ed p { font-size: 16px; line-height: 1.8; }
.opt .price-header { margin-bottom: 48px; }
.opt .price-grid { gap: 16px; align-items: stretch; }
.opt .price-card { border: 1px solid var(--pw-rule); background: #fff; border-radius: var(--radius); padding: 32px 24px; box-shadow: none; }
.opt .price-card.popular { background: #241638; transform: none; border-color: #241638; box-shadow: none; }
.opt .price-card.anchor { background: #e9e0f5; }
.opt .price-card.popular .price-per { color: #ded5ee; }
.opt .price-card.popular .price-features li, .opt .price-card.popular .price-sub { color: #ded5ee; }
.opt .price-card.popular .price-cta { background: #e5d5ff; color: #241638; }
.opt .price-badge { background: #e5d5ff; color: #241638; border-radius: 4px; font-size: 11px; }
.opt .price-amount { font-size: 40px; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.opt .price-cta { border-radius: 6px; min-height: 48px; }
.opt .price-cta-secondary { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.opt .price-note, .opt .billing-example, .opt .price-sub { color: #51465f; }
.opt .trial-banner { background: #e9e0f5; border: 0; border-radius: var(--radius); }
.opt .faq-ed { max-width: 860px; margin-inline: auto; }
.opt .faq-ed summary { min-height: 64px; padding-block: 24px; font-size: 18px; }
.opt .faq-ed details { border-color: var(--pw-rule); }
.opt .final-ed { padding: 96px 0; background: #241638; }
.opt .final-ed h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1.15; letter-spacing: -.025em; }
.opt .final-ed h2 em { font-style: normal; font-weight: 700; color: #d6c4f3; }
.opt .final-ed p { color: #ded5ee; max-width: 65ch; font-size: 17px; line-height: 1.8; }
.opt .final-ed .btn-ink { background: #e5d5ff; border-color: #e5d5ff; color: #241638; }
.opt .final-ed .btn-link-ink { color: #fff; }
.opt .final-ed .hero-meta { color: #ded5ee; }
.opt .footer-logos-wrap { background: #fff; }
.opt .footer-logo-card { border-radius: 0; background: none; border: 0; }
.opt .footer-logo-card p { color: #51465f; }
.opt .footer-socket { background: #1b102b; padding-block: 40px; }
.opt .pw-sticky-cta { display: none; }
html.js .opt .reveal, html.js .opt .fade-up { opacity: 1; transform: none; transition: none; }
@keyframes product-arrives { from { translate: 0 16px; } to { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) { .opt .hero-mockup { animation: product-arrives 700ms cubic-bezier(.16,1,.3,1); } }
@media (max-width: 1200px) {
  .opt .nav-links { gap: 16px; }
  .opt .nav-logo { width: 182px; }
  .opt .nav-links > a, .opt .nav-dropdown > a { font-size: 13px; }
  .opt .hero-grid { gap: 32px; }
  .opt .hero-meta { flex-direction: column; gap: 4px; }
  .opt .hero-meta-divider { display: none; }
  .opt .trust-strip-top-item span { display: inline; }
  .opt .trust-strip-top-inner { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .opt .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 1050px) {
  .opt .nav-burger { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; }
  .opt .nav-links { display: none; }
  .opt .nav-links.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 84px; left: 0; right: 0; padding: 24px 40px; background: #241638; gap: 8px; max-height: calc(100dvh - 84px); overflow-y: auto; }
  .opt .nav-links.open > a, .opt .nav-dropdown > a { display: flex; min-height: 44px; align-items: center; font-size: 16px; }
  /* Branchen mobil aufgeklappt wie live (Go-Live 08.11.2026) */
  .opt .nav-links.open .nav-dd-menu { display: block; padding: 0 0 8px 16px; background: transparent; }
  .opt .nav-links.open .nav-dd-menu a { display: flex; min-height: 44px; align-items: center; color: #eee8f7; font-size: 15px; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .opt .nav-links.open .nav-cta { justify-content: center; }
  .opt .nav-inner { justify-content: space-between; }
}
@media (max-width: 900px) {
  .opt .hero-editorial { padding: 132px 0 48px; }
  .opt .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .opt h1.hero-h { max-width: 13ch; font-size: clamp(48px, 8vw, 72px); }
  .opt .hero-sub { max-width: 65ch; }
  .opt .hero-meta { flex-direction: row; gap: 8px 20px; }
  .opt .hero-mockup { max-width: 720px; }
  .opt .problem-scene, .opt .roi-grid { grid-template-columns: 1fr; gap: 40px; }
  .opt .problem-clock { font-size: 80px; }
  .opt .feature-row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 72px; }
  .opt .feature-row.reverse .feature-text, .opt .feature-row.reverse .feature-visual { order: unset; }
  .opt .feature-text h3 { max-width: 28ch; }
  .opt .feature-text p { max-width: 65ch; }
  .opt .feature-visual { max-width: 720px; }
  .opt .trust-strip-top-divider { display: none; }
  .opt .final-ed .hero-meta { justify-content: center; }
}
@media (max-width: 600px) {
  .opt .container { padding-inline: 24px; }
  .opt .nav-inner { min-height: 72px; padding-inline: 24px; }
  .opt .nav-links.open { top: 72px; padding: 20px 24px; max-height: calc(100dvh - 72px); }
  .opt .nav-logo { width: 184px; }
  .opt .hero-editorial { padding: 112px 0 40px; }
  .opt h1.hero-h { font-size: clamp(42px, 10vw, 60px); line-height: 1.08; margin-bottom: 24px; }
  .opt .hero-sub { font-size: 16px; line-height: 1.75; }
  .opt .hero-ctas { align-items: stretch; flex-direction: column; gap: 8px; }
  .opt .btn-ink, .opt .btn-link-ink { justify-content: center; font-size: 14px; }
  .opt .hero-meta { font-size: 12px; gap: 8px 16px; }
  .opt .hero-mockup::after { text-align: left; padding-top: 12px; }
  .opt .hero-mockup-dots { height: 24px; }
  .opt .trust-strip-top { padding-block: 24px; }
  .opt .trust-strip-top-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .opt .trust-strip-top-item { white-space: normal; font-size: 10px; gap: 8px; line-height: 1.5; }
  .opt .trust-strip-top-item img { max-width: 56px; height: auto; max-height: 24px; object-fit: contain; }
  .opt section.ed { padding-block: 64px; }
  .opt h2.ed-h { font-size: 32px; line-height: 1.2; }
  .opt .problem-clock { font-size: 68px; }
  .opt .problem-caption { margin-top: 16px; }
  .opt .compare-grid, .opt .branch-mosaic { grid-template-columns: 1fr; gap: 24px; }
  .opt .compare-col { padding: 24px; }
  .opt .feature-row { margin-bottom: 64px; }
  .opt .feature-visual { padding: 12px; }
  .opt .branch-tile, .opt .branch-tile.big { padding: 24px 0; }
  .opt .branch-tile h3, .opt .branch-tile.big h3 { font-size: 24px; }
  .opt .roi-panel { padding: 24px 20px; }
  .opt .roi-line.big { font-size: 20px; gap: 12px; }
  .opt .roi-grid { gap: 32px; }
  .opt .quotes-stack { display: block; }
  .opt .pull-quote, .opt .pull-quote.span-12 { padding: 24px; margin-bottom: 16px; }
  .opt .pull-quote.span-12 blockquote { font-size: 20px; }
  .opt .steps-ed { grid-template-columns: 1fr; gap: 32px; }
  .opt .price-grid { grid-template-columns: 1fr; gap: 24px; }
  .opt .price-card { padding: 32px; }
  .opt .price-header { gap: 24px; }
  .opt .price-amount { font-size: 44px; }
  .opt .trial-banner { padding: 24px; }
  .opt .faq-ed summary { font-size: 16px; padding-block: 24px; }
  .opt .final-ed { padding-block: 64px; }
  .opt .final-ed h2 { font-size: 38px; }
  .opt .final-ed .hero-ctas { width: 100%; }
  .opt .footer-logos-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .opt .footer-logo-card { padding: 0; }
  .opt .footer-logo-card p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Corrections verified against the rendered page, including inherited inline emphasis. */
.opt #problem .problem-pains em { color: #ded5ee; }
.opt .billing-toggle label .badge,
.opt .billing-toggle input:checked + label .badge { background: #e5d5ff; color: #241638; }
.opt .guarantee-seal span { color: #e5d5ff; }
.opt .footer-sitemap-sep { color: #c7bad8; }
.opt .nav-dd-menu { padding: 12px; }
.opt .nav-cta, .opt .nav-cta:hover, .opt .nav-cta:focus { box-shadow: none; }
@media (max-width: 600px) { .opt .trust-strip-top-item { font-size: 12px; } }
body.opt .footer-sitemap .footer-sitemap-sep { color: #c7bad8; }
.opt .feature-link { border-color: var(--accent); }
.opt .price-card.popular .price-cta, .opt .price-card.anchor .price-cta { border-color: #b69bd9; }
@media (min-width: 1201px) { .opt .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Knopf „Verträge kündigen“ im Fußbereich in der Farbe des Menü-Knopfs (Ümit 07.11.2026) */
body.opt .footer-links a.footer-cancel-btn,
body.opt .footer-cancel-btn { background: #e5d5ff; border-color: #e5d5ff !important; color: #241638 !important; }
body.opt .footer-links a.footer-cancel-btn:hover,
body.opt .footer-cancel-btn:hover { background: #fff !important; border-color: #fff !important; color: #241638 !important; }

/* Logo: feste Seitenverhältnis-Angabe, weil logo.svg nur 100 % als Größe trägt und manche Browser die Höhe sonst mit 0 rechnen (07.11.2026) */
.opt .nav-logo { display: flex; align-items: center; }
.opt .nav-logo picture { display: block; width: 100%; }
.opt .nav-logo img { display: block; width: 100%; height: auto; aspect-ratio: 1823 / 214; min-height: 18px; }