:root {
  --paper: #F4F1EA;
  --ink:   #14120F;
  --muted: #6B665C;
  --gold:  #C9A227;
  --line:  rgba(20, 18, 15, 0.12);
}

body.design-tatami { background: var(--paper); color: var(--ink); }
body.design-tatami .sub, body.design-tatami .mikro, body.design-tatami .fakten,
body.design-tatami .karte p, body.design-tatami .station p,
body.design-tatami .intro, body.design-tatami .klein, body.design-tatami .caption,
body.design-tatami .fuss, body.design-tatami .faq-liste p { color: var(--muted); }

body.design-tatami .topbar { background: rgba(244, 241, 234, 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
body.design-tatami .topbar .logo svg { color: var(--ink); }
body.design-tatami .nav a.aktiv { border-bottom-color: var(--gold); }
body.design-tatami .btn-cta {
  background: var(--gold); color: var(--ink); border-radius: 6px;
  box-shadow: 0 2px 0 rgba(20, 18, 15, 0.18);
}
body.design-tatami .btn-ghost {
  background: transparent; color: var(--ink); border-radius: 6px;
  border: 1px solid rgba(20, 18, 15, 0.28);
}

body.design-tatami .etikett { color: var(--muted); letter-spacing: 4px; }
body.design-tatami .etikett::before, body.design-tatami .etikett::after {
  content: ""; width: 8px; height: 8px;
  border: 1.5px solid var(--gold); transform: rotate(45deg);
}
body.design-tatami .hero h1 { font-weight: 650; }
body.design-tatami .hero h1 .hl {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat; background-size: 100% 8px; background-position: 0 92%;
}
body.design-tatami .fakten { color: var(--muted); }
body.design-tatami .fakten span:first-child { color: var(--ink); font-weight: 600; }
body.design-tatami .fakten .tr { color: var(--gold); }

body.design-tatami .seal-echo {
  display: block; position: absolute; right: 4%; top: -30px;
  width: 380px; height: 380px;
  border: 1px solid rgba(201, 162, 39, 0.55); transform: rotate(45deg);
}
body.design-tatami .seal-echo::after { content: ""; position: absolute; inset: 64px; border: 1px solid rgba(20, 18, 15, 0.10); }
body.design-tatami .baseline { display: block; position: absolute; left: 0; right: 0; bottom: 40px; border-top: 1px solid var(--line); }
body.design-tatami .shot {
  background: var(--ink);
  box-shadow: 0 34px 70px rgba(20, 18, 15, 0.30), 0 10px 22px rgba(20, 18, 15, 0.16);
}
body.design-tatami .chrome i { background: rgba(244, 241, 234, 0.22); }
body.design-tatami .shot-main { transform: rotate(-1.6deg); }
body.design-tatami .shot-side { transform: rotate(1.8deg); }
body.design-tatami .caption { color: var(--muted); }

body.design-tatami .karte, body.design-tatami .station { padding: 8px 26px 8px 0; border-radius: 0; }
body.design-tatami .grid-4 > * + *, body.design-tatami .grid-2 > * + * { border-left: 1px solid var(--line); padding-left: 26px; }
body.design-tatami .karte .mark {
  display: block; width: 9px; height: 9px; background: var(--gold);
  transform: rotate(45deg); margin-bottom: 16px;
}
body.design-tatami .karte h3, body.design-tatami .station h3 {
  font-size: 14px; font-weight: 650; letter-spacing: 2px; text-transform: uppercase;
}
body.design-tatami .station .nr { color: var(--gold); letter-spacing: 2px; }
body.design-tatami .label span { color: var(--ink); }
body.design-tatami .label::after { border-top-color: var(--line); }
body.design-tatami .band + .band { border-top: 1px solid var(--line); }

body.design-tatami .zusagen li::before { color: var(--gold); }
body.design-tatami .faq-liste details + details { border-top: 1px solid var(--line); }
body.design-tatami .fuss { border-top: 1px solid var(--line); }
body.design-tatami .fuss a:hover { color: var(--ink); }

@media (max-width: 720px) {
  body.design-tatami .grid-4 > * + *, body.design-tatami .grid-2 > * + * {
    border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px;
  }
}