/* 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.4.1781183593 Updated: 2026-06-11 13:13:13 */ /* ============================================================ Theater der Schatten — Responsive Typografie (NUR Mobil/Tablet) Einfügen: WordPress -> Design -> Customizer -> Zusätzliches CSS WICHTIG: Kein Template-Re-Import nötig! Dieses Snippet wirkt ZUSÄTZLICH und verkleinert die Schriften ausschließlich auf kleinen Bildschirmen. Deine Desktop-Abstände und dein Layout in Elementor bleiben komplett unangetastet. Es trifft die fest gesetzten px-Größen aus den Templates über den jeweiligen Wert (Attribut-Selektor) — punktgenau, ohne die Hierarchie zu zerstören. ============================================================ */ /* ===== TABLET (≤ 880px) — sanft ===== */ @media (max-width: 880px) { [style*="font-size:78px"] { font-size: 60px !important; } [style*="font-size:72px"] { font-size: 56px !important; } [style*="font-size:44px"] { font-size: 38px !important; } [style*="font-size:36px"] { font-size: 30px !important; } [style*="font-size:34px"] { font-size: 29px !important; } [style*="font-size:28px"] { font-size: 25px !important; } .tds-acc .elementor-tab-title { font-size: 22px !important; } .elementor-widget-heading h1 { font-size: 48px !important; line-height: 1.0 !important; } } /* ===== HANDY (≤ 600px) — deutlich ===== */ @media (max-width: 600px) { /* Initialen / Drop Caps zähmen */ [style*="font-size:78px"] { font-size: 50px !important; padding-right: 10px !important; } [style*="font-size:72px"] { font-size: 46px !important; padding-right: 10px !important; } /* große serifige Zahlen / Tags / Zitate */ [style*="font-size:44px"] { font-size: 32px !important; } /* Ideen-Zahl */ [style*="font-size:36px"] { font-size: 25px !important; } /* Pull-Quote */ [style*="font-size:34px"] { font-size: 25px !important; } /* Epigraph / Tutorials-Titel */ [style*="font-size:28px"] { font-size: 22px !important; } /* Kurs-Tagline */ [style*="font-size:24px"] { font-size: 21px !important; } /* „Wege“-Karten */ /* Fließtext / Lead */ [style*="font-size:20px"] { font-size: 17px !important; line-height: 1.5 !important; } [style*="font-size:18px"] { font-size: 16px !important; } /* Akkordeon */ .tds-acc .elementor-tab-title { font-size: 20px !important; } .tds-acc .elementor-tab-content, .tds-acc .elementor-tab-content * { font-size: 16px !important; line-height: 1.55 !important; } /* große Überschriften (Astra-H1 in Heading-Widgets) */ .elementor-widget-heading h1 { font-size: 38px !important; line-height: 1.02 !important; } .elementor-widget-heading h3 { font-size: 26px !important; } } /* ============================================================ Theater der Schatten — Header-Submenü / Dropdown Einfügen: WordPress -> Design -> Customizer -> Zusätzliches CSS Deckt Desktop (schwebendes Dropdown) UND Mobil (eingeklapptes Submenü im Off-Canvas-Menü) ab. ".sub-menu" trifft Astra- wie Elementor-Menüs. ============================================================ */ /* ============================================================ 1) DESKTOP — schwebendes Dropdown ============================================================ */ .main-header-menu .sub-menu, .ast-builder-menu .sub-menu, .elementor-nav-menu .sub-menu, .sub-menu { background: #181410 !important; border: 1px solid #5F5A4E !important; border-top: 2px solid #D9A552 !important; /* Amber-Akzent oben */ border-radius: 0 0 3px 3px !important; box-shadow: 0 22px 48px -12px rgba(0,0,0,0.7) !important; padding: 6px 0 !important; min-width: 240px !important; } /* sanftes Einblenden beim Aufklappen */ .menu-item-has-children:hover > .sub-menu, .menu-item-has-children:focus-within > .sub-menu { animation: tdsDrop .22s cubic-bezier(.2,.7,.3,1) both; } @keyframes tdsDrop { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } /* Einträge */ .sub-menu li > a { color: #B0A99B !important; font-family: "Open Sans", system-ui, sans-serif !important; font-size: 16px !important; line-height: 1.4 !important; letter-spacing: 0 !important; padding: 11px 20px !important; border-bottom: 1px dashed #4A463C !important; box-shadow: inset 0 0 0 0 #D9A552; transition: color .18s, background .18s, box-shadow .18s, padding-left .18s; } .sub-menu li:last-child > a { border-bottom: 0 !important; } /* Hover / Fokus — Amber-Strich + leichtes Einrücken */ .sub-menu li > a:hover, .sub-menu li > a:focus { color: #F2ECDF !important; background: rgba(217,165,82,0.10) !important; box-shadow: inset 3px 0 0 0 #D9A552 !important; padding-left: 24px !important; } /* aktuelle Seite */ .sub-menu li.current-menu-item > a, .sub-menu li.current_page_item > a { color: #D9A552 !important; } /* Pfeil/Indikator am Eltern-Eintrag */ .menu-item-has-children > a .ast-icon, .menu-item-has-children > a:after { color: #D9A552 !important; transition: transform .2s ease; } .menu-item-has-children:hover > a .ast-icon { transform: rotate(180deg); } /* ============================================================ 2) MOBIL — eingeklapptes Submenü (Off-Canvas) Astra-Breakpoint: 921px. Kein Kasten, sondern Einrückung mit Amber-Führungslinie. ============================================================ */ @media (max-width: 921px) { .ast-mobile-header-wrap .sub-menu, #ast-mobile-header .sub-menu, .ast-builder-menu-mobile .sub-menu, .main-header-menu.ast-nav-menu .sub-menu, .sub-menu { background: transparent !important; border: 0 !important; border-left: 1px solid #5F5A4E !important; /* dezente Führungslinie */ border-radius: 0 !important; box-shadow: none !important; margin: 2px 0 6px 14px !important; /* Einrückung */ padding: 0 !important; min-width: 0 !important; animation: none !important; } .sub-menu li > a { font-size: 15px !important; color: #9C968A !important; padding: 12px 16px !important; border-bottom: 1px dashed #3C392F !important; box-shadow: none !important; } .sub-menu li > a:hover, .sub-menu li > a:focus { color: #EAE4D8 !important; background: rgba(217,165,82,0.07) !important; box-shadow: inset 2px 0 0 0 #D9A552 !important; padding-left: 18px !important; } /* Aufklapp-Pfeil (Astra-Toggle) */ .ast-menu-toggle, .main-header-menu .ast-menu-toggle { color: #D9A552 !important; } /* etwas mehr Luft zwischen den Hauptpunkten */ .main-header-menu > .menu-item > a, .ast-nav-menu > .menu-item > a { padding-top: 14px !important; padding-bottom: 14px !important; } } /* ============================================================ Theater der Schatten — Akkordeon im Linien-Look Einfügen: WordPress -> Design -> Customizer -> Zusätzliches CSS (oder Astra -> Customizer -> Zusätzliches CSS) Wirkt auf alle Akkordeons mit der CSS-Klasse "tds-acc" (ist im Template bereits vergeben). ============================================================ */ /* Kasten entfernen, nur gestrichelte Trennlinien */ .tds-acc .elementor-accordion-item{ border: 0 !important; border-bottom: 1px dashed #5F5A4E !important; background: transparent !important; } .tds-acc .elementor-accordion-item:first-child{ border-top: 1px solid #5F5A4E !important; } /* Titel- und Inhaltszeile randlos */ .tds-acc .elementor-tab-title, .tds-acc .elementor-tab-content{ border: 0 !important; background: transparent !important; } .tds-acc .elementor-tab-title{ padding-left: 0 !important; padding-right: 4px !important; } .tds-acc .elementor-tab-content{ padding-left: 0 !important; padding-right: 0 !important; } /* Hover + aktiver Zustand -> Amber */ .tds-acc .elementor-tab-title:hover{ color: #D9A552 !important; } .tds-acc .elementor-tab-title.elementor-active{ color: #EEBE6A !important; } /* Icon (Plus/Minus) Amber */ .tds-acc .elementor-tab-title .elementor-accordion-icon i{ color: #D9A552; } .tds-acc .elementor-tab-title.elementor-active .elementor-accordion-icon i{ color: #EEBE6A; } /* Display-Headline — Klasse liegt am Widget, Stil gehört auf die

darin */ .tds-display .elementor-heading-title { font-family: "Cormorant Garamond", Georgia, serif !important; font-style: italic !important; font-weight: 500 !important; font-size: clamp(64px, 8vw, 104px) !important; line-height: 0.95 !important; letter-spacing: -0.01em !important; } .tds-display .elementor-heading-title em { color: #D9A552 !important; font-style: italic !important; }