/* ═══════════════════════════════════════════════
   TRITON LAB — Lab-spezifische Overrides
   Lädt NACH global.css. Farbsprache identisch zu triton.de (Aqua-Mint-Akzent),
   zusätzlich styled felogin + tritonlab-Plugin-Output + neutralisiert Legacy-Orange.
   ═══════════════════════════════════════════════ */

:root{
  color: rgba(255, 255, 255, .72);
}

/* Cookie banner settings icon main menu */
#settings-icon-main {
  display: none;
}
.back-to-top {
  display: none !important;
}

/* ── LAB-LOGO — aspect-ratio 5.51:1 (4386×796), verlangt kleinere Höhe als das Triton-Logo
   (4:1), damit beide optisch ähnlich breit wirken.
   Triton: .logo-img {height:44px} → ~176px. Lab bei height:34px → ~187px. ── */
.nav .logo-img{height:34px}
.nav.scrolled .logo-img{height:26px}
.footer .f-logo-img{height:24px}

/* ── FIXED-NAV KOMPENSATION ──
   .nav ist position:fixed (global.css) → Content rutscht drunter. triton.de löst das durch
   statische Templates mit Hero-padding-top:12vh. Die tritonlab-App-Views (Aquaria-Liste,
   Profile, Calculator) haben das nicht — hier auf <main> einen Top-Offset reservieren.
   Nav-Höhe unscrolled ≈ 91px (padding 1.6rem×2 + logo 34px + Flex-align); 6rem (~96px) reicht.
   #main-start (Lab-Startpage UID 2) bringt eigenen Hero mit padding-top:12vh → dort kein Extra. */
main{padding-top:6rem}
main#main-start{padding-top:0}

/* ── HERO unter die Mobile-Nav schieben ──
   Auf Mobile (≤1100px, Lab-Burger-Breakpoint) hinterlässt die fixed Nav optisch eine dunkle
   Lücke über dem Hero-Video der Lab-Startpage. Negatives margin-top:-51px zieht das Hero so
   weit nach oben, dass das Video unter dem transparenten Header durchscheint statt der
   Body-Background. */
@media(max-width:1100px){
  main#main-start{margin-top:-51px}
}

/* Text-Fallback bleibt als Safety-Net definiert, falls Logo-<img> ausfällt */
.logo-link,.f-logo-link{display:inline-flex;align-items:center;gap:.3rem}
.logo-text{font-family:var(--h);font-weight:900;font-size:1.25rem;letter-spacing:.14em;text-transform:uppercase;color:var(--w);line-height:1}
.logo-text-accent{color:var(--aq);font-weight:900}
.f-logo-text{font-family:var(--h);font-weight:900;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--w);line-height:1}
.f-logo-text-accent{color:var(--aq);font-weight:900}

/* ═══════════════════════════════════════════════
   LAB-STARTPAGE (UID 2) — Hero/Features/CTA
   ═══════════════════════════════════════════════ */
.lab-hero{padding-top:12vh;padding-bottom:8vh}
.lab-hero-eyebrow{font-family:var(--h);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--aq);margin-bottom:1.2rem}
.lab-hero-title{font-family:var(--h);font-weight:900;font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:1.05;letter-spacing:-.015em;margin-bottom:1.2rem;max-width:18ch}
.lab-hero-lead{font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6;color:rgba(255,255,255,.78);max-width:60ch;margin-bottom:2.4rem}
.lab-hero-cta{display:flex;gap:1rem;flex-wrap:wrap}

.lab-features{background:var(--mr);padding-top:7vh;padding-bottom:7vh}
.lab-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;margin-top:2.4rem}
.lab-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:2rem;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s}
.lab-card:hover{transform:translateY(-4px);border-color:var(--aq);background:rgba(255,255,255,.06)}
.card-icon{font-size:2rem;color:var(--aq);margin-bottom:1.2rem;display:block}
.card-title{font-family:var(--h);font-weight:900;font-size:1.2rem;margin-bottom:.6rem}
.card-text{font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.72);margin-bottom:1.2rem}
.card-link{font-family:var(--h);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--aq);transition:opacity .2s}
.card-link:hover{opacity:.75}

.lab-cta{padding-top:8vh;padding-bottom:10vh;text-align:center}
.s-inner-narrow{max-width:720px;margin:0 auto}
.lab-cta-lead{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.78);margin:1rem 0 2.4rem}
.lab-cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Button-Varianten, falls in global.css nicht vorhanden */
.btn-primary{background:var(--aq);color:var(--bp)}
.btn-primary:hover{box-shadow:0 0 40px rgba(133,255,199,.4);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--w);border:1px solid rgba(255,255,255,.24)}
.btn-ghost:hover{border-color:var(--aq);color:var(--aq)}

/* ═══════════════════════════════════════════════
   LOGIN-SEITE (UID 46) — Dark/Mint-Reskin
   Markup-Quellen:
     • felogin-Plugin       → .tx-felogin-pi1 (form-Wrapper, h3, fieldset, #submit-login, .button)
     • tt_content c95       → "ENTER" H1 (Headline-Element auf der Login-Seite)
     • tt_content c105      → Register-Promo-Box rechts vom Form ("Register here and …")
     • tt_content c1004,    → Forgot-Password-Link, Hilfetext (zentriert)
                  c1402,c105
   Spezifitäts-Strategie:
     Legacy `.tx-felogin-pi1 #submit-login .button` (0,1,2) und generisches
     `input[type="text"]` mit `-webkit-text-fill-color` müssen explizit überstimmt werden.
     Aqua-Mint statt der Lab-Default-Koralle für ein Auftreten konsistent zur Eval-Seite.
   ═══════════════════════════════════════════════ */

/* Container-Card: dunkles Glas, dezenter weißer Hairline-Border, keine Rundung. */
.tx-felogin-pi1{
  max-width:440px;
  margin:8vh auto 4vh;
  padding:2.4rem;
  background:rgba(3,47,79,.45);
  border:1px solid rgba(133,255,199,.14);
  border-radius:0;
  backdrop-filter:blur(8px);
}
.tx-felogin-pi1 h3,
.tx-felogin-pi1 legend{
  font-family:var(--h);font-weight:900;font-size:1.6rem;
  margin-bottom:1.4rem;color:var(--w);
}

/* Labels (auf der Login-Seite via inline-style:none unsichtbar — Styling für Forgot-Form). */
.tx-felogin-pi1 label{
  display:block;font-size:.82rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
  margin-bottom:.4rem;margin-top:1rem;
}

/* Inputs — Legacy `input[type="text"]` setzt max-width:280px / border-radius:5px /
   -webkit-text-fill-color:#676666. Hier vollständig zurücksetzen. */
.tx-felogin-pi1 input[type="text"],
.tx-felogin-pi1 input[type="password"],
.tx-felogin-pi1 input[type="email"]{
  width:100% !important;
  max-width:none !important;
  margin:.4rem 0 0 0 !important;
  padding:.9rem 1rem !important;
  background:rgba(1,24,39,.6) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--b);
  font-size:1rem;
  transition:border-color .2s;
}
.tx-felogin-pi1 input[type="text"]::placeholder,
.tx-felogin-pi1 input[type="password"]::placeholder,
.tx-felogin-pi1 input[type="email"]::placeholder{
  color:rgba(255,255,255,.4) !important;
  -webkit-text-fill-color:rgba(255,255,255,.4) !important;
}
.tx-felogin-pi1 input:focus{outline:none;border-color:var(--aq) !important}

/* Browser-Autofill — Chrome/Safari setzen `:-internal-autofill-selected` mit
   `background-color: light-dark(rgb(232,240,254), rgba(70,90,126,.4)) !important`,
   was normales `background` nicht überstimmen kann. Standard-Trick: inset box-shadow
   simuliert den Background, wird vom UA-Autofill-Stylesheet nicht überschrieben.
   Zusätzlich `-webkit-text-fill-color` damit autofill-Text mint-weiß bleibt. */
.tx-felogin-pi1 input:-webkit-autofill,
.tx-felogin-pi1 input:-webkit-autofill:hover,
.tx-felogin-pi1 input:-webkit-autofill:focus,
.tx-felogin-pi1 input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px rgba(1,24,39,.95) inset !important;
  box-shadow:0 0 0 1000px rgba(1,24,39,.95) inset !important;
  -webkit-text-fill-color:var(--w) !important;
  caret-color:var(--w) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  transition:background-color 9999s ease-in-out 0s;
}
.tx-felogin-pi1 input:-webkit-autofill:focus{
  border-color:var(--aq) !important;
}

/* Login-Button — Legacy `.tx-felogin-pi1 #submit-login .button` zwingt orange BG.
   Hier mit gleicher Spezifität (load-order wins) auf Aqua-Mint umbiegen. */
.tx-felogin-pi1 #submit-login{
  margin:1.8rem auto 0 !important;
  max-width:none;
  width:100%;
  text-align:center;
}
.tx-felogin-pi1 #submit-login .button,
.tx-felogin-pi1 .button,
.tx-felogin-pi1 button,
.tx-felogin-pi1 input[type="submit"]{
  display:inline-block;
  font-family:var(--h);font-weight:900;font-size:.88rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.9em 2.4em !important;
  background:var(--aq) !important;
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
  border:1px solid var(--aq) !important;
  border-radius:0 !important;
  height:auto !important;
  line-height:1 !important;
  max-width:none !important;
  width:auto !important;
  cursor:pointer;
  transition:all .3s;
}
.tx-felogin-pi1 #submit-login .button:hover,
.tx-felogin-pi1 #submit-login .button:focus,
.tx-felogin-pi1 .button:hover,
.tx-felogin-pi1 .button:focus,
.tx-felogin-pi1 button:hover,
.tx-felogin-pi1 input[type="submit"]:hover{
  background:transparent !important;
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  box-shadow:0 0 32px rgba(133,255,199,.35);
  transform:translateY(-1px);
}

/* BC-Connect-Loader (Spinner während Login-Submit) — Legacy
   `.tx-felogin-pi1 #submit-login .bc-connect-loader{color:#e07950; left:119px}`
   ist auf den alten 280px-Button kalibriert (Orange + hardkodierter X-Offset).
   Im neuen Layout: zentral unter dem Button, Mint-Farbe, kleiner.
   Inline-Style aus tarb_login.js setzt `opacity:1; display:block` beim Submit. */
.tx-felogin-pi1 #submit-login .bc-connect-loader{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  font-size:1.6rem !important;
  top:auto !important;
  bottom:0.6rem !important;
  left:50% !important;
  transform:translateX(-50%);
}

/* Permalogin (STAY LOGGED IN) — Checkbox + Label-Zeile zentrieren, Mint-Akzent. */
.tx-felogin-pi1 .felogin-hidden{display:none !important}
.tx-felogin-pi1 #permalogin{
  appearance:none;-webkit-appearance:none;
  width:14px;height:14px;
  margin:0 .6rem 0 0;
  vertical-align:middle;
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
  border-radius:0;
  cursor:pointer;
  position:relative;
  transition:border-color .2s,background .2s;
}
.tx-felogin-pi1 #permalogin:checked{
  background:var(--aq);
  border-color:var(--aq);
}
.tx-felogin-pi1 #permalogin:checked::after{
  content:"";
  position:absolute;
  inset:2px 2px 2px 2px;
  background:var(--bp);
}
.tx-felogin-pi1 label.permalogin{
  display:inline-block;
  margin:0;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
  vertical-align:middle;
  cursor:pointer;
}

/* Forgot-Password-Link + alle Anchors innerhalb der Form-Card. */
.tx-felogin-pi1 a{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  text-decoration:underline;
  text-decoration-color:rgba(133,255,199,.4);
  transition:text-decoration-color .2s;
}
.tx-felogin-pi1 a:hover{text-decoration-color:var(--aq)}

/* "ENTER" — H1 oberhalb des Forms (#c95). Klein, uppercase, mint-akzentuiert.
   Legacy `#c95 h1` setzt margin/font-size/uppercase/center — hier auf Mint umfärben
   und font-size etwas reduzieren für die kleine Headline-Optik (siehe Eval-Page). */
#c95 h1,
#c113 h1{
  text-align:center;
  font-family:var(--h);
  font-weight:700;
  font-size:.78rem !important;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  margin:6vh 0 1rem !important;
}

/* Optionale Hilfetext-Spalten c1004 / c1402 zentrieren, Lesbarkeit auf dark BG. */
#c1004, #c1402{
  text-align:center;
  color:rgba(255,255,255,.7);
  -webkit-text-fill-color:rgba(255,255,255,.7);
}

/* ── REGISTER-PROMO-BOX (#c105) ──
   Legacy: oranger Block mit weißem Border-Button + chem-pixel-Cutout (weiß).
   Neu: dunkle Glas-Karte mit Mint-Hairline und Mint-CTA, Cutout-Image bleibt
   (passt thematisch — chemische Elemente), wird aber dezent in die Karte integriert. */
#c105{
  display:block;
  position:relative;
  margin:2vh auto 8vh;
  padding:2.4rem 2rem 2.6rem;
  max-width:440px;
  background:rgba(3,47,79,.45) !important;
  border:1px solid rgba(133,255,199,.18);
  border-radius:0;
  overflow:hidden;
}
#c105 > p{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--h);
  font-weight:300;
  font-size:1rem;
  line-height:1.5;
  margin:0 0 1.2rem;
  text-align:center;
  position:relative;
  z-index:2;
}
#c105 > p:nth-of-type(1){
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  margin-bottom:1.4rem;
}
#c105 .button{
  display:inline-block;
  font-family:var(--h);font-weight:900;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.9em 1.8em;
  background:transparent !important;
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  border:1px solid var(--aq) !important;
  border-radius:0 !important;
  max-width:none;
  height:auto;
  line-height:1;
  position:relative;
  z-index:2;
  transition:all .25s;
}
#c105 .button:hover,
#c105 .button:focus{
  background:var(--aq) !important;
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
  box-shadow:0 0 24px rgba(133,255,199,.35);
}
/* Chem-Pixel-Cutout (alte Asset-URL): dezent in die untere rechte Ecke,
   reduziert auf Akzent-Element statt prominenter Hintergrund-Layer. */
#register-elem-cutout{
  width:60px;
  height:72px;
  right:8px;
  bottom:8px;
  opacity:.35;
  filter:hue-rotate(140deg) saturate(.6) brightness(1.4);
  z-index:1;
}

/* ═══════════════════════════════════════════════
   TRITONLAB-EXTENSION-OUTPUT — Farb-Overrides
   Legacy-Palette (tarb_triton_lab-*.css): #ce5828 / #cf5828 / #e07950 (alle orange).
   Hier komplett auf Aqua-Mint (--aq) umbiegen.
   Button-Stil: Outline (transparent BG, aqua-mint Rand + Schrift) statt Solid-Fill.
   ═══════════════════════════════════════════════ */

/* Plugin-Links (alles außer Buttons) auf Aqua-Mint. */
.tx-tritonlab a:not(.button):not(.action-button):not(.button-inverted){
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}

/* App-Überschriften: Legacy setzt color:#cf5828 + border-bottom:#cf5828.
   Text auf Weiß, nur das FA-Icon davor + Unterstrich als Aqua-Mint-Akzent. */
.aquaria-headlines,
.tmodal-content h3{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  border-bottom-color:rgba(133,255,199,.25) !important;
}
.aquaria-headlines i,
.aquaria-headlines .fa,
.aquaria-headlines .fal,
.aquaria-headlines i[class*="fa-"],
.tmodal-content h3 i,
.tmodal-content h3 i[class*="fa-"]{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}

/* ── Outline-Buttons im Lab-App-Scope ──
   Text in weiß (Triton-CI), Border dezent (halb-transparentes Weiß) — Aqua-Mint nur
   als Akzent im Hover. So bleibt der Akzent den Icons/States vorbehalten. */
.tx-tritonlab .button,
.tx-tritonlab .action-button,
.tx-tritonlab a.button,
.tx-tritonlab .button.button-inverted,
.tx-tritonlab .button.button-inverted-tl-color,
.tx-tritonlab ul.latest-evals-ul li .button,
.tx-tritonlab ul.unfinished-barcodes-ul li .button,
.tx-tritonlab .shop-product-btn .button,
.tx-tritonlab .teaser .button,
#pw-change-main .button{
  background:transparent !important;
  background-color:transparent !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  transition:background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s !important;
}

/* Hover: Aqua-Mint-Border als Akzent, Text weiß bleibt, dezenter Glow */
.tx-tritonlab .button:hover,.tx-tritonlab .button:focus,
.tx-tritonlab .action-button:hover,.tx-tritonlab .action-button:focus,
.tx-tritonlab a.button:hover,.tx-tritonlab a.button:focus,
.tx-tritonlab .button.button-inverted:hover,.tx-tritonlab .button.button-inverted:focus,
.tx-tritonlab .button.button-inverted-tl-color:hover,.tx-tritonlab .button.button-inverted-tl-color:focus,
.tx-tritonlab ul.latest-evals-ul li .button:hover,.tx-tritonlab ul.latest-evals-ul li .button:focus,
.tx-tritonlab ul.unfinished-barcodes-ul li .button:hover,
.tx-tritonlab .shop-product-btn .button:hover,
.tx-tritonlab .teaser .button:hover,.tx-tritonlab .teaser .button:focus,
#pw-change-main .button:hover{
  background:rgba(255,255,255,.04) !important;
  background-color:rgba(255,255,255,.04) !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  border-color:var(--aq) !important;
  box-shadow:0 0 20px rgba(133,255,199,.15) !important;
  transform:translateY(-1px);
}

/* Icons innerhalb der App (orange Akzent-Icons wie .product-actions i etc.) auf Aqua-Mint */
.tx-tritonlab .product-actions i,
.tx-tritonlab #tmodal-user-id-explanation-content ul > li > ul > li,
.tx-tritonlab .fa-vial,
.tx-tritonlab i[class*="fa-"]:not(.fa-power-off):not(.nav-toggle i){
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}
#tmodal-eval-progress-submenu .aq-list-eval-progress-desc-icon {
  color: var(--aq) !important;
  -webkit-text-fill-color: var(--aq) !important;
}

/* ═══════════════════════════════════════════════
   AQUARIEN-KARTEN — komplettes Restyling (Dark-Theme)
   Legacy: weiße Karten mit Teal-Border (#599790), orange Subscription-BG (#cf5828),
   weiße Diamond-Labels, graue Action-Buttons mit box-shadow.
   Neu: transparente Dunkel-Karten, Aqua-Mint-Akzente, Subscription dezent markiert.
   ═══════════════════════════════════════════════ */

/* Haupt-Karte */
.box-aquarium{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:none !important;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s !important;
}
.box-aquarium:hover{
  transform:translateY(-3px) !important;
  border-color:var(--aq) !important;
  background:rgba(255,255,255,.06) !important;
}

/* "Neues Aquarium" — identischer Dark-Look, nur etwas mehr Fokus */
.box-aquarium-new{
  background:rgba(133,255,199,.04) !important;
  border:1px dashed rgba(133,255,199,.35) !important;
}

/* Subscription-Tank: KEIN orange BG mehr — dezenter Aqua-Mint-Rand als Akzent,
   Badge "SUBSCRIPTION TANK" in Weiß mit Aqua-Mint-Punkt davor. */
.box-aquarium.subscription-tank{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(133,255,199,.45) !important;
  box-shadow:0 0 24px rgba(133,255,199,.08) !important;
}
.subscription-tank-info{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--h);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.65;
}
.subscription-tank-info::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--aq);
  margin-right:.6rem;
  vertical-align:middle;
}

/* Diamond-Label (Aquarium-Buchstabe) — Buchstabe groß und WEISS (prominenter Titel,
   kein Akzent). Rand in Aqua-Mint bleibt als dezenter Akzent. */
.box-label{
  background:var(--bp) !important;
  border:1px solid rgba(133,255,199,.5) !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  box-shadow:0 4px 24px rgba(1,24,39,.4) !important;
}
.box-label .letter{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--h);
  font-weight:900;
}
.box-aquarium.subscription-tank .box-label{
  background:var(--bp) !important;
  border-color:rgba(133,255,199,.5) !important;
}

/* Tank-Name (Headline im oberen Karten-Bereich)
   Legacy setzt height:48px + overflow:hidden → 2. Zeile wird abgeschnitten.
   Hier height auflösen, Seitenpadding vergrößern, line-height setzen. */
.box-aquarium h3{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--h) !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  height:auto !important;
  min-height:48px !important;
  overflow:visible !important;
  padding:15px 18px 0 18px !important;
  line-height:1.3 !important;
  font-size:1.05rem !important;
}
.box-aquarium-new h3{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}
.box-aquarium.subscription-tank h3,
.box-aquarium.subscription-tank .infobox .fal{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
}

/* Infobox (Literangabe + Wellen-Icon) — Icon+Text als EINE Einheit inline nebeneinander,
   komplett als Block zentriert. white-space:nowrap verhindert Umbruch zwischen Zahl und
   Einheit ("450 Gallons" bleibt in einer Zeile). */
.infobox{
  display:block !important;
  text-align:center !important;
  white-space:nowrap !important;
  margin-top:1rem !important;
  padding:0 .5rem !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--h) !important;
  font-size:1.5rem !important;
  line-height:1.25 !important;
}
.infobox span{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--h) !important;
  font-size:1.5rem !important;
  line-height:1.25 !important;
  margin-top:0 !important;
  padding-left:.4rem !important;
  display:inline !important;
  vertical-align:baseline !important;
  white-space:nowrap !important;
}
.infobox .fal,
.infobox .fa,
.infobox i[class*="fa-"]{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  font-size:1.4rem !important;
  line-height:1 !important;
  display:inline !important;
  vertical-align:baseline !important;
  margin-right:.35rem !important;
}

/* Tag-Icon (Akzent), Tank-Name-Text bleibt weiß */
.box-aquarium .fa-tag,
.box-aquarium .fa-tags{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  opacity:.85;
}

/* Action-Buttons (Water tests / Setup / Connect barcode):
   Text weiß, dezente weiße Border, Icon in Aqua-Mint als Akzent. */
.box-aquarium .action-buttons{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
}
.box-aquarium .action-buttons div,
.action-buttons div{
  background:transparent !important;
  background-color:transparent !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:none !important;
  transition:background .25s, color .25s, border-color .25s, box-shadow .25s, width .15s !important;
  margin: 10px auto;
}
.box-aquarium .action-buttons div i,
.box-aquarium .action-buttons div i[class*="fa-"],
.action-buttons div i,
.action-buttons div i[class*="fa-"]{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}
.box-aquarium .action-buttons div:hover,
.action-buttons div:hover{
  background:rgba(255,255,255,.04) !important;
  background-color:rgba(255,255,255,.04) !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  border-color:var(--aq) !important;
  box-shadow:0 0 18px rgba(133,255,199,.15) !important;
}
.action-buttons div > i.fal {
  position: absolute;
  right: 8px;
  top: 11px;
}

/* Hover-Overlay (.level-box-1 öffnet sich beim Klick auf Action-Button) — dunkel statt teal */
.box-aquarium .level-box-1,
.box-aquarium .level-box-1-content{
  background:var(--mr) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.box-aquarium .level-box-1 > .level-box-1-content > ul > li{
  border:1px solid rgba(255,255,255,.18) !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  background:transparent !important;
}
.box-aquarium .level-box-1 > .level-box-1-content > ul > li a{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
}
.box-aquarium .level-box-1 > .level-box-1-content > ul > li .fal,
.box-aquarium .level-box-1 > .level-box-1-content > ul > li i[class*="fa-"]{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}
.box-aquarium .level-box-1 > .level-box-1-content > ul > li:hover{
  background:rgba(255,255,255,.05) !important;
  border-color:var(--aq) !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
}
.box-aquarium .level-box-1 > .level-box-1-content > ul > li:hover a,
.box-aquarium .level-box-1 > .level-box-1-content > ul > li a:hover{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
}

/* ── Slide-in-Panel für „Setup" (Edit) und „Neues Aquarium" (Create) ──
   Container ist .level-box-1-content-edit / .level-box-1-content-new (keine tmodal).
   Legacy: weiße Inputs, weißer Textarea-BG, orange Scrollbar, orange Close-Icon (#cf5828).
   Neu: Dark-Marine-Card, transparente Inputs im Felogin-Stil, Aqua-Mint-Akzente. */

/* Form-Inputs im Create- und Edit-Panel */
.box-aquarium .level-box-1 > .level-box-1-content-new > input,
.box-aquarium .level-box-1 > .level-box-1-content-new > select,
.box-aquarium .level-box-1 > .level-box-1-content-new > textarea,
.box-aquarium .level-box-1 > .level-box-1-content-edit > input,
.box-aquarium .level-box-1 > .level-box-1-content-edit > select,
.box-aquarium .level-box-1 > .level-box-1-content-edit > textarea{
  background:rgba(1,24,39,.55) !important;
  background-color:rgba(1,24,39,.55) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:0 !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--b) !important;
  font-size:.92rem !important;
  text-align:left !important;
  padding:.6rem .8rem !important;
  margin:.4rem auto !important;
  box-shadow:none !important;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .2s !important;
}
.box-aquarium .level-box-1 > .level-box-1-content-new > input:focus,
.box-aquarium .level-box-1 > .level-box-1-content-new > select:focus,
.box-aquarium .level-box-1 > .level-box-1-content-new > textarea:focus,
.box-aquarium .level-box-1 > .level-box-1-content-edit > input:focus,
.box-aquarium .level-box-1 > .level-box-1-content-edit > select:focus,
.box-aquarium .level-box-1 > .level-box-1-content-edit > textarea:focus{
  outline:none !important;
  border-color:var(--aq) !important;
}
.box-aquarium .level-box-1 .level-box-1-content-new ::placeholder,
.box-aquarium .level-box-1 .level-box-1-content-edit ::placeholder{
  color:rgba(255,255,255,.45) !important;
  -webkit-text-fill-color:rgba(255,255,255,.45) !important;
  opacity:1;
}

/* Select-Chevron (da appearance:none den nativen Pfeil killt) */
.box-aquarium .level-box-1 > .level-box-1-content-new > select,
.box-aquarium .level-box-1 > .level-box-1-content-edit > select{
  padding-right:2.2rem !important;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%),linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%) !important;
  background-position:calc(100% - 16px) 50%,calc(100% - 10px) 50% !important;
  background-size:6px 6px,6px 6px !important;
  background-repeat:no-repeat !important;
  cursor:pointer;
}
.box-aquarium .level-box-1 > .level-box-1-content-new > select:focus,
.box-aquarium .level-box-1 > .level-box-1-content-edit > select:focus{
  background-image:linear-gradient(45deg,transparent 50%,var(--aq) 50%),linear-gradient(135deg,var(--aq) 50%,transparent 50%) !important;
}
.box-aquarium .level-box-1 select option{
  background:var(--mr) !important;
  color:var(--w) !important;
}

/* Error-State: dezent rot statt Legacy-Magenta (#9c51a9) */
.box-aquarium .level-box-1 > .level-box-1-content-new > input.error,
.box-aquarium .level-box-1 > .level-box-1-content-new > select.error,
.box-aquarium .level-box-1 > .level-box-1-content-edit > input.error,
.box-aquarium .level-box-1 > .level-box-1-content-edit > select.error{
  background-color:rgba(255,118,118,.12) !important;
  border-color:#ff7676 !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
}

/* Save-Button (.action-buttons-create-aq) im Slide-in-Panel — Aqua-Mint-CTA */
.box-aquarium .level-box-1 .action-buttons-create-aq{
  font-family:var(--h) !important;
  font-weight:900 !important;
  font-size:.78rem !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  padding:.8em 1.6em !important;
  background:var(--aq) !important;
  background-color:var(--aq) !important;
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
  border:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:all .3s !important;
  display:inline-flex !important;
  align-items:center;
  gap:.5rem;
}
.box-aquarium .level-box-1 .action-buttons-create-aq i,
.box-aquarium .level-box-1 .action-buttons-create-aq i[class*="fa-"]{
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
}
.box-aquarium .level-box-1 .action-buttons-create-aq:hover{
  box-shadow:0 0 24px rgba(133,255,199,.4) !important;
  transform:translateY(-1px);
}

/* Close-Button am Panel (.close) — Legacy: oranger Kreis (#cf5828).
   Neu: dezent weiß halbtransparent, Hover → Aqua-Mint. */
.box-aquarium .level-box-1 .close{
  background:rgba(255,255,255,.18) !important;
  border-radius:50% !important;
  width:26px !important;
  height:26px !important;
  top:-30px !important;
  transition:background .2s !important;
}
.box-aquarium .level-box-1 .close:hover{
  background:var(--aq) !important;
  border:none !important;
  width:26px !important;
  height:26px !important;
  top:-30px !important;
}
.box-aquarium .level-box-1 .close:before,
.box-aquarium .level-box-1 .close:after{
  border-color:var(--w) !important;
  background:var(--w) !important;
  left:12px !important;
  top:7px !important;
}
.box-aquarium .level-box-1 .close:hover:before,
.box-aquarium .level-box-1 .close:hover:after{
  border-color:var(--bp) !important;
  background:var(--bp) !important;
  left:12px !important;
  top:7px !important;
}

/* Scrollbar im Panel (.scroller) — Legacy: Orange-Thumb auf Weiß-Track.
   Neu: Aqua-Mint-Thumb, transparenter Track (Panel-BG scheint durch). */
.scroller{
  scrollbar-color:rgba(133,255,199,.4) transparent !important;
  scrollbar-width:thin !important;
}
.scroller::-webkit-scrollbar{width:6px !important;height:6px !important}
.scroller::-webkit-scrollbar-track{background:transparent !important}
.scroller::-webkit-scrollbar-thumb{
  background:rgba(133,255,199,.4) !important;
  border:none !important;
  border-radius:3px !important;
}
.scroller::-webkit-scrollbar-thumb:hover{background:rgba(133,255,199,.7) !important}

/* "Create" / Glow-Animation: statt orangem Box-Shadow Aqua-Mint */
@keyframes box-glow-animation-aq{
  0%{box-shadow:0 0 0 0 rgba(133,255,199,0)}
  25%{box-shadow:0 0 40px 20px rgba(133,255,199,.55)}
  100%{box-shadow:0 0 0 0 rgba(133,255,199,0)}
}
.aquarium-created{
  animation-name:box-glow-animation-aq !important;
}

/* ═══════════════════════════════════════════════
   ANALYSIS-LAYOUT (eigenes <html>, Bootstrap 3) — Minimal-Override nur der Akzentfarbe.
   Selektor .analysis-root ist ggf. noch am Markup zu ergänzen; als Fallback :root-Scope genügt.
   ═══════════════════════════════════════════════ */
.analysis-root{--aq:#85FFC7}

/* ═══════════════════════════════════════════════
   LEGACY-APP-CSS RESETS für Relaunch-Chrome
   Das Legacy `tarb_triton_lab-*.css` hat globale Regeln mit -webkit-text-fill-color (überschreibt color
   auch bei gleicher Spezifität) und `button { max-width:280px; width:100% }` — das killt Relaunch-Nav-
   Links und dehnt alle Buttons. Hier Resets mit erhöhter Spezifität + explizitem -webkit-text-fill-color.
   ═══════════════════════════════════════════════ */

/* Header-/Footer-/Startpage-Links auf Relaunch-Farbe (weiß wie triton.de-Header).
   !important nötig, weil Legacy `a { -webkit-text-fill-color: #ce5828 }` sonst gewinnt. */
.footer a,
.lab-hero a,.lab-features a,.lab-cta a{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.nav a:hover,.nav-mob a:hover,
.footer a:hover{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Nav-Items: opacity:.45 inaktiv, 1 auf hover — wie triton.de */
.nav .nav-l li a,
.nav-mob .nav-mob-links li a{
  opacity:.6;
}
.nav .nav-l li a:hover,
.nav-mob .nav-mob-links li a:hover{
  opacity:1;
}

/* CTA-Button im Header — Aqua-Mint-BG mit dunkelblauer Schrift, nicht Weiß */
.nav .nav-cta,.nav .nav-cta:hover,.nav .nav-cta:focus,
.nav-mob .nav-cta,.nav-mob .nav-cta:hover,.nav-mob .nav-cta:focus{
  color:#011827 !important;
  -webkit-text-fill-color:#011827 !important;
  background:#85FFC7 !important;
}

/* Card-Link-Pfeil + kleine Feature-Links mit Akzent */
.card-link,.card-link:hover,.card-link:focus{
  color:var(--aq);
  -webkit-text-fill-color:var(--aq);
}

/* Button-Reset: Legacy zwingt `button { max-width:280px; width:100% }`.
   Relaunch-Buttons brauchen natürliche Breite. */
.nav .nav-cta,
.nav-mob .nav-cta,
.lab-hero .btn,.lab-hero-cta .btn,
.lab-cta .btn,.lab-cta-buttons .btn,
.btn-primary,.btn-ghost,
.relaunch-root button:not(.tmodal-close-icon):not(.tmodal-close-btn):not(.nav-toggle){
  max-width:none;
  width:auto;
}

/* Nav-Hover-Reset: Legacy `#nav a:hover { box-shadow: inset 0 -2px 0 0 #ce5828 }` killt den
   Relaunch-Underline-Effekt mit ::after. Box-Shadow hier explizit weg; Relaunch-CSS setzt
   die ::after-Unterstreichung selbst. */
.nav#nav .nav-l a:hover,
.nav#nav .nav-l a:focus,
.nav#nav .nav-l li.active a{
  box-shadow:none;
  background:transparent;
}

/* Mobile-Hover-Reset: Legacy @media (max-width:1050px) setzt `#nav a:hover { background:#ce5828 }`.
   Mit gleicher Spezifität später ladend nur via Wiederholung überschreibbar. */
@media screen and (max-width:1050px){
  .nav#nav a:hover,
  .nav#nav a:focus,
  .nav#nav li.active a{
    background:transparent;
  }
}

/* Burger-Breakpoint für Lab früher als triton.de (≤1100px statt ≤768px aus global.css).
   Lab-Header hat zusätzlich zur Haupt-Nav einen 3-teiligen Sprach-Switcher (DE|EN|PT) und
   einen Login-/Logout-CTA — dadurch reicht der Platz schon weit vor 768px nicht mehr aus und
   die Desktop-Nav läuft über das Logo (beobachtet ab ~1050px). Desktop-Nav + Sprach-Pills +
   Login-CTA hier ausblenden und Burger einblenden; `.nav-mob` wird von global.css @768 sowieso
   zusätzlich erzwungen. Login bleibt im Slide-Menü .nav-mob erreichbar. */
@media(max-width:1100px){
  .nav .nav-l{display:none}
  .nav .nav-lang{display:none}
  .nav .nav-cta{display:none}
  .nav .nav-user{display:none}
  .nav .nav-toggle{display:block}
  .nav-mob{display:block}
}

/* Legacy-Kollaps zurückziehen: tarb_general-*.css setzt im Bereich ≤1050px:
     #nav { height:0; overflow:hidden; border:0; background:#ececec }
     #triton-projects li, #usage-menu, #nav { height:0; overflow:hidden }
   Die neue Relaunch-Nav trägt id="nav" (für das mobile-Hover-Reset weiter oben nötig),
   wodurch diese Legacy-Regel die komplette Lab-Nav ab ≤1050px kollabiert und unsichtbar
   macht. Mit höherer Spezifität (`nav.nav#nav`) neutralisieren. */
@media screen and (max-width:1050px){
  nav.nav#nav{
    height:auto !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
  }
  nav.nav#nav .nav-i{overflow:visible !important}
}

/* Logo-Text-Fallback: "TRITON" weiß, "LAB" in Aqua-Mint (nur aktiv wenn <img> fehlt) */
.nav .logo-link,.nav .logo-link:hover,
.footer .f-logo-link,.footer .f-logo-link:hover,
.nav .logo-text,.footer .f-logo-text{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.logo-text-accent,.f-logo-text-accent{
  color:#85FFC7 !important;
  -webkit-text-fill-color:#85FFC7 !important;
}

/* ═══════════════════════════════════════════════
   LEGACY-FONT-OVERRIDES für Chrome (Nav + Footer)
   tarb_general-*.css setzt:
     html,body { font-family:'Open Sans'; font-size:16px; line-height:24px }
     #nav li,#nav a { font-size:12px; font-weight:700; line-height:40px; height:40px; color:#111 }
   Beides kapert die Relaunch-Nav (Selektoren greifen wegen class="nav" id="nav").
   Hier gezielt mit erhöhter Spezifität + !important auf Relaunch-Werte zurückziehen.
   ═══════════════════════════════════════════════ */

/* Nav-Items (Desktop): wie triton.de — Body-Font, Relaunch-Schriftgrößen */
.nav#nav .nav-l,
.nav#nav .nav-l li,
.nav#nav .nav-l a{
  font-family:var(--b) !important;
  line-height:1.5 !important;
  height:auto !important;
}
.nav#nav .nav-l a{
  font-size:.88rem !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  padding:0 !important;
}

/* Login-CTA: Legacy #nav a shrinkt auf 12px/40px Höhe/color:#111/padding:0 15px.
   Hier alle Relaunch-.nav-cta-Props mit !important erzwingen (wie triton.de).
   Color liegt bereits in der vorigen .nav .nav-cta-Regel oben auf var(--bp). */
.nav#nav .nav-cta{
  font-size:.78rem !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  height:auto !important;
  padding:.8em 2em !important;
}

/* Nav-Toggle (Burger-Icon): Font Awesome behält eigene Font. Nur Legacy-Padding/Höhe neutralisieren. */
.nav#nav .nav-toggle{height:auto !important;line-height:1 !important;padding:.5rem !important}

/* Mobile-Nav */
.nav-mob .nav-mob-links a{
  font-family:var(--h) !important;
  font-size:1.4rem !important;
  font-weight:900 !important;
  letter-spacing:.1em !important;
  line-height:1.2 !important;
  height:auto !important;
}
.nav-mob .nav-mob-lang{font-family:var(--h) !important}

/* Footer-Container: Legacy `#footer { background:#e3e3e3; font-size:12px; line-height:20px }`
   killt den dunkelblauen Relaunch-BG und shrinkt die Schrift. Hier zurückziehen. */
.footer#footer{
  background:var(--bp) !important;
  font-size:1rem !important;
  line-height:1.5 !important;
}

/* Footer: Body-Links in var(--b), Headings + Logo-Text explizit Lato */
.footer#footer .footer-col,
.footer#footer .footer-col *,
.footer#footer .footer-tagline,
.footer#footer .f-copy,
.footer#footer .footer-legal-links,
.footer#footer .footer-legal-links *{
  font-family:var(--b) !important;
}
.footer#footer .footer-heading,
.footer#footer .f-logo-text,
.footer#footer .f-logo-text-accent{
  font-family:var(--h) !important;
}
.footer#footer .footer-col a{
  font-size:.88rem !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  height:auto !important;
  padding:0 !important;
}
.footer#footer .footer-heading{
  font-size:.82rem !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  line-height:1.4 !important;
}

/* ═══════════════════════════════════════════════
   TMODAL — tritonlab-JS-Modals (Aquarium Setup/Edit/Create, Profile, Eval-Progress, …)
   Legacy (tarb_modal-*.css): weißer Content-Block + orange Close-Icon (#e07950) + orange Hover-BG.
   Neu: Dark-Marine-Card auf dunklem Backdrop, Aqua-Mint-Akzente, Inputs im Felogin-Stil.
   ═══════════════════════════════════════════════ */

/* Backdrop: dunkler, leicht getint statt Neutral-Grau */
.tmodal{
  background:rgba(1,24,39,.82) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}

/* Content-Card: Marine-BG, weiße Schrift, eckiger Rand (Design-System hat border-radius:0) */
.tmodal-content{
  background:var(--mr) !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  border:1px solid rgba(133,255,199,.15) !important;
  border-radius:0 !important;
  box-shadow:0 20px 60px rgba(0,0,0,.5) !important;
  padding:2.4rem !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(133,255,199,.4) transparent;
}

/* WebKit-Scrollbar im Modal — ersetzt den orangen Standard-Scroll durch Aqua-Mint */
.tmodal-content::-webkit-scrollbar{width:8px;height:8px}
.tmodal-content::-webkit-scrollbar-track{background:transparent}
.tmodal-content::-webkit-scrollbar-thumb{background:rgba(133,255,199,.35);border-radius:4px}
.tmodal-content::-webkit-scrollbar-thumb:hover{background:rgba(133,255,199,.6)}

/* Close-Icon: Default Weiß 55%, Hover Aqua-Mint mit dezentem Glow statt Orange-Fill */
.tmodal-close-icon{
  background:transparent !important;
  top:14px !important;
  right:14px !important;
}
.tmodal-close-icon:before{
  /* Legacy tarb_modal-*.css will `font-family:"Font Awesome 5 Pro"` + `\f2ee` rendern.
     Das Lab lädt FA5 Pro nicht mehr (60_projects.ts: page.includeCSS.fontawesome >);
     der FA6-Kit-Loader injiziert die Webfont-@font-faces erst per JS und mit anderem
     Font-Family-Namen → Pseudo-Element-Content fällt auf Tofu-Box zurück.
     Lösung: Unicode-Multiplikation `×` (U+00D7) statt FA — rendert in jedem System-Font
     und ist vom FA-Kit komplett entkoppelt. */
  content:"\00d7" !important;
  font-family:var(--h),"Lato",sans-serif !important;
  font-weight:300 !important;
  font-size:1.8rem !important;
  line-height:1 !important;
  color:rgba(255,255,255,.55) !important;
  -webkit-text-fill-color:rgba(255,255,255,.55) !important;
  transition:color .2s !important;
}
.tmodal-close-icon:hover{
  background:rgba(133,255,199,.12) !important;
  border-radius:30px !important;
}
.tmodal-close-icon:hover:before{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}

/* Überschrift im Modal — greift bereits durch .tmodal-content h3 weiter oben,
   hier zusätzlich Rhythmus (Abstand unten, Schriftgröße angleichen) */
.tmodal-content h3{
  font-family:var(--h) !important;
  font-weight:900 !important;
  font-size:1.4rem !important;
  letter-spacing:.02em !important;
  margin-bottom:1.4rem !important;
  padding-bottom:.8rem !important;
  text-align:left !important;
}

/* Formular-Elemente im Modal — Legacy zwingt pill-shape + weißen BG; hier auf Felogin-Stil
   (dunkler Input, weiße Schrift, Aqua-Mint-Fokus, eckig) zurück. */
.tmodal-content input[type="text"],
.tmodal-content input[type="number"],
.tmodal-content input[type="email"],
.tmodal-content input[type="password"],
.tmodal-content input[type="tel"],
.tmodal-content select,
.tmodal-content textarea{
  width:100% !important;
  max-width:none !important;
  background:rgba(1,24,39,.55) !important;
  background-color:rgba(1,24,39,.55) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--b) !important;
  font-size:1rem !important;
  padding:.8rem 1rem !important;
  margin:0 0 1rem 0 !important;
  box-shadow:none !important;
  transition:border-color .2s !important;
  appearance:none;
  -webkit-appearance:none;
}
.tmodal-content input:focus,
.tmodal-content select:focus,
.tmodal-content textarea:focus{
  outline:none !important;
  border-color:var(--aq) !important;
}
.tmodal-content input::placeholder,
.tmodal-content textarea::placeholder{
  color:rgba(255,255,255,.45) !important;
  -webkit-text-fill-color:rgba(255,255,255,.45) !important;
  opacity:1;
}
.tmodal-content textarea{resize:vertical;min-height:6rem}

/* Select-Pfeil (Chevron) rechts — neu, da appearance:none den nativen Pfeil entfernt */
.tmodal-content select{
  padding-right:2.4rem !important;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%),linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%) !important;
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50% !important;
  background-size:6px 6px,6px 6px !important;
  background-repeat:no-repeat !important;
  cursor:pointer;
}
.tmodal-content select:focus{
  background-image:linear-gradient(45deg,transparent 50%,var(--aq) 50%),linear-gradient(135deg,var(--aq) 50%,transparent 50%) !important;
}
/* Dropdown-Optionen: native Farbe vom OS, aber mit dunklem BG im Dropdown (Chrome/Edge) */
.tmodal-content select option{
  background:var(--mr) !important;
  color:var(--w) !important;
}

/* Save-Button (action-buttons-create-aq) — Aqua-Mint-CTA mit dunkelblauer Schrift */
.tmodal-content .action-buttons-wrapper{margin-top:1.4rem;text-align:center}
.tmodal-content .action-buttons{display:inline-block}
.tmodal-content .action-buttons-create-aq{
  font-family:var(--h) !important;
  font-weight:900 !important;
  font-size:.88rem !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  padding:.9em 2em !important;
  background:var(--aq) !important;
  background-color:var(--aq) !important;
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
  border:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:all .3s !important;
  display:inline-flex !important;
  align-items:center;
  gap:.6rem;
}
.tmodal-content .action-buttons-create-aq i,
.tmodal-content .action-buttons-create-aq i[class*="fa-"]{
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
}
.tmodal-content .action-buttons-create-aq:hover{
  box-shadow:0 0 32px rgba(133,255,199,.4) !important;
  transform:translateY(-2px);
}

/* Validierungs-Fehler: Border in dezentem Rot, statt Legacy-Orange */
.tmodal-content input.error,
.tmodal-content select.error,
.tmodal-content textarea.error{
  border-color:#ff7676 !important;
  box-shadow:0 0 0 1px rgba(255,118,118,.3) !important;
}

/* ═══════════════════════════════════════════════
   EVALUATION-PAGE (Showevala/b/c/d) — Dark-Reskin der ICP-OES Analyse-Seite
   Markup unverändert; alles via .tx-tritonlab gescoped.
   global-lab.css lädt nach tarb_triton_lab-*.css → bei gleicher Spezifität gewinnt.
   !important nur dort, wo das Legacy-CSS selbst !important / -webkit-text-fill-color setzt.
   ═══════════════════════════════════════════════ */

/* FontAwesome-Duotone (.fad) Doppel-Glyph-Fix.
   Lab-Header lädt FA Kit 6 (kit.fontawesome.com/1e36292a31.js) im SVG-Replace-Modus.
   Je nach Kit-Konfig kann das Kit Duotone enthalten oder nicht — Markup `<i class="fad fa-...">`
   rendert dann je nach Render-Pfad (Webfont vs. SVG-Replace vs. Fallback) doppelt.
   Wir decken alle drei Pfade ab:
   1) Webfont (i-Tag bleibt): Token + Light-Weight-Fallback erzwingen
   2) SVG-Replace (i wird zu <svg>): .fa-secondary <path> hart auf opacity:0
   3) Pseudo-Element ::after (Duotone-CSS aktiv): unsichtbar */
.tx-tritonlab .fad,
.tx-tritonlab .fa-duotone{
  --fa-secondary-opacity:0;
  font-weight:300 !important;
}
.tx-tritonlab .fad::after,
.tx-tritonlab .fa-duotone::after,
.tx-tritonlab i.fad::after,
.tx-tritonlab .ds-tabmenu i.fad::after{
  opacity:0 !important;
  content:none !important;
}
.tx-tritonlab .svg-inline--fa.fa-duotone .fa-secondary,
.tx-tritonlab .svg-inline--fa .fa-secondary,
.tx-tritonlab svg.fa-duotone .fa-secondary,
.tx-tritonlab .ds-tabmenu svg .fa-secondary{
  opacity:0 !important;
  fill-opacity:0 !important;
}

/* Page-Title "ICP-OES Laboratory Seawater Analysis" */
.tx-tritonlab .eval-headlines{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:300 !important;
  letter-spacing:.01em;
}

/* Section-Titles "DASHBOARD" / "ANALYSIS AND RECOMMENDATIONS" */
.tx-tritonlab .eval-section-title{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  border-bottom:1px solid rgba(133,255,199,.25) !important;
}
.tx-tritonlab .eval-section-title i{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}

/* Back-To-List-Button (oben + unten) */
.tx-tritonlab .button-back-to-list,
.tx-tritonlab .button-back-to-list:focus{
  background:transparent !important;
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  border:1px solid rgba(133,255,199,.4) !important;
  border-radius:4px;
  padding:0 28px !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tx-tritonlab .button-back-to-list:hover{
  background:var(--aq) !important;
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
  border-color:var(--aq) !important;
  box-shadow:0 0 18px rgba(133,255,199,.35);
}
.tx-tritonlab .button-back-to-list i{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}

/* Dashboard-Karten: dunkles Glas statt Plain-Inline */
.tx-tritonlab .dashboard-item{
  /* background:rgba(3,47,79,.45);
  border:1px solid rgba(133,255,199,.12); */
  border-radius:6px;
  margin:8px auto;
  padding:6px 14px;
}
.tx-tritonlab .dashboard-item p,
.tx-tritonlab .dashboard-item .dashboard-item-label{
  color: rgba(255, 255, 255, .72) !important;
  -webkit-text-fill-color:rgba(255, 255, 255, .72) !important;
  font-weight:500;
  letter-spacing:.02em;
}
.tx-tritonlab .dashboard-item .questionmark,
.tx-tritonlab .dashboard-item .questionmark i{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}
.tx-tritonlab .dashboard-item .questionmark:hover{
  background:transparent !important;
  filter:brightness(1.4);
}

/* Custom-Select Trigger + Dropdown-Liste (JS ersetzt <select> durch divs) */
.tx-tritonlab .select-selected{
  background:rgba(1,24,39,.6) !important;
  color: rgba(255, 255, 255, .72) !important;
  -webkit-text-fill-color:rgba(255, 255, 255, .72) !important;
  border:1px solid rgba(133,255,199,.25) !important;
  border-radius:4px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.tx-tritonlab .select-selected:hover,
.tx-tritonlab .select-selected.select-arrow-active{
  border-color:var(--aq) !important;
  background:rgba(1,24,39,.8) !important;
  box-shadow:0 0 0 2px rgba(133,255,199,.18);
}
.tx-tritonlab .select-selected:after{
  border-color:var(--aq) transparent transparent transparent !important;
}
.tx-tritonlab .select-selected.select-arrow-active:after{
  border-color:transparent transparent var(--aq) transparent !important;
}
.tx-tritonlab .select-items{
  background:rgba(1,24,39,.96) !important;
  border:1px solid rgba(133,255,199,.25) !important;
  border-top:none !important;
  border-radius:0 0 4px 4px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.tx-tritonlab .select-items div{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-bottom:1px solid rgba(133,255,199,.08) !important;
  transition:background .15s ease, color .15s ease;
}
.tx-tritonlab .select-items div:hover,
.tx-tritonlab .same-as-selected{
  background:rgba(133,255,199,.18) !important;
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}

/* Dashboard Action-Buttons (PDF/CSV Download, Copy-URL) */
.tx-tritonlab .dashboard-item button,
.tx-tritonlab .dashboard-item a,
.tx-tritonlab #copy-url-button,
.tx-tritonlab #button-download-pdf{
  background:transparent !important;
  border:1px solid rgba(133,255,199,.4) !important;
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  border-radius:4px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tx-tritonlab .dashboard-item button:hover,
.tx-tritonlab .dashboard-item a:hover,
.tx-tritonlab #copy-url-button:hover,
.tx-tritonlab #button-download-pdf:hover{
  background:var(--aq) !important;
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
  border-color:var(--aq) !important;
  box-shadow:0 0 18px rgba(133,255,199,.35);
}
.tx-tritonlab .dashboard-item input{
  background:rgba(1,24,39,.6) !important;
  border:1px solid rgba(133,255,199,.25) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.tx-tritonlab .dashboard-item input:focus{
  border-color:var(--aq) !important;
  outline:none;
  box-shadow:0 0 0 2px rgba(133,255,199,.18);
}

/* Tabs-Leiste (.ds-tabmenu): Underline-Style statt Box-Style */
.tx-tritonlab .ds-tabmenu{
  border-bottom:1px solid rgba(133,255,199,.15);
  margin-top:20px !important;
  background:transparent;
}
.tx-tritonlab .ds-tabmenu button{
  background:transparent !important;
  color:rgba(255,255,255,.55) !important;
  -webkit-text-fill-color:rgba(255,255,255,.55) !important;
  border:none !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  padding:14px 18px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:13px !important;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.tx-tritonlab .ds-tabmenu button i{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  margin-right:8px;
  font-size:16px;
}
.tx-tritonlab .ds-tabmenu button:hover:not(.active){
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:rgba(133,255,199,.05) !important;
  border:none !important;
  border-bottom:2px solid rgba(133,255,199,.4) !important;
}
.tx-tritonlab #ds-tabmenu-1 button.active,
.tx-tritonlab .ds-tabmenu button.active,
.tx-tritonlab .ds-tabmenu button.active:hover{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  background:rgba(133,255,199,.08) !important;
  border:none !important;
  border-bottom:2px solid var(--aq) !important;
  cursor:default;
}

/* Eval-Tabelle: dunkler Karten-BG, dezente Zebra, aqua-Header */
.tx-tritonlab .evaluation{
  /* background:rgba(3,47,79,.35); */
  border-radius:6px;
  padding:0;
  border:1px solid rgba(133,255,199,.12);
  overflow:hidden;
  margin-top:20px;
}
.tx-tritonlab .evaluation table{
  border:none !important;
  margin:0 !important;
  background:transparent;
}
.tx-tritonlab .evaluation thead{
  background:rgba(1,24,39,.45);
}
.tx-tritonlab .evaluation thead th,
.tx-tritonlab .evaluation th{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  border-bottom:1px solid rgba(133,255,199,.18) !important;
  font-weight:500 !important;
  font-size:13px !important;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.tx-tritonlab .evaluation tbody tr{
  border-bottom:1px solid rgba(133,255,199,.04);
  transition:background .15s ease;
}
.tx-tritonlab .evaluation tbody tr:nth-child(even){
  background:rgba(255,255,255,.018) !important;
}
.tx-tritonlab .evaluation tbody tr:nth-child(odd){
  background:transparent !important;
}
.tx-tritonlab .evaluation tbody tr:hover{
  background:rgba(133,255,199,.05) !important;
}
.tx-tritonlab .evaluation tbody tr td{
  color:rgba(255,255,255,.85) !important;
  -webkit-text-fill-color:rgba(255,255,255,.85) !important;
  vertical-align:middle;
}

/* Periodensystem-Element-Kachel (.pt-elem) */
.tx-tritonlab .pt-elem{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  border:1px solid rgba(133,255,199,.45) !important;
  /* background:rgba(1,24,39,.55); */
  border-radius:3px;
  transition:border-color .2s ease, box-shadow .2s ease;
  color: rgb(133 254 199) !important;
  -webkit-text-fill-color: rgb(133 254 199) !important;
}
.tx-tritonlab .evaluation tbody tr:hover .pt-elem{
  border-color:var(--aq) !important;
  box-shadow:0 0 8px rgba(133,255,199,.3);
}

/* Warn-States: kontraststark auf dunklem BG, Helltöne statt Legacy-Yellow/Red.
   Text-Shadow erzeugt einen leichten Neon-Glow in der jeweiligen Warnfarbe,
   damit Abweichungen auf einen Blick ins Auge fallen. */
.tx-tritonlab .evaluation .elem-warn-yellow{
  color:#FFD86B !important;
  -webkit-text-fill-color:#FFD86B !important;
  text-shadow:0 0 6px rgba(255,216,107,.75),0 0 14px rgba(255,216,107,.45) !important;
  font-weight:700 !important;
}
.tx-tritonlab .evaluation .elem-warn-red{
  color:#FF8A99 !important;
  -webkit-text-fill-color:#FF8A99 !important;
  text-shadow:0 0 6px rgba(255,138,153,.8),0 0 14px rgba(255,138,153,.5) !important;
  font-weight:700 !important;
}

/* Rainbow-Bar bleibt unverändert (Inline-Style aus PHP/JS); nur subtiler Inset-Border */
.tx-tritonlab .evaluation .bar,
.tx-tritonlab .bar{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  position:relative;
  overflow:visible;
  opacity: 0.7;
}

/* Rainbow-Pointer: das ▲-Glyph wird komplett unsichtbar gemacht und der <span>
   selbst wird zu einem schmalen vertikalen Strich, der oben+unten über die Bar
   hinausragt. Margin-left wird weiterhin per JS gesetzt (Position auf der Bar). */
.tx-tritonlab .pointer,
.tx-tritonlab .pointer-uni,
.tx-tritonlab .pointer-bi,
.tx-tritonlab .evaluation .pointer,
.tx-tritonlab .evaluation .pointer-uni,
.tx-tritonlab .evaluation .pointer-bi{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  opacity:1 !important;
  background:#85ffc7 !important;
  border:none !important;
  padding:0 !important;
  width:2px !important;
  height:18px !important;
  display:inline-block !important;
  position:relative !important;
  top:-4px !important;
  line-height:0 !important;
  font-size:0 !important;
  vertical-align:top !important;
  box-shadow:0 0 6px rgba(255,255,255,.55), 0 0 12px rgba(133,255,199,.45) !important;
  text-shadow:none !important;
  margin-top:0 !important;
  /* Initial-margin-left wird vom JS (lab-eval/index.js Z. 121) per getComputedStyle
     ausgelesen und um -2 reduziert, was den null_offset definiert (Position bei 0%).
     Bestand: -6px → -8px-Offset (war Half-Width des alten ▲-Triangles).
     Neu: 1px → -1px-Offset = Mittelpunkt unseres 2px-Strichs exakt auf Position 0%.
     Kein !important, damit JS die per-Element-Position weiterhin überschreiben kann. */
  margin-left:1px;
}

/* Mobile Variante */
@media (max-width: 840px) {
  .tx-tritonlab .mobile-element {
    border: none;
    border-bottom: none;
    margin-bottom: 100px;
  }
  .tx-tritonlab .mobile-element h1 {
    color: var(--aq) !important;
    -webkit-text-fill-color: var(--aq) !important;
  }
}

/* Expand-Modal-Backdrop (wird beim Öffnen eines Custom-Selects über die Seite gelegt).
   Legacy: weißer BG mit opacity 0.8 → wirkt nahezu blendend.
   Neu: dunkles Marine-Glas mit Backdrop-Blur, sodass der Inhalt nur leicht durchschimmert. */
.tx-tritonlab #expand-modal{
  background-color:rgba(1,24,39,.72) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.tx-tritonlab .expand-modal-visible,
.tx-tritonlab #expand-modal.expand-modal-visible{
  opacity:1 !important;
}

/* Sonstige H-Tags innerhalb Eval-Sections (Help/Dose/Products/Visual) */
.tx-tritonlab .eval-section h3,
.tx-tritonlab .eval-section h4,
.tx-tritonlab .eval-section h5,
.tx-tritonlab .eval-group-title{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:rgba(133,255,199,.18) !important;
}

/* Body-Text in Help/Dose/Products-Tabs (P/LI/OL/UL): Bestand erbt nur Default-Color
   und wirkt auf dem dunklen Lab-BG zu schwach. */
.tx-tritonlab .eval-section p,
.tx-tritonlab .eval-section li,
.tx-tritonlab .eval-section ol,
.tx-tritonlab .eval-section ul,
/* .tx-tritonlab .eval-section span, */
.tx-tritonlab .ds-tab p,
.tx-tritonlab .ds-tab li,
.tx-tritonlab .ds-tab ol,
.tx-tritonlab .ds-tab ul,
.tx-tritonlab .ecs-block .ah-item p,
.tx-tritonlab .dosage-block .advice-item p{
  color: rgba(255, 255, 255, .72) !important;
  -webkit-text-fill-color:rgba(255, 255, 255, .72) !important;
}
/* Markante Akzent-Klassen (mint behalten): .text-missing → dezent kursiv */
.tx-tritonlab .text-missing{
  color:rgba(255,255,255,.45) !important;
  -webkit-text-fill-color:rgba(255,255,255,.45) !important;
}
/* Element-Pillen in Help/Dose links (.dosage-block span / .ecs-block span) — wie pt-elem */
.tx-tritonlab .dosage-block span,
.tx-tritonlab .ecs-block span{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  border-color:rgba(133,255,199,.45) !important;
  background:rgba(1,24,39,.55);
}
/* Top-Border der Dosage/ECS-Blöcke aufs Mint umstellen */
.tx-tritonlab .dosage-block,
.tx-tritonlab .ecs-block{
  border-top-color:rgba(133,255,199,.18) !important;
}
/* Vertikale Trennlinien neben Advice/AH-Items mint statt #c3c3c3 */
.tx-tritonlab .ecs-block .ah-item p,
.tx-tritonlab .dosage-block .advice-item p{
  border-left-color:rgba(133,255,199,.25) !important;
}
/* Dosage Block Heading */
.tx-tritonlab .dosage-block-group h3 {
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}

/* "SHOW ME THE PRODUCT TO USE" + sonstige .button.button-inverted im Eval-Bereich:
   Bestand setzt color:#e07950 (Orange) und keine font-family → erbt was inkonsistent
   wirkt. Hier auf Aqua-Mint-Ghost-Style mit konsistenter Lab-Font (inherit von body). */
.tx-tritonlab .button,
.tx-tritonlab a.button,
.tx-tritonlab .button.button-inverted,
.tx-tritonlab .shop-product-btn .button,
.tx-tritonlab .shop-product-btn a.button{
  font-family:inherit !important;
  background:transparent !important;
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  border:1px solid rgba(133,255,199,.4) !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:500 !important;
  text-decoration:none !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tx-tritonlab .button:hover,
.tx-tritonlab a.button:hover,
.tx-tritonlab .button.button-inverted:hover,
.tx-tritonlab .button.button-inverted:focus,
.tx-tritonlab .shop-product-btn .button:hover{
  background:var(--aq) !important;
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
  border-color:var(--aq) !important;
  box-shadow:0 0 18px rgba(133,255,199,.35);
}

/* Sterne-Rating: SVG-Symbol-Inhalte (in tritonlab Aquarium/StarRating.html) haben
   `fill="#009686"` hardkodiert auf inneren <use>-Refs — CSS kann durch SVG-Use-
   Shadow-DOM nicht durchgreifen. Color-Patch erfolgt per JS in Triton-lab/Footer.html
   beim DOMContentLoaded. Hier nur der Glow auf das äußere <svg class="icon">. */
.tx-tritonlab svg.icon{
  filter:drop-shadow(0 0 3px rgba(133,255,199,.6)) drop-shadow(0 0 6px rgba(133,255,199,.35));
  overflow:visible;
}

/* Products-Tab — #product-list Karten: Bestand background:#fff + grauer Border.
   Neu: dunkles Glas mit dezenter Mint-Hairline, Hover = stärkere Mint-Border + Glow. */
.tx-tritonlab #product-list li{
  background-color: rgb(133 255 199 / 4%) !important;
  border:1px solid rgba(133,255,199,.14) !important;
  color:rgba(255,255,255,.88) !important;
  -webkit-text-fill-color:rgba(255,255,255,.88) !important;
}
.tx-tritonlab #product-list li:hover{
  border-color:rgba(133,255,199,.4) !important;
  box-shadow:0 0 16px rgba(133,255,199,.18);
}
.tx-tritonlab #product-list li img{
  background:transparent;
}
.tx-tritonlab .product-information,
.tx-tritonlab .product-information span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.tx-tritonlab .products-in-basket{
  color:rgba(255,255,255,.65) !important;
  -webkit-text-fill-color:rgba(255,255,255,.65) !important;
}
/* "Important"-Banner oben rechts: bleibt im Mint-Verlauf (passt zu Lab) */
.tx-tritonlab .product-recommend::after{
  color:var(--bp) !important;
  -webkit-text-fill-color:var(--bp) !important;
}

/* ═══════════════════════════════════════════════
   REGISTER-SEITE (UID 47) / PROFILE-EDIT (UID 74) — Dark/Mint-Reskin
   Markup-Quellen (tritonlab Profile/New.html + Profile/Edit.html):
     • <form id="profile-edit">                    Wrapper aller Felder
     • #fe_email + #fe_country (außerhalb #pw-change-main)
     • #pw-change-main                              Pwd-Block-Wrapper
     • #suggest                                    "Generate Random Password"-Button
     • #pw-form .input-field                       Wrapper je Pwd-Input
     • #pw / #pwr (.fe-register-data)              Pwd-Inputs
     • .pw-hidden-option (i.far.fa-eye)            Eye-Toggle-Icon (FA)
     • #pw-left / #pwr-left                        Char-Counter neben Input
     • #pw-indicator                                Strength-Bar-Container
     • .pw-ind-level (4 Stück)                     Strength-Bar-Segments
     • #suggestion                                  "For a minimum security…"-Hinweis
     • #send-new-pw                                 Submit-Container
     • .bc-connect-loader                          Spinner (gleicher Selektor wie Login)
     • #terms-and-conditions / #gdpr               Checkbox-Container
     • .label-error-fe-email (JS-injiziert)         "Waiting for valid email address 👇"
     • .errorUpdate                                Server-Side-Error-Box (FlashMessages)
   Spezifitäts-Strategie:
     Generisches `input[type=text]` (tarb_general Z. 422) und Legacy
     `#pw-change-main #pw-form input.error` setzen `-webkit-text-fill-color` →
     überall mit !important kontern. Selektoren mit `.tx-tritonlab`-Prefix damit
     die Regeln nur im tritonlab-Plugin-Scope wirken (kein Bleed in Modal-Forms).
   ═══════════════════════════════════════════════ */

/* Form-Inputs (Email + alle text/password im Profile-Edit-Form) — Dark/Mint. */
.tx-tritonlab #profile-edit input[type="text"],
.tx-tritonlab #profile-edit input[type="email"],
.tx-tritonlab #profile-edit input[type="password"],
.tx-tritonlab #pw-change-main input[type="text"],
.tx-tritonlab #pw-change-main input[type="email"],
.tx-tritonlab #pw-change-main input[type="password"]{
  width:100% !important;
  max-width:380px !important;
  margin:.6rem auto !important;
  padding:.9rem 1rem !important;
  background:rgba(1,24,39,.6) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--b) !important;
  font-size:1rem !important;
  text-align:left;
  box-shadow:none !important;
  outline:0;
  transition:border-color .2s;
}
.tx-tritonlab #profile-edit input::placeholder,
.tx-tritonlab #pw-change-main input::placeholder{
  color:rgba(255,255,255,.4) !important;
  -webkit-text-fill-color:rgba(255,255,255,.4) !important;
}
.tx-tritonlab #profile-edit input:focus,
.tx-tritonlab #pw-change-main input:focus{
  outline:none;
  border-color:var(--aq) !important;
}

/* Browser-Autofill-Override (gleicher Trick wie Felogin). */
.tx-tritonlab #profile-edit input:-webkit-autofill,
.tx-tritonlab #profile-edit input:-webkit-autofill:hover,
.tx-tritonlab #profile-edit input:-webkit-autofill:focus,
.tx-tritonlab #profile-edit input:-webkit-autofill:active,
.tx-tritonlab #pw-change-main input:-webkit-autofill,
.tx-tritonlab #pw-change-main input:-webkit-autofill:hover,
.tx-tritonlab #pw-change-main input:-webkit-autofill:focus,
.tx-tritonlab #pw-change-main input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px rgba(1,24,39,.95) inset !important;
  box-shadow:0 0 0 1000px rgba(1,24,39,.95) inset !important;
  -webkit-text-fill-color:var(--w) !important;
  caret-color:var(--w) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  transition:background-color 9999s ease-in-out 0s;
}
.tx-tritonlab #profile-edit input:-webkit-autofill:focus,
.tx-tritonlab #pw-change-main input:-webkit-autofill:focus{
  border-color:var(--aq) !important;
}

/* Error-State auf Input — Legacy: roter Text + roter Border auf rotem Hintergrund.
   Hier: Border in warmem Rot, Text mint-weiß bleibt (statt Gleichgewicht in Rot zu kippen). */
.tx-tritonlab #profile-edit input.error,
.tx-tritonlab #pw-change-main #pw-form input.error{
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  border:1px solid #FF8A99 !important;
  font-weight:400 !important;
}
.tx-tritonlab #profile-edit input.error::placeholder,
.tx-tritonlab #pw-change-main #pw-form input.error::placeholder{
  color:#FF8A99 !important;
  -webkit-text-fill-color:#FF8A99 !important;
}

/* Country-Select (#fe_country) — Native-Select dark gestylt mit Mint-Pfeil per SVG-BG. */
.tx-tritonlab #profile-edit select,
.tx-tritonlab #fe_country{
  width:100% !important;
  max-width:380px !important;
  margin:.6rem auto !important;
  padding:.9rem 2.4rem .9rem 1rem !important;
  background:rgba(1,24,39,.6) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--b) !important;
  font-size:1rem !important;
  text-align:left;
  box-shadow:none !important;
  outline:0;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2385FFC7' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 1rem center !important;
  background-size:12px 8px !important;
  cursor:pointer;
  transition:border-color .2s;
}
.tx-tritonlab #profile-edit select:focus,
.tx-tritonlab #fe_country:focus{
  border-color:var(--aq) !important;
}
/* Native <option>-Liste: Browser zwingt System-Farben — wir setzen wenigstens dark+light. */
.tx-tritonlab #profile-edit select option,
.tx-tritonlab #fe_country option{
  background:#011827;
  color:#fff;
}

/* JS setzt initial bei "---"-Placeholder-Option `style="color:#9f9f9f"` direkt am Element —
   Inline-Style schlägt Stylesheet-Regeln, deshalb hier mit !important zurückholen.
   Sobald User auswählt, ändert das JS Inline-Style auf #555 (alt) — auch das überstimmen. */
.tx-tritonlab #profile-edit select[style],
.tx-tritonlab #fe_country[style]{
  color:rgba(255,255,255,.85) !important;
  -webkit-text-fill-color:rgba(255,255,255,.85) !important;
}

/* "or enter manually" / "For a minimum security…" — kleiner Hinweistext. */
.tx-tritonlab #pw-change-main p,
.tx-tritonlab #pw-change-main #pw-indicator p{
  color:rgba(255,255,255,.55) !important;
  -webkit-text-fill-color:rgba(255,255,255,.55) !important;
  font-size:.82rem !important;
  line-height:1.5 !important;
  margin:1.2rem auto !important;
  max-width:380px;
}

/* Eye-Toggle (.pw-hidden-option) — bereits über `.tx-tritonlab i[class*="fa-"]` mint,
   aber Position ist hardcoded `top:33px; margin-left:-30px` für 280px-Layout.
   Im neuen 380px-Layout neu kalibrieren. */
.tx-tritonlab #pw-change-main #pw-form i.pw-hidden-option{
  top:50% !important;
  transform:translateY(-50%);
  right:14px;
  left:auto;
  margin:0 !important;
  font-size:1rem;
}
.tx-tritonlab #pw-change-main #pw-form .input-field{
  position:relative;
  max-width:380px;
  margin:0 auto;
}
/* Char-Counter rechts oben — Legacy `top:10px; margin-left:-17px` → neu rechts oben innen. */
.tx-tritonlab #pw-change-main #pw-form span.left{
  position:absolute !important;
  top:.8rem !important;
  right:2.6rem !important;
  left:auto !important;
  margin:0 !important;
  font-size:.7rem !important;
  color:rgba(255,255,255,.4) !important;
  -webkit-text-fill-color:rgba(255,255,255,.4) !important;
}
.tx-tritonlab #pw-change-main #pw-form span.left.error,
.tx-tritonlab #profile-edit span.left.error{
  color:#FF8A99 !important;
  -webkit-text-fill-color:#FF8A99 !important;
}

/* Strength-Indicator — Legacy: 4 Bars 66×5px mit `border:1px solid #dedede`,
   `.faded-out{opacity:.3}`. Hier in Mint mit subtiler Glow-Active-Variante. */
.tx-tritonlab #pw-change-main #pw-indicator{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  max-width:380px !important;
  margin:1rem auto !important;
  min-height:auto !important;
  padding:.4rem 0;
}
.tx-tritonlab #pw-change-main #pw-indicator .pw-ind-level{
  display:block !important;
  flex:1;
  width:auto !important;
  height:3px !important;
  background:rgba(255,255,255,.12) !important;
  border:none !important;
  transition:background .25s, box-shadow .25s !important;
}
.tx-tritonlab #pw-change-main #pw-indicator .pw-ind-level.faded-out{
  opacity:.4 !important;
}
/* Aktive Levels — JS setzt `background-color` per Inline-Style auf einen Verlaufswert
   (rot→gelb→grün im Original). Wir biegen auf Mint mit Glow um, falls Inline-Style
   eine Farbe gesetzt hat (Selektor matched alle Bars die NICHT faded-out sind). */
.tx-tritonlab #pw-change-main #pw-indicator .pw-ind-level:not(.faded-out){
  background:var(--aq) !important;
  box-shadow:0 0 8px rgba(133,255,199,.4);
}
.tx-tritonlab #pw-change-main #pw-indicator .pw-ind-level span{
  display:none !important;
}
/* Strength-Suggestion-Text — flex-basis:100% erzwingt Zeilenumbruch unter den Bars */
.tx-tritonlab #pw-change-main #pw-indicator p#suggestion{
  flex:0 0 100%;
  width:100%;
  margin:.8rem 0 0 !important;
  font-size:.78rem !important;
  text-align:center;
}
.tx-tritonlab #pw-change-main #pw-indicator p#suggestion.error{
  color:#FF8A99 !important;
  -webkit-text-fill-color:#FF8A99 !important;
  font-weight:600 !important;
}

/* Submit-Container #send-new-pw — Legacy zwingt `max-width:280px`. */
.tx-tritonlab #pw-change-main #send-new-pw{
  max-width:none !important;
  margin:1.6rem auto !important;
  text-align:center;
}
.tx-tritonlab #pw-change-main #send-new-pw .bc-connect-loader{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  font-size:1.6rem !important;
  top:auto !important;
  bottom:-2.4rem !important;
  left:50% !important;
  transform:translateX(-50%);
}

/* "Waiting for valid email address 👇" — JS-injiziert mit Klasse `.label-error-fe-email`
   (Clone von .label-error in tarb_password.js Z. 283–286). Statt Legacy-Rot-auf-Weiß
   hier dezent gelb-warning-Look auf Dark-BG. */
.tx-tritonlab #profile-edit .label-error,
.tx-tritonlab .label-error-fe-email{
  display:block !important;
  margin:1rem auto 0 !important;
  max-width:380px !important;
  font-size:.82rem !important;
  font-weight:600 !important;
  letter-spacing:.04em;
  color:#FFD86B !important;
  -webkit-text-fill-color:#FFD86B !important;
  text-align:center;
  transition:opacity .3s ease-out !important;
}

/* Server-Side Error-Box (.errorUpdate) — Legacy: rotes Box-Highlight auf weißem BG.
   Hier: dezent rot-getintete Glas-Karte, weißer Text + roter Akzent-Border. */
.tx-tritonlab .errorUpdate{
  padding:1rem 1.2rem !important;
  margin:1.4rem auto !important;
  max-width:500px !important;
  background:rgba(255,138,153,.08) !important;
  border:1px solid rgba(255,138,153,.4) !important;
  color:#FF8A99 !important;
  -webkit-text-fill-color:#FF8A99 !important;
  font-weight:400 !important;
  font-size:.92rem;
  text-align:center;
}
.tx-tritonlab .successUpdate{
  padding:1rem 1.2rem !important;
  margin:1.4rem auto !important;
  max-width:500px !important;
  background:rgba(133,255,199,.08) !important;
  border:1px solid rgba(133,255,199,.4) !important;
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}

/* T&C / GDPR — Custom-Checkboxen wie Permalogin (Mint-Fill bei :checked). */
.tx-tritonlab #terms-and-conditions,
.tx-tritonlab #gdpr{
  max-width:500px;
  margin:1.4rem auto !important;
  padding:0 1rem;
  text-align:left;
  display:flex !important;
  align-items:flex-start;
  gap:.7rem;
  height:auto !important;
}
.tx-tritonlab #terms-and-conditions input[type="checkbox"],
.tx-tritonlab #gdpr input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  flex:0 0 16px;
  width:16px !important;
  height:16px !important;
  margin:.2rem 0 0 !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.5) !important;
  border-radius:0 !important;
  cursor:pointer;
  position:relative;
  transition:border-color .2s,background .2s;
}
.tx-tritonlab #terms-and-conditions input[type="checkbox"]:checked,
.tx-tritonlab #gdpr input[type="checkbox"]:checked{
  background:var(--aq) !important;
  border-color:var(--aq) !important;
}
.tx-tritonlab #terms-and-conditions input[type="checkbox"]:checked::after,
.tx-tritonlab #gdpr input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  inset:2px;
  background:var(--bp);
}
.tx-tritonlab #terms-and-conditions label,
.tx-tritonlab #gdpr label{
  display:inline-block !important;
  margin:0 !important;
  padding-top:0;
  font-size:.82rem !important;
  line-height:1.5;
  color:rgba(255,255,255,.7) !important;
  -webkit-text-fill-color:rgba(255,255,255,.7) !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  cursor:pointer;
  text-align:left;
}
.tx-tritonlab #terms-and-conditions label p,
.tx-tritonlab #gdpr label p{
  display:inline !important;
  margin:0 !important;
  font-size:.82rem !important;
  color:rgba(255,255,255,.7) !important;
  -webkit-text-fill-color:rgba(255,255,255,.7) !important;
  text-align:left !important;
  max-width:none;
}
/* Links innerhalb der Disclaimer-Texte (Terms & Conditions / Privacy Policy). */
.tx-tritonlab #terms-and-conditions label a,
.tx-tritonlab #gdpr label a{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  text-decoration:underline;
  text-decoration-color:rgba(133,255,199,.4);
}

/* Email-Validation- und Registration-Successful-Notifications. */
.tx-tritonlab #email-validation-notification,
.tx-tritonlab #registration-successful{
  max-width:500px !important;
  margin:6vh auto !important;
  padding:2rem;
  text-align:center;
  background:rgba(3,47,79,.45);
  border:1px solid rgba(133,255,199,.18);
}
.tx-tritonlab #email-validation-notification i.fal,
.tx-tritonlab #registration-successful i.fal{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}

/* ═══════════════════════════════════════════════
   REGISTER-PATCH — robuste Override-Pfade über Klasse + ID-Pfad,
   falls die längeren `#profile-edit ...`-Selektoren durch TYPO3- oder Browser-
   Cache nicht greifen. `.fe-register-data` ist die Markup-Klasse auf jedem Input.
   Legacy-Selektor `.tx-tritonlab #profile-edit label{color:#ce5828}` (orange Text
   in den T&C/GDPR-Labels) wird hier 1:1 mit gleichem Selektor + !important neutralisiert.
   ═══════════════════════════════════════════════ */

/* Inputs — Klasse `.fe-register-data` ist auf #fe_email + #pw + #pwr direkt am Markup. */
.tx-tritonlab input.fe-register-data,
.tx-tritonlab #fe_email,
.tx-tritonlab #pw,
.tx-tritonlab #pwr{
  width:100% !important;
  max-width:380px !important;
  margin:.6rem auto !important;
  padding:.9rem 1rem !important;
  background-color:rgba(1,24,39,.6) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-family:var(--b) !important;
  font-size:1rem !important;
  text-align:left;
  box-shadow:none !important;
  outline:0;
  transition:border-color .2s;
}
.tx-tritonlab input.fe-register-data::placeholder,
.tx-tritonlab #fe_email::placeholder,
.tx-tritonlab #pw::placeholder,
.tx-tritonlab #pwr::placeholder{
  color:rgba(255,255,255,.4) !important;
  -webkit-text-fill-color:rgba(255,255,255,.4) !important;
  opacity:1;
}
.tx-tritonlab input.fe-register-data:focus,
.tx-tritonlab #fe_email:focus,
.tx-tritonlab #pw:focus,
.tx-tritonlab #pwr:focus{
  border-color:var(--aq) !important;
}
/* Autofill — gleicher Box-Shadow-Trick wie im Login-Block. */
.tx-tritonlab input.fe-register-data:-webkit-autofill,
.tx-tritonlab input.fe-register-data:-webkit-autofill:hover,
.tx-tritonlab input.fe-register-data:-webkit-autofill:focus,
.tx-tritonlab input.fe-register-data:-webkit-autofill:active,
.tx-tritonlab #fe_email:-webkit-autofill,
.tx-tritonlab #pw:-webkit-autofill,
.tx-tritonlab #pwr:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px rgba(1,24,39,.95) inset !important;
  box-shadow:0 0 0 1000px rgba(1,24,39,.95) inset !important;
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  transition:background-color 9999s ease-in-out 0s;
}

/* Legacy-Label-Override: `tarb_triton_lab` Z. 2347 setzt `.tx-tritonlab #profile-edit label
   { color:#ce5828 }` (orange). Hier 1:1 neutralisieren — alle Form-Labels weiß. */
.tx-tritonlab #profile-edit label,
.tx-tritonlab #profile-edit label p,
.tx-tritonlab #profile-edit #terms-and-conditions label,
.tx-tritonlab #profile-edit #gdpr label,
.tx-tritonlab #profile-edit #terms-and-conditions label p,
.tx-tritonlab #profile-edit #gdpr label p,
.tx-tritonlab #profile-edit #terms-and-conditions label *,
.tx-tritonlab #profile-edit #gdpr label *{
  color:rgba(255,255,255,.72) !important;
  -webkit-text-fill-color:rgba(255,255,255,.72) !important;
}
/* T&C/Privacy-Links mint */
.tx-tritonlab #profile-edit #terms-and-conditions a,
.tx-tritonlab #profile-edit #gdpr a{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
}

/* ─── No-Radius Designprinzip: Lab hat keine abgerundeten Ecken ───
   Übersteuert sowohl meine eigenen kleinen Radien (4–6px) im Block oben
   als auch eventuelle Bestands-Radien aus tarb_triton_lab-*.css.
   Scope auf .tx-tritonlab Plugin-Wrapper, der das gesamte Eval-Markup umschließt.
   Keine 50%-Radien (Avatare etc.) im Lab-CSS gefunden → sicher pauschal anzuwenden. */
.tx-tritonlab,
.tx-tritonlab *,
.tx-tritonlab *::before,
.tx-tritonlab *::after{
  border-radius:0 !important;
}


/* ════════════════════════════════════════════════
   ACCOUNT-HUB — Lab-Startseite UID 2 (brief.md 2026-04-24)
   Aufschlag auf .hero/.hero-vid/.hero-ct/.hero-t/.hero-sub/.hero-btns
   aus global.css — global.css setzt KEINE font-size für .hero-t,
   das ist Page-CSS-Job (vgl. method.css, toolkit.css).
   .hero-sub und .hero-btns starten in global.css mit opacity:0
   (für GSAP-Reveal auf triton.de) — die Lab-Startseite reveal-frei
   anzeigen, daher opacity:1 erzwingen.
   ════════════════════════════════════════════════ */
.lab-home-hero .hero-ct{padding:0 5vw 12vh;max-width:1100px}
.lab-home-hero .hero-t{font-size:clamp(3rem,6.5vw,6rem);max-width:18ch}
.lab-home-hero .hero-sub{opacity:1}
.lab-home-hero .hero-btns{opacity:1}
.lab-home-hero .hero-foot{margin-top:2.5rem;font-size:1rem;opacity:.72}
.lab-home-hero .hero-foot a{color:var(--aq);text-decoration:none;border-bottom:1px solid rgba(255,182,139,.4)}
.lab-home-hero .hero-foot a:hover{border-bottom-color:var(--aq)}
.lab-home-hero abbr{text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.4);cursor:help}

/* Mobile (≤1100px): Lab-Home-Hero darf bei zu viel Inhalt (Eyebrow + Title + Sub + 2 Buttons +
   Foot-Link) nach unten wachsen — sonst läuft der Inhalt aus dem 100dvh-Container oben heraus
   und der Eyebrow überlappt den Header. Padding-Top hält den Eyebrow vom Header weg, plus
   Kompensation für `main#main-start{margin-top:-51px}` aus dem Burger-Breakpoint. */
@media(max-width:1100px){
  .lab-home-hero{
    height:auto;
    min-height:100dvh
  }
  .lab-home-hero .hero-ct{
    padding-top:9rem
  }
}


/* ════════════════════════════════════════════════
   PROFILE-SHOW (Show.html) — Dark/Mint-Reskin
   Markup-Quellen (tritonlab Profile/Show.html):
     • h1.profile-headlines                     "Your Profile"
     • ul.profile-submenu li .button.button-inverted   Edit + Change-Password Buttons
     • #premium-fe-user-active                   Premium-Account-Badge (Legacy: gelb)
     • h2#profile-stored-data                    "Stored data" Sub-Heading
     • table#profile-data                        Daten-Tabelle (10–13 Zeilen)
       - tr/th = Label, tr/td = Wert (mit Inline-Style color:#999;font-style:italic
         auf username/email-Spans → muss überschrieben werden)
   Strategie: Tabelle bleibt semantisch, wird via display:grid zu 2-Spalten-Cardgrid.
   ════════════════════════════════════════════════ */

/* Page-Container */
.tx-tritonlab #profile-data,
.tx-tritonlab #profile-stored-data,
.tx-tritonlab #premium-fe-user-active,
.tx-tritonlab .profile-submenu,
.tx-tritonlab .profile-headlines{max-width:920px;margin-left:auto;margin-right:auto}

/* Headline "Your Profile" */
.tx-tritonlab .profile-headlines{
  font-family:var(--h);
  font-weight:900;
  font-size:clamp(2rem,4.4vw,3rem);
  letter-spacing:-.015em;
  color:var(--w);
  text-align:center;
  margin:0 0 2.4rem;
  line-height:1.1;
}

/* Action-Buttons-Bar (Edit / Change Password) */
.tx-tritonlab .profile-submenu{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  padding:0;
  margin:0 auto 2.8rem;
}
.tx-tritonlab .profile-submenu li{margin:0;padding:0}

/* Premium-Account-Badge — Mint-Outline statt grellem Gelb, Stern-Icon davor */
.tx-tritonlab #premium-fe-user-active{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  max-width:480px;
  margin:0 auto 3rem;
  padding:1rem 1.4rem;
  background:rgba(133,255,199,.06);
  border:1px solid var(--aq);
  color:var(--aq);
  font-family:var(--h);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  -webkit-text-fill-color:var(--aq);
}
.tx-tritonlab #premium-fe-user-active::before{
  content:"\f005"; /* fa-star */
  font-family:"Font Awesome 5 Pro","Font Awesome 5 Free","Font Awesome",sans-serif;
  font-weight:900;
  font-size:.9rem;
  letter-spacing:0;
}

/* "Stored data" Sub-Heading — Eyebrow-Stil (mint, uppercase, getrennt durch dünne Linie) */
.tx-tritonlab #profile-stored-data{
  font-family:var(--h);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--aq);
  text-align:center;
  margin:3rem auto 2rem;
  padding-top:2.4rem;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Daten-Tabelle in 2-Spalten-Card-Grid umwandeln (table-Markup unangetastet) */
.tx-tritonlab #profile-data{
  width:100%;
  border:1px solid rgba(255,255,255,.08);
  border-collapse:collapse;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 auto 3rem;
}
.tx-tritonlab #profile-data tbody{display:contents}
.tx-tritonlab #profile-data tr{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:1.2rem 1.4rem;
  border-right:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background-color .2s;
}
.tx-tritonlab #profile-data tr:nth-child(2n){border-right:none}
.tx-tritonlab #profile-data tr:hover{background:rgba(133,255,199,.04)}
.tx-tritonlab #profile-data th{
  display:block;
  font-family:var(--h);
  font-weight:700;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  text-align:left;
  padding:0;
}
.tx-tritonlab #profile-data td{
  display:block;
  font-family:var(--b);
  font-size:1rem;
  line-height:1.5;
  color:var(--w);
  text-align:left;
  padding:0;
  word-break:break-word;
}
/* Inline-Styles im Markup überschreiben (color:#999;font-style:italic auf username/email,
   color:#000 auf company, color:#fc0 auf Star-Icon im Premium-Retailer-Block) */
.tx-tritonlab #profile-data td span[style],
.tx-tritonlab #profile-data td strong span[style]{
  color:var(--w) !important;
  font-style:normal !important;
  -webkit-text-fill-color:var(--w) !important;
}
.tx-tritonlab #profile-data td i[style*="fc0"]{color:var(--aq) !important}

/* Externe Website-Links innerhalb der Daten-Cells — Mint */
.tx-tritonlab #profile-data td a{
  color:var(--aq) !important;
  -webkit-text-fill-color:var(--aq) !important;
  text-decoration:underline;
  text-decoration-color:rgba(133,255,199,.4);
  text-underline-offset:3px;
  word-break:break-all;
}
.tx-tritonlab #profile-data td a:hover{text-decoration-color:var(--aq)}

/* Mobile: 1-Spalte */
@media (max-width:720px){
  .tx-tritonlab #profile-data{grid-template-columns:1fr}
  .tx-tritonlab #profile-data tr{border-right:none}
}

/* Flash-Messages (Erfolg/Fehler) im Profile-Scope */
.tx-tritonlab .successUpdate,
.tx-tritonlab .errorUpdate{
  display:block;
  max-width:920px;
  margin:0 auto 2rem;
  padding:1rem 1.4rem;
  font-family:var(--b);
  font-size:.95rem;
  line-height:1.5;
}
.tx-tritonlab .successUpdate{
  background:rgba(133,255,199,.08);
  border-left:3px solid var(--aq);
  color:var(--aq);
}
.tx-tritonlab .errorUpdate{
  background:rgba(255,138,153,.08);
  border-left:3px solid #FF8A99;
  color:#FF8A99;
}

/* ── PROFILE-EDIT (Edit.html) — textarea (Adresse) wurde im Register-Reskin nicht erfasst.
   Gleiches Visual wie die Inputs darüber, aber mehrzeilig + resize:vertical. */
.tx-tritonlab #profile-edit textarea{
  width:100% !important;
  max-width:380px !important;
  margin:.6rem auto !important;
  padding:.9rem 1rem !important;
  background:rgba(1,24,39,.6) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:var(--w) !important;
  -webkit-text-fill-color:var(--w) !important;
  font-family:var(--b) !important;
  font-size:1rem !important;
  line-height:1.5 !important;
  text-align:left;
  box-shadow:none !important;
  outline:0;
  display:block;
  resize:vertical;
  min-height:6rem;
  transition:border-color .2s;
}
.tx-tritonlab #profile-edit textarea::placeholder{
  color:rgba(255,255,255,.4) !important;
  -webkit-text-fill-color:rgba(255,255,255,.4) !important;
}
.tx-tritonlab #profile-edit textarea:focus{
  outline:none;
  border-color:var(--aq) !important;
}

/* Edit-Form: <p>-Wrapper haben Browser-Default-Margin → vertikal kompakter */
.tx-tritonlab #profile-edit > p{
  margin:0;
  text-align:center;
}

/* Submit-Container ("Save"-Button) und Back-to-profile zentrieren mit Abstand */
.tx-tritonlab #update-profile-btn{
  margin-top:2rem;
  text-align:center;
}
.tx-tritonlab .back-to-profile{
  display:inline-flex;
  margin-top:1rem;
}

/* ═══════════════════════════════════════════════
   Lab-Header: Account-Shortcuts unter Login-CTA
   Zweite Reihe in .nav-right (nur sichtbar wenn eingeloggt) — Look 1:1 wie .nav-lang.
   .nav-right wird zu Spalte; .nav-right-top hält die Original-Reihe; .nav-user liegt darunter.
   Mobile-Hide ist bereits oben im @media(max-width:1100px)-Block.
   ═══════════════════════════════════════════════ */
.nav .nav-right{flex-direction:column;align-items:flex-end;gap:.45rem}
.nav .nav-right-top{display:flex;align-items:center;gap:2rem}
.nav .nav-user{display:flex;align-items:center;gap:.45rem;
  font-family:var(--h);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nav .nav-user-link{opacity:.45;transition:opacity .25s,color .25s}
.nav .nav-user-link:hover{opacity:1;color:var(--aq)}
.nav .nav-user-sep{opacity:.25;user-select:none}