:root {
  --global-palette1: #C7A667;
  --global-palette1-hover: #AD8740;
  --global-palette2: #1C2E33;
  --global-palette3: #2E2E2E;
  --global-palette4: #666666;
  --global-palette5: #F2EDE4;
  --global-palette6: #FDF9F4;
  --global-palette7: #FFFFFF;

  --global-font-family: 'Inter', sans-serif;
  --global-heading-font-family: 'Playfair Display', serif;

  --global-heading-size-sm: 20px;
  --global-body-font-size: 16px;

  --button-bg: var(--global-palette3);
  --button-bg-hover: #444444;
  --button-text: #FFFFFF;
  --button-text-hover: #FFFFFF;
  --button-border: #444444;
  --button-border-hover: 222222;
  --button-border-style: solid;
  --button-border-width: 2px;
  --button-radius: 6px;
  --button-padding: 10px 24px;

  --button-font: var(--global-heading-font-family);
  --button-font-size: 18px;
  --button-font-weight: 700;
  --button-line-height: 1.4;
  --button-letter-spacing: 0.5px;
  --button-text-transform: uppercase;

  --button-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  --button-shadow-inset: none;
  --button-shadow-hover: 0px 4px 6px rgba(0, 0, 0, 0.25);
  --button-shadow-hover-inset: none;

  --mc-bg: #f7f7f7;
  --mc-bg-hover: var(--global-palette1);
  --mc-text: #fff;
  --mc-text-hover: var(--global-palette1-hover);
  --mc-border: #cccccc;
  --mc-border-hover: #999999;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#gregor-formular {
  max-width: 800px;
  margin: 30px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-family: var(--global-font-family, Arial, sans-serif);
}

/* Fragen & Endseiten */
.frage-text {
  font-size: var(--global-heading-size-sm);
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--global-palette1);
  text-align: center;
  word-break: break-word;
  white-space: pre-line;
}

.frage-subtext {
  font-size: 0.95rem;
  color: var(--global-palette4, #666);
  font-style: italic;
  margin-top: 4px;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* Eingabefelder */
input[type="text"].gf-textfeld {
  text-align: center;
}

input[type="email"] {
  max-width: 200px;
  text-align: center;
  margin: 0 auto;
  display: block;
}

input[type="date"],
input.flatpickr-input,
input.gf-zahlenfeld {
  font-family: var(--global-font-family);
  font-size: var(--global-body-font-size);
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  display: block;
  text-align: center;
  border-radius: var(--button-radius);
  box-sizing: border-box;
}

textarea,
select,
input.gf-textfeld,
input.gf-adresseingabe {
  width: 100%;
  font-size: var(--global-body-font-size);
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--global-font-family);
  margin: 0 auto;
  display: block;
}

input.gf-namefeld {
  text-align: center;
  padding: 8px 10px;
  font-size: 15px;
  max-width: 100%;
  border-radius: 6px;
  font-family: var(--global-font-family);
}

input.gf-namefeld::placeholder {
  text-align: center;
}

input:required,
textarea:required {
  border-left: 3px solid var(--global-palette3);
}

/* Telefonnummer */
.tel-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 1rem;
}

.tel-row select.tel-vorwahl,
.tel-row input.tel-custom,
.tel-row input.gf-tel-eingabe {
  height: 44px;
  padding: 10px 12px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: var(--global-font-family);
  text-align: center;
  max-width: 180px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

.tel-row select.tel-vorwahl {
  width: 100px;
  max-width: 100px;
  height: 44px;
}

.tel-row input.tel-custom {
  width: 70px;
  max-width: 70px;
  display: none;
}

.tel-row input.gf-tel-eingabe {
  width: 180px;
  max-width: 180px;
}

/* Doppelfelder wie PLZ/Ort oder Name1/Name2 */
.flex-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.flex-row input {
  width: 48%;
}

/* Buttons */
.button-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  text-align: center;
}

.button-row button {
  background-color: var(--global-palette1);
  color: var(--button-text);
  border: var(--button-border-width) var(--button-border-style) var(--button-border) 2px solid var(--global-palette1-hover);
  border-radius: var(--button-radius);
  font-family: var(--button-font);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  padding: var(--button-padding);
  box-shadow: var(--button-shadow);
}

.button-row button:hover {
  background-color: var(--global-palette1-hover);
  color: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35);
  border-color: var(--global-palette1-hover);
}

/* Nurtext */
p.nurtext {
  font-size: var(--global-heading-size-sm);
  font-style: italic;
  color: var(--global-palette2);
  margin-bottom: 1rem;
}

/* Datei-Upload */
input[type="file"] {
  background: var(--global-palette6);
  padding: 8px 12px;
  border-radius: var(--button-radius);
  font-size: 15px;
  border: 1px solid #ccc;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  display: block;
  font-family: var(--global-font-family);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.upload-hint {
  display: block;
  font-size: 14px;
  margin-top: 5px;
  color: #555;
}

/* Skala */
.skala-boxen {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.skala-boxen label {
  flex: 1;
  text-align: center;
  padding: 14px;
  background: var(--global-palette6);
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.skala-boxen input[type="radio"] {
  display: none;
}

.skala-boxen input[type="radio"]:checked + span {
  background: var(--global-palette1);
  color: white;
}


/* Sonstiges */
.sonstiges-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.8rem;
  width: 100%;
}
.sonstiges-input {
  display: inline-block;
  margin-left: 8px;
  display: inline-block;
  margin-left: 10px;
  max-width: 200px;
}
.gf-sonstiges-eingabe {
 font-family: var(--global-font-family);
  max-width: 160px;
  width: 100%;
  padding: 10px;
  text-align: center;
  display: block;
  font-size: 16px;
  height: 42px;
  margin: 0;
}

/* MC Grid */
  .mc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.mc-grid label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding);
  background-color: #f7f6f3; /* helles, elegantes Grau-Beige */
  color: #2E2E2E; /* dunkler, klar lesbarer Text */
  border: 2px solid #ddd;
  border-radius: var(--button-radius);
  box-shadow: none;
  font-family: var(--button-font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  line-height: var(--button-line-height);
  text-align: center;
  white-space: nowrap;
  word-break: normal;
  transition: all 0.25s ease;
  cursor: pointer;
}

.mc-grid label:hover {
  background-color: #e7e3d8; /* leicht dunkler beim Hover */
  color: #1C2E33; /* bleibt gut lesbar */
  border-color: var(--global-palette1);
}

/* Auswahl sichtbar & golden */
.mc-grid label.selected {
  background-color: var(--global-palette1); /* gold */
  color: #fff;
  border-color: var(--global-palette1-hover);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.mc-grid input[type="radio"],
.mc-grid input[type="checkbox"] {
  display: none;
}

.mc-grid input[type="radio"]:checked + span,
.mc-grid input[type="checkbox"]:checked + span {
  background-color: var(--global-palette1);  /* gold */
  color: #fff;
  border-color: var(--global-palette1-hover);
}

.mc-grid label span {
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  background-color: inherit;
  color: inherit;
  border: none;
  padding: 4px 6px;
}

/* Mobile Optimierung */
@media screen and (max-width: 400px) {
  .mc-grid label {
    padding: 8px;
    font-size: 14px;
    min-height: 44px;
  }
}

/* Backend MC */
.mc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mc-item input[type="text"],
.mc-item select {
  flex: 1;
}

.mc-item .gf-remove-option {
  background: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

.mc-item .gf-remove-option:hover {
  background: #d32f2f;
}

/* Danke */
.danke-text {
  font-size: var(--global-heading-size-sm);
  font-weight: bold;
  color: var(--global-palette1);
  text-align: center;
  padding: 20px;
}

/* Navigation */
.gf-navigation {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.gf-zurueck {
  order: 1;
}

.gf-weiter {
  order: 2;
}

/* Mobile */
@media screen and (max-width: 600px) {
  #gregor-formular {
    padding: 15px;
  }

  .button-row {
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
  }

  .button-row button {
    flex: 1;
    min-width: 44%;
}

} 
/* DSGVO Checkbox */
.gf-dsgvo-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1rem 0;
  font-size: 0.95rem;
  color: var(--global-palette2);
}

.gf-dsgvo-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
}

.gf-dsgvo-checkbox span {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  line-height: 1.5;
}

/* Herz-Icon im leeren Zustand */
.gf-dsgvo-checkbox span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Wenn angehakt → zeige Herzbild */
.gf-dsgvo-checkbox input[type="checkbox"]:checked + span::before {
  background-image: url('https://gregor-marstaller.de/wp-content/uploads/2025/01/browser-1.png');
  border-color: var(--global-palette1);
}


/* Flatpickr: Groß, elegant, Kadence-kompatibel */
.flatpickr-calendar {
  font-size: 1.2em;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  width: auto;
  min-width: 320px; /* klein genug für Mobil */
}

/*/* Größer nur auf größeren Bildschirmen */
@media screen and (min-width: 768px) {
  .flatpickr-calendar {
    font-size: 1.4em;
    min-width: 480px;
    max-width: 100%;
    border-radius: 12px;
  }

  .flatpickr-day {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 18px;
    border-radius: 6px;
    transition: all 0.2s ease;
  }

  .flatpickr-months,
  .flatpickr-weekdays,
  .flatpickr-days {
    font-size: 18px !important;
  }

  .flatpickr-month {
    font-weight: bold;
    font-size: 20px;
  }

  .flatpickr-monthDropdown-months,
  .flatpickr-current-month input.cur-year {
    font-size: 1.2em;
    padding: 6px;
  }

  .flatpickr-prev-month,
  .flatpickr-next-month {
    padding: 6px;
    transition: transform 0.2s ease;
  }

  .flatpickr-prev-month:hover,
  .flatpickr-next-month:hover {
    transform: scale(1.25);
  }
}

.button-row button.with-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-row button.with-logo img {
  height: 20px;
  width: auto;
  margin-right: 6px;
}
input[type="tel"].gf-zahlenfeld {
  max-width: 200px !important;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  display: block;
  text-align: center;
  font-family: var(--global-font-family);
  font-size: var(--global-body-font-size);
  border-radius: var(--button-radius);
  box-sizing: border-box;
}
input[type="tel"].gf-tel-eingabe {
  max-width: 160px;
  width: 100%;
  padding: 10px;
  margin: 0;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  font-family: var(--global-font-family);
  border-radius: var(--button-radius);
  box-sizing: border-box;
}

.upload-info {
  margin-top: 8px;
  font-size: 14px;
  color: #555;
  text-align: center;
}