/* ================================================================
   REGIOS FORMULARE
   Eigenständiges Stylesheet für Formulare im Regios Look
   ================================================================

   Dieses Stylesheet ist komplett eigenständig und braucht kein
   Framework. Du bindest es einfach in deine Seite ein:

     <link rel="stylesheet" href="regios-formulare.css">

   Den Styleguide mit Livebeispielen, Klassenreferenz und fertigen
   HTML Schnipseln findest du unter:

     https://cd.regios.at/formulare

   Die Schriften Gilroy und Raleway werden direkt vom Regios CDN
   geladen. Du kannst sie alternativ unter /download/fonts
   herunterladen und selbst hosten.

   Aufbau:
     1. Schriften
     2. Farbvariablen
     3. Seitenrahmen (.regios-form-page, .regios-form-container)
     4. Überschriften
     5. Formularfelder (.label, .input, Select, Textarea)
     6. Formularlayout (.form-row, .form-group)
     7. Checkboxen (.checkbox-brand)
     8. Auswahlkarten (.product-card)
     9. Buttons (.btn-primary, .btn-secondary)
    10. Fehler und Hinweise (.form-error, .form-hint)
    11. Fortschrittsbalken (.progress-track, .progress-fill)
    12. Modal (.modal-overlay, .modal)

   Regios Formulare stehen auf lila Hintergrund. Die Klasse
   .regios-form-page liefert genau diesen Rahmen, alle Felder darin
   sind automatisch im dunklen Stil. Für helle Hintergründe gibt es
   Varianten mit dem Zusatz light, siehe Abschnitt 5 und 7.
   ================================================================ */


/* ================================================================
   1. SCHRIFTEN
   Gilroy für Überschriften, Raleway für alles andere.
   ================================================================ */

@font-face {
  font-family: "Gilroy";
  src: url("https://regios-static-assets.fra1.cdn.digitaloceanspaces.com/fonts/gilroy/Gilroy-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("https://regios-static-assets.fra1.cdn.digitaloceanspaces.com/fonts/gilroy/Gilroy-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("https://regios-static-assets.fra1.cdn.digitaloceanspaces.com/fonts/raleway/Raleway-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("https://regios-static-assets.fra1.cdn.digitaloceanspaces.com/fonts/raleway/Raleway.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("https://regios-static-assets.fra1.cdn.digitaloceanspaces.com/fonts/raleway/Raleway-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("https://regios-static-assets.fra1.cdn.digitaloceanspaces.com/fonts/raleway/Raleway-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("https://regios-static-assets.fra1.cdn.digitaloceanspaces.com/fonts/raleway/Raleway-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ================================================================
   2. FARBVARIABLEN
   Die offiziellen Regios Markenfarben als CSS Variablen.
   ================================================================ */

:root {
  /* Kernfarben */
  --regios-white: #FEF9EB;        /* Warmes Weiß, Cremeton */
  --regios-green: #70FF4D;        /* Leuchtendes Grün, Hauptakzent */
  --regios-yellow: #F8C23A;       /* Gelb, Goldton */
  --regios-purple: #9C69FF;       /* Lila, Hintergrund der Formulare */
  --regios-black: #626262;        /* Dunkles Grau statt reinem Schwarz */

  /* Erweiterte Palette */
  --regios-purple-dark: #7B4FD9;
  --regios-purple-light: #B78FFF;
  --regios-green-dark: #5ACC3D;
  --regios-green-light: #8FFF70;
  --regios-yellow-dark: #D9A82E;
  --regios-yellow-light: #FFDA6A;
  --regios-gray: #6B7280;
  --regios-gray-light: #9CA3AF;
  --regios-gray-dark: #374151;

  /* Schriftfamilien */
  --regios-font-body: "Raleway", ui-sans-serif, system-ui, sans-serif;
  --regios-font-heading: "Gilroy", ui-sans-serif, system-ui, sans-serif;
}


/* ================================================================
   3. SEITENRAHMEN
   .regios-form-page ist der lila Vollbildrahmen, in dem das ganze
   Formular steht. .regios-form-container zentriert den Inhalt.
   ================================================================ */

.regios-form-page {
  background-color: var(--regios-purple);
  min-height: 100vh;
  padding: 3rem 0;
  font-family: var(--regios-font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: #ffffff;
}

@media (min-width: 768px) {
  .regios-form-page {
    padding: 5rem 0;
  }
}

/* Einheitliches Boxmodell für alles im Formularrahmen */
.regios-form-page,
.regios-form-page *,
.regios-form-page *::before,
.regios-form-page *::after {
  box-sizing: border-box;
}

.regios-form-container {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .regios-form-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}


/* ================================================================
   4. ÜBERSCHRIFTEN
   Gilroy, weiß, kräftig, Großbuchstaben. Einzelne Wörter können
   mit class="text-green" grün hervorgehoben werden.
   ================================================================ */

.regios-form-page h1 {
  font-family: var(--regios-font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

@media (min-width: 768px) {
  .regios-form-page h1 {
    font-size: 1.875rem;
  }
}

.regios-form-page h2 {
  font-family: var(--regios-font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

.regios-form-page h3 {
  font-family: var(--regios-font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.25rem 0;
}

/* Grüne Hervorhebung einzelner Wörter in Überschriften */
.text-green {
  color: var(--regios-green);
}


/* ================================================================
   5. FORMULARFELDER
   .input ist die Standardklasse für Textfelder, Selects und
   Textareas. Im lila Rahmen ist sie automatisch dunkel. Die helle
   Variante .input--light ist für weiße Hintergründe gedacht.
   ================================================================ */

.label {
  display: block;
  font-family: var(--regios-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
}

.input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--regios-font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
}

.input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--regios-green);
}

/* Optionen eines Selects auf lila Hintergrund */
.input option {
  background-color: #7B4FD9;
  color: #ffffff;
}

/* Kalendersymbol im Datumsfeld weiß einfärben */
.input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Textarea erbt alles von .input, nur die Höhe ist flexibel */
textarea.input {
  min-height: 6rem;
  resize: vertical;
}

/* Eigener Pfeil für Selects, da appearance none den Standardpfeil
   entfernt */
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.75rem;
}

/* Helle Variante für weiße oder cremefarbene Hintergründe,
   zum Beispiel in Modals */
.input--light {
  color: var(--regios-black);
  background-color: #ffffff;
  border: 1px solid var(--regios-gray-light);
}

.input--light::placeholder {
  color: var(--regios-gray-light);
}

.input--light:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--regios-purple);
}

.input--light option {
  background-color: #ffffff;
  color: var(--regios-black);
}

.input--light[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}

.label--light {
  color: var(--regios-gray-dark);
}


/* ================================================================
   6. FORMULARLAYOUT
   .form-group umschließt Label plus Feld. .form-row stellt mehrere
   Gruppen nebeneinander, unter 640px werden sie automatisch
   untereinander gestapelt.
   ================================================================ */

.form-group {
  margin-bottom: 1rem;
}

.form-group:last-of-type {
  margin-bottom: 1.5rem;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-row .form-group {
  flex: 1;
}

@media (max-width: 639px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}


/* ================================================================
   7. CHECKBOXEN
   .checkbox-brand ist ein Label, das eine versteckte native
   Checkbox, die sichtbare Box (.checkbox-box) und den Text
   (.checkbox-label) enthält. Im lila Rahmen wird die Box beim
   Anhaken grün mit lila Haken. Die helle Variante
   .checkbox-brand--light zeigt eine lila Box mit grünem Haken.
   ================================================================ */

.checkbox-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

/* Native Checkbox unsichtbar, aber für Screenreader und Tastatur
   erreichbar */
.checkbox-brand input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.checkbox-brand .checkbox-box {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.checkbox-brand input[type="checkbox"]:checked + .checkbox-box {
  background-color: var(--regios-green);
  border-color: var(--regios-green);
}

/* Der Haken: lila auf grüner Box */
.checkbox-brand .checkbox-box::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C69FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}

.checkbox-brand input[type="checkbox"]:checked + .checkbox-box::after {
  opacity: 1;
}

.checkbox-brand input[type="checkbox"]:focus + .checkbox-box {
  box-shadow: 0 0 0 2px var(--regios-purple), 0 0 0 4px var(--regios-green);
}

.checkbox-brand .checkbox-label {
  font-size: 0.875rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.8);
}

.checkbox-brand .checkbox-label a {
  color: var(--regios-green);
  text-decoration: underline;
}

.checkbox-brand .checkbox-label a:hover {
  color: var(--regios-green-dark);
}

/* Helle Variante: weiße Box mit lila Rand, beim Anhaken lila Box
   mit grünem Haken */
.checkbox-brand--light .checkbox-box {
  border-color: var(--regios-purple);
  background-color: #ffffff;
}

.checkbox-brand--light input[type="checkbox"]:checked + .checkbox-box {
  background-color: var(--regios-purple);
  border-color: var(--regios-purple);
}

.checkbox-brand--light .checkbox-box::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2370FF4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.checkbox-brand--light input[type="checkbox"]:focus + .checkbox-box {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--regios-purple);
}

.checkbox-brand--light .checkbox-label {
  color: var(--regios-gray-dark);
}

.checkbox-brand--light .checkbox-label a {
  color: var(--regios-purple);
}

.checkbox-brand--light .checkbox-label a:hover {
  color: var(--regios-purple-dark);
}


/* ================================================================
   8. AUSWAHLKARTEN
   .product-card ist eine klickbare Karte zur Auswahl, zum Beispiel
   für Produkte. Die gewählte Karte bekommt zusätzlich
   .card-selected. Der Pfeil rechts unten ist ein span mit
   .card-arrow und dem Inhalt &rarr;
   ================================================================ */

.product-card {
  position: relative;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-card:hover {
  border-color: rgba(112, 255, 77, 0.5);
  box-shadow: 0 4px 16px rgba(112, 255, 77, 0.15);
}

.product-card.card-selected {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: var(--regios-green);
  box-shadow: 0 0 0 1px var(--regios-green);
}

.product-card .card-arrow {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  color: #ffffff;
  opacity: 0.3;
  font-family: var(--regios-font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card:hover .card-arrow {
  opacity: 0.6;
  transform: translateX(2px);
}

.product-card.card-selected .card-arrow {
  color: var(--regios-green);
  opacity: 1;
  transform: translateX(4px);
}


/* ================================================================
   9. BUTTONS
   .btn-primary ist der grüne Hauptbutton, .btn-secondary die
   Variante mit grünem Rand. .btn-full macht einen Button so breit
   wie seinen Container, auf kleinen Bildschirmen empfohlen.
   ================================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--regios-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--regios-purple);
  background-color: var(--regios-green);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(156, 105, 255, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--regios-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--regios-green);
  background-color: transparent;
  border: 2px solid var(--regios-green);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--regios-green);
  color: var(--regios-purple);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-full {
  width: 100%;
}

/* Deaktivierter Zustand */
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ================================================================
   10. FEHLER UND HINWEISE
   .form-error ist die rote Fehlerbox über dem Formular oder unter
   einem Feld. .form-hint ist ein kleiner Hinweistext unter einem
   Feld, mit Varianten für gültige und ungültige Eingaben.
   ================================================================ */

.form-error {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 8px;
  color: #fecaca;
  font-size: 0.875rem;
  line-height: 1.4;
}

.form-hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

.form-hint--valid {
  color: var(--regios-green);
}

.form-hint--error {
  color: #fca5a5;
}


/* ================================================================
   11. FORTSCHRITTSBALKEN
   .progress-track ist die Schiene, .progress-fill der grüne
   Balken. Die Breite des Balkens setzt du per Inlinestil oder
   Javascript, zum Beispiel style="width: 60%".
   ================================================================ */

.progress-track {
  width: 100%;
  height: 0.5rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--regios-green);
  border-radius: 9999px;
  transition: width 0.5s ease-out;
}


/* ================================================================
   12. MODAL
   .modal-overlay legt sich über die ganze Seite, .modal ist die
   helle Box in der Mitte. Zum Öffnen gibst du dem Overlay die
   Klasse active. Felder im Modal nutzen die hellen Varianten
   .input--light und .checkbox-brand--light.
   ================================================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(0);
  transition: opacity 0.3s ease, visibility 0.3s ease, backdrop-filter 0.3s ease;
  overflow-y: auto;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(8px);
}

.modal {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 2rem;
  background-color: var(--regios-white);
  color: var(--regios-black);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

@media (min-width: 768px) {
  .modal {
    max-width: 40rem;
    max-height: calc(100vh - 4rem);
    padding: 2.5rem;
  }
}

.modal-overlay.active .modal {
  transform: scale(1);
}

.modal h3 {
  font-family: var(--regios-font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--regios-purple);
  margin: 0 0 0.5rem 0;
}

.modal p {
  color: var(--regios-black);
  margin: 0 0 1.5rem 0;
}

/* Labels und Hinweise im hellen Modal */
.modal .label {
  color: var(--regios-gray-dark);
}

.modal .form-hint {
  color: var(--regios-gray);
}

/* Fehlertext im hellen Modal: kräftiges Rot statt heller Box */
.modal .form-error {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-bottom: 1rem;
  color: #dc2626;
}