/* HOMECARE — die Alltagshelfer / Betreuung mit Herz Solingen GmbH
 * Gemeinsames Stylesheet für alle Landingpages
 * Version 1.1 — 26.07.2026
 */

:root {
  --color-primary: #3E7CBF;
  --color-primary-dark: #2E5A8F;
  --color-accent: #F7A42A;
  --color-secondary: #E2EBF5;
  --color-bg: #F7FAFC;
  --color-text: #444444;
  --color-text-muted: #6B7280;
  --color-border: #E5E7EB;
  --font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 8px;
  --transition: .2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--color-primary); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 2.625rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 1rem; }

.btn { display: inline-block; padding: 14px 28px; font-weight: 600; font-family: inherit; font-size: 1rem; cursor: pointer; border: none; transition: background var(--transition); text-align: center; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-secondary); color: var(--color-primary); }
.btn-secondary:hover { background: #D0DEEE; }
.btn-block { display: block; width: 100%; }

.topbar { background: var(--color-primary); color: white; font-size: .875rem; }
.topbar .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: .5rem; padding-bottom: .5rem; }
.topbar a { color: white; }

header.site-header { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.04); position: sticky; top: 0; z-index: 40; }
header.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
header.site-header img { height: 48px; width: auto; }

.hero { padding: 3.5rem 0; }
.hero .grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .hero { padding: 5rem 0; } .hero .grid { grid-template-columns: 1.1fr 1fr; } }
.eyebrow { display: inline-block; background: rgba(247, 164, 42, 0.15); color: #B8791A; padding: .25rem .75rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; margin-bottom: 1.5rem; }
.hero .trust-row { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .875rem; color: var(--color-text-muted); }
.hero .trust-row .check { color: var(--color-primary); font-weight: 700; margin-right: .25rem; }

.trustbar { background: white; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 2.5rem 0; }
.trustbar .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .trustbar .grid { grid-template-columns: repeat(5, 1fr); } }
.trustbar img { height: 56px; margin: 0 auto .5rem; }
.trustbar .label { font-size: .875rem; font-weight: 600; color: var(--color-primary); }

section { padding: 3.5rem 0; }
@media (min-width: 768px) { section { padding: 5rem 0; } }
section.compact { padding: 2.5rem 0; }
section.tinted { background: var(--color-secondary); }
section.white { background: white; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
section .section-head { text-align: center; margin-bottom: 3rem; }
section .section-head p { font-size: 1.125rem; max-width: 640px; margin: .75rem auto 0; }

.cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .cards.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .cards.cols-3 { grid-template-columns: repeat(3, 1fr); } .cards.cols-2 { grid-template-columns: repeat(2, 1fr); } }
.card { background: white; border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.card h3 { margin-bottom: .5rem; }
.card .icon { font-size: 2rem; margin-bottom: .75rem; }
.card ul { list-style: none; font-size: .875rem; }
.card ul li { padding-left: 1rem; position: relative; margin: .25rem 0; }
.card ul li::before { content: "·"; position: absolute; left: 0; color: var(--color-primary); font-weight: bold; }

.stat-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card { background: white; padding: 1.5rem; border-radius: var(--radius); text-align: center; }
.stat-card .stat-value { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); line-height: 1; }
.stat-card .stat-label { font-size: .875rem; font-weight: 600; margin: .5rem 0; }
.stat-card .stat-desc { font-size: .875rem; color: var(--color-text-muted); }

.process { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .process { grid-template-columns: repeat(3, 1fr); } }
.process .step .num { font-size: 3rem; font-weight: 700; color: rgba(62, 124, 191, 0.2); line-height: 1; margin-bottom: .5rem; }

.ansprech { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .ansprech { grid-template-columns: 1fr 1fr; } }
.ansprech blockquote { border-left: 4px solid var(--color-primary); padding-left: 1rem; font-style: italic; margin: 1.5rem 0; }

.testimonial { background: white; border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.testimonial .head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.testimonial .head img { width: 40px; height: 40px; border-radius: 50%; }
.testimonial .name { font-weight: 600; }
.testimonial .source { font-size: .75rem; color: var(--color-text-muted); }
.testimonial .quote { font-size: .875rem; font-style: italic; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.chip { background: var(--color-secondary); padding: .5rem 1rem; border-radius: var(--radius); font-size: .875rem; }

.form-wrap { max-width: 720px; margin: 0 auto; background: white; padding: 2rem; border-radius: var(--radius); }
@media (min-width: 768px) { .form-wrap { padding: 2.5rem; } }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .375rem; }
.input { width: 100%; background: var(--color-secondary); border: 2px solid transparent; border-radius: var(--radius); padding: .75rem 1rem; font-family: inherit; font-size: 1rem; color: var(--color-text); transition: border-color var(--transition); }
.input:focus { outline: none; border-color: var(--color-primary); }
select.input { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E7CBF' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem; padding-right: 2.5rem; }
textarea.input { resize: vertical; min-height: 100px; }
.consent { display: flex; gap: .5rem; align-items: start; font-size: .875rem; color: var(--color-text-muted); }
.consent input { margin-top: .25rem; flex-shrink: 0; }

.wizard { max-width: 640px; margin: 0 auto; background: white; padding: 2rem; border-radius: var(--radius); }
.wizard .progress-bar { background: var(--color-secondary); height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 1.5rem; }
.wizard .progress-bar .fill { background: var(--color-primary); height: 100%; transition: width .3s ease; }
.wizard .progress-label { font-size: .875rem; color: var(--color-text-muted); margin-bottom: 1rem; text-align: center; }
.wizard .step { display: none; animation: fadeIn .3s ease; }
.wizard .step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wizard .step h3 { margin-bottom: 1.5rem; text-align: center; }
.wizard .options { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: 1.5rem; }
@media (min-width: 480px) { .wizard .options.cols-2 { grid-template-columns: 1fr 1fr; } .wizard .options.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.wizard .option-btn { background: var(--color-secondary); border: 2px solid transparent; border-radius: var(--radius); padding: 1rem; cursor: pointer; font-size: 1rem; font-weight: 600; color: var(--color-primary); font-family: inherit; transition: all var(--transition); }
.wizard .option-btn:hover, .wizard .option-btn.selected { background: var(--color-primary); color: white; }
.wizard .nav-btns { display: flex; justify-content: space-between; gap: .75rem; }
.wizard .thanks { text-align: center; padding: 2rem 0; display: none; }
.wizard .thanks.active { display: block; }
.wizard .thanks .icon-check { font-size: 3rem; color: var(--color-primary); }

details.faq-item { background: white; border-radius: var(--radius); padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); margin-bottom: .75rem; }
details.faq-item summary { font-weight: 600; color: var(--color-primary); cursor: pointer; list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; float: right; font-size: 1.5rem; line-height: 1; color: var(--color-primary); }
details.faq-item[open] summary::after { content: "−"; }
details.faq-item p { margin-top: .75rem; font-size: .875rem; }

footer.site-footer { background: var(--color-primary); color: white; padding: 2.5rem 0 1.5rem; font-size: .875rem; }
footer.site-footer .grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { footer.site-footer .grid { grid-template-columns: repeat(3, 1fr); } }
footer.site-footer a { color: white; }
footer.site-footer .logo-container { background: rgba(255,255,255,0.9); padding: .5rem; border-radius: var(--radius); display: inline-block; margin-bottom: .75rem; }
footer.site-footer .logo-container img { height: 40px; }
footer.site-footer h4 { color: white; margin-bottom: .75rem; font-size: 1rem; }
footer.site-footer ul { list-style: none; }
footer.site-footer ul li { margin: .25rem 0; }
footer.site-footer .credit { text-align: center; font-size: .75rem; opacity: .8; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1rem; }
footer.site-footer .franchise-note { font-size: .75rem; opacity: .8; margin-top: .5rem; }

.sticky-call { display: none; position: fixed; bottom: 1rem; right: 1rem; background: var(--color-primary); color: white; padding: 1rem; border-radius: 50%; font-size: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 50; text-decoration: none; }
@media (max-width: 767px) { .sticky-call { display: block; } }

.text-center { text-align: center; }
.mt-8 { margin-top: 2rem; }
.mb-3 { margin-bottom: .75rem; }
.hidden-mobile { display: none; }
@media (min-width: 768px) { .hidden-mobile { display: block; } }