/*
 * Gestaltung der öffentlichen Seiten von Rankmio an einer Stelle (29.10.2026).
 *
 * Bis dahin stand jede Farbe direkt in der Vorlage, #FF4D00 an rund 1.800
 * Stellen. Eine Änderung der Markenfarbe hiess, über 100 Dateien anzufassen.
 * Vorlagen nutzen deshalb nur noch diese Variablen und Bausteine.
 *
 * Kontrast nach WCAG 2.1: Schrift braucht 4,5 : 1, grosse Schrift (ab 24 px,
 * fett ab 18,7 px) 3 : 1. Die Markenfarbe #FF4D00 erreicht als Schrift auf
 * Weiss nur 3,3 : 1 und weisse Schrift auf ihr ebenso. Sie bleibt für Flächen
 * ohne Text, Linien, Rahmen und Symbole sowie für Schrift auf dunklem Grund
 * (5,8 : 1 auf #0D0D0D). Für Schrift auf hellem Grund und für Knöpfe mit
 * weisser Schrift gilt --rm-orange-text (5,2 : 1).
 */
:root {
  /* Marke */
  --rm-orange:        #FF4D00;  /* Flächen ohne Text, Linien, Symbole, Schrift auf Dunkel */
  --rm-std-orange-text:#C2410C;
  --rm-orange-text:   var(--rm-std-orange-text);  /* Schrift auf Hell */
  --rm-orange-dunkel: #9A3412;  /* Knopf beim Überfahren, Verlaufsende */
  --rm-orange-hell:   #FFF1E5;  /* Etiketten, zarte Flächen */
  --rm-orange-zart:   #FFF7F2;  /* Kästen */
  --rm-orange-rand:   #FFE4D2;
  --rm-orange-knopf:  #C2410C;  /* Flaeche unter weisser Schrift; bleibt auch in dunklen Bereichen */
  --rm-orange-auf-dunkel:#FF8A50; /* Schrift auf dunklem oder orange getoentem dunklem Grund (5,4 : 1) */

  /* Grund und Schrift */
  --rm-beige:         #F5F0EB;
  --rm-weiss:         #FFFFFF;
  --rm-dunkel:        #0D0D0D;  /* Fussbereich */
  --rm-std-tinte:     #0D0D0D;
  --rm-tinte:         var(--rm-std-tinte);  /* Überschriften */
  --rm-text:          #1F2937;  /* Fliesstext */
  --rm-std-text-leise:#475569;
  --rm-text-leise:    var(--rm-std-text-leise);  /* Untertitel, Nebentexte auf Hell (6,7 : 1 auf Beige) */
  --rm-text-auf-dunkel:#94A3B8; /* Nebentexte auf Dunkel (7,6 : 1) */
  --rm-linie:         #E2E8F0;
  --rm-linie-warm:    #F1EDE8;

  /* Zustandsfarben: Schrift auf Hell und Füllung unter weisser Schrift */
  --rm-gruen-text:    #047857;
  --rm-gruen-knopf:   #15803D;
  --rm-gruen-hell:    #F0FDF4;
  --rm-blau-text:     #0369A1;
  --rm-blau-hell:     #F0F9FF;
  --rm-gelb-text:     #B45309;
  --rm-gelb-hell:     #FEFCE8;
  --rm-rot-text:      #B91C1C;
  --rm-rot-hell:      #FEF2F2;
  --rm-lila-text:     #6D28D9;
  --rm-lila-hell:     #F5F3FF;
  --rm-rose-text:     #BE123C;

  /* Schrift */
  --rm-font-display:  'Outfit', system-ui, sans-serif;
  --rm-font-text:     'DM Sans', system-ui, sans-serif;

  /* Formen */
  --rm-radius-s:      8px;
  --rm-radius-m:      12px;
  --rm-radius-l:      16px;
  --rm-radius-xl:     20px;
  --rm-schatten-karte:0 4px 12px rgba(15, 23, 42, .06);
}

/* Knöpfe: ein Muster für Kopfzeile, Hinweise und Aufrufe */
.rm-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--rm-orange-knopf); color: #fff;
  font-family: var(--rm-font-display); font-weight: 700; font-size: 14px;
  padding: 10px 22px; border-radius: var(--rm-radius-s); border: 0;
  text-decoration: none; cursor: pointer; transition: background .2s, transform .2s;
}
.rm-knopf:hover { background: var(--rm-orange-dunkel); color: #fff; }
.rm-knopf-rahmen {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--rm-orange-text);
  border: 1.5px solid var(--rm-orange-text);
  font-family: var(--rm-font-display); font-weight: 700; font-size: 14px;
  padding: 9px 20px; border-radius: var(--rm-radius-s); text-decoration: none;
}
.rm-knopf-rahmen:hover { background: var(--rm-orange-hell); color: var(--rm-orange-dunkel); }
.rm-knopf-gruen { background: var(--rm-gruen-knopf); }
.rm-knopf-gruen:hover { background: var(--rm-gruen-text); }

/* Aufruf-Kasten am Seitenende mit weisser Schrift */
.rm-aufruf {
  background: linear-gradient(135deg, var(--rm-orange-text) 0%, var(--rm-orange-dunkel) 100%);
  color: #fff; border-radius: var(--rm-radius-xl); padding: 48px 40px; text-align: center;
}

/* Links im Fliesstext: nicht nur an der Farbe erkennbar */
.rm-link { color: var(--rm-orange-text); text-decoration: underline; text-underline-offset: 2px; }
.rm-link:hover { color: var(--rm-orange-dunkel); }

/* Dunkle Bereiche: dieselben Variablen mit Werten fuer dunklen Grund.
   Vorlagen mit dunklem Abschnitt tragen hier ihre Klasse ein, statt Farben
   doppelt zu pflegen (29.10.2026). */
.rm-dunkel,
.rm-cta, .kte-cta, .meta-cta, .meta-hero, .vgl-hero,
.sbs-hero, .gsc-hero, .gsc-toc, .dev-hero, .dev-manifest, .code-block,
.rc-hero, .kf-card, .v1-hero, .eg-hero, .cc-hero, .rvks-quote,
.sgb-top-hero, .sp-codebox, .sp-codebox-head, .review-box .head, .ai-analysis-card .head,
.schema-box .head, .brief-box .head, .sp-brief .head,
.rm-pattern {
  --rm-text-leise: var(--rm-text-auf-dunkel);
  --rm-orange-text: var(--rm-orange-auf-dunkel);
  --rm-tinte: #FFFFFF;
  --rm-gruen-text:#6EE7B7; --rm-blau-text:#7DD3FC; --rm-gelb-text:#FCD34D; --rm-rot-text:#FCA5A5; --rm-lila-text:#C4B5FD;
}

/* Helle Karte in einem dunklen Bereich: wieder die Werte fuer hellen Grund */
.rm-hell {
  --rm-text-leise: var(--rm-std-text-leise);
  --rm-orange-text: var(--rm-std-orange-text);
  --rm-tinte: var(--rm-std-tinte);
  --rm-gruen-text: #047857; --rm-blau-text: #0369A1; --rm-gelb-text: #B45309; --rm-rot-text: #B91C1C; --rm-lila-text: #6D28D9;
}

/* Symbol-Kachel: schwarz, weisses Symbol, ein orangener Punkt (Knut, 29.10.2026).
   Ersetzt die Pastellkacheln in je eigener Farbe. --rm-kachel-rand ist die
   Farbe des Grunds, auf dem die Kachel steht; der Punkt bekommt sie als Ring. */
.rm-kachel {
  position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--rm-dunkel) !important; color: #fff;
}
.rm-kachel svg { stroke: #fff !important; stroke-width: 1.75; }
.rm-kachel::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rm-orange); box-shadow: 0 0 0 2px var(--rm-kachel-rand, #fff);
}
.rm-kachel-s { width: 40px; height: 40px; border-radius: 12px; }
.rm-kachel-s::after { width: 8px; height: 8px; }