/* ============================================
   xtraz labs - Tool-Übersicht

   Design tokens, reset, header, card, button and
   footer styles are taken 1:1 from the hreflang
   Validator, which took them from the UTM Builder,
   which took them from the SERP Simulator
   (serp-simulator.xtraz-labs.com). All four pages
   stay visually identical.

   The layout below (sticky nav, centred hero,
   auto-fit card grid) comes from the design mockup
   and is expressed only in existing tokens. The
   three places where the mockup asked for a value
   the token set does not have are marked
   "Overview deviation" and say what was done
   instead.
   ============================================ */

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

[hidden] {
  display: none !important;
}

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;   /* 1.23:1 on white -- below the 3:1 WCAG 1.4.11
                                asks for on a control boundary. Inherited from
                                the SERP Simulator; changing it would make the
                                tools diverge, so it is a shared decision. */
  --color-text: #1e293b;
  --color-text-secondary: #64748b;
  --color-success: #16a34a;
  --color-warning: #ea580c;
  --color-danger: #dc2626;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);

  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --tint-primary: rgba(37, 99, 235, 0.08);   /* --color-primary  @ 8%  */
  --tint-warning: rgba(234, 88, 12, 0.08);   /* --color-warning  @ 8%  */
  --tint-success: rgba(22, 163, 74, 0.10);   /* --color-success  @ 10% */
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* The icon sprite is in the flow but must never occupy space. It is a
   class rather than an inline style so the CSP can forbid inline styles
   outright. */
.icon-sprite {
  position: absolute;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users must be able to jump the nav. Invisible until focused. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: top 0.15s;
}

.skip-link:focus {
  top: 8px;
}

/* --- Header / Nav ---
   Composition from the mockup (logo left, return link right, sticky).
   Surface, padding, border and logo height are the header of the three
   tools, unchanged. The mockup's translucent blur is dropped: it needs a
   white at 85% opacity that is not in the token set, and a solid
   --color-surface is what the tools already use. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-nav-logo {
  display: block;
  flex: 0 0 auto;
}

.site-nav-logo img {
  height: 32px;
  width: auto;
  display: block;
}

.site-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav-back:hover {
  color: var(--color-text);
}

/* --- Hero --- */
.hero {
  max-width: 800px;
  margin: 0 auto;
  padding: 72px 32px 48px;
  text-align: center;
}

.hero-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
}

/* Overview deviation: the tools cap their type at 22px because they are
   application surfaces with no hero. This page is an entry point and the
   mockup gives the headline 44px. Capped at 40px so it still reads as the
   same family, and fluid so it never overflows a 375px screen. */
.hero h1 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 16px 0 18px;
  text-wrap: balance;
}

.hero p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* --- Tool grid --- */
.tools {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  list-style: none;
}

/* The live card is a single link, so the whole card is one tab stop and
   one hit target. The "in Arbeit" card is a plain article and never
   points anywhere. Both share this box. */
.tool-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

a.tool-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--color-primary);
}

a.tool-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: var(--tint-primary);
  color: var(--color-primary);
}

.tool-icon svg {
  width: 24px;
  height: 24px;
}

.tool-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.tool-audience {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}

.tool-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
  flex: 1;
}

.tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  list-style: none;
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Status is carried by the label text, not by the colour: a monochrome
   or colour-blind reading of the card still says "Live" or "In Arbeit". */
.tag-status-live {
  background: var(--tint-success);
  color: #136b34;              /* --color-success darkened until it clears
                                  4.5:1 on the 10% tint with margin (5.9:1).
                                  Same hue, same family. */
  border-color: transparent;
}

.tag-status-wip {
  background: var(--tint-warning);
  color: #b34509;              /* --color-warning darkened to clear 4.5:1
                                  on the 8% tint (5.1:1). */
  border-color: transparent;
}

.tool-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.tool-cta svg {
  width: 15px;
  height: 15px;
}

a.tool-card:hover .tool-cta {
  color: var(--color-primary-hover);
}

/* --- "in Arbeit" and the closing placeholder --- */
.tool-card-muted {
  background: var(--color-bg);
  border-style: dashed;
  box-shadow: none;
}

.tool-card-muted .tool-icon {
  background: var(--color-border);
  color: var(--color-text-secondary);
}

.tool-card-muted .tool-name {
  color: var(--color-text-secondary);
}

/* --- Footer ---
   Overview deviation: the mockup puts the footer on a dark navy block.
   The token set has no dark ground and no light logo, and inventing both
   would make this page's foot look unlike every tool. The mockup's
   composition (centred, logo, one line) is kept on the light footer the
   tools already use. */
.footer {
  padding: 24px 32px 32px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.footer-logo {
  height: 24px;
  width: auto;
  margin: 0 auto 12px;
  display: block;
}

.footer p {
  max-width: 620px;
  margin: 0 auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 12px;
  list-style: none;
}

.footer a {
  color: var(--color-text-secondary);
}

.footer a:hover {
  color: var(--color-text);
}

/* --- 404 --- */
.notfound {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 80px 32px;
}

.notfound h1 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

.notfound p {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, transform 0.1s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn:active {
  transform: scale(0.98);
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .hero {
    padding: 48px 24px 32px;
  }

  .hero p {
    font-size: 16px;
  }

  .tools {
    padding: 0 24px 56px;
  }

  .tool-grid {
    gap: 16px;
  }
}

@media (max-width: 500px) {
  /* Same deviation the UTM Builder made: the SERP Simulator's fixed
     header columns collide with the logo below ~520px. */
  .site-nav {
    padding: 16px;
    gap: 12px;
  }

  .site-nav-logo img {
    height: 26px;
  }

  .site-nav-back {
    font-size: 13px;
  }

  .hero {
    padding: 40px 16px 28px;
  }

  .tools {
    padding: 0 16px 48px;
  }

  .tool-card {
    padding: 20px;
  }

  .footer {
    padding: 20px 16px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  a.tool-card:hover {
    transform: none;
  }

  .btn:active {
    transform: none;
  }
}