/*
Theme Name: Astrid Child
Theme URI: https://athemes.com/theme/astrid
Template: astrid
Author: aThemes
Author URI: https://athemes.com
Description: Child Theme für 2-Rad eMobilität
Tags: two-columns,right-sidebar,custom-colors,custom-background,custom-header,custom-menu,featured-images,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.19.1771536132
Updated: 2026-02-19 22:22:12
*/

/* ============================================================
   CSS-VARIABLEN
   Logo-Grün: #6DB33F (exakt aus Logo)
   ============================================================ */
:root {
  --color-primary:        #6DB33F;
  --color-primary-dark:   #4e8a27;
  --color-primary-light:  #d4edba;
  --color-secondary:      #1E40AF;
  --color-secondary-mid:  #3B82F6;
  --color-dark:           #111827;
  --color-mid:            #374151;
  --color-muted:          #6B7280;
  --color-border:         #E5E7EB;
  --color-white:          #FFFFFF;
  --color-header:         #202529;
  --font-heading:         'Josefin Sans', 'Segoe UI', sans-serif;
  --font-body:            'Open Sans', 'Segoe UI', sans-serif;
  --spacing-sm:           1rem;
  --spacing-md:           1.5rem;
  --radius-md:            8px;
  --shadow-sm:            0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:            0 4px 12px rgba(0,0,0,0.12);
}

/* ============================================================
   BASIS
   ============================================================ */
body {
  color: var(--color-dark);
  font-family: var(--font-body);
  line-height: 1.7;
  background-color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-secondary);
  font-weight: 700;
  line-height: 1.25;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--spacing-md); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

a {
  color: var(--color-secondary-mid);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

p {
  color: var(--color-mid);
  margin-bottom: var(--spacing-sm);
}

/* ============================================================
   LOGO
   ============================================================ */
.custom-logo-link img {
  display: block;
  max-height: 120px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto;
  object-fit: contain;
}

.site-logo {
  max-height: 120px !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  border-bottom: 3px solid var(--color-primary) !important;
}

.site-header.has-header,
.site-header.has-video {
  border-bottom: 3px solid var(--color-primary) !important;
}

.header-clone {
  height: 0 !important;
  display: none !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.main-navigation a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.main-navigation a:hover {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: var(--color-primary) !important;
}

.main-navigation li a::before {
  border-top-color: var(--color-primary) !important;
}
.main-navigation li a::after {
  border-bottom-color: var(--color-primary) !important;
}

.main-navigation ul ul {
  background-color: var(--color-header) !important;
  border-top: 3px solid var(--color-primary) !important;
}
.main-navigation ul ul a {
  color: #ffffff !important;
}
.main-navigation ul ul a:hover {
  color: var(--color-primary) !important;
  background-color: rgba(255,255,255,0.05) !important;
}

/* ============================================================
   HERO
   ============================================================ */
.header-image::after {
  background-color: rgba(37, 46, 53, 0.45) !important;
}

.header-image {
  max-height: 520px !important;
  overflow: hidden !important;
}

.header-image img {
  width: 100% !important;
  object-fit: cover !important;
  max-height: 520px !important;
}

/* ============================================================
   CTA-BUTTON (Hero) – einmalig, kein Duplikat
   ============================================================ */
.header-button {
  width: 300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.header-info .header-button a,
.header-info .header-button .button {
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}

.header-info .header-button a:hover,
.header-info .header-button .button:hover {
  background-color: #6DB33F !important;
  border-color: #6DB33F !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Hero CTA – Astrid-Stil beibehalten, nur Farbe anpassen */
.header-button a,
.header-button .button {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background-color: transparent !important;
}
/* ============================================================
   BUTTONS (allgemein, ohne Hero-Button)
   ============================================================ */
/* Buttons allgemein – Hero-Button ausgenommen */
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.site-content .button,
.site-content button {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 0.75rem 1.75rem !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  box-shadow: 0 2px 8px rgba(109,179,63,0.30) !important;
}
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* ============================================================
   KONTAKTFORMULAR
   ============================================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select {
  width: auto !important;
  max-width: 100% !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.65rem 1rem !important;
  font-family: var(--font-body) !important;
  color: var(--color-dark) !important;
  background-color: var(--color-white) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.wpcf7 textarea {
  width: 100% !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.65rem 1rem !important;
  font-family: var(--font-body) !important;
  color: var(--color-dark) !important;
  background-color: var(--color-white) !important;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(109,179,63,0.15) !important;
  outline: none !important;
}

/* ============================================================
   WIDGET-TITEL
   ============================================================ */
.widget-title,
.widgettitle {
  color: var(--color-primary-dark) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
  border-top: 3px solid var(--color-primary) !important;
}
.site-footer a,
#colophon a,
.footer-info a,
.footer-widgets a {
  color: var(--color-primary-light) !important;
}
.site-footer a:hover,
#colophon a:hover,
.footer-info a:hover,
.footer-widgets a:hover {
  color: var(--color-primary) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .custom-logo-link img {
    max-height: 90px !important;
  }
  h2 { font-size: 1.6rem; }
}

@media (max-width: 768px) {
  .custom-logo-link img {
    max-height: 70px !important;
  }
  h2 { font-size: 1.4rem; }
}

/* === HERO CTA – transparent with green outline, white text on hover === */
.header-info .header-button a,
.header-info .header-button .button,
.header-button a,
.header-button .button{
  background-color: transparent !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.header-info .header-button a:hover,
.header-info .header-button .button:hover,
.header-button a:hover,
.header-button .button:hover{
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* HERO CTA – weicher Hover */
.header-button a,
.header-button .button,
.wp-block-button__link,
.wp-element-button,
a.button,
button.button,
a.btn,
.btn a {

  background: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  padding: 12px 22px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;   /* wichtig für Weichheit */
}

/* Hover – sanft */
.header-button a:hover,
.header-button .button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
a.button:hover,
button.button:hover,
a.btn:hover,
.btn a:hover {

  background: #1f8f4c !important;   /* leicht weicheres Grün */
  border-color: #1f8f4c !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(21,128,61,0.35);
  transform: translateY(-2px);
}

/* === FORCE HERO CTA HOVER (Astrid / WP) === */
body.home .header-info a.button.header-button{
  background: transparent !important;
  background-image: none !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease,
              box-shadow 280ms ease, transform 280ms ease !important;
}

/* Falls das Theme den Fill über Pseudo-Elemente zeichnet */
body.home .header-info a.button.header-button::before,
body.home .header-info a.button.header-button::after{
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  content: "" !important;
}

/* Hover: weicher statt "hart" */
body.home .header-info a.button.header-button:hover{
  background-color: rgba(21,128,61,0.80) !important; /* softer */
  background-image: none !important;
  border-color: rgba(21,128,61,0.80) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
  transform: translateY(-2px) !important;
}

/* Pseudo-Elemente sollen Hover nicht überdecken */
body.home .header-info a.button.header-button:hover::before,
body.home .header-info a.button.header-button:hover::after{
  opacity: 0 !important;
}
/* Astrid Hero CTA softer hover */
.header-info .button{
    background-color: rgba(21,128,61,0.0) !important;
}

.header-info .button:hover{
    background-color: rgba(21,128,61,0.60) !important;
    border-color: rgba(21,128,61,0.60) !important;
}