/* =====================================================================
   peddy.de Katalog 2026/27
   Ein Raster, ein Abstandsmaß, feste Plätze für Bild, Downloads, Daten.
   Lesbarkeit zuerst: 18 px Grundschrift, nichts unter 14 px, Kontrast AA.
   Hausfarbe #f47821 nur als Akzent, nie als Fläche unter weißer Schrift.
   ===================================================================== */
:root{
  --orange:#f47821;
  --orange-text:#a14808;      /* Orange als Schrift auf Hellgrau #ededed 5,2:1, auf Weiß 6,1:1 */
  --ink:#2f2e2f;              /* Kopf, Fuß, Überschriften (Peddinghaus-Dunkelgrau, Shop) */
  --text:#2b2a2b;             /* Fließtext, auf #ededed 11,8:1 */
  --leise:#5c5b5c;            /* Nebentext, auf #ededed 5,8:1 */
  --linie:#dcdcdc;             /* Peddinghaus-Rahmenfarbe */
  --flaeche:#f7f7f7;           /* helle Platte (peddinghaus.es) */
  --hausgrau:#4d4c4d;          /* Firmengrau peddinghaus.com/.es/Shop */
  --grund:#ededed;             /* Inhaltsfläche */
  --s:8px;                    /* Abstandsmaß, alles ist ein Vielfaches */
  --spalte:1240px;
  --rand:clamp(20px,4vw,48px);
  --kopf-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + 24px)}
body{font:400 1.125rem/1.6 "Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--grund);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.bahn{max-width:var(--spalte);margin-inline:auto;padding-inline:var(--rand)}
h1,h2,h3{font-family:"Saira Condensed","Barlow",sans-serif;font-weight:600;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.25rem,4.5vw,3.5rem);line-height:1.02;letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-.005em}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:.005em}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ------------------------------------------------------------ Kopf */
.kante{height:4px;background:var(--orange)}
.kopf{position:sticky;top:0;z-index:50;background:rgba(47,46,47,.94);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);color:#fff}
.kopf .bahn{display:flex;align-items:center;gap:calc(var(--s)*3);min-height:var(--kopf-h)}
.marke{font:700 1.6rem/1 "Saira Condensed",sans-serif;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.marke b{color:var(--orange)}
.menue{display:flex;gap:calc(var(--s)*2.25);list-style:none;margin-left:auto;font:600 1rem/1 "Saira Condensed",sans-serif;
  letter-spacing:.03em;text-transform:uppercase}
.menue a{display:block;padding:calc(var(--s)*1.5) 0;text-decoration:none;color:#e2e1e2;border-bottom:2px solid transparent;white-space:nowrap}
.menue a:hover{color:#fff}
.menue a[aria-current]{color:#fff;border-bottom-color:var(--orange)}
.sprachen{display:flex;gap:4px;font:500 .875rem/1 "IBM Plex Mono",monospace}
.sprachen a{padding:6px 7px;text-decoration:none;color:#c9c8c9}
.sprachen a[aria-current]{color:#fff;box-shadow:inset 0 0 0 1px #7a797a}
.schalter{display:none;margin-left:auto;background:none;border:1px solid #6a696a;color:#fff;width:44px;height:44px;font-size:1.25rem}

/* -------------------------------------------------- Brotkrume */
.krume{padding-block:calc(var(--s)*2.5) 0;font-size:.95rem;color:var(--leise)}
.krume a{color:var(--leise);text-decoration:none}
.krume a:hover{color:var(--text);text-decoration:underline}
.krume span{margin-inline:6px;color:var(--leise)}

/* -------------------------------------------- Produktkopf (immer gleich) */
.produktkopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(var(--s)*6);align-items:center;
  padding-block:calc(var(--s)*4) calc(var(--s)*7)}
.kennung{display:flex;flex-wrap:wrap;gap:var(--s);margin-bottom:calc(var(--s)*2)}
.chip{font:500 .875rem/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;
  border:1px solid var(--linie);border-radius:4px;color:var(--leise);background:#fff}
.chip.kraft{border-color:var(--ink);background:var(--ink);color:#fff}
.produktkopf h1{margin-bottom:calc(var(--s)*2)}
.untertitel{font-size:1.3rem;line-height:1.45;color:var(--leise);max-width:34ch;margin-bottom:calc(var(--s)*4)}
.downloads{display:flex;flex-wrap:wrap;gap:calc(var(--s)*1.5)}
.dl{display:inline-flex;align-items:center;gap:calc(var(--s)*1.5);padding:calc(var(--s)*1.5) calc(var(--s)*2.5);border-radius:6px;
  border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:600;line-height:1.2;transition:background .15s,color .15s}
.dl small{display:block;font:500 .875rem/1.2 "IBM Plex Mono",monospace;color:var(--leise)}
.dl:hover{background:var(--ink);color:#fff}.dl:hover small{color:#cfcecf}
.dl:active{transform:scale(.98)}
.dl svg{flex:none;width:22px;height:22px}
.dl.haupt{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.dl.haupt small{color:#3b2410}
.dl.haupt:hover{background:#ff8a2e}
.hauptbild{background:radial-gradient(ellipse at 50% 60%,#f2f2f2 0,#fff 70%);border-radius:12px;padding:calc(var(--s)*3)}
.hauptbild img{margin-inline:auto;max-height:520px;width:auto}

/* --------------------------------------------- Abschnittsleiste */
.leiste{position:sticky;top:var(--kopf-h);z-index:40;background:rgba(237,237,237,.94);backdrop-filter:blur(10px);
  border-block:1px solid var(--linie)}
.leiste ul{display:flex;gap:calc(var(--s)*4);list-style:none;overflow-x:auto;scrollbar-width:none}
.leiste a{display:block;padding:calc(var(--s)*2) 0;font:600 1rem/1 "Saira Condensed",sans-serif;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;color:var(--leise);white-space:nowrap}
.leiste a:hover{color:var(--ink)}

/* --------------------------------------------------- Abschnitte */
.abschnitt{padding-block:calc(var(--s)*9) 0}
.abschnitt>h2{display:flex;align-items:center;gap:calc(var(--s)*2);margin-bottom:calc(var(--s)*4)}
.abschnitt>h2::before{content:"";width:6px;height:1em;background:var(--orange);border-radius:1px}
.fliess{max-width:68ch}

.punkte{columns:2;column-gap:calc(var(--s)*6);list-style:none}
.punkte li{break-inside:avoid;position:relative;padding:calc(var(--s)*1.25) 0 calc(var(--s)*1.25) calc(var(--s)*3.5);border-bottom:1px solid var(--linie)}
.punkte li::before{content:"";position:absolute;left:4px;top:calc(var(--s)*1.25 + .62em);width:10px;height:2px;background:var(--orange)}

/* Karten: Ausstattung, Zubehör, Bilder. Immer gleiche Bildfläche, gleiche Höhe. */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:calc(var(--s)*3);margin-top:calc(var(--s)*5)}
.karte{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:10px;overflow:hidden;background:#fff;
  text-decoration:none;color:inherit;transition:box-shadow .2s,border-color .2s}
a.karte:hover{border-color:#c4c3c4;box-shadow:0 6px 20px rgba(47,46,47,.10)}
.karte .bild{aspect-ratio:4/3;background:var(--flaeche);display:grid;place-items:center;padding:calc(var(--s)*2)}
.karte .bild img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.karte .text{padding:calc(var(--s)*2) calc(var(--s)*2.5) calc(var(--s)*2.5);line-height:1.45}
.karte .nr{display:block;font:600 1rem/1 "IBM Plex Mono",monospace;color:var(--orange-text);margin-bottom:6px}
.karte .alt{display:block;margin-top:6px;font-size:.95rem;color:var(--leise)}
a.karte .text::after{content:"→";display:block;margin-top:var(--s);color:var(--orange-text);font-weight:600}
.galerie{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.galerie .bild{aspect-ratio:3/2;padding:0}
.galerie .bild img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}

/* ------------------------------------------- Technische Daten */
.daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--s)*4) calc(var(--s)*6);align-items:start}
.datenblock{border-top:3px solid var(--ink)}
.datenblock h3{display:flex;align-items:center;gap:calc(var(--s)*1.5);padding:calc(var(--s)*1.75) 0}
.datenblock h3 img{width:39px;height:25px;flex:none}
.datenblock table{width:100%;border-collapse:collapse}
.datenblock th,.datenblock td{padding:calc(var(--s)*1.1) 0;border-bottom:1px solid var(--linie);vertical-align:top;text-align:left;font-weight:400}
.datenblock th{padding-right:calc(var(--s)*2)}
.datenblock td.einheit{width:5.5em;color:var(--leise);font-size:1rem;white-space:nowrap;padding-right:var(--s)}
.datenblock td.wert{width:8.5em;text-align:right;font-weight:600;white-space:nowrap}
.datenblock tr.gruppe th{padding-top:calc(var(--s)*2.5);font-weight:600;color:var(--ink);border-bottom-color:transparent}
.hinweis{grid-column:1/-1;font-size:1rem;color:var(--leise);max-width:80ch}

/* --------------------------------------------------- Kontakt */
.kontakt{margin-top:calc(var(--s)*10);background:var(--flaeche);border-top:1px solid var(--linie)}
.kontakt .bahn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--s)*3);padding-block:calc(var(--s)*5)}
.kontakt p{font-size:1.25rem}
.kontakt .wege{display:flex;flex-wrap:wrap;gap:calc(var(--s)*1.5)}

/* --------------------------------------------------- Fuß */
.fuss{background:var(--ink);color:#cfcecf;font-size:1rem}
.fuss .bahn{display:grid;grid-template-columns:2fr 1fr 1fr;gap:calc(var(--s)*4);padding-block:calc(var(--s)*6)}
.fuss h4{font:600 1rem/1 "Saira Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:calc(var(--s)*2)}
.fuss ul{list-style:none;display:grid;gap:6px}
.fuss a{text-decoration:none;color:#cfcecf}.fuss a:hover{color:#fff;text-decoration:underline}

/* --------------------------------------------------- Handy */
@media (max-width:1180px){
  .menue{display:none}.schalter{display:block}
  .menue.offen{display:flex;flex-direction:column;position:absolute;top:var(--kopf-h);left:0;right:0;background:var(--ink);
    padding:var(--s) var(--rand) calc(var(--s)*2);gap:0}
}
@media (max-width:860px){
  .produktkopf{grid-template-columns:1fr;gap:calc(var(--s)*3)}
  .hauptbild{order:-1}.hauptbild img{max-height:360px}
  .daten{grid-template-columns:1fr}
  .punkte{columns:1}
  .fuss .bahn{grid-template-columns:1fr}
  .abschnitt{padding-block:calc(var(--s)*7) 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (prefers-reduced-transparency:reduce){.kopf{background:var(--ink);backdrop-filter:none}.leiste{background:var(--grund);backdrop-filter:none}}

.gruppe-a{margin-top:calc(var(--s)*6)}
.gruppe-a .fliess{margin-top:var(--s)}
.gruppe-a .karten{margin-top:calc(var(--s)*3)}
.gruppe-a .unter{margin-top:calc(var(--s)*2);color:var(--leise);max-width:68ch}
body{overflow-x:clip}

/* ---------------- Fassung 2: Modellkopf wie die Startseite, Kapitel, symmetrische Karten */
.modellkopf{background:var(--hausgrau);color:#f2f2f2;position:relative;overflow:hidden}
.modellkopf::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%)}
.modellkopf .bahn{position:relative}
.krume.hell,.krume.hell a{color:#dcdbdc}.krume.hell a:hover{color:#fff}
.modell{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:calc(var(--s)*6);align-items:center;padding-block:calc(var(--s)*4) calc(var(--s)*6)}
.marker{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)}
.marker::before{content:"";width:40px;height:1px;background:var(--orange)}
.modellkopf h1{color:#fff;font-size:clamp(2.75rem,6vw,5rem);line-height:.95;text-transform:uppercase;letter-spacing:-.005em;margin-bottom:calc(var(--s)*2.5)}
.modellkopf .untertitel{color:#e6e5e6;max-width:30ch}
.dl.hell{border-color:#a3a2a3;color:#fff}.dl.hell small{color:#dcdbdc}.dl.hell:hover{background:#fff;color:var(--ink)}
.modell-bild{position:relative;padding:calc(var(--s)*4) calc(var(--s)*3) calc(var(--s)*3);border:1px solid rgba(255,255,255,.12)}
.modell-bild::before,.modell-bild::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--orange)}
.modell-bild::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.modell-bild::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.modell-bild .ecke{position:absolute;top:12px;left:16px;font:500 .875rem/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#dcdbdc}
.modell-bild img{margin-inline:auto;max-height:520px;width:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.kennzahlen{background:#3a393a;border-top:1px solid rgba(255,255,255,.08)}
.kennzahlen .bahn{display:grid;grid-template-columns:repeat(4,1fr)}
.kennzahlen .bahn>div{padding:calc(var(--s)*3);border-left:1px solid rgba(255,255,255,.1)}
.kennzahlen .bahn>div:first-child{border-left:0;padding-left:0}
.kennzahlen b{display:block;font:700 2rem/1 "Saira Condensed",sans-serif;color:#fff}
.kennzahlen b i{font-style:normal;color:#ff8a2e;font-size:.6em;margin-left:2px}
.kennzahlen span{display:block;margin-top:8px;font:500 .875rem/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#cfcecf}
.kapitel{display:flex;align-items:baseline;gap:calc(var(--s)*2);border-top:1px solid var(--ink);padding-top:calc(var(--s)*2.5);margin-bottom:calc(var(--s)*5)}
.kapitel span{font:500 1rem/1 "IBM Plex Mono",monospace;color:var(--orange-text);letter-spacing:.1em}
.kapitel h2{text-transform:uppercase}
/* Karten: Foto füllt die Bildfläche ganz, Freisteller stehen mittig auf Hellgrau. Spaltenzahl geht auf. */
.karten{grid-template-columns:repeat(4,minmax(0,1fr))}
.karten.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.karten.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.karte .bild{padding:0;overflow:hidden}
.karte .bild img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
a.karte:hover .bild img{transform:scale(1.03)}
.karte.frei .bild{padding:calc(var(--s)*2.5)}
.karte.frei .bild img{object-fit:contain}
.karte .text{flex:1}
@media (max-width:1100px){.karten,.karten.drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .modell{grid-template-columns:1fr}.modell-bild{order:-1}.modell-bild img{max-height:340px}
  .kennzahlen .bahn{grid-template-columns:repeat(2,1fr)}
  .kennzahlen .bahn>div:nth-child(3){border-left:0;padding-left:0}
  .kennzahlen .bahn>div{border-top:1px solid rgba(255,255,255,.08)}
}
@media (max-width:520px){.karten,.karten.drei,.karten.zwei{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){a.karte:hover .bild img{transform:none}}

/* Datenblöcke als ausgeglichene Spalten, ohne Lücken unter kurzen Blöcken */
.daten{display:block;columns:2;column-gap:calc(var(--s)*6)}
.datenblock{break-inside:avoid;margin-bottom:calc(var(--s)*5)}
.hinweis{column-span:all}
@media (max-width:860px){.daten{columns:1}}

/* Sicherung: nichts darf seitlich herausragen */
html{overflow-x:clip}
.kopf .bahn{min-width:0}

/* Menü passt ab 1180 px in eine Zeile */
.menue{gap:18px;font-size:.95rem;letter-spacing:.015em}
.kopf .bahn{gap:20px}
.sprachen{gap:0}.sprachen a{padding:6px 5px}
@media (max-width:1320px){.menue{gap:14px;font-size:.9rem}.marke{font-size:1.4rem}}

/* ---------------- REDAXO-Fassung: Ergänzungen zum Muster */
.sprung{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px}
.sprung:focus{left:8px}
.k26-inhalt>:not(.abschnitt){max-width:var(--spalte);margin-inline:auto;padding-inline:var(--rand)}
.kennzahlen .bahn{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.datenblock .hinweis{margin-top:calc(var(--s)*2);font-size:1rem;color:var(--leise)}
h3.zwischen{margin:calc(var(--s)*5) 0 calc(var(--s)*2)}
.text-k26 p+p{margin-top:calc(var(--s)*2)}
.text-k26 a{color:var(--orange-text)}
.modell.ohne-bild{grid-template-columns:1fr}
.fuss-basis{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);padding-block:calc(var(--s)*2.5);font-size:.9rem;color:#b5b4b5}
.fuss .bahn.fuss-basis{display:flex}

@media (max-width:860px){.kennzahlen .bahn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.datenblock td.wert{white-space:normal;width:auto;min-width:5em}.datenblock td.einheit{width:auto;padding-left:8px}.datenblock th{hyphens:auto}}
.datenblock .hinweis{column-span:none}
@media (max-width:860px){.daten{columns:auto;column-count:auto}}

/* ---------------- Serien (Stempel + Matrizen): jede Zeile gleiche Spaltenbreiten */
.serien{display:grid;gap:calc(var(--s)*2)}
.serie{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);align-items:stretch;border:1px solid var(--linie);border-radius:10px;overflow:hidden;background:#fff}
.serie-name{background:var(--serie);color:#fff;padding:calc(var(--s)*3);display:flex;flex-direction:column;justify-content:center}
.serie-name h3{color:inherit;font-size:1.6rem;margin-bottom:6px}
.serie-name p{font-size:1rem;line-height:1.45;opacity:.95}
.serie[style*="#FFFF66"] .serie-name,.serie[style*="#ffff66"] .serie-name,.serie[style*="#CCCCCC"] .serie-name,.serie[style*="#cccccc"] .serie-name{color:var(--ink)}
.serie-bild{display:flex;align-items:center;justify-content:center;gap:calc(var(--s)*2);padding:calc(var(--s)*2);background:var(--flaeche);min-height:150px}
.serie-bild img{max-height:130px;width:auto;max-width:100%;object-fit:contain}
.serie-katalog{padding:calc(var(--s)*3);display:flex;flex-direction:column;justify-content:center;gap:calc(var(--s)*1.5);font-size:1rem}
.serie-katalog .dl{align-self:flex-start;padding:calc(var(--s)*1) calc(var(--s)*2)}
.text-k26.zwei{columns:2;column-gap:calc(var(--s)*6)}
.text-k26.zwei p{break-inside:auto}
.karten.band{grid-template-columns:1fr}
.karten.band .bild{aspect-ratio:auto}
.karten.band .bild img{height:auto}
@media (max-width:860px){
  .serie{grid-template-columns:1fr}.serie-bild{min-height:120px}
  .text-k26.zwei{columns:1}
}

.k26-inhalt{padding-top:calc(var(--s)*7)}
.k26-inhalt>.abschnitt:first-child{padding-top:0}
.karten.band .bild{background:var(--flaeche)}
.karten.band .bild img{width:auto;max-width:100%;margin-inline:auto;object-fit:contain}

/* Banner: ohne Kartenrahmen, das Bild bringt seine eigenen Rundungen mit */
.karten.band .karte{border:0;background:none;border-radius:0}
.karten.band .bild{padding:0;background:none}
a.karte .bild img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.karten.band a.karte:hover .bild img{transform:none;filter:brightness(1.08)}

.karten.fuenf{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.karten.fuenf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.karten.fuenf{grid-template-columns:1fr}}

/* Ein einzelner Datenblock fließt über beide Spalten, damit rechts keine leere Fläche bleibt */
.daten:has(>.datenblock:only-child) .datenblock{break-inside:auto}
.daten:has(>.datenblock:only-child) .datenblock h3{column-span:all}
.datenblock tr{break-inside:avoid}

/* Modellübersicht: Freisteller auf Hellgrau, Name, Untertitel, zwei Kennzahlen */
.karten.modelle .bild{aspect-ratio:1/1;padding:calc(var(--s)*3)}
.karten.modelle h3{font-size:1.45rem;margin-bottom:4px}
.karten.modelle .alt{min-height:2.9em}
.kz{display:grid;gap:4px;margin-top:calc(var(--s)*1.5);border-top:1px solid var(--linie);padding-top:calc(var(--s)*1.5)}
.kz div{display:flex;justify-content:space-between;gap:12px;font-size:1rem}
.kz dt{color:var(--leise)}.kz dd{font-weight:600;white-space:nowrap}
.k26-inhalt>.karten,.k26-inhalt>.gruppe-a{max-width:var(--spalte);margin-inline:auto;padding-inline:var(--rand)}

/* Freisteller nie anschneiden: Bild absolut in die Bildfläche einpassen (Prozenthöhen greifen in Grid mit aspect-ratio nicht) */
.karte .bild{position:relative}
.karte.frei .bild{--pad:calc(var(--s)*2.5)}
.karten.modelle .karte.frei .bild{--pad:calc(var(--s)*3)}
.karten:not(.band) .karte.frei .bild img{position:absolute;inset:var(--pad);width:calc(100% - 2*var(--pad));height:calc(100% - 2*var(--pad));max-height:none;object-fit:contain}
/* Zwei Karten nebeneinander: flachere Bildfläche, Logos ganz zeigen */
.karten.zwei:not(.galerie) .bild{aspect-ratio:16/7}
.karten.zwei:not(.galerie) .bild img{object-fit:contain;background:#fff}
/* Alle Kartenbilder füllen die Bildfläche exakt (auch ohne Freisteller); Banner bleiben im Fluss */
.karten:not(.band) .karte:not(.frei) .bild img{position:absolute;inset:0;width:100%;height:100%;max-height:none}
.karten.zwei:not(.galerie) .karte:not(.frei) .bild img{inset:calc(var(--s)*2);width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;background:none}

.modellkopf h1{overflow-wrap:break-word;hyphens:manual}
@media (max-width:520px){.modellkopf h1{font-size:clamp(2rem,10vw,2.75rem)}}

/* Passt zu: Modelle als Kärtchen, Gruppen nebeneinander */
.modelliste{margin-top:calc(var(--s)*4);border-top:1px solid var(--linie);padding-top:calc(var(--s)*3)}
.modelliste-titel{font-weight:600;margin-bottom:calc(var(--s)*2)}
.modelliste-gruppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:calc(var(--s)*3)}
.modelliste h4{font:600 .9rem/1.2 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin-bottom:calc(var(--s)*1.5)}
.modelliste ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.modelliste li a,.modelliste li span{display:inline-block;padding:8px 14px;border:1px solid var(--linie);border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;color:var(--ink);background:#fff}
.modelliste li a{border-color:var(--ink)}
.modelliste li a:hover{background:var(--ink);color:#fff}
.modelliste li span{color:var(--leise);font-weight:500}
/* Downloads-Leiste im Inhalt */
.k26-downloads{margin-top:calc(var(--s)*4)}

/* lange Wertelisten (z. B. Sortimente) umbrechen statt herausragen */
.datenblock td.wert.lang{white-space:normal;text-align:left;width:auto;font-weight:500}

/* Vergleichstabelle: eine Spalte je Modell, volle Breite, am Handy seitlich wischbar */
.vergleich{margin-top:calc(var(--s)*2)}
.vergleich h3{margin-bottom:calc(var(--s)*2)}
.vergleich-rahmen{overflow-x:auto;border-top:3px solid var(--ink)}
.vergleich table{width:100%;border-collapse:collapse;min-width:calc(16rem + var(--spalten,2) * 8rem)}
.vergleich th,.vergleich td{padding:calc(var(--s)*1.25) calc(var(--s)*1.5);border-bottom:1px solid var(--linie);text-align:left;vertical-align:top;font-weight:400}
.vergleich thead th{font:600 1.15rem/1.2 "Saira Condensed",sans-serif;color:var(--ink);background:var(--flaeche);border-bottom:2px solid var(--ink)}
.vergleich thead th.mod{text-align:right}
.vergleich tbody th{position:sticky;left:0;background:var(--grund)}
.vergleich td.einheit{color:var(--leise);font-size:1rem;white-space:nowrap;width:6rem}
.vergleich td.wert{text-align:right;font-weight:600;white-space:nowrap}
.vergleich tr.gruppe th{font-weight:600;padding-top:calc(var(--s)*2.5)}
.vergleich .hinweis{margin-top:calc(var(--s)*2);font-size:1rem;color:var(--leise)}

.marker{flex-wrap:wrap;line-height:1.6}

/* Karten mit unvollständiger letzter Reihe: Flex statt Grid, letzte Reihe mittig */
.karten.mitte{display:flex;flex-wrap:wrap;justify-content:center}
.karten.mitte>.karte{flex:0 0 calc((100% - 3 * var(--s) * 3) / 4)}
.karten.mitte.s3>.karte{flex-basis:calc((100% - 2 * var(--s) * 3) / 3)}
.karten.mitte.s5>.karte{flex-basis:calc((100% - 4 * var(--s) * 3) / 5)}
.karten.mitte.s2>.karte{flex-basis:calc((100% - var(--s) * 3) / 2)}
@media (max-width:1100px){.karten.mitte>.karte,.karten.mitte.s3>.karte,.karten.mitte.s5>.karte{flex-basis:calc((100% - var(--s) * 3) / 2)}}
@media (max-width:520px){.karten.mitte>.karte,.karten.mitte[class*=" s"]>.karte{flex-basis:100%}}

/* Lange Einzelwörter (z. B. HANDHEBELSCHEREN) nie mitten im Wort trennen: Kopfzeile eine Stufe kleiner */
.modellkopf h1.lang{font-size:clamp(2.25rem,4.2vw,3.75rem)}
@media (max-width:520px){.modellkopf h1.lang{font-size:clamp(1.75rem,8vw,2.4rem)}}
/* Teile je Modell (immer drei): flache Bildfläche, Zeichnung ganz zeigen */
.karten.teile .bild{aspect-ratio:2/1}
.karte.frei .bild img{mix-blend-mode:multiply}
/* Positionsliste (eine Wertspalte): Bezeichnung linksbündig wie Fließtext */
.vergleich table[style="--spalten:1"] td.wert,.vergleich table[style="--spalten:1"] th.mod{text-align:left}
/* Luft zwischen Downloads, Text und Datenblock (Service-Seiten), gleiche Stufe wie zwischen Kartengruppen */
.k26-downloads + *,.text-k26 + .daten,.text-k26 + .vergleich,.text-k26 + .gruppe-a,.daten + .text-k26{margin-top:calc(var(--s)*4)}
/* Ein einzelner Datenblock läuft in zwei Spalten: die Linie oben gehört über beide Spalten, sonst steht die rechte Spalte tiefer */
.daten:has(>.datenblock:only-child) .datenblock{border-top:0}
.daten:has(>.datenblock:only-child) .datenblock h3{border-top:3px solid var(--ink)}
.daten:has(>.datenblock:only-child) .datenblock h3:empty{padding:0;margin-bottom:calc(var(--s)*1.5)}
.daten + .vergleich,.vergleich + .punkte,.vergleich + .text-k26,.vergleich + .gruppe-a{margin-top:calc(var(--s)*4)}
/* Downloads mit Bild daneben: Knöpfe links untereinander, Bild rechts (kein Link) */
.dl-paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--s)*4);align-items:center;margin-top:calc(var(--s)*4)}
.dl-paar .k26-downloads{margin-top:0;flex-direction:column;align-items:stretch}
.dl-vorspann{margin:0 0 calc(var(--s)*3)}
.dl-paar .dl{display:flex}
.dl-bild{background:var(--flaeche);border-radius:6px;padding:calc(var(--s)*3);display:grid;place-items:center}
.dl-bild img{width:100%;height:auto;mix-blend-mode:multiply}
.dl-paar + *{margin-top:calc(var(--s)*4)}
@media (max-width:860px){.dl-paar{grid-template-columns:1fr}}
/* Datenblock in zwei Spalten: getrennte Ränder, sonst zeichnet die rechte Spalte oben eine eigene Linie */
.datenblock table{border-collapse:separate;border-spacing:0}
.datenblock td.wert.mail{white-space:nowrap;text-align:right;font-weight:600}
/* Menü mit acht Punkten (Reparaturservice in allen Sprachen): enger setzen, damit es bis 1181 px in eine Zeile passt */
@media (max-width:1500px){.menue{gap:13px;font-size:.88rem;letter-spacing:0}.kopf .bahn{gap:16px}}
@media (max-width:1320px){.menue{gap:11px;font-size:.82rem}.marke{font-size:1.3rem}.sprachen a{padding:6px 4px}}
/* Sprungknopf im Kopf: Zusatz nie zerreißen, bei Platzmangel in die nächste Zeile */
.modell-text .dl.hell{flex-wrap:wrap;row-gap:2px}
.modell-text .dl.hell small{white-space:nowrap}
/* ---------------- Symmetrie und Gleichheit (Prüfung 01.11.2026 über alle 370 Seiten) */
/* Eine Größe für alle Hauptüberschriften der Katalogseiten, unabhängig von Sprache und Wortlänge */
.modellkopf h1{font-size:clamp(2.25rem,4.2vw,3.75rem)}
@media (max-width:520px){.modellkopf h1{font-size:clamp(1.75rem,8vw,2.4rem)}}
/* Einleitungstext vor dem ersten Kapitel in derselben Lesebreite wie alle anderen Texte */
.k26-inhalt>.text-k26.fliess>*{max-width:68ch}
/* Downloads direkt vor einem Kapitel: Kapitelabstand wie überall (72 px), nicht zusätzlich 32 px */
.k26-downloads + .abschnitt{margin-top:0}
/* Text und Aufzählung nie ohne Luft aneinander */
.punkte + .text-k26,.text-k26 + .punkte,.daten + .punkte,.vergleich + .text-k26{margin-top:calc(var(--s)*4)}
.text-k26 + .text-k26{margin-top:calc(var(--s)*2)}
/* Zwei Karten nebeneinander: Fotos mit weißem Grund nicht als weißer Kasten auf Grau */
.karten.zwei:not(.galerie) .karte:not(.frei) .bild img{mix-blend-mode:multiply}
/* ---------------- Corporate Design Peddinghaus (01.11.2026): Firmengrau im Kopf, Hellgrau als Fläche, weiße Karten */
/* Marker im Firmengrau-Kopf: Schrift hell (8:1), das Orange trägt der Strich davor */
.modellkopf .marker,.page-hero .marker{color:#f9f9f9}
/* Kontaktband im Firmengrau wie der Kopf von peddinghaus.com */
.kontakt{background:var(--hausgrau);border-top:0;color:#f9f9f9}
.kontakt p{color:#f9f9f9}
.kontakt .dl:not(.haupt){border-color:#f9f9f9;color:#f9f9f9}.kontakt .dl:not(.haupt) small{color:#dcdbdc}
.kontakt .dl:not(.haupt):hover{background:#f9f9f9;color:var(--ink)}.kontakt .dl:not(.haupt):hover small{color:var(--leise)}
/* Kopf der Abschnittsleiste und Karten auf der grauen Fläche */
.leiste{border-color:var(--linie)}
.karte,.serie,.modelliste li a,.modelliste li span,.chip{background:#fff}
.karte .bild,.dl-bild,.serie-bild{background:var(--flaeche)}
/* Kopfbild je Art: freigestellt frei im Raum, weißer Grund auf heller Kachel, Foto abgerundet (bis neue Freisteller da sind) */
.modell-bild.weiss img{background:#f7f7f7;border-radius:12px;padding:calc(var(--s)*3);mix-blend-mode:normal;filter:none;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.modell-bild.zeichnung img{background:#ececec}
.modell-bild.foto img{border-radius:12px;filter:none;box-shadow:0 18px 40px rgba(0,0,0,.32)}
/* ---------------- Apple-Design-Prüfung 01.11.2026 */
/* Rückmeldung schon beim Drücken, nicht erst beim Loslassen (§1) */
a.karte:active,.modelliste li a:active,.card:active{transform:scale(.985);transition:transform .1s ease-out}
.menue a:active,.leiste a:active,.sprachen a:active{opacity:.7}
/* Auf Touchgeräten kein hängender Hover-Zoom nach dem Antippen (§10) */
@media (hover:none){a.karte:hover .bild img{transform:none}a.karte:hover,.card:hover{box-shadow:none}}
/* Mehr Kontrast gewünscht: dunklere Linien und Nebentexte, Karten mit klarer Kante (§14) */
@media (prefers-contrast:more){
  :root{--linie:#8a898a;--leise:#3a393a;--grund:#f2f2f2}
  .karte,.card,.serie{border-color:#5c5b5c}
  .kopf,.leiste{backdrop-filter:none}.leiste{background:var(--grund)}
  .modellkopf .untertitel,.krume.hell,.krume.hell a{color:#fff}
}
@media (prefers-reduced-motion:reduce){a.karte:active,.modelliste li a:active,.card:active{transform:none}}
/* Modellkarten symmetrisch (Mike 02.11.): Daten und Pfeil sitzen gleich hoch am Kartenboden, damit Linie, Daten und Pfeil in jeder Reihe fluchten, egal wie lang Titel und Unterzeile sind */
@media (min-width:521px){
  .karten.modelle .text{display:flex;flex-direction:column}
  .karten.modelle h3{min-height:2.4em}
  .karten.modelle .alt{margin-bottom:calc(var(--s)*1.5)}
  .karten.modelle .kz{margin-top:auto;min-height:calc(var(--s)*1.5 + 1px + 4.35rem + 8px);align-content:start}
  .karten.modelle a.karte .text::after{padding-top:var(--s)}
}

/* Normale Karten (Mike 03.11.): Pfeil sitzt am Kartenboden, damit er in jeder Reihe fluchtet, egal wie lang Titel und Unterzeile sind */
@media (min-width:521px){
  .karten:not(.modelle):not(.band) a.karte .text{position:relative;padding-bottom:calc(var(--s)*3.5 + 1.45em)}
  .karten:not(.modelle):not(.band) a.karte .text::after{position:absolute;left:calc(var(--s)*2.5);bottom:calc(var(--s)*2.5);margin:0}
}

/* Hinweis über einer Downloadliste ohne Bild (für die Modelle:) */
.dl-vorspann.dl-label{margin-top:calc(var(--s)*4);margin-bottom:calc(var(--s)*-2);color:var(--leise)}