/* Sonia Semaan: Anpassungen für die Seitenwerkzeuge (werkstatt/frontend/seitenwerkzeuge, Stand 8078e57) und die Navigation.
   Wird nach den Stylesheets der Seite und vor werkzeuge.css geladen. */

/* Farben nur aus der Seite: Schiefer #39454b für Flächen und Rahmen (9,9:1 gegen Weiß),
   Orange #ec6707 nur beim Überfahren der Knöpfe (Icon 3,2:1, für Grafik ausreichend),
   Linien #e5e6e7, Text #333333. Der Schwarz-Weiß-Modus setzt alles weiter auf Schwarz. */
:root {
  --a11y-akzent: #39454b;
  --a11y-akzent-hover: #ec6707;
  --a11y-auf-akzent: #ffffff;
  --a11y-panel-grund: #ffffff;
  --a11y-panel-text: #333333;
  --a11y-panel-linie: #e5e6e7;
  --a11y-radius: 0;
  --wz-grund: #39454b;
  --wz-auf-grund: #ffffff;
}

/* Leiste und Panel schlicht: eckig, durchgezogene Rahmen, keine Schatten.
   "html" vorn, weil werkzeuge.css nach dieser Datei lädt. */
html .wz-btn { border: 2px solid #ffffff; box-shadow: none; }
html .wz-btn:hover { background: var(--a11y-akzent-hover); }
html .a11y-panel { border: 2px solid var(--a11y-akzent); box-shadow: none; font-weight: 400; }
html .a11y-close { border-radius: 0; }
html .a11y-close:hover { background: var(--a11y-panel-linie); }
html .a11y-switch { border-radius: 0; font-weight: 400; }
html .a11y-seg button,
html .a11y-pm,
html .a11y-reset { border: 2px solid var(--a11y-akzent); border-radius: 0; font-weight: 400; }
html .a11y-seg button:hover,
html .a11y-reset:hover,
html .a11y-pm:hover:not([disabled]) { border-color: var(--a11y-akzent-hover); }
html .a11y-seg button[aria-pressed="true"] { border-color: var(--a11y-akzent); }
html .a11y-knob { box-sizing: border-box; background: var(--a11y-panel-grund); border: 2px solid var(--a11y-akzent); border-radius: 0; }
html .a11y-knob::after { top: 3px; left: 3px; width: 16px; height: 16px; background: var(--a11y-akzent); border-radius: 0; box-shadow: none; }
html .a11y-switch[aria-checked="true"] .a11y-knob { background: var(--a11y-akzent); }
html .a11y-switch[aria-checked="true"] .a11y-knob::after { left: 21px; background: var(--a11y-auf-akzent); }

/* Grundschrift des Themes von pt auf rem (gleiche Werte), damit die Textvergrößerung wirkt. */
body, input, textarea, select { font-size: 1.166667rem; }
@media screen and (max-width: 1680px) { body, input, textarea, select { font-size: 1.083333rem; } }
@media screen and (max-width: 1280px) { body, input, textarea, select { font-size: 1rem; } }
@media screen and (max-width: 1000px) { body, input, textarea, select { font-size: .916667rem; } }
@media screen and (max-width: 736px)  { body, input, textarea, select { font-size: 1rem; } }

/* Navigation: Der Menüpunkt des Bereichs, in dem man gerade liest, bekommt eine Linie (navi-aktiv.js setzt aria-current).
   Als innerer Schatten, damit nichts verrutscht. */
#header nav ul li a { box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .2s ease-out; }
#header nav ul li a[aria-current] { box-shadow: inset 0 -3px 0 #333333; }
.mobile-menu a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em; }
@media (prefers-reduced-motion: reduce) { #header nav ul li a { transition: none; } }

/* Textkästen: deckend weiß statt durchscheinend, innere Ecken rund, Schatten zur Seitenmitte hin
   (rechter Kasten wirft nach links, linker nach rechts). Auf dem Handy stehen die Kästen unter dem Bild, dort ohne Rundung. */
.box.style2 { background-color: #ffffff; }
@media screen and (min-width: 737px) {
  .main.style2.left > .content  { border-radius: 0 1.25rem 1.25rem 0; box-shadow: 1.25rem 0 2.5rem -1rem rgba(57, 69, 75, .45); }
  .main.style2.right > .content { border-radius: 1.25rem 0 0 1.25rem; box-shadow: -1.25rem 0 2.5rem -1rem rgba(57, 69, 75, .45);
    /* Platz für die Seitenwerkzeuge am rechten Rand (24 px Abstand + 40 px Knopf) */
    padding-right: calc(1.4em + 4rem); }
}

/* Einfahren der Kästen etwas schneller und weich auslaufend (Theme: 1 s ease); bei reduzierter Bewegung ohne Einfahren. */
.main.style2 > .content { transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  .main.style2 > .content { transition: none; }
  .main.style2.inactive.left > .content, .main.style2.inactive.right > .content { transform: none; }
}

/* »Bilder ausblenden«: Die Fotos sind hier Hintergrundbilder der Abschnitte, das Modul blendet nur <img> aus.
   Ohne Foto ruhige Fläche, die Abschnitte schrumpfen auf ihren Text, die weißen Pfeile werden dunkel. */
html[data-a11y-images="hide"] .main.style2 {
  background-image: none !important;
  background-color: #f5f6f7 !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 4em;
  padding-bottom: 6em;
}
html[data-a11y-images="hide"] .main.dark .button.style2.down {
  background-image: url("/uploads/images/arrow.svg");
  border-color: #39454b;
}

/* Panel offen: Das Modul sperrt html und body. Weil das Theme body auf height:100% setzt,
   schneidet body dann die Seite ab und die Position springt nach oben. html allein sperrt das Scrollen. */
:root.a11y-open body { overflow: visible; }