/* Lehre CA&D · team.css: team registration and site additions, ported from the final mockup (golive/final/team.css).
   Mockup-only parts (mockup bar, mail/admin canvases) are left out. */
:root{
  --code-font:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.tm-frame{flex:1 0 auto;display:flex;flex-direction:column;min-width:0}

/* ---------- registration panel (E1 inline, E2 modal, E3 page) ---------- */
.tm-panel{min-width:0}
.tm-panel--inline{padding:18px 20px 22px;border:var(--bw) solid var(--pp-green-tint-2);border-radius:var(--r-md);background:var(--paper)}
.tm-q{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--pp-ink-2)}
.tm-ways{list-style:none;margin:0;padding:0;border-top:var(--bw) solid var(--pp-line);max-width:720px}
.tm-ways li{border-bottom:var(--bw) solid var(--pp-line)}
.tm-way{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:0 12px;width:100%;padding:13px 10px 13px 6px;border:0;background:transparent;text-align:left;color:var(--pp-ink);border-radius:var(--r-sm);transition:background-color .14s ease}
.tm-way:hover{background:var(--hover-wash)}
.tm-way:hover .tm-way-ch{color:var(--pp-green-ink);transform:translateX(2px)}
.tm-way-i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pp-green-tint);color:var(--pp-green-ink)}
.tm-way-i .ui-i{width:17px;height:17px}
.tm-way-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.tm-way-t b{font-size:15px;font-weight:700;line-height:1.35}
.tm-way-t small{font-size:13px;line-height:1.45;color:var(--pp-ink-3)}
.tm-way-ch{color:var(--pp-ink-3);transition:transform .14s ease,color .14s ease}
.tm-already{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;max-width:720px;font-size:12.5px;line-height:1.5;color:var(--pp-ink-3)}
.tm-already .ui-i{margin-top:3px}
.tm-tlink{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--pp-green-ink);text-decoration:underline;text-decoration-color:var(--pp-green-tint-2);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.tm-tlink:hover{text-decoration-color:currentColor}
.tm-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:4px 0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--pp-green-ink);cursor:pointer}
.tm-back:hover{text-decoration:underline}
.tm-h{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--pp-ink)}
.tm-sub{margin:0 0 4px;font-size:14px;line-height:1.5;color:var(--pp-ink-2);max-width:62ch}
.tm-form{margin-top:16px}
.tm-panel .dx-grid{max-width:720px}
.tm-hint{display:block;margin:0;font-size:12.5px;line-height:1.5;color:var(--pp-ink-3)}
.tm-num{font-variant-numeric:tabular-nums lining-nums}
.tm-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--pp-ink-2);cursor:pointer}
.tm-check input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--pp-green-solid);flex:0 0 auto}
.tm-note{margin-top:18px}
.tm-note.fr-note{display:flex;gap:10px;max-width:720px;padding:11px 13px;border-radius:var(--r-sm);background:var(--pp-surface-2);border:var(--bw) solid var(--pp-line-2);color:var(--pp-ink-2);font-size:13px;line-height:1.5}
.tm-note .ui-i{margin-top:2px;color:var(--pp-green-ink)}
.tm-panel .dx-act{margin-top:18px}
.tm-codeinp{font-family:var(--code-font);letter-spacing:.18em;max-width:220px}
.tm-codeform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:16px}
.tm-codeform .ui-btn{min-height:42px;padding-inline:18px}
.tm-linkhint{display:flex;align-items:center;gap:7px;margin-top:14px}
.tm-again{margin:8px 0 0;font-size:13px}
.tm-ok{display:inline-flex;align-items:center;gap:6px;color:var(--pp-green-ink);font-weight:700}
.tm-inline{margin-top:14px}
.fristen .tm-ctrow.is-open .fl-cta .ui-btn{min-width:0}

/* E2 modal: the theses sheet (d5) in front of the page.
   The scrim is fixed to the viewport, so opening, stepping and closing never move the page behind
   (lehre.js locks the page scroll while it is open). The sheet sits centred; when it is taller than
   the viewport it scrolls inside itself and never hands the scroll on to the page. */
.tm-frame{position:relative}
.tm-scrim{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--scrim);padding:max(40px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(40px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overscroll-behavior:contain}
.tm-modalwrap{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;width:100%;max-width:1040px;margin:auto}
.tm-modal{background:var(--paper)}
.detail .tm-modal{flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 60px -20px rgba(0,0,0,.45)}
html.lh-lock,html.lh-lock body{overflow:hidden;overscroll-behavior:none}
.tm-mno{color:var(--pp-green-ink)}
.detail .tm-mno .ui-i{width:46px;height:46px;stroke-width:1.4}
.tm-mkick{margin:0;font-size:13px;color:var(--pp-ink-3)}
.detail .tm-mtitle{margin:10px 0 22px;font-size:30px}
.tm-afacts.dx-facts{grid-template-columns:minmax(0,1fr);gap:14px}
.tm-afacts dd{font-size:14px}
.detail .tm-afacts dd.tm-small{font-size:13px;line-height:1.5;color:var(--pp-ink-2)}

/* E3 page, Mein Team, lost link */
.tm-page{padding-top:4px}
.tm-crumb{margin-bottom:10px}
.tm-kick{margin:0;font-size:13px;color:var(--pp-ink-3)}
.tm-h1{margin:4px 0 0;font-family:var(--title-font);font-size:var(--fs-h1);font-weight:700;letter-spacing:var(--title-track);line-height:1.15;color:var(--pp-ink);text-wrap:balance}
.tm-titlerow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.tm-lead{margin:12px 0 0;max-width:68ch;font-size:var(--fs-lead);line-height:1.6;color:var(--pp-ink-2)}
.tm-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px 56px;margin-top:26px;align-items:start}
.tm-main{min-width:0;display:flex;flex-direction:column;gap:24px}
.tm-aside{min-width:0;padding-left:24px;border-left:var(--bw) solid var(--margin-line)}
.tm-sec{min-width:0;max-width:720px}
.tm-h2{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--pp-ink)}
.tm-count{margin-left:6px;font-weight:400;color:var(--pp-ink-3);font-variant-numeric:tabular-nums}
.tm-pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.3}
.tm-pill.is-neutral{background:var(--pp-surface-3);color:var(--pp-ink-2)}
.tm-pill.is-green{background:var(--pp-green-tint);color:var(--pp-green-ink)}
.tm-pill.is-blue{background:var(--pp-blue-tint);color:var(--pp-blue-ink)}
.tm-pill.is-ochre{background:var(--pp-ochre-tint);color:var(--pp-ochre-ink)}
.tm-pill.is-solid{background:var(--pp-green-solid);color:var(--pp-on-green)}
.tm-codebox.ui-codebox{gap:12px 22px;padding:16px 18px}
.tm-codecol{display:flex;flex-direction:column;gap:3px}
.tm-code{font-family:var(--code-font);font-size:30px;font-weight:500;letter-spacing:.14em;color:var(--pp-green-ink);user-select:all;white-space:nowrap}
.tm-codehint{flex:1 1 100%;margin:0;font-size:13px;line-height:1.5;color:var(--pp-ink-2)}
.tm-solo{display:flex;gap:7px;align-items:flex-start;margin-top:10px}
.tm-solo .ui-i{margin-top:3px}
.tm-mems{list-style:none;margin:0;padding:0;border-top:var(--bw) solid var(--pp-line-2)}
.tm-mem{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0;border-bottom:var(--bw) solid var(--pp-line)}
.tm-mem-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.tm-mem-t b{font-size:15px}
.tm-you{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;background:var(--pp-green-tint);color:var(--pp-green-ink);font-size:11.5px;font-weight:700;vertical-align:2px}
.tm-mail{font-size:13.5px;color:var(--pp-ink-2);overflow-wrap:anywhere}
.tm-meta{font-size:12.5px;color:var(--pp-ink-3)}
.tm-mem.is-free{color:var(--pp-ink-3);font-size:13.5px;padding:10px 12px;margin-top:6px;border:var(--bw) dashed var(--pp-line-2);border-radius:var(--r-sm)}
.tm-mem.is-conf{background:var(--pp-red-tint);padding-inline:12px;border-radius:var(--r-sm)}
.tm-rm{color:var(--pp-red-ink)}
.tm-confirm{flex:1 1 100%;display:flex;flex-direction:column;gap:8px}
.tm-confirm p{margin:0;font-size:13.5px;line-height:1.5;color:var(--pp-ink)}
.tm-cbtns{display:flex;flex-wrap:wrap;gap:8px}
.ui-btn.tm-danger{background:var(--pp-red-ink);border-color:var(--pp-red-ink);color:var(--pp-surface)}
.ui-btn.tm-danger:hover{background:var(--pp-red);border-color:var(--pp-red)}
.tm-leave .tm-confirm{padding:14px 16px;border-radius:var(--r-md);background:var(--pp-red-tint)}
.tm-leavebtn{margin-left:-13px;color:var(--pp-ink-2)}
.tm-pq{padding:16px 18px;border-radius:var(--r-md);background:var(--pp-blue-tint);border:var(--bw) solid var(--pp-blue-line)}
.tm-pq-q{margin:0;font-size:15px;font-weight:700;line-height:1.45;color:var(--pp-ink)}
.tm-pq-b{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.tm-pq-a{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0;font-size:14px;color:var(--pp-ink)}
.tm-pq-a .ui-i{color:var(--pp-green-ink)}
.tm-rule{display:flex;gap:9px;align-items:flex-start;margin:0;font-size:13.5px;line-height:1.5;color:var(--pp-ink-2)}
.tm-rule .ui-i{margin-top:3px;color:var(--pp-ink-3)}
.tm-rule.is-strong{color:var(--pp-ink)}
.tm-rule.is-strong .ui-i{color:var(--pp-green-ink)}
.tm-rules:empty{display:none}
/* 1.1.2 "Wir sind offen für eine weitere Person" (Mein Team) */
.tm-optin{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:var(--bw) solid var(--pp-line-2);border-radius:var(--r-md)}
.tm-optin-check{font-size:15px;font-weight:700;color:var(--pp-ink)}
.tm-optin-t{display:flex;flex-direction:column;gap:4px;padding-left:27px}
.tm-optin-t .tm-hint{font-size:13px;color:var(--pp-ink-2)}
.tm-optin-b{padding-left:27px;margin-top:4px}
.tm-optin-saved{padding-left:27px;margin-top:4px;font-size:13px}
.tm-optin.is-ro .tm-optin-check{cursor:default}
.tm-optin.is-ro input{opacity:.75}
.tm-sel{user-select:all;font-weight:700;color:var(--pp-ink);overflow-wrap:anywhere}
.tm-poolline{margin:0 0 6px;font-size:17px;font-weight:700;line-height:1.45;color:var(--pp-ink);max-width:56ch}
.tm-pool-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tm-data{display:grid;grid-template-columns:140px minmax(0,1fr);margin:0;border-top:var(--bw) solid var(--pp-line-2)}
.tm-data > div{display:contents}
.tm-data dt,.tm-data dd{padding:8px 0;border-bottom:var(--bw) solid var(--pp-line);font-size:13.5px}
.tm-data dt{padding-right:16px;color:var(--pp-ink-3)}
.tm-data dd{margin:0;overflow-wrap:anywhere}
.tm-follow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin:0;padding:12px 0;border-top:var(--bw) solid var(--pp-line);border-bottom:var(--bw) solid var(--pp-line);font-size:13.5px;color:var(--pp-ink-3)}
.tm-folgt{padding:0 9px;border:1px dashed var(--pp-line-2);border-radius:999px;font-size:12px}
.tm-lost{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:20px;max-width:620px}
.tm-lost .dx-f{flex:1 1 280px}
.tm-lost .ui-btn{min-height:42px}
.tm-lostdone{margin-top:20px;max-width:620px;padding:14px 16px;border-radius:var(--r-md);background:var(--pp-green-tint)}
.tm-page .dx-f .ui-inp{min-height:42px;padding:9px 12px;font-size:14.5px}
@media (max-width: 900px){
  .tm-cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .tm-aside{padding:18px 0 0;border-left:0;border-top:var(--bw) solid var(--margin-line)}
}
@media (max-width: 700px){
  .tm-panel--inline{padding:14px 12px 18px;margin-inline:-4px}
  .tm-way{grid-template-columns:32px minmax(0,1fr) 16px;gap:0 10px;padding:12px 4px}
  .tm-way-i{width:30px;height:30px}
  /* phone: full screen sheet; the close button stays reachable at the top while the sheet scrolls */
  .tm-scrim{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--paper)}
  .tm-modalwrap{flex:1 1 auto;max-width:none;margin:0}
  .detail .tm-modal{flex:1 1 auto;align-content:start;margin-inline:0;border-radius:0}
  .detail .tm-modal .d5-main{display:block;order:1;padding:16px 16px 22px}
  .detail .tm-modal .d5-top{position:sticky;top:0;z-index:2;margin:-16px -16px 0;padding:16px 16px 4px;background:var(--paper)}
  .detail .tm-modal .d5-mar{order:2;padding:0 16px 26px}
  .detail .tm-modal .d5-mar .dx-sec{margin-top:0;padding-top:18px;border-top:var(--bw) solid var(--pp-line)}
  .detail .tm-mtitle{font-size:24px;margin-bottom:16px}
  .tm-code{font-size:26px}
  .tm-codebox .tm-copy{width:100%}
  .tm-codeform .ui-btn,.tm-lost .ui-btn{width:100%}
  .tm-codeinp{max-width:none}
  /* phone: the label column grows to the longest label ("Matrikelnummer", "University email") instead of a
     fixed 110px that put the value right against it */
  .tm-data{grid-template-columns:minmax(96px,max-content) minmax(0,1fr)}
  .tm-leavebtn{margin-left:0}
}

.tm-amail{display:block;font-size:13px;color:var(--pp-ink-2);overflow-wrap:anywhere}

/* =====================================================================
   FINAL · Steckbrief "Angeboten für" (V1: logo as column head)
   ===================================================================== */
.sv-lg{display:block;width:auto;max-width:100%;flex:none}
.sv-lg.sv-uni-bonn{height:32px}.sv-lg.sv-h-brs{height:26px}
.sv-lgbox{display:flex;align-items:center;min-height:34px}
.sv-deg{color:var(--pp-ink-3);font-size:12.5px;letter-spacing:.01em}
.sv-dot{color:var(--pp-ink-3)}
.sv-note{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--pp-ink-3)}
.steckbrief .sv-line{align-items:start}
.steckbrief .sv-line > .ui-lab{padding-top:11px}
.sv1-cols{display:flex;flex-wrap:wrap;gap:12px 56px}
.sv1-col{min-width:0}
.sv-p{white-space:nowrap}
.sv1-p{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--pp-ink)}
@media (max-width:700px){
  .steckbrief .sv-line > .ui-lab{padding-top:0}
  .sv1-cols{flex-direction:column;gap:14px}
}

/* =====================================================================
   FINAL · exam dates in Fristen (W1: logos as row heads)
   Green marks a registration deadline (Case-Study-Teams tile), ink marks exam days.
   ===================================================================== */
.xd{white-space:nowrap;font-variant-numeric:lining-nums proportional-nums}
.x-mut{color:var(--pp-ink-3)}
.fristen .fl-text .fl-about{margin-top:10px}
.xl{display:block;flex:none;max-width:100%}

/* table (desktop, tablet) */
.x1{margin-top:12px}
.x1-t{border-collapse:collapse;font-size:14px;line-height:1.4}
.x1-t thead th{text-align:left;padding:0 36px 8px 0;border-bottom:var(--bw) solid var(--pp-line-2);font-size:var(--fs-lab);font-weight:700;letter-spacing:var(--lab-track);text-transform:uppercase;color:var(--pp-ink-3);white-space:nowrap}
.x1-y{font-weight:400}
.x1-t td{vertical-align:middle;padding:14px 36px 14px 0;color:var(--pp-ink)}
.x1-t tbody tr:first-child > *{border-bottom:var(--bw) solid var(--pp-line)}
.x1-t td.x1-all{vertical-align:middle;padding-left:28px;padding-right:0;border-bottom:0 !important;border-left:var(--bw) solid var(--pp-line)}
.x1-sub{display:block;margin-top:2px;font-size:12.5px;color:var(--pp-ink-3)}
.w1-t tbody th.w1-rh{text-align:left;vertical-align:middle;padding:14px 40px 14px 0}
.w1-t thead th:first-child{min-width:153px}

/* phone: one block per institution under its logo */
.x1-ph{display:none}
.xp-head{display:flex;align-items:flex-end;margin-bottom:8px}
.xp-logo{display:block;flex:none}
.xp-dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 18px;font-size:14px;line-height:1.4}
.xp-r{display:contents}
.xp-dl dt{color:var(--pp-ink-3);font-size:12.5px;padding-top:1px}
.xp-dl dd{margin:0;color:var(--pp-ink);min-width:0}
@media (max-width:700px){
  .x1-t{display:none}
  .x1-ph{display:grid;gap:16px}
  .x1-ph .xp-col + .xp-col{padding-top:14px;border-top:var(--bw) solid var(--pp-line)}
}
@media (max-width:520px){
  .xp-dl{grid-template-columns:minmax(0,1fr);gap:0}
  .xp-dl dt{margin-top:9px;font-size:12px}
  .xp-r:first-child dt{margin-top:0}
}
/* exam row without a heading (the tile says Prüfung): the dates table, its phone blocks or the
   "Termine folgen" line start at the top of the row beside the tile, at every width */
.fristen .fl-item.w-item .fl-text > :first-child{margin-top:0}

/* =====================================================================
   FINAL · date tile of the exam row (open detail T1..T3)
   Same sheet as .fs-tile (58 px, band + body), so the left column stays aligned.
   T1 and T2 use the neutral sheet: they name a span, not a deadline. T3 reuses the green deadline tile.
   ===================================================================== */
.fristen .fs-tile.fs-x{min-height:70px}
.fristen .fs-x .fs-mon{letter-spacing:.05em;font-size:9.5px;color:var(--pp-ink-2)}
.fristen .fs-x .fs-mon2{display:flex;flex-direction:column;gap:1px;padding:3px 0 4px;line-height:1.15}
.fristen .fs-x .fs-body{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:4px 2px}
.fristen .fs-x .fs-word{font-size:12px;line-height:1.1;color:var(--pp-ink);letter-spacing:.01em}
.fristen .fs-x .fs-ic{width:24px;height:24px;fill:none;stroke:var(--pp-ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fristen .fs-x .fs-ic path:last-child{stroke:var(--pp-green)}
@media (max-width:700px){
  .fristen .fs-tile.fs-x{min-height:66px}
  .fristen .fs-x .fs-mon{font-size:9px;letter-spacing:.04em}
  .fristen .fs-x .fs-word{font-size:11px}
}