:root {
  --bg: #eae9e8;
  --ink: #3f3e3f;
  --font: "ABC Social Edu", "Helvetica Neue", Arial, sans-serif;
  --font-body: "ABC Helveesti Edu", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; background: var(--bg); overflow: hidden; color: var(--ink); font-family: var(--font); }
button { font: inherit; color: inherit; }

#scene { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#scene.is-dragging { cursor: grabbing; }
#scene.is-pointer { cursor: pointer; }

.loading {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: var(--bg);
  font-size: 22px; letter-spacing: -0.04em; font-style: italic;
  transition: opacity .8s ease, visibility .8s;
}
.loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.notice {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%);
  z-index: 15; max-width: min(92vw, 640px);
  padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid var(--ink); background: var(--bg);
  font: 13px/1.4 Arial, sans-serif;
}
.notice code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 4px; }

/* Oben links: Übersicht, Filter-Knopf und (im Filter-Modus) die Gruppen */
.topbar {
  position: fixed; top: 20px; left: 24px; right: 24px; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.back {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.06em;
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  text-shadow: 0 0 10px var(--bg), 0 0 4px var(--bg);
}
.back:hover { text-decoration-line: underline; }
body:not(.is-focus) .back { display: none; }

.fgroup { display: flex; align-items: center; gap: 8px; }
.ftoggle {
  height: 38px; padding: 0 18px;
  display: flex; align-items: center;
  border: 1.5px solid var(--ink); border-radius: 999px; background: transparent;
  font-size: 20px; line-height: 1; letter-spacing: -0.06em; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ftoggle:hover, .ftoggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.ftoggle__state { font-style: italic; white-space: pre; }
.ftoggle[hidden], .freset[hidden] { display: none; }
.freset {
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer;
  font: 400 26px/1 Arial, sans-serif;
  transition: background .2s ease, color .2s ease;
}
.freset:hover { background: var(--ink); color: var(--bg); }

/* Gruppen-Auswahl: klare Knöpfe, genau einer ist aktiv */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateX(-10px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
body.filter-open .filters { opacity: 1; visibility: visible; transform: none; }
.fbtn {
  height: 38px; padding: 0 16px;
  display: flex; align-items: baseline; gap: 8px; align-items: center;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bg); cursor: pointer;
  font-size: 20px; line-height: 1; letter-spacing: -0.06em;
  transition: background .2s ease, color .2s ease;
}
.fbtn small { font: 12px/1 Arial, sans-serif; letter-spacing: 0; opacity: .6; }
.fbtn:hover { background: rgba(63, 62, 63, .12); }
.fbtn.is-active { background: var(--ink); color: var(--bg); }
.fbtn.is-active small { opacity: .8; }
.back:focus-visible, .fbtn:focus-visible, .nbtn:focus-visible, .ftoggle:focus-visible, .freset:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Hinweis in der Zonen-Vorschau */
.hint {
  position: fixed; top: 74px; left: 24px; z-index: 10; margin: 0;
  font-size: 18px; font-style: italic; letter-spacing: -0.05em;
  text-shadow: 0 0 10px var(--bg), 0 0 4px var(--bg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility .5s;
}
body.zones-on .hint { opacity: .8; visibility: visible; }

/* Navigation unten: nur Linien, keine Füllfarben */
.menu {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 10;
  display: flex; align-items: center; gap: 12px;
  transition: left .9s cubic-bezier(.65, 0, .35, 1);
}
body.info-open .menu { left: 30%; }

.nbtn {
  height: 46px; padding: 0 22px;
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; cursor: pointer; white-space: nowrap;
  font-size: 22px; line-height: 1; letter-spacing: -0.06em;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.nbtn:hover:not(:disabled), .nbtn[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.nbtn:disabled { cursor: default; }
.nbtn--title {
  min-width: min(32vw, 340px); max-width: 40vw; justify-content: center; gap: 0;
  padding: 0 18px 0 26px;
  font-style: italic;
}
/* Titel schrumpft mit Auslassungspunkten; Platz rechts für überhängende Kursiv-Buchstaben */
.nbtn--title > span:first-child {
  flex: 0 1 auto; min-width: 0;
  padding: 0 .4em 0 .1em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nbtn--title:disabled { font-style: normal; opacity: .75; }
.nbtn--title:disabled .mark { display: none; }
.mark {
  flex: none; width: 20px; height: 20px; margin-left: 10px; display: grid; place-items: center;
  border: 1.5px solid currentColor; border-radius: 50%;
  font: italic 13px/1 Georgia, serif; letter-spacing: 0;
}

/* Info-Menü rechts (Figma: UrsuppeDetail) */
.info {
  position: fixed; top: 0; right: 0; bottom: 0; width: 40vw;
  z-index: 8; visibility: hidden;
  display: flex; align-items: center;
  background: rgba(225, 225, 225, 0.52);
}
.info__wrap { width: 100%; padding: 0 5vw; }
.info__title {
  margin: 0 0 clamp(28px, 4vh, 56px); padding-bottom: clamp(20px, 3vh, 32px);
  position: relative; text-align: center;
  font: italic 400 clamp(30px, 3.2vw, 48px)/1.05 var(--font);
  letter-spacing: -0.08em;
}
.info__title::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 114px; height: 2px; background: var(--ink); transform: translateX(-50%);
}
.info__fields { font: 400 clamp(20px, 2.4vw, 36px)/1.13 var(--font); letter-spacing: -0.08em; }
.info__fields p { margin: 0; }
.info__quote {
  margin: clamp(28px, 5vh, 64px) 0 0;
  font: 400 clamp(20px, 2.4vw, 36px)/1.15 var(--font-body); letter-spacing: -0.08em;
}
.info__quote em { font-style: italic; font-weight: 300; }
.info__tags { margin: clamp(20px, 3vh, 36px) 0 0; font: 15px/1.4 Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }

@media (max-width: 760px) {
  .nbtn { padding: 0 16px; font-size: 18px; }
  .nbtn span:not(.mark):not(#titleText) { display: none; }
  .info { width: 100vw; background: rgba(225, 225, 225, 0.88); }
  body.info-open .menu { left: 50%; }
}