.bulle {
  display: block;
  width: 3rem;
  aspect-ratio: 747 / 709;
  background-color: currentColor;
  -webkit-mask: url("../marke/bulle.svg") center / contain no-repeat;
          mask: url("../marke/bulle.svg") center / contain no-repeat;
  flex-shrink: 0;
}
.bulle--kopf {
  aspect-ratio: 523 / 432;
  -webkit-mask-image: url("../marke/bulle-kopf.svg");
          mask-image: url("../marke/bulle-kopf.svg");
}

.wasserzeichen {
  position: absolute;
  pointer-events: none;
  color: #fff;
  opacity: .06;
  width: min(46vw, 620px);
  right: -6%;
  bottom: -14%;
}

.trenner {
  display: flex;
  align-items: center;
  gap: var(--r-5);
  color: var(--rot);
}
.trenner::before, .trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kante);
}
.trenner .bulle { width: 2.5rem; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 1.7em;
  border-radius: var(--radius-knopf);
  font-family: var(--schrift-text);
  font-size: var(--tx-klein);
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition:
    background-color var(--zeit) var(--kurve),
    border-color var(--zeit) var(--kurve),
    color var(--zeit) var(--kurve),
    box-shadow var(--zeit) var(--kurve),
    transform var(--zeit-schnell) var(--kurve);
}
.knopf--voll {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}
.knopf--voll:hover { background: var(--rot-tief); border-color: var(--rot-tief); }

.knopf--rand {
  border-color: currentColor;
  color: var(--text);
}
.knopf--rand:hover { background: var(--text); color: var(--off-white); }

.auf-dunkel .knopf--rand:hover {
  background: var(--text-invers);
  border-color: var(--text-invers);
  color: var(--schwarz);
}

.knopf--leise {
  padding-inline: 0;
  color: var(--rot);
  font-weight: 650;
}
.knopf--leise .pfeil { transition: transform var(--zeit) var(--kurve); }
.knopf--leise:hover .pfeil { transform: translateX(4px); }

.knopf:not(.knopf--leise):hover {
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.5rem -.7rem rgba(18, 16, 15, .5);
}
.knopf.knopf--voll:hover { box-shadow: 0 .8rem 1.6rem -.6rem rgba(143, 16, 34, .5); }
.knopf:not(.knopf--leise):active {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  .knopf:hover, .knopf:active { transform: none; }
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-3);
}
@media (max-width: 480px) {
  .knopf-reihe { flex-direction: column; align-items: stretch; }
  .knopf-reihe .knopf { width: 100%; }
}

.kopfzeile {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background: rgba(247, 243, 236, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition:
    background-color var(--zeit) var(--kurve),
    box-shadow var(--zeit) var(--kurve),
    border-color var(--zeit) var(--kurve);
  border-block-end: 1px solid transparent;
}
.kopfzeile__innen {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  min-height: var(--kopf-hoehe);
}
.kopfzeile--gescrollt {
  background: rgba(247, 243, 236, .96);
  border-block-end-color: var(--kante);
  box-shadow: var(--schatten-1);
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  text-decoration: none;
  margin-inline-end: auto;
  flex: 0 0 auto;
}
.marke .bulle { width: 2.4rem; color: var(--rot); }
.marke__wort { line-height: 1.1; }
.marke__wort b {
  display: block;
  font-family: var(--schrift-text);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  max-width: 11ch; 
}
@media (min-width: 560px) {
  .marke__wort b { font-size: .8rem; letter-spacing: .06em; max-width: 18ch; }
}
.marke__wort span {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: var(--sp-eyebrow);
  text-transform: uppercase;
  color: var(--rot);
}



.haupt-nav { display: none; }
@media (min-width: 1280px) {
  .haupt-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.15rem;
    margin-inline-start: auto;
  }
}
.haupt-nav a {
  position: relative;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 550;
  padding-block: .4rem;
  white-space: nowrap; 
  color: inherit;
  opacity: .74;
  transition: opacity var(--zeit) var(--kurve);
}
.haupt-nav a:hover,
.haupt-nav a:focus-visible,
.haupt-nav a[aria-current="page"] { opacity: 1; }

.haupt-nav { position: relative; }
.haupt-nav__zeiger {
  position: absolute;
  z-index: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--rot);
  pointer-events: none;
}
.haupt-nav__zeiger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rot);
  filter: blur(5px);
  opacity: .55;
}

.haupt-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--rot);
}
.haupt-nav:has(.haupt-nav__zeiger) a[aria-current="page"]::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .haupt-nav__zeiger { transition: none !important; }
}

.kopfzeile__tel { display: none; }
@media (min-width: 1280px) {
  .kopfzeile__tel {
    display: inline-flex;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .7em 1.2em;
    font-variant-numeric: tabular-nums;
  }
}

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--tx-mini);
  font-weight: 700;
  letter-spacing: var(--sp-eyebrow);
  text-transform: uppercase;
  padding: .55rem 0;
  flex-shrink: 0;
  min-width: 44px; min-height: 44px; justify-content: center;
}
@media (max-width: 479px) {
  .menue-knopf__text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 1280px) { .menue-knopf { display: none; } }
.menue-knopf__strich {
  position: relative;
  width: 22px; height: 2px;
  background: currentColor;
  transition: background-color var(--zeit) var(--kurve);
}
.menue-knopf__strich::before,
.menue-knopf__strich::after {
  content: ""; position: absolute; inset-inline: 0; height: 2px;
  background: currentColor;
  transition: transform var(--zeit) var(--kurve);
}
.menue-knopf__strich::before { top: -7px; }
.menue-knopf__strich::after  { top:  7px; }
[aria-expanded="true"] .menue-knopf__strich { background: transparent; }
[aria-expanded="true"] .menue-knopf__strich::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .menue-knopf__strich::after  { transform: translateY(-7px) rotate(-45deg); }

.menue {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--schwarz);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--rand) var(--r-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--zeit) var(--kurve), visibility 0s linear var(--zeit);
}
.menue[data-offen="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--zeit) var(--kurve), visibility 0s;
}
.menue a {
  display: block;
  font-family: var(--schrift-display);
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  font-weight: var(--gw-display);
  line-height: 1.25;
  text-decoration: none;
  padding-block: .25em;
  color: var(--text-invers);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--zeit) var(--kurve), transform var(--zeit) var(--kurve),
              color var(--zeit-schnell) var(--kurve);
}
.menue[data-offen="true"] a { opacity: 1; transform: none; }
.menue a:hover, .menue a[aria-current="page"] { color: var(--rot); }
.menue__fuss {
  margin-block-start: var(--r-8);
  padding-block-start: var(--r-5);
  border-block-start: 1px solid var(--kante-dunkel);
  display: flex; align-items: center; gap: var(--r-3);
  color: var(--rot);
}
.menue__fuss .bulle { width: 2rem; }
.menue__fuss span { font-size: var(--tx-klein); color: var(--text-invers-leise); }

body:has(.menue[data-offen="true"]) .kopfzeile {
  z-index: calc(var(--z-overlay) + 1);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-block-end-color: transparent;
  color: var(--text-invers);
}
body:has(.menue[data-offen="true"]) .kopfzeile::before { display: none; }

.aktionen {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--papier);
  border-block-start: 1px solid var(--kante);
  box-shadow: 0 -4px 20px rgba(41, 30, 24, .1);
  padding-block-end: env(safe-area-inset-bottom);
}
@media (min-width: 1280px) { .aktionen { display: none; } }
.aktionen a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .7rem .4rem;
  text-decoration: none;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  min-height: 3.4rem;
}
.aktionen a + a { border-inline-start: 1px solid var(--kante); }
.aktionen svg { width: 20px; height: 20px; color: var(--rot); }
.aktionen a:hover { background: var(--rot-schleier); }

@media (max-width: 1279px) { body { padding-block-end: var(--aktionsleiste); } }

.hero {
  display: grid;
  align-items: stretch;
  min-height: min(92vh, 900px);
  background: var(--off-white);
}
@media (min-width: 960px) { .hero { grid-template-columns: 1fr 1fr; } }

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--r-7) var(--rand) var(--sektion-eng);
  order: 2;
}
@media (min-width: 960px) {
  .hero__text {
    order: 1;
    padding-block-start: 7.5rem; 
    padding-inline: clamp(var(--r-5), 5vw, var(--r-9));
    padding-inline-start: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  }
}
.hero__titel {
  font-size: var(--tx-hero);
  line-height: .98;
  letter-spacing: -.02em;
  margin-block: 0 var(--r-5);
}
.hero__name {
  display: block;
  font-family: var(--schrift-text);
  font-size: clamp(.72rem, .6rem + .4vw, .88rem);
  font-weight: 700;
  letter-spacing: var(--sp-eyebrow);
  text-transform: uppercase;
  color: var(--text-leise);
  margin-block-end: var(--r-4);
}
.hero__lead { max-width: 46ch; }
.hero__zusatz {
  font-family: var(--schrift-display);
  font-size: var(--tx-h3);
  font-weight: var(--gw-display-leicht);
  color: var(--text);
}
.hero__bild {
  position: relative;
  order: 1;
  min-height: 58vh;
  background: var(--anthrazit);
  overflow: hidden;
}
@media (min-width: 960px) { .hero__bild { order: 2; min-height: 0; } }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero__bild .wasserzeichen {
  right: auto; left: 4%; bottom: 4%;
  width: min(30vw, 200px);
  opacity: .18;
  mix-blend-mode: soft-light;
}

.zahlen {
  display: grid;
  gap: var(--r-6) var(--r-5);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-block-start: 1px solid var(--kante);
  padding-block-start: var(--r-7);
}
.zahl__wert {
  display: block;
  font-family: var(--schrift-display);
  font-size: var(--tx-zahl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--rot);
  font-variant-numeric: tabular-nums;
}
.zahl__text {
  display: block;
  margin-block-start: var(--r-3);
  font-size: var(--tx-klein);
  color: var(--text-leise);
}

.weg { display: grid; gap: var(--r-6); }
@media (min-width: 820px) { .weg { grid-template-columns: repeat(3, 1fr); gap: var(--r-5); } }

.schritt { position: relative; }
.schritt__bild {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--anthrazit);
  margin-block-end: var(--r-5);
}
.schritt__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--zeit-ruhig) var(--kurve-weich);
}
.schritt:hover .schritt__bild img { transform: scale(1.04); }
.schritt__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border: 1.5px solid var(--rot);
  border-radius: 50%;
  color: var(--rot);
  font-size: var(--tx-mini);
  font-weight: 700;
  margin-block-end: var(--r-3);
}
.schritt h3 { margin-block-end: var(--r-3); }
.schritt p { font-size: var(--tx-klein); color: var(--text-leise); }

.zitat {
  border-inline-start: 3px solid var(--rot);
  padding-inline-start: clamp(var(--r-5), 3vw, var(--r-7));
  font-family: var(--schrift-display);
  font-size: var(--tx-zitat);
  font-weight: var(--gw-display-leicht);
  line-height: 1.28;
  letter-spacing: -.01em;
  max-width: 24ch;
}

.karte {
  background: var(--papier);
  border: 1px solid var(--kante);
  border-radius: var(--radius-card);
  padding: clamp(var(--r-5), 3vw, var(--r-6));
  transition: border-color var(--zeit) var(--kurve),
              box-shadow var(--zeit) var(--kurve),
              transform var(--zeit) var(--kurve);
}
.karte:hover { border-color: var(--rot-rand); box-shadow: var(--schatten-2); }

.karten-raster {
  display: grid;
  gap: var(--r-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.heute {
  background: var(--papier);
  border: 1px solid var(--kante);
  border-radius: var(--radius-card);
  padding: clamp(var(--r-5), 3vw, var(--r-7));
}
.heute--aufleuchten { animation: heute-aufleuchten 2s var(--kurve, ease) 1; }
@keyframes heute-aufleuchten {
  0%   { border-color: var(--kante); box-shadow: 0 0 0 0 rgba(183, 20, 44, 0); scale: 1; }
  14%  { border-color: var(--rot);   box-shadow: 0 0 0 6px rgba(183, 20, 44, .28); scale: 1.02; }
  30%  { border-color: var(--rot);   box-shadow: 0 0 0 3px rgba(183, 20, 44, .22); scale: 1; }
  70%  { border-color: var(--rot);   box-shadow: 0 0 0 3px rgba(183, 20, 44, .16); }
  100% { border-color: var(--kante); box-shadow: 0 0 0 0 rgba(183, 20, 44, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .heute--aufleuchten { animation: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(183, 20, 44, .2); }
}
.heute__kopf {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--r-3);
  margin-block-end: var(--r-5);
  padding-block-end: var(--r-4);
  border-block-end: 1px solid var(--kante);
}
.heute__kopf h3 { font-size: var(--tx-h3); }
.heute__liste > li {
  display: grid;
  gap: var(--r-1);
  padding-block: var(--r-4);
}
.heute__liste > li + li { border-block-start: 1px solid var(--kante); }
.heute__ort {
  font-family: var(--schrift-display);
  font-size: var(--tx-h3);
  font-weight: 600;
  line-height: 1.15;
}
.heute__platz { color: var(--text-leise); font-size: var(--tx-klein); }

.heute__route {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: var(--tx-mini);
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--rot);
  text-decoration: none;
  padding-block: .5rem;
  margin-block-end: -.5rem;
}
.heute__route:hover { color: var(--rot-tief); text-decoration: underline; }
.heute__route .pfeil { transition: transform var(--zeit) var(--kurve); }
.heute__route:hover .pfeil { transform: translateX(3px); }
.heute__zeit {
  margin-block-start: var(--r-2);
  font-variant-numeric: tabular-nums;
  font-size: var(--tx-klein);
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--rot);
}
.heute__leer { color: var(--text-leise); }
@media (min-width: 900px) {
  .heute--breit .heute__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    column-gap: var(--r-6);
  }
  .heute--breit .heute__liste > li { padding-block: var(--r-2); }
  .heute--breit .heute__liste > li + li {
    border-block-start: 0;
    border-inline-start: 1px solid var(--kante);
    padding-inline-start: var(--r-6);
  }
}

.marke-laden {
  display: inline-block;
  font-size: var(--tx-mini);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eiche-text);
}

.bild {
  position: relative;
  overflow: hidden;
  background: var(--anthrazit);
  border-radius: var(--radius-bild);
}
.bild img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--bildlage, 50% 50%);
  transition: transform var(--zeit-ruhig) var(--kurve-weich);
}
@media (hover: hover) {
  .bild:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .bild img { transition: none; }
  .bild:hover img { transform: none; }
}
.bild--hoch   { aspect-ratio: 4 / 5; }
.bild--quer   { aspect-ratio: 3 / 2; }
.bild--breit  { aspect-ratio: 16 / 9; }
.bild--quadrat{ aspect-ratio: 1; }


.platzhalter {
  display: grid;
  place-content: center;
  gap: var(--r-3);
  justify-items: center;
  background:
    repeating-linear-gradient(135deg,
      var(--rot-schleier) 0 12px, transparent 12px 24px),
    var(--papier);
  border: 1px dashed var(--rot-rand);
  color: var(--rot-tief);
  text-align: center;
  padding: var(--r-6);
}
.platzhalter .bulle { width: 2.6rem; opacity: .45; }
.platzhalter b {
  font-size: var(--tx-mini);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.platzhalter span { font-size: var(--tx-mini); color: var(--text-leise); max-width: 26ch; }

.kreislauf {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--r-3);
  counter-reset: station;
}
.station {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
  padding: var(--r-5);
  background: var(--papier);
  border: 1px solid var(--kante);
  border-radius: var(--radius-card);
  position: relative;
}
.station--eigen { border-color: var(--rot); background: var(--rot-schleier); }
.station b { font-size: var(--tx-klein); font-weight: 650; }
.station span { font-size: var(--tx-mini); color: var(--text-leise); }
.station__pfeil {
  display: grid; place-content: center;
  color: var(--rot); flex: 0 0 auto;
}
@media (max-width: 719px) { .station__pfeil { transform: rotate(90deg); } }

.fusszeile {
  background: var(--anthrazit);
  position: relative;
  overflow: hidden;
  padding-block: var(--sektion-eng) var(--r-7);
  border-block-start: 3px solid var(--rot);
}
.fusszeile .wasserzeichen { display: none; }
.fusszeile__raster {
  display: grid;
  gap: var(--r-7);
  position: relative;
}
@media (min-width: 760px) {
  .fusszeile__raster { grid-template-columns: 1.3fr 1fr 1fr; }
}
.fusszeile h2 {
  font-size: var(--tx-mini);
  font-family: var(--schrift-text);
  font-weight: 700;
  letter-spacing: var(--sp-eyebrow);
  text-transform: uppercase;
  color: var(--text-invers-leise);
  margin-block-end: var(--r-4);
}
.fusszeile a {
  text-decoration: none;
  color: var(--text-invers);
  transition: color var(--zeit-schnell) var(--kurve);
}
.fusszeile nav a,
.fusszeile address a { display: block; padding-block: .3rem; }
.fusszeile a:hover { color: var(--rot); }
.fusszeile__recht a { color: var(--text-invers-leise); }
.fusszeile address { font-style: normal; }

.fusszeile__marke { display: flex; align-items: center; gap: var(--r-4); }
.fusszeile__marke .bulle { width: 3.4rem; color: var(--rot); }
.fusszeile__marke strong { text-wrap: balance; }

.fusszeile__schluss {
  position: relative;
  margin-block-start: var(--sektion-eng);
  padding-block-start: var(--r-5);
  border-block-start: 1px solid var(--kante-dunkel);
  display: flex; flex-wrap: wrap; gap: var(--r-4) var(--r-6);
  align-items: center; justify-content: space-between;
}
.fusszeile__kennung {
  display: flex; align-items: center; gap: var(--r-4);
  font-size: var(--tx-mini);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-invers-leise);
}
.fusszeile__kennung .bulle { width: 2rem; color: var(--rot); }
.fusszeile__kennung b { color: var(--text-invers); font-weight: 700; }
.fusszeile__recht { display: flex; flex-wrap: wrap; gap: var(--r-5); font-size: var(--tx-mini); }