.markt-demo {
  --markt-ink: #0d0d0d;
  --markt-olive: #3a4730;
  --markt-gold: #c5b38b;
  --markt-paper: #fdfcfb;
  color: var(--markt-ink);
  background: var(--markt-paper);
}

.kian-menue-links a[aria-current=page]::after { content: none; }
.markt-demo :is(#erlebnis, .markt-weiter, #markt-geschichte, #marktbesuch) { scroll-margin-top: 105px; }

/* Der bestehende Markt-Hero bleibt die visuelle Grundlage der Seite. */
.markt-alt-hero { height: 100svh; min-height: 640px; color: var(--markt-paper); background: var(--markt-ink); }
.markt-alt-hero .hero-media picture,
.markt-alt-hero .hero-media img { display: block; width: 100%; height: 100%; }
.markt-alt-hero .hero-media picture {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.82) 30%, #000 58%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.82) 30%, #000 58%);
}
.markt-alt-hero .hero-media img { object-fit: cover; object-position: center; }
.markt-alt-hero h1 { max-width: min(100%, 1100px); font-size: clamp(68px, 7vw, 136px); }
.markt-alt-hero [data-hero-sub] { max-width: 36rem; }

html[data-bewegung="an"] .markt-alt-hero :is([data-hero-label], .hero-line > span, [data-hero-sub], [data-hero-cta]) {
  animation: markt-ein .8s cubic-bezier(.2,.65,.2,1) both;
}
html[data-bewegung="an"] .markt-alt-hero .hero-line:nth-child(1) > span { animation-delay: .1s; }
html[data-bewegung="an"] .markt-alt-hero .hero-line:nth-child(2) > span { animation-delay: .2s; }
html[data-bewegung="an"] .markt-alt-hero [data-hero-sub] { animation-delay: .3s; }
html[data-bewegung="an"] .markt-alt-hero [data-hero-cta] { animation-delay: .4s; }
@keyframes markt-ein {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.markt-besuch-meta { font: 600 10px/1.35 'Inter Tight', Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.markt-abschnitt { padding: clamp(76px, 7vw, 116px) 0; }
.markt-erlebnis { overflow: hidden; padding-top: clamp(64px, 5vw, 90px); background: #f3f0ea; }
.markt-erlebnis-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(52px, 8vw, 140px); align-items: center; }
.markt-erlebnis-text { max-width: 570px; }
.markt-erlebnis h2,
.markt-menschen h2,
.markt-besuch h2 { margin: 24px 0 29px; font: 400 clamp(49px, 4vw, 76px)/.98 Newsreader, Georgia, serif; letter-spacing: -.04em; text-wrap: balance; }
.markt-erlebnis h2 { max-width: 12ch; }
.markt-erlebnis h2 em,
.markt-besuch h2 em { color: #617451; font-weight: 400; }
.markt-erlebnis p,
.markt-menschen p,
.markt-besuch p { max-width: 39rem; margin: 0 0 1.1rem; color: #454b42; font: 400 clamp(16px, 1.06vw, 19px)/1.62 'Inter Tight', Inter, sans-serif; }
.markt-erlebnis-link { margin-top: 1.2rem; }

.markt-menschen { color: var(--markt-paper); background: #232a21; }
.markt-menschen-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(52px, 7vw, 135px); align-items: center; }
.markt-menschen .demo-label { color: var(--markt-gold); }
.markt-menschen h2 { max-width: 13ch; }
.markt-menschen h2 em { color: var(--markt-gold); font-weight: 400; }
.markt-menschen p { color: #e0e5dc; }
.markt-menschen .demo-link { margin-top: 1rem; color: var(--markt-paper); }
.markt-menschen-bild img { display: block; width: 100%; height: clamp(420px, 40vw, 655px); object-fit: cover; object-position: center; }
.markt-detailbilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 460px; margin: clamp(27px, 3vw, 42px) 0 12px; }
.markt-detailbilder img { display: block; width: 100%; aspect-ratio: 1.5; object-fit: cover; }

.markt-besuch { background: #e9e3d7; }
.markt-besuch-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: clamp(27px, 4vw, 60px); color: #4c5945; }
.markt-besuch-grid { display: grid; grid-template-columns: 1fr .78fr; gap: clamp(45px, 8vw, 145px); align-items: end; }
.markt-besuch h2 { max-width: 12ch; margin: 0; font-size: clamp(54px, 5vw, 89px); }
.markt-besuch p { max-width: 31rem; margin-bottom: clamp(24px, 2.6vw, 39px); }
.markt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; }

@media (max-width: 1050px) {
  .markt-erlebnis-grid,
  .markt-menschen-grid { gap: 48px; }
}

@media (max-width: 800px) {
  .markt-erlebnis-grid,
  .markt-menschen-grid,
  .markt-besuch-grid { grid-template-columns: 1fr; gap: 42px; }
  .markt-erlebnis-text { max-width: 690px; }
  .markt-menschen-bild img { height: min(66vw, 570px); }
  .markt-besuch h2 { max-width: 15ch; }
}

@media (max-width: 700px) {
  .markt-alt-hero { min-height: 620px; }
  .markt-alt-hero h1 { font-size: clamp(50px, 11vw, 70px); }
  .markt-alt-hero .hero-media img { object-position: 51% center; }
  .markt-alt-hero [data-hero-sub] { max-width: 31rem; font-size: 15px; }
  .markt-abschnitt { padding: 72px 0; }
  .markt-erlebnis-grid,
  .markt-menschen-grid,
  .markt-besuch-grid { gap: 34px; }
  .markt-erlebnis h2,
  .markt-menschen h2 { margin: 18px 0 23px; font-size: clamp(43px, 10vw, 58px); }
  .markt-erlebnis p,
  .markt-menschen p,
  .markt-besuch p { font-size: 15px; }
  .markt-menschen-bild img { height: 360px; }
  .markt-detailbilder { gap: 10px; margin-top: 29px; }
  .markt-besuch-meta { margin-bottom: 30px; font-size: 9px; }
  .markt-besuch h2 { font-size: clamp(52px, 11vw, 70px); }
  .markt-aktionen { flex-direction: column; align-items: flex-start; gap: 17px; }
  .markt-aktionen .demo-button { min-height: 50px; }
}

@media (min-width: 701px) and (max-width: 1250px) and (orientation: portrait) {
  .markt-alt-hero h1 { font-size: clamp(76px, 8vw, 110px); }
  .markt-alt-hero .hero-media img { object-position: 54% center; }
}

@media (max-width: 1250px) and (orientation: portrait) {
  .markt-alt-hero .hero-media picture {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.66) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.66) 100%);
  }
}

/* Bildfreie Abschnitte: Headlines links, kurze Texte und Verweise rechts. */
.markt-erlebnis { padding: clamp(64px, 6vw, 96px) 0; }
.markt-erlebnis-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 116px); }
.markt-erlebnis h2 { margin-bottom: 0; }
.markt-erlebnis-text { max-width: 39rem; }
.markt-erlebnis h2 em, .markt-weiter h2 em { color: #546747; }
.markt-weiter { background: var(--markt-paper); padding: clamp(64px, 6vw, 96px) 0; }
.markt-weiter-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(44px, 6vw, 100px); align-items: start; }
.markt-weiter h2 { max-width: 15ch; margin: 24px 0 0; font: 400 clamp(44px, 3.6vw, 66px)/1.04 Newsreader, Georgia, serif; letter-spacing: -.04em; text-wrap: balance; }
.markt-weiter h2 em { font-weight: 400; }
.markt-angebote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); padding-top: 39px; }
.markt-angebot { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.markt-angebot h3 { margin: 0 0 18px; font: italic 400 clamp(29px, 2.25vw, 38px)/1.12 Newsreader, Georgia, serif; letter-spacing: -.025em; }
.markt-angebot p { margin: 0 0 25px; max-width: 31ch; color: #454b42; font: 400 clamp(15px, 1.06vw, 18px)/1.65 Inter, sans-serif; }
.markt-angebot .demo-link { margin-top: auto; font-size: 11px; letter-spacing: .1em; }
@media (max-width: 1100px) {
  .markt-weiter-grid { grid-template-columns: 1fr; gap: 38px; }
  .markt-weiter h2 { max-width: none; }
  .markt-angebote { padding-top: 0; }
  .markt-angebot p { max-width: 39ch; }
}
@media (max-width: 800px) {
  .markt-erlebnis-grid { grid-template-columns: 1fr; gap: 30px; }
  .markt-erlebnis h2 { margin-bottom: 0; }
}
@media (max-width: 620px) {
  .markt-erlebnis, .markt-weiter { padding: 58px 0; }
  .markt-erlebnis-grid, .markt-weiter-grid { gap: 28px; }
  .markt-weiter h2 { font-size: clamp(40px, 10vw, 52px); margin-top: 18px; }
  .markt-angebote { grid-template-columns: 1fr; gap: 38px; }
  .markt-angebot h3 { margin-bottom: 12px; font-size: 30px; }
  .markt-angebot p { margin-bottom: 18px; font-size: 15px; }
}