/* =========================================================
   STINGL STEINE — Editorial Redesign
   Eigenständig, ohne Frameworks / externe Fonts.
   Ziel: ruhig, hochwertig, modern, handwerklich.
   ========================================================= */

:root {
  --fels: #252b2e;
  --fels-2: #343c40;
  --schiefer: #596166;
  --nebel: #8c9498;
  --kies: #ddd8cf;
  --marmor: #eeeae3;
  --papier: #f8f6f1;
  --weiss: #fffdf9;
  --himmel: #376b8d;
  --himmel-tief: #28516c;
  --himmel-hell: #89acc3;
  --zunft: #6b4238;

  --sans: Aptos, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --max: 92rem;
  --text: 68ch;
  --bund: clamp(1.25rem, 4vw, 4.75rem);
  --header: 5.5rem;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --kurz: 240ms;
  --mittel: 620ms;
}

/* ---------- Reset / Grundgerüst ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--header) + 1.5rem); }
body {
  margin: 0;
  color: var(--fels);
  background: var(--papier);
  font-family: var(--sans);
  font-size: clamp(1rem, .25vw + .95rem, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-offen { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--himmel-tief); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--himmel); color: #fff; }

:focus-visible {
  outline: 3px solid var(--himmel-hell);
  outline-offset: 4px;
  border-radius: .15rem;
}

.skip {
  position: fixed;
  left: 1rem;
  top: -8rem;
  z-index: 5000;
  padding: .8rem 1rem;
  background: var(--fels);
  color: #fff;
  text-decoration: none;
  transition: top var(--kurz) ease;
}
.skip:focus { top: 1rem; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  margin: 0;
  color: inherit;
  font-family: var(--sans);
  font-weight: 720;
  letter-spacing: -.055em;
  line-height: .96;
  text-wrap: balance;
}
h1 { font-size: clamp(4rem, 9.4vw, 10.25rem); }
h2 { font-size: clamp(3.25rem, 6.7vw, 7.25rem); }
h3 { font-size: clamp(1.5rem, 2.15vw, 2.35rem); letter-spacing: -.038em; line-height: 1.04; }
p { max-width: var(--text); margin: 0 0 1.1em; }
.lead {
  max-width: 48ch;
  margin-top: 1.25rem;
  color: var(--schiefer);
  font-size: clamp(1.12rem, 1.25vw, 1.42rem);
  line-height: 1.52;
}
.dach {
  margin: 0 0 1.2rem;
  color: var(--himmel-tief);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .17em;
  line-height: 1.2;
  text-transform: uppercase;
}
.dach--hell { color: var(--himmel-hell); }

/* ---------- Standardlayout ---------- */
.huelle {
  width: min(100%, var(--max));
  margin-inline: auto;
  padding-inline: var(--bund);
}
.band {
  position: relative;
  padding-block: clamp(5.5rem, 9.5vw, 10rem);
}
.band--stein { background: var(--marmor); }
.band--fels { background: var(--fels); color: #d9d6cf; }
.band--fels h2, .band--fels h3 { color: var(--weiss); }
.band--fels .lead { color: #b7bec1; }
.band--fels a { color: #bed5e4; }

/* ---------- Header ---------- */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  color: var(--fels);
  background: rgba(248, 246, 241, .86);
  border-bottom: 1px solid rgba(37, 43, 46, .08);
  backdrop-filter: blur(18px) saturate(1.2);
  transition: color var(--kurz) ease, background var(--kurz) ease, border-color var(--kurz) ease, box-shadow var(--kurz) ease;
}
.kopf.ist-gescrollt {
  box-shadow: 0 .75rem 2.5rem rgba(37, 43, 46, .08);
}
.kopf__innen {
  position: relative;
  z-index: 1003;
  width: min(100%, 104rem);
  min-height: var(--header);
  margin-inline: auto;
  padding-inline: var(--bund);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.marke {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}
.marke__name {
  display: block;
  color: var(--zunft);
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  font-weight: 820;
  letter-spacing: -.035em;
  line-height: .95;
  transition: color var(--kurz) ease;
}
.marke__ort {
  display: block;
  margin-top: .32rem;
  color: var(--schiefer);
  font-size: .62rem;
  font-weight: 680;
  letter-spacing: .105em;
  text-transform: uppercase;
  transition: color var(--kurz) ease;
}
.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.ruf {
  min-height: 2.8rem;
  padding: .68rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(37, 43, 46, .16);
  border-radius: 999px;
  color: var(--fels) !important;
  background: rgba(255,255,255,.28);
  font-size: .88rem;
  font-weight: 690;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--kurz) ease, background var(--kurz) ease, color var(--kurz) ease, border-color var(--kurz) ease;
}
.ruf svg { width: .95rem; height: .95rem; }
.ruf:hover { transform: translateY(-1px); background: #fff; border-color: rgba(37,43,46,.32); }

.menue-knopf {
  min-height: 2.8rem;
  padding: .68rem .92rem .68rem 1.02rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--fels);
  border-radius: 999px;
  color: #fff;
  background: var(--fels);
  cursor: pointer;
  transition: transform var(--kurz) ease, background var(--kurz) ease, border-color var(--kurz) ease, color var(--kurz) ease;
}
.menue-knopf:hover { transform: translateY(-1px); background: var(--himmel-tief); border-color: var(--himmel-tief); }
.menue-knopf__text { font-size: .84rem; font-weight: 760; letter-spacing: .01em; }
.menue-knopf__icon { position: relative; width: 1.05rem; height: .82rem; flex: none; }
.menue-knopf__icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition: top 360ms var(--ease), transform 360ms var(--ease);
}
.menue-knopf__icon i:first-child { top: .17rem; }
.menue-knopf__icon i:last-child { top: .58rem; }
.menue-knopf[aria-expanded="true"] .menue-knopf__icon i:first-child { top: .4rem; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__icon i:last-child { top: .4rem; transform: rotate(-45deg); }

/* ---------- Fullscreen Navigation ---------- */
.nav {
  position: fixed;
  inset: 0;
  z-index: 1001;
  padding: calc(var(--header) + clamp(2rem, 4.5vw, 5rem)) var(--bund) clamp(2rem, 4vw, 4rem);
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(55, 107, 141, .18), transparent 33rem),
    linear-gradient(135deg, #20272a 0%, #272f33 58%, #202629 100%);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  transition: clip-path 780ms var(--ease), visibility 0s linear 780ms;
}
.nav::before {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .13;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.nav.offen {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 780ms var(--ease), visibility 0s linear 0s;
}
.nav__innen {
  position: relative;
  z-index: 1;
  width: min(100%, 100rem);
  min-height: calc(100svh - var(--header) - clamp(4rem, 8.5vw, 9rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .55fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}
.nav__links { display: grid; align-self: center; }
.nav__links a {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem minmax(0,1fr) auto;
  align-items: baseline;
  gap: .9rem;
  padding: .2rem 0 .26rem;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.13);
  font-size: clamp(2.85rem, 5.75vw, 6.65rem);
  font-weight: 710;
  letter-spacing: -.062em;
  line-height: .98;
  text-decoration: none;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: color 220ms ease, transform 650ms var(--ease), opacity 480ms ease;
}
.nav__links a::after {
  content: "↗";
  align-self: center;
  font-size: .22em;
  font-weight: 400;
  opacity: 0;
  transform: translate(-.5rem,.5rem);
  transition: opacity var(--kurz) ease, transform var(--kurz) ease;
}
.nav__links a > span {
  min-width: 1.75rem;
  color: #93a0a6;
  font-size: .66rem;
  font-weight: 760;
  letter-spacing: .12em;
}
.nav__links a:hover { color: #a7cae0 !important; transform: translateX(.45rem); }
.nav__links a:hover::after { opacity: .8; transform: none; }
.nav.offen .nav__links a { opacity: 1; transform: none; }
.nav.offen .nav__links a:nth-child(1) { transition-delay: 130ms; }
.nav.offen .nav__links a:nth-child(2) { transition-delay: 190ms; }
.nav.offen .nav__links a:nth-child(3) { transition-delay: 250ms; }
.nav.offen .nav__links a:nth-child(4) { transition-delay: 310ms; }
.nav.offen .nav__links a:nth-child(5) { transition-delay: 370ms; }

.nav__meta {
  padding-bottom: .5rem;
  color: #b6bec2;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 520ms ease 300ms, transform 720ms var(--ease) 300ms;
}
.nav.offen .nav__meta { opacity: 1; transform: none; }
.nav__kicker {
  margin-bottom: 1rem;
  color: #7f8b90;
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav__schnell {
  margin-bottom: 2.5rem;
  display: grid;
  gap: .25rem;
}
.nav__schnell a,
.nav__meta > p a,
.nav__recht a,
.nav__cta {
  color: #fff;
  text-decoration: none;
}
.nav__schnell a {
  width: fit-content;
  padding-block: .15rem;
  font-size: 1.02rem;
  border-bottom: 1px solid transparent;
}
.nav__schnell a:hover { border-bottom-color: currentColor; }
.nav__meta > p { margin-bottom: 1.35rem; }
.nav__cta {
  margin-top: 1.75rem;
  padding: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  font-weight: 700;
}
.nav__cta span { font-size: 1.2rem; }
.nav__recht { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; }
.nav__recht a { color: #8e999e; font-size: .78rem; }

body.menu-offen .kopf {
  color: #fff;
  background: transparent;
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: none;
  backdrop-filter: none;
}
body.menu-offen .marke__name,
body.menu-offen .marke__ort { color: #fff; }
body.menu-offen .ruf { color: #fff !important; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06); }
body.menu-offen .menue-knopf { color: var(--fels); background: #fff; border-color: #fff; }
body.menu-offen .menue-knopf:hover { background: #f3f3f0; border-color: #f3f3f0; }

/* ---------- Buttons ---------- */
.knopf {
  min-height: 3rem;
  padding: .82rem 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid var(--fels);
  border-radius: 999px;
  color: #fff;
  background: var(--fels);
  font-size: .92rem;
  font-weight: 710;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--kurz) ease, background var(--kurz) ease, border-color var(--kurz) ease, color var(--kurz) ease;
}
.knopf:hover { transform: translateY(-2px); background: var(--himmel-tief); border-color: var(--himmel-tief); }
.knopf--leer { color: var(--fels); background: transparent; border-color: rgba(37,43,46,.22); }
.knopf--leer:hover { color: var(--fels); background: rgba(255,255,255,.7); border-color: var(--fels); }
.band--fels .knopf--leer { color: #fff; border-color: rgba(255,255,255,.3); }
.band--fels .knopf--leer:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }

/* ---------- Hero ---------- */
.auftakt {
  position: relative;
  min-height: 100svh;
  padding-top: var(--header);
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(26rem, .84fr);
  overflow: hidden;
  background: var(--papier);
}
.auftakt::before {
  content: "01 / STINGL";
  position: absolute;
  left: var(--bund);
  bottom: 1.35rem;
  z-index: 3;
  color: var(--nebel);
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
}
.auftakt__text {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 66rem;
  margin-left: auto;
  padding: clamp(5rem, 9vw, 9.5rem) clamp(2rem, 4.2vw, 5rem) clamp(4.2rem, 8vw, 7.5rem) var(--bund);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auftakt h1 {
  max-width: 7.7ch;
  margin-bottom: .28em;
  font-size: clamp(4.7rem, 8.55vw, 9.75rem);
  line-height: .84;
  letter-spacing: -.075em;
}
.auftakt__satz {
  max-width: 35ch;
  color: var(--schiefer);
  font-size: clamp(1.08rem, 1.25vw, 1.34rem);
  line-height: 1.55;
}
.auftakt__tun { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.auftakt__fuss {
  max-width: 50rem;
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  border-top: 1px solid var(--kies);
  color: var(--schiefer);
  font-size: .82rem;
}
.auftakt__bild {
  position: relative;
  min-height: calc(100svh - var(--header));
  overflow: hidden;
  background: #cac4ba;
}
.auftakt__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(37,43,46,.11), transparent 30%);
}
.auftakt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  transform: scale(1.035) translate3d(0,var(--parallax,0px),0);
}
.js .auftakt__bild { clip-path: inset(0 0 100% 0); }
.js .auftakt__bild.ist-da {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1400ms var(--ease) 120ms;
}
.js .auf-zeile { opacity: 0; transform: translateY(1.1rem); }
.js .auftakt__text.ist-da .auf-zeile {
  opacity: 1;
  transform: none;
  transition: opacity 720ms ease var(--verzug, 0ms), transform 940ms var(--ease) var(--verzug, 0ms);
}

/* ---------- Marquee ---------- */
.laufband {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--kies);
  border-bottom: 1px solid var(--kies);
  background: var(--weiss);
  padding: .95rem 0;
}
.laufband__spur {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  animation: stingl-laufband 32s linear infinite;
}
.laufband span {
  font-size: clamp(1rem, 1.5vw, 1.32rem);
  font-weight: 710;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.laufband b { color: var(--himmel); font-size: .72rem; font-weight: 400; }
@keyframes stingl-laufband { to { transform: translateX(-50%); } }

/* ---------- Große Inschrift ---------- */
.inschrift {
  position: relative;
  overflow: hidden;
  color: #dfe2df;
  background:
    radial-gradient(circle at 12% 20%, rgba(55,107,141,.14), transparent 35rem),
    #242b2f;
}
.inschrift::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.45'/%3E%3C/svg%3E");
}
.inschrift__innen {
  position: relative;
  z-index: 1;
  width: min(100%, var(--max));
  margin-inline: auto;
  padding-inline: var(--bund);
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(20rem, .84fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}
.inschrift__spruch {
  max-width: 11ch;
  margin: 0 0 1.4rem;
  color: var(--weiss);
  font-family: var(--serif);
  font-size: clamp(3.6rem, 6.2vw, 7.4rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .96;
}
.inschrift__quelle { max-width: 41ch; color: #aeb7bb; }
.inschrift__bild { margin: 0; overflow: hidden; }
.inschrift__bild img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transform: scale(1.045) translate3d(0,var(--parallax,0px),0);
}
.inschrift__bild figcaption {
  margin-top: .75rem;
  color: #8e989d;
  font-size: .77rem;
  line-height: 1.45;
}
.inschrift--zwei {
  color: var(--fels);
  background: linear-gradient(135deg,#ece7de,#f6f2ea);
}
.inschrift--zwei .inschrift__innen { grid-template-columns: minmax(19rem,.82fr) minmax(0,1.18fr); }
.inschrift--zwei .inschrift__spruch { color: #4f3731; }
.inschrift--zwei .inschrift__quelle,
.inschrift--zwei .inschrift__bild figcaption { color: var(--schiefer); }

/* ---------- Abschnittsköpfe / Nummern ---------- */
#grabmal .huelle,
#naturstein .huelle,
#ablauf .huelle,
#arbeiten .huelle,
#betrieb .huelle,
#fragen .huelle,
#kontakt .huelle { position: relative; }
#grabmal .huelle::before,
#naturstein .huelle::before,
#ablauf .huelle::before,
#arbeiten .huelle::before,
#betrieb .huelle::before,
#fragen .huelle::before {
  position: absolute;
  right: var(--bund);
  top: .15rem;
  color: rgba(37,43,46,.18);
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 760;
  letter-spacing: -.07em;
  line-height: .8;
  pointer-events: none;
}
#grabmal .huelle::before { content: "01"; }
#naturstein .huelle::before { content: "02"; }
#ablauf .huelle::before { content: "04"; }
#arbeiten .huelle::before { content: "05"; }
#betrieb .huelle::before { content: "06"; }
#fragen .huelle::before { content: "07"; }
#grabmal h2, #naturstein h2, #ablauf h2, #arbeiten h2, #betrieb h2, #fragen h2 { max-width: 12ch; }

/* ---------- Grab / Leistungsreihen ---------- */
.reihen {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--kies);
}
.reihe {
  position: relative;
  padding: clamp(2rem, 3.4vw, 3.3rem) 0;
  display: grid;
  grid-template-columns: minmax(15rem, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 6vw, 7rem);
  border-bottom: 1px solid var(--kies);
  transition: padding-left 420ms var(--ease), background 420ms ease;
}
.reihe::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background: var(--himmel);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms var(--ease);
}
.reihe:hover { padding-left: 1.1rem; background: rgba(255,255,255,.28); }
.reihe:hover::before { transform: scaleY(1); }
.reihe h3 { max-width: 13ch; }
.reihe p { max-width: 46ch; margin-bottom: .9rem; color: var(--schiefer); }
.reihe__stich {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
}
.reihe__stich li {
  padding: .34rem .7rem;
  border: 1px solid rgba(37,43,46,.11);
  border-radius: 999px;
  color: var(--schiefer);
  background: rgba(255,255,255,.46);
  font-size: .78rem;
}

/* ---------- Naturstein-Kacheln ---------- */
.kacheln {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.16);
  border-left: 1px solid rgba(255,255,255,.16);
}
.kachel {
  position: relative;
  min-height: 18.5rem;
  padding: clamp(1.55rem, 2.5vw, 2.65rem);
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.015);
  transition: background 420ms ease, transform 420ms var(--ease);
}
.kachel::after {
  content: "↗";
  position: absolute;
  right: 1.3rem;
  bottom: .9rem;
  color: var(--himmel-hell);
  font-size: 1.25rem;
  opacity: .18;
  transition: opacity var(--kurz) ease, transform var(--kurz) ease;
}
.kachel:hover { background: rgba(255,255,255,.045); transform: translateY(-3px); }
.kachel:hover::after { opacity: .9; transform: translate(.12rem,-.12rem); }
.kachel h3 { max-width: 11ch; color: var(--weiss); }
.kachel p { margin-top: .9rem; color: #aeb6ba; font-size: .94rem; }

/* ---------- Kranservice ---------- */
.kran {
  min-height: 42rem;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: stretch;
  background: var(--weiss);
}
.kran__bild { position: relative; overflow: hidden; background: #cbc6bd; }
.kran__bild img {
  width: 100%;
  height: 100%;
  min-height: 42rem;
  object-fit: cover;
  transform: scale(1.045) translate3d(0,var(--parallax,0px),0);
}
.kran__text {
  padding: clamp(4.5rem, 8vw, 8rem) var(--bund);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kran__text h2 { max-width: 8ch; }
.kran__text .lead { margin-bottom: .75rem; }
.liste { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.liste li {
  position: relative;
  padding: .62rem 0 .62rem 1.4rem;
  border-bottom: 1px solid var(--kies);
}
.liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--himmel);
}

/* ---------- Ablauf ---------- */
.ablauf { margin-top: clamp(3rem, 6vw, 5rem); counter-reset: schritt; }
.schritt {
  counter-increment: schritt;
  padding: clamp(1.7rem, 2.6vw, 2.6rem) 0;
  display: grid;
  grid-template-columns: minmax(5.5rem,.25fr) minmax(13rem,.65fr) minmax(0,1.1fr);
  gap: clamp(1.3rem, 4vw, 4rem);
  align-items: start;
  border-top: 1px solid var(--kies);
}
.schritt:last-child { border-bottom: 1px solid var(--kies); }
.schritt::before {
  content: "0" counter(schritt);
  color: var(--himmel-tief);
  font-size: clamp(2.8rem, 4vw, 4.4rem);
  font-weight: 760;
  letter-spacing: -.065em;
  line-height: .8;
}
.schritt h3 { max-width: 13ch; }
.schritt p { margin: 0; color: var(--schiefer); max-width: 44ch; }

/* ---------- Steinmuster ---------- */
.steine {
  margin-top: clamp(3rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.stein__probe {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid rgba(37,43,46,.13);
  box-shadow: inset 0 1px 12px rgba(255,255,255,.35);
}
.stein__probe::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E");
}
.stein h3 { margin-top: .8rem; font-size: 1.02rem; letter-spacing: -.02em; }
.stein p { margin: .25rem 0 0; color: var(--schiefer); font-size: .84rem; }

/* ---------- Galerie ---------- */
.galerie {
  margin-top: clamp(2.7rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(.7rem, 1.25vw, 1.1rem);
}
.galerie > figure { margin: 0; min-width: 0; }
.galerie button {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #d8d2c8;
  text-align: left;
  cursor: zoom-in;
}
.galerie img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 900ms var(--ease), filter 500ms ease;
}
.galerie button:hover img { transform: scale(1.06); filter: saturate(1.04) contrast(1.02); }
.galerie figcaption {
  position: absolute;
  inset: auto .7rem .7rem;
  padding: .5rem .65rem;
  color: #fff;
  background: rgba(24,29,32,.82);
  backdrop-filter: blur(8px);
  font-size: .72rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity var(--kurz) ease, transform var(--kurz) ease;
}
.galerie button:hover figcaption,
.galerie button:focus-visible figcaption { opacity: 1; transform: none; }
#arbeiten .galerie > figure:nth-child(1),
#arbeiten .galerie > figure:nth-child(6) { grid-column: span 2; }
#arbeiten .galerie > figure:nth-child(1) img,
#arbeiten .galerie > figure:nth-child(6) img { aspect-ratio: 2/1; }

/* Lightbox */
.kasten {
  position: fixed;
  inset: 0;
  z-index: 3000;
  padding: clamp(1rem, 3vw, 2.5rem);
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(20,24,26,.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms ease;
}
.kasten.offen { opacity: 1; visibility: visible; }
.kasten img {
  max-width: min(88vw, 76rem);
  max-height: 78vh;
  object-fit: contain;
  transform: scale(.985);
  transition: transform 520ms var(--ease);
}
.kasten.offen img { transform: none; }
.kasten__bu { max-width: 58rem; margin: .9rem auto 0; color: #c6cccf; text-align: center; font-size: .88rem; }
.kasten__blaettern,
.kasten__zu {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: border-color var(--kurz) ease, background var(--kurz) ease;
}
.kasten__blaettern { top: 50%; width: 3rem; height: 3rem; transform: translateY(-50%); }
.kasten__blaettern:hover, .kasten__zu:hover { border-color: #fff; background: rgba(255,255,255,.09); }
.kasten__blaettern span { width: .75rem; height: .75rem; border-top: 1.5px solid; border-right: 1.5px solid; }
.kasten__zurueck { left: 1rem; }
.kasten__zurueck span { transform: rotate(-135deg); margin-left: .25rem; }
.kasten__weiter { right: 1rem; }
.kasten__weiter span { transform: rotate(45deg); margin-right: .25rem; }
.kasten__zu { top: 1rem; right: 1rem; width: 3rem; height: 3rem; font-size: 1.4rem; }

/* ---------- Betrieb ---------- */
.betrieb {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(19rem,.95fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.betrieb__bild { margin: 0; overflow: hidden; }
.betrieb__bild img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transform: scale(1.045) translate3d(0,var(--parallax,0px),0);
}
.betrieb__bild figcaption { margin-top: .7rem; color: var(--schiefer); font-size: .76rem; }

/* ---------- Arbeiten / Filter ---------- */
#inhalt > .band:first-child { padding-top: clamp(10rem, 14vw, 13rem); }
#inhalt > .band:first-child .huelle > h1 { max-width: 10.5ch; }
.filter {
  margin: clamp(2.5rem, 4.5vw, 4rem) 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.filter__knopf {
  padding: .56rem .92rem;
  border: 1px solid rgba(37,43,46,.17);
  border-radius: 999px;
  color: var(--schiefer);
  background: transparent;
  font-size: .78rem;
  cursor: pointer;
  transition: color var(--kurz) ease, background var(--kurz) ease, border-color var(--kurz) ease, transform var(--kurz) ease;
}
.filter__knopf:hover { transform: translateY(-1px); color: var(--fels); border-color: var(--fels); }
.filter__knopf.ist-aktiv { color: #fff; background: var(--fels); border-color: var(--fels); }
.filter__zahl { min-height: 1.35em; margin: 0 0 1.4rem; color: var(--schiefer); font-size: .8rem; }
.galerie--gross { grid-template-columns: repeat(4,1fr); margin-top: 0; }
.galerie--gross figcaption { opacity: 0; }
.stueck[hidden] { display: none; }

/* ---------- FAQ ---------- */
.fragen { max-width: 62rem; margin-top: clamp(3rem, 5vw, 4.5rem); border-top: 1px solid var(--kies); }
.frage { border-bottom: 1px solid var(--kies); }
.frage__knopf {
  width: 100%;
  padding: 1.45rem 3rem 1.45rem 0;
  position: relative;
  border: 0;
  color: var(--fels);
  background: transparent;
  font-weight: 680;
  text-align: left;
  cursor: pointer;
}
.frage__knopf::after {
  content: "";
  position: absolute;
  right: .3rem;
  top: 50%;
  width: .65rem;
  height: .65rem;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 360ms var(--ease);
}
.frage__knopf[aria-expanded="true"]::after { transform: translateY(-25%) rotate(225deg); }
.frage__inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease); }
.frage__knopf[aria-expanded="true"] + .frage__inhalt { grid-template-rows: 1fr; }
.frage__inhalt > div { overflow: hidden; }
.frage__inhalt p { margin: 0; padding: 0 0 1.4rem; color: var(--schiefer); }

/* ---------- Kontakt ---------- */
.kontakt {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(22rem,1.15fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.kontakt h2 { max-width: 8ch; }
.karte { font-style: normal; line-height: 1.8; }
.karte dt {
  margin-top: 1.2rem;
  color: #8f999e;
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.karte dd { margin: .25rem 0 0; }
.karte a { color: #d9e8f2; text-underline-offset: 3px; }
.formular { display: grid; gap: 1.1rem; }
.feld { display: grid; gap: .36rem; }
.feld label { color: #aeb6ba; font-size: .8rem; }
.feld input, .feld select, .feld textarea {
  width: 100%;
  padding: .8rem .05rem .7rem;
  border: 0;
  border-bottom: 1px solid #5c666b;
  border-radius: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  transition: border-color var(--kurz) ease;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-bottom-color: var(--himmel-hell); }
.feld select option { color: var(--fels); background: #fff; }
.feld textarea { min-height: 8rem; resize: vertical; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zustimmung { display: flex; gap: .7rem; align-items: flex-start; color: #aeb6ba; font-size: .8rem; }
.zustimmung input { width: auto; flex: none; margin-top: .3rem; }
.formular .knopf { justify-self: start; color: var(--fels); background: #fff; border-color: #fff; }
.formular .knopf:hover { color: #fff; background: var(--himmel); border-color: var(--himmel); }

/* ---------- Footer ---------- */
.fuss { padding-block: 2.25rem; color: #8f999e; background: #1d2225; font-size: .82rem; }
.fuss__innen {
  width: min(100%, var(--max));
  margin-inline: auto;
  padding-inline: var(--bund);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.fuss a { color: #b5bdc1; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__rechts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ---------- Rechtliches / 404 ---------- */
body > main.band { padding-top: clamp(10rem, 14vw, 13rem); }
.recht { max-width: 56rem; }
.recht h1 { max-width: 100%; font-size: clamp(3.4rem, 6.4vw, 5.8rem); hyphens: auto; }
.recht h2 { margin-top: 3.3rem; font-size: clamp(1.75rem,3vw,2.65rem); letter-spacing: -.035em; }
.recht h3 { margin-top: 2.2rem; font-size: 1.18rem; letter-spacing: -.025em; }
.recht p, .recht li { color: var(--schiefer); }
.recht ul { max-width: var(--text); }

/* ---------- Reveal / Motion ---------- */
.js .zeig,
.js .motion-item,
.js .motion-head {
  opacity: 0;
  transform: translateY(1.6rem);
}
.js .motion-head { transform: translateY(.5em); clip-path: inset(0 0 100% 0); }
.js .zeig.ist-da,
.js .motion-item.motion-in,
.js .motion-head.motion-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    opacity 720ms ease var(--motion-delay, 0ms),
    transform 900ms var(--ease) var(--motion-delay, 0ms),
    clip-path 900ms var(--ease) var(--motion-delay, 0ms);
}

/* ---------- Responsive ---------- */
@media (max-width: 78rem) {
  :root { --header: 5.15rem; }
  .nav__innen { grid-template-columns: minmax(0,1.3fr) minmax(15rem,.7fr); gap: 3.5rem; }
  .nav__links a { font-size: clamp(2.8rem, 6.2vw, 5.7rem); }
  .auftakt { grid-template-columns: minmax(0,1fr) minmax(23rem,.78fr); }
  .steine { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 62rem) {
  :root { --header: 5rem; }
  .nav { padding-top: calc(var(--header) + 2.25rem); }
  .nav__innen { grid-template-columns: 1fr; align-items: start; gap: 3rem; }
  .nav__links a { font-size: clamp(2.7rem, 9vw, 5.1rem); }
  .nav__meta { padding-bottom: 2rem; }
  .nav__schnell { grid-template-columns: repeat(3, max-content); gap: .35rem 1.2rem; }

  .auftakt { min-height: auto; grid-template-columns: 1fr; }
  .auftakt__text { order: 1; max-width: none; padding-top: clamp(4rem,8vw,6rem); }
  .auftakt__bild { order: 0; min-height: min(68vh, 42rem); }
  .auftakt h1 { max-width: 9ch; font-size: clamp(4.7rem, 13vw, 8rem); }
  .auftakt::before { display: none; }

  .inschrift__innen,
  .inschrift--zwei .inschrift__innen,
  .kran,
  .betrieb,
  .kontakt { grid-template-columns: 1fr; }
  .inschrift--zwei .inschrift__bild { order: -1; }
  .inschrift__bild img { aspect-ratio: 16/11; }
  .kran__bild img { min-height: 31rem; max-height: 68vh; }
  .kacheln { grid-template-columns: repeat(2,1fr); }
  .betrieb__bild img { aspect-ratio: 16/11; }
  .galerie--gross { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 46rem) {
  :root { --header: 4.6rem; }
  body { font-size: 1rem; }
  h2 { font-size: clamp(2.9rem, 13vw, 4.8rem); }
  .band { padding-block: clamp(4.7rem, 15vw, 6.5rem); }
  .marke__ort, .ruf { display: none; }
  .marke__name { font-size: 1.05rem; }
  .menue-knopf { min-height: 2.55rem; padding: .55rem .75rem .55rem .85rem; }
  .menue-knopf__text { font-size: .78rem; }

  .nav { padding-inline: 1.25rem; padding-bottom: 1.5rem; }
  .nav__links a {
    grid-template-columns: 1.75rem minmax(0,1fr) auto;
    gap: .6rem;
    padding-block: .18rem .25rem;
    font-size: clamp(2.45rem, 11.5vw, 4rem);
  }
  .nav__links a > span { font-size: .58rem; }
  .nav__meta { font-size: .9rem; }
  .nav__schnell { grid-template-columns: 1fr; gap: .25rem; margin-bottom: 1.7rem; }
  .nav__cta { margin-top: 1.2rem; }

  .auftakt__bild { min-height: 52vh; }
  .auftakt__text { padding: 3.5rem 1.25rem 4.2rem; }
  .auftakt h1 { font-size: clamp(3.55rem, 15vw, 5.35rem); line-height: .88; max-width: 100%; }
  .auftakt__satz { font-size: 1.08rem; }
  .auftakt__tun { display: grid; }
  .auftakt__tun .knopf { width: 100%; }
  .auftakt__fuss { gap: .65rem; display: grid; }

  .laufband { padding: .78rem 0; }
  .laufband__spur { animation-duration: 24s; }
  .inschrift__spruch { font-size: clamp(3.1rem, 14vw, 5rem); }
  .inschrift__innen { gap: 2.5rem; }

  #grabmal .huelle::before,
  #naturstein .huelle::before,
  #ablauf .huelle::before,
  #arbeiten .huelle::before,
  #betrieb .huelle::before,
  #fragen .huelle::before { display: none; }

  .reihe { grid-template-columns: 1fr; gap: 1.1rem; }
  .reihe:hover { padding-left: .65rem; }
  .kacheln { grid-template-columns: 1fr; }
  .kachel { min-height: 14.5rem; }
  .kran__bild img { min-height: 23rem; }
  .kran__text { padding: 4.3rem 1.25rem; }
  .schritt { grid-template-columns: 4.2rem minmax(0,1fr); gap: 1rem; }
  .schritt p { grid-column: 2; }
  .steine { grid-template-columns: 1fr 1fr; gap: .85rem; }
  .galerie { grid-template-columns: 1fr 1fr; }
  #arbeiten .galerie > figure:nth-child(1),
  #arbeiten .galerie > figure:nth-child(6) { grid-column: span 2; }
  .galerie--gross { grid-template-columns: 1fr 1fr; }
  .galerie figcaption { opacity: 1; transform: none; inset: auto .5rem .5rem; }
  .betrieb { gap: 2.5rem; }
  .zwei { grid-template-columns: 1fr; }
  .kontakt { gap: 2.4rem; }
  .fuss__innen { align-items: flex-start; flex-direction: column; }
  .fuss__rechts { margin-left: 0; }
  #inhalt > .band:first-child, body > main.band { padding-top: 8.5rem; }
  .recht h1 { font-size: clamp(2.35rem, 9.5vw, 3.8rem); }
  .kasten__blaettern { width: 2.65rem; height: 2.65rem; }
  .kasten__zurueck { left: .5rem; }
  .kasten__weiter { right: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .nav { clip-path: none; opacity: 0; }
  .nav.offen { opacity: 1; }
  .js .zeig,
  .js .motion-item,
  .js .motion-head,
  .js .auf-zeile { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .auftakt__bild { clip-path: none !important; }
  .auftakt__bild img,
  .inschrift__bild img,
  .kran__bild img,
  .betrieb__bild img { transform: none !important; }
  .laufband__spur { animation: none !important; }
}

@media print {
  .kopf, .nav, .galerie, .kasten, .formular, .auftakt__tun, .laufband { display: none !important; }
  body { color: #000; background: #fff; }
  .band { padding-block: 1.5rem; }
}

/* Aktuelle Hauptseite im Overlay */
.nav__links a[aria-current="page"] { color: #a7cae0 !important; }


/* ===================== V4 refinement ===================== */
/* Compact navigation panel like a real dropdown, not a full-screen wall */
.nav {
  inset: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  background: rgba(13, 16, 18, .18);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: none;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.nav::before { display: none; }
.nav.offen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 260ms ease, visibility 0s linear 0s;
}
.nav__innen {
  width: min(31rem, calc(100vw - var(--bund) * 2));
  min-height: auto;
  max-height: calc(100svh - var(--header) - 1.75rem);
  overflow: auto;
  margin: calc(var(--header) - .15rem) var(--bund) 0 auto;
  padding: 1.25rem 1.35rem 1.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.4rem;
  color: #fff;
  background: linear-gradient(160deg, rgba(28,33,36,.98), rgba(36,43,47,.97) 58%, rgba(25,31,34,.99));
  box-shadow: 0 1.8rem 4rem rgba(11, 14, 16, .34);
}
.nav__links {
  display: grid;
  gap: .18rem;
}
.nav__links a {
  opacity: 1;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  font-weight: 760;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.nav__links a > span { display: none; }
.nav__links a::after {
  opacity: .42;
  font-size: .62rem;
  transform: none;
}
.nav__links a:hover { transform: none; color: #d9e8f2 !important; }
.nav__meta {
  padding-top: .25rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.nav__kicker {
  margin: .2rem 0 .55rem;
  color: rgba(255,255,255,.55);
}
.nav__schnell { gap: .5rem .85rem; }
.nav__schnell a,
.nav__recht a { color: #fff; }
.nav__cta { margin-top: 1rem; }

/* Remove obvious AI-ish numbering */
.ablauf { counter-reset: none; }
.schritt {
  grid-template-columns: minmax(13rem,.68fr) minmax(0,1.15fr);
  gap: clamp(1rem, 3vw, 2.6rem);
}
.schritt::before { content: none; display: none; }
.schritt h3 {
  max-width: 15ch;
  position: relative;
  padding-top: .15rem;
}
.schritt h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: -.8rem;
  width: 2.8rem;
  height: 2px;
  background: linear-gradient(90deg, var(--himmel), rgba(102, 160, 192, 0));
}

/* Cleaner, more consistent work galleries */
#arbeiten .galerie > figure:nth-child(1),
#arbeiten .galerie > figure:nth-child(6) { grid-column: auto; }
#arbeiten .galerie > figure:nth-child(1) img,
#arbeiten .galerie > figure:nth-child(6) img { aspect-ratio: 1 / 1; }
.galerie--gross {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.05rem;
}
.galerie--gross > figure {
  margin: 0;
  display: block;
}
.galerie--gross button {
  display: grid;
  grid-template-rows: auto auto;
  height: 100%;
  background: #f7f3eb;
  border: 1px solid rgba(37,43,46,.09);
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(23, 28, 31, .05);
}
.galerie--gross img {
  aspect-ratio: 1 / 1;
  display: block;
}
.galerie--gross figcaption {
  position: static;
  inset: auto;
  padding: .78rem .85rem .9rem;
  opacity: 1;
  transform: none;
  color: var(--fels);
  background: none;
  backdrop-filter: none;
  font-size: .8rem;
  line-height: 1.35;
}
.galerie--gross button:hover figcaption,
.galerie--gross button:focus-visible figcaption { opacity: 1; transform: none; }

/* Home gallery keeps the rhythm clean as well */
#arbeiten .galerie,
#inhalt #arbeiten .galerie {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Full-width crane section with text inside the image */
.kran {
  position: relative;
  min-height: min(54rem, 88svh);
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #1f2629;
}
.kran::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(17,21,23,.86) 0%, rgba(17,21,23,.75) 28%, rgba(17,21,23,.38) 60%, rgba(17,21,23,.18) 100%);
}
.kran__bild {
  position: absolute;
  inset: 0;
}
.kran__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));
}
.kran__bild img {
  min-height: 100%;
  height: 100%;
  transform: scale(1.04) translate3d(0,var(--parallax,0px),0);
}
.kran__text {
  position: relative;
  z-index: 2;
  max-width: min(38rem, calc(100% - var(--bund) * 2));
  min-height: min(54rem, 88svh);
  padding: clamp(4rem, 9vw, 7rem) var(--bund);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.kran__text .dach,
.kran__text h2,
.kran__text p,
.kran__text li { color: #fff; }
.kran__text h2 { max-width: 10ch; }
.kran__text .liste { margin-top: 1.4rem; max-width: 32rem; }
.kran__text .liste li { border-bottom-color: rgba(255,255,255,.16); color: #dde3e6; }
.kran__text .liste li::before { background: #9fd0e3; }
.kran__text .knopf--leer {
  color: #fff;
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.08);
}
.kran__text .knopf--leer:hover {
  color: var(--fels);
  background: #fff;
  border-color: #fff;
}

/* Better contact / inquiry portal */
.kontakt {
  grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: stretch;
}
.kontakt__info,
.kontakt__formular {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.5rem;
  background: rgba(255,255,255,.05);
  box-shadow: 0 1.15rem 2.2rem rgba(0,0,0,.12);
}
.kontakt__info {
  padding: clamp(1.4rem, 3vw, 2.1rem);
}
.kontakt__formular {
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
.karte dd { color: #eef3f6; }
.formular { gap: 1rem; }
.feld { gap: .48rem; }
.feld label { color: #dbe2e6; font-size: .8rem; font-weight: 600; }
.feld input, .feld select, .feld textarea {
  padding: .92rem 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .95rem;
  color: #fff;
  background: rgba(255,255,255,.06);
}
.feld input::placeholder, .feld textarea::placeholder { color: rgba(255,255,255,.5); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: rgba(159,208,227,.75);
  box-shadow: 0 0 0 4px rgba(159,208,227,.12);
}
.zustimmung {
  padding: .95rem 1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  background: rgba(255,255,255,.04);
}
.formular .knopf {
  margin-top: .25rem;
  padding-inline: 1.4rem;
  min-height: 3.05rem;
  font-weight: 760;
}

@media (max-width: 1050px) {
  .galerie--gross { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .nav__innen {
    width: calc(100vw - var(--bund) * 2);
    max-height: calc(100svh - var(--header) - 1rem);
    margin-top: calc(var(--header) - .05rem);
    padding: 1rem 1rem 1.05rem;
  }
  .nav__links a { font-size: 1.4rem; }
  .kran {
    min-height: 36rem;
  }
  .kran::before {
    background: linear-gradient(180deg, rgba(17,21,23,.84) 0%, rgba(17,21,23,.58) 44%, rgba(17,21,23,.28) 100%);
  }
  .kran__text {
    max-width: 100%;
    min-height: 36rem;
    padding-top: clamp(5rem, 18vw, 7.5rem);
    padding-bottom: 2.4rem;
  }
  .kran__text h2 { max-width: 12ch; }
  .galerie--gross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontakt { grid-template-columns: 1fr; }
  .zwei { grid-template-columns: 1fr; }
  .schritt { grid-template-columns: 1fr; }
  .schritt h3 { max-width: none; padding-top: .6rem; }
}
@media (max-width: 560px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie--gross { grid-template-columns: 1fr; }
  .kopf__aktionen { gap: .45rem; }
  .ruf { padding-inline: .85rem; }
  .nav__cta { width: 100%; justify-content: center; }
}


/* ===================== V5 crane image switch ===================== */
.kran__bild {
  position: absolute;
  inset: 0;
}
.kran__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 0s linear 900ms, transform 1200ms var(--ease);
  transform: scale(1.045) translate3d(0,var(--parallax,0px),0);
}
.kran__slide.ist-aktiv {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms ease, visibility 0s linear 0s, transform 1200ms var(--ease);
}


/* ===================== V6 marquee & materials ===================== */
.laufband {
  padding: .95rem 0;
}
.laufband__spur {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  will-change: transform;
  animation: stingl-laufband 40s linear infinite;
}
.laufband__gruppe {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 1.2rem;
  padding-right: 1.2rem;
}
.laufband span {
  flex: 0 0 auto;
}
@keyframes stingl-laufband {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 980px) {
  .laufband__spur { animation-duration: 32s; }
}
@media (max-width: 640px) {
  .laufband__gruppe { gap: .95rem; padding-right: .95rem; }
  .laufband__spur { animation-duration: 26s; }
}


/* ===================== V7 design refinement ===================== */
/* Header / nav */
.kopf {
  background: rgba(248, 246, 241, .9);
}
.kopf.ist-gescrollt {
  background: rgba(252, 250, 246, .96);
  border-bottom-color: rgba(37,43,46,.10);
  box-shadow: 0 1rem 2.8rem rgba(25, 30, 33, .10);
}
.marke__name { letter-spacing: -.045em; }
.marke__ort { letter-spacing: .12em; }
.ruf, .menue-knopf { box-shadow: 0 .45rem 1.25rem rgba(37, 43, 46, .06); }
.nav__innen {
  border-color: rgba(255,255,255,.12);
  border-radius: 1.55rem;
  box-shadow: 0 1.9rem 4rem rgba(11, 14, 16, .38), inset 0 1px 0 rgba(255,255,255,.05);
}
.nav__links a { letter-spacing: -.04em; }

/* Remove remaining numbering cues */
.auftakt::before {
  content: "STINGL STEINE";
  color: rgba(89,97,102,.72);
  font-size: .66rem;
  letter-spacing: .18em;
}
#grabmal .huelle::before,
#naturstein .huelle::before,
#ablauf .huelle::before,
#arbeiten .huelle::before,
#betrieb .huelle::before,
#fragen .huelle::before { content: none !important; display: none !important; }

/* Typography rhythm */
.band h2 {
  letter-spacing: -.06em;
}
.band .dach {
  margin-bottom: 1rem;
}
.lead {
  margin-top: 1.05rem;
}

/* Hero refinement */
.auftakt {
  background:
    radial-gradient(circle at 12% 18%, rgba(55,107,141,.08), transparent 24rem),
    linear-gradient(180deg, #f7f4ee 0%, #f8f6f1 100%);
}
.auftakt__text {
  max-width: 68rem;
  padding-top: clamp(5.2rem, 9vw, 9.3rem);
}
.auftakt__text::before {
  content: "";
  position: absolute;
  inset: clamp(2rem, 4vw, 2.75rem) clamp(1rem, 2.1vw, 1.4rem) clamp(2rem, 4vw, 2.75rem) 0;
  border-radius: 2rem;
  border: 1px solid rgba(37,43,46,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  box-shadow: 0 1.3rem 3rem rgba(37,43,46,.06);
  pointer-events: none;
}
.auftakt__text > * { position: relative; z-index: 1; }
.auftakt h1 {
  max-width: 7.35ch;
  margin-bottom: .22em;
}
.auftakt__satz {
  max-width: 37ch;
  color: #50595e;
}
.auftakt__fuss {
  gap: .55rem .7rem;
  border-top-color: rgba(37,43,46,.10);
}
.auftakt__fuss span {
  padding: .38rem .72rem;
  border: 1px solid rgba(37,43,46,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
}
.auftakt__bild {
  border-bottom-left-radius: 2rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.auftakt__bild::after {
  background: linear-gradient(90deg, rgba(37,43,46,.14), rgba(37,43,46,.03) 28%, transparent 55%);
}
.knopf {
  box-shadow: 0 .75rem 1.6rem rgba(37,43,46,.09);
}
.knopf--leer {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
}

/* Inschrift / image cards */
.inschrift__bild,
.betrieb__bild {
  border-radius: 1.4rem;
  background: #d6d0c4;
  box-shadow: 0 1.1rem 2.8rem rgba(16, 21, 23, .15);
}
.inschrift__bild img,
.betrieb__bild img {
  border-radius: inherit;
}
.inschrift__bild figcaption,
.betrieb__bild figcaption {
  padding: .75rem .15rem 0;
}

/* Service rows */
.reihen {
  margin-top: clamp(3rem, 6vw, 5.3rem);
  border-top: 0;
  display: grid;
  gap: 1.15rem;
}
.reihe {
  padding: clamp(1.55rem, 2.4vw, 2.2rem) clamp(1.2rem, 2vw, 1.6rem);
  border: 1px solid rgba(37,43,46,.08);
  border-radius: 1.45rem;
  background: rgba(255,255,255,.58);
  box-shadow: 0 1rem 2rem rgba(37,43,46,.04);
}
.reihe::before {
  left: 0;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 3px;
  border-radius: 999px;
}
.reihe:hover {
  padding-left: clamp(1.2rem, 2vw, 1.6rem);
  transform: translateY(-2px);
  background: rgba(255,255,255,.82);
  box-shadow: 0 1.35rem 2.6rem rgba(37,43,46,.07);
}
.reihe h3 {
  max-width: 14ch;
}
.reihe__stich li {
  padding: .42rem .78rem;
  border-color: rgba(37,43,46,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  color: #4e575c;
}

/* Naturstein cards / materials */
.steine {
  gap: clamp(1rem, 1.8vw, 1.25rem);
}
.stein {
  padding: .95rem;
  border: 1px solid rgba(37,43,46,.08);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.56);
  box-shadow: 0 .9rem 1.9rem rgba(37,43,46,.04);
  transition: transform 320ms var(--ease), box-shadow 320ms ease, background 320ms ease;
}
.stein:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.82);
  box-shadow: 0 1.25rem 2.4rem rgba(37,43,46,.08);
}
.stein__probe {
  border-radius: .95rem;
  overflow: hidden;
}
.stein h3 {
  margin-top: .95rem;
  font-size: 1.08rem;
}
.stein p {
  margin-top: .4rem;
  font-size: .9rem;
}

/* Gallery refinement */
.galerie {
  gap: .95rem;
}
.galerie > figure {
  border-radius: 1.25rem;
  overflow: hidden;
  background: rgba(255,255,255,.75);
  box-shadow: 0 .95rem 2rem rgba(23,28,31,.05);
}
.galerie button {
  border-radius: inherit;
}
.galerie img {
  background: #d7d1c7;
}
.galerie figcaption {
  inset: auto .8rem .8rem;
  border-radius: .8rem;
}

/* FAQ / contact / footer */
.fragen {
  max-width: none;
  border-top: 0;
  display: grid;
  gap: .95rem;
}
.frage {
  border: 1px solid rgba(37,43,46,.08);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.56);
  overflow: hidden;
}
.frage__knopf {
  padding: 1.35rem 3rem 1.35rem 1.15rem;
}
.frage__inhalt p {
  padding: 0 1.15rem 1.3rem;
}
.kontakt__info,
.kontakt__formular {
  box-shadow: 0 1.2rem 2.8rem rgba(0,0,0,.14);
}
.fuss {
  position: relative;
  background: linear-gradient(180deg, #1c2225 0%, #181d20 100%);
  border-top: 1px solid rgba(255,255,255,.06);
}
.fuss::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159,208,227,.45), transparent);
}
.fuss__innen {
  justify-content: space-between;
}

/* Works page filters */
.filter__knopf {
  padding: .62rem .98rem;
  background: rgba(255,255,255,.55);
}
.filter__knopf.ist-aktiv {
  box-shadow: 0 .6rem 1.2rem rgba(37,43,46,.10);
}

@media (max-width: 980px) {
  .auftakt__text::before { inset: 1.2rem 0 1.2rem 0; border-radius: 1.35rem; }
  .auftakt__bild { border-bottom-left-radius: 0; }
  .reihen { gap: 1rem; }
  .reihe { border-radius: 1.2rem; }
}
@media (max-width: 720px) {
  .auftakt__text::before { display: none; }
  .auftakt__fuss span { background: rgba(255,255,255,.72); }
  .steine { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fuss__innen { flex-direction: column; align-items: flex-start; }
  .fuss__rechts { margin-left: 0; }
}
@media (max-width: 560px) {
  .steine { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .reihe { padding: 1.2rem 1rem; }
  .frage__knopf { padding-left: 1rem; }
}