/* Visenza Hub. Werte nur aus tokens.css. Dunkel, ruhig, ein Ort statt Software. */
* { box-sizing: border-box; }
html { background: var(--tiefe); }
body {
  overflow-x: hidden;
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-leicht);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2 { margin: 0; font-family: var(--font-head); font-weight: var(--fw-leicht); letter-spacing: var(--ls-head); }
p { margin: 0; }
.label { font-size: 0.78rem; font-weight: var(--fw-normal); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--akzent); }
.unterzeile { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-leise); margin-top: 1em; }

/* Kopfzeile */
.kopfzeile {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 18px var(--rand-seite); border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 2; background: rgb(var(--scrim) / 92%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke img { display: block; width: 34px; height: auto; opacity: 0.95; }
.anmeldung__zeichen { width: 72px; height: auto; }
.marke span { font-family: var(--font-head); font-weight: var(--fw-normal); font-size: 1.15rem; letter-spacing: var(--ls-marke); text-transform: uppercase; }
.navi { display: flex; gap: clamp(14px, 2.4vw, 32px); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.navi a, .abmelden { text-decoration: none; font-size: 0.82rem; letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--text-ruhig); padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.navi a[aria-current] { color: var(--text); border-bottom-color: var(--akzent); }
.navi a:hover, .abmelden:hover { color: var(--text); }
.demo { text-align: center; padding: 8px; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-leise); background: var(--flaeche); border-bottom: 1px solid var(--linie); }

main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--rand-seite) var(--raum-xl); }

/* Buehne: ein Naturbild als Raum, der Schleier liegt nur unter dem Text */
.buehne {
  position: relative; isolation: isolate; overflow: hidden; margin-inline: calc(50% - 50vw); min-height: clamp(220px, 30vw, 360px);
  display: flex; align-items: flex-end;
  padding: var(--raum-m) max(var(--rand-seite), calc((100vw - var(--maxw)) / 2 + var(--rand-seite)));
  background: url('/bilder/20260702-nature-water-lake-calm-03.jpg') center 60% / cover no-repeat;
}
.buehne__text { position: relative; padding: 18px 24px 6px 0; }
.buehne__text::before {
  content: ''; position: absolute; inset: -60px -140px -30px -60vw; z-index: -1;
  background: radial-gradient(ellipse at 35% 75%, rgb(var(--scrim) / 88%) 0%, rgb(var(--scrim) / 60%) 45%, rgb(var(--scrim) / 0%) 75%);
}
.buehne .label { color: var(--text); }
.buehne h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem); line-height: 1.1; margin-top: 0.3em; }

/* Kopf der Unterseiten */
.kopf { padding: var(--raum-l) 0 var(--raum-m); max-width: 62ch; }
.kopf h1 { font-size: var(--fs-h2); margin: 0.4em 0 0.4em; }
.kopf p:not(.label) { color: var(--text-leise); }

/* Kennzahlen */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: var(--raum-m) 0; }
.zahl { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); padding: 20px 22px; }
.zahl__wert { font-family: var(--font-head); font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); line-height: 1.05; margin-top: 0.25em; color: var(--text); }
.zahl__zusatz { font-size: 0.85rem; color: var(--text-leise); margin-top: 0.3em; }

/* Karten */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); padding: clamp(20px, 2.6vw, 30px); min-width: 0; }
.karte--breit { grid-column: 1 / -1; }
.karte h2 { font-size: 1.6rem; margin-bottom: 0.7em; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; gap: 16px; padding: 11px 0; border-top: 1px solid var(--linie); color: var(--text-ruhig); }
.liste li:first-child { border-top: 0; padding-top: 0; }
.liste small { display: block; font-size: 0.82rem; color: var(--text-leise); letter-spacing: 0.02em; }
.liste--nummer { counter-reset: n; }
.liste--nummer li::before { counter-increment: n; content: counter(n); font-family: var(--font-head); font-size: 1.4rem; line-height: 1; color: var(--akzent); min-width: 1ch; }
.zeit { flex: none; min-width: 6.6em; font-size: 0.85rem; color: var(--text-leise); font-variant-numeric: tabular-nums; padding-top: 2px; }
.leer { color: var(--text-leise); font-size: 0.95rem; }
.hinweis { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--rand-stark); border-radius: 12px; color: var(--text-ruhig); font-size: 0.92rem; }

/* FEELS GARDEN, eine Person je Zeile, aufklappbar */
.personen { display: grid; gap: 10px; }
.person { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); }
.person summary {
  list-style: none; cursor: pointer; display: grid; gap: 4px 18px; align-items: center;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.6fr) auto auto; padding: 16px 22px;
}
.person summary::-webkit-details-marker { display: none; }
.person[open] summary { border-bottom: 1px solid var(--linie); }
.person__name { font-family: var(--font-head); font-size: 1.35rem; line-height: 1.2; }
.person__name small { display: block; font-family: var(--font-body); font-size: 0.82rem; color: var(--text-leise); }
.person__wie, .person__am { font-size: 0.88rem; color: var(--text-ruhig); }
.person__quellen { display: flex; gap: 6px; }
.person__quellen b { font-weight: var(--fw-normal); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-ruhig); border: 1px solid var(--rand-stark); border-radius: var(--radius-pill); padding: 3px 10px; }
.person dl { margin: 0; padding: 16px 22px 20px; display: grid; grid-template-columns: minmax(120px, 0.3fr) 1fr; gap: 10px 20px; }
.person dt { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent); padding-top: 3px; }
.person dd { margin: 0; color: var(--text-ruhig); overflow-wrap: anywhere; }

/* Anmeldung: Bild als Raum, Glas darueber */
.anmeldung {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(rgb(var(--scrim) / 35%), rgb(var(--scrim) / 55%)), url('/bilder/20260702-nature-moos-stein-01.jpg') center / cover no-repeat;
}
.anmeldung__karte {
  width: min(100%, 420px); display: grid; gap: 18px; padding: clamp(28px, 5vw, 44px);
  background: var(--glas); border: 1px solid var(--rand); border-radius: var(--radius-karte);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.anmeldung__karte h1 { font-size: 2.3rem; line-height: 1.1; }
.anmeldung__karte label { display: grid; gap: 2px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-ruhig); }
.feld { width: 100%; background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--rand-stark); border-radius: 0; padding: 0.6em 2px; font: inherit; font-size: 1.05rem; letter-spacing: normal; text-transform: none; }
.feld:focus-visible { outline: 0; border-bottom-color: var(--fokus); }
.fehler { color: var(--text); border-left: 2px solid var(--akzent); padding-left: 12px; }
.cta {
  justify-self: start; margin-top: 8px; padding: 1em 2.2em; border: 1px solid var(--glas-gold-rand); border-radius: var(--radius-pill);
  background: var(--glas-gold); color: var(--text); font: inherit; font-weight: var(--fw-normal); letter-spacing: var(--ls-cta); text-transform: uppercase; cursor: pointer;
}
.cta:hover { background: var(--glas-gold-hover); border-color: var(--glas-gold-rand-hover); }
.cta:focus-visible, .navi a:focus-visible, .person summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

@media (max-width: 640px) {
  .zahlen { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zahl { padding: 16px; }
  .zahl__wert { font-size: 2rem; }
  .abmelden { display: none; }
  .kopfzeile { flex-wrap: wrap; row-gap: 6px; }
  .navi { order: 3; flex-basis: 100%; }
  .person summary { grid-template-columns: 1fr auto; }
  .person__wie { grid-column: 1; }
  .person__quellen { grid-column: 1 / -1; }
  .person dl { grid-template-columns: 1fr; gap: 2px; }
  .person dd { margin-bottom: 10px; }
  .zeit { min-width: 5.4em; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Stufe 2: Balken, Filter, Tabelle, ein Mensch */
.balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.balken li { display: grid; grid-template-columns: minmax(110px, 0.9fr) 2fr 2.5em; gap: 14px; align-items: center; font-size: 0.92rem; color: var(--text-ruhig); }
.balken__spur { height: 8px; border-radius: var(--radius-pill); background: var(--glas-leise); overflow: hidden; }
.balken__spur i { display: block; height: 100%; border-radius: inherit; background: var(--erde); }
.balken b { font-weight: var(--fw-normal); text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.filterleiste { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin: var(--raum-m) 0 10px; padding: 20px 22px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); }
.filter { display: grid; gap: 2px; min-width: 140px; flex: 1 1 140px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-leise); }
.filter--suche { flex: 2 1 220px; }
.filter select.feld { appearance: none; -webkit-appearance: none; cursor: pointer; background: transparent; }
.filter select.feld option { background: var(--tiefe); color: var(--text); }
.cta--klein { padding: 0.75em 1.6em; margin: 0; font-size: 0.85rem; }
.zuruecksetzen, .zurueck { font-size: 0.85rem; letter-spacing: 0.06em; color: var(--text-leise); }
.zurueck { display: inline-block; margin-bottom: 1em; text-decoration: none; }
.zurueck::before { content: '\2190\00a0'; }
.herunterladen { color: var(--akzent); text-decoration: none; border-bottom: 1px solid var(--rand-stark); margin-left: 4px; }
.treffer { margin: 18px 0 8px; font-size: 0.88rem; color: var(--text-leise); }
.tabelle { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius-karte); background: var(--flaeche); }
.tabelle table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabelle th { text-align: left; font-weight: var(--fw-normal); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent); padding: 14px 16px; border-bottom: 1px solid var(--rand-stark); white-space: nowrap; }
.tabelle td { padding: 12px 16px; border-bottom: 1px solid var(--linie); color: var(--text-ruhig); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--rand-stark); }
.tabelle td a:hover { border-bottom-color: var(--akzent); }
.leise { color: var(--text-leise) !important; overflow-wrap: anywhere; }
.tabelle td.nowrap { white-space: nowrap; overflow-wrap: normal; }
.angaben, .antworten { margin: 0; display: grid; gap: 4px 18px; }
.angaben { grid-template-columns: minmax(110px, 0.45fr) 1fr; }
.angaben dt, .antworten dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent); padding-top: 4px; }
.angaben dd { margin: 0 0 8px; color: var(--text-ruhig); overflow-wrap: anywhere; }
.antworten dt { text-transform: none; letter-spacing: 0.02em; font-size: 0.88rem; color: var(--text-leise); }
.antworten dt.saeule { font-family: var(--font-head); font-size: 1.25rem; color: var(--text); margin-top: 14px; }
.antworten dt.saeule:first-child { margin-top: 0; }
.antworten dd { margin: 0 0 12px; color: var(--text); }
details > summary h2 { display: inline; }
details > summary { cursor: pointer; }
.bericht { margin-top: 1em; color: var(--text-ruhig); max-width: 70ch; }
@media (max-width: 640px) {
  .tabelle .breit { display: none; }
  .angaben { grid-template-columns: 1fr; }
  .balken li { grid-template-columns: 1fr 2.5em; }
  .balken__spur { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .filter { flex: 1 1 40%; min-width: 0; }
  .filter--suche { flex-basis: 100%; }
}

/* Stufe 3: Team */
.gruppe { margin-top: var(--raum-l); }
.gruppe > h2 { font-size: 1.7rem; margin-bottom: 14px; }
.rollen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.rolle { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
.rolle header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rolle h3 { margin: 0; font-family: var(--font-head); font-weight: var(--fw-leicht); font-size: 1.4rem; line-height: 1.2; }
.rolle p { font-size: 0.92rem; color: var(--text-ruhig); }
.rolle__wann { color: var(--text-leise) !important; font-size: 0.82rem !important; letter-spacing: 0.02em; }
.rolle__zuletzt { border-top: 1px solid var(--linie); padding-top: 8px; font-size: 0.85rem !important; }
.rolle__zuletzt span { color: var(--akzent); margin-right: 6px; font-variant-numeric: tabular-nums; }
.rolle--ruht { opacity: 0.6; }
.marke--warm { border-color: var(--glas-gold-rand-hover) !important; background: var(--glas-gold); color: var(--text) !important; }
.gruppe + .raster { margin-top: var(--raum-l); }

/* Zuruf-Feld (12.10.2026) */
.zuruf { margin-top: var(--raum-m); }
.zuruf h2 { font-size: 1.6rem; margin-bottom: 0.4em; }
.zuruf__form { display: grid; gap: 10px; }
.zuruf__text { resize: vertical; min-height: 3.2em; line-height: 1.5; border: 1px solid var(--rand-stark); border-radius: 12px; padding: 12px 14px; background: rgb(var(--scrim) / 35%); }
.zuruf__text:focus-visible { border-color: var(--fokus); }
.zuruf__fuss { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.zuruf__fuss .unterzeile { margin: 0; }
.zuruf__hinweis { color: var(--text); font-size: 0.92rem; border-left: 2px solid var(--akzent); padding-left: 10px; }
.zurufe { margin-top: 18px; }
.zurufe li { align-items: baseline; }
.zurufe li > span:nth-child(2) { flex: 1; }
.zuruf__status { flex: none; font-weight: var(--fw-normal); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-ruhig); border: 1px solid var(--rand-stark); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.zuruf__status--wartet-auf-dich { background: var(--glas-gold); border-color: var(--glas-gold-rand-hover); color: var(--text); }
.zuruf__status--erledigt { opacity: 0.6; }
@media (max-width: 640px) { .zurufe li { flex-wrap: wrap; } .zuruf__status { margin-left: auto; } }

/* Pipeline (12.10.2026) */
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.etikett { display: inline-block; font-weight: var(--fw-normal); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--rand-stark); border-radius: var(--radius-pill); padding: 2px 9px; margin: 0 4px 4px 0; color: var(--text-ruhig); white-space: nowrap; }
.etikett--feelsgarden { border-color: var(--moos); color: var(--text); background: rgb(138 143 122 / 22%); }
.etikett--naturewalk { border-color: var(--glas-gold-rand-hover); background: var(--glas-gold); color: var(--text); }
.etiketten { margin-bottom: 12px; }
.abgleich { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 4px 0 0; }
.spur { margin-top: var(--raum-l); }
.spur__kopf { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-bottom: 12px; }
.spur__kopf h2 { font-size: 1.8rem; }
.brett { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.spalte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); padding: 14px; min-height: 140px; scroll-snap-align: start; }
.spalte header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.spalte h3 { margin: 0; font-family: var(--font-head); font-weight: var(--fw-leicht); font-size: 1.25rem; }
.spalte header span { font-size: 0.85rem; color: var(--akzent); font-variant-numeric: tabular-nums; }
.spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.spalte__leer { font-size: 0.85rem; color: var(--text-leise); }
.spalte__leer a { color: var(--akzent); }
.spalte--entdeckt { opacity: 0.85; border-style: dashed; }
.karte-v { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; background: rgb(var(--scrim) / 25%); display: grid; gap: 4px; }
.karte-v__name { font-family: var(--font-head); font-size: 1.15rem; text-decoration: none; color: var(--text); }
.karte-v__name:hover { color: var(--akzent); }
.karte-v__was, .karte-v__schritt { font-size: 0.82rem; color: var(--text-ruhig); }
.karte-v__schieben { margin-top: 4px; }
.feld--klein { font-size: 0.85rem; padding: 0.35em 2px; cursor: pointer; }
.feld--klein option { background: var(--tiefe); color: var(--text); }
.cta--mini { padding: 0.4em 1em; font-size: 0.72rem; margin: 6px 0 0; }
.faellig { font-size: 0.78rem; color: var(--akzent); white-space: nowrap; }
.faellig--ueber { color: var(--text); border-bottom: 1px solid var(--akzent); }
.vorgang { border-top: 1px solid var(--linie); padding: 12px 0; }
.vorgang:first-of-type { border-top: 0; padding-top: 0; }
.vorgang summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; list-style: none; }
.vorgang summary::-webkit-details-marker { display: none; }
.vorgang__titel { font-family: var(--font-head); font-size: 1.3rem; }
.stufe { font-weight: var(--fw-normal); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--glas-gold-rand); border-radius: var(--radius-pill); padding: 3px 10px; background: var(--glas-gold); }
.vorgang__form { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin-top: 14px; }
.vorgang__form .unterzeile { flex-basis: 100%; }
.vorgang__form--neu { border-top: 1px solid var(--rand-stark); padding-top: 16px; margin-top: 16px; }
.notiz { flex: 1; color: var(--text-ruhig); }
#notizen .liste { margin-top: 16px; }
.kopf p a { color: var(--akzent); }
@media (max-width: 640px) { .brett { grid-auto-columns: 78%; } }