:root { --acc:#b3261e; --acc-d:#8c1d18; --tint:#fbeceb; --fg:#222; --bg:#faf8f7; --line:#e3dcda; --mute:#777; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--acc); }
main { max-width:1040px; margin:0 auto; padding:1.25rem 1rem 3rem; }
h1 { font-size:1.6rem; margin:.2rem 0 .75rem; }
h2 { font-size:1.15rem; margin:1.5rem 0 .75rem; padding-bottom:.3rem; border-bottom:2px solid var(--tint); }
h3 { font-size:.95rem; margin:1rem 0 .5rem; color:var(--acc-d); }
small { color:var(--mute); margin:0 .3rem; }

/* gleiche Abstände: jeder Block unter einer Überschrift hat unten .75rem */
main p, main ul, main form, main table, main .scroll, main iframe, main .cols { margin-top:0; margin-bottom:.75rem; }
main > h1 + p { margin-top:0; }

/* Navigation */
nav { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:.5rem 1rem; background:var(--acc); }
nav a { color:#fff; text-decoration:none; padding:.3rem .8rem; border-radius:999px; background:rgba(255,255,255,.16); }
nav a:hover { background:rgba(255,255,255,.3); }
nav form { margin:0; }
nav .suche { margin-left:auto; }
nav .suche input { width:9rem; border:0; background:rgba(255,255,255,.92); }
nav .logout button { background:transparent; border:0; color:#fff; font-size:.85rem; padding:.3rem .5rem; }
nav .logout button:hover { background:var(--acc-d); }

/* Formularelemente */
input, select, textarea, button { font:inherit; padding:.4rem .6rem; border:1px solid var(--line); border-radius:6px; background:#fff; color:inherit; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--acc); outline-offset:0; border-color:var(--acc); }
textarea { width:100%; resize:vertical; }
button { cursor:pointer; color:var(--acc-d); }
button:hover { background:var(--tint); }
.row > button, p > button, .stack > button { background:var(--acc); border-color:var(--acc); color:#fff; }
.row > button:hover, p > button:hover, .stack > button:hover { background:var(--acc-d); }
button.danger { color:#a00; padding:.1rem .5rem; border-color:transparent; background:transparent; }
button.danger:hover { background:var(--tint); }
.check { border:0; background:none; font-size:1.25rem; padding:0 .3rem; line-height:1; }
.inline { display:inline; margin:0; }
.row { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; align-items:center; }
.row input:not([type=hidden]) { flex:1 1 11rem; min-width:0; }
.row select { flex:0 1 auto; }
.stack { display:flex; flex-direction:column; gap:.6rem; max-width:20rem; }
.err { color:#a00; background:var(--tint); padding:.5rem .8rem; border-radius:6px; }

/* Listen */
.plain { list-style:none; padding:0; margin:0; }
.plain li { padding:.45rem 0; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .5rem; }
.plain li > a:first-of-type { font-weight:500; }
.plain li small { margin:0; }
.plain li .notiz, .plain li .row { flex-basis:100%; margin:.1rem 0; }
.plain form, .plain p { margin:0; }
.plain li > .inline:last-child { margin-left:auto; }
.notiz { color:#555; white-space:pre-wrap; }
.done { text-decoration:line-through; color:var(--mute); }
.thumb { max-width:160px; max-height:120px; display:block; border-radius:6px; }
li.datei img, li.datei video, li.datei audio, li.datei > a:has(img) { flex-basis:100%; }
video { max-width:100%; width:420px; border-radius:6px; }
audio { width:100%; max-width:420px; }
.gross { font-size:1.2rem; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; }

/* Pad, Reiter, Upload */
iframe.pad { width:100%; height:70vh; min-height:360px; border:1px solid var(--line); border-radius:0 6px 6px 6px; background:#fff; display:block; }
.tabs { margin:1rem 0 0; display:flex; gap:.25rem; }
.tabs a { padding:.35rem 1rem; border:1px solid var(--line); border-bottom:0; border-radius:6px 6px 0 0; text-decoration:none; background:#fff; }
.tabs a.on { font-weight:600; background:var(--acc); border-color:var(--acc); color:#fff; }
input.drop { width:100%; padding:1.4rem; border:2px dashed var(--acc); background:var(--tint); margin:.4rem 0; }

/* Tabellen */
table { border-collapse:collapse; width:100%; background:#fff; }
th, td { border:1px solid var(--line); padding:.35rem .55rem; text-align:left; vertical-align:top; }
th { background:var(--tint); font-weight:600; }
.scroll { overflow-x:auto; border-radius:6px; }
.matrix th { font-size:.85rem; }
.matrix th, .matrix td { text-align:center; }
.matrix td:first-child, .matrix th:first-child { text-align:left; }
td input[type=number] { width:4.4rem; padding:.25rem .3rem; }

@media (max-width:640px) {
  main { padding:.75rem .75rem 3rem; }
  nav { padding:.4rem .5rem; }
  nav { justify-content:space-between; }
  nav a { padding:.35rem .6rem; font-size:.85rem; }
  nav .suche { order:2; margin-left:0; flex:1 1 55%; }
  nav .suche input { width:100%; }
  nav .logout { order:3; }
  .cols { grid-template-columns:1fr; }
  iframe.pad { height:60vh; }
}
@media (max-width:380px) { nav a { padding:.35rem .45rem; font-size:.8rem; } }