/* ==========================================================================
   BASE – strukturelle, design-neutrale Styles fuer Albergo Etrusco.
   Verwendet AUSSCHLIESSLICH die Variablen aus theme.css.
   Responsive-Overrides am ENDE der Datei (Lektion CLAUDE.md).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--line-base);
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    line-height: 1.15;
    color: var(--color-brand);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-3); }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
img { max-width: 100%; height: auto; display: block; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}
.container--narrow { max-width: var(--container-narrow); }
.muted { color: var(--color-text-muted); }
.eyebrow {
    text-transform: uppercase; letter-spacing: .14em; font-size: .8rem;
    font-weight: var(--fw-semibold); color: var(--color-primary); margin-bottom: var(--space-2);
}

main { flex: 1 0 auto; }

/* Skip-Link (Barrierefreiheit) – nur bei Tastatur-Fokus sichtbar */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--color-primary); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; }
.skip-link:focus { left: 0; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .8em 1.6em;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    letter-spacing: .01em;
    background: var(--color-bg-alt);
    color: var(--color-text);
    font: inherit; font-weight: var(--fw-medium); line-height: 1;
    cursor: pointer; text-align: center;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-brand); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--sm { padding: .55em 1.1em; font-size: .9rem; }
.btn--lg { padding: 1em 2em; font-size: 1.1rem; }

/* --- Header / Navigation ------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 248, 244, .92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav > a {
    color: var(--color-text); font-weight: var(--fw-medium); position: relative; padding: .25em 0;
}
.nav > a:hover, .nav > a.is-active { color: var(--color-primary); }
.nav > a.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--color-primary); border-radius: 2px;
}
.lang-switch { display: inline-flex; gap: .15rem; align-items: center; }
.lang-switch a {
    color: var(--color-text-muted); font-size: .8rem; font-weight: var(--fw-semibold);
    padding: .25rem .45rem; border-radius: var(--radius-sm); letter-spacing: .03em;
}
.lang-switch a.is-active { color: var(--color-primary-contrast); background: var(--color-primary); }
.lang-switch a:hover { color: var(--color-primary); }
.lang-switch a.is-active:hover { color: #fff; }
.nav-cta { white-space: nowrap; padding: .58em 1.25em; font-size: .92rem; }

.nav-toggle {
    display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
    border: 0; background: transparent; cursor: pointer; padding: 10px;
}
.nav-toggle span { display: block; height: 2px; background: var(--color-brand); border-radius: 2px; transition: var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; color: #fff; overflow: hidden; isolation: isolate; }
.hero__bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.hero__overlay {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(46,52,56,.45) 0%, rgba(46,52,56,.30) 40%, rgba(46,52,56,.62) 100%);
}
.hero__inner { padding-top: var(--space-7); padding-bottom: var(--space-5); max-width: 760px; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .82rem; font-weight: var(--fw-semibold); color: rgba(255,255,255,.9); }
.hero__title { color: #fff; font-size: var(--fs-h1); margin: .2em 0; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero__subtitle { font-size: var(--fs-lead); color: rgba(255,255,255,.94); max-width: 36ch; }
.hero--page .hero__inner { padding-block: var(--space-6); }
.hero--page { min-height: 42vh; display: flex; align-items: center; }

.hero__search { padding-bottom: var(--space-6); }
.search-title { color: #fff; font-size: 1.2rem; margin-bottom: var(--space-2); text-shadow: 0 2px 12px rgba(0,0,0,.3); }

/* --- Suchmaske ----------------------------------------------------------- */
.search-form {
    display: grid; gap: var(--space-3); align-items: end;
    grid-template-columns: 1.3fr 1.3fr .8fr .8fr auto;
    background: var(--color-surface); color: var(--color-text);
    padding: var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow);
}
.search-form__field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.search-form__field label { font-size: .82rem; font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.search-form input {
    width: 100%; padding: .7em .8em; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--color-text);
}
.search-form input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.search-form__submit .btn { width: 100%; }
.sf-datefield { cursor: pointer; background: #fff; }
.sf-calendar { grid-column: 1 / -1; justify-self: start; width: max-content; max-width: 100%; margin-top: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-3); box-shadow: var(--shadow); }
.sf-calendar .cal-nav { display: flex; gap: var(--space-2); justify-content: flex-end; margin-bottom: var(--space-1); }
.sf-calendar .cal-prev, .sf-calendar .cal-next { border: 1px solid var(--color-border); background: var(--color-surface); width: 1.8rem; height: 1.8rem; cursor: pointer; border-radius: var(--radius-sm); font-size: 1rem; line-height: 1; }
.sf-calendar .cal-prev[disabled] { opacity: .35; cursor: default; }
/* Kompakte Masse: zwei kleine Monate nebeneinander (mobil umbrechend) statt voller Breite. */
.sf-calendar .cal-months { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.sf-calendar .cal-month { width: 206px; }
.sf-calendar .cal-grid { gap: 2px; }
.sf-calendar .cal-month__title { font-size: .9rem; margin-bottom: var(--space-2); }
.sf-calendar .cal-cell { font-size: .76rem; }
.search-form--aside { grid-template-columns: 1fr 1fr; box-shadow: none; padding: 0; background: transparent; }
.search-form--aside .search-form__submit { grid-column: 1 / -1; }

/* --- Sektionen ----------------------------------------------------------- */
.section { padding-block: var(--space-7); }
.section--alt { background: var(--color-bg-alt); }
.section--intro { padding-top: var(--space-7); }
.section--split { background: var(--color-section); }
.section-head { margin-bottom: var(--space-5); }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.page-head { padding-block: var(--space-6) var(--space-4); background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); }
.page-head h1 { margin-bottom: var(--space-2); }
.page-head .lead { max-width: 60ch; }
.page-head--compact { padding-block: var(--space-5) var(--space-3); }
.breadcrumb { margin-bottom: var(--space-2); font-size: .9rem; }
.lead { font-size: var(--fs-lead); color: var(--color-text); }

/* --- Grids --------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--center { align-items: center; }

.figure { margin: 0; }
.figure--rounded img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; object-fit: cover; }

/* --- Features ------------------------------------------------------------ */
.feature { text-align: center; padding: var(--space-4); }
.feature h3 { margin-bottom: var(--space-2); }
.feature h3::after { content: ""; display: block; width: 34px; height: 2px; margin: var(--space-3) auto 0; background: var(--color-primary); }

/* --- Zimmer-Karten ------------------------------------------------------- */
.room-grid { gap: var(--space-5); }
.room-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.room-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.room-card__media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--color-bg-alt); }
.room-card__media img { width: 100%; height: 100%; object-fit: cover; }
.room-card__placeholder {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); color: var(--color-text-muted);
}
.room-card__badge {
    position: absolute; top: .75rem; left: .75rem; background: var(--color-brand); color: #fff;
    font-size: .72rem; padding: .3em .7em; border-radius: var(--radius-pill);
}
.room-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.room-card__highlight { color: var(--color-primary); font-weight: var(--fw-semibold); font-size: .85rem; margin: 0; }
.room-card__title { margin: 0; font-size: 1.3rem; }
.room-card__title a { color: var(--color-brand); }
.room-card__title a:hover { color: var(--color-primary); }
.room-card__text { color: var(--color-text-muted); font-size: .95rem; margin: 0; }
.room-card__facts { list-style: none; padding: 0; margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .85rem; color: var(--color-text-muted); }
.room-card__facts li { position: relative; padding-left: 1rem; }
.room-card__facts li::before { content: "•"; position: absolute; left: 0; color: var(--color-accent); }
.room-card__footer { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border-top: 1px solid var(--color-border); }
.room-card__price { font-weight: var(--fw-semibold); color: var(--color-brand); }

/* --- CTA-Band ------------------------------------------------------------ */
.cta-band { background: var(--color-brand); color: #fff; padding-block: var(--space-6); text-align: center; }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.cta-band h2 { color: #fff; margin: 0; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--space-2); }
.faq__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.faq__item summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--color-brand); list-style: none; position: relative; padding-right: 2rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 0; top: -.1em; font-size: 1.4rem; color: var(--color-primary); transition: var(--transition); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: var(--space-3) 0 0; color: var(--color-text-muted); }

/* --- Zimmer-Detail ------------------------------------------------------- */
.room-detail { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-5); align-items: start; }
.room-detail__aside { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
.gallery__main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.gallery__thumbs { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.gallery__thumb { width: 88px; height: 62px; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; padding: 0; cursor: pointer; background: var(--color-bg-alt); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--color-primary); }
.gallery--empty { aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); border-radius: var(--radius); font-family: var(--font-head); color: var(--color-text-muted); }
.prose { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-5); }
.prose--center { text-align: center; }
.amenities { margin-top: var(--space-5); }
.badge-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.badge-amenity { background: var(--color-mint); color: #234; padding: .4em .9em; border-radius: var(--radius-pill); font-size: .85rem; }
.booking-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.booking-box__price { font-size: 1.25rem; color: var(--color-brand); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.booking-box__title { font-size: 1.1rem; margin: var(--space-3) 0; }
.facts { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--color-border); font-size: .92rem; }
.facts li span { color: var(--color-text-muted); }
.facts li strong { color: var(--color-brand); }

/* --- Buchungsseite (AJAX-Ergebnisse) ------------------------------------- */
.booking-search { margin-bottom: var(--space-4); }
.booking-intro { max-width: 60ch; margin-bottom: var(--space-5); }
#booking-results { display: grid; gap: var(--space-4); }
.avail-card { display: grid; grid-template-columns: 240px 1fr auto; gap: 0; align-items: stretch; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.avail-card__media { align-self: stretch; min-height: 170px; background: var(--color-bg-alt); overflow: hidden; display: block; }
.avail-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avail-card__body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; justify-content: center; }
.avail-card__body h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.avail-card__price { color: var(--color-brand); font-weight: var(--fw-semibold); margin: 0; }
.avail-card__body h3 a { color: var(--color-brand); }
.avail-card__body h3 a:hover { color: var(--color-primary); }
.avail-card__more { display: inline-block; margin-top: .4rem; font-size: .85rem; font-weight: var(--fw-medium); }
.avail-card__per { color: var(--color-text-muted); font-weight: var(--fw-normal); font-size: .85rem; }
.avail-card__action { padding: var(--space-4) var(--space-5); display: flex; align-items: center; }
.booking-message { padding: var(--space-5); background: var(--color-bg-alt); border-radius: var(--radius); text-align: center; color: var(--color-text-muted); }
.booking-note { font-size: .85rem; color: var(--color-text-muted); margin-top: var(--space-2); }
.booking-loading { text-align: center; padding: var(--space-5); color: var(--color-text-muted); }

/* --- Kontakt ------------------------------------------------------------- */
.contact-grid { gap: var(--space-6); align-items: start; }
.contact-address { font-style: normal; line-height: 1.8; }
.contact-info h3 { font-size: 1.05rem; margin: var(--space-4) 0 var(--space-1); }
.contact-form label { display: block; margin-bottom: var(--space-3); font-weight: var(--fw-medium); }
.form input, .form textarea, .form select {
    width: 100%; padding: .7em .8em; margin-top: .35rem; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--color-text);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.field-error { display: block; color: var(--color-error); font-size: .85rem; margin: -.5rem 0 var(--space-3); }
.checkbox { display: flex; align-items: flex-start; gap: .6rem; font-weight: var(--fw-normal); }
.checkbox input { width: auto; margin-top: .25rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg-alt); min-height: 320px; display: flex; }
.map-embed iframe { width: 100%; height: 400px; border: 0; }
.map-embed__placeholder { margin: auto; text-align: center; padding: var(--space-5); }
.map-note { margin-top: var(--space-2); font-size: .85rem; }

/* --- Rechtsseiten / Prose ------------------------------------------------ */
.legal h2 { font-size: 1.3rem; margin-top: var(--space-5); }
.legal p, .legal li { color: var(--color-text); }

/* --- Footer -------------------------------------------------------------- */
.site-footer { margin-top: auto; background: var(--color-brand); color: rgba(255,255,255,.85); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--space-5); padding-block: var(--space-6); }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--space-3); }
.site-footer a { color: rgba(255,255,255,.85); display: inline-block; }
.site-footer a:hover { color: #fff; }
.footer-col { display: flex; flex-direction: column; gap: .5rem; }
.footer-col address { font-style: normal; line-height: 1.9; }
.footer-brand__name { font-family: var(--font-head); font-size: 1.5rem; color: #fff; display: block; }
.footer-brand__tag { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-mint); display: block; margin-bottom: var(--space-3); }
.footer-brand .muted { color: rgba(255,255,255,.7); }
.site-footer__bar { border-top: 1px solid rgba(255,255,255,.15); }
.site-footer__bar-inner { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); flex-wrap: wrap; font-size: .85rem; }
.site-footer__bar-inner p { margin: 0; }

/* --- Alerts / Formular-Status ------------------------------------------- */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.alert--error { background: var(--color-error-bg); color: var(--color-error); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); }
.alert--info { background: var(--color-info-bg); color: var(--color-brand); }
.form--narrow { max-width: 360px; }
.form button { margin-top: var(--space-2); }

/* --- Cookie-Consent (von main.js erzeugt) -------------------------------- */
.cookie-consent {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 100;
    width: min(680px, calc(100% - 2rem));
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}
.cookie-consent span { flex: 1; min-width: 220px; font-size: .9rem; }
.cookie-consent .btn { flex: 0 0 auto; }

/* --- Baustellen-Gate ----------------------------------------------------- */
.gate-page { align-items: center; justify-content: center; background: var(--color-bg); }
.gate { text-align: center; max-width: 420px; margin: auto; padding: var(--space-5); }
.gate__logo { margin: 0 auto var(--space-4); width: 200px; height: auto; }
.gate__form { margin-inline: auto; margin-top: var(--space-4); }
.gate__form input { text-align: center; letter-spacing: .3em; font-size: 1.3rem; }

/* --- Admin: kleine Ergaenzungen ------------------------------------------ */
.admin-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.form--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); align-items: start; }
.form--grid > button { grid-column: 1 / -1; justify-self: start; }
.room-form fieldset, .room-images { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); margin-bottom: var(--space-4); }
.room-form legend { font-weight: var(--fw-semibold); padding: 0 .5rem; color: var(--color-brand); }
.amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .4rem .8rem; margin-bottom: var(--space-3); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.image-tile { position: relative; margin: 0; }
.image-tile img { border-radius: var(--radius-sm); aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.image-tile .badge { position: absolute; top: .4rem; left: .4rem; }
.image-tile form { position: absolute; bottom: .4rem; right: .4rem; }
.meta-list { list-style: none; padding: 0; color: var(--color-text-muted); }
.admin-back { margin-bottom: var(--space-3); }

/* --- Kulinarik / Speisekarte --------------------------------------------- */
.section-head--center { text-align: center; }
.section-head--center .muted { max-width: 52ch; margin-inline: auto; }
.menu-cat { margin-bottom: var(--space-5); }
.menu-cat__title { font-size: 1.4rem; color: var(--color-brand); border-bottom: 2px solid var(--color-mint); padding-bottom: .4rem; margin-bottom: var(--space-3); }
.menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.menu-item__head { display: flex; align-items: baseline; gap: .5rem; }
.menu-item__name { font-weight: var(--fw-semibold); color: var(--color-text); }
.menu-item__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--color-border); transform: translateY(-4px); min-width: 1.5rem; }
.menu-item__price { font-weight: var(--fw-semibold); color: var(--color-primary); white-space: nowrap; }
.menu-item__desc { margin: .25rem 0 0; color: var(--color-text-muted); font-size: .92rem; }
.price-note { margin-top: var(--space-4); font-size: .85rem; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.gallery-grid__item { margin: 0; }
.gallery-grid__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.reserve-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.reserve-form .form--grid { grid-template-columns: repeat(2, 1fr); }
.reserve-form label { display: block; margin-bottom: var(--space-3); font-weight: var(--fw-medium); }

/* --- Überarbeitete Seiten: Castaneda / Über uns / Kontakt --------------- */
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.season-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); }
.season-card h3 { color: var(--color-primary); }

.quote-band { background: var(--color-brand); color: #fff; padding-block: var(--space-6); text-align: center; }
.quote-band blockquote { margin: 0; font-family: var(--font-head); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.4; color: #fff; }

.cta-band__btns { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.btn--on-dark { color: #fff; border-color: rgba(255,255,255,.5); }
.btn--on-dark:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.cta-inline { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }
.cta-inline .muted { margin: 0; }

.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.contact-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); text-align: center; }
.contact-card h3 { font-size: 1.05rem; margin-bottom: var(--space-2); color: var(--color-brand); }
.contact-card address { font-style: normal; line-height: 1.7; }
.contact-card p { margin: 0; }

/* --- Verfügbarkeits-Kalender (Zimmer-Detail) ----------------------------- */
.room-calendar { margin-top: var(--space-5); }
.room-calendar h2 { margin-bottom: var(--space-3); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.cal-legend { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--color-text-muted); flex-wrap: wrap; }
.cal-dot { width: .8rem; height: .8rem; display: inline-block; border: 1px solid var(--color-border); margin: 0 .15rem 0 .6rem; vertical-align: -1px; }
.cal-dot--free { background: var(--color-mint); border-color: var(--color-mint-dark); }
.cal-dot--booked { background: var(--color-bg-alt); }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.cal-month__title { font-size: 1.05rem; text-transform: capitalize; margin-bottom: var(--space-2); color: var(--color-brand); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-wd { text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); padding-bottom: .3rem; }
.cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .85rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.cal-cell--empty { border: 0; background: transparent; }
.cal-cell--free { cursor: pointer; font: inherit; font-size: .85rem; transition: background var(--transition), color var(--transition); }
.cal-cell--free:hover, .cal-cell--free.is-picked { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.cal-cell--booked { background: var(--color-bg-alt); color: var(--color-text-muted); text-decoration: line-through; }
.cal-cell--past { background: transparent; color: #c9c4ba; border-color: transparent; }
.cal-foot { font-size: .82rem; margin-top: var(--space-3); }
.cal-foot--demo { font-style: italic; }

/* --- Buchungs-Widget (Zimmer-Detail, rechte Spalte) ---------------------- */
.booking-widget { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.booking-widget__price { font-size: 1.2rem; color: var(--color-brand); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.booking-widget__title { font-size: 1.05rem; margin: var(--space-3) 0 var(--space-2); }
.booking-widget__guests { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.booking-widget__guests label { font-size: .82rem; font-weight: var(--fw-semibold); color: var(--color-text-muted); display: flex; flex-direction: column; gap: .25rem; }
.booking-widget__guests input { padding: .5em .6em; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }
/* Kalender im Widget: Monate gestapelt (schmale Spalte) */
.cal-months--stack { grid-template-columns: 1fr; gap: var(--space-4); }
.booking-widget .cal-nav { margin-bottom: var(--space-2); }
.booking-widget .cal-prev, .booking-widget .cal-next { border: 1px solid var(--color-border); background: var(--color-surface); width: 2rem; height: 2rem; cursor: pointer; border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1; }
.booking-widget .cal-prev[disabled], .booking-widget .cal-next[disabled] { opacity: .35; cursor: default; }
.cal-cell--free:hover { background: var(--color-mint); }
.cal-cell--free.is-inrange { background: var(--color-mint); }
.cal-cell--free.is-arrival, .cal-cell--free.is-departure { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.bw-hint { color: var(--color-text-muted); font-size: .9rem; text-align: center; padding: var(--space-3) 0 0; }
.bw-summary { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.bw-summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; }
.bw-summary__row span { color: var(--color-text-muted); }
.bw-summary__row strong { color: var(--color-brand); text-align: right; }
.bw-summary__total { border-top: 1px solid var(--color-border); margin-top: .3rem; padding-top: .5rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; margin-top: var(--space-3); }
.bw-note { font-size: .78rem; margin-top: var(--space-2); }

/* ==========================================================================
   RESPONSIVE OVERRIDES (am Ende – Lektion CLAUDE.md)
   ========================================================================== */
@media (max-width: 920px) {
    .room-detail { grid-template-columns: 1fr; }
    .room-detail__aside { position: static; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .search-form { grid-template-columns: 1fr 1fr; }
    .search-form__submit { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    .nav-toggle { display: flex; }
    .nav {
        position: fixed; inset: var(--header-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--color-bg); border-bottom: 1px solid var(--color-border);
        padding: var(--space-3) var(--space-4) var(--space-4);
        box-shadow: var(--shadow);
        transform: translateY(-130%); transition: transform var(--transition);
        max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    }
    .nav.is-open { transform: translateY(0); }
    .nav > a { padding: .8em 0; border-bottom: 1px solid var(--color-border); }
    .nav > a.is-active::after { display: none; }
    .lang-switch { padding: var(--space-3) 0; }
    .nav-cta { margin-top: var(--space-2); }
    .avail-card { grid-template-columns: 1fr; }
    .avail-card__media { aspect-ratio: 16/9; min-height: 0; }
    .avail-card__body { padding: var(--space-4); }
    .avail-card__action { padding: 0 var(--space-4) var(--space-4); }
}

@media (max-width: 920px) {
    .grid--4, .contact-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .grid--2, .grid--3, .grid--4, .contact-cards { grid-template-columns: 1fr; }
    .section { padding-block: var(--space-6); }
    .section-head--row { flex-direction: column; align-items: flex-start; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .search-form { grid-template-columns: 1fr 1fr; }
    .hero__inner { padding-top: var(--space-6); }
    .reserve-form .form--grid { grid-template-columns: 1fr; }
    .reserve-form { padding: var(--space-4); }
    .cal-months { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .search-form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}

/* ##### REDESIGN 2026 – Original-Look, Leitfarbe Rot ##### */
/* ===== Startseite (home) ===== */
/* ==========================================================================
   STARTSEITE (Praefix hm-) – rot & kantig, Tokens aus theme.css
   ========================================================================== */

/* --- gemeinsame Bausteine der Startseite --------------------------------- */
.hm-eyebrow {
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    font-size: .78rem;
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-2);
}
.hm-eyebrow--light { color: var(--color-accent); }

.hm-head { margin-bottom: var(--space-5); max-width: 62ch; }
.hm-head h2 { margin-bottom: var(--space-2); }
.hm-head__text { margin: 0; }
.hm-head--light h2 { color: var(--color-primary-contrast); }

.hm-btn .hm-btn__arrow { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- 1. HERO ------------------------------------------------------------- */
.hm-hero {
    background: var(--color-bg);
    padding-block: var(--space-6) var(--space-5);
    overflow: hidden;
}
.hm-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-6);
    align-items: center;
}
.hm-hero__text { min-width: 0; }

.hm-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: .45rem .85rem;
    background: var(--color-primary-soft);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
}
.hm-rating__stars { display: inline-flex; gap: 3px; color: var(--color-primary); }
.hm-rating__stars svg { width: 15px; height: 15px; }
.hm-rating__text {
    font-size: .82rem;
    font-weight: var(--fw-semibold);
    letter-spacing: .02em;
    color: var(--color-brand);
}

.hm-hero__title {
    font-size: var(--fs-h1);
    margin: 0 0 var(--space-3);
    max-width: 15ch;
}
.hm-hero__lead {
    font-size: var(--fs-lead);
    color: var(--color-text-muted);
    max-width: 46ch;
    margin: 0;
}

.hm-guests {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    max-width: 46ch;
}
.hm-guests__avatars { display: inline-flex; flex: 0 0 auto; }
.hm-guests__avatar {
    width: 38px; height: 38px;
    display: inline-grid; place-items: center;
    border-radius: 50%;                 /* Ausnahme: Avatar bleibt rund */
    margin-left: -10px;
    background: var(--color-brand);
    color: var(--color-primary-contrast);
    border: 2px solid var(--color-bg);
    font-size: .74rem; font-weight: var(--fw-semibold); letter-spacing: .04em;
    line-height: 1;
}
.hm-guests__avatar:first-child { margin-left: 0; }
.hm-guests__avatar:nth-child(2) { background: var(--color-primary); }
.hm-guests__avatar:nth-child(3) { background: var(--color-mint-dark); }
.hm-guests__text { font-size: .92rem; color: var(--color-text-muted); }

/* Wie im Original: reine Bild-Collage ohne zusaetzlichen Rahmen-Akzent */
.hm-hero__media { position: relative; min-width: 0; }
.hm-hero__figure { margin: 0; position: relative; z-index: 1; }
.hm-hero__figure--back img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.hm-hero__figure--front {
    position: absolute;
    left: calc(-1 * var(--space-5));
    bottom: calc(-1 * var(--space-4));
    width: 44%;
    z-index: 2;
    padding: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-lift);
}
.hm-hero__figure--front img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: var(--radius);
}

/* --- 2. SUCHLEISTE ------------------------------------------------------- */
.hm-search { background: var(--color-bg); padding-bottom: var(--space-6); }
.hm-search__box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-4);
}
.hm-search__title {
    font-size: 1.2rem;
    margin: 0 0 var(--space-3);
    color: var(--color-brand);
}
.hm-search .search-form {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* --- 3. UEBER UNS -------------------------------------------------------- */
.hm-about { background: var(--color-bg); }
.hm-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.hm-about__media { margin: 0; }
.hm-about__media img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.hm-about__card {
    background: var(--color-brand);
    color: var(--color-primary-contrast);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-6) var(--space-5);
    margin-left: calc(-1 * var(--space-5));
    z-index: 1;
}
.hm-about__title { color: var(--color-primary-contrast); margin-bottom: var(--space-3); }
.hm-about__text { color: var(--color-primary-contrast); opacity: .82; margin-bottom: var(--space-4); }
.hm-about__list {
    list-style: none; margin: 0 0 var(--space-5); padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4);
}
.hm-about__item {
    display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: .95rem; line-height: 1.4;
}
.hm-about__check {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
}
.hm-about__check svg { width: 15px; height: 15px; }

/* --- 4. ZIMMER ----------------------------------------------------------- */
.hm-rooms { background: var(--color-bg-alt); }
.hm-rooms .hm-head { text-align: center; margin-inline: auto; }
.hm-rooms .hm-head__text { margin-inline: auto; }
.hm-rooms__grid { grid-template-columns: repeat(3, 1fr); }
.hm-rooms__more { margin-top: var(--space-5); text-align: center; }

/* --- 5. VORTEILE --------------------------------------------------------- */
.hm-features { background: var(--color-bg); }
.hm-features .hm-head { text-align: center; margin-inline: auto; }
.hm-features__grid { grid-template-columns: repeat(3, 1fr); }
.hm-feature {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-4);
    transition: box-shadow var(--transition), transform var(--transition);
}
.hm-feature:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.hm-feature__icon {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    margin-bottom: var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
}
.hm-feature__icon svg { width: 28px; height: 28px; }
.hm-feature h3 { margin-bottom: var(--space-2); }
.hm-feature p { margin: 0; color: var(--color-text-muted); }

/* --- 6. BEWERTUNGEN (dunkel) --------------------------------------------- */
.hm-reviews { background: var(--color-brand); color: var(--color-primary-contrast); }
.hm-reviews .hm-head { text-align: center; margin-inline: auto; }
.hm-reviews__title { position: relative; padding-bottom: var(--space-3); margin-bottom: 0; }
.hm-reviews__title::after {
    content: ""; display: block;
    width: 48px; height: 2px;
    margin: var(--space-3) auto 0;
    background: var(--color-primary);
}
.hm-reviews__grid { grid-template-columns: repeat(2, 1fr); }
.hm-review {
    margin: 0;
    padding: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--color-border) 24%, transparent);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-brand-deep);
}
.hm-review__stars { display: inline-flex; gap: 3px; color: var(--color-accent); margin-bottom: var(--space-3); }
.hm-review__stars svg { width: 15px; height: 15px; }
.hm-review__quote {
    font-family: var(--font-head);
    font-style: italic;
    font-size: var(--fs-h3);
    line-height: 1.35;
    color: var(--color-primary-contrast);
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
}
.hm-review__text { color: var(--color-primary-contrast); opacity: .78; margin: 0 0 var(--space-4); }
.hm-review__by {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid color-mix(in srgb, var(--color-border) 24%, transparent);
    font-size: .9rem;
}
.hm-review__name { font-weight: var(--fw-semibold); color: var(--color-primary-contrast); }
.hm-review__place { color: var(--color-accent); }

/* --- 7. REGION ----------------------------------------------------------- */
.hm-region { background: var(--color-bg); }
.hm-region__grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-6); align-items: center;
}
.hm-region__media { margin: 0; }
.hm-region__media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.hm-region__text { min-width: 0; }
.hm-region__lead { font-size: var(--fs-lead); color: var(--color-text); }
.hm-region__text p:last-of-type { color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* --- 8. FAQ -------------------------------------------------------------- */
.hm-faq { background: var(--color-section); }
.hm-faq .hm-head { text-align: center; margin-inline: auto; }
.hm-faq__list { display: grid; gap: var(--space-2); }
.hm-faq__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--transition);
}
.hm-faq__item[open] { border-left-color: var(--color-primary); }
.hm-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-head);
    font-size: 1.08rem;
    font-weight: var(--fw-semibold);
    color: var(--color-brand);
}
.hm-faq__q::-webkit-details-marker { display: none; }
.hm-faq__q:hover { color: var(--color-primary); }
.hm-faq__q:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.hm-faq__chev {
    width: 20px; height: 20px; flex: 0 0 auto;
    color: var(--color-primary);
    transition: transform var(--transition);
}
.hm-faq__item[open] .hm-faq__chev { transform: rotate(180deg); }
.hm-faq__a {
    margin: 0;
    padding: 0 var(--space-4) var(--space-4);
    color: var(--color-text-muted);
}

/* --- 9. FOTO-STREIFEN (volle Breite) ------------------------------------- */
.hm-strip { background: var(--color-brand-deep); }
.hm-strip__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.hm-strip__item {
    position: relative; margin: 0; overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--color-brand);
}
.hm-strip__item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--transition);
}
.hm-strip__item:hover img { transform: scale(1.04); }
.hm-strip__item::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--color-brand-deep) 0%, transparent 62%);
    background: linear-gradient(to top,
        var(--color-brand-deep) 0%,
        color-mix(in srgb, var(--color-brand-deep) 55%, transparent) 38%,
        transparent 74%);
}
.hm-strip__caption {
    position: absolute; z-index: 1;
    left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
    color: var(--color-primary-contrast);
    font-size: .86rem;
    font-weight: var(--fw-medium);
    line-height: 1.35;
}
.hm-strip__caption::before {
    content: ""; display: block;
    width: 22px; height: 2px;
    margin-bottom: var(--space-2);
    background: var(--color-primary);
}

/* --- 10. ABSCHLUSS-CTA --------------------------------------------------- */
.hm-cta {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    padding-block: var(--space-6);
}
.hm-cta__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-5); flex-wrap: wrap;
}
.hm-cta__text { max-width: 56ch; }
.hm-cta__title { color: var(--color-primary-contrast); margin-bottom: var(--space-2); }
.hm-cta__lead { margin: 0; opacity: .9; }
.hm-cta__btn {
    background: var(--color-primary-contrast);
    border-color: var(--color-primary-contrast);
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
    flex: 0 0 auto;
}
.hm-cta__btn:hover {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-primary-contrast);
}

/* ==========================================================================
   RESPONSIVE – Tablet (<=1024px) und Mobil (<=640px)
   ========================================================================== */
@media (max-width: 1024px) {
    .hm-hero { padding-block: var(--space-5) var(--space-4); }
    .hm-hero__inner { grid-template-columns: 1fr; gap: var(--space-5); }
    .hm-hero__title { max-width: 20ch; }
    .hm-hero__media { max-width: 640px; }
    .hm-hero__figure--front { left: 0; bottom: calc(-1 * var(--space-3)); width: 40%; }
    .hm-hero__media::after { display: none; }

    .hm-about__grid { grid-template-columns: 1fr; }
    .hm-about__media img { aspect-ratio: 16 / 10; }
    .hm-about__card { margin-left: 0; margin-top: calc(-1 * var(--space-4)); margin-inline: var(--space-4); padding: var(--space-5) var(--space-4); }

    .hm-rooms__grid { grid-template-columns: repeat(2, 1fr); }
    .hm-features__grid { grid-template-columns: repeat(2, 1fr); }
    .hm-region__grid { gap: var(--space-5); }
    .hm-strip__grid { grid-template-columns: repeat(3, 1fr); }
    .hm-strip__item:nth-child(5) { grid-column: span 2; aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
    .hm-hero__inner { gap: var(--space-4); }
    .hm-hero__media { max-width: none; }
    .hm-hero__media::after { display: none; }
    .hm-hero__figure--front {
        position: static; width: 58%; margin: -14% 0 0 auto;
        padding: 6px;
    }
    .hm-guests { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

    .hm-search__box { padding: var(--space-3); }
    .hm-about__card { margin-inline: 0; }
    .hm-about__list { grid-template-columns: 1fr; gap: var(--space-2); }

    .hm-rooms__grid,
    .hm-features__grid,
    .hm-reviews__grid { grid-template-columns: 1fr; }
    .hm-region__grid { grid-template-columns: 1fr; }
    .hm-review { padding: var(--space-4); }

    .hm-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .hm-strip__caption { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); font-size: .78rem; }

    .hm-cta__inner { flex-direction: column; align-items: flex-start; }
    .hm-cta__btn { width: 100%; }
}

/* ===== Castaneda und Ueber uns (castaneda-about) ===== */
/* ==========================================================================
   CASTANEDA (cst-) – Destinationsseite
   ========================================================================== */
.cst-icon { width: 22px; height: 22px; flex: none; }
.cst-icon--inline { width: 18px; height: 18px; }

/* --- Kopfbereich --- */
.cst-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: flex-end;
    min-height: min(78vh, 700px);
    color: var(--color-primary-contrast);
}
.cst-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cst-hero__veil {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-brand-deep) 60%, transparent) 0%,
        color-mix(in srgb, var(--color-brand-deep) 34%, transparent) 32%,
        color-mix(in srgb, var(--color-brand-deep) 74%, transparent) 66%,
        color-mix(in srgb, var(--color-brand-deep) 94%, transparent) 100%);
}
.cst-hero__inner { position: relative; padding-block: var(--space-7) var(--space-5); max-width: 880px; }
.cst-hero__eyebrow {
    display: inline-flex; align-items: center; gap: .75rem;
    margin: 0 0 var(--space-3);
    text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
    font-size: .78rem; font-weight: var(--fw-semibold);
    color: var(--color-primary-contrast);
}
.cst-hero__eyebrow::before { content: ""; width: 44px; height: 2px; background: var(--color-primary); }
.cst-hero__title {
    margin: 0 0 var(--space-3); max-width: 17ch;
    color: var(--color-primary-contrast); font-size: var(--fs-h1);
    text-shadow: 0 2px 30px color-mix(in srgb, var(--color-brand-deep) 55%, transparent);
}
.cst-hero__claim {
    margin: 0; max-width: 48ch; font-size: var(--fs-lead);
    color: color-mix(in srgb, var(--color-primary-contrast) 92%, transparent);
}
.cst-hero__facts {
    list-style: none; display: flex; flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin: var(--space-5) 0 0; padding: var(--space-4) 0 0;
    border-top: 1px solid color-mix(in srgb, var(--color-primary-contrast) 32%, transparent);
}
.cst-hero__fact {
    display: flex; align-items: center; gap: .6rem;
    font-size: .93rem; font-weight: var(--fw-medium);
    color: color-mix(in srgb, var(--color-primary-contrast) 90%, transparent);
}

/* --- Intro --- */
.cst-intro { background: var(--color-bg); padding-block: var(--space-7); }
.cst-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.cst-intro__title { margin-bottom: var(--space-3); }
.cst-intro__lead { font-size: var(--fs-lead); }
.cst-intro__note { margin-bottom: var(--space-4); font-size: .95rem; }
.cst-intro__figure { margin: 0; }
.cst-intro__frame { position: relative; isolation: isolate; display: block; }
.cst-intro__frame img {
    width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.cst-intro__frame::after {
    content: ""; position: absolute; left: -14px; bottom: -14px; z-index: -1;
    width: 46%; height: 52%;
    border-left: 3px solid var(--color-primary); border-bottom: 3px solid var(--color-primary);
}
.cst-intro__caption {
    margin-top: var(--space-3); font-size: .8rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted);
}

/* --- Aktivitaeten --- */
.cst-acts { background: var(--color-bg-alt); padding-block: var(--space-7); }
.cst-acts__head { max-width: 60ch; margin-bottom: var(--space-5); }
.cst-acts__head h2 { margin: 0; }
.cst-acts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.cst-act {
    display: flex; flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-top: 3px solid var(--color-border);
    border-radius: var(--radius); padding: var(--space-4) var(--space-4) var(--space-5);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.cst-act:hover { transform: translateY(-4px); border-top-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.cst-act__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: var(--space-3);
    background: var(--color-primary-soft); color: var(--color-primary);
    border-radius: var(--radius);
}
.cst-act__icon .cst-icon { width: 26px; height: 26px; }
.cst-act__title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.cst-act__text { margin: 0; color: var(--color-text-muted); }

/* --- Wandern --- */
.cst-hiking { background: var(--color-section); padding-block: var(--space-7); }
.cst-hiking__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-6); align-items: center; }
.cst-hiking__figure { position: relative; isolation: isolate; margin: 0; }
.cst-hiking__figure img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.cst-hiking__figure::after {
    content: ""; position: absolute; right: -14px; top: -14px; z-index: -1;
    width: 44%; height: 46%;
    border-right: 3px solid var(--color-primary); border-top: 3px solid var(--color-primary);
}
.cst-hiking__lead { font-size: var(--fs-lead); }
.cst-hiking__btn { margin-top: var(--space-2); }

/* --- Jahreszeiten (dunkel) --- */
.cst-seasons { background: var(--color-brand); padding-block: var(--space-7); }
.cst-seasons__head { margin-bottom: var(--space-5); }
.cst-seasons__head h2 { margin: 0; color: var(--color-primary-contrast); }
.cst-seasons .cst-seasons__eyebrow { color: var(--color-accent); }
.cst-seasons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.cst-season {
    display: flex; flex-direction: column; overflow: hidden;
    background: color-mix(in srgb, var(--color-primary-contrast) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary-contrast) 16%, transparent);
    border-radius: var(--radius);
    transition: transform var(--transition), border-color var(--transition);
}
.cst-season:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.cst-season__media { margin: 0; overflow: hidden; }
.cst-season__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition); }
.cst-season:hover .cst-season__media img { transform: scale(1.04); }
.cst-season__body { padding: var(--space-4); }
.cst-season__title {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 var(--space-2); font-size: var(--fs-h3);
    color: var(--color-primary-contrast);
}
.cst-season__icon { display: inline-flex; color: var(--color-accent); }
.cst-season__text { margin: 0; color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); }

/* --- Umgebung --- */
.cst-around { background: var(--color-bg); padding-block: var(--space-7); }
.cst-around__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.cst-around__lead { font-size: var(--fs-lead); }
.cst-around__note {
    display: flex; gap: var(--space-3); margin-top: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
    padding: var(--space-4);
}
.cst-around__note .cst-icon { width: 24px; height: 24px; margin-top: 3px; color: var(--color-primary); }
.cst-around__note-title {
    margin: 0 0 var(--space-1); font-family: var(--font-head); font-size: 1.1rem;
    font-weight: var(--fw-semibold); color: var(--color-brand);
}
.cst-around__note-text { margin: 0 0 var(--space-2); font-size: .95rem; color: var(--color-text-muted); }
.cst-around__link { font-weight: var(--fw-semibold); font-size: .95rem; }
.cst-around__places { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.cst-place {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: var(--space-4);
    transition: transform var(--transition), border-color var(--transition);
}
.cst-place:hover { transform: translateX(3px); border-color: var(--color-primary); }
.cst-place__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 46px; height: 46px;
    background: var(--color-primary-soft); color: var(--color-primary);
}
.cst-place__title { margin: 0 0 var(--space-1); font-size: 1.15rem; }
.cst-place__text { margin: 0; font-size: .95rem; color: var(--color-text-muted); }

/* --- Abschluss-CTA --- */
.cst-cta {
    background: var(--color-brand-deep); border-top: 3px solid var(--color-primary);
    padding-block: var(--space-6); text-align: center;
}
.cst-cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.cst-cta .cst-cta__eyebrow { margin: 0; color: var(--color-accent); }
.cst-cta__title { margin: 0; color: var(--color-primary-contrast); }
.cst-cta__text { margin: 0; max-width: 54ch; color: color-mix(in srgb, var(--color-primary-contrast) 80%, transparent); }
.cst-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

/* ==========================================================================
   UEBER UNS (abt-)
   ========================================================================== */
.abt-icon { width: 22px; height: 22px; flex: none; }

/* --- Kopfbereich --- */
.abt-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: flex-end;
    min-height: min(70vh, 620px);
    color: var(--color-primary-contrast);
}
.abt-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.abt-hero__veil {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-brand-deep) 58%, transparent) 0%,
        color-mix(in srgb, var(--color-brand-deep) 34%, transparent) 30%,
        color-mix(in srgb, var(--color-brand-deep) 76%, transparent) 66%,
        color-mix(in srgb, var(--color-brand-deep) 94%, transparent) 100%);
}
.abt-hero__inner { position: relative; padding-block: var(--space-7) var(--space-5); max-width: 820px; }
.abt-hero__eyebrow {
    display: inline-flex; align-items: center; gap: .75rem;
    margin: 0 0 var(--space-3);
    text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
    font-size: .78rem; font-weight: var(--fw-semibold);
    color: var(--color-primary-contrast);
}
.abt-hero__eyebrow::before { content: ""; width: 44px; height: 2px; background: var(--color-primary); }
.abt-hero__title {
    margin: 0 0 var(--space-3); color: var(--color-primary-contrast); font-size: var(--fs-h1);
    text-shadow: 0 2px 30px color-mix(in srgb, var(--color-brand-deep) 55%, transparent);
}
.abt-hero__subtitle {
    margin: 0; max-width: 50ch; font-size: var(--fs-lead);
    color: color-mix(in srgb, var(--color-primary-contrast) 92%, transparent);
}

/* --- Lead + Eckdaten --- */
.abt-lead { background: var(--color-bg); padding-block: var(--space-6); }
.abt-lead__inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); align-items: center; }
.abt-lead__text {
    margin: 0; font-family: var(--font-head); font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.5; color: var(--color-brand);
    border-left: 3px solid var(--color-primary); padding-left: var(--space-4);
}
.abt-lead__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.abt-fact {
    display: flex; align-items: center; gap: var(--space-3);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border);
    font-weight: var(--fw-medium);
}
.abt-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.abt-fact .abt-icon { color: var(--color-primary); width: 24px; height: 24px; }

/* --- Geschichte --- */
.abt-story { background: var(--color-bg-alt); padding-block: var(--space-7); }
.abt-story__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--space-6); align-items: center; }
.abt-story__figure { position: relative; isolation: isolate; margin: 0; }
.abt-story__figure img {
    width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.abt-story__figure::after {
    content: ""; position: absolute; left: -14px; top: -14px; z-index: -1;
    width: 46%; height: 46%;
    border-left: 3px solid var(--color-primary); border-top: 3px solid var(--color-primary);
}
.abt-story__lead { font-size: var(--fs-lead); }
.abt-story__badge {
    display: inline-flex; align-items: center; gap: .6rem; margin: var(--space-3) 0 0;
    padding: .6rem .9rem; font-size: .9rem; font-weight: var(--fw-semibold);
    background: var(--color-primary-soft); color: var(--color-primary-dark);
    border-left: 3px solid var(--color-primary);
}

/* --- Zitat (dunkel) --- */
.abt-quote { background: var(--color-brand-deep); padding-block: var(--space-7); text-align: center; }
.abt-quote .abt-quote__inner { max-width: var(--container-narrow); }
.abt-quote__mark { display: block; width: 46px; height: 46px; margin: 0 auto var(--space-4); color: var(--color-primary); }
.abt-quote__text {
    margin: 0; font-family: var(--font-head); font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    line-height: 1.35; color: var(--color-primary-contrast);
}
.abt-quote__author {
    margin: var(--space-4) 0 0; padding-top: var(--space-4);
    text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-size: .76rem;
    color: color-mix(in srgb, var(--color-primary-contrast) 70%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--color-primary-contrast) 22%, transparent);
    display: inline-block;
}

/* --- Werte --- */
.abt-values { background: var(--color-section); padding-block: var(--space-7); }
.abt-values__head { margin-bottom: var(--space-5); }
.abt-values__head h2 { margin: 0; }
.abt-values__grid { counter-reset: abt-value; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.abt-value {
    counter-increment: abt-value; position: relative;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: var(--space-5) var(--space-4) var(--space-4);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.abt-value::before {
    content: "0" counter(abt-value);
    position: absolute; top: var(--space-3); right: var(--space-4);
    font-family: var(--font-head); font-size: 1.7rem; line-height: 1; color: var(--color-border);
}
.abt-value:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.abt-value__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: var(--space-3);
    background: var(--color-primary-soft); color: var(--color-primary);
}
.abt-value__icon .abt-icon { width: 26px; height: 26px; }
.abt-value__title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.abt-value__text { margin: 0; color: var(--color-text-muted); }

/* --- Philosophie --- */
.abt-vision { background: var(--color-bg); padding-block: var(--space-7); }
.abt-vision__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-6); align-items: center; }
.abt-vision__lead { font-size: var(--fs-lead); }
.abt-vision__note { margin-bottom: var(--space-4); font-size: .95rem; }
.abt-vision__figure { position: relative; isolation: isolate; margin: 0; }
.abt-vision__figure img {
    width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.abt-vision__figure::after {
    content: ""; position: absolute; right: -14px; bottom: -14px; z-index: -1;
    width: 46%; height: 46%;
    border-right: 3px solid var(--color-primary); border-bottom: 3px solid var(--color-primary);
}

/* --- Gastgeber --- */
.abt-team { background: var(--color-bg-alt); padding-block: var(--space-7); }
.abt-team .abt-team__inner { max-width: var(--container-narrow); display: flex; flex-direction: column; align-items: center; text-align: center; }
.abt-team__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin-bottom: var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary);
}
.abt-team__icon .abt-icon { width: 30px; height: 30px; }
.abt-team__title { margin: 0 0 var(--space-2); }
.abt-team__text { margin: 0; max-width: 58ch; color: var(--color-text-muted); font-size: var(--fs-lead); }

/* --- Abschluss-CTA --- */
.abt-cta {
    background: var(--color-brand); border-top: 3px solid var(--color-primary);
    padding-block: var(--space-6); text-align: center;
}
.abt-cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.abt-cta .abt-cta__eyebrow { margin: 0; color: var(--color-accent); }
.abt-cta__title { margin: 0; color: var(--color-primary-contrast); }
.abt-cta__text { margin: 0; max-width: 54ch; color: color-mix(in srgb, var(--color-primary-contrast) 80%, transparent); }
.abt-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

/* ==========================================================================
   RESPONSIVE – Castaneda & Ueber uns (am Ende)
   ========================================================================== */
@media (max-width: 1024px) {
    .cst-hero { min-height: min(64vh, 560px); }
    .cst-hero__inner { padding-block: var(--space-6) var(--space-5); }
    .cst-acts__grid { grid-template-columns: repeat(2, 1fr); }
    .cst-intro__grid, .cst-hiking__grid, .cst-around__grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .cst-intro__frame img { aspect-ratio: 16 / 10; }
    .cst-seasons__grid { gap: var(--space-3); }

    .abt-hero { min-height: min(58vh, 480px); }
    .abt-hero__inner { padding-block: var(--space-6) var(--space-5); }
    .abt-lead__inner, .abt-story__grid, .abt-vision__grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .abt-values__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
    .abt-story__figure img, .abt-vision__figure img { aspect-ratio: 16 / 10; }
}

@media (max-width: 780px) {
    .cst-seasons__grid { grid-template-columns: 1fr; }
    .abt-values__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .cst-hero { min-height: min(72vh, 520px); }
    .cst-hero__title { max-width: none; }
    .cst-hero__facts { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
    .cst-intro, .cst-acts, .cst-hiking, .cst-seasons, .cst-around { padding-block: var(--space-6); }
    .cst-acts__grid { grid-template-columns: 1fr; }
    .cst-intro__frame::after, .cst-hiking__figure::after { display: none; }
    .cst-place__icon { width: 40px; height: 40px; }
    .cst-cta__btns { width: 100%; flex-direction: column; }
    .cst-cta__btns .btn { width: 100%; }

    .abt-hero { min-height: min(66vh, 460px); }
    .abt-lead, .abt-story, .abt-quote, .abt-values, .abt-vision, .abt-team { padding-block: var(--space-6); }
    .abt-lead__text { padding-left: var(--space-3); }
    .abt-story__figure::after, .abt-vision__figure::after { display: none; }
    .abt-team__text { font-size: var(--fs-base); }
    .abt-cta__btns { width: 100%; flex-direction: column; }
    .abt-cta__btns .btn { width: 100%; }
}

/* ===== Kontakt und Kulinarik (kontakt-kulinarik) ===== */
/* ==========================================================================
   KONTAKT (Praefix: kon-)
   ========================================================================== */
.kon-eyebrow {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 var(--space-3);
    font-size: .78rem; font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--color-primary);
}
.kon-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; flex: 0 0 auto; }
.kon-eyebrow--light { color: var(--color-mint); }
.kon-eyebrow--light::before { background: var(--color-accent); }

.kon-h2 {
    font-family: var(--font-head); font-size: var(--fs-h2); line-height: 1.15;
    color: var(--color-brand); margin: 0 0 var(--space-3);
}
.kon-text { margin: 0; color: var(--color-text); max-width: 60ch; }

/* --- Kopfbereich --------------------------------------------------------- */
.kon-hero {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--color-brand); color: var(--color-primary-contrast);
    padding-block: var(--space-7) calc(var(--space-7) + var(--space-4));
}
.kon-hero__bg {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
}
.kon-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-brand) 74%, transparent) 0%,
        color-mix(in srgb, var(--color-brand-deep) 94%, transparent) 100%);
}
.kon-hero__inner { max-width: 62ch; }
.kon-hero__title {
    font-family: var(--font-head); font-size: var(--fs-h1); line-height: 1.08;
    color: var(--color-primary-contrast); margin: 0 0 var(--space-3);
}
.kon-hero__lead {
    font-size: var(--fs-lead); line-height: 1.6; margin: 0;
    color: color-mix(in srgb, var(--color-primary-contrast) 84%, var(--color-brand));
}

/* --- Vier Kontakt-Karten (ueberlappen den Kopfbereich) ------------------- */
.kon-cards-sec {
    position: relative; z-index: 2;
    margin-top: calc(var(--space-5) * -1);
    padding-bottom: var(--space-6);
}
.kon-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.kon-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    transition: var(--transition);
}
.kon-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.kon-card__icon {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
    background: var(--color-primary); color: var(--color-primary-contrast);
    border-radius: var(--radius);
}
.kon-card__icon svg { width: 1.35rem; height: 1.35rem; display: block; }
.kon-card__title {
    font-family: var(--font-head); font-size: 1.15rem; line-height: 1.2;
    color: var(--color-brand); margin: 0;
}
.kon-card__body {
    margin: 0; font-style: normal; line-height: 1.7;
    color: var(--color-text-muted); font-size: .97rem;
}
.kon-card__body a {
    color: var(--color-primary); font-weight: var(--fw-medium);
    text-decoration: none; border-bottom: 1px solid transparent;
    transition: var(--transition);
}
.kon-card__body a:hover, .kon-card__body a:focus-visible { border-bottom-color: var(--color-primary); }

/* --- Hauptbereich: Anfahrt + Karte | Formular ---------------------------- */
.kon-main {
    background: var(--color-bg-alt);
    border-block: 1px solid var(--color-border);
    padding-block: var(--space-6);
}
.kon-main__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6); align-items: start;
}

.kon-route { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.kon-route__item { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.kon-route__icon {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    color: var(--color-primary); border-radius: var(--radius);
}
.kon-route__icon svg { width: 1.25rem; height: 1.25rem; display: block; }
.kon-route__title { display: block; font-weight: var(--fw-semibold); color: var(--color-brand); }
.kon-route__text { margin: .2rem 0 0; font-size: .95rem; color: var(--color-text-muted); }

.kon-map-block { margin-top: var(--space-5); }
.kon-map-title {
    font-family: var(--font-head); font-size: var(--fs-h3);
    color: var(--color-brand); margin: 0 0 var(--space-3);
}
.kon-map {
    min-height: 320px; border-radius: var(--radius);
    border: 1px solid var(--color-border); background: var(--color-section);
}
.kon-map__ph { display: grid; justify-items: center; gap: var(--space-3); max-width: 36ch; }
.kon-map__icon { color: var(--color-primary); }
.kon-map__icon svg { width: 2.1rem; height: 2.1rem; display: block; }

/* --- Formular-Flaeche ---------------------------------------------------- */
.kon-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}
.kon-panel__title {
    font-family: var(--font-head); font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.15;
    color: var(--color-brand); margin: 0 0 var(--space-2);
}
.kon-panel__note { margin: 0 0 var(--space-4); font-size: .95rem; color: var(--color-text-muted); }
.kon-alert { border-radius: var(--radius-sm); }

.kon-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.kon-field { margin-bottom: var(--space-3); min-width: 0; }
.kon-field--full { grid-column: 1 / -1; }
.kon-field label {
    display: block; font-size: .9rem; font-weight: var(--fw-semibold);
    letter-spacing: .01em; color: var(--color-brand);
}
.kon-form input:not([type="hidden"]):not([type="checkbox"]), .kon-form textarea {
    display: block; width: 100%; margin-top: .4rem;
    padding: .72em .85em;
    font: inherit; color: var(--color-text);
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.kon-form textarea { resize: vertical; min-height: 8rem; }
.kon-form input:not([type="hidden"]):not([type="checkbox"]):hover, .kon-form textarea:hover { border-color: var(--color-text-muted); }
.kon-form input:not([type="hidden"]):not([type="checkbox"]):focus, .kon-form textarea:focus {
    outline: 2px solid var(--color-primary); outline-offset: 1px;
    border-color: var(--color-primary); background: var(--color-surface);
}
.kon-form input[aria-invalid="true"], .kon-form textarea[aria-invalid="true"] {
    border-color: var(--color-error); background: var(--color-error-bg);
}
.kon-form .field-error { display: block; margin: .35rem 0 0; font-size: .85rem; color: var(--color-error); }
.kon-req { color: var(--color-primary); font-weight: var(--fw-bold); }

.kon-consent {
    display: flex; align-items: flex-start; gap: .7rem;
    margin: var(--space-3) 0 0;
    font-size: .92rem; line-height: 1.6; color: var(--color-text-muted);
}
.kon-consent input {
    width: 1.05rem; height: 1.05rem; margin-top: .3rem; flex: 0 0 auto;
    accent-color: var(--color-primary);
}
.kon-consent a { color: var(--color-primary); }

.kon-form__actions {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    margin-top: var(--space-4); padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.kon-form__hint { margin: 0; font-size: .85rem; color: var(--color-text-muted); }

/* --- Abschluss-CTA ------------------------------------------------------- */
.kon-cta { background: var(--color-brand); color: var(--color-primary-contrast); padding-block: var(--space-6); }
.kon-cta__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-3); }
.kon-cta .kon-eyebrow { justify-content: center; margin-bottom: 0; }
.kon-cta__title {
    font-family: var(--font-head); font-size: var(--fs-h2); line-height: 1.15;
    color: var(--color-primary-contrast); margin: 0;
}
.kon-cta__text {
    max-width: 56ch; margin: 0;
    color: color-mix(in srgb, var(--color-primary-contrast) 82%, var(--color-brand));
}
.kon-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.kon-cta .btn--ghost {
    color: var(--color-primary-contrast);
    border-color: color-mix(in srgb, var(--color-primary-contrast) 45%, transparent);
    background: transparent;
}
.kon-cta .btn--ghost:hover, .kon-cta .btn--ghost:focus-visible {
    color: var(--color-primary-contrast); border-color: var(--color-primary-contrast);
    background: color-mix(in srgb, var(--color-primary-contrast) 12%, transparent);
}

/* --- Kontakt: Tablet ----------------------------------------------------- */
@media (max-width: 1024px) {
    .kon-hero { padding-block: var(--space-6) calc(var(--space-6) + var(--space-4)); }
    .kon-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kon-main__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .kon-col--form { max-width: 100%; }
}

/* --- Kontakt: Mobil ------------------------------------------------------ */
@media (max-width: 640px) {
    .kon-hero { padding-block: var(--space-5) var(--space-6); }
    .kon-cards-sec { margin-top: calc(var(--space-4) * -1); padding-bottom: var(--space-5); }
    .kon-cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .kon-main { padding-block: var(--space-5); }
    .kon-form__grid { grid-template-columns: minmax(0, 1fr); }
    .kon-panel { padding: var(--space-4); }
    .kon-map { min-height: 260px; }
    .kon-form__actions { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
    .kon-cta__btns .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .kon-card { transition: none; }
    .kon-card:hover { transform: none; }
}

/* ==========================================================================
   KULINARIK (Praefix: kul-)
   ========================================================================== */
.kul-eyebrow {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 var(--space-3);
    font-size: .78rem; font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--color-primary);
}
.kul-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; flex: 0 0 auto; }
.kul-eyebrow--light { color: var(--color-mint); }
.kul-eyebrow--light::before { background: var(--color-accent); }
.kul-eyebrow--center { justify-content: center; }

.kul-h2 {
    font-family: var(--font-head); font-size: var(--fs-h2); line-height: 1.15;
    color: var(--color-brand); margin: 0 0 var(--space-3);
}
.kul-lead { font-size: var(--fs-lead); line-height: 1.65; margin: 0; color: var(--color-text); }

/* --- Kopfbereich mit Fruehstuecksbild ------------------------------------ */
.kul-hero {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--color-brand); color: var(--color-primary-contrast);
    padding-block: var(--space-7);
}
.kul-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kul-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-brand) 72%, transparent) 0%,
        color-mix(in srgb, var(--color-brand-deep) 93%, transparent) 100%);
}
.kul-hero__inner { max-width: 62ch; }
.kul-hero__title {
    font-family: var(--font-head); font-size: var(--fs-h1); line-height: 1.08;
    color: var(--color-primary-contrast); margin: 0 0 var(--space-3);
}
.kul-hero__lead {
    font-size: var(--fs-lead); line-height: 1.6; margin: 0 0 var(--space-5);
    color: color-mix(in srgb, var(--color-primary-contrast) 86%, var(--color-brand));
}
.kul-hero__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.kul-hero .btn--ghost {
    color: var(--color-primary-contrast);
    border-color: color-mix(in srgb, var(--color-primary-contrast) 45%, transparent);
    background: transparent;
}
.kul-hero .btn--ghost:hover, .kul-hero .btn--ghost:focus-visible {
    color: var(--color-primary-contrast); border-color: var(--color-primary-contrast);
    background: color-mix(in srgb, var(--color-primary-contrast) 12%, transparent);
}

/* --- Fruehstueck --------------------------------------------------------- */
.kul-breakfast { padding-block: var(--space-6); background: var(--color-bg); }
.kul-breakfast__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6); align-items: center;
}
.kul-points { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-5); display: grid; gap: var(--space-2); }
.kul-points__item { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--space-2); align-items: start; color: var(--color-text); }
.kul-points__icon { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; color: var(--color-primary); }
.kul-points__icon svg { width: 1.15rem; height: 1.15rem; display: block; }
.kul-breakfast__figure { margin: 0; }
.kul-breakfast__figure img {
    display: block; width: 100%; height: auto; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.kul-figcaption {
    margin-top: var(--space-2); padding-left: var(--space-3);
    border-left: 3px solid var(--color-primary);
    font-size: .82rem; line-height: 1.5; color: var(--color-text-muted);
}

/* --- Speisekarte --------------------------------------------------------- */
.kul-menu { background: var(--color-section); border-block: 1px solid var(--color-border); padding-block: var(--space-6); }
.kul-sec-head { text-align: center; margin-bottom: var(--space-5); }
.kul-sec-head .kul-h2 { margin-bottom: var(--space-2); }
.kul-sec-head__text { max-width: 54ch; margin: 0 auto; color: var(--color-text-muted); }
.kul-sec-head--left { text-align: left; }
.kul-sec-head--left .kul-sec-head__text { margin-inline: 0; }

.kul-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}
.kul-cat + .kul-cat { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.kul-cat__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.kul-cat__title {
    font-family: var(--font-head); font-size: 1.05rem; font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--color-primary); margin: 0; white-space: nowrap;
}
.kul-cat__rule { flex: 1 1 auto; height: 1px; background: var(--color-border); }

.kul-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.kul-item__row { display: flex; align-items: baseline; gap: var(--space-2); }
.kul-item__name {
    font-family: var(--font-head); font-size: 1.12rem; font-weight: var(--fw-semibold);
    color: var(--color-brand);
}
.kul-item__leader {
    flex: 1 1 auto; min-width: 1.5rem; align-self: flex-end;
    border-bottom: 1px dotted var(--color-border); transform: translateY(-.35rem);
}
.kul-item__price {
    font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
    color: var(--color-primary); white-space: nowrap;
}
.kul-item__desc { margin: .3rem 0 0; font-size: .93rem; line-height: 1.6; color: var(--color-text-muted); max-width: 62ch; }
.kul-note { margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: .85rem; color: var(--color-text-muted); }
.kul-empty { margin: 0; color: var(--color-text-muted); }

/* --- Galerie ------------------------------------------------------------- */
.kul-gallery-sec { padding-block: var(--space-6); background: var(--color-bg); }
.kul-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.kul-gallery__item {
    margin: 0; overflow: hidden;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-surface);
}
.kul-gallery__item img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius); transition: transform var(--transition);
}
.kul-gallery__item:hover img { transform: scale(1.04); }

/* --- Zeiten (dunkles Band) ----------------------------------------------- */
.kul-times { background: var(--color-brand); color: var(--color-primary-contrast); padding-block: var(--space-6); }
.kul-times__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.kul-times__icon {
    display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
    background: var(--color-primary); color: var(--color-primary-contrast);
    border-radius: var(--radius);
}
.kul-times__icon svg { width: 1.6rem; height: 1.6rem; display: block; }
.kul-times__title {
    font-family: var(--font-head); font-size: var(--fs-h3);
    color: var(--color-primary-contrast); margin: 0 0 var(--space-1);
}
.kul-times__lead {
    margin: 0; max-width: 62ch;
    color: color-mix(in srgb, var(--color-primary-contrast) 82%, var(--color-brand));
}

/* --- Reservierung -------------------------------------------------------- */
.kul-reserve { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding-block: var(--space-6); scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
.kul-alert { border-radius: var(--radius-sm); }
.kul-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}
.kul-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.kul-field { margin-bottom: var(--space-3); min-width: 0; }
.kul-field--full { grid-column: 1 / -1; }
.kul-field label {
    display: block; font-size: .9rem; font-weight: var(--fw-semibold);
    letter-spacing: .01em; color: var(--color-brand);
}
.kul-form input:not([type="hidden"]):not([type="checkbox"]), .kul-form textarea {
    display: block; width: 100%; margin-top: .4rem;
    padding: .72em .85em;
    font: inherit; color: var(--color-text);
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.kul-form textarea { resize: vertical; min-height: 6.5rem; }
.kul-form input:not([type="hidden"]):not([type="checkbox"]):hover, .kul-form textarea:hover { border-color: var(--color-text-muted); }
.kul-form input:not([type="hidden"]):not([type="checkbox"]):focus, .kul-form textarea:focus {
    outline: 2px solid var(--color-primary); outline-offset: 1px;
    border-color: var(--color-primary); background: var(--color-surface);
}
.kul-form input[aria-invalid="true"], .kul-form textarea[aria-invalid="true"] {
    border-color: var(--color-error); background: var(--color-error-bg);
}
.kul-req { color: var(--color-primary); font-weight: var(--fw-bold); }
.kul-consent {
    display: flex; align-items: flex-start; gap: .7rem;
    margin: var(--space-3) 0 0;
    font-size: .92rem; line-height: 1.6; color: var(--color-text-muted);
}
.kul-consent input { width: 1.05rem; height: 1.05rem; margin-top: .3rem; flex: 0 0 auto; accent-color: var(--color-primary); }
.kul-consent a { color: var(--color-primary); }
.kul-form__actions {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    margin-top: var(--space-4); padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.kul-form__hint { margin: 0; font-size: .85rem; color: var(--color-text-muted); }

/* --- Kulinarik: Tablet --------------------------------------------------- */
@media (max-width: 1024px) {
    .kul-hero { padding-block: var(--space-6); }
    .kul-breakfast__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .kul-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kul-times__inner { grid-template-columns: auto minmax(0, 1fr); }
    .kul-times__btn { grid-column: 1 / -1; justify-self: start; }
}

/* --- Kulinarik: Mobil ---------------------------------------------------- */
@media (max-width: 640px) {
    .kul-hero { padding-block: var(--space-5) var(--space-6); }
    .kul-hero__btns .btn { width: 100%; justify-content: center; }
    .kul-breakfast, .kul-menu, .kul-gallery-sec, .kul-times, .kul-reserve { padding-block: var(--space-5); }
    .kul-card, .kul-panel { padding: var(--space-4); }
    .kul-gallery { grid-template-columns: minmax(0, 1fr); }
    .kul-item__row { flex-wrap: wrap; }
    .kul-item__leader { display: none; }
    .kul-item__price { margin-left: auto; }
    .kul-times__inner { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-3); }
    .kul-form__grid { grid-template-columns: minmax(0, 1fr); }
    .kul-form__actions { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
    .kul-gallery__item img { transition: none; }
    .kul-gallery__item:hover img { transform: none; }
}

/* ===== Zimmer-Seiten (rooms) ===== */
/* ==========================================================================
   ZIMMER-SEITEN – Uebersicht (/zimmer) + Detail (/zimmer/<slug>) + Zimmer-Karte
   Praefix: rmx-   |   kantig (radius 0), Leitfarbe Rot, Playfair-Headings
   ========================================================================== */

/* --- Icons (Inline-SVG) --------------------------------------------------- */
.rmx-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; color: var(--color-primary); }

/* --- Kopfbereich Uebersicht (dunkel) -------------------------------------- */
.rmx-head { background: var(--color-brand); color: var(--color-primary-contrast); padding-block: var(--space-6); border-bottom: 3px solid var(--color-primary); }
.rmx-head__inner { max-width: 58ch; }
.rmx-head__eyebrow { margin: 0 0 var(--space-3); font-size: .78rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-accent); }
.rmx-head__title { font-family: var(--font-head); font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: 1.1; color: var(--color-primary-contrast); margin: 0 0 var(--space-3); }
.rmx-head__lead { margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--color-mint); }
.rmx-head__meta { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-mint-dark); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.rmx-head__meta li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--color-mint); }
.rmx-head__meta .rmx-ico { color: var(--color-accent); }

/* --- Karten-Raster -------------------------------------------------------- */
.rmx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }

/* --- Zimmer-Karte --------------------------------------------------------- */
.rmx-card { display: flex; flex-direction: column; height: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.rmx-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-primary); }
.rmx-card__media { position: relative; overflow: hidden; background: var(--color-bg-alt); }
.rmx-card__img { display: block; aspect-ratio: 4 / 3; }
.rmx-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.rmx-card:hover .rmx-card__img img { transform: scale(1.05); }
.rmx-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); color: var(--color-text-muted); }
.rmx-card__tag { position: absolute; top: 0; left: 0; padding: .55em 1em; background: var(--color-primary); color: var(--color-primary-contrast); border-radius: var(--radius-sm); font-size: .7rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.rmx-card__badge { position: absolute; top: 0; right: 0; padding: .55em 1em; background: var(--color-brand); color: var(--color-primary-contrast); border-radius: var(--radius-sm); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.rmx-card__body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; padding: var(--space-4); }
.rmx-card__title { font-family: var(--font-head); font-size: 1.45rem; font-weight: var(--fw-medium); line-height: 1.2; margin: 0; }
.rmx-card__title a { color: var(--color-brand); }
.rmx-card__title a:hover { color: var(--color-primary); text-decoration: none; }
.rmx-card__text { margin: 0; font-size: .95rem; color: var(--color-text-muted); }
.rmx-card__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.rmx-card__facts li { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--color-text-muted); }
.rmx-card__facts strong { color: var(--color-brand); font-weight: var(--fw-semibold); }
.rmx-card__amen { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.rmx-card__amen li { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--color-text-muted); }
.rmx-card__amen .rmx-ico { color: var(--color-mint-dark); }
.rmx-card__amen-more span { display: inline-block; padding: .1em .5em; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: .78rem; color: var(--color-text-muted); }
.rmx-card__foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.rmx-card__price { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.rmx-card__from, .rmx-card__per, .rmx-card__request { font-size: .82rem; color: var(--color-text-muted); }
.rmx-card__amount { font-family: var(--font-head); font-size: 1.3rem; font-weight: var(--fw-semibold); color: var(--color-brand); }
.rmx-card__btn { flex: 0 0 auto; }

/* --- CTA-Band unter der Uebersicht ---------------------------------------- */
.rmx-cta { background: var(--color-brand); color: var(--color-primary-contrast); padding-block: var(--space-6); border-top: 3px solid var(--color-primary); }
.rmx-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.rmx-cta__text { max-width: 52ch; }
.rmx-cta__eyebrow { margin: 0 0 var(--space-2); font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-accent); }
.rmx-cta__title { font-family: var(--font-head); font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--color-primary-contrast); margin: 0 0 var(--space-2); }
.rmx-cta__lead { margin: 0; color: var(--color-mint); }
.rmx-cta__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.rmx-cta__link { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .2rem; color: var(--color-primary-contrast); font-weight: var(--fw-medium); border-bottom: 1px solid var(--color-accent); }
.rmx-cta__link:hover { color: var(--color-accent); text-decoration: none; }
.rmx-cta__link .rmx-ico { color: var(--color-accent); transition: transform var(--transition); }
.rmx-cta__link:hover .rmx-ico { transform: translateX(3px); }

/* --- Kopfbereich Detailseite ---------------------------------------------- */
.rmx-dhead { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); padding-block: var(--space-4) var(--space-5); }
.rmx-dhead__back { margin: 0 0 var(--space-4); }
.rmx-dhead__back a { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--color-text-muted); }
.rmx-dhead__back a:hover { color: var(--color-primary); text-decoration: none; }
.rmx-dhead__back .rmx-ico { color: currentColor; width: 1em; height: 1em; }
.rmx-dhead__eyebrow { margin: 0 0 var(--space-2); font-size: .78rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-primary); }
.rmx-dhead__title { font-family: var(--font-head); font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: 1.1; color: var(--color-brand); margin: 0; }
.rmx-dhead__meta { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.rmx-dhead__meta li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--color-text-muted); }
.rmx-dhead__meta strong { color: var(--color-brand); font-weight: var(--fw-semibold); }

/* --- Detail: Galerie links, Buchungs-Karte rechts -------------------------- */
.rmx-detail { padding-block: var(--space-6); }
.rmx-detail__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.rmx-detail__main { min-width: 0; }
.rmx-detail__label { margin: 0 0 var(--space-3); font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.rmx-media .gallery__main img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: none; }
.rmx-media .gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.rmx-media .gallery__thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: pointer; opacity: .82; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: opacity var(--transition), border-color var(--transition); }
.rmx-media .gallery__thumb:hover { opacity: 1; border-color: var(--color-primary); }
.rmx-media .gallery__thumb.is-active { opacity: 1; border-color: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-primary); }
.rmx-media .gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rmx-media.gallery--empty { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-head); color: var(--color-text-muted); }

/* --- Buchungs-Widget als ruhige Karte (JS-Hooks bleiben unveraendert) ------ */
.rmx-book { position: sticky; top: calc(var(--header-h) + var(--space-3)); min-width: 0; }
.rmx-book .booking-widget { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-4); }
.rmx-book .rmx-book__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--space-4); font-weight: var(--fw-normal); }
.rmx-book .rmx-book__from, .rmx-book .rmx-book__per { font-size: .85rem; color: var(--color-text-muted); }
.rmx-book .rmx-book__amount { font-family: var(--font-head); font-size: 1.85rem; line-height: 1; font-weight: var(--fw-semibold); color: var(--color-brand); }
.rmx-book .rmx-book__label { margin: 0 0 var(--space-2); font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.rmx-book .rmx-book__facts { list-style: none; margin: 0; padding: 0; }
.rmx-book .rmx-book__facts li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .55rem 0; border-bottom: 1px solid var(--color-border); font-size: .92rem; }
.rmx-book .rmx-book__facts li:last-child { border-bottom: 0; }
.rmx-book .rmx-book__facts li span { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-text-muted); }
.rmx-book .rmx-book__facts li strong { color: var(--color-brand); font-weight: var(--fw-semibold); text-align: right; }
.rmx-book .rmx-book__facts .rmx-ico { width: 1.05em; height: 1.05em; color: var(--color-mint-dark); }
.rmx-book .rmx-book__title { display: flex; align-items: center; gap: .5rem; margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-family: var(--font-head); font-size: 1.2rem; font-weight: var(--fw-medium); color: var(--color-brand); }
.rmx-book .rmx-book__hint { margin: 0 0 var(--space-3); font-size: .82rem; color: var(--color-text-muted); }
.rmx-book .rmx-book__guests { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.rmx-book .rmx-book__guests label { display: flex; flex-direction: column; gap: .35rem; font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.rmx-book .rmx-book__guests input { font: inherit; font-size: var(--fs-base); padding: .5em .7em; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.rmx-book .rmx-book__guests input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.rmx-book .rmx-book__cal { min-height: 3rem; }
.rmx-book .rmx-book__cal .cal-month__title { font-family: var(--font-head); font-weight: var(--fw-medium); }
.rmx-book .rmx-book__cal .cal-cell { border-radius: var(--radius-sm); }
.rmx-book .rmx-book__cal .cal-cell--free.is-inrange { background: var(--color-primary-soft); border-color: var(--color-primary-soft); color: var(--color-brand); }
.rmx-book .rmx-book__cal .cal-cell--free.is-arrival, .rmx-book .rmx-book__cal .cal-cell--free.is-departure { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.rmx-book .rmx-book__cal .cal-prev, .rmx-book .rmx-book__cal .cal-next { border-radius: var(--radius-sm); }
.rmx-book .rmx-book__summary .bw-summary__total strong { color: var(--color-primary); }
.rmx-book .rmx-book__alert { border-radius: var(--radius-sm); }
.rmx-book .rmx-book__contact { width: 100%; justify-content: center; }

/* --- Beschreibung + Ausstattung ------------------------------------------- */
.rmx-info { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); }
.rmx-info__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-5) var(--space-6); align-items: start; }
.rmx-info__eyebrow { margin: 0 0 var(--space-2); font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-primary); }
.rmx-info__title { font-family: var(--font-head); font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--color-brand); margin: 0 0 var(--space-4); }
.rmx-info__title--sm { font-size: var(--fs-h3); }
.rmx-info__text p { margin: 0 0 var(--space-3); max-width: 68ch; color: var(--color-text); }
.rmx-info__text p:last-child { margin-bottom: 0; }
.rmx-info__amen { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); }
.rmx-amen { list-style: none; margin: 0; padding: 0; }
.rmx-amen li { display: flex; align-items: center; gap: .65rem; padding: .6rem 0; border-bottom: 1px solid var(--color-border); font-size: .95rem; color: var(--color-text); }
.rmx-amen li:last-child { border-bottom: 0; }
.rmx-amen .rmx-ico { color: var(--color-mint-dark); }

/* --- Weitere Zimmer ------------------------------------------------------- */
.rmx-more { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.rmx-more__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.rmx-more__eyebrow { margin: 0 0 var(--space-2); font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-primary); }
.rmx-more__title { font-family: var(--font-head); font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--color-brand); margin: 0; }

/* --- Tablet (max 1024px) --------------------------------------------------- */
@media (max-width: 1024px) {
    .rmx-head { padding-block: var(--space-5); }
    .rmx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .rmx-detail { padding-block: var(--space-5); }
    .rmx-detail__grid { grid-template-columns: minmax(0, 1fr); }
    .rmx-info__grid { grid-template-columns: minmax(0, 1fr); }
    .rmx-book { position: static; top: auto; }
    .rmx-media .gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rmx-cta__inner { align-items: flex-start; }
}

/* --- Mobil (max 640px) ----------------------------------------------------- */
@media (max-width: 640px) {
    .rmx-head { padding-block: var(--space-5) var(--space-4); }
    .rmx-head__meta { margin-top: var(--space-4); gap: var(--space-2) var(--space-4); }
    .rmx-head__meta li { font-size: .86rem; }
    .rmx-grid { grid-template-columns: minmax(0, 1fr); }
    .rmx-card__body { padding: var(--space-3); }
    .rmx-card__title { font-size: 1.3rem; }
    .rmx-card__foot { flex-direction: column; align-items: stretch; }
    .rmx-card__btn { width: 100%; justify-content: center; }
    .rmx-dhead { padding-block: var(--space-3) var(--space-4); }
    .rmx-dhead__meta { gap: var(--space-2) var(--space-4); }
    .rmx-dhead__meta li { font-size: .86rem; }
    .rmx-detail { padding-block: var(--space-4); }
    .rmx-media .gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rmx-book .booking-widget { padding: var(--space-3); }
    .rmx-book .rmx-book__guests { grid-template-columns: minmax(0, 1fr); }
    .rmx-info__amen { padding: var(--space-3); }
    .rmx-more__head { align-items: flex-start; }
    .rmx-cta { padding-block: var(--space-5); }
    .rmx-cta__inner { flex-direction: column; align-items: flex-start; }
    .rmx-cta__actions { width: 100%; }
}

/* ===== Header, Footer und Suchmaske (chrome) ===== */
/* ==========================================================================
   CHR – Kopfzeile, Fusszeile, Suchmaske (Albergo Etrusco)
   Nutzt AUSSCHLIESSLICH Tokens aus theme.css. Kantig: keine eigenen Radien,
   nur var(--radius) / var(--radius-sm) (beide 0).
   Ueberschreibt bewusst die alten Regeln aus base.css (hoehere Spezifitaet).
   Responsive-Overrides am ENDE der Datei.
   ========================================================================== */

/* --- gemeinsames Icon-Mass ---------------------------------------------- */
.chr-ico { width: 18px; height: 18px; flex: none; stroke-linecap: square; stroke-linejoin: miter; }

/* ==========================================================================
   1) KOPFZEILE
   ========================================================================== */
.site-header.chr-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface);
    border-top: 3px solid var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.site-header__inner.chr-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--header-h);
}

.site-header.chr-header .brand.chr-brand {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
}
.site-header.chr-header .chr-brand__logo {
    height: 62px;          /* praesenter, wie im Original */
    width: auto;
    display: block;
}

/* Nav loest sich auf dem Desktop im Kopf-Raster auf (Menue mittig, Aktionen rechts) */
.nav.chr-nav { display: contents; }

.chr-nav__links {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}
.chr-nav__links > a {
    position: relative;
    display: inline-block;
    padding: .4rem 0;
    color: var(--color-brand);
    font-size: .95rem;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition);
}
.chr-nav__links > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition);
}
.chr-nav__links > a:hover,
.chr-nav__links > a.is-active { color: var(--color-primary); }
.chr-nav__links > a:hover::after,
.chr-nav__links > a.is-active::after { transform: scaleX(1); }

.chr-nav__actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Sprachumschalter DE IT EN FR – kantige Gruppe mit feinen Trennlinien */
.site-header.chr-header .lang-switch.chr-lang {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.site-header.chr-header .lang-switch.chr-lang a {
    display: inline-flex;
    align-items: center;
    padding: .34rem .55rem;
    border-left: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: var(--fw-semibold);
    letter-spacing: .1em;
    line-height: 1;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.site-header.chr-header .lang-switch.chr-lang a:first-child { border-left: 0; }
.site-header.chr-header .lang-switch.chr-lang a:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.site-header.chr-header .lang-switch.chr-lang a.is-active {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}
.site-header.chr-header .lang-switch.chr-lang a.is-active:hover {
    background: var(--color-primary-dark);
    color: var(--color-primary-contrast);
}

/* Roter Buchen-Button – eckig */
/* Ruhiger wie im Original: gemischte Schreibweise, keine gesperrten Versalien */
.site-header.chr-header .nav-cta.chr-cta {
    padding: .85em 1.6em;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: var(--fw-medium);
    text-transform: none;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
}
.site-header.chr-header .nav-cta.chr-cta:hover { transform: none; }

/* Burger */
.site-header.chr-header .nav-toggle.chr-burger {
    display: none;
    grid-column: 3;
    justify-self: end;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
}
.site-header.chr-header .nav-toggle.chr-burger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 0;
    background: var(--color-brand);
    transition: transform var(--transition), opacity var(--transition);
}
.site-header.chr-header .nav-toggle.chr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.chr-header .nav-toggle.chr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header.chr-header .nav-toggle.chr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   2) SUCHMASKE – kantige Leiste, weisse Flaeche, feine Trennlinien
   Trick: 1px Raster-Abstand auf Rahmenfarbe = automatische Trennlinien,
   unabhaengig von der Spaltenzahl (Desktop / Tablet / Mobil).
   ========================================================================== */
.search-form.chr-sf {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .8fr) auto;
    align-items: stretch;
    gap: 1px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-border);
    box-shadow: var(--shadow);
}
.search-form.chr-sf .chr-sf__field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    min-width: 0;
    padding: .95rem 1.15rem;
    background: var(--color-surface);
}
.search-form.chr-sf .chr-sf__label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: .7rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    line-height: 1.2;
    cursor: pointer;
}
.search-form.chr-sf .chr-sf__label .chr-ico {
    width: 15px;
    height: 15px;
    color: var(--color-primary);
}
.search-form.chr-sf .chr-sf__label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-form.chr-sf input.chr-sf__input {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-brand);
    font-family: var(--font-base);
    font-size: 1.02rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
}
.search-form.chr-sf input.chr-sf__input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-color: transparent;
}
.search-form.chr-sf input.sf-datefield { cursor: pointer; background: transparent; }

.search-form.chr-sf .chr-sf__submit {
    display: flex;
    padding: 0;
    background: var(--color-primary);
}
.search-form.chr-sf .chr-sf__btn {
    width: 100%;
    height: 100%;
    gap: .55rem;
    padding: 1.05rem 1.9rem;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .11em;
    white-space: nowrap;
}
.search-form.chr-sf .chr-sf__btn:hover { transform: none; }

/* Kalender oeffnet als angesetzte Flaeche unter der Leiste */
.search-form.chr-sf .sf-calendar {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: none;
}
.search-form.chr-sf .sf-calendar[hidden] { display: none; }
.search-form.chr-sf .sf-calendar .cal-months { justify-content: center; }

/* ==========================================================================
   3) FUSSZEILE – dunkel, vier Spalten + Copyright-Zeile
   ========================================================================== */
.site-footer.chr-footer {
    --chr-foot-fg:   var(--color-primary-contrast);
    --chr-foot-soft: color-mix(in srgb, var(--color-primary-contrast) 74%, transparent);
    --chr-foot-line: color-mix(in srgb, var(--color-primary-contrast) 14%, transparent);
    margin-top: auto;
    background: var(--color-brand-deep);
    color: var(--chr-foot-soft);
}
.site-footer.chr-footer .chr-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.25fr 1fr;
    gap: var(--space-5);
    padding-block: var(--space-6);
}
.site-footer.chr-footer .chr-footer__col {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}
.site-footer.chr-footer h4 {
    position: relative;
    margin: 0 0 var(--space-4);
    padding-bottom: .65rem;
    color: var(--chr-foot-fg);
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: var(--fw-semibold);
}
.site-footer.chr-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--color-primary);
}
.site-footer.chr-footer a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--chr-foot-soft);
    text-decoration: none;
    transition: color var(--transition), transform var(--transition);
}
.site-footer.chr-footer a:hover { color: var(--chr-foot-fg); }
.site-footer.chr-footer nav.chr-footer__col a:hover { transform: translateX(3px); }

/* Markenspalte mit Logo auf heller Flaeche (Logo ist dunkel gezeichnet) */
/* Original-Logo fuer dunklen Grund (gold) – ohne Kasten, direkt auf der Flaeche */
.site-footer.chr-footer .chr-footer__logo {
    height: 92px;
    width: auto;
    display: block;
    margin-bottom: var(--space-4);
}
.site-footer.chr-footer .chr-footer__region {
    margin: 0 0 var(--space-2);
    color: var(--color-mint);
    font-size: .72rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    line-height: 1.6;
}
.site-footer.chr-footer .chr-footer__text {
    margin: 0;
    max-width: 34ch;
    font-size: .95rem;
    line-height: 1.75;
}

/* Kontaktspalte */
.site-footer.chr-footer .chr-footer__contact {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-style: normal;
    line-height: 1.7;
}
.site-footer.chr-footer .chr-footer__item {
    display: inline-flex;
    align-items: flex-start;
    gap: .6rem;
    width: -moz-fit-content;
    width: fit-content;
}
.site-footer.chr-footer .chr-footer__item .chr-ico {
    margin-top: .22rem;
    color: var(--color-primary);
}
.site-footer.chr-footer a.chr-footer__item:hover .chr-ico { color: var(--color-accent); }

/* Copyright-Zeile */
.site-footer.chr-footer .chr-footer__bar { border-top: 1px solid var(--chr-foot-line); }
.site-footer.chr-footer .chr-footer__bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-4);
    font-size: .82rem;
}
.site-footer.chr-footer .chr-footer__bar-inner p { margin: 0; }

/* ==========================================================================
   RESPONSIVE OVERRIDES (am Ende)
   ========================================================================== */

/* --- Tablet: Burger-Menue, Suchmaske zweispaltig, Footer zweispaltig ----- */
@media (max-width: 1024px) {
    .site-header__inner.chr-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }
    .site-header.chr-header .nav-toggle.chr-burger { display: flex; }

    .nav.chr-nav {
        position: absolute;
        inset: 100% 0 auto 0;
        z-index: -1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        padding: var(--space-3) var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: var(--shadow);
        visibility: hidden;
        transform: translateY(-102%);
        transition: transform var(--transition), visibility var(--transition);
    }
    .nav.chr-nav.is-open { visibility: visible; transform: translateY(0); }

    .chr-nav__links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .chr-nav__links > a {
        padding: .95rem .2rem;
        border-bottom: 1px solid var(--color-border);
        font-size: 1.02rem;
        white-space: normal;
    }
    .chr-nav__links > a::after { display: none; }

    .chr-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding-top: var(--space-4);
    }
    .site-header.chr-header .lang-switch.chr-lang { align-self: flex-start; }
    .site-header.chr-header .lang-switch.chr-lang a { padding: .5rem .8rem; font-size: .78rem; }
    .site-header.chr-header .nav-cta.chr-cta { width: 100%; padding: 1em 1.35em; }

    .search-form.chr-sf { grid-template-columns: 1fr 1fr; }
    .search-form.chr-sf .chr-sf__submit { grid-column: 1 / -1; }
    .search-form.chr-sf .chr-sf__btn { padding: 1.1rem 1.6rem; }

    .site-footer.chr-footer .chr-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5) var(--space-4);
    }
}

/* --- Mobil: alles gestapelt --------------------------------------------- */
@media (max-width: 640px) {
    .site-header__inner.chr-header__inner { gap: var(--space-2); }
    .site-header.chr-header .chr-brand__logo { height: 44px; }

    .search-form.chr-sf { grid-template-columns: 1fr; }
    .search-form.chr-sf .chr-sf__field { padding: .85rem 1rem; }
    .search-form.chr-sf .sf-calendar { padding: var(--space-3); }
    .search-form.chr-sf .sf-calendar .cal-months { justify-content: flex-start; }

    .site-footer.chr-footer .chr-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        padding-block: var(--space-5);
    }
    .site-footer.chr-footer .chr-footer__text { max-width: none; }
    .site-footer.chr-footer .chr-footer__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* ##### Datums-Picker: Desktop 2 Monate, Mobil 1 Monat (wie Original) ##### */
.sf-calendar .cal-nav { justify-content: space-between; align-items: center; }
.sf-calendar .cal-prev, .sf-calendar .cal-next { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; color: var(--color-primary); }
.sf-calendar .cal-prev:hover:not([disabled]), .sf-calendar .cal-next:hover { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.sf-calendar .cal-month { width: 240px; }
.sf-calendar .cal-month__title { font-size: 1rem; text-align: center; color: var(--color-brand); }
.sf-calendar .cal-cell { font-size: .85rem; min-height: 34px; }
.sf-calendar .cal-wd { font-size: .68rem; }

/* Tablet: etwas kompakter */
@media (max-width: 1024px) {
    .sf-calendar .cal-month { width: 220px; }
}
/* Mobil: EIN Monat, volle Breite, grosse Tippflaechen */
@media (max-width: 700px) {
    .sf-calendar { width: 100%; justify-self: stretch; padding: var(--space-3) var(--space-2); }
    .sf-calendar .cal-months { flex-direction: column; gap: var(--space-4); align-items: stretch; }
    .sf-calendar .cal-month { width: 100%; }
    .sf-calendar .cal-cell { min-height: 42px; font-size: .95rem; }
    .sf-calendar .cal-prev, .sf-calendar .cal-next { width: 2.6rem; height: 2.6rem; }
}

/* ##### Gaeste-Dropdowns im Zimmer-Buchungswidget (kantig, eigenes Pfeil-Icon) ##### */
.booking-widget__guests { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.booking-widget__guests label {
    display: flex; flex-direction: column; gap: .4rem;
    font-size: .7rem; font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--color-text-muted);
}
.booking-widget__guests select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 100%; padding: .72em 2.1em .72em .8em;
    font-family: var(--font-base); font-size: .95rem; font-weight: var(--fw-medium);
    color: var(--color-text); background-color: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    line-height: 1.2; cursor: pointer; text-transform: none; letter-spacing: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7278' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6em center; background-size: 1.05em;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.booking-widget__guests select:hover { border-color: var(--color-primary); }
.booking-widget__guests select:focus-visible {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
@media (max-width: 480px) { .booking-widget__guests { grid-template-columns: 1fr; } }

/* ##### Hero Castaneda / Ueber uns: Text vertikal mittig statt am unteren Rand ##### */
.cst-hero, .abt-hero { display: flex; align-items: center; }
.cst-hero > .container, .abt-hero > .container { width: 100%; }
.cst-hero__inner, .abt-hero__inner { padding-block: var(--space-6); }
@media (max-width: 1024px) {
    .cst-hero__inner, .abt-hero__inner { padding-block: var(--space-5); }
}

/* ##### Footer-Logo: Seitenverhaeltnis erhalten (nicht verzerren) ##### */
.site-footer.chr-footer .chr-footer__logo {
    height: auto;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 640 / 296;
    object-fit: contain;
    align-self: flex-start;
    flex: 0 0 auto;
    margin-bottom: var(--space-4);
}

/* ##### Handy-Feinschliff ##### */
@media (max-width: 640px) {
    /* Hero: Collage ruhiger stapeln statt ueberlappen, kein Leerraum */
    .hm-hero__figure--front { position: static !important; margin: calc(-1 * var(--space-4)) 0 0 auto !important;
        width: 74% !important; transform: none !important; }
    .hm-hero__figure--back img, .hm-hero__figure--front img { aspect-ratio: 4 / 3; }
    .hm-hero__media { margin-top: var(--space-4); }
    /* Bewertungs-Badge: kompakter, nicht umbrechen */
    .hm-rating { align-items: center; gap: .5rem; padding: .6rem .8rem; }
    .hm-rating__text { font-size: .82rem; line-height: 1.35; }
    /* Ueberschriften/Abstaende etwas straffer */
    section { padding-block: var(--space-5); }
    h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
    h2 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
    .container { padding-inline: var(--space-3); }
    /* Buttons gut greifbar */
    .btn { min-height: 46px; }
    .btn--block, .hm-cta .btn, .rmx-book .btn { width: 100%; }
    /* Foto-Streifen: 2 Spalten, ruhigere Hoehe */
    .hm-strip { grid-template-columns: 1fr 1fr !important; }
    .hm-strip figure, .hm-strip a { min-height: 150px; }
    /* Footer: klar getrennt, Logo nicht zu gross */
    .site-footer.chr-footer .chr-footer__logo { width: 200px; }
    .site-footer.chr-footer .chr-footer__grid { gap: var(--space-4); }
}

/* ##### EMPFANGSSEITE / NEWSLETTER / PUSH ##### */
/* ===== Empfangsseite ===== */
/* ==========================================================================
   EMPFANGSSEITE (Coming-Soon) – Praefix lp-
   Verwendet AUSSCHLIESSLICH die Variablen aus theme.css (kantig, Rot/Anthrazit).
   Responsive-Overrides am ENDE dieses Blocks (Tablet 1024px, Mobil 640px).
   ========================================================================== */

/* --- Hilfsklassen -------------------------------------------------------- */
.lp-eyebrow {
    margin: 0 0 var(--space-2);
    font-size: .75rem; font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--color-primary);
}
.lp-eyebrow--light { color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); }

.lp-visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Honeypot – fuer Menschen unsichtbar, fuer Bots verfuehrerisch. */
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Kopf ---------------------------------------------------------------- */
.lp-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--color-bg) 93%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--color-border);
}
.lp-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); min-height: var(--header-h);
}
.lp-brand { display: inline-flex; align-items: center; }
.lp-brand__logo { height: 52px; width: auto; }
.lp-header__nav { display: flex; align-items: center; gap: var(--space-5); }
.lp-header__links { display: flex; align-items: center; gap: var(--space-4); }
.lp-header__links a {
    position: relative; padding: .25em 0;
    color: var(--color-text); font-size: .95rem; font-weight: var(--fw-medium);
}
.lp-header__links a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
    background: var(--color-primary); transition: right var(--transition);
}
.lp-header__links a:hover { color: var(--color-primary); }
.lp-header__links a:hover::after { right: 0; }

.lp-lang { display: inline-flex; align-items: center; gap: .15rem; }
.lp-lang a {
    padding: .25rem .45rem; border-radius: var(--radius-sm);
    color: var(--color-text-muted); font-size: .8rem; font-weight: var(--fw-semibold);
    letter-spacing: .03em;
}
.lp-lang a:hover { color: var(--color-primary); }
.lp-lang a.is-active { background: var(--color-primary); color: var(--color-primary-contrast); }
.lp-lang a.is-active:hover { color: var(--color-primary-contrast); }

/* --- Hero ---------------------------------------------------------------- */
.lp-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: flex-end;
    min-height: min(80vh, 780px);
    color: var(--color-primary-contrast);
}
.lp-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.lp-hero__veil {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-brand-deep) 72%, transparent) 0%,
            color-mix(in srgb, var(--color-brand-deep) 42%, transparent) 38%,
            color-mix(in srgb, var(--color-brand-deep) 92%, transparent) 100%);
}
.lp-hero__inner { width: 100%; padding-block: var(--space-7) var(--space-6); }
.lp-hero__box { max-width: 46rem; }
.lp-hero__title {
    margin: 0 0 var(--space-4);
    color: var(--color-primary-contrast);
    font-size: var(--fs-h1);
    text-shadow: 0 2px 26px rgba(0, 0, 0, .35);
}
.lp-hero__title::after {
    content: ""; display: block; width: 74px; height: 3px;
    margin-top: var(--space-4); background: var(--color-primary);
}
.lp-hero__lead {
    max-width: 44ch; margin: 0 0 var(--space-3);
    color: color-mix(in srgb, var(--color-primary-contrast) 94%, transparent);
    font-size: var(--fs-lead); line-height: 1.65;
}
.lp-hero__lead--sub {
    margin-bottom: 0;
    color: color-mix(in srgb, var(--color-primary-contrast) 80%, transparent);
    font-size: 1.02rem;
}

/* --- "Schon bald findest du hier" ---------------------------------------- */
.lp-soon { padding-block: var(--space-7); background: var(--color-bg); }
.lp-soon__inner { max-width: var(--container-narrow); }
.lp-soon__title { margin-bottom: var(--space-5); font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; }
.lp-soon__list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
    list-style: none; margin: 0; padding: 0;
}
.lp-soon__item {
    display: flex; align-items: center; gap: .85rem;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface); border: 1px solid var(--color-border);
    transition: border-color var(--transition), transform var(--transition);
}
.lp-soon__item:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.lp-soon__icon { flex: 0 0 auto; display: inline-flex; color: var(--color-primary); }
.lp-soon__icon svg { width: 24px; height: 24px; }
.lp-soon__label { font-weight: var(--fw-medium); line-height: 1.35; }
.lp-soon__outro {
    max-width: 52ch; margin: var(--space-5) auto 0;
    color: var(--color-text-muted); text-align: center;
}

/* --- Newsletter (auffaellige dunkle Sektion) ----------------------------- */
.lp-news {
    padding-block: var(--space-7);
    background: var(--color-brand);
    border-top: 4px solid var(--color-primary);
    color: color-mix(in srgb, var(--color-primary-contrast) 88%, transparent);
}
.lp-news__inner { max-width: var(--container-narrow); text-align: center; }
.lp-news__title {
    margin-bottom: var(--space-3);
    color: var(--color-primary-contrast);
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.lp-news__text { max-width: 54ch; margin-inline: auto; margin-bottom: var(--space-5); line-height: 1.75; }
.lp-news__alert { max-width: 42rem; margin-inline: auto; text-align: left; }
.lp-news__form {
    position: relative;
    display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap;
    max-width: 34rem; margin-inline: auto;
}
.lp-news__input {
    flex: 1 1 16rem; min-width: 0;
    padding: .9em 1em;
    border: 1.5px solid transparent; border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text);
    font: inherit;
}
.lp-news__input::placeholder { color: var(--color-text-muted); }
.lp-news__input:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
    border-color: var(--color-primary);
}
.lp-news__btn { flex: 0 0 auto; padding-inline: 1.8em; }
.lp-news__hint {
    max-width: 52ch; margin: var(--space-4) auto 0;
    color: color-mix(in srgb, var(--color-primary-contrast) 70%, transparent);
    font-size: .85rem; line-height: 1.6;
}
.lp-news__hint a { color: var(--color-primary-contrast); text-decoration: underline; text-underline-offset: .2em; }
.lp-news__hint a:hover { color: var(--color-accent); }

/* --- Instagram ----------------------------------------------------------- */
.lp-insta { padding-block: var(--space-6); background: var(--color-bg); text-align: center; }
.lp-insta__inner { max-width: var(--container-narrow); }
.lp-insta__title { margin-bottom: var(--space-2); font-size: clamp(1.5rem, 3vw, 2rem); }
.lp-insta__text { margin-bottom: var(--space-4); color: var(--color-text-muted); }
.lp-insta__handle {
    display: inline-flex; align-items: center; gap: .7rem;
    padding: .8em 1.6em;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    color: var(--color-brand); font-weight: var(--fw-semibold);
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.lp-insta__handle:hover {
    border-color: var(--color-primary); background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
.lp-insta__icon { width: 24px; height: 24px; color: var(--color-primary); }

/* --- Ueber uns: Leitmotiv ------------------------------------------------ */
.lp-motto { padding-block: var(--space-6); background: var(--color-section); text-align: center; }
.lp-motto__inner { max-width: var(--container-narrow); }
.lp-motto__text {
    margin: 0;
    color: var(--color-brand);
    font-family: var(--font-head); font-size: clamp(1.35rem, 2.8vw, 1.95rem);
    line-height: 1.45;
}

/* --- Ueber uns: Abschnitte ----------------------------------------------- */
.lp-story { padding-block: var(--space-6); background: var(--color-bg); }
.lp-story--alt { background: var(--color-bg-alt); }
.lp-story__inner { max-width: var(--container-narrow); }
.lp-story__title { position: relative; margin-bottom: var(--space-4); padding-bottom: var(--space-3); }
.lp-story__title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 56px; height: 2px; background: var(--color-primary);
}
.lp-story__text p { margin-bottom: var(--space-4); line-height: 1.8; }
.lp-story__text p:last-child { margin-bottom: 0; }
.lp-story__accent {
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-primary);
    color: var(--color-brand); font-weight: var(--fw-medium);
}

/* --- Ueber uns: Abschluss-Zitat ------------------------------------------ */
.lp-quote { padding-block: var(--space-7); background: var(--color-brand-deep); text-align: center; }
.lp-quote__inner { max-width: var(--container-narrow); }
.lp-quote__mark { width: 44px; height: 44px; margin-bottom: var(--space-4); color: var(--color-primary); }
.lp-quote__text {
    margin: 0;
    color: var(--color-primary-contrast);
    font-family: var(--font-head); font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    line-height: 1.5;
}

/* --- Team ---------------------------------------------------------------- */
.lp-team { padding-block: var(--space-7); background: var(--color-bg-alt); }
.lp-team__head { margin-bottom: var(--space-5); text-align: center; }
.lp-team__title { margin: 0; }
.lp-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.lp-person {
    display: flex; flex-direction: column;
    background: var(--color-surface); border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.lp-person__media { margin: 0; background: var(--color-section); }
.lp-person__media img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.lp-person__body { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: var(--space-4); }
.lp-person__name { margin: 0; font-size: 1.2rem; }
.lp-person__role {
    margin: 0; color: var(--color-primary);
    font-size: .74rem; font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase; line-height: 1.5;
}
.lp-person__text { margin: 0; color: var(--color-text-muted); font-size: .92rem; line-height: 1.75; }
.lp-person__quote {
    margin: auto 0 0; padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-brand); font-family: var(--font-head);
    font-size: 1rem; line-height: 1.55;
}

/* --- Bildergalerie (Platzhalter) ----------------------------------------- */
.lp-gallery { padding-block: var(--space-7); background: var(--color-bg); }
.lp-gallery__head { max-width: 56ch; margin: 0 auto var(--space-5); text-align: center; }
.lp-gallery__title { margin-bottom: var(--space-2); }
.lp-gallery__text { margin: 0; color: var(--color-text-muted); }
/* Raster und Lightbox der Galerie: siehe Abschnitt am Dateiende. */
.lp-gallery__note { margin: var(--space-4) 0 0; font-size: .85rem; text-align: center; }

/* --- Fusszeile ----------------------------------------------------------- */
.lp-footer {
    margin-top: auto;
    background: var(--color-brand-deep);
    color: color-mix(in srgb, var(--color-primary-contrast) 74%, transparent);
}
.lp-footer__inner {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: var(--space-5); padding-block: var(--space-6);
}
.lp-footer__col { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.lp-footer__logo {
    width: 220px; max-width: 100%; height: auto;
    aspect-ratio: 640 / 296; object-fit: contain;
    margin-bottom: var(--space-3);
}
.lp-footer__address { font-style: normal; line-height: 1.9; }
.lp-footer__links { align-items: flex-start; gap: .7rem; }
.lp-footer__links a { color: inherit; transition: color var(--transition), transform var(--transition); }
.lp-footer__links a:hover { color: var(--color-primary-contrast); transform: translateX(3px); }
.lp-footer__bar { border-top: 1px solid color-mix(in srgb, var(--color-primary-contrast) 14%, transparent); }
.lp-footer__bar-inner {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: var(--space-3); padding-block: var(--space-4); font-size: .82rem;
}
.lp-footer__bar-inner p { margin: 0; }
.lp-footer__bar-inner a { color: inherit; }
.lp-footer__bar-inner a:hover { color: var(--color-primary-contrast); }

/* ==========================================================================
   RESPONSIVE (Empfangsseite)
   ========================================================================== */

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {
    .lp-header__inner { flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-2); }
    .lp-header__nav { flex: 1 1 100%; justify-content: space-between; gap: var(--space-3); }
    .lp-header__links { gap: var(--space-3); flex-wrap: wrap; }

    .lp-hero { min-height: 62vh; }
    .lp-hero__inner { padding-block: var(--space-6) var(--space-5); }

    .lp-soon__list { grid-template-columns: repeat(2, 1fr); }
    .lp-team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 640px) {
    .lp-brand__logo { height: 42px; }
    .lp-header__links a { font-size: .88rem; }
    .lp-lang a { padding: .25rem .35rem; font-size: .75rem; }

    .lp-hero { min-height: 78vh; }
    .lp-hero__inner { padding-block: var(--space-6) var(--space-5); }
    .lp-hero__lead { font-size: 1.05rem; }

    .lp-soon, .lp-news, .lp-quote, .lp-team, .lp-gallery { padding-block: var(--space-6); }
    .lp-soon__list { grid-template-columns: 1fr; }
    .lp-soon__item { padding: var(--space-3); }

    .lp-news__form { flex-direction: column; }
    .lp-news__input, .lp-news__btn { width: 100%; }
    .lp-news__alert { text-align: center; }

    .lp-insta__handle { width: 100%; justify-content: center; }

    .lp-team__grid { grid-template-columns: 1fr; }
    .lp-person__media img { aspect-ratio: 3 / 2; }

    .lp-footer__inner { flex-direction: column; gap: var(--space-4); padding-block: var(--space-5); }
    .lp-footer__bar-inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ===== Empfangsmodus-Schalter ===== */
/* ==========================================================================
   EMPFANGSSEITE – Admin-Schalter (/admin/empfang) · Praefix: lpa-
   Nur Theme-Variablen, alles kantig (--radius* = 0), keine Emojis.
   Gehoert nach public/assets/css/admin.css (ans Ende anfuegen).
   ========================================================================== */
.lpa { max-width: 780px; }
.lpa > * + * { margin-top: var(--space-4); }
.lpa h2 { margin: 0; font-size: var(--fs-h3); }
.lpa h2 + p, .lpa h2 + ul { margin-top: var(--space-2); }
.lpa p { margin: 0; }

/* --- Statuszeile ---------------------------------------------------------- */
.lpa-status {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
}
.lpa-status__dot {
    flex: 0 0 auto; width: .7rem; height: .7rem; margin-top: .45rem;
    background: var(--color-text-muted);
}
.lpa-status--on { border-left-color: var(--color-primary); background: var(--color-primary-soft); }
.lpa-status--on .lpa-status__dot { background: var(--color-primary); }
.lpa-status--off { border-left-color: var(--color-success); }
.lpa-status--off .lpa-status__dot { background: var(--color-success); }
.lpa-status__body { display: block; min-width: 0; }
.lpa-status__title { display: block; font-family: var(--font-head); font-size: 1.25rem; line-height: 1.3; }
.lpa-status__sub { display: block; margin-top: .25rem; font-size: .95rem; color: var(--color-text-muted); }

/* --- Hinweis-/Warnkasten -------------------------------------------------- */
.lpa-note {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--color-info-bg);
    line-height: 1.6;
}
.lpa-note--warn { background: var(--color-error-bg); border-left-color: var(--color-error); color: var(--color-error); }
.lpa-note--warn a { color: var(--color-error); text-decoration: underline; }
.lpa-note--info { border-left-color: var(--color-brand); }
.lpa-note__body { min-width: 0; }
.lpa-note__hint { display: block; margin-top: var(--space-2); font-size: .9rem; color: var(--color-text-muted); }
.lpa-note--warn .lpa-note__hint { color: inherit; opacity: .85; }
.lpa-icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: .15rem; }

/* --- Aufzaehlung ---------------------------------------------------------- */
.lpa-list { margin: 0; padding-left: 1.15rem; }
.lpa-list li { margin-bottom: var(--space-2); line-height: 1.6; }
.lpa-list li:last-child { margin-bottom: 0; }
.lpa-list code {
    padding: .1em .35em; background: var(--color-bg-alt);
    border: 1px solid var(--color-border); font-size: .9em;
}

/* --- Schalter (zwei Optionen) --------------------------------------------- */
.lpa-form { max-width: none; }
.lpa-choices { margin: 0 0 var(--space-4); padding: 0; border: 0; }
.lpa-choices__legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--fw-medium); }
.lpa-choice {
    display: flex; align-items: flex-start; gap: var(--space-3);
    margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-normal);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.lpa-choice:last-of-type { margin-bottom: 0; }
.lpa-choice:hover { border-color: var(--color-text-muted); }
.lpa-choice--active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.lpa-choice:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.lpa-choice input[type="radio"] { flex: 0 0 auto; width: auto; margin: .35rem 0 0; accent-color: var(--color-primary); }
.lpa-choice__body { display: block; min-width: 0; }
.lpa-choice__title { display: block; font-weight: var(--fw-medium); }
.lpa-choice__desc { display: block; margin-top: .2rem; font-size: .95rem; color: var(--color-text-muted); line-height: 1.55; }

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {
    .lpa { max-width: 100%; }
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 640px) {
    .lpa-status, .lpa-note, .lpa-choice { padding: var(--space-3); }
    .lpa-status__title { font-size: 1.1rem; }
    .lpa-note { gap: var(--space-2); }
    .lpa-list { padding-left: 1rem; }
    .lpa-list code { overflow-wrap: anywhere; }
    .lpa-form .btn { width: 100%; }
}

/* ===== Newsletter ===== */
/* ==========================================================================
   NEWSLETTER (Praefix nl-) – Anmelde-Baustein, Statusseiten, Admin-Liste
   Nur Theme-Variablen, kein externes CDN. Gehoert ans Ende von
   public/assets/css/base.css (base.css wird von layout/base, layout/landing
   UND layout/admin geladen -> ein Block genuegt fuer alle drei).
   ========================================================================== */

/* --- Anmelde-Baustein (oeffentlich) -------------------------------------- */
.nl-signup { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding-block: var(--space-6); }
.nl-signup__inner { max-width: var(--container-narrow); text-align: center; }
.nl-signup__eyebrow { font-size: .78rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); }
.nl-signup__title { font-family: var(--font-head); font-size: var(--fs-h2); color: var(--color-brand); margin-bottom: var(--space-2); }
.nl-signup__text { color: var(--color-text-muted); max-width: 58ch; margin: 0 auto var(--space-4); }
.nl-signup__alert { max-width: 34rem; margin-inline: auto; text-align: left; }

.nl-form { max-width: 34rem; margin-inline: auto; text-align: left; }
.nl-form__row { display: flex; align-items: flex-end; gap: var(--space-2); }
.nl-form__field { display: block; flex: 1 1 auto; min-width: 0; }
.nl-form__label { display: block; font-size: .85rem; font-weight: var(--fw-medium); color: var(--color-text); margin-bottom: .35rem; }
.nl-form input[type="email"] {
    width: 100%; padding: .7em .8em; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm); font: inherit; background: var(--color-surface); color: var(--color-text);
}
.nl-form input[type="email"]:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.nl-form__submit { flex: 0 0 auto; }
.nl-form__hint { margin-top: var(--space-3); font-size: .85rem; color: var(--color-text-muted); }
.nl-form__hint a { color: var(--color-primary); }

/* --- Statusseite (Bestaetigung / Abmeldung) ------------------------------ */
.nl-status__card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-5); text-align: center;
}
.nl-status__card--success { border-top-color: var(--color-success); }
.nl-status__card--error { border-top-color: var(--color-error); }
.nl-status__icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; margin-bottom: var(--space-3); color: var(--color-primary); }
.nl-status__card--success .nl-status__icon { color: var(--color-success); }
.nl-status__card--error .nl-status__icon { color: var(--color-error); }
.nl-status__icon svg { width: 100%; height: 100%; }
.nl-status__text { color: var(--color-text); max-width: 56ch; margin: 0 auto var(--space-4); }
.nl-status__back { margin: 0; }

.nl-unsub { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-2); max-width: 30rem; margin: 0 auto var(--space-4); text-align: left; }
.nl-unsub__field { display: block; flex: 1 1 auto; min-width: 0; }
.nl-unsub__label { display: block; font-size: .85rem; font-weight: var(--fw-medium); margin-bottom: .35rem; }
.nl-unsub input[type="email"] {
    width: 100%; padding: .7em .8em; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm); font: inherit; background: var(--color-surface); color: var(--color-text);
}
.nl-unsub input[type="email"]:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.nl-unsub__submit { flex: 0 0 auto; }

/* --- Admin-Liste --------------------------------------------------------- */
.nl-stats { grid-template-columns: repeat(3, 1fr); }
.nl-actions { align-items: center; }
.nl-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nl-filter__link {
    display: inline-block; padding: .35rem .8rem; font-size: .85rem; text-decoration: none;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text-muted);
}
.nl-filter__link:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.nl-filter__link.is-active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.nl-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nl-table { min-width: 680px; }
.nl-badge { display: inline-block; padding: .15rem .6rem; font-size: .72rem; font-weight: var(--fw-bold); border-radius: var(--radius-pill); white-space: nowrap; }
.nl-badge--confirmed { background: var(--color-success-bg); color: var(--color-success); }
.nl-badge--pending { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.nl-badge--unsubscribed { background: var(--color-bg-alt); color: var(--color-text-muted); }
.nl-note { font-size: .85rem; max-width: 72ch; }

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {
    .nl-signup { padding-block: var(--space-5); }
    .nl-status__card { padding: var(--space-4); }
    .nl-stats { grid-template-columns: repeat(3, 1fr); }
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 640px) {
    .nl-form__row, .nl-unsub { flex-direction: column; align-items: stretch; }
    .nl-form__submit, .nl-unsub__submit { width: 100%; justify-content: center; }
    .nl-stats { grid-template-columns: 1fr; }
    .nl-actions { flex-direction: column; align-items: stretch; }
    .nl-actions form, .nl-actions .btn { width: 100%; }
    .nl-filter { justify-content: flex-start; }
    .nl-table { min-width: 560px; }
}

/* ===== Rollentrennung + Push ===== */
/* ==========================================================================
   WEB-PUSH – "Benachrichtigungen aktivieren" (Backend-Sidebar).
   Praefix: push-  |  Nur theme.css-Variablen, keine festen Farbwerte ausser
   den Weiss-Transparenzen der dunklen Sidebar (wie .admin-nav / .admin-logout).
   ========================================================================== */

.push-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .9);
}
/* Wird per JS eingeblendet – display:flex wuerde [hidden] sonst ueberstimmen. */
.push-box[hidden] { display: none; }

.push-box__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .72rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: #fff;
}
.push-box__icon { width: 16px; height: 16px; flex: 0 0 auto; }

.push-box__status {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .7);
}
.push-box--active .push-box__status { color: #fff; }
.push-box--blocked .push-box__status { color: rgba(255, 255, 255, .85); }

.push-box__btn {
    width: 100%;
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}
.push-box__btn:hover:not(:disabled),
.push-box__btn:focus-visible:not(:disabled) {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}
.push-box__btn:disabled { opacity: .55; cursor: not-allowed; }

/* --- Tablet: Sidebar wird zur Zeile (Breakpoint wie .admin-sidebar) ------- */
@media (max-width: 1024px) {
    .push-box { max-width: 100%; }
}
@media (max-width: 720px) {
    .push-box {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
        width: 100%;
    }
    .push-box__title { flex: 0 0 auto; }
    .push-box__status { flex: 1 1 12rem; }
    .push-box__btn { width: auto; flex: 0 0 auto; }
}

/* --- Mobil: alles untereinander, kein horizontales Scrollen --------------- */
@media (max-width: 640px) {
    .push-box {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    .push-box__status { flex: 1 1 auto; }
    .push-box__btn { width: 100%; }
}

/* ##### Empfangsseite: Feinschliff ##### */
/* Titel + Beschrieb mittig statt links unten */
.lp-hero { align-items: center; text-align: center; }
.lp-hero__inner { padding-block: var(--space-7); }
.lp-hero__box { max-width: 52rem; margin-inline: auto; }
.lp-hero .lp-hero__eyebrow { justify-content: center; }
.lp-hero__title::after, .lp-hero__box hr { margin-inline: auto; }
/* Die Absaetze haben eine eigene max-width (44ch). Ohne auto-Raender kleben sie
   am linken Rand der Box – der Text wirkt dann schief unter dem Titel. */
.lp-hero__lead { margin-inline: auto; }
/* E-Mail im Fuss */
.lp-footer__mail {
    display: inline-flex; align-items: center; gap: .55rem;
    margin-top: var(--space-3); font-size: .95rem;
    color: inherit; text-decoration: none;
}
.lp-footer__mail svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.lp-footer__mail:hover { color: var(--color-primary); }
@media (max-width: 640px) {
    .lp-hero__inner { padding-block: var(--space-6); }
}

/* ##### EMPFANGSSEITE – FEINSCHLIFF (Team / Handy-Kopfzeile / Newsletter / Recht) ##### */

/* Team wirkte auf dem Desktop stark in die Länge gezogen: Portraits bekommen ein
   festes Hochformat, die Karten dadurch gleiche Höhe und ruhigere Proportionen. */
.lp-team__grid { max-width: 68rem; margin-inline: auto; align-items: start; }
.lp-team__grid .lp-person__media { margin: 0 0 var(--space-3); }
.lp-team__grid .lp-person__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 22%;
}

/* Rechtsseiten der Empfangsseite */
.lp-legal { padding-block: var(--space-7) var(--space-6); background: var(--color-bg); }
.lp-legal__inner { max-width: 46rem; }
.lp-legal__back {
    display: inline-flex; align-items: center; gap: .5em;
    margin-bottom: var(--space-4);
    color: var(--color-text-muted); font-size: .95rem; text-decoration: none;
}
.lp-legal__back svg { width: 1em; height: 1em; }
.lp-legal__back:hover { color: var(--color-primary); }
.lp-legal__title { margin: 0 0 var(--space-3); }
.lp-legal__lead {
    padding: var(--space-3);
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-text);
}
.lp-legal h2 { margin: var(--space-5) 0 var(--space-2); font-size: 1.15rem; }
.lp-legal p { line-height: 1.75; }
.lp-legal__todo { color: var(--color-primary-dark); font-style: italic; }
.lp-legal__stand {
    margin-top: var(--space-5); padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted); font-size: .9rem;
}

@media (max-width: 720px) {
    /* Kopfzeile auf dem Handy: siehe Block "Empfangsseite – Kopfzeile auf
       schmalen Bildschirmen" am Ende dieser Datei (Sprunglinks bleiben sichtbar). */

    /* Newsletter lief auf dem Handy oben aus dem Bild und war zu wuchtig. */
    .lp-news { padding-block: var(--space-5); }
    .lp-news__title { font-size: 1.45rem; line-height: 1.25; }
    .lp-news__text { margin-bottom: var(--space-4); font-size: .98rem; }
    .lp-news__form { flex-direction: column; gap: var(--space-2); width: 100%; }
    .lp-news__input,
    .lp-news__btn { width: 100%; max-width: 100%; box-sizing: border-box; }
    /* Wichtig: in der Spaltenrichtung ist die Hauptachse senkrecht – ein
       flex-basis von 16rem wuerde sonst zur HOEHE des Eingabefelds. */
    .lp-news__input {
        flex: 0 0 auto;
        min-width: 0;
        height: auto;
        font-size: 1rem;
    }
    .lp-news__btn { padding-inline: 1em; }
    .lp-news__hint { font-size: .85rem; }
    .lp-news__alert { max-width: 100%; }

    .lp-legal { padding-block: var(--space-5); }
}

/* Team: vier schmale Spalten ergaben bei den langen Lebenslaeufen sehr hohe
   Textsaeulen. Ab Tablet daher zwei Karten pro Reihe im Querformat – Bild links,
   Text rechts. Die Zeilenlaenge verdoppelt sich, die Hoehe halbiert sich. */
@media (min-width: 860px) {
    /* Eine Person pro Reihe: der Lebenslauf bekommt die volle Breite, dadurch
       braucht er nur noch wenige Zeilen statt einer hohen Textsaeule. */
    .lp-team__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
        max-width: 58rem;
    }
    .lp-team__grid .lp-person {
        display: grid;
        grid-template-columns: 13rem minmax(0, 1fr);
        gap: var(--space-5);
        align-items: start;
        padding-bottom: var(--space-5);
        border-bottom: 1px solid var(--color-border);
    }
    .lp-team__grid .lp-person:last-child { padding-bottom: 0; border-bottom: 0; }
    .lp-team__grid .lp-person__media { margin: 0; }
    .lp-team__grid .lp-person__media img { aspect-ratio: 3 / 4; }
    .lp-team__grid .lp-person__text { font-size: 1rem; line-height: 1.75; }
}

/* ==========================================================================
   NACHTRAG – Newsletter-Hinweise auf der Empfangsseite (.lp-news__steps)
   Kurze Punkte mit Haken unter dem Anmeldeformular: was nach dem Antragen
   passiert. Bewusst am Dateiende (spaeter = gewinnt), inkl. eigenem
   Handy-Block, damit der dunkle Newsletter-Abschnitt nicht wuchtig wird.
   Nur neue Klassen – bestehende Namen bleiben unveraendert.
   ========================================================================== */
.lp-news__steps {
    display: grid;
    gap: var(--space-2);
    max-width: 34rem;
    margin: var(--space-4) auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.lp-news__step {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .92rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent);
}
.lp-news__check {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: .16em;
    color: var(--color-accent);
}
.lp-news__check svg { width: 16px; height: 16px; }
.lp-news__step-text { min-width: 0; }

@media (max-width: 720px) {
    .lp-news__steps {
        gap: var(--space-1);
        max-width: 100%;
        margin-top: var(--space-3);
    }
    .lp-news__step { gap: .5rem; font-size: .84rem; line-height: 1.45; }
    .lp-news__check { margin-top: .2em; }
    .lp-news__check svg { width: 14px; height: 14px; }
}

/* ==========================================================================
   NACHTRAG – Benutzerverwaltung im Backend (/admin/benutzer)
   Nur ergaenzende Feinheiten zur bestehenden Tabellen-/Formular-Optik
   (.table, .badge, .row-actions, .form). Ausschliesslich Theme-Variablen,
   keine harten Farbwerte, keine Rundungen.
   ========================================================================== */
.user-self {
    margin-left: var(--space-2);
    vertical-align: middle;
}
.user-name {
    display: block;
    font-size: .85rem;
    color: var(--color-text-muted);
}
.user-hint {
    margin: var(--space-2) 0 0;
    font-size: .88rem;
}
.form--grid > .user-hint { grid-column: 1 / -1; }
.user-note {
    max-width: 70ch;
    font-size: .9rem;
}
.user-meta {
    margin: 0 0 var(--space-4);
    font-size: .9rem;
}
.user-delete-actions {
    margin-top: var(--space-4);
    align-items: center;
}

/* ==========================================================================
   EMPFANGSSEITE – KOPFZEILE AUF SCHMALEN BILDSCHIRMEN
   Frueher waren die Sprunglinks auf dem Handy ausgeblendet. Sie bleiben jetzt
   sichtbar und stehen in zwei ruhigen Zeilen:
     Zeile 1: Logo links, Sprachwahl rechts
     Zeile 2: die drei Sprunglinks ueber die volle Breite verteilt
   Damit Sprachwahl und Sprunglinks in verschiedene Zeilen duerfen, wird der
   Rahmen von .lp-header__nav nur zum Durchreichen aufgeloest (display: contents);
   das Element bleibt als Navigations-Landmarke im Dokument erhalten.
   ========================================================================== */
@media (max-width: 720px) {
    .lp-header__inner {
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1) var(--space-2);
        padding-block: var(--space-2);
        min-height: 0;
    }

    .lp-header__nav { display: contents; }

    .lp-brand { order: 1; min-width: 0; }
    .lp-brand__logo { height: 40px; }

    /* Sprachwahl bleibt neben dem Logo, rechtsbuendig. */
    .lp-lang {
        order: 2;
        margin-left: auto;
        gap: 0;
        flex: 0 0 auto;
    }
    .lp-lang a {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 40px; min-width: 2.1rem;
        padding: 0 .3rem;
        font-size: .75rem;
    }

    /* Sprunglinks in eigener Zeile, gleichmaessig verteilt, ohne Umbruch. */
    .lp-header__links {
        order: 3;
        display: flex;
        flex: 1 1 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
    }
    .lp-header__links a {
        display: inline-flex; align-items: center;
        min-height: 40px;
        padding: 0;
        font-size: .82rem;
        line-height: 1.2;
        white-space: nowrap;
        min-width: 0;
    }

    /* Die Kopfzeile ist jetzt zweizeilig – Ankerziele nicht darunter schieben. */
    .lp-insta, .lp-motto, .lp-gallery { scroll-margin-top: 108px; }
}

/* --- Empfangsseite: Erzaehl-Abschnitte lesbarer -------------------------- */
/* Fliesstext auf ein angenehmes Satzmass begrenzen: rund 65 Zeichen pro Zeile.
   Die Einheit ch misst die Breite der Ziffer 0 – echte Buchstaben sind
   schmaler, daher ergeben 52ch bei Inter etwa 65 tatsaechliche Zeichen
   (65ch waeren gemessen rund 81). Der Abschnitt selbst bleibt in der
   schmalen Container-Breite; der Text steht darin linksbuendig. */
.lp-story__text { max-width: 52ch; }

/* Anbau-Liste ("Ein Ort zum Ankommen"): die Fruechte der Obstparzellen
   stehen als eigene, umbrechende Liste statt als Aufzaehlung im Satz. */
.lp-story__text p.lp-story__crops-lead { margin-bottom: var(--space-3); }
.lp-crops {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}
.lp-crops__item {
    padding: .35rem .8rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-brand);
    font-size: .95rem;
    line-height: 1.5;
}

/* Zitat von Norbert Wismer – ruhiger Einschub zwischen Text und Team. */
.lp-voice { padding-block: var(--space-6); background: var(--color-bg-alt); }
.lp-voice__inner {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4); align-items: start;
    max-width: 52rem;
}
.lp-voice__mark { width: 2rem; height: 1.5rem; color: var(--color-primary); flex: none; }
.lp-voice__quote { margin: 0; }
.lp-voice__quote p {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display, inherit);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    line-height: 1.5;
}
.lp-voice__by { display: flex; flex-direction: column; gap: .15em; }
.lp-voice__name { font-weight: 600; letter-spacing: .02em; }
.lp-voice__role {
    color: var(--color-text-muted);
    font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 720px) {
    .lp-voice { padding-block: var(--space-5); }
    .lp-voice__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .lp-voice__mark { width: 1.5rem; height: 1.15rem; }
}

/* Das Anfuehrungszeichen im Abschluss-Zitat nutzt jetzt dasselbe schlanke
   SVG wie das Zitat von Norbert Wismer (Seitenverhaeltnis 32:24). */
.lp-quote__mark { width: 2.5rem; height: 1.875rem; margin-inline: auto; }

/* --- Empfangsseite: "Ein Haus mit Geschichte" mit Unterabschnitten --------
   Der Abschnitt hat seit der Textlieferung vom 03.09.2026 zwei benannte
   Unterabschnitte unter einer Hauptueberschrift. Damit der lange Text ruhig
   lesbar bleibt: Satzmass wie beim uebrigen Fliesstext (52ch), aber am
   .lp-story__part gesetzt – so richtet sich die Zwischenueberschrift an
   derselben Kante aus wie der Text darunter. Waere die Breite an der h3
   selbst gesetzt, wuerde ch mit deren groesserer Schrift rechnen und die
   Ueberschrift liefe breiter als der Absatz. */
.lp-story__part { max-width: 52ch; }
.lp-story__part + .lp-story__part { margin-top: var(--space-6); }

/* Zwischenueberschrift: klar kleiner als die Hauptueberschrift (h2), ohne
   den Trennstrich der Hauptueberschrift, dafuer mit ruhiger Zeilenhoehe –
   die Ueberschriften sind ganze Saetze und brechen auf zwei Zeilen um. */
.lp-story__subtitle {
    margin-bottom: var(--space-3);
    color: var(--color-brand);
    font-size: clamp(1.1rem, 1.9vw, 1.35rem);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    text-wrap: balance;
}

@media (max-width: 720px) {
    .lp-story__part + .lp-story__part { margin-top: var(--space-5); }
}

/* ==========================================================================
   EMPFANGSSEITE – Bildergalerie (25 Fotos) + Lightbox
   Nur Theme-Variablen, alles kantig (--radius* = 0), keine Emojis.
   ========================================================================== */

/* --- Raster --------------------------------------------------------------
   25 Bilder in 5 Spalten ergeben einen ruhigen, geschlossenen Block (5x5).
   Die Zellen haben ein festes Hochformat 3:4 – dasselbe Verhaeltnis, das 18
   der 25 Fotos ohnehin haben. Diese erscheinen dadurch vollstaendig und
   unbeschnitten; die wenigen Querformate werden mittig angeschnitten. Wichtig:
   object-fit COVER, nie fill – ein Hochformat wird also nie in ein Querformat
   gequetscht. Das ganze Bild zeigt danach die Lightbox.
   Die Lesereihenfolge bleibt bewusst links-nach-rechts (Zeitachse 01..25) –
   deshalb KEIN Spaltenlayout (columns), das die Chronologie zerreissen wuerde. */
.lp-gallery__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-gallery__cell { margin: 0; min-width: 0; }

.lp-gallery__item {
    display: block;
    overflow: hidden;
    background: var(--color-bg-alt);
    border-radius: var(--radius-img);
}
.lp-gallery__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform var(--transition), opacity var(--transition);
}
.lp-gallery__item:hover img,
.lp-gallery__item:focus-visible img { transform: scale(1.03); opacity: .92; }
.lp-gallery__item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- Lightbox ------------------------------------------------------------
   Liegt ueber der ganzen Seite. Ohne JavaScript bleibt sie per [hidden]
   verborgen – display:flex wuerde [hidden] sonst ueberstimmen. */
.lp-lightbox[hidden] { display: none; }
.lp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    /* Deckend: bei einer nur leicht durchscheinenden Flaeche blitzt das Raster
       dahinter durch und nimmt dem grossen Bild die Ruhe. */
    background: var(--color-brand-deep);
}
/* Hintergrund der Seite nicht mitscrollen, solange die Grossansicht offen ist. */
.has-lightbox, .has-lightbox body { overflow: hidden; }

.lp-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent);
}
.lp-lightbox__counter {
    margin: 0;
    font-size: .8rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

.lp-lightbox__close,
.lp-lightbox__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-primary-contrast) 28%, transparent);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary-contrast);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.lp-lightbox__close:hover,
.lp-lightbox__nav:hover {
    background: color-mix(in srgb, var(--color-primary-contrast) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-primary-contrast) 55%, transparent);
}
.lp-lightbox__close:focus-visible,
.lp-lightbox__nav:focus-visible {
    outline: 2px solid var(--color-primary-contrast);
    outline-offset: 2px;
}
.lp-lightbox__close svg,
.lp-lightbox__nav svg { width: 22px; height: 22px; }

/* Buehne: das Bild in der Mitte, links und rechts die Blaetter-Knoepfe.
   Der freie Raum drumherum gehoert zum Stage-Element und schliesst beim
   Klick – deshalb darf hier kein Kind die ganze Flaeche fuellen. */
.lp-lightbox__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex: 1;
    min-height: 0;
    padding: 0 var(--space-4) var(--space-5);
}
.lp-lightbox__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-width: 0;
    min-height: 0;
    flex: 1;
    /* stretch statt center: nur mit einer festen Hoehe greift max-height:100%
       am Bild. Ohne das laufen die Hochformate oben und unten aus dem Bild. */
    align-self: stretch;
}
.lp-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: var(--color-brand);
}

@media (max-width: 1024px) {
    .lp-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .lp-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .lp-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Auf schmalen Geraeten wuerden Bild und Knoepfe nebeneinander zu eng.
       Die Knoepfe ruecken deshalb gemeinsam unter das Bild in eine eigene
       Zeile – dafuer muss das Bild per order vor beide Knoepfe rutschen,
       sonst stuende einer darueber und einer darunter. */
    .lp-lightbox__stage {
        flex-wrap: wrap;
        align-content: center;
        padding: 0 var(--space-3) var(--space-4);
    }
    .lp-lightbox__figure { flex: 1 0 100%; order: -1; }
    /* Sicherheitsnetz fuer flache Fenster (Handy quer): ohne Deckel wuerde ein
       Hochformat die Knoepfe aus dem Bild schieben. Bei hohen Fenstern greift
       die Grenze nicht, dort ist die Breite das Mass. */
    .lp-lightbox__img { max-height: 66vh; }
    .lp-lightbox__bar { padding: var(--space-2) var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-gallery__item img { transition: none; }
    .lp-gallery__item:hover img,
    .lp-gallery__item:focus-visible img { transform: none; }
}

/* Gruppenbild ueber den Einzelportraets im Team-Abschnitt. Breit gesetzt, aber
   auf 56rem begrenzt, damit es auf grossen Bildschirmen nicht plakativ wirkt. */
.lp-team__group {
    max-width: 56rem;
    margin: 0 auto var(--space-6);
}
.lp-team__group img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.lp-team__group figcaption {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: .9rem;
    text-align: center;
}
@media (max-width: 720px) {
    .lp-team__group { margin-bottom: var(--space-5); }
    .lp-team__group figcaption { font-size: .85rem; }
}