* { box-sizing: border-box; }
:root { --accent: #e6a700; --ink: #222; --muted: #666; --line: #eee; --bg-soft: #fffaf0; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; color: var(--ink); background: #fffbea; line-height: 1.55; }
a { color: #0a58ca; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 1rem; }

/* Kopf und Fuß */
.site-header { border-bottom: 1px solid #f1e3b0; background: #fff8d6; }
.bar { display: flex; align-items: center; justify-content: space-between; padding-top: .9rem; padding-bottom: .9rem; }
.logo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.logo img { display: block; }
.top a { color: var(--ink); text-decoration: none; margin-left: 1rem; font-size: .95rem; }
.top a:hover { text-decoration: underline; }
.site-footer { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid #f1e3b0; background: #fff8d6; color: var(--muted); font-size: .9rem; }
.site-footer a { color: var(--muted); }

main.wrap { padding-top: 1.5rem; padding-bottom: 2rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: .25rem 0 .5rem; }
h2 { font-size: 1.4rem; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .25rem; }
.sub { color: var(--muted); font-size: 1.1rem; margin-top: 0; }
.muted { display: block; color: #888; font-size: .9em; margin-top: .25rem; }

/* Upload */
.drop { display: block; border: 2px dashed #bbb; border-radius: 12px; padding: 2.5rem 1rem; text-align: center; cursor: pointer; transition: .15s; background: var(--bg-soft); }
.drop:hover { border-color: var(--accent); }
.drop.over { border-color: var(--accent); background: #fff3c4; }
.drop input { display: none; }
button { margin-top: 1rem; padding: .7rem 1.4rem; font-size: 1rem; font-weight: 600; border: 0; border-radius: 8px; background: var(--accent); color: var(--ink); cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
#status { margin-top: 1rem; min-height: 1.2rem; }
.results { list-style: none; padding: 0; }
.results li { display: flex; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.results img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: #f3f3f3; }
.results .info { flex: 1; }
.results .err { color: #b00020; }

/* Vorteile */
.features { padding-left: 1.2rem; }
.features li { margin-bottom: .5rem; }

/* Bildseite /i/<id> */
.viewer { text-align: center; }
.viewer-img { max-width: 100%; height: auto; border-radius: 8px; background: #f3f3f3; }
.btn { display: inline-block; padding: .7rem 1.4rem; border-radius: 8px; background: var(--accent); color: var(--ink); font-weight: 600; text-decoration: none; }
.ad { min-height: 90px; margin: 1.5rem 0; background: #f7f7f7; border: 1px dashed #ddd; border-radius: 6px; }

/* Teilen-Block: Felder untereinander */
.share { text-align: left; max-width: 640px; margin: 2rem auto 0; }
.share label { display: block; margin: 1rem 0; font-weight: 600; font-size: .95rem; }
.share textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; font: .9rem ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: var(--ink); resize: vertical; }