/*
Theme Name: TAOM Portal
Theme URI: https://taom.ai
Author: TRANIVA AG
Author URI: https://traniva.com
Description: Kind-Theme von «TAOM» für die Systeme neben taom.ai – Supportportal (support.taom.ai), Trainingsplattform (training.taom.ai) und Entwicklungssystem (dev.taom.ai). Gleiches Aussehen wie taom.ai, eigene Navigation je System, Anmeldung über TAOM Connect. Für Suchmaschinen gesperrt – ausser dem öffentlichen Trainingskatalog.
Template: taom-theme
Version: 0.1.21
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietär – © 2026 TRANIVA AG
Text Domain: taom-portal
*/

/* SYSTEMFARBEN (Nutzer 09.11.2026 12:28–13:02 «konsistent durchgängig, im Browser leicht erkennbar, in welchem
   System man sich bewegt; diese Farben sind rein für TAOM reserviert»):
     taom.ai blau · Support rot · Training grün · Viewer magenta · dev gelb (Designphase) · Kundeninstallationen petrol.
   Farbiges Rechteck mit dem TAOM-«A» im Kopf; Knöpfe, aktive Register und Anmelde-Knopf in der Systemfarbe;
   die Kopfbänder der Seiten bleiben dunkelblau mit dem «A» (farbiges Dreieck) - nicht ganz eingefärbt. */
body.tp-support { --tp-akzent:#c62828; --tp-text:#fff; }
body.tp-training { --tp-akzent:#1f9d55; --tp-text:#fff; }
body.tp-viewer { --tp-akzent:#c026d3; --tp-text:#fff; }
body.tp-dev { --tp-akzent:#f2b705; --tp-text:#1c1917; }
/* Kundeninstallationen (Betreiber «Kunde»): eigene Farbe, nie eine TAOM-Farbe. */
body.tp-betreiber-kunde { --tp-akzent:#0f766e; --tp-text:#fff; }
.site-header .brand-rail { background: var(--tp-akzent, #1c8fd6); }
/* 0.1.6 (Nutzer 13:11 «richtig wie beim Editor - das A davor, nicht mittendrin»): Rechteck nur in der Systemfarbe,
   das TAOM-«A» (Dreieck in der Systemfarbe) steht vor «TAOM · System», wie im Process Studio Editor. */
.site-header .brand { position:relative; padding-left:48px; }
.site-header .brand::before { content:""; position:absolute; left:0; top:50%; width:36px; height:36px; transform:translateY(-50%); background:center/contain no-repeat; }
body.tp-support .site-header .brand::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%23c62828%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
body.tp-training .site-header .brand::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%231f9d55%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
body.tp-viewer .site-header .brand::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%23c026d3%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
body.tp-dev .site-header .brand::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%23f2b705%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
body.tp-betreiber-kunde .site-header .brand::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%230f766e%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
.tp-system, .tp-wer .tp-knopf { color: var(--tp-text, #fff) !important; }
body[class*="tp-"] .tsp, body[class*="tp-"] .ttr { --b: var(--tp-akzent, #1d4ed8); --n: #1d2b4a; }
body[class*="tp-"] .tsp-k:not(.grau), body[class*="tp-"] .ttr-k:not(.grau), body[class*="tp-"] .tsp-nav a.an, body[class*="tp-"] .ttr-nav a.an { color: var(--tp-text, #fff) !important; }
body[class*="tp-"] .ttr-kopf .ttr-k[style] { color:#1d2b4a !important; }
body[class*="tp-"] .tp-wer .tp-knopf:hover, body[class*="tp-"] .tsp-k:hover, body[class*="tp-"] .ttr-k:hover { filter: brightness(.92); }
/* «A» mit farbigem Dreieck vor «TAOM Support» / «TAOM Training» in den Kopfbändern */
.tsp-kopf > b:first-child::before, .ttr-kopf > b:first-child::before, .tsp-kopf > div > b:first-child::before, .ttr-kopf > div > b:first-child::before {
  content:""; display:inline-block; width:22px; height:22px; margin-right:9px; vertical-align:-4px; background:center/contain no-repeat; }
body.tp-support .tsp-kopf b:first-child::before, body.tp-support .ttr-kopf b:first-child::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%23c62828%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
body.tp-training .tsp-kopf b:first-child::before, body.tp-training .ttr-kopf b:first-child::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%231f9d55%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
body.tp-viewer .tsp-kopf b:first-child::before, body.tp-viewer .ttr-kopf b:first-child::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%23c026d3%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
body.tp-dev .tsp-kopf b:first-child::before, body.tp-dev .ttr-kopf b:first-child::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%23f2b705%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
body.tp-betreiber-kunde .tsp-kopf b:first-child::before, body.tp-betreiber-kunde .ttr-kopf b:first-child::before { background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 192 192%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpolygon fill=%22%230f766e%22 points=%2296,2 128,66 101,66 96,57 91,66 64,66%22/%3E%3Cpolygon fill=%22%23fff%22 points=%2260,76 90,76 44,190 13,190%22/%3E%3Cpolygon fill=%22%23fff%22 points=%22102,76 132,76 179,190 148,190%22/%3E%3C/svg%3E"); }
.site-header .brand .sub { color: #cfe0ff; letter-spacing: .02em; }
.tp-system { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:700; background: var(--tp-akzent); color:#fff; vertical-align: middle; }
.tp-wer { display:flex; align-items:center; gap:10px; color:#dbe6f6; font-size:13px; white-space:nowrap; }
.tp-wer a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.tp-wer .tp-knopf { background: var(--tp-akzent); color:#fff; text-decoration:none; border-radius:8px; padding:6px 12px; font-weight:600; }
.tp-dev-band { background:#fff4e5; color:#92400e; border-bottom:1px solid #f5d0a0; font-size:13.5px; }
.tp-dev-band .container { padding-top:8px; padding-bottom:8px; }
.tp-start { max-width:1100px; margin:28px auto; padding:0 16px; }
.tp-start h1 { margin:0 0 6px; }
.tp-karten { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin:18px 0; }
.tp-karte { border:1px solid var(--line, #e6e9ee); border-radius:12px; padding:14px 16px; background:#fff; text-decoration:none; color:inherit; display:block; }
.tp-karte b { display:block; font-size:16px; margin-bottom:4px; color: var(--ink, #172b4d); }
.tp-karte:hover { border-color: var(--tp-akzent); box-shadow: 0 4px 16px rgba(16,24,39,.06); }
.tp-fuss { background: var(--navy, #101827); color:#a9b8cc; font-size:13px; }
.tp-fuss .container { display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; padding-top:18px; padding-bottom:18px; }
.tp-fuss a { color:#dbe6f6; }
.tp-fuss ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; }
@media (max-width: 760px) { .tp-wer { white-space:normal; flex-wrap:wrap; } }
/* Abmelden steht schon im Kopf - in den Portal-Inhalten nicht doppelt. */
.tsp-kopf a[href*="taom_sso_ab"], .ttr-kopf a[href*="taom_sso_ab"] { display:none; }
/* Fuss bleibt unten, auch bei kurzen Seiten. */
body[class*="tp-"] .site-main { min-height: calc(100vh - 150px); }

/* 0.1.7 (Nutzer 09.11.2026 13:35 «der Sprachenselektor passt nicht zum Theme - wie im Viewer»): Knopf wie die
   Sprachwahl im Process Studio Viewer - dunkel, feiner Rand, «DE ⌄», ohne Weltkugel; Liste hell mit Systemfarbe. */
.site-header .lang-switch { position:relative; display:inline-flex; align-items:center; }
.site-header .lang-switch > button { display:inline-flex !important; align-items:center; gap:10px; white-space:nowrap; height:38px; min-width:0; padding:0 12px 0 14px !important;
  background:#1d3352 !important; border:1px solid #2c4568 !important; border-radius:10px !important; color:#fff !important; font:700 15px/1 Inter, system-ui, sans-serif !important; cursor:pointer; box-shadow:none !important; }
.site-header .lang-switch > button:hover, .site-header .lang-switch > button[aria-expanded="true"] { border-color: var(--tp-akzent, #1c8fd6) !important; }
.site-header .lang-switch > button:focus-visible { outline:2px solid var(--tp-akzent, #1c8fd6); outline-offset:2px; }
.site-header .lang-switch > button img.emoji, .site-header .lang-switch > button .tp-glob { display:none !important; }
.site-header .lang-switch > button .tp-pfeil { width:12px; height:12px; flex:0 0 12px; }
.site-header .lang-menu { right:0; left:auto; top:calc(100% + 8px); min-width:160px; background:#fff; border:1px solid #e3e8ef; border-radius:12px; box-shadow:0 14px 34px rgba(8,22,40,.22); padding:6px; }
.site-header .lang-menu a { display:block; padding:8px 12px; border-radius:8px; color:#0f2540 !important; font-weight:600; text-decoration:none; white-space:nowrap; }
.site-header .lang-menu a:hover { background:#f1f5f9; }
.site-header .lang-menu a.active { background: color-mix(in srgb, var(--tp-akzent, #1c8fd6) 14%, #fff); color:#0f2540 !important; box-shadow: inset 3px 0 0 var(--tp-akzent, #1c8fd6); }
.site-header .header-tools { display:flex; align-items:center; gap:14px; }

/* 0.1.8 (Nutzer 09.11.2026 13:40 «den Benutzer kleiner machen»): Name und Firma klein, Abmelden dezent. */
.site-header .tp-wer { display:flex; align-items:center; gap:10px; font-size:12.5px !important; line-height:1.25; }
.site-header .tp-wer > span { max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#cbd5e1; font-weight:500; }
.site-header .tp-wer > a:not(.tp-knopf) { font-size:12px; color:#94a3b8 !important; text-decoration:none; border-bottom:1px solid rgba(148,163,184,.5); }
.site-header .tp-wer > a:not(.tp-knopf):hover { color:#fff !important; border-bottom-color:#fff; }

/* 0.1.10 (Nutzer 09.11.2026 16:19 «Sprachauswahl gleich gross wie der Anmeldeknopf, in der Höhe und in der
   Schriftgrösse – bei Support und Training»): beide Knöpfe 34 px hoch, 13 px, halbfett, gleiche Rundung. */
.site-header .tp-wer .tp-knopf { display:inline-flex !important; align-items:center; height:34px; padding:0 14px !important; font-size:13px !important; font-weight:600 !important; line-height:1 !important; border-radius:8px !important; box-sizing:border-box; }
.site-header .lang-switch > button { height:34px !important; padding:0 10px 0 13px !important; font:600 13px/1 Inter, system-ui, sans-serif !important; border-radius:8px !important; gap:8px !important; box-sizing:border-box; }
.site-header .lang-switch > button .tp-pfeil { width:11px; height:11px; flex:0 0 11px; }

/* 0.1.13 (Nutzer 09.11.2026 18:56): Menüpunkte im Kopf nicht umbrechen («+ Neues Ticket», «Zu taom.ai ↗»). */
.site-header .nav-list > li > a { white-space:nowrap; }