:root { --blau:#14406b; --hell:#eaf2fa; --text:#111; --warn:#7a3b00; }
* { box-sizing: border-box; }
html { font-size: 20px; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color:var(--text); background:#fff; line-height:1.5; }
header { background:var(--blau); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:.6rem 1rem; gap:.5rem; }
header a { color:#fff; text-decoration:none; font-weight:bold; }
header .logo { font-size:1.2rem; }
header nav a { margin-left:1rem; text-decoration:underline; }
main { max-width:46rem; margin:0 auto; padding:1rem; }
footer { max-width:46rem; margin:2rem auto 1rem; padding:1rem; font-size:.8rem; color:#333; border-top:1px solid #ccc; }
h1 { font-size:1.7rem; color:var(--blau); margin:.8rem 0; }
h2 { font-size:1.3rem; color:var(--blau); margin:.4rem 0; }
a { color:var(--blau); }
a:focus, button:focus, input:focus, textarea:focus, select:focus { outline:4px solid #f5a800; outline-offset:2px; }
label { display:block; font-weight:bold; margin:1.1rem 0 .3rem; }
input[type=text], input[type=search], input:not([type]), textarea {
  width:100%; font-size:1rem; padding:.7rem; border:2px solid #555; border-radius:6px; font-family:inherit; }
textarea { resize:vertical; }
button, .knopf { display:inline-block; font-size:1rem; font-weight:bold; padding:.8rem 1.4rem; margin-top:1rem;
  background:var(--blau); color:#fff; border:0; border-radius:8px; cursor:pointer; text-decoration:none; }
button.gross, .knopf.gross { font-size:1.2rem; padding:1rem 1.6rem; }
.knopf.zweit { background:#fff; color:var(--blau); border:3px solid var(--blau); margin-left:.5rem; }
.suchform { background:var(--hell); padding:1rem; border-radius:10px; }
.suchform label { margin-top:0; }
.meldung { background:#fff3cd; border:2px solid #b58100; padding:.8rem; border-radius:8px; font-weight:bold; }
.klein { font-size:.8rem; color:#333; }
.gross-text { font-size:1.2rem; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { background:var(--hell); border:2px solid var(--blau); border-radius:999px; padding:.3rem .9rem; text-decoration:none; font-size:.9rem; }
.karte { border:2px solid var(--blau); border-radius:10px; padding:1rem; margin:1rem 0; background:#fff; }
.zeile { display:flex; flex-wrap:wrap; gap:.2rem 1rem; padding:.35rem 0; border-top:1px solid #dde; }
.zeile:first-of-type { border-top:0; }
.lab { font-weight:bold; min-width:11rem; }
.wert { flex:1; min-width:12rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.achtung { background:#fff1dc; padding:.5rem; border-radius:6px; color:var(--warn); }
fieldset { border:0; padding:0; margin:1.1rem 0 0; }
legend { font-weight:bold; padding:0; margin-bottom:.3rem; }
.skala { display:flex; flex-wrap:wrap; gap:.5rem; }
.skala input { position:absolute; opacity:0; }
.skala label { margin:0; width:3.2rem; height:3.2rem; display:flex; align-items:center; justify-content:center;
  border:3px solid var(--blau); border-radius:10px; font-size:1.3rem; cursor:pointer; }
.skala input:checked + label { background:var(--blau); color:#fff; }
.skala input:focus + label { outline:4px solid #f5a800; outline-offset:2px; }
.falle { position:absolute; left:-9999px; height:0; overflow:hidden; }
.aktionen { display:flex; gap:.6rem; }
.aktionen button { margin-top:.4rem; font-size:.9rem; padding:.5rem 1rem; }
.aktionen .ok { background:#1b6b2b; } .aktionen .weg { background:#a31515; }
.startbild { margin:0 0 1rem; text-align:center; background:#f4f7fa; border-radius:12px; padding:.8rem; }
.startbild img { max-width:100%; height:auto; max-height:16rem; object-fit:contain; }
hr { border:0; border-top:2px solid #ccd; margin:1.5rem 0; }
@media (max-width:500px) { html { font-size:19px; } .knopf.zweit { margin-left:0; } }

/* --- Kategorien, Bilder, Filter --- */
[hidden] { display:none !important; }
.auswahl { display:flex; flex-wrap:wrap; gap:.6rem; }
.auswahl input { position:absolute; opacity:0; }
.auswahl label { margin:0; padding:.7rem 1.3rem; border:3px solid var(--blau); border-radius:10px; font-size:1.1rem; cursor:pointer; }
.auswahl input:checked + label { background:var(--blau); color:#fff; }
.auswahl input:focus + label { outline:4px solid #f5a800; outline-offset:2px; }
.badge { display:inline-block; background:var(--hell); border:2px solid var(--blau); border-radius:999px;
  padding:.1rem .7rem; font-size:.75rem; margin-left:.4rem; vertical-align:middle; font-weight:normal; }
.filter { display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0; }
.filter a { border:2px solid var(--blau); border-radius:999px; padding:.3rem 1rem; text-decoration:none; font-size:.95rem; }
.filter a.aktiv { background:var(--blau); color:#fff; font-weight:bold; }
.vorher-nachher { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:.7rem 0; }
.vorher-nachher figure { margin:0; text-align:center; }
.vorher-nachher img { width:100%; height:auto; border-radius:8px; border:2px solid #ccd; display:block; }
.vorher-nachher figcaption { font-weight:bold; margin-top:.2rem; }
input[type=file] { width:100%; font-size:1rem; padding:.5rem 0; }
.ursprung { font-size:.75rem; color:var(--warn); margin:.25rem 0 0; }
.check { display:flex; gap:.5rem; align-items:center; font-weight:normal; font-size:.85rem; justify-content:center; }
.knopf.klein-knopf { font-size:.9rem; padding:.5rem 1rem; margin-top:.4rem; }
.zweit-knopf { background:#fff !important; color:var(--blau) !important; border:3px solid var(--blau) !important; }
.aktionen { flex-wrap:wrap; align-items:center; }
.aktionen .knopf, .aktionen .zweit-knopf { margin-top:.4rem; }
@media (max-width:500px) { .vorher-nachher { grid-template-columns:1fr; } }

.aktionen button.gross { font-size:1.2rem; padding:1rem 1.6rem; }
input[type=file]::file-selector-button { font-size:1rem; font-weight:bold; padding:.6rem 1rem; margin-right:.8rem;
  background:var(--hell); color:var(--blau); border:2px solid var(--blau); border-radius:8px; cursor:pointer; }

footer p { margin:.5rem 0 0; }
footer a { color:#333; }
code { background:#eef; padding:.1rem .3rem; border-radius:4px; font-size:.85em; overflow-wrap:anywhere; }

.zustimmung { display:flex; gap:.9rem; align-items:flex-start; margin:1.4rem 0 .4rem; padding:.9rem; background:var(--hell);
  border:2px solid var(--blau); border-radius:10px; }
.zustimmung input { flex:none; width:2rem; height:2rem; margin:.15rem 0 0; accent-color:var(--blau); cursor:pointer; }
.zustimmung label { margin:0; font-weight:normal; font-size:.95rem; cursor:pointer; }