@import url("theme-4diget.css");

/* Farbwerte, Schriften und Abstaende stehen in theme-4diget.css — hier steht nur Aufbau. */

/*
 * Der rem-Anker.
 *
 * 100% ist die Schriftgroesse, die der Browser vorgibt — normalerweise 16px,
 * bei einem Nutzer mit eingestellter Grossschrift entsprechend mehr. Damit
 * ist 1rem genau diese Groesse, und jede Angabe in dieser Datei rechnet
 * dagegen.
 *
 * Hier darf KEINE feste Groesse stehen. Die Barrierefreiheit skaliert ueber
 *
 *     html[data-bf] { font-size: calc(100% * var(--bf-font, 1)); }
 *
 * und dreht damit an genau dieser Wurzel. Alles in rem waechst mit, alles in
 * px bliebe stehen. Ein `font-size: 18px` an dieser Stelle wurde von der
 * Bf-Regel ohnehin geschlagen — es war seit Einfuehrung von Bf wirkungslos.
 *
 * Die Textgroesse der Seite steht deshalb am body, eine Ebene tiefer, wo Bf
 * nicht dazwischenfunkt.
 */
html {
    font-family: var(--font-body);
    font-size: 100%;
}

body {
    font-size: var(--font-size-base);
    background-color:var(--color-on-primary);
    margin:0;
    padding:0;
}

/*
 * Breitenbegrenzung gehoert an den INHALT, nicht an den body.
 * Lag sie am body, konnten Kopf- und Fussbereich ihren Hintergrund nicht
 * ueber die volle Bildschirmbreite ziehen — die Farbflaeche endete am
 * Textrand und die Seite wirkte wie ein Kasten in der Mitte.
 */
main {
    max-width: 65em;
    margin: 0 auto;
}

header > *,
footer > * {
    max-width: 65em;
    margin-left: auto;
    margin-right: auto;
}

header {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    padding:0.9375rem;
}

.headermenu {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    line-height: 2.5rem; /* feste Höhe nur für Hauptmenüpunkte */
}

.headermenu > li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    outline: none; /* entfernt Standard-focus-Rahmen*/
}

/*
 * Menuepunkt mit Untermenue.
 *
 * Der Kern erzeugt diese Huelle nur fuer Menuepunkte mit Untermenue.
 * Frueher galt die Regel fuer jedes .item-wrapper und traf damit auch
 * Kaesten im Inhalt. Den Kasten gestaltet die Regel weiter unten.
 */
.has-submenu > .item-wrapper {
    display: flex;
    align-items: center;
    padding: 0 0.9375rem;
    line-height: 2.5rem;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    background: none;
    margin: 0;
}

.main-link {
    color: var(--color-on-primary);
    text-decoration: none;
}

.headermenu a {
    float: left;
    display: block;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    text-align: center;
    padding: 1rem 0.625rem;
    text-decoration: none;
    font-size: 1.25rem;
}

.headermenu a:hover {
    background-color: var(--color-on-primary);
    color: var(--color-primary);
}

.sub-menu {
    display: none;
    position: absolute;
    top: 3.125rem;
    left:0;
    background-color: var(--color-primary);
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 11.25rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.3);
    z-index: 100;
}

.sub-menu li a {
    display: block;
    padding: 0.625rem 0.9375rem;
    color: var(--color-on-primary);
    text-decoration: none;
    border-bottom: 0.0625rem solid var(--color-primary-dark);
}

.sub-menu li a:hover {
    background-color: var(--color-on-primary);
    color: var(--color-primary);
}

.has-submenu {
    position: relative;
}

.arrow {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 0.625rem;
    padding: 0;
    width: 0;
    height: 0;
    /* Das eigentliche Dreieck */
    border-top: 0.3125rem solid transparent;
    border-bottom: 0.3125rem solid transparent;
    border-left: 0.4375rem solid var(--color-muted);
    transition: transform 0.2s, border-left-color 0.2s;
}

.arrow:focus {
    outline:none;
}

.has-submenu:hover .sub-menu,
.has-submenu:focus-within .sub-menu {
    display: block;
}

.has-submenu:hover .arrow,
.has-submenu:focus-within .arrow {
    transform: rotate(90deg);
    border-left-color: var(--color-on-primary);
}

.has-submenu:focus-within > .item-wrapper {
    background: var(--color-focus-bg);
}

main {
    background-color: var(--color-on-primary);
    color: var(--color-primary);
    padding:0.9375rem;
}

/*
 * Kasten im Inhalt
 *
 * Fasst ein Thema sichtbar zusammen: ein Produkt, ein Hinweis, ein
 * Werkzeug. Ueberschrift oben, darunter zwei bis drei kurze Absaetze.
 *
 *   { "type": "element", "tag": "div", "classes": ["item-wrapper"],
 *     "content": [ … ] }
 *
 * Heller Grund, feiner Rahmen, links eine Akzentkante. So hebt sich der
 * Kasten vom Fliesstext ab, ohne zu schreien.
 */
main .item-wrapper {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border: 0.0625rem solid var(--color-border-strong);
    border-left: 0.25rem solid var(--color-accent);
    border-radius: 0.625rem;
    background: var(--color-surface);
}

main .item-wrapper > :first-child {
    margin-top: 0;
}

main .item-wrapper > :last-child {
    margin-bottom: 0;
}

main .item-wrapper h2,
main .item-wrapper h3,
main .item-wrapper h4 {
    margin: 0 0 0.5rem;
    color: var(--color-heading);
}

main .item-wrapper p {
    margin: 0 0 0.6rem;
}

main .item-wrapper ul {
    margin: 0 0 0.6rem 1.25rem;
}

/* Mehrere Kaesten nebeneinander, sobald Platz da ist. */
.kasten-paar {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.kasten-paar .item-wrapper {
    margin: 0;
}


.blog-layout {
    display:flex;
    gap:2.5rem;
    align-items: flex-start;
}

.blog_content {
    flex:1;
}

.sidebar {
    border-left-style: solid;
    border-left-width: 0.125rem;
    border-left-color:var(--color-border);
    width:25%;
    padding:0.9375rem;
}

.kurs-layout {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.kurs-content {
    flex: 1;
}

.kurs-sidebar {
    border-right-style: solid;
    border-right-width: 0.125rem;
    border-right-color: var(--color-border);
}

/* Bild links, Text rechts daneben */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.bild-links {
    float: left;
    margin-right: 1.25rem;
    margin-bottom: 0.625rem;
}

.bild-rechts {
    float: right;
    margin-left: 1.25rem;
    margin-bottom: 0.625rem;
}

/* Sonderformate */
.streichpreis {
    color: var(--color-accent-dark);
    text-decoration: line-through;
}

.div-center {
    text-align: center;
}

.text-orange {
    color: var(--color-accent)!important;
}

/* Link im Button-Style */
.button-link {
  display: inline-block;
  text-decoration: none;
  margin-top: 1.5625rem;
  padding: 0.75rem 1.25rem;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: var(--color-accent);
  color: var(--color-primary);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button-link:hover,
.button-link:focus-visible {
  background-color: var(--color-accent-dark); 
  color: var(--color-primary-dark);
}

/* Nach einem Mausklick bleibt ein Link fokussiert (neues Fenster, Zurück-Taste).
   :focus-visible färbt nur bei Tastaturbedienung — dann aber mit sichtbarem Rahmen. */
.button-link:focus-visible {
  outline: 0.1875rem solid currentColor;
  outline-offset: 0.125rem;
}

/* Formulare */
.registerform, .loginform {
  max-width: 25rem;
  margin: 1.25rem;
  padding: 0.9375rem 1.25rem;
  background-color: var(--color-surface);
  border: 0.0625rem solid var(--color-border-strong);
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.1);
  font-family: var(--font-body);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}

.contactform {
  max-width: 80%;
  margin: 1.25rem;
  padding: 0.9375rem 1.25rem;
  background-color: var(--color-surface);
  border: 0.0625rem solid var(--color-border-strong);
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.1);
  font-family: var(--font-body);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}

.registerform label, .loginform label, .contactform label {
  margin-top: 0.9375rem;
  margin-bottom: 0.3125rem;
  font-weight: bold;
}

.registerform input,
.loginform input,
.contactform input,
.contactform select,
.contactform textarea {
  padding: 0.5rem 0.625rem;
  font-size: 1rem;
  border: 0.0625rem solid var(--color-border-strong);
  border-radius: 0.25rem;
  width: 100%;
  box-sizing: border-box;
}

.registerform button[type="submit"],
.loginform button[type="submit"],
.contactform button[type="submit"] {
  margin-top: 1.5625rem;
  padding: 0.75rem 1.25rem;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: var(--color-accent);
  color: var(--color-primary);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.registerform button[type="submit"]:hover,
.registerform button[type="submit"]:focus-visible,
.loginform button[type="submit"]:hover,
.loginform button[type="submit"]:focus-visible,
.contactform button[type="submit"]:hover,
.contactform button[type="submit"]:focus-visible {
  background-color: var(--color-accent-dark); 
  color: var(--color-primary-dark);
}

/* Nach einem Mausklick bleibt ein Link fokussiert (neues Fenster, Zurück-Taste).
   :focus-visible färbt nur bei Tastaturbedienung — dann aber mit sichtbarem Rahmen. */
.registerform button[type="submit"]:focus-visible,
.loginform button[type="submit"]:focus-visible,
.contactform button[type="submit"]:focus-visible {
  outline: 0.1875rem solid currentColor;
  outline-offset: 0.125rem;
}

/* footer */
footer {
    background-color: var(--color-primary);
    text-align: center;
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
}

.copyright {
    color: var(--color-on-primary);
    text-align: center; 
    font-size: 0.9375rem;
    padding-top: 0.9375rem;  
}

/* Navigation im Footer */
.footermenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footermenu li {
    float: left;
    display: inline;
    list-style: none;
}

.footermenu {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    overflow: hidden;
    display: flex;
    text-align: center;
}

.footermenu a {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    text-align: center;
    padding: 1rem 0.625rem;
    text-decoration: none;
    font-size: 1.0625rem;
}

.footermenu a:hover {
    background-color: var(--color-on-primary);
    color: var(--color-primary);
}

.footermenu a.active {
    background-color: var(--color-primary-dark);
    color: var(--color-surface-alt);
}

.reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
}

/* --- Nach-oben-Knopf ------------------------------------------------
   Wird von app.js erzeugt, sobald weit genug gescrollt wurde, und
   schiebt sich ueber den Fussbereich, wenn dieser ins Bild kommt.

   Groesse und Randabstand kommen aus denselben Variablen wie das
   Barrierefreiheit-Widget (bf.css setzt sie auf :root). Damit sind
   beide Knoepfe gleich gross und gleich weit vom Rand. Ohne die
   Bf-Erweiterung greifen die Ersatzwerte. */
#back-to-top {
    position: fixed;
    right:  var(--bf-x, 1.25rem);
    bottom: 1.25rem;
    width:  var(--bf-size, 2.875rem);
    height: var(--bf-size, 2.875rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    cursor: pointer;
    box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.625rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s, background .2s;
    z-index: 900;
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top:hover { background: var(--color-primary-dark); }

#back-to-top svg {
    width: 1.625rem;
    height: 1.625rem;
    display: block;
    fill: currentColor;
}