/* ==== Startseite ==== */

.hero { padding-top: var(--sp-6); padding-bottom: var(--sp-6); position: relative; overflow: clip; }
@media (max-width: 640px) { .hero { padding-top: var(--sp-3); padding-bottom: var(--sp-4); } }

/* ---- Hero-Hintergrund: Feld-Linien + Farbverläufe ---- */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: hero-drift 16s ease-in-out infinite; }
.hero-blob-a { width: 460px; height: 460px; top: -180px; right: -120px; background: radial-gradient(circle, var(--brand-200), transparent 70%); }
.hero-blob-b { width: 380px; height: 380px; bottom: -200px; left: -140px; background: radial-gradient(circle, var(--gps-200), transparent 70%); animation-delay: -8s; }
@keyframes hero-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-18px, 22px) scale(1.06); } }
.hero-rows { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 62%; max-width: 640px; height: auto; color: var(--brand-700); opacity: .1; }
@media (max-width: 980px) { .hero-rows { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-blob { animation: none; } }

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--sp-5); align-items: center; }
.hero h1 { margin-block: .5em .5em; }
.hero h1 .accent { color: var(--brand-700); }
.hero-copy { max-width: 640px; }
.hero-ctas { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.hero-ctas .btn-primary { position: relative; box-shadow: var(--shadow-sm), 0 0 0 0 rgba(75,120,47,.4); animation: hero-cta-glow 3s ease-in-out infinite; }
@keyframes hero-cta-glow { 0%,100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(75,120,47,.35); } 50% { box-shadow: var(--shadow-md), 0 0 0 8px rgba(75,120,47,0); } }
@media (prefers-reduced-motion: reduce) { .hero-ctas .btn-primary { animation: none; } }
.hero-reassure { display: flex; flex-wrap: wrap; gap: .5em 1.4em; margin-top: var(--sp-3); font-size: .88rem; color: var(--ink-soft); }
.hero-reassure span { display: inline-flex; align-items: center; gap: .5em; }
.hero-reassure svg { color: var(--brand-700); flex-shrink: 0; }

/* ---- Hero-Visual: Produkt-Mockup ---- */
.hero-visual { position: relative; padding: var(--sp-3) var(--sp-2) var(--sp-4); }
.hero-card { padding: 1.5rem; animation: hero-float 6s ease-in-out infinite; }
@keyframes hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero-card { animation: none; } }
.hero-mock-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.hero-mock-pill { display: inline-flex; align-items: center; gap: .4em; font-size: .78rem; font-weight: 700; color: var(--brand-700); background: var(--brand-100); padding: .35em .8em; border-radius: 999px; }
.hero-mock-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-700); animation: pulse 2s infinite; }
.hero-mock-more { color: var(--ink-faint); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero-mock-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-bottom: .2rem; }
.hero-mock-sub { font-size: .85rem; color: var(--ink-faint); margin-bottom: 1rem; }
.hero-mock-rows { display: flex; flex-direction: column; gap: .6rem; }
.hero-mock-line { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; background: var(--paper); border-radius: var(--r-sm); font-size: .88rem; }
.hero-mock-line b { font-family: var(--font-display); }
.hero-mock-badge { font-size: .72rem; font-weight: 700; padding: .25em .6em; border-radius: 999px; background: var(--brand-200); color: var(--brand-900); }
.hero-mock-badge.ok { background: var(--gps-200); color: var(--gps-700); }
.hero-float-card { position: absolute; bottom: -6px; left: -18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--r-md); padding: .9rem 1.15rem; display: flex; align-items: center; gap: .8rem; animation: hero-float 6s ease-in-out infinite; animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) { .hero-float-card { animation: none; } }
.hero-float-card .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--gps-100); color: var(--gps-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-float-card b { display: block; font-family: var(--font-display); font-size: .95rem; }
.hero-float-sub { display: flex; align-items: center; gap: .4em; font-size: .78rem; color: var(--ink-faint); }
.hero-float-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gps-700); display: inline-block; animation: pulse 2s infinite; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .hero-visual { max-width: 420px; margin-inline: auto; padding-bottom: var(--sp-5); }
}
@media (max-width: 460px) {
  .hero-float-card { left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100% - 1rem); }
}

/* ---- Produktwahl ---- */
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.picker-card { border-radius: var(--r-lg); padding: var(--sp-4); position: relative; overflow: clip; border: 1px solid var(--border); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.picker-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.picker-card.p-daten { background: linear-gradient(155deg, var(--brand-100), var(--surface) 55%); }
.picker-card.p-gps { background: linear-gradient(155deg, var(--gps-100), var(--surface) 55%); }
.picker-icon { width: 54px; height: 54px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: 1.3rem; }
.picker-card.p-daten .picker-icon { background: var(--brand-700); color: #fff; }
.picker-card.p-gps .picker-icon { background: var(--gps-700); color: #fff; }
.picker-card h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.picker-card .picker-kicker { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: .3rem; }
.picker-card p.desc { color: var(--ink-soft); margin-bottom: 1.3rem; max-width: 46ch; }
.picker-list { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.6rem; }
.picker-list li { display: flex; align-items: flex-start; gap: .6em; font-size: .92rem; }
.picker-list svg { flex-shrink: 0; margin-top: .2em; }
.picker-card.p-daten .picker-list svg { color: var(--brand-700); }
.picker-card.p-gps .picker-list svg { color: var(--gps-700); }
.picker-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .5em; font-weight: 700; font-family: var(--font-display); }
.picker-card.p-daten .picker-cta { color: var(--brand-700); }
.picker-card.p-gps .picker-cta { color: var(--gps-700); }
.picker-cta svg { transition: transform .18s ease; }
.picker-card:hover .picker-cta svg { transform: translateX(4px); }

@media (max-width: 780px) { .picker-grid { grid-template-columns: 1fr; } }

/* ---- Warum-Grid ---- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.why-item .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.why-item h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.why-item p { color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ---- Für-wen Tags ---- */
.audience-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-3); }
.audience-tag { display: flex; align-items: center; gap: .6em; padding: .8em 1.3em; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: .92rem; }
.audience-tag svg { color: var(--brand-700); }

/* ---- Kombination ---- */
.combo-section { background: var(--brand-900); color: #EAF0E3; border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4); margin-inline: var(--sp-3); }
.combo-section .eyebrow { color: var(--brand-200); }
.combo-section h2 { color: #fff; }
.combo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: center; margin-top: var(--sp-3); }
.combo-grid p { color: rgba(234,240,227,.82); }
.combo-diagram { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.combo-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-md); padding: 1.1rem 1.4rem; text-align: center; min-width: 150px; }
.combo-chip b { display: block; font-family: var(--font-display); font-size: 1.02rem; margin-bottom: .2rem; }
.combo-chip span { font-size: .78rem; opacity: .7; }
.combo-plus { font-family: var(--font-display); font-size: 1.6rem; opacity: .55; }
@media (max-width: 900px) { .combo-grid { grid-template-columns: 1fr; } .combo-section { margin-inline: var(--sp-2); padding: var(--sp-4) var(--sp-3); } }

/* ---- Trust ---- */
/* Untereinander statt nebeneinander: die Punkte sind unterschiedlich lang,
   nebeneinander bricht der lange Hosting-Hinweis unruhig um. */
.trust-strip { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3) 0; }
.trust-badge { display: flex; align-items: flex-start; gap: .7em; font-weight: 600; font-size: .95rem; color: var(--ink-soft); max-width: 68ch; }
.trust-badge svg { margin-top: .18em; }
.trust-badge svg { color: var(--brand-700); flex-shrink: 0; }
.logo-placeholder { height: 90px; border: 1.5px dashed var(--border); border-radius: var(--r-md); margin-top: var(--sp-3); }

/* ---- Final CTA ---- */
.final-cta { text-align: center; }
.final-cta h2 { max-width: 20ch; margin-inline: auto; }
.final-cta .hero-ctas { justify-content: center; }