/* main.css (wie vorher, leicht gekürzt) */
:root{
  --bg:#0b0b0b; --yellow:#ffd400; --panel-text:#0b0b0b; --text:#e9e9e9; --muted:#cfcfcf;
  --max-width:1100px; --radius:12px; --gap:1rem; --pad:1rem; --font-sans:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html{font-family:var(--font-sans); -webkit-text-size-adjust:100%;}
body{margin:0; background:linear-gradient(180deg,#070707 0%,var(--bg) 100%); color:var(--text); line-height:1.5; min-height:100vh;}
.wrapper{max-width:var(--max-width); margin:0 auto; padding:calc(var(--pad) * 1.25);}
.skip-link{position:absolute; left:0; top:0; transform:translateY(-150%); background:#fff; color:#000; padding:.5rem .75rem; z-index:1000;}
.skip-link:focus{transform:translateY(0); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.4);}
header{display:flex; align-items:center; gap:1rem; padding:.75rem 0; background:linear-gradient(90deg,var(--yellow), #f0c300); border-radius:calc(var(--radius)-4px); box-shadow:0 6px 18px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.06);}
.brand{display:flex; flex-direction:column; gap:.08rem; margin-left:.5rem;}
.brand h1{margin:0; font-size:1.9rem; color:var(--panel-text);
.brand .subtitle {
  margin: 0;
  color: #333333;
  font-size: .95rem;
}
 font-weight:800;}
nav{margin-left:auto;}
nav ul{display:flex; gap:.5rem; margin:0; padding:0; list-style:none; align-items:center; flex-wrap:wrap;}
nav a{display:inline-block; padding:.6rem .95rem; border-radius:10px; color:var(--panel-text); background:rgba(0,0,0,.06); text-decoration:none; font-weight:700;}
main{padding:calc(var(--pad)*.5) 0; display:grid; gap:var(--gap);}
.hero{background:var(--yellow); color:var(--panel-text); padding:1rem; border-radius:calc(var(--radius)-2px); border:2px solid rgba(0,0,0,.06);}
.grid{display:grid; gap:var(--gap);}
@media (min-width:800px){ .grid{grid-template-columns:1fr 320px; align-items:start;} }
.card{background:linear-gradient(180deg,#fff,#fffef8); color:#111; padding:1rem; border-radius:10px; border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 18px rgba(0,0,0,.12);}
.karte-main table{width:100%; border-collapse:collapse; margin-bottom:1.5rem;}
.karte-main thead th{background:#fff8e0; text-align:left; padding:.85rem; font-weight:700; border-bottom:1px solid #eee;}
.karte-main tbody td{padding:.85rem; border-bottom:1px solid #f0f0f0; vertical-align:middle; line-height:1.35;}
.karte-main tbody tr.category td{background:#fffbe6; font-weight:700; padding:.9rem;}
@media (max-width:640px){
  .karte-main thead{display:none}
  .karte-main table, .karte-main tbody, .karte-main tr, .karte-main td{display:block; width:100%;}
  /* kompaktere Karte: weniger Abstand zwischen Tabellen und Zeilen */
.karte-main table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:0.6rem; /* engerer Abstand zwischen Tabellen */
}
.karte-main thead th{
  background:#fff8e0;
  text-align:left;
  padding:0.6rem; /* geringerer Innenabstand */
  font-weight:700;
  border-bottom:1px solid #eee;
}
.karte-main tbody td{
  padding:0.6rem; /* geringere Zeilenhöhe */
  border-bottom:1px solid #f0f0f0;
  vertical-align:middle;
  line-height:1.25;
}
.karte-main tbody tr.category td{
  background:#fffbe6;
  font-weight:700;
  padding:0.65rem;
}
@media (max-width:640px){
  .karte-main thead{display:none}
  .karte-main table, .karte-main tbody, .karte-main tr, .karte-main td{display:block; width:100%;}
  .karte-main tbody td{padding:.5rem 0; border-bottom:1px solid #eee;}
  .karte-main .size, .karte-main .price{display:inline-block; float:right;}
}
}
footer{padding:.75rem 0; text-align:center; color:var(--muted); font-size:.95rem; border-top:1px solid rgba(255,255,255,.02);}

.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}