/* La Majon, Lodge-Entwurf.
   Welt: die Stube bei Nacht. Warmes Lampenlicht auf Schnee, dunkles Arvenholz, Messing.
   Signatur: der Rundbogen der Stubenfenster als Bildform. */
:root {
  --nacht: #16130f;
  --nacht-2: #221d18;
  --schnee: #f4efe7;
  --papier: #ebe3d6;
  --messing: #b8905c;
  --messing-hell: #d9b788;
  --messing-dunkel: #8a6a3f;
  --text: #221e1a;
  --leise: #6b6158;
  --linie: rgba(34, 30, 26, .16);
  --linie-hell: rgba(244, 239, 231, .18);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Karla", system-ui, sans-serif;
  --rand: clamp(20px, 6vw, 96px);
  --aus: cubic-bezier(.16, 1, .3, 1);
  --bogen: 999px 999px 0 0;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 90px; scrollbar-color: var(--messing) var(--schnee); }
body { margin: 0; background: var(--schnee); color: var(--text); font: 400 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased; caret-color: var(--messing-dunkel); }
::selection { background: var(--messing-hell); color: var(--nacht); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.02; margin: 0 0 .45em; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(40px, 5.4vw, 80px); }
h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--messing-dunkel); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
.leise { color: var(--leise); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: #fff; padding: 8px 12px; }
:focus-visible { outline: 1px solid var(--messing); outline-offset: 4px; }

/* Fotos: eine gemeinsame Farbstimmung, damit Archivbilder verschiedener Jahre wie eine Serie wirken */
main img, dialog img:not(.plan) { filter: saturate(.78) contrast(1.04) sepia(.1) brightness(.98); }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border: 1px solid transparent; border-radius: 0; font: 500 15px/1 var(--sans); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background .4s var(--aus), color .4s var(--aus), border-color .4s var(--aus); }
.knopf svg { width: 17px; height: 17px; fill: currentColor; }
.knopf-amber { background: var(--messing); color: var(--nacht); }
.knopf-amber:hover { background: var(--messing-hell); }
.knopf-amber:disabled { opacity: .6; cursor: progress; }
.knopf-hell { background: transparent; color: var(--schnee); border-color: rgba(244,239,231,.45); min-height: 44px; padding: 0 22px; }
.knopf-hell:hover { background: var(--schnee); color: var(--nacht); }
.knopf-linie { background: transparent; color: var(--text); border-color: currentColor; }
.knopf-linie:hover { background: var(--text); color: var(--schnee); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.breit { width: 100%; }

/* Kopf: Navigation links, Logo in der Mitte, Anfrage rechts */
.kopf { position: fixed; inset: 0 0 auto; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 22px var(--rand); color: var(--schnee); transition: background .5s var(--aus); }
.kopf.fest { background: rgba(22, 19, 15, .96); padding-block: 10px; }
.marke img { height: 56px; width: auto; filter: brightness(0) invert(.95); }
.kopf.fest .marke img { height: 42px; }
.nav { display: flex; gap: 30px; }
.nav a { font-size: 14px; letter-spacing: .03em; text-decoration: none; opacity: .82; transition: opacity .3s; }
.nav a:hover { opacity: 1; text-decoration: underline; }
.kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
.kopf-tel { font-size: 14px; text-decoration: none; opacity: .82; white-space: nowrap; }
.kopf-tel:hover { opacity: 1; }

/* Held */
.held { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; text-align: center; color: var(--schnee); padding: 150px var(--rand) 32px; isolation: isolate; overflow: clip; }
.held-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; z-index: -2; animation: atmen 30s var(--aus) both; filter: saturate(.85) contrast(1.05) !important; }
.held::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(22,19,15,.2), rgba(22,19,15,.62)), linear-gradient(180deg, rgba(22,19,15,.5), transparent 30%, transparent 62%, rgba(22,19,15,.88)); }
@keyframes atmen { from { transform: scale(1.12); } to { transform: scale(1); } }
.held-text { align-self: center; max-width: 1000px; animation: auftauchen 1.8s var(--aus) .2s both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }
.held h1 { font-size: clamp(46px, 7.6vw, 104px); line-height: .98; margin-bottom: 28px; letter-spacing: -.025em; }
.held h1 em { color: var(--messing-hell); }
.held-unter { font-size: clamp(17px, 1.4vw, 19px); max-width: 540px; margin-inline: auto; opacity: .88; }

.buchleiste { width: min(1040px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; background: var(--schnee); color: var(--text); text-align: left; animation: auftauchen 1.6s var(--aus) .7s both; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
.buchleiste label { display: flex; flex-direction: column; gap: 3px; padding: 16px 22px; min-width: 0; border-right: 1px solid var(--linie); }
.buchleiste label span { font-size: 12px; letter-spacing: .06em; color: var(--leise); }
.buchleiste input, .buchleiste select { background: transparent; border: 0; color: var(--text); font: 400 20px var(--serif); padding: 0; width: 100%; cursor: pointer; }
.buchleiste input:focus, .buchleiste select:focus { outline: none; }
.buchleiste label:focus-within { background: #fff; }
.buchleiste .knopf { height: 100%; min-height: 72px; padding: 0 34px; }
.buchleiste-hinweis { grid-column: 1 / -1; width: min(1040px, 100%); margin: 14px 0 0; font-size: 13px; color: rgba(244,239,231,.72); letter-spacing: .02em; text-align: center; }

/* Brief */
.brief { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 8vw, 140px); padding: clamp(100px, 13vw, 190px) var(--rand) clamp(80px, 9vw, 130px); align-items: center; }
.brief-bild { margin: 0; }
.brief-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--bogen); }
.brief-text { max-width: 560px; }
.brief-text h2 { font-size: clamp(38px, 4.4vw, 64px); }
.brief-text p { font-size: 18px; color: #3e3731; }
.unterschrift { font: italic 300 34px/1.1 var(--serif) !important; margin-top: 36px; color: var(--text) !important; }
.unterschrift br { display: none; }
.unterschrift span { display: block; font: 400 14px var(--sans); font-style: normal; letter-spacing: .04em; color: var(--leise); margin-top: 6px; }
.fakten { grid-column: 1 / -1; margin: 40px 0 0; padding: 30px 0 0; border-top: 1px solid var(--linie); font: italic 300 clamp(20px, 2vw, 26px)/1.5 var(--serif); color: var(--leise); text-align: center; }
.fakten span { color: var(--messing); margin: 0 .5em; font-style: normal; }

/* Wohnen */
.wohnen { background: var(--nacht); color: var(--schnee); padding: clamp(100px, 12vw, 170px) 0 clamp(80px, 10vw, 140px); }
.kapitel { padding: 0 var(--rand); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 60px; margin-bottom: 56px; }
.wohnen h2 { max-width: 780px; margin: 0; }
.filter { display: flex; gap: 28px; }
.filter button { background: none; border: 0; border-bottom: 1px solid transparent; color: rgba(244,239,231,.6); padding: 6px 0; font: 400 15px var(--sans); letter-spacing: .03em; cursor: pointer; transition: color .3s, border-color .3s; }
.filter button:hover { color: var(--schnee); }
.filter button[aria-selected="true"] { color: var(--schnee); border-color: var(--messing); }
.karten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 25vw); gap: 28px; overflow-x: auto; padding: 0 var(--rand) 32px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: thin; scrollbar-color: var(--messing) transparent; }
.karte { scroll-snap-align: start; background: none; border: 0; color: inherit; text-align: left; font: inherit; padding: 0; cursor: pointer; display: flex; flex-direction: column; }
.karte[hidden] { display: none; }
.karte-bild { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--bogen); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--aus), filter 1s var(--aus); }
.karte:hover .karte-bild img { transform: scale(1.05); filter: saturate(.95) contrast(1.05) sepia(.04); }
.karte-text { padding: 24px 4px 0; display: flex; flex-direction: column; gap: 4px; }
.karte h3 { margin: 0 0 4px; font-size: 32px; font-weight: 300; }
.karte:hover h3 { font-style: italic; }
.karte-meta { font-size: 14px; color: rgba(244,239,231,.62); }
.karte-preis { font-size: 14px; color: var(--messing-hell); letter-spacing: .02em; }
.preis-fussnote { padding: 16px var(--rand) 0; margin: 0; font-size: 13px; color: rgba(244,239,231,.5); }

/* Band */
.band { position: relative; min-height: 92vh; display: grid; place-items: center; text-align: center; color: var(--schnee); padding: 80px var(--rand); isolation: isolate; overflow: clip; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(22,19,15,.45); }
.band blockquote { margin: 0; max-width: 980px; font: italic 300 clamp(32px, 4.6vw, 68px)/1.08 var(--serif); letter-spacing: -.02em; }

/* Jahreszeiten */
.jahreszeiten { padding: clamp(100px, 13vw, 190px) var(--rand); display: grid; gap: clamp(90px, 11vw, 170px); }
.saison { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.saison img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.saison-gedreht { grid-template-columns: 5fr 7fr; }
.saison-gedreht img { order: 2; border-radius: var(--bogen); aspect-ratio: 4 / 5; max-width: 560px; justify-self: end; }
.saison p { max-width: 480px; color: #3e3731; }
.streifen { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 16px; align-items: end; }
.streifen img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.streifen img:nth-child(2), .streifen img:nth-child(3) { aspect-ratio: 3 / 5; }

/* Genuss */
.genuss { display: grid; grid-template-columns: 1fr 1fr; background: var(--nacht); }
.genuss-feld { position: relative; min-height: 88vh; display: grid; align-content: end; color: var(--schnee); isolation: isolate; padding: clamp(32px, 5vw, 80px); overflow: clip; }
.genuss-feld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.genuss-feld::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(22,19,15,.9) 5%, rgba(22,19,15,.15) 60%); }
.genuss-text { max-width: 470px; }
.genuss h3 { font-size: clamp(32px, 3.2vw, 48px); font-weight: 300; }
.genuss p:last-child { margin: 0; opacity: .85; }

/* Concierge-Teaser */
.concierge-teaser { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 120px); align-items: center; padding: clamp(100px, 12vw, 180px) var(--rand); background: var(--papier); }
.concierge-teaser img { width: 100%; max-width: 420px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--bogen); justify-self: center; }
.concierge-teaser p { max-width: 540px; font-size: 18px; color: #3e3731; }

/* Wissen */
.wissen { padding: clamp(100px, 12vw, 180px) var(--rand); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); }
.wissen .kapitel { padding: 0; margin: 0; display: block; }
.akkordeon details { border-bottom: 1px solid var(--linie); }
.akkordeon details:first-child { border-top: 1px solid var(--linie); }
.akkordeon summary { list-style: none; cursor: pointer; padding: 26px 48px 26px 0; font: 400 26px/1.25 var(--serif); position: relative; transition: color .3s; }
.akkordeon summary:hover { color: var(--messing-dunkel); }
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::before, .akkordeon summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 1px; background: var(--messing-dunkel); transition: transform .5s var(--aus); }
.akkordeon summary::after { transform: rotate(90deg); }
.akkordeon details[open] summary::after { transform: rotate(0); }
.akkordeon details p, .akkordeon table { color: var(--leise); max-width: 660px; }
.akkordeon table { border-collapse: collapse; margin-bottom: 18px; width: 100%; font-variant-numeric: tabular-nums; }
.akkordeon td { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.akkordeon td:last-child { text-align: right; color: var(--text); }

/* Lage */
.lage { display: grid; grid-template-columns: 1fr 1fr; background: var(--nacht); color: var(--schnee); }
.lage img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.lage-text { padding: clamp(60px, 8vw, 130px) var(--rand); align-self: center; }
.lage-text p { color: rgba(244,239,231,.8); max-width: 520px; }
.lage .knopf-linie { color: var(--schnee); border-color: rgba(244,239,231,.4); }
.lage .knopf-linie:hover { background: var(--schnee); color: var(--nacht); }

/* Schluss */
.schluss { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 7vw, 120px); padding: clamp(100px, 12vw, 180px) var(--rand); }
.schluss img { width: 100%; max-width: 520px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--bogen); justify-self: center; }
.schluss p { font-size: 18px; max-width: 460px; color: #3e3731; }

/* Fuß */
.fuss { background: #0f0d0a; color: rgba(244,239,231,.72); display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 40px; padding: 80px var(--rand) 120px; font-size: 15px; }
.fuss img { filter: brightness(0) invert(.9); margin-bottom: 20px; height: 50px; width: auto; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--schnee); text-decoration: underline; }
.fuss .klein { font-size: 13px; color: rgba(244,239,231,.5); }

/* Enthüllen: Bilder öffnen sich einmal beim Hereinscrollen, Bögen wachsen von unten */
.bewegt .enthuellen img { clip-path: inset(7% 7% 7% 7%); transform: scale(1.06); transition: clip-path 1.6s var(--aus), transform 2.2s var(--aus); }
.bewegt .enthuellen.sicht img { clip-path: inset(0 0 0 0); transform: none; }
.bewegt .brief-bild.enthuellen img, .bewegt .saison-gedreht.enthuellen img, .bewegt .schluss.enthuellen img { clip-path: inset(100% 0 0 0); }
.bewegt .brief-bild.enthuellen.sicht img, .bewegt .saison-gedreht.enthuellen.sicht img, .bewegt .schluss.enthuellen.sicht img { clip-path: inset(0 0 0 0); }

/* Mobile CTA + Concierge-Knopf */
.mobil-cta { display: none; }
.concierge-fab { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: flex; align-items: center; gap: 12px; background: var(--nacht); color: var(--schnee); border: 1px solid rgba(184,144,92,.5); border-radius: 99px; padding: 8px 22px 8px 8px; font: 500 14px var(--sans); letter-spacing: .03em; cursor: pointer; box-shadow: 0 14px 34px -8px rgba(0,0,0,.45); transition: border-color .3s; }
.concierge-fab:hover { border-color: var(--messing); }
.concierge-fab svg { width: 20px; height: 20px; fill: var(--nacht); background: var(--messing); border-radius: 50%; padding: 9px; box-sizing: content-box; }
.fab-puls { position: absolute; left: 8px; top: 8px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--messing); animation: puls 3s var(--aus) infinite; opacity: 0; }
@keyframes puls { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* Dialoge */
dialog { border: 0; padding: 0; color: var(--text); background: var(--schnee); max-height: 92vh; box-shadow: 0 40px 90px -20px rgba(0,0,0,.6); }
dialog[open] { animation: dialogauf .6s var(--aus); }
@keyframes dialogauf { from { opacity: 0; transform: translateY(16px); } }
dialog::backdrop { background: rgba(15,13,10,.78); }
.schliessen { position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); background: var(--schnee); font: 300 26px/1 var(--sans); cursor: pointer; color: var(--text); }
.schliessen:hover { border-color: var(--text); }
.detail { width: min(1140px, calc(100vw - 32px)); }
.detail-inhalt { display: grid; grid-template-columns: 3fr 2fr; }
.galerie { background: var(--nacht); display: flex; flex-direction: column; }
.galerie-gross { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.galerie-leiste { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.galerie-leiste button { height: 64px; border: 1px solid transparent; padding: 0; background: none; cursor: pointer; flex: 0 0 88px; opacity: .6; transition: opacity .3s; }
.galerie-leiste button:hover, .galerie-leiste button[aria-current="true"] { opacity: 1; border-color: var(--messing); }
.galerie-leiste img { width: 100%; height: 100%; object-fit: cover; }
.detail-text { padding: 48px 40px 40px; overflow-y: auto; max-height: 92vh; }
.detail-text h2 { font-size: 48px; margin-bottom: 8px; }
.detail-text ul { padding-left: 18px; color: var(--leise); font-size: 15px; }
.detail-text li { margin-bottom: 4px; }
.detail-text li::marker { color: var(--messing); }
.detail-preise { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0 24px; font-variant-numeric: tabular-nums; }
.detail-preise th { font-weight: 500; }
.detail-preise th, .detail-preise td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.detail-preise td:last-child, .detail-preise th:last-child { text-align: right; }
.plan { margin: 10px 0 24px; background: #fff; padding: 10px; border: 1px solid var(--linie); }

.anfrage { width: min(660px, calc(100vw - 24px)); }
.anfrage form, .danke { padding: 52px clamp(22px, 5vw, 52px) 40px; }
.anfrage h2 { font-size: 46px; margin-bottom: 10px; }
fieldset { border: 0; padding: 0; margin: 0 0 26px; }
legend { font: italic 400 22px var(--serif); color: var(--messing-dunkel); margin-bottom: 12px; }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.anfrage label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--leise); margin-bottom: 14px; }
.anfrage input:not([type=checkbox]), .anfrage select, .anfrage textarea { font: 16px var(--sans); padding: 13px 14px; border: 1px solid #cdc3b4; border-radius: 0; background: #fff; color: var(--text); width: 100%; transition: border-color .3s; }
.anfrage input:focus, .anfrage select:focus, .anfrage textarea:focus { border-color: var(--messing-dunkel); outline: none; }
.anfrage ::placeholder { color: #8a8076; }
.anfrage .haken { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; }
.haken input { margin-top: 3px; accent-color: var(--messing-dunkel); width: 18px; height: 18px; flex: none; }
.honig { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.naechte { font: italic 400 18px var(--serif); color: var(--messing-dunkel); margin: 0; min-height: 1.4em; }
.fehler { color: #8a2b22; font-size: 14px; min-height: 1em; }
.danke h2 { font-size: 44px; }
.danke-wege { display: grid; gap: 12px; margin-top: 30px; }
.weg { display: block; text-align: left; font: inherit; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--linie); padding: 22px 24px; cursor: pointer; transition: border-color .3s, box-shadow .4s var(--aus); }
.weg:hover { border-color: var(--messing); box-shadow: 0 16px 30px -18px rgba(0,0,0,.3); }
.weg strong { display: block; font: 400 26px var(--serif); margin-bottom: 4px; }
.weg span { font-size: 14px; color: var(--leise); }

/* Concierge */
.concierge { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: min(420px, calc(100vw - 24px)); height: min(660px, calc(100svh - 48px)); display: flex; flex-direction: column; background: var(--schnee); box-shadow: 0 40px 90px -20px rgba(0,0,0,.55); overflow: hidden; animation: dialogauf .6s var(--aus); }
.concierge[hidden] { display: none; }
.concierge header { display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 18px; background: var(--nacht); color: var(--schnee); }
.concierge header div:nth-child(2) { flex: 1; min-width: 0; }
.concierge header strong { display: block; font: 400 22px var(--serif); }
.concierge header span { font-size: 12px; opacity: .65; }
.avatar { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--messing); color: var(--messing-hell); display: grid; place-items: center; font: italic 400 18px var(--serif); flex: none; }
.concierge .schliessen { position: static; width: 38px; height: 38px; font-size: 24px; background: transparent; color: var(--schnee); border-color: var(--linie-hell); }
.ton { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linie-hell); background: transparent; cursor: pointer; display: grid; place-items: center; }
.ton svg { width: 18px; fill: var(--schnee); }
.ton[aria-pressed="false"] { opacity: .4; }
.verlauf { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.blase { max-width: 86%; padding: 12px 16px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.blase.bot { background: #fff; border: 1px solid var(--linie); align-self: flex-start; border-radius: 2px 16px 16px 16px; }
.blase.gast { background: var(--nacht); color: var(--schnee); align-self: flex-end; border-radius: 16px 2px 16px 16px; }
.blase.denkt { color: var(--leise); font-style: italic; }
.karte-anfrage { align-self: stretch; background: #fff; border: 1px solid var(--messing); padding: 18px; font-size: 14px; }
.karte-anfrage h4 { margin: 0 0 10px; font: 400 22px var(--serif); }
.karte-anfrage dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 14px; }
.karte-anfrage dt { color: var(--leise); }
.karte-anfrage dd { margin: 0; }
.karte-anfrage .knopf { width: 100%; min-height: 46px; }
.karte-anfrage .ok { color: #3d6b3f; font-weight: 500; margin: 0; }
.vorschlaege { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 12px; scrollbar-width: none; }
.vorschlaege button { flex: none; border: 1px solid var(--linie); background: transparent; border-radius: 99px; padding: 8px 14px; font: 13px var(--sans); color: var(--text); cursor: pointer; }
.vorschlaege button:hover { border-color: var(--messing); }
.eingabe { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linie); background: #fff; }
.eingabe input { flex: 1; min-width: 0; border: 0; font: 16px var(--sans); padding: 8px; background: transparent; color: var(--text); }
.eingabe input:focus { outline: none; }
.mikro, .senden { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; flex: none; }
.mikro { background: var(--messing); }
.mikro svg, .senden svg { width: 20px; fill: var(--nacht); }
.senden { background: transparent; }
.mikro.aufnahme { background: #8a2b22; animation: aufnahme 1.4s infinite; }
.mikro.aufnahme svg { fill: #fff; }
@keyframes aufnahme { 50% { box-shadow: 0 0 0 10px rgba(138,43,34,.18); } }
.c-fuss { margin: 0; padding: 6px 14px 12px; font-size: 11px; color: var(--leise); background: #fff; text-align: center; }

/* Responsiv */
@media (max-width: 1100px) {
  .nav, .kopf-tel { display: none; }
  .kopf { grid-template-columns: 1fr auto; }
  .buchleiste { grid-template-columns: 1fr 1fr; }
  .buchleiste label:nth-child(2n) { border-right: 0; }
  .buchleiste label { border-bottom: 1px solid var(--linie); }
  .buchleiste .knopf { grid-column: 1 / -1; }
  .karten { grid-auto-columns: minmax(270px, 40vw); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .kopf { padding: 14px 16px; }
  .kopf .knopf { display: none; }
  .marke img { height: 44px; }
  .kopf.fest .marke img { height: 36px; }
  .held { padding: 120px 16px 84px; }
  .held-bild { object-position: 80% 50%; }
  .held h1 { font-size: clamp(42px, 12vw, 60px); }
  .buchleiste label { padding: 12px 14px; }
  .buchleiste input, .buchleiste select { font-size: 18px; }
  .buchleiste .knopf { min-height: 58px; }
  .buchleiste-hinweis { display: none; }
  .brief, .saison, .saison-gedreht, .concierge-teaser, .wissen, .lage, .schluss, .genuss, .fuss { grid-template-columns: 1fr; }
  .saison-gedreht img { order: 0; justify-self: stretch; }
  .streifen { grid-template-columns: 1fr 1fr; }
  .streifen img, .streifen img:nth-child(2), .streifen img:nth-child(3) { aspect-ratio: 3 / 4; }
  .genuss-feld { min-height: 540px; }
  .karten { grid-auto-columns: 78vw; gap: 18px; }
  .kapitel { margin-bottom: 36px; }
  .band { min-height: 70vh; }
  .lage img { min-height: 320px; }
  .detail-inhalt { grid-template-columns: 1fr; }
  .detail-text { max-height: none; padding: 30px 20px; }
  .detail { max-height: 94vh; overflow-y: auto; }
  .reihe { grid-template-columns: 1fr; gap: 0; }
  .mobil-cta { display: flex; transform: translateY(100px); transition: transform .5s var(--aus); position: fixed; left: 12px; right: 84px; bottom: 12px; z-index: 44; box-shadow: 0 14px 30px -8px rgba(0,0,0,.45); }
  .concierge-fab { right: 12px; bottom: 12px; padding: 5px; }
  .fab-text { display: none; }
  .fab-puls { left: 5px; top: 5px; }
  .concierge { right: 0; bottom: 0; width: 100vw; height: 100svh; }
}
body.gescrollt .mobil-cta { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}