/*
  Triluma Global Styles v2.5 — CLEAN BASE (no tail overrides)
  ------------------------------------------------------------
  • Default: LIGHT (OS Dark only when data-theme-state="auto"; manual .theme-dark)
  • Fonts: Merriweather (variable, 300–700) + Roboto (400/500/700/900) — local WOFF2
  • Built for Elementor/EA: classes under Advanced → CSS-Klassen
*/


/************************************************************
 * 1) TOKENS
 ************************************************************/
:root {
  /* Colors */
  --tri-ink:       #111827;
  --tri-bg:        #ffffff;
  --tri-surface:   #f8fafc;
  --tri-surface-2: #f1f5f9;
  --tri-text:      #111827;
  --tri-muted:     #475569;
  --tri-border:    #e2e8f0; /* decorative */
  --tri-ui-border: #6b7280; /* interactive (≥3:1 on white) */

  /* Brand */
  --tri-blue:   #2563eb;
  --tri-accent: #3BA2C4;     /* Claim + Primary Button */
  --tri-accent-contrast: #2C7A93; /* higher contrast option */

  /* Radius & shadow */
  --tri-radius: 16px;
  --tri-radius-sm: 10px;
  --tri-shadow: 0 10px 30px rgba(0,0,0,.06);

  /* Type scale (base) */
  --tri-fs-xs: 12px;
  --tri-fs-sm: 14px;
  --tri-fs:     16px; /* body */
  --tri-fs-lg:  18px;
  --tri-fs-xl:  22px;

  /* Spacing */
  --tri-space-1: 6px;
  --tri-space-2: 10px;
  --tri-space-3: 14px;
  --tri-space-4: 18px;
  --tri-space-5: 22px;
  --tri-space-6: 28px;
  --tri-space-7: 36px;
  --tri-space-8: 48px;
  --tri-space-9: 64px;

  /* Sticky anchor offset (header height etc.) */
  --tri-sticky-offset: 90px;
  
  /* SAFETY FALLBACKS */
	body{ color:var(--tri-text, #111827) }
	a{ color:var(--tri-blue, #2563eb); text-decoration:none }
	a:hover{ text-decoration:underline }
	h1,h2,h3,h4,h5,h6{ color:var(--tri-accent, #3BA2C4) }
	.btn-primary{ background:var(--tri-accent, #3BA2C4); color:#fff }
	.btn-secondary{ background:#fff; color:var(--tri-ink, #111827); border:1px solid var(--tri-ui-border, #6b7280) }
	.btn-ghost{ background:transparent; color:var(--tri-ink, #111827); border:1px solid var(--tri-ui-border, #6b7280) }
	
  /* Admin bar adjustments */
	body.admin-bar { --tri-sticky-offset: 122px; }
	@media (max-width: 782px) { body.admin-bar { --tri-sticky-offset: 136px; }}

/************************************************************
 * 2) LOCAL FONTS (/wp-content/uploads/fonts/)
 ************************************************************/
/* ausgelagert in triluma-fonts.css unter /wp-content/uploads/fonts/  */
/* Roboto static cuts */
@font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-400italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-500italic.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-700italic.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-900italic.woff2') format('woff2'); font-weight:900; font-style:italic; font-display:swap; }
/* Merriweather variable (restricted to 300–700) */
@font-face { font-family: 'Merriweather'; src: url('/wp-content/uploads/fonts/Merriweather.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face { font-family: 'Merriweather'; src: url('/wp-content/uploads/fonts/MerriweatherItalic.woff2') format('woff2'); font-weight:300 700; font-style:italic; font-display:swap; }

/************************************************************
 * 3) GLOBAL BASE
 ************************************************************/
html { scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--tri-bg);
  color: var(--tri-text);
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: var(--tri-fs);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; border: 0; }

/* Headings: Merriweather, fixed sizes, max weight 700 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
  font-weight: 400;
  color: var(--tri-accent);
  margin: 0 0 var(--tri-space-3) 0;
  letter-spacing: -0.1px;
  font-optical-sizing: auto;
  font-synthesis: none;
}
/* Fixed scale: Mobile / Tablet / Desktop */
h1 { font-size: 22px; line-height: 1.15; }
h2 { font-size: 18px; line-height: 1.20; }
h3 { font-size: 16px; line-height: 1.25; }
h4 { font-weight: 400; font-size: 14px; line-height: 1.30; }

@media (min-width: 768px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  h4 { font-weight: 400; font-size: 15px; line-height: 1.30; }
}
@media (min-width: 1024px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }
  h4 { font-weight: 400; font-size: 18px; line-height: 1.30;}
}

p.lead { color: #334155; font-size: var(--tri-fs-lg); max-width: 65ch; }

/* Links & focus */
a { color: var(--tri-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tri-blue); outline-offset: 2px; }

/* A11y & anchors */
.anchor-target { scroll-margin-top: var(--tri-sticky-offset); }
.visually-hidden{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/************************************************************
 * 4) LAYOUT HELPERS
 ************************************************************/
.tri-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section      { padding: var(--tri-space-3) 0; }
.section.alt  { background: var(--tri-surface); }
@media (max-width: 1024px) { .section { padding: var(--tri-space-3) 0; } }
@media (max-width: 767px)  { .section { padding: var(--tri-space-2) 0; } }

/* Grid helpers */
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--tri-space-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width:1024px){ .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:767px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/************************************************************
 * 5) COMPONENTS — CARDS
 ************************************************************/
.tri-card {
  background: #fff;
  border: 1px solid var(--tri-border);
  border-radius: var(--tri-radius);
  box-shadow: var(--tri-shadow);
  padding: var(--tri-space-5);
  transition: background .3s ease, color .3s ease;
  height: 100%;
  display: flex; flex-direction: column;
}
.tri-card__media { overflow: hidden; border-radius: calc(var(--tri-radius) + 26px); }
.tri-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tri-card__body { flex: 1; }
.tri-card__footer { margin-top: auto; }

.tri-card-multimedia {
  background: #fff;
  border: 1px solid var(--tri-border);
  border-radius: var(--tri-radius);
  box-shadow: var(--tri-shadow);
  padding: var(--tri-space-5);
  transition: background .3s ease, color .3s ease;
  height: 100%;
  display: flex; flex-direction: column;
}
.tri-card-multimedia__media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--tri-radius) - 6px); }
.tri-card-multimedia__media img { width: 100%; height: 100%; object-fit: cover; }
.tri-card-multimedia__body { flex: 1; }
.tri-card-multimedia__footer { margin-top: auto; }


/* Card Titles */
.tri-card__title { font-family: 'Merriweather', Georgia, serif; color: var(--tri-accent); margin: 0 0 var(--tri-space-3) 0; font-weight: 400; }
.tri-card__title        { font-size: 16px; }
.tri-card__title--sm    { font-size: 15px; color: var(--tri-accent-contrast); }
.tri-card__title--lg    { font-size: 18px; }
@media (min-width: 768px)  {
  .tri-card__title     { font-size: 18px; }
  .tri-card__title--sm { font-size: 16px; }
  .tri-card__title--lg { font-size: 22px; }
}
@media (min-width: 1024px) {
  .tri-card__title     { font-size: 22px; }
  .tri-card__title--sm { font-size: 18px; }
  .tri-card__title--lg { font-size: 26px; }
}
.tri-card__title--muted { color: var(--tri-muted); font-weight: 400; font-size: var(--tri-fs); margin-top: -4px; }

/* Mini Cards */
.tri-card--mini { padding: var(--tri-space-3); border-radius: var(--tri-radius-sm); font-size: var(--tri-fs-sm); }
.tri-card--mini .tri-card__title { font-size: var(--tri-fs-lg); margin-bottom: var(--tri-space-1); }
.tri-card--mini .tri-card__body { font-size: var(--tri-fs-sm); line-height: 1.4; }


/************************************************************
 * 6) KPI, BUTTONS, FORMS
 ************************************************************/
.tri-kpi { background: #fff; border: 1px solid var(--tri-border); border-radius: 14px; padding: 14px; }

.btn { display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; line-height:1; transition: filter .15s ease, background .15s ease, color .15s ease; }
.btn[disabled], .btn.disabled { opacity:.6; pointer-events:none; }

/* Primary = Claim color */
.btn-primary { background: var(--tri-accent); color:#fff; }
.btn-primary:hover,
.btn-primary:focus { background: var(--tri-accent); color: #fff; text-decoration: underline; filter: none; }
.btn-primary:focus-visible { outline: 2px solid #0b6b84; outline-offset: 2px; }

.btn-secondary { background:#fff; color:var(--tri-ink); border:1px solid var(--tri-ui-border); }
.btn-secondary:hover { background: var(--tri-surface); }
.btn-ghost { background:transparent; border:1px solid var(--tri-ui-border); color:var(--tri-ink); }
.btn-ghost:hover { background: var(--tri-surface); }

#tri-to-top { position:fixed; right:18px; bottom:18px; background:var(--tri-blue); color:#fff; border:none; border-radius:999px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; box-shadow:var(--tri-shadow); cursor:pointer; opacity:0; transition:opacity .2s ease; }

/* 6) FORMS — SCOPED (statt global) */
/* Eigene Formulare: Container/Widget bekommt Klasse .tri-form */
.tri-form input[type="text"],
.tri-form input[type="email"],
.tri-form input[type="number"],
.tri-form input[type="tel"],
.tri-form textarea,
.tri-form select{
  width:100%; padding:12px; border:1px solid var(--tri-ui-border);
  border-radius: var(--tri-radius-sm); background:#fff; color:var(--tri-text); font:inherit;
}
/* Elementor-Formularfelder angleichen */
.elementor .elementor-form .elementor-field,
.elementor .elementor-form .elementor-field-textual{
  width:100%; padding:12px; border:1px solid var(--tri-ui-border);
  border-radius: var(--tri-radius-sm); background:#fff; color:var(--tri-text); font:inherit;
}
.elementor .elementor-form .elementor-field:focus{ outline:2px solid var(--tri-blue); outline-offset:1px }
.elementor .elementor-form .elementor-field-label{ color:var(--tri-muted); font-size:var(--tri-fs-sm); margin:6px 0 4px }
/* Globale Fokus- und Label-Regeln (harmlos für Embeds) */
input:focus, textarea:focus, select:focus { outline: 2px solid var(--tri-blue); outline-offset: 1px; }
label { display:block; margin:6px 0 4px 0; color: var(--tri-muted); font-size: var(--tri-fs-sm); }

/************************************************************
 * 7) CLAIMS & SUBLINES
 ************************************************************/
.tri-claim { margin-bottom: var(--tri-space-6); }
/* Claim-Headline: 18 / 26 / 40 */
.tri-claim__headline { font-family:'Merriweather',Georgia,serif; font-weight:700; color: var(--tri-accent); line-height:1.15; font-size: 18px; }
@media (min-width: 768px)  { .tri-claim__headline { font-size: 26px; } }
@media (min-width: 1024px) { .tri-claim__headline { font-size: 38px; } }

.tri-claim__lines { display:grid; gap:4px; }
/* Claim-Einzelzeilen: 16 / 20 / 26 */
.tri-claim__line { font-family:'Merriweather',Georgia,serif; font-weight:700; color: var(--tri-accent); line-height:1.22; font-size: 16px; }
@media (min-width: 768px)  { .tri-claim__line { font-size: 20px; } }
@media (min-width: 1024px) { .tri-claim__line { font-size: 26px; } }

.tri-claim__footnote { font-size: var(--tri-fs-sm); color: var(--tri-muted); }
.tri-subline--kmu, .tri-subline--employee, .tri-subline__employee { color: var(--tri-muted); max-width: 75ch; }
/* Subline Mitarbeitende: 12 / 14 / 18 */
.tri-subline--employee, .tri-subline__employee { font-size: 12px; line-height: 1.5; }
@media (min-width: 768px)  { .tri-subline--employee, .tri-subline__employee { font-size: 14px; } }
@media (min-width: 1024px) { .tri-subline--employee, .tri-subline__employee { font-size: 18px; } }

.tri-badge { display:inline-block; border:1px solid var(--tri-border); border-radius:999px; padding:6px 10px; font-size: var(--tri-fs-sm); color: var(--tri-ink); background:#fff; }

/************************************************************
 * 8) GRID AUTO (equal height per row)
 ************************************************************/
.tri-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--tri-space-3);
  align-items: stretch;
}
.tri-grid-auto > * { height: 100%; }
.tri-grid-auto .tri-card { height: 100%; display:flex; flex-direction:column; }
@media (max-width: 480px) { .tri-grid-auto { grid-template-columns: 1fr; } }

/************************************************************
 * 9) UTILS
 ************************************************************/
.muted { color: var(--tri-muted); }
.center { text-align: center; }
.right  { text-align: right; }
.max-60 { max-width: 60ch; }
.max-75 { max-width: 75ch; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--tri-space-1) !important; }
.mt-2 { margin-top: var(--tri-space-2) !important; }
.mt-3 { margin-top: var(--tri-space-3) !important; }
.mt-4 { margin-top: var(--tri-space-4) !important; }
.mt-5 { margin-top: var(--tri-space-5) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--tri-space-1) !important; }
.mb-2 { margin-bottom: var(--tri-space-2) !important; }
.mb-3 { margin-bottom: var(--tri-space-3) !important; }
.mb-4 { margin-bottom: var(--tri-space-4) !important; }
.mb-5 { margin-bottom: var(--tri-space-5) !important; }
.p-0  { padding: 0 !important; }
.p-1  { padding: var(--tri-space-1) !important; }
.p-2  { padding: var(--tri-space-2) !important; }
.p-3  { padding: var(--tri-space-3) !important; }
.p-4  { padding: var(--tri-space-4) !important; }
.p-5  { padding: var(--tri-space-5) !important; }

/************************************************************
 * 10) DARK MODE (default light)
 ************************************************************/
/* Auto-Dark only when html[data-theme-state="auto"] */
@media (prefers-color-scheme: dark) {
  html[data-theme-state="auto"] { color-scheme: dark; }
  html[data-theme-state="auto"] body { background: #0f172a; color: #e2e8f0; }
  html[data-theme-state="auto"] .section.alt { background: #1e293b; }
  html[data-theme-state="auto"] .tri-card { background: #1e293b; border-color: #334155; color: #e2e8f0; }
  html[data-theme-state="auto"] .tri-card__title--muted { color: #94a3b8; }
  html[data-theme-state="auto"] .btn-primary { background: var(--tri-accent); color: #0f172a; }
  html[data-theme-state="auto"] .btn-secondary { background: transparent; color: #e2e8f0; border-color: #475569; }
  html[data-theme-state="auto"] .btn-ghost { color: #e2e8f0; border-color: #475569; }
  html[data-theme-state="auto"] input[type="text"],
  html[data-theme-state="auto"] input[type="email"],
  html[data-theme-state="auto"] input[type="number"],
  html[data-theme-state="auto"] input[type="tel"],
  html[data-theme-state="auto"] textarea,
  html[data-theme-state="auto"] select { background: #0f172a; color: #e2e8f0; border-color: #334155; }
  html[data-theme-state="auto"] label { color: #94a3b8; }
}

/* Manual dark scope */
.theme-dark {
  color-scheme: dark;
  --tri-bg:        #0b0f14;
  --tri-surface:   #0f1720;
  --tri-surface-2: #111827;
  --tri-text:      #e5e7eb;
  --tri-ink:       #e5e7eb;
  --tri-muted:     #94a3b8;
  --tri-border:    #1f2937;
  --tri-ui-border: #64748b;
  --tri-shadow:    0 10px 30px rgba(0,0,0,.35);
  --tri-accent:    #66c3df;
}
.theme-dark, .theme-dark body { background: var(--tri-bg); color: var(--tri-text); }
.theme-dark .section.alt { background: var(--tri-surface); }
.theme-dark .tri-card, .theme-dark .tri-kpi { background: var(--tri-surface); border-color: var(--tri-border); color: var(--tri-text); }
.theme-dark .btn-secondary, .theme-dark .btn-ghost { background: transparent; color: var(--tri-text); border-color: var(--tri-ui-border); }
.theme-dark a { color: #7cc7ff; }

/************************************************************
 * 11) PRINT
 ************************************************************/
@media print {
  a { text-decoration: underline; }
  .btn, #tri-to-top { display: none !important; }
  .tri-card, .tri-kpi { box-shadow: none; }
}


/************************************************************
 * 12) ELEMENTOR OVERRIDES
 ************************************************************/

/* a) Button-Bridge — nur für markierte Widgets */
.elementor .elementor-widget-button.tri-btn{background:transparent;border:0;padding:0}
.elementor .elementor-widget-button.tri-btn .elementor-button{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:600;line-height:1;border:1px solid transparent}

/* Varianten */
.elementor .elementor-widget-button.tri-btn-primary .elementor-button{background:var(--tri-accent, #3BA2C4);color:#fff}
.elementor .elementor-widget-button.tri-btn-primary .elementor-button:hover,
.elementor .elementor-widget-button.tri-btn-primary .elementor-button:focus{background:var(--tri-accent, #3BA2C4);color:#fff;text-decoration:underline}

.elementor .elementor-widget-button.tri-btn-secondary .elementor-button{background:#fff;color:var(--tri-ink, #111827);border-color:var(--tri-ui-border, #6b7280)}
.elementor .elementor-widget-button.tri-btn-secondary .elementor-button:hover{background:var(--tri-surface, #f8fafc);text-decoration:none}

.elementor .elementor-widget-button.tri-btn-ghost .elementor-button{background:transparent;color:var(--tri-ink, #111827);border-color:var(--tri-ui-border, #6b7280)}
.elementor .elementor-widget-button.tri-btn-ghost .elementor-button:hover{background:var(--tri-surface, #f8fafc)}

/* Fokus sichtbar lassen */
.elementor .elementor-widget-button.tri-btn .elementor-button:focus-visible{outline:2px solid #0b6b84;outline-offset:2px}



/* =================================================
   TRILUMA – GLOBAL LOGIN MODAL (auth-helper)
   ================================================= */

.tri-vc-overlay-login {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  z-index: 999999;
}

.tri-vc-overlay-login.tri-vc-overlay-visible {
  display: flex;
}

/* Dialog */
.tri-vc-overlay-login .tri-vc-overlay-dialog {
  background: var(--tri-bg);
  color: var(--tri-text);
  border-radius: var(--tri-radius);
  box-shadow: var(--tri-shadow);
  padding: var(--tri-space-5);
  width: 92%;
  max-width: 420px;
  font-family: 'Roboto', system-ui, sans-serif;
}

/* Titel */
.tri-vc-overlay-login h3 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: var(--tri-fs-lg);
  font-weight: 500;
  color: var(--tri-accent);
  margin: 0 0 var(--tri-space-2);
}

/* Text */
.tri-vc-overlay-login p {
  font-size: var(--tri-fs-sm);
  color: var(--tri-muted);
  margin-bottom: var(--tri-space-3);
}

/* Input */
.tri-vc-overlay-login input.tri-login-code {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--tri-radius-sm);
  border: 1px solid var(--tri-ui-border);
  font-size: 16px;
  letter-spacing: 0.08em;
}

.tri-vc-overlay-login input.tri-login-code:focus {
  outline: 2px solid var(--tri-accent);
  outline-offset: 1px;
}

/* Checkbox */
.tri-vc-overlay-login .tri-login-remember {
  margin-top: var(--tri-space-2);
  font-size: var(--tri-fs-sm);
  color: var(--tri-muted);
}

/* Fehler */
.tri-vc-overlay-login .tri-login-error {
  margin-top: var(--tri-space-2);
  font-size: var(--tri-fs-sm);
  color: #b91c1c;
}

/* Actions */
.tri-vc-overlay-login .tri-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--tri-space-2);
  margin-top: var(--tri-space-4);
}

/* Buttons */
.tri-vc-overlay-login button {
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--tri-ui-border);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}

.tri-vc-overlay-login button.tri-login-submit {
  background: var(--tri-accent);
  border-color: var(--tri-accent);
  color: #fff;
}

.tri-vc-overlay-login button:hover {
  filter: brightness(0.95);
}