/* Full-Bleed Utility — lässt ein Element aus dem max-width-Container ausbrechen bis zur Browser-Kante. */
.full-bleed {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
width: 100vw;
max-width: 100vw;
}
/* Dark-CTA-Banner — cleane dark Card, flex-column für garantiert mittigen Button.
Primary-Accent-Line oben als visueller Hook, sonst keine Gradients/Ornamente.
Zentrierung via Flex auf dem Banner selbst (display:flex + justify-content:
center). So unabhängig von margin-Utilities und robust gegen Reset-Regeln
oder Theme-Overrides die margin-auto wegkürzen könnten. */
.dark-cta-banner {
background: var(--dark);
padding: 5rem 2rem;
margin: 4rem 2rem 6rem;
border-radius: 22px;
box-shadow: 0 24px 48px -24px rgba(26,46,45,0.5);
color: white;
display: flex;
justify-content: center;
}
.dark-cta-banner__inner {
width: 100%;
max-width: 620px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.4rem;
}
.dark-cta-banner__inner::before {
content: "";
width: 48px;
height: 2px;
background: var(--primary);
margin-bottom: 0.5rem;
}
.dark-cta-banner h1,
.dark-cta-banner h2,
.dark-cta-banner h3 {
color: white;
margin: 0;
}
.dark-cta-banner .ins-h2 {
font-size: clamp(1.75rem, 3.2vw, 2.3rem);
line-height: 1.25;
margin-bottom: 0 !important;
}
.dark-cta-banner p {
margin: 0;
font-size: 1.02rem;
line-height: 1.7;
color: rgba(255,255,255,0.78);
max-width: 520px;
}
.dark-cta-banner .btn-white {
padding: 1.1rem 2.5rem;
font-size: 1rem;
font-weight: 700;
margin-top: 0.5rem;
box-shadow: 0 12px 32px -12px rgba(255,255,255,0.28);
transition: transform 0.2s, box-shadow 0.2s;
}
.dark-cta-banner .btn-white:hover {
transform: translateY(-2px);
box-shadow: 0 18px 48px -12px rgba(255,255,255,0.42);
}
@media (max-width: 640px) {
.dark-cta-banner { margin: 2.5rem 1rem 4rem; padding: 3.5rem 1.5rem; }
}
/* ═══════════════════════════════════════════════
THEME-COMPAT OVERRIDE
Der finsurancy-Theme beschränkt .block-content > * auf 680px
und kompensiert den fixed-Header nur bei .wp-block-group:first-child.
Unser Full-Width-Wrapper braucht beides.
═══════════════════════════════════════════════ */
.block-content > .seo-tool-landing {
max-width: 900px;
margin: 144px auto 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 768px) {
.block-content > .seo-tool-landing {
margin-top: 96px;
}
}
/* ─────────────────────────────────────────────
SYSTEM
Alles unter .seo-tool-landing gescoped — verhindert Theme-Spill
(WP-Header, -Footer, -Sidebar sollen vom finsurancy-Theme geregelt bleiben).
Reset via :where() → Specificity 0. Browser-Default-Margins werden
genullt, aber jede nachfolgende Class-Rule (.ins-h1, .ins-lead, etc.)
gewinnt automatisch. So können Komponenten ihre Margins kontrollieren
ohne :seo-tool-landing-Prefix-Refactor.
───────────────────────────────────────────── */
.seo-tool-landing *,
.seo-tool-landing *::before,
.seo-tool-landing *::after { box-sizing: border-box; }
:where(.seo-tool-landing) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote, pre, fieldset) {
margin: 0;
padding: 0;
}
:root {
--primary: #0d9e8a;
--hover: #0b8a78;
--dark: #1a2e2d;
--muted: #4a6360;
--border: #c8dedd;
--tint: #e6f7f5;
--stars: #f5a623;
--white: #ffffff;
--bg: #f8fffe;
}
.seo-tool-landing {
font-family: 'Inter', -apple-system, sans-serif;
color: var(--dark);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ═══════════════════════════════════════════════
① KANONISCHE KOMPONENTEN (aus Referenzseite)
═══════════════════════════════════════════════ */
/* EYEBROW */
.eyebrow {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary);
display: block;
margin-bottom: 0.6rem;
}
/* TYPOGRAFIE */
/* Em-Dash in Headlines: Umbruch mit
davor kontrollieren — nie auf CSS-Wrap verlassen. Beispiel: Text
Akzent — Rest */
.ins-h1 {
font-family: 'DM Serif Display', Georgia, serif;
font-weight: 700;
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1.1;
color: var(--dark);
margin-bottom: 1.25rem;
}
/* Erzwinge DM-Serif + Weight 400 auch gegen Theme-Default.
finsurancy-Theme hat globale h1..h6 { font-weight:700 } im Inline-Critical-CSS
das gegen unseren Descendant-Selector robust greift — daher !important. */
.seo-tool-landing h1,
.seo-tool-landing h2,
.seo-tool-landing h3,
.seo-tool-landing h4 {
font-family: 'DM Serif Display', Georgia, serif !important;
font-weight: 700 !important;
}
.ins-h2 {
font-family: 'DM Serif Display', Georgia, serif;
font-weight: 700;
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
line-height: 1.2;
color: var(--dark);
margin-bottom: 1rem;
}
.ins-h3 {
font-family: 'DM Serif Display', Georgia, serif;
font-weight: 700;
font-size: 1.35rem;
color: var(--dark);
margin-bottom: 0.6rem;
}
.ins-h1 em, .ins-h2 em, .ins-h3 em {
font-style: italic;
color: var(--primary);
}
.ins-lead {
font-size: 1.05rem;
line-height: 1.7;
color: var(--muted);
margin-bottom: 2rem;
}
.ins-body {
font-size: 1rem;
line-height: 1.6;
color: var(--dark);
}
/* BUTTONS */
.btn-primary {
display: inline-block;
background: var(--primary);
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 12px;
padding: 1rem 2rem;
text-decoration: none;
animation: pulse 3s ease-in-out infinite;
transition: background 0.2s;
border: none;
cursor: pointer;
}
.btn-primary:hover { background: var(--hover); animation: none; }
.btn-ghost {
display: inline-block;
background: transparent;
color: var(--primary);
font-size: 0.95rem;
font-weight: 600;
border: 2px solid var(--border);
border-radius: 12px;
padding: 0.9rem 1.75rem;
text-decoration: none;
transition: border-color 0.2s;
}
.btn-ghost:hover { border-color: var(--primary); }
/* Ghost neben Primary-CTA im Hero: font-size:0.88rem; padding:0.75rem 1.5rem — damit er optisch zurücktritt */
.btn-white {
display: inline-block;
background: #fff;
color: var(--primary);
font-size: 0.95rem;
font-weight: 700;
border-radius: 12px;
padding: 1rem 2rem;
text-decoration: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
transition: transform 0.2s;
border: none;
cursor: pointer;
}
.btn-white:hover { transform: translateY(-2px); }
/* AUDIENCE CARD */
.audience-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.audience-card {
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.5rem 1.25rem;
background: white;
transition: border-color 0.2s, transform 0.2s;
}
.audience-card:hover {
border-color: rgba(13,158,138,0.5);
transform: translateY(-3px);
}
.icon-circle {
width: 48px;
height: 48px;
background: var(--tint);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.card-title {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 0.4rem;
}
.card-desc {
font-size: 0.85rem;
color: var(--muted);
line-height: 1.55;
}
/* STAT BLOCK */
/* Variante H — "Tinted Accent Cards": Hellgrün-Background (var(--tint)),
primary 3px Top-Border als Akzent. Matcht callout_box--tip visually. */
.stat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
}
@media (max-width: 640px) {
.stat-grid { grid-template-columns: 1fr; gap: 0.75rem; }
}
.stat-block {
text-align: center;
padding: 2rem 1.5rem 1.75rem;
background: var(--tint);
border-radius: 14px;
border-top: 3px solid var(--primary);
position: relative;
transition: background 0.2s, transform 0.2s;
}
.stat-block:hover {
background: rgba(13,158,138,0.12);
transform: translateY(-2px);
}
.stat-eyebrow {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary);
display: block;
margin-bottom: 0.75rem;
}
.stat-number {
font-size: clamp(2.2rem, 4vw, 2.8rem);
font-weight: 400;
color: var(--dark);
display: block;
margin-bottom: 0.5rem;
line-height: 1;
font-family: 'DM Serif Display', Georgia, serif;
letter-spacing: -0.01em;
}
.stat-label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--dark);
display: block;
margin-bottom: 0.4rem;
}
.stat-desc {
font-size: 0.78rem;
color: var(--muted);
line-height: 1.55;
}
/* PRICE CARD */
.price-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.price-card {
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.75rem 1.5rem;
position: relative;
overflow: hidden;
background: white;
transition: border-color 0.2s;
}
.price-card.featured {
border-color: var(--primary);
background: linear-gradient(145deg, #f0fdfb 0%, #ffffff 100%);
}
.price-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--primary);
color: #fff;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.2rem 0.6rem;
border-radius: 20px;
}
.price-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.5rem;
}
.price-amount {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 2.2rem;
color: var(--dark);
line-height: 1;
margin-bottom: 0.25rem;
}
.price-amount span {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 500;
color: var(--muted);
}
.price-note {
font-size: 0.78rem;
color: var(--muted);
margin-bottom: 1rem;
}
.price-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.price-list li {
font-size: 0.8rem;
color: var(--muted);
display: flex;
align-items: flex-start;
gap: 0.5rem;
line-height: 1.4;
}
.price-list li::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
min-width: 14px;
margin-top: 1px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%23e6f7f5'/%3E%3Cpath d='M4.5 7l2 2 3-3' stroke='%230d9e8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
/* TIP BOX */
.tip-box {
background: linear-gradient(135deg, var(--tint) 0%, #d4f5ef 100%);
border: 1px solid rgba(13,158,138,0.25);
border-radius: 16px;
padding: 2rem;
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.tip-icon {
min-width: 48px;
height: 48px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(13,158,138,0.15);
flex-shrink: 0;
}
.tip-box h3 {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 0.5rem;
}
.tip-box p {
font-size: 0.87rem;
color: var(--muted);
line-height: 1.65;
}
/* WARN BOX */
.warn-box {
background: #fff8ed;
border: 1.5px solid #f5a623;
border-left: 4px solid #f5a623;
border-radius: 14px;
padding: 1.5rem 1.75rem;
}
.warn-title {
font-weight: 700;
font-size: 0.95rem;
color: #b07d00;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.warn-box p {
font-size: 0.92rem;
color: var(--muted);
line-height: 1.65;
}
/* USA / INLINE CALLOUT BOX */
.callout-box {
background: var(--tint);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.5rem 1.75rem;
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.callout-box h4 {
font-weight: 700;
font-size: 0.92rem;
color: var(--dark);
margin-bottom: 0.35rem;
}
.callout-box p {
font-size: 0.82rem;
color: var(--muted);
line-height: 1.6;
}
/* STEP CARDS */
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.step-card {
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.5rem 1.25rem;
background: white;
transition: border-color 0.2s;
}
.step-card:hover { border-color: rgba(13,158,138,0.5); }
.step-num {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 2rem;
color: var(--border);
line-height: 1;
margin-bottom: 0.75rem;
transition: color 0.2s;
}
.step-card:hover .step-num { color: var(--primary); }
.step-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 0.4rem;
}
.step-desc {
font-size: 0.77rem;
color: var(--muted);
line-height: 1.55;
}
/* PROVIDER CARD */
.provider-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.provider-card {
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.5rem 1.25rem;
background: white;
transition: border-color 0.2s, transform 0.2s;
}
.provider-card:hover {
border-color: rgba(13,158,138,0.5);
transform: translateY(-3px);
}
.provider-tag {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--primary);
background: var(--tint);
padding: 0.2rem 0.6rem;
border-radius: 20px;
display: inline-block;
margin-bottom: 0.75rem;
}
.provider-name {
font-weight: 700;
font-size: 0.9rem;
color: var(--dark);
margin-bottom: 0.5rem;
}
.provider-desc {
font-size: 0.77rem;
color: var(--muted);
line-height: 1.55;
}
/* FAQ */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
width: 100%;
background: none;
border: none;
cursor: pointer;
text-align: left;
padding: 1.1rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
font-weight: 600;
color: var(--dark);
transition: color 0.2s;
}
.faq-q:hover { color: var(--primary); }
.faq-chevron { min-width: 18px; height: 18px; transition: transform 0.25s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a {
display: none;
font-size: 0.87rem;
color: var(--muted);
line-height: 1.7;
padding-bottom: 1.25rem;
}
.faq-item.open .faq-a { display: block; }
/* UW CARDS */
.underwriting-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.uw-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.25rem;
}
.uw-title {
font-weight: 700;
font-size: 0.88rem;
color: var(--dark);
margin-bottom: 0.4rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.uw-dot {
width: 8px;
height: 8px;
background: var(--primary);
border-radius: 50%;
display: inline-block;
}
.uw-card p {
font-size: 0.78rem;
color: var(--muted);
line-height: 1.6;
}
/* DARK CTA BANNER */
.dark-banner {
background: linear-gradient(135deg, var(--dark) 0%, #0e3b38 100%);
border-radius: 20px;
padding: 3rem 2.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.dark-banner::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(13,158,138,0.3) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.dark-banner .eyebrow { color: rgba(13,158,138,0.8); }
.dark-banner h2 {
font-family: 'DM Serif Display', Georgia, serif;
font-weight: 700;
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
color: #fff;
margin-bottom: 1rem;
}
.dark-banner p {
font-size: 0.95rem;
color: rgba(255,255,255,0.7);
max-width: 480px;
margin: 0 auto 2rem;
line-height: 1.7;
}
/* INTERNAL LINK — in-text anchors aus dem Link-Inserter. Duplicate-Selector
im seo-tool-landing-Scope damit theme-CSS-Overrides (body a { color:
inherit } etc.) überstimmt werden. */
a.ins-link,
.seo-tool-landing a.ins-link,
.seo-tool-landing .ins-lead a.ins-link,
.seo-tool-landing .hero-section a.ins-link {
color: var(--primary);
text-decoration: none;
border-bottom: 1px solid rgba(13,158,138,0.3);
transition: border-color 0.2s;
}
a.ins-link:hover,
.seo-tool-landing a.ins-link:hover,
.seo-tool-landing .ins-lead a.ins-link:hover,
.seo-tool-landing .hero-section a.ins-link:hover {
border-bottom-color: var(--primary);
color: var(--primary);
}
/* PRESS BAR */
.press-bar {
display: flex;
align-items: center;
gap: 2.25rem;
padding: 1.1rem 1.75rem;
border: 1px solid var(--border);
border-radius: 14px;
background: white;
}
.press-bar__label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
flex-shrink: 0;
text-decoration: none;
transition: color 0.2s;
}
.press-bar__label:hover { color: var(--primary); }
.press-bar__logos {
display: flex;
align-items: center;
justify-content: space-evenly;
flex: 1;
}
.press-bar__logos img {
width: auto;
height: 24px;
max-width: 130px;
object-fit: contain;
filter: grayscale(100%) opacity(0.45);
display: block;
flex-shrink: 0;
transition: filter 0.2s;
cursor: default;
}
.press-bar__logos img:hover { filter: grayscale(0%) opacity(1); }
/* CHECK LIST */
.check-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.check-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.95rem;
color: var(--muted);
line-height: 1.55;
}
.check-list li .check-icon {
min-width: 24px;
height: 24px;
background: var(--tint);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
flex-shrink: 0;
}
.check-list li strong { color: var(--dark); }
/* ═══════════════════════════════════════════════
② NEUE KOMPONENTEN
═══════════════════════════════════════════════ */
/* ── NEU A: TESTIMONIAL CARD ───────────────── */
.testimonial-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.testimonial-card {
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.75rem 1.5rem;
background: white;
position: relative;
transition: transform 0.2s, border-color 0.2s;
}
.testimonial-card:hover {
transform: translateY(-3px);
border-color: rgba(13,158,138,0.4);
}
.testimonial-card::before {
content: '"';
font-family: 'DM Serif Display', Georgia, serif;
font-size: 5rem;
line-height: 1;
color: var(--tint);
position: absolute;
top: 0.5rem;
left: 1.25rem;
pointer-events: none;
}
.testimonial-stars {
display: flex;
gap: 2px;
margin-bottom: 0.85rem;
}
.testimonial-stars span {
color: var(--stars);
font-size: 0.82rem;
}
.testimonial-quote {
font-size: 0.9rem;
line-height: 1.7;
color: var(--dark);
margin-bottom: 1.25rem;
font-style: italic;
position: relative;
z-index: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 0.75rem;
}
.testimonial-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--tint);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
color: var(--primary);
flex-shrink: 0;
}
.testimonial-name {
font-size: 0.82rem;
font-weight: 700;
color: var(--dark);
line-height: 1.2;
}
.testimonial-meta {
font-size: 0.72rem;
color: var(--muted);
}
/* ── NEU B: COMPARISON TOGGLE ──────────────── */
.comparison-toggle {
border: 1px solid var(--border);
border-radius: 16px;
background: white;
overflow: hidden;
}
.comparison-toggle-header {
display: grid;
grid-template-columns: 140px 1fr 1fr 1fr;
border-bottom: 1px solid var(--border);
}
.ct-col-head {
padding: 1rem 1.25rem;
text-align: center;
font-size: 0.78rem;
font-weight: 700;
color: var(--muted);
background: var(--bg);
border-right: 1px solid var(--border);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ct-col-head:last-child { border-right: none; }
.ct-col-head.active {
background: var(--primary);
color: white;
}
.ct-row {
display: grid;
grid-template-columns: 140px 1fr 1fr 1fr;
border-bottom: 1px solid var(--border);
}
.ct-row:last-child { border-bottom: none; }
.ct-cell {
padding: 0.85rem 0.75rem;
font-size: 0.83rem;
color: var(--muted);
line-height: 1.5;
border-right: 1px solid var(--border);
word-break: break-word;
}
.ct-cell:last-child { border-right: none; }
.ct-cell-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--dark);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.25rem;
display: block;
word-break: break-word;
hyphens: auto;
}
.ct-row:nth-child(even) .ct-cell { background: var(--bg); }
.ct-cell .ct-yes {
color: var(--primary);
font-weight: 700;
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
}
.ct-cell .ct-no {
color: #c0392b;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
}
/* ── NEU C: FEATURE HIGHLIGHT STRIP ────────── */
.feature-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
background: white;
}
.feature-strip-item {
padding: 1.5rem 1.25rem;
border-right: 1px solid var(--border);
text-align: center;
position: relative;
transition: background 0.2s;
}
.feature-strip-item:last-child { border-right: none; }
.feature-strip-item:hover { background: var(--bg); }
.feature-strip-item::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 0; height: 3px;
background: var(--primary);
border-radius: 3px 3px 0 0;
transition: width 0.25s;
}
.feature-strip-item:hover::after { width: 40%; }
.fsi-icon {
width: 40px;
height: 40px;
background: var(--tint);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem;
}
.fsi-value {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.35rem;
color: var(--dark);
display: block;
line-height: 1.1;
margin-bottom: 0.2rem;
}
.fsi-label {
font-size: 0.72rem;
color: var(--muted);
line-height: 1.4;
}
/* ── NEU D: PROFILE SELECTOR ────────────────── */
.profile-selector {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.profile-item {
border: 1px solid var(--border);
border-radius: 14px;
background: white;
overflow: hidden;
transition: border-color 0.2s;
cursor: pointer;
}
.profile-item:hover { border-color: rgba(13,158,138,0.5); }
.profile-item.open { border-color: var(--primary); }
.profile-header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
}
.profile-icon-bg {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--tint);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s;
}
.profile-item.open .profile-icon-bg { background: var(--primary); }
.profile-item.open .profile-icon-bg svg { stroke: white; }
.profile-label {
font-size: 0.9rem;
font-weight: 700;
color: var(--dark);
flex: 1;
}
.profile-sub {
font-size: 0.75rem;
color: var(--muted);
}
.profile-arrow {
color: var(--border);
transition: transform 0.2s, color 0.2s;
flex-shrink: 0;
}
.profile-item.open .profile-arrow {
transform: rotate(90deg);
color: var(--primary);
}
.profile-body {
display: none;
padding: 0 1.25rem 1.25rem;
border-top: 1px solid var(--border);
font-size: 0.85rem;
color: var(--muted);
line-height: 1.65;
}
.profile-item.open .profile-body { display: block; }
.profile-body ul {
list-style: none;
margin-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.profile-body ul li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.82rem;
}
.profile-body ul li::before {
content: '→';
color: var(--primary);
font-size: 0.78rem;
flex-shrink: 0;
margin-top: 2px;
}
/* ── NEU E: RISK INDICATOR CARD ─────────────── */
.risk-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.risk-card {
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.5rem;
background: white;
transition: transform 0.2s, border-color 0.2s;
}
.risk-card:hover {
transform: translateY(-3px);
border-color: rgba(13,158,138,0.4);
}
.risk-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.risk-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--dark);
}
.risk-badge {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.25rem 0.65rem;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
}
.risk-badge.high { background: #fff0f0; color: #c0392b; }
.risk-badge.medium { background: #fff8ed; color: #b07d00; }
.risk-badge.low { background: var(--tint); color: var(--primary); }
.risk-bar-wrap {
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.75rem;
}
.risk-bar {
height: 100%;
border-radius: 3px;
transition: width 1s ease;
}
.risk-bar.high { background: #e74c3c; width: 85%; }
.risk-bar.medium { background: var(--stars); width: 50%; }
.risk-bar.low { background: var(--primary); width: 20%; }
.risk-desc {
font-size: 0.78rem;
color: var(--muted);
line-height: 1.55;
}
/* ── NEU F: STICKY CONVERSION BAR ───────────── */
.sticky-bar {
position: sticky;
bottom: 0;
left: 0; right: 0;
background: white;
border-top: 1px solid var(--border);
padding: 0.85rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
box-shadow: 0 -4px 24px rgba(26,46,45,0.08);
z-index: 50;
border-radius: 16px 16px 0 0;
}
.sticky-bar-text {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.sticky-bar-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--dark);
}
.sticky-bar-sub {
font-size: 0.72rem;
color: var(--muted);
}
.sticky-bar-actions {
display: flex;
gap: 0.65rem;
align-items: center;
flex-shrink: 0;
}
.sticky-bar .btn-primary {
font-size: 0.85rem;
padding: 0.75rem 1.5rem;
}
.sticky-bar .btn-ghost {
font-size: 0.82rem;
padding: 0.7rem 1.25rem;
}
.sticky-bar-trust {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
color: var(--muted);
flex-shrink: 0;
}
.sticky-bar-trust span { color: var(--stars); font-size: 0.78rem; }
/* RESPONSIVE */
@media (max-width: 680px) {
.audience-grid, .steps-grid, .provider-grid,
.stat-grid, .feature-strip, .testimonial-grid,
.underwriting-grid, .risk-grid { grid-template-columns: 1fr; }
.price-grid { grid-template-columns: 1fr; }
.comparison-toggle-header, .ct-row { grid-template-columns: 1fr; }
.tip-box, .callout-box { flex-direction: column; gap: 1rem; }
.sticky-bar { flex-direction: column; align-items: flex-start; }
.sticky-bar-actions { width: 100%; }
.sticky-bar .btn-primary, .sticky-bar .btn-ghost { flex: 1; text-align: center; }
}
/* VERGLEICHSTABELLE */
.vt-wrap { overflow-x: auto; }
.vt {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
background: white;
min-width: 580px;
}
.vt thead tr th {
background: white;
padding: 1rem 0.85rem;
text-align: center;
vertical-align: middle;
border-right: 1px solid var(--border);
border-bottom: 2px solid var(--border);
}
.vt thead tr th:last-child { border-right: none; }
.vt thead tr th:first-child { text-align: left; width: 28%; }
.vt-logo-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.vt-logo-cell img {
height: 28px;
width: auto;
max-width: 90px;
object-fit: contain;
}
.vt-logo-cell .vt-tag {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--tint);
color: var(--primary);
padding: 2px 8px;
border-radius: 20px;
white-space: nowrap;
}
.vt-section-row td {
background: var(--bg);
padding: 0.45rem 0.85rem;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--primary);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.vt tbody tr td {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
font-size: 0.8rem;
color: var(--muted);
text-align: center;
vertical-align: middle;
line-height: 1.4;
}
.vt tbody tr td:first-child {
text-align: left;
font-size: 0.78rem;
font-weight: 600;
color: var(--dark);
background: var(--bg);
}
.vt tbody tr td:last-child { border-right: none; }
.vt tbody tr:last-child td { border-bottom: none; }
.vt tbody tr:hover td { background: #f0faf8; }
.vt tbody tr:hover td:first-child { background: #e8f7f4; }
.vt-yes {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
background: var(--tint);
border-radius: 50%;
}
.vt-yes svg { width: 10px; height: 10px; }
.vt-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
background: #fff0f0;
border-radius: 50%;
}
.vt-no svg { width: 10px; height: 10px; }
.vt-part {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
background: #fff8ed;
border-radius: 50%;
}
.vt-part svg { width: 10px; height: 10px; }
.vt-highlight td { background: #f0fdf9 \!important; }
.vt-price {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1rem;
color: var(--dark);
display: block;
}
.vt-price-sub { font-size: 9px; color: var(--muted); display: block; margin-top: 1px; }
/* STICKY BAR */
.sticky-bar {
background: white;
border: 1px solid var(--border);
border-radius: 14px;
padding: 0.85rem 1.5rem;
display: flex;
align-items: center;
gap: 1.25rem;
box-shadow: 0 -2px 16px rgba(26,46,45,0.06);
}
.sb-div { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
.sb-google { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; flex-shrink: 0; }
.sb-score { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.05rem; color: var(--dark); line-height: 1; }
.sb-stars { display: flex; gap: 1px; margin-top: 1px; }
.sb-stars svg { width: 9px; height: 9px; }
.sb-count { font-size: 0.65rem; color: var(--muted); margin-top: 1px; }
.sb-claim { flex: 1; line-height: 1.45; }
.sb-claim strong { font-size: 0.88rem; color: var(--dark); display: block; margin-bottom: 3px; }
.sb-usps { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sb-usp { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--muted); }
.sb-usp::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.sb-btn-primary {
font-family: 'Inter', -apple-system, sans-serif;
background: var(--primary);
color: white;
font-size: 0.83rem;
font-weight: 700;
border-radius: 10px;
padding: 0.68rem 1.35rem;
text-decoration: none;
white-space: nowrap;
border: none;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
.sb-btn-primary:hover { background: var(--hover); }
/* ═══════════════════════════════════════════════
VERGLEICHSTABELLEN — zwei Typen
TYP 1: Versicherer-Vergleich (tarifunabhängig)
Nur Merkmale die für den Versicherer gelten,
unabhängig vom gewählten Tarif:
Höchsteintrittsalter, USA ja/nein, Direktabrechnung,
Moratorium, Anwartschaft, Rechtsgrundlage, Kündigung.
NIEMALS: Jahreshöchstbetrag, Leistungsgrenzen,
Wartezeiten, Mental Health — das sind Tarif-Merkmale.
TYP 2: Tarif-Vergleich (explizit tarif-bezogen)
Header-Zeile macht Basis klar:
z.B. "Verglichen: mittleres Niveau, Stationär \+ Ambulant"
Dann: Jahreshöchstbetrag, Preis nach Alter,
Wartezeiten, Leistungsgrenzen etc.
Logos mit Tag der den verglichenen Tarif nennt.
Beide Typen:
- Tabellen-Header: background white, Logos ohne Filter
- vt-tag: background var(--tint), color var(--primary)
- Logos: height 28px, kein filter
═══════════════════════════════════════════════ */
/* SILO-LINK-BLOCK */
.silo-pillar {
display: flex;
align-items: center;
gap: .6rem;
padding: .75rem 1rem;
background: var(--tint);
border: 1px solid rgba(13,158,138,.2);
border-radius: 10px;
text-decoration: none;
margin-bottom: 1rem;
transition: background .15s;
}
.silo-pillar:hover { background: #d4f5ef; }
.silo-pillar-icon {
width: 28px; height: 28px;
background: var(--primary);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.silo-pillar-icon svg { width: 13px; height: 13px; }
.silo-pillar-label {
font-size: .65rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--primary); display: block; margin-bottom: 1px;
}
.silo-pillar-title { font-size: .82rem; font-weight: 600; color: var(--dark); }
.silo-pillar-arrow { margin-left: auto; color: var(--primary); flex-shrink: 0; }
.silo-label {
font-size: .62rem; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase;
color: var(--muted); margin-bottom: .6rem; display: block;
}
.silo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .75rem;
}
.silo-card {
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
background: white;
text-decoration: none;
display: flex; flex-direction: column; gap: .35rem;
transition: transform .15s, border-color .15s;
}
.silo-card:hover { transform: translateY(-2px); border-color: rgba(13,158,138,.45); }
.silo-card-eyebrow {
font-size: .6rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--primary);
}
.silo-card-title { font-size: .82rem; font-weight: 700; color: var(--dark); line-height: 1.3; }
.silo-card-desc { font-size: .72rem; color: var(--muted); line-height: 1.45; margin-top: 1px; }
.silo-card-link {
font-size: .7rem; font-weight: 700;
color: var(--primary); margin-top: auto;
padding-top: .35rem;
display: flex; align-items: center; gap: 3px;
}
/* ── NEU G: AUTHOR BOX ─────────────────────────── */
/* Kompakt \+ ausklappbar. Reusable Block ref:37878 */
/* Position: nach Hero, vor Press Bar */
/* Schema: Person \+ Article — einmal pro Seite */
.ins-author-card {
border: 1px solid var(--border);
border-radius: 14px;
background: var(--bg);
overflow: hidden;
transition: border-color 0.2s;
}
.ins-author-card:hover { border-color: rgba(13,158,138,0.45); }
.ins-author-top {
display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem;
}
.ins-author-avatar {
width: 48px; height: 48px; border-radius: 50%;
object-fit: cover; flex-shrink: 0; border: 2px solid var(--tint);
}
.ins-author-main { flex: 1; min-width: 0; }
.ins-author-eyebrow {
font-size: 0.58rem; font-weight: 700; letter-spacing: 0.13em;
text-transform: uppercase; color: var(--primary); display: block; margin-bottom: 2px;
}
.ins-author-name {
font-size: 0.88rem; font-weight: 700; color: var(--dark);
text-decoration: none; display: block; margin-bottom: 2px; transition: color 0.2s;
}
.ins-author-name:hover { color: var(--primary); }
.ins-author-title { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.ins-author-right {
display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex-shrink: 0;
}
.ins-author-date { font-size: 0.65rem; color: var(--muted); text-align: right; line-height: 1.35; }
.ins-author-date span {
display: block; font-size: 0.58rem; text-transform: uppercase;
letter-spacing: 0.08em; color: rgba(74,99,96,0.55);
}
.ins-author-toggle {
background: none; border: none; cursor: pointer;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.68rem; font-weight: 600; color: var(--primary);
display: flex; align-items: center; gap: 0.3rem; padding: 0; white-space: nowrap;
transition: color 0.2s;
}
.ins-author-toggle:hover { color: var(--hover); }
.ins-author-chevron { transition: transform 0.25s; flex-shrink: 0; }
.ins-author-expanded { display: none; border-top: 1px solid var(--tint); }
.ins-open .ins-author-expanded { display: block; }
.ins-open .ins-author-chevron { transform: rotate(180deg); }
.ins-author-bio {
padding: 0.9rem 1.1rem; font-size: 0.83rem;
line-height: 1.7; color: var(--muted); border-bottom: 1px solid var(--tint);
}
/* in der Author-Bio nicht visuell hervorheben — Bio soll als
ruhiger Fließtext wirken, keine fetten Pop-Wörter. Semantik bleibt. */
.ins-author-bio strong { font-weight: inherit; color: inherit; }
.ins-author-tags {
display: flex; flex-wrap: wrap; gap: 0.35rem;
padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--tint);
}
.ins-author-tag {
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--primary); background: var(--tint); border-radius: 20px; padding: 0.18rem 0.6rem;
}
.ins-author-links { display: flex; gap: 0.5rem; padding: 0.75rem 1.1rem; flex-wrap: wrap; }
.ins-author-link {
display: inline-flex; align-items: center; gap: 0.3rem;
font-size: 0.68rem; font-weight: 600; color: var(--primary);
text-decoration: none; border: 1px solid rgba(13,158,138,0.3);
border-radius: 20px; padding: 0.22rem 0.65rem; transition: background 0.2s, border-color 0.2s;
}
.ins-author-link:hover { background: var(--tint); border-color: var(--primary); }
@media (max-width: 480px) { .ins-author-right { display: none; } }
/* ── NEU H: AI SUMMARY BAR ──────────────────────── */
/* Reusable Block ref:37880 */
/* Position 5 — nach Inhaltsverzeichnis */
/* Prompts pro Plattform auf Deutsch */
/* Alle Links: rel="noopener noreferrer nofollow" */
.ins-ai-wrap {
border: 1px solid var(--border); border-radius: 14px; background: var(--bg);
padding: 0.9rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.ins-ai-label {
font-size: 0.72rem; font-weight: 700; color: var(--muted);
white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem;
}
.ins-ai-buttons { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.ins-ai-btn {
display: inline-flex; align-items: center; gap: 0.35rem;
font-size: 0.72rem; font-weight: 600; color: var(--dark);
text-decoration: none; background: white; border: 1px solid var(--border);
border-radius: 8px; padding: 0.32rem 0.7rem;
transition: border-color 0.2s, background 0.2s, color 0.2s; white-space: nowrap;
}
.ins-ai-btn:hover { border-color: var(--primary); background: var(--tint); color: var(--primary); }
.ins-ai-btn img { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
/* ═══════════════════════════════════════════════
NEW COMPONENTS — comparison_table, process_timeline,
callout_box, icon_list, expandable_sections
═══════════════════════════════════════════════ */
/* COMPARISON TABLE — Flat-Grid mit Kriterium-Zeilen zwischen
Row-Paaren. Ruhige editorial Ausführung, harmonisch mit callout_box
/ hero-stats / key_takeaways. Border ohne Shadow, Kriterium als
hairline-unterstützte Caption ohne Tint-Background, Icons als
tint-Kreise mit farbigen Glyphs (kein SaaS-Ampel-Stil). */
.seo-tool-landing .comparison-table {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 0;
row-gap: 0;
margin-top: 2rem;
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
}
@media (max-width: 720px) {
.seo-tool-landing .comparison-table { grid-template-columns: 1fr; }
}
/* Header-Row */
.seo-tool-landing .comparison-col-header {
padding: 1.5rem 1.75rem 1.2rem;
background: #fff;
}
.seo-tool-landing .comparison-col-header--a {
grid-column: 1;
border-right: 1px solid var(--border);
}
.seo-tool-landing .comparison-col-header--b {
grid-column: 2;
}
@media (max-width: 720px) {
.seo-tool-landing .comparison-col-header--a,
.seo-tool-landing .comparison-col-header--b {
grid-column: 1;
border-right: 0;
}
}
.seo-tool-landing .comparison-col-title {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--dark);
line-height: 1.2;
margin: 0;
}
.seo-tool-landing .comparison-col-tagline {
font-size: 0.86rem;
color: var(--muted);
margin-top: 0.4rem;
line-height: 1.5;
}
/* Kriterium-Caption: full-width, kein Background, nur hairline +
tracked Small-Caps. Minimal ornamental Dash als Scan-Anker, primary-
Akzent aber gedeckt. Harmoniert mit den eyebrow-Styles anderer
Komponenten. */
.seo-tool-landing .comparison-criterion {
grid-column: 1 / -1;
padding: 1.1rem 1.75rem 0.3rem;
background: transparent;
border-top: 1px solid var(--border);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary);
display: flex;
align-items: center;
gap: 0.7rem;
line-height: 1.3;
}
.seo-tool-landing .comparison-criterion::before {
content: "";
width: 14px; height: 1px;
background: var(--primary);
flex-shrink: 0;
}
/* Cells: A links, B rechts, gemeinsame Row-Höhe via auto-sized grid row */
.seo-tool-landing .comparison-cell {
padding: 0.7rem 1.75rem 1.1rem;
background: #fff;
display: flex;
gap: 0.85rem;
align-items: flex-start;
font-size: 0.93rem;
line-height: 1.55;
color: var(--dark);
}
.seo-tool-landing .comparison-cell--a {
grid-column: 1;
border-right: 1px solid var(--border);
}
.seo-tool-landing .comparison-cell--b {
grid-column: 2;
}
.seo-tool-landing .comparison-cell--empty {
padding: 0;
min-height: 0;
}
@media (max-width: 720px) {
.seo-tool-landing .comparison-cell--a,
.seo-tool-landing .comparison-cell--b {
grid-column: 1;
border-right: 0;
}
.seo-tool-landing .comparison-cell--empty { display: none; }
}
.seo-tool-landing .comparison-item-label { flex: 1; min-width: 0; }
.seo-tool-landing .comparison-icon {
flex-shrink: 0;
width: 24px; height: 24px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
margin-top: 0;
}
.seo-tool-landing .comparison-icon .ins-icon {
width: 13px; height: 13px; stroke-width: 2.4;
}
/* Icons: tint-backgrounds mit farbigen Glyphs — konsistent mit
callout_box/audience_cards-Pattern. Kinds differenzieren durch
Tint-Hue und Glyph-Color, nicht durch Solid-Fill-Brutalität. */
.seo-tool-landing .comparison-cell--pro .comparison-icon {
background: var(--tint);
color: var(--primary);
}
.seo-tool-landing .comparison-cell--con .comparison-icon {
background: rgba(180,35,24,0.10);
color: #b42318;
}
.seo-tool-landing .comparison-cell--neutral .comparison-icon {
background: rgba(245,166,35,0.16);
color: #a87315;
}
/* Footer: tinted Recommendation-Strip pro Spalte */
.seo-tool-landing .comparison-col-footer {
padding: 1.1rem 1.75rem 1.3rem;
background: var(--tint);
border-top: 1px solid rgba(13,158,138,0.2);
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.seo-tool-landing .comparison-col-footer--a {
grid-column: 1;
border-right: 1px solid var(--border);
}
.seo-tool-landing .comparison-col-footer--b {
grid-column: 2;
}
@media (max-width: 720px) {
.seo-tool-landing .comparison-col-footer--a,
.seo-tool-landing .comparison-col-footer--b {
grid-column: 1;
border-right: 0;
}
}
.seo-tool-landing .comparison-col-footer {
padding: 1.2rem 1.75rem 1.4rem;
}
.seo-tool-landing .comparison-col-footer-label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 0.25rem;
}
.seo-tool-landing .comparison-col-footer-icon {
display: inline-flex;
color: var(--primary);
}
.seo-tool-landing .comparison-col-footer-icon .ins-icon {
width: 13px; height: 13px;
}
/* Legacy single-paragraph Fallback */
.seo-tool-landing .comparison-col-footer-text {
font-size: 0.92rem;
line-height: 1.55;
color: var(--dark);
margin: 0;
}
/* Points-List: scanbare Bedingungen mit em-dash Prefix (editorial,
differenziert von den row-Icons oben). Größere Schrift als legacy,
damit die Konditionen als Kernaussage lesbar sind. */
.seo-tool-landing .comparison-col-footer-points {
list-style: none;
padding: 0;
margin: 0 0 0.25rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.seo-tool-landing .comparison-col-footer-point {
position: relative;
padding-left: 1.3rem;
font-size: 0.94rem;
line-height: 1.5;
color: var(--dark);
margin: 0 !important;
}
.seo-tool-landing .comparison-col-footer-point::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 0.7rem;
height: 1px;
background: var(--primary);
}
/* CTA: inline-Link, primary-colored, arrow schiebt bei hover */
.seo-tool-landing .comparison-col-footer-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.95rem;
padding: 0.55rem 1.1rem 0.6rem;
background: var(--primary);
color: #fff;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
align-self: flex-start;
transition: background 0.18s, transform 0.18s;
}
.seo-tool-landing .comparison-col-footer-cta:hover {
background: var(--primary-dark, #077568);
color: #fff;
text-decoration: none;
}
.seo-tool-landing .comparison-col-footer-cta-arrow {
display: inline-block;
transition: transform 0.18s;
font-weight: 500;
}
.seo-tool-landing .comparison-col-footer-cta:hover .comparison-col-footer-cta-arrow {
transform: translateX(3px);
}
@media (max-width: 640px) {
.seo-tool-landing .comparison-col-header { padding: 1.25rem 1.25rem 1rem; }
.seo-tool-landing .comparison-col-footer { padding: 1rem 1.25rem 1.25rem; }
.seo-tool-landing .comparison-col-title { font-size: 1.2rem; }
.seo-tool-landing .comparison-col-footer-point { font-size: 0.9rem; }
}
/* PROCESS TIMELINE — vertikal nummeriert */
.seo-tool-landing .process-timeline {
list-style: none; padding: 0; margin: 2rem 0 0 0;
position: relative;
display: flex; flex-direction: column; gap: 1.5rem;
}
.seo-tool-landing .process-timeline::before {
content: ""; position: absolute; left: 18px; top: 18px; bottom: 18px;
width: 2px; background: linear-gradient(to bottom, var(--primary), var(--border));
}
.seo-tool-landing .timeline-step { display: flex; gap: 1.1rem; align-items: flex-start; position: relative; }
.seo-tool-landing .timeline-number {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--primary); color: white;
display: inline-flex; align-items: center; justify-content: center;
font-family: 'DM Serif Display', Georgia, serif; font-size: 1.1rem;
position: relative; z-index: 1;
}
.seo-tool-landing .timeline-body { flex: 1; padding-top: 0.4rem; }
.seo-tool-landing .timeline-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.seo-tool-landing .timeline-title { font-size: 1.05rem; font-weight: 700; color: var(--dark); }
.seo-tool-landing .timeline-duration { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); background: var(--tint); padding: 0.15rem 0.6rem; border-radius: 6px; font-weight: 700; }
.seo-tool-landing .timeline-desc { font-size: 0.92rem; line-height: 1.65; color: var(--muted); }
/* CALLOUT BOX — Tip/Warning/Info */
.seo-tool-landing .callout-box {
border-radius: 14px; padding: 1.5rem 1.75rem;
border-left: 4px solid var(--primary);
display: flex; flex-direction: column; gap: 0.6rem;
}
/* ═══════════════════════════════════════════════
AUTHOR CARD — Autor-Box mit aufklappbarem Bio-Teil
(E-E-A-T-Signal). /-Struktur,
native Toggle-Logik ohne JS.
═══════════════════════════════════════════════ */
.seo-tool-landing .ins-author-card {
margin: 2.5rem 2rem;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--bg);
overflow: hidden;
transition: border-color 0.2s;
}
.seo-tool-landing .ins-author-card:hover { border-color: rgba(13,158,138,0.45); }
.seo-tool-landing .ins-author-top {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.9rem 1.1rem;
cursor: pointer;
list-style: none;
user-select: none;
}
.seo-tool-landing .ins-author-top::-webkit-details-marker { display: none; }
.seo-tool-landing .ins-author-top::marker { content: ""; }
.seo-tool-landing .ins-author-top:hover { background: rgba(13,158,138,0.04); }
.seo-tool-landing .ins-author-avatar {
width: 72px; height: 72px;
border-radius: 50%;
background: var(--primary);
color: white;
display: flex; align-items: center; justify-content: center;
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.6rem;
flex-shrink: 0;
border: 2px solid var(--tint);
object-fit: cover;
}
.seo-tool-landing .ins-author-avatar--photo {
padding: 0;
background: var(--tint);
}
.seo-tool-landing .ins-author-main { flex: 1; min-width: 0; }
.seo-tool-landing .ins-author-eyebrow {
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--primary);
display: block;
margin-bottom: 2px;
}
.seo-tool-landing .ins-author-name {
font-size: 0.88rem;
font-weight: 700;
color: var(--dark);
text-decoration: none;
display: block;
margin-bottom: 2px;
}
a.ins-author-name:hover { color: var(--primary); }
.seo-tool-landing .ins-author-title { font-size: 0.72rem; color: var(--muted); line-height: 1.4; margin-bottom: 0.25rem; }
/* Published / Updated Daten horizontal in derselben Zeile */
.seo-tool-landing .ins-author-dates {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.75rem;
font-size: 0.66rem;
line-height: 1.3;
color: var(--muted);
margin-top: 0.15rem;
}
.seo-tool-landing .ins-author-date-item { white-space: nowrap; }
.seo-tool-landing .ins-author-date-label {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: rgba(74,99,96,0.65);
}
/* "Aktualisiert"-Datum dezent in Primary-Tint — SEO-Signal "frisch",
aber NICHT fett (war zu viel Noise neben dem Label). */
.seo-tool-landing .ins-author-date-item--updated {
color: var(--primary);
font-weight: 400;
}
.seo-tool-landing .ins-author-date-item--updated .ins-author-date-label {
color: var(--primary);
opacity: 0.8;
}
.seo-tool-landing .ins-author-toggle {
font-size: 0.68rem;
font-weight: 600;
color: var(--primary);
display: flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
}
.seo-tool-landing .ins-author-toggle-label--close { display: none; }
.seo-tool-landing details[open] .ins-author-toggle-label--open { display: none; }
.seo-tool-landing details[open] .ins-author-toggle-label--close { display: inline; }
.seo-tool-landing .ins-author-chevron {
width: 7px; height: 7px;
border-right: 1.5px solid var(--primary);
border-bottom: 1.5px solid var(--primary);
transform: rotate(45deg);
transition: transform 0.22s ease;
margin-bottom: 2px;
flex-shrink: 0;
}
.seo-tool-landing details[open] .ins-author-chevron {
transform: rotate(-135deg);
margin-bottom: -2px;
}
/* Explicit display-toggle gegen Theme-Interferenz */
.seo-tool-landing .ins-author-expanded {
display: none;
border-top: 1px solid var(--tint);
}
.seo-tool-landing details.ins-author-card[open] .ins-author-expanded { display: block; }
.seo-tool-landing .ins-author-bio {
padding: 0.9rem 1.1rem;
font-size: 0.83rem;
line-height: 1.7;
color: var(--muted);
border-bottom: 1px solid var(--tint);
}
/* im Bio bewusst visuell neutral halten — Bio bleibt ruhiger
Prose-Block, Fett-Akzente gehören in Article-Content, nicht in Author-Info. */
.seo-tool-landing .ins-author-bio strong { font-weight: inherit; color: inherit; }
.seo-tool-landing .ins-author-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding: 0.75rem 1.1rem;
border-bottom: 1px solid var(--tint);
}
.seo-tool-landing .ins-author-tag {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary);
background: var(--tint);
border-radius: 20px;
padding: 0.18rem 0.6rem;
}
.seo-tool-landing .ins-author-links { display: flex; gap: 0.5rem; padding: 0.75rem 1.1rem; flex-wrap: wrap; }
.seo-tool-landing .ins-author-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.68rem;
font-weight: 600;
color: var(--primary);
text-decoration: none;
border: 1px solid rgba(13,158,138,0.3);
border-radius: 20px;
padding: 0.22rem 0.65rem;
transition: background 0.2s, border-color 0.2s;
}
.seo-tool-landing .ins-author-link:hover { background: var(--tint); border-color: var(--primary); }
/* Icon-Variante: quadratischer Button, Icon only */
.seo-tool-landing .ins-author-link--icon {
padding: 0.3rem 0.4rem;
min-width: 1.8rem;
justify-content: center;
}
.seo-tool-landing .ins-author-link--icon .ins-icon {
width: 14px; height: 14px;
}
@media (max-width: 480px) {
.seo-tool-landing .ins-author-right .ins-author-date { display: none; }
.seo-tool-landing .ins-author-card { margin: 2rem 1rem; }
}
/* ═══════════════════════════════════════════════
TRUST BAR — Rounded-Card mit "Bekannt aus" + Logos + Rating-Pills
Design-Ref: /test/ — white Card, border, gap 2.25rem
═══════════════════════════════════════════════ */
.seo-tool-landing .ins-trust-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.75rem;
padding: 1.1rem 1.75rem;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--white);
margin: 2.5rem 2rem;
flex-wrap: wrap;
}
.seo-tool-landing .ins-trust-press {
display: flex;
align-items: center;
gap: 2.25rem;
flex: 1 1 auto;
min-width: 0;
flex-wrap: wrap;
}
.seo-tool-landing .ins-trust-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
flex-shrink: 0;
white-space: nowrap;
text-decoration: none;
transition: color 0.2s;
}
a.ins-trust-label:hover { color: var(--primary); }
.seo-tool-landing .ins-trust-logos {
display: flex;
align-items: center;
justify-content: space-evenly;
flex: 1;
gap: 1rem;
flex-wrap: wrap;
}
.seo-tool-landing .ins-trust-logo {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 0.88rem;
color: var(--muted);
opacity: 0.5;
filter: grayscale(100%);
text-decoration: none;
transition: opacity 0.2s, filter 0.2s;
}
.seo-tool-landing .ins-trust-logo:hover { opacity: 1; filter: grayscale(0%); }
.seo-tool-landing .ins-trust-logo img {
display: block;
height: 22px;
width: auto;
max-width: 130px;
object-fit: contain;
}
/* ═══════════════════════════════════════════════
RATING BADGES — prominente Social-Proof-Cards
Platziert vor dem finalen CTA (Baymard: +12-20% Conversion-Uplift)
═══════════════════════════════════════════════ */
.seo-tool-landing .ins-rating-badges {
padding: 3rem 2rem;
text-align: center;
}
.seo-tool-landing .ins-rating-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
margin-top: 2rem;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.seo-tool-landing .ins-rating-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
padding: 2rem 1.75rem;
background: var(--white);
border: 1px solid var(--border);
border-radius: 18px;
text-decoration: none;
color: var(--dark);
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
a.ins-rating-card:hover {
border-color: var(--primary);
transform: translateY(-4px);
box-shadow: 0 18px 44px -22px rgba(13,158,138,0.35);
}
.seo-tool-landing .ins-rating-stars {
color: var(--stars);
font-size: 1.4rem;
letter-spacing: 0.12em;
line-height: 1;
margin-bottom: 0.3rem;
}
.seo-tool-landing .ins-rating-score {
font-family: 'DM Serif Display', Georgia, serif;
line-height: 1;
}
.seo-tool-landing .ins-rating-score strong {
font-size: 2.6rem;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
}
.seo-tool-landing .ins-rating-max {
font-size: 1.1rem;
color: var(--muted);
margin-left: 0.1rem;
}
.seo-tool-landing .ins-rating-platform {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: 0.15rem;
}
.seo-tool-landing .ins-rating-count {
font-size: 0.82rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.seo-tool-landing .ins-rating-cta {
margin-top: 0.7rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--primary);
border-bottom: 1px solid rgba(13,158,138,0.3);
padding-bottom: 1px;
transition: border-color 0.2s;
}
a.ins-rating-card:hover .ins-rating-cta {
border-bottom-color: var(--primary);
}
@media (max-width: 640px) {
.seo-tool-landing .ins-trust-bar { margin: 2rem 1rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
/* Page-weite Warn-Akzente: kritischer Begriff — sparsam (max 2-3 pro Page)
nur für wirklich wichtige Hinweise. Kein Background — nur Stars-Farbe + bold. */
.seo-tool-landing mark {
background: transparent;
color: var(--stars);
font-weight: 700;
padding: 0;
}
.seo-tool-landing .callout-box--tip { background: var(--tint); border-color: var(--primary); }
.seo-tool-landing .callout-box--warning { background: #fff8ed; border-color: var(--stars); border-left-width: 4px; }
/* Info nutzt dieselbe Tint+Primary-Palette wie tip — satter Brand-Look.
Unterscheidung zum Tip läuft rein über Icon (info-i vs. lightbulb) und
Titel. Warning bleibt die einzige farblich distinkte Variante (amber). */
.seo-tool-landing .callout-box--info { background: var(--tint); border-color: var(--primary); }
.seo-tool-landing .callout-head { display: flex; align-items: center; gap: 0.6rem; }
.seo-tool-landing .callout-icon { font-size: 1.25rem; line-height: 1; display: inline-flex; }
.seo-tool-landing .callout-icon .ins-icon { width: 20px; height: 20px; }
.seo-tool-landing .callout-box--warning .callout-icon { color: var(--stars); }
.seo-tool-landing .callout-box--tip .callout-icon { color: var(--primary); }
.seo-tool-landing .callout-box--info .callout-icon { color: var(--primary); }
.seo-tool-landing .callout-title { font-size: 1rem; font-weight: 700; color: var(--dark); }
.seo-tool-landing .callout-body { font-size: 0.92rem; line-height: 1.65; color: var(--dark); }
.seo-tool-landing .callout-body p { margin: 0 0 0.5rem 0; }
.seo-tool-landing .callout-body p:last-child { margin-bottom: 0; }
/* Sparsame Wort-Highlights in Warnings: → stars-Farbe + bold, kein italic */
.seo-tool-landing .callout-box--warning .callout-body em {
font-style: normal;
font-weight: 700;
color: var(--stars);
}
/* In tips und info: em bleibt italic Primary (wie Headline-Akzent) */
.seo-tool-landing .callout-box--tip .callout-body em,
.seo-tool-landing .callout-box--info .callout-body em {
font-style: italic;
color: var(--primary);
}
/* ICON LIST — scanbare feature/benefit list */
.seo-tool-landing .icon-list { list-style: none; padding: 0; margin: 2rem 0 0 0; display: grid; gap: 1.1rem 1.75rem; }
.seo-tool-landing .icon-list--cols-1 { grid-template-columns: 1fr; }
.seo-tool-landing .icon-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.seo-tool-landing .icon-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
.seo-tool-landing .icon-list--cols-2,
.seo-tool-landing .icon-list--cols-3 { grid-template-columns: 1fr; }
}
/* margin: 0 hart geforced — WP-Theme setzt li-Defaults (margin-top) die das
Grid-Gap überlagern und rechte Spalte minimal nach unten schieben. */
.seo-tool-landing .icon-list-item {
display: flex;
gap: 0.85rem;
align-items: flex-start;
margin: 0 !important;
padding: 0 !important;
}
.seo-tool-landing .icon-list-icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 8px;
background: var(--tint); color: var(--primary);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem; font-weight: 700;
}
.seo-tool-landing .icon-list-body { display: flex; flex-direction: column; gap: 0.25rem; }
.seo-tool-landing .icon-list-label { font-size: 0.95rem; font-weight: 700; color: var(--dark); }
.seo-tool-landing .icon-list-desc { font-size: 0.85rem; line-height: 1.55; color: var(--muted); }
/* EXPANDABLE SECTIONS — deep-dive accordion */
.seo-tool-landing .expandable-sections { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.seo-tool-landing .expandable-section {
background: var(--white);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.2s, border-color 0.2s;
}
.seo-tool-landing .expandable-section[open] { border-color: var(--primary); box-shadow: 0 6px 18px -10px rgba(13,158,138,0.25); }
.seo-tool-landing .expandable-head {
cursor: pointer; list-style: none;
padding: 1.25rem 1.5rem;
display: flex; flex-direction: column; gap: 0.35rem;
position: relative;
}
.seo-tool-landing .expandable-head::-webkit-details-marker { display: none; }
.seo-tool-landing .expandable-head::after {
content: "+";
position: absolute; right: 1.5rem; top: 1.25rem;
font-size: 1.5rem; color: var(--primary); font-weight: 300; line-height: 1;
transition: transform 0.2s;
}
.seo-tool-landing .expandable-section[open] .expandable-head::after { content: "−"; }
.seo-tool-landing .expandable-title { font-size: 1.05rem; font-weight: 700; color: var(--dark); padding-right: 2rem; }
.seo-tool-landing .expandable-summary { font-size: 0.88rem; line-height: 1.55; color: var(--muted); padding-right: 2rem; }
.seo-tool-landing .expandable-body { padding: 0 1.5rem 1.5rem 1.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.seo-tool-landing .expandable-body .ins-body { margin-bottom: 0.9rem; }
.seo-tool-landing .expandable-body .ins-body:last-child { margin-bottom: 0; }
.seo-tool-landing .expandable-bullets { margin: 0.75rem 0 0 1.25rem; padding: 0; color: var(--dark); font-size: 0.92rem; line-height: 1.65; }
.seo-tool-landing .expandable-bullets li { margin-bottom: 0.4rem; }
/* ═══════════════════════════════════════════════
ICON-UTILITY — für
═══════════════════════════════════════════════ */
.seo-tool-landing .ins-icon {
width: 1em;
height: 1em;
flex-shrink: 0;
display: inline-block;
vertical-align: -0.15em;
}
/* Icons innerhalb bestehender Icon-Container füllen die volle Box aus */
.seo-tool-landing .icon-circle .ins-icon { width: 24px; height: 24px; color: var(--primary); }
.seo-tool-landing .icon-list-icon .ins-icon { width: 18px; height: 18px; }
.seo-tool-landing .comparison-icon .ins-icon { width: 13px; height: 13px; }
.seo-tool-landing .callout-icon .ins-icon { width: 22px; height: 22px; }
/* ═══════════════════════════════════════════════
FAQ-REDESIGN — +/- Indicator + Card-Styling konsistent mit expandable_sections
═══════════════════════════════════════════════ */
.seo-tool-landing .faq-accordion { display: flex; flex-direction: column; gap: 0.75rem; }
.seo-tool-landing .faq-item {
background: var(--white);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.seo-tool-landing .faq-item[open] { border-color: var(--primary); box-shadow: 0 6px 18px -10px rgba(13,158,138,0.25); }
.seo-tool-landing .faq-item > summary.faq-question {
cursor: pointer; list-style: none;
padding: 1.1rem 3rem 1.1rem 1.5rem;
font-size: 0.98rem;
font-weight: 700;
color: var(--dark);
position: relative;
line-height: 1.45;
}
.seo-tool-landing .faq-item > summary.faq-question::-webkit-details-marker { display: none; }
.seo-tool-landing .faq-item > summary.faq-question::after {
content: "+";
position: absolute; right: 1.5rem; top: 50%;
transform: translateY(-50%);
font-size: 1.6rem; color: var(--primary); font-weight: 300; line-height: 1;
transition: transform 0.2s;
}
.seo-tool-landing .faq-item[open] > summary.faq-question::after { content: "−"; }
.seo-tool-landing .faq-item > summary.faq-question:hover { background: var(--tint); }
.seo-tool-landing .faq-answer {
padding: 0 1.5rem 1.25rem 1.5rem;
border-top: 1px solid var(--border);
padding-top: 1.1rem;
margin-top: 0;
font-size: 0.92rem;
line-height: 1.65;
color: var(--dark);
}
.seo-tool-landing .faq-answer p { margin-bottom: 0.6rem; }
.seo-tool-landing .faq-answer p:last-child { margin-bottom: 0; }
/* ═══════════════════════════════════════════════
THEME-HARMONIE für Landing-Pages
Gescoped auf body.page-template-full-width — nur Landing-Pages
werden betroffen, restliche Site bleibt unangetastet.
═══════════════════════════════════════════════ */
/* Content-Abstand nach unten zum Footer */
body.page-template-full-width .block-content > .seo-tool-landing {
margin-bottom: 4rem;
}
/* Header: soft border-bottom + sticky-cleaner */
body.page-template-full-width .header {
border-bottom: 1px solid rgba(200, 222, 221, 0.5);
background: rgba(255,255,255,0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
body.page-template-full-width .header a:hover,
body.page-template-full-width .header .menu a:hover {
color: #0d9e8a !important;
}
/* Footer-Background leicht wärmer angleichen, Font-Smoothing */
body.page-template-full-width footer.alignfull {
background: #fafbfb;
border-top: 1px solid rgba(200, 222, 221, 0.6);
-webkit-font-smoothing: antialiased;
padding-top: 3rem;
}
body.page-template-full-width footer a:hover {
color: #0d9e8a !important;
}
/* Headings im Footer/Header werden etwas ruhiger */
body.page-template-full-width footer h1,
body.page-template-full-width footer h2,
body.page-template-full-width footer h3,
body.page-template-full-width footer h4 {
font-family: 'DM Serif Display', Georgia, serif;
font-weight: 700;
letter-spacing: -0.01em;
}
/* ═══════════════════════════════════════════════
AUTO-TOC v4 — kompakt & ruhig, inspiriert von /test/
Schmaler als Content-Container, kleine Typografie,
Counter + dezente Reading-Path nur innerhalb der Sub-Items.
═══════════════════════════════════════════════ */
.seo-tool-landing details.toc {
margin: 3rem 2rem 4rem;
padding: 0;
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
transition: box-shadow 0.2s;
}
.seo-tool-landing details.toc[open] {
box-shadow: 0 10px 26px -20px rgba(26,46,45,0.3);
}
.seo-tool-landing .toc-head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
background: var(--bg);
border-bottom: 1px solid transparent;
cursor: pointer;
user-select: none;
list-style: none;
transition: background 0.15s, border-color 0.15s;
}
.seo-tool-landing .toc-head::-webkit-details-marker { display: none; }
.seo-tool-landing details.toc[open] .toc-head {
border-bottom-color: var(--border);
}
.seo-tool-landing .toc-head:hover { background: var(--tint); }
.seo-tool-landing .toc-icon { color: var(--primary); display: inline-flex; margin-right: 0.2rem; }
.seo-tool-landing .toc-icon .ins-icon { width: 15px; height: 15px; }
.seo-tool-landing .toc-heading {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0;
color: var(--dark);
text-transform: none;
}
.seo-tool-landing .toc-count {
font-size: 0.82rem;
font-weight: 600;
color: var(--primary);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
flex: 1;
}
.seo-tool-landing .toc-toggle {
font-size: 0.72rem;
color: var(--primary);
font-weight: 600;
letter-spacing: 0.02em;
}
.seo-tool-landing .toc-toggle--close { display: none; }
.seo-tool-landing details.toc[open] .toc-toggle--open { display: none; }
.seo-tool-landing details.toc[open] .toc-toggle--close { display: inline; }
.seo-tool-landing .toc-chevron {
width: 7px; height: 7px;
border-right: 1.5px solid var(--primary);
border-bottom: 1.5px solid var(--primary);
transform: rotate(45deg);
transition: transform 0.22s ease;
margin-left: 0.1rem;
margin-bottom: 2px;
}
.seo-tool-landing details.toc[open] .toc-chevron {
transform: rotate(-135deg);
margin-bottom: -2px;
}
/* Liste — kompakt, dünn, counter als leise Markierung */
.seo-tool-landing .toc-list {
list-style: none;
padding: 1.25rem;
margin: 0;
counter-reset: toc;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.seo-tool-landing .toc-item {
counter-increment: toc;
position: relative;
list-style: none;
}
.seo-tool-landing .toc-item::marker { content: ""; }
.seo-tool-landing .toc-link {
display: flex;
align-items: baseline;
gap: 0.7rem;
padding: 0.45rem 0;
font-size: 0.94rem;
font-weight: 500;
line-height: 1.45;
color: var(--dark);
text-decoration: none;
transition: color 0.15s;
}
.seo-tool-landing .toc-link::before {
content: counter(toc, decimal-leading-zero);
font-family: 'Inter', system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-size: 0.62rem;
font-weight: 700;
color: var(--primary);
opacity: 0.4;
letter-spacing: 0.06em;
flex-shrink: 0;
min-width: 1.8ch;
padding-top: 0.25rem;
transition: opacity 0.15s;
}
.seo-tool-landing .toc-label {
flex: 1;
border-bottom: 1px solid transparent;
transition: border-color 0.15s;
}
/* em-Akzente im TOC: neutral (nicht kursiv, nicht grün) — Farb-Clash vermeiden */
.seo-tool-landing .toc-label em {
font-style: normal;
color: inherit;
font-weight: inherit;
}
.seo-tool-landing .toc-link:hover,
.seo-tool-landing .toc-link:focus-visible { outline: none; }
.seo-tool-landing .toc-link:hover .toc-label,
.seo-tool-landing .toc-link:focus-visible .toc-label {
border-bottom-color: var(--primary);
color: var(--primary);
}
.seo-tool-landing .toc-link:hover::before,
.seo-tool-landing .toc-link:focus-visible::before {
opacity: 1;
}
/* Level-2 Sub-Items — dünne vertikale Guide-Line, Connector ::before */
.seo-tool-landing .toc-sublist {
list-style: none;
padding: 0 0 0.3rem 2.5rem;
margin: 0.05rem 0 0.3rem 0;
position: relative;
}
.seo-tool-landing .toc-sublist::before {
content: "";
position: absolute;
left: 2.1rem;
top: 0.4rem;
bottom: 0.6rem;
width: 1px;
background: var(--primary);
opacity: 0.2;
}
.seo-tool-landing .toc-subitem {
position: relative;
padding-left: 0.85rem;
}
.seo-tool-landing .toc-subitem::before {
content: "";
position: absolute;
left: -0.4rem;
top: 0.8rem;
width: 0.65rem;
height: 1px;
background: var(--primary);
opacity: 0.35;
}
.seo-tool-landing .toc-sublink {
display: inline-block;
padding: 0.3rem 0;
font-size: 0.83rem;
line-height: 1.4;
color: var(--muted);
text-decoration: none;
transition: color 0.15s;
border-bottom: 1px solid transparent;
}
.seo-tool-landing .toc-sublink:hover,
.seo-tool-landing .toc-sublink:focus-visible {
color: var(--primary);
border-bottom-color: rgba(13,158,138,0.35);
outline: none;
}
@media (max-width: 640px) {
.seo-tool-landing details.toc { margin: 2rem 1rem 3rem; }
.seo-tool-landing .toc-head { padding: 0.85rem 1.1rem; }
.seo-tool-landing .toc-list { padding: 0.85rem 1.1rem 1rem; }
}
/* H3-Reset in Komponenten-Cards: echte Headings, aber visuell wie zuvor
(bestehende Karten-Styles stylen class, nicht tag). Block bleibt Block,
nur Browser-Default-Margins/Fonts werden zurückgesetzt. */
.seo-tool-landing h3.card-title,
.seo-tool-landing h3.timeline-title,
.seo-tool-landing h3.comparison-col-title,
.seo-tool-landing h3.expandable-title {
font: inherit;
color: inherit;
margin: 0;
padding: 0;
}
/* FAQ-Summary soll einheitlich Inter sein — egal ob das Item als plain
Text oder als gerendert wird (as_heading-Flag). Theme-CSS hat H3-
Rules die `font: inherit` überlaufen wenn keine !important-Gegenwehr
da ist → darum hier defensiv geforced. Gleiches für .faq-answer (damit
/ die Inter-Familie nicht verlieren). */
.seo-tool-landing summary.faq-question,
.seo-tool-landing summary.faq-question h3.faq-question-text,
.seo-tool-landing .faq-answer,
.seo-tool-landing .faq-answer p,
.seo-tool-landing .faq-answer em,
.seo-tool-landing .faq-answer strong {
font-family: 'Inter', system-ui, sans-serif !important;
}
.seo-tool-landing summary.faq-question h3.faq-question-text {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
line-height: inherit !important;
margin: 0 !important;
padding: 0 !important;
display: inline !important;
}
/* Scroll-Offset für fixed Theme-Header — IDs sitzen direkt auf H1/H2/H3,
nicht auf Wrappern. Browser-Native Anchor-Jumps landen damit clean auf
dem Heading (Stripe/MDN/Notion-Pattern). */
.seo-tool-landing h1[id],
.seo-tool-landing h2[id],
.seo-tool-landing h3[id] {
scroll-margin-top: 120px;
}
@media (max-width: 768px) {
.seo-tool-landing h1[id],
.seo-tool-landing h2[id],
.seo-tool-landing h3[id] {
scroll-margin-top: 88px;
}
.seo-tool-landing details.toc { margin: 2rem 0 3rem; }
.seo-tool-landing .toc-head { padding: 1rem 1.4rem; }
.seo-tool-landing .toc-list { padding: 0.5rem 1.4rem 1.2rem; }
.seo-tool-landing .toc-link {
padding: 0.85rem 0.1rem;
font-size: 0.96rem;
gap: 1rem;
}
}
/* ═══════════════════════════════════════════════
STICKY TOC (Desktop ≥1280px) — links neben Content, auf H1-Höhe.
Default ausgeklappt (JS setzt open-Attribut), Chevron zum Einklappen.
Linker Progress-Bar: grau gefüllt bis zur Scroll-Position (primary).
═══════════════════════════════════════════════ */
@media (min-width: 1280px) {
.seo-tool-landing details.toc {
position: fixed;
top: var(--toc-top, 220px);
/* Fester Sidebar-Offset: TOC sitzt immer weit links mit kleinem
Sicherheitsabstand zum Viewport-Rand (Progress-Strahl soll nicht
am Abgrund kleben). Wächst sanft mit Viewport-Breite (3vw),
capped nach oben bei 4rem (64px) damit TOC auch auf 4K-Screens
nicht zur Content-Mitte wandert. 1920: ~58px, 1280: ~38px. */
left: clamp(1.5rem, 3vw, 4rem);
width: 260px;
max-height: calc(100vh - var(--toc-top, 220px) - 2rem);
overflow-y: auto;
margin: 0;
z-index: 90;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none !important;
padding: 0;
}
/* Header sichtbar: Icon + "Inhaltsverzeichnis"-Label + Chevron.
Klickbar — kollabiert auf Chevron-only. */
.seo-tool-landing details.toc[open] .toc-head,
.seo-tool-landing details.toc .toc-head {
padding: 0 0.25rem 1rem 1.25rem;
border: none !important;
background: transparent;
cursor: pointer;
gap: 0.55rem;
}
.seo-tool-landing details.toc .toc-head:hover { background: transparent; }
.seo-tool-landing details.toc .toc-head:hover .toc-heading { color: var(--primary); }
.seo-tool-landing details.toc .toc-icon {
display: inline-flex;
color: var(--primary);
}
.seo-tool-landing details.toc .toc-icon .ins-icon { width: 16px; height: 16px; }
.seo-tool-landing details.toc .toc-heading {
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0;
color: var(--dark);
text-transform: none;
transition: color 0.15s;
}
.seo-tool-landing details.toc .toc-count { display: none; }
.seo-tool-landing details.toc .toc-chevron {
display: block;
margin-left: auto;
margin-right: 0.25rem;
}
/* Liste + vertikaler Progress-Track auf Left-Border.
Grauer Track (border) und grüner Fill (primary) als zwei Pseudo-Elements
auf der toc-list, Höhe des Fills = --toc-progress * 100%. */
.seo-tool-landing details.toc .toc-list {
position: relative;
padding: 0;
counter-reset: toc;
gap: 0;
}
.seo-tool-landing details.toc .toc-list::before,
.seo-tool-landing details.toc .toc-list::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 2px;
pointer-events: none;
}
.seo-tool-landing details.toc .toc-list::before {
height: 100%;
background: var(--border);
}
.seo-tool-landing details.toc .toc-list::after {
height: calc(var(--toc-progress, 0) * 100%);
background: var(--primary);
transition: height 0.18s ease-out;
}
.seo-tool-landing details.toc .toc-item {
border-top: none;
padding: 0;
}
.seo-tool-landing details.toc .toc-item + .toc-item { border-top: none; }
.seo-tool-landing details.toc .toc-link {
position: relative;
display: block;
padding: 0.5rem 1.25rem;
border-left: none;
font-size: 0.85rem;
font-weight: 500;
line-height: 1.4;
color: var(--muted);
transition: color 0.15s;
}
.seo-tool-landing details.toc .toc-link::before {
/* Counter ausblenden — Stripe-Style ist counter-frei */
display: none;
}
.seo-tool-landing details.toc .toc-link:hover {
color: var(--dark);
}
/* Active-State: nur Color + Font-Weight. Progress-Fill der Left-Border
zeigt bereits die aktuelle Position visuell an, ein extra Dot wäre
redundant. */
.seo-tool-landing details.toc .toc-link.toc-active {
color: var(--primary);
font-weight: 600;
}
.seo-tool-landing details.toc .toc-link.toc-active .toc-label {
border-bottom: none;
}
/* Sub-Items: eingerückt, dünner Text */
.seo-tool-landing details.toc .toc-sublist {
margin: 0;
padding: 0.15rem 0 0.3rem 0;
border-left: none;
}
.seo-tool-landing details.toc .toc-sublist::before { display: none; }
.seo-tool-landing details.toc .toc-subitem {
padding-left: 0;
}
.seo-tool-landing details.toc .toc-subitem::before { display: none; }
.seo-tool-landing details.toc .toc-sublink {
display: block;
padding: 0.35rem 1.25rem 0.35rem 2.25rem;
margin-left: -1px;
border-left: 2px solid transparent;
font-size: 0.78rem;
color: var(--muted);
}
.seo-tool-landing details.toc .toc-sublink:hover { color: var(--dark); }
.seo-tool-landing details.toc .toc-sublink.toc-active {
color: var(--primary);
border-left-color: var(--primary);
}
}
/* Sehr-breite Viewports: etwas breiterer TOC damit Labels Raum haben.
Left-Offset erbt die clamp-Formel (kein separater Override nötig). */
@media (min-width: 1600px) {
.seo-tool-landing details.toc {
width: 270px;
}
}
/* Sticky-TOC nach Scroll-Start: subtile Shadow */
@media (min-width: 1280px) {
.seo-tool-landing details.toc.toc-scrolled {
box-shadow: 0 12px 34px -20px rgba(26,46,45,0.25);
}
/* Footer-Bounday: TOC fadet aus wenn Footer oben im Viewport auftaucht.
IntersectionObserver (landing-sticky-toc.js) setzt `toc-near-footer`. */
.seo-tool-landing details.toc {
transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0.25s;
}
.seo-tool-landing details.toc.toc-near-footer {
opacity: 0;
transform: translateY(-16px);
pointer-events: none;
visibility: hidden;
}
}
/* ═══════════════════════════════════════════════
MOBILE-TOC FAB + MODAL — Floating Action Button unten rechts,
öffnet Bottom-Sheet mit TOC-Liste. Nur sichtbar auf Viewports
ohne Sticky-Desktop-TOC (<1280px).
═══════════════════════════════════════════════ */
.ins-toc-fab {
display: none;
}
@media (max-width: 1279px) {
.ins-toc-fab {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 95;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.1rem 0.8rem 0.95rem;
background: var(--primary);
color: white;
border: none;
border-radius: 999px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 14px 34px -10px rgba(13,158,138,0.5);
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
opacity: 0;
transform: translateY(80px);
animation: ins-toc-fab-in 0.3s ease-out 0.5s forwards;
}
.ins-toc-fab:hover {
background: var(--hover);
transform: translateY(-2px);
box-shadow: 0 18px 44px -10px rgba(13,158,138,0.6);
}
.ins-toc-fab .ins-icon { width: 18px; height: 18px; }
}
@keyframes ins-toc-fab-in {
to { opacity: 1; transform: translateY(0); }
}
.ins-toc-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(26,46,45,0.5);
backdrop-filter: blur(4px);
z-index: 100;
opacity: 0;
transition: opacity 0.2s;
}
.ins-toc-modal-backdrop.visible { opacity: 1; }
.ins-toc-modal {
position: fixed;
left: 0; right: 0; bottom: 0;
max-height: 82vh;
background: var(--white);
border-top-left-radius: 22px;
border-top-right-radius: 22px;
z-index: 101;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 -24px 60px -20px rgba(26,46,45,0.35);
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
font-family: 'Inter', -apple-system, sans-serif;
}
.ins-toc-modal.visible { transform: translateY(0); }
/* Drag-Handle oben — klassischer Bottom-Sheet-Affordance-Indicator */
.ins-toc-modal::before {
content: "";
display: block;
width: 44px;
height: 4px;
background: var(--border);
border-radius: 2px;
margin: 0.75rem auto 0;
flex-shrink: 0;
}
/* Header: Label + primary Icon + Close-Button */
.ins-toc-modal-header {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 1rem 1.25rem 0.85rem;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.ins-toc-modal-header-icon {
color: var(--primary);
display: inline-flex;
}
.ins-toc-modal-header-icon .ins-icon { width: 18px; height: 18px; }
.ins-toc-modal-header-title {
flex: 1;
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.15rem;
font-weight: 400 !important;
color: var(--dark);
letter-spacing: -0.01em;
}
.ins-toc-modal-close {
background: var(--bg);
border: 1px solid var(--border);
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1rem;
line-height: 1;
color: var(--muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, border-color 0.15s, background 0.15s;
flex-shrink: 0;
padding: 0;
}
.ins-toc-modal-close:hover {
color: var(--primary);
border-color: var(--primary);
background: var(--tint);
}
/* TOC-Content area — modal ist außerhalb .seo-tool-landing, daher alle
Styles explizit ohne .seo-tool-landing-Prefix. */
.ins-toc-modal-body {
overflow-y: auto;
padding: 0.75rem 0.5rem 1.5rem;
}
.ins-toc-modal-body details.toc {
margin: 0;
border: none;
border-radius: 0;
box-shadow: none !important;
background: transparent;
padding: 0;
overflow: visible;
}
.ins-toc-modal-body details.toc > summary { display: none; }
/* Liste-Reset gegen Browser/Theme-Defaults (Bullets weg!) */
.ins-toc-modal-body ul.toc-list {
list-style: none;
counter-reset: toc;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.ins-toc-modal-body li.toc-item {
list-style: none;
counter-increment: toc;
padding: 0;
margin: 0;
border: none;
}
.ins-toc-modal-body li.toc-item::before,
.ins-toc-modal-body li.toc-item::marker { content: none; display: none; }
.ins-toc-modal-body li.toc-item + li.toc-item { border-top: none; }
/* Stripe-Style Link: Counter + Left-Border + Tap-Feedback */
.ins-toc-modal-body .toc-link {
display: flex;
align-items: baseline;
gap: 0.85rem;
padding: 0.95rem 1rem;
margin: 0;
border: none;
border-left: 3px solid transparent;
border-radius: 6px;
font-size: 0.96rem;
font-weight: 500;
line-height: 1.4;
color: var(--dark);
text-decoration: none;
transition: background 0.15s, border-left-color 0.15s;
}
.ins-toc-modal-body .toc-link::before {
content: counter(toc, decimal-leading-zero);
font-family: 'Inter', system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--primary);
opacity: 0.75;
min-width: 1.8ch;
padding-top: 0.25rem;
flex-shrink: 0;
display: inline;
}
.ins-toc-modal-body .toc-link::after { content: none; }
.ins-toc-modal-body .toc-label {
flex: 1;
border-bottom: none !important;
}
.ins-toc-modal-body .toc-label em {
font-style: normal;
color: inherit;
font-weight: inherit;
}
.ins-toc-modal-body .toc-link:hover,
.ins-toc-modal-body .toc-link:active {
background: var(--tint);
border-left-color: var(--primary);
}
.ins-toc-modal-body .toc-link:hover::before,
.ins-toc-modal-body .toc-link:active::before {
opacity: 1;
}
/* Sub-Items falls vorhanden */
.ins-toc-modal-body ul.toc-sublist {
list-style: none;
padding: 0.1rem 0 0.25rem;
margin: 0;
border: none;
}
.ins-toc-modal-body ul.toc-sublist::before { display: none; }
.ins-toc-modal-body li.toc-subitem {
list-style: none;
padding: 0;
margin: 0;
}
.ins-toc-modal-body li.toc-subitem::before,
.ins-toc-modal-body li.toc-subitem::marker { content: none; display: none; }
.ins-toc-modal-body .toc-sublink {
display: block;
padding: 0.55rem 1rem 0.55rem 3.1rem;
margin: 0;
font-size: 0.85rem;
color: var(--muted);
text-decoration: none;
border-left: 3px solid transparent;
border-radius: 6px;
transition: background 0.15s, border-left-color 0.15s, color 0.15s;
}
.ins-toc-modal-body .toc-sublink:hover,
.ins-toc-modal-body .toc-sublink:active {
color: var(--dark);
background: var(--tint);
border-left-color: var(--primary);
}
body.ins-toc-modal-open { overflow: hidden; }
/* ═══════════════════════════════════════════════
HERO-STATS v0.2 — optionale Trust-Row between Lead + CTAs
2-4 Items als Grid. Tinted Card mit primary Left-Accent.
Number in DM Serif (prominent), Label in Inter (kleine muted).
═══════════════════════════════════════════════ */
.seo-tool-landing .hero-stats {
display: grid;
gap: 1rem;
margin: 2rem 0 2.5rem;
max-width: 640px;
}
.seo-tool-landing .hero-stats--2 { grid-template-columns: 1fr 1fr; }
.seo-tool-landing .hero-stats--3 { grid-template-columns: repeat(3, 1fr); }
.seo-tool-landing .hero-stats--4 { grid-template-columns: repeat(4, 1fr); }
.seo-tool-landing .hero-stat {
position: relative;
padding: 1rem 0.9rem 1rem 1.1rem;
background: var(--tint);
border-radius: 0 10px 10px 0;
border-left: 3px solid var(--primary);
}
.seo-tool-landing .hero-stat__number {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(1.5rem, 2.4vw, 1.9rem);
line-height: 1.05;
color: var(--dark);
margin-bottom: 0.15rem;
}
.seo-tool-landing .hero-stat__label {
font-size: 0.78rem;
line-height: 1.35;
color: var(--muted);
font-weight: 500;
}
/* Hero-CTAs: war vorher Inline-margin-top:2rem mit margin-left auf Ghost.
Als eigene Row-Klasse sauber responsiv. */
.seo-tool-landing .hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
align-items: center;
}
/* ═══════════════════════════════════════════════
HERO-CHECK-STATS — Trust-Chips UNTER dem Primary-CTA
Reassurance-Nudge direkt nach der Action. Dezente Tint-Pills mit
Check-Akzent. Löst das vertical-align-Problem der alten Icon-Circle-
Variante (Chip-Container = konsistente Höhe pro Item).
═══════════════════════════════════════════════ */
.seo-tool-landing .hero-check-stats {
list-style: none;
padding: 0;
margin: 1.25rem 0 0;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.5rem;
}
.seo-tool-landing .hero-check-stats__item {
/* !important nötig — WP-Theme-CSS setzt margin-top:12px auf li+li
(List-Typography), was die Chips 2+3 gegenüber Chip 1 verschiebt. */
margin: 0 !important;
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0 0.9rem;
height: 2rem;
box-sizing: border-box;
/* Analog zur .ins-author-card: neutraler bg-Ton + subtile Border.
Check bleibt als Primary-Akzent links. Weniger "Tech-Chip"-Look,
mehr Editorial. */
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.85rem;
line-height: 1.2;
white-space: nowrap;
}
.seo-tool-landing .hero-check-stats__icon {
display: inline-flex;
align-items: center;
color: var(--primary);
flex-shrink: 0;
}
.seo-tool-landing .hero-check-stats__icon svg {
width: 13px;
height: 13px;
}
.seo-tool-landing .hero-check-stats__text {
color: var(--dark);
}
.seo-tool-landing .hero-check-stats__text strong {
font-weight: 700;
color: var(--dark);
}
@media (max-width: 640px) {
.seo-tool-landing .hero-stats { gap: 0.65rem; margin: 1.5rem 0 2rem; }
.seo-tool-landing .hero-stats--3,
.seo-tool-landing .hero-stats--4 { grid-template-columns: 1fr 1fr; }
/* Bei 3 Items: drittes Item full-width in zweiter Reihe */
.seo-tool-landing .hero-stats--3 .hero-stat:nth-child(3) { grid-column: span 2; }
.seo-tool-landing .hero-stat__number { font-size: 1.5rem; }
.seo-tool-landing .hero-stat__label { font-size: 0.74rem; }
.seo-tool-landing .hero-ctas { gap: 0.65rem; }
.seo-tool-landing .hero-check-stats {
gap: 0.4rem;
}
.seo-tool-landing .hero-check-stats__item {
padding: 0 0.75rem;
height: 1.85rem;
font-size: 0.8rem;
}
.seo-tool-landing .hero-ctas > a { width: 100%; text-align: center; }
}
/* ═══════════════════════════════════════════════
KEY TAKEAWAYS — Smart-Brevity Axiom-Rail
Executive-Summary nach TOC. Kein Box-Container — linker
primary-Rail, Bold-Anchor-Phrase (Scan-Stop) + muted
Detail-Satz pro Bullet. Tighter Sidenote-Scale — sitzt
als schmale eingerückte Summary rechts vom content-start,
nicht als Block voller Breite.
═══════════════════════════════════════════════ */
.seo-tool-landing .key-takeaways-section {
padding: 0.5rem 2rem 1.5rem 4.5rem;
}
.seo-tool-landing .key-takeaways {
padding: 0.15rem 0 0.15rem 1.15rem;
border-left: 2px solid var(--primary);
max-width: 560px;
}
.seo-tool-landing .key-takeaways-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 0.5rem;
}
.seo-tool-landing .key-takeaways-eyebrow-icon {
display: inline-flex;
align-items: center;
color: var(--primary);
}
.seo-tool-landing .key-takeaways-eyebrow-icon .ins-icon {
width: 13px;
height: 13px;
}
.seo-tool-landing .key-takeaways-headline {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
font-weight: 700;
line-height: 1.2;
color: var(--dark);
margin: 0 0 0.7rem;
}
.seo-tool-landing .key-takeaways-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.seo-tool-landing .key-takeaways-item {
font-size: 0.86rem;
line-height: 1.5;
color: var(--muted);
}
.seo-tool-landing .key-takeaways-anchor {
color: var(--dark);
font-weight: 700;
}
@media (max-width: 640px) {
.seo-tool-landing .key-takeaways-section { padding: 0.5rem 1rem 1.25rem 2rem; }
.seo-tool-landing .key-takeaways { padding-left: 0.9rem; max-width: 100%; }
.seo-tool-landing .key-takeaways-headline { font-size: 1rem; margin-bottom: 0.6rem; }
.seo-tool-landing .key-takeaways-item { font-size: 0.84rem; }
}
/* ═══════════════════════════════════════════════
SILO LINKS — Pflicht-Navigation am Seitenende
Pillar-Link prominent oben, 3 Cluster-Karten unten
als „nächster logischer Schritt". Ruhig ins
Seitendesign eingebettet: tint-tinted Container,
border-Akzente, Hover-Arrow-Shifts.
═══════════════════════════════════════════════ */
.seo-tool-landing .silo-links {
padding: 3rem 2rem 3.5rem;
}
.seo-tool-landing .silo-links__eyebrow {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 0.6rem;
}
.seo-tool-landing .silo-links__headline {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(1.6rem, 2.8vw, 2.1rem);
line-height: 1.12;
color: var(--dark);
margin: 0 0 1.75rem;
letter-spacing: -0.01em;
font-weight: 700;
}
/* Pillar-Link: Wide Card, primary-border-left, größere Typo,
Hover hebt subtil. */
.seo-tool-landing .silo-pillar {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
align-items: center;
padding: 1.5rem 1.75rem;
background: var(--tint);
border: 1px solid rgba(13,158,138,0.25);
border-left: 3px solid var(--primary);
border-radius: 14px;
color: var(--dark);
text-decoration: none;
margin-bottom: 1.25rem;
transition: background 0.2s, border-color 0.2s;
}
.seo-tool-landing .silo-pillar:hover {
background: rgba(13,158,138,0.10);
border-color: rgba(13,158,138,0.45);
color: var(--dark);
text-decoration: none;
}
.seo-tool-landing .silo-pillar__meta {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.5rem;
}
.seo-tool-landing .silo-pillar__kicker {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary);
}
.seo-tool-landing .silo-pillar__body { grid-column: 1; }
.seo-tool-landing .silo-pillar__title {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(1.15rem, 2vw, 1.35rem);
font-weight: 700;
color: var(--dark);
line-height: 1.2;
margin: 0.3rem 0 0.35rem;
letter-spacing: -0.005em;
}
.seo-tool-landing .silo-pillar__teaser {
font-size: 0.92rem;
line-height: 1.55;
color: var(--muted);
margin: 0;
max-width: 60ch;
}
.seo-tool-landing .silo-pillar__arrow {
grid-column: 2;
grid-row: 2;
align-self: center;
color: var(--primary);
font-size: 1.6rem;
line-height: 1;
transition: transform 0.2s;
}
.seo-tool-landing .silo-pillar:hover .silo-pillar__arrow {
transform: translateX(4px);
}
/* Cluster-Grid: 3-Spalten auf Desktop, 1-Spalte Mobile. Jede Karte
ist ein white-bordered Link mit title + teaser + Arrow. */
.seo-tool-landing .silo-clusters {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (max-width: 860px) {
.seo-tool-landing .silo-clusters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.seo-tool-landing .silo-clusters { grid-template-columns: 1fr; }
}
.seo-tool-landing .silo-cluster {
position: relative;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.2rem 1.35rem 1.3rem;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
color: var(--dark);
text-decoration: none;
transition: border-color 0.2s, transform 0.2s;
}
.seo-tool-landing .silo-cluster:hover {
border-color: var(--primary);
transform: translateY(-2px);
color: var(--dark);
text-decoration: none;
}
.seo-tool-landing .silo-cluster__kicker {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.seo-tool-landing .silo-cluster__title {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--dark);
line-height: 1.25;
margin: 0;
letter-spacing: -0.005em;
}
.seo-tool-landing .silo-cluster__teaser {
font-size: 0.85rem;
line-height: 1.55;
color: var(--muted);
margin: 0;
}
.seo-tool-landing .silo-cluster__arrow {
margin-top: auto;
align-self: flex-start;
color: var(--primary);
font-size: 1.15rem;
line-height: 1;
padding-top: 0.5rem;
transition: transform 0.2s;
}
.seo-tool-landing .silo-cluster:hover .silo-cluster__arrow {
transform: translateX(4px);
}
@media (max-width: 640px) {
.seo-tool-landing .silo-links { padding: 2.25rem 1rem 2.75rem; }
.seo-tool-landing .silo-pillar { padding: 1.25rem 1.25rem; }
.seo-tool-landing .silo-pillar__title { font-size: 1.1rem; }
.seo-tool-landing .silo-cluster { padding: 1rem 1.15rem 1.15rem; }
.seo-tool-landing .silo-cluster__title { font-size: 1rem; }
}
/* ── Form Block (v0.4 — Insurancy-Runner, Single-Column, em-Akzent) ──── */
.seo-tool-landing .form-block {
padding: 3.5rem 1.5rem 4rem;
scroll-margin-top: 120px;
background: linear-gradient(180deg, rgba(212, 245, 239, 0.22) 0%, transparent 100%);
border-radius: 24px;
}
.seo-tool-landing .form-block__head {
max-width: 640px;
margin: 0 auto 2rem;
text-align: center;
}
.seo-tool-landing .form-block__headline {
font-family: 'DM Serif Display', Georgia, serif;
font-size: clamp(1.9rem, 3.2vw, 2.6rem);
line-height: 1.12;
color: var(--dark);
margin: 0 0 0.75rem;
font-weight: 700;
}
.seo-tool-landing .form-block__headline em {
color: var(--primary);
font-style: normal;
}
.seo-tool-landing .form-block__lead {
font-size: 1.05rem;
line-height: 1.55;
color: var(--muted);
margin: 0 0 1.25rem;
}
.seo-tool-landing .form-block__trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 1rem;
}
.seo-tool-landing .form-block__trust-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--dark);
background: rgba(255, 255, 255, 0.75);
padding: 0.35rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.seo-tool-landing .form-block__trust-icon {
color: var(--primary);
display: inline-flex;
}
.seo-tool-landing .form-block__trust-icon svg {
width: 14px;
height: 14px;
}
.seo-tool-landing .form-block__card {
max-width: 720px;
margin: 0 auto;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 18px;
box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.18);
padding: 1.75rem 1.5rem;
min-height: 360px;
}
.seo-tool-landing .form-block__card > div[id^="insurancy-runner-"] {
min-height: 320px;
}
@media (max-width: 640px) {
.seo-tool-landing .form-block {
padding: 2.5rem 1rem 3rem;
}
.seo-tool-landing .form-block__card {
padding: 1.25rem 1rem;
}
}
/* ═══════════════════════════════════════════════
AI SUMMARY BAR — Deep-Links zu KI-Plattformen
Server-injiziert nach key_takeaways. Klick auf Pill: Prompt in Clipboard
+ Plattform in neuem Tab. Signal an LLM-Crawler für AI-Overview-Optimierung.
═══════════════════════════════════════════════ */
.seo-tool-landing .ins-ai-summary {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
/* Content-Breite — matched den Reading-Body (H2 + Paragraphen), damit die
Bar als natürlicher Break zwischen TL;DR-Sektion und Deep-Dive-Content
wirkt, nicht als zweite Nebeneinrückung. */
margin: 2rem auto 3.5rem;
max-width: 760px;
padding: 0.6rem 1rem;
background: var(--bg, #fafaf6);
border: 1px solid var(--border);
border-radius: 12px;
}
/* Editorial-Section-Break: dezenter 48px-Hairline zwischen Bar und dem
folgenden Content-Block. Kennzeichnet "Reading-Tool-Zone endet hier". */
.seo-tool-landing .ins-ai-summary::after {
content: "";
position: absolute;
left: 50%;
bottom: -2rem;
transform: translateX(-50%);
width: 48px;
height: 1px;
background: var(--border);
}
.seo-tool-landing .ins-ai-summary__label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--dark);
letter-spacing: 0.01em;
}
.seo-tool-landing .ins-ai-summary__icon {
display: inline-flex;
color: var(--primary);
}
.seo-tool-landing .ins-ai-summary__icon .ins-icon {
width: 14px;
height: 14px;
}
.seo-tool-landing .ins-ai-summary__label-text {
white-space: nowrap;
}
.seo-tool-landing .ins-ai-summary__pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.seo-tool-landing .ins-ai-summary__pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem 0.4rem 0.75rem;
font: inherit;
font-size: 0.78rem;
font-weight: 600;
color: var(--dark);
background: var(--white, #fff);
border: 1px solid var(--border);
border-radius: 999px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.seo-tool-landing .ins-ai-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.seo-tool-landing .ins-ai-icon--multicolor {
/* Gemini-Icon hat eingebaute Farben (4-Color). currentColor-Override
via .ins-ai-summary__pill--copied würde das Icon auf weiß setzen; hier
also explizit verhindern. */
}
.seo-tool-landing .ins-ai-summary__pill--copied .ins-ai-icon:not(.ins-ai-icon--multicolor) {
color: var(--white, #fff);
}
.seo-tool-landing .ins-ai-summary__pill:hover {
border-color: var(--primary);
color: var(--primary);
}
.seo-tool-landing .ins-ai-summary__pill:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.seo-tool-landing .ins-ai-summary__pill--copied {
background: var(--primary);
border-color: var(--primary);
color: var(--white, #fff);
}
.seo-tool-landing .ins-ai-summary__toast {
position: absolute;
left: 0;
right: 0;
top: 100%;
margin-top: 0.35rem;
padding: 0 0.25rem;
font-size: 0.75rem;
color: var(--muted);
line-height: 1.4;
opacity: 0;
transition: opacity 0.18s ease-out;
pointer-events: none;
}
.seo-tool-landing .ins-ai-summary__toast--visible {
opacity: 1;
}
@media (max-width: 640px) {
.seo-tool-landing .ins-ai-summary {
margin: 2rem 1rem;
padding: 0.7rem 0.9rem;
gap: 0.5rem;
}
.seo-tool-landing .ins-ai-summary__pills {
width: 100%;
}
}
/* ═══════════════════════════════════════════════
BREADCRUMB (Option C, 2026-04-21)
LPF rendert einen eigenen .ins-breadcrumb als erster Block vor Hero
(siehe backend/landing_page/breadcrumb_injection.py). Das Theme-eigene
`.breadcrumb` im wird auf LPF-Pages ausgeblendet — keine
Duplizierung, keine doppelten schema.org-Markups (Yoast-JSON-LD bleibt
alleinige Schema-Quelle).
Datei wird per MU-Plugin NUR auf LPF-Pages geladen, deshalb ist die
Theme-Hide-Regel hier scope-agnostic sicher.
═══════════════════════════════════════════════ */
body .breadcrumb:not(.ins-breadcrumb) {
display: none !important;
}
.seo-tool-landing .ins-breadcrumb {
max-width: 980px;
margin: 1.25rem auto 0.5rem;
padding: 0 1.5rem;
font-size: 0.85rem;
color: #666;
line-height: 1.4;
}
.seo-tool-landing .ins-breadcrumb ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
align-items: center;
}
.seo-tool-landing .ins-breadcrumb li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
}
.seo-tool-landing .ins-breadcrumb li:not(:last-child)::after {
content: "›";
color: #bbb;
font-size: 0.95em;
line-height: 1;
}
.seo-tool-landing .ins-breadcrumb a {
color: #666;
text-decoration: none;
transition: color 0.12s;
}
.seo-tool-landing .ins-breadcrumb a:hover,
.seo-tool-landing .ins-breadcrumb a:focus-visible {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.seo-tool-landing .ins-breadcrumb [aria-current="page"] {
color: #333;
font-weight: 500;
}
@media (max-width: 640px) {
.seo-tool-landing .ins-breadcrumb {
margin: 1rem 1rem 0.5rem;
padding: 0;
font-size: 0.8rem;
}
}