/* ==========================================================================
   HRW Forms – Formular auf der Website
   Mit YOOtheme kommen Felder und Buttons aus UIkit (uk-input, uk-button …).
   Hier steht nur, was UIkit nicht kann: Raster, Fehler, Schritte, Sterne.
   Ohne YOOtheme (.hrwf--own) gibt es zusätzlich einen schlichten eigenen Look.
   ========================================================================== */

/* --hrwf-muted mit 75 %: Hilfetexte halten auch bei hellgrauer Schrift des Themes 4,5:1 eher ein. --hrwf-gold-ink: 3:1 auf Weiß für die Sterne */
.hrwf { --hrwf-gap: 18px; --hrwf-err: #B3261E; --hrwf-muted: color-mix(in srgb, currentColor 75%, transparent); --hrwf-gold: #C9A24E; --hrwf-gold-ink: #9A7425; }
.hrwf *, .hrwf *::before, .hrwf *::after { box-sizing: border-box; }
.hrwf-form { margin: 0; }
.hrwf-sr, .hrwf .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Lockfeld: für Menschen unsichtbar, für Screenreader stumm */
.hrwf-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.hrwf-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.hrwf-step__title { margin: 0 0 14px; padding: 0; font-size: 1.15em; font-weight: 600; }
.hrwf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hrwf-gap) 16px; }
.hrwf-field { grid-column: span 12; min-width: 0; margin: 0; }
.hrwf-w-three-quarters { grid-column: span 9; }
.hrwf-w-two-thirds { grid-column: span 8; }
.hrwf-w-half { grid-column: span 6; }
.hrwf-w-third { grid-column: span 4; }
.hrwf-w-quarter { grid-column: span 3; }
@media (max-width: 900px) {
	.hrwf-w-quarter { grid-column: span 6; }
}
@media (max-width: 640px) {
	.hrwf-w-three-quarters, .hrwf-w-two-thirds, .hrwf-w-half, .hrwf-w-third, .hrwf-w-quarter { grid-column: span 12; }
}

.hrwf-label { display: block; margin: 0 0 6px; font-weight: 600; }
.hrwf--uk .hrwf-label.uk-form-label { display: block; margin-bottom: 6px; }
.hrwf-req { margin-left: 2px; color: var(--hrwf-err); }
.hrwf-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.hrwf-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.hrwf-group > legend { padding: 0; }
.hrwf-group:focus { outline: none; }
.hrwf-help { margin: 6px 0 0; font-size: .875em; color: var(--hrwf-muted); }
.hrwf-error { margin: 6px 0 0; font-size: .875em; font-weight: 600; color: var(--hrwf-err); }
.hrwf-error[hidden] { display: none; }
.hrwf-field.is-invalid .hrwf-input,
.hrwf-field.is-invalid .uk-input, .hrwf-field.is-invalid .uk-select, .hrwf-field.is-invalid .uk-textarea { border-color: var(--hrwf-err); }

.hrwf-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hrwf-addr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hrwf-addr .is-street { grid-column: span 3; }
.hrwf-addr .is-city { grid-column: span 2; }
.hrwf-split input::placeholder, .hrwf-addr input::placeholder { opacity: .8; }

.hrwf-choices { display: flex; flex-direction: column; gap: 8px; }
/* Optionen in Spalten oder nebeneinander */
.hrwf-choices.hrwf-cols-2, .hrwf-choices.hrwf-cols-3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.hrwf-choices.hrwf-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hrwf-choices.hrwf-cols-inline { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 640px) {
	.hrwf-choices.hrwf-cols-2, .hrwf-choices.hrwf-cols-3 { grid-template-columns: minmax(0, 1fr); }
}
/* Berechnung */
.hrwf-calc { display: block; font-size: 1.35em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.hrwf-choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.45; }
.hrwf-choice input, .hrwf-consent input { flex: none; margin: 3px 0 0; }
.hrwf-consent { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; font-size: .95em; }
.hrwf-consent label { cursor: pointer; }

/* Sterne: Inputs liegen rückwärts im DOM, row-reverse dreht die Anzeige um */
.hrwf-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.hrwf-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Leere Sterne als Umriss mit genug Kontrast (3:1), gewählte gefüllt */
.hrwf-stars label { cursor: pointer; color: color-mix(in srgb, currentColor 60%, transparent); line-height: 0; }
.hrwf-stars svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.hrwf-stars label:hover, .hrwf-stars label:hover ~ label,
.hrwf-stars input:checked ~ label { color: var(--hrwf-gold-ink); }
.hrwf-stars label:hover svg, .hrwf-stars label:hover ~ label svg,
.hrwf-stars input:checked ~ label svg { fill: var(--hrwf-gold); }
.hrwf-stars input:focus-visible + label { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

.hrwf-field[hidden] { display: none; }
.hrwf-upload { display: flex; flex-direction: column; gap: 6px; }
.hrwf-upload__info { font-size: .875em; color: var(--hrwf-muted); }
.hrwf--own .hrwf-file { display: block; width: 100%; padding: 12px; border: 1.5px dashed var(--hrwf-line); border-radius: var(--hrwf-radius); background: var(--hrwf-field); font: inherit; cursor: pointer; }
.hrwf--own .hrwf-file::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--hrwf-accent); border-radius: 6px; background: transparent; color: var(--hrwf-accent); font: inherit; font-weight: 600; cursor: pointer; }
.hrwf--uk .hrwf-upload .uk-input { height: auto; padding: 10px; }
.hrwf-heading h3 { margin: 0; }
.hrwf-heading p { margin: 6px 0 0; color: var(--hrwf-muted); }

.hrwf-summary { margin: 0 0 18px; padding: 12px 16px; border-radius: 8px; background: color-mix(in srgb, var(--hrwf-err) 9%, transparent); color: var(--hrwf-err); font-weight: 600; }
.hrwf-summary[hidden] { display: none; }
.hrwf-summary:focus { outline: 2px solid var(--hrwf-err); outline-offset: 2px; }
.hrwf-summary p { margin: 0; }
.hrwf-summary__list { margin: 8px 0 0; padding-left: 1.2em; font-weight: 400; }
.hrwf-summary__list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hrwf-summary__list a:focus-visible { outline: 2px solid var(--hrwf-err); outline-offset: 2px; }

/* Schritte: ohne JavaScript alle sichtbar, mit JavaScript einzeln */
.hrwf-progress { display: none; }
.hrwf.is-js .hrwf-progress { display: block; margin: 0 0 18px; font-size: .9em; color: var(--hrwf-muted); }
.hrwf-progress__bar { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; }
.hrwf-progress__bar i { display: block; height: 100%; width: 0; background: currentColor; transition: width .25s; }
.hrwf.is-js .hrwf-step:not(.is-current) { display: none; }
.hrwf .hrwf-step + .hrwf-step { margin-top: 28px; }
.hrwf.is-js .hrwf-step + .hrwf-step { margin-top: 0; }
.hrwf-nav { display: none; }
.hrwf.is-js .hrwf-nav { display: flex; gap: 10px; margin-top: 22px; }
.hrwf.is-js[data-multi] .hrwf-actions { display: none; }
.hrwf.is-js[data-multi].is-last .hrwf-actions { display: flex; }
.hrwf.is-js[data-multi].is-last .hrwf-nav { margin-bottom: -6px; }

.hrwf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hrwf-submit[disabled] { opacity: .65; cursor: progress; }

.hrwf-done { padding: 20px 22px; border-radius: 10px; background: color-mix(in srgb, currentColor 6%, transparent); }
.hrwf-done[hidden] { display: none; }
.hrwf-done p { margin: 0 0 .6em; }
.hrwf-done p:last-child { margin-bottom: 0; }
.hrwf-done:focus { outline: none; }
.hrwf-done .hrwf-pdf { margin-top: 1.1em; }

.hrwf-admin-note { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid var(--hrwf-gold); background: #FBF6EA; color: #4D3E1A; font-size: 14px; }

/* --------------------------------------------------------------------------
   Eigene Stile: klar, papier, linien – und „wie die Website“ ohne YOOtheme
   --hrwf-accent: Button- und Fokusfarbe (Editor → Design → Akzentfarbe)
   -------------------------------------------------------------------------- */
.hrwf--own { --hrwf-accent: #2E3A36; --hrwf-line: #CFC8BC; --hrwf-field: #FFFFFF; --hrwf-radius: 8px; }
.hrwf--own .hrwf-input {
	display: block; width: 100%; min-height: 46px; margin: 0; padding: 10px 14px;
	border: 1px solid var(--hrwf-line); border-radius: var(--hrwf-radius); background: var(--hrwf-field); color: inherit;
	font: inherit; line-height: 1.4; box-shadow: none;
}
.hrwf--own .hrwf-textarea { min-height: 130px; resize: vertical; }
.hrwf--own .hrwf-input:focus { outline: 2px solid var(--hrwf-accent); outline-offset: 1px; border-color: transparent; }
.hrwf--own .hrwf-check { width: 18px; height: 18px; accent-color: var(--hrwf-accent); }
.hrwf--own .hrwf-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
	border: 1.5px solid var(--hrwf-accent); border-radius: var(--hrwf-radius); background: var(--hrwf-accent); color: #FFFFFF;
	font: inherit; font-weight: 600; cursor: pointer; transition: filter .15s, background .15s;
}
.hrwf--own .hrwf-btn:hover { filter: brightness(1.12); }
.hrwf--own .hrwf-btn:focus-visible { outline: 2px solid var(--hrwf-accent); outline-offset: 2px; }
.hrwf--own .hrwf-btn--secondary, .hrwf--own .hrwf-btn--default, .hrwf--own .hrwf-prev { background: transparent; color: var(--hrwf-accent); }
.hrwf--own .hrwf-btn--secondary:hover, .hrwf--own .hrwf-btn--default:hover, .hrwf--own .hrwf-prev:hover { filter: none; background: color-mix(in srgb, var(--hrwf-accent) 8%, transparent); }
.hrwf--own .hrwf-btn--text { min-height: 40px; padding: 0; border: 0; background: none; color: var(--hrwf-accent); text-decoration: underline; text-underline-offset: 4px; }
.hrwf--own .hrwf-progress__bar i { background: var(--hrwf-accent); }

/* Papier: warm, Serifen in den Beschriftungen, das Formular als Karte */
.hrwf--style-papier { --hrwf-line: #E1D5BE; --hrwf-field: #FFFDF8; --hrwf-radius: 10px; padding: clamp(20px, 4vw, 34px); border: 1px solid #EFE6D6; border-radius: 16px; background: #FFFCF6; }
.hrwf--style-papier .hrwf-label, .hrwf--style-papier .hrwf-step__title, .hrwf--style-papier .hrwf-title { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 1.2em; font-weight: 600; }

/* Linien: nur ein Strich unter dem Feld */
.hrwf--style-linien { --hrwf-radius: 0; --hrwf-line: color-mix(in srgb, currentColor 40%, transparent); }
.hrwf--style-linien .hrwf-input { padding: 10px 2px; border-width: 0 0 1.5px; background: transparent; }
.hrwf--style-linien .hrwf-input:focus { outline: none; border-color: var(--hrwf-accent); box-shadow: 0 1.5px 0 var(--hrwf-accent); }
.hrwf--style-linien .hrwf-textarea { min-height: 100px; }

/* Button über die volle Breite */
.hrwf--btn-full .hrwf-actions .hrwf-submit { width: 100%; }

/* Maximale Breite aus dem Element */
.hrwf--w-small { max-width: 420px; }
.hrwf--w-medium { max-width: 600px; }
.hrwf--w-large { max-width: 800px; }

.hrwf-title { margin: 0 0 18px; }

@media (prefers-reduced-motion: reduce) {
	.hrwf-progress__bar i { transition: none; }
}