/* ==========================================================================
   WildSIM – Marken- und Icon-System
   ==========================================================================
   Bewusst eine eigene Datei und nicht ein weiterer Block am Ende von
   custom.css. Gründe:

   1. custom.css ist 4'430 Zeilen und rein chronologisch gewachsen. Jeder
      weitere Anhang verschlimmert das. Diese Datei ist der Einstieg in die
      komponentenweise Aufteilung.
   2. Sie muss auf zwei getrennten Asset-Schienen laden: im Theme
      (base.html.twig) und im Portal, das custom.css gar nicht lädt
      (plugins/wildsim-portal -> onAssetsInitialized).
   3. Eigener Namensraum .ws-picon -> keine Kaskadenkonflikte, die Position
      im Ladeverbund ist egal.
   ========================================================================== */

:root {
  /* ── Marken-Kanäle ──────────────────────────────────────────────────────
     Als RGB-Tripel (Space-getrennt für rgb(var(--x) / <alpha>)) und als
     Komma-Tripel für das ältere rgba(...)-Muster. custom.css schreibt
     rgba(61,166,102,…) über 100-mal als rohes Tripel aus, obwohl
     --wk-green-lt existiert – weil dieser Kanal-Token fehlte. */
  --wk-green-lt-rgb: 61 166 102;
  --wk-green-lt-c:   61, 166, 102;
  --wk-gold-dk-rgb:  212 168 62;
  --wk-gold-dk-c:    212, 168, 62;
  --wk-dark-rgb:     13 31 16;

  /* Chip-Gold. Volltonfarbe, kein Verlauf – siehe Kopfkommentar in
     templates/macros/brand.html.twig. */
  --ws-picon-gold:   #d4a83e;
  --ws-picon-green:  #3da666;
  --ws-picon-groove: #0d1f10;

  /* ── Portal-Tokens (--p-*) ──────────────────────────────────────────────
     custom.css referenziert diese 62-mal, definiert waren sie aber nur in
     plugins/wildsim-portal/assets/css/portal.css. Login und Registrierung
     laden portal.css NICHT (nur custom.css + brand.css), sodass dort überall
     die – teils falschen – Literal-Fallbacks griffen. Zentral hier, weil
     brand.css auf BEIDEN Asset-Schienen (Theme und Portal) geladen wird.
     Werte identisch zu portal.css:9-23. portal.css darf sie weiter tragen
     (identische Doppeldefinition ist unschädlich). */
  --p-dark:    #080f09;
  --p-forest:  #0d1f10;
  --p-mid:     #162118;
  --p-surface: #162118;
  --p-dark2:   #1a2a1f;
  --p-green:   #2e7d4f;
  --p-green2:  #3da666;
  --p-orange:  #e06a10;
  --p-orange2: #f07a22;
  --p-light:   #eef2ec;
  --p-white:   #ffffff;
  --p-gray:    #7a8a7e;
  --p-muted:   #8ba49b;
  --p-border:  rgba(46, 125, 79, 0.22);
  --p-green-rgb: 61, 166, 102;
}

/* ── Basis ───────────────────────────────────────────────────────────────── */
.ws-picon {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  overflow: visible;
}

/* ── Variante solid – Duoton, für Bildschirm ─────────────────────────────
   Korpus in Gold, Rillen in Dunkelgrün. Die Rillen sind Striche über der
   Fläche, keine ausgestanzten Löcher: so bleibt das Icon auf jedem
   Hintergrund deckend und braucht kein clipPath (das wieder eine ID
   bräuchte). */
.ws-picon--solid .ws-picon__body {
  fill: var(--ws-picon-gold);
}
.ws-picon--solid .ws-picon__grid {
  fill: none;
  stroke: var(--ws-picon-groove);
  stroke-width: 1.6;
}
.ws-picon--solid .ws-picon__mark {
  fill: none;
  stroke: var(--ws-picon-gold);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.ws-picon--solid .ws-picon__lens-ring { fill: var(--ws-picon-groove); }
.ws-picon--solid .ws-picon__lens-core { fill: var(--ws-picon-gold); }

/* Eingeschlossener Chip (WildCLOUD) */
.ws-picon--solid .ws-picon__chip { fill: var(--ws-picon-groove); }
.ws-picon--solid .ws-picon__chip-grid {
  fill: none;
  stroke: var(--ws-picon-gold);
  stroke-width: 1.2;
}

/* WildCONNECT ist das Bündel aus SIM + Cloud. Der Korpus trägt deshalb das
   Systemgrün und die Sendebögen das Gold – so ist es auch farblich als
   Kombinationsprodukt lesbar und nicht bloss ein zweiter SIM-Chip. */
.ws-picon--wildconnect.ws-picon--solid .ws-picon__body {
  fill: var(--ws-picon-green);
}

/* ── Variante line – einfarbig, für Druck, Gravur, Stickerei, Stempel ─────
   Alles erbt currentColor. Ein einziger Farbauftrag, keine Flächen, keine
   Verläufe. Für den Druck zusätzlich als fertige SVG-Dateien exportiert. */
.ws-picon--line .ws-picon__body,
.ws-picon--line .ws-picon__grid,
.ws-picon--line .ws-picon__mark,
.ws-picon--line .ws-picon__chip,
.ws-picon--line .ws-picon__chip-grid,
.ws-picon--line .ws-picon__lens-ring {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ws-picon--line .ws-picon__body      { stroke-width: 2.2; }
.ws-picon--line .ws-picon__grid      { stroke-width: 1.4; }
.ws-picon--line .ws-picon__mark      { stroke-width: 1.8; }
.ws-picon--line .ws-picon__chip      { stroke-width: 1.6; }
.ws-picon--line .ws-picon__chip-grid { stroke-width: 1.2; }
.ws-picon--line .ws-picon__lens-ring { stroke-width: 1.8; }
.ws-picon--line .ws-picon__lens-core { fill: currentColor; stroke: none; }

/* ── Kleine Grössen (<= 20px) ────────────────────────────────────────────
   Nicht das Raster ausblenden – dann bleibt nur ein konturloser Klumpen und
   genau die Identität geht verloren (im Rendertest verifiziert). Stattdessen
   die Rillen verstärken, damit sie bei 0.6px Skalierung nicht zulaufen. */
.ws-picon--xs .ws-picon__grid { stroke-width: 2.6; }
.ws-picon--xs .ws-picon__mark { stroke-width: 2.6; }
.ws-picon--xs .ws-picon__chip-grid { display: none; }

/* ── Schweizerkreuz ──────────────────────────────────────────────────────
   Ersetzt das Emoji 🇨🇭, das unter Windows keinen Glyph hat. */
.ws-swiss {
  display: inline-block;
  vertical-align: -2px;
  flex: 0 0 auto;
}
.ws-swiss__field { fill: #d52b1e; }
.ws-swiss__cross { fill: #ffffff; }

/* ── Font-Awesome-Normalisierung ─────────────────────────────────────────
   Icons sind dekorativ, solange kein Label danebensteht. Ohne feste Breite
   springt die Zeile beim Nachladen der Webfont-Datei. */
.fa-fw { width: 1.28571429em; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   Grössen-Parität nach der Umstellung Inline-SVG -> Font Awesome
   ══════════════════════════════════════════════════════════════════════════
   Die Icons waren zuvor Inline-SVGs, deren Grösse über Nachfahren-Selektoren
   wie `.p-sidebar__link svg { width: 16px }` gesetzt wurde. Ein <i> ist ein
   Font-Glyph und ignoriert width/height – es skaliert über font-size. Ohne
   diese Regeln würden die Icons auf die geerbte Textgrösse zusammenfallen.

   Die Marken-Icons (.ws-picon) sind weiterhin echte SVGs und werden von den
   bestehenden svg-Regeln unverändert erfasst – hier nicht nötig.
   ══════════════════════════════════════════════════════════════════════════ */

/* portal.css:75 – .p-sidebar__link svg { width: 16px; height: 16px } */
.p-sidebar__link > i[class*="fa-"] {
  font-size: 16px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
/* portal.css:194 – .p-empty svg { width: 48px; height: 48px; opacity: .4 } */
.p-empty > i[class*="fa-"] {
  font-size: 42px;
  display: block;
  margin: 0 auto 12px;
  opacity: 0.4;
}
/* portal.css:2073/2074 – .p-empty__svg--lg / --md */
.p-empty__svg--lg[class*="fa-"] { font-size: 42px; margin-bottom: 14px; }
.p-empty__svg--md[class*="fa-"] { font-size: 34px; margin-bottom: 12px; }

/* portal.css:2176 / custom.css:3252 / custom.css:3373 – Trust-Zeilen, 13px */
.login-trust__item > i[class*="fa-"],
.wl-trust__item > i[class*="fa-"],
.wr-benefit > i[class*="fa-"] { font-size: 13px; }

/* custom.css:3863 – .ws-tab-top svg { width: 24px } */
.ws-tab-top > i[class*="fa-"] { font-size: 20px; }

/* Farbe/Fluss-Regeln, die zuvor nur auf svg zielten */
.wk-mobile-nav__list a > i[class*="fa-"],
.ws-shop-modal__trust > i[class*="fa-"] { color: var(--wk-green-lt); flex-shrink: 0; }
.wk-hero__trust-item > i[class*="fa-"],
.wk-legal-hero__meta > i[class*="fa-"],
.wk-legal-nav ul li a > i[class*="fa-"] { opacity: 0.7; flex-shrink: 0; }
.wk-wildcam-teaser__spec > i[class*="fa-"] { color: var(--wk-green-lt); flex-shrink: 0; }
.wk-wildcam-teaser__title > i[class*="fa-"] { color: var(--wk-gold); flex-shrink: 0; }
.p-card__title--flex > i[class*="fa-"] { color: var(--p-orange, var(--wk-orange)); }
.ws-shop-success > i[class*="fa-"] { flex-shrink: 0; margin-top: 2px; }