/* ============================================
   CX-Routes – Light Theme
   ============================================
   Hintergrund : #F0F4F8
   Fläche      : #FFFFFF
   Akzent      : #185FA5
   Akzent hell : #378ADD
   Text        : #1E2A3A
   Text muted  : #4A6080
   Border      : #D8E4EF
   ============================================ */

/* ── Self-hosted webfont ──
   Deliberately LOCAL instead of fonts.googleapis.com. Loading the font from
   Google transmits the visitor's IP address to a third party before any
   consent could be given, and Art. 6 GDPR offers no solid basis for that as
   long as the font can be served from our own origin (cf. LG Muenchen I,
   20.01.2022, Az. 3 O 17493/20). These files come from our own CloudFront
   distribution: no third-party server, no cookie, one less DNS + TLS
   handshake on first paint.

   Variable font: ONE file per subset covers every weight from 100 to 900.
   The pages use 400/500/600/700/800 - weight 300 used to be requested from
   Google but is not used anywhere (font-light: zero occurrences).

   The family is still called 'Inter' on purpose, so every existing
   font-family declaration in the HTML files and in tailwind.config keeps
   working untouched.

   Two subsets with unicode-range: latin-ext is only downloaded when a
   character from it actually appears. Ranges taken verbatim from
   @fontsource-variable/inter v5.3.0 and identical to the Google subsets -
   the combining marks U+0304/U+0308/U+0329 appear in both on purpose, so
   either subset can compose accented glyphs on its own.

   The url() is relative to THIS file. style.css lives in /de/ and /en/, so
   ../fonts/ resolves to /fonts/ for both languages, and works the same when
   the page is opened from disk or from cx-routes.de. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:           #F0F4F8;
  --surface:      #FFFFFF;
  --accent:       #185FA5;
  --accent-light: #378ADD;
  --text:         #1E2A3A;
  --text-muted:   #4A6080;
  --border:       #D8E4EF;
}

html { scroll-behavior: smooth; }

/* ── Anchor offset for in-page jump links ──
   The navigation is position:fixed with Tailwind h-28 (112px). Without this a
   section jumped to via #id would come to rest UNDERNEATH the nav bar. 8rem
   (128px) clears the bar and leaves a small breathing gap above the heading.
   Scoped to section[id] so it only applies to real jump targets. */
section[id] { scroll-margin-top: 8rem; }

/* ── Global overrides for light mode ── */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

/* Remap dark Tailwind text classes */
.text-gray-100 { color: var(--text)       !important; }
.text-gray-200 { color: var(--text)       !important; }
.text-gray-300 { color: var(--text-muted) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-500 { color: #6B7A90           !important; }
.text-white    { color: var(--text)       !important; }

/* Keep white/light text inside dark footer */
footer .text-white,
footer p,
footer span,
footer a { color: #B0C4D8 !important; }
footer .gradient-text {
  -webkit-text-fill-color: transparent !important;
}
footer .footer-link { color: #6B8AAA !important; }
footer .footer-link:hover { color: #FFFFFF !important; }

/* Keep white text on buttons */
.btn-cyan,
.btn-cyan * { color: #FFFFFF !important; }

/* Remap cyan/purple icon & text classes to blue */
.text-cyan-400   { color: var(--accent)       !important; }
.text-cyan-300   { color: var(--accent-light)  !important; }
.text-purple-400 { color: #6D3EC5             !important; }
.text-purple-300 { color: #7C52CC             !important; }
.text-green-400  { color: #16A34A             !important; }
.text-green-300  { color: #22C55E             !important; }
.text-red-400    { color: #DC2626             !important; }
.text-yellow-400 { color: #D97706             !important; }

/* Remap background tint classes */
.bg-cyan-500\/10, .bg-cyan-500\/5  { background-color: #EBF3FB !important; }
.bg-purple-500\/10,.bg-purple-500\/5 { background-color: #F0EBFB !important; }
.bg-gray-700  { background-color: var(--border) !important; }

/* Remap border classes */
.border-cyan-500\/10,
.border-cyan-500\/15,
.border-cyan-500\/20,
.border-cyan-500\/25,
.border-cyan-500\/30 { border-color: rgba(24,95,165,0.25) !important; }
.border-purple-500\/10,
.border-purple-500\/15,
.border-purple-500\/20,
.border-purple-500\/25,
.border-purple-500\/30 { border-color: rgba(109,62,197,0.2) !important; }
.border-cyan-900\/20,
.border-cyan-900\/30  { border-color: var(--border) !important; }

/* Remap hover classes */
.hover\:text-cyan-400:hover,
.hover\:text-cyan-300:hover { color: var(--accent) !important; }
.hover\:bg-cyan-500\/10:hover,
.hover\:bg-cyan-500\/20:hover { background-color: #EBF3FB !important; }
.hover\:bg-purple-500\/20:hover { background-color: #F0EBFB !important; }

/* animate-pulse dot */
.bg-cyan-400 { background-color: var(--accent) !important; }

/* ── Navigation ── */
.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(24,95,165,0.08);
}

/* ── Gradient Text ── */
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Primary Button ── */
.btn-cyan {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 4px 14px rgba(24,95,165,0.30);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.btn-cyan:hover {
  box-shadow: 0 6px 20px rgba(24,95,165,0.45);
  transform: translateY(-2px);
}

/* ── Feature Cards ── */
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.feature-card:hover {
  border-color: var(--accent-light);
  box-shadow: 0 4px 20px rgba(24,95,165,0.12);
  transform: translateY(-3px);
}

/* ── Input Fields ── */
.input-field {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-field::placeholder { color: #9BAFC5; }
.input-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.12);
}
/* Style select options */
select.input-field option { background: #FFFFFF; color: var(--text); }

/* ── Hero Grid ── */
.hero-grid {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Hero Radial Glow ── */
.hero-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(24,95,165,0.06) 0%, rgba(55,138,221,0.03) 50%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ── Hero Background Diagram ── */
/* Decorative contact-flow schematic behind the hero logo.               */
/* Values fixed after visual review: opacity .7, blur 1.2px, width 1600.  */
/* The radial mask keeps the centre clear so logo, claim and buttons     */
/* stay on a calm background.                                            */
.hero-diagram {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1600px;
  max-width: 160vw;
  height: auto;
  opacity: 0.7;
  filter: blur(1.2px);
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 56% 54% at 50% 48%, transparent 3.6%, #000 43.6%);
          mask-image: radial-gradient(ellipse 56% 54% at 50% 48%, transparent 3.6%, #000 43.6%);
}
@media (max-width: 900px) {
  .hero-diagram { display: none; }
}

/* ── Nav Links ── */
.nav-link {
  color: var(--text-muted);
  transition: color 0.2s ease;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transition: width 0.3s ease;
}
.nav-link:hover,
.active-link { color: var(--accent); }
.nav-link:hover::after,
.active-link::after { width: 100%; }

/* ── Section Divider ── */
.section-divider {
  height: 1px;
  background: var(--border);
}

/* ── In-page table of contents (services page) ──
   Own class instead of repeating the utility chain nine times per language.
   Picks up the pill look already used for the page-header badge, but on the
   white surface colour so the row reads as controls, not as a headline badge.
   Own colour values rather than Tailwind cyan utilities, for the same reason
   as .consent-box further down: the !important shim at the top of this file
   only remaps the classes listed there. */
.toc-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(24,95,165,0.25);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.toc-link:hover {
  background: #EBF3FB;
  border-color: var(--accent-light);
}
.toc-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Footer Links ── */
.footer-link {
  color: #6B8AAA;
  transition: color 0.2s ease;
}
.footer-link:hover { color: #FFFFFF; }

/* ── Page Header ── */
.page-header {
  background: linear-gradient(180deg, #E4EEF8 0%, var(--bg) 100%);
  padding: 120px 24px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(24,95,165,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,95,165,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Pricing Table ── */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th {
  background: #EBF3FB;
  color: var(--accent);
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--border);
}
.price-table td {
  padding: 14px 16px;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.price-table tr:hover td { background: #F5F9FF; }
.price-table tr:last-child td { border-bottom: none; }
.price-table .highlight-row td {
  background: #EBF3FB;
  color: var(--text);
  font-weight: 600;
}
.price-tag { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ── Timeline ── */
.timeline-item { position: relative; padding-left: 2rem; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 0 8px rgba(24,95,165,0.4);
}
.timeline-item::after {
  content: '';
  position: absolute;
  left: 5px; top: 20px;
  width: 2px;
  height: calc(100% + 16px);
  background: linear-gradient(180deg, var(--border), transparent);
}
.timeline-item:last-child::after { display: none; }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-cyan {
  background: #EBF3FB;
  border: 1px solid rgba(24,95,165,0.3);
  color: var(--accent);
}
.badge-purple {
  background: #F0EBFB;
  border: 1px solid rgba(109,62,197,0.25);
  color: #6D3EC5;
}
.badge-green {
  background: #ECFDF5;
  border: 1px solid rgba(22,163,74,0.25);
  color: #16A34A;
}

/* ── Skill bars ── */
.bg-gradient-to-r.from-cyan-400 {
  background: linear-gradient(to right, var(--accent), var(--accent-light)) !important;
}

/* ── From/gradient used in contact FAQ box ── */
[style*="rgba(0,240,255"] { 
  background: rgba(24,95,165,0.05) !important;
  border-color: rgba(24,95,165,0.15) !important;
}
[style*="rgba(0, 240, 255"] {
  background: rgba(24,95,165,0.05) !important;
  border-color: rgba(24,95,165,0.15) !important;
}

/* ── Consent checkbox ──
   Own class instead of Tailwind's accent-*: the !important shim at the top of
   this file only remaps the classes listed there, so an unknown utility class
   would break out of the palette. accent-color follows --accent automatically. */
.consent-box {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent-box:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Honeypot ──
   Invisible to humans, tempting for bots. Deliberately NOT display:none –
   some bots skip exactly that. Kept out of tab order via tabindex="-1"
   and out of screen readers via aria-hidden on the wrapper. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Build notice (homepage only) ──
   Deliberately in the document flow, NOT position:fixed: the nav already owns
   the top edge (fixed, h-28) and cookie-banner.js the bottom edge (z-index
   9999). A third fixed layer would overlap one of them on small viewports.
   Own colour values instead of Tailwind amber utilities, for the same reason
   as .consent-box above: the !important shim at the top of this file only
   remaps the classes listed there, so an unlisted utility would break out of
   the palette. Amber sets it apart from the blue brand colour without
   reading as an error state. */
.build-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 44rem;
  margin: 0 auto 2rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid #F0D28A;
  border-left: 4px solid #D97706;
  border-radius: 0.75rem;
  background: #FFF8EC;
  color: #7A4E06;
  font-size: 0.875rem;
  line-height: 1.55;
  /* !important because the hero wrapper carries Tailwind's .text-center and
     the CDN build injects its <style> at runtime, i.e. potentially after this
     file. Equal specificity would otherwise be decided by source order. */
  text-align: left !important;
}
.build-notice i {
  color: #D97706;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.build-notice p { margin: 0; }
.build-notice strong { color: #5E3B04; font-weight: 700; }
.build-notice a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}
.build-notice a:hover { color: var(--accent-light); }