/* Langederhof v6 – moderne Startseite. Bausteine nach 21st.dev:
   Scroll-Expansion-Hero, Zoom-Parallax, Hover-Expand-Galerie, Menü-Block mit Punktlinien.
   Ergänzt style.css (v5), Farben und Schriften bleiben gleich. */

/* ---------- 1 · Scroll-Expansion ---------- */
.ausdehnung { position: relative; height: 100vh; height: 100svh; }
.js .ausdehnung:not(.statisch) { height: 280vh; }
.ausdehnung__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.ausdehnung__grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.32) saturate(.8) blur(2px); transform: scale(1.08); }
.ausdehnung__rahmen { position: absolute; inset: 0; clip-path: inset(0 round 0); }
.js .ausdehnung:not(.statisch) .ausdehnung__rahmen { clip-path: inset(calc(50% - min(220px, 30vh)) calc(50% - min(170px, 24vw)) round 3px); }
.ausdehnung__rahmen img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.ausdehnung__schleier { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,14,10,.55), rgba(18,14,10,.25) 35%, rgba(18,14,10,.35) 60%, rgba(18,14,10,.9)); }

.ausdehnung__titel { position: relative; z-index: 2; display: grid; justify-items: center; font-family: var(--serif); font-size: clamp(3.2rem, 11vw, 12.5rem); line-height: .95; letter-spacing: .08em; text-transform: uppercase; text-align: center; pointer-events: none; }
.ausdehnung__titel .maske { overflow: visible; }
.ausdehnung__titel .maske:last-child > span { background: var(--messing-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ausdehnung__titel span[data-weg] { will-change: transform; }
.ausdehnung__zeile { position: absolute; z-index: 2; left: 0; right: 0; margin: 0; text-align: center; font-size: .7rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--messing-hell); }
.ausdehnung__zeile span { display: inline-block; }
.ausdehnung__zeile--oben { top: calc(50% - min(220px, 30vh) - 3rem); }
.ausdehnung__zeile--unten { bottom: calc(50% - min(220px, 30vh) - 3rem); color: var(--gedaempft); }
.ausdehnung__zeile--unten span::after { content: ""; display: block; width: 1px; height: 38px; margin: 14px auto 0; background: linear-gradient(var(--messing), transparent); animation: tropfen 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes tropfen { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.ausdehnung__ende { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px); display: grid; justify-items: center; gap: 1.4rem; padding: 0 var(--rand); }
.js .ausdehnung:not(.statisch) .ausdehnung__ende { opacity: 0; visibility: hidden; }
.ausdehnung__ende .marke { margin: 0; text-align: center; }
.buchung--frei { position: static; transform: none; left: auto; bottom: auto; width: min(100%, 980px); }
.ausdehnung__status { margin: 0; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gedaempft); display: flex; align-items: center; gap: .8em; }
.ausdehnung__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gedaempft); }
.ausdehnung__status.offen::before { background: #86c17f; box-shadow: 0 0 0 4px rgba(134,193,127,.2); }

/* ---------- 2 · Manifest, Wort für Wort ---------- */
.manifest { max-width: 1360px; margin: 0 auto; }
.manifest__text { font-family: var(--serif); font-size: clamp(1.9rem, 4.1vw, 4.4rem); line-height: 1.22; letter-spacing: .01em; margin: 0; }
.manifest__text em { font-style: normal; color: var(--messing-hell); }
[data-woerter] .wort { opacity: .16; transition: none; }
.manifest__fakten { list-style: none; margin: clamp(64px, 8vw, 120px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie); }
.manifest__fakten li { padding: 1.8rem 1.4rem 0 0; display: grid; gap: .3rem; }
.manifest__fakten li + li { padding-left: 1.4rem; border-left: 1px solid var(--linie); }
.manifest__fakten strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 2.1rem); letter-spacing: .06em; text-transform: uppercase; color: var(--creme); }
.manifest__fakten span { font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--messing); }

/* ---------- 3 · Zoom-Parallaxe ---------- */
.zoom { position: relative; }
.js .zoom:not(.statisch) { height: 300vh; }
.zoom__buehne { position: relative; height: 100vh; overflow: hidden; }
.js .zoom:not(.statisch) .zoom__buehne { position: sticky; top: 0; }
.zoom__ebene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; }
.zoom__ebene > div { position: relative; width: 25vw; height: 25vh; overflow: hidden; }
.zoom__ebene img { width: 100%; height: 100%; object-fit: cover; }
.zoom__ebene:nth-child(2) > div { top: -30vh; left: 5vw; width: 35vw; height: 30vh; }
.zoom__ebene:nth-child(3) > div { top: -10vh; left: -25vw; width: 20vw; height: 45vh; }
.zoom__ebene:nth-child(4) > div { left: 27.5vw; width: 25vw; height: 25vh; }
.zoom__ebene:nth-child(5) > div { top: 27.5vh; left: 5vw; width: 20vw; height: 25vh; }
.zoom__ebene:nth-child(6) > div { top: 27.5vh; left: -22.5vw; width: 30vw; height: 25vh; }
.zoom__ebene:nth-child(7) > div { top: 22.5vh; left: 25vw; width: 15vw; height: 15vh; }
.zoom__text { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; padding: 0 var(--rand); background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(18,14,10,.6), rgba(18,14,10,.15)); }
.js .zoom:not(.statisch) .zoom__text { opacity: 0; }
.zoom__text .titel { font-size: clamp(2.4rem, 6vw, 6.4rem); text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.zoom.statisch .zoom__ebene:not(:first-child) { display: none; }
.zoom.statisch .zoom__ebene > div { width: 100%; height: 100%; top: 0; left: 0; }

/* ---------- 4 · Aufklapp-Galerie ---------- */
.entdecken { max-width: 1520px; margin: 0 auto; }
.entdecken__kopf { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(40px, 5vw, 72px); }
.entdecken__kopf .marke { margin: 0 0 .6rem; order: 2; }
.klapp { display: flex; height: clamp(520px, 72vh, 760px); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.klapp__feld { position: relative; flex: 0 0 92px; overflow: hidden; border-left: 1px solid var(--linie); transition: flex-grow .8s var(--ease), flex-basis .8s var(--ease); }
.klapp__feld:last-child { border-right: 1px solid var(--linie); }
.klapp__feld.ist-offen { flex: 1 1 auto; }
.klapp__feld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.klapp__feld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,14,10,.92), rgba(18,14,10,.1) 60%); opacity: 0; transition: opacity .8s; }
.klapp__feld.ist-offen img { opacity: 1; transform: none; }
.klapp__feld.ist-offen::after { opacity: 1; }
.klapp__schiene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.8rem 0; transition: opacity .4s; }
.klapp__schiene b { font-weight: 500; font-size: .7rem; letter-spacing: .2em; color: var(--messing); }
.klapp__schiene i { font-style: normal; font-family: var(--serif); font-size: 1.5rem; letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.klapp__feld:not(.ist-offen):hover .klapp__schiene i { color: var(--messing-hell); }
.klapp__feld.ist-offen .klapp__schiene { opacity: 0; }
.klapp__inhalt { position: absolute; z-index: 2; left: 0; bottom: 0; width: min(560px, 100%); padding: clamp(24px, 3vw, 48px); display: grid; gap: .8rem; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .8s var(--ease); pointer-events: none; }
.klapp__feld.ist-offen .klapp__inhalt { opacity: 1; transform: none; transition-delay: .3s; }
.klapp__inhalt b { font-weight: 500; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--messing); }
.klapp__inhalt strong { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.05; letter-spacing: .06em; text-transform: uppercase; }
.klapp__inhalt > span { color: rgba(239,230,214,.82); max-width: 44ch; }
.klapp__inhalt em { font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--messing-hell); display: inline-flex; align-items: center; gap: .9em; margin-top: .4rem; }
.klapp__inhalt em::after { content: ""; width: 40px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.klapp__feld:hover .klapp__inhalt em::after { width: 64px; }

/* ---------- 5 · Laufband ---------- */
.laufband { overflow: hidden; padding: clamp(40px, 5vw, 80px) 0; border-block: 1px solid var(--linie); background: var(--grund-2); }
.laufband__spur { display: flex; align-items: center; width: max-content; animation: laufen 38s linear infinite; }
.laufband span { font-family: var(--serif); font-size: clamp(3rem, 8vw, 8.5rem); line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(201,162,94,.75); padding: 0 .35em; white-space: nowrap; transition: color .4s; }
.laufband span:hover { color: var(--messing); }
.laufband i { width: 14px; height: 14px; background: var(--messing); transform: rotate(45deg); flex: none; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ---------- 6 · Tafel mit Punktlinien ---------- */
.tafel { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(56px, 8vw, 140px); }
.tafel .titel { margin-bottom: clamp(32px, 4vw, 56px); }
.tafel__liste { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.tafel__liste li { display: flex; align-items: baseline; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid rgba(201,162,94,.14); }
.tafel__liste span { font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.6rem); letter-spacing: .08em; text-transform: uppercase; }
.tafel__liste i { flex: 1; border-bottom: 1px dotted rgba(201,162,94,.55); transform: translateY(-.3em); min-width: 24px; }
.tafel__liste time { font-weight: 500; font-size: .85rem; letter-spacing: .14em; color: var(--messing-hell); white-space: nowrap; }
.tafel__liste .ist-jetzt span { color: var(--messing-hell); }
.tafel__liste .ist-jetzt time::after { content: "jetzt"; margin-left: .8em; padding: .25em .6em; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; background: var(--messing); color: var(--grund); vertical-align: .1em; }
.tafel__liste .ist-zu span, .tafel__liste .ist-zu time { color: var(--gedaempft); }
.tafel__notiz { color: var(--gedaempft); font-size: .85rem; margin-bottom: 2rem; min-height: 1.6em; }

/* ---------- 7 · Zitat ---------- */
.zitat { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 110px); padding: var(--abstand) var(--rand); max-width: 1520px; margin: 0 auto; }
.zitat__bild { aspect-ratio: 4 / 5; overflow: hidden; }
.zitat__bild img { width: 100%; height: 115%; object-fit: cover; }
.zitat__text { margin: 0; }
.zitat__text p { font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 4.6rem); line-height: 1.15; letter-spacing: .03em; margin: 0 0 2rem; }
.zitat__text footer { font-size: .7rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--messing); }

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  .manifest__fakten { grid-template-columns: 1fr 1fr; }
  .manifest__fakten li:nth-child(3) { border-left: 0; padding-left: 0; }
  .manifest__fakten li:nth-child(n+3) { margin-top: 1.4rem; border-top: 1px solid var(--linie); }
  .klapp { flex-direction: column; height: auto; border-bottom: 0; }
  .klapp__feld { flex: 0 0 76px; border-left: 0; border-right: 0 !important; border-bottom: 1px solid var(--linie); transition: flex-basis .8s var(--ease); }
  .klapp__feld.ist-offen { flex: 0 0 min(520px, 78vh); }
  .klapp__schiene { flex-direction: row; justify-content: flex-start; gap: 1.2rem; padding: 0 4px; }
  .klapp__schiene i { writing-mode: horizontal-tb; transform: none; font-size: 1.3rem; }
  .entdecken__kopf { display: block; }
  .tafel, .zitat { grid-template-columns: 1fr; }
  .zoom__text .titel { font-size: clamp(2rem, 9vw, 3.4rem); }
  .ausdehnung__ende .buchung { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ausdehnung__titel { font-size: clamp(2.8rem, 15vw, 5rem); }
  .ausdehnung__ende { bottom: 84px; }
  .ausdehnung__ende .buchung { display: none; }
  .tafel__liste li { gap: .6rem; }
  .tafel__liste span { font-size: 1rem; letter-spacing: .05em; }
  .tafel__liste time { font-size: .75rem; letter-spacing: .08em; }
  .tafel__liste .ist-jetzt time::after { display: none; }
}

.zoom__text .marke { font-size: .8rem; color: var(--messing-hell); text-shadow: 0 2px 20px rgba(0,0,0,.8); }