/* ==========================================================================
   eigene_stile.css – eigene Ergänzungen zu main.css
   Wird nach main.css geladen (setup.typoscript › page.includeCSS.eigene_stile)
   ========================================================================== */

   /* Header Startseite kein Umbruch */
   .page-head h1 em{white-space:nowrap}

/* ==========================================================================
   Kontaktformular (TYPO3 Form-Framework / Inhaltselement "Formular")
   Alles ist auf .frame-type-form_formframework begrenzt,
   damit andere Formulare (z. B. Suche) nicht betroffen sind.
   ========================================================================== */

.frame-type-form_formframework{
  --form-line:#d9d6d0;
  --form-bg:#fbfaf8;
}
.frame-type-form_formframework form{max-width:760px;margin:0 auto}

/* ---------- Abstände zwischen den Feldern ---------- */
.frame-type-form_formframework .form-element,
.frame-type-form_formframework .form-group,
.frame-type-form_formframework .clearfix{margin-bottom:26px}

/* ---------- Zweispaltige Zeilen (Element "Grid-Zeile" im Formulareditor) ---------- */
.frame-type-form_formframework .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 30px}
.frame-type-form_formframework .row > [class*="col-"]{min-width:0}

/* ---------- Beschriftungen ---------- */
.frame-type-form_formframework label,
.frame-type-form_formframework legend,
.frame-type-form_formframework .form-label{
  display:block;margin-bottom:8px;
  font-family:Oswald,sans-serif;font-weight:400;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--dark);
}
.frame-type-form_formframework .required{color:var(--gold);margin-left:3px}
.frame-type-form_formframework fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
.frame-type-form_formframework legend{margin-bottom:14px;padding:0}

/* ---------- Eingabefelder ---------- */
.frame-type-form_formframework input[type="text"],
.frame-type-form_formframework input[type="email"],
.frame-type-form_formframework input[type="tel"],
.frame-type-form_formframework input[type="url"],
.frame-type-form_formframework input[type="number"],
.frame-type-form_formframework input[type="date"],
.frame-type-form_formframework input[type="password"],
.frame-type-form_formframework select,
.frame-type-form_formframework textarea{
  display:block;width:100%;
  padding:14px 16px;
  font:inherit;font-size:15px;color:var(--dark);
  background:var(--form-bg);
  border:1px solid var(--form-line);border-radius:0;
  transition:border-color .3s, background .3s, box-shadow .3s;
  -webkit-appearance:none;appearance:none;
}
.frame-type-form_formframework textarea{min-height:180px;resize:vertical;line-height:1.6}
.frame-type-form_formframework ::placeholder{color:#a5a29c;opacity:1}
.frame-type-form_formframework input:focus,
.frame-type-form_formframework select:focus,
.frame-type-form_formframework textarea:focus{
  outline:none;background:#fff;border-color:var(--gold);box-shadow:0 0 0 3px rgba(179,155,119,.15);
}

/* Auswahlliste mit eigenem Pfeil */
.frame-type-form_formframework select{
  padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b39b77' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
}

/* ---------- Checkboxen & Radio-Buttons (z. B. "Wobei kann ich helfen?") ---------- */
.frame-type-form_formframework .inputs-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 30px}
.frame-type-form_formframework .inputs-list label{margin:0}
/* vertikaler Abstand zwischen den Optionen – greift unabhängig vom Markup (mit/ohne .inputs-list) */
.frame-type-form_formframework .form-check,
.frame-type-form_formframework .inputs-list > *{margin:0 0 12px}
/* Checkbox neben ODER in der Beschriftung – beide Varianten sauber ausrichten */
.frame-type-form_formframework .form-check label:has(input),
.frame-type-form_formframework .inputs-list label:has(input){display:flex;align-items:flex-start;gap:12px}
.frame-type-form_formframework .form-check{display:flex;align-items:flex-start;gap:12px;padding:0}
.frame-type-form_formframework .form-check label,
.frame-type-form_formframework .inputs-list label,
.frame-type-form_formframework .form-check-label{
  display:block;cursor:pointer;margin:0;
  font-family:Montserrat,sans-serif;font-size:14px;letter-spacing:0;text-transform:none;color:var(--text);line-height:1.5;
}
.frame-type-form_formframework input[type="checkbox"],
.frame-type-form_formframework input[type="radio"]{
  -webkit-appearance:none;appearance:none;flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;
  border:1px solid var(--form-line);background:var(--form-bg);cursor:pointer;position:relative;transition:.25s;
}
.frame-type-form_formframework input[type="radio"]{border-radius:50%}
.frame-type-form_formframework input[type="checkbox"]:checked,
.frame-type-form_formframework input[type="radio"]:checked{background:var(--gold);border-color:var(--gold)}
.frame-type-form_formframework input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.frame-type-form_formframework input[type="radio"]:checked::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.frame-type-form_formframework input[type="checkbox"]:focus-visible,
.frame-type-form_formframework input[type="radio"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Datenschutz-Checkbox: Link darin */
.frame-type-form_formframework .form-check a,
.frame-type-form_formframework .inputs-list a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------- Hilfetexte & Fehlermeldungen ---------- */
.frame-type-form_formframework .help-block,
.frame-type-form_formframework .form-text{display:block;margin-top:6px;font-size:12.5px;color:#8b8882}
.frame-type-form_formframework .has-error input,
.frame-type-form_formframework .has-error select,
.frame-type-form_formframework .has-error textarea,
.frame-type-form_formframework .is-invalid{border-color:#b4473f;background:#fdf6f5}
.frame-type-form_formframework .has-error input[type="checkbox"]{border-color:#b4473f}
.frame-type-form_formframework .error,
.frame-type-form_formframework .invalid-feedback,
.frame-type-form_formframework .has-error .help-block{display:block;margin-top:6px;font-size:12.5px;color:#b4473f}

/* ---------- Absenden-Button (im Stil von .btn) ---------- */
.frame-type-form_formframework .actions,
.frame-type-form_formframework .form-navigation{margin-top:34px}
.frame-type-form_formframework .btn-toolbar,
.frame-type-form_formframework .btn-group{display:flex;flex-wrap:wrap;gap:12px}
.frame-type-form_formframework button,
.frame-type-form_formframework input[type="submit"]{
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  font-family:Oswald,sans-serif;font-weight:400;font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dark);background:transparent;border:1px solid var(--gold);border-radius:0;padding:16px 34px;
  transition:background .35s,color .35s;
}
.frame-type-form_formframework button[type="submit"]::after,
.frame-type-form_formframework .next button::after{content:"→";font-family:Montserrat,sans-serif;letter-spacing:0;transition:transform .35s}
.frame-type-form_formframework button:hover,
.frame-type-form_formframework input[type="submit"]:hover{background:var(--gold);color:#fff}
.frame-type-form_formframework button:hover::after{transform:translateX(5px)}
/* "Zurück"-Button bei mehrseitigen Formularen etwas zurückhaltender */
.frame-type-form_formframework .previous button{border-color:var(--form-line);color:#8b8882}

/* ---------- Zusammenfassung & Bestätigung nach dem Absenden ---------- */
.frame-type-form_formframework table{width:100%;border-collapse:collapse;margin-bottom:26px;font-size:14px}
.frame-type-form_formframework td{padding:10px 12px;border-bottom:1px solid var(--form-line);vertical-align:top}
.frame-type-form_formframework td:first-child{font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);width:35%}
.frame-type-form_formframework form + p,
.frame-type-form_formframework > p,
.frame-type-form_formframework .form-confirmation{
  max-width:760px;margin:0 auto;padding:30px 34px;border-left:2px solid var(--gold);background:var(--form-bg);font-size:15px;
}

/* ---------- Handy ---------- */
@media (max-width:480px){
  .frame-type-form_formframework .inputs-list{grid-template-columns:1fr}
  .frame-type-form_formframework button,
  .frame-type-form_formframework input[type="submit"]{width:100%;justify-content:center;padding:16px 20px}
}


/* ==========================================================================
   Nach-oben-Button (erscheint nach dem Scrollen unten rechts)
   ========================================================================== */
.to-top-btn{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--dark);border:1px solid var(--gold);
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,transform .3s,visibility .3s,background .25s,color .25s;
}
.to-top-btn.is-visible{opacity:1;visibility:visible;transform:none}
.to-top-btn:hover,.to-top-btn:focus-visible{background:var(--gold);color:#fff}
.to-top-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:480px){.to-top-btn{right:16px;bottom:16px;width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.to-top-btn{transition:none}}

.to-top-btn{background:var(--gold);color:#fff;border-color:var(--gold)}
.to-top-btn:hover,.to-top-btn:focus-visible{background:var(--dark);border-color:var(--dark);color:#fff}