/* =====================================================================
   rahmen.css: bringt die noch nicht umgestellten Seiten (Editorblock, Kategorie,
   Start, Suche) in das Corporate Design 2026/27 der Katalogseiten.
   Wird NACH peddy.css und katalog.css geladen. Nur Darstellung, kein Inhalt.
   ===================================================================== */

/* Grundschrift wie im Katalog: 18 px, normale Stärke, gut lesbar */
body{font-size:1.125rem;line-height:1.6;color:var(--text);font-weight:400}
.wrap{max-width:var(--spalte);padding-inline:var(--rand)}
#main{display:block}

/* Seitenkopf der Inhalts- und Kategorieseiten = Modellkopf ohne Bild */
.page-hero{position:relative;overflow:hidden;background:var(--hausgrau);border-bottom:0;padding:calc(var(--s)*4) 0 calc(var(--s)*7)}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 50%,#000 30%,transparent 75%)}
.page-hero>*{position:relative}
.page-hero .crumb,.crumb{font:400 .95rem/1.4 "Barlow",sans-serif;text-transform:none;letter-spacing:0;color:#dcdbdc;padding-top:0;padding-bottom:calc(var(--s)*4)}
.page-hero .crumb a{color:#dcdbdc;text-decoration:none}.page-hero .crumb a:hover{color:#fff}
.page-hero .crumb span{color:#fff}
.page-hero h1{color:#fff;font-size:clamp(2.5rem,5.5vw,4.5rem);line-height:.98;text-transform:uppercase;letter-spacing:-.005em;margin:0;max-width:20ch;overflow-wrap:normal;hyphens:manual}
.page-hero.hat-kopf{padding:calc(var(--s)*4) 0 calc(var(--s)*7)}
.pd-kopf{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:calc(var(--s)*6);align-items:center}
.pd-kopf-bild{order:2;position:relative;padding:calc(var(--s)*3);border:1px solid rgba(255,255,255,.12);background:#fff;border-radius:2px}
.pd-kopf-bild img{margin-inline:auto;max-height:420px;width:auto}
.pd-kennnr{display:flex;align-items:center;gap:12px;font:500 .875rem/1 "IBM Plex Mono",monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:calc(var(--s)*2.5)}
.pd-kennnr::before{content:"";width:40px;height:1px;background:var(--orange)}
.pd-kennnr span{background:none;color:var(--orange);padding:0;margin-left:6px}
.pd-kurzdaten{color:#e6e5e6;margin-top:calc(var(--s)*2)}

/* Inhaltsbereich: volle Katalogbreite, ruhiger Abstand */
.page-body,.page-body.page-breit,.page-body.page-breit.page-breit3,.page-body.page-breit.page-breit4,.wrap.page-body{max-width:var(--spalte);margin-inline:auto;padding-block:calc(var(--s)*7) calc(var(--s)*4)}
.pd-doc{color:var(--text);line-height:1.6}
.entry-content h2,.pd-doc h2,.pd-doc table.pd-layout>tbody>tr>td>h2,.pd-doc table.pd-layout>tbody>tr>td>h2:first-child{
  font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:clamp(1.4rem,2.2vw,1.8rem);text-transform:uppercase;
  color:var(--ink);border-left:6px solid var(--orange);padding-left:14px;line-height:1.1}
.pd-doc td h2{border-left:0;padding-left:0;font-size:1.15rem;text-transform:none}
.pd-doc h3{font-size:1.1rem}
.pd-doc td,.pd-doc th{font-size:1rem;line-height:1.5}
.pd-doc tr.TabZeile td,.pd-doc tr.TabZeile th{border-bottom:1px solid var(--linie)!important}
.pd-doc td.TabZeile{background:var(--flaeche)}
.entry-content tr.TabZeile:hover td{background:#fff6ef}
.pd-doc figure.image figcaption,.pd-doc em,.pd-doc i{font-size:.95rem}
.pd-doc figure.image figcaption{font-family:"Barlow",sans-serif;color:var(--leise)}
.pd-doc table.grille,.pd-doc td.grille,.pd-doc th.grille{border-color:var(--linie)!important;border-radius:0}

/* PDF-Kennzeichen: kein weißer Text auf Orange (Kontrast 2,8:1), sondern dunkle Schrift */
.entry-content a[href*=".pdf"]::before{background:var(--orange);color:var(--ink);font-size:.75rem;font-weight:600;border-radius:2px}

/* Kacheln der Kategorie- und Startseite wie die Katalogkarten */
.card{border:1px solid var(--linie);border-radius:10px;padding:0;gap:0;overflow:hidden;box-shadow:none}
.card:hover{transform:none;box-shadow:0 6px 20px rgba(47,46,47,.10);border-color:#c4c3c4}
.card .thumb,.card-cat .thumb{aspect-ratio:4/3;background:var(--flaeche);margin:0;padding:calc(var(--s)*2)}
.card .thumb img{mix-blend-mode:multiply}
.card>.cat,.card>h3,.card>.card-text,.card>.more{margin-inline:calc(var(--s)*2.5)}
.card>.cat{margin-top:calc(var(--s)*2);font-size:.85rem;color:var(--orange-text)}
.card>h3{font-size:1.3rem;margin-block:6px 0}
.card .card-text{font-size:1rem;color:var(--leise)}
.card>.more{margin-top:auto;margin-bottom:calc(var(--s)*2);font-size:.9rem;padding-top:12px}
.card::after{display:none}
.card-grid{gap:calc(var(--s)*3);margin:calc(var(--s)*5) 0 calc(var(--s)*8)}

/* Suche */
.pd-suche-form input{font-size:1.125rem}

/* Handy */
@media (max-width:860px){
  .pd-kopf{grid-template-columns:1fr}.pd-kopf-bild{order:-1}
  .page-hero h1{max-width:none}
}
.suchknopf{display:grid;place-items:center;width:40px;height:40px;color:#e2e1e2}
.suchknopf:hover{color:#fff}
.sprachen a.fehlt{opacity:.45}

/* .page-body setzt in peddy.css padding als Kurzform und nimmt damit der .wrap den Seitenrand */
.wrap.page-body,.page-hero .wrap,.crumb.wrap{padding-inline:var(--rand)}

/* Handy: Layouttabellen der Altseiten stapeln statt abschneiden, Datentabellen seitlich wischbar */
@media (max-width:860px){
  .pd-doc table.pd-layout,.pd-doc table.pd-layout>tbody,.pd-doc table.pd-layout>tbody>tr,.pd-doc table.pd-layout>tbody>tr>td,
  .pd-doc table.pd-border,.pd-doc table.pd-border>tbody,.pd-doc table.pd-border>tbody>tr,.pd-doc table.pd-border>tbody>tr>td{display:block;width:auto!important;max-width:100%}
  .pd-doc table.pd-layout>tbody>tr>td,.pd-doc table.pd-border>tbody>tr>td{padding-right:0!important}
  .pd-doc table:not(.pd-layout):not(.pd-border){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pd-doc img{max-width:100%;height:auto}
}

/* Bilder nie breiter als der Inhalt, auch wenn alte Regeln max-width aufheben */
.pd-doc img{max-width:100%!important;height:auto!important}
.pd-doc a:has(img),.pd-doc figure{max-width:100%!important}

/* Symmetrie auf den Altseiten: Die Tabellen von 2003 tragen eigene Breiten (83 %, 58 %, 41 %).
   Auf dem PC laufen alle Blöcke der obersten Ebene jetzt über die volle Inhaltsbreite,
   Blocksatz wird linksbündig (Blocksatz reißt Löcher in die Zeilen). */
@media (min-width:861px){
  .pd-doc>table,.pd-doc>figure.table,.pd-doc>figure.table>table,.pd-doc>p,.pd-doc>ul,.pd-doc>h2,.pd-doc>h3{width:100%!important;max-width:none!important}
  .pd-doc>table>tbody>tr>td>table{width:100%!important}
}
.pd-doc [style*="justify"]{text-align:left!important}

/* ---------------- Corporate Design Peddinghaus (01.11.2026) für Start- und Kategorieseiten */
/* peddy.css schaltet das Einblenden ab (!important); Fotos mit weißem Grund sollen mit der hellen Platte verschmelzen */
.card-cat .thumb img,.card .thumb img{mix-blend-mode:multiply !important}
.card-grid-img{background:none;border:0}
/* Kennzahlenleiste der Startseite im Peddinghaus-Dunkelgrau, Beschriftung lesbar (14 px) */
.fp-kpis{background:rgba(47,46,47,.82);border-top-color:rgba(255,255,255,.14)}
.fp-kpis .l{font-size:.875rem;letter-spacing:.12em;color:#cfcecf}
.fp-hero{background:var(--hausgrau)}
/* Startseite: Peddimax mit schwarzem Sockel (höher als das alte Motiv) bleibt im Rahmen */
.fp-machine img{width:auto;max-width:100%;max-height:500px;margin-top:40px}
@media (max-width:860px){.fp-machine img{max-height:300px;margin-top:52px}}