/* Projektzentrale - Designsystem wie das Command Center:
   Graphit, Inter, ein Radius, Lucide, 8er-Abstaende. Kein Mauslicht (Licht, das dem Zeiger folgt).
   Erlaubt und gewollt: Spotlight in Karten, ruhige Aura im Hintergrund. */

@font-face{
  font-family:"Inter";
  src:url("/static/inter.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --bg:#0A0B0D;
  --surface-0:#0E1013;
  --surface-1:#121417;
  --surface-2:#181B1F;
  --surface-3:#1F2328;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.11);
  --line-3:rgba(255,255,255,.18);
  --ink:#ECEFF3;
  --ink-2:rgba(236,239,243,.72);
  --ink-3:rgba(236,239,243,.52);
  --ink-4:rgba(236,239,243,.34);
  --accent:#8EA5C0;
  --accent-soft:rgba(142,165,192,.13);
  --accent-line:rgba(142,165,192,.40);
  --brass:#C9A25E;
  --brass-soft:rgba(201,162,94,.13);
  --amber:#DB9A52;
  --green:#5CBD8D;
  --green-soft:rgba(92,189,141,.13);
  --red:#D46F5E;
  --red-soft:rgba(212,111,94,.13);
  --r:12px;
  --r-in:8px;
  --s-half:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px;
  --fs-xs:11px; --fs-sm:12px; --fs-ui:13px; --fs-body:15px; --fs-title:17px; --fs-h2:22px; --fs-h1:28px; --fs-kpi:32px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --seite:1200px;
  --rand:24px;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.5;
  font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased;
}
button, input, select, textarea{font:inherit; color:inherit;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--ink);}
h1, h2, h3, h4, p{margin:0;}
.zahl, time, .kpi .v{font-variant-numeric:tabular-nums;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
[hidden]{display:none !important;}
:focus-visible{outline:2px solid var(--accent-line); outline-offset:2px;}

/* ---------- Icons (Lucide) ---------- */
svg.i{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;}
svg.i.gross{width:18px; height:18px;}

/* ---------- Aura: zwei ruhig treibende Farbflaechen ---------- */
.aura{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.aura::before, .aura::after{
  content:""; position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  filter:blur(90px); opacity:.10; will-change:transform;
}
.aura::before{background:var(--accent); top:-30vmax; left:-20vmax; animation:treiben1 38s ease-in-out infinite alternate;}
.aura::after{background:var(--brass); bottom:-35vmax; right:-25vmax; opacity:.06; animation:treiben2 46s ease-in-out infinite alternate;}
@keyframes treiben1{to{transform:translate3d(14vmax,10vmax,0);}}
@keyframes treiben2{to{transform:translate3d(-12vmax,-8vmax,0);}}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky; top:0; z-index:20;
  background:rgba(10,11,13,.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.kopf-innen{
  max-width:var(--seite); margin:0 auto; padding:0 var(--rand); height:56px;
  display:flex; align-items:center; gap:var(--s-3);
}
.marke{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600; font-size:var(--fs-ui); white-space:nowrap;}
.marke:hover{color:var(--ink);}
.marke-zeichen{
  width:28px; height:28px; border-radius:var(--r-in); display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--accent);
}
.projektwahl{
  height:32px; padding:0 28px 0 10px; border-radius:var(--r-in); border:1px solid var(--line-2);
  background:var(--surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECEFF3' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  appearance:none; -webkit-appearance:none; font-size:var(--fs-ui); font-weight:600; cursor:pointer;
}
.nav{display:flex; gap:var(--s-half); margin-left:var(--s-1);}
.nav a{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:var(--r-in);
  color:var(--ink-3); font-size:var(--fs-ui); font-weight:500;
}
.nav a:hover{color:var(--ink); background:var(--surface-2);}
.wer{margin-left:auto; display:flex; align-items:center; gap:var(--s-1);}
.wer .name{color:var(--ink-3); font-size:var(--fs-ui); white-space:nowrap;}

/* ---------- Knoepfe und Felder ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 14px; border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--surface-2); color:var(--ink); font-size:var(--fs-ui); font-weight:600;
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, transform .15s;
}
.btn:hover{background:var(--surface-3); border-color:var(--line-3); color:var(--ink);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5; cursor:default;}
.btn.haupt{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.btn.haupt:hover{background:#fff;}
.btn.klein{height:32px; padding:0 10px; border-radius:var(--r-in);}
.btn.ikon{width:32px; padding:0; border-radius:var(--r-in);}
.btn.leise{background:transparent; border-color:transparent; color:var(--ink-3);}
.btn.leise:hover{background:var(--surface-2); color:var(--ink);}
.feld, .neu input, .neu select, .formular input, .formular textarea, .formular select{
  height:36px; padding:0 12px; border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--surface-0); color:var(--ink); font-size:var(--fs-ui); min-width:0;
}
.formular textarea{height:auto; min-height:72px; padding:10px 12px; resize:vertical; line-height:1.5;}
.feld:focus, .neu input:focus, .neu select:focus, .formular input:focus, .formular textarea:focus{
  outline:none; border-color:var(--accent-line);
}
input[type=date]{color-scheme:dark;}

/* ---------- Text ---------- */
.label{font-size:var(--fs-sm); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.mut{color:var(--ink-2);}
.dim{color:var(--ink-3);}
.klein{font-size:var(--fs-ui);}

/* ---------- Seite ---------- */
.seite{max-width:var(--seite); margin:0 auto; padding:var(--s-4) var(--rand) var(--s-6);}
.gruss{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-4); flex-wrap:wrap;}
.gruss h1{font-size:var(--fs-h1); font-weight:650; letter-spacing:-.01em; margin-top:6px;}
.gruss p{margin-top:6px;}
.kpis{display:grid; grid-template-columns:repeat(4, minmax(96px, 1fr)); gap:var(--s-1);}
.kpi{padding:12px 14px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line);}
.kpi .v{display:block; font-size:var(--fs-h2); font-weight:650; line-height:1.1;}
.kpi .k{display:block; font-size:var(--fs-xs); color:var(--ink-3); margin-top:4px; font-weight:500;}
.kpi.warn .v{color:var(--amber);}
.kpi.neu .v{color:var(--accent);}

.raster{display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:var(--s-3); align-items:start;}
.seitenleiste{display:grid; gap:var(--s-3);}
.block{scroll-margin-top:80px;}
.blockkopf{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); margin-bottom:var(--s-2); flex-wrap:wrap;}
.blockkopf h2{display:flex; align-items:center; gap:8px; font-size:var(--fs-title); font-weight:600;}
.blockkopf h2 svg{color:var(--ink-3);}
.abschnitt{margin-top:var(--s-5);}

/* ---------- Karte: ein Stil, mit Spotlight beim Hover ---------- */
.karte{
  position:relative; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.35);
  padding:var(--s-3);
}
.karte.eng{padding:var(--s-2);}
@media (hover:hover) and (pointer:fine){
  .karte::before, .karte::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    opacity:0; transition:opacity .3s var(--ease);
  }
  .karte::before{background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.035), transparent 60%);}
  .karte::after{
    padding:1px; background:radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(142,165,192,.45), transparent 60%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .karte:hover::before, .karte:hover::after{opacity:1;}
  a.karte{transition:transform .25s var(--ease), border-color .25s;}
  a.karte:hover{transform:translateY(-2px);}
}
.karte > *{position:relative; z-index:1;}
.einblenden{animation:rein .5s var(--ease) both; animation-delay:calc(var(--i, 0) * 40ms);}
@keyframes rein{from{opacity:0; transform:translate3d(0,8px,0);} to{opacity:1; transform:none;}}

/* ---------- Tag und Chips ---------- */
.tag{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:6px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em; white-space:nowrap; line-height:1;
  color:var(--ink-2); background:rgba(255,255,255,.06);
}
.tag.akzent{color:var(--accent); background:var(--accent-soft);}
.tag.messing{color:var(--brass); background:var(--brass-soft);}
.tag.gruen{color:var(--green); background:var(--green-soft);}
.tag.rot{color:var(--red); background:var(--red-soft);}

/* ---------- Segment-Umschalter ---------- */
.segment{display:inline-flex; gap:2px; padding:3px; border-radius:var(--r); background:var(--surface-0); border:1px solid var(--line); flex-wrap:wrap;}
.segment button{
  height:28px; padding:0 10px; border-radius:var(--r-in); border:0; background:transparent;
  color:var(--ink-3); font-size:var(--fs-sm); font-weight:600; cursor:pointer; white-space:nowrap;
}
.segment button:hover{color:var(--ink);}
.segment button.aktiv{background:var(--surface-3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2);}

/* ---------- Aufgaben ---------- */
.neu{display:grid; grid-template-columns:minmax(0, 1fr) 140px 150px auto; gap:var(--s-1); margin-bottom:var(--s-2);}
.liste{list-style:none; margin:0; padding:0;}
.aufgabe{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line);}
.aufgabe:first-child{border-top:0;}
.haken{
  flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%; border:1.5px solid var(--line-3);
  background:transparent; cursor:pointer; display:grid; place-items:center; color:transparent; padding:0;
  transition:border-color .15s, background .15s;
}
.haken svg{width:12px; height:12px; stroke-width:2.5;}
.haken:hover{border-color:var(--green); color:var(--green);}
.aufgabe.erledigt .haken{background:var(--green); border-color:var(--green); color:var(--bg);}
.aufgabe .inhalt{flex:1; min-width:0;}
.aufgabe .titel{font-size:var(--fs-body); outline:none; border-radius:6px; padding:0 4px; margin:0 -4px; word-break:break-word;}
.aufgabe .titel:focus{background:var(--surface-2); box-shadow:0 0 0 1px var(--accent-line);}
.aufgabe.erledigt .titel{color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--ink-4);}
.aufgabe .notiz{font-size:var(--fs-ui); color:var(--ink-3); margin-top:2px; white-space:pre-wrap;}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px;}
.meta select, .meta input[type=date]{
  height:26px; padding:0 8px; border-radius:6px; border:1px solid var(--line); background:var(--surface-0);
  color:var(--ink-2); font-size:var(--fs-sm); max-width:150px;
}
.meta select.hat{color:var(--ink);}
.meta input.ueber{color:var(--red); border-color:rgba(212,111,94,.4);}
.statusknopf{
  height:26px; padding:0 8px; border-radius:6px; border:1px solid var(--line); background:var(--surface-0);
  color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.statusknopf.in_arbeit{color:var(--brass); border-color:rgba(201,162,94,.35); background:var(--brass-soft);}
.aktionen{flex:none; opacity:.0; transition:opacity .15s;}
.aufgabe:hover .aktionen, .aufgabe:focus-within .aktionen{opacity:1;}
@media (hover:none){ .aktionen{opacity:1;} }
.weg.sicher{color:var(--red); background:var(--red-soft);}
.leer{padding:var(--s-3) 0; text-align:center; color:var(--ink-3); font-size:var(--fs-ui);}

/* ---------- Seitenleiste: Aenderungen, Verlauf, Team ---------- */
.zeitleiste, .verlauf, .leute{list-style:none; margin:0; padding:0;}
.aenderung{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line);}
.aenderung:first-child{border-top:0; padding-top:0;}
.kreis{
  flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-3); border:1px solid var(--line-2); font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
}
.aenderung .t{font-size:var(--fs-ui); font-weight:500;}
.aenderung .u{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px; font-size:var(--fs-sm); color:var(--ink-3);}
.aenderung details{margin-top:6px; font-size:var(--fs-sm); color:var(--ink-3);}
.aenderung details ul{margin:6px 0 0; padding-left:16px;}
.aenderung summary{cursor:pointer;}
.verlauf li{display:grid; grid-template-columns:84px 1fr; gap:8px; padding:6px 0; font-size:var(--fs-ui); border-top:1px solid var(--line);}
.verlauf li:first-child{border-top:0;}
.verlauf time{color:var(--ink-3); font-size:var(--fs-sm);}
.leute > li{padding:10px 0; border-top:1px solid var(--line);}
.leute > li:first-child{border-top:0; padding-top:0;}
.person{display:flex; align-items:center; gap:8px; font-weight:600; font-size:var(--fs-ui);}
.person .btn{margin-left:auto;}
.geraete{list-style:none; margin:6px 0 0; padding:0;}
.geraete li{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--ink-3); padding:2px 0;}
.geraete li .btn{margin-left:auto; height:24px; width:24px;}
.teamform{display:flex; gap:var(--s-1); margin-top:var(--s-2);}
.teamform .feld{flex:1;}
.linkbox{margin-top:var(--s-2); padding:12px; border-radius:var(--r); background:var(--surface-0); border:1px solid var(--line-2);}
.linkbox code{display:block; margin:8px 0; font-family:var(--font); font-size:var(--fs-sm); color:var(--ink); word-break:break-all;}

/* ---------- Gespraeche ---------- */
.gespraeche{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--s-3);}
.gespraech .kopfzeile{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--ink-3);}
.gespraech .kopfzeile .btn{margin-left:auto;}
.gespraech h3{font-size:var(--fs-title); font-weight:600; margin-top:10px;}
.gespraech p{margin-top:8px; color:var(--ink-2); font-size:var(--fs-body); white-space:pre-wrap;}
.gespraech h4{margin-top:var(--s-2);}
.gespraech ul{margin:6px 0 0; padding-left:18px; color:var(--ink-2); font-size:var(--fs-ui);}
.gespraech li{padding:2px 0;}
.gespraech li.erledigt{color:var(--ink-4); text-decoration:line-through;}
.formular{display:grid; gap:var(--s-1); margin-bottom:var(--s-3);}
.formular .zeile{display:grid; grid-template-columns:minmax(0, 1fr) 140px 200px; gap:var(--s-1);}
.formular .knoepfe{display:flex; gap:var(--s-1); justify-content:flex-end;}

/* ---------- Listen ---------- */
.listenkopf{display:flex; align-items:center; gap:var(--s-1); flex-wrap:wrap; margin-bottom:var(--s-2);}
.tabelle-rahmen{overflow-x:auto; margin:0 calc(-1 * var(--s-3)); padding:0 var(--s-3);}
table.tabelle{width:100%; border-collapse:collapse; font-size:var(--fs-ui);}
.tabelle th{
  text-align:left; font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:8px 10px; border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.tabelle td{padding:0; border-bottom:1px solid var(--line); vertical-align:top;}
.tabelle td .zelle{
  min-height:36px; padding:8px 10px; outline:none; border-radius:6px; min-width:110px; white-space:pre-wrap; word-break:break-word;
}
.tabelle td .zelle:focus{background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--accent-line);}
.tabelle td.aktion{width:40px; text-align:right; padding:4px;}
.tabelle tr:hover td{background:rgba(255,255,255,.015);}
.tabelle tfoot td{border-bottom:0; padding:8px 4px 0;}
.tabelle tfoot input{width:100%; min-width:110px; height:32px; padding:0 8px; border-radius:var(--r-in); border:1px solid var(--line); background:var(--surface-0); font-size:var(--fs-ui);}
.tabelle tfoot input:focus{outline:none; border-color:var(--accent-line);}
.listenfuss{display:flex; gap:var(--s-1); flex-wrap:wrap; margin-top:var(--s-2);}

/* ---------- Meldung ---------- */
.meldung{min-height:20px; font-size:var(--fs-ui); color:var(--ink-3);}
.meldung.ok{color:var(--green);}
.meldung.fehler{color:var(--red);}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:50;
  padding:10px 16px; border-radius:var(--r); background:var(--surface-3); border:1px solid var(--line-2);
  font-size:var(--fs-ui); box-shadow:0 8px 24px rgba(0,0,0,.45); max-width:calc(100vw - 32px);
}
.toast.fehler{color:var(--red);}

/* ---------- Uebersicht ---------- */
.projekte{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:var(--s-3);}
a.projekt{color:var(--ink);}
.projekt{display:flex; flex-direction:column; height:100%;}
/* Einheitlicher Kartenkopf: Logo oben links auf Titelhoehe, Untertitel hoechstens 2 Zeilen,
   Platz fuer 2 Zeilen immer reserviert, damit alle Zaehlerreihen auf einer Linie liegen. */
.projekt .kopfzeile{display:grid; grid-template-columns:48px minmax(0, 1fr) 16px; gap:14px; align-items:start;}
.projekt .koptext{min-width:0;}
.projekt h2{font-size:var(--fs-title); font-weight:600; line-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.projekt .beschreibung{
  font-size:var(--fs-ui); line-height:20px; color:var(--ink-3); margin-top:2px; min-height:40px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.projekt .pfeil{margin-top:4px; color:var(--ink-4); transition:transform .2s var(--ease), color .2s;}
a.projekt:hover .pfeil{color:var(--ink); transform:translateX(2px);}
.projekt .werte{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-1); margin-top:var(--s-3);}
.projekt .werte div{padding:10px 12px; border-radius:var(--r-in); background:var(--surface-0); border:1px solid var(--line);}
.projekt .werte .v{display:block; font-size:var(--fs-title); font-weight:650; font-variant-numeric:tabular-nums;}
.projekt .werte .k{display:block; font-size:var(--fs-xs); color:var(--ink-3);}
.projekt .werte .warn .v{color:var(--amber);}
.projekt .werte .neu .v{color:var(--accent);}
.projekt .zuletzt{margin-top:auto; padding-top:var(--s-2); font-size:var(--fs-sm); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---------- Tor: Anmelden und Einladung ---------- */
.tor{min-height:100vh; display:grid; place-items:center; padding:var(--s-3) 20px;}
.tor .karte{width:100%; max-width:420px; padding:var(--s-4); display:grid; gap:var(--s-2);}
.tor .marke-zeichen{width:48px; height:48px; border-radius:var(--r);}
.tor .marke-zeichen svg{width:22px; height:22px;}
.tor h1{font-size:var(--fs-h2); font-weight:650;}
.tor .btn{height:44px; width:100%;}

/* ---------- Schmal ---------- */
@media (max-width:980px){
  .raster{grid-template-columns:1fr;}
  .nav{display:none;}
}
@media (max-width:640px){
  :root{--rand:20px;}
  .kopf-innen{gap:var(--s-1);}
  .marke .wort, .wer .name{display:none;}
  .seite{padding-top:var(--s-3);}
  .gruss{align-items:flex-start;}
  .kpis{grid-template-columns:repeat(2, 1fr); width:100%;}
  .neu{grid-template-columns:1fr 1fr;}
  .neu input[name=titel]{grid-column:1 / -1;}
  .neu .btn{grid-column:1 / -1;}
  .karte{padding:var(--s-2);}
  .tabelle-rahmen{margin:0 calc(-1 * var(--s-2)); padding:0 var(--s-2);}
  .gespraeche, .projekte{grid-template-columns:1fr;}
  .formular .zeile{grid-template-columns:1fr 1fr;}
  .formular .zeile input[name=titel]{grid-column:1 / -1;}
  .projekt .werte{grid-template-columns:repeat(2, 1fr);}
  .projektwahl{max-width:150px;}
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none !important; transition:none !important;}
}

/* Nachtraege */
.formular .zeile.zwei{grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);}
.listenfuss .teamform{margin-top:0;}
@media (max-width:640px){ .formular .zeile.zwei{grid-template-columns:1fr;} }

/* ---------- Ablage ---------- */
.ablageknoepfe{display:flex; gap:var(--s-1); flex-wrap:wrap; margin-bottom:var(--s-2);}
.ablageknoepfe .btn{flex:1;}
.ablage{list-style:none; margin:0; padding:0;}
.aeintrag{display:flex; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line);}
.aeintrag:first-child{border-top:0;}
.aikon{
  flex:none; width:32px; height:32px; border-radius:var(--r-in); display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--accent);
}
.ainhalt{flex:1; min-width:0; font-size:var(--fs-sm);}
.atitel{
  display:block; max-width:100%; padding:0; border:0; background:none; cursor:pointer; text-align:left;
  color:var(--ink); font-size:var(--fs-ui); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
a.atitel:hover, button.atitel:hover{color:var(--accent);}
.aknoepfe{flex:none; display:flex; gap:2px;}
.ablagehinweis{margin-top:var(--s-2);}
#ablage.ziel{border-color:var(--accent-line); background:var(--surface-2);}

/* ---------- Gespraeche: Aufgaben daraus abhaken ---------- */
.gespraech ul.gaufgaben{list-style:none; padding-left:0;}
.gaufgaben li{display:flex; gap:8px; align-items:flex-start;}
.haken.klein{width:16px; height:16px; margin-top:2px;}
.haken.klein svg{width:10px; height:10px;}
.gaufgaben li.erledigt{text-decoration:none;}
.gaufgaben li.erledigt span{color:var(--ink-4); text-decoration:line-through;}
.gaufgaben li.erledigt .haken{background:var(--green); border-color:var(--green); color:var(--bg);}

/* ---------- Unten: Team, Verlauf, Aenderungen ---------- */
.unten{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--s-3); align-items:start;}
.klappe > summary{list-style:none; cursor:pointer; margin-bottom:0;}
.klappe > summary::-webkit-details-marker{display:none;}
.klappe > summary::after{
  content:""; width:8px; height:8px; margin-right:4px; border-right:1.75px solid var(--ink-3); border-bottom:1.75px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.klappe[open] > summary{margin-bottom:var(--s-2);}
.klappe[open] > summary::after{transform:rotate(225deg);}
.klappe #gesehen{margin-bottom:var(--s-2);}

/* ---------- Dialog ---------- */
.dialog{
  width:min(720px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:var(--s-3); border-radius:var(--r);
  border:1px solid var(--line-2); background:var(--surface-1); color:var(--ink);
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.dialog::backdrop{background:rgba(5,6,8,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.dialog .formular{margin:0;}
.dialog textarea{min-height:120px;}
@media (max-width:640px){ .dialog{padding:var(--s-2);} .unten{grid-template-columns:1fr;} }
.listenaktion{display:flex; justify-content:flex-end; margin-bottom:var(--s-2);}

/* ---------- Projektlogo: eine Kachel, gleiche Groesse, gleicher Radius ---------- */
.logo{
  flex:none; width:48px; height:48px; border-radius:var(--r); display:grid; place-items:center; overflow:hidden;
  background:var(--surface-3); border:1px solid var(--line-2);
}
.logo img{width:32px; height:32px; object-fit:contain; display:block;}
.logo .mono{font-size:var(--fs-ui); font-weight:650; letter-spacing:.04em; color:var(--ink-2);}
.logo.gross{width:56px; height:56px;}
.logo.gross img{width:38px; height:38px;}
.grusskopf{display:flex; gap:var(--s-2); align-items:flex-start;}
.grusskopf .logo{margin-top:4px;}