/* Öffentlicher Shop T137N5 - schlicht, mobil zuerst, ohne Skripte */
:root{
	--grund:#fafaf7; --flaeche:#fff; --text:#1d1d1f; --leise:#6b6b70; --linie:#e3e3de;
	--akzent:#1f4fa8; --akzent-hell:#e8eefb; --gut:#2e7d32; --schlecht:#b3261e;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--grund); color:var(--text); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--akzent)}
img{max-width:100%; display:block}
.breite{max-width:1120px; margin:0 auto; padding:0 16px}

.testband{background:#b3261e; color:#fff; text-align:center; font-size:13px; padding:4px}
.aufbau{background:#fff4d6; color:#6b4e00; text-align:center; font-size:14px; padding:6px 16px}
.kopf{background:var(--flaeche); border-bottom:1px solid var(--linie)}
.kopf .breite{display:flex; align-items:center; min-height:60px}
.marke{font-weight:800; font-size:22px; letter-spacing:.5px; color:var(--text); text-decoration:none}
.marke span{font-weight:400; font-size:15px; color:var(--leise); margin-left:10px; letter-spacing:0}

main{padding-top:24px; padding-bottom:48px}
h1{font-size:28px; line-height:1.2; margin:0 0 10px}
h2{font-size:19px; margin:24px 0 10px}
.einleitung{color:var(--leise); max-width:680px; margin:0 0 24px}
.leer{color:var(--leise)}
.pfad{margin:0 0 16px; font-size:14px}

/* Übersicht */
.raster{display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))}
.karte{background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; overflow:hidden; color:inherit; text-decoration:none; display:flex; flex-direction:column; transition:box-shadow .15s}
.karte:hover{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.karte img, .karte .ohnebild{aspect-ratio:4/3; width:100%; object-fit:contain; background:#f1f1ec}
.kartentext{padding:12px 14px 14px}
.kartentext h2{font-size:16px; line-height:1.35; margin:0 0 8px}
.preis{font-weight:700; margin:0}
.preis.gross{font-size:26px; margin:6px 0 2px}
.lieferbar{color:var(--gut); font-size:14px; margin:2px 0 0}
.ausverkauft{color:var(--schlecht); font-size:14px; margin:2px 0 0}
.hinweis{color:var(--leise); font-size:13px; margin:4px 0 12px}
.ohnebild.gross{aspect-ratio:1; border-radius:12px}

/* Angebot */
.angebot{display:grid; gap:28px; grid-template-columns:1fr}
@media (min-width:860px){ .angebot{grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr)} }
.galerie input{position:absolute; opacity:0; pointer-events:none}
.grossbild{display:none; background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; overflow:hidden}
.grossbild img{width:100%; aspect-ratio:1; object-fit:contain}
.galerie input:checked + .grossbild{display:block}
.miniaturen{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.miniaturen label{width:64px; height:64px; border:1px solid var(--linie); border-radius:8px; overflow:hidden; cursor:pointer; background:var(--flaeche)}
.miniaturen img{width:100%; height:100%; object-fit:cover}
.untertitel{color:var(--leise); margin:0 0 6px}
table.varianten, table.merkmale{width:100%; border-collapse:collapse; background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; overflow:hidden}
.varianten td, .merkmale th, .merkmale td{padding:9px 12px; border-bottom:1px solid var(--linie); text-align:left; vertical-align:top; font-size:15px}
.varianten tr:last-child td, .merkmale tr:last-child th, .merkmale tr:last-child td{border-bottom:0}
.varianten td.zahl{text-align:right; white-space:nowrap}
.varianten td.lieferbar, .varianten td.ausverkauft{white-space:nowrap}
.merkmale th{font-weight:600; width:42%; color:var(--leise)}
.knopf{display:inline-block; background:var(--akzent); color:#fff; text-decoration:none; font-weight:600; padding:12px 22px; border-radius:10px; margin-top:16px}
.knopf:hover{filter:brightness(1.1)}
.beschreibung{background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; padding:8px 20px 20px; margin-top:32px; overflow-wrap:anywhere}

/* Rechtstexte */
.rechtstext{background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; padding:8px 24px 20px; max-width:860px; overflow-wrap:anywhere}

.fuss{border-top:1px solid var(--linie); background:var(--flaeche); color:var(--leise); font-size:14px; padding:18px 0 28px}
.fuss p{margin:0 0 8px}
.fuss nav{display:flex; flex-wrap:wrap; gap:6px 18px}

@media (max-width:520px){
	h1{font-size:23px}
	.marke span{display:none}
	.varianten td, .merkmale th, .merkmale td{padding:8px; font-size:14px}
}

/* Warenkorb und Kasse (26.09.2026) */
.kopf .breite{justify-content:space-between}
.korblink{color:var(--text); text-decoration:none; font-weight:600; padding:8px 12px; border:1px solid var(--linie); border-radius:10px; white-space:nowrap}
.korblink b{background:var(--akzent); color:#fff; border-radius:999px; padding:1px 8px; margin-left:4px; font-size:13px}
.kaufen{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:16px 0 8px}
.kaufen label, .formular label{display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--leise)}
.kaufen .knopf{margin-top:0}
select, input[type=text], input[type=email], input[type=number], textarea{font:inherit; color:var(--text); padding:10px 12px; border:1px solid #cfcfc9; border-radius:9px; background:#fff; max-width:100%}
.kaufen input[type=number]{width:90px}
button{font:inherit; cursor:pointer}
button.knopf{border:0}
.formular{max-width:640px}
.formular label{margin:0 0 14px}
.formular label.wahl{flex-direction:row; align-items:flex-start; gap:10px; color:var(--text); font-size:15px; background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; padding:12px 14px; margin:0 0 10px}
.formular label.wahl input{margin-top:4px}
.zweispaltig{display:grid; grid-template-columns:140px 1fr; gap:12px}
.falle{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fehler{background:#fdecea; color:var(--schlecht); border:1px solid #f5c2bd; border-radius:10px; padding:12px 14px; margin:0 0 16px}
.kasten{background:var(--akzent-hell); border:1px solid #c9d7f5; border-radius:12px; padding:4px 20px 8px; max-width:560px; margin:16px 0}
table.korb{width:100%; max-width:860px; border-collapse:collapse; background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; overflow:hidden}
.korb td{padding:10px 12px; border-bottom:1px solid var(--linie); vertical-align:middle}
.korb td.zahl{text-align:right; white-space:nowrap}
.korb tr.summe td{font-weight:700; border-bottom:0}
.korbbild{width:72px}
.korbbild img{width:60px; height:60px; object-fit:contain; background:#f1f1ec; border-radius:8px}
.menge{display:flex; gap:6px; align-items:center}
.menge input{width:70px; padding:6px 8px}
.menge button{padding:6px 10px; border:1px solid var(--linie); border-radius:8px; background:#fff}
@media (max-width:520px){ .korbbild{display:none} .zweispaltig{grid-template-columns:1fr} }

/* Logo der Verwaltung (include/images/t137n5.png), 26.09.2026 */
.marke{display:flex; align-items:center; gap:12px}
.marke img{height:44px; width:auto}
@media (max-width:520px){ .marke img{height:36px} }

/* Sammler- und Sicherheitshinweis (27.09.2026) */
.warnhinweis{background:#fff8e6; border:1px solid #e0a030; border-radius:10px; padding:10px 14px; font-size:14px; margin:4px 0 14px}