/* ==============================
   malerei-kunstwerke.de / styles.css
   Luxury editorial: black / gold / white
   No third-party fonts: local variable fonts
   No rounded corners (sharp, modern)
   ============================== */

/* ---------- Local Fonts ---------- */
@font-face{
  font-family:"Raleway";
  src:
    url("fonts/Raleway-VariableFont_wght.woff2") format("woff2"),
    url("fonts/Raleway-VariableFont_wght.woff") format("woff");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Raleway";
  src:
    url("fonts/Raleway-Italic-VariableFont_wght.woff2") format("woff2"),
    url("fonts/Raleway-Italic-VariableFont_wght.woff") format("woff");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

@font-face{
  font-family:"Lora";
  src:
    url("fonts/Lora-VariableFont_wght.woff2") format("woff2"),
    url("fonts/Lora-VariableFont_wght.woff") format("woff");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:
    url("fonts/Lora-Italic-VariableFont_wght.woff2") format("woff2"),
    url("fonts/Lora-Italic-VariableFont_wght.woff") format("woff");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --bg: #0b0b0f;
  --bg2:#050509;
  --ink:#e9e7df;
  --ink2:#c9c6bb;
  --muted:#9b978b;

  --gold:#c8a24a;
  --gold2:#f2d27a;
  --gold3:#8a6b2d;

  --line: rgba(233,231,223,.10);
  --line2: rgba(200,162,74,.18);

  --shadow: 0 24px 64px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.55);

  --max: 1200px;
  --pad: clamp(18px, 2.4vw, 34px);

  --serif: "Lora", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --ls-wide: .18em;
  --ls-mid: .10em;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(200,162,74,.12), transparent 60%),
    radial-gradient(900px 520px at 10% 30%, rgba(242,210,122,.08), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{
  outline:2px solid rgba(242,210,122,.65);
  outline-offset:3px;
}

.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}
.skip:focus{
  left:var(--pad); top:var(--pad);
  width:auto;height:auto;
  padding:10px 14px;
  background:#101018;
  border:1px solid var(--line2);
  z-index:1000;
}

/* ---------- Typography System (umfangreich) ---------- */
.h1, .h2, .h3, .h4, h1, h2, h3, h4{
  font-family:var(--sans);
  margin:0;
  font-weight:700;
  letter-spacing:.02em;
}
.h2{ font-size: clamp(26px, 3vw, 36px); line-height:1.12; }
.h3{ font-size: clamp(18px, 2.2vw, 22px); line-height:1.2; }
.h4{ font-size: 16px; line-height:1.2; letter-spacing:.04em; text-transform:uppercase; }

.p, p{
  margin:0;
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--ink2);
}
strong{ color: var(--ink); font-weight:700; }

.kicker{
  margin:0 0 14px;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing: var(--ls-wide);
  text-transform:uppercase;
  font-size: 12px;
  color: rgba(242,210,122,.9);
  display:flex; align-items:center; gap:10px;
}
.kicker__dot{
  width:10px;height:10px;
  border:1px solid rgba(242,210,122,.65);
  background: radial-gradient(circle at 30% 30%, rgba(242,210,122,.9), rgba(200,162,74,.12));
}

.fine{
  margin-top:14px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.05em;
  color: rgba(233,231,223,.62);
}

/* quotations */
blockquote{
  margin:0;
  padding: 18px 0 18px 18px;
  border-left: 2px solid rgba(200,162,74,.45);
  color: rgba(233,231,223,.88);
  font-style: italic;
}
cite{
  display:block;
  margin-top:10px;
  font-family:var(--sans);
  font-style:normal;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(233,231,223,.60);
}

/* Lists */
ul, ol{ margin:0; padding-left: 22px; }
li{ margin: 6px 0; color: rgba(233,231,223,.78); }

/* Micro text */
.note{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.03em;
  color: rgba(233,231,223,.70);
}

/* ---------- Buttons / Links ---------- */
.btn{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:12px;
  padding: 14px 16px;
  cursor:pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  user-select:none;
  min-height:46px;
}
.btn--wide{ min-width: 260px; }
.btn:hover{ transform: translateY(-1px); }

.btn--primary{
  background:
    linear-gradient(180deg, rgba(242,210,122,.22), rgba(200,162,74,.12));
  border-color: rgba(242,210,122,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.btn--primary:hover{
  border-color: rgba(242,210,122,.85);
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
}

.btn--secondary{
  background: rgba(16,16,24,.65);
  border-color: rgba(233,231,223,.16);
}
.btn--secondary:hover{
  border-color: rgba(242,210,122,.35);
}

.btn--ghost{
  background: transparent;
  border-color: rgba(200,162,74,.20);
  color: rgba(242,210,122,.88);
}
.btn--ghost:hover{
  border-color: rgba(242,210,122,.65);
  background: rgba(242,210,122,.06);
}

.link{
  font-family:var(--sans);
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  display:inline-flex; align-items:center; gap:10px;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.link--gold{
  color: rgba(242,210,122,.92);
  border-bottom-color: rgba(242,210,122,.22);
}
.link--gold:hover{
  border-bottom-color: rgba(242,210,122,.62);
}
.link__arrow{ transform: translateY(-1px); }


/* =========================
   TOPLINE (lux micro-bar)
   ========================= */

:root{
  --mk-bg: rgba(9,10,12,.72);
  --mk-bg2: rgba(9,10,12,.55);
  --mk-line: rgba(255,255,255,.10);
  --mk-text: rgba(255,255,255,.86);
  --mk-muted: rgba(255,255,255,.62);
  --mk-gold: #b9954b; /* ggf. an Ihre Goldfarbe anpassen */
}

/* bar */
.topline{
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(180deg, var(--mk-bg), var(--mk-bg2));
  border-bottom: 1px solid var(--mk-line);
}

/* inner grid */
.topline__inner{
  max-width: 1200px;              /* ggf. an Ihr Site-Layout */
  margin: 0 auto;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

/* brand */
.topline__brand{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
}
/* Logo: exakt auf Ihre Bildhöhe – wirkt sofort “richtig” */
.topline__logo{
  display:block;
  height: 44px;      /* vorher 34px */
  width: auto;
  opacity: .98;
  transform: translateY(0); /* kein Baseline-Trick nötig */
}

/* Optional: auf großen Screens noch etwas mehr Präsenz */
@media (min-width: 1100px){
  .topline__logo{ height: 48px; }
}

.topline__tag{
  color: var(--mk-muted);
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	  opacity: .85;
}

/* nav */
.topline__nav{
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.topline__link{
  color: var(--mk-muted);
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 8px;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}

.topline__link:hover{
  color: var(--mk-text);
  background: rgba(255,255,255,.06);
}

.topline__link--strong{
  color: var(--mk-text);
}

/* CTA button (nicht Ihr globaler .btn-Style – bewusst eigen) */
.topline__cta{
  display: flex;
  justify-content: flex-end;
}

.topline__btn{
  appearance: none;
  border: 1px solid rgba(185,149,75,.55);
  background: rgba(185,149,75,.10);
  color: rgba(255,255,255,.90);
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 0;              /* wichtig: nicht rund */
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.topline__btn:hover{
  background: rgba(185,149,75,.18);
  border-color: rgba(185,149,75,.75);
}

.topline__btn:active{
  transform: translateY(1px);
}

/* optional burger (nur mobile) */
.topline__burger{
  display: none;
  justify-self: end;
  width: 46px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 0;
  cursor: pointer;
}

.topline__burger span{
  display: block;
  height: 1px;
  margin: 7px 10px;
  background: rgba(255,255,255,.75);
}

/* =========================
   Responsive
   ========================= */

/* ab ca. 980: etwas enger */
@media (max-width: 980px){
  .topline__inner{
    grid-template-columns: 1fr auto auto;
  }
  .topline__cta{
    justify-content: end;
  }
}

/* ab 820: nav ausblenden, burger zeigen */
@media (max-width: 820px){
  .topline__inner{
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .topline__nav{
    display: none;
  }
  .topline__burger{
    display: inline-flex;
    align-items: center;
  }
}

/* sehr klein: CTA kompakter */
@media (max-width: 420px){
  .topline__btn{
    padding: 10px 12px;
    letter-spacing: .10em;
  }
}





/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: clamp(620px, 86vh, 900px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom: 1px solid rgba(233,231,223,.08);
}
.hero__bg{
  position:absolute; inset:0;
}
.hero__image{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: opacity 1200ms var(--ease), transform 8000ms var(--ease);
  opacity: .88;
  filter: contrast(1.04) saturate(1.06);
}
.hero__grain{
  position:absolute; inset:-20%;
  background-image:
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity:.22;
  mix-blend-mode: overlay;
  transform: rotate(7deg);
  pointer-events:none;
}
.hero__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 50% 25%, rgba(0,0,0,.08), rgba(0,0,0,.75)),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.78));
  pointer-events:none;
}
.hero__lines{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent, rgba(242,210,122,.06), transparent),
    repeating-linear-gradient(90deg, rgba(233,231,223,.03) 0 1px, transparent 1px 140px);
  opacity:.35;
  pointer-events:none;
}

.hero__content{
  position:relative;
  width: 100%;
  max-width: var(--max);
  margin:0 auto;
  padding: clamp(26px, 4vw, 54px) var(--pad);
}
.hero__title{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.01em;
  line-height: .98;
  margin: 0 0 18px;
  font-size: clamp(38px, 5.6vw, 72px);
  text-transform: none;
}
.hero__title--sub{
  display:block;
  margin-top:10px;
  font-weight:400;
  letter-spacing: var(--ls-mid);
  text-transform:uppercase;
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(242,210,122,.86);
}
.hero__lead{
  max-width: 720px;
  margin: 0 0 22px;
  font-size: clamp(16px, 1.35vw, 19px);
  color: rgba(233,231,223,.82);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin: 0 0 28px;
}

.hero__meta{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  max-width: 980px;
}
.stamp{
  border: 1px solid rgba(200,162,74,.20);
  background: linear-gradient(180deg, rgba(16,16,24,.62), rgba(10,10,14,.72));
  padding: 12px 12px 10px;
  box-shadow: var(--shadow2);
}
.stamp__title{
  display:block;
  font-family:var(--sans);
  font-weight:800;
  letter-spacing: var(--ls-mid);
  text-transform:uppercase;
  font-size:11px;
  color: rgba(242,210,122,.92);
  margin-bottom:6px;
}
.stamp__desc{
  font-family:var(--serif);
  font-size: 14px;
  color: rgba(233,231,223,.78);
}
.hero__scroll{
  margin-top: 26px;
}
.scrollhint{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(233,231,223,.66);
}
.scrollhint__line{
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, rgba(242,210,122,.65), transparent);
  box-shadow: 0 0 24px rgba(242,210,122,.22);
}

/* ---------- Main Sections ---------- */
.main{
  width:100%;
}
.section{
  padding: clamp(50px, 6vw, 86px) 0;
}
.section__head{
  max-width: var(--max);
  margin: 0 auto 26px;
  padding: 0 var(--pad);
  display:grid;
  gap: 14px;
}
.section__lead{
  max-width: 860px;
  color: rgba(233,231,223,.72);
}
.section__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
  align-items:center;
}


/* ---------- Wall Mosaic (UNCROPPED Portrait 1080x1440) ---------- */

.wall{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);

  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;

  /* Masonry-Basis: kleine Zeilenhöhe + JS setzt grid-row-end spans */
  grid-auto-rows: 8px;
}

/* Item */
.wall__item{
  position:relative;
  display:block;
  border: 1px solid rgba(233,231,223,.10);
  background: rgba(8,8,12,.55);
  overflow:hidden;
  box-shadow: var(--shadow2);

  /* JS überschreibt grid-row-end; wenn JS aus ist, bleibt’s trotzdem sauber */
  grid-row-end: span 1;
}

/* Overlay/Look bleibt – beeinflusst nicht die Bildhöhe */
.wall__item::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,.66)),
    linear-gradient(90deg, rgba(242,210,122,.08), transparent 35%, transparent 65%, rgba(242,210,122,.06));
  opacity: .88;
  pointer-events:none;
  z-index: 2;
}

/* Bild: unbeschnitten (Höhe kommt vom Bild) */
.wall__img{
  width:100%;
  height:auto;               /* <- zentral */
  display:block;

  /* CLS-Reduktion, weil Ihre Wall-Bilder 1080x1440 sind */
  aspect-ratio: 3 / 4;

  /* nicht beschneiden */
  object-fit: contain;

  transform: scale(1.001);
  transform-origin: center;
  transition: transform .7s var(--ease), filter .7s var(--ease);
  filter: contrast(1.05) saturate(1.06);
  position:relative;
  z-index: 1;
}

/* Hover: leicht zoomen, aber Ausgang bleibt unbeschnitten */
.wall__item:hover .wall__img{
  transform: scale(1.035);
  filter: contrast(1.10) saturate(1.10);
}

/* Caption: mehrzeilig robust */
.wall__cap{
  position:absolute;
  left: 12px; right: 12px;
  bottom: 10px;
  z-index: 3;

  display:flex;
  flex-direction:column;
  gap: 6px;

  /* lesbarer auf Bild */
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.wall__capTitle{
  font-family:var(--sans);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size: 11px;
  color: rgba(242,210,122,.92);

  /* Umbrechen erlauben */
  white-space: normal;
  overflow-wrap: anywhere;
}

.wall__capSub{
  font-family:var(--serif);
  font-size: 14px;
  line-height: 1.25;
  color: rgba(233,231,223,.84);

  white-space: normal;
  overflow-wrap: anywhere;
}

/* Ihre Gewichte bleiben */
.w12{ grid-column: span 12; }
.w8{ grid-column: span 8; }
.w6{ grid-column: span 6; }
.w4{ grid-column: span 4; }
.w3{ grid-column: span 3; }

/* h2x/h3x NICHT mehr als fixe grid-row spans nutzen – das macht jetzt Masonry-JS.
   Wenn Sie die Klassen behalten wollen (z.B. fürs “Gewicht”), lassen Sie sie als Hooks stehen,
   aber ohne grid-row span:
*/
.h2x, .h3x{}

/* Responsive */
@media (max-width: 740px){
  .wall{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  .w8{ grid-column: span 6; }
  .w6{ grid-column: span 6; }
  .w4{ grid-column: span 3; }
  .w3{ grid-column: span 3; }
}

@media (max-width: 460px){
  .wall{ gap: 10px; grid-auto-rows: 7px; }
}

/* Bridge block */
.bridge{
  margin-top: 26px;
  border-top:1px solid rgba(233,231,223,.08);
  border-bottom:1px solid rgba(233,231,223,.08);
  background:
    radial-gradient(900px 400px at 10% 50%, rgba(242,210,122,.10), transparent 60%),
    linear-gradient(180deg, rgba(8,8,12,.75), rgba(8,8,12,.55));
}
.bridge__inner{
  max-width: var(--max);
  margin:0 auto;
  padding: 26px var(--pad);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:center;
}
.bridge__cta{
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:flex-start;
}

/* ---------- Filmstrip (FINAL) ---------- */
.filmstrip{
  max-width: min(1480px, calc(100vw - 2*var(--pad)));
  margin: 0 auto 18px;
  padding: 0 var(--pad);
  position: relative;
}

.filmstrip__hint{
  position:absolute;
  top:-10px;
  right: var(--pad);
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(233,231,223,.55);
}

.filmstrip__track{
  display:flex;
  gap: 14px;
  overflow:auto;
  padding: 14px 0 18px;
  scroll-snap-type:x mandatory;
  border-top: 1px solid rgba(233,231,223,.08);
  border-bottom: 1px solid rgba(233,231,223,.08);
}

/* QUADRATISCH (für 1000x1000) */
.filmstrip__thumb{
  flex: 0 0 auto;
  width: 460px;             /* Größe nach Geschmack */
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(233,231,223,.10);
  background: rgba(8,8,12,.60);
  scroll-snap-align:start;
  overflow:hidden;
  box-shadow: var(--shadow2);
  position:relative;
}

/* kein Cropping mehr durch falsches Verhältnis – jetzt ist Container 1:1 */
.filmstrip__thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .5s var(--ease);
}
.filmstrip__thumb:hover img{ transform: scale(1.07); }

.filmstrip__thumb::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  pointer-events:none;
}

.filmstrip__label{
  position:absolute;
  left: 18px;
  bottom: 10px;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(242,210,122,.86);
}

/* Autoplay: Snap aus + Scrollbar aus */
.filmstrip__track.is-autoplay{
  scroll-snap-type: none;
  scroll-behavior: auto;
  scrollbar-width: none;
}
.filmstrip__track.is-autoplay::-webkit-scrollbar{ display:none; }

@media (max-width: 980px){
  .filmstrip__thumb{ width: 360px; }
}
@media (max-width: 740px){
  .filmstrip__thumb{ width: 280px; }
}
@media (max-width: 460px){
  .filmstrip__thumb{ width: 240px; }
}

/* =======================
   ROOMS GRID (collapsed by default)
   ======================= */

.rooms-grid{
  /* Layout */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;

  /* collapsed state */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;

  /* spacing when open */
  margin-top: 14px;

  transition: max-height .45s ease, opacity .25s ease;
}

/* open state toggled by JS */
.rooms-grid.is-open{
  max-height: 5000px; /* ausreichend groß, damit es „aufklappen“ kann */
  opacity: 1;
  pointer-events: auto;
}

/* Each item as a thumb card */
.rooms__item{
  grid-column: span 4;
  padding: 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}

.rooms__item img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;     /* Thumb-Format */
  object-fit: cover;       /* nicht verzerren */
  transform: scale(1.001); /* Anti-Gaps */
}

.rooms__cap{
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  pointer-events: none;
}

/* Optional: hover polish */
.rooms__item:hover{
  border-color: rgba(212, 175, 55, .28);
}
.rooms__item:hover img{
  transform: scale(1.03);
  transition: transform .35s ease;
}

/* ---------- Cards ---------- */
.cards{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.card{
  border:1px solid rgba(233,231,223,.10);
  background:
    linear-gradient(180deg, rgba(16,16,24,.62), rgba(10,10,14,.72));
  box-shadow: var(--shadow2);
  padding: 18px 18px 16px;
}
.card__title{
  margin:0 0 10px;
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size: 13px;
  color: rgba(242,210,122,.92);
}
.card__text{
  margin:0 0 12px;
  font-size: 16px;
  color: rgba(233,231,223,.76);
}
.card__meta{
  margin:0;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(233,231,223,.60);
}

/* ---------- Final ---------- */
.section--final{
  padding-top: 26px;
}
.final{
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--pad);
  border-top:1px solid rgba(233,231,223,.08);
  border-bottom:1px solid rgba(233,231,223,.08);
  background:
    radial-gradient(900px 380px at 80% 40%, rgba(242,210,122,.12), transparent 60%),
    linear-gradient(180deg, rgba(8,8,12,.78), rgba(8,8,12,.55));
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items:center;
}
.final__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 16px;
}
.final__mark{
  display:flex;
  justify-content:flex-end;
}
.monogram{
  width: 220px;
  border:1px solid rgba(242,210,122,.25);
  padding: 18px 14px;
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow2);
}
.monogram__txt{
  display:block;
  text-align:center;
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.35em;
  text-transform:uppercase;
  color: rgba(242,210,122,.85);
  font-size: 26px;
  margin: 8px 0;
}
.monogram__line{
  display:block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,210,122,.55), transparent);
}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid rgba(233,231,223,.08);
  background: rgba(6,6,10,.72);
}
.footer__inner{
  max-width: var(--max);
  margin:0 auto;
  padding: 16px var(--pad);
  display:flex;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
  align-items:center;
}
.footer__brand{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(233,231,223,.80);
}
.footer__sep{ opacity:.35; margin:0 8px; }
.footer__link{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(242,210,122,.82);
}
.footer__link--muted{
  color: rgba(233,231,223,.58);
}
.footer__link:hover{ color: rgba(242,210,122,.95); }

/* ---------- Modal ---------- */
.modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
}
.modal.is-open{ display:block; }
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
}
.modal__panel{
  position:relative;
  max-width: min(1020px, calc(100% - 2*var(--pad)));
  margin: 5vh auto;
  border: 1px solid rgba(242,210,122,.20);
  background: linear-gradient(180deg, rgba(10,10,14,.96), rgba(6,6,10,.94));
  box-shadow: var(--shadow);
}
.modal__close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 44px; height: 44px;
  border:1px solid rgba(233,231,223,.14);
  background: rgba(0,0,0,.25);
  color: rgba(242,210,122,.88);
  font-size: 26px;
  cursor:pointer;
}
.modal__figure{
  margin:0;
}
.modal__figure img{
  width:100%;
  max-height: 68vh;
  object-fit: contain;
  background: rgba(0,0,0,.20);
}
.modal__cap{
  padding: 14px 16px 10px;
  border-top: 1px solid rgba(233,231,223,.08);
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.modal__title{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: 12px;
  color: rgba(242,210,122,.92);
}
.modal__sub{
  font-family:var(--serif);
  color: rgba(233,231,223,.78);
}
.modal__actions{
  padding: 12px 16px 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* ---------- Continue overlay ---------- */
.continue{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
}
.continue.is-open{ display:flex; }
.continue__panel{
  width: min(520px, calc(100% - 2*var(--pad)));
  border: 1px solid rgba(242,210,122,.22);
  background:
    radial-gradient(700px 360px at 20% 20%, rgba(242,210,122,.12), transparent 60%),
    linear-gradient(180deg, rgba(10,10,14,.96), rgba(6,6,10,.94));
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
}
.continue__kicker{
  margin:0 0 6px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(233,231,223,.62);
}
.continue__title{
  margin:0 0 10px;
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.02em;
  font-size:18px;
  color: rgba(233,231,223,.92);
}
.continue__text{
  margin:0 0 14px;
  color: rgba(233,231,223,.78);
}
.continue__actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.continue__fine{
  margin:0;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(233,231,223,.52);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero__meta{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bridge__inner{ grid-template-columns: 1fr; }
  .final{ grid-template-columns: 1fr; }
  .final__mark{ justify-content:flex-start; }
  .cards{ grid-template-columns: 1fr; }
  .rooms__item{ grid-column: span 4; }
}

@media (max-width: 740px){
  .topline__nav{ display:none; }
  .topline__brand{ min-width: auto; }
  .wall{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  .w8{ grid-column: span 6; }
  .w6{ grid-column: span 6; }
  .w4{ grid-column: span 3; }
  .w3{ grid-column: span 3; }
  .rooms__item{ grid-column: span 6; }
  .filmstrip__thumb{ width: 180px; height: 120px; }
}

@media (max-width: 460px){
  .hero__actions .btn{ width:100%; justify-content:center; }
  .btn--wide{ width:100%; }
  .wall{ gap: 8px; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn, .wall__img, .filmstrip__thumb img, .hero__image{ transition:none !important; }
}
/* =========================
   FOOTER (malerei-kunstwerke.de) – clean, ohne Rahmen/Box-Lines
   Wichtig: NICHT font-family global auf i/Icons überschreiben
========================= */

.mkf-footer{
  padding: clamp(28px, 4vw, 56px) 0;
  background: transparent;
}

.mkf-inner{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.mkf-top{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
  padding-bottom: clamp(18px, 2.6vw, 28px);
}

/* Typo: bewusst klein, “luxury UI” */
.mkf-footer .mkf-eyebrow{
  margin: 0 0 10px 0;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: rgba(201, 164, 92, .95); /* gold */
}

.mkf-footer .mkf-eyebrow--sm{ margin-bottom: 12px; }

.mkf-footer .mkf-line{
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.80);
}

.mkf-footer .mkf-meta{
  margin: 10px 0 0 0;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

.mkf-footer .mkf-sep{
  padding: 0 10px;
  color: rgba(255,255,255,.35);
}

.mkf-footer .mkf-link{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,164,92,.28);
  padding-bottom: 2px;
}

.mkf-footer .mkf-link:hover{
  color: rgba(255,255,255,.95);
  border-bottom-color: rgba(201,164,92,.55);
}

.mkf-footer .mkf-link--muted{
  border-bottom-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.72);
}

.mkf-footer .mkf-link--gold{
  border-bottom-color: rgba(201,164,92,.55);
}

/* ROW 2: 3 Gruppen, ohne Box-Rahmen */
.mkf-iconsRow{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(14px, 2.8vw, 40px);
  align-items: start;
  padding-top: clamp(10px, 1.8vw, 16px);
}

/* Icon-Grid: clean, keine Umrandungen */
.mkf-icons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.mkf-ico{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* keine Rahmen/Lines/Boxen */
  border: 0;
  outline: 0;
  background: transparent;

  color: rgba(255,255,255,.78);
  text-decoration: none;

  /* subtiler “luxury hover” ohne Rahmen */
  transition: transform .15s ease, color .15s ease, filter .15s ease;
}

.mkf-ico:hover{
  transform: translateY(-1px);
  color: rgba(201,164,92,.95);
  filter: drop-shadow(0 6px 18px rgba(201,164,92,.18));
}

.mkf-ico--gold{ color: rgba(201,164,92,.92); }
.mkf-ico--gold:hover{ color: rgba(255,255,255,.92); }

/* EXTREM WICHTIG:
   KEIN globales font-family auf Icons setzen -> sonst werden FA-Glyphs zu Kästchen.
   (Wenn Sie irgendwo .footer * { font-family: ... !important } haben: entfernen!)
*/
.mkf-footer i{
  font-size: 15px;
  line-height: 1;
}

/* Bottom line */
.mkf-bottom{
  margin-top: clamp(18px, 3vw, 28px);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08); /* nur diese eine Linie, sehr subtil */
}

.mkf-bottomline{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
}
/* pro Icon-Gruppe: auf 1 Zeile zwingen */
.mkf-icons{
  display: flex;
  flex-wrap: nowrap;          /* <- das ist der Schlüssel */
  gap: 10px;
  overflow-x: auto;           /* falls mal zu viele Icons: kein Umbruch */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox: verstecken */
}
.mkf-icons::-webkit-scrollbar{ display: none; } /* Chrome/Safari: verstecken */


/* Responsive */
@media (max-width: 980px){
  .mkf-top{
    grid-template-columns: 1fr;
  }
  .mkf-iconsRow{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
.mk-legal{
  padding: clamp(44px, 6vw, 84px) 0;
}

.mk-legal__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.mk-legal__head{
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line2);
  background: rgba(5,5,9,.55);
  box-shadow: var(--shadow2);
  margin: 0 0 14px;
}

.mk-legal__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 980px){
  .mk-legal__grid{ grid-template-columns: 1fr; }
}

.mk-legal__card{
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  background: rgba(5,5,9,.45);
  box-shadow: var(--shadow2);
}

.mk-legal__address{
  margin: 14px 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-style: normal;
  color: var(--ink2);
  line-height: 1.65;
}

.mk-legal__dl{
  margin: 0;
  padding: 0;
}

.mk-legal__row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.mk-legal__row:first-child{
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 560px){
  .mk-legal__row{ grid-template-columns: 1fr; gap: 6px; }
}

.mk-legal__dl dt{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}

.mk-legal__dl dd{
  margin: 0;
  color: var(--ink2);
}

.mk-legal__link{
  color: var(--gold2);
  text-decoration: none;
  border-bottom: 1px solid rgba(242,210,122,.28);
  padding-bottom: 2px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.mk-legal__link:hover{
  color: var(--gold2);
  border-bottom-color: rgba(242,210,122,.70);
}

.mk-legal__block{
  margin-top: 12px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  background: rgba(5,5,9,.45);
  box-shadow: var(--shadow2);
}

.mk-legal__mt{
  margin-top: 16px;
}

.mk-legal .note{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}