/* ──────────────────────────────────────────────────────────────────────────
   TRB Ausbau GmbH — Global Styles
   1:1 Transfer aus der Live-Seite (Elementor-Kit-43 Tokens + Custom-Styles).
   Jede Section-Datei darf nur diese Variablen verwenden, keine Hardcodes.
   ──────────────────────────────────────────────────────────────────────── */


/* ─── Google Fonts ────────────────────────────────────────────────────── */
/* Match live site (manuelk30): CSS1 API with static weights, identisches Glyph-Rendering */
@import url('https://fonts.googleapis.com/css?family=DM+Sans:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&display=swap');


/* ─── Design Tokens ───────────────────────────────────────────────────── */
:root {

  /* Elementor-Kit Variablen (Aliases — verwendet von Inline-Section-Styles).
     Wir laden die Elementor-Kit-CSS nicht, daher hier spiegeln damit das
     1:1-Transfer-Markup nicht auf sans-serif zurückfällt. */
  --e-global-typography-primary-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --e-global-typography-text-font-family:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --e-global-typography-accent-font-family:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --e-global-typography-secondary-font-family:'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --e-global-color-primary:       #0FA099;
  --e-global-color-primary-light: #B8EDEA;
  --e-global-color-secondary:     #0D1117;
  --e-global-color-text:          #1A2330;
  --e-global-color-accent:        #E8A020;
  --e-global-color-a1b2c3d:       #0A7A74;   /* brand darker */
  --e-global-color-b2c3d4e:       #B8EDEA;   /* brand lighter */
  --e-global-color-c3d4e5f:       #E8F8F7;   /* brand subtle */
  --e-global-color-d4e5f6a:       #131B22;   /* dark secondary */
  --e-global-color-e5f6a7b:       #D1E3F0;
  --e-global-color-f6a7b8c:       #E8A020;
  --e-global-color-a7b8c9d:       #7A8A95;   /* text muted */
  --e-global-color-b8c9d0e:       #F5F7F8;   /* bg light */
  --e-global-color-c9d0e1f:       #0D1117;
  --e-global-color-d0e1f2a:       #FFFFFF;   /* card white */
  --e-global-color-e1f2a3b:       #E0E4E8;   /* border */
  --e-global-color-f2a3b4c:       #2E7D32;   /* success */
  --e-global-color-bg-light:      #F5F7F8;

  /* Brand */
  --color-brand-main:        #0FA099;  /* Teal — CTAs, Badges, Accents */
  --color-brand-darker:      #0A7A74;  /* Hover-Darker-Teal */
  --color-brand-lighter:     #B8EDEA;  /* Mint — Card-Hover-Borders */
  --color-brand-subtle:      #E8F8F7;  /* Ultra-Light Mint */
  --color-brand-alpha-15:    rgba(15, 160, 153, 0.15);   /* Badge-BG, Icon-Box */
  --color-brand-alpha-40:    rgba(15, 160, 153, 0.40);   /* Badge-Border */
  --color-brand-alpha-60:    rgba(15, 160, 153, 0.60);   /* Form-Focus Border */
  --color-brand-alpha-05:    rgba(15, 160, 153, 0.05);   /* Form-Focus BG */
  --color-brand-alpha-10:    rgba(15, 160, 153, 0.10);   /* Gradient Edge */

  /* Dark / Surfaces */
  --color-bg-dark:           #0D1117;  /* Header-scrolled, Footer */
  --color-bg-dark-secondary: #131B22;  /* Modal-Secondary */
  --color-hero-navy:         #0B1628;  /* Hero-Overlay Base */
  --color-bg-light:          #F5F7F8;  /* Neutral Light-BG */
  --color-bg-card:           #FFFFFF;

  /* Text */
  --color-text-heading:      #1A2330;
  --color-text-body:         #1A2330;
  --color-text-muted:        #7A8A95;
  --color-text-on-dark:      #FFFFFF;
  --color-text-on-dark-60:   rgba(255, 255, 255, 0.60);
  --color-text-on-dark-55:   rgba(255, 255, 255, 0.55);
  --color-text-on-dark-50:   rgba(255, 255, 255, 0.50);
  --color-text-on-dark-35:   rgba(255, 255, 255, 0.35);
  --color-text-on-dark-20:   rgba(255, 255, 255, 0.20);
  --color-text-footer-50:    rgba(26, 20, 10, 0.50);
  --color-text-footer-35:    rgba(26, 20, 10, 0.35);

  /* Borders */
  --color-border:            #E0E4E8;
  --color-border-light:      rgba(255, 255, 255, 0.06);
  --color-border-light-07:   rgba(255, 255, 255, 0.07);

  /* Semantic */
  --color-accent-gold:       #E8A020;  /* Star-Rating */
  --color-success:           #2E7D32;

  /* Overlays / Gradients */
  --overlay-dark-97:         rgba(11, 22, 40, 0.97);
  --overlay-dark-80:         rgba(11, 22, 40, 0.80);
  --overlay-dark-15:         rgba(11, 22, 40, 0.15);
  --overlay-header-scrolled: rgba(13, 17, 23, 0.96);
  --overlay-header-mobile:   rgba(13, 17, 23, 0.98);
  --gradient-hero: linear-gradient(
    135deg,
    rgba(11, 22, 40, 0.97) 0%,
    rgba(11, 22, 40, 0.80) 55%,
    rgba(15, 160, 153, 0.10) 100%
  );

  /* Typography — Families */
  --font-main:               'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Typography — Sizes */
  --font-size-h1:            clamp(38px, 6vw, 72px);
  --font-size-h2:            clamp(28px, 3.5vw, 42px);
  --font-size-h3:            17px;
  --font-size-hero-sub:      clamp(16px, 1.8vw, 20px);
  --font-size-body-intro:    18px;
  --font-size-body:          16px;
  --font-size-card-desc:     14px;
  --font-size-label:         12px;
  --font-size-label-small:   11px;
  --font-size-nav:           13px;
  --font-size-button:        14px;
  --font-size-button-sm:     13px;

  /* Typography — Weights */
  --fw-regular:              400;
  --fw-medium:               500;
  --fw-semibold:              600;
  --fw-bold:                 700;
  --fw-extrabold:            800;

  /* Typography — Spacing */
  --ls-h1:                   -1.5px;
  --ls-h2:                   -1px;
  --ls-h3:                   -0.5px;
  --ls-accent:               0.3px;
  --ls-uppercase:            0.08em;
  --ls-uppercase-tight:      0.05em;

  --lh-h1:                   1.1;
  --lh-h2:                   1.15;
  --lh-h3:                   1.25;
  --lh-body:                 1.75;
  --lh-tight:                1.4;

  /* Layout */
  --max-width:               1200px;
  --section-padding:         100px 60px;
  --section-padding-mobile:  60px 24px;
  --container-padding:       0 60px;
  --container-padding-mobile:0 24px;
  --header-height:           72px;
  --header-padding-x:        60px;
  --header-padding-x-mobile: 24px;
  --nav-gap:                 36px;
  --card-gap:                20px;

  /* Radii */
  --radius-button:           6px;
  --radius-input:            6px;
  --radius-card:             12px;
  --radius-modal:            16px;
  --radius-badge:            4px;
  --radius-badge-pill:       999px;

  /* Shadows */
  --shadow-header:           0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-card:             0 2px 12px rgba(26, 35, 48, 0.06);
  --shadow-card-hover:       0 12px 40px rgba(15, 160, 153, 0.12);
  --shadow-modal:            0 24px 80px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --t-fast:                  0.2s;
  --t-med:                   0.35s;
  --t-slow:                  0.7s ease;
  --t-modal:                 0.3s;
  --t-accordion:             0.45s ease;
  --ease-out-cubic:          cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Backdrop */
  --blur-header:             blur(12px);
}


/* ─── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ─── Base ───────────────────────────────────────────────────────────── */
html {
  /* scroll-behavior wird vom Lenis Smooth-Scroll (siehe index.html) gesteuert.
     Für reduced-motion-User greift automatisch das native Verhalten. */
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-body);
  background: var(--color-bg-card);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
}

body.trb-lock { overflow: hidden; touch-action: none; }

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
  font-family: var(--font-main);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); font-weight: var(--fw-bold);     line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--font-size-h3); font-weight: var(--fw-bold);     line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: 20px;                font-weight: var(--fw-semibold); line-height: var(--lh-tight); }

p  { line-height: var(--lh-body); }

a {
  color: var(--color-brand-main);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--color-brand-darker); }

img, picture, video { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; }

input, select, textarea { font-family: inherit; }


/* ─── Layout Helper ──────────────────────────────────────────────────── */
.trb-container,
.trb-s,
.trb-pw,
.trb-uw,
.trb-rw,
.trb-kw,
.trb-fw-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--container-padding);
}


/* ─── Utility: .trb-eye (uppercase accent label) ─────────────────────── */
.trb-eye {
  display: inline-block;
  font-size: var(--font-size-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  color: var(--color-brand-main);
  margin-bottom: 16px;
}


/* ─── Utility: Buttons ───────────────────────────────────────────────── */
.trb-btn,
.trb-btn-primary,
.trb-btn-secondary,
.trb-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: var(--font-size-button);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}

.trb-btn-primary {
  background: var(--color-brand-main);
  color: var(--color-text-on-dark);
}
.trb-btn-primary:hover {
  background: var(--color-brand-darker);
  color: var(--color-text-on-dark);
}

.trb-btn-secondary {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark-20);
}
.trb-btn-secondary:hover {
  background: var(--color-text-on-dark-20);
  color: var(--color-text-on-dark);
}

.trb-btn-ghost {
  background: transparent;
  color: var(--color-brand-main);
  border-color: var(--color-brand-alpha-40);
}
.trb-btn-ghost:hover {
  background: var(--color-brand-alpha-15);
  color: var(--color-brand-darker);
  border-color: var(--color-brand-main);
}


/* ─── Utility: Badge ─────────────────────────────────────────────────── */
.trb-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-badge-pill);
  background: var(--color-brand-alpha-15);
  border: 1px solid var(--color-brand-alpha-40);
  color: var(--color-brand-main);
  font-size: var(--font-size-label-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
}
.trb-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-main);
  animation: trb-pulse 2s ease-in-out infinite;
}
@keyframes trb-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}


/* ─── Utility: Divider ───────────────────────────────────────────────── */
.trb-divider {
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin: 32px 0;
}
.trb-divider-dark {
  background: var(--color-text-on-dark-20);
}


/* ─── Utility: Form Elements ─────────────────────────────────────────── */
.trb-input,
.trb-select,
.trb-textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--font-size-body);
  font-family: var(--font-main);
  color: var(--color-text-body);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.trb-input:focus,
.trb-select:focus,
.trb-textarea:focus {
  outline: none;
  border-color: var(--color-brand-alpha-60);
  background: var(--color-brand-alpha-05);
}
.trb-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.trb-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--font-size-label-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ─── Scroll-triggered fade utility classes (1:1 aus Source) ─────────── */
.trb-fade-up     { opacity: 0; transform: translateY(32px); }
.trb-fade-header { opacity: 0; transform: translateY(20px); }
.trb-fade-left   { opacity: 0; transform: translateX(-28px); }
.trb-fade-right  { opacity: 0; transform: translateX(28px); }
.trb-fade        { opacity: 0; }

.trb-fade-up.trb-in     { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.trb-fade-header.trb-in { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease; }
.trb-fade-left.trb-in   { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s ease; }
.trb-fade-right.trb-in  { opacity: 1; transform: none; transition: opacity .75s ease .15s, transform .75s ease .15s; }
.trb-fade.trb-in        { opacity: 1; transition: opacity .7s ease .2s; }

.trb-fade-up.trb-in:nth-child(2){transition-delay:.1s}
.trb-fade-up.trb-in:nth-child(3){transition-delay:.2s}
.trb-fade-up.trb-in:nth-child(4){transition-delay:.3s}
.trb-fade-up.trb-in:nth-child(5){transition-delay:.4s}
.trb-fade-up.trb-in:nth-child(6){transition-delay:.5s}
.trb-fade-up.trb-in:nth-child(7){transition-delay:.15s}
.trb-fade-up.trb-in:nth-child(8){transition-delay:.25s}


/* ─── Responsive ─────────────────────────────────────────────────────── */
/* Tablet / small desktop */
@media (max-width: 1024px) {
  :root {
    --header-padding-x: 40px;
    --container-padding: 0 40px;
    --section-padding: 80px 40px;
    --card-gap: 18px;
  }
}

/* Tablet portrait */
@media (max-width: 900px) {
  :root {
    --container-padding: 0 32px;
    --section-padding: 72px 32px;
  }
}

/* Phones */
@media (max-width: 600px) {
  :root {
    --section-padding: var(--section-padding-mobile);
    --container-padding: var(--container-padding-mobile);
    --header-padding-x: var(--header-padding-x-mobile);
    --nav-gap: 20px;
    --card-gap: 14px;
  }

  h1, h2, h3, h4, h5, h6 { letter-spacing: -0.5px; }
  h4 { font-size: 18px; }

  .trb-btn,
  .trb-btn-primary,
  .trb-btn-secondary,
  .trb-btn-ghost {
    padding: 13px 20px;
    font-size: var(--font-size-button-sm);
    min-height: 44px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  :root {
    --container-padding-mobile: 0 18px;
    --section-padding-mobile: 56px 18px;
  }
}