html { height: auto; }
#wrapper { width: calc(100% - 32px); max-width: 930px; }
h1#branding { width: 100%; }
h1#branding a { max-width: 100%; background-size: contain; }
#navi { box-sizing: border-box; width: 100%; height: auto; min-height: 40px; display: flex; flex-wrap: wrap; padding: 0 20px; gap: 0 24px; }
#navi > li { float: none; margin: 0; }
#navi > li > a, #navi > li > span { display: block; font-size: 14px; line-height: 40px; }
#navi li ul { top: 40px; }
#navi li ul li { float: none; margin-right: 0; }
#navi li:focus-within ul, #navi li.is-open ul { display: block; }
.nav-toggle, .submenu-toggle { display: none; }
#slider { width: 100%; height: auto; aspect-ratio: 930 / 315; }
#slider > img { display: block; width: 100%; height: auto; }
#slider h2 { left: 44%; top: 63%; bottom: auto; font-size: clamp(18px, 3vw, 30px); line-height: 1.15; right: 15px; }
#slider h3 { left: 44%; top: 76%; bottom: auto; right: 15px; font-size: clamp(13px, 1.9vw, 18px); line-height: 1.35; }
#startseite { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
#startseite .spalte1, #startseite .spalte2, #startseite .spalte3 { width: auto; height: auto; float: none; margin: 0; min-width: 0; }
#startseite > .cleardiv { display: none; }
#startseite .big, #startseite .small { width: 100%; height: auto; }
#startseite .big { aspect-ratio: 300 / 220; }
#startseite .small { aspect-ratio: 300 / 110; }
#startseite img { display: block; width: 100%; height: auto; }
#startseite a { right: 10px; }
#startseite a .gross { font-size: clamp(17px,2.3vw,22px); }
#startseite a .klein { font-size: clamp(12px,1.6vw,15px); line-height: 1.4; }
#reflex, #footer, #footer_kante { width: 100%; }
#reflex { background-size: 100% auto; }
#bildleiste_205 { width: 100%; height: auto; display: flex; gap: 15px; }
#bildleiste_205 img { min-width: 0; max-width: 100%; height: auto; object-fit: cover; }
#bildleiste_205 .bild, #bildleiste_205 .bild1 { float: none; margin: 0; }
#lauftext { margin: 0 15px; overflow-wrap: anywhere; }
#lauftext p, #lauftext h2, #lauftext h3 { max-width: 100%; }
#lauftext img { max-width: 100%; height: auto; }
form, form li, form li > div { max-width: 100%; box-sizing: border-box; }
form input, form select, form textarea { max-width: 100%; box-sizing: border-box; }
form input.button { white-space: normal; }
#footer { box-sizing: border-box; height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: 8px 15px; }
#footer p, #footer ul { position: static; margin: 0; height: auto; }
#footer ul { display: flex; flex-wrap: wrap; }
#footer ul li { float: none; }
#footer p, #footer ul li a { font-size: 13px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll #ladedatenliste { left: 0; }
ul#buttons_kaliberauswahl { display: flex; flex-wrap: wrap; gap: 16px; height: auto; left: 0; }
ul#buttons_kaliberauswahl li { float: none; margin: 0; }
ul#komponentenliste li .zeile { float: none; margin-left: 36px; }
@media (max-width: 760px) {
  #wrapper { width: calc(100% - 24px); margin-top: 18px; }
  h1#branding { height: auto; aspect-ratio: 367 / 52; max-height: 52px; }
  h1#branding a { width: 100%; height: 100%; background-position: right center; }
  .navigation-ready .nav-toggle { display: block; width: 100%; margin-top: 18px; padding: 12px 16px; background: #d98652; color: #fff; text-align: left; font: bold 16px Verdana,sans-serif; cursor: pointer; }
  #navi { display: block; margin-top: 0; padding: 0 16px; }
  .navigation-ready #navi { display: none; }
  .navigation-ready #navi.is-open { display: block; }
  #navi > li { position: relative; border-top: 1px solid #ffffff55; }
  #navi > li.has-submenu > a { margin-right: 44px; }
  #navi > li > a { line-height: 44px; }
  .submenu-toggle { display: block; position: absolute; right: 0; top: 0; width: 44px; height: 44px; background: transparent; color: #fff; cursor: pointer; }
  .nav-toggle::before, .submenu-toggle::before { content: ''; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; }
  .nav-toggle::before { margin-right: 10px; }
  .nav-toggle[aria-expanded="true"]::before, .submenu-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
  #navi li ul { position: static; width: auto; padding: 5px 12px; background: #fff5; }
  #navi li ul li a { width: auto; left: 0; padding: 10px 0; color: #3c261b; font-size: 14px; }
  #navi li:hover ul, #navi li:focus-within ul { display: none; }
  #navi li.is-open ul, html:not(.navigation-ready) #navi li ul { display: block; }
  #slider { aspect-ratio: auto; margin-top: 18px; padding-bottom: 16px; }
  #slider h2, #slider h3 { position: static; margin: 12px 18px 0; }
  #slider h2 { font-size: 24px; }
  #slider h3 { font-size: 17px; }
  #startseite { grid-template-columns: minmax(0,1fr); max-width: 440px; margin: 20px auto 0; }
  #startseite a .gross { font-size: 22px; }
  #startseite a .klein { font-size: 15px; }
  #reflex { display: none; }
  #bildleiste_205 { margin: 18px 0 26px; gap: 5px; }
  #lauftext { margin: 0 8px; }
  #lauftext p, #lauftext.dse ul li { font-size: 16px; line-height: 1.6; }
  #lauftext p.disclaimer { font-size: 13px; }
  form li > div[style*="float"] { float: none !important; margin-left: 0 !important; }
  form input.textfeld, form select { min-height: 42px; font-size: 16px; }
  #achtung { padding: 18px; }
}