:root{
  --bg:#fafafa; --card:#ffffff; --ink:#0f172a; --muted:#64748b;
  --line:#cbd5e1; --line2:#e2e8f0; --accent:#0b3b8f;
  --wave-h:140px; --ruler-h:32px; --tl-h:28px;
}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.app{width:min(1120px, 100% - 32px);margin:16px auto}

.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border:1px solid var(--line2);border-radius:12px;margin-bottom:12px;border-bottom:2px solid var(--accent)}
.app-header h1{margin:0;font-size:20px;font-weight:800;color:var(--accent)}
.app-header .plus{color:#e11d2e}.version{font-size:12px;color:var(--muted)}

h3{margin:0 0 10px 0;font-size:16px}
.muted{color:var(--muted);margin-bottom:8px}
.row{display:flex;align-items:center;gap:12px}.wrap{flex-wrap:wrap}
button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
button.secondary{background:#f8fafc}
button.danger-ask[data-phase="confirm"]{background:#fee2e2;border-color:#fecaca;color:#b91c1c}
/*button#zoomIn,button#zoomOut{width:36px}*/

.pill{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 10px;max-width:100%}
.pill>span{color:var(--muted)} .pill input,.pill select{border:0;outline:0;background:transparent}
.pill.grow{flex:1 1 auto} .pill.grow input[type="text"]{width:100%}
.pill-info{background:#f1f5f9}
.check{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 10px}
.check.tight{margin-left:auto}

.card{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:14px;margin:12px 0}
.card-head{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:6px}

/* Wave */
.waveWrap{position:relative;border:1px solid var(--line2);border-radius:12px;padding:10px;background:#fff}
#ruler,#wave{width:100%;display:block;background:#fff!important}
#ruler{height:var(--ruler-h);border-bottom:1px solid var(--line2)}
#wave {height:var(--wave-h)}
.pan{width:100%;margin:6px 0}

.timeline{position:relative;height:var(--tl-h);background:#d6e8ff;border:1px solid #b8d0ff;border-radius:8px;overflow:hidden}
.tlFill{position:absolute;left:0;top:0;height:100%;background:rgba(11,59,143,.12)}
.tlHead{position:absolute;top:0;width:2px;height:100%;background:#1f2937}
.tlAB{position:absolute;top:0;width:2px;height:100%}.tlA{background:#ef4444}.tlB{background:#10b981}
.tlMarks{position:absolute;inset:0}
.tlMarks .m{position:absolute;width:12px;height:12px;border-radius:50%;background:#2563eb;border:2px solid #fff;box-shadow:0 0 0 1px #2563eb;cursor:pointer;top:calc(var(--tl-h)/2 - 6px)}
.tlMarks.edit .m{background:#ef4444;box-shadow:0 0 0 1px #ef4444}

/* Skalenkarte */
.strips{display:flex;flex-direction:column;gap:10px}
.strip{display:flex;flex-wrap:wrap;gap:8px}
.strip .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);border-radius:10px;background:#fff}
.strip .chip.hideNote .note{display:none}
.strip .chip.dim{opacity:.35}
.strip .chip .note{font-weight:600}
.strip .chip .ic{width:16px;height:16px}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.legend .lg{display:flex;align-items:center;gap:6px;color:#334155}
.legend .lg .dot{width:12px;height:12px;border-radius:50%}

/* Harp-Layout */
.grid{display:grid;grid-template-columns:160px repeat(10,1fr);gap:6px}
.header-corner{height:0}
.colhdr{font-weight:700;text-align:center}
.rowlab{line-height:1.2;padding-top:6px;color:#475569}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border:2px solid #9aa2ab70;border-radius:10px;background:#fff;min-height:54px}
.cell.baseRow{border-color:#000}
.cell.dim{opacity:.3}
.cell.empty{visibility:hidden;pointer-events:none;border-color:transparent;background:transparent}
.cell .holeMid{font-weight:700}
.cell .tabicon{width:18px;height:18px}
.cell .noteBR{position:absolute;right:6px;bottom:4px;color:#475569;font-size:12px}
.gradDot{position:absolute;left:6px;top:6px;width:14px;height:14px;border-radius:50%;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:10px}

/* Notation */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px;border:1px solid #cbd5e1;border-radius:10px;background:#f3f4f6}
.chip .note{font-size:11px;color:#475569}
.chip .hole{font-weight:700}
.chip .ic{width:16px;height:16px}
.chip button.del{border:0;background:transparent;color:#64748b;padding:0 2px;margin-left:2px}
.break{flex-basis:100%;height:0;border-top:1px dashed var(--line);position:relative;margin:8px 0}
.break>button{position:absolute;top:-10px;right:-10px;border:1px solid var(--line);border-radius:50%;width:20px;height:20px;background:#fff}
.label{display:inline-flex;align-items:center;border:1px dashed var(--line);border-radius:10px;background:#fff;padding:2px 8px}
.label[contenteditable="true"]{outline:0}
.label .del{border:0;background:transparent;margin-left:6px}

/* Tabellen kompakt */
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{border:1px solid var(--line2);padding:2px 4px;font-size:12px}

/* Print */
@media print{
  .no-print,.row .check,.row .pill,.card>.row,#ruler{display:none!important}
  body{background:#fff}
  .card{border:0;margin:0;padding:0}
}

/* x bei umbruch */
/* Umbruch-Zeile (falls noch nicht vorhanden) */
.break{
  display: flex;
  align-items: center;
  gap: 8px;
}
.break::before{
  content: "";
  flex: 1;
  border-top: 1px dashed #cbd5e1;
}

/* Der runde X-Button rechts */
.break > button{
  width: 22px;
  height: 22px;
  padding: 0;                 /* Standard-Padding raus */
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;

  /* perfekte Zentrierung des Zeichens */
  display: grid;
  place-items: center;

  line-height: 1;             /* keine zusätzliche Baseline */
  font-size: 14px;            /* ggf. anpassen */
  cursor: pointer;
}

/* optional: Fokus-Styling */
.break > button:focus{
  outline: none;
  box-shadow: 0 0 0 2px #93c5fd55;
}





/* Extra spacing between settings rows */
.card > .row + .row{ margin-top:5px; }

/* Mehr Luft in der Harp-Karte zwischen 1. und 2. Reihe */
#harpCard .row + .row { margin-top: 5px; }

/* Header-Leiste in Karten */
.cardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* Titel links, Legende rechts */
  gap:12px;
}

/* (optional) Legende kompakter im Header */
#legend{ display:flex; gap:10px; flex-wrap:wrap; }
#legend .lg{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#334155; }
#legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

/* Extra Abstand zwischen card-head und der Matrix im Harp-Layout */
.card .card-head + #matrix { margin-top: 20px; }

/* Alternativ: für alle Grids direkt nach einem card-head */
.card .card-head + .grid { margin-top: 12px; }

#matrix .cell { pointer-events: auto; }

/* MARKER WAVE LÖSCHEN ------------------------- schon vorhanden: .tlMarks .m { cursor: pointer; } 
   falls nicht, gern ergänzen: */
.tlMarks.edit .m{ cursor: pointer; }



/* NOTATION Einfüge-Slots zwischen Chips */
.insSlot{
  border:1px dashed var(--line);
  background:#fff;
  color:var(--muted);
  padding:2px 6px;
  border-radius:8px;
  cursor:pointer;
  height:24px;
  align-self:center;
}
.insSlot.active{
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}



/* Pfeile in Event-Tab Übersicht - Notation */
#eventsView .chip img { width:16px; height:16px; }



/* FOOTER -------------- App als Flex-Container auf volle Höhe (abzgl. 2×16px Außenmargen) */
.app{
  display:flex;
  flex-direction:column;
/*min-height: calc(100vh - 32px); */
}
.app-footer{
  margin-top:auto;
  text-align:center;
  color: var(--accent);   /* farbig */
  font-size: 15px;        /* größer */
  font-weight: 700;       /* etwas kräftiger */
  padding: 14px 0;
  border-top: 1px solid var(--line2);
}
.app-footer a{
  color: inherit;              /* gleiche Farbe wie der Footer-Text (var(--accent)) */
  text-decoration: underline;
}
.app-footer a:hover{
  text-decoration: none;
}
.app-footer a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}