/* Retro Hero Schaetzung - Design wie die uebrige Seite (Blocksy-Child, Teal #14838A).
   Nutzt die bestehenden Theme-Variablen (--rh-*) mit Fallbacks. */

.rhs-app {
	--rhs-teal: var(--rh-teal, #14838A);
	--rhs-teal-deep: var(--rh-teal-deep, #0B5E64);
	--rhs-tint: var(--rh-teal-tint, #E7F1F0);
	--rhs-ink: var(--rh-ink, #232A2C);
	--rhs-soft: var(--rh-ink-soft, #51605F);
	--rhs-paper: var(--rh-ivory, #FAF7F0);
	--rhs-card: var(--rh-card, #FFFFFF);
	--rhs-line: var(--rh-line, #E4E1D7);
	--rhs-gold: var(--rh-gold, #C9A24B);
	--rhs-gold-text: var(--rh-gold-text, #8A6A1E);
	--rhs-serif: var(--rh-serif, "Cormorant Garamond", Georgia, serif);
	--rhs-sans: var(--rh-sans, "Archivo", system-ui, sans-serif);
	position: relative;
	max-width: 920px;
	margin: 0 auto;
	padding: 46px 44px;
	font-family: var(--rhs-sans);
	color: var(--rhs-ink);
	background: #fff;
	border: 1px solid var(--rhs-line);
	border-radius: 22px;
	box-shadow: 0 30px 64px -40px rgba(35, 42, 44, .28);
}
@media (max-width: 680px) { .rhs-app { padding: 30px 18px; border-radius: 18px; } }

.rhs-app * { box-sizing: border-box; }

.rhs-step { animation: rhs-fade .3s ease; }
@keyframes rhs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rhs-h {
	font-family: var(--rhs-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	margin: 6px 0 4px;
	color: var(--rhs-ink);
}
.rhs-sub { color: var(--rhs-soft); font-size: 15px; margin: 0 0 16px; }
.rhs-frage { font-weight: 700; font-size: 1.15rem; margin: 1.2rem 0 .8rem; }

/* Segmentierung */
.rhs-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 0; }
.rhs-choice {
	display: flex; flex-direction: column; gap: .3rem; text-align: left;
	padding: 28px 26px 26px; border: 1.5px solid var(--rhs-line); border-radius: 16px;
	background: #fff;
	cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .15s;
}
.rhs-choice:hover, .rhs-choice:focus-visible {
	border-color: var(--rhs-gold); box-shadow: 0 22px 44px -28px rgba(35,42,44,.3); transform: translateY(-3px); outline: none;
}
.rhs-choice.is-selected {
	border-color: var(--rhs-teal);
	box-shadow: 0 0 0 3px var(--rhs-tint), 0 22px 44px -30px rgba(20,131,138,.5);
}
.rhs-choice-t { font-family: var(--rhs-serif); font-size: 1.2rem; font-weight: 600; color: var(--rhs-ink); padding-right: 30px; white-space: nowrap; }
.rhs-choice-s { font-size: .9rem; color: var(--rhs-soft); }
@media (max-width: 600px) { .rhs-choices { grid-template-columns: 1fr; } }

.rhs-back {
	background: none; border: 0; color: var(--rhs-teal); font: inherit; cursor: pointer;
	padding: .2rem 0; margin: 0 0 .8rem; font-weight: 600;
}
.rhs-back:hover { color: var(--rhs-teal-deep); }

/* Artikel / Kontakt-Boxen */
.rhs-artikel, .rhs-kontakt {
	background: var(--rhs-card); border: 1px solid var(--rhs-line); border-radius: 14px;
	padding: 1.2rem 1.3rem; margin: 0 0 1rem;
}
.rhs-artikel-h { font-family: var(--rhs-serif); font-size: 1.25rem; margin: 0 0 .8rem; color: var(--rhs-ink); }

.rhs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin-top: .8rem; }
.rhs-feld { display: flex; flex-direction: column; gap: .3rem; }
.rhs-label { font-size: .82rem; font-weight: 600; color: var(--rhs-soft); }
.rhs-input {
	width: 100%; padding: .6rem .75rem; border: 1.5px solid var(--rhs-line); border-radius: 9px;
	font: inherit; color: var(--rhs-ink); background: #fff;
}
.rhs-input:focus { border-color: var(--rhs-teal); outline: none; box-shadow: 0 0 0 3px var(--rhs-tint); }

/* Uploader */
.rhs-uploader { margin: .4rem 0 .2rem; }
.rhs-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0; }
.rhs-thumb { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--rhs-line); }
.rhs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rhs-thumb-x {
	position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; line-height: 20px;
	border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 16px;
}
.rhs-file-btn {
	display: inline-block; padding: .5rem 1rem; border: 1.5px dashed var(--rhs-teal); border-radius: 9px;
	color: var(--rhs-teal); font-weight: 600; cursor: pointer; background: var(--rhs-tint);
}
.rhs-file-btn:hover { background: #dcebe9; }
.rhs-file { display: none; }

/* Einwilligung */
.rhs-check { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; font-size: .92rem; color: var(--rhs-soft); }
.rhs-check input { margin-top: .2rem; }
.rhs-check a { color: var(--rhs-teal); }
.rhs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Buttons */
.rhs-add, .rhs-remove {
	background: none; border: 1.5px solid var(--rhs-line); border-radius: 9px; padding: .55rem 1rem;
	font: inherit; font-weight: 600; cursor: pointer; color: var(--rhs-ink); margin: .2rem 0;
}
.rhs-add:hover { border-color: var(--rhs-teal); color: var(--rhs-teal); }
.rhs-remove { color: #a23; border-color: #e3c4c4; font-size: .85rem; margin-top: .8rem; }

.rhs-submit {
	display: block; width: 100%; margin: 1.4rem 0 0; padding: .9rem 1.2rem;
	background: var(--rhs-teal); color: #fff; border: 0; border-radius: 11px;
	font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
.rhs-submit:hover { background: var(--rhs-teal-deep); }

.rhs-msg { margin: .8rem 0 0; min-height: 1.2em; font-size: .95rem; }
.rhs-msg-err { color: #b3261e; font-weight: 600; }

/* Laden: Mehrstufiger Fortschritt (Radar + zyklischer Status + Etappen-Pillen) */
.rhs-laden { text-align: center; padding: 2.6rem 1rem; }
.rhs-radar { width: 66px; height: 66px; margin: 6px auto 20px; position: relative; border-radius: 50%; background: var(--rhs-tint); }
.rhs-radar::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: var(--rhs-teal); }
.rhs-radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--rhs-teal); opacity: 0; animation: rhs-ping 1.8s ease-out infinite; }
.rhs-radar span:nth-child(2) { animation-delay: .6s; }
.rhs-radar span:nth-child(3) { animation-delay: 1.2s; }
@keyframes rhs-ping { 0% { transform: scale(.45); opacity: .7; } 100% { transform: scale(1.15); opacity: 0; } }
.rhs-progress-text { font-family: var(--rhs-serif); font-size: 1.35rem; color: var(--rhs-ink); margin: 0 0 1.1rem; min-height: 1.4em; }
.rhs-progress-stages { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.rhs-progress-stages span { font-size: .8rem; font-weight: 600; color: var(--rhs-soft); background: #fff; border: 1px solid var(--rhs-line); border-radius: 999px; padding: .35rem .85rem; opacity: .5; transition: all .3s ease; }
.rhs-progress-stages span.done { opacity: 1; border-color: var(--rhs-teal); color: var(--rhs-teal-deep); background: var(--rhs-tint); }
.rhs-progress-stages span.active { opacity: 1; border-color: var(--rhs-teal); color: #fff; background: var(--rhs-teal); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .rhs-radar span { animation: none; opacity: .5; } }

/* Ergebnis */
.rhs-bestaetigt {
	background: var(--rhs-tint); border-left: 4px solid var(--rhs-teal); border-radius: 0 10px 10px 0;
	padding: .9rem 1.1rem; margin: 0 0 1.4rem; color: var(--rhs-teal-deep); font-weight: 600;
}
.rhs-objekte { margin: 0 0 1.2rem; }
.rhs-card {
	background: var(--rhs-card); border: 1px solid var(--rhs-line); border-radius: 14px;
	padding: 1.1rem 1.2rem; margin: 0 0 .9rem;
}
.rhs-card-h { font-family: var(--rhs-serif); font-size: 1.3rem; margin: 0 0 .15rem; color: var(--rhs-ink); }
.rhs-epoche { font-size: .85rem; color: var(--rhs-gold-text); font-weight: 600; margin: 0 0 .4rem; }
.rhs-beschr { color: var(--rhs-soft); margin: 0 0 .7rem; }
.rhs-wert-label { font-size: .8rem; color: var(--rhs-soft); margin: 0; display: block; }
.rhs-wert { font-family: var(--rhs-serif); font-size: 1.5rem; font-weight: 700; color: var(--rhs-teal-deep); margin: .1rem 0 0; }
.rhs-card-hint { font-size: .82rem; color: var(--rhs-soft); font-style: italic; margin: .5rem 0 0; }
.rhs-gesamt {
	display: flex; justify-content: space-between; align-items: baseline;
	padding-top: 1rem; margin: .2rem 0 0;
}
.rhs-gesamt .rhs-wert-label { font-weight: 600; }
.rhs-gesamt .rhs-wert { font-size: 1.45rem; }
.rhs-erklaer {
	font-size: .88rem; color: var(--rhs-soft); background: var(--rhs-paper);
	border-radius: 10px; padding: .8rem 1rem; margin: .2rem 0 0;
}
.rhs-selbst { background: var(--rhs-paper); border-radius: 10px; padding: .9rem 1.1rem; color: var(--rhs-soft); }

.rhs-raum { margin: 0 0 1rem; }
.rhs-raum-txt { font-size: 1.02rem; }
.rhs-beispiele { color: var(--rhs-soft); margin: .3rem 0 0; padding-left: 1.2rem; }

/* Aktions-Boxen nebeneinander (2 Spalten, mobil gestapelt) */
.rhs-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 .9rem; }
.rhs-boxes .rhs-box { margin: 0; }
.rhs-boxes:has(.rhs-box:only-child) { grid-template-columns: 1fr; }
@media (max-width: 680px) { .rhs-boxes { grid-template-columns: 1fr; } }

/* Aktions-Boxen */
.rhs-box {
	background: var(--rhs-card); border: 1px solid var(--rhs-line); border-left: 4px solid var(--rhs-gold);
	border-radius: 0 14px 14px 0; padding: 1.1rem 1.2rem; margin: 0 0 .9rem;
}
.rhs-box-h { font-family: var(--rhs-serif); font-size: 1.25rem; margin: 0 0 .4rem; color: var(--rhs-ink); }
.rhs-box p { color: var(--rhs-soft); margin: 0 0 .9rem; }
.rhs-box-btn {
	display: inline-block; padding: .65rem 1.2rem; background: var(--rhs-teal); color: #fff !important;
	border-radius: 9px; text-decoration: none; font-weight: 700;
}
.rhs-box-btn:hover { background: var(--rhs-teal-deep); }
.rhs-box-mehr {
	display: block; margin-top: .6rem; font-size: .88rem; color: var(--rhs-teal);
	text-decoration: underline; text-underline-offset: 3px;
}
.rhs-box-mehr:hover { color: var(--rhs-teal-deep); }

.rhs-disclaimer { font-size: .8rem; color: var(--rhs-soft); margin: 1.2rem 0 0; text-align: center; }

/* ============================================================
   v1.1 - Schritt-Indikator, Live-Vorschau, Icon-Karten, Buttons, Ergebnis-Kopf
   ============================================================ */

/* Fortschritt */
.rhs-steps { list-style: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .2rem; margin: 0 0 1.6rem; padding: 0; }
.rhs-stepitem { display: flex; align-items: center; gap: .55rem; color: var(--rhs-soft); font-size: .95rem; }
.rhs-stepitem:not(:last-child)::after { content: ""; width: 54px; height: 2px; background: var(--rhs-line); margin: 0 16px; border-radius: 2px; }
.rhs-stepnum { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--rhs-line); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--rhs-serif); font-size: 1rem; }
.rhs-stepitem.is-active { color: var(--rhs-teal-deep); font-weight: 600; }
.rhs-stepitem.is-done { color: var(--rhs-teal-deep); }
.rhs-stepitem.is-active .rhs-stepnum { background: var(--rhs-teal); border-color: var(--rhs-teal); color: #fff; box-shadow: 0 0 0 5px var(--rhs-tint); }
.rhs-stepitem.is-done .rhs-stepnum { background: var(--rhs-tint); border-color: var(--rhs-teal); }
@media (max-width: 560px) { .rhs-steplabel { display: none; } .rhs-stepitem:not(:last-child)::after { width: 28px; margin: 0 10px; } }

/* Auswahlkarten: Icon (immer teal-gefuellt, wie auf der Vorlage) */
.rhs-choice-ico {
	display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px;
	background: linear-gradient(140deg, var(--rhs-teal) 0%, var(--rhs-teal-deep) 100%); color: #fff; margin: 0 0 16px;
	box-shadow: 0 10px 20px -10px rgba(20,131,138,.65);
}
.rhs-choice-ico svg { width: 27px; height: 27px; }
.rhs-choice-d { font-size: .92rem; color: var(--rhs-soft); line-height: 1.45; }

/* Buttons + Aktionsleiste */
.rhs-btn { display: inline-flex; align-items: center; justify-content: center; padding: .82rem 1.7rem; border-radius: 11px; border: 1.5px solid transparent; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.rhs-btn-primary { background: var(--rhs-teal); color: #fff; }
.rhs-btn-primary:hover { background: var(--rhs-teal-deep); }
.rhs-btn-primary:disabled { background: #a9cdcb; cursor: not-allowed; }
.rhs-btn-ghost { background: #fff; color: var(--rhs-teal-deep); border-color: var(--rhs-line); }
.rhs-btn-ghost:hover { border-color: var(--rhs-teal); }
.rhs-actions { display: flex; align-items: center; gap: .8rem; margin: 1.7rem 0 0; }
.rhs-actions-end { justify-content: flex-end; }
.rhs-actions .rhs-btn-ghost { margin-right: auto; }
.rhs-neu { margin: 1.6rem auto 0; display: block; }

.rhs-sep { border: 0; border-top: 1px solid var(--rhs-line); margin: 1.8rem 0; }
.rhs-opt { font-weight: 400; color: var(--rhs-soft); }
.rhs-sub-tight { margin-top: -.2rem; }
.rhs-hint { font-size: .85rem; color: var(--rhs-soft); text-align: right; margin: .3rem 0 0; }
.rhs-msg-warn { color: #8a6a1e; font-weight: 600; }

/* Foto-hinzufuegen als Kachel (neben den Vorschaubildern) */
.rhs-file-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; width: 92px; height: 92px; border: 1.5px dashed var(--rhs-teal); border-radius: 12px; background: var(--rhs-tint); color: var(--rhs-teal); font-weight: 600; font-size: .8rem; text-align: center; cursor: pointer; }
.rhs-file-btn:hover { background: #dcebe9; }
.rhs-file-plus { font-size: 1.5rem; font-weight: 400; line-height: 1; }

/* Ergebnis: Eyebrow + Karten-Kopf (Titel links, Wert rechts) */
.rhs-ergebnis-eyebrow { text-align: center; color: var(--rhs-gold-text); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; margin: 0 0 1.2rem; }
.rhs-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; }
.rhs-card-wert { text-align: right; flex: none; min-width: 11rem; }

/* Wert-Balken: zeigt die Spanne min-max relativ zum hoechsten Objektwert */
.rhs-range { margin-top: .7rem; height: 7px; border-radius: 999px; background: #EFEBE0; position: relative; overflow: hidden; }
.rhs-range i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--rhs-teal), var(--rhs-gold)); transition: left .8s cubic-bezier(.22,.61,.36,1), width .8s cubic-bezier(.22,.61,.36,1); }

/* Konfidenz-Messer: 3 Balken + Beschriftung */
.rhs-meter { display: flex; align-items: center; gap: .25rem; margin-top: .6rem; justify-content: flex-end; }
.rhs-meter b { width: 18px; height: 5px; border-radius: 2px; background: #E0DBCF; }
.rhs-meter b.on { background: var(--rhs-teal); }
.rhs-meter small { margin-left: .4rem; font-size: .72rem; color: var(--rhs-soft); font-weight: 600; }

@media (max-width: 540px) {
	.rhs-card-head { flex-direction: column; }
	.rhs-card-wert { text-align: left; min-width: 0; }
	.rhs-meter { justify-content: flex-start; }
}

/* Gestaffeltes Einblenden der Ergebnis-Bloecke */
.rhs-reveal { opacity: 0; transform: translateY(14px); animation: rhs-in .55s ease forwards; }
@keyframes rhs-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rhs-reveal { opacity: 1; transform: none; animation: none; } }

/* Auswahlkarten: Radio-Indikator oben rechts (wie auf der Vorlage) */
.rhs-choice { position: relative; }
.rhs-choice::after {
	content: ""; position: absolute; top: 18px; right: 18px; width: 24px; height: 24px;
	border-radius: 50%; border: 1.5px solid var(--rhs-line); background: #fff; transition: all .18s ease;
}
.rhs-choice[aria-pressed="true"]::after {
	border-color: var(--rhs-teal);
	background: var(--rhs-teal) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/14px no-repeat;
}