/* ================================================================ SABTEC — Containerprofil (Einzelansicht eines Containertyps) ================================================================ Nur was ausschliesslich diese Vorlage braucht. Alles Geteilte — .sec, .wrap, .sec-h, .card, .ctab, .annot, .sub — steht in assets/css/system.css und wird hier nicht wiederholt. Keine Farbliterale: die Werte kommen aus theme.json, entweder ueber die Kurznamen (--blue, --line, --card, --mut) oder direkt ueber --wp--custom--ui--*. ================================================================ */ /* Musterseiten-Badge im blauen Kopfpanel. */ .sub .annot { margin-left: 8px; } /* Produktkopf: Galerie breiter als die Faktenkarte (1.2 : 0.8). */ .phero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start; } /* ── Galerie ───────────────────────────────────────────────────── Die Ansichten liegen alle im Markup, umgeschaltet wird ueber das hidden-Attribut. Der Seiten-Reset setzt img auf display:block und schlaegt damit die Browservorgabe fuer [hidden] — deshalb hier ausdruecklich. Ohne JavaScript bleibt die erste Ansicht stehen. */ .pgal .main { height: 460px; background: var(--wp--custom--ui--flaeche-bild); border: 1px solid var(--line); } .pgal .main img { width: 100%; height: 100%; object-fit: contain; } .pgal .main img[hidden] { display: none; } .pgal .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; } .pgal .thumbs button { height: 120px; width: 100%; padding: 0; display: block; cursor: pointer; background: var(--wp--custom--ui--flaeche-bild); border: 1px solid var(--line); } .pgal .thumbs button img { width: 100%; height: 100%; object-fit: cover; } /* 19.08.2026: Diese Regel hing an `aria-current="true"`. Das Attribut ist fuer Navigation gedacht und war an einer Bildergalerie falsch — die Miniaturen tragen jetzt `aria-pressed`. Die Regel griff danach nicht mehr und war eine tote Zeile; die aktive Miniatur wird ueber `[aria-pressed="true"]` im Nachtrag von `style.css` markiert. */ /* ── Faktenkarte ───────────────────────────────────────────────── .tag und .av bleiben wie im Referenz-Frame unausgezeichnet: die Designsystem-Regeln dafuer haengen an .card, nicht an .pfacts. */ .pfacts { background: var(--card); border: 1px solid var(--line); padding: 34px; } .pfacts .av { margin-left: 10px; } .pfacts h2 { font-size: 24px; font-weight: 900; margin: 14px 0 6px; } .pfacts .preis { font-size: 14px; color: var(--mut); margin-bottom: 14px; } .pfacts .prow { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 13px 0; font-size: 14.5px; } .pfacts .prow b { font-weight: 900; white-space: nowrap; } .pfacts .prow span { text-align: right; color: var(--mut); } .pfacts .quer { margin-top: 16px; font-size: 12.5px; color: var(--mut); } .pfacts .quer a { color: var(--blue); font-weight: 900; } /* Handlungsfläche der Faktenkarte. .req ist laut Spec-Pruefvorgabe ein Pill mit 30px Radius auf Primaer — im Prototyp greift die Regel nicht, weil sie dort auf .card gescoped ist. */ .pcta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; align-items: center; } .pcta .req { background: var(--blue); color: var(--wp--preset--color--white); font-weight: 900; font-size: 15px; padding: 15px 30px; border-radius: 30px; } .pcta .req:hover { background: var(--blue-d); } /* .det bleibt wie im Frame unausgezeichnet — nur die Trefferflaeche. */ .pcta .det { padding: 15px 6px; } /* ── Ausstattungsoptionen ──────────────────────────────────────── Die drei Listen sind unterschiedlich lang, deshalb oben bündig statt gestreckt. */ .pakgrid { align-items: start; } .pak { background: var(--card); border: 1px solid var(--line); padding: 30px 28px; } .pak h3 { font-size: 17px; font-weight: 900; margin-bottom: 10px; } .sabtec-page .pak ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--mut); } .pak li { margin: 4px 0; } .pakhinweis { margin-top: 26px; font-size: 14.5px; color: var(--mut); } .pakhinweis a { color: var(--blue); font-weight: 900; } /* Ähnliche Container schliessen direkt an den Ausstattungshinweis an. */ .sec.aehnliche { padding-top: 24px; } @media (max-width: 1120px) { .phero { grid-template-columns: 1fr; } } /* Grundriss-Downloads (Nachtrag 18.08.2026) ------------------------ Bemaszte Vektorzeichnung je Typ plus das Serienblatt. Stehen ueber den Handlungsknoepfen, weil sie zur Entscheidung gehoeren und nicht zur Anfrage. */ .prisse { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .prisse .riss { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--white); font-size: 13.5px; font-weight: 900; color: var(--ink); transition: border-color .15s ease, background .15s ease; } .prisse .riss:hover { border-color: var(--blue); background: var(--wp--preset--color--primary-soft); } .prisse .riss svg { color: var(--blue); flex: none; } .prisse .riss em { font-style: normal; font-weight: 700; font-size: 11.5px; color: var(--soft); letter-spacing: .4px; } /* Der Satz, der fuer alle Typen gilt — steht unter der Datentabelle, damit nicht jede der 29 Profilseiten dieselben sechs Zeilen wiederholt. */ .ptechnik { margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: var(--soft); } /* ── Galeriehoehe auf schmalen Ansichten (29.08.2026) ────────────── `.pgal .main` steht oben auf festen 460 px. Bei 1440 px passt das zum Frame: Der Kasten ist dort 578 px breit, das Bild fuellt ihn fast aus. Bei 390 px ist der Kasten nur noch 346 px breit — die 460 px Hoehe bleiben aber. `object-fit: contain` haelt das Bildverhaeltnis, also entstehen oben und unten graue Baender. Gemessen an /container/l-tec-6/: Kasten 460 px hoch, das Foto darin 215 px, darueber 121 px und darunter 124 px leere Flaeche. Zwei Drittel des Kastens zeigen nichts. Statt einer zweiten festen Zahl bekommt der Kasten unterhalb von 700 px ein Seitenverhaeltnis. Er waechst und schrumpft dann mit der Breite, und die Baender verschwinden, ohne dass das Bild beschnitten wird — `cover` waere hier falsch, es wuerde den Container anschneiden. 4:3 ist bewusst gewaehlt: Die Containeraufnahmen sind querformatig (typisch 1200 x 800), ein 4:3-Kasten laesst ihnen bei 346 px Breite 260 px Hoehe und damit gerade so viel Rand, wie die Aufnahmen selbst schon mitbringen. */ @media (max-width: 700px) { .pgal .main { height: auto; aspect-ratio: 4 / 3; } /* Die Miniaturen stehen zu dritt nebeneinander und sind bei 346 px Gesamtbreite nur noch 106 px breit — 120 px Hoehe macht sie hochkant, obwohl die Aufnahmen quer sind. */ .pgal .thumbs button { height: auto; aspect-ratio: 4 / 3; } }