:root { --maxw: 1200px; --gap: 16px; --ad-border: 1px dashed #ddd; --ad-bg: #f7f7f7; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin:0; color:#111; background:#fafafa; }
header, footer { background:#fff; border-bottom:1px solid #eee; }
.container { max-width: var(--maxw); margin:0 auto; padding:16px; }
.muted { color:#555; font-size:.92rem; }
.top-ad-wrapper { display:flex; justify-content:center; align-items:center; min-height:90px; padding:8px 16px; }
.ad-slot { background: var(--ad-bg); border: var(--ad-border); border-radius:6px; width:100%; max-width:970px; height:90px; display:flex; align-items:center; justify-content:center; color:#999; overflow:hidden; }
.layout-outer { display:grid; grid-template-columns: 1fr min(1100px, calc(100% - 2*var(--gap))) 1fr; column-gap: var(--gap); align-items:start; margin:0 auto; padding:16px; }
.left-rail, .right-rail { position:sticky; top:12px; height:max-content; display:none; gap:12px; }
.rail-ad { width:300px; max-width:100%; height:600px; background: var(--ad-bg); border: var(--ad-border); border-radius:6px; display:flex; align-items:center; justify-content:center; color:#999; }
.main-col { min-width:0; }
.panel { background:#fff; border:1px solid #eee; border-radius:8px; padding:16px; }
.dropzone { border:2px dashed #bbb; border-radius:8px; padding:24px; text-align:center; background:#fcfcfc; cursor:pointer; }
.dropzone.dragover { border-color:#0067c5; background:#f0f7ff; }
.controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0; }
button { background:#0067c5; color:#fff; border:none; border-radius:6px; padding:10px 14px; cursor:pointer; }
button:disabled { opacity:.5; cursor: default; }
input[type="range"] { width:180px; }
.results { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.card { border:1px solid #eee; border-radius:8px; padding:12px; background:#fff; }
.bottom-ad-wrapper { display:flex; justify-content:center; align-items:center; min-height:250px; padding:12px 16px; }
.ad-slot-bottom { background: var(--ad-bg); border: var(--ad-border); border-radius:6px; width:100%; max-width:970px; height:250px; display:flex; align-items:center; justify-content:center; color:#999; overflow:hidden; }
@media (min-width: 1200px){ .left-rail, .right-rail { display:flex; flex-direction:column; } }
@media (max-width: 1199px){ .left-rail, .right-rail { display:none; } }
.footer-links a { color: inherit; }

/* ===== Legal Pages (Impressum, Datenschutz, Cookies) ===== */
.legal {
  max-width: 800px;
  margin: 24px auto 48px auto;
  line-height: 1.6;
  color: #111;
}

.legal h1 {
  font-size: 2rem;
  margin: 0 0 1rem 0;
}

.legal h2 {
  font-size: 1.25rem;
  margin: 1.5rem 0 .5rem 0;
}

.legal p {
  margin: .5rem 0 1rem 0;
}

.legal ul {
  margin: .5rem 0 1rem 1.25rem;
  padding: 0;
}

.legal li {
  margin: .25rem 0;
}

.legal .muted {
  color: #555;
  font-size: 0.95rem;
}

.legal-back {
  margin-top: 2rem;
}