/* ============================================================
   Bausteine — Entwurf 01 «Instrument»
   Scharfkantig: kein Radius, Haarlinien, Mono-Beschriftung,
   EIN Signalton. Die Klassennamen sind die der bisherigen Site;
   alle Unterseiten und ihre Seiten-Stylesheets bauen darauf.
   ============================================================ */

/* ---------- Kopfzeile ---------- */
/* z-index 100: hoeher als das Vollbildmenue (90). Sonst deckt das
   offene Menue den Burger zu und laesst sich auf Beruehrungsgeraeten
   nicht mehr schliessen. */
header.site{
  position:sticky;top:0;z-index:100;background:var(--head-bg);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;gap:1.5rem;height:3.75rem;max-width:var(--wide)}
.brand{display:flex;align-items:center;gap:.625rem;font-weight:700;text-decoration:none;color:var(--ink);
  font-size:.9375rem;letter-spacing:-.015em;flex:none}
.brand .m{width:1.5rem;height:1.5rem;background:var(--ink);color:var(--ground);
  display:grid;place-items:center;font-family:var(--fm);font-size:.75rem;font-weight:600}
header.site nav{display:flex;gap:1.5rem;font-family:var(--fm);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-left:1rem}
header.site nav a{text-decoration:none;color:var(--ink-2);transition:color .18s}
@media(hover:hover){header.site nav a:hover{color:var(--ink)}}
/* Umbruch der Navigation — siehe Erlaeuterung beim Burger weiter unten.
   Die Schwelle ist bewusst 1240 px und nicht 960 px: Marke + Navigation +
   Umschalter + Termin brauchen auf den langen Seiten mehr Platz. */
@media(max-width:1240px){.js header.site nav{display:none}}
.js header.site[data-eng="true"] nav{display:none}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:.625rem}

/* Auf berührungsfähigen Geräten sitzt die Trefferzone unter einem
   backdrop-filter nicht deckungsgleich — deckende Fläche stattdessen. */
@media(any-pointer:coarse){
  header.site{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ground)}
}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.125rem;
  font-family:var(--fm);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  background:var(--ink);color:var(--ground);text-decoration:none;cursor:pointer;
  border:1px solid var(--ink);border-radius:0;
  touch-action:manipulation;
  transition:background .2s var(--e),color .2s var(--e),border-color .2s var(--e),transform .2s var(--e);
}
@media(hover:hover){.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:translateY(-1px)}}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.q{background:transparent;color:var(--ink);border-color:var(--line-2)}
@media(hover:hover){.btn.q:hover{background:var(--ink);color:var(--ground);border-color:var(--ink);transform:none}}
.btn.sm{padding:.5625rem .875rem}
.cta{display:flex;gap:.75rem;flex-wrap:wrap}
.cta.mitte{justify-content:center}
.lnk{color:var(--ink);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.375rem;
  border-bottom:1px solid var(--line-2)}
@media(hover:hover){.lnk:hover{color:var(--accent);border-color:var(--accent)}}
.lnk svg{width:.5625rem;height:.5625rem;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- Darstellung: System · Hell · Dunkel ---------- */
.tt{
  display:inline-flex;gap:.125rem;padding:.1875rem;height:2.5rem;align-items:stretch;
  border:1px solid var(--line-2);border-radius:0;background:transparent;flex:none;
}
.tt button{
  -webkit-appearance:none;appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--fm);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--dim);
  padding:0 .5625rem;border-radius:0;display:inline-flex;align-items:center;gap:.375rem;
  touch-action:manipulation;white-space:nowrap;
  transition:background .22s var(--e),color .22s var(--e);
}
.tt button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.tt button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tt svg{width:.9375rem;height:.9375rem;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter;pointer-events:none;flex:none}
@media(max-width:1180px){.tt button .lbl{display:none}.tt button{padding:0 .5rem}}

/* ---------- Hero mit Bemassung ---------- */
.hero{padding-block:clamp(3.5rem,8vw,7rem) clamp(2rem,4vw,3.5rem)}
.hero .eyebrow{display:flex;align-items:center;gap:.75rem;color:var(--dim);
  font-family:var(--fm);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 clamp(1.5rem,3vw,2.5rem);font-weight:500}
.hero .eyebrow .rule{height:1px;flex:1;background:var(--line);max-width:14rem}
.hero .sub{display:grid;grid-template-columns:1fr;gap:1.75rem;margin-top:clamp(1.75rem,3vw,2.75rem);align-items:end}
@media(min-width:900px){.hero .sub{grid-template-columns:minmax(0,1fr) auto}}

/* Bemassung: technische Zeichnung statt Aufzählung */
.masse{
  margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){.masse{grid-template-columns:repeat(4,1fr)}}
.mass{padding:1.25rem 1.25rem 1.5rem 0;border-right:1px solid var(--line);position:relative}
.mass:last-child{border-right:0}
@media(max-width:759px){.mass:nth-child(2n){border-right:0}.mass{border-bottom:1px solid var(--line)}}
.mass .v{font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1;font-weight:700;letter-spacing:-.03em;display:block}
.mass .v sup{font-size:.38em;vertical-align:super;color:var(--dim);font-weight:500;margin-left:.15em;letter-spacing:.04em}
.mass .k{margin-top:.5rem;font-family:var(--fm);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);display:block}
.mass::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--accent);
  transition:width .9s var(--e)}
.mass.in::before{width:2.5rem}

/* ---------- Cockpit (die lebende Oberfläche) ---------- */
.cockpit-sec{padding-block:clamp(2rem,4vw,4rem) clamp(4rem,8vw,7rem)}
.cockpit-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  margin-bottom:2.25rem;flex-wrap:wrap}
.cockpit-shell{position:relative}
@media(min-width:1241px){.cockpit-shell{padding:3.75rem 0 0 4rem}}

/* Bemassungslinien um das Cockpit — reines CSS. Beschränkt auf die
   Hülle, damit .bem nicht mit anderem kollidiert. */
.cockpit-shell .bem{position:absolute;pointer-events:none;color:var(--dim)}
.bem .lbl{position:absolute;font-family:var(--fm);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;background:var(--ground);padding-inline:.5rem;white-space:nowrap;
  opacity:0;transition:opacity .5s ease .75s}
.in .bem .lbl{opacity:1}
.bem .ln{position:absolute;background:var(--line-2)}
.bem-top{top:1.5rem;left:3.75rem;right:0;height:1px}
.bem-top .ln{left:0;right:0;top:0;height:1px;transform:scaleX(0);transform-origin:left center;
  transition:transform 1s var(--e) .1s}
.in .bem-top .ln{transform:scaleX(1)}
.bem-top::before,.bem-top::after{content:"";position:absolute;top:-4px;width:1px;height:9px;
  background:var(--line-2);opacity:0;transition:opacity .3s ease .9s}
.bem-top::before{left:0}.bem-top::after{right:0}
.in .bem-top::before,.in .bem-top::after{opacity:1}
.bem-top .lbl{left:50%;transform:translate(-50%,-50%);top:0}
.bem-left{left:1.375rem;top:3.5rem;bottom:38%;width:1px}
.bem-left .ln{left:0;top:0;bottom:0;width:1px;transform:scaleY(0);transform-origin:center top;
  transition:transform 1s var(--e) .1s}
.in .bem-left .ln{transform:scaleY(1)}
.bem-left::before,.bem-left::after{content:"";position:absolute;left:-4px;width:9px;height:1px;
  background:var(--line-2);opacity:0;transition:opacity .3s ease .9s}
.bem-left::before{top:0}.bem-left::after{bottom:0}
.in .bem-left::before,.in .bem-left::after{opacity:1}
.bem-left .lbl{top:50%;left:0;transform:translate(-50%,-50%) rotate(-90deg)}
@media(max-width:1240px){.cockpit-shell .bem{display:none}}

.app{border:1px solid var(--line-2);background:var(--card);box-shadow:var(--shadow);
  display:flex;flex-direction:column;aspect-ratio:3360/1870}
.app > .app-body{flex:1;min-height:0}
@media(max-width:899px){.app{aspect-ratio:auto}}
.app-bar{display:flex;align-items:center;gap:.75rem;padding:.625rem .875rem;
  border-bottom:1px solid var(--line);background:var(--surface)}
.app-bar .dots{display:flex;gap:.375rem}
.app-bar .dots i{width:.5rem;height:.5rem;border:1px solid var(--line-2);border-radius:50%;display:block}
.app-bar .title{font-family:var(--fm);font-size:.6875rem;letter-spacing:.1em;color:var(--ink-2)}
.app-bar .clock{margin-left:auto;font-family:var(--fm);font-size:.6875rem;color:var(--dim);letter-spacing:.08em}

.app-body{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.app-body{grid-template-columns:13rem minmax(0,1fr) 15rem}}
.rail{border-right:1px solid var(--line);padding:.875rem 0}
@media(max-width:899px){.rail{display:none}}
.rail .grp{font-family:var(--fm);font-size:.5625rem;letter-spacing:.16em;color:var(--dim);
  text-transform:uppercase;padding:.75rem 1rem .375rem;margin:0}
.rail a{display:flex;align-items:center;gap:.625rem;padding:.375rem 1rem;text-decoration:none;
  font-size:.8125rem;color:var(--ink-2)}
.rail a .n{font-family:var(--fm);font-size:.625rem;color:var(--dim);width:1.25rem}
@media(hover:hover){.rail a:hover{background:var(--surface);color:var(--ink)}}
.rail a.on{background:var(--ink);color:var(--ground)}
.rail a.on .n{color:var(--ground);opacity:.6}

.appmain{padding:1.125rem 1.25rem;min-width:0}
.appmain-head{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.live{display:inline-flex;align-items:center;gap:.4375rem;font-family:var(--fm);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.live b{width:.4375rem;height:.4375rem;border-radius:50%;background:var(--ok);display:block;
  animation:pulse 2.4s var(--e) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* Gantt / Schichtband
   Das Raster braucht 10rem Beschriftung + 16 Stundenspalten. Auf einem
   Telefon passt das nicht — ohne eigenen Scroll-Container reisst es die
   ganze Seite waagrecht auf. Es scrollt deshalb in sich selbst; der
   Seitenkoerper bleibt ruhig. */
.gantt{border:1px solid var(--line);position:relative;background:var(--app-card);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.gantt .hours,.gantt .row{min-width:42rem}
.gantt .hours{display:grid;grid-template-columns:10rem repeat(16,1fr);border-bottom:1px solid var(--line)}
.gantt .hours span{font-family:var(--fm);font-size:.5625rem;color:var(--dim);padding:.375rem 0;
  text-align:center;border-left:1px solid var(--line)}
.gantt .hours span:first-child{border-left:0;text-align:left;padding-left:.625rem;letter-spacing:.14em}
.gantt .row{display:grid;grid-template-columns:10rem minmax(0,1fr);border-bottom:1px solid var(--line);align-items:center}
.gantt .row:last-child{border-bottom:0}
.gantt .who{padding:.5rem .625rem;font-size:.75rem;display:flex;align-items:center;gap:.5rem;min-width:0}
.gantt .who i{width:.4375rem;height:.4375rem;background:var(--bar);display:block;flex:none}
.gantt .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track{position:relative;height:2.125rem;border-left:1px solid var(--line)}
.bar{position:absolute;top:.4375rem;height:1.25rem;background:var(--bar);
  display:flex;align-items:center;padding-inline:.4375rem;overflow:hidden;
  font-family:var(--fm);font-size:.5625rem;color:var(--bar-fg);letter-spacing:.06em;white-space:nowrap;
  transform-origin:left center;animation:grow .9s var(--e) both}
.bar.alt{background:var(--bar-alt)}
.bar.warn{background:var(--accent);color:var(--on-accent)}
@keyframes grow{from{transform:scaleX(0);opacity:.4}to{transform:scaleX(1);opacity:1}}
.nowline{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);z-index:3}
.nowline::before{content:"";position:absolute;top:-3px;left:-3px;width:7px;height:7px;background:var(--accent)}

.kpis{border-left:1px solid var(--line);padding:1.125rem}
@media(max-width:899px){.kpis{border-left:0;border-top:1px solid var(--line)}}
.kpi{padding-block:.75rem;border-bottom:1px solid var(--line)}
.kpi:last-of-type{border-bottom:0}
.kpi .k{font-family:var(--fm);font-size:.5625rem;letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase;margin:0}
.kpi .v{font-size:1.375rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:.1875rem 0 0}
.kpi .v small{font-size:.6875rem;font-weight:500;color:var(--dim);letter-spacing:0}
.kpi.alert .v{color:var(--accent)}
.aibar{margin-top:1rem;border:1px solid var(--line);padding:.625rem .75rem;background:var(--surface);
  font-family:var(--fm);font-size:.625rem;letter-spacing:.06em;color:var(--ink-2);
  display:flex;align-items:center;gap:.5rem}
.aibar b{width:.375rem;height:.375rem;background:var(--ok);display:block;flex:none}

/* ---------- Modulliste (Stückliste) ---------- */
.mods{border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.mod{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding:1.0625rem 0;
  border-bottom:1px solid var(--line);transition:background .25s var(--e),padding-left .25s var(--e)}
@media(min-width:860px){.mod{grid-template-columns:3rem 14rem minmax(0,1fr)}}
@media(max-width:859px){.mod .d{grid-column:2}}
@media(hover:hover){.mod:hover{background:var(--cold-tint);padding-left:.75rem}
  .mod:hover .n{color:var(--accent)}}
.mod .n{font-family:var(--fm);font-size:.6875rem;color:var(--dim);padding-top:.25rem;letter-spacing:.08em}
.mod .t{font-weight:600;letter-spacing:-.012em}
.mod .d{color:var(--dim);font-size:.875rem;line-height:1.5}

/* ---------- Souveränitäts-Block ---------- */
.sov{background:var(--sov-bg);color:var(--sov-fg);padding-block:clamp(4rem,8vw,7rem);
  position:relative;z-index:2;
  box-shadow:inset 0 1px 0 var(--sov-edge),inset 0 -1px 0 var(--sov-edge)}
.sov .h1{font-size:clamp(2.25rem,6.4vw,5.5rem)}
.sov .lead{color:var(--sov-lead)}
.sov .eyeline{color:var(--sov-mono)}
.sov-grid{display:grid;gap:2.5rem;margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:880px){.sov-grid{grid-template-columns:repeat(3,1fr);gap:3rem}}
.sov-item{border-top:1px solid var(--sov-line);padding-top:1rem}
.sov-item .mono-tag{font-family:var(--fm);font-size:.6875rem;letter-spacing:.14em;color:var(--sov-mono);margin:0}
.sov-item h3{font-size:1rem;font-weight:600;margin:.5rem 0}
.sov-item p{color:var(--sov-body);font-size:.875rem;line-height:1.6;margin:0}

/* ---------- Gegenüberstellung ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:clamp(1.5rem,3vw,2.5rem);font-size:.9375rem}
.tbl th,.tbl td{text-align:left;padding:.875rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--fm);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:500}
.tbl td:first-child{font-weight:600}
.tbl td.no{color:var(--dim)}
.tbl td.yes{color:var(--ok);font-weight:600}
@media(max-width:700px){
  .tbl,.tbl tbody,.tbl tr,.tbl td,.tbl th{display:block}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--line);margin-bottom:.75rem;padding:.5rem}
  .tbl td{border:0;padding:.375rem .625rem}
}

/* ---------- Karten, Listen, Fakten ---------- */
.karten{display:grid;gap:1.25rem;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:820px){.karten{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.karte{border:1px solid var(--line-2);border-radius:0;padding:clamp(1.375rem,2.6vw,2rem);background:var(--card)}
.karte h3{margin:0 0 .625rem}
.karte p{margin:0;color:var(--dim);font-size:.9375rem;line-height:1.55}
.fakten{display:grid;gap:1.5rem;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:820px){.fakten{grid-template-columns:repeat(4,1fr);gap:2rem}}
@media(min-width:560px) and (max-width:819px){.fakten{grid-template-columns:repeat(2,1fr)}}
.fakt{border-top:2px solid var(--ink);padding-top:1.125rem;position:relative}
.fakt::before{content:"";position:absolute;top:-2px;left:0;width:2.5rem;height:2px;background:var(--accent)}
.fakt .n{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1;font-weight:700;letter-spacing:-.03em;margin:0}
.fakt p{color:var(--dim);font-size:.875rem;line-height:1.55;margin:.625rem 0 0}
.liste{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:.75rem}
.liste li{display:flex;gap:.75rem;color:var(--dim);font-size:.9375rem;line-height:1.55}
.liste li::before{content:"";width:.4375rem;height:.4375rem;background:var(--ink);
  flex:none;margin-top:.5625rem}

/* ---------- Technische Daten ---------- */
.specs{border-top:1px solid var(--line-2);margin-top:clamp(2rem,4vw,3rem)}
.srow{display:grid;gap:.5rem;padding:1.375rem 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.srow{grid-template-columns:15rem 1fr;gap:2rem}}
.srow dt{font-weight:600;letter-spacing:-.012em}
.srow dd{margin:0;color:var(--dim);font-size:.9375rem;line-height:1.55}

/* ---------- Abschluss-Box ---------- */
.endbox{border:1px solid var(--line-2);padding:clamp(2rem,5vw,4rem);background:var(--surface)}

/* ---------- Fusszeile ---------- */
footer.site{border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,3.5rem) 1.5rem;background:var(--stage-alt)}
footer.site .cols{display:grid;gap:2rem;margin-bottom:2.5rem}
@media(min-width:760px){footer.site .cols{grid-template-columns:1.4fr repeat(3,1fr)}}
footer.site h4{font-family:var(--fm);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .875rem;font-weight:600}
footer.site ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
footer.site a{text-decoration:none;color:var(--ink-2);font-size:.9375rem}
@media(hover:hover){footer.site a:hover{color:var(--accent)}}
footer.site .unten{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.5rem;border-top:1px solid var(--line);font-family:var(--fm);
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* Privacy-Zeile: ein Satz Selbstauskunft über dem Schlussstrich —
   dezent, Mono in Versalien, verweist auf die Datenschutzerklärung. */
footer.site .datenlinie{display:block;margin-bottom:1.25rem;font-family:var(--fm);
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  text-decoration:none}
@media(hover:hover){footer.site .datenlinie:hover{color:var(--accent)}}
footer.site .datenlinie:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Sprungmarke für die Tastatur ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--on-accent);
  padding:.75rem 1.25rem;border-radius:0;font-weight:600}
.skip:focus{left:0}

/* ---------- Burger und Vollbildmenü ----------------------------
   Bis 1100 px weicht die Navigation einem Burger. Das Menü öffnet
   ganzflächig. Ohne JavaScript bleibt die Navigation sichtbar und
   bricht um — der Burger erscheint dann gar nicht.

   Warum 1100 px und zusätzlich eine Messung in site.js: Eine feste
   Zahl trifft nur den heutigen Bestand. Kommt ein Navigationspunkt
   dazu (Relay), wächst der Bedarf, und die Seite läuft in einem
   schmalen Band waagrecht über — genau der Fehler, den es hier zu
   vermeiden gilt. site.js misst deshalb den tatsächlichen Platzbedarf
   und setzt data-eng="true", wenn es auch oberhalb der Schwelle eng
   wird. Die Medienabfrage bleibt als flackerfreier Sockel. */
.burger{
  display:none;width:2.75rem;height:2.75rem;flex:none;padding:0;
  border:1px solid var(--line-2);border-radius:0;background:transparent;
  color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;
  touch-action:manipulation;place-items:center;
}
.burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.burger span{display:block;width:1.125rem;height:1.5px;background:currentColor;
  transition:transform .3s var(--e),opacity .2s var(--e)}
.burger span + span{margin-top:.3125rem}
.js .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.4688rem) rotate(45deg)}
.js .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.js .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.4688rem) rotate(-45deg)}
@media(max-width:1240px){.js .burger{display:grid}}
.js header.site[data-eng="true"] .burger{display:grid}
.no-js header.site nav{display:flex;flex-wrap:wrap}

.menu-full{
  position:fixed;inset:0;z-index:90;background:var(--ground);
  display:flex;flex-direction:column;padding:5rem var(--gut) 2rem;
  opacity:0;visibility:hidden;transform:translateY(-.75rem);
  transition:opacity .3s var(--e),transform .35s var(--e),visibility .3s;
  overflow-y:auto;overscroll-behavior:contain;
}
.menu-full[data-offen="true"]{opacity:1;visibility:visible;transform:none}
.menu-full nav{display:flex;flex-direction:column;gap:.25rem}
.menu-full nav a{
  text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.75rem,8vw,2.5rem);line-height:1.15;padding:.4375rem 0;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(12px);
}
.menu-full[data-offen="true"] nav a{opacity:1;transform:none;
  transition:opacity .4s var(--e),transform .4s var(--e)}
.menu-full nav a[aria-current="page"]{color:var(--accent)}
.menu-full .unten{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:1rem}
.menu-full .unten .tt{align-self:flex-start}
.menu-full .unten .btn{justify-content:center}
body.menu-offen{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .menu-full,.menu-full nav a{transition:none!important;transform:none!important}
}

/* ---------- Kopfzeile auf Telefonen ------------------------------
   Marke, Umschalter, Termin und Burger passen nebeneinander nicht auf
   ein Telefon. Umschalter und Termin stehen im Vollbildmenü. */
@media(max-width:620px){
  .js header.site .kopf-rechts .tt{display:none}
}
@media(max-width:430px){
  .js header.site .kopf-rechts .btn.sm{display:none}
  header.site .wrap{gap:.5rem}
  .brand{font-size:.875rem}
}

/* ================================================================
   Nachbau der echten App-Bildschirme (Nachtrag 3, 31.08.2026)
   Vorlage: die Bildschirmfotos der Mac-App (assets/screenshots im
   Repo — nur Referenz, nie ausgeliefert). Struktur und Inhalte
   detailgetreu, Farben AUSSCHLIESSLICH über Token — hell und dunkel
   stimmen dadurch automatisch. Die Instrument-Fassung (Fensterrahmen,
   Bemassung) bleibt scharfkantig; IM Fenster gelten die weichen
   Radien der echten App: der Nachbau bildet die App ab, wie es ein
   Foto täte.
   ================================================================ */
.nbau{display:grid;grid-template-columns:2.75rem minmax(0,1fr);
  background:var(--app-bg);color:var(--app-ink);font-size:.6875rem;line-height:1.4;
  overflow:hidden;min-height:0}
.nb-rail{background:var(--app-rail);border-right:1px solid var(--app-line);
  display:flex;flex-direction:column;align-items:center;padding:.5rem 0;gap:.125rem}
.nb-rail span.ikn{width:1.875rem;height:1.875rem;display:grid;place-items:center;border-radius:.5rem;
  color:var(--app-rail-ink)}
.nb-rail span.ikn svg{width:.9375rem;height:.9375rem;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.nb-rail span.ikn.on{background:var(--accent);color:var(--on-accent)}
.nb-rail .sp{margin-top:auto;border-top:1px solid var(--app-line);width:60%;padding-top:.25rem}
.nb-rail .me{width:1.625rem;height:1.625rem;border-radius:50%;background:var(--accent-tint);
  border:1px solid var(--accent-line);color:var(--accent);display:grid;place-items:center;
  font-size:.5rem;font-weight:700;margin-top:.375rem}
.nb-main{position:relative;min-width:0;padding:.75rem .875rem;overflow:hidden;background:var(--app-wash)}
.nb-titel{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .625rem}
.nb-titel h4{font-size:1.125rem;font-weight:700;letter-spacing:-.03em;margin:0}
.nb-titel .aktion{margin-left:auto;padding:.1875rem .5625rem;border-radius:.3125rem;
  background:var(--accent);color:var(--on-accent);font-size:.5625rem;font-weight:700;white-space:nowrap}

/* Werkzeugleiste (Mitarbeiter, Arbeitsplan) */
.tbar{display:flex;align-items:center;gap:.375rem;margin-bottom:.625rem;flex-wrap:wrap}
.tseg{display:inline-flex;gap:.125rem;padding:.125rem;border:1px solid var(--app-line);border-radius:.4375rem}
.tseg span{padding:.1875rem .5rem;border-radius:.3125rem;font-size:.625rem;color:var(--app-dim);white-space:nowrap}
.tseg span.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.tchip{padding:.1875rem .5rem;border:1px solid var(--app-line);border-radius:.3125rem;
  font-size:.625rem;color:var(--app-dim);white-space:nowrap}
.tchip.on{border-color:var(--accent-line);background:var(--accent-tint);color:var(--accent)}
.tprim{padding:.1875rem .5625rem;border-radius:.3125rem;background:var(--accent);color:var(--on-accent);
  font-size:.625rem;font-weight:700;margin-left:auto;white-space:nowrap}
.tdate{font-size:.625rem;color:var(--app-ink);font-weight:600;padding-inline:.25rem;white-space:nowrap}

/* Mitarbeiter: Gruppenzeilen und Personenkarten */
.mgrp{font-size:.5625rem;letter-spacing:.12em;color:var(--app-dim);font-weight:700;
  text-transform:uppercase;margin:.625rem 0 .375rem}
.mkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.5rem}
.mk{background:var(--app-card);border:1px solid var(--app-line);border-radius:.5rem;
  padding:.625rem .375rem .5rem;text-align:center}
.mk.on{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line)}
.mk .av{width:2.25rem;height:2.25rem;border-radius:50%;margin:0 auto .375rem;display:grid;
  place-items:center;font-size:.6875rem;font-weight:700;color:#fff}
.mk b{display:block;font-size:.625rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk i{display:block;font-style:normal;font-size:.5rem;color:var(--app-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Dienstplan-Raster */
.plan{border:1px solid var(--app-line);border-radius:.5rem;overflow:hidden;background:var(--app-card)}
.prow{display:grid;grid-template-columns:8.5rem repeat(7,minmax(0,1fr)) 2.75rem;
  border-bottom:1px solid var(--app-line)}
.prow:last-child{border-bottom:0}
.prow.head{background:var(--app-card-2)}
.prow.head > *{font-size:.5625rem;color:var(--app-dim);padding:.3125rem .25rem;text-align:center;font-weight:600}
.prow.head > *:first-child{text-align:left;padding-left:.5rem}
.pgroup{grid-column:1/-1;padding:.25rem .5rem;font-size:.5625rem;letter-spacing:.12em;
  color:var(--accent);font-weight:700;background:var(--accent-tint)}
.pwho{display:flex;align-items:center;gap:.375rem;padding:.3125rem .5rem;min-width:0}
.pwho .av{width:1.125rem;height:1.125rem;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.4375rem;font-weight:700;color:#fff;background:var(--app-card-2)}
.pwho .nm{min-width:0}
.pwho .nm b{display:block;font-size:.625rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwho .nm i{display:block;font-style:normal;font-size:.5rem;color:var(--app-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcell{border-left:1px solid var(--app-line);padding:.1875rem;display:grid;gap:.125rem;align-content:start}
.ptot{border-left:1px solid var(--app-line);display:grid;place-items:center;font-size:.5625rem;
  font-weight:700;color:var(--app-dim)}
.sh{border-radius:.1875rem;padding:.125rem .1875rem;font-size:.4375rem;line-height:1.25;color:#fff;
  font-weight:700;letter-spacing:.02em;text-align:center;overflow:hidden}
.sh i{display:block;font-style:normal;font-weight:500;opacity:.85;font-size:.4375rem}
.sh.service{background:var(--sh-service)}
.sh.bar{background:var(--sh-bar)}
.sh.frei{background:var(--sh-frei)}
.sh.krank{background:var(--sh-krank)}
.sh.ruhe{background:var(--sh-ruhe)}
.sh.bez{background:var(--sh-bezahlt)}
.pfoot{display:grid;grid-template-columns:8.5rem repeat(7,minmax(0,1fr)) 2.75rem;
  border-top:1px solid var(--app-line);background:var(--app-card-2)}
.pfoot > *{font-size:.5rem;color:var(--app-dim);padding:.25rem;text-align:center;font-weight:600}
.pfoot > *:first-child{text-align:left;padding-left:.5rem;letter-spacing:.08em}
.plegend{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;font-size:.5rem;color:var(--app-dim)}
.plegend span{display:inline-flex;align-items:center;gap:.25rem}
.plegend i{width:.5rem;height:.5rem;border-radius:.125rem;display:block}

/* Dashboard-Widgets */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.bcard{background:var(--app-card);border:1px solid var(--app-line);border-radius:.5rem;overflow:hidden;
  display:flex;flex-direction:column;min-width:0}
.bcard > h5{margin:0;padding:.375rem .5rem;font-size:.625rem;font-weight:600;color:var(--app-ink);
  border-bottom:1px solid var(--app-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbody{padding:.4375rem .5rem;display:grid;gap:.3125rem;font-size:.5625rem;color:var(--app-dim);align-content:start}
.bbody .duty{display:flex;justify-content:space-between;gap:.5rem;color:var(--app-ink);min-width:0}
.bbody .duty span{color:var(--app-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.bbody .gross{font-size:1.25rem;font-weight:700;color:var(--app-ink)}
.bbody .gross small{font-size:.5625rem;font-weight:400;color:var(--app-dim)}
.stamp{background:var(--ok);color:#fff;border-radius:.3125rem;padding:.3125rem;text-align:center;
  font-size:.625rem;font-weight:700}
.bok{display:flex;align-items:center;gap:.3125rem;color:var(--ok);font-size:.5625rem;font-weight:600}
.bok::before{content:"";width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor;flex:none}
.wetter{display:flex;align-items:center;gap:.5rem}
.wetter .grad{font-size:1.375rem;font-weight:700;color:var(--app-ink);line-height:1}
.wetter .zu{font-size:.5rem}
.heat{display:grid;grid-template-columns:3.25rem repeat(7,1fr) 1.5rem;gap:.125rem;align-items:center}
.heat b{font-size:.5rem;font-weight:600;color:var(--app-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heat u{text-decoration:none;font-size:.4375rem;color:var(--app-dim);text-align:center}
.heat s{text-decoration:none;border-radius:.125rem;text-align:center;font-size:.4375rem;color:#fff;
  padding:.1875rem 0;font-weight:700}
.heat s.hi{background:var(--sh-krank)}
.heat s.ok{background:var(--sh-frei)}
.heat s.no{background:var(--app-card-2);color:var(--app-dim)}
.feedz{display:flex;justify-content:space-between;gap:.5rem;color:var(--app-ink);min-width:0}
.feedz b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feedz span{color:var(--app-dim);flex:none;font-size:.5rem}
.kaltag{display:flex;gap:.375rem;align-items:center;color:var(--app-ink);min-width:0}
.kaltag i{width:2px;align-self:stretch;background:var(--ok);flex:none;border-radius:1px}
.kaltag.zwei i{background:var(--sh-service)}
.kaltag .kt{min-width:0}
.kaltag .kt b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaltag .kt span{color:var(--app-dim);font-size:.5rem}

/* Lohn: Funktionskarten */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.fcard{background:var(--app-card);border:1px solid var(--app-line);border-radius:.5rem;padding:.5rem .5625rem;min-width:0}
.fcard .ic{width:1.375rem;height:1.375rem;border-radius:.375rem;display:grid;place-items:center;margin-bottom:.375rem}
.fcard .ic svg{width:.8125rem;height:.8125rem;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fcard b{display:block;font-size:.625rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.1875rem}
.fcard p{margin:0;font-size:.5rem;color:var(--app-dim);line-height:1.45}

/* Chat */
.chatnb{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.5rem}
.chan{background:var(--app-card);border:1px solid var(--app-line);border-radius:.5rem;padding:.4375rem;overflow:hidden}
.chan h6{margin:.25rem .25rem .1875rem;font-size:.5rem;color:var(--app-dim);font-weight:700;letter-spacing:.06em}
.chan .k{display:flex;align-items:center;gap:.3125rem;padding:.1875rem .3125rem;border-radius:.3125rem;
  color:var(--app-ink);font-size:.5625rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan .k svg{width:.625rem;height:.625rem;flex:none;stroke:var(--app-dim);fill:none;stroke-width:1.8}
.chan .k.on{border:1px solid var(--accent-line);background:var(--accent-tint);color:var(--accent)}
.chan .k.on svg{stroke:var(--accent)}
.chan .leer{margin:.125rem .3125rem;font-size:.5rem;color:var(--app-dim)}
.chan .audit{margin-top:.375rem;padding-top:.375rem;border-top:1px solid var(--app-line);
  font-size:.5rem;color:var(--app-dim);display:flex;align-items:center;gap:.25rem}
.chan .audit svg{width:.5625rem;height:.5625rem;stroke:currentColor;fill:none;stroke-width:1.8}
.conv{background:var(--app-card);border:1px solid var(--app-line);border-radius:.5rem;
  display:flex;flex-direction:column;overflow:hidden}
.conv-h{display:flex;align-items:center;gap:.4375rem;padding:.4375rem .5625rem;border-bottom:1px solid var(--app-line)}
.conv-h .hash{width:1.375rem;height:1.375rem;border-radius:.375rem;background:var(--accent-tint);
  color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:.75rem}
.conv-h b{font-size:.75rem;font-weight:700;letter-spacing:-.015em}
.conv-h i{font-style:normal;font-size:.5rem;color:var(--app-dim);display:block}
.conv-b{flex:1;padding:.5rem .5625rem;display:flex;flex-direction:column;gap:.3125rem;justify-content:flex-end;min-height:7rem}
.cmsg{max-width:72%;padding:.25rem .4375rem;border-radius:.4375rem;font-size:.5625rem;line-height:1.4}
.cmsg.du{background:var(--app-card-2)}
.cmsg.ich{margin-left:auto;background:var(--accent);color:var(--on-accent)}
.cmsg u{display:block;text-decoration:none;font-size:.4375rem;opacity:.7;margin-top:.125rem}
.slash{display:flex;gap:.25rem;padding:0 .5625rem .3125rem;flex-wrap:wrap}
.slash span{font-family:var(--fm);font-size:.4375rem;padding:.125rem .3125rem;border-radius:.25rem;
  background:var(--app-card-2);color:var(--app-dim)}
.cinput{display:flex;gap:.3125rem;padding:.3125rem .5625rem .4375rem}
.cinput div{flex:1;border:1px solid var(--app-line);border-radius:.375rem;padding:.25rem .4375rem;
  font-size:.5625rem;color:var(--app-dim)}
.cinput b{width:1.5rem;border-radius:.375rem;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-size:.625rem}

/* Fassung im Modulkapitel: Instrument-Rahmen um das App-Fenster.
   Das Fenster traegt das Seitenverhaeltnis der Vorlagen (3360x1870):
   der Inhalt sitzt oben, darunter bleibt App-Flaeche — wie im echten
   Bildschirm. Waechst der Inhalt darueber hinaus (Arbeitsplan),
   waechst das Fenster mit. Auf dem Telefon gilt das Verhaeltnis
   nicht — dort ist der Inhalt einspaltig hoeher als breit. */
.nb-fassung{grid-column:1/-1;margin-top:.75rem}
.nb-fassung .nb-win{border:1px solid var(--line-2);background:var(--card);box-shadow:var(--shadow);
  display:flex;flex-direction:column;aspect-ratio:3360/1870}
.nb-fassung .nbau{flex:1;min-height:0}
@media(max-width:700px){.nb-fassung .nb-win{aspect-ratio:auto}}
.nb-fassung .nb-cap{margin-top:.5rem;font-family:var(--fm);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.nb-bar{display:flex;align-items:center;gap:.75rem;padding:.5rem .875rem;
  border-bottom:1px solid var(--line);background:var(--surface)}
.nb-bar .dots{display:flex;gap:.375rem}
.nb-bar .dots i{width:.5rem;height:.5rem;border:1px solid var(--line-2);border-radius:50%;display:block}
.nb-bar .t{font-family:var(--fm);font-size:.625rem;letter-spacing:.1em;color:var(--ink-2)}

@media(max-width:700px){
  .nbau{grid-template-columns:1fr}
  .nb-rail{display:none}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chatnb{grid-template-columns:1fr}
  .chan{display:none}
  /* Wie beim Gantt (Befund 1): das Wochenraster scrollt in sich,
     die Seite bleibt ruhig. */
  .plan{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prow,.pfoot{min-width:34rem}
}

/* Dashboard-Fassung im Cockpit: ausgeklappte Text-Seitenleiste wie im
   Original-Bildschirm der Übersicht (die schmale Symbolschiene der
   übrigen Bildschirme steht in .nb-rail). */
.app-body.zwei{grid-template-columns:12rem minmax(0,1fr)}
@media(max-width:899px){.app-body.zwei{grid-template-columns:1fr}}
/* Volle Fensterhoehe: Profil klebt unten an der Seitenleiste,
   dazwischen bleibt Luft — wie im Original. */
.app-body.zwei .rail{display:flex;flex-direction:column}
.app-body.zwei .rail .profil{margin-top:auto}
.rail .betrieb{display:flex;gap:.5rem;align-items:center;padding:.25rem 1rem .75rem;margin:0;
  border-bottom:1px solid var(--line)}
.rail .betrieb .logo{width:1.625rem;height:1.625rem;flex:none;border-radius:.375rem;
  background:var(--app-card-2);border:1px solid var(--app-line);display:grid;place-items:center;
  font-size:.5625rem;font-weight:700;color:var(--app-dim)}
.rail .betrieb b{display:block;font-size:.625rem;font-weight:600;line-height:1.3}
.rail .betrieb i{display:block;font-style:normal;font-size:.5rem;color:var(--dim)}
.rail .e{display:flex;align-items:center;gap:.5rem;padding:.3125rem 1rem;font-size:.6875rem;color:var(--ink-2)}
.rail .e svg{width:.8125rem;height:.8125rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.rail .e.on{background:var(--ink);color:var(--ground)}
.rail .trenn{display:block;height:1px;background:var(--line);margin:.5rem 1rem}
.rail .profil{display:flex;gap:.5rem;align-items:center;padding:.75rem 1rem .25rem;margin:.5rem 0 0;
  border-top:1px solid var(--line)}
.rail .profil .av{width:1.5rem;height:1.5rem;flex:none;border-radius:50%;background:var(--accent-tint);
  border:1px solid var(--accent-line);color:var(--accent);display:grid;place-items:center;
  font-size:.5rem;font-weight:700}
.rail .profil b{display:block;font-size:.625rem;font-weight:600;line-height:1.3}
.rail .profil i{display:block;font-style:normal;font-size:.5rem;color:var(--dim)}
.wetter .wsym{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:var(--sh-bar);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Nachbau, Etappe 2: Kiosk, Berichte, Dokumente, Betriebsdaten,
   News, Protokoll — gleiche Token-Disziplin wie oben. */
.kiosk{text-align:center;padding-block:.5rem}
.kiosk .uhrsym{width:2rem;height:2rem;stroke:var(--sh-service);fill:none;stroke-width:1.7;margin:0 auto .375rem;display:block}
.kiosk h4{font-size:1rem;font-weight:700;margin:0 0 .125rem}
.kiosk .zu{font-size:.5625rem;color:var(--app-dim);margin:0 0 .625rem}
.kiosk .namen{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.375rem;text-align:center}
.kiosk .namen span{background:var(--app-card);border:1px solid var(--app-line);border-radius:.5rem;
  padding:.5rem .375rem;display:block}
.kiosk .namen svg{width:.8125rem;height:.8125rem;stroke:var(--sh-service);fill:none;stroke-width:1.7;margin:0 auto .1875rem;display:block}
.kiosk .namen b{display:block;font-size:.5625rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kiosk .namen i{display:block;font-style:normal;font-size:.4375rem;color:var(--app-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rep-filter{display:flex;gap:.75rem;align-items:end;margin-bottom:.5rem;flex-wrap:wrap}
.rep-filter label{display:grid;gap:.125rem;font-size:.5rem;color:var(--app-dim)}
.rep-filter label span{border:1px solid var(--app-line);border-radius:.3125rem;padding:.1875rem .5rem;
  font-size:.625rem;color:var(--app-ink);background:var(--app-card)}
.rep-tbl{width:100%;border-collapse:collapse;background:var(--app-card);border:1px solid var(--app-line);
  border-radius:.5rem;overflow:hidden;font-size:.5625rem}
.rep-tbl th{font-size:.5rem;color:var(--app-dim);text-align:left;font-weight:600;
  padding:.3125rem .4375rem;border-bottom:1px solid var(--app-line);background:var(--app-card-2)}
.rep-tbl td{padding:.25rem .4375rem;border-bottom:1px solid var(--app-line);color:var(--app-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rep-tbl tr:last-child td{border-bottom:0}
.rep-tbl .kto{color:var(--sh-bezahlt)}
.rep-tbl .kto2{color:var(--sh-frei)}
.rep-tbl .z{text-align:right}
.rep-meta{font-size:.5rem;color:var(--app-dim);margin:0 0 .375rem;text-align:right}

.dok-tabs{display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:.5rem}
.dok-tabs span{border:1px solid var(--app-line);border-radius:.4375rem;background:var(--app-card);
  padding:.3125rem .5625rem;font-size:.5625rem;font-weight:600;display:inline-flex;gap:.3125rem;align-items:center}
.dok-tabs span.on{border-color:var(--accent-line);background:var(--accent-tint);color:var(--accent)}
.dok-tabs svg{width:.625rem;height:.625rem;stroke:currentColor;fill:none;stroke-width:1.8}
.dok-such{border:1px solid var(--app-line);border-radius:.4375rem;background:var(--app-card);
  color:var(--app-dim);font-size:.5625rem;padding:.25rem .5rem;margin-bottom:.375rem;max-width:16rem}
.dok-grp{display:flex;align-items:center;gap:.3125rem;font-size:.6875rem;font-weight:700;margin:.5rem 0 .375rem}
.dok-grp em{font-style:normal;font-size:.5rem;font-weight:600;background:var(--sh-bar);color:#fff;
  border-radius:.5rem;padding:0 .3125rem}
.dok-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
@media(max-width:700px){.dok-karten{grid-template-columns:1fr}}
.dok{background:var(--app-card);border:1px solid var(--app-line);border-radius:.5rem;padding:.5rem .5625rem;
  display:flex;flex-direction:column;gap:.25rem;min-width:0}
.dok b{font-size:.5625rem;font-weight:700;line-height:1.35}
.dok .quelle{font-size:.5rem;color:var(--app-dim)}
.dok p{margin:0;font-size:.5rem;color:var(--app-dim);line-height:1.45}
.dok .chips{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:auto;padding-top:.25rem}
.dok .chips span{font-size:.4375rem;border-radius:.5rem;padding:.0625rem .3125rem;
  background:var(--app-card-2);color:var(--app-dim)}
.dok .chips span.blau{color:var(--sh-bezahlt)}
.dok .chips span.rot{color:var(--sh-krank)}
.schulzeile{display:flex;align-items:center;gap:.5rem;background:var(--app-card);
  border:1px solid var(--app-line);border-radius:.5rem;padding:.375rem .5625rem;margin-top:.5rem;font-size:.5625rem}
.schulzeile .pill{font-size:.4375rem;border-radius:.5rem;padding:.0625rem .3125rem;color:#fff;flex:none}
.schulzeile i{font-style:normal;color:var(--app-dim);font-size:.5rem}

.bd-kopf{display:flex;align-items:center;gap:.625rem;background:var(--app-card);border:1px solid var(--app-line);
  border-radius:.5rem;padding:.5625rem .625rem;margin-bottom:.5rem}
.bd-kopf .logo{width:2.25rem;height:2.25rem;border-radius:50%;flex:none;border:1px solid var(--app-line);
  background:var(--app-card-2);display:grid;place-items:center;font-size:.5625rem;font-weight:700;color:var(--app-dim)}
.bd-kopf b{display:block;font-size:.875rem;font-weight:700;letter-spacing:-.02em}
.bd-kopf .okz{display:flex;align-items:center;gap:.25rem;font-size:.5rem;color:var(--ok);font-weight:600}
.bd-kopf .okz::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:currentColor}
.bd-kopf .tchip{margin-left:auto}
.bd-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media(max-width:700px){.bd-karten{grid-template-columns:1fr}}
.bd{background:var(--app-card);border:1px solid var(--app-line);border-radius:.5rem;overflow:hidden;min-width:0}
.bd > h5{margin:0;padding:.375rem .5rem;font-size:.5625rem;font-weight:600;border-bottom:1px solid var(--app-line)}
.bd dl{margin:0;padding:.375rem .5rem;display:grid;grid-template-columns:auto 1fr;gap:.1875rem .75rem;font-size:.5625rem}
.bd dt{color:var(--app-dim)}
.bd dd{margin:0;color:var(--app-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.news-chips{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:.5rem}
.news-chips span{font-size:.5rem;border:1px solid var(--app-line);border-radius:.5rem;
  padding:.0625rem .375rem;color:var(--app-dim);background:var(--app-card)}
.news-chips span.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.news-liste{display:grid;gap:.375rem}
.news{background:var(--app-card);border:1px solid var(--app-line);border-left:2px solid var(--sh-service);
  border-radius:.375rem;padding:.4375rem .5625rem;position:relative;min-width:0}
.news .tags{display:flex;gap:.25rem;margin-bottom:.1875rem}
.news .tags span{font-size:.4375rem;border-radius:.375rem;padding:0 .25rem;background:var(--app-card-2);color:var(--app-dim)}
.news b{display:block;font-size:.625rem;font-weight:700;line-height:1.35}
.news p{margin:.125rem 0 .1875rem;font-size:.5rem;color:var(--app-dim);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news i{font-style:normal;font-size:.4375rem;color:var(--app-dim)}
.news::after{content:"";position:absolute;right:.5rem;top:50%;width:.3125rem;height:.3125rem;
  border-radius:50%;background:var(--accent);transform:translateY(-50%)}

.protokoll{display:grid;gap:.25rem}
.prot{display:flex;gap:.4375rem;align-items:flex-start;background:var(--app-card);
  border:1px solid var(--app-line);border-radius:.375rem;padding:.3125rem .5rem}
.prot svg{width:.6875rem;height:.6875rem;flex:none;stroke:var(--accent);fill:none;stroke-width:1.7;margin-top:.0625rem}
.prot b{display:block;font-size:.5625rem;font-weight:500;line-height:1.35}
.prot i{display:block;font-style:normal;font-size:.4375rem;color:var(--app-dim)}

/* ================================================================
   Die Grenze, gezeichnet (Nachtrag 4): Haus-Szene als technische
   Zeichnung. 2D-Canvas ist der Normalfall; die räumliche Fassung
   lädt lazy darüber. Fassung scharfkantig, Beschriftung Mono,
   Farben aus den Token (die Szene liest sie zur Laufzeit).
   ================================================================ */
.scene{position:relative;margin-top:clamp(2rem,5vw,3.5rem)}
.scene-frame{position:relative;border:1px solid var(--line-2);border-radius:0;overflow:hidden;
  background:linear-gradient(180deg,var(--scene-a),var(--scene-b))}
#stage{width:100%;height:clamp(22rem,54vh,32rem);display:block}
.scene-ui{position:absolute;inset:0;pointer-events:none}
.tagpt{position:absolute;font-family:var(--fm);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.tagpt b{width:.375rem;height:.375rem;display:block}
.tagpt.inside{left:5%;top:12%}
.tagpt.inside b{background:var(--accent)}
.tagpt.outside{right:5%;top:12%;color:var(--cold)}
.tagpt.outside b{background:var(--cold)}
.counter{position:absolute;right:5%;bottom:6%;text-align:right}
.counter .n{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1;font-weight:700;
  letter-spacing:-.03em;color:var(--cold);margin:0}
.counter .n.zero{color:var(--accent)}
.counter .l{font-family:var(--fm);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:.375rem 0 0}
.switcher{display:flex;justify-content:center;margin-top:1.25rem;gap:.125rem;
  border:1px solid var(--line-2);border-radius:0;padding:.1875rem;width:fit-content;
  margin-inline:auto;background:transparent}
.switcher button{
  -webkit-appearance:none;appearance:none;border:0;background:transparent;color:var(--dim);
  cursor:pointer;font-family:var(--fm);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;padding:.5625rem 1rem;border-radius:0;touch-action:manipulation;
  transition:background .25s var(--e),color .25s var(--e);
}
.switcher button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.switcher button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hint{text-align:center;color:var(--dim);font-size:.8125rem;margin:.75rem auto 0;max-width:52ch}

/* Räumliche Fassung: liegt über der flachen und blendet sich ein,
   sobald sie bereit ist — vorher nie ein leeres Rechteck. */
.szene3d{position:absolute;inset:0;z-index:1;opacity:0;
  transition:opacity .6s var(--e);pointer-events:none}
.szene3d[data-bereit="true"]{opacity:1}
.szene3d canvas{width:100%;height:100%;display:block}
.scene-frame #stage{transition:opacity .6s var(--e)}

/* ---------- Details-Knopf mit Kontextmenü ------------------------
   Schwebt unten rechts, bewusst NICHT in der Kopfzeile (deren Breite
   ist die Reserve für «Kundenkonto», Befund 16). Signalfarbe als
   einziger Akzent der Seite — auffällig, aber scharfkantig und Mono
   wie der Rest des Instruments. Entsteht in site.js zur Laufzeit;
   ohne JavaScript existiert er nicht (die Ziele stehen in der
   Navigation). */
.detail-fab{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:80;
  display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;
  font-family:var(--fm);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:0;
  cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:manipulation;
  box-shadow:var(--shadow);
  transition:background .2s var(--e),transform .2s var(--e);
}
@media(hover:hover){.detail-fab:hover{background:var(--accent-hi);border-color:var(--accent-hi);transform:translateY(-1px)}}
.detail-fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.detail-fab .pfeil{width:.5625rem;height:.5625rem;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .25s var(--e)}
.detail-fab[aria-expanded="true"] .pfeil{transform:rotate(-135deg) translateY(-1px)}

.detail-menu{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:calc(clamp(1rem,3vw,2rem) + 3.5rem);z-index:80;
  min-width:16rem;background:var(--card);border:1px solid var(--line-2);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(.5rem);
  transition:opacity .25s var(--e),transform .25s var(--e),visibility .25s;
}
.detail-menu[data-offen="true"]{opacity:1;visibility:visible;transform:none}
.detail-menu .kopfzeile{padding:.625rem 1rem;border-bottom:1px solid var(--line);
  font-family:var(--fm);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.detail-menu a{
  display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.5rem;align-items:baseline;
  padding:.75rem 1rem;text-decoration:none;color:var(--ink);font-weight:600;letter-spacing:-.012em;
  border-bottom:1px solid var(--line);
}
.detail-menu a:last-child{border-bottom:0}
.detail-menu a .n{font-family:var(--fm);font-size:.625rem;font-weight:500;color:var(--dim);letter-spacing:.08em}
.detail-menu a .zu{display:block;font-size:.75rem;font-weight:400;color:var(--dim);margin-top:.125rem}
@media(hover:hover){.detail-menu a:hover{background:var(--accent-tint)}
  .detail-menu a:hover .n{color:var(--accent)}}
.detail-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.detail-fab,.detail-menu{transition:none!important;transform:none!important}}
/* Im offenen Vollbildmenü hat der Knopf nichts verloren */
body.menu-offen .detail-fab,body.menu-offen .detail-menu{visibility:hidden}