:root{
  --bg:#f7fafc; --surface:#ffffff; --muted:#4a5568; --text:#0f172a;
  --border:#e2e8f0; --accent:#2563eb; --focus:#3b82f6; --ok:#16a34a;
  --shadow:0 10px 25px rgba(2,6,23,.06);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text); background:linear-gradient(180deg,#f8fafc,#f7fafc 35%,#f1f5f9 100%) fixed;}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:20px}
header.sticky{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.badge{font-size:12px;color:#065f46;background:linear-gradient(135deg,#a7f3d0,#34d399);padding:4px 10px;border-radius:999px;font-weight:800;border:1px solid #10b98122}
.btn{appearance:none;border:0;background:linear-gradient(135deg,#60a5fa,#2563eb);color:#fff;padding:10px 14px;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}
.btn.alt{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:24px;align-items:center;padding:28px 0}
.hero h1{font-size:clamp(28px,3vw,44px);line-height:1.12;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 18px}
.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-height:100%; box-shadow:var(--shadow)}
/* Bild-Container */
.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  aspect-ratio: 1 / 1; /* oder 4/3, wenn du lieber rechteckig willst */
  overflow: hidden;
}

/* IMG im Container: immer sichtbar, nicht beschnitten */
.thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
}
.placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#94a3b8;background:#e2e8f0}
.symbolfoto{position:absolute;top:8px;right:8px;background:#111827d9;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;border:1px solid #ffffff33}
.content{padding:14px 14px 12px}
.title{font-weight:800;margin:4px 0 6px}
.price{display:flex;align-items:baseline;gap:8px;margin:8px 0 0}
.price .now{font-size:20px;font-weight:900;color:#0f766e}
.price .old{text-decoration:line-through;color:#64748b;font-size:14px}
.card footer{margin-top:auto;display:flex;gap:10px;padding:12px;border-top:1px solid var(--border);background:#fafafa}
.link{flex:1;text-align:center;text-decoration:none;font-weight:900;background:linear-gradient(135deg,#60a5fa,#2563eb);color:#fff;padding:10px 12px;border-radius:12px}
.link.alt{background:#fff;border:1px solid var(--border);color:var(--text)}
.tools{display:flex;gap:10px;flex-wrap:wrap}
table.compare{width:100%;border-collapse:separate;border-spacing:0 8px;margin-top:12px}
table.compare caption{text-align:left;margin:0 0 8px;color:var(--muted)}
table.compare thead th{font-weight:800;text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);background:#fff}
table.compare tbody tr{background:#fff;border:1px solid var(--border)}
table.compare tbody td, table.compare tbody th{padding:12px}
footer.site{margin:32px auto 40px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:16px;color:#475569}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
	  .symbolfoto{ display:none !important; }
	  /* Zwei-Spalten-Layout für Text + Bild, mobil stacked */
#main .media{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "text"
    "img";
  gap: 1rem;
  align-items:center;
  margin: 1.5rem 0;
}
#main .media__text{ grid-area: text; }
#main .media__img{ grid-area: img; }

@media (min-width: 768px){
  /* Bild rechts */
  #main .media--img-right{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text img";
  }
  /* Bild links */
  #main .media--img-left{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "img text";
  }
}

#main .media__img > .frame{
  background:#eee;
  padding:2rem;
  text-align:center;
}

#main .media__img img{
  max-width:100%;
  height:auto;
  display:block;
}