/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


/* Standard-Variablen für Light Mode */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

/* Globale Farben anwenden */
body {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode */
.dark-mode {
    --background-color: #121212;
    --text-color: #ffffff;
}

/* Zusätzliche Elemente im Dark Mode */
.dark-mode .maincontent,
.dark-mode .elementor-widget-container p,
.dark-mode .elementor-heading-title,
.dark-mode .elementor-icon-list-text,
.dark-mode .elementor-toc__header-title {
    color: #ffffff !important;
}

.dark-mode .maincontent a,
.dark-mode .maincontent p a {
    color: #00BCD4 !important;
}

.dark-mode .elementor-widget-table-of-contents a {
    color: #999999 !important;
}

.dark-mode .elementor-widget-table-of-contents,
.dark-mode .header {
    --box-background-color: #222222 !important;
    background: #222222 !important;
}

.dark-mode .side-menu .line {
    background: #ffffff !important;
}

/* ?? Stil des Dark-Mode-Buttons */
.dark-mode-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* ?? Sonne & ?? Mond Icons */
.dark-mode-icon {
    width: 28px; /* Größe der Icons */
    height: 28px;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ?? Standard: Sonne sichtbar, Mond versteckt */
#dark-mode-icon-light {
    opacity: 1;
    transform: scale(1);
    stroke: black; /* Sonnen-Icon schwarz */
}

/* ?? Mond-Icon ausblenden */
#dark-mode-icon-dark {
    opacity: 0;
    transform: scale(0.5);
    stroke: white; /* Mond-Icon weiß */
}

/* ?? Dark Mode: Mond einblenden, Sonne ausblenden */
.dark-mode #dark-mode-icon-light {
    opacity: 0;
    transform: scale(0.5);
}

.dark-mode #dark-mode-icon-dark {
    opacity: 1;
    transform: scale(1);
}

/* ?? Hintergrund-Änderung beim Hover */
.dark-mode-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

/* ? Fokus-Styling für Tastatur-Navigation */
.dark-mode-btn:focus {
    outline: 2px solid #00BCD4;
    outline-offset: 4px;
}

/* ?? Kleiner Druckeffekt beim Klicken */
.dark-mode-btn:active {
    transform: scale(0.9);
}





/* Ab hier Schriftgrößenanpassung */
#font-resizer {
  text-align: center;
  margin: 20px 0;
}

#font-resizer button {
  padding: 10px 15px;
  font-size: 18px;
  margin: 5px;
  cursor: pointer;
  border: 2px solid #000;
  background: #fff;
  transition: all 0.3s ease;
  border-radius: 5px;
}

/* Fokus-Styles für Tastatur-Nutzer */
#font-resizer button:focus {
  outline: 3px solid #007bff;
}

/* Hover-Effekt */
#font-resizer button:hover {
  background: #000;
  color: #fff;
}

/* Unsichtbar, aber für Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}