/* =============================================================
   Thema „Kräftig & auffällig“
   Ergänzt stil.css. Große Typografie, ganze Abschnitte in Vollfarbe,
   harte Hell-Dunkel-Wechsel, Zahlen als Gestaltungselement.
   ============================================================= */

:root {
  --line: #d8e2e7;
  --radius: 0;
}

/* ---------- Typografie: groß und eng ---------- */
h1, h2, h3 { letter-spacing: -.045em; font-weight: 800; }
.hero { min-height: 700px; }
.hero h1 { font-size: clamp(46px, 7.6vw, 96px); line-height: .94; }
.hero h1 em { color: var(--cyan); font-weight: 800; }
.hero-text { font-size: 19px; }
.page-hero h1 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; }
.section-heading h2, .area-layout h2, .contact-copy h2, .cta-inner h2 {
  font-size: clamp(32px, 4.6vw, 56px); line-height: 1.02;
}
.kicker { font-size: 12px; letter-spacing: .2em; font-weight: 800; }

.button, .booking-form .wizard-actions button,
.booking-form input, .booking-form select, .booking-form textarea,
.quick-card, .booking-form, .service-card, .city-card, .aside-card,
.value-grid article, .check-cards li, .transport-cards article,
.choice-field label > span, .hours-box, .aside-note { border-radius: 0; }
.button { min-height: 56px; font-size: 16px; }

/* ---------- Zahlen als Blickfang ---------- */
.confidence-strip { background: var(--navy); border: 0; }
.confidence-grid > div { border-right-color: rgba(255,255,255,.14); padding: 34px 32px; }
.confidence-grid strong { color: var(--cyan); font-size: 40px; letter-spacing: -.04em; line-height: 1; }
.confidence-grid span { color: #b5c4cd; font-size: 13px; margin-top: 8px; }

/* ---------- Leistungen ----------
   Achtung: Diese Kacheln kommen an zwei Stellen vor – im dunklen Bereich der
   Startseite und auf hellen Unterseiten. Deshalb bekommt jede Umgebung ihre
   eigene Behandlung; ein pauschales Styling würde weiße Schrift auf weißem
   Grund erzeugen. */

/* Grundform der Kachel – gilt überall */
.service-grid { gap: 2px; }
.service-card { border: 0; padding: 34px 30px; }
.service-card:hover { transform: none; box-shadow: none; }
.service-card h3 { font-size: 21px; }
.service-icon { background: transparent; width: 38px; height: 38px; place-items: start center; }
.service-icon .icon { width: 32px; height: 32px; stroke-width: 1.5; }

/* Im dunklen Leistungsbereich der Startseite */
.services { background: var(--navy); }
.services .kicker { color: var(--cyan); }
.services .section-heading h2 { color: #fff; }
.services .section-heading > p { color: #b5c4cd; }
.services .service-card { background: rgba(255,255,255,.06); }
.services .service-card:hover { background: var(--cyan); }
.services .service-card h3 { color: #fff; }
.services .service-card p { color: #b5c4cd; }
.services .service-card a { color: var(--cyan); }
.services .service-icon { color: var(--cyan); }
.services .service-card:hover h3,
.services .service-card:hover p,
.services .service-card:hover a,
.services .service-card:hover .service-icon { color: var(--navy); }
.services .cost-note { color: #b5c4cd; }
.services .cost-note strong { color: #fff; }
.services .cost-note a { color: var(--cyan); }

/* Auf hellen Seiten – zum Beispiel auf „Leistungen“ */
.section:not(.services) > .shell > .service-grid .service-card {
  background: #fff;
  border-left: 3px solid var(--cyan);
}
.section:not(.services) > .shell > .service-grid .service-card:hover {
  background: var(--navy);
}
.section:not(.services) > .shell > .service-grid .service-card h3 { color: var(--navy); }
.section:not(.services) > .shell > .service-grid .service-card p { color: var(--muted); }
.section:not(.services) > .shell > .service-grid .service-card a { color: var(--cyan-dark); }
.section:not(.services) > .shell > .service-grid .service-icon { color: var(--cyan-dark); }
.section:not(.services) > .shell > .service-grid .service-card:hover h3,
.section:not(.services) > .shell > .service-grid .service-card:hover p,
.section:not(.services) > .shell > .service-grid .service-card:hover a,
.section:not(.services) > .shell > .service-grid .service-card:hover .service-icon { color: #fff; }

/* ---------- Schritte: große Ziffern ---------- */
.steps li { grid-template-columns: 78px 1fr; border-bottom-color: var(--line); }
.steps > li > span {
  width: 68px; height: 68px; border-radius: 0; background: var(--cyan);
  color: var(--navy); font-size: 22px; letter-spacing: -.03em;
}
.steps h3 { font-size: 21px; }

/* ---------- Harte Wechsel ---------- */
.about { background: var(--cyan); }
.about .kicker { color: #0b3d47; }
.about .section-heading h2 { color: var(--navy); }
.about .section-heading > p, .check-list small { color: #0d3f49; }
.check-list li > span { background: var(--navy); color: var(--cyan); }
.image-badge { border-color: var(--cyan); border-radius: 0; }
.about-image-wrap img { border-radius: 0; }
.text-link { color: #0b3d47; }
.about .text-link { color: var(--navy); }

.transport-section, .checklist-section, .faq, .nachbarorte { background: #f1f5f7; }
.cta-band { background: var(--cyan); color: var(--navy); padding: 72px 0; }
.cta-inner h2 { color: var(--navy); }
.cta-inner p { color: #0d3f49; }
.cta-band .button.primary { background: var(--navy); color: #fff; }
.cta-band .button.primary:hover { background: var(--navy-2); }
.cta-band .button.ghost { color: var(--navy); border-color: rgba(16,40,60,.35); }
.cta-band .button.ghost:hover { background: rgba(16,40,60,.1); }

.page-hero { background: linear-gradient(180deg, #e7f2f4 0%, #fff 100%); }
.hero-shade {
  background: linear-gradient(90deg, rgba(7,20,30,.94) 0%, rgba(7,20,30,.84) 44%, rgba(7,20,30,.3) 74%, rgba(7,20,30,.1) 100%);
}
.quick-option.featured { background: var(--cyan); border-color: var(--cyan); }
.quick-option.featured strong, .quick-option.featured b { color: var(--navy); }
.quick-option.featured small { color: #0d3f49; }
.featured .option-icon { background: var(--navy); color: var(--cyan); }
.area-section { padding: 96px 0; }
.area-tags a, .area-tags span { border-radius: 0; }
.city-card { border: 0; background: #fff; border-left: 3px solid var(--cyan); padding: 24px; }
.city-card:hover { background: var(--navy); transform: none; }
.city-card:hover strong, .city-card:hover .city-more { color: #fff; }
.city-card:hover .city-region { color: var(--cyan); }
.value-grid article, .check-cards li, .transport-cards article { border-left: 3px solid var(--cyan); border-top: 0; border-right: 0; border-bottom: 0; }
.mobile-actions a:last-child { background: var(--cyan); }
.stepper button > span, .booking-form .wizard-actions button { border-radius: 0; }


/* Mobilregeln der Basis bestätigen – dieses Thema wird danach geladen. */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .area-section { padding: 76px 0; }
  /* Einspaltig steht der Text über dem gesamten Bild – deshalb flächig
     abdunkeln statt seitlich, sonst liegt Schrift über hellem Himmel. */
  .hero-shade { background: linear-gradient(180deg, rgba(7,20,30,.86) 0%, rgba(7,20,30,.94) 100%); }
}
@media (max-width: 620px) {
  .confidence-grid > div { padding: 20px 12px; }
  .confidence-grid strong { font-size: 30px; }
  .steps li { grid-template-columns: 54px 1fr; gap: 14px; }
  .steps > li > span { width: 48px; height: 48px; font-size: 17px; }
  .steps h3 { font-size: 18px; }
  .service-card { padding: 26px 22px; }
  .area-section { padding: 58px 0; }
  .cta-band { padding: 52px 0; }
  .image-badge { right: -4px; bottom: -28px; }
}