/* =========================
   ROOT
========================= */

:root {
  /* Nur noch Komponenten-spezifische Alt-Aliase.
     Farben, Abstände, Radien und Schatten kommen aus design-tokens.css. */
  --tm-hero-space-desktop: 118px;
  --tm-hero-space-mobile: 86px;
}

/* =========================
   RESET
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--tm-bg);
  color: var(--tm-text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* =========================
   MEDIA
========================= */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   LINKS
========================= */

a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   LAYOUT
========================= */

.tm-container {
  width: min(100% - 40px, 1200px);
  margin-inline: auto;
}

section {
  position: relative;
}

/* =========================
   ICONS
========================= */

.tm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  border-radius: 18px;
}

/* =========================
   SKIP LINK
========================= */

.skip-link {
  position: absolute;

  left: -9999px;
  top: auto;
}

.skip-link:focus {
  left: 20px;
  top: 20px;

  z-index: 99999;

  padding: 12px 16px;

  background: #ffffff;
  border-radius: 12px;

  color: #000000;
}

/* =========================
   GLOBAL LUCIDE ICON SYSTEM
========================= */

.tm-lucide {
  display: block;

  width: 1em;
  height: 1em;

  flex: 0 0 auto;

  color: currentColor;

  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tm-icon-wrap,
.tm-feature-icon,
.tm-ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 18px;

  color: #2563eb;

  background: rgba(37, 99, 235, .08);
}

.tm-feature-icon {
  width: 58px;
  height: 58px;

  font-size: 24px;
}

.tm-section-dark .tm-icon-wrap,
.tm-section-dark .tm-feature-icon,
.tm-section-dark .tm-ui-icon,
.tm-maint-dark .tm-icon-wrap,
.tm-maint-dark .tm-feature-icon,
.tm-maint-dark .tm-ui-icon,
.tm-wc-dark .tm-icon-wrap,
.tm-wc-dark .tm-feature-icon,
.tm-wc-dark .tm-ui-icon {
  color: #60a5fa;

  background: rgba(96, 165, 250, .10);

  border: 1px solid rgba(255, 255, 255, .08);
}