/* KRITIS — Gruen statt Sand, und das Wenige, das die vierte Site sonst braucht.
 * ===========================================================================
 *
 * KRITIS rendert durch das Defence-Stylesheet (dronivo.css) und dieselbe
 * Frontier-Ebene wie Defence und Lawenforcement. Alles, was das Designsystem
 * an Farbe hat, liest --site-accent; der Wrapper in page.tsx setzt ihn aus
 * lib/sites.ts. Diese Datei tut drei Dinge, die die Variable allein nicht
 * erledigt — nach dem Muster von site-le.css:
 *
 *   1. Die Sand-Primitive der geteilten Bausteine auf das Gruen umleiten.
 *   2. Eine Lesefassung des Gruens fuer Mono-Zeilen und Links.
 *   3. Das Logo-Lockup und den Startseiten-Hero.
 */

/* --- 1. Markenfarbe -------------------------------------------------------- */

[data-site="kritis"] {
  --_primitives---colors--brand-yellow: var(--site-accent, #1f8f4a);
  /* #1f8f4a misst 4,77:1 auf #0b0b0b — knapp ueber AA. Die Mono-Zeilen sind
     12-15px; #3fae6c (7,0:1) ist derselbe Ton, eine Stufe heller, wie LE
     seine Lesefassung des Blaus fuehrt. Flaechen bleiben #1f8f4a. */
  --site-accent-text: #3fae6c;
}

/* Der helle Webflow-Body (#f2f2f2) darf nirgends durchscheinen; Defence
   deckt ihn mit page-tail.css nur teilweise, LE brauchte dieselbe Regel. */
body:has(.wf-site[data-site="kritis"]) {
  background-color: var(--fr-bg, #0b0b0b);
}

/* --- 2. Lesefassung --------------------------------------------------------- */

[data-site="kritis"] :is(.fr-eyebrow, .process_eyebrow, .process_slash, .solutions_eyebrow, .solutions_slash, .fr-step-num, .fr-caption-label, .fr-pillar-title, .fr-milestone-year) {
  color: var(--site-accent-text);
}

[data-site="kritis"] :is(
  .text-style-tagline,
  .text-style-tagline-copy,
  .text-style-tagline-small,
  .text-color-yellow-brand,
  .text-color-yellow-brand-2,
  .text-color-yellow-brand-3
) {
  color: var(--site-accent-text);
}

/* footer.css und accreditations.css setzen --site-accent und laden spaeter;
   der Blockkontext im Selektor gewinnt auf Spezifitaet (Lehre aus site-le.css). */
[data-site="kritis"] .footer_component .text-style-tagline-small,
[data-site="kritis"] .section_acreditations-home .text-style-tagline-small,
[data-site="kritis"] .section_acreditations-home .text-style-tagline,
[data-site="kritis"] .terms_content-wrapper :is(a, .text-style-link),
[data-site="kritis"] .section_contact a:not(.button):not(.w-checkbox):hover {
  color: var(--site-accent-text);
}

/* --- 3. Logo-Lockup --------------------------------------------------------- */

/* Weisse Dronivo-Marke (2,73:1, wie auf LE) plus "KRITIS" als Mono-Zeile in der
   Markenfarbe, durch eine Haarlinie getrennt — die Vorlage setzt ihr Logo als
   Lockup "DRONIVO / KRITIS". Platzhalter bis zum Logo des Kunden. */
[data-site="kritis"] .navbar .navbar_logo-link,
[data-site="kritis"] .footer_logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

[data-site="kritis"] .kritis-mark {
  font-family: var(--site-nav-font, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--site-accent-text);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  padding-left: 0.75rem;
  white-space: nowrap;
}

[data-site="kritis"] .footer_logo {
  width: 9rem;
  height: auto;
}

[data-site="kritis"] .footer_logo-link .kritis-mark {
  font-size: 0.9375rem;
}

/* --- Startseiten-Hero -------------------------------------------------------
 *
 * Der Hero der Startseite ist der gerahmte Webflow-Hero von Defence und
 * Lawenforcement, Klasse fuer Klasse — siehe lib/kritis/home-hero.ts. Damit
 * kommen Masse, Rahmen, Haarlinie und Newsbox aus denselben Dateien wie
 * drueben (dronivo.css, hero-framed.css, news-feed.css) und es gibt hier
 * nichts nachzubauen. Zwei Regeln bleiben trotzdem noetig:
 */

/* 1. Der Verlauf im Rahmen. hero-framed.css haengt ihn an
      `.video_hero.is-ready` — Defence und BOS legen einen Trailer unter den
      Rahmen, KRITIS hat keinen. Ohne Video bliebe der Webflow-Verlauf stehen,
      der nur die oberen 26% abdunkelt; die Schlusszeile stuende dann auf dem
      hellen Bild. Derselbe Verlauf, nur unbedingt.
      Faellt weg, sobald es einen KRITIS-Trailer gibt. */
[data-hero="framed"] [data-site="kritis"] .section_home-hero .hero_overlay {
  background-image: linear-gradient(
    180deg,
    rgba(6, 6, 6, 0.28) 0%,
    rgba(6, 6, 6, 0.26) 34%,
    rgba(6, 6, 6, 0.44) 55%,
    rgba(6, 6, 6, 0.68) 78%,
    rgba(6, 6, 6, 0.82) 100%
  );
}

/* 1b. Monochrom. Der Graufilter des Designsystems sitzt auf `.fr-hero-media`,
      also auf den Unterseiten-Heroes; der Webflow-Hero der Startseite kennt
      ihn nicht. Auf Defence und BOS faellt das nicht auf — deren Trailer und
      Standbilder sind von sich aus monochrom. Die KRITIS-Aufnahme ist es
      nicht: blaue Plane, rostroter Container, mitten in einer sonst grauen
      Seite. Derselbe Filter, denselben Wert wie in frontier.css. */
[data-hero="framed"] [data-site="kritis"] .section_home-hero .img_hero {
  filter: grayscale(1) contrast(1.05);
}

/* 2. Versalien. Defence setzt seine Schlagzeile ueber `text-transform`,
      Lawenforcement schreibt sie im Quelltext gross — dasselbe Bild auf zwei
      Wegen. Hier der von Defence, damit der Satz im Modul lesbar bleibt und
      eine Aenderung des Kunden nicht in Grossbuchstaben getippt werden muss. */
[data-hero="framed"] [data-site="kritis"] .section_home-hero h1 {
  text-transform: uppercase;
  /* 26ch statt der 18ch aus hero-framed.css — dieselbe Korrektur, die
     Lawenforcement braucht und in site-le.css steht. Defence kommt mit 32
     Zeichen auf zwei ausgewogene Zeilen; die deutsche Schlagzeile hier hat 54
     und faellt bei 18ch in vier, die erste davon ein einzelnes Wort. */
  max-width: 26ch;
}

@media (max-width: 991px) {
  [data-site="kritis"] .kritis-mark {
    font-size: 0.75rem;
  }
}

/* --- Kurse ohne Bild -------------------------------------------------------- */

/* Die Fuehrerscheine auf /training haben in der Vorlage kein Bild. Ohne die
   Bildspalte laeuft die Tabelle ueber die ganze Breite. */
[data-site="kritis"] .fr-course:not(:has(.fr-course-media)) {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Kontaktseite ----------------------------------------------------------- */

/* contact.css setzt den Eyebrow als ::before-Inhalt "// Contact"; der Text der
   Seite ist deutsch (lib/kritis/chrome.ts), der Kicker also auch. */
[data-site="kritis"][data-mode="frontier"] .section_contact .contact_heading-wrapper::before {
  content: "// Kontakt";
}

/* --- Kicker im Hero ohne Schatten ------------------------------------------- */

/* frontier.css legt unter Kicker, Ueberschrift und Vorspann im Hero einen
   Textschatten (fuer den Sand auf hellen Defence-Fotos, der Kicker zusaetzlich
   mit Leuchtsaum). Auf KRITIS liest sich das als Schattierung hinter den
   Zeichen — Kundenwunsch 25./28.09.2026: ueberall weg. Die Ueberschriften
   stehen auf dem unteren, per Scrim abgedunkelten Drittel des Bildes und
   brauchen ihn nicht. Nur KRITIS; Defence behaelt seine Regel. */
[data-site="kritis"] .fr-hero-inner .fr-eyebrow,
[data-site="kritis"] .fr-hero-inner .fr-display,
[data-site="kritis"] .fr-hero-inner .fr-lead {
  text-shadow: none;
}

/* --- Verlauf im Hero-Rahmen -------------------------------------------------
 *
 * Der Schatten hinter den Zeichen ist auf Kundenwunsch weg (oben). Damit fehlt
 * auf hellen Aufnahmen die Absicherung: die KRITIS-Bilder zeigen Anlagen bei
 * Tag und in der Daemmerung, und auf /pentest steht die Ueberschrift ueber
 * hellem Wasser — der gruene Kicker mass dort weniger als 2:1.
 *
 * Statt des Schattens ein tieferer Verlauf. Der Unterschied ist genau der, den
 * der Kunde gemeint hat: ein Verlauf ist eine Flaeche im Bild und als solche
 * unsichtbar, ein Textschatten sitzt als Saum um jeden Buchstaben.
 *
 * frontier.css gewichtet nach unten (0.25 / 0.30 / 0.72 / 0.88), weil die
 * Defence-Ueberschriften zweizeilig sind und tief sitzen. Die deutschen
 * Ueberschriften hier laufen ueber drei Zeilen und beginnen bei rund 48% der
 * Rahmenhoehe — gemessen, nicht geschaetzt —, also muss die Abdunklung frueher
 * einsetzen und tiefer gehen.
 *
 * Das ist die einzige Abweichung, die von den Unterseiten-Heroes der anderen
 * beiden Sites bleibt: Masse, Typografie, Rahmen und Farben sind identisch.
 */
[data-site="kritis"] .fr-hero-scrim {
  background-image: linear-gradient(
    180deg,
    rgba(6, 6, 6, 0.22) 0%,
    rgba(6, 6, 6, 0.26) 22%,
    rgba(6, 6, 6, 0.62) 38%,
    rgba(6, 6, 6, 0.82) 48%,
    rgba(6, 6, 6, 0.88) 80%,
    rgba(6, 6, 6, 0.92) 100%
  );
}

/* Der Kicker bleibt gruen wie auf Defence und Lawenforcement. Dass er ohne
   Schatten auf hellen Aufnahmen lesbar bleibt, leistet der Verlauf oben: die
   0,82 auf halber Rahmenhoehe sind genau der Wert, ab dem Gruen gegen den
   hellen Himmel ueber dem Umspannwerk auf /inspektion 4,5:1 erreicht. Er ist
   nachgerechnet, nicht gewaehlt — deshalb steht er hier und nicht als runde
   Zahl. */


/* --- Die Drohnen-Zeichnung im Schlussblock ----------------------------------
 *
 * Die Vorlage ist eine SVG-Datei mit 16 Pfaden in festem Sand (#ECDEBC). Statt
 * sie zu kopieren und umzufaerben, dient sie hier als MASKE: die Flaeche
 * darunter traegt die Markenfarbe, die Datei gibt nur noch die Form. Damit
 * bleibt eine einzige Zeichnung im Projekt, und eine neue Vorlage wirkt auf
 * allen Sites zugleich.
 *
 * lib/kritis/chrome.ts macht dafuer aus dem <img> ein <span> — ein Bild wuerde
 * seine eigenen Pixel ueber die Flaeche legen.
 *
 * Der hellere Ton, nicht die Markenfarbe: die Vorlage ist mit #ECDEBC deutlich
 * heller als der Defence-Sand #c4b798. Dieses Verhaeltnis bleibt — #3fae6c ist
 * auf KRITIS der hellere Ton derselben Familie und ohnehin schon als
 * --site-accent-text gesetzt.
 *
 * `aspect-ratio` ersetzt das, was beim <img> die Datei selbst mitbrachte:
 * 718x271 aus ihrem viewBox.
 */
[data-site="kritis"] span.fr-cta__sketch {
  aspect-ratio: 718 / 271;
  background-color: var(--site-accent-text, #3fae6c);
  -webkit-mask-image: url("/wf/media/687c9a5614a3cea659cf96b5_Group.svg");
  mask-image: url("/wf/media/687c9a5614a3cea659cf96b5_Group.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}