/* Fenstergünstig Bauelemente – statischer Nachbau der WordPress-Seite (Kauf-Theme RT-Theme 18), MB-COMPUTERS 2026.
   Maße, Farben und Umbruchpunkte sind an der Altseite gemessen (berechnete Stile und Pixelvergleich), nicht kopiert.
   Umbrüche wie das Theme: ab 1100 px 1040er Raster, 960–1099 px 940er, 768–959 px 740er, darunter 90 % einspaltig.
   Schrift: PT Sans / PT Sans Narrow, je nur Schnitt 400 wie auf der Altseite (Fettes rechnet der Browser hinzu). */

@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/pt-sans-normal-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/pt-sans-normal-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "PT Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/pt-sans-italic-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/pt-sans-italic-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/pt-sans-narrow-normal-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/pt-sans-narrow-normal-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --schrift: "PT Sans", sans-serif;
  --schmal: "PT Sans Narrow", sans-serif;
  --gelb: #f4bf1e;       /* Akzent des Themes (Menülinie, Ecken, Reiter) */
  --link: #e0af1d;
  --orange: #fb9434;     /* h1 */
  --blau: #053472;       /* h2, Logo */
  --raster: 1040px;
  --hinweis-h: 0px;
}

/* ---------- Grundlagen ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-bottom: var(--hinweis-h, 0px); }
body {
  margin: 0;
  font: 400 13px/175% var(--schrift);
  color: #888;
  background: #fff;
  min-width: 1080px;
}
article, aside, footer, header, main, nav, section { display: block; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
a { color: var(--link); text-decoration: underline; background: transparent; }
@media (hover: hover) { a:hover { text-decoration: none; } }
b, strong { font-weight: bold; }
p { margin: 0; padding: 0 0 16px; }
ul, ol { list-style: disc; margin: 0 0 20px 17px; padding: 0; }
ul ul { list-style: circle; margin: 0; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--schmal); font-weight: normal; letter-spacing: 0;
  position: relative; margin: 0; padding: 0 0 10px; line-height: 140%; color: #666;
}
h1 { font-size: 28px; color: var(--orange); }
h2 { font-size: 26px; color: var(--blau); }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h1 a, h2 a, h3 a, h4 a { color: #666; text-decoration: none; }
.leer { padding: 0 0 10px; }
.linkliste li { padding: 1px 0; }   /* Hilfsseiten: Tippfläche der Links mindestens 24 px (WCAG 2.5.8) */     /* leere Überschrift der Altseite: nur ihr Polster */
::selection { background: var(--link); color: #fff; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; box-sizing: border-box; }
button, input { line-height: normal; }
textarea { overflow: auto; vertical-align: top; }

.i { display: inline-block; height: 1em; width: auto; fill: currentColor; vertical-align: -0.15em; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }
.blocksatz { text-align: justify; }
.breite-90 { width: 90%; }
.leeren { clear: both; }

/* ---------- Rahmen ---------- */
.huelle { position: relative; }
.schalter { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; display: none; }   /* fokussierbar nur, wo die Mobilleiste steht */
.mobilleiste { display: none; }

/* Kopfleiste „Kontakt | Search“ */
.kopfleiste { background: #f8f8f8; border-bottom: 1px solid rgba(0, 0, 0, .04); padding: 5px; }
.kopfleiste::after { content: ""; display: table; clear: both; }
.kopfleiste-innen { width: var(--raster); margin: 0 auto; min-height: 18px; }
.kopflinks { float: left; list-style: none; margin: 0 10px 0 0; padding: 0; font-size: 11px; line-height: 180%; color: #919191; }
.kopflinks > li { display: inline-block; position: relative; padding: 0 6px; line-height: 100%; border-right: 1px solid #cdcdcd; }
.kopflinks > li:last-child { border-right: 0; }
.kopflinks a { color: #919191; text-decoration: none; }
.kopfsuche { display: inline; margin: 0; padding: 0; font: 11px/1 arial, sans-serif; }
.kopfsuche .i { position: relative; top: 1px; margin-right: 5px; vertical-align: top; }
.kopfsuche input {
  width: 47px; height: 12px; padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; line-height: inherit; outline-offset: 2px; -webkit-appearance: none; appearance: none;
}
.kopfsuche input::placeholder, .navsuche input::placeholder { color: inherit; opacity: 1; }
.kopfsuche input::-webkit-search-cancel-button { display: none; }

/* Kopf mit Logo */
.kopf { position: relative; margin: 0 auto; background: #fff; }
.kopf-inhalt { position: relative; display: table; width: 1060px; margin: 0 auto; padding: 15px 0 55px; }
.logo-bereich { display: block; padding: 10px; }
.logo img { max-width: 100%; height: auto; }

/* Navigation */
.navschatten { position: relative; z-index: 999; width: 100%; margin: auto; padding-bottom: 12px; }
.navrand { width: 100%; background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; box-shadow: 0 4px 0 rgba(0, 0, 0, .04); }
.navleiste { display: table; width: var(--raster); margin: auto; }
.navi { position: relative; z-index: 999; display: table; float: left; margin: 0; padding: 0; list-style: none; line-height: 140%; border-right: 1px solid #fff; }
.navi > li { position: relative; float: left; margin: 0; text-align: center; border-right: 1px solid #eee; }
.navi > li:first-child { border-left: 1px solid #eee; }
.navi > li.mega { position: static; }
.navi > li > a, .navi > li > .eltern {
  position: relative; display: block; padding: 15px 35px;
  font-family: var(--schmal); font-size: 16px; line-height: inherit; color: #8a8a8a; text-decoration: none;
  background: none; border: 0; border-radius: 0; cursor: default;
}
.navi > li > a { cursor: pointer; }
.navi > li > a .i { margin-right: 5px; vertical-align: -0.12em; }
.navi > li > a::after, .navi > li > .eltern::after {
  content: ""; position: absolute; left: 0; top: -2px; width: 0; height: 2px; background: var(--gelb); transition: width .2s ease;
}
.navi > li.aktuell > a::after, .navi > li.vorfahr > a::after, .navi > li.vorfahr > .eltern::after { width: 100%; }
@media (hover: hover) {
  .navi > li:hover > a::after, .navi > li:hover > .eltern::after { width: 100%; }
  .navi > li.hat-unter:hover > a, .navi > li.hat-unter:hover > .eltern { box-shadow: 6px 0 0 rgba(0, 0, 0, .03), -6px 0 0 rgba(0, 0, 0, .03); }
}

/* Ausklappmenü (Maus: Hover, Tastatur: Fokus darin, Skript: .offen) */
.unter {
  position: absolute; z-index: 50; left: -1px; width: 170px; height: 0; margin: 10px 0 0; padding: 0; overflow: hidden;
  list-style: none; text-align: left; background: #fff; border: 1px solid #eee; box-shadow: 4px 4px 0 rgba(0, 0, 0, .04);
  visibility: hidden; opacity: 0; transition: opacity 0s, margin-top .3s;
}
.unter > li { display: block; margin: 0; text-align: left; border-bottom: 1px solid #eee; }
.unter > li:last-child { border-bottom: 0; }
.unter a { position: relative; display: block; padding: 10px; color: #999; text-decoration: none; font-family: Arial, sans-serif; }
.navi > li:focus-within > .unter, .navi > li.offen > .unter { height: auto; margin: 0; overflow: visible; visibility: visible; opacity: 1; }
@media (hover: hover) { .navi > li:hover > .unter { height: auto; margin: 0; overflow: visible; visibility: visible; opacity: 1; } }

/* Mega-Menü „Produkte“ (zwei Spalten wie das multicolumn-Menü des Themes) */
.mega-flaeche {
  position: absolute; left: 0; display: table; table-layout: fixed; box-sizing: border-box; width: var(--raster);
  height: 0; margin-top: 10px; padding: 10px 0 0; overflow: hidden; background: #fff; border: 1px solid #eee;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .04); visibility: hidden; opacity: 0; transition: all .3s;
}
.navi > li:focus-within > .mega-flaeche, .navi > li.offen > .mega-flaeche { height: auto; margin-top: 0; overflow: visible; visibility: visible; opacity: 1; }
@media (hover: hover) { .navi > li.mega:hover > .mega-flaeche { height: auto; margin-top: 0; overflow: visible; visibility: visible; opacity: 1; } }
.mega-spalte { display: table-cell; vertical-align: top; margin: 0; padding: 20px; list-style: none; border-left: 1px solid #eee; }
.mega-spalte:first-child { border-left: 0; }
.mega-spalte li { display: block; float: none; clear: both; text-align: left; border: 0; }
.mega-kopf { display: block; padding: 0 0 5px; font-size: 14px; line-height: 100%; color: #777; }
.mega-spalte ul { margin: 0; padding: 10px 0 20px; list-style: none; }
.mega-spalte a { display: block; text-align: left; color: #999; text-decoration: none; line-height: 200%; border-bottom: 1px solid #eee; }
.mega-spalte li li:last-child > a { border-bottom: 0; }

/* Suche in der Navigationsleiste */
.navsuche {
  position: relative; top: 8px; float: right; display: table; width: 100px; overflow: hidden;
  min-height: 17px; padding: 5px 11px 5px 5px; background: #fff; border: 1px solid #eee;
}
.navsuche input {
  float: left; display: inline; width: 87.94px; height: 12px; margin: 2px 0 0; padding: 0 0 0 10px; border: 0; border-radius: 0;
  box-sizing: border-box; background: transparent; font: 11px/100% arial, sans-serif; color: #929292;
  -webkit-appearance: none; appearance: none;
}
.navsuche input::-webkit-search-cancel-button { display: none; }
.navsuche button {
  position: absolute; right: 4px; top: 0; height: 29px; width: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; line-height: 17px; color: rgba(0, 0, 0, .2);
}

/* ---------- Kopfzeile unter der Navigation: Bühne (Start) oder Titel + Brotkrumen ---------- */
.inhalt-halter { position: relative; z-index: 1; display: block; width: 100%; }
.kopfzeile {
  position: relative; z-index: 1; width: 100%; min-height: 60px; margin: -40px 0 0; overflow: hidden;
  background: #fcfcfc; border-top: 1px solid rgba(0, 0, 0, .05); border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.infobar { width: var(--raster); margin: auto; padding: 75px 0 30px; }
.infobar::after { content: ""; display: table; clear: both; }
.infobar-titel { float: left; width: 35%; }
.infobar h1 { font-size: 21px; line-height: 100%; padding: 0; color: #888; }
.krumen { float: left; width: 65%; margin-top: 5px; font-size: 11px; line-height: 100%; color: #aaa; text-align: right; }
.krumen a { color: #888; text-decoration: none; }
.krumen .home .i { margin-right: 5px; vertical-align: top; }
.krumen .trenner { vertical-align: top; }

/* Bühne (FlexSlider des Themes): Bild bildschirmbreit, Höhe aus dem Seitenverhältnis von Folie 1 */
.buehne { position: relative; overflow: hidden; background: #fff; }
.folien { position: relative; margin: 0; padding: 0; list-style: none; }
.folie { display: none; position: relative; margin: 0; }
.folie:first-child { display: block; }
.folie img { display: block; width: 100%; height: auto; }
.js .folien { display: flex; transition: transform .6s ease; }
.js .folie { display: block; flex: 0 0 100%; }
.gleiche-hoehe .folie img { aspect-ratio: 1000 / 294; height: auto; object-fit: cover; }
.pfeil {
  position: absolute; top: 50%; z-index: 99; width: 30px; height: 50px; margin-top: -25px; padding: 0; border: 0;
  background: rgba(0, 0, 0, .24); color: #fff; font-size: 13px; line-height: 50px; text-align: center; cursor: pointer;
  opacity: 0; transition: all .3s;
}
.pfeil[hidden] { display: none; }
.pfeil-zurueck { left: -40px; }
.pfeil-vor { right: -40px; }
.buehne:focus-within .pfeil, .buehne.zeigt-pfeile .pfeil { opacity: 1; }
.buehne:focus-within .pfeil-zurueck, .buehne.zeigt-pfeile .pfeil-zurueck { left: 20px; }
.buehne:focus-within .pfeil-vor, .buehne.zeigt-pfeile .pfeil-vor { right: 20px; }
@media (hover: hover) {
  .buehne:hover .pfeil { opacity: 1; }
  .buehne:hover .pfeil-zurueck { left: 20px; }
  .buehne:hover .pfeil-vor { right: 20px; }
}
.pause {
  position: absolute; right: 8px; bottom: 8px; z-index: 99; width: 24px; height: 24px; padding: 0; border: 0;
  background: rgba(0, 0, 0, .24); color: #fff; cursor: pointer;
}
.pause[hidden] { display: none; }
.pause::before, .pause::after { content: ""; position: absolute; top: 7px; width: 3px; height: 10px; background: currentColor; }
.pause::before { left: 8px; }
.pause::after { right: 8px; }
.pause.angehalten::before { left: 9px; width: 0; height: 0; background: none; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.pause.angehalten::after { content: none; }
@media (hover: hover) { .pause:hover { background: rgba(0, 0, 0, .5); } }

/* ---------- Inhalt ---------- */
.inhalt-grund { min-height: 295px; }
.inhalt { position: relative; z-index: 1; display: flow-root; margin: 0 auto; padding: 0; background: #fff; overflow-x: clip; }
.block-grund { position: relative; padding: 20px 0; overflow: hidden; }
.block-grund.vorlage { padding: 0; }
.produkt-vorlage .block-grund.vorlage { padding: 20px 0; }   /* Produkte im Vorlagen-Aufbau: Abstand wie die normale Inhaltsfläche */
.block { position: relative; z-index: 1; width: 1060px; margin: auto; padding: 0 10px; }
.block::after { content: ""; display: table; clear: both; }
.spalte-voll { width: 100%; padding: 0; }
.spalte-links { float: left; width: 740px; margin: 0 19px 0 10px; padding-right: 20px; }
.seitenleiste { float: left; position: relative; width: 260px; margin: 0; }
.row { display: block; clear: both; margin: 0 10px; }
.row .row, .spalte-links .row { margin: 0; }
.spalte-voll img, .spalte-links img { display: block; max-width: 100%; height: auto; }
.inhalt-fuss { display: block; padding: 0; background: #f5f5f5; box-shadow: inset 0 4px 0 rgba(0, 0, 0, .02); }
.inhalt-fuss .leerzeile { height: 10px; }

/* Raster des Themes (rt-css-framework) */
.box { float: left; display: inline; margin: 0 0 0 20px; padding: 0; border: 0; box-sizing: border-box; }
.box.first { clear: both; margin-left: 0 !important; }   /* !important wie im Raster des Themes: schlägt .box .box (4 %) */
.row .box:first-child { clear: both; margin-left: 0; }
.box.first::before { content: ""; display: table; }
.box.last { clear: right; margin-right: 0 !important; }
.box.last::after { content: ""; display: table; }
.box .box { margin: 0 0 0 4%; }
.box .box:first-child { margin-left: 0; }
.one { clear: both; float: none; display: block; width: 1040px; }
.two { width: 510px; }
.three { width: 333.3333px; }
.four { width: 245px; }
.two-three { width: 686.6667px; }
.three-four { width: 775px; }
.spalte-links .three { width: 233.3333px; }
/* fließendes Raster mit #container wie im Theme: schlägt die festen Spaltenbreiten und den Handy-Abstand */
#container .fluid .box { margin: 0; padding: 0; }
#container .fluid .two { width: 50%; }
#container .fluid .three { width: 33.31%; }
.box .one { width: 100%; }
/* Abstandsklassen mit #container wie im Theme: sie schlagen .row .row { margin: 0 } */
#container .margin-t0 { margin-top: 0; }
#container .margin-t20 { margin-top: 20px; }
#container .margin-t30 { margin-top: 30px; }
#container .margin-b10 { margin-bottom: 10px; }
#container .margin-b20 { margin-bottom: 20px; }
#container .margin-b30 { margin-bottom: 30px; }
.space { clear: both; position: relative; display: table; width: 100%; }

/* Bilder im Inhalt */
img.rechts { float: right; display: block; max-width: 100%; margin: 6px 0 6px 20px; }
img.mitte { display: table; margin: auto; padding: 0; }
picture { display: contents; }

/* Startseite (Template-Builder des Themes) */
.grau { background: #f1f1f1; }
.block-grund.start-reihe { padding: 20px 0; }
.block-grund.start-reihe.extra { padding: 40px 0 20px; }
@media only screen and (min-width: 768px) {
  .kaesten .row { display: flex; }   /* gleich hohe Kästen je Reihe wie im Theme */
  .kaesten .row::before, .kaesten .row::after { content: none; }
}
.start-reihe .block { padding: 0 10px; }
.textkasten > p:last-child { padding-bottom: 0; }
.kaesten .box { padding: 10px 5px 5px 10px; background: #f1f1f1; }
.kasten-titel { position: relative; overflow: hidden; text-align: center; }
.kasten-titel h3 { display: inline-block; position: relative; margin: 0; padding: 0; font-size: 20px; }
.kasten-bild img { display: block; margin: 0 auto; max-width: 100%; }
.kaesten p { text-align: center; }
.kaesten .space.margin-b10 { margin-bottom: 10px; }
.kaesten .space.margin-b20 { margin-bottom: 20px; }
/* kleine Slider in zwei Spalten (Akzente, Referenzen) */
.buehne-klein .pfeil { top: 0; margin-top: 0; height: 16px; line-height: 16px; }
.buehne-klein .pfeil-zurueck { left: auto; right: 50px; }
.buehne-klein .pfeil-vor { right: -10px; }
/* Bildtext (flex-caption des Themes): Reihenfolge der Media-Blöcke wie dort, sie überschreiben sich gegenseitig */
.bildtext { position: absolute; bottom: 30%; z-index: 900; width: 100%; text-align: left; font-family: var(--schmal); }
.bildtext-halter { display: inline-block; max-width: 60%; }
.bildtext-zeile {
  position: relative; top: 0; float: left; display: inline-block; padding: 10px; font-size: 22px;
  color: #fff; background: rgba(0, 0, 0, .4);
}
.motion .folie .bildtext-zeile { transition: top 1.3s; }
.motion .folie:not(.ist-aktiv) .bildtext-zeile { top: -1000px; }

/* Formular (gleiche Felder und Maße wie das alte Formular-Plugin) */
.formular { text-align: left; }
.formular-kopf { padding: 5px 0; }
.formular-kopf h1 { margin: 5px 0; padding: 0; }
.feld { padding: 5px 0; }
.feld::after { content: ""; display: table; clear: both; }
.feld > label { float: left; width: 31%; }
.feld-eingabe { position: relative; float: left; width: 65%; }
.feld-eingabe input, .feld-eingabe select, .feld-eingabe textarea { width: 100%; padding-left: 0; padding-right: 0; font-size: 13px; }
.feld-eingabe select { padding-left: 0; }
.feld-datenschutz { padding-top: 10px; }
.feld-datenschutz label { float: none; width: auto; display: block; }
.feld-datenschutz input { margin: 0 4px 0 0; vertical-align: -2px; }
.formular-knopf::after { content: ""; display: table; clear: both; }
.absenden {
  float: left; display: block; margin: 30px 10px 0 0; padding: 5px 20px; border: 0; border-radius: 0;
  background: #ccc; color: #000; font: inherit; line-height: inherit; cursor: pointer;
}
@media (hover: hover) { .absenden:hover { background: #bbb; } }
.absenden:active { background: #b3b3b3; }
.falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Produkte: Detailseite */
.produkt-bild { padding: 10px; overflow: hidden; background: #fff; border: 1px solid #f0f0f0; }
.bildeffekt { position: relative; overflow: hidden; max-width: 100%; background: #fff; }
.bildeffekt img { display: block; width: 100%; max-width: 100%; overflow: hidden; }
.lupe {
  position: absolute; z-index: 1; top: 50%; left: 50%; width: 30px; margin: -21px 0 0 -15px; padding: 10px 0;
  color: #fff; text-align: center; text-decoration: none; background: var(--link); opacity: 0; transition: all .4s;
}
.lupe:focus-visible { opacity: 1; }
@media (hover: hover) { .bildeffekt:hover .lupe { opacity: 1; } }
.produkt-meta { font-size: 12px; color: #aaa; }
.produkt-meta a { color: var(--link); }
.produkt-titel h1 { font-size: 26px; }
.produkt-kopf .krumen { float: none; width: auto; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; text-align: left; }   /* Theme: div.breadcrumb */

/* Produkte: Kategorieseite (Raster mit Rahmen und gelben Ecken) */
.mit-rahmen > .box { position: relative; margin: 0; padding: 0; border: 0 solid #f0f0f0; border-left-width: 1px; border-bottom-width: 1px; background: rgba(0, 0, 0, .01); }
.mit-rahmen > .erste-reihe { border-top-width: 1px; }
.mit-rahmen > .box.last { box-shadow: 1px 0 0 #f0f0f0; }
.mit-rahmen > .box::before { content: ""; position: absolute; z-index: 2; left: -1px; top: -1px; width: 10px; height: 2px; background: var(--gelb); }
.mit-rahmen > .box::after { content: ""; position: absolute; left: -1px; top: -1px; width: 2px; height: 10px; background: var(--gelb); }
.produkt-kachel { position: relative; }
.trenner-doppelt { height: 0; margin: 30px 0; padding: 0; overflow: visible; border: 0; border-top: medium double #f0f0f0; color: #f0f0f0; box-sizing: content-box; }
.seitenzahlen { margin: 30px 0; }
@media only screen and (min-width: 768px) {
  .mit-rahmen { display: flex; }   /* gleich hohe Kästen je Reihe wie im Theme (dort per Skript) */
  .mit-rahmen::before, .mit-rahmen::after { content: none; }
}
.kachel-bild { margin-bottom: 0; padding: 20px; background: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .04); }
.kachel-bild img { display: block; margin: auto; }
.kachel-info { padding: 20px; text-align: left; }
.kachel-info h4 { font-size: 16px; line-height: 150%; }

/* Portfolio (Sprossen) */
.portfolio-kaesten { margin: 0; padding: 0; list-style: none; }
#container .portfolio-kaesten .box { position: relative; padding: 1px; }
.portfolio-kaesten .box::before { content: ""; position: absolute; z-index: 2; left: 1px; top: 1px; width: 10px; height: 2px; background: var(--gelb); }
.portfolio-kaesten .box::after { content: ""; position: absolute; left: 1px; top: 1px; width: 2px; height: 10px; background: var(--gelb); }
.portfolio-kasten { position: relative; padding: 12px; border: 1px solid #efefef; }
.portfolio-info { margin: 20px 0 0; }
.portfolio-kaesten img { display: block; }
.projekt-info { margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; }
.beitrag-navi { text-align: center; }
.knopf-weiss {
  display: inline-block; overflow: hidden; width: 83px; box-sizing: content-box; padding: 10px 20px 13px; border: 1px solid #eee; border-radius: 6px;
  background: #fff; color: #c0c0c0; font: bold 13px/100% arial, sans-serif; text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1);
}
.knopf-weiss:first-child { margin-right: 10px; }

/* Reiter (Beschläge): ohne Skript Sprunglinks, mit Skript Reiter (main.js) */
.reiter-liste { display: block; margin: 0; padding: 0; list-style: none; border: 0 solid #f0f0f0; border-bottom-width: 1px; }
.reiter-liste::after { content: ""; display: table; clear: both; }
.reiter-liste li { position: relative; float: left; margin: 0; border: 0 solid #f0f0f0; border-right-width: 1px; }
.reiter-liste a { position: relative; display: block; margin: 0; padding: 12px 20px; font-size: 12px; line-height: 100%; color: #898989; text-align: center; text-decoration: none; }
.reiter-liste a[aria-selected="true"] { border-bottom: 4px solid var(--gelb); cursor: default; }
@media (hover: hover) { .reiter-liste a:hover { border-bottom: 4px solid var(--gelb); } }
.reiter-seite { margin: 0; padding: 20px 0; overflow: hidden; }
.js .reiter-seite[hidden] { display: none; }

/* Downloads mit Symbol (Prospekte) */
ul.mit-symbol { display: inline-block; width: 100%; margin: 0 0 20px; list-style: none; }
.mit-symbol > li > span { float: left; padding-right: 6px; color: #848484; }
.mit-symbol > li > span .i { min-width: 18px; }   /* wie min-width: 18px am Zeichen des Themes */
.mit-symbol p { margin-left: 27px; padding: 0; }
.mit-symbol > li::after { content: ""; display: table; clear: both; }
.mit-symbol > li.last::after { display: block; margin-bottom: 2px; }

/* ---------- Fuß ---------- */
.fuss { padding: 14px 0; color: #a9a9a9; background: #fff; box-shadow: inset 0 4px 0 rgba(0, 0, 0, .06); }
.fuss-innen { position: relative; display: block; width: var(--raster); margin: 0 auto; padding: 10px 0 60px; }
.fuss-teil { float: left; display: inline; margin: 0; padding: 0; }
.fusslinks { display: block; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 180%; color: #919191; }
.fusslinks li { display: inline-block; padding: 0 6px; line-height: 100%; border-left: 1px solid #cdcdcd; }
.fusslinks li:first-child { padding-left: 0; border-left: 0; }
.fusslinks li[hidden] { display: none; }
.fusslinks a, .fuss-speicher { color: #919191; text-decoration: none; }
.fuss-speicher { padding: 0; border: 0; background: none; font: inherit; line-height: inherit; cursor: pointer; }
@media (hover: hover) { .fusslinks a:hover, .fuss-speicher:hover { text-decoration: underline; } }
.fuss-speicher:active { text-decoration: underline; }
@media (forced-colors: active) { .fuss-speicher { color: LinkText; } }
.copyright { display: block; font-size: 12px; line-height: 180%; }

/* ---------- Hinweisleiste (nur technisch notwendig, kein Consent) ---------- */
.hinweis-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
  padding-bottom: env(safe-area-inset-bottom); background: #f8f8f8; border-top: 1px solid #ddd;
  color: #555; font-size: 14px; line-height: 1.45;
}
.hinweis-leiste[hidden] { display: none; }
body.hinweis-offen { padding-bottom: var(--hinweis-h, 0px); }
.hinweis-leiste-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; max-width: var(--raster); margin: 0 auto; padding: 12px 20px; }
.hinweis-leiste p { flex: 1 1 280px; margin: 0; padding: 0; }
.hinweis-leiste a { color: var(--blau); }
.hinweis-leiste button {
  flex: none; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 4px;
  background: var(--blau); color: #fff; font: inherit; cursor: pointer;
}
@media (hover: hover) { .hinweis-leiste button:hover { background: #0a4a9a; } }
.hinweis-leiste button:active { background: #032553; }

/* ---------- Bildansicht (Klick auf ein Produktbild) ---------- */
.bildansicht { max-width: min(92vw, 1200px); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.bildansicht::backdrop { background: rgba(0, 0, 0, .8); }
.bildansicht img { display: block; max-width: min(92vw, 1200px); max-height: 86vh; width: auto; height: auto; background: #fff; }
.bildansicht p { margin: 6px 0 0; padding: 0; color: #fff; font-size: 13px; }
.bildansicht button {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: #333; font: 20px/32px Arial, sans-serif; cursor: pointer;
}

/* ---------- Einblenden wie im Theme (nur mit Skript und ohne „Bewegung reduzieren“, siehe kopf.js) ---------- */
@media screen {
  .motion .ein:not(.ist-da), .motion .ein-oben:not(.ist-da), .motion .ein-sprung:not(.ist-da) { opacity: 0; }
  .motion .ein.ist-da { animation: einblenden 1s both; }
  .motion .ein-oben.ist-da { animation: einOben 1s both; }
  .motion .ein-sprung.ist-da { animation: einSprung 1s both; }
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes einOben { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes einSprung { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .folien, .pfeil, .unter, .mega-flaeche, .navi > li > a::after { transition: none !important; } }

/* ==================== 960–1099 px ==================== */
@media only screen and (min-width: 960px) and (max-width: 1099px) {
  :root { --raster: 940px; }
  body { min-width: 980px; }
  .kopf-inhalt { width: 980px; }
  .block { width: 960px; }
  .navi > li > a, .navi > li > .eltern { padding: 15px 28px; }
  .unter { width: 150px; }
  .spalte-links { width: 640px; }
  .one { width: 960px; }
  .two { width: 460px; }
  .three { width: 300px; }
  .four { width: 220px; }
  .two-three { width: 620px; }
  .three-four { width: 700px; }
  .spalte-links .three { width: 200px; }
}
@media only screen and (max-width: 1024px) {
  .block, .start-reihe .block { padding: 0; }
  .unter, .mega-flaeche { transition: none; }
  .bildtext { text-align: center; }
  .bildtext-halter { max-width: 80%; float: none; }
  .bildtext-zeile { float: none; }
}
@media only screen and (min-width: 768px) {
  .bildtext { left: 60px; }
  .two .bildtext { position: relative; bottom: auto; left: auto; z-index: 9999; width: 100%; text-align: left; }
  .two .bildtext-halter { width: 100%; max-width: 100%; }
}

/* ==================== 768–959 px ==================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  :root { --raster: 740px; }
  .kopf-inhalt { width: 780px; }
  .block { width: 760px; }
  .spalte-links { width: 540px; }
  .seitenleiste { width: 160px; }
  .one { width: 100%; }
  .two { width: 360px; }
  .three { width: 233.33px; }
  .four { width: 170px; }
  .two-three { width: 486.67px; }
  .three-four { width: 550px; }
  .spalte-links .three { width: 166.67px; }
  .box.two .box, .box.three .box, .box.four .box { width: 100% !important; margin: 0 0 20px; }
}

/* ==================== bis 959 px und Touch ohne Maus: Mobilleiste und aufklappbares Menü ==================== */
@media only screen and (max-width: 959px) {
  body { min-width: 0; }
  .schalter { display: block; }
  .mobilleiste { display: block; padding: 10px 8px; background: #353535; color: #999; font-size: 23px; }
  .mobilleiste::after { content: ""; display: table; clear: both; }
  .mobilleiste label { display: block; height: 22.75px; padding: 0 10px; cursor: pointer; }
  .mobil-menue { float: left; }
  .mobil-zahnrad { float: right; }
  .mobilleiste .i { vertical-align: top; }
  .mobilleiste .auf, #menue-schalter:checked ~ .mobilleiste .mobil-menue .zu, #leiste-schalter:checked ~ .mobilleiste .mobil-zahnrad .zu { display: none; }
  #menue-schalter:checked ~ .mobilleiste .mobil-menue .auf, #leiste-schalter:checked ~ .mobilleiste .mobil-zahnrad .auf { display: inline-block; }
  #menue-schalter:focus-visible ~ .mobilleiste .mobil-menue, #leiste-schalter:focus-visible ~ .mobilleiste .mobil-zahnrad { outline: 2px solid #fff; outline-offset: -2px; }

  .kopfleiste { display: none; }
  #leiste-schalter:checked ~ .kopfleiste { display: block; }
  .kopfleiste-innen { text-align: center; }
  .kopflinks { float: none; margin: auto auto 10px; }
  .kopflinks > li { margin: 10px 0; font-size: 14px; line-height: 200%; }

  .kopf { position: static; }
  .kopf-inhalt { display: block; width: 100%; padding: 15px 0 30px; }
  .logo-bereich { box-sizing: border-box; width: 100%; margin: 15px 0 0; padding: 0 10px; }
  .logo-rahmen { padding: 0 10px; text-align: center; }

  .navschatten { display: none; position: absolute; top: 42px; left: 0; z-index: 999999; width: 100%; margin: 0; }
  #menue-schalter:checked ~ .kopf .navschatten { display: block; }
  .navrand, .navleiste, .navi { box-sizing: border-box; width: 100%; position: static; float: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .navi > li, .navi > li.mega { float: none; position: static; text-align: left; border: 0; }
  .navi a, .navi .eltern { box-sizing: border-box; width: 100%; text-align: left; }
  .navi > li > a, .navi > li > .eltern, .unter a, .mega-spalte a {
    display: block; padding: 10px 10px 10px 30px; border: 0; border-bottom: 1px solid #efefef;
    font: 14px/140% Arial, sans-serif; color: #8a8a8a;
  }
  .navi > li > a .i { display: none; }
  .navi > li:not(.aktuell):not(.vorfahr) > :is(a, .eltern)::after { content: none; }   /* gelbe Linie nur über dem aktuellen Zweig */
  .navi .aktuell > a { font-weight: bold; font-style: italic; }
  .navi > li.aktuell > a { font-weight: normal; }   /* oberste Ebene: im Theme normal !important, nur kursiv */
  .unter, .mega-flaeche { position: relative; left: 0; top: 0; display: block; width: 100%; height: auto; margin: 0; padding: 0;
    visibility: visible; opacity: 1; overflow: visible; border: 0; box-shadow: none; box-sizing: border-box; transition: none; }
  .unter a, .mega-spalte li li a { padding-left: 40px; color: #999; }
  .mega-spalte { display: block; padding: 0; border: 0; }
  .mega-kopf { padding: 10px 0 10px 30px; font-size: 14px; }
  .mega-spalte ul { padding: 0; }
  .mega-spalte li li a { padding-left: 50px; line-height: 200%; }   /* Mega-Links behalten im Theme ihre doppelte Zeilenhöhe */
  .navsuche { display: none; }

  .kopfzeile { margin: 0; min-height: 40px; }
  .mit-symbol .box.one { margin: 0 auto !important; }
  .bildtext-zeile { font-size: 120% !important; }   /* gewinnt im Theme auch unter 550 px (steht dort später als die 110-%-Regel) */
  .fuss-teil { display: block; float: none; text-align: center; }
}
@media only screen and (min-width: 960px) and (hover: none) and (pointer: coarse) {
  /* Touch-Tablet quer: Das Ausklappmenü öffnet nur beim Darüberfahren, ein Tipp auf „Ausstattung“ öffnete sofort die
     Seite, die Unterseiten waren nicht erreichbar (Petratec 20.10.2026). Darum hier das aufklappbare Menü. */
  .mobilleiste { display: block; padding: 10px 8px; background: #353535; color: #999; font-size: 23px; }
  .mobilleiste::after { content: ""; display: table; clear: both; }
  .mobilleiste label { display: block; padding: 0 10px; cursor: pointer; }
  .mobil-menue { float: left; }
  .mobil-zahnrad, .mobilleiste .auf, #menue-schalter:checked ~ .mobilleiste .mobil-menue .zu { display: none; }
  #menue-schalter:checked ~ .mobilleiste .mobil-menue .auf { display: inline-block; }
  #menue-schalter { display: block; }
  #menue-schalter:focus-visible ~ .mobilleiste .mobil-menue { outline: 2px solid #fff; outline-offset: -2px; }
  .navschatten { display: none; position: absolute; top: 42px; left: 0; z-index: 999999; width: 100%; margin: 0; }
  #menue-schalter:checked ~ .kopf .navschatten { display: block; }
  .navrand, .navleiste, .navi { box-sizing: border-box; width: 100%; position: static; float: none; margin: 0; border: 0; box-shadow: none; }
  .navi > li, .navi > li.mega { float: none; position: static; text-align: left; border: 0; }
  .navi > li > a, .navi > li > .eltern, .unter a, .mega-spalte a {
    display: block; box-sizing: border-box; width: 100%; text-align: left; padding: 10px 10px 10px 30px; border: 0; border-bottom: 1px solid #efefef;
    font: 14px/140% Arial, sans-serif; color: #8a8a8a;
  }
  .navi > li > a .i { display: none; }
  .navi > li:not(.aktuell):not(.vorfahr) > :is(a, .eltern)::after { content: none; }   /* gelbe Linie nur über dem aktuellen Zweig */
  .navi .aktuell > a { font-weight: bold; font-style: italic; }
  .navi > li.aktuell > a { font-weight: normal; }
  .unter, .mega-flaeche { position: relative; left: 0; display: block; width: 100%; height: auto; margin: 0; padding: 0;
    visibility: visible; opacity: 1; overflow: visible; border: 0; box-shadow: none; transition: none; }
  .unter a, .mega-spalte li li a { padding-left: 40px; color: #999; }
  .mega-spalte { display: block; padding: 0; border: 0; }
  .mega-kopf { padding: 10px 0 10px 30px; }
  .mega-spalte ul { padding: 0; }
  .mega-spalte li li a { padding-left: 50px; line-height: 200%; }   /* Mega-Links behalten im Theme ihre doppelte Zeilenhöhe */
  .navsuche { display: none; }
  .kopfzeile { margin: 0; }
}
/* Felder ab 16 px auf Touch-Geräten: sonst zoomt iOS beim Antippen in die Seite */
@media (pointer: coarse) { .feld-eingabe input, .feld-eingabe select, .feld-eingabe textarea, .kopfsuche input { font-size: 16px; } }

/* ==================== bis 767 px ==================== */
@media only screen and (max-width: 767px) {
  :root { --raster: 90%; }
  .kopfleiste-innen { width: 100%; }
  .infobar, .fuss-innen, .block { width: 90%; margin-left: auto; margin-right: auto; }
  .start-reihe .block { width: 90%; }
  .infobar-titel, .krumen { width: 100%; text-align: left; }
  .infobar-titel { margin-bottom: 10px; }
  .row { margin: 0 auto; }
  .spalte-links { width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .seitenleiste { width: 100%; }
  .one, .two, .three, .four, .two-three, .three-four, .spalte-links .three, .box .box { width: 100% !important; margin: 0 0 20px; }
  .row > .box:last-child { margin-bottom: 0; }
  .mit-rahmen > .box { border-right-width: 1px; box-shadow: none; }
  .reiter-liste { float: none; width: 100%; border-width: 0; }
  .reiter-liste li { float: none; width: 100%; border-width: 0 0 1px; text-align: left; }
  .reiter-liste a { text-align: left; font-size: 14px; }
  .reiter-liste a[aria-selected="true"] { border-bottom: 0; font-weight: bold; font-style: italic; }
  .reiter { border: 1px solid #f0f0f0; }
  .reiter-seite { position: relative; width: auto; padding: 20px; }
  .kaesten .box { padding-left: 5px; padding-right: 5px; }
  .knopf-weiss { display: table; float: none; margin: auto; }   /* erster Knopf behält margin-right 10px wie im Theme */
  .start-reihe { padding-left: 0; padding-right: 0; }
}
@media only screen and (max-width: 550px) {
  .pfeil { width: 20px; }
  .buehne:hover .pfeil-zurueck { left: 0; }
  .buehne:hover .pfeil-vor { right: 0; }
}

@media print {
  .mobilleiste, .kopfleiste, .navschatten, .hinweis-leiste, .pfeil, .pause, .fuss-speicher, #fuss-speicher { display: none !important; }
  .motion .ein, .motion .ein-oben, .motion .ein-sprung { opacity: 1 !important; animation: none !important; }
  body { min-width: 0; }
}