/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*Menüpunkte im Frontend ausblenden (schwarze Leiste oben)*/
#wpadminbar #wp-admin-bar-plugins, #wp-admin-bar-themes, #wp-admin-bar-widgets, #wp-admin-bar-menus, #wp-admin-bar-simple-history-view-history, #wp-admin-bar-user-info .display-name {display: none !important;}

body {
    overflow-x: hidden;}

.site-logo {z-index: 999;}

/*Barrierefreiheit*/
/*Tastatureingabe*/
*:focus:not(:focus-visible) {outline: none;}
*:focus-visible {outline: 3px !important; outline-style: solid !important; outline-color: darkgray !important; color:var(--contrast)!important; background-color:var(--base) !important; border-radius: 30px !important; padding-left: 4px; padding-right: 4px; text-decoration: none;}

/*Kein bläulicher Hintergrund beim antippen von links mobil*/
@media (max-width: 768px) {a, .gb-button, .gb-menu-item, .gb-menu-toggle, .reading-mode-button, .dark-mode-toggle-button {-webkit-tap-highlight-color: transparent!important;}}

/*Scrollbalken anpassen*/
* {scrollbar-color:var(--contrast) var(--contrast-3);}
/* width */
::-webkit-scrollbar {width: 15px;}
::-webkit-scrollbar-button:vertical:start {background-color:var(--base);}
::-webkit-scrollbar-button:vertical:end {background-color:var(--base);}
/*End Scrollbalken anpassen*/
/* width */
::-webkit-scrollbar {width: 5px;}
/* Track */
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;border-radius: 15px;}
/* Handle */
::-webkit-scrollbar-thumb {
  background:var(--base-3);
  border-radius: 15px;}
::-webkit-scrollbar-button:vertical:start {background-color:var(--base);}
::-webkit-scrollbar-button:vertical:end {background-color:var(--base);}

/*Back-to-top Styling*/
.generate-back-to-top {
    border-radius: 100%;
	line-height: 38px;
	width: 38px;
	z-index: 99;
	font-size: 1.7rem !important;}

/*Back-to-top mobil*/
@media(max-width:768px) {.generate-back-to-top {margin-bottom: -15px; margin-right: -20px;}
	.inside-site-info {padding-left: 20px; padding-right: 19px; padding-bottom: 30px}}	
/*Back-to-top Desktop*/
@media(min-width:769px) {.generate-back-to-top {margin-bottom: -16px; margin-right: -16px;}}

/*Typografie-Größen mit Skalierungs-Variable*/
:root {
  --font-size-multiplier: 1; /* Standard-Multiplikator */
}

.h1-start, .h2-start {
  font-size: clamp(calc(2rem * var(--font-size-multiplier)), calc((-1.2714rem + 8.7238vw) * var(--font-size-multiplier)), calc(13.45rem * var(--font-size-multiplier))); font-weight: 300;
}

/*Schriftgrößen NEU Startseite*/
.rk-h2-start {
  font-size: clamp(calc(1.7rem * var(--font-size-multiplier)), calc((0.8704rem + 4.1481vw) * var(--font-size-multiplier)), calc(4.5rem * var(--font-size-multiplier)));
}

/*Schriftgrößen NEU Startseite*/
.rk-h2-section {
  font-size: clamp(calc(2.1rem * var(--font-size-multiplier)), calc((0.9444rem + 5.7778vw) * var(--font-size-multiplier)), calc(6rem * var(--font-size-multiplier)));
}

.rk-h3-start {
  font-size: clamp(calc(1.875rem * var(--font-size-multiplier)), calc((1.3148rem + 1.9259vw) * var(--font-size-multiplier)), calc(3rem * var(--font-size-multiplier)));
}

.h3-leistungen {
  font-size: clamp(calc(2.0625rem * var(--font-size-multiplier)), calc((1.3403rem + 3.6111vw) * var(--font-size-multiplier)), calc(4.5rem * var(--font-size-multiplier)));	
}

.p-rk-start {
  font-size: clamp(calc(1.25rem * var(--font-size-multiplier)), calc((1.1167rem + 0.6667vw) * var(--font-size-multiplier)), calc(1.7rem * var(--font-size-multiplier)));
}




.rk-h1, .rk-h2 {
  font-size: clamp(calc(1.5rem * var(--font-size-multiplier)), calc((0.2563rem + 6.2185vw) * var(--font-size-multiplier)), calc(10.75rem * var(--font-size-multiplier))); font-weight: 300;
}

h1 {
  font-size: clamp(calc(1.25rem * var(--font-size-multiplier)), calc((-1.1364rem + 10.9091vw) * var(--font-size-multiplier)), calc(5rem * var(--font-size-multiplier))); font-weight: 300;
}

.h1-post {
  font-size: clamp(calc(1.25rem * var(--font-size-multiplier)), calc((-1.1364rem + 10.9091vw) * var(--font-size-multiplier)), calc(5rem * var(--font-size-multiplier))); font-weight: 300;
}
@media(min-width:1025px) and (max-width:1750px){
	.h1-post {font-size: 3.2rem;}	
}
	
p, ul, li {
  font-size: clamp(calc(1.25rem * var(--font-size-multiplier)), calc((1.1167rem + 0.6667vw) * var(--font-size-multiplier)), calc(1.7rem * var(--font-size-multiplier)));
  font-weight: 400;
}

@media(min-width: 1025px) { 
.gb-menu-link {font-size: clamp(calc(1.25rem * var(--font-size-multiplier)), calc((1.0893rem + 0.0952vw) * var(--font-size-multiplier)), calc(1.25rem * var(--font-size-multiplier)));
  font-weight: 400;
}}

.site-content a {
  font-size: clamp(calc(1.25rem * var(--font-size-multiplier)), calc((1.1167rem + 0.6667vw) * var(--font-size-multiplier)), calc(1.7rem * var(--font-size-multiplier)));
}

/*"Code"-Schrift im Blogartikel angepasst*/
.code  {font-size: clamp(calc(1.25rem * var(--font-size-multiplier)), calc((1.1167rem + 0.6667vw) * var(--font-size-multiplier)), calc(1.7rem * var(--font-size-multiplier)));
}

/*MATOMO*/
#matomo-opt-out strong {font-weight:350; margin-left: 8px; font-size: clamp(calc(1.25rem * var(--font-size-multiplier)), calc((1.1167rem + 0.6667vw) * var(--font-size-multiplier)), calc(1.7rem * var(--font-size-multiplier)));
}

/*Footer*/
.site-info, .site-info a {font-size: clamp(calc(1.25rem * var(--font-size-multiplier)), calc((1.0691rem + 0.2553vw) * var(--font-size-multiplier)), calc(1.5rem * var(--font-size-multiplier)))!important;
}

h2, h3, h4, h5 {
  font-size: clamp(calc(1.7rem * var(--font-size-multiplier)), calc((1.2259rem + 2.3704vw) * var(--font-size-multiplier)), calc(3rem * var(--font-size-multiplier)));
}

/* Sicheren Umbruch für lange Überschriften gewährleisten */
h1, .h1-start, .h2-start, h2, h3, h4, h5 {
  
  /* Erlaubt dem Browser, lange Wörter umzubrechen, um ein Überlaufen zu verhindern */
  overflow-wrap: break-word;
  word-wrap: break-word; /* Wichtig für die Kompatibilität mit älteren Browsern */
}

/* Mauszeiger bei Hover über die Zoom-Buttons ändern */
.font-increase-button,
.font-decrease-button,
.font-reset-button {
  cursor: pointer;
}

/*END Styling Schriftvergrößerung*/

/*Styling Kontaktformular*/

.rk-field-desc,.rk-textarea, .rk-field-desc a, input, .error-message, .rk-button  {font-size: clamp(calc(1.125rem * var(--font-size-multiplier)), calc((1.041rem + 0.4202vw) * var(--font-size-multiplier)), calc(1.75rem * var(--font-size-multiplier)));
  font-weight: 400;
}

/*Styling Erfolgsmeldung*/
.rk-form-success-msg {color: var(--base-3); font-size: clamp(calc(1.125rem * var(--font-size-multiplier)), calc((0.9434rem + 0.8302vw) * var(--font-size-multiplier)), calc(2.5rem * var(--font-size-multiplier))); margin-left: -5px; margin-top: 40px; padding: 6%; background-color: var(--contrast-2); border-radius: 10px; box-shadow: 4px 4px 8px rgba(0,0,0,0.32);}

.rk-field-desc a:link {font-weight: 500;}

.rk-field {box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.32);}	
.rk-field {border-radius: 30px; margin: 5px 0px 0px -8px;}
	
input[type="text"], input[type="email"], input[type="tel"], input[type="url"] {border: 0px; border-radius: 30px;} 

/*Border korrekt ausrichten textarea Chrome, Firefox*/
/*Firefox*/
@-moz-document url-prefix() {
	.rk-textarea {margin-bottom: 0px!important; border: 0px; border-radius: 30px;}

/*Site-Logo Höhe angepasst in FF*/.gb-text-aa133497 {margin-top: -10px!important; margin-bottom: 15px;}

	.rk-textarea:focus {
        margin-bottom: -2px!important; border-radius: 28px;}}

	/*alle anderen Browser*/
.rk-textarea {margin-bottom: -7px; border: 0px; border-radius: 30px;}

.required-label {color: darkmagenta; font-size: 1.6rem; margin-left: 2px;}
.form-general-error {color: red !important;}

.rk-button {border-radius: 50px; padding: 3px 33px 3px 33px; margin-top: 20px; box-shadow: 4px 4px 8px rgba(0,0,0,0.32);}
.rk-button:hover {box-shadow: 3px 4px 4px grey; transition: ease 0.2s;}

.error-message {color: #b90000; font-size: clamp(calc(1.125rem * var(--font-size-multiplier)), calc((1.041rem + 0.4202vw) * var(--font-size-multiplier)), calc(1.75rem * var(--font-size-multiplier))); font-weight: 400; margin-top: 10px;}

/*END Styling Kontaktformular*/

/*Listenpunkte mit Abstand versehen*/
li {margin-bottom: 10px;}

/*Site-Logo Höhe in anderen Browsern angepasst*/
.gb-text-aa133497 {margin-top: -10px; margin-bottom: 10px;}

/*@media(min-width:1025px) and (max-width:1410px){.gb-element-39916fb4 {display: flex; flex-direction: column; justify-content: space-between;} .gb-text-0112c40e {margin-left: 5vw;margin-right: 5vw;}}*/

/*Abstand zum Logo erhöht auf größeren Bildschirmen*/
@media(min-width:2000px){.gb-element-39916fb4 {margin-top: -2vh;}}

/*Bildbreite erhöhen bei größeren Bildschirmen*/
@media (min-width: 1920px){.wp-image-1242, .wp-image-47, .wp-image-45, .wp-image-4604 {min-width:25vw;}}

.label {text-decoration: none!important;}

/*Styling Fußzeile*/
@media (max-width:768px){ .site-info a {margin: 0px 0px 0px 0px;} .mbottom {margin-bottom: 3px!important;}}
@media (min-width:769px){.site-info {padding: 0px 45px 0px 30px;}}

.site-info a {text-decoration: none;}

@media(min-width: 1025px){.copyright-bar {margin-bottom: -8px;}}
.site-info a {font-size: 18px;}

@media (max-width: 1190px) {.email {margin-top: 50px;}}

/*Text "Footernavigation" ausgeblendet*/
.widgettitle {display: none;}

p {text-align: left;}

.site-info a {padding: 2px 6px 3px 6px;}

@media(prefers-color-scheme: dark){
body, .dmdark {background: var(--contrast);} 

a:active {
	color: var(--base-2)!important;}
a:visited {
	color: var(--base-2)!important;}

.site-info a:focus {color: var(--contrast)!important;}
	
.gb-menu-link:hover {color: var(--contrast)!important;}
	.gb-menu-link:focus {background: var(--accent)!important;}
	.gb-menu-item {background: var(--accent)!important; box-shadow: 4px 4px 8px rgba(0,0,0,0.32);}
	
.dmd {background:var(--contrast)!important;}
.dmt {color:var(--contrast-2);}
.dmt:hover {color: white!important;}
.dmb {color: var(--contrast)!important;} /*Schrift schwarz in hellen Buttons*/
	
.darkmode {border-color: var(--contrast-3);}
.gb-shape .cls-1 {stroke: var(--contrast-3);}
.kontakt-left {background-color: var(--accent)!important;}

.gb-tabs__menu-item:is(.gb-block-is-current, .gb-block-is-current:hover, .gb-block-is-current:focus) {border-color: white;}
	
.gb-text-14cce9c3.dark-mode-toggle-button {display: none!important;} 
@media (max-width: 768px){.dmd {padding: 20px 0px 40px 0px;}
.kontakt-left {margin-bottom: 40px;} /*mehr Abstand Überschrift zu erster Box*/
.gb-element-77a45dea {height:15vw;} /*R&K Logo größer durch Höhe*/
}
	
/*Filter drop-shadow deaktivieren bei SVG etc*/
.dmb, .gb-shape svg {filter: none!important;}
	
/*Gebogene Pfeile gegen weiße ersetzen darkmode*/
.pfeil .gb-shape {content: url(https://renner-und-koenigk.de/wp-content/uploads/2025/10/Pfeil-weiss-nach-rechts-oben.svg); width: 1em;
  height: 1em;}

/*Blog Pfeil ersetzen*/
.gb-icon {content: url(https://renner-und-koenigk.de/wp-content/uploads/2025/10/Pfeil-weiss-nach-rechts-oben.svg);
width: 1em;
  height: 1em;}
	
.dynamic-entry-excerpt p {color: var(--contrast)!important;} /*Blog Beitragsauszüge*/

/*Pfeil rund gegen weißen Pfeil ersetzen im darkmode*/
.gb-media-04c5e679 {content: url(https://renner-und-koenigk.de/wp-content/uploads/2025/10/Kreis-rund-weiss.svg);}
	
/*Styling Kontaktformular*/	
.rk-field-desc {color: var(--contrast-3);}
	
input[type="text"] {background: var(--beige);}
input[type="email"] {background: var(--beige);}
input[type="tel"] {background: var(--beige);}
input[type="url"] {background: var(--beige);}
textarea {background: var(--beige);}

.rk-button {background: var(--contrast-2);}

.error-message, .form-general-error, .required-label {color: yellow;}
	.error-message {background: var(--contrast-2)!important; display: inline-block; margin-bottom: 10px;}
	.pflicht {color: whitesmoke;}
.rk-form-success-msg {background-color: var(--contrast-2)!important;}	

@media (max-width:1024px){
	.reading-mode-button {margin-bottom: 0px!important;}
}
	
/*MATOMO*/
#matomo-opt-out strong {color: var(--contrast-3);}
	
/*Logo weiß im dm*/
.gb-text-aa133497 .gb-shape svg {fill: var(--base)!important;}
.gb-text-aa133497 .gb-shape svg a:focus {fill: black!important;}
	
.skip-link {color: white!important; background-color:var(--contrast) !important;}
.site-header, .inside-header, .site-content, .inside-site-info, .footer-bar-active {background-color: var(--contrast);}	
p, ul, ol, li {color:var(--contrast-3)!important;}
a, .copyright-bar {color:var(--base)!important;}
	a:hover {color:var(--contrast-3)!important;}
h1, h2, h3, h4, h5 {color:var(--contrast-3)!important;}
	.h2-start {color: white !important;}
	.hl-beitraege {color: var(--contrast)!important;}
.button-rund {background: var(--accent)!important; border:solid 1px; border-color:var(--accent);}
	.button-rund:hover {background: var(--contrast)!important; color: white!important;}
.generate-back-to-top {color:var(--contrast) !important; background:var(--base-2)!important;}
	.generate-back-to-top:hover {color:var(--contrast) !important; background:var(--contrast-3)!important;}	
}
/*END Darkmode*/

/*Styling Links im Body*/
a:hover, .gb-text:hover {text-decoration-thickness: 0.13em; text-underline-offset: 0.1em; transition: ease-in-out; transition-duration: 0.2s;}/*END Styling Links*/
.site-info a:hover {text-decoration: underline; text-decoration-thickness: 0.13em;}/*Underline Footer on hover*/

/*Styling Beiträge*/
.entry-meta {display: none;}

/* Fade-in Animationen */
/* 1. Startzustand: Alle Animationselemente initial unsichtbar */
.animate-left,
.animate-right,
.animate-up,
.animate-down,
.animate-zoom,
.stagger-container > * {
  opacity: 0;
  will-change: opacity, transform;
}

/* 2. Keyframes */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-400px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(400px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* 3. Auslöser bei Sichtbarkeit */
.animate-left.is-visible   { animation: fadeInLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-right.is-visible  { animation: fadeInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-up.is-visible     { animation: fadeInUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-down.is-visible   { animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-zoom.is-visible   { animation: zoomIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Stagger-Animation für Container (standardmäßig nach oben gleitend) */
.stagger-container.is-visible > *:nth-child(1) { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.0s forwards; }
.stagger-container.is-visible > *:nth-child(2) { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; }
.stagger-container.is-visible > *:nth-child(3) { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.30s forwards; }
.stagger-container.is-visible > *:nth-child(4) { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards; }

/* Manuelle Delay-Klassen */
.delay-1 { animation-delay: 0.2s !important; }
.delay-2 { animation-delay: 0.5s !important; }
.delay-3 { animation-delay: 0.8s !important; }

.delay-1-arrow { animation-delay: 0.35s !important; }
.delay-2-arrow { animation-delay: 0.65s !important; }
.delay-3-arrow { animation-delay: 0.95s !important; }

/* 4. Deaktivierung für Smartphones & Barrierefreiheit */
/* @media (prefers-reduced-motion: reduce), (max-width: 768px) {
  .animate-left,
  .animate-right,
  .animate-up,
  .animate-down,
  .animate-zoom,
  .stagger-container > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
} */

/* Deaktivierung via Manuellem Button (body.reduce-motion) */
body.reduce-motion .animate-left,
body.reduce-motion .animate-right,
body.reduce-motion .animate-up,
body.reduce-motion .animate-down,
body.reduce-motion .animate-zoom,
body.reduce-motion .stagger-container > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Deaktivierung via Systemeinstellung (OS) & für Mobilgeräte */
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  .animate-left,
  .animate-right,
  .animate-up,
  .animate-down,
  .animate-zoom,
  .stagger-container > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
	
/* Button-Styling Animationen pausieren */

/* Standard: Play-Icon verstecken */
.motion-toggle-btn .icon-play {
  display: none;
}

/* Wenn pausiert: Pause-Icon weg, Play-Icon anzeigen */
.motion-toggle-btn[aria-pressed="true"] .icon-pause {
  display: none;
}

.motion-toggle-btn[aria-pressed="true"] .icon-play {
  display: inline-block;
}

.motion-toggle-btn {	
  align-items: center;
  aspect-ratio: 1/1;
  background-color: var(--beige);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  color: var(--contrast-2);
  column-gap: 0.5em;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  width: 38px;
  border-radius: 50px;
}	
	
/* END Fade-in Animationen */


/*Fade in Toggle-Effekt*/
.fade-in-toggle {
	animation: fadeIn 6s;
	-webkit-animation: fadeIn 6s;
  -moz-animation: fadeIn 6s;
  -o-animation: fadeIn 6s;
  -ms-animation: fadeIn 6s;}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}}	
@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% {opacity: 1;}}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% { opacity: 1;}}
@-o-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}}
@-ms-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}/*End Fade in Toggle*/

/* Dark Mode Styles (Trigger by .dark-mode class) */

/* Wenn der body die Klasse .dark-mode hat, wende diese Stile an */

body.dark-mode {
  background: var(--contrast);
}

body.dark-mode .site-content a:visited {
	color: var(--base-2);}

body.dark-mode a:focus {
	color: var(--contrast)!important;}

body.dark-mode .gb-menu-item {background: var(--contrast-2);}
body.dark-mode .gb-menu-item a {color: var(--base-2)!important;}
body.dark-mode .gb-menu-link:hover {color: var(--contrast-2)!important;}
body.dark-mode .gb-menu-link:hover {background: var(--base)!important; border-radius: 30px;}
.gb-menu-item-mi08e2c7:is(:hover, :focus-within) {
  list-style-position: inside;
}

body.dark-mode .dmd {
  background: var(--contrast);
}

body.dark-mode .dmt:hover {
  color: white !important;
}

body.dark-mode .kategorie a:hover {color: var(--contrast)!important;} /*Kategorien schwarz bei hover*/

body.dark-mode .darkmode {border-color: var(--contrast-3);}
body.dark-mode .gb-shape .cls-1 {stroke: var(--contrast-3);}
body.dark-mode .kontakt-left {background-color: var(--darkmode-hg)!important;}
body.dark-mode .postdark {background-color: var(--darkmode-hg)!important;}

/*Filter drop-shadow deaktivieren für SVG und Co.*/
body.dark-mode .dmb {filter: none!important;}
body.dark-mode .gb-shape svg {filter: none!important;}

/* Styling Kontaktformular im Dark Mode */
@media(max-width:768px){
body.dark-mode .kontakt-left {margin-bottom: 40px;}
}

body.dark-mode .rk-field-desc {
  color: var(--contrast-3);
}

body.dark-mode input[type="text"] {background: var(--beige);}
body.dark-mode input[type="email"] {background: var(--beige);}
body.dark-mode input[type="tel"] {background: var(--beige);}
body.dark-mode input[type="url"] {background: var(--beige);}
body.dark-mode textarea {background: var(--beige);}

body.dark-mode .error-message,
body.dark-mode .required-label {
  color: yellow;
}
	
body.dark-mode .rk-field [aria-invalid="true"] {
  background-image: none; border-color: yellow;
}

body.dark-mode .pflicht {
  color: whitesmoke;
}

body.dark-mode .rk-button {
  background: var(--contrast-2);}

/* MATOMO im Dark Mode */
body.dark-mode #matomo-opt-out strong {
  color: var(--contrast-3);
}

/* Weitere Dark Mode Stile */

body.dark-mode .site-header,
body.dark-mode .inside-header,
body.dark-mode .site-content,
body.dark-mode .inside-site-info,
body.dark-mode .footer-bar-active,
body.dark-mode .dmdark
{
  background-color: var(--contrast);
}

body.dark-mode p,
body.dark-mode ul,
body.dark-mode ol,
body.dark-mode li
{color: var(--contrast-3) !important;}

body.dark-mode a,
body.dark-mode .copyright-bar {
  color: var(--base);
}

/*Logo weiß im dm*/
body.dark-mode .gb-text-aa133497 .gb-shape svg {
  fill: var(--base);}
body.dark-mode .gb-text-aa133497 .gb-shape svg a:focus {
  fill: var(--contrast-2)!important;}

body.dark-mode a:hover {
  color: var(--contrast-3);
}

body.dark-mode a:focus {
  color: var(--contrast) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
  color: var(--contrast-3) !important;
}

body.dark-mode .button-rund {
  background: var(--contrast-2);
}

body.dark-mode .button-rund:hover {
  color: var(--contrast-2) !important;
  background: var(--base) !important;
}

body.dark-mode .generate-back-to-top {
  color: var(--contrast) !important;
  background: var(--base-2) !important;
}

body.dark-mode .generate-back-to-top:hover {
  color: var(--contrast) !important;
  background: var(--contrast-3) !important;
}

/* END manueller Darkmode */


/*Prefers reduced Motion*/
@media (prefers-reduced-motion: reduce) {*,*::before,
  *::after {scroll-behavior: auto !important;
    animation-duration: .01s !important;
	  transition-duration: .01s !important;}}
/*Ende prefers reduced Motion*/

/*Animationen. Dem jeweiligen Block o.ä. die ID meinElement und die Klasse unanimiert vergeben*/
.unanimiert {
  opacity: 0;
  transform: translateY(20px); /* Beispiel: Leichter Slide-Up-Effekt */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.sichtbar {
  opacity: 1;
  transform: translateY(0);
}
/*END Animationen*/