/* ==========================================================================
   theme.css — PARTNER-FARBEN: European IT Consultancy EITCO GmbH / arveo
   (www.eitco.de, Produktseite www.eitco.de/produkte/arveo/)

   Alle Werte im Browser an den gerenderten Sektionen von
   www.eitco.de/produkte/arveo/ GEMESSEN (computed styles):
     Bühne (Hero)   linear-gradient(#084E58 0%, #137080 100%), Headline weiß
     Band           #137080 (Vollton), Headline weiß
     dunkle Sektion #084E58
     helle Sektionen #FFFFFF im Wechsel mit #EEEEEE, Headlines #3A3A3A,
                    Akzent-Headlines #137080
     CTA-Button     Vollton #99CC33 · Outline-Buttons Kontur #A3C900,
                    Radius 40px („ARVEO SECOM LOGIN", „JETZT HERUNTERLADEN")
   Dieselbe Petrol-Limette-Rampe trägt auch das EITCO-Logo (Verlauf im „e").

   RHYTHMUS: EITCO wechselt dunkles Petrol mit Weiß — nicht Weiß mit Hellgrau.
   Diese Microsite übernimmt das (Muster: MID- und UNITY-Microsite): Hero und
   jede zweite Inhaltssektion liegen auf #084E58, dazwischen bleibt Weiß, das
   Abschlussband trägt den helleren Bandton #137080. Umgesetzt über die im
   Designsystem vorhandene Klasse `.section--dark` (base.css) — dort ist auch
   schon geregelt, dass dunkle Sektionen kein Waben-Dekor bekommen.

   KONTRAST: EITCOs eigener Vollton-Button (#99CC33 mit weißer Schrift) kommt
   nur auf 1,9:1 und wäre nicht lesbar. Die Limette bleibt daher als Fläche
   erhalten, trägt hier aber dunkle Schrift (#0B2A30 → 7,7:1). Überall dort, wo
   --cta sonst als TEXT auf heller Fläche landen würde (Akkordeon-Plus,
   Datei-Auswahl-Link, Inline-Links), steht Petrol #0E6675 (6,6:1).

   Geändert wird ausschließlich diese Datei — tokens.css / base.css /
   components.css / pages.css / microsite.css bleiben identisch zur Vorlage V2.
   ========================================================================== */
:root{
  /* Primär-Ramp (dunkel → hell) — EITCO-Petrol; 900/600/400 sind Originaltöne */
  --c-purple-900:#084E58;  /* dunkle Sektionen, Footer — Originalton eitco.de */
  --c-purple-800:#0A5A66;
  --c-purple-700:#0E6675;  /* texttauglich auf Weiß (6,6:1) */
  --c-purple-600:#137080;  /* Sekundär / Bandton — Originalton (5,6:1) */
  --c-purple-500:#1A8698;  /* Fokus/heller Akzent */
  --c-purple-400:#62C1C5;  /* gemessenes helles EITCO-Türkis */
  --c-purple-200:#B0DEE0;
  --c-purple-100:#D8EFF0;
  --c-purple-050:#F1F7F8;

  /* EITCO-Limette (Akzent / CTA) — statt MR.KNOW-Rot #C00000 */
  --c-red-600:#A3C900;     /* CTA-Fläche — Markenton der Partner-Website */
  --c-red-700:#8CB000;     /* CTA Hover (leicht vertieft) */
  --c-red-500:#99CC33;     /* hellere Limette des EITCO-Vollton-Buttons */
  --c-red-100:#EDF5CC;

  /* Fließtext auf den dunklen Petrol-Flächen (statt des lila getönten Vorgabewerts) */
  --text-on-dark:#E2F0F2;

  /* --- Eigene Tokens dieser Microsite --- */
  --eitco-stage:linear-gradient(180deg,#084E58 0%,#137080 100%); /* Bühne wie eitco.de */
  --eitco-band:#137080;    /* Abschlussband — Bandton der Partnerseite */
  --on-lime:#0B2A30;       /* Schrift auf Limette (7,7:1) */
  --link-on-light:#0E6675; /* Textlinks auf Weiß (6,6:1) — Limette käme auf 1,9:1 */
}

/* ==========================================================================
   Petrol als Flächenfarbe (Rhythmus dunkel ↔ weiß wie auf eitco.de)
   ========================================================================== */

/* ---- Bühne: der Hero-Verlauf der Partnerseite --------------------------- */
.ms .ms-hero{ background:var(--eitco-stage); color:var(--text-on-dark); }
.ms .ms-hero h1{ color:#fff; }
.ms .ms-hero .hero__sub{ color:var(--text-on-dark); }
.ms .ms-hero .hero__sub strong{ color:#fff; }
.ms .ms-hero .ms-trust li{ color:rgba(255,255,255,.88); }
/* honeycomb.svg ist fest lila (#4E3F8E) und verschwände auf Petrol —
   hier weiß gefiltert. Die Deckkraft steckt im SVG selbst und bleibt. */
.ms .ms-hero::before{ filter:grayscale(1) brightness(3); }

/* ---- Dunkle Inhaltssektionen (.section--dark) --------------------------- */
/* Fläche und Headline-Farbe kommen aus base.css; hier nur, was dort fehlt. */
.ms .section--dark .lead{ color:rgba(255,255,255,.92); }
/* microsite.css setzt die Folgeabsätze im „Über …"-Text auf --text-muted
   (#6D6E72) — auf Petrol nur 1,8:1. Der Fließtext bleibt hier durchgängig
   im selben Weißton wie der Lead. */
.ms .section--dark .ms-about p + p{ color:rgba(255,255,255,.92); }
.ms .section--dark .ms-points li{ color:var(--text-on-dark); }
.ms .section--dark .ms-points li b{ color:#fff; }
/* Karten und Akkordeon bleiben HELLE Flächen auf der dunklen Sektion — Textfarben
   zurücksetzen, sonst erben sie die helle Schrift bzw. das weiße h3 aus base.css
   (`.section--dark h2, .section--dark h3 { color:#fff }`) und verschwinden. */
.ms .section--dark .card{ color:var(--text); }
.ms .section--dark .card h3{ color:var(--brand); }
.ms .section--dark .card p{ color:var(--text-muted); }
.ms .section--dark .accordion details{ color:var(--text); }

/* ---- Textlinks im Inhalt ------------------------------------------------- */
/* base.css setzt `a{ color:inherit; text-decoration:none }` — Inhaltslinks
   brauchen hier also eine eigene Farbe, sonst sind sie nicht als Link erkennbar.
   Auf Weiß trägt Petrol (6,6:1), auf Petrol die Limette (4,9:1). Die Regeln
   greifen nach Untergrund, damit ein späterer Wechsel des Sektions-Rhythmus
   die Links nicht unsichtbar macht. */
.ms .ms-points li a,
.ms .ms-about > div a{ color:var(--link-on-light); text-decoration:underline; text-underline-offset:2px; }
.ms .section--dark .ms-points li a,
.ms .section--dark .ms-about > div a{ color:var(--c-red-500); }
.ms .section--dark .ms-points li a:hover,
.ms .section--dark .ms-about > div a:hover{ color:#fff; }

/* ---- Abschlussband: der hellere Bandton, setzt sich von #084E58 darüber ab */
.ms .ms-cta{ background:var(--eitco-band); }

/* ==========================================================================
   Limette: Fläche ja, weiße Schrift nein
   ========================================================================== */
.ms .btn--cta,
.ms .btn--cta:hover{ color:var(--on-lime); }
/* Stellen, an denen --cta als Text/Linie auf heller Fläche säße → Petrol */
.ms .accordion summary::after{ color:var(--link-on-light); }
.ms .widget__drop-link{ color:var(--link-on-light); }
/* Bulletpoint-Quadrate: auf Petrol Limette (Akzent), auf Weiß Petrol — genau so
   hält es die Partnerseite, deren Akzente auf hellen Flächen #137080 sind. */
.ms .section:not(.section--dark) .ms-points li::before{ background:var(--c-purple-600); }

/* ---- Schnellzugriff-Rail ------------------------------------------------- */
/* microsite.css färbt die Rail über --cta ein; als durchgehender Limetten-Balken
   mit weißen Icons (1,9:1) wäre sie weder lesbar noch markengerecht — EITCO setzt
   die Limette nur punktuell als Akzent. Die Rail trägt daher den Petrol-Verlauf. */
.ms .rail{
  background:
    linear-gradient(120deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--c-purple-600) 0%, var(--c-purple-700) 52%, var(--c-purple-900) 100%);
}