/* ==========================================================================
 * RegioCars · Markenflächen
 * --------------------------------------------------------------------------
 * Der Fußbereich stand bisher auf fast Schwarz (#0a1410). Er trägt jetzt
 * das Markengrün #014d41, alle übrigen Werte darin sind darauf abgestimmt:
 * Weiß für Überschriften, ein helles Grüngrau für Fließtext, ein dunkleres
 * Grün für abgesetzte Kacheln, Linien in transparentem Weiß.
 *
 * Kommt über den gemeinsamen Head-Block auf alle Seiten, deshalb
 * !important: die seiteneigenen <style>-Blöcke werden später geladen.
 * ========================================================================== */

:root {
  --rc-marke:        #014d41;  /* Markengrün, Flächen */
  --rc-marke-tief:   #013a31;  /* dunkler, für Kacheln auf der Fläche */
  --rc-marke-hell:   #a9cfba;  /* Fließtext auf Grün */
  --rc-marke-akzent: #16b073;  /* Akzent gruen */
  --rc-orange:       #ff5522;  /* Akzentfarbe aus dem Markenkit, sticht heraus */
  --rc-orange-tief:  #e8461a;  /* dieselbe Farbe fuer Hover */
  /* Weitere Werte aus dem Markenkit, entnommen aus den Muster-PDFs */
  --rc-gruen-mittel: #284a42;  /* dunkles Gruen fuer Flaechen und Linien */
  --rc-gruen-grau:   #8ca89e;  /* Grauton mit Gruenstich, Nebentext */
  --rc-hell-grau:    #e6ebe9;  /* helle Trennflaeche */
}

/* ---------- Fußbereich ---------- */
.footer {
  background: var(--rc-marke) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

.footer h3, .footer h4, .footer strong {
  color: #ffffff !important;
}

.footer p,
.footer-brand p,
.footer-clients-label {
  color: var(--rc-marke-hell) !important;
}

.footer ul a,
.footer-bottom,
.footer-bottom a,
.footer-rb-link {
  color: rgba(255, 255, 255, 0.78) !important;
}
.footer ul a:hover,
.footer-bottom a:hover,
.footer-rb-link:hover {
  color: #ffffff !important;
}

/* Trennlinien sichtbar halten, ohne hart zu wirken */
.footer hr,
.footer-bottom,
.footer-clients {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Abgesetzte Kacheln bekommen das tiefere Grün, sonst verschwinden sie */
.footer-partner,
.footer-clients-more {
  background: var(--rc-marke-tief) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}
.footer-partner:hover {
  background: #012f28 !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
.footer-partner-label {
  color: var(--rc-marke-hell) !important;
}
.footer-partner-addr {
  color: #ffffff !important;
}

/* Kundenlogos stehen auf hellen Kacheln, die bleiben unverändert lesbar */
.footer-clients-row img {
  background: #ffffff !important;
}


/* ---------- Dunkle Kaesten auf der Startseite ----------
   Standen auf fast Schwarz (#0a1410) und tragen jetzt das Markengruen. */
.hero-card-word,
.service.service-1 {
  background: var(--rc-marke) !important;
  color: #ffffff !important;
}
.service.service-1 .service-tag {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

/* ---------- Kernleistung Flottenpartner-Methode ---------- */
.service.service-flotte {
  background: var(--rc-marke) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  display: flex;
  flex-direction: column;
}
.service.service-flotte h3 { color: #ffffff !important; }
.service.service-flotte p { color: rgba(255, 255, 255, 0.86) !important; }
.service.service-flotte .service-tag {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}
.service.service-flotte .service-bullets,
.service.service-flotte .service-bullets li {
  color: #ffffff !important;
  opacity: 1 !important;
}

.service-cta {
  display: inline-block;
  margin-top: auto;
  padding: 13px 20px;
  background: var(--rc-marke-akzent);
  color: #06281f !important;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  transition: background .18s ease, transform .18s ease;
}
.service-cta:hover { background: #12c27d; transform: translateY(-1px); }
.service-cta:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.service-cta-hint {
  display: block;
  margin-top: 9px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--rc-marke-hell) !important;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .service-cta { transition: none; }
}


/* ---------- Verweise von Referenzen auf die jeweilige Fallstudie ---------- */
.testimonial { display: flex; flex-direction: column; }
.testimonial-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 14px;
  color: var(--rc-marke) !important;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  border-top: 1px solid #e6ece9;
  align-self: flex-start;
  transition: color .16s ease;
}
.testimonial-link:hover,
.testimonial-link:focus-visible { color: var(--rc-marke-akzent) !important; }

.case-link {
  display: inline-block;
  margin-top: 14px;
  padding: 12px 20px;
  background: var(--rc-marke-akzent);
  color: #06281f !important;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background .16s ease;
}
.case-link:hover { background: #12c27d; }
.case-link:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }


/* ---------- Icon-Slots ----------
   Die Slots trugen frueher Emojis und waren ueber font-size dimensioniert.
   Jetzt stehen dort Strich-Icons als SVG, die brauchen eine eigene Groesse.
   Die Farbe kommt ueber currentColor aus dem umgebenden Text, damit die
   Icons auf hellem wie auf dunklem Grund richtig stehen. */
.cs-stat-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}
.funnel-choice-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  color: var(--rc-marke);
}
.funnel-choice:hover .funnel-choice-icon svg,
.funnel-choice.selected .funnel-choice-icon svg {
  color: var(--rc-marke-akzent);
}

@media (max-width: 600px) {
  .cs-stat-icon svg { width: 26px; height: 26px; }
}

.fb-launch-icon svg { width: 28px; height: 28px; display: block; }
.inline-icon { display: inline-flex; vertical-align: -0.18em; }
.inline-icon svg { width: 1.05em; height: 1.05em; }
.case-after-icon svg { width: 26px; height: 26px; display: block; }


/* ---------- Orange als Blickfang ----------
   Aus dem Markenkit (#ff5522). Bewusst sparsam eingesetzt: dort, wo der
   Blick zuerst hinsoll, nicht flaechig. */
.rechner-hero h1 em {
  color: var(--rc-orange) !important;
  font-style: normal;
}
.quiz-progress-fill { background: var(--rc-orange) !important; }
.pdf-cta,
.pdf-modal-btn {
  background: var(--rc-orange) !important;
  color: #ffffff !important;
  border-color: var(--rc-orange) !important;
}
.pdf-cta:hover,
.pdf-modal-btn:hover { background: var(--rc-orange-tief) !important; }


/* ---------- PDF-Angebot ---------- */
.pdf-cta-block {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin: 20px 0 28px; padding: 20px 22px;
  background: #fff6f2; border: 1px solid #ffd2c2; border-radius: 14px;
}
.pdf-cta-text { flex: 1 1 240px; }
.pdf-cta-text strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.pdf-cta-text span { display: block; font-size: .87rem; line-height: 1.5; color: #55635c; }
.pdf-cta {
  flex: 0 0 auto; padding: 13px 22px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; cursor: pointer;
  transition: background .16s ease;
}
.pdf-cta:disabled { opacity: .55; cursor: default; }

.pdf-modal {
  position: fixed; inset: 0; z-index: 2147482000;
  display: none; align-items: center; justify-content: center;
  padding: 18px; background: rgba(10, 20, 16, .55);
}
.pdf-modal.offen { display: flex; }
.pdf-modal-box {
  position: relative; width: 100%; max-width: 460px;
  max-height: calc(100vh - 36px); overflow-y: auto;
  background: #fff; border-radius: 18px; padding: 30px 26px 26px;
  box-shadow: 0 24px 60px rgba(10, 20, 16, .3);
}
.pdf-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #f2f6f4; color: #46564f; font-size: 20px; line-height: 1;
  cursor: pointer;
}
.pdf-modal-close:hover { background: #e6ece9; }
.pdf-modal-eyebrow {
  display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rc-orange); font-weight: 700; margin-bottom: 8px;
}
.pdf-modal-title { font-size: 1.35rem; line-height: 1.28; margin: 0 0 10px; }
.pdf-modal-sub { font-size: .92rem; line-height: 1.6; color: #55635c; margin: 0 0 18px; }
.pdf-modal-label {
  display: block; font-size: .8rem; font-weight: 700; margin: 0 0 5px; color: #10261d;
}
.pdf-modal-label span { font-weight: 400; color: #8d9a94; }
.pdf-modal-box input[type="text"],
.pdf-modal-box input[type="email"],
.pdf-modal-box input[type="tel"] {
  width: 100%; box-sizing: border-box; padding: 12px 14px; margin: 0 0 14px;
  border: 2px solid #e2e8e5; border-radius: 10px; font: inherit; font-size: 1rem;
}
.pdf-modal-box input:focus { outline: none; border-color: var(--rc-orange); }
.pdf-modal-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .8rem; line-height: 1.5; color: #55635c; margin: 4px 0 14px;
}
.pdf-modal-consent input { width: 18px; height: 18px; flex: none; accent-color: var(--rc-orange); }
.pdf-modal-error {
  display: none; font-size: .82rem; color: #c0341a; margin: 0 0 12px; font-weight: 600;
}
.pdf-modal-error.show { display: block; }
.pdf-modal-btn {
  width: 100%; padding: 15px 20px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: background .16s ease;
}
.pdf-modal-btn:disabled { opacity: .6; cursor: default; }
.pdf-modal-note {
  font-size: .75rem; color: #8d9a94; text-align: center; margin: 10px 0 0; line-height: 1.5;
}
.pdf-dank-icon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--rc-marke);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 0 14px;
}

@media (max-width: 560px) {
  .pdf-cta-block { padding: 18px; }
  .pdf-cta { width: 100%; }
  .pdf-modal-box { padding: 26px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdf-cta, .pdf-modal-btn { transition: none; }
}


/* ---------- Fallstudien-Band ----------
   Seitlich scrollbar mit Einrasten, damit auf dem Handy gewischt werden
   kann. Auf dem Desktop stehen die Karten nebeneinander. */
.fs-band { background: #f5efe6; padding: 56px 0 64px; }
.fs-band-kopf { margin: 0 0 26px; }
.fs-band-kopf h2 { margin: 6px 0 0; }
.fs-band-kopf h2 em { color: var(--rc-orange); font-style: normal; }

.fs-spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 320px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.fs-spur:focus-visible { outline: 3px solid var(--rc-orange); outline-offset: 4px; }

.fs-karte {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e4ded4; border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fs-karte:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10,20,16,.12); }
.fs-karte:focus-visible { outline: 3px solid var(--rc-orange); outline-offset: 3px; }

.fs-karte-bild { position: relative; aspect-ratio: 4 / 3; background: #e8ece9; }
.fs-karte-bild img { width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 22%; }
.fs-karte-marke {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--rc-orange); color: #fff;
  padding: 7px 14px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
}

.fs-karte-text { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.fs-karte-text p { margin: 0 0 14px; font-size: .92rem; line-height: 1.55; color: #3d4a44; }
.fs-karte-person { margin: auto 0 12px; }
.fs-karte-person strong { display: block; font-size: .92rem; }
.fs-karte-person span { display: block; font-size: .8rem; color: #8d9a94; }
.fs-karte-link { font-size: .87rem; font-weight: 700; color: var(--rc-marke); }
.fs-karte:hover .fs-karte-link { color: var(--rc-orange); }

.fs-hinweis { font-size: .8rem; color: #8d9a94; margin: 4px 0 0; }
@media (min-width: 1000px) { .fs-hinweis { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .fs-karte { transition: none; }
  .fs-spur { scroll-behavior: auto; }
}


/* ---------- Verweis auf den Umsatzrechner ----------
   Steht auf jeder Fallstudie kurz vor dem Fussbereich: wer die Zahlen
   eines anderen Betriebs gelesen hat, will seine eigenen sehen. */
.rechner-verweis { background: var(--rc-marke); padding: 52px 0; }
.rv-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.rv-text { flex: 1 1 320px; }
.rv-eyebrow {
  display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rc-orange); font-weight: 700; margin-bottom: 8px;
}
.rechner-verweis h2 {
  color: #fff !important; margin: 0 0 10px; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.2;
}
.rechner-verweis h2 em { color: var(--rc-orange); font-style: normal; }
.rechner-verweis p {
  color: var(--rc-marke-hell) !important; margin: 0; font-size: .95rem; line-height: 1.6; max-width: 52ch;
}
.rv-btn {
  flex: 0 0 auto; display: inline-block;
  padding: 16px 28px; border-radius: 999px;
  background: var(--rc-orange); color: #fff !important;
  font-weight: 700; text-decoration: none; font-size: 1rem;
  transition: background .16s ease, transform .16s ease;
}
.rv-btn:hover { background: var(--rc-orange-tief); transform: translateY(-1px); }
.rv-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 620px) { .rv-btn { width: 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .rv-btn { transition: none; } }


/* ---------- Einzelne Fallstudie (wenn es nur eine passende gibt) ---------- */
.fs-einzel {
  display: grid; gap: 0; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #e4ded4; border-radius: 18px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fs-einzel:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(10,20,16,.13); }
.fs-einzel:focus-visible { outline: 3px solid var(--rc-orange); outline-offset: 3px; }
.fs-einzel-bild { position: relative; aspect-ratio: 4 / 3; background: #e8ece9; }
/* Die Vorlage ist nahezu quadratisch. Der Ausschnitt sitzt bewusst weiter
   oben, sonst wird das Gesicht angeschnitten. */
.fs-einzel-bild img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 22%;
}
.fs-einzel-text { padding: 24px 24px 26px; }
.fs-einzel-text h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 10px; }
.fs-einzel-text p { margin: 0 0 14px; font-size: .95rem; line-height: 1.6; color: #3d4a44; }
.fs-einzel-punkte { list-style: none; margin: 0 0 16px; padding: 0; }
.fs-einzel-punkte li {
  position: relative; padding: 0 0 0 22px; margin: 0 0 7px;
  font-size: .9rem; line-height: 1.5; color: #46564f;
}
.fs-einzel-punkte li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rc-orange);
}
.fs-einzel-person { margin: 0 0 12px; }
.fs-einzel-person strong { display: block; font-size: .95rem; }
.fs-einzel-person span { display: block; font-size: .82rem; color: #8d9a94; }
.fs-einzel:hover .fs-karte-link { color: var(--rc-orange); }

@media (min-width: 860px) {
  .fs-einzel { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .fs-einzel-bild { aspect-ratio: auto; height: 100%; }
  .fs-einzel-text { padding: 32px 34px; align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .fs-einzel { transition: none; } }


/* ---------- Fussbereich, Grundgeruest ----------
   Vier Seiten laden css/style.css nicht (die CRM-Oberflaeche und die
   Fallstudie RAS). Damit der einheitliche Fussbereich auch dort steht,
   liegen die noetigen Regeln hier. marke.css wird vor style.css geladen,
   auf allen uebrigen Seiten behaelt style.css deshalb das letzte Wort. */
.footer .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 0 40px;
}
.footer-brand { max-width: 340px; }
.footer-brand > img { height: 26px; width: auto; margin-bottom: 16px; display: block; }
.footer-brand p { font-size: .92rem; line-height: 1.6; margin: 0 0 18px; }
.footer h4 {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 14px; color: #ffffff;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin: 0 0 9px; }
.footer ul a { text-decoration: none; font-size: .94rem; }
.footer-partner {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  text-decoration: none; margin-top: 4px;
}
.footer-partner-logo { height: 20px; width: auto; background: #fff; padding: 4px 8px; border-radius: 4px; }
.footer-partner-label { font-size: .72rem; }
.footer-partner-addr { font-size: .85rem; font-weight: 600; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 20px 0 8px; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .85rem;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; padding: 40px 0 30px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}