:root{--rot:#c8102e;--rot-d:#9e0b23;--grau:#f4f4f4;--text:#1d1d1d;--linie:#e2e2e2}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.5}
a{color:var(--rot)}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:16px}
.kopf{border-bottom:4px solid var(--rot);background:#fff}
.kopf-in{max-width:1200px;margin:0 auto;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.sitename{font-size:clamp(22px,4vw,34px);font-weight:800;letter-spacing:-.5px;color:var(--rot);text-decoration:none}
.sitename.klein{font-size:20px}
.logo{height:56px;width:auto}
.logo-platzhalter{border:2px dashed var(--rot);color:var(--rot);font-weight:800;font-size:12px;line-height:1.1;padding:4px 8px;text-align:center;border-radius:4px}
.logo-platzhalter small{font-weight:400;font-size:9px}
.kontakt-kopf{text-align:right;font-size:14px}
.kontakt-kopf a{text-decoration:none}
.ph{color:#999;font-style:italic}
.hero{position:relative;height:clamp(220px,38vw,420px);background:#333;overflow:hidden}
.hero picture{display:block;height:100%}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:.85}
.hero-text{position:absolute;left:0;right:0;bottom:0;padding:24px max(16px,calc(50% - 584px));color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75) 55%);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hero h1{margin:0 0 4px;font-size:clamp(24px,4vw,40px)}
.hero p{margin:0;font-size:clamp(15px,2vw,19px)}
.leiste{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin:8px 0 16px}
.filter{display:flex;flex-wrap:wrap;gap:6px}
.filter button{border:2px solid var(--rot);background:#fff;color:var(--rot);border-radius:20px;padding:6px 14px;font-size:15px;cursor:pointer}
.filter button.aktiv{background:var(--rot);color:#fff}
.sort select{font-size:15px;padding:6px;margin-left:6px}
.vh{position:absolute;left:-9999px}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.karte{border:1px solid var(--linie);border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.karte[hidden]{display:none}
.karte-bild{position:relative;aspect-ratio:4/3;background:var(--grau);display:block}
.karte-bild img{width:100%;height:100%;object-fit:cover}
.status-verkauft .karte-bild img{filter:grayscale(.8);opacity:.7}
.kein-bild{display:flex;height:100%;align-items:center;justify-content:center;color:#999}
.kein-bild.klein{width:64px;height:48px;background:var(--grau);font-size:11px}
.badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:4px;font-size:13px;font-weight:700;color:#fff}
.badge.inline{position:static;display:inline-block}
.b-verfuegbar{background:#1f7a33}.b-reserviert{background:#d98a00}.b-verkauft{background:#666}
.karte-text{padding:12px 14px;display:flex;flex-direction:column;flex:1}
.typ{color:var(--rot);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.karte h3{margin:2px 0 4px;font-size:19px}.karte h3 a{color:var(--text);text-decoration:none}
.kurz{margin:0 0 10px;color:#555;font-size:14px;flex:1}
.karte-fuss{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linie);padding-top:8px}
.preis{font-weight:800}.preis.gross{font-size:22px;color:var(--rot)}
.nr{font-size:13px;color:#777}
.info{border-top:1px solid var(--linie);margin-top:24px;max-width:900px}
.detail-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
@media(max-width:800px){.detail-grid{grid-template-columns:1fr}}
.detail h1{margin:2px 0;font-size:clamp(24px,3.5vw,34px)}
.untertitel{color:#555;margin:0 0 10px}
.haupt img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;cursor:zoom-in}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;margin-top:6px}
.thumbs img{aspect-ratio:1;object-fit:cover;border-radius:4px}
.knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.knopf{display:inline-block;padding:10px 18px;border:2px solid var(--rot);color:var(--rot);background:#fff;border-radius:6px;text-decoration:none;font-weight:700;font-size:16px;cursor:pointer}
.knopf.rot{background:var(--rot);color:#fff}.knopf.rot:hover{background:var(--rot-d)}
.knopf.gross{font-size:18px;padding:12px 24px}
.knopf.aus{opacity:.4;cursor:not-allowed}
.knopf.weg,button.weg{border-color:#888;color:#555}
table.daten{border-collapse:collapse;width:100%;font-size:15px}
.daten th,.daten td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--linie);vertical-align:top}
.daten th{width:42%;color:#555;font-weight:600}
.daten .zwischen th{background:var(--grau);color:var(--rot);text-transform:uppercase;font-size:13px}
.beschreibung{max-width:820px}
.zurueck{margin-bottom:10px}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:99}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:48px;cursor:pointer;padding:10px 18px}
.lb-x{top:4px;right:6px}.lb-p{left:4px}.lb-n{right:4px}
.lb-z{position:absolute;bottom:12px;color:#fff}
.fuss{background:#222;color:#ddd;margin-top:40px}
.fuss a{color:#fff}
.fuss-in{max-width:1200px;margin:0 auto;padding:20px 16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.fuss h2{color:#fff;margin-top:0;font-size:20px}
.fuss .ph{color:#aaa}
.text{max-width:800px}
/* Admin */
.admin{background:var(--grau)}
.akopf{background:#fff;border-bottom:4px solid var(--rot);padding:10px 16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.akopf nav a{margin-left:16px;font-weight:600}
.atitel{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.hilfe{color:#555;font-size:14px}
.aliste{list-style:none;padding:0;margin:0}
.aliste li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--linie);border-radius:6px;padding:8px 10px;margin-bottom:6px}
.aliste li[hidden]{display:none}
.aliste li.zieht{opacity:.5;outline:2px dashed var(--rot)}
.aliste img{width:64px;height:48px;object-fit:cover;border-radius:4px}
.ainfo{flex:1;min-width:0}
.griff{cursor:grab;font-size:24px;color:#888;padding:4px 8px;touch-action:none}
.form fieldset{background:#fff;border:1px solid var(--linie);border-radius:8px;margin:0 0 16px;padding:14px 16px}
.form legend{font-weight:800;color:var(--rot);font-size:18px;padding:0 6px}
.form label{display:block;margin-bottom:10px;font-weight:600}
.form label small{font-weight:400;color:#777}
.form input:not([type=radio]):not([type=file]),.form select,.form textarea{display:block;width:100%;font-size:17px;padding:9px 10px;border:1px solid #bbb;border-radius:5px;margin-top:3px;font-family:inherit}
.form input.neu{background:#fff8d6;border-color:#d98a00}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 14px}
.wahl{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.radio{font-size:17px}
.marge{font-weight:800;font-size:18px}.marge.pos{color:#1f7a33}.marge.neg{color:var(--rot)}
.fotos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.foto{width:170px;border:1px solid var(--linie);border-radius:6px;padding:4px;background:#fff;position:relative;cursor:grab}
.foto img{width:100%;height:120px;object-fit:cover}
.titel-mark{display:none;position:absolute;top:8px;left:8px;background:var(--rot);color:#fff;font-size:12px;padding:2px 6px;border-radius:3px}
.foto:first-child{border:3px solid var(--rot)}.foto:first-child .titel-mark{display:block}
.fk{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}.fk button{font-size:13px;padding:3px 6px;cursor:pointer}
.upload{display:inline-block!important;border:2px dashed var(--rot);padding:12px 18px;border-radius:6px;color:var(--rot);cursor:pointer;background:#fff}
.upload input{display:none}
.ts{background:#fff5f5;border-radius:6px;padding:10px;margin-bottom:12px}
.ts .daten input{font-size:15px;padding:4px 6px}
.hinweis{color:#8a5a00}
.aktionen{display:flex;gap:10px;flex-wrap:wrap;background:var(--grau);padding:10px 0}
.loeschen{margin-top:20px;text-align:right}
.ok{background:#e3f5e6;border:1px solid #1f7a33;padding:8px 12px;border-radius:6px;font-weight:700}
.fehler{color:var(--rot);font-weight:700}
@media(max-width:600px){.kontakt-kopf{text-align:left}.aliste li{flex-wrap:wrap}.knopf{padding:9px 14px}}
.platzhalter{color:var(--rot);background:#fdecef;border-radius:3px;padding:0 3px}
.rechtstext h2{font-size:20px;margin-top:26px}

@media (max-width:600px){.hero{height:auto}.hero picture{height:auto;aspect-ratio:16/9}.hero img{opacity:1}.hero-text{position:static;background:#2b2b2b;text-shadow:none;padding:14px 16px 16px}}