/* ═══════════════════════════════════════════════════════════════════════════
   HOTEL CORNELIA — „Natur-Karte“ (29.09.2026, nur Cornelia)
   Ersetzt den Fenstersitz auf der Startseite. Kombination aus Vorlage 1 und 3:
   hellgraue, runde Karte (David 30.09.: erst Orange, dann Grün — beides verworfen) (Text links) + zwei versetzte Bildspalten rechts, die
   beim Scrollen gegeneinander laufen (natur.js setzt --lauf je Spalte).
   Überschrift, Rubrik und Einblenden bleiben V1 (aufzug / data-auf).
   ═══════════════════════════════════════════════════════════════════════════ */
.nk{--nk-rost:#ecebe7;--nk-rost-tief:#dcdad4;--nk-creme:#f4efe4;
  position:relative;padding:clamp(56px,9vw,144px) clamp(16px,3.3vw,64px) clamp(56px,7vw,112px)}
.nk-karte{position:relative;display:grid;grid-template-columns:45% 55%;
  height:clamp(600px,78vh,860px);border-radius:40px;overflow:hidden;
  background:var(--nk-rost);color:var(--nk-creme);isolation:isolate}
.nk-karte::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 80% at 100% 0%,rgba(200,170,110,.10),transparent 60%),radial-gradient(120% 90% at 0% 100%,rgba(0,0,0,.28),transparent 60%)}

/* Text */
.nk-text{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,4.5vw,72px) clamp(24px,2.6vw,44px) clamp(40px,4.5vw,72px) clamp(28px,5.4vw,100px)}
.nk .nk-text .rubrik,html.pro .nk .nk-text .rubrik{color:var(--messing,#c2a26b)}
html .nk .nk-text h2,html .nk .nk-text h2 span{color:var(--nk-creme)}
html .nk .nk-text h2{font-size:clamp(1.9rem,.9rem + 1.9vw,2.8rem);max-width:none;letter-spacing:.04em}
.nk-text p{max-width:30em;margin:clamp(20px,2vw,32px) 0 0;font-size:clamp(1rem,.94rem + .2vw,1.1rem);
  line-height:1.7;color:rgba(246,239,228,.9)}
.nk-fakten{list-style:none;margin:clamp(22px,2.2vw,34px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.nk-fakten li{padding:.5em 1em;border:1px solid rgba(194,162,107,.5);border-radius:999px;
  font-size:.82rem;letter-spacing:.04em;color:var(--nk-creme)}
.nk-knopf{align-self:flex-start;display:inline-flex;align-items:center;gap:.8em;margin-top:clamp(26px,2.6vw,40px);
  padding:1em 1.7em;border-radius:999px;background:var(--nk-creme);color:var(--nk-rost-tief);
  font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:background .5s cubic-bezier(.34,1.56,.64,1),color .4s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.nk-knopf i{display:block;width:18px;height:1px;background:currentColor;position:relative;transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.nk-knopf i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border:solid currentColor;border-width:1px 1px 0 0;transform:rotate(45deg)}
.nk-knopf:hover,.nk-knopf:focus-visible{background:#fff;transform:translateY(-2px)}
.nk-knopf:hover i,.nk-knopf:focus-visible i{width:28px}

/* Galerie: zwei versetzte Spalten, laufen gegeneinander */
.nk-galerie{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4.2vw,80px);
  padding-right:clamp(24px,4.2vw,80px);overflow:hidden}
.nk-spalte{display:flex;flex-direction:column;gap:clamp(24px,4.2vw,72px);
  transform:translate3d(0,var(--lauf,0px),0);will-change:transform}
.nk-spalte--a{margin-top:-15vw}
.nk-spalte--b{margin-top:-4vw}
.nk-bild{position:relative;margin:0;border-radius:30px;overflow:hidden;aspect-ratio:3/4;background:var(--nk-rost-tief)}
.nk-bild--schmal{width:76%}
.nk-spalte--a .nk-bild--schmal{margin-left:auto}
.nk-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.14);transition:transform 1.6s cubic-bezier(.22,1,.36,1),opacity 1s ease;opacity:0}
.nk-bild.sicht img,.nk.sicht .nk-bild img{transform:scale(1);opacity:1}
.nk-spalte--b .nk-bild img{transition-delay:.15s}

/* Tablet */
@media (max-width:1100px){
  .nk-karte{grid-template-columns:48% 52%}
  .nk-text{padding-left:clamp(28px,5vw,64px)}
}

/* Handy: Bilder oben als schmales, laufendes Fenster, Text darunter */
@media (max-width:820px){
  .nk{padding-top:56px}
  .nk-karte{display:flex;flex-direction:column;height:auto;border-radius:24px}
  .nk-galerie{order:-1;height:min(112vw,480px);padding:0 18px;column-gap:14px}
  .nk-spalte{gap:14px}
  .nk-spalte--a{margin-top:-30vw}
  .nk-spalte--b{margin-top:-6vw}
  .nk-bild{border-radius:16px}
  .nk-galerie::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;
    background:linear-gradient(transparent,var(--nk-rost))}
  .nk-text{padding:26px 22px 34px}
  html .nk .nk-text h2{font-size:clamp(1.6rem,6.9vw,2.3rem);letter-spacing:.04em}
}

/* ══ Hellgrau statt Grün (David 30.09.: „das Grün passt gar nicht, eher hellgrau"):
   dunkle Schrift, Messing-Rubrik, Knopf im Format der Kopf-Knöpfe ══ */
.nk-karte{color:var(--tinte)}
.nk-karte::before{background:radial-gradient(110% 80% at 100% 0%,rgba(255,255,255,.55),transparent 60%)}
html .nk .nk-text h2,html .nk .nk-text h2 span{color:var(--tinte)}
.nk .nk-text .rubrik,html.pro .nk .nk-text .rubrik{color:var(--akzent)}
.nk-text p{color:var(--text,#3a403a)}
.nk-fakten li{color:var(--tinte);border-color:rgba(24,32,24,.22)}
.nk-knopf{position:relative;overflow:hidden;isolation:isolate;border-radius:0;background:transparent;color:var(--tinte);
  border:1.5px solid var(--tinte);padding:1.05rem 2rem;font-size:.72rem;font-weight:500;letter-spacing:.2em;transition:color .45s ease}
.nk-knopf::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tinte);transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s cubic-bezier(.16,.84,.34,1)}
.nk-knopf:hover,.nk-knopf:focus-visible{background:transparent;color:#fff;transform:none}
.nk-knopf:hover::after,.nk-knopf:focus-visible::after{transform:scaleY(1)}
@media (max-width:820px){.nk-galerie::after{background:linear-gradient(transparent,var(--nk-rost))}}
/* Handy: dünner dunkler Strich unter den Fotos (David 30.09.) — der Verlauf endete
   genau an der Kante, 1 px Foto blitzte durch. Jetzt deckt er schon vorher voll
   und reicht 2 px über die Kante hinaus. */
@media (max-width:820px){
  .nk-galerie::after{bottom:-2px;height:96px;background:linear-gradient(rgba(236,235,231,0),var(--nk-rost) 78%)}
}
/* Strich blieb in der verkleinerten Handy-Vorschau trotzdem (Pixelreihe an der
   Schnittkante). Endgültig: kein aufgelegter Verlauf mehr, sondern eine MASKE —
   die Fotos selbst werden zur Kante hin durchsichtig, an der Kante ist nichts mehr. */
@media (max-width:820px){
  .nk-galerie::after{content:none}
  .nk-galerie{-webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 110px),transparent calc(100% - 6px));
    mask-image:linear-gradient(#000 0,#000 calc(100% - 110px),transparent calc(100% - 6px))}
}
/* Palette 2 (David 30.09.): warmes Sand statt kühlem Grau — passt zu Elfenbein + Espresso */
.nk{--nk-rost:#ebe2d5;--nk-rost-tief:#ddd2c2}