/* ---------- Einführungstour ----------
   Kein Foliensatz, sondern ein Loch im abgedunkelten Bild: der Ring
   liegt auf dem echten Bedienelement, die Karte daneben. Die Maße
   werden zur Laufzeit gerechnet, damit die Tour einen Layoutwechsel
   ueberlebt. Der Ribbon bleibt bewusst hell und bedienbar. */
.tour{position:fixed;inset:0;z-index:70;}
.tour-veil{position:fixed;left:0;top:0;width:0;height:0;background:rgba(24,24,24,.55);
           transition:left var(--duration-slow) var(--ease-smooth-out),top var(--duration-slow) var(--ease-smooth-out),
                      width var(--duration-slow) var(--ease-smooth-out),height var(--duration-slow) var(--ease-smooth-out);}
.tour-spot{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:10px;border:2px solid var(--amber);
           pointer-events:none;
           transition:left var(--duration-slow) var(--ease-smooth-out),top var(--duration-slow) var(--ease-smooth-out),
                      width var(--duration-slow) var(--ease-smooth-out),height var(--duration-slow) var(--ease-smooth-out);}
.tour-spot.is-off{border-width:0;border-radius:0;}
.tour-card{position:fixed;left:50%;top:50%;width:320px;max-width:calc(100vw - 2.4em);
           background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;padding:1.4em 1.5em;
           transition:left var(--duration-slow) var(--ease-smooth-out),top var(--duration-slow) var(--ease-smooth-out);}
.tour-progress{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.55em;}
.tour-card h3{font-size:1.05rem;margin-bottom:.35em;}
.tour-card p{font-size:.86rem;line-height:1.5;margin-bottom:1.3em;}
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:1em;}
.tour-skip{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.02em;color:var(--ink-soft);text-decoration:underline;padding:0;}
.tour-skip:hover{color:var(--ink);}
.tour-nav{display:flex;gap:.5em;flex-shrink:0;}

/* ---------- KI-Zusammenfassung je Unterlage ----------
   Zweite Aktion neben dem Download: die Lehrperson liest den Kern des
   Kapitels, ohne das PDF zu oeffnen. Die Texte sind aus dem Handbuch
   vom 12.08.2026 vorbereitet, nicht live erzeugt. */
.download-actions{display:flex;align-items:center;gap:.5em;flex-shrink:0;}
.overlay-card.summary-card{max-width:560px;max-height:calc(100vh - 6em);overflow-y:auto;}
.summary-meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.1em;}
.summary-card h3{margin-bottom:.55em;padding-right:2em;}
.summary-card > p{font-size:.92rem;color:var(--ink);}
.summary-list{margin:0 0 1.3em;padding-left:1.15em;}
.summary-list li{font-size:.87rem;color:var(--ink-soft);line-height:1.5;margin-bottom:.5em;}
.summary-watch{border-left:3px solid var(--amber);background:var(--tint);border-radius:0 8px 8px 0;padding:.9em 1.1em;margin-bottom:1.3em;}
.summary-watch b{display:block;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:var(--green-deep);margin-bottom:.35em;}
.summary-watch p{margin:0;font-size:.86rem;color:var(--ink);}
.summary-foot{display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap;padding-top:1.1em;border-top:1px dashed var(--line);}
.summary-foot span{font-size:.74rem;line-height:1.45;color:var(--ink-soft);max-width:36ch;}
.tool-card.tool-card-planned{border-style:dashed;}
.tool-badge{display:inline-block;font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--green-deep);border:1px solid var(--line);background:var(--tint);border-radius:5px;padding:.1em .45em;margin-left:.5em;vertical-align:middle;}
.tool-badge.phase2{color:var(--ink-soft);background:transparent;border-style:dashed;}
.tool-badge.phase3{color:var(--ink-soft);background:transparent;border-style:dotted;}
.tool-card.tool-card-off{opacity:.62;}
.downloads-subsection + .downloads-subsection{margin-top:1.4em;}
.method-level{flex-wrap:wrap;gap:.45em;}
.method-lead{font-size:.88rem;color:var(--ink);margin:-.2em 0 .5em;}
/* „Zu finden in“: kleine Anmerkung auf der Karte, die sagt, wo der
   Weg im Handbuch beschrieben ist. Getoente Flaeche, damit sie sich vom
   Kartentext abhebt, Text im Lesefont, damit Titel lesbar bleiben. */
.method-src{margin:1.1em 0 0;padding:.7em .85em;background:var(--tint);border-left:2px solid var(--line);border-radius:0 7px 7px 0;}
.method-src b{display:flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-weight:400;font-size:.58rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--green-deep);margin-bottom:.35em;}
.method-src b svg{flex-shrink:0;}
.method-src span{display:block;font-size:.76rem;line-height:1.45;color:var(--ink);}
/* Ansprechperson in der Hilfe: eine echte Person mit Telefon zuoberst. */
.help-contact{border-left:4px solid var(--green);}
.help-contact-head{display:flex;align-items:center;gap:1em;margin:.9em 0 1.1em;}
.help-contact-head h3{margin:0 0 .2em;}
.help-contact-role{font-size:.8rem;line-height:1.45;color:var(--ink-soft);}
.help-contact-actions{display:flex;gap:.7em;flex-wrap:wrap;margin-bottom:1.1em;}
.help-contact-actions a{text-decoration:none;}
.method-rec{display:inline-block;font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;
  color:#fff;background:var(--green);border-radius:5px;padding:.15em .5em;margin-left:.5em;vertical-align:middle;}
.phase-legend{display:flex;align-items:center;flex-wrap:wrap;gap:.35em;margin:-.2em 0 1.2em;}
.phase-legend .tool-badge{margin-left:0;}

/* ---------- Cockpit ---------- */
/* Der weisse Kopfbalken ist entfallen. Was darin stand, sitzt jetzt in
   der Menuespalte: das Markenzeichen oben, die Lehrperson unten. */
.nav-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--paper-raised);
  transition:background var(--duration-quick) var(--ease-smooth-out);}
.nav-burger:hover{background:rgba(24,24,24,.05);}
.onboarding-banner{background:var(--paper-raised);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow-off-sm);padding:1.3em 1.4em;margin-bottom:1.7em;}
.external-callout{background:rgba(0,85,255,.07);border:1.5px solid var(--sky);border-radius:var(--radius);padding:1.2em 1.4em;margin-bottom:1.7em;}
.external-callout p{color:var(--ink);font-size:.86rem;margin:0 0 .9em;}
.dept-tag{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--green-deep);background:rgba(0,85,255,.09);border-radius:5px;padding:.25em .6em;margin-right:.7em;flex-shrink:0;white-space:nowrap;}
.onboarding-banner h3{font-size:1.05rem;}
.link-btn{font-family:var(--font-mono);font-size:.72rem;color:var(--green-deep);text-decoration:underline;background:none;padding:0;margin-bottom:1em;display:inline-block;}
/* ---------- Dreispaltiges Cockpit-Raster ----------
   Maße aus dem Figma-Entwurf 27117:6264 übernommen: Menüspalte 292,
   Inhaltsspalte 780, Kontextspalte 332 bei 1680 Rahmenbreite.
   Links das Menü, in der Mitte der Inhalt, rechts die Seitenelemente
   zur geöffneten Company. */
/* Stufe 1, ab 1532: drei volle Spalten wie im Entwurf.
   Die Schwelle ist nicht gerundet, sondern gerechnet: 292 + 780 + 332
   plus zwei Lücken zu 40 plus zweimal 24 Außenabstand ergibt 1532.
   Darunter trägt die volle Menüspalte die Inhaltsbreite nicht mehr. */
.app-body{display:grid;grid-template-columns:292px minmax(0,780px) 332px;gap:40px;
  max-width:1484px;margin:0 auto;padding:32px 24px 72px;align-items:start;}
.app-sidebar{position:sticky;top:60px;align-self:start;display:flex;flex-direction:column;}
.app-center{min-width:0;container-type:inline-size;container-name:main;}
.app-context{position:sticky;top:60px;align-self:start;display:flex;flex-direction:column;gap:20px;}

/* Stufe 1b, 1280 bis 1531: drei Spalten mit vollem Menü, nur enger
   gesetzt. Damit behalten alle üblichen Laptopbreiten (1280, 1366,
   1440, 1512) das beschriftete Menü. */
@media (min-width:1280px) and (max-width:1531px){
  .app-body{grid-template-columns:292px minmax(0,1fr) 300px;gap:24px;max-width:1416px;padding:28px 24px 64px;}
}

/* Stufe 2, 1080 bis 1279: das globale Menü wird zur Icon-Schiene.
   Die Kontextspalte bleibt voll, weil die Kapitelnavigation beim
   Arbeiten in einer Company gebraucht wird, das globale Menü nicht.
   Tablets quer (1080 bis 1279) fallen damit in diese Stufe. */
@media (min-width:1080px) and (max-width:1279px){
  .app-body{grid-template-columns:76px minmax(0,1fr) 300px;gap:20px;max-width:1160px;padding:24px 20px 60px;}
  .app-sidebar{width:76px;}
  .sidebar-brand{justify-content:center;gap:0;}
  .sidebar-brand .brand-rule,.sidebar-brand b{display:none;}
  .nav-group-label{display:none;}
  .nav-item{justify-content:center;gap:0;width:56px;height:56px;padding:8px;margin:0 auto 10px;}
  .nav-item .step-label{display:none;}
  /* Zwei Selektoren, weil die Grundregel weiter unten im Stylesheet steht
     und ein einzelner Klassenselektor hier sonst überschrieben wird. */
  .app-sidebar .nav-sub{display:none;}
  .sidebar-user{padding-top:12px;}
  .user-chip{justify-content:center;gap:0;padding:6px 0;}
  .user-chip .profile-meta,.user-chip .user-caret{display:none;}
  .user-menu{left:-4px;right:auto;width:210px;}
}

/* Stufe 3, unter 1080: eine Inhaltsspalte. Das Menü fährt als
   Schublade ein, der Firmenpass wird ein Band über dem Inhalt und
   die Kapitel werden ein waagrechter Streifen, damit die Navigation
   nicht unter den Inhalt rutscht. */
@media (max-width:1079px){
  .app-body{grid-template-columns:1fr;grid-template-areas:"bar" "ctx" "main";gap:20px;
    max-width:780px;padding:18px 16px 56px;}
  .app-center{grid-area:main;}
  .app-context{grid-area:ctx;position:static;gap:12px;}
  .app-sidebar{position:fixed;top:0;left:0;bottom:0;width:284px;z-index:80;
    background:var(--paper-raised);border-right:1px solid var(--line);
    padding:52px 16px 24px;overflow-y:auto;transform:translateX(-100%);
    transition:transform var(--duration-fast) var(--ease-smooth-out);}
  body.nav-open .app-sidebar{transform:translateX(0);}
  body.nav-open{overflow:hidden;}
  .nav-backdrop{position:fixed;inset:0;background:rgba(24,24,24,.45);z-index:70;opacity:0;
    pointer-events:none;transition:opacity var(--duration-fast) var(--ease-smooth-out);}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto;}
  .nav-burger{display:flex;grid-area:bar;}

  .ctx-card{padding:14px 16px;}
  .ctx-card.pass-card{padding:14px 16px 16px;}
  .ctx-company{font-size:19px;}
  .ctx-title{margin-left:2px;}
  .ctx-block + .ctx-block{margin-top:16px;}
  .ctx-items{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;}
  .ctx-item{flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;
    min-width:126px;height:auto;padding:11px 12px;margin-bottom:0;border:1px solid var(--line);}
  .ctx-item.is-current{height:auto;}
  .ctx-status{margin-top:14px;}
}
/* Der Ablauf der Übersicht Companies ist Hintergrundwissen, keine
   Navigation. Einspaltig steht er deshalb unter den Company-Kacheln,
   nicht wie die Kapitel darüber. */
@media (max-width:1079px){
  .app-body:has(.flow-card){grid-template-areas:"bar" "main" "ctx";}
}
@media (min-width:1080px){ .nav-backdrop{display:none;} }

/* Der Wechsel der Kontextspalte nach demselben Rezept wie der
   Seitenwechsel: kleiner Versatz, Unschärfe, Blende. */
@keyframes ctxEnter{
  from{opacity:0;transform:translateX(var(--panel-distance));filter:blur(var(--panel-blur));}
  to{opacity:1;transform:none;filter:blur(0);}
}
.app-context.ctx-enter{animation:ctxEnter var(--panel-slide-dur) var(--panel-ease);}

.sidebar-brand{height:76px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);}
.brand-mark-sm{width:27px;height:27px;border-radius:7px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:8px;letter-spacing:.2px;flex-shrink:0;}
.brand-rule{width:1.2px;height:20px;background:var(--line);flex-shrink:0;}
.sidebar-brand b{font-family:var(--font-mono);font-size:15px;letter-spacing:.32px;text-transform:uppercase;font-weight:600;}
.nav-group-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.88px;text-transform:uppercase;
  color:var(--ink-soft);padding:0 10px;margin:28px 0 12px;}

.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.7px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:24px;}
.crumbs i{font-style:normal;opacity:.45;}
.crumbs b{font-weight:500;color:var(--ink);}

.profile-av{width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;flex-shrink:0;}
.profile-meta b{display:block;font-size:12px;font-weight:600;line-height:1.25;}
.profile-meta small{display:block;font-size:10px;color:var(--ink-soft);}

/* Lehrperson am Fuss der Menuespalte, mit aufklappendem Menue. */
.sidebar-user{position:relative;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);}
.user-chip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 8px;border-radius:10px;
  border:1px solid transparent;transition:background var(--duration-quick) var(--ease-smooth-out),border-color var(--duration-quick) var(--ease-smooth-out);}
.user-chip:hover{background:rgba(24,24,24,.04);border-color:var(--line);}
.user-chip .profile-meta{flex:1;min-width:0;}
.user-chip .profile-meta b,.user-chip .profile-meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-caret{font-size:11px;color:var(--ink-soft);flex-shrink:0;transition:transform var(--duration-quick) var(--ease-smooth-out);}
.user-chip[aria-expanded="true"] .user-caret{transform:rotate(180deg);}
.user-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;padding:6px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:10px;}
.user-menu button{display:block;width:100%;text-align:left;font-size:.82rem;padding:.55em .7em;border-radius:7px;
  transition:background var(--duration-quick) var(--ease-smooth-out);}
.user-menu button:hover{background:var(--tint);}
.user-menu-note{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-soft);
  margin-top:5px;padding:.5em .7em .15em;border-top:1px dashed var(--line);}
.company-card{padding:1.3em;margin-bottom:1.3em;}
.company-card-label{font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;color:var(--ink-soft);letter-spacing:.07em;}
.company-card-name{font-family:var(--font-display);font-size:1.25rem;margin:.25em 0;}
.company-card-meta{font-size:.78rem;color:var(--ink-soft);margin-bottom:1em;}
.phase-stepper{display:flex;flex-direction:column;gap:.25em;}
.step-item{display:flex;align-items:center;gap:.75em;padding:.65em .55em;border-radius:8px;text-align:left;width:100%;transition:background var(--duration-quick) var(--ease-smooth-out);}
.step-item:hover{background:rgba(24,24,24,.05);}
.step-item.active{background:var(--paper-raised);border:1px solid var(--line);box-shadow:var(--shadow-off-sm);}
.step-dot{width:1.9em;height:1.9em;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-mono);font-size:.64rem;border:2px solid var(--line);color:var(--ink-soft);}
.step-dot.done{background:var(--green);border-color:var(--green);color:#fff;}
.step-dot.current{border-color:var(--amber);color:var(--amber-deep);}
.step-label b{display:block;font-size:.84rem;}
.step-label span{font-size:.7rem;color:var(--ink-soft);}
@media (max-width:900px){.phase-stepper{flex-direction:row;overflow-x:auto;padding-bottom:.4em;} .step-item{flex-direction:column;min-width:92px;text-align:center;gap:.4em;}}
.parallel-tag{font-family:var(--font-mono);font-size:.6rem;text-transform:none;letter-spacing:0;color:var(--amber-deep);background:rgba(0,85,255,.14);border-radius:5px;padding:.15em .5em;margin-left:.5em;}
.ops-grid{display:flex;flex-direction:column;gap:.25em;}
.ops-item{display:flex;align-items:center;gap:.75em;padding:.6em .55em;border-radius:8px;text-align:left;width:100%;transition:background var(--duration-quick) var(--ease-smooth-out);}
.ops-item:hover{background:rgba(24,24,24,.05);}
.ops-item.active{background:var(--paper-raised);border:1px solid var(--line);box-shadow:var(--shadow-off-sm);}
.ops-icon{width:1.9em;height:1.9em;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--paper);border:1px solid var(--line);color:var(--green-deep);}
@media (max-width:900px){.ops-grid{flex-direction:row;overflow-x:auto;padding-bottom:.4em;} .ops-item{flex-direction:column;min-width:92px;text-align:center;gap:.4em;}}

.phase-header{margin-bottom:1.6em;}
.num-badge{font-family:var(--font-mono);color:var(--green-deep);font-size:.8rem;}
/* Der Meilenstein eines Kapitels, im Kopf der Kapitelseite. */
.ms-goal{display:flex;align-items:center;gap:.4em .8em;flex-wrap:wrap;margin-top:1.1em;padding:.6em .9em;
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper);}
.ms-goal-tag{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);font-size:.64rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--green-deep);}
.ms-goal b{font-size:.92rem;font-weight:600;}
.ms-goal-state{margin-left:auto;font-family:var(--font-mono);font-size:.64rem;color:var(--ink-soft);}
.ms-goal.done{border-style:solid;border-color:var(--green);background:var(--tint);}
.ms-goal.done .ms-goal-state{color:var(--green-deep);}
.checklist-lead{margin:-.6em 0 .5em;}
.mandatory-chip{display:inline-flex;align-items:center;gap:.4em;border:1.5px solid var(--red);color:var(--red-deep);border-radius:6px;padding:.3em .7em;font-size:.7rem;font-family:var(--font-mono);text-transform:uppercase;margin-right:.5em;margin-top:.6em;}
.panel{margin-bottom:1.7em;padding:1.5em;}
.panel h3{font-size:1rem;margin-bottom:1em;}
.milestone-row{display:flex;align-items:center;gap:.8em;padding:.55em 0;border-bottom:1px solid var(--line);}
/* Sichtbarer Ausgang aus dem Kapitel, sobald alles abgehakt ist. */
.checklist-done{display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap;margin-top:1.3em;}
.checklist-done span{font-size:.86rem;color:var(--ink-soft);}
.checklist-done b{color:var(--ink);font-weight:600;}
.checklist-done .btn{flex-shrink:0;}
.milestone-row:last-child{border-bottom:none;}
.milestone-row input{width:1.15em;height:1.15em;accent-color:var(--green);flex-shrink:0;}
.milestone-row label{font-size:.9rem;}
.milestone-row.done label{text-decoration:line-through;color:var(--ink-soft);}
.method-grid,.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;}
@media (max-width:900px){.method-grid,.tool-grid{grid-template-columns:1fr;}}
.method-card{padding:1.1em;border-left:4px solid var(--line);}
.method-card.stufe1{border-left-color:#A7C5FD;}
.method-card.stufe2{border-left-color:#0055FF;}
.method-card.stufe3{border-left-color:#003EB9;}
.method-level{font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);display:flex;align-items:center;gap:.4em;margin-bottom:.5em;}
.dot{width:.65em;height:.65em;border-radius:50%;display:inline-block;flex-shrink:0;}
.dot.stufe1{background:#A7C5FD;}
.dot.stufe2{background:#0055FF;}
.dot.stufe3{background:#003EB9;}
.method-card h4{font-size:.92rem;margin:0 0 .3em;}
.method-card .dur{font-size:.7rem;color:var(--ink-soft);}
.method-card p{font-size:.8rem;margin:.5em 0 0;}
.tool-card{padding:1.05em;display:flex;gap:.75em;align-items:flex-start;border:1.5px solid var(--green);}
.tool-card .icon{width:2.3em;height:2.3em;border-radius:9px;background:var(--green);border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;box-shadow:1px 2px 0 rgba(24,24,24,.15);}
.tool-card h4{font-size:.9rem;margin:0 0 .2em;font-weight:700;}
.tool-card p{font-size:.78rem;margin:0;}
.downloads-subsection{margin-top:1.6em;padding-top:1.3em;border-top:1px dashed var(--line);}
.downloads-subheading{display:flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:.8em;}
.download-list{display:flex;flex-direction:column;gap:.5em;}
.download-row{display:flex;align-items:center;justify-content:space-between;padding:.55em .9em;border:1px solid var(--line);border-radius:7px;background:transparent;gap:.8em;flex-wrap:wrap;box-shadow:none;}
.download-row .fname{font-size:.78rem;display:flex;align-items:center;gap:.5em;color:var(--ink-soft);}
.tool-card-clickable{cursor:pointer;transition:transform var(--duration-quick) var(--ease-smooth-out),box-shadow var(--duration-quick) var(--ease-smooth-out);box-shadow:var(--shadow-off-sm);}
.tool-card-clickable:hover{border-color:var(--amber);background:var(--tint);}
.tool-card-clickable:focus-visible{transform:translate(-1px,-2px);}
.tool-card-clickable .icon{background:var(--amber);}
.tool-cta{font-family:var(--font-mono);font-size:.66rem;color:var(--amber-deep);margin-top:.5em;font-weight:700;}

/* ---------- Live-Namensfindung (Beamer + Smartphone) ---------- */
.overlay-card.namefinder-card{max-width:980px;}
.nf-steps{display:flex;gap:.4em .9em;flex-wrap:wrap;margin-bottom:1.3em;font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);}
.nf-step.active{color:var(--green-deep);font-weight:700;}
.nf-split{display:grid;grid-template-columns:1.35fr 1fr;gap:1.6em;align-items:start;}
@media (max-width:820px){.nf-split{grid-template-columns:1fr;}}
.beamer{background:var(--ink);color:var(--paper);border-radius:14px;padding:1.6em;min-height:380px;}
.beamer h3{color:var(--paper);}
.beamer p{color:rgba(255,255,255,.7);}
.nf-eyebrow{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#A7C5FD;margin-bottom:.7em;display:block;}
.btn-ghost-light{background:transparent;color:var(--paper);box-shadow:none;border:1.5px solid rgba(255,255,255,.5);}
.btn-ghost-light:hover{border-color:var(--paper);}
.qr-box{display:flex;gap:1.3em;align-items:center;flex-wrap:wrap;margin-bottom:1em;}
.qr-pattern{width:112px;height:112px;background:#fff;border-radius:8px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);padding:7px;gap:2px;flex-shrink:0;}
.qr-pattern span{background:var(--ink);border-radius:1px;}
.qr-pattern span.off{background:transparent;}
.session-code{font-family:var(--font-mono);font-size:1.5rem;letter-spacing:.07em;color:var(--paper);}
.joined-counter{font-family:var(--font-mono);font-size:.86rem;color:#A7C5FD;margin-top:.5em;}
.bar-row{display:flex;align-items:center;gap:.7em;margin-bottom:.55em;}
.bar-label{width:108px;font-size:.8rem;flex-shrink:0;color:var(--paper);}
.bar-track{flex:1;background:rgba(255,255,255,.15);border-radius:6px;height:13px;overflow:hidden;}
.bar-fill{background:#A7C5FD;height:100%;border-radius:6px;transition:width var(--duration-slow) var(--ease-smooth-out);}
.bar-value{width:30px;text-align:right;font-family:var(--font-mono);font-size:.76rem;flex-shrink:0;color:var(--paper);}
.winner-badge{text-align:center;padding:1.4em 1em;}
.winner-name{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:#A7C5FD;margin:.2em 0;}
.phone-frame{width:250px;margin:0 auto;border:9px solid var(--ink);border-radius:32px;background:var(--ink);box-shadow:var(--shadow-off);}
.phone-notch{width:64px;height:14px;background:var(--ink);border-radius:0 0 10px 10px;margin:0 auto;}
.phone-screen{background:var(--paper-raised);border-radius:20px;min-height:380px;max-height:440px;overflow-y:auto;padding:1.1em;}
.tag-grid{display:flex;flex-wrap:wrap;gap:.5em;margin:.9em 0;}
.tag-chip{padding:.5em .85em;border:1px solid var(--line);border-radius:20px;font-size:.8rem;background:var(--paper);transition:background var(--duration-quick) var(--ease-smooth-out),border-color var(--duration-quick) var(--ease-smooth-out),color var(--duration-quick) var(--ease-smooth-out);}
.tag-chip.selected{background:var(--amber);color:#fff;border-color:var(--amber);}
.rate-item{border-bottom:1px solid var(--line);padding:.75em 0;}
.rate-item:last-child{border-bottom:none;}
.rate-item h5{margin:0 0 .35em;font-size:.86rem;font-family:var(--font-body);font-weight:600;}
.star-row{display:flex;gap:.2em;}
.star-btn{font-size:1.25rem;color:var(--line);line-height:1;padding:.1em;}
.star-btn.filled{color:var(--amber);}

/* ---------- Für Lehrpersonen: Navigation ---------- */
.sidebar-divider{font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin:1.3em 0 .5em .5em;}
.teacher-nav{display:flex;flex-direction:column;gap:.25em;}
.teacher-nav-item{display:flex;align-items:center;gap:.75em;padding:.6em .55em;border-radius:8px;text-align:left;width:100%;transition:background var(--duration-quick) var(--ease-smooth-out);}
.teacher-nav-item:hover{background:rgba(24,24,24,.05);}
.teacher-nav-item.active{background:var(--paper-raised);border:1px solid var(--line);box-shadow:var(--shadow-off-sm);}
.teacher-nav-icon{width:1.9em;height:1.9em;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--amber);color:#fff;}
.teacher-nav-item .step-label b{display:block;font-size:.84rem;}
.teacher-nav-item .step-label span{font-size:.7rem;color:var(--ink-soft);}
@media (max-width:900px){.teacher-nav{flex-direction:row;overflow-x:auto;padding-bottom:.4em;} .teacher-nav-item{flex-direction:column;min-width:110px;text-align:center;gap:.4em;}}

/* ---------- Förderungen (PTS-Bonus / Start-Up-Bonus) ---------- */
.muted-note{font-size:.78rem;color:var(--ink-soft);}
.bonus-grid{display:grid;grid-template-columns:1fr 1fr;gap:1em;}
@media (max-width:700px){.bonus-grid{grid-template-columns:1fr;}}
.bonus-card{text-align:left;padding:1.2em;border:1px solid var(--line);border-radius:10px;background:var(--paper);}
.bonus-card.selected{border-color:var(--green);background:rgba(0,85,255,.06);}
.bonus-card h4{margin:0 0 .3em;font-size:.96rem;}
.bonus-card p{font-size:.8rem;margin:0 0 .7em;}
.bonus-max{font-family:var(--font-mono);font-size:.7rem;color:var(--green-deep);font-weight:600;}
textarea.text-input{resize:vertical;font-family:var(--font-body);}
.upload-dropzone{display:flex;flex-direction:column;align-items:center;gap:.4em;text-align:center;border:2px dashed var(--line);border-radius:10px;padding:1.8em 1em;cursor:pointer;color:var(--ink-soft);}
.upload-dropzone{transition:border-color var(--duration-quick) var(--ease-smooth-out),color var(--duration-quick) var(--ease-smooth-out);}
.upload-dropzone:hover{border-color:var(--green);color:var(--ink);}
.upload-dropzone span{font-size:.84rem;}
.upload-list{margin-top:1em;display:flex;flex-direction:column;gap:.5em;}
.upload-row{display:flex;align-items:center;justify-content:space-between;padding:.55em .8em;border:1px solid var(--line);border-radius:8px;background:var(--paper);gap:.6em;}
.upload-row .fname{font-size:.82rem;display:flex;align-items:center;gap:.5em;}
.btn-remove{color:var(--red-deep);font-size:.9rem;flex-shrink:0;}
.submission-list{display:flex;flex-direction:column;gap:.5em;}
.submission-row{display:flex;align-items:center;justify-content:space-between;padding:.6em .9em;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:.85rem;gap:.6em;flex-wrap:wrap;}
.status-chip{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;color:var(--amber-deep);border:1px solid var(--amber);border-radius:6px;padding:.2em .6em;white-space:nowrap;}
.submission-row-full{border:1px solid var(--line);border-radius:8px;padding:.8em .9em;background:var(--paper);margin-bottom:.7em;}
.submission-row-full .submission-row{border:none;padding:0;background:none;}
.mini-steps{display:flex;gap:.35em;margin:.6em 0 0;}
.mini-dot{width:.6em;height:.6em;border-radius:50%;background:var(--line);display:inline-block;}
.mini-dot.done{background:var(--green);}

/* ---------- Trainer:innen-Kontakt ---------- */
.filter-row{display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:1.5em;}
.filter-chip{padding:.45em .9em;border:1px solid var(--line);border-radius:20px;font-size:.8rem;background:var(--paper);transition:background var(--duration-quick) var(--ease-smooth-out),color var(--duration-quick) var(--ease-smooth-out),border-color var(--duration-quick) var(--ease-smooth-out);}
.filter-chip.active{background:var(--amber);color:#fff;border-color:var(--amber);}
.trainer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1em;}
@media (max-width:980px){.trainer-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){.trainer-grid{grid-template-columns:1fr;}}
.trainer-card{padding:1.25em;}
.trainer-avatar{width:2.5em;height:2.5em;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;margin-bottom:.7em;}
.trainer-role{font-size:.73rem;color:var(--ink-soft);display:block;margin-bottom:.5em;}
.trainer-card p{font-size:.82rem;margin-bottom:.9em;}

/* ---------- Modul-Übersicht (für das Projektteam) ---------- */
.module-group-title{font-family:var(--font-display);font-size:1.15rem;margin:2em 0 1em;display:flex;align-items:center;flex-wrap:wrap;gap:.6em;}
.module-group-title:first-of-type{margin-top:0;}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1em;margin-bottom:.5em;}
@media (max-width:980px){.module-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){.module-grid{grid-template-columns:1fr;}}
.module-card{padding:1.25em;display:flex;flex-direction:column;gap:.55em;}
.module-card-head{display:flex;align-items:center;justify-content:space-between;gap:.6em;}
.module-icon{width:2.3em;height:2.3em;border-radius:8px;background:var(--tint);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.05em;filter:grayscale(1);opacity:.65;}
.module-card h4{font-size:.96rem;margin:0;}
.module-card p{font-size:.82rem;margin:0;}
.module-note{font-size:.75rem;font-style:italic;color:var(--ink-soft);}
.status-badge{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.02em;padding:.28em .55em;border-radius:5px;white-space:nowrap;}
.status-done{background:rgba(0,85,255,.12);color:var(--green-deep);}
.status-partial{background:rgba(0,85,255,.16);color:var(--amber-deep);}
.status-external{background:rgba(0,85,255,.12);color:#003EB9;}

/* ---------- Meine Companies ---------- */
.progress-row{display:flex;align-items:center;gap:.6em;}
.progress-track{flex:1;background:var(--line);border-radius:6px;height:9px;overflow:hidden;}
.progress-fill{background:var(--green);height:100%;border-radius:6px;transition:width var(--duration-slow) var(--ease-smooth-out);}
.progress-value{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);flex-shrink:0;}
.company-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1em;}
@media (max-width:980px){.company-overview-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){.company-overview-grid{grid-template-columns:1fr;}}
.company-overview-card{padding:1.3em;text-align:left;position:relative;}
.company-overview-card.current-company{border-color:var(--green);}
.current-badge{position:absolute;top:.9em;right:.9em;font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--green-deep);background:rgba(0,85,255,.1);padding:.25em .55em;border-radius:5px;}
.add-company-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;border:2px dashed var(--line);background:transparent;color:var(--ink-soft);min-height:170px;box-shadow:none;}
.add-company-card:hover{border-color:var(--green);color:var(--green-deep);}
.add-company-card span{font-size:.86rem;font-weight:600;}
/* Logo der Company, oder der leere Platzhalter, solange keins festgelegt ist. */
.co-logo{width:var(--s,56px);height:var(--s,56px);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:calc(var(--s,56px) * .22);background:#fff;border:1px solid var(--line);overflow:hidden;}
.co-logo svg{width:82%;height:82%;display:block;}
.co-logo.is-empty{background:transparent;border:1.5px dashed var(--line);}
.co-logo.is-empty em{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
/* Auf der schmalen Kachel steht das Logo allein in der ersten Zeile,
   neben dem Kennzeichen „Gerade geöffnet“; Name und Schule laufen darunter
   über die volle Breite. Im Firmenpass rechts ist Platz für beides nebeneinander. */
.co-card-logo{margin-bottom:.9em;}
.co-card-head{display:flex;align-items:center;gap:12px;margin-bottom:9px;}
.co-card-title{min-width:0;}
.ctx-card .co-card-head .ctx-company-meta{margin-bottom:0;}
.nav-subitem .co-logo{border-radius:5px;}
.nav-subitem .co-logo svg{width:100%;height:100%;}
.brand-row{display:flex;align-items:center;gap:18px;margin-top:.6em;}
.brand-swatches{display:flex;flex-wrap:wrap;gap:10px;}
.brand-swatch{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);}
.brand-swatch i{width:18px;height:18px;border-radius:5px;display:inline-block;border:1px solid var(--line);}

/* ---------- Menüspalte links ---------- */
.nav-item{display:flex;align-items:center;gap:12px;height:64px;width:100%;text-align:left;
  padding:8px 10px;border-radius:12px;border:2px solid transparent;margin-bottom:14px;
  transition:background var(--duration-quick) var(--ease-smooth-out),border-color var(--duration-quick) var(--ease-smooth-out);}
.nav-item:hover{background:rgba(24,24,24,.04);}
.nav-item.active{border-color:var(--amber);background:var(--tint);}
.nav-item-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:transparent;color:var(--ink);}
.nav-item.active .nav-item-icon{background:var(--paper-raised);color:var(--green-deep);}
.nav-item .step-label b{display:block;font-size:15px;font-weight:600;}
.nav-item.active .step-label b{font-weight:700;}
.nav-item .step-label span{display:block;font-size:12px;color:var(--ink-soft);}

.nav-sub{margin:-8px 0 18px 29px;padding-left:14px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px;}
.nav-subitem{display:flex;align-items:center;gap:.6em;padding:.48em .5em;border-radius:7px;text-align:left;width:100%;font-size:.85rem;transition:background var(--duration-quick) var(--ease-smooth-out),color var(--duration-quick) var(--ease-smooth-out);}
.nav-subitem:hover{background:rgba(24,24,24,.05);}
.nav-subitem.active{background:var(--tint);color:var(--green-deep);font-weight:600;}
.nav-subitem .sub-dot{width:.5em;height:.5em;border-radius:50%;background:var(--line);flex-shrink:0;}
.nav-subitem.active .sub-dot{background:var(--green);}
.nav-subitem .sub-meta{margin-left:auto;font-family:var(--font-mono);font-size:.62rem;color:var(--ink-soft);flex-shrink:0;}
.nav-subitem.add{color:var(--ink-soft);}
.nav-subitem.add:hover{color:var(--green-deep);background:rgba(0,85,255,.07);}
.nav-subitem.add .sub-plus{width:1.1em;text-align:center;flex-shrink:0;font-family:var(--font-mono);}

.nav-back{display:flex;align-items:center;gap:.5em;width:100%;text-align:left;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);padding:.55em .55em;border-radius:7px;margin-bottom:.8em;border:1px dashed var(--line);}
.nav-back{transition:background var(--duration-quick) var(--ease-smooth-out),color var(--duration-quick) var(--ease-smooth-out),border-color var(--duration-quick) var(--ease-smooth-out);}
.nav-back:hover{background:rgba(24,24,24,.05);color:var(--ink);border-style:solid;}
.company-card-term{font-family:var(--font-mono);font-size:.68rem;color:var(--green-deep);margin-bottom:1em;display:flex;align-items:center;gap:.45em;}

/* ---------- Einstiegsseite Start ---------- */
.start-head{margin-bottom:2em;max-width:60ch;}
.start-head h2{font-size:clamp(1.75rem,3.2vw,2.5rem);margin-top:.15em;}
.start-stats{display:flex;gap:2.2em;flex-wrap:wrap;margin-top:1.4em;padding-top:1.3em;border-top:1px solid var(--line);}
.start-stats div{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);line-height:1.35;}
.start-stats b{display:block;font-family:var(--font-display);font-size:1.75rem;color:var(--green-deep);line-height:1.05;margin-bottom:.15em;}

/* ---------- Meilensteine je Company (Startseite) ----------
   Stefan am 24.09.2026: jede Company hat ihren eigenen Balken, weil jede
   in ihrem eigenen Tempo laeuft. Elf Felder in drei Abschnitten, kein
   Kalender. Erreicht ist gefuellt, als Naechstes blau, offen gestrichelt. */
.ms-list{display:flex;flex-direction:column;}
.ms-co{padding:1.1em 0 1.25em;border-bottom:1px solid var(--line);}
.ms-co:first-child{padding-top:.1em;}
.ms-co-head{display:flex;align-items:center;gap:.85em;}
.ms-co-title{min-width:0;}
.ms-co-title b{display:block;font-size:.98rem;font-weight:700;}
.ms-co-title small{display:block;font-size:.74rem;color:var(--ink-soft);margin-top:.15em;}
.ms-co-count{margin-left:auto;text-align:right;flex-shrink:0;padding-left:.8em;}
.ms-co-count b{display:block;font-family:var(--font-display);font-size:1.6rem;line-height:1;color:var(--green-deep);}
.ms-co-count span{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-soft);}
.ms-bar{display:flex;gap:14px;margin-top:1.1em;}
.ms-group{flex:1 1 0;min-width:0;}
.ms-group.g-closing{min-width:3.9em;}
.ms-cells{display:flex;gap:3px;}
.ms-cell{flex:1 1 0;min-width:0;padding:5px 0;display:block;border-radius:4px;}
.ms-cell i{display:block;height:12px;border-radius:3px;border:1px dashed var(--line);background:var(--paper);
  transition:background var(--duration-quick) var(--ease-smooth-out),
             border-color var(--duration-quick) var(--ease-smooth-out),
             transform var(--duration-quick) var(--ease-smooth-out);}
.ms-cell.done i{border:1px solid var(--green);background:var(--green);}
.ms-cell.next i{border:1px solid var(--amber);background:var(--tint-strong);}
.ms-cell:hover i{border-color:var(--ink);transform:translateY(-2px);}
.ms-cell:focus-visible{outline:2px solid var(--amber);outline-offset:1px;}
.ms-group-label{display:flex;justify-content:space-between;gap:.4em;font-family:var(--font-mono);font-size:.6rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-top:.3em;white-space:nowrap;}
.ms-group-label span{color:var(--green-deep);}
.ms-next{display:flex;align-items:center;gap:.9em;margin-top:.85em;}
.ms-next-label{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);flex-shrink:0;width:8em;}
.ms-next-text{min-width:0;font-size:.78rem;color:var(--ink-soft);}
.ms-next-text b{display:block;font-size:.88rem;color:var(--ink);font-weight:600;}
.ms-next .btn{margin-left:auto;flex-shrink:0;}
.ms-add{margin-top:.5em;border-bottom:none;}
.start-links .link-list{display:grid;grid-template-columns:1fr 1fr;column-gap:1.6em;}
.start-links .link-row:nth-last-child(2){border-bottom:none;}

.start-split{display:grid;grid-template-columns:1.2fr .95fr;gap:1.5em;align-items:start;}
@media (max-width:980px){.start-split{grid-template-columns:1fr;}}
.next-list{display:flex;flex-direction:column;}
.next-row{display:flex;gap:.9em;align-items:flex-start;width:100%;text-align:left;padding:.85em .2em;border-bottom:1px solid var(--line);border-radius:6px;}
.next-row:last-child{border-bottom:none;}
.next-row:hover{background:rgba(24,24,24,.04);}
.next-num{font-family:var(--font-mono);font-size:.72rem;color:var(--green-deep);padding-top:.2em;flex-shrink:0;width:1.8em;}
.next-row .next-title{display:block;font-size:.92rem;margin-bottom:.2em;font-weight:700;}
.next-row p{font-size:.79rem;margin:0;}
.next-row .arrow{margin-left:auto;color:var(--ink-soft);flex-shrink:0;padding-top:.15em;}
.next-row:hover .arrow{color:var(--green-deep);}

.link-list{display:flex;flex-direction:column;}
.link-row{display:flex;align-items:center;gap:.8em;width:100%;text-align:left;padding:.75em .2em;border-bottom:1px solid var(--line);border-radius:6px;}
.link-row:last-child{border-bottom:none;}
.link-row:hover{background:rgba(24,24,24,.04);}
.link-row b{display:block;font-size:.87rem;font-weight:600;}
.link-row small{display:block;font-size:.75rem;color:var(--ink-soft);}
.link-row .arrow{margin-left:auto;font-family:var(--font-mono);color:var(--ink-soft);flex-shrink:0;}
.link-row:hover .arrow{color:var(--green-deep);}
.link-kind{font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.04em;border-radius:4px;padding:.28em .5em;flex-shrink:0;width:5.2em;text-align:center;}
.link-kind.ext{background:rgba(0,85,255,.12);color:#003EB9;}
.link-kind.int{background:rgba(0,85,255,.11);color:var(--green-deep);}

/* ---------- Companies auf einen Blick (Startseite) ---------- */
.co-strip{display:flex;flex-direction:column;}
.co-row{display:flex;align-items:center;gap:.9em;width:100%;text-align:left;padding:.85em .2em;border-bottom:1px solid var(--line);border-radius:6px;transition:background var(--duration-quick) var(--ease-smooth-out);}
.co-row:last-child{border-bottom:none;}
.co-row:hover{background:rgba(24,24,24,.04);}
.co-mark{width:2.1em;height:2.1em;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);font-family:var(--font-mono);font-size:.7rem;color:var(--green-deep);}
.co-row b{display:block;font-size:.9rem;font-weight:700;}
.co-row small{display:block;font-size:.74rem;color:var(--ink-soft);}

/* ---------- Token-Kontingent ---------- */
.token-mini{margin-bottom:1em;}
.token-mini-top{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--font-mono);font-size:.64rem;color:var(--ink-soft);margin-bottom:.35em;}
.token-mini-top b{color:var(--green-deep);font-weight:600;}
.token-track{height:6px;border-radius:4px;background:var(--line);overflow:hidden;}
.token-fill{display:block;height:100%;border-radius:4px;background:var(--green);transition:width var(--duration-slow) var(--ease-smooth-out);}
.token-fill.warn{background:var(--amber);}
.token-fill.crit{background:var(--red);}
.settings-link{display:flex;align-items:center;gap:.5em;width:100%;text-align:left;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:.55em .6em;border:1px solid var(--line);border-radius:8px;transition:background var(--duration-quick) var(--ease-smooth-out),color var(--duration-quick) var(--ease-smooth-out),border-color var(--duration-quick) var(--ease-smooth-out);}
.settings-link:hover{background:rgba(24,24,24,.05);color:var(--ink);}
.settings-link.active{background:var(--amber);color:#fff;border-color:var(--amber);}

.token-hero{display:flex;align-items:flex-end;gap:1.4em;flex-wrap:wrap;margin-bottom:1.2em;}
.token-hero .big{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--green-deep);}
.token-hero .big.warn{color:var(--amber-deep);}
.token-hero .big.crit{color:var(--red-deep);}
.token-hero .of{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);padding-bottom:.3em;}
.token-track-lg{height:13px;border-radius:7px;background:var(--paper);border:1px solid var(--line);overflow:hidden;margin-bottom:.7em;}
.token-tools{margin-top:1.4em;padding-top:1.2em;border-top:1px dashed var(--line);}
.token-tool-row{display:flex;align-items:center;gap:.9em;padding:.5em 0;font-size:.85rem;}
.token-tool-row .tname{flex:0 0 42%;}
.token-tool-row .tbar{flex:1;height:7px;border-radius:4px;background:var(--line);overflow:hidden;}
.token-tool-row .tbar i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width var(--duration-slow) var(--ease-smooth-out);}
.token-tool-row .tval{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);flex-shrink:0;width:5em;text-align:right;}

/* ---------- Einstellungen ---------- */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4em;}
@media (max-width:760px){.set-grid{grid-template-columns:1fr;}}
.set-field{margin-bottom:.2em;}
.set-field .text-input{margin-bottom:1.1em;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.75em 0;border-bottom:1px solid var(--line);font-size:.87rem;flex-wrap:wrap;}
.set-row:last-child{border-bottom:none;}
.set-row small{display:block;font-size:.75rem;color:var(--ink-soft);}
.set-danger{border:1.5px solid var(--red);border-radius:var(--radius);padding:1.2em 1.4em;margin-top:.4em;}
.set-danger h4{margin:0 0 .3em;font-size:.95rem;color:var(--red-deep);}
.set-danger p{font-size:.8rem;margin:0 0 .9em;}
.btn-danger{background:transparent;color:var(--red-deep);border:1.5px solid var(--red);box-shadow:none;}
.btn-danger:hover{background:rgba(255,153,161,.08);}
.person-row{display:flex;align-items:center;gap:.7em;padding:.6em 0;border-bottom:1px solid var(--line);font-size:.86rem;}
.person-row:last-child{border-bottom:none;}
.person-av{width:2.1em;height:2.1em;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.7rem;flex-shrink:0;}
.person-row .role{margin-left:auto;font-family:var(--font-mono);font-size:.64rem;color:var(--ink-soft);flex-shrink:0;}

/* ---------- Firmenpass im Cockpit ----------
   Dasselbe Bildzeichen wie auf der öffentlichen Seite: gestempelte Kreise
   auf gestricheltem Papier. Im Cockpit trägt es die Company-Karte der
   zweiten Menüebene, den Kopfbalken und die Company-Übersicht. */
.company-card.pass-card{padding:1.25em 1.3em 1.3em;position:relative;}
.pass-head{display:flex;align-items:center;justify-content:space-between;gap:.6em;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px dashed var(--line);padding-bottom:.7em;margin-bottom:.85em;}
.pass-head b{color:var(--ink);font-weight:500;}
.pass-stamps{display:flex;flex-wrap:wrap;gap:6px 8px;margin:1em 0 .7em;align-items:center;}
/* Elf Stempel in drei Gruppen. Mit 20 px passen alle elf in die
   300er-Spalte; wird es enger, bricht eine ganze Gruppe um. */
.stamp-group{display:flex;gap:3px;align-items:center;}
.pass-stamp{width:24px;height:24px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.57rem;border:2px dashed var(--line);color:var(--ink-soft);
  flex-shrink:0;background:transparent;
  transition:transform var(--duration-quick) var(--ease-smooth-out),
             border-color var(--duration-quick) var(--ease-smooth-out),
             background var(--duration-quick) var(--ease-smooth-out);}
.pass-stamp.done{border-style:solid;border-color:var(--green);color:#fff;background:var(--green);}
.pass-stamp.current{border-style:solid;border-color:var(--amber);color:var(--amber-deep);background:var(--tint);animation:pulse 2.2s ease-in-out infinite;}
.pass-stamp:hover{transform:translateY(-3px);border-color:var(--ink);}
.pass-stamp.done:hover{border-color:var(--green-deep);}
.pass-count{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;
  font-family:var(--font-mono);font-size:.64rem;color:var(--ink-soft);margin-bottom:.4em;}
.pass-count b{font-family:var(--font-display);font-size:1.15rem;color:var(--green-deep);line-height:1;}
.pass-track{height:7px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:1.1em;}
.pass-fill{display:block;height:100%;background:var(--green);border-radius:4px;
  transition:width var(--duration-slow) var(--ease-smooth-out);}

.pass-stamps.sm{margin:.8em 0 .55em;gap:6px 7px;}
.pass-stamps.sm .pass-stamp{width:20px;height:20px;font-size:.52rem;border-width:1.5px;}

/* ---------- Kontextspalte rechts ----------
   Maße nach dem Figma-Entwurf: Karte 332 breit, Innenabstand 20,
   Kapitelzeile 54 hoch, der aktuelle Schritt 62, Abstand 8. */
.ctx-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-off-sm);padding:20px;}
.ctx-card.pass-card{padding:18px 20px 20px;}
.ctx-card.pass-card .settings-link{margin-top:14px;}
.ctx-company{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.1;margin-bottom:4px;}
.wt-chip{display:inline-block;font-family:var(--font-mono);font-size:.58rem;font-weight:400;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-soft);border:1px dashed var(--line);border-radius:5px;padding:.15em .45em;margin-left:.5em;vertical-align:middle;}
.ctx-company-meta{font-size:12px;color:var(--ink-soft);margin-bottom:9px;}
.ctx-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.88px;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px 10px;display:flex;align-items:center;gap:.5em;flex-wrap:wrap;}
.ctx-block + .ctx-block{margin-top:24px;}
.ctx-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;height:54px;padding:0 10px;
  border-radius:10px;border:2px solid transparent;margin-bottom:8px;
  transition:background var(--duration-quick) var(--ease-smooth-out),border-color var(--duration-quick) var(--ease-smooth-out);}
.ctx-item:last-child{margin-bottom:0;}
.ctx-item.is-current{height:62px;}
.ctx-item:hover{background:rgba(24,24,24,.04);}
.ctx-item.active{border-color:var(--amber);background:var(--tint);}
.ctx-badge{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;border:2px solid var(--line);color:var(--ink-soft);flex-shrink:0;}
.ctx-badge.done{background:var(--green);border-color:var(--green);color:#fff;}
.ctx-badge.current{border-color:var(--amber);color:var(--amber-deep);}
.ctx-badge.active{border-color:var(--green-deep);color:var(--green-deep);}
.ctx-label{min-width:0;}
.ctx-label b{display:block;font-size:14px;font-weight:600;line-height:1.25;}
.ctx-label span{display:block;font-size:12px;color:var(--ink-soft);}
.ctx-status{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);}
.ctx-status span{font-family:var(--font-mono);font-size:11px;letter-spacing:.88px;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:6px;}
.ctx-status b{font-size:14px;font-weight:600;}
.ctx-note{font-size:12.5px;color:var(--ink-soft);margin:0;}
.ctx-card h4{font-size:14px;margin:0 0 .6em;font-family:var(--font-body);font-weight:700;}
.ctx-deadline{display:flex;gap:10px;align-items:baseline;padding:.5em 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.ctx-deadline:last-of-type{border-bottom:none;}
.ctx-deadline span{font-family:var(--font-mono);font-size:11px;color:var(--green-deep);flex-shrink:0;}
.ctx-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}

/* ---------- Ablauf auf der Übersicht Companies ----------
   Infoblock, nicht zum Anklicken. Die dunkle Fläche trennt ihn von der
   weißen, klickbaren Kapitelnavigation einer geöffneten Company. Die
   Zeilen liegen auf denselben Achsen wie dort: Nummer bei x 33, Name bei
   x 73 von der Kartenkante. Nur so kann sich der Ablauf beim Öffnen einer
   Company in die Navigation auffalten, ohne seitlich zu springen.
   Nacheinander ist eine durchgehende Linie durch die Nummern, gleichzeitig
   eine gemeinsame Kapsel. Alle Farben aus der wf-blue-Reihe der Library. */
.ctx-card.flow-card{background:var(--green);border-color:var(--green);color:#FFFFFF;cursor:default;}
.flow-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px dashed #4B82EE;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.88px;text-transform:uppercase;color:var(--line);}
.ctx-card .flow-title{font-family:var(--font-display);font-size:21px;font-weight:700;line-height:1.15;letter-spacing:-.2px;
  color:#FFFFFF;margin:16px 0 6px;}
.flow-lede{font-size:12.5px;line-height:1.4;color:var(--tint-strong);margin:0;}
.flow-track{margin-top:20px;}
.flow-sec{position:relative;}
.flow-sec + .flow-sec{padding-top:18px;}
/* Die Linie läuft vom ersten Abschnittszeichen bis zur Mitte von 11. */
.flow-sec::before{content:"";position:absolute;left:25px;top:0;bottom:0;width:2px;background:#4B82EE;}
.flow-sec:first-child::before{top:9px;}
.flow-sec:last-child::before{bottom:16px;}
.flow-sec-head{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:18px;padding-left:52px;}
.flow-sec-head::before{content:"";position:absolute;left:22px;top:5px;width:8px;height:8px;background:#FFFFFF;transform:rotate(45deg);}
.flow-sec-head b{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.88px;text-transform:uppercase;color:#FFFFFF;white-space:nowrap;}
.flow-sec-head em{font-family:var(--font-mono);font-size:10px;font-style:normal;color:var(--tint-strong);
  border:1px solid #4B82EE;border-radius:99px;padding:1px 7px;}
.flow-sec-note{font-size:12.5px;line-height:1.4;color:var(--tint-strong);margin:3px 0 10px 52px;}
.flow-rows{list-style:none;margin:0;padding:0;position:relative;}
.flow-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:12px;align-items:center;height:32px;padding-left:12px;}
.flow-node{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:#FFFFFF;background:var(--green);border:2px solid #7CA7FF;}
.flow-name{font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.flow-dur{font-family:var(--font-mono);font-size:11px;color:var(--line);white-space:nowrap;}
.flow-operations .flow-rows::after{content:"";position:absolute;left:8px;top:-4px;bottom:-4px;width:36px;border-radius:18px;
  border:1px solid #6392F0;background:linear-gradient(rgba(167,197,253,.16),rgba(167,197,253,.16)),var(--green);}
.flow-foot{margin-top:18px;padding-top:14px;border-top:1px dashed #4B82EE;}
.flow-foot p{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--tint-strong);margin:0;}
.flow-foot p + p{margin-top:8px;}
.flow-foot svg{flex-shrink:0;margin-top:2px;color:#FFFFFF;}
.flow-foot .flow-hint{color:#FFFFFF;font-weight:500;}
/* In der schmalen Spalte ab 1080 bis 1531 reicht die Breite nicht für
   Name und Dauer in voller Größe. */
@media (min-width:1080px) and (max-width:1531px){
  .flow-name{font-size:13px;}
  .flow-dur{font-size:10px;}
  .flow-sec-head{gap:4px 6px;}
  .flow-sec-head b{letter-spacing:.4px;}
  .flow-sec-head em{font-size:9px;padding:1px 6px;}
}

/* Auffalten zwischen Ablauf und Kapitelnavigation. Die alte Karte liegt
   kurz als Geist darüber und blendet aus, die Zeilen gleiten per FLIP
   über ihr. Die Zeilen des Geists sind sofort weg, weil die neuen genau
   an ihrer Stelle starten; sonst stünde jede Zeile kurz doppelt da.
   Alles, was keine Kapitelzeile ist, blendet ein. */
.ctx-ghost{position:absolute;margin:0;pointer-events:none;z-index:3;
  transition:opacity var(--duration-fast) var(--ease-out);}
.ctx-ghost .flow-row,.ctx-ghost .ctx-item{visibility:hidden;}
.ctx-flip{position:relative;z-index:4;}
/* Der Geist wird neu eingehängt und würde sonst selbst einblenden. */
.ctx-ghost,.ctx-ghost *{animation:none !important;}
@keyframes ctxFade{from{opacity:0;}to{opacity:1;}}
.app-context.ctx-unfold .ctx-title,
.app-context.ctx-unfold .ctx-status,
.app-context.ctx-unfold .pass-card,
.app-context.ctx-unfold .flow-head,
.app-context.ctx-unfold .flow-title,
.app-context.ctx-unfold .flow-lede,
.app-context.ctx-unfold .flow-sec-head,
.app-context.ctx-unfold .flow-sec-note,
.app-context.ctx-unfold .flow-foot{animation:ctxFade var(--duration-slow) var(--ease-out) 140ms both;}

/* ---------- Kartenraster folgen ihrer Spalte, nicht dem Fenster ----------
   In Stufe 2 ist das Fenster breit, die Inhaltsspalte aber nur 656 bis 780
   px. Fensterbezogene Umbrüche greifen dort nicht und die Dreierraster
   würden gequetscht. Deshalb Container-Queries auf der Inhaltsspalte.
   Außerhalb des Cockpits, also auf der öffentlichen Seite und in der
   Modul-Übersicht, gibt es keinen Container, dort gelten weiter die
   bestehenden Fensterregeln. */
@container main (max-width:730px){
  .method-grid,.tool-grid{grid-template-columns:1fr 1fr;}
  .trainer-grid,.company-overview-grid{grid-template-columns:1fr 1fr;}
  .start-split{grid-template-columns:1fr;}
}
@container main (max-width:540px){
  .method-grid,.tool-grid,.trainer-grid,.company-overview-grid,.set-grid,.bonus-grid{grid-template-columns:1fr;}
  .token-tool-row .tname{flex:0 0 52%;}
  .start-links .link-list{grid-template-columns:1fr;}
  .start-links .link-row:nth-last-child(2){border-bottom:1px solid var(--line);}
  .ms-group-label{font-size:.54rem;letter-spacing:0;}
  .ms-group-label span{display:none;}
  .ms-next{flex-wrap:wrap;}
  .ms-next-label{width:auto;}
}

/* ---------- Konto: Verifizierung und Tiroler Schule ----------
   Siehe js/data/account.js. Erledigt ist gefuellt, offen gestrichelt,
   gesperrt ist grau mit Schloss. */
.account-badge{display:inline-block;margin-top:4px;padding:1px 6px;border-radius:4px;font-family:var(--font-mono);font-size:10px;line-height:1.5;white-space:nowrap;}
.account-badge.is-verified{background:var(--green-deep);color:#fff;border:1px solid var(--green-deep);}
.account-badge.is-pending{background:var(--paper);color:var(--ink);border:1px dashed var(--amber);}

.nav-item.is-locked,.link-row.is-locked,.tool-card-locked,.btn.is-locked{color:var(--ink-soft);cursor:not-allowed;}
.nav-item.is-locked .nav-item-icon{background:transparent;border:1px dashed var(--ink-soft);color:var(--ink-soft);}
.nav-item.is-locked:hover,.link-row.is-locked:hover{background:transparent;}
.link-row.is-locked b{color:var(--ink-soft);}
.link-row.is-locked .link-kind{background:transparent;border:1px dashed var(--line);color:var(--ink-soft);}
.tool-card-locked{border:1.5px dashed var(--line);background:var(--paper);}
.tool-card-locked .icon{background:transparent;border:1px dashed var(--ink-soft);color:var(--ink-soft);box-shadow:none;}
.tool-card-locked h4,.tool-card-locked p{color:var(--ink-soft);}
.tool-lock-note{font-family:var(--font-mono);font-size:.66rem;margin-top:.5em;color:var(--ink);}
.btn.is-locked{border-style:dashed;}

.verify-banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:18px;border:1px dashed var(--amber);border-radius:var(--radius);background:var(--tint);color:var(--ink);}
.verify-banner svg{flex-shrink:0;margin-top:2px;color:var(--amber);}
.verify-banner p{margin:0;color:var(--ink);font-size:.88rem;}

/* Prototyp-Band: Kontoschalter nur im Cockpit. */
body:has(#view-dashboard.hidden) .ribbon-account{display:none;}
.ribbon-account{display:inline-flex;gap:1em;align-items:center;}
.proto-ribbon .ribbon-account button[aria-pressed="false"]{color:#fff;}

/* ---------- Trainer:innen: Karte als Link und Detailseite ----------
   Inhalte nach den Entwuerfen vom 03.09.2026, Gestaltung im Wireframe. */
a.trainer-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:border-color var(--duration-quick) var(--ease-smooth-out),background var(--duration-quick) var(--ease-smooth-out);}
a.trainer-card h4{margin:0 0 .2em;}
a.trainer-card:hover{border-color:var(--amber);background:var(--tint);}
.trainer-facts{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:.4em;}
.trainer-facts li{display:inline-flex;align-items:center;gap:.4em;padding:.2em .55em;border-radius:4px;background:var(--tint);font-family:var(--font-mono);font-size:.68rem;color:var(--ink);}
.trainer-facts svg{flex-shrink:0;}
.trainer-more{margin-top:auto;font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:var(--amber-deep);}

.trainer-back{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-soft);margin-bottom:1em;padding:0;}
.trainer-back:hover{color:var(--green-deep);}
.trainer-head p{margin:0;}
.trainer-detail{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:1.6em;align-items:start;margin-bottom:1.4em;}
.trainer-photo{aspect-ratio:3/2;border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--tint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;margin-bottom:1.3em;}
.trainer-photo span{width:3.4em;height:3.4em;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:1.3rem;}
.trainer-photo small{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);}
.trainer-intro{color:var(--ink);font-size:.95rem;}
.trainer-focus{padding-left:1.2em;margin:0;}
.trainer-focus li{margin-bottom:.35em;font-size:.92rem;}
.trainer-aside{padding:1.2em;}
.trainer-aside h3{font-size:1rem;margin-bottom:.6em;}
.trainer-workshops{list-style:none;padding:0;margin:0 0 .6em;}
.trainer-workshops button{display:flex;justify-content:space-between;gap:.6em;width:100%;text-align:left;padding:.45em 0;font-size:.85rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.trainer-workshops button:hover{color:var(--green-deep);}
.trainer-workshops span{font-family:var(--font-mono);font-size:.7rem;font-weight:400;color:var(--ink-soft);text-decoration:none;white-space:nowrap;}
.trainer-fact{padding:.7em 0;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink);}
.trainer-fact-label{display:flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:.25em;}
.trainer-book{width:100%;justify-content:center;margin-top:.6em;}
@media (max-width:900px){ .trainer-detail{grid-template-columns:1fr;} }