/*
 * The guest folder (plan 028, PR D). "Notte Carta": Carta page, white cards
 * with a hairline, Fraunces for names and values, IBM Plex Sans for text,
 * IBM Plex Mono only for coordinates, phone numbers and counters.
 * One content model, two layouts: tabs below 900px, one long page above.
 */
:root {
	--carta: #F4F1EB;
	--white: #FFFFFF;
	--line: #D9D3C7;
	--lino: #E1DCD0;
	--nebbia: #D6D9C8;
	--glicine: #E6DFF5;
	--notte: #1E1838;
	--lavanda: #D2C2F2;
	--pino: #0D6046;
	--pino-dark: #0B4D40;
	--tinte: #16131F;
	--neben: #45404F;
	--leise: #6A6470;
	--serif: 'Fraunces', Georgia, serif;
	--sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.mp {
	margin: 0;
	background: var(--carta);
	color: var(--tinte);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
	padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
body.mp-locked { overflow: hidden; }
.mp img { display: block; max-width: 100%; }
.mp p { margin: 0; }
.mp a { color: var(--pino); }
.mp a:hover { color: var(--pino-dark); }
.mp :focus-visible { outline: 2px solid var(--pino); outline-offset: 2px; }
.mp [hidden] { display: none !important; }

.mp-h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; }
.mp-h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; }
.mp-lead { font-family: var(--serif); font-size: 20px; line-height: 1.35; }
.mp-label { font-size: 14px; color: var(--neben); }
.mp-mono { font-family: var(--mono); font-size: 13px; }
.mp-muted { color: var(--neben); }
.mp-small { font-size: 13px; color: var(--neben); }
.mp-gap { margin-top: 12px; }
.mp-stack { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mp-stack > p, .mp-stack > .mp-btns, .mp-stack > .mp-kv, .mp-stack > .mp-facts, .mp-stack > .mp-beachrow { align-self: stretch; }
.mp-stack > p { max-width: 68ch; }

.mp-card { background: var(--white); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 18px; }

/* Buttons: Pino is the main action on light, Lavanda on Notte, the rest an outline. */
.mp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 18px;
	border: 1.5px solid var(--tinte); border-radius: 999px;
	background: transparent; color: var(--tinte);
	font: 600 15px/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer;
}
.mp a.mp-btn { color: var(--tinte); }
.mp-btn:hover { background: rgba(22, 19, 31, 0.06); }
.mp-btn--pino, .mp a.mp-btn--pino { background: var(--pino); border-color: var(--pino); color: var(--white); }
.mp-btn--pino:hover, .mp a.mp-btn--pino:hover { background: var(--pino-dark); border-color: var(--pino-dark); color: var(--white); }
.mp-btn--lavanda, .mp a.mp-btn--lavanda { background: var(--lavanda); border-color: var(--lavanda); color: var(--notte); }
.mp-btn--lavanda:hover, .mp a.mp-btn--lavanda:hover { background: #E0D4F7; border-color: #E0D4F7; color: var(--notte); }
.mp-btn--white { background: var(--white); border-color: var(--white); }
.mp-btn--white:hover { background: var(--carta); }
.mp-btn--s { min-height: 40px; padding: 0 16px; font-size: 14px; }
.mp-btn--l { min-height: 52px; font-size: 16px; align-self: stretch; }
.mp-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-btns--even > * { flex: 1 1 0; }
.mp-link {
	padding: 0; border: 0; background: none; cursor: pointer;
	font: 600 15px/1.4 var(--sans); color: var(--pino); text-decoration: underline;
}
.mp-link[disabled] { color: var(--leise); cursor: not-allowed; }

/* Top bar: wide screens only. */
.mp-top { display: none; }

/* The head: a slim flat Notte band. */
.mp-band { background: var(--notte); color: var(--white); }
.mp-band__in { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 16px; max-width: 1200px; margin: 0 auto; }
.mp-band__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mp-band__status { font-size: 14px; color: #D4CCEA; }
.mp-band__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.mp-band__place { font-size: 14px; color: #D4CCEA; }
.mp .mp-band__place a { color: var(--lavanda); font-weight: 600; }
.mp-band__action { align-self: flex-start; }
.mp-dates { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, 0.22); border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.mp-dates > div { display: flex; flex-direction: column; padding: 10px 0; font-size: 14px; color: #D4CCEA; }
.mp-dates > div + div { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
.mp-dates__k { font-size: 13px; }
.mp-dates__day { font-family: var(--serif); font-size: 20px; line-height: 1.25; color: var(--white); }

/* Sections. With script they are tabs on a phone; without, one long page. */
.mp-main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 8px; }
.mp-sec { display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; scroll-margin-top: 16px; }
.mp-js .mp-sec:not(.is-active) { display: none; }

.mp-rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mp-rowhead a:not(.mp-btn) { font-size: 15px; font-weight: 600; }

/* Photos: a strip you can swipe, the first one large before the trip. */
.mp-photos { position: relative; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.mp-photos::-webkit-scrollbar { display: none; }
.mp-photos img { flex: 0 0 70%; height: 150px; object-fit: cover; border-radius: 12px; scroll-snap-align: start; }
.mp-photos--lead img { flex-basis: 86%; height: 220px; }
.mp-photos__all {
	position: sticky; right: 0; align-self: flex-end; flex: 0 0 auto; margin: 0 0 10px -140px;
	min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
	background: var(--white); color: var(--tinte); box-shadow: 0 1px 4px rgba(22, 19, 31, 0.25);
	font: 600 14px/1 var(--sans); cursor: pointer; white-space: nowrap;
}

/* The section list on the overview: one card divided by hairlines. */
.mp-list { background: var(--white); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 18px; }
.mp .mp-list a { display: flex; align-items: center; min-height: 64px; padding: 10px 0; color: var(--tinte); text-decoration: none; }
.mp-list a + a { border-top: 1px solid var(--lino); }
.mp-list a > span { display: flex; flex-direction: column; flex: 1; }
.mp-list a > span > span { font-size: 14px; color: var(--neben); }
.mp-list a::after { content: ''; width: 9px; height: 9px; border-top: 1.5px solid var(--leise); border-right: 1.5px solid var(--leise); transform: rotate(45deg); margin-right: 4px; }

.mp-note { background: var(--lino); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.mp-memory { background: var(--glicine); border-radius: 14px; overflow: hidden; }
.mp-memory img { width: 100%; height: 200px; object-fit: cover; }
.mp-memory__text { padding: 18px; display: flex; flex-direction: column; gap: 6px; }

/* Beach cards. */
.mp-beachrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp .mp-beach { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 10px; background: var(--white); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); color: var(--tinte); text-decoration: none; font-size: 15px; line-height: 1.3; }
.mp-beach img { width: 100%; height: 92px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.mp-beach span { font-size: 13px; color: var(--neben); }

/* Haus. */
.mp-house { display: flex; flex-direction: column; gap: 14px; }
.mp-house__photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 84px 84px; gap: 6px; }
.mp-house__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.mp-house__photos img:first-child { grid-row: span 2; }
.mp-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.mp-kv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding: 6px 0; border-top: 1px solid var(--lino); font-size: 15px; }
.mp-kv__v { font-weight: 600; text-align: right; margin-left: auto; }
.mp-kv__note { flex: 0 0 100%; font-size: 13px; color: var(--neben); }

/* In der Nähe: the one Nebbia area of the page. */
.mp-nebbia { background: var(--nebbia); border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.mp-tile { background: var(--white); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.mp-tile p { font-size: 14px; color: var(--neben); }
.mp-dist { display: flex; justify-content: space-between; gap: 12px; }
.mp-dist span:last-child { font-family: var(--mono); font-size: 13px; color: var(--neben); white-space: nowrap; padding-top: 2px; }

/* Kontakt and the booking. */
.mp-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.mp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.mp-facts > div { display: flex; flex-direction: column; font-family: var(--serif); font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.mp-facts span { font-family: var(--sans); font-size: 13px; color: var(--neben); }
.mp-logout { padding-top: 6px; border-top: 1px solid var(--lino); align-self: stretch; }

/* Bottom tabs: a phone's navigation. */
.mp-tabs {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	display: grid; grid-template-columns: repeat(5, 1fr);
	background: var(--white); box-shadow: 0 -1px 0 var(--line);
	padding-bottom: env(safe-area-inset-bottom);
}
.mp .mp-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 6px 2px; color: var(--neben); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.mp .mp-tabs a[aria-current] { color: var(--pino); font-weight: 600; }

.mp-foot { max-width: 1200px; margin: 0 auto; padding: 8px 16px 24px; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; font-size: 13px; color: var(--neben); }
.mp-foot__links { display: flex; gap: 16px; }
.mp .mp-foot a { color: var(--neben); }

/* All photos, and one photo large on Notte. */
.mp-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--lino); color: var(--tinte); cursor: pointer; flex-shrink: 0; }
.mp-icon--dark { background: rgba(255, 255, 255, 0.14); color: var(--white); }
.mp-icon--line { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.mp-gallery { position: fixed; inset: 0; z-index: 1100; background: var(--carta); overflow-y: auto; }
.mp-gallery__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--carta); box-shadow: 0 1px 0 var(--line); }
.mp-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 12px 16px; max-width: 1200px; margin: 0 auto; }
.mp-gallery__grid button { padding: 0; border: 0; background: var(--lino); border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; }
.mp-gallery__grid img { width: 100%; height: 100%; object-fit: cover; }
.mp-gallery__foot { padding: 4px 16px 28px; text-align: center; font-weight: 600; }
.mp-lightbox { position: fixed; inset: 0; z-index: 1200; background: var(--notte); color: var(--white); display: flex; flex-direction: column; }
.mp-lightbox__head, .mp-lightbox__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.mp-lightbox__nav { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.mp .mp-lightbox__nav a { color: var(--lavanda); font-size: 15px; font-weight: 600; }
.mp-lightbox__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.mp-lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }

/* Sign-in. */
.mp-auth { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 0; }
.mp-auth__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
.mp-auth__card { width: 100%; max-width: 420px; gap: 16px; padding: 24px; }
.mp-auth__card > * { align-self: stretch; }
.mp .mp-auth__brand { font-family: var(--serif); font-size: 18px; color: var(--tinte); text-decoration: none; }
.mp-form { display: flex; flex-direction: column; gap: 14px; }
.mp-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 500; }
.mp-field input { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--leise); border-radius: 10px; background: var(--white); color: var(--tinte); font: 400 16px/1.2 var(--sans); }
.mp-field input:focus { border-color: var(--pino); outline: 2px solid var(--pino); outline-offset: 0; }
.mp-error { background: #F7E3DC; color: #7A1F0E; border-radius: 10px; padding: 10px 14px; font-size: 15px; }

/* The consent banner (cookieconsent.css): our type, and above the tabs on a phone. */
.mp .cc-window { font-family: var(--sans); font-size: 15px; line-height: 1.45; box-shadow: 0 -1px 0 var(--line); }
.mp .cc-window.cc-banner { bottom: calc(60px + env(safe-area-inset-bottom)); padding: 14px 16px; }
.mp .cc-btn { border-radius: 999px; font-size: 14px; }
.mp .cc-btn.cc-allow { background: var(--pino); }

@media (min-width: 600px) {
	.mp-beachrow { grid-template-columns: repeat(4, 1fr); }
	.mp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mp-gallery__grid { grid-template-columns: repeat(3, 1fr); }
	.mp-photos img { flex-basis: 40%; height: 180px; }
	.mp-photos--lead img { flex-basis: 60%; height: 300px; }
}

/* Wide screens: the same sections one after the other, a top bar instead of tabs. */
@media (min-width: 900px) {
	html { scroll-behavior: smooth; }
	body.mp { padding-bottom: 0; }
	.mp .cc-window.cc-banner { bottom: 0; padding: 14px 40px; }
	.mp-tabs, .mp-list { display: none; }
	.mp-js .mp-sec:not(.is-active) { display: flex; }
	.mp-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px max(40px, calc((100% - 1120px) / 2)); box-shadow: 0 1px 0 var(--line); }
	.mp-top__brand { font-family: var(--serif); font-size: 20px; white-space: nowrap; }
	.mp-top__nav { display: flex; gap: 22px; }
	.mp .mp-top__nav a { color: var(--tinte); font-size: 15px; font-weight: 500; text-decoration: none; }
	.mp .mp-top__nav a:hover { color: var(--pino); text-decoration: underline; }
	.mp-top__contact { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--neben); white-space: nowrap; }
	.mp .mp-top__contact .mp-mono { color: var(--tinte); text-decoration: none; }
	.mp-top__contact .mp-link { font-size: 14px; font-weight: 500; color: var(--neben); }

	.mp-band__in { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 32px; padding: 20px 40px; }
	.mp-band__name { font-size: 34px; }
	.mp-band__action { grid-column: 3; align-self: center; }
	.mp-dates { grid-column: 2; grid-row: 1; min-width: 320px; }
	.mp-dates > div { padding: 8px 20px 8px 0; }
	.mp-dates > div + div { padding-left: 20px; }

	.mp-main { padding: 32px 40px 8px; }
	.mp-sec { padding-bottom: 44px; scroll-margin-top: 24px; gap: 18px; }
	.mp-h2 { font-size: 30px; }
	.mp-card { padding: 22px 24px; }
	.mp-photos { margin: 0; padding: 0; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 170px 170px; overflow: hidden; border-radius: 14px; }
	.mp-photos img, .mp-photos--lead img { width: 100%; height: 100%; border-radius: 0; }
	.mp-photos img:first-child { grid-row: span 2; }
	.mp-photos__all { position: absolute; right: 14px; bottom: 14px; margin: 0; }
	.mp-memory { display: grid; grid-template-columns: 360px minmax(0, 1fr); align-items: center; }
	.mp-memory img { height: 220px; }
	.mp-memory__text { padding: 24px 28px; }
	#anreise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	#anreise > .mp-h2, #anreise > .mp-card:last-child:nth-child(4) { grid-column: 1 / -1; }
	.mp-text--cols { columns: 2; column-gap: 40px; max-width: none !important; }
	.mp-house { display: grid; grid-template-columns: 5fr 6fr; gap: 28px; align-items: start; }
	.mp-house__photos { grid-template-rows: 130px 130px; }
	.mp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.mp-nebbia { padding: 28px; gap: 20px; }
	.mp-beach img { height: 120px; }
	.mp-two { grid-template-columns: 5fr 6fr; gap: 18px; }
	.mp-foot { padding: 8px 40px 28px; }
	.mp-gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 40px; }
	.mp-gallery__head, .mp-lightbox__head, .mp-lightbox__nav { padding-left: 40px; padding-right: 40px; }
}

/*
 * The review form, /urlaub-bewerten (plan 042, PR B; holiday-feedback.php).
 * The Mappe's look: a Notte band on the phone, a slim Notte bar and the house
 * beside the form from 900px. Stars, chips and the segmented choices are
 * radios and checkboxes, so they work without JavaScript and with a keyboard.
 */
body.mp-rv { padding-bottom: 0; }
.rv-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rv-top { display: none; }
.mp .rv-brand { display: block; font: 600 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #D4CCEA; text-decoration: none; }
.rv-band { background: var(--notte); color: var(--white); padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.rv-house { display: flex; gap: 12px; align-items: center; }
.rv-house__photo { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.mp .rv-name { font: 400 22px/1.15 var(--serif); }
.mp .rv-when { font-size: 14px; color: #D4CCEA; margin-top: 4px; white-space: pre-line; }
.rv-aside { display: none; }
.rv-main { padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.mp .rv-lead { margin: 0; font: 400 22px/1.25 var(--serif); }
.rv-stack { display: flex; flex-direction: column; gap: 14px; }
.rv-card { display: flex; flex-direction: column; gap: 12px; }
.rv-h2 { margin: 0; font: 400 20px/1.2 var(--serif); }
.rv-h3 { margin: 0; font: 600 15px/1.3 var(--sans); }
.rv-req { font: 500 12px/1 var(--sans); color: var(--pino); background: #E3EFE9; border-radius: 999px; padding: 3px 8px; margin-left: 6px; vertical-align: 3px; }
.rv-opt { font: 500 12px/1 var(--sans); color: var(--leise); margin-left: 6px; }
.mp .rv-help { font-size: 13px; color: var(--leise); margin-top: -6px; }
.mp .rv-lock { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--neben); }
.mp .rv-err { color: #8A2318; font-size: 14px; }
.rv-summary { background: #FBEAE8; color: #8A2318; border-radius: 12px; padding: 12px 16px; }
.rv-summary ul { margin: 6px 0 0; padding-left: 18px; }
.mp .rv-summary a { color: #8A2318; }
.rv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rv-field { display: flex; flex-direction: column; gap: 6px; }
.rv-field > span { font-size: 14px; color: var(--neben); }
.rv-field > span.rv-h2 { font-size: 20px; color: var(--tinte); }
.rv-input { width: 100%; font: 16px/1.4 var(--sans); color: var(--tinte); border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--white); }
.rv-input:focus { outline: 2px solid var(--pino); outline-offset: 0; border-color: var(--pino); }
.rv-input--mono { font-family: var(--mono); text-transform: uppercase; }
.rv-textarea { min-height: 140px; resize: vertical; }
.rv-textarea--s { min-height: 90px; }
.rv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.rv-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; padding: 0; margin: 0; }
.rv-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-stars label { cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; }
.rv-stars svg { width: 38px; height: 38px; fill: none; stroke: #B9B2A4; stroke-width: 1.5; }
.rv-stars input:checked ~ label svg, .rv-stars label:hover svg, .rv-stars label:hover ~ label svg { fill: #E2A93B; stroke: #E2A93B; }
.rv-stars input:focus-visible + label { outline: 2px solid var(--pino); outline-offset: 1px; }
.rv-stars--s label { width: 34px; height: 44px; }
.rv-stars--s svg { width: 24px; height: 24px; }
.rv-stars-read { color: #E2A93B; font-size: 20px; letter-spacing: 2px; }
.rv-stars-read span { color: var(--lino); }
.rv-mini__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; border-top: 1px solid var(--lino); font-size: 15px; }
.rv-mini__row:first-child { border-top: 0; }

.rv-seg { display: flex; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.rv-seg label { flex: 1; display: grid; place-items: center; min-height: 44px; padding: 0 6px; font-size: 15px; text-align: center; cursor: pointer; border-left: 1.5px solid var(--line); }
.rv-seg label:first-child { border-left: 0; }
.rv-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-seg label:has(input:checked) { background: #E3EFE9; color: var(--pino-dark); font-weight: 600; }
.rv-seg label:has(input:focus-visible) { outline: 2px solid var(--pino); outline-offset: -2px; }
/* "Was war anders?" opens under Größtenteils and Nein. A browser without :has() shows it always. */
.rv-described:not(:has(input[value="meist"]:checked, input[value="nein"]:checked)) .rv-diff { display: none; }
.rv-diff { display: flex; flex-direction: column; gap: 8px; }

.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; cursor: pointer; }
.rv-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-chip:has(input:checked) { border-color: var(--pino); background: #E3EFE9; color: var(--pino-dark); font-weight: 600; }
.rv-chip:has(input:focus-visible) { outline: 2px solid var(--pino); outline-offset: 2px; }

.rv-rlist { display: flex; flex-direction: column; }
.rv-rlist > label { display: flex; gap: 10px; align-items: center; min-height: 52px; border-top: 1px solid var(--lino); font-size: 15px; cursor: pointer; }
.rv-rlist > label:first-child { border-top: 0; }
.rv-rlist input[type="radio"] { width: 20px; height: 20px; accent-color: var(--pino); flex: 0 0 auto; }
.rv-rlist small { display: block; color: var(--leise); font-size: 13px; }
.rv-namefield { padding: 0 0 10px 30px; }
.rv-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; padding-top: 4px; cursor: pointer; }
.rv-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pino); flex: 0 0 auto; }
.rv-send { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 900px) {
	.rv-top { display: flex; align-items: center; justify-content: space-between; background: var(--notte); padding: 0 40px; height: 60px; }
	.mp .rv-top__link { color: var(--lavanda); font-size: 14px; font-weight: 600; text-decoration: none; }
	.rv-band { display: none; }
	.rv-layout { display: grid; grid-template-columns: 360px minmax(0, 640px); gap: 40px; justify-content: center; align-items: start; padding: 40px 40px 64px; }
	.rv-layout--single { grid-template-columns: minmax(0, 640px); }
	.rv-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
	.rv-aside__photo { width: 100%; height: 230px; object-fit: cover; border-radius: 14px; }
	.rv-aside .rv-name { font-size: 28px; }
	.rv-aside .rv-when { color: var(--neben); font-size: 15px; }
	.rv-aside__note { display: flex; flex-direction: column; gap: 8px; }
	.rv-main { padding: 0; margin: 0; gap: 16px; max-width: none; }
	.mp .rv-lead { font-size: 30px; }
	.rv-layout:not(.rv-layout--single) .rv-phone-only { display: none; }
	.rv-send { flex-direction: row; align-items: center; gap: 20px; }
	.rv-send .mp-btn--l { align-self: auto; padding: 0 28px; }
}