/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.3.1780294918
Updated: 2026-06-01 06:21:58

*/


/* === Dark-Mode Theme === */
:root {
  --bg: #ffffff;
  --fg: #0b0b10;
  --accent: #ff7a00;
  --accent-contrast: #ffffff;
}

html[data-theme='dark'] {
  --bg: #05070b;
  --fg: #f5f5f5;
  --accent: #ff9a3c;
  --accent-contrast: #05070b;
}

body {
  background-color: var(--bg);
  color: var(--fg);
}

/* Beispiel-Elemente an Theme koppeln – bei Bedarf ergänzen */
.site-header,
header,
footer {
  background-color: var(--bg);
  color: var(--fg);
}

a {
  color: var(--accent);
}

button,
input[type="submit"],
.theme-toggle {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-radius: 999px;
  border: none;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

/* Toggle‑Position (oben rechts, bei Bedarf anpassen) */
.theme-toggle {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 9999;
}

/* Darkmode auf Seite und Container anwenden */
html[data-theme='dark'] body,
html[data-theme='dark'] .site,
html[data-theme='dark'] #page,
html[data-theme='dark'] .site-content,
html[data-theme='dark'] .ast-container {
  background-color: var(--bg);
  color: var(--fg);
}

html[data-theme='dark'] a {
  color: var(--accent);
}

/* Toggle-Button als runder Icon-Button */
.theme-toggle {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 9999;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

/* Sonnen-Icon: gefüllter Kreis */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid var(--accent-contrast);
}

/* Sonne = voll */
.theme-toggle .icon-sun {
  background-color: var(--accent-contrast);
}

/* Mond = Halbkreis */
.theme-toggle .icon-moon {
  background-color: transparent;
  box-shadow: -6px 0 0 0 var(--accent-contrast);
}

/* Nur eines der beiden Icons je nach Theme anzeigen */
.theme-toggle .icon-moon { display: none; }
html[data-theme='dark'] .theme-toggle .icon-sun { display: none; }
html[data-theme='dark'] .theme-toggle .icon-moon { display: block; }

/* Auf kleineren Screens etwas tiefer setzen (Mobile) */
@media (max-width: 768px) {
  .theme-toggle {
    top: 3rem;
    right: 0.75rem;
  }
}

/* Header auf der Startseite ausblenden */
.home .site-header {
  display: none;
}

/* ggf. zusätzlichen Abstand nach oben entfernen */
.home .site-content {
  margin-top: 0;
}

/* ☼ / ☾ Toggle-Button minimal stylen */
.theme-toggle {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* auf Mobile etwas tiefer */
@media (max-width: 768px) {
  .theme-toggle {
    top: 3rem;
    right: 0.75rem;
  }
}

/* Auf der Startseite nur den kleinen Footer zeigen */
.home .site-primary-footer-wrap,
.home .footer-adv-overlay {
  display: none;
}

/* Small Footer (Copyright/Astra-Hinweis) an Darkmode koppeln */
.ast-small-footer {
  background-color: var(--bg);
  color: var(--fg);
}

.ast-small-footer a {
  color: var(--accent);
}

/* Astra-Small-Footer vollständig übersteuern */
.ast-small-footer {
  background-color: var(--bg);
  color: var(--fg);
}

/* Original-Text unsichtbar machen */
.ast-small-footer .ast-footer-copyright {
  font-size: 0;
}

/* Eigener Text statt allem, was Astra ausgibt */
.ast-small-footer .ast-footer-copyright::after {
  content: "Copyright © parkour.community";
  font-size: 13px;
}

/* Alle Astra-Footerbereiche verstecken */
.site-footer,
.site-primary-footer-wrap,
.footer-adv-overlay,
.ast-small-footer {
  display: none;
}

/* Eigener schmaler Footer unten */
body::after {
  content: "Copyright © parkour.community";
  display: block;
  padding: 0.75rem 1rem;
  font-size: 13px;
  text-align: center;
  background-color: var(--bg);
  color: var(--fg);
}

/* Toggle-Grundstil: kreisrund, ohne blauen Browser-Hover */
.theme-toggle {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Lightmode: schwarzer Button, helle Sonne */
html:not([data-theme='dark']) .theme-toggle {
  background-color: #000000;
  color: #ffffff;
}

/* Darkmode: weißer Button, dunkler Mond */
html[data-theme='dark'] .theme-toggle {
  background-color: #ffffff;
  color: #000000;
}

/* Hover/Focus leicht aufhellen, aber ohne Blau */
.theme-toggle:hover,
.theme-toggle:focus-visible {
  filter: brightness(1.1);
}

/* Städte-Suggestions (Nominatim) */
#pkr-sug {
  background-color: #ffffff;
  color: #000000;
  border-radius: 10px;
}

/* Darkmode-Variante */
html[data-theme='dark'] #pkr-sug {
  background-color: #111111;
  color: #f5f5f5;
}

/* Einträge */
#pkr-sug li {
  padding: 0.35rem 0.75rem;
}

/* aktiver Eintrag */
#pkr-sug li.active {
  background-color: var(--accent);
  color: var(--accent-contrast);
}

/* ===== FIX: Städte-Dropdown (korrekte ID: pkr-suggestions) ===== */
#pkr-suggestions {
  position: absolute;
  z-index: 99999;
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0.4rem 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  filter: none !important;
  backdrop-filter: none !important;
  background-color: #ffffff !important;
  color: #111111 !important;
  min-width: 220px;
  overflow: hidden;
}

#pkr-suggestions li {
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  color: #111111 !important;
  background-color: transparent;
}

#pkr-suggestions li:hover,
#pkr-suggestions li.active {
  background-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

html[data-theme='dark'] #pkr-suggestions {
  background-color: #1a1a1a !important;
  color: #f0f0f0 !important;
}

html[data-theme='dark'] #pkr-suggestions li {
  color: #f0f0f0 !important;
}

/* Der Container braucht position:relative damit absolute klappt */
.pkr-input-wrap,
#pkr-input-wrap,
.pkr-search-wrap {
  position: relative;
}

/* Dropdown Darkmode - explizit übersteuern */
html[data-theme='dark'] #pkr-suggestions {
  background-color: #1e1e1e !important;
  color: #f0f0f0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

html[data-theme='dark'] #pkr-suggestions li {
  color: #f0f0f0 !important;
}

/* Input-Felder im Darkmode */
html[data-theme='dark'] input,
html[data-theme='dark'] input[type="text"],
html[data-theme='dark'] textarea,
html[data-theme='dark'] select,
html[data-theme='dark'] #pkr-input {
  background-color: #1e1e1e !important;
  color: #f0f0f0 !important;
  border-color: #444444 !important;
  caret-color: var(--accent);
}

/* Placeholder-Farbe im Darkmode */
html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] #pkr-input::placeholder {
  color: #888888 !important;
}

/* Autofill-Hintergrund (Chrome/Safari überschreiben das gerne) */
html[data-theme='dark'] input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1e1e1e inset !important;
  -webkit-text-fill-color: #f0f0f0 !important;
}