/*
Theme Name: TransTection
Description: Rahmen-Theme (Header/Footer/Design-Tokens) für TransTection. Seiteninhalte werden mit Elementor gepflegt.
Author: TransTection
Version: 1.0
Text Domain: transtection
*/

:root{
  --ink:#0A0E2E;
  --ink-soft:#161A44;
  --blue:#0000FF;
  --blue-deep:#0000CC;
  --indigo:#4C57A6;
  --cyan:#00ADEF;
  --magenta:#EB008B;
  --paper:#F7F8FC;
  --paper-panel:#EFF1FA;
  --text:#1A1D33;
  --text-soft:#565B7A;
  --line:#DCDFEF;
  --radius:14px;
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.disp{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.04em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
@media (max-width:700px){ .wrap{ padding:0 20px; } }

/* Buttons — auch von Elementor-Widgets referenzierbar (Klassen als "CSS-Klassen" im Button-Widget eintragen) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:14.5px;
  transition:transform .15s, box-shadow .15s, background .15s;
  white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 8px 20px -6px rgba(0,0,255,0.55); }
.btn-primary:hover{ background:var(--blue-deep); transform:translateY(-1px); }
.btn-ghost{ background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.25); }
.btn-ghost:hover{ background:rgba(255,255,255,0.16); }

/* ---------- Header ---------- */
.tt-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,46,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.tt-header-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.tt-logo{ display:flex; align-items:center; gap:10px; color:#fff; }
.tt-logo img{ max-height:44px; width:auto; }
.logo-word{ font-family:'Space Grotesk'; font-weight:700; font-size:19px; color:#fff; }
.logo-word span{ color:var(--blue); }

.tt-navlinks{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.tt-navlinks a{ color:#C9CCE6; font-size:14.5px; font-weight:500; transition:color .15s; }
.tt-navlinks a:hover{ color:#fff; }

/* Ab hier übernimmt das Hamburger-Menü-Plugin die mobile Darstellung.
   Deshalb hier bewusst KEIN eigener Burger-Button / Off-Canvas-CSS mehr —
   nur das Ausblenden der Desktop-Nav unterhalb des im Plugin gesetzten Breakpoints. */
@media (max-width: 860px){
  .tt-navlinks,
  .tt-header-ctas{ display:none; }
}

/* ---------- Footer ---------- */
.tt-footer{ background:var(--ink); color:#9CA0C9; padding:48px 0 28px; }
.tt-footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.tt-footer-nav{ display:flex; gap:26px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.tt-footer-nav a{ font-size:14px; color:#B7BADD; }
.tt-footer-nav a:hover{ color:#fff; }
.tt-footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:22px;
  font-size:13px; flex-wrap:wrap; gap:12px;
}
.tt-footer-legal a{ color:#9CA0C9; margin-left:20px; }
.tt-footer-legal a:first-child{ margin-left:0; }
.tt-footer-legal a:hover{ color:#fff; }