/* Markenschicht der Startseite: Anthrazit/Silber als Traeger, Orange nur als Marke.
   Gemessen am 26.09.2026 auf der ausgelieferten 3:1-Guide-Seite
   (markushorch.de/leadmagnet), nicht aus dem Quelltext abgeschrieben:

     Alias --orange dort ............ #C8CDD1 (Silber)
     Knopf .......................... linear-gradient(180deg,#51575c,#292d31 43%,
                                      #111315 53%,#353a3f) , Rand
                                      rgba(224,228,232,.32) , Radius 999px ,
                                      Schrift #f5f6f7 , innen oben #ffffff61 ,
                                      innen unten #000000b3
     Kopf-Knopf ..................... linear-gradient(#ffffff13,#ffffff05) ,
                                      Rand rgba(218,222,226,.24)
     Karte .......................... rgba(20,20,20,.85) , Rand #ffffff12
     Ueberschrift ................... #fff , hervorgehobenes Wort im Silber-
                                      verlauf 180deg #fff -> #6e7276
     Micro-Orange ................... rgb(232,132,36) , nur Versal-Labels 8-11px ,
                                      Punkte 5-6px , Kapitelnummern , feine Pfeile

   Die 44 Sand-Literale in home.css sind am 26.09.2026 auf helligkeitsgleiches
   Silber umgestellt worden (#c9bba5 -> #babcc3 usw.). Diese Datei setzt darauf
   nur noch den Ton der Guide-Seite und die Orange-Marken. */

:root{
  --ccm-micro-orange:#e88424;
  --ccm-silver:#c8cdd1;
  --ccm-silver-grad:linear-gradient(180deg,#fff 0%,#f6f7f8 24%,#c9cdd1 58%,#92979c 79%,#6e7276 100%);
  --ccm-anthracite-grad:linear-gradient(180deg,#51575c 0%,#292d31 43%,#111315 53%,#353a3f 100%);
  --ccm-line-soft:rgba(224,228,232,.32);

  --accent:var(--ccm-silver);
  --orange:var(--ccm-micro-orange);
}

/* ===================== 1. Knoepfe: Anthrazit-Pille ===================== */
.button{
  background:var(--ccm-anthracite-grad);
  border:1px solid var(--ccm-line-soft);
  border-radius:999px;
  color:#f5f6f7;
  box-shadow:inset 0 1px 0 #ffffff61,inset 0 -1px 0 #000000b3,0 10px 22px #0000004d;
}
.button:is(:hover,:focus-visible){
  color:#fff;
  border-color:#e8842466;
  box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 0 #000000b3,0 12px 26px #00000059;
}
#fahrplan .button,
#fahrplan .button:is(:hover,:focus-visible){color:#fff}
/* Der kleine Knopf im Kopf bleibt die leise Variante wie im Guide. */
.site-header .button,.button-small,.mobile-cta .button{
  background:linear-gradient(180deg,#ffffff13,#ffffff05);
  border-color:rgba(218,222,226,.24);
  box-shadow:inset 0 1px 0 #ffffff17,0 10px 22px #0000004d;
}
.site-header .button:is(:hover,:focus-visible),
.button-small:is(:hover,:focus-visible){border-color:#e8842466}

/* ===================== 2. Silberverlauf wie im Guide ===================== */
.silver-text,
.hero-title-accent .silver-text,
#erstgespraech h2 .silver-text{
  color:#e9ebec;
  background:var(--ccm-silver-grad);
  background-image:var(--ccm-silver-grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===================== 3. Orange: nur die Marken ===================== */
.eyebrow,
.mini-mark,
.review-type,
.step-outcome span{
  color:var(--ccm-micro-orange);
  font-weight:700;
  letter-spacing:.16em;
}
.review-type,
.step-outcome span{font-weight:650}

/* Der winzige Punkt vor dem Label -- Guide: .guide-free-dot, 5px. */
.eyebrow::before,
.mini-mark::before{
  content:'';
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ccm-micro-orange);
  margin-right:9px;
  vertical-align:2px;
}
.hero-heading .eyebrow::before{margin-right:8px}

/* Kapitel- und Schrittnummern */
.step-top span,
.system-checklist li>span,
.modules summary>span,
.call-number{color:var(--ccm-micro-orange)}

/* Feine Pfeile und Textlinks */
.text-link span{color:var(--ccm-micro-orange)}
.text-link:hover{text-decoration-color:var(--ccm-micro-orange);text-decoration-thickness:1px}

/* Punkte -- auch die spezifischeren Regeln in home.css ueberschreiben */
.tiny-dot,
.status-dot,
.hero .hero-portrait figcaption .tiny-dot{background:var(--ccm-micro-orange)}

/* Footerkante: Silber-Weiss, nicht Orange. Markus am 26.09.2026 zur oberen
   Kante und ihrem Schein: "nicht orange leuchtend sondern silber weiss
   leuchtend". Der Wert ist die starke Linie der Guide-Seite,
   rgba(255,255,255,.34), der Schein darunter derselbe Ton sehr duenn.
   Orange bleibt dem Footer als Marke erhalten -- ueber .tiny-dot und die
   Pfeile der Textlinks, nicht als Flaeche und nicht als Leuchten. */
.original-footer{
  border-top-color:rgba(255,255,255,.34);
  background:linear-gradient(180deg,#ffffff0d,transparent 34%);
}
/* Orange war hier eine Flaeche -- das verbietet die Markenregel ohnehin. */
.foot-social a:hover{background:#ffffff14}
.foot-col a:hover,
.foot-social a:hover{color:#fff}