:root { --red:#df0017; --dark-red:#ac0618; --paper:#f9f9f9; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:#333; font:16px Arial,Helvetica,sans-serif; }
a { color:var(--red); }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, textarea:focus-visible { outline:3px solid #13518d; outline-offset:3px; }
.skip { position:absolute; left:-1000px; background:white; padding:8px; z-index:4; }
.skip:focus { left:10px; }
.utility { background:#111; padding:8px 20px; display:flex; justify-content:flex-end; gap:15px; font-size:12px; }
.utility a, nav a, footer a { color:inherit; text-decoration:none; }
.utility, nav { color:white; }
.utility a:hover, footer a:hover { text-decoration:underline; }
.mast { margin:auto; max-width:1200px; padding:30px 20px; }
.mast a { display:inline-block; vertical-align:top; }
.mast img { display:block; }
nav { background:var(--red); position:sticky; top:0; z-index:2; }
nav div { display:flex; max-width:1200px; margin:auto; }
nav a { padding:15px 20px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
nav a:hover, nav a:focus-visible { background:var(--dark-red); text-decoration:none; }
.layout { width:100%; max-width:1200px; margin:40px auto; padding:0 20px; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; }
article { background:#fff; padding:40px; border-radius:8px; box-shadow:0 2px 10px #0000000d; min-width:0; }
h1,h2 { color:#111; }
h1 { margin:0 0 25px; font-size:32px; }
article p { margin:0 0 20px; font-size:16px; line-height:1.9; color:#444; }
article h2 { font-size:22px; margin:30px 0 12px; }
article section { border-top:1px solid #eee; padding-top:24px; margin-top:26px; scroll-margin:65px; }
article section h2 { margin-top:0; }
.button { display:inline-block; background:var(--red); color:white; padding:14px 28px; margin-top:15px; font:bold 15px Arial,sans-serif; text-transform:uppercase; border:0; border-radius:5px; text-decoration:none; cursor:pointer; }
.button:hover { background:var(--dark-red); text-decoration:none; }
aside h2 { margin:0 0 20px; padding-bottom:5px; border-bottom:2px solid var(--red); font-size:20px; text-transform:uppercase; letter-spacing:1px; }
.tiles, .resources { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.tiles { margin-bottom:30px; }
.tile { aspect-ratio:4/3; display:block; position:relative; overflow:hidden; border-radius:6px; background:#e7e7e7; }
.tile img { width:100%; height:100%; object-fit:cover; display:block; }
.tile img[src$="product.webp"] { object-fit:contain; padding:6px; }
.tile span { position:absolute; left:0; right:0; bottom:0; padding:18px 10px 9px; color:white; background:linear-gradient(transparent,#000a); font-size:14px; opacity:0; }
.tile:hover span, .tile:focus-visible span { opacity:1; }
.resources { gap:10px; }
.resources a { background:white; border:1px solid #e5e5e5; border-radius:4px; aspect-ratio:1.65; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#181818; font-size:14px; font-weight:700; text-align:center; text-decoration:none; }
.resources a:hover { color:var(--red); }
.resources svg { width:38px; height:38px; }
ul.index { padding-left:24px; color:var(--red); margin:0 0 40px; }
ul.index li { margin:15px 0; font-size:18px; font-weight:bold; }
ul.index a { text-decoration:none; }
ul.index a:hover { text-decoration:underline; }
.result { display:flex; align-items:center; gap:20px; padding:15px 0; color:#111; border-bottom:1px solid #eee; text-decoration:none; }
.result b { font-size:18px; }
.result small { display:block; margin-top:5px; color:#444; font-size:14px; }
.result img { width:120px; height:90px; object-fit:cover; border-radius:4px; border:1px solid #ddd; background:#eee; }
.result img[src$="product.webp"] { object-fit:contain; }
.auswahl article h2,.archiv article h2 { padding:8px 12px; background:#fff5f5; border-left:4px solid var(--red); }
.breadcrumb,figcaption { font-size:13px; color:#555; margin-bottom:16px; }
figure { margin:0; }
figure img { display:block; width:100%; max-height:360px; object-fit:contain; background:#f2f2f2; }
figcaption { margin-top:9px; }
.programm { display:block; max-width:800px; }
.programm article { padding:0; background:none; box-shadow:none; }
.programm article>div,.programm section { padding:36px 40px; background:white; margin:0 0 30px; box-shadow:0 2px 10px #0000000d; border-radius:8px; }
.programm article h1,.programm article h2 { padding-bottom:10px; border-bottom:2px solid var(--red); }
.programm article h2 { font-size:24px; }
form label { display:block; font-size:14px; font-weight:bold; margin:16px 0 8px; }
input,textarea { width:100%; border:1px solid #ccc; border-radius:4px; background:white; padding:12px; font:15px Arial,sans-serif; }
textarea { resize:vertical; }
output:not(:empty) { display:block; white-space:pre-wrap; overflow-wrap:anywhere; padding:16px; background:#fafafa; margin-top:18px; border:1px solid #ddd; }
details { border:1px solid #eee; border-radius:6px; margin:15px 0; overflow:hidden; }
summary { padding:16px; border-left:4px solid var(--red); font-weight:bold; cursor:pointer; }
details p { margin:0; padding:18px; background:#fafafa; }
footer { margin-top:60px; background:#111; color:#ccc; padding:40px 20px; font-size:14px; }
footer div { max-width:1160px; margin:auto; }
footer strong { text-transform:uppercase; font-size:16px; color:white; }
footer small { display:block; text-align:center; padding-top:20px; border-top:1px solid #333; }
@media(max-width:768px) {
  .mast { text-align:center; }
  nav div { justify-content:center; }
  nav a { text-align:center; padding:13px 7px; font-size:clamp(10px,2.8vw,14px); letter-spacing:0; }
  .layout { grid-template-columns:1fr; margin:24px auto; gap:28px; padding:0 15px; }
  article,.programm article>div,.programm section { padding:24px 20px; }
  .tiles { grid-template-columns:1fr; }
  h1 { font-size:28px; }
}

/* Page-specific dimensions measured on the reference's three internal pages. */
.mast { padding-bottom:34px; }
.kategorien h1 { margin-bottom:10px; }
.kategorien .subtitle { margin:0 0 30px; color:#666; font:400 18px/1.5 Arial,sans-serif; }
.kategorien ul.index { padding-left:5px; list-style:none; }
.kategorien .index li { display:flex; align-items:center; font-weight:600; margin:0 0 15px; }
.kategorien .index li::before { content:'•'; font-size:24px; margin-right:10px; }
.kategorien section { margin-top:30px; padding-top:25px; }
.kategorien section p { margin:0; color:#555; font-size:15px; line-height:1.8; }
.auswahl h1 { border-bottom:2px solid var(--red); padding-bottom:10px; }
.auswahl article h2 { margin:30px 0 15px; }
.result b { display:block; line-height:1.5; }
.result small { margin-top:4px; line-height:1.5; }
.programm article section { border:0; padding:40px; }
.programm article h1,.programm article h2 { font-size:28px; margin:0 0 20px; }
.programm article p { margin:0 0 15px; font-size:15px; line-height:1.8; }
.field-row { display:flex; align-items:center; margin:0 0 15px; }
.field-row label { flex:0 0 180px; font-size:14px; font-weight:bold; }
.field-row input { padding:10px; min-width:0; font-size:14px; }
.programm .button { padding:12px 24px; margin:0; }
.programm .choice { border:1px solid #eee; border-radius:6px; margin-bottom:20px; padding:20px; }
.programm .choice label { display:block; font-size:18px; font-weight:bold; }
.programm .choice input { width:auto; accent-color:var(--red); }
.programm .choice p { background:#fafafa; margin:10px 0 0; padding:12px; color:#666; font:14px/1.6 Arial,sans-serif; }
.next { background:#111; }
@media(max-width:600px) {
 .programm article section { padding:24px 20px; }
 .field-row { display:block; }
 .field-row label { display:block; margin-bottom:6px; }
}
.result img { flex-shrink:0; }
.tile:has(img[src*="race-"]) { background:#ececec; }
.tile img[src*="race-"],.result img[src*="race-"] { object-fit:contain; }
.tile:has(img[src*="race-"]) span { display:none; }

.auswahl .result img { background-color:#f5f5f4; }
.brand-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.brand-list li { min-height:98px; padding:15px 8px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; background:#fff; border:1px solid #e5e5e5; border-radius:4px; text-align:center; }
.brand-list strong { font:700 21px Arial,Helvetica,sans-serif; color:#171717; }
.brand-list span { font:13px/1.4 Arial,Helvetica,sans-serif; color:#555; }
.auswahl .result img[src$="product.webp"] { padding:14px 22px; background:#fff; }