/* Bewusst schlicht: Prototyp */
:root { --akzent: #c27a3c; --rand: #d4d1ca; --grau: #66635c; --hell: #f4f3f0; --abw: #fbeedd; --abw-text: #6a3f0e; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1d1d1b; background: var(--hell); min-height: 100vh; display: flex; flex-direction: column; }
/* Kopf- und Fusszeile über die ganze Breite, Inhalt zentriert auf max. 1100 px */
header, footer { display: flex; align-items: center; gap: 8px; padding: 10px max(16px, calc((100% - 1100px) / 2)); background: #fff; border-bottom: 1px solid var(--rand); flex-wrap: wrap; }
footer { border-top: 1px solid var(--rand); border-bottom: 0; font-size: 12px; color: var(--grau); margin-top: auto; }
header img, footer img { height: 22px; }
footer img { height: 14px; }
.name { font-weight: 600; }
.etikett { font-size: 11px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 5px; color: var(--grau); }
.klein { font-size: 13px; color: var(--grau); }
.luecke { flex: 1; }
main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
main.schmal { max-width: 760px; }
@media (min-width: 900px) {
  /* Am Computer: Inhalt als Karte in der Mitte */
  main { background: #fff; border: 1px solid var(--rand); border-radius: 12px; margin: 28px auto 40px; padding: 28px 32px; }
  body.anmeldung main { background: none; border: 0; margin: 0 auto; }
  .gewerk { font-size: 26px; }
}
button, .knopf { border-radius: 8px; transition: background .15s, border-color .15s; }
button:hover:not(:disabled), .knopf:hover { background: var(--hell); border-color: #9d998f; }
button.haupt:hover:not(:disabled) { background: #a9662d; border-color: #a9662d; }
button.link:hover { background: none; }
.ablage { border: 2px dashed var(--rand); border-radius: 12px; padding: 18px; text-align: center; background: #fcfbf9; }
.ablage.ueber { border-color: var(--akzent); background: #fbf3ec; }
.ablage .reihe { max-width: 520px; margin: 0 auto 8px; }
h2.titel { font-size: 18px; margin: 0 0 14px; font-weight: 600; }
h3 { font-size: 15px; margin: 26px 0 8px; font-weight: 600; }
.liste a { color: inherit; }
.liste > div { padding: 8px 0; border-top: 1px solid var(--hell); }
.kachel, .leiste img, .foto { border-radius: 8px; }
.abw { border-left: 4px solid #e39a2d; border-radius: 0 8px 8px 0; }
@media (pointer: coarse) { .nur-computer { display: none; } }
/* Kamera-Knopf nur auf Geräten mit Touch (Handy, Tablet) */
@media (hover: hover) and (pointer: fine) { .nur-mobil { display: none !important; } }
/* Anmeldung: Karte mittig */
body.anmeldung main { flex: 1; display: flex; align-items: center; justify-content: center; }
.karte { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 32px 28px; width: 100%; max-width: 380px; text-align: center; box-sizing: border-box; }
.karte input { font: inherit; padding: 11px; border: 1px solid #b9b5ac; border-radius: 6px; }
footer.mitte { justify-content: center; }
button, .knopf { font: inherit; padding: 10px 14px; border: 1px solid #b9b5ac; border-radius: 6px; background: #fff; cursor: pointer; color: inherit; text-decoration: none; display: inline-block; text-align: center; }
button.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
button:disabled { opacity: .5; }
button.link { border: 0; padding: 0; background: none; color: var(--grau); text-decoration: underline; font-size: 14px; }
.reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.reihe > * { flex: 1; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kachel { position: relative; border: 1px solid var(--rand); border-radius: 6px; overflow: hidden; background: var(--hell); }
.kachel img { width: 100%; height: 120px; object-fit: cover; display: block; }
.kachel .weg { position: absolute; right: 4px; top: 4px; padding: 0 7px; font-size: 14px; background: #fff; }
.kachel .info { font-size: 12px; padding: 4px 6px; }
.kachel textarea { width: 100%; border: 0; border-top: 1px solid var(--rand); font: 13px system-ui; padding: 4px 6px; resize: vertical; }
.marke { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 3px; }
.kasten { background: var(--hell); padding: 8px 10px; border-radius: 6px; font-size: 14px; margin: 10px 0; }
.warnung { background: #fde7e4; color: #7c2418; padding: 8px 10px; border-radius: 6px; font-size: 14px; margin: 10px 0; }
.modus label { display: block; border: 1px solid var(--rand); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.modus input { margin-right: 6px; }
.modus label:has(input:checked) { border: 2px solid var(--akzent); }
.modus small { display: block; color: var(--grau); font-size: 12px; }
.fortschritt { height: 8px; background: var(--hell); border-radius: 4px; overflow: hidden; margin: 10px 0; }
.fortschritt div { height: 100%; background: var(--akzent); transition: width .3s; }
/* Durchsehen */
.ansicht { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ansicht > * { min-width: 0; }
@media (min-width: 900px) { .ansicht { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.foto { width: 100%; max-height: 62vh; object-fit: contain; background: #222; border-radius: 6px; cursor: zoom-in; display: block; }
.gewerk { font-size: 22px; font-weight: 600; margin: 0; }
.abw { background: var(--abw); color: var(--abw-text); border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-size: 15px; }
.abw .tun { font-size: 13px; }
.leiste { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; }
.leiste button { padding: 0; border: 2px solid transparent; position: relative; flex: none; }
.leiste button.aktiv { border-color: var(--akzent); }
.leiste img { width: 64px; height: 48px; object-fit: cover; display: block; }
.leiste .punkt { position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #e39a2d; border: 1px solid #fff; }
.nav { display: flex; gap: 8px; position: sticky; bottom: 0; background: #fff; padding: 8px 0; }
.nav button { flex: 1; min-height: 48px; }
details { margin: 8px 0; }
details summary { cursor: pointer; color: var(--grau); }
.zoom { position: fixed; inset: 0; background: #000; z-index: 10; overflow: auto; touch-action: pinch-zoom; }
.zoom img { max-width: none; width: 200%; display: block; }
@media (min-width: 900px) { .zoom img { width: 150%; } }
.zoom button { position: fixed; right: 10px; top: 10px; }
.versteckt { display: none !important; }

.etikett.modus-gruendlich { border-color: var(--akzent); color: #8a4f1c; }
.etikett.modus-schnell { border-color: #7c9bb5; color: #2f5674; }

/* Durchsehen: feste Fotofläche, damit Knöpfe und Leiste beim Blättern nicht springen */
.fotobox { height: 46vh; min-height: 240px; background: #1f1f1d; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fotobox .foto { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; background: none; }
@media (min-width: 900px) { .fotobox { height: 62vh; } }
.ansicht .links .nav { position: static; padding: 8px 0 0; }
.ansicht .links .leiste { scroll-behavior: smooth; }

/* Ergebnis ohne Aufklappen: klare Abschnitte */
.kopf-ergebnis .etikett { display: inline-block; margin-bottom: 4px; }
.titel-mangel { margin: 10px 0 2px; font-weight: 600; }
.beschreibung { margin: 0 0 6px; color: #3d3b37; font-size: 15px; }
h4.abschnitt { font-size: 12px; text-transform: none; letter-spacing: .02em; color: var(--grau); font-weight: 600; margin: 14px 0 4px; }
.nochmals { margin: 10px 0 4px; }
.nochmals button { padding: 8px 12px; font-size: 14px; }
ul.gruende { margin: 0; padding-left: 18px; font-size: 14px; }
ul.gruende li { margin: 2px 0; }
.infos { margin: 12px 0 6px; padding-top: 8px; border-top: 1px solid var(--hell); font-size: 13px; display: grid; gap: 3px; }
.infos span { color: var(--grau); display: inline-block; min-width: 92px; }

/* Hauptnavigation */
.hauptnav { display: flex; gap: 4px; padding: 0 max(16px, calc((100% - 1100px) / 2)); background: #fff; border-bottom: 1px solid var(--rand); overflow-x: auto; }
.hauptnav a { padding: 10px 14px; color: var(--grau); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; font-size: 15px; }
.hauptnav a:hover { color: #1d1d1b; }
.hauptnav a.aktiv { color: #1d1d1b; border-bottom-color: var(--akzent); font-weight: 600; }
/* Läufe als Karten */
.laeufe { display: grid; gap: 10px; }
.raster-laeufe { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.lauf { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--rand); border-radius: 10px; color: inherit; text-decoration: none; background: #fff; }
.lauf:hover { border-color: #9d998f; background: #fcfbf9; }
.lauf-bilder { display: grid; grid-template-columns: repeat(2, 44px); grid-auto-rows: 34px; gap: 3px; flex: none; }
.lauf-bilder img { width: 44px; height: 34px; object-fit: cover; border-radius: 4px; }
.lauf-text { display: grid; gap: 2px; min-width: 0; }
.lauf-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Durchsehen: weniger Rand, damit mehr Höhe für das Foto bleibt */
@media (min-width: 900px) { main.breit { margin-top: 16px; padding-top: 18px; } }