/* ============================================================
   Offrendo – Design System
   Lebendig, modern, ohne externe Fonts/Frameworks.
   ============================================================ */
:root {
  --ink: #16143f;
  --ink-soft: #4b4a6b;
  --muted: #8a89a3;
  --bg: #f7f7fd;
  --card: #ffffff;
  --line: #e7e6f4;
  --primary: #5b5bf7;
  --primary-deep: #4340d8;
  --violet: #9b46f5;
  --coral: #ff6b5e;
  --amber: #ffb020;
  --mint: #19c894;
  --grad: linear-gradient(120deg, #5b5bf7 0%, #9b46f5 60%, #c86df3 100%);
  --grad-warm: linear-gradient(120deg, #ff6b5e, #ffb020);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 40px -18px rgba(22, 20, 63, 0.25);
  --shadow-lg: 0 24px 70px -24px rgba(22, 20, 63, 0.35);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--primary-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1520px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: #fff; padding: 8px 14px; z-index: 999; border-radius: 8px; }

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; }
h1 em, h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 0.98rem var(--font); text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
  white-space: nowrap;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 24px -10px rgba(91, 91, 247, 0.65); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(91, 91, 247, 0.75); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-deep); transform: translateY(-1px); }
.btn-warm { background: var(--grad-warm); color: #fff; box-shadow: 0 8px 24px -10px rgba(255, 107, 94, 0.6); }
.btn-warm:hover { transform: translateY(-2px); }
.btn-lg { padding: 16px 32px; font-size: 1.08rem; }
.btn-sm { padding: 8px 16px; font-size: 0.88rem; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 247, 253, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 26px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; }
.brand-mark { width: 34px; height: 34px; flex: 0 0 34px; }
.brand { flex-shrink: 0; }
.brand-name { font-weight: 800; font-size: 1.3rem; color: var(--ink); letter-spacing: -0.02em; }
.main-nav { display: flex; gap: 22px; margin-right: auto; }
.main-nav a { color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }
.main-nav a:hover { color: var(--primary-deep); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang-switch { display: flex; gap: 2px; background: var(--line); border-radius: 999px; padding: 3px; }
.lang-switch a { padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.lang-switch a.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(22,20,63,0.12); }
.lang-switch a:hover { text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2.5px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: 0.2s; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 88px; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; animation: float 14s ease-in-out infinite alternate; }
.blob-1 { width: 480px; height: 480px; background: #c9c9ff; top: -180px; right: -80px; }
.blob-2 { width: 380px; height: 380px; background: #ffd9d3; bottom: -160px; left: -120px; animation-delay: -5s; }
.blob-3 { width: 260px; height: 260px; background: #d9c3ff; top: 30%; left: 42%; opacity: 0.35; animation-delay: -9s; }
@keyframes float { from { transform: translate(0, 0) scale(1); } to { transform: translate(36px, -28px) scale(1.08); } }

.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font-size: 0.85rem; font-weight: 700; color: var(--primary-deep);
  box-shadow: var(--shadow); margin-bottom: 20px;
}
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(25, 200, 148, 0.5); } 50% { box-shadow: 0 0 0 7px rgba(25, 200, 148, 0); } }
.hero p.lead { font-size: 1.15rem; color: var(--ink-soft); margin: 18px 0 28px; max-width: 34em; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.trust-row { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; }
.trust-row svg { width: 18px; height: 18px; color: var(--mint); flex: none; }

.hero-visual { position: relative; }
.hero-visual > svg { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(22, 20, 63, 0.18)); }

/* ---------- Suchfeld ---------- */
.searchbox { display: flex; background: #fff; border-radius: 999px; box-shadow: var(--shadow-lg); padding: 6px; margin: 26px 0 6px; max-width: 560px; position: relative; }
.searchbox input { flex: 1; border: 0; outline: 0; padding: 12px 20px; font: 500 1rem var(--font); background: none; border-radius: 999px; min-width: 0; }
.search-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 50; display: none; }
.search-suggest.open { display: block; }
.search-suggest button { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 12px 18px; background: none; border: 0; cursor: pointer; font: 500 0.95rem var(--font); color: var(--ink); }
.search-suggest button:hover, .search-suggest button.active { background: var(--bg); }
.search-suggest .cat-icon { width: 26px; height: 26px; }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section-alt { background: #fff; }
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head p { color: var(--ink-soft); margin-top: 12px; }

/* Kategorien-Grid */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1040px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 16px; text-align: center; text-decoration: none !important;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.cat-card .cat-icon { width: 46px; height: 46px; }
.cat-card span { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.cat-icon { color: var(--primary); }
.cat-more { display: flex; justify-content: center; margin-top: 28px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step-card { background: var(--card); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow); position: relative; }
.step-card::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px; background: var(--grad);
  color: #fff; font-weight: 800; font-size: 1.2rem; margin-bottom: 16px;
  box-shadow: 0 8px 20px -8px rgba(91, 91, 247, 0.7);
}
.step-card p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 8px; }

/* Regionen */
.region-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Gleichmässiges Raster für Kantone/Städte (alphabetisch, zeilenweise, keine verwaisten Chips) */
.region-cloud.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.region-cloud.region-grid .chip { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .region-cloud.region-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .region-cloud.region-grid .chip { white-space: normal; overflow: visible; font-size: 0.84rem; padding: 8px 10px; line-height: 1.25; } }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 18px; font-weight: 600; font-size: 0.9rem; color: var(--ink-soft);
  text-decoration: none !important; transition: 0.15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary-deep); transform: translateY(-2px); box-shadow: var(--shadow); }
.chip-active { background: var(--grad); color: #fff; border-color: transparent; }

/* Provider-CTA-Band */
.band {
  background: var(--ink); border-radius: 28px; color: #fff; overflow: hidden; position: relative;
  padding: 56px 48px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: center;
}
.band::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--grad); filter: blur(90px); opacity: 0.45; right: -120px; top: -120px; }
.band h2 { color: #fff; }
.band p { color: #c9c8e4; margin: 12px 0 24px; position: relative; z-index: 1; }
.band .btn { position: relative; z-index: 1; }
.band-visual { position: relative; z-index: 1; text-align: center; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; }
.faq summary { padding: 18px 22px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--primary); transition: 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 18px; color: var(--ink-soft); }

/* ---------- Funnel ---------- */
.funnel-wrap { max-width: 680px; margin: 0 auto; padding: 48px 20px 90px; }
.funnel-progress { display: flex; gap: 6px; margin: 26px 0 34px; }
.funnel-progress .p-step { flex: 1; height: 6px; border-radius: 3px; background: var(--line); transition: background 0.3s; }
.funnel-progress .p-step.done { background: var(--grad); }
.funnel-step { display: none; animation: fadeUp 0.35s ease; }
.funnel-step.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.funnel-q { font-size: 1.3rem; font-weight: 800; margin-bottom: 18px; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.option-card {
  border: 1.5px solid var(--line); background: #fff; border-radius: var(--radius-sm);
  padding: 18px 12px; cursor: pointer; text-align: center; font: 600 0.9rem var(--font);
  transition: 0.15s; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink);
}
.option-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.option-card.selected { border-color: var(--primary); background: #f2f2ff; box-shadow: 0 0 0 3px rgba(91, 91, 247, 0.15); }
.option-card .cat-icon { width: 34px; height: 34px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips .chip { cursor: pointer; user-select: none; }
.funnel-nav { display: flex; justify-content: space-between; margin-top: 32px; gap: 12px; }
.funnel-done { text-align: center; padding: 40px 0; }
.funnel-done svg { width: 90px; height: 90px; margin-bottom: 22px; }

/* Forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 16px; font: 500 1rem var(--font); background: #fff; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 91, 247, 0.15);
}
.field .hint { font-size: 0.82rem; color: var(--muted); margin-top: 5px; }
.field-error { color: var(--coral); font-size: 0.85rem; margin-top: 6px; display: none; }
.field.invalid input, .field.invalid textarea { border-color: var(--coral); }
.field.invalid .field-error { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.radio-pills { display: flex; gap: 10px; }
.radio-pills label {
  flex: 1; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px;
  text-align: center; cursor: pointer; font-weight: 600; font-size: 0.92rem; background: #fff;
}
.radio-pills input { display: none; }
.radio-pills input:checked + span { color: var(--primary-deep); }
.radio-pills label:has(input:checked) { border-color: var(--primary); background: #f2f2ff; }

/* ---------- SEO-Seiten (Kategorie/Ort) ---------- */
.page-hero { padding: 56px 0 40px; position: relative; overflow: hidden; }
.breadcrumbs { font-size: 0.83rem; color: var(--muted); margin-bottom: 16px; }
.breadcrumbs a { color: var(--muted); }
.page-hero .lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 40em; margin: 16px 0 26px; }
.badge-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.badge-row span { display: inline-flex; gap: 8px; align-items: center; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); }
.badge-row svg { width: 17px; height: 17px; color: var(--mint); }
.service-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 20px; }
.service-list li {
  list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 18px; font-weight: 600; font-size: 0.93rem; display: flex; gap: 10px; align-items: center;
}
.service-list svg { width: 18px; height: 18px; color: var(--primary); flex: none; }
.linklist { columns: 3; gap: 30px; }
.linklist a { display: block; padding: 5px 0; font-size: 0.92rem; color: var(--ink-soft); break-inside: avoid; }
.linklist a:hover { color: var(--primary-deep); }

/* ---------- Portal ---------- */
.portal-layout { display: grid; grid-template-columns: 230px 1fr; gap: 34px; padding: 40px 0 80px; align-items: start; }
.portal-nav { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; position: sticky; top: 90px; }
.portal-nav a {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px;
  color: var(--ink-soft); font-weight: 600; font-size: 0.93rem; text-decoration: none !important;
}
.portal-nav a.active, .portal-nav a:hover { background: var(--bg); color: var(--primary-deep); }
.portal-nav svg { width: 18px; height: 18px; }
.portal-nav .sep { border-top: 1px solid var(--line); margin: 10px 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card + .card { margin-top: 20px; }
.card h2, .card h3 { margin-bottom: 14px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
}
.stat .num { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; }
.stat .lbl { font-size: 0.83rem; color: var(--muted); font-weight: 600; }
.stat-accent { background: var(--grad); border: 0; color: #fff; }
.stat-accent .lbl { color: rgba(255, 255, 255, 0.8); }

.lead-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 14px; transition: 0.15s; }
.lead-card:hover { box-shadow: var(--shadow); }
.lead-card .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.lead-card .meta span { display: inline-flex; gap: 6px; align-items: center; }
.tag { display: inline-block; background: #f2f2ff; color: var(--primary-deep); border-radius: 999px; padding: 3px 12px; font-size: 0.78rem; font-weight: 700; }
.tag-warm { background: #fff1ef; color: #d84a3d; }
.tag-mint { background: #e4f9f2; color: #0d8b66; }
.locked-box { background: repeating-linear-gradient(45deg, #f7f7fd, #f7f7fd 12px, #f1f1fa 12px, #f1f1fa 24px); border: 1.5px dashed var(--line); border-radius: var(--radius-sm); padding: 22px; text-align: center; color: var(--muted); font-weight: 600; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.data td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.auth-wrap { max-width: 440px; margin: 60px auto 100px; padding: 0 20px; }
.auth-card { background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); padding: 38px; }
.auth-card h1 { font-size: 1.6rem; margin-bottom: 22px; }
.auth-alt { text-align: center; margin-top: 18px; font-size: 0.92rem; }

.flash { padding: 13px 0; font-weight: 600; font-size: 0.95rem; }
.flash-success { background: #e4f9f2; color: #0d8b66; }
.flash-error { background: #fdecea; color: #c0392b; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; text-align: center; position: relative; transition: 0.18s; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-card .price { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; margin: 10px 0 2px; }
.price-card .per { color: var(--muted); font-size: 0.88rem; }
.price-card .bonus { color: #0d8b66; font-weight: 700; font-size: 0.9rem; margin-top: 8px; }
.price-card.featured { border: 2px solid var(--primary); box-shadow: var(--shadow-lg); }
.price-card.featured::before { content: "★"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }

/* Quote-Editor */
.quote-items { width: 100%; border-collapse: collapse; }
.quote-items th { text-align: left; font-size: 0.78rem; color: var(--muted); padding: 6px 8px; }
.quote-items td { padding: 5px 4px; }
.quote-items input { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 11px; font: 500 0.93rem var(--font); }
.quote-items .qty { width: 74px; } .quote-items .price { width: 110px; }
.quote-items .line-total { text-align: right; font-weight: 700; white-space: nowrap; padding-right: 8px; }
.quote-totals { margin-left: auto; margin-top: 18px; max-width: 300px; font-size: 0.98rem; }
.quote-totals div { display: flex; justify-content: space-between; padding: 5px 0; }
.quote-totals .grand { border-top: 2px solid var(--ink); font-weight: 800; font-size: 1.1rem; margin-top: 6px; padding-top: 10px; }

/* Öffentliche Offerten-Seite */
.quote-public { max-width: 720px; margin: 46px auto; background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); padding: 46px; }
.quote-public header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 30px; gap: 20px; }

/* Cookie-Banner */
.cookie-banner {
  position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 300;
  display: flex; justify-content: center; animation: fadeUp 0.4s ease;
}
.cookie-inner {
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  padding: 22px 26px; max-width: 620px;
}
.cookie-inner p { font-size: 0.9rem; color: var(--ink-soft); margin: 8px 0 14px; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Footer */
.site-footer { background: var(--ink); color: #b9b8d9; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding: 56px 20px 34px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { font-size: 0.9rem; margin-top: 14px; max-width: 30em; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; transition: background .2s, transform .2s; }
.footer-social a:hover { background: var(--primary); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.site-footer h3 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; }
.site-footer nav a { display: block; color: #b9b8d9; padding: 4px 0; font-size: 0.92rem; }
.site-footer nav a:hover { color: #fff; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; }
.footer-bottom a { color: #b9b8d9; }

/* Scroll-Animationen */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .blob { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin: 0 auto; }
  .steps { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; padding: 40px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .portal-layout { grid-template-columns: 1fr; }
  .portal-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .portal-nav .sep { display: none; }
  .linklist { columns: 2; }
}
@media (max-width: 720px) {
  .main-nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 18px 24px; gap: 4px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 11px 0; font-size: 1.05rem; }
  .nav-toggle { display: block; }
  .hide-sm { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .linklist { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .lead-card { grid-template-columns: 1fr; }
  .quote-public { padding: 28px 20px; margin: 20px 12px; }
  .hero { padding: 44px 0 60px; }
}

/* ---------- Mobile-Feinschliff (verhindert Mindestbreiten > Viewport) ---------- */
.wrap, .header-inner, .hero-grid > *, .searchbox, .funnel-wrap, .portal-layout > * { min-width: 0; }
.searchbox input { min-width: 0; width: 100%; }
.main-nav .nav-langs { display: none; }
@media (max-width: 720px) {
  .header-inner { gap: 10px; }
  .header-actions { gap: 6px; }
  .lang-switch { display: none; }                       /* Sprachwahl wandert ins Menü */
  .header-actions .btn-primary { padding: 9px 14px; font-size: 0.86rem; }
  .brand-name { font-size: 1.15rem; }
  .brand { gap: 7px; }
  .brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
  .main-nav .nav-langs { display: flex; gap: 8px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); }
  .main-nav .nav-langs a { flex: 1; text-align: center; padding: 9px 0; border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.9rem; }
  .main-nav .nav-langs a.active { background: var(--grad); color: #fff; border-color: transparent; }
  .footer-bottom { flex-wrap: wrap; gap: 6px; }
  /* Mobile: finaler CTA volle Breite und gut antippbar; Zurück dezent darunter */
  .funnel-nav { flex-direction: column-reverse; }
  .funnel-nav .btn, .funnel-nav .btn-lg { padding: 14px 16px; font-size: 1rem; width: 100%; min-height: 50px; }
  .band::after { display: none; }
  .stat .num { font-size: 1.5rem; }
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
  .cookie-inner { padding: 16px 18px; }
  .cookie-actions .btn { flex: 1; padding: 10px 12px; font-size: 0.9rem; }
  .quote-public header { flex-direction: column; }
  .quote-public header > div:last-child { text-align: left; }
  .trust-row { gap: 10px; flex-direction: column; }
}
@media (max-width: 600px) {
  .searchbox { flex-direction: column; border-radius: 22px; padding: 10px; gap: 6px; }
  .searchbox input { padding: 12px 14px; }
  .searchbox .btn { width: 100%; }
  .search-suggest { top: calc(100% + 6px); }
  .hero-ctas .btn { width: 100%; }
  .btn-lg { padding: 14px 22px; font-size: 1rem; }
  h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .page-hero, .section { padding-left: 0; padding-right: 0; }
  .option-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid, .steps { grid-template-columns: 1fr; }
}
.main-nav .nav-mobile-only { display: none; }
@media (max-width: 720px) { .main-nav .nav-mobile-only { display: block; } }

/* ---------- Footer immer am Seitenende ---------- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main#main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; margin-top: 60px; }
.footer-bottom .dev-credit { color: #b9b8d9; }
.footer-bottom .dev-credit strong { color: #fff; font-weight: 700; }
.footer-bottom .dev-credit:hover { color: #fff; text-decoration: none; }
.welcome-note { display: flex; gap: 10px; align-items: flex-start; background: #e4f9f2; color: #0d8b66; border-radius: 14px; padding: 12px 16px; font-weight: 600; font-size: 0.95rem; margin: 0 0 22px; }
.welcome-note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.price-table td { padding: 14px 18px; }
.price-table th { padding: 12px 18px; }
.price-table tr:nth-child(even) td { background: #fafaff; }

.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-pick input { position: absolute; opacity: 0; pointer-events: none; }
.star-pick label { font-size: 1.7rem; color: #d7d7e4; cursor: pointer; transition: color 0.12s; line-height: 1; }
.star-pick label:hover, .star-pick label:hover ~ label,
.star-pick input:checked ~ label { color: #f5a623; }
.review-quote { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.review-quote p { color: var(--ink-soft); font-size: 0.95rem; margin: 8px 0 10px; }
.review-quote footer { color: var(--muted); font-size: 0.82rem; }
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none;
  text-align: center; background: linear-gradient(135deg, var(--primary), #9b46f5); color: #fff;
  font-weight: 700; padding: 15px 18px; border-radius: 14px; box-shadow: 0 8px 28px rgba(45,42,120,0.35);
  transform: translateY(140%); transition: transform 0.3s ease; text-decoration: none; }
.sticky-cta.visible { transform: translateY(0); }
@media (max-width: 720px) { .star-pick { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-pick input { position: absolute; opacity: 0; pointer-events: none; }
.star-pick label { font-size: 1.7rem; color: #d7d7e4; cursor: pointer; transition: color 0.12s; line-height: 1; }
.star-pick label:hover, .star-pick label:hover ~ label,
.star-pick input:checked ~ label { color: #f5a623; }
.review-quote { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.review-quote p { color: var(--ink-soft); font-size: 0.95rem; margin: 8px 0 10px; }
.review-quote footer { color: var(--muted); font-size: 0.82rem; }
.sticky-cta { display: block; left: auto; right: 12px; bottom: 12px; width: auto; max-width: calc(100vw - 24px); padding: 11px 18px; font-size: 0.92rem; border-radius: 999px; }
body:has(.sticky-cta.visible) .cookie-banner { bottom: 66px; }
#offibox { right: 10px; bottom: 10px; gap: 8px; }
.offib-toggle { width: 56px !important; height: 68px !important; }
body:has(.sticky-cta.visible) #offibox { display: none; } }
.guide-cta { background: linear-gradient(135deg, #f2f2ff, #fdf3ff); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 24px; margin: 26px 0; }
.guide-cta h3 { margin-bottom: 6px; }
.guide-cta p { color: var(--ink-soft); margin-bottom: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Trust-Zahlen Startseite */
.trust-stats-band{background:var(--surface,#fff);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;padding-top:26px;padding-bottom:26px;text-align:center}
.trust-stat strong{display:block;font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--primary);letter-spacing:-0.02em}
.trust-stat span{color:var(--muted);font-size:0.88rem}


/* Offi – Maskottchen & Conversion-Assistent */
#offibox{position:fixed;right:18px;bottom:18px;z-index:960;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.offib-toggle{width:76px;height:88px;border:none;background:none;cursor:pointer;padding:0;filter:drop-shadow(0 6px 14px rgba(22,20,63,0.25));transition:transform .2s}
.offib-toggle:hover{transform:scale(1.06) rotate(-2deg)}
.offib-toggle svg{width:100%;height:100%}
.offib-bubble{position:relative;max-width:250px;background:#fff;border:1px solid var(--line);border-radius:14px 14px 2px 14px;padding:12px 30px 12px 14px;font-size:0.88rem;color:var(--ink,#16143f);box-shadow:0 8px 24px rgba(22,20,63,0.14);animation:offibPop .25s ease}
.offib-bubble-close{position:absolute;top:4px;right:8px;border:none;background:none;font-size:1rem;color:var(--muted);cursor:pointer}
.offib-panel{width:min(320px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 34px rgba(22,20,63,0.18);padding:16px;animation:offibPop .25s ease;max-height:70vh;overflow-y:auto}
.offib-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.offib-panel-head button{border:none;background:none;font-size:1.3rem;color:var(--muted);cursor:pointer;line-height:1}
.offib-hello{color:var(--muted);font-size:0.85rem;margin-bottom:10px}
.offib-q{border-bottom:1px solid var(--line);padding:7px 0}
.offib-q summary{cursor:pointer;font-weight:600;font-size:0.88rem}
.offib-q p{color:var(--ink-soft,#444);font-size:0.85rem;margin-top:6px}
.offib-foot{color:var(--muted);font-size:0.72rem;margin-top:10px;text-align:center}
@keyframes offibPop{from{opacity:0;transform:translateY(8px) scale(0.96)}to{opacity:1;transform:none}}
@media (max-width:720px){.offib-toggle{width:60px;height:70px}#offibox{right:12px;bottom:74px}}
@media (prefers-reduced-motion:reduce){.offib-bubble,.offib-panel{animation:none}.offib-toggle{transition:none}}


/* Offi-Löwe: lebendige Zustände */
.offib-toggle{width:86px;height:104px}
#ofAll{transform-origin:70px 150px}
#ofArmR{transform-origin:98px 96px}
#ofArmL{transform-origin:42px 96px}
#ofLegL{transform-origin:59px 130px}
#ofLegR{transform-origin:80px 130px}
#ofTail{transform-origin:104px 118px}
#ofHead{transform-origin:70px 60px}
#ofEarL{transform-origin:46px 30px}
#ofEarR{transform-origin:94px 30px}
/* Dauerhaft: Atmen + Schwanz + Blinzeln */
#ofAll{animation:offiBreath 3.4s ease-in-out infinite}
#ofTail{animation:offiTail 2.6s ease-in-out infinite}
#ofLidL,#ofLidR{animation:offiBlink 4.6s infinite}
@keyframes offiBreath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.02)}}
@keyframes offiTail{0%,100%{transform:rotate(0deg)}50%{transform:rotate(9deg)}}
@keyframes offiBlink{0%,93%,100%{height:0}95%,98%{height:9px}}
/* Winken (beim Laden) */
.offi-wave #ofArmR{animation:offiWave 0.55s ease-in-out 4}
@keyframes offiWave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-95deg)}}
/* Warten: mit dem Fuss klopfen + Kopf leicht schief */
.offi-idle #ofLegL{animation:offiTap 0.55s ease-in-out infinite}
.offi-idle #ofHead{animation:offiHeadTilt 3.2s ease-in-out infinite}
@keyframes offiTap{0%,100%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(-9deg) translateY(-4px)}}
@keyframes offiHeadTilt{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-5deg)}}
/* Freier Fall (beim Scrollen): Arme hoch, Ohren/Mähne nach oben, Figur schwebt */
.offi-fall #ofAll{animation:none;transform:translateY(-12px) rotate(-6deg)}
.offi-fall #ofArmR{transform:rotate(-150deg)}
.offi-fall #ofArmL{transform:rotate(150deg)}
.offi-fall #ofEarL{transform:rotate(-18deg) translateY(-2px)}
.offi-fall #ofEarR{transform:rotate(18deg) translateY(-2px)}
.offi-fall #ofLegL{transform:rotate(14deg)}
.offi-fall #ofLegR{transform:rotate(-14deg)}
.offi-fall #ofTail{animation:offiTailFall 0.3s ease-in-out infinite}
.offi-fall #ofGround{opacity:0.25;transform:scale(0.7);transform-origin:70px 162px}
@keyframes offiTailFall{0%,100%{transform:rotate(16deg)}50%{transform:rotate(30deg)}}
#ofArmR,#ofArmL,#ofEarL,#ofEarR,#ofLegL,#ofLegR,#ofAll,#ofGround{transition:transform .28s ease,opacity .28s ease}
@media (prefers-reduced-motion:reduce){#ofAll,#ofTail,#ofLidL,#ofLidR,.offi-wave #ofArmR,.offi-idle #ofLegL,.offi-idle #ofHead,.offi-fall #ofTail{animation:none}}

/* Offi 3D */
.offib-toggle.offi3d-on{width:96px;height:116px}
.offib-toggle.offi3d-on canvas{display:block}

/* ---- Nachrichten (Anbieter <-> Kunde) ---- */
.msg-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.msg-empty { color: var(--muted); font-size: 0.92rem; padding: 14px 16px; background: var(--bg); border-radius: var(--radius-sm); }
.msg { max-width: 82%; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.msg-me { align-self: flex-end; background: #f2f2ff; border-color: #dcdcff; border-bottom-right-radius: 6px; }
.msg-them { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 6px; }
.msg-head { display: flex; justify-content: space-between; gap: 14px; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.msg-head strong { color: var(--ink); }
.msg-body { white-space: pre-line; line-height: 1.5; font-size: 0.95rem; word-break: break-word; }
.msg-quote { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 10px 14px; border: 1.5px solid var(--primary); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; }
.msg-quote:hover { box-shadow: var(--shadow); }
.msg-quote-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-deep); font-weight: 700; }
.msg-warn { margin-top: 8px; font-size: 0.78rem; color: #c0392b; }
.msg-form textarea { width: 100%; }
.msg-unread-card { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 91, 247, 0.12); }
.nav-badge { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 0.72rem; font-weight: 800; text-align: center; margin-left: auto; }
@media (max-width: 720px) { .msg { max-width: 96%; } }

.msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; font-size: 0.85rem; }
.msg-file:hover { border-color: var(--primary); text-decoration: none; box-shadow: var(--shadow); }
.msg-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; font-weight: 600; }
.msg-file-size { color: var(--muted); font-size: 0.76rem; }
.msg-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.msg-upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.msg-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px dashed var(--line); border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 0.86rem; color: var(--primary-deep); background: #fbfbff; }
.msg-upload-btn:hover { border-color: var(--primary); }
.msg-upload-names { font-size: 0.84rem; color: var(--ink-soft); }
.msg-upload-hint { font-size: 0.76rem; color: var(--muted); flex-basis: 100%; }

/* ---- Startseite: Preisrechner-Teaser ---- */
.home-calc { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 36px 40px; text-decoration: none; color: inherit; transition: .2s; box-shadow: var(--shadow); }
.home-calc:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #cfcfff; }
.home-calc-eyebrow { display: inline-block; background: #f2f2ff; color: var(--primary-deep); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; font-weight: 700; margin-bottom: 14px; }
.home-calc h2 { margin-bottom: 10px; }
.home-calc p { color: var(--ink-soft); max-width: 36em; margin-bottom: 20px; }
.home-calc-sub { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 10px; }
.home-calc-visual { display: flex; justify-content: center; }
.hcv-card { width: 100%; max-width: 360px; background: linear-gradient(160deg, #16143f, #2b2680 60%, #4a3fb5); color: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 30px 60px -30px rgba(22,20,63,0.6); transform: rotate(-2deg); }
.home-calc:hover .hcv-card { transform: rotate(0) scale(1.02); transition: .25s; }
.hcv-k { font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; font-weight: 700; }
.hcv-big { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 16px; }
.hcv-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.14); }
.hcv-fill { position: absolute; left: 18%; right: 44%; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #19c894, #ffb020 55%, #ff6b5e); }
.hcv-dot { position: absolute; left: 37%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; border: 4px solid var(--amber); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.hcv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hcv-chips span { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; }
@media (max-width: 860px) { .home-calc { grid-template-columns: 1fr; padding: 26px 22px; } .hcv-card { transform: none; } }

/* ---- Funnel-Optimierung 02.09.2026 ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.funnel-progress-wrap { margin: 22px 0 30px; }
.funnel-progress-wrap .funnel-progress { margin: 0 0 8px; }
.funnel-progress-label { font-size: 0.82rem; font-weight: 700; color: var(--primary-deep); letter-spacing: 0.02em; }
.funnel-sub { color: var(--ink-soft); font-size: 1rem; margin: 0; }
.funnel-q-small { font-size: 1.05rem; margin: 26px 0 12px; }
.funnel-opt { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-left: 6px; }
.funnel-chips-label { font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); margin: 4px 0 10px; }
.desc-soft { font-size: 0.85rem; margin-top: 6px; padding: 8px 12px; border-radius: 10px; }
.desc-soft-ok { background: #eefcf6; color: #116649; }
.desc-soft-good { background: #f2f2ff; color: var(--primary-deep); }
.desc-tools { margin-top: 8px; }
.option-card-sm { padding: 13px 10px; font-size: 0.86rem; }
.option-grid-timing { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.funnel-trust { list-style: none; margin: 18px 0 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt, #f7f7fd); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.funnel-trust li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; font-weight: 600; }
.funnel-trust svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--mint, #19c894); }
.funnel-submit { width: 100%; justify-content: center; text-align: center; }
.funnel-nav .btn-ghost { flex: none; }
@media (max-width: 720px) {
  .funnel-wrap { padding: 26px 16px 70px; }
  #funnelHead h1 { font-size: 1.5rem !important; }
  .funnel-q { font-size: 1.15rem; }
  .field input, .field textarea, .field select { font-size: 16px; padding: 14px 16px; }   /* kein iOS-Auto-Zoom, gute Touch-Fläche */
  .option-card { min-height: 52px; }
  .chips .chip { padding: 10px 14px; font-size: 0.9rem; min-height: 44px; display: inline-flex; align-items: center; }
  .funnel-wrap .btn-sm { min-height: 44px; padding: 10px 16px; }
  #offiWriteUndo { padding: 10px 6px; min-height: 44px; }
  body.kbd-open .funnel-nav { position: static; }   /* Tastatur offen: Buttons nicht über dem Eingabefeld schweben lassen */
  .funnel-trust { grid-template-columns: 1fr; }
  .option-grid-timing { grid-template-columns: 1fr 1fr; }
  .funnel-nav { position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(247,247,253,0) 0%, var(--bg) 30%); padding: 14px 0 10px; margin-top: 22px; z-index: 5; }
  .funnel-nav .btn-ghost { padding: 10px 16px; min-height: 44px; font-size: 0.92rem; }
}
.done-steps { list-style: none; margin: 22px auto 0; padding: 0; max-width: 420px; text-align: left; display: grid; gap: 10px; }
.done-steps li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 0.95rem; }
.done-step-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 0.82rem; font-weight: 800; flex: none; }
/* Mobile: Offi nicht über den Funnel-Buttons */
/* Desktop/Tablet: sobald die Sticky-CTA unten rechts sichtbar ist, rückt Offi darüber (keine Überlappung) */
@media (min-width: 721px) { body:has(.sticky-cta.visible) .offi-root, body:has(.sticky-cta.visible) #offibox { bottom: 96px !important; } }
/* Mobile im Funnel: Button-Leiste ist immer sichtbar, deshalb kein Offi (entweder Offi oder Buttons) */
@media (max-width: 720px) { body:has(.funnel-wrap) .offi-root, body:has(.funnel-wrap) #offibox { display: none !important; } }
/* Mobile: Offi kleiner und nie gleichzeitig mit der Sticky-CTA (entweder Offi oder Button) */
@media (max-width: 720px) {
  .offi-root { transform: scale(0.62); transform-origin: bottom right; right: 8px !important; bottom: 8px !important; }
  body:has(.sticky-cta.visible) .offi-root, body:has(.sticky-cta.visible) #offibox { display: none !important; }
}

/* ---- Positionierung & Conversion 02.09.2026 ---- */
.hero-note { margin-top: 12px; color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }
.prov-entry { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none !important; max-width: 520px; transition: .15s; font-size: 0.92rem; }
.prov-entry:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.prov-entry-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--grad-warm); color: #fff; display: grid; place-items: center; flex: none; }
.prov-entry-ic svg { width: 20px; height: 20px; }
.prov-entry-arrow { margin-left: auto; color: var(--primary-deep); font-weight: 800; }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }
.why-col { border-radius: var(--radius); padding: 26px 28px; }
.why-col h3 { margin-bottom: 14px; }
.why-col ul { list-style: none; display: grid; gap: 10px; }
.why-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.why-col svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--mint); }
.why-col-o { background: #fff; border: 2px solid var(--primary); box-shadow: var(--shadow); }
.why-col-c { background: var(--bg); border: 1px solid var(--line); color: var(--ink-soft); }
.why-dash { color: var(--muted); font-weight: 800; }
.logo-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 34px; align-items: center; }
.logo-strip img { height: 40px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: .2s; }
.logo-strip a:hover img { filter: none; opacity: 1; }
.logo-strip.pp-logos a { display: inline-flex; padding: 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.logo-strip.pp-logos a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.logo-strip.pp-logos img { filter: none; opacity: 1; height: 44px; max-width: 160px; }
.band-checks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0 0 22px; position: relative; z-index: 1; }
.band-checks li { display: flex; gap: 8px; align-items: center; color: #fff; font-weight: 600; font-size: 0.92rem; }
.band-checks svg { width: 16px; height: 16px; color: #8ff5d2; flex: none; }
.band-link { display: inline-block; margin-left: 14px; color: #c9c8e4; font-weight: 600; position: relative; z-index: 1; }
.check-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0 0 24px; }
.check-grid li { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 0.95rem; }
.check-grid svg, .check-list svg { width: 18px; height: 18px; color: var(--mint); flex: none; }
.check-list { list-style: none; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.how-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: none; }
.how-steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; font-weight: 700; font-size: 0.95rem; }
.how-no { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 0.85rem; font-weight: 800; }
.price-logic { max-width: 760px; margin: 0 auto 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; }
.price-logic ul { margin: 10px 0 0 20px; color: var(--ink-soft); display: grid; gap: 6px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.onb-card { border: 2px solid var(--primary); background: linear-gradient(135deg, #f4f4ff, #fdf6ff); margin-bottom: 22px; }
.onb-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.onb-steps li { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-weight: 600; font-size: 0.9rem; }
.onb-steps li.done { color: #0d8b66; }
.onb-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.78rem; font-weight: 800; flex: none; }
.onb-steps li.done .onb-no { background: var(--mint); }
.slot-warn { color: #d84a3d; font-weight: 700; }
.funnel-fb { margin-top: 6px; font-size: 0.85rem; font-weight: 700; color: #0d8b66; animation: fadeUp .3s ease; }
.funnel-details { display: grid; gap: 10px; margin: 8px 0 4px; }
.fd-label { font-size: 0.84rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.fd-input { width: 100%; max-width: 440px; padding: 10px 12px; border: 1px solid var(--line, #e7e6f4); border-radius: 10px; font: inherit; font-size: 0.95rem; background: #fff; }
.fd-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 91, 247, .15); }
.fd-error { display: none; color: var(--coral, #d84a3d); font-size: 0.82rem; margin-top: 5px; }
.fd-q.invalid .fd-label { color: var(--coral, #d84a3d); }
.fd-q.invalid .fd-error { display: block; }
.fd-q.invalid .fd-input { border-color: var(--coral, #d84a3d); }
.fd-summary-error { color: var(--coral, #d84a3d); font-weight: 700; font-size: 0.9rem; margin: 6px 0 8px; }
.fd-hint { font-size: 0.8rem; color: var(--muted); margin: -4px 0 6px; }
.fd-why { font-size: 0.86rem; color: var(--ink-soft); background: #f2f2ff; border: 1px solid #dcdcff; border-radius: 10px; padding: 9px 12px; margin: 8px 0 10px; }
.fd-progress { font-size: 0.85rem; font-weight: 700; color: var(--primary-deep, #4a4ad9); margin: 8px 0 4px; }
.fd-progress.done { color: #0d8b66; }
.fd-input[type="date"] { max-width: 240px; }
.funnel-trust-line { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 10px; }
/* Ads-Landingpage: Hauptnavigation ausgeblendet (nur dieser Aufruf), Logo + CTA bleiben */
body.lp-ads .main-nav, body.lp-ads .nav-toggle, body.lp-ads .header-actions .hide-sm { display: none !important; }
/* Entwurf fortsetzen (nicht aufdringlich, einmal pro Sitzung) */
.resume-bar { background: #f2f2ff; border-bottom: 1px solid #dcdcff; font-size: 0.9rem; }
.resume-bar .wrap { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 16px; }
.resume-bar .btn { padding: 8px 16px; font-size: 0.88rem; min-height: 40px; }
.resume-bar .linkbtn { color: var(--muted); }
.resume-bar .chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.exit-survey { margin-top: 14px; border-top: 1px solid var(--line, #e7e6f4); padding-top: 12px; }
.exit-survey p { font-size: 0.9rem; margin-bottom: 8px; }
.exit-survey .chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* Startseiten-Suche: kein Treffer */
.search-suggest .search-none { padding: 12px 18px; color: var(--ink-soft); font-size: 0.9rem; }
.search-suggest .search-none .btn { margin-top: 8px; }
.search-suggest button small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.chip-sm { padding: 7px 12px; font-size: 0.85rem; }
.req-preview { background: #f2f2ff; border: 1px solid #dcdcff; border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; }
.req-preview-k { font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--primary-deep); margin-bottom: 6px; }
.req-preview p { white-space: pre-line; font-size: 0.95rem; margin-bottom: 8px; }
.req-preview-actions { display: flex; gap: 12px; align-items: center; }
.linkbtn { border: none; background: none; color: var(--primary-deep); font-weight: 700; cursor: pointer; text-decoration: underline; font-size: 0.88rem; padding: 0; }
@media (max-width: 960px) { .steps-4 { grid-template-columns: 1fr 1fr; } .how-steps { grid-template-columns: repeat(2, 1fr); } .two-col { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } .steps-4 { grid-template-columns: 1fr; } .how-steps { grid-template-columns: 1fr; } .check-grid, .band-checks { grid-template-columns: 1fr; } .band-link { display: block; margin: 12px 0 0; } }
/* Header zwischen Mobile-Menü (≤720px) und Desktop: längerer CTA-Text darf nicht überlaufen */
@media (min-width: 721px) and (max-width: 1180px) {
  .header-inner { gap: 14px; }
  .main-nav { gap: 13px; }
  .main-nav a { font-size: 0.86rem; white-space: nowrap; }
  .lang-switch a { padding: 4px 7px; }
  .header-actions .btn { padding: 9px 13px; font-size: 0.85rem; white-space: nowrap; }
}
/* Mobile: lange Button-Texte (FR/IT) umbrechen statt überlaufen */
@media (max-width: 720px) {
  /* Lange Button-Texte (FR/IT) umbrechen statt überlaufen */
  .btn-primary, .btn-lg, .btn-ghost, .quickstart .btn { white-space: normal !important; max-width: 100% !important; box-sizing: border-box; text-align: center; }
  .quickstart .btn { flex: 1 1 100%; }
  .sticky-cta { white-space: normal !important; max-width: calc(100vw - 24px); text-align: center; }
}
@media (max-width: 420px) {
  .header-inner { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .brand { gap: 6px; }
  .brand-name { font-size: 1.02rem; }
  .header-actions .btn-primary, .header-actions .btn { padding: 8px 10px; font-size: 0.78rem; }
}
@media (min-width: 721px) and (max-width: 960px) {
  .header-actions .hide-sm { display: none; }            /* «Anmelden» wandert in die Hauptnavigation */
  .main-nav .nav-mobile-only { display: inline; }
  .main-nav a { font-size: 0.82rem; }
  .brand-name { font-size: 1.15rem; }
}

/* ---- Fotos/Pläne im Funnel und Rückruf-Option ---- */
.photo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.photo-item { position: relative; width: 86px; height: 86px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-doc { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.4rem; gap: 2px; }
.photo-doc small { font-size: 0.62rem; color: var(--muted); padding: 0 4px; text-align: center; word-break: break-all; }
.photo-rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(18,16,61,.75); color: #fff; font-size: 14px; line-height: 22px; cursor: pointer; padding: 0; }
.cb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cb-cards .option-card { text-align: left; display: flex; flex-direction: column; gap: 3px; }
.cb-cards .option-card small { font-weight: 500; color: var(--muted); font-size: 0.78rem; }
label.cb-required::after { content: " *"; color: #c2410c; }
.lead-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lead-photo { width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #f4f4fb; display: flex; align-items: center; justify-content: center; text-decoration: none !important; color: var(--ink); }
.lead-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: .2s; }
.lead-photo:hover img { transform: scale(1.04); }
.lead-photo-doc { flex-direction: column; font-size: 1.5rem; gap: 2px; }
.lead-photo-doc small { font-size: 0.62rem; color: var(--muted); padding: 0 6px; text-align: center; }
.lead-photos-locked .lead-photo { filter: grayscale(1); opacity: .6; font-size: 1.3rem; }
@media (max-width: 520px) { .cb-cards { grid-template-columns: 1fr; } }

/* ---- Anbieterverzeichnis: Karte im Offrendo-Look (Indigo-Grund, violetter Schimmer, pulsierende Punkte) ---- */
.dir-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dir-filter .chip { cursor: pointer; }
.dir-meta { color: var(--muted); font-size: 0.85rem; }
.dir-meta span { color: var(--ink); font-weight: 700; }
.dir-map-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid #2a2766; box-shadow: 0 24px 60px rgba(18,16,61,.35); background: #12103d; }
.dir-map { height: 620px; width: 100%; z-index: 0; background: #0a0922; }
/* Kacheln → dunkles Indigo; darüber ein weicher Verlauf in den Markenfarben */
/* Filter je Kachel; Kacheln 1 px überlappen lassen, sonst zeichnen sich bei manchen Zoomstufen helle Nähte ab */
.dir-map .leaflet-tile { filter: grayscale(1) invert(1) brightness(.72) contrast(1.15); width: 257px !important; height: 257px !important; }
.dir-map { background: #0e0e10; }
.dir-map-wrap::before { content: ""; position: absolute; inset: 0; z-index: 350; pointer-events: none; background: linear-gradient(135deg, rgba(91,91,247,.35), rgba(155,70,245,.28) 55%, rgba(25,200,148,.18)); mix-blend-mode: overlay; }
.dir-map-wrap::after { content: ""; position: absolute; inset: 0; z-index: 350; pointer-events: none; box-shadow: inset 0 0 90px rgba(18,16,61,.55); }
.dir-map .leaflet-control-zoom a { background: rgba(18,16,61,.85); color: #fff; border-color: rgba(255,255,255,.12); }
.dir-map .leaflet-control-zoom a:hover { background: var(--primary); }
.dir-map .leaflet-bar { border: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.dir-map .leaflet-control-attribution { background: rgba(18,16,61,.7); color: #c9c8e4; font-size: 10px; }
.dir-map .leaflet-control-attribution a { color: #fff; }
.dir-zoom { position: absolute; top: 12px; right: 12px; z-index: 500; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(18,16,61,.85); cursor: pointer; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.dir-zoom:hover { background: var(--primary); }
.dir-zoom svg { width: 20px; height: 20px; }
/* Pulsierende, leuchtende Punkte */
.dir-pin-wrap { background: none; border: none; }
.dir-pin { position: relative; display: block; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box; }
.dir-pin::before, .dir-pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(25,200,148,.9), rgba(25,200,148,0) 70%); animation: dirPulse 2.4s ease-out infinite; pointer-events: none; }
.dir-pin::after { animation-delay: 1.2s; }
.dir-pin-core { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #19c894; border: 2px solid #fff; box-shadow: 0 0 10px 3px rgba(25,200,148,.9), 0 0 24px 6px rgba(25,200,148,.45); transition: transform .15s; }
.dir-pin-logo { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff center/78% no-repeat; border: 2px solid #fff; box-shadow: 0 0 0 2px #9b46f5, 0 0 14px 4px rgba(155,70,245,.85), 0 0 28px 8px rgba(155,70,245,.4); transition: transform .15s; }
.dir-pin.has-logo::before, .dir-pin.has-logo::after { background: radial-gradient(circle, rgba(155,70,245,.85), rgba(155,70,245,0) 70%); }
.leaflet-marker-icon:hover .dir-pin-core, .leaflet-marker-icon:hover .dir-pin-logo { transform: scale(1.25); }
@keyframes dirPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dir-pin::before, .dir-pin::after { animation: none; opacity: .35; transform: scale(1.4); } }
/* Karte (Popup) */
.dir-popup .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 20px 50px rgba(18,16,61,.45); padding: 0; border: 1px solid #e6e6f5; }
.dir-popup .leaflet-popup-tip { box-shadow: none; }
.dir-popup .leaflet-popup-content { margin: 14px 16px; font-family: inherit; line-height: 1.35; }
.dir-pop { display: flex; gap: 12px; align-items: flex-start; }
.dir-pop-logo { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 4px; flex: none; }
.dir-pop-initial { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), #9b46f5); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; flex: none; }
.dir-pop-body { min-width: 0; }
.dir-pop-name { font-weight: 800; font-size: 1rem; color: var(--ink) !important; display: block; }
.dir-pop-name:hover { color: var(--primary-deep) !important; }
.dir-pop-place { color: var(--muted); font-size: 0.85rem; }
.dir-pop-cats { color: var(--ink-soft); font-size: 0.8rem; margin-top: 4px; }
.dir-pop-rating { font-size: 0.8rem; margin-top: 4px; color: var(--muted); }
.dir-pop-btn { margin-top: 10px; text-decoration: none !important; color: #fff !important; }
.dir-list { margin-top: 26px; }
.dir-list > summary { cursor: pointer; font-weight: 700; color: var(--primary-deep); padding: 10px 0; }
@media (max-width: 720px) { .dir-map { height: 58vh; min-height: 360px; max-height: 480px; } }
.dir-map-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 400; background: rgba(18,16,61,.85); color: #fff; font-size: 0.8rem; padding: 7px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; }

/* ---- Conversion 03.09.2026: Hero-CTA, Sticky-CTA Desktop, Funnel-Microcopy, Exit-Hinweis ---- */
.hero-fast { font-weight: 700; color: var(--ink); margin: -6px 0 18px; font-size: 1.05rem; }
.btn-hero { font-size: 1.12rem; padding: 17px 30px; box-shadow: 0 12px 30px rgba(91,91,247,.35); }
.hero-or { color: var(--muted); font-size: 0.85rem; margin: 22px 0 8px; }
.searchbox-alt { max-width: 520px; }
.searchbox-alt .btn { white-space: nowrap; }
.funnel-time { margin-top: 6px; font-size: 0.82rem; color: var(--muted); }
.after-box { background: #f2f2ff; border: 1px solid #dcdcff; border-radius: 14px; padding: 14px 18px; margin: 6px 0 16px; }
.after-title { font-weight: 800; margin-bottom: 8px; }
.after-steps { margin: 0 0 8px 20px; display: grid; gap: 4px; font-size: 0.92rem; color: var(--ink-soft); }
.after-note { font-weight: 700; color: #0d8b66; font-size: 0.9rem; }
.exit-modal[hidden] { display: none !important; }
.exit-modal { position: fixed; inset: 0; z-index: 900; background: rgba(18,16,61,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.exit-card { background: #fff; border-radius: 18px; padding: 28px 30px; max-width: 440px; width: 100%; box-shadow: var(--shadow-lg); animation: fadeUp .25s ease; }
.exit-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; }
.exit-card p { color: var(--ink-soft); margin-bottom: 18px; }
.exit-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (min-width: 721px) {
  .sticky-cta { display: block; left: auto; right: 24px; bottom: 24px; width: auto; padding: 14px 24px; border-radius: 999px; }
  body:has(.funnel-wrap) .sticky-cta { display: none; }
}
@media (max-width: 720px) { .btn-hero { width: 100%; } .after-steps { font-size: 0.88rem; } }

/* ---- Weitere Hebel 03.09.2026 ---- */
.cat-suggest { outline: 3px solid var(--primary); outline-offset: 2px; }
.email-suggest { display: block; margin-top: 6px; border: 1px solid #f5d38a; background: #fff8e6; color: #7a4b00; border-radius: 8px; padding: 6px 10px; font-size: 0.85rem; cursor: pointer; text-align: left; }
.lang-hint { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 90; background: #12103d; color: #fff; border-radius: 999px; padding: 8px 12px 8px 16px; display: flex; align-items: center; gap: 10px; font-size: 0.88rem; box-shadow: 0 10px 30px rgba(18,16,61,.35); max-width: calc(100% - 24px); }
.lang-hint a { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lang-hint button { background: rgba(255,255,255,.15); color: #fff; border: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; }
#catFilter { min-height: 48px; }

/* ---- Premium-Partner ---- */
.tag-premium { background: linear-gradient(135deg, #fff3d6, #ffe4a8); color: #7a4b00; border: 1px solid #f2c96b; font-weight: 800; }

/* ---- GEO/AI-Search 03.09.2026 ---- */
.entity-section { padding: 34px 0 10px; }
.entity-text { font-size: 1.08rem; color: var(--ink); max-width: 46em; line-height: 1.6; margin: 10px 0 12px; }
.entity-links { color: var(--muted); font-size: 0.92rem; }
.entity-links a { font-weight: 700; }
.qa { margin: 0 0 26px; }
.qa h2 { font-size: 1.25rem; margin-bottom: 8px; }
.qa p { color: var(--ink-soft); line-height: 1.6; max-width: 62em; }
.answer-first { font-weight: 600; color: var(--ink); }
.facts-table td { padding: 8px 10px; }
.cmp-table th, .cmp-table td { vertical-align: top; }
.cmp-table .cmp-off { background: #f2f2ff; font-weight: 700; }

/* Öffentliches Anbieterprofil (SEO-Struktur) */
.pp-list { list-style: none; padding: 0; margin: 0; }
.pp-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.pp-list li:last-child { border-bottom: none; }
.pp-list-cols { columns: 2; column-gap: 28px; }
.pp-list-cols li { break-inside: avoid; }
.pp-similar { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pp-sim { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.pp-sim:hover { box-shadow: 0 6px 20px rgba(18,16,61,.08); }
.pp-sim img, .pp-sim-initial { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); flex: none; }
.pp-sim-initial { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), #9b46f5); color: #fff; font-weight: 800; border: none; }
.pp-sim span small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.vis-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.vis-row input, .vis-row textarea { flex: 1; min-width: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.vis-row textarea { min-height: 64px; }
.svc-group[hidden] { display: none; }
@media (max-width: 720px) { .pp-list-cols { columns: 1; } }

/* Preisstufe für Erstzugriff (reduziert/kostenlos) */
.price-deal{background:linear-gradient(120deg,#19c894,#0fa77a) !important;}

/* Web-Push-Karte */
.push-status{color:var(--muted)}.push-status.push-ok{color:#0f8a63}.push-status.push-warn{color:#b26a00}
.push-card.push-compact{border:1px solid #d9d9ff;background:linear-gradient(135deg,#f4f4ff,#fdf6ff)}

/* Ankündigungs-Dialog Portal */
.ann-backdrop{position:fixed;inset:0;background:rgba(18,16,61,.55);z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.ann-box{background:#fff;color:#12103d;border-radius:18px;max-width:560px;width:100%;padding:24px 26px;box-shadow:0 24px 60px rgba(18,16,61,.35);max-height:92vh;overflow:auto}
.ann-backdrop.ann-hide{display:none}
@media (max-width:480px){.ann-box{padding:18px 16px;border-radius:14px}}

/* hidden-Attribut gewinnt immer gegen display-Regeln der Komponenten (Push-Karte, Dialoge) */
[hidden]{display:none !important}

/* Startseite: Live-Ticker offener Anfragen (dezent, aber klar sichtbar; Einträge gleiten durch) */
.live-ticker{display:flex;align-items:center;gap:12px;margin-top:22px;padding:10px 16px 10px 14px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(91,91,247,.22);box-shadow:0 6px 18px rgba(18,16,61,.06);font-size:.95rem;color:var(--ink);width:fit-content;max-width:100%;overflow:hidden}
.live-dot{width:9px;height:9px;border-radius:50%;background:#19c894;box-shadow:0 0 0 0 rgba(25,200,148,.6);animation:livePulse 2.4s infinite;flex:none}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(25,200,148,.55)}70%{box-shadow:0 0 0 8px rgba(25,200,148,0)}100%{box-shadow:0 0 0 0 rgba(25,200,148,0)}}
.live-label{font-weight:700;white-space:nowrap;color:var(--ink);padding-right:12px;border-right:1px solid rgba(91,91,247,.2)}
.live-items{display:grid;flex:0 0 auto;min-height:1.45em;line-height:1.45em}
.live-item{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateX(28px);transition:opacity .5s ease,transform .5s ease;font-weight:600;color:var(--primary);pointer-events:none}
.live-item.is-on{opacity:1;transform:none;pointer-events:auto}
@media (max-width:640px){.live-ticker{width:100%;font-size:.88rem;gap:10px;padding:9px 12px;flex-wrap:wrap}.live-label{border-right:0;padding-right:0}.live-items{flex-basis:100%}.live-item{white-space:normal}}
/* Lead Sales Engine – Portal-Vorschau */
.lv-box{background:linear-gradient(135deg,#f4f4ff,#f7fdf9);border:1px solid #e3e3fb;border-radius:14px;padding:14px 16px;margin:0 0 16px}
.lv-facts ul{margin:6px 0 10px;padding-left:20px;line-height:1.5}
.lv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:4px 0 10px}
.lv-kpis>div{background:#fff;border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.lv-k{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.lv-v{font-weight:700}
.lv-good{color:#0f8a63}
.lv-roi{margin:0;font-size:.92rem}
.lv-line{margin:6px 0 0;font-size:.85rem;color:var(--ink-soft)}

/* Startseite: Live-Band «Bei Offrendo läuft was» */
.live-band{position:relative;overflow:hidden;background:linear-gradient(135deg,#12103d 0%,#2a1f7a 55%,#5b3fb8 100%);color:#fff;padding:44px 0 36px}
.live-band::after{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;height:120%;background:radial-gradient(circle,rgba(25,200,148,.28),transparent 60%);pointer-events:none}
.live-band .wrap{position:relative;z-index:1}
.live-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.live-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.live-badge .live-dot{width:9px;height:9px;border-radius:50%;background:#19c894;box-shadow:0 0 0 0 rgba(25,200,148,.6);animation:livePulse 2.4s infinite}
.live-head h2{margin:12px 0 6px;font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;letter-spacing:-.01em}
.live-sub{margin:0;color:rgba(255,255,255,.82);font-size:1rem}
.live-sub strong{color:#fff;font-size:1.08rem}
.live-head-r{display:flex;gap:10px;flex-wrap:wrap}
.live-band .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
.live-band .btn-ghost:hover{background:rgba(255,255,255,.2)}
.live-track-wrap{overflow:hidden;margin:0 -8px;padding:6px 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.live-track{display:flex;gap:14px;width:max-content;animation:liveScroll 46s linear infinite}
.live-track-wrap:hover .live-track,.live-track-wrap:focus-within .live-track{animation-play-state:paused}
@keyframes liveScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.live-track{animation:none}.live-track-wrap{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-bottom:10px}.live-card[aria-hidden]{display:none}}
.live-card{flex:0 0 250px;background:#fff;color:var(--ink);border-radius:16px;padding:14px 16px;box-shadow:0 10px 26px rgba(10,8,40,.28);display:flex;flex-direction:column;gap:8px}
.live-card-top{display:flex;gap:12px;align-items:center}
.live-card-ic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#eef0ff,#f6efff);display:flex;align-items:center;justify-content:center;color:var(--primary);flex:none}
.live-card-ic svg{width:26px;height:26px}
.live-card-top strong{display:block;font-size:1rem;line-height:1.2}
.live-card-n{display:block;color:#0f8a63;font-weight:700;font-size:.88rem;margin-top:2px}
.live-card-reg{margin:0;color:var(--muted);font-size:.8rem}
.live-card-cta{display:flex;gap:8px;margin-top:auto}
.live-card-cta .btn{flex:1;justify-content:center;padding:8px 6px;font-size:.8rem;white-space:nowrap}
.live-card .btn-ghost{background:#f4f4ff;color:var(--primary);border-color:transparent}
.live-feed{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:.88rem;color:rgba(255,255,255,.85)}
.live-feed-t{font-weight:700;color:#fff;white-space:nowrap}
.live-feed ul{list-style:none;margin:0;padding:0;display:flex;gap:8px 18px;flex-wrap:wrap}
.live-feed li{white-space:nowrap}
.live-feed-ago{color:#19c894;font-weight:700}
@media (max-width:640px){.live-band{padding:32px 0 26px}.live-head-r .btn{flex:1;justify-content:center}.live-card{flex-basis:220px}.live-feed{gap:8px}.live-feed li{white-space:normal}}

/* Admin: Zielgruppen-Wähler */
.tp-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:190px;overflow:auto;padding:8px;border:1px solid var(--line,#e7e6f4);border-radius:10px;background:#fff}
.tp-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#f4f4ff;font-size:.82rem;cursor:pointer;user-select:none;border:1px solid transparent}
.tp-chip:has(input:checked){background:#5b5bf7;color:#fff}
.tp-chip input{margin:0}
.tp-chip span{color:inherit;opacity:.75;font-size:.76rem}
.tp-count{margin-top:12px;padding:10px 14px;border-radius:10px;background:#f7f7fd;border:1px solid var(--line,#e7e6f4)}
.tp-count-main{font-size:.95rem}

/* Lead freischalten: normal vs. exklusiv sichern */
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.buy-grid-1{grid-template-columns:1fr;max-width:520px}
@media (max-width:720px){.buy-grid{grid-template-columns:1fr}}
.buy-opt{border:1.5px solid var(--line,#e7e6f4);border-radius:14px;padding:16px 18px;background:#fff;display:flex;flex-direction:column;gap:10px}
.buy-opt-excl{border-color:#c9c3f5;background:linear-gradient(135deg,#f6f5ff,#fbf7ff);box-shadow:0 8px 22px rgba(91,91,247,.10)}
.buy-opt-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.buy-opt-h span{font-weight:800;font-size:1.02rem;display:inline-flex;align-items:center;gap:8px}
.buy-opt-h strong{font-size:1.15rem;color:var(--primary)}
.buy-lock{width:20px;height:20px;color:var(--violet,#9b46f5)}
.buy-opt p{margin:0;color:var(--ink-soft);font-size:.92rem}
.buy-opt-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.buy-opt-actions .btn{padding:10px 14px;font-size:.9rem}
.btn-excl{background:linear-gradient(120deg,#12103d,#5b3fb8);color:#fff;border:none}
.btn-excl:hover{filter:brightness(1.08)}
.buy-opt-note{font-size:.78rem !important;color:var(--muted) !important}
.tag-excl{background:#12103d;color:#fff}

/* ===== Premium Partner – bezahlte, gekennzeichnete Platzierung (Corporate Design) ===== */
.pp-block{position:relative;margin:34px 0 10px;padding:30px 30px 22px;border-radius:var(--radius);background:linear-gradient(135deg,#f6f5ff 0%,#fbf7ff 55%,#f3fbf8 100%);border:1px solid #ebe8fb;overflow:hidden}
.pp-block::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.pp-head{max-width:720px;margin-bottom:20px}
.pp-kicker{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--grad);border-radius:999px;padding:5px 12px;margin-bottom:12px;box-shadow:0 6px 16px -8px rgba(91,91,247,.7)}
.pp-title{margin:0;font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pp-sub{margin:6px 0 0;color:var(--ink-soft);font-size:.93rem;line-height:1.5}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.pp-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.pp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d9d6fb}
.pp-badge{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deep);background:#eeeeff;border:1px solid #dcdcfc;border-radius:999px;padding:3px 10px;margin-bottom:6px}
.pp-banner{width:calc(100% + 44px);max-width:none;margin:-22px -22px 0;height:150px;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;display:block}
.pp-top{display:flex;gap:14px;align-items:center}
.pp-logo{flex:none;width:64px;height:64px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 12px -6px rgba(22,20,63,.25)}
.pp-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.pp-logo-ph{font-weight:800;font-size:1.5rem;color:#fff;background:var(--grad);border:none}
.pp-id{min-width:0}
.pp-card h3{margin:0;font-size:1.08rem;line-height:1.25;color:var(--ink);font-weight:800}
.pp-company{font-size:.8rem;color:var(--muted);margin-top:2px}
.pp-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;font-size:.82rem;color:var(--muted)}
.pp-city{display:inline-flex;align-items:center;gap:4px}
.pp-city svg{width:14px;height:14px;color:var(--primary)}
.pp-rating b{color:var(--ink);font-weight:700}
.pp-rating span{color:var(--muted)}
.pp-text{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.pp-svc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:.88rem;color:var(--ink-soft)}
.pp-svc li{display:flex;align-items:center;gap:8px}
.pp-svc svg{flex:none;width:16px;height:16px;padding:2px;border-radius:50%;color:#fff;background:var(--mint)}
.pp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.pp-actions .btn{flex:1 1 auto;justify-content:center;text-align:center;padding:10px 14px;font-size:.88rem;white-space:nowrap}
.pp-foot{font-size:.7rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.pp-disclosure{margin:16px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}
.pp-disclosure a{color:var(--primary-deep);font-weight:600;text-decoration:none}
.pp-disclosure a:hover{text-decoration:underline}
@media (max-width:640px){.pp-block{padding:22px 16px 16px;border-radius:14px}.pp-grid{grid-template-columns:1fr}.pp-top{flex-wrap:wrap}}
/* Premium: Buchungsschritte und Werbematerial (Portal) */
.pp-steps{display:flex;flex-direction:column;gap:14px;margin:8px 0 16px}
.pp-step{display:flex;gap:12px;align-items:flex-start}
.pp-step .field{flex:1;margin:0}
.pp-no{flex:none;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem;margin-top:2px}
.pp-suggest{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(18,16,61,.12);max-height:220px;overflow:auto}
.pp-suggest div{padding:8px 12px;cursor:pointer;font-size:.9rem}
.pp-suggest div:hover{background:#f4f4ff}
.pp-mat{margin-top:14px;padding:12px 14px;border:1px dashed #d8d3f5;border-radius:12px;background:#fbfaff}
.pp-mat h4{margin:0 0 4px;font-size:.95rem}
.pp-mat .hint{font-size:.78rem}
.pp-mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.pp-mat-grid .field{margin:0}
.pp-mat-prev{max-width:440px;margin-top:10px}
@media (max-width:640px){.pp-mat-grid{grid-template-columns:1fr}}

/* Admin → Analytics */
.an-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.an-filter{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.an-filter .chip{padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none;background:#fff}
.an-filter .chip.active{background:var(--grad);color:#fff;border-color:transparent}
.an-custom{display:inline-flex;gap:6px;align-items:center;font-size:.85rem;color:var(--muted)}
.an-custom input[type=date]{padding:5px 8px;border:1px solid var(--line);border-radius:8px;font-size:.85rem}
.an-summary{margin-bottom:18px;border-color:#d9d9ff;background:linear-gradient(135deg,#f6f5ff,#fff)}
.an-alerts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.an-alerts li{padding:8px 12px;border-radius:10px;font-size:.9rem;background:#eefcf6}
.an-alerts li.warn{background:#fff4f0}
.an-h2{font-size:1.15rem;margin:22px 0 10px}
.an-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:16px}
.an-kpis .stat{padding:18px 18px 14px}
.an-chg{font-size:.76rem;margin-top:6px;color:var(--muted)}
.stat-accent .an-chg{color:rgba(255,255,255,.85)}
.an-up{color:#0d8b66;font-weight:600}.an-down{color:#b23b1a;font-weight:600}
.stat-accent .an-up,.stat-accent .an-down{color:#fff}
.an-table{font-size:.86rem}
.an-table td,.an-table th{padding:8px 10px}
.an-table td:not(:first-child),.an-table th:not(:first-child){white-space:nowrap}
.an-row-best td{background:#eefcf6}.an-row-worst td{background:#fff4f0}
.an-chart{width:100%;height:auto;max-height:220px;display:block}
.an-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin:0 0 6px}
.an-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.an-funnel{display:flex;flex-direction:column;gap:10px}
.an-fstep{display:flex;flex-direction:column;gap:3px}
.an-fbar{height:30px;border-radius:8px;background:var(--grad);color:#fff;font-weight:800;display:flex;align-items:center;padding:0 10px;min-width:44px;transition:width .3s}
.an-flbl{font-size:.84rem;color:var(--ink-soft)}
.an-best{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:12px}
.an-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.an-block{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.an-block.now{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,91,247,.12)}
.an-block .t{font-size:.76rem;color:var(--muted);font-weight:700;letter-spacing:.04em}
.an-block .v{font-weight:800;margin-top:4px}
.an-block .l{font-size:.82rem;color:var(--ink-soft)}
.an-two{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;margin-top:16px}
.an-feed{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto;font-size:.88rem;display:flex;flex-direction:column;gap:6px}
.an-feed .tm{font-variant-numeric:tabular-nums;color:var(--muted);margin-right:4px}
.an-live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(25,200,148,.2);vertical-align:middle;margin-left:6px}
.an-gaps{margin:0 0 12px;font-size:.88rem;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.an-empty{color:var(--muted);font-size:.9rem;margin:4px 0}
@media (max-width:900px){.an-two{grid-template-columns:1fr}.an-head{align-items:flex-start}}
@media (max-width:640px){.an-kpis{grid-template-columns:1fr 1fr}.an-blocks{grid-template-columns:1fr 1fr}.an-chart{max-height:160px}}

.an-export{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;background:linear-gradient(135deg,#f3fbf8,#fff);border-color:#cdeee2}
.an-export-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.an-export-sel{padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-size:.85rem;background:#fff}

.an-def{font-size:.8rem;color:var(--muted);margin:12px 0 0;line-height:1.5}
.an-def code{background:#f1f1f7;padding:1px 5px;border-radius:5px;font-size:.78rem}
.an-kpis .num small{font-size:.72rem;font-weight:500;color:inherit;opacity:.75}

.fd-q.fd-pending{display:none}
.chip-unsure{border-style:dashed;color:var(--muted)}
.chip-unsure.chip-active{border-style:solid;color:inherit}
.fd-skip{border:0;background:none;color:var(--muted);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer;padding:2px 0;margin-top:6px;justify-self:start;display:block}

.next-card{margin-bottom:20px;border-left:5px solid var(--primary);padding:20px 22px}
.next-card.next-mint{border-left-color:var(--mint,#19c894)}.next-card.next-warm{border-left-color:#f0b429}.next-card.next-soft{border-left-color:#c9c9e6}
.next-main{display:flex;gap:16px;align-items:flex-start}
.next-icon{font-size:1.9rem;line-height:1;flex:0 0 auto;margin-top:2px}
.next-kicker{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deep,#4a4ad9);margin-bottom:4px}
.next-title{font-size:1.2rem;margin:0 0 6px}
.next-text{color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
.next-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#e7e6f4)}
.next-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line,#e7e6f4);border-radius:999px;font-size:.85rem;text-decoration:none;color:var(--ink);background:#fff}
.next-chip:hover{border-color:var(--primary)}
@media (max-width:600px){.next-main{flex-direction:column;gap:8px}}

.an-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}

/* Premium-Partner-Leiste: direkt unter dem Hero; bei voller Leiste langsames seitliches Scrollen */
.pp-strip-section{background:#fff;border-bottom:1px solid var(--line,#e7e6f4)}
.pp-marquee{overflow:hidden;position:relative}
.pp-marquee.is-scrolling{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pp-marquee.is-scrolling .logo-strip{flex-wrap:nowrap;justify-content:flex-start;width:max-content;gap:0;animation:ppScroll var(--pp-dur,60s) linear infinite;will-change:transform}
.pp-marquee.is-scrolling .pp-group{display:flex;align-items:center;gap:18px 34px;padding-right:34px;flex:none}
.pp-marquee.is-scrolling:hover .logo-strip{animation-play-state:paused}
@keyframes ppScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pp-marquee.is-scrolling .logo-strip{animation:none}}

/* ---------- Hero v2 (23.09.2026): Referenz-Layout links Text/CTA/Suche, rechts Prozessgrafik ---------- */
.hero-v2 { padding: 64px 0 76px; }
.hero-grid-v2 { grid-template-columns: 48fr 52fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(91, 91, 247, 0.14); }
.hero-ring-1 { width: 520px; height: 520px; right: -140px; top: -120px; }
.hero-ring-2 { width: 300px; height: 300px; right: 18%; bottom: -110px; border-color: rgba(155, 70, 245, 0.12); }
.hero-ring-3 { width: 140px; height: 140px; left: 44%; top: 40px; border-color: rgba(25, 200, 148, 0.18); }
.hero-copy { position: relative; }
.hero-badge { margin-bottom: 22px; }
.hero-h1 { font-size: clamp(2.1rem, 3.55vw, 3.15rem); line-height: 1.1; letter-spacing: -0.028em; }
.hero-h1 em { display: block; }
.hero-v2 p.hero-lead { font-size: 1.12rem; line-height: 1.55; margin: 20px 0 26px; max-width: 31em; }
.hero-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-cta { padding: 17px 30px; font-size: 1.08rem; font-weight: 700; box-shadow: 0 14px 34px -8px rgba(91, 91, 247, 0.55); }
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -8px rgba(91, 91, 247, 0.65); }
.hero-cta-arrow { transition: transform 0.2s ease; }
.hero-cta:hover .hero-cta-arrow { transform: translateX(4px); }
.hero-clock { display: inline-flex; align-items: center; gap: 11px; color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; line-height: 1.3; max-width: 13em; }
.hero-clock-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #ecebff; color: var(--primary-deep); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(91, 91, 247, 0.12); }
.hero-clock-ic svg { width: 20px; height: 20px; }
.hero-trust-line { margin-top: 16px; font-size: 0.92rem; }
.hero-search { margin: 24px 0 0; max-width: 580px; border: 1px solid var(--line); box-shadow: 0 12px 34px -14px rgba(22, 20, 63, 0.28); padding: 6px 6px 6px 16px; align-items: center; gap: 4px; }
.hero-search:focus-within { border-color: rgba(91, 91, 247, 0.55); box-shadow: 0 0 0 4px rgba(91, 91, 247, 0.12), 0 12px 34px -14px rgba(22, 20, 63, 0.28); }
.hero-search-ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.hero-search input { padding: 12px 12px; font-size: 1rem; }
.hero-search input::placeholder { color: #9d9cb6; }
.hero-search-btn { padding: 11px 20px; font-weight: 700; }
.hero-usps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; max-width: 580px; }
.hero-usps li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.94rem; color: var(--ink-soft); }
.hero-usp-ic { width: 24px; height: 24px; flex: none; border-radius: 50%; background: rgba(25, 200, 148, 0.14); color: #0e9f73; display: grid; place-items: center; }
.hero-usp-ic svg { width: 14px; height: 14px; }
.hero-prov { margin-top: 26px; max-width: 580px; padding: 14px 18px; border-radius: 16px; background: #fbfbff; }
.hero-prov > span:nth-child(2) { line-height: 1.35; font-size: 0.95rem; }
.hero-prov strong { color: var(--ink); }
.hero-cta:focus-visible, .hero-search-btn:focus-visible, .hero-prov:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.hero-search input:focus-visible { outline: none; }

/* Prozessgrafik */
.hero-flow { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 18px 0 26px; }
.hf-req { position: relative; width: min(100%, 440px); background: #fff; border-radius: 22px; padding: 18px 20px 20px; box-shadow: 0 26px 60px -22px rgba(22, 20, 63, 0.35), 0 0 0 1px rgba(231, 230, 244, 0.9); z-index: 1; }
.hf-req-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.hf-req-title { font-weight: 800; font-size: 0.98rem; color: var(--ink); }
.hf-status { display: inline-flex; align-items: center; gap: 7px; background: rgba(25, 200, 148, 0.13); color: #0b8f67; border-radius: 999px; padding: 5px 12px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.hf-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(25, 200, 148, 0.5); animation: pulse 2s infinite; }
.hf-req-body { display: flex; gap: 14px; align-items: flex-start; }
.hf-thumb { width: 60px; height: 60px; flex: none; border-radius: 16px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -10px rgba(91, 91, 247, 0.7); }
.hf-thumb svg { width: 30px; height: 30px; }
.hf-req-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hf-req-cat { font-size: 1.02rem; color: var(--ink); }
.hf-loc { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.hf-loc svg { width: 14px; height: 14px; color: var(--primary); flex: none; }
.hf-req-desc { color: var(--ink-soft); font-size: 0.86rem; line-height: 1.45; margin-top: 2px; }
.hf-btn { display: inline-flex; align-items: center; margin-top: 16px; background: var(--grad); color: #fff; border-radius: 999px; padding: 9px 18px; font-size: 0.86rem; font-weight: 700; box-shadow: 0 10px 22px -10px rgba(91, 91, 247, 0.7); }
.hf-stem { width: 2px; height: 30px; background: linear-gradient(180deg, rgba(91, 91, 247, 0.15), rgba(155, 70, 245, 0.7)); }
.hf-pill { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(120deg, #7b4df5, #9b46f5); color: #fff; border-radius: 999px; padding: 9px 20px; font-size: 0.9rem; font-weight: 800; letter-spacing: 0.01em; box-shadow: 0 12px 26px -10px rgba(155, 70, 245, 0.75); white-space: nowrap; z-index: 1; }
.hf-branches { width: 100%; max-width: 640px; height: 56px; display: block; }
.hf-branches path { stroke: url(#hfGrad); stroke: rgba(123, 77, 245, 0.55); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 640px; }
.hf-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 14px 13px; display: flex; flex-direction: column; gap: 8px; min-width: 0; box-shadow: 0 18px 44px -24px rgba(22, 20, 63, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hf-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -22px rgba(22, 20, 63, 0.4); }
.hf-card-top { display: flex; gap: 10px; align-items: center; min-width: 0; }
.hf-card-top > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hf-card-top strong { font-size: 0.9rem; color: var(--ink); line-height: 1.2; overflow-wrap: break-word; }
.hf-avatar { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.95rem; }
.hf-av-1 { background: linear-gradient(135deg, #5b5bf7, #9b46f5); }
.hf-av-2 { background: linear-gradient(135deg, #19c894, #12a6a0); }
.hf-av-3 { background: linear-gradient(135deg, #ff6b5e, #ffb020); }
.hf-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.hf-rating svg { width: 13px; height: 13px; color: var(--amber); }
.hf-rating small { color: var(--muted); font-weight: 600; font-size: 0.76rem; }
.hf-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 10px; font-size: 0.74rem; font-weight: 700; width: fit-content; max-width: 100%; }
.hf-badge svg { width: 12px; height: 12px; flex: none; }
.hf-badge-ok { background: rgba(25, 200, 148, 0.13); color: #0b8f67; }
.hf-badge-wait { background: rgba(255, 176, 32, 0.16); color: #a86a00; }
.hf-link { font-size: 0.82rem; font-weight: 700; color: var(--primary-deep); margin-top: 2px; }
.hf-link-soft { color: var(--ink-soft); }
.hf-card-wait { border-style: dashed; }
.hf-example { position: absolute; right: 6px; bottom: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #b3b2c8; }
.hf-note { position: absolute; font-family: "Segoe Script", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-size: 0.92rem; color: var(--primary-deep); opacity: 0.85; white-space: nowrap; pointer-events: none; }
.hf-note-1 { left: 0; top: 0; transform: rotate(-6deg); }
.hf-note-2 { right: 0; bottom: 212px; transform: rotate(4deg); }
.hf-note::after { content: ""; display: block; width: 46px; height: 12px; margin: 2px auto 0; border-bottom: 1.5px solid currentColor; border-radius: 0 0 50% 50% / 0 0 100% 100%; opacity: 0.6; }

/* Einblend-Animationen (nacheinander), respektieren «reduzierte Bewegung» */
@keyframes heroUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: heroUp 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > *:nth-child(2) { animation-delay: 0.06s; } .hero-copy > *:nth-child(3) { animation-delay: 0.12s; } .hero-copy > *:nth-child(4) { animation-delay: 0.18s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.24s; } .hero-copy > *:nth-child(6) { animation-delay: 0.3s; } .hero-copy > *:nth-child(7) { animation-delay: 0.36s; } .hero-copy > *:nth-child(8) { animation-delay: 0.42s; }
.hf-req { animation: heroUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.hf-stem, .hf-pill, .hf-branches { animation: heroUp 0.6s ease 0.45s both; }
.hf-card { animation: heroUp 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hf-card:nth-child(1) { animation-delay: 0.65s; } .hf-card:nth-child(2) { animation-delay: 0.8s; } .hf-card:nth-child(3) { animation-delay: 0.95s; }
.hf-note { animation: heroUp 0.8s ease 1.2s both; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hf-req, .hf-stem, .hf-pill, .hf-branches, .hf-card, .hf-note { animation: none; }
  .hf-status-dot { animation: none; }
  .hf-card, .hf-card:hover, .hero-cta:hover, .hero-cta-arrow { transform: none; transition: none; }
}

@media (max-width: 1180px) {
  .hero-h1 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
  .hf-card { padding: 12px; }
  .hf-card-top strong { font-size: 0.84rem; }
}
@media (max-width: 960px) {
  .hero-v2 { padding: 48px 0 56px; }
  .hero-grid-v2 { grid-template-columns: 1fr; gap: 44px; }
  .hero-flow { max-width: 640px; margin: 0 auto; width: 100%; padding-top: 0; }
  .hf-note { display: none; }
  .hero-h1 { font-size: clamp(2rem, 5.2vw, 3rem); }
  .hero-h1 em { display: inline; }
  .hero-ring-1 { right: -240px; }
}
@media (max-width: 720px) {
  .hero-v2 { padding: 34px 0 40px; }
  .hf-req { width: 100%; padding: 16px; }
  .hf-stem { height: 22px; }
  .hf-branches { height: 22px; max-width: 2px; }
  .hf-branches path { display: none; }
  .hf-branches { background: linear-gradient(180deg, rgba(155, 70, 245, 0.7), rgba(91, 91, 247, 0.15)); }
  /* Anbieterkarten: horizontal scrollen mit Einrasten, Kartenbreite ca. 82 vw */
  .hf-cards { display: flex; gap: 12px; max-width: none; width: auto; align-self: stretch; margin: 0 calc(-1 * clamp(20px, 4vw, 56px)); padding: 6px clamp(20px, 4vw, 56px) 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hf-cards::-webkit-scrollbar { display: none; }
  .hf-card { flex: 0 0 82vw; max-width: 320px; scroll-snap-align: center; padding: 14px; }
  .hf-card-top strong { font-size: 0.92rem; }
  .hf-example { right: clamp(20px, 4vw, 56px); }
  .hero-cta-row { gap: 14px; }
}
@media (max-width: 600px) {
  .hero-cta-row .hero-cta { width: 100%; }
  .hero-clock { max-width: none; }
  .hero-search { border-radius: 22px; padding: 10px; gap: 8px; }
  .hero-search-ic { display: none; }
  .hero-search input { padding: 12px 14px; }
}
@media (max-width: 420px) {
  .hero-badge { font-size: 0.76rem; padding: 6px 12px; }
  .hero-usps { grid-template-columns: 1fr; gap: 10px; }
  .hf-card { flex-basis: 84vw; }
}
/* Header auf schmalen Tablets (721–1000px): Kurztext im CTA, damit nichts über den Rand läuft (FR/IT-Texte sind länger) */
.header-actions .cta-short { display: none; }
@media (min-width: 721px) and (max-width: 1000px) {
  .header-inner { gap: 8px; }
  .main-nav { gap: 8px; }
  .main-nav a { font-size: 0.8rem; }
  .lang-switch a { padding: 4px 5px; font-size: 0.72rem; }
  .header-actions .btn { padding: 8px 11px; font-size: 0.8rem; }
  .brand-name { font-size: 1.05rem; }
  .header-actions .cta-long { display: none; }
  .header-actions .cta-short { display: inline; }
}
@media (min-width: 721px) and (max-width: 840px) {
  .brand-name { display: none; }   /* nur Logo: längere FR/IT-Navigation passt sonst nicht in die Zeile */
  .main-nav { gap: 7px; }
  .main-nav a { font-size: 0.78rem; }
  .header-actions .btn { padding: 8px 9px; }
}

/* Hero v2 – grosse Bildschirme: volle Breite, grössere Typografie, CTA und Prozessgrafik, mehr Höhe */
@media (min-width: 1200px) {
  .hero-v2 { padding: 72px 0 84px; display: grid; align-items: center; min-height: clamp(660px, 84vh, 940px); }
  .hero-v2 .hero-grid-v2 { max-width: 1760px; grid-template-columns: 47fr 53fr; gap: clamp(44px, 4.5vw, 88px); }
  .hero-badge { font-size: 0.92rem; padding: 8px 18px; margin-bottom: 26px; }
  .hero-h1 { font-size: clamp(2.6rem, 3.3vw, 4.2rem); line-height: 1.06; }
  .hero-v2 p.hero-lead { font-size: clamp(1.15rem, 1.25vw, 1.35rem); max-width: 30em; margin: 24px 0 32px; }
  .hero-cta { padding: 20px 36px; font-size: 1.2rem; }
  .hero-clock { font-size: 1rem; max-width: 14em; }
  .hero-clock-ic { width: 46px; height: 46px; }
  .hero-clock-ic svg { width: 23px; height: 23px; }
  .hero-trust-line { font-size: 1rem; margin-top: 18px; }
  .hero-search { max-width: 680px; margin-top: 28px; padding: 8px 8px 8px 20px; }
  .hero-search input { font-size: 1.08rem; padding: 14px 12px; }
  .hero-search-btn { padding: 13px 24px; font-size: 1rem; }
  .hero-usps { max-width: 680px; gap: 14px 24px; margin-top: 26px; }
  .hero-usps li { font-size: 1.02rem; }
  .hero-usp-ic { width: 26px; height: 26px; }
  .hero-prov { max-width: 680px; margin-top: 30px; padding: 16px 20px; }
  .hero-prov > span:nth-child(2) { font-size: 1.02rem; }
  .prov-entry-ic { width: 42px; height: 42px; }
  /* Prozessgrafik grösser */
  .hero-flow { padding: 26px 0 30px; }
  .hf-req { width: min(100%, 560px); padding: 22px 26px 24px; border-radius: 26px; }
  .hf-req-title { font-size: 1.1rem; }
  .hf-status { font-size: 0.84rem; padding: 6px 14px; }
  .hf-thumb { width: 72px; height: 72px; border-radius: 20px; }
  .hf-thumb svg { width: 36px; height: 36px; }
  .hf-req-cat { font-size: 1.18rem; }
  .hf-loc { font-size: 0.9rem; }
  .hf-req-desc { font-size: 0.98rem; }
  .hf-btn { font-size: 0.95rem; padding: 11px 22px; margin-top: 18px; }
  .hf-stem { height: 38px; }
  .hf-pill { font-size: 1rem; padding: 11px 24px; }
  .hf-branches { height: 66px; max-width: 860px; }
  .hf-cards { max-width: 860px; gap: 18px; }
  .hf-card { padding: 18px 18px 16px; border-radius: 20px; gap: 10px; }
  .hf-card-top { gap: 12px; }
  .hf-card-top strong { font-size: 0.96rem; }
  .hf-avatar { width: 42px; height: 42px; font-size: 1.05rem; border-radius: 13px; }
  .hf-rating { font-size: 0.9rem; }
  .hf-rating small { font-size: 0.82rem; }
  .hf-badge { font-size: 0.82rem; padding: 6px 12px; }
  .hf-link { font-size: 0.92rem; }
  .hf-note { font-size: 1.08rem; }
  .hf-note-2 { bottom: 236px; }
  .hf-example { font-size: 0.74rem; }
  .hero-ring-1 { width: 720px; height: 720px; right: -200px; top: -200px; }
  .hero-ring-2 { width: 420px; height: 420px; }
  .blob-1 { width: 620px; height: 620px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hf-card { padding: 14px 14px 13px; }
  .hf-card-top { gap: 9px; }
  .hf-card-top strong { font-size: 0.86rem; }
  .hf-avatar { width: 36px; height: 36px; font-size: 0.95rem; }
  .hf-cards { gap: 14px; }
}
@media (min-width: 1500px) {
  .hero-h1 { font-size: clamp(3.3rem, 3.2vw, 4.4rem); }
  .hf-card-top strong { font-size: 1.04rem; }
  .hf-req { width: min(100%, 600px); }
  .hf-cards, .hf-branches { max-width: 920px; }
  .hero-ring-1 { width: 860px; height: 860px; right: -240px; top: -260px; }
}

/* Hilfe-Button (Chat-Einstieg) statt Maskottchen, 24.09.2026 */
.offi-help-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d7d6ea; color: var(--ink); border-radius: 999px; padding: 10px 16px; font: 600 0.92rem var(--font); box-shadow: 0 8px 24px rgba(22,20,63,0.14); cursor: pointer; min-height: 44px; transition: border-color .15s, background .15s; }
.offi-help-btn:hover { border-color: var(--primary); background: #f7f7fd; }
.offi-help-btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.offi-help-btn svg { flex: none; color: var(--primary-deep); }
@media (max-width: 720px) { .offi-root { transform: none; right: 12px !important; bottom: 12px !important; } }