/* Gemeinsame Gestaltung aller PANAMATIK-Seiten */
html {
  min-height: 100%;
  background: #e3eaf1 linear-gradient(160deg, #eef0f3 0%, #e0e8f0 50%, #d2e2f0 100%) fixed;
}
body {
  margin: 0;
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #000;
  background: transparent;
}
a:link { color: rgb(0,51,204); }
a:visited { color: rgb(153,0,153); }
a:hover, a:active { color: rgb(255,0,0); }
img { max-width: 100%; height: auto; }

.page { max-width: 860px; margin: 0 auto; padding: 10px 20px 30px; }

/* Kopf: Logo und Einleitung links, Foto rechts */
.head {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo photo" "intro photo";
  column-gap: 28px; align-items: start;
}
.logo {
  grid-area: logo; justify-self: start; display: block;
  background: #fff; padding: 12px 16px; border-radius: 6px; box-shadow: 0 4px 14px rgba(40,60,90,.18);
}
.logo img { width: 242px; display: block; }
.intro { grid-area: intro; margin-top: 18px; max-width: 470px; }
.intro h1 { font-size: 19px; line-height: 1.35; margin: 0 0 8px; color: #1c2a3a; }
.intro p { font-size: 14px; margin: 0; color: #2c3a48; }
.intro .back { display: inline-block; margin-top: 10px; font-size: 14px; }
.photo { grid-area: photo; position: relative; }
.photo img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 4px 14px rgba(40,60,90,.18); }

/* Rot umrandeter Kasten im Stil der alten Seiten */
.box {
  border: 1pt solid rgb(255,51,51);
  padding: 10pt 12pt 12pt;
  margin-top: 22px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(40,60,90,.10);
}
.box h2 { font-size: 17px; margin: 0 0 10px; }

/* Links unten */
.links { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 14px; padding: 0 2px; font-size: 14px; }

/* Tablet */
@media (max-width: 900px) {
  .page { padding: 10px 12px 24px; }
}
/* Handy */
@media (max-width: 700px) {
  .head { grid-template-columns: 1fr; grid-template-areas: "logo" "photo" "intro"; }
  .photo { justify-self: center; margin-top: 18px; }
  .intro { max-width: none; }
  .links { justify-content: center; }
  .box { padding: 8pt 8pt 10pt; }
}

/* ---- Produktseiten ---- */
.box > p { margin: 0 0 10px; text-align: justify; }
.box > p:last-child { margin-bottom: 0; }
.models { font-weight: bold; color: rgb(0,51,204); }
.note { font-size: 12.5px; color: #444; }
/* Einleitungskasten: ruhiger als die roten Produktkaesten */
.box.lead {
  border: 1pt solid rgb(56,163,219);
  background: #fbfdff;
}
.box.lead h2 { color: #1c2a3a; }
.box.lead .figure img { max-width: 70%; }

.figure { margin: 4px 0 14px; text-align: center; }
.figure img { display: inline-block; vertical-align: top; margin: 0 4px 6px; }
.figure figcaption { font-size: 12.5px; color: #444; }
.side { float: left; max-width: 42%; max-height: 300px; width: auto; margin: 4px 16px 8px 0; }
.box::after { content: ""; display: block; clear: both; }

/* Funktionsliste */
/* zweispaltig, aber senkrecht gezaehlt: links 1, 2, 3 ... untereinander */
.features { columns: 2; column-gap: 22px; margin: 6px 0 14px; padding: 0; list-style: none; counter-reset: f; }
.features li { counter-increment: f; font-size: 14px; break-inside: avoid; margin-bottom: 12px; }
.features h3 { font-size: 14px; margin: 0 0 2px; color: rgb(0,51,204); }
.features h3::before { content: counter(f) ". "; }
.features p { margin: 0; text-align: left; }

/* einfache Aufzaehlung, zweispaltig von oben nach unten */
.points { columns: 2; column-gap: 28px; margin: 4px 0 12px; padding-left: 18px; font-size: 14px; }
.points li { break-inside: avoid; margin-bottom: 8px; }
.points li::marker { color: rgb(255,51,51); }
ol.points { padding-left: 24px; }
ol.points li::marker { color: rgb(0,51,204); font-weight: bold; }
h3.sub { font-size: 14px; margin: 14px 0 4px; color: rgb(0,51,204); }

/* Preis und Bestellung */
.order {
  clear: both; display: table; margin: 12px 0 0 auto; text-align: right;
  background: #f2f7fc; border: 1px solid #d3e3f1; border-radius: 6px; padding: 8px 14px; font-size: 14px;
}
.order > span { display: block; }
.order .price { font-weight: bold; font-size: 15px; }
/* mehrere Preise: Beschreibung links, Preise rechtsbuendig untereinander */
.pricelist { border-collapse: collapse; margin: 0 0 4px auto; }
.pricelist td { padding: 1px 0 1px 16px; text-align: left; vertical-align: baseline; }
.pricelist td:first-child { padding-left: 0; }
.pricelist td.price { text-align: right; white-space: nowrap; }
.docs { font-size: 14px; }
.soldout { float: right; margin-left: 12px; display: inline-block; font-weight: bold; color: #fff; background: rgb(102,102,204); border-radius: 4px; padding: 2px 10px; font-size: 13px; }

/* Bildergalerie mit Grossansicht beim Anklicken (lightbox.js) */
.gallery { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 14px 18px; margin: 4px 0 14px; padding: 0; list-style: none; }
.gallery a { display: block; text-align: center; text-decoration: none; font-size: 12.5px; color: #333; }
.gallery img { display: block; height: calc(170px * var(--r, 1)); width: auto; margin: 0 auto 4px; border: 1px solid transparent; border-radius: 3px; cursor: zoom-in; transition: border-color .15s; }
.gallery a:hover img { border-color: rgb(56,163,219); }
.gallery a:hover { color: rgb(255,0,0); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lightbox::backdrop { background: rgba(15,22,32,.82); }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { display: block; max-width: 94vw; max-height: 86vh; width: auto; height: auto; margin: 0 auto; background: #fff; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lightbox figcaption { color: #fff; font-size: 14px; margin-top: 8px; }
.lightbox button {
  position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.85); font: 20px/1 Verdana, sans-serif; color: #123; cursor: pointer;
}
.lightbox .lb-prev { left: 12px; }
.lightbox .lb-next { right: 12px; }
.lightbox .lb-close { top: 26px; right: 12px; transform: none; }
.lightbox button:hover { background: #fff; color: rgb(255,0,0); }

@media (max-width: 700px) {
  .features, .points { columns: 1; }
  .box.lead .figure img { max-width: 100%; }
  .side { float: none; max-width: 100%; margin: 0 auto 10px; display: block; }
  .box > p { text-align: left; }
  .gallery img { height: calc(130px * var(--r, 1)); }
}

/* ---- Produktleiste mit Karten (strip.js) ---- */
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.box-head h2 { margin: 0; }
.arrows { display: flex; gap: 6px; }
.arrows button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ccc; background: #fff;
  font: 16px/1 Verdana, sans-serif; color: rgb(0,51,204); cursor: pointer;
}
.arrows button:hover { border-color: rgb(255,51,51); color: rgb(255,0,0); }
.arrows button:disabled { color: #ccc; border-color: #eee; cursor: default; }

/* Kacheln, horizontal scrollbar */
.strip {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 14px) / 4);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 10px;
}
.card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  border: 1px solid #dde4ea; border-radius: 10px; overflow: hidden;
  text-decoration: none; background: #fff;
  transition: background-color .15s, border-color .15s;
}
.card:hover { background: #f2f7fc; border-color: #b9d3ea; }
.card .pic { border-bottom: 1px solid #dde4ea; }
.card .pic img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.card .pic.contain img { object-fit: contain; padding: 8px; box-sizing: border-box; }
.card .body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 14px; margin: 0 0 4px; color: #000; }
.card p { font-size: 12.5px; line-height: 1.45; margin: 0; color: #444; }
.card .more { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: bold; color: rgb(0,51,204); }
.card:hover .more { color: rgb(255,0,0); }

.card.active { border-color: rgb(255,51,51); background: #fff7f7; }
@media (max-width: 900px) {
  .strip { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
}
@media (max-width: 700px) {
  .strip { grid-auto-columns: 62%; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .strip { scroll-behavior: auto; }
}