/* notes.turbils.com – dunkel, Farben aus Entwurf A „Röhrenpost“ (turbils/entwuerfe/a-roehrenpost) */
@font-face { font-family: "Mulish"; src: url(assets/mulish.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Mulish"; src: url(assets/mulish-italic.woff2) format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Sniglet"; src: url(assets/sniglet-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --grund: #0d1d23; --papier: #132a32; --karte: #173039; --tinte: #e4efeb; --leise: #9db3b0; --linie: #24434d;
  --glas: #8fd3c9; --glas-tief: #4fa79b; --messing: #e2a94d; --fehler: #ff7a7a;
  --pygbag: #c99bff; --cale: #ff9447; --dante: #ffd75e;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--grund); }
body { margin: 0; color: var(--tinte); font: 16px/1.55 "Mulish", system-ui, sans-serif; }
a { color: var(--glas); text-underline-offset: 2px; }
a:hover { color: #c3f0e8; }
:focus-visible { outline: 2px solid var(--messing); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: .92em; }

/* ---------- Kopfleiste ---------- */
.leiste { display: flex; align-items: center; gap: 1.2rem; padding: .55rem 1.2rem; border-bottom: 1px solid var(--linie); background: #0b181d; }
.marke { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tinte); font: 800 1.25rem/1 "Sniglet", "Mulish", sans-serif; }
.marke img { width: 34px; height: 34px; }
.suche { flex: 1; max-width: 26rem; }
.suche input { width: 100%; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--papier); }
.leiste-rechts { display: flex; gap: 1rem; align-items: center; margin-left: auto; font-size: .92rem; }
.ich { color: var(--leise); }
.wer { color: var(--f); font-weight: 700; }

/* ---------- Anmeldung ---------- */
body.tor { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #17343d, var(--grund) 70%); }
.tor-karte { width: min(26rem, 92vw); padding: 2rem; text-align: center; }
.tor-karte h1 { font: 800 2rem/1.1 "Sniglet", sans-serif; margin: .6rem 0; }
.tor-karte p { color: var(--leise); }
.tor-form { display: grid; gap: .9rem; text-align: left; margin-top: 1.4rem; }
.tor-form label { display: grid; gap: .25rem; font-weight: 700; font-size: .92rem; }
.tor-form input, .tor-form select { padding: .6rem .8rem; border-radius: .6rem; border: 1px solid var(--linie); background: var(--papier); }
.tor-form button, .knopf { padding: .55rem 1.1rem; border-radius: .6rem; border: 0; background: var(--glas); color: #08201d; font-weight: 800; cursor: pointer; }
.knopf.leise { background: transparent; color: var(--leise); border: 1px solid var(--linie); }
.fehler { color: var(--fehler); }

/* ---------- Röhrenpost: Kapitel als Stationen an einer Glasröhre ---------- */
.rahmen { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: calc(100vh - 3.2rem); }
.kapitel-nav { padding: 1.2rem .8rem 2rem 1.2rem; border-right: 1px solid var(--linie); position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; }
.kapitel-nav h2 { font: 800 .95rem/1.2 "Sniglet", sans-serif; color: var(--messing); margin: 1.2rem 0 .4rem; }
.kapitel-nav ol { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; }
.kapitel-nav ol::before { content: ""; position: absolute; left: .3rem; top: .3rem; bottom: .3rem; width: .5rem; border-radius: 1rem;
  background: linear-gradient(90deg, rgba(143,211,201,.10), rgba(143,211,201,.32) 40%, rgba(143,211,201,.08)); border: 1px solid rgba(143,211,201,.35); }
.kapitel-nav li { position: relative; margin: .15rem 0; }
.kapitel-nav li::before { content: ""; position: absolute; left: -.62rem; top: .62rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--glas-tief); }
.kapitel-nav li.aktiv::before { left: -.78rem; top: .35rem; width: .72rem; height: 1.05rem; border-radius: .4rem; background: var(--messing); box-shadow: 0 0 0 2px #0d1d23, 0 0 10px rgba(226,169,77,.55); }
.kapitel-nav a { display: block; padding: .3rem .45rem; border-radius: .4rem; text-decoration: none; color: var(--tinte); font-size: .93rem; line-height: 1.3; }
.kapitel-nav a:hover { background: var(--karte); }
.kapitel-nav li.aktiv a { font-weight: 800; }
.zahl { display: inline-block; min-width: 1.3rem; padding: 0 .3rem; border-radius: 1rem; background: var(--linie); color: var(--tinte); font-size: .75rem; text-align: center; }

/* ---------- Kapitel ---------- */
.arbeitsplatz { padding: 1rem 1.4rem 4rem; min-width: 0; }
.kapitel-kopf { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: end; justify-content: space-between; max-width: 76rem; }
.kapitel-titel { font: 800 1.9rem/1.15 "Sniglet", sans-serif; margin: .2rem 0; }
.kapitel-info { margin: 0; color: var(--leise); font-size: .88rem; }
.legende { display: flex; gap: .9rem; font-size: .88rem; }
.farbe { display: inline-flex; align-items: center; gap: .35rem; color: var(--f); font-weight: 700; }
.farbe i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--f); }
.hinweis { margin: .8rem 0 0; padding: .6rem .9rem; border-radius: .6rem; background: var(--karte); border-left: 4px solid var(--glas); max-width: 76rem; }
.hinweis.sperre { border-color: var(--messing); }
.hinweis.fehler { border-color: var(--fehler); }

.werkzeug { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: center; margin: .9rem 0 .8rem; padding: .45rem .6rem;
  background: rgba(13,29,35,.94); backdrop-filter: blur(6px); border: 1px solid var(--linie); border-radius: .8rem; max-width: 76rem; }
.werkzeug.aus { opacity: .45; pointer-events: none; }
.werkzeug .gruppe { display: inline-flex; gap: .15rem; align-items: center; }
.werkzeug .rechts { margin-left: auto; gap: .5rem; }
.werkzeug button, .werkzeug select, .farbwahl { min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: .45rem; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: .9rem; }
.werkzeug select { border-color: var(--linie); background: var(--papier); }
.werkzeug button:hover, .farbwahl:hover { background: var(--karte); border-color: var(--linie); }
.farbwahl { display: inline-flex; align-items: center; gap: .2rem; }
.farbwahl input { width: 1.3rem; height: 1.3rem; padding: 0; border: 0; background: none; cursor: pointer; }
.schalter { display: inline-flex; gap: .3rem; align-items: center; font-size: .85rem; color: var(--leise); cursor: pointer; }
.speicherstand { font-size: .82rem; color: var(--leise); min-width: 7.5rem; text-align: right; }
.speicherstand.ok { color: var(--glas); }
.speicherstand.offen { color: var(--messing); }
.speicherstand.fehler { color: var(--fehler); }

.schreibflaeche { display: grid; grid-template-columns: minmax(0, 50rem) minmax(15rem, 21rem); gap: 1.4rem; align-items: start; }

/* ---------- Das Blatt ---------- */
.papier { background: var(--papier); border: 1px solid var(--linie); border-radius: .9rem; padding: 2rem 2.4rem 3rem; min-height: 60vh; outline: none;
  font-size: 1.02rem; line-height: 1.65; overflow-wrap: break-word; }
.papier[contenteditable="true"] { caret-color: var(--messing); }
.papier[contenteditable="true"]:focus { border-color: var(--glas-tief); }
.papier > :first-child { margin-top: 0; }
.papier h1, .papier h2, .papier h3, .papier h4 { line-height: 1.25; font-weight: 800; margin: 1.6em 0 .5em; }
.papier h1 { font-size: 1.65rem; }
.papier h2 { font-size: 1.35rem; color: #f3d9a6; }
.papier h3 { font-size: 1.12rem; color: var(--glas); }
.papier h4 { font-size: 1rem; }
.papier p { margin: .55em 0; }
.papier ul, .papier ol { padding-left: 1.6rem; margin: .5em 0; }
.papier li { margin: .2em 0; }
.papier blockquote { margin: .8em 0; padding: .3em 1em; border-left: 3px solid var(--glas-tief); color: #c7dbd7; }
.papier pre { background: #0b181d; padding: .8em 1em; border-radius: .5rem; overflow-x: auto; white-space: pre-wrap; }
.papier code { background: #0b181d; padding: .05em .3em; border-radius: .25rem; }
.papier pre code { background: none; padding: 0; }
.papier hr { border: 0; border-top: 1px dashed var(--linie); margin: 1.6em 0; }
.papier img { max-width: 100%; height: auto; border-radius: .4rem; }
.papier table { border-collapse: collapse; margin: 1em 0; font-size: .94rem; max-width: 100%; display: block; overflow-x: auto; }
.papier th, .papier td { border: 1px solid #2d5260; padding: .35em .6em; vertical-align: top; min-width: 3.5rem; text-align: left; }
.papier th { background: #18353f; font-weight: 800; }
.papier a { color: var(--glas); }

/* Markierungen je Person */
ins[data-by="pygbag"], del[data-by="pygbag"], table[data-by="pygbag"] { --f: var(--pygbag); }
ins[data-by="cale"], del[data-by="cale"], table[data-by="cale"] { --f: var(--cale); }
ins[data-by="dante"], del[data-by="dante"], table[data-by="dante"] { --f: var(--dante); }
.markiert ins[data-by] { color: var(--f); text-decoration: underline 1px; text-decoration-color: color-mix(in srgb, var(--f) 55%, transparent);
  background: color-mix(in srgb, var(--f) 11%, transparent); border-radius: 2px; }
.markiert del[data-by] { color: var(--f); text-decoration: line-through 2px; opacity: .72; }
.markiert table[data-by] { outline: 2px dashed color-mix(in srgb, var(--f) 70%, transparent); outline-offset: 3px; }
.sauber ins[data-by] { color: inherit; background: none; text-decoration: none; }
.sauber del[data-by] { display: none; }
.sauber table[data-by] { outline: 0; }
span.kom { background: rgba(143,211,201,.13); border-bottom: 2px solid rgba(143,211,201,.7); cursor: pointer; }
span.kom[data-an] { background: rgba(226,169,77,.3); border-bottom-color: var(--messing); }
.sauber span.kom { background: none; border: 0; }
.nur-lesen { min-height: 0; }

/* ---------- Kommentare ---------- */
.kommentare { position: sticky; top: 3.6rem; max-height: calc(100vh - 4.5rem); overflow: auto; padding-right: .2rem; }
.kommentare h2 { font: 800 1rem/1.2 "Sniglet", sans-serif; color: var(--messing); margin: .2rem 0 .7rem; }
.kommentare .leer { color: var(--leise); font-size: .9rem; }
.kom-karte { background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--f); border-radius: .6rem; padding: .6rem .7rem; margin-bottom: .7rem; font-size: .9rem; }
.kom-karte.an { box-shadow: 0 0 0 2px var(--messing); }
.kom-kopf { display: flex; justify-content: space-between; gap: .5rem; }
.kom-kopf b { color: var(--f); }
.kom-kopf time { color: var(--leise); font-size: .8rem; }
.kom-karte blockquote { margin: .35rem 0; padding: .1rem .5rem; border-left: 2px solid var(--linie); color: var(--leise); font-size: .85rem; max-height: 4.2em; overflow: hidden; }
.kom-text { margin: .35rem 0; white-space: pre-wrap; }
.antwort { border-left: 3px solid var(--f); padding-left: .5rem; margin: .5rem 0 .3rem .3rem; }
.verwaist, .erledigt-von { color: var(--leise); font-style: italic; font-size: .82rem; margin: .3rem 0; }
.kom-karte textarea { width: 100%; margin-top: .4rem; padding: .4rem .5rem; border-radius: .45rem; border: 1px solid var(--linie); background: var(--papier); resize: vertical; }
.kom-knoepfe { display: flex; gap: .4rem; margin-top: .4rem; }
.kom-knoepfe .knopf { padding: .3rem .7rem; font-size: .85rem; }
.erledigt summary { cursor: pointer; color: var(--leise); margin: .6rem 0; }

/* ---------- Übersicht, Listen ---------- */
.start { max-width: 70rem; margin: 0 auto; padding: 2rem 1.4rem 4rem; }
.start-kopf { display: flex; gap: 1.6rem; align-items: center; margin-bottom: 1.5rem; }
.start-kopf h1 { font: 800 2.5rem/1.05 "Sniglet", sans-serif; margin: 0 0 .5rem; }
.start-kopf p { max-width: 44rem; color: #c7dbd7; margin: 0 0 .8rem; }
.gruppe-start h2, .neu-kapitel h2 { font: 800 1.2rem/1.2 "Sniglet", sans-serif; color: var(--messing); margin: 2rem 0 .7rem; }
.kacheln { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.kacheln a { display: grid; gap: .3rem; height: 100%; padding: .9rem 1rem; border-radius: .8rem; background: var(--papier); border: 1px solid var(--linie); text-decoration: none; color: var(--tinte); }
.kacheln a:hover { border-color: var(--glas-tief); }
.kacheln strong { font-size: 1.05rem; }
.meta { color: var(--leise); font-size: .82rem; }
.offen { display: flex; gap: .4rem; flex-wrap: wrap; }
.marke-zahl { color: var(--f); border: 1px solid var(--f); border-radius: 1rem; padding: 0 .45rem; font-size: .78rem; font-weight: 700; }
.kom-zahl { font-size: .78rem; color: var(--glas); }
.neu-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.neu-form input { flex: 1; min-width: 14rem; }
.neu-form input, .neu-form select { padding: .5rem .7rem; border-radius: .55rem; border: 1px solid var(--linie); background: var(--papier); }
.neu-form button { padding: .5rem 1.1rem; border-radius: .55rem; border: 0; background: var(--glas); color: #08201d; font-weight: 800; cursor: pointer; }
.blatt-breit { max-width: 64rem; padding: 1.4rem 1.6rem 4rem; }
.seite-liste .blatt-breit { margin: 0 auto; }
.rahmen .blatt-breit { margin: 0; }
.blatt-breit h1 { font: 800 1.7rem/1.2 "Sniglet", sans-serif; }
.einleitung { color: #c7dbd7; max-width: 46rem; }
.liste { border-collapse: collapse; width: 100%; font-size: .92rem; }
.liste th, .liste td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--linie); }
.liste th { color: var(--leise); font-weight: 700; }
.treffer { margin: 1.2rem 0; }
.treffer h2 { font-size: 1.1rem; margin: 0 0 .3rem; }
.treffer ul { margin: 0; padding-left: 1.2rem; color: #c7dbd7; font-size: .92rem; }
mark { background: rgba(226,169,77,.35); color: inherit; border-radius: 2px; }
.zurueck { margin: 0 0 .5rem; }

/* ---------- Schmal ---------- */
@media (max-width: 1150px) {
  .schreibflaeche { grid-template-columns: minmax(0, 1fr); }
  .kommentare { position: static; max-height: none; }
}
@media (max-width: 820px) {
  .rahmen { grid-template-columns: 1fr; }
  .kapitel-nav { position: static; max-height: 14rem; border-right: 0; border-bottom: 1px solid var(--linie); }
  .papier { padding: 1.2rem 1rem 2rem; }
  .leiste { flex-wrap: wrap; }
  .start-kopf { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }