/* Gehirn v2 – Oberfläche. Lunoma: General Sans, Türkis #167C98, Petrol. Claude per Gate, 2026-10-26 */
@font-face { font-family: "General Sans"; src: url("/schriften/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/schriften/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/schriften/general-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --grund: #edf3f4; --flaeche: #ffffff; --flaeche-2: #f4f8f9; --tinte: #0f2a31; --leise: #557078;
  --linie: #d3e1e4; --tuerkis: #167c98; --tuerkis-tief: #0e5e74; --tuerkis-hell: #dcedf2;
  --petrol: #0e3a45; --eingang: #9fd2e0; --struktur: #167c98; --original: #0e3a45;
  --bernstein: #8a5d10; --bernstein-hell: #f6ead5; --rot: #9c3d2e; --rot-hell: #f7e3df;
  --auf-tuerkis: #ffffff; --schatten: 0 1px 2px rgb(14 58 69 / 0.06), 0 8px 24px rgb(14 58 69 / 0.08);
  --r-gross: 18px; --r: 12px; --r-klein: 8px;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0a1b20; --flaeche: #10262d; --flaeche-2: #142f37; --tinte: #e3eff1; --leise: #8eaab1;
    --linie: #21424a; --tuerkis: #43b5d1; --tuerkis-tief: #6cc8de; --tuerkis-hell: #163d48;
    --petrol: #b9e2ec; --eingang: #2c6e80; --struktur: #43b5d1; --original: #b9e2ec;
    --bernstein: #e2b25e; --bernstein-hell: #33291a; --rot: #ec907d; --rot-hell: #3a2220;
    --auf-tuerkis: #062229; --schatten: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: inherit; }
html, body { margin: 0; }
body {
  background: var(--grund); color: var(--tinte);
  font-family: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5; font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; }
p { margin: 0; }
.leise { color: var(--leise); }
.klein { font-size: 0.82rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:focus-visible { outline: 2px solid var(--tuerkis); outline-offset: 2px; border-radius: 6px; }

/* Marke: Kachel mit drei Schichten (Eingang, Struktur, Originale) – bewusst ungleich breit, damit sie nicht wie ein Menü wirkt */
.marke { display: inline-grid; align-content: center; justify-items: start; gap: 2px; width: 26px; height: 26px; padding: 0 5px; border-radius: 7px; background: var(--petrol); }
.marke span { display: block; height: 3px; border-radius: 2px; }
.marke span:nth-child(1) { background: #9fd2e0; width: 60%; }
.marke span:nth-child(2) { background: #43b5d1; width: 85%; }
.marke span:nth-child(3) { background: #ffffff; width: 100%; }
@media (prefers-color-scheme: dark) { .marke { background: #164552; } }
.marke-gross { width: 52px; height: 52px; padding: 0 10px; gap: 4px; border-radius: 14px; }
.marke-gross span { height: 6px; border-radius: 3px; }

/* Knöpfe und Felder */
.knopf {
  font: inherit; font-weight: 500; font-size: 0.95rem; border-radius: var(--r-klein); cursor: pointer;
  padding: 0.6rem 1rem; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte);
  transition: background-color 0.15s, border-color 0.15s;
}
.knopf:hover { border-color: var(--tuerkis); }
.knopf:disabled { opacity: 0.5; cursor: not-allowed; }
.knopf-haupt { background: var(--tuerkis); border-color: var(--tuerkis); color: var(--auf-tuerkis); }
.knopf-haupt:hover:not(:disabled) { background: var(--tuerkis-tief); border-color: var(--tuerkis-tief); }
.knopf-still { background: transparent; border-color: transparent; color: var(--leise); }
.knopf-still:hover { color: var(--tinte); border-color: var(--linie); }
input[type=text], input[type=password], input[type=search], textarea {
  font: inherit; color: var(--tinte); background: var(--flaeche); width: 100%;
  border: 1px solid var(--linie); border-radius: var(--r-klein); padding: 0.65rem 0.8rem;
}
textarea { resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--leise); opacity: 0.8; }
input:focus, textarea:focus { outline: none; border-color: var(--tuerkis); box-shadow: 0 0 0 3px var(--tuerkis-hell); }

/* Anmeldung */
.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.anmeldekarte { width: min(380px, 100%); display: grid; gap: 0.75rem; background: var(--flaeche);
  padding: 2rem; border-radius: var(--r-gross); box-shadow: var(--schatten); }
.anmeldekarte h1 { font-size: 2rem; margin-top: 0.5rem; }
.anmeldekarte label { font-weight: 500; font-size: 0.9rem; margin-top: 0.75rem; }
.freigabe-code { font-size: 2.6rem; font-weight: 500; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; color: var(--petrol); margin: 0.5rem 0 0; }
.fehlertext { color: var(--rot); font-size: 0.9rem; min-height: 1.3em; }

/* Kopf */
.kopf {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem clamp(1rem, 3vw, 2rem); background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--grund); }
.wortmarke { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--petrol); text-decoration: none; }
.schichten { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; }
.schicht {
  display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--leise);
  padding: 0.25rem 0.6rem 0.25rem 0.5rem; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.schicht b { color: var(--tinte); font-weight: 600; }
.schicht i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.f-eingang { background: var(--eingang); } .f-struktur { background: var(--struktur); } .f-original { background: var(--original); }

/* Raster */
.raster { display: grid; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1rem, 3vw, 2rem); max-width: 1240px; margin: 0 auto; }
@media (min-width: 980px) { .raster { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .spalte-rand { position: sticky; top: 5.2rem; } }
.spalte-haupt { min-width: 0; }
.spalte-rand { display: grid; gap: 1rem; }

/* Suchfeld: das Herzstück */
.suchfeld { background: var(--flaeche); border-radius: var(--r-gross); box-shadow: var(--schatten); padding: 1rem; display: grid; gap: 0.85rem; }
.modus { display: inline-flex; background: var(--flaeche-2); border-radius: 999px; padding: 3px; justify-self: start; border: 1px solid var(--linie); }
.modus button { font: inherit; font-size: 0.9rem; font-weight: 500; border: 0; background: transparent; color: var(--leise); padding: 0.35rem 0.95rem; border-radius: 999px; cursor: pointer; }
.modus button[aria-checked="true"] { background: var(--petrol); color: var(--grund); }
.eingabezeile { display: flex; gap: 0.5rem; }
.eingabezeile input { font-size: clamp(1.05rem, 2.2vw, 1.3rem); padding: 0.8rem 1rem; border-radius: var(--r); }
.eingabezeile .knopf { border-radius: var(--r); padding-inline: 1.25rem; }
.filter { display: flex; gap: 0.5rem 1.25rem; flex-wrap: wrap; }
.filtergruppe { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.chip { font: inherit; font-size: 0.85rem; border: 1px solid var(--linie); background: transparent; color: var(--leise); padding: 0.25rem 0.7rem; border-radius: 999px; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--tuerkis); color: var(--tuerkis); background: var(--tuerkis-hell); }

/* Antwort von OpenJev */
.antwort { margin-top: 1rem; background: var(--flaeche); border-radius: var(--r-gross); padding: 1.1rem 1.25rem; border-left: 4px solid var(--petrol); box-shadow: var(--schatten); }
.antwort-text { white-space: pre-wrap; max-width: 70ch; font-size: 1.02rem; line-height: 1.6; }
.antwort-text a { color: var(--tuerkis); font-weight: 600; text-decoration: none; }
.antwort-fuss { margin-top: 0.75rem; font-size: 0.82rem; color: var(--leise); }
.denkt { display: inline-flex; gap: 4px; align-items: center; }
.denkt span { width: 6px; height: 6px; border-radius: 50%; background: var(--tuerkis); animation: puls 1.2s infinite ease-in-out; }
.denkt span:nth-child(2) { animation-delay: 0.15s; } .denkt span:nth-child(3) { animation-delay: 0.3s; }
@keyframes puls { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* Treffer */
.trefferkopf { margin: 1.25rem 0.25rem 0.5rem; font-size: 0.88rem; color: var(--leise); min-height: 1.2em; }
.trefferliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.treffer {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 0 0.9rem; align-items: start;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 0.85rem 1rem 0.85rem 0; cursor: pointer;
  text-align: left; width: 100%; font: inherit; color: inherit;
}
.treffer:hover { border-color: var(--tuerkis); }
.treffer .schichtstrich { align-self: stretch; border-radius: 0 3px 3px 0; background: var(--struktur); }
.treffer.ist-eingang .schichtstrich { background: repeating-linear-gradient(180deg, var(--eingang) 0 6px, transparent 6px 9px); }
.treffer h3 { font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.pfad { font-size: 0.8rem; color: var(--leise); overflow-wrap: anywhere; margin-top: 0.1rem; }
.auszug { margin-top: 0.4rem; color: var(--tinte); opacity: 0.85; font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 72ch; }
.treffer img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--r-klein); background: var(--flaeche-2); }
.etikett { display: inline-block; font-size: 0.75rem; font-weight: 500; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--tuerkis-hell); color: var(--tuerkis); margin-right: 0.35rem; }
.etikett-eingang { background: var(--bernstein-hell); color: var(--bernstein); }
.etiketten { margin-top: 0.45rem; }

.leerzustand { margin: 2.5rem 0.5rem; max-width: 46ch; display: grid; gap: 0.6rem; }
.leer-gross { font-size: 1.25rem; line-height: 1.4; font-weight: 500; color: var(--petrol); }

/* Rand: Ablegen + Eingang */
.ablegen, .eingang { background: var(--flaeche); border-radius: var(--r-gross); padding: 1rem; border: 1px solid var(--linie); }
.reiter { display: flex; gap: 0.25rem; margin: 0.75rem 0; border-bottom: 1px solid var(--linie); }
.reiter button { font: inherit; font-weight: 500; border: 0; background: none; color: var(--leise); padding: 0.4rem 0.75rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter button[aria-selected="true"] { color: var(--tinte); border-bottom-color: var(--tuerkis); }
.ablageform { display: grid; gap: 0.6rem; }
.ablagezone {
  display: grid; place-items: center; min-height: 150px; border: 1.5px dashed var(--linie); border-radius: var(--r);
  text-align: center; color: var(--leise); padding: 1rem; cursor: pointer; background: var(--flaeche-2); position: relative; overflow: hidden;
}
.ablagezone u { color: var(--tuerkis); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ablagezone.ziehen { border-color: var(--tuerkis); background: var(--tuerkis-hell); }
.ablagezone img { max-width: 100%; max-height: 220px; border-radius: var(--r-klein); }
.meldung { font-size: 0.88rem; margin-top: 0.6rem; min-height: 1.3em; color: var(--leise); }
.meldung.gut { color: var(--tuerkis); } .meldung.schlecht { color: var(--rot); }

.abschnittkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.eingangsliste { list-style: none; margin: 0; padding: 0; display: grid; }
.eingangsliste li + li { border-top: 1px solid var(--linie); }
.eingangsliste button { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.6rem; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 0.6rem 0.25rem; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-klein); }
.eingangsliste button:hover { background: var(--flaeche-2); }
.eingangsliste .symbol { width: 28px; height: 28px; border-radius: 7px; background: var(--tuerkis-hell); display: grid; place-items: center; overflow: hidden; }
.eingangsliste .symbol img { width: 100%; height: 100%; object-fit: cover; }
.eingangsliste .symbol svg { width: 15px; height: 15px; color: var(--tuerkis); }
.eingangsliste .titel { display: block; font-size: 0.92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eingangsliste .zeit { font-size: 0.78rem; color: var(--leise); }
.eingang-leer { color: var(--leise); font-size: 0.9rem; padding: 0.5rem 0.25rem; }

/* Detail */
.detail { width: min(760px, 100vw); max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); }
.detail::backdrop { background: rgb(6 22 27 / 0.45); }
.detail[open] { display: grid; grid-template-rows: auto auto 1fr auto; }
.detail-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem 0.75rem; border-bottom: 1px solid var(--linie); }
.detail-kopf h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.detail-status { padding: 0.6rem 1.25rem 0; }
.detail-inhalt { overflow: auto; padding: 1rem 1.25rem 1.5rem; }
.detail-fuss { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linie); }
.notiz { max-width: 70ch; font-size: 0.98rem; line-height: 1.65; }
.notiz h1, .notiz h2, .notiz h3 { margin: 1.4em 0 0.4em; line-height: 1.3; }
.notiz h1 { font-size: 1.45rem; } .notiz h2 { font-size: 1.2rem; } .notiz h3 { font-size: 1.05rem; }
.notiz p, .notiz ul, .notiz ol, .notiz pre, .notiz blockquote { margin: 0 0 0.9em; }
.notiz ul, .notiz ol { padding-left: 1.3em; }
.notiz code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86em; background: var(--flaeche-2); padding: 0.1em 0.35em; border-radius: 5px; overflow-wrap: anywhere; }
.notiz pre { background: var(--flaeche-2); padding: 0.8rem; border-radius: var(--r-klein); overflow-x: auto; }
.notiz pre code { background: none; padding: 0; }
.notiz blockquote { border-left: 3px solid var(--linie); padding-left: 0.9rem; color: var(--leise); }
.notiz a { color: var(--tuerkis); }
.notiz .wikilink { color: var(--tuerkis); font-weight: 500; }
.notiz .kopfdaten { font-size: 0.82rem; color: var(--leise); background: var(--flaeche-2); border-radius: var(--r-klein); padding: 0.6rem 0.8rem; margin-bottom: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.bildgross { width: 100%; border-radius: var(--r); background: var(--flaeche-2); }
.notiz .bildplatz { display: flex; align-items: center; justify-content: center; height: 160px; margin: 0.4rem 0 0.9rem; border-radius: var(--r); background: var(--flaeche-2); color: var(--leise); font-size: 0.85rem; }
.notiz img.eingebettet { display: block; max-width: 100%; max-height: 420px; border-radius: var(--r); margin: 0.4rem 0 0.9rem; background: var(--flaeche-2); cursor: zoom-in; }
.bildtext { margin-top: 1rem; display: grid; gap: 0.75rem; max-width: 70ch; }
.bildtext h3 { font-size: 0.95rem; color: var(--leise); font-weight: 500; }
.bildtext pre { white-space: pre-wrap; font: inherit; font-size: 0.92rem; background: var(--flaeche-2); padding: 0.7rem; border-radius: var(--r-klein); margin: 0; }

@media (max-width: 560px) {
  .kopf { gap: 0.6rem; }
  .schichten { order: 3; width: 100%; margin-left: 0; }
  #abmelden { margin-left: auto; }
  .knopf { padding: 0.55rem 0.85rem; }
  .eingabezeile .knopf { padding-inline: 1rem; }
  .treffer img { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }