/*
Theme Name:   CRÆW Divi Child
Theme URI:    https://www.craew.de
Description:  Child-Theme für Divi 5 – CRÆW Motorrad-Community (Dark Theme, Bebas Neue + Inter)
Author:       CRÆW
Author URI:   https://www.craew.de
Template:     Divi
Version:      1.0.0
*/

/* ==========================================================================
   CRÆW Design-Tokens (1:1 aus craew.lovable.app)
   Hintergrund #121212 | Karten #1A1A1A | Rahmen #292929
   Text #F2F2F2 | Gedämpft #8C8C8C | Primär-Rot #A82424 | Akzent #602020
   Schriften: Bebas Neue (Display), Inter (Fließtext)
   ========================================================================== */

:root {
  --craew-bg: #121212;
  --craew-card: #1A1A1A;
  --craew-secondary: #242424;
  --craew-border: #292929;
  --craew-fg: #F2F2F2;
  --craew-muted: #8C8C8C;
  --craew-primary: #A82424;
  --craew-accent: #602020;
  --craew-radius: 8px;
}

/* Grundfarben & Schriften global */
body,
#main-content,
#page-container {
  background-color: var(--craew-bg) !important;
  color: var(--craew-fg);
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--craew-fg);
  letter-spacing: 0.02em;
}

a {
  color: var(--craew-primary);
}

::selection {
  background: var(--craew-primary);
  color: #FAFAFA;
}

/* ==========================================================================
   Header (Theme Builder Global Header, Sektion mit Klasse .craew-header)
   ========================================================================== */

.craew-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--craew-border);
}

.craew-header-row .et_pb_column {
  display: flex;
  align-items: center;
}

.craew-logo a {
  text-decoration: none;
}

.craew-menu ul li a:hover {
  color: var(--craew-primary) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.craew-btn-glow .et_pb_button,
.craew-btn-glow.et_pb_button {
  box-shadow: 0 0 24px rgba(168, 36, 36, 0.45);
  transition: box-shadow 0.3s ease, transform 0.2s ease, background-color 0.2s ease;
}

.craew-btn-glow .et_pb_button:hover,
.craew-btn-glow.et_pb_button:hover {
  background-color: #8F1E1E !important;
  box-shadow: 0 0 36px rgba(168, 36, 36, 0.65);
}

/* ==========================================================================
   Karten (News, Features, Produkte)
   ========================================================================== */

.craew-card {
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.craew-card:hover {
  border-color: rgba(168, 36, 36, 0.5) !important;
  transform: translateY(-4px);
}

.craew-badge {
  display: inline-block;
  background: var(--craew-primary);
  color: #FAFAFA;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.craew-date {
  color: var(--craew-muted);
  font-size: 13px;
  margin-bottom: 8px !important;
}

/* Produktkarten */
.craew-product-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  font-size: 64px;
  background: var(--craew-secondary);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--craew-border);
  margin-bottom: 20px;
}

.craew-product-body {
  padding: 0 28px;
}

.craew-price {
  color: var(--craew-primary);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-top: 4px !important;
}

/* ==========================================================================
   FAQ-Akkordeons
   ========================================================================== */

.craew-accordion .et_pb_toggle {
  margin-bottom: 12px !important;
  border-radius: var(--craew-radius);
  transition: border-color 0.3s ease;
}

.craew-accordion .et_pb_toggle_open,
.craew-accordion .et_pb_toggle:hover {
  border-color: rgba(168, 36, 36, 0.4) !important;
}

.craew-accordion h5.et_pb_toggle_title {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--craew-fg) !important;
}

/* ==========================================================================
   Rechtstexte (Impressum / Datenschutz)
   ========================================================================== */

.craew-legal h2 {
  margin-top: 40px;
  margin-bottom: 12px;
}

.craew-legal h3 {
  margin-top: 24px;
  margin-bottom: 8px;
}

/* ==========================================================================
   Footer-Links
   ========================================================================== */

.craew-footer-links a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.craew-footer-links a:hover {
  color: var(--craew-fg) !important;
}

/* ==========================================================================
   Divers
   ========================================================================== */

/* Sanftes Scrollen für Anker-Links (#news, #community) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

/* Hero füllt den Viewport */
.craew-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
}