﻿/* ============================
   1) Reset & Box-Sizing
   ============================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================
   2) Farb- und Typografie-Variablen
   ============================ */
:root {
  /* Buchner-Markenrot */
  --color-buchner:        #b70e0c;
  --color-buchner-light:  #ff9999;
  --color-buchner-dark:   #800000;

  /* Schriftfarben */
  --color-text-primary:   #000000;
  --color-text-secondary: #6c757d;
  --color-text-inverse:   #ffffff;

  /* Hintergrundfarben */
  --color-background:     #f8f9fa;
  --color-background-buchner: #fff0f0; /* sehr helles Rot z. B. für rote Highlight-/Ergebnisbox */

  /* Farbtöne für Forms */
  --gray-light: #f1f3f5;  /* very light gray (z.B. Input-Hintergrund) */
  --gray:       #ced4da;  /* medium gray (z.B. Rahmen) */
  --gray-dark:  #495057;  /* dark gray (z.B. Text, Placeholder) */

  /* Schriftgrößen (rem-Skala, 1rem = 16px) */
  --font-size-xs:   0.75rem; /* 12px */
  --font-size-sm:   0.875rem;/* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg:   1.125rem;/* 18px */
  --font-size-xl:   1.25rem; /* 20px */
  --font-size-xxl:  1.5rem;  /* 24px */
  --font-size-xxxl: 2rem;    /* 32px */

  /* Basis-Font */
  --font-family-base: 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Courier New', Courier, monospace;
}

/* ============================
   3) Base-Typografie & Body
   ============================ */
html {
  font-size: 100%;              /* 1rem = Browser-Default (meist 16px) */
  height: 100%;
  font-family: var(--font-family-base);
}

body {
  min-height: 100%;
  line-height: 1.5;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-background);

  /* Body als Flex-Container, um Footer-Stickiness zu ermöglichen */
  display: flex;
  flex-direction: column;
}


/* ============================
   4) Verhalten in iframes
   ============================ */
/* Verstecke Header und Footer, wenn die Seite in einem iframe läuft */
.is-embedded header,
.is-embedded footer {
  display: none !important;
}

/* Wrapper-Element um Header, Main und Footer, sorgt dafür, dass Applet im iframe (z.B. Miniwebseiten) korrekt angezeigt wird */
.is-embedded #maincontent {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  flex: 0 !important;
}

.is-embedded #container {
  background-color: var(--color-text-inverse) !important;
}

.is-embedded .layout3 {
  box-shadow: none !important;
}

/* ============================
   5) Seiten-Layout
   ============================ */
/* Wrapper-Element um Header, Main und Footer */
#container {
  display: flex;
  flex-direction: column;
  /* Höhe exakt Viewport-Höhe; Footer klebt immer unten */
  height: 100vh;
}

/* Damit der Hauptbereich wächst und den Footer nach unten schiebt */
#container > #maincontent {
  flex: 1;
  padding: 20px;
}


/* Kasten-Layout */
.layout3 {
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-text-inverse);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* Highlight-Box z. B für Ergebnisse */
.highlight-box {
  border: 1px solid var(--color-buchner);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: auto;
  box-sizing: border-box;
  background-color: var(--color-background-buchner);
  text-align: center;
  display: inline-block;
}

/* Calculation-Box z. B für Rechnungen*/
.calculation-box {
  border: 1px solid var(--gray);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: auto;
  box-sizing: border-box;
  background-color: var(--color-background);
}

/* Hinweis wie layout3 nur ohne weißem Grund und Schatten */
.hinweis {
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ============================
   6) Button-Komponente
   ============================ */
button {
  padding: 10px 20px;
  font-size: var(--font-size-base); /* entspricht 16px */
  border: none;
  border-radius: 4px;
  background-color: var(--color-buchner);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: var(--color-buchner-dark);
}

input,
textarea,
select {
  padding: 0.5rem 0.75rem; /* entspricht 10px 20px */
  font-size: var(--font-size-base); /* entspricht 16px */
  color: var(--color-text-primary);      /* meist schwarz */
  background-color: var(--gray-light);   /* hellgrau */
  border: 1px solid var(--gray);         /* mittelgrau */
  border-radius: 4px;
  box-sizing: border-box;
}

button,
input,
textarea,
select,
input[type="date"] {
  font-family: var(--font-family-base);
}

/* Placeholder-Farbe */
input::placeholder,
textarea::placeholder {
  color: var(--gray-dark);
  opacity: 1;
  font-size: var(--font-size-base); /* entspricht 16px */
}

/* Fokus-Zustand */
input:focus,
textarea:focus{
  border-color: var(--color-buchner);              /* Markenrot aus deinem Root */
  outline: none;
}

/* ============================
   7) Radio-Group (Standard)
   ============================ */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  min-height: 44px;
}

/* a) Default: helles Rot (auch wenn checked, solange nichts passiert) */
.radio-group input[type="radio"] {
  accent-color: var(--color-buchner-light);
  cursor: pointer;
}

/* b1) Hover: normales Rot
   – Hover erfolgt meist auf dem Label, daher Label-Hover auf das Input „durchreichen“ */
.radio-group label:hover input[type="radio"]:not(:disabled),
.radio-group input[type="radio"]:hover:not(:disabled) {
  accent-color: var(--color-buchner);
}

/* b2) Click/Active: dunkles Rot
   – Sowohl Label-Active als auch Input-Active abdecken */
.radio-group label:active input[type="radio"]:not(:disabled),
.radio-group input[type="radio"]:active:not(:disabled) {
  accent-color: var(--color-buchner-dark);
}

/* c) Tastatursteuerung: gut sichtbarer Fokus und normales Rot im Fokus
   – Space/Enter aktivieren den Radio; Pfeiltasten wechseln die Auswahl */
.radio-group input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-buchner);
  outline-offset: 2px;
  accent-color: var(--color-buchner); /* Fokus = normales Rot (wie Hover) */
}

/* Optional: auf sehr schmalen Screens vertikal stapeln */
@media (max-width: 350px) {
  .radio-group {
    flex-direction: column;
    align-items: stretch;
  }
  .radio-group label {
    width: 100%;
  }
}

/* ============================
   7b) Radio-Group (Boxed)
   ============================ */
.radio-group-boxed {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.radio-group-boxed label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-group-boxed label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-sm);
  background-color: var(--gray-light);
  color: var(--color-text-primary);
  border: 1px solid var(--gray);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.radio-group-boxed label input[type="radio"]:checked + span {
  border-color: var(--color-buchner-dark);
  background-color: var(--color-buchner-light);
  color: var(--color-text-primary);
}

.radio-group-boxed label span:hover,
.radio-group-boxed label input[type="radio"]:focus + span {
  border-color: var(--color-buchner-dark);
  outline: none;
}


/* ============================
   8) Checkbox (Standard-Style, rot)
   ============================ */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.checkbox-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  min-height: 44px;
}

/* a) Default/Idle: hellrot (auch wenn checked, solange kein Hover/Active/Fokus) */
.checkbox-group input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-buchner-light);
  cursor: pointer;
}

/* b1) Hover: normales Rot
   – Hover passiert meist auf dem Label, daher dort abfangen */
.checkbox-group label:hover input[type="checkbox"]:not(:disabled),
.checkbox-group input[type="checkbox"]:hover:not(:disabled) {
  accent-color: var(--color-buchner);
}

/* b2) Active/Klick: dunkles Rot
   – sowohl Label-Active als auch Input-Active */
.checkbox-group label:active input[type="checkbox"]:not(:disabled),
.checkbox-group input[type="checkbox"]:active:not(:disabled) {
  accent-color: var(--color-buchner-dark);
}

/* c) Tastatur-Fokus: gut sichtbar + normales Rot im Fokus */
.checkbox-group input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-buchner);
  outline-offset: 2px;
  accent-color: var(--color-buchner);
}

/* Optional: indeterminater Zustand (Tri-State) – farblich wie Hover/Focus */
.checkbox-group input[type="checkbox"]:indeterminate {
  accent-color: var(--color-buchner);
}

/* Disabled: klar kennzeichnen */
.checkbox-group input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ============================
   9) Range-Slider (Standard)
   ============================ */
/* Opt-in: nur Inputs mit Klasse .range bekommen den Marken-Look */
input[type="range"].range {
  width: 100%;                          /* Standardbreite */
  accent-color: var(--color-buchner-light); /* Idle/Hellrot */
  cursor: pointer;
}

/* Tastatur-Fokus klar sichtbar */
input[type="range"].range:focus-visible {
  outline: 2px solid var(--color-buchner);
  outline-offset: 2px;
}

/* Während Aktivierung (Klick/Drag) kräftiges Rot */
input[type="range"].range:active {
  accent-color: var(--color-buchner);
}

/* ============================
   10) Toggle-Switch (solo, ohne Beschriftung)
   – Größe & Farbe per Variablen steuerbar.
   – Standard bleibt Markenrot; Farbe kann lokal je Schalter
     bequem überschrieben werden (siehe Beispiele unten).
============================ */

/* Root des Schalters: zentrale Steuerung über Variablen */
.toggle-switch {
  /* Größe (lokal überschreibbar: z. B. --sw-size: 2rem; ) */
  --sw-size: 1.5rem;                 /* ≈ 24px Track-Höhe */

  /* Farben (lokal überschreibbar, nur wenn abweichend vom Standard gewünscht) */
  --switch-on:  var(--color-buchner); /* EIN-Zustand: Standard = Markenrot */
  --switch-off: var(--gray);          /* AUS-Zustand: neutrales Grau */
  --switch-thumb: var(--color-text-inverse); /* Thumb: i. d. R. Weiß */

  /* Abgeleitete Maße (nicht anfassen; folgen aus --sw-size) */
  --sw-h: var(--sw-size);
  --sw-w: calc(var(--sw-size) * 1.833);         /* 44/24 ≈ 1.833 */
  --sw-pad: calc(var(--sw-size) * 0.083);       /*  2/24 ≈ 0.083 */
  --sw-thumb: calc(var(--sw-h) - 2 * var(--sw-pad));

  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;                               /* Hand-Cursor am ganzen Schalter */
}

/* Echte Checkbox: visuell verstecken, aber fokusierbar lassen */
.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Track – Grundform, nutzt Farb-/Größen-Variablen */
.toggle-switch .track {
  position: relative;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  background: var(--switch-off);                 /* AUS-Farbe */
  border: 1px solid var(--switch-off);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

/* Thumb – der Kreis */
.toggle-switch .track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 50%;
  background: var(--switch-thumb);
  transform: translate(0, -50%);
  transition: transform 0.4s ease;
}

/* EIN (checked): Track färbt sich auf --switch-on, Thumb fährt nach rechts */
.toggle-switch input[type="checkbox"]:checked + .track {
  background: var(--switch-on);
  border-color: var(--switch-on);
}
.toggle-switch input[type="checkbox"]:checked + .track::after {
  /* Strecke = Trackbreite - Thumbbreite - 2*Padding */
  transform: translate(calc(var(--sw-w) - var(--sw-thumb) - 2 * var(--sw-pad)), -50%);
}

/* Tastatur-Fokus deutlich */
.toggle-switch input[type="checkbox"]::focus-visible + .track,
.toggle-switch input[type="checkbox"]:focus-visible + .track {
  outline: 2px solid var(--color-buchner);
  outline-offset: 2px;
}

/* Disabled-Optik */
.toggle-switch input[type="checkbox"]:disabled + .track {
  opacity: 0.6;
  cursor: not-allowed;
}
.toggle-switch:has(input[type="checkbox"]:disabled) {
  cursor: not-allowed;
}

/* Bewegungen respektvoll dämpfen */
@media (prefers-reduced-motion: reduce) {
  .toggle-switch .track,
  .toggle-switch .track::after {
    transition: none;
  }
}

/* -----------------------------------------------------------
   LOKALE ANPASSUNGEN (Beispiele – NICHT hier im Global-CSS lassen):

   1) Nur Farbe ändern (z. B. grün):
      .toggle-switch--green { --switch-on: #28a745; }

   2) Farbe + Größe (nur in bestimmtem Bereich/Pfad):
      .settings-pane .toggle-switch { --switch-on: #0d6efd; --sw-size: 2rem; }

   3) Einzeln, ad hoc (inline):
      <label class="toggle-switch" style="--switch-on:#6f42c1; --sw-size:2.25rem">…</label>
----------------------------------------------------------- */

