/**
 * @file theme.css
 * Conword-Design für das Byte-Theme (Override, siehe byte_theme/CUSTOMIZING.md:
 * liegt diese Datei im Web-Root, ersetzt sie byte_theme/src/theme.css).
 *
 * Tokens aus der Astro-Site (src/styles/global.css):
 *   Blau #003366 · Blau-700 #0c4377 · Blau-50 #eaf4fc · Hellblau #0091e6
 *   Rot #ff4242 · Grau #e8e5e0 · Grau-soft #f7f6f3 · Text #1c2733 · Muted #5a6472
 *   Schrift IBM Plex Sans · Radius 10px / 16px
 */

:root {
  /* Conword CI */
  --cw-blue: #003366;
  --cw-blue-700: #0c4377;
  --cw-blue-50: #eaf4fc;
  --cw-lightblue: #0091e6;
  --cw-red: #ff4242;
  --cw-red-hover: #d92f2f;
  --cw-gray: #e8e5e0;
  --cw-gray-soft: #f7f6f3;
  --cw-text: #1c2733;
  --cw-text-muted: #5a6472;
  --cw-border: #e4e2dd;
  --cw-on-dark-muted: #b9c2cf;

  /* Byte / shadcn-Tokens */
  --background: #ffffff;
  --foreground: var(--cw-text);
  --card: #ffffff;
  --card-foreground: var(--cw-text);
  /* Primär-Buttons sind bei Conword rot */
  --primary: var(--cw-red);
  --primary-foreground: var(--cw-gray);
  --secondary: var(--cw-blue);
  --secondary-foreground: var(--cw-gray);
  --muted: var(--cw-gray-soft);
  --muted-foreground: var(--cw-text-muted);
  /* Sekundär-Buttons / Akzente hellblau */
  --accent: var(--cw-lightblue);
  --accent-foreground: #ffffff;
  --destructive: var(--cw-red);
  --destructive-foreground: #ffffff;
  --border: var(--cw-border);
  --input: var(--cw-border);
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 10px;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.08;
  --shadow-color: oklch(0.3 0.06 260);
  --shadow-2xs: 0 1px 3px 0px rgb(0 51 102 / 0.05);
  --shadow-xs: 0 1px 3px 0px rgb(0 51 102 / 0.05);
  --shadow-sm: 0 1px 3px 0px rgb(0 51 102 / 0.08), 0 1px 2px -1px rgb(0 51 102 / 0.08);
  --shadow: 0 1px 3px 0px rgb(0 51 102 / 0.08), 0 1px 2px -1px rgb(0 51 102 / 0.08);
  --shadow-md: 0 1px 3px 0px rgb(0 51 102 / 0.08), 0 2px 4px -1px rgb(0 51 102 / 0.08);
  --shadow-lg: 0 12px 30px rgb(0 51 102 / 0.08);
  --shadow-xl: 0 1px 3px 0px rgb(0 51 102 / 0.08), 0 8px 10px -1px rgb(0 51 102 / 0.08);
  --shadow-2xl: 0 1px 3px 0px rgb(0 51 102 / 0.2);

  /* Navbar-Höhe für den Hero-Overlap (Byte) */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/* ---------------------------------------------------------------------------
 * Typografie
 * ------------------------------------------------------------------------ */
body {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cw-blue);
}

/* Hinweis: Regeln hier liegen außerhalb der Tailwind-Layer und schlagen deshalb
   jede Utility-Klasse – Link-Farben darum nur im Fließtext setzen. */
main p a,
main li a,
main td a,
main blockquote a {
  color: var(--cw-lightblue);
}

/* ---------------------------------------------------------------------------
 * Header: dunkelblau, Links grau, aktiver Link mit hellblauer Unterkante
 * ------------------------------------------------------------------------ */
header[role="banner"] {
  background: var(--cw-blue);
  color: var(--cw-gray);
  border-bottom: 1px solid var(--cw-blue-700);
  position: sticky;
  top: 0;
  z-index: 50;
}

header[role="banner"] .navbar a {
  color: var(--cw-gray);
  font-weight: 500;
}

header[role="banner"] .navbar a[data-level="1"]:hover,
header[role="banner"] .navbar a[data-level="1"]:focus {
  background: transparent;
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--cw-lightblue);
  border-radius: 0;
}

/* Mobile-Menü (bg-background) auf dunklem Header lesbar halten */
@media (max-width: 767px) {
  header[role="banner"] .navbar--menu {
    background: var(--cw-blue);
  }
}

/* Der Hero soll nicht mehr hinter den Header rutschen (Conword: Header + Hero getrennt).
   Selektor: Byte-Hero-Billboard mit "overlap_navbar" (Klasse mt-[calc(var(--navbar-height)*-1)]). */
section.cq-full[class*="navbar-height"] {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Hero: volle Fläche Conword-Blau statt Bild, Text grau
 * ------------------------------------------------------------------------ */
section.cq-full[class*="navbar-height"] {
  background: var(--cw-blue);
  color: var(--cw-gray);
  min-height: 0 !important;
  height: auto !important;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

section.cq-full[class*="navbar-height"] > div.absolute {
  display: none; /* Byte-Hintergrundbild + Overlay ausblenden */
}

/* Byte reserviert oben Platz für die überlappende Navbar – hier nicht nötig */
section.cq-full[class*="navbar-height"] > div.container > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

section.cq-full[class*="navbar-height"] h1,
section.cq-full[class*="navbar-height"] h2,
section.cq-full[class*="navbar-height"] h3 {
  color: var(--cw-gray);
}

section.cq-full[class*="navbar-height"] p {
  color: var(--cw-on-dark-muted);
}

section.cq-full[class*="navbar-height"] p strong {
  color: var(--cw-lightblue);
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------ */
a[class*="bg-primary "]:not([class*="bg-primary-foreground"]),
button[class*="bg-primary "]:not([class*="bg-primary-foreground"]) {
  color: var(--cw-gray);
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

a[class*="bg-primary "]:not([class*="bg-primary-foreground"]):hover,
button[class*="bg-primary "]:not([class*="bg-primary-foreground"]):hover {
  background: var(--cw-red-hover) !important;
  color: #ffffff !important;
}

/* "primary-inverted" (im Hero) als Ghost-Button: hellblauer Rahmen */
a[class*="bg-primary-foreground"],
button[class*="bg-primary-foreground"] {
  background: transparent !important;
  color: var(--cw-lightblue) !important;
  border: 1px solid var(--cw-lightblue);
}

a[class*="bg-primary-foreground"]:hover,
button[class*="bg-primary-foreground"]:hover {
  background: var(--cw-lightblue) !important;
  color: var(--cw-gray) !important;
}

/* ---------------------------------------------------------------------------
 * Karten (card-icon / card / testimonial): weiß mit feiner Kante, Icon hellblau
 * ------------------------------------------------------------------------ */
div.relative[class*="border-border"][class*="aspect-square"] {
  background: var(--card);
  border-radius: 16px !important;
  aspect-ratio: auto !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

div.relative[class*="border-border"][class*="aspect-square"]:hover {
  color: inherit !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgb(0 51 102 / 0.08);
}

div.relative[class*="border-border"][class*="aspect-square"] svg {
  color: var(--cw-lightblue);
}

div.relative[class*="border-border"][class*="aspect-square"] h3 {
  font-size: 1.15rem;
  margin-top: 0.75rem;
}

div.relative[class*="border-border"][class*="aspect-square"] .mt-3 {
  color: var(--cw-text-muted);
}

div.group.relative.flex.rounded-xl {
  border-radius: 16px;
  border: 1px solid var(--cw-border);
  box-shadow: none;
}

div.group.relative.flex.rounded-xl:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgb(0 51 102 / 0.08);
}

div.flex.h-full.flex-col.rounded-md.p-8 {
  background: var(--cw-gray-soft);
  border-radius: 16px;
  border: 1px solid var(--cw-border);
}

div.flex.h-full.flex-col.rounded-md.p-8 .text-muted {
  color: var(--cw-text-muted);
}

/* Testimonials (Blockquote-Komponente) */
blockquote.blockquote svg {
  color: var(--cw-blue-50);
}

blockquote.blockquote p {
  color: var(--cw-text);
}

blockquote.blockquote footer {
  color: var(--cw-blue);
}

/* ---------------------------------------------------------------------------
 * CTA-Band: dunkelblau wie "section--blue"
 * ------------------------------------------------------------------------ */
section.cq-full.z-1 {
  background: var(--cw-blue) !important;
  color: var(--cw-gray) !important;
}

section.cq-full.z-1 h1,
section.cq-full.z-1 h2,
section.cq-full.z-1 h3 {
  color: var(--cw-gray);
}

section.cq-full.z-1 p {
  color: var(--cw-on-dark-muted);
}

/* Sekundär-Button im CTA (bg-accent) als Ghost auf Blau */
section.cq-full.z-1 a[class*="bg-accent "] {
  background: transparent !important;
  color: var(--cw-lightblue) !important;
  border: 1px solid var(--cw-lightblue);
}

section.cq-full.z-1 a[class*="bg-accent "]:hover {
  background: var(--cw-lightblue) !important;
  color: var(--cw-gray) !important;
}

/* ---------------------------------------------------------------------------
 * Footer: dunkelblau, Text grau
 * ------------------------------------------------------------------------ */
footer[role="contentinfo"] {
  background: var(--cw-blue);
  color: var(--cw-gray);
}

section.site-footer {
  color: var(--cw-gray);
}

section.site-footer a {
  color: var(--cw-gray);
}

section.site-footer a:hover {
  color: #ffffff;
}

section.site-footer h1,
section.site-footer h2,
section.site-footer h3,
section.site-footer h4 {
  color: #ffffff;
}

section.site-footer p {
  color: var(--cw-on-dark-muted);
}

section.site-footer [class*="border-t"],
section.site-footer [class*="border-b"] {
  border-color: var(--cw-blue-700);
}

section.site-footer input {
  background: #ffffff;
  color: var(--cw-text);
  border-color: var(--cw-blue-700);
}

/* ---------------------------------------------------------------------------
 * Fließtext (Content-Templates: Blog, Case Study, Zielgruppe, Partner, Seiten)
 * ------------------------------------------------------------------------ */
main blockquote {
  border-left: 3px solid var(--cw-lightblue) !important;
  color: var(--cw-blue);
  font-style: italic;
}

main code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--cw-blue-50);
  padding: 0.15em 0.4em;
  border-radius: 5px;
}

main pre {
  background: var(--cw-blue);
  color: var(--cw-gray);
  padding: 1.25rem;
  border-radius: var(--radius);
  overflow-x: auto;
}

main pre code {
  background: none;
  padding: 0;
  color: inherit;
}

main p.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--cw-text-muted);
}

/* Breadcrumb dezent */
nav[aria-label*="readcrumb"] a {
  color: var(--cw-text-muted);
}