@font-face{font-family:"MW-Metronom-Lato-Regular";src:url("fonts/lato-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"MW-Metronom-Lato-Black";src:url("fonts/lato-black.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
/* Abgestimmt auf gitarrenakkorde/css/style.css: Lato, #202020, #9a0002, 15/25px Buttons. */
.mw-metronom-neu{box-sizing:border-box;width:100%;max-width:1120px;margin:0 auto;background:#fff;color:#202020;font:400 16px/1.55 "MW-Metronom-Lato-Regular","Lato",sans-serif;text-align:left}
.mw-metronom-neu *,.mw-metronom-neu *::before,.mw-metronom-neu *::after{box-sizing:border-box}
.mw-metronom-neu :is(h2,h3,p){margin:0;color:inherit;font-family:inherit;letter-spacing:normal;text-transform:none}
.mw-metronom-neu header{padding:36px 32px 24px;border-bottom:1px solid #dedede}
.mw-metronom-neu h2{font:normal 32px/1.2 "MW-Metronom-Lato-Black","Lato",sans-serif;margin-bottom:10px}
.mw-metronom-neu h3{font-size:20px;margin-bottom:24px;font-weight:700}
.mw-metronom-neu header>p:last-child{color:#555}
.mw-metronom-neu .mw-metro-kicker{color:#9a0002!important;font-size:13px;font-weight:700;letter-spacing:1.5px;margin-bottom:8px}
.mw-metronom-neu .mw-metro-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.mw-metronom-neu .mw-metro-main{padding:30px 32px;text-align:center;min-width:0}
.mw-metronom-neu .mw-metro-settings{padding:30px 32px;background:#f7f7f7;border-left:1px solid #dedede;min-width:0}
.mw-metronom-neu label{display:block;font:inherit;color:#202020;margin:0 0 20px}
.mw-metronom-neu .mw-metro-tempo{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:24px}
.mw-metronom-neu .mw-metro-tempo>span:last-child{font-size:14px;color:#555}
.mw-metronom-neu input[type=number]{width:200px;max-width:100%;height:100px;background:#fff;border:0;border-bottom:1px solid #dedede;border-radius:0;padding:0 8px;text-align:center;color:#202020;font:normal 76px/1.2 "MW-Metronom-Lato-Black","Lato",sans-serif;appearance:textfield;-moz-appearance:textfield}
.mw-metronom-neu input[type=number]::-webkit-inner-spin-button,.mw-metronom-neu input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mw-metronom-neu button{font:inherit;letter-spacing:normal;text-transform:none;min-height:46px;padding:8px 18px;background:#fff;border:1px solid #dedede;border-radius:15px;color:#202020;cursor:pointer;margin:0;box-shadow:none}
.mw-metronom-neu button:hover{background:#202020;color:#fff!important;border-color:#202020;border-radius:25px}
.mw-metronom-neu .mw-metro-slider{display:flex;align-items:center;gap:16px}
.mw-metronom-neu .mw-metro-slider button{width:46px;flex-shrink:0;padding:0;font-size:24px}
.mw-metronom-neu input[type=range]{display:block;width:100%;min-width:0;height:28px;margin:12px 0;accent-color:#9a0002;cursor:pointer;opacity:1;position:static;appearance:auto;-webkit-appearance:auto;padding:0;border:0;background:transparent}
.mw-metronom-neu .mw-metro-scale{display:flex;justify-content:space-between;margin:3px 62px 0;color:#666;font-size:12px}
.mw-metronom-neu .mw-metro-beats{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:30px 0}
.mw-metronom-neu .mw-metro-beats span{display:grid;place-items:center;width:40px;height:40px;border:1px solid #dedede;border-radius:50%;font-weight:700;background:#fff}
.mw-metronom-neu .mw-metro-beats span:first-child{border-color:#9a0002;color:#9a0002}
.mw-metronom-neu .mw-metro-beats span.is-active{background:#9a0002;color:#fff;border-color:#9a0002;box-shadow:0 0 0 5px #faf0f0}
.mw-metronom-neu .mw-metro-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.mw-metronom-neu .mw-metro-primary{background:#9a0002;border-color:#9a0002;color:#fff!important;min-width:140px}
.mw-metronom-neu select{display:block;width:100%;height:48px;margin-top:8px;padding:8px 12px;border:1px solid #dedede;border-radius:15px;background:#fff;color:#202020;font:inherit;text-transform:none}
.mw-metronom-neu output{float:right;font:inherit;color:#555}
.mw-metronom-neu .mw-metro-help{font-size:14px;color:#555;line-height:1.6}
.mw-metronom-neu .mw-metro-status{font-size:14px;margin-top:12px;min-height:44px}
.mw-metronom-neu footer{padding:16px 32px;border-top:1px solid #dedede;font-size:14px;color:#555}
.mw-metronom-neu :is(button,input,select):focus-visible{outline:3px solid #9a0002!important;outline-offset:4px}
@media(max-width:720px){.mw-metronom-neu .mw-metro-layout{grid-template-columns:1fr}.mw-metronom-neu .mw-metro-settings{border-left:0;border-top:1px solid #dedede}.mw-metronom-neu header,.mw-metronom-neu .mw-metro-main,.mw-metronom-neu .mw-metro-settings{padding:24px 20px}.mw-metronom-neu footer{padding:16px 20px}}
@media(max-width:991px){.mw-metronom-neu button{border-radius:25px}}
@media(max-width:360px){.mw-metronom-neu .mw-metro-beats{gap:7px}.mw-metronom-neu .mw-metro-beats span{width:32px;height:32px}.mw-metronom-neu h2{font-size:28px}}

.mw-metronom-neu .mw-metro-beat{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;min-height:64px;padding:6px;border-radius:15px;font-family:"MW-Metronom-Lato-Black",sans-serif}
.mw-metronom-neu .mw-metro-beat small{font:16px/1 "MW-Metronom-Lato-Regular",sans-serif}
.mw-metronom-neu .mw-metro-beat[aria-pressed=true]{border-color:#9a0002;color:#9a0002;background:#faf0f0}
.mw-metronom-neu .mw-metro-beat.is-active{background:#9a0002;color:#fff!important;border-color:#9a0002;box-shadow:0 0 0 4px #e5c5c6}
.mw-metronom-neu .mw-metro-position{font-variant-numeric:tabular-nums;font-size:16px;min-height:25px;margin:18px 0}
.mw-metronom-neu .mw-metro-settings .mw-metro-help{margin:-4px 0 24px}
.mw-metronom-neu h3{font-family:"MW-Metronom-Lato-Black",sans-serif;font-weight:normal}
@media(prefers-reduced-motion:reduce){.mw-metronom-neu *{transition:none!important}}

/* Responsive auch in schmalen Blocs-Spalten, unabhängig vom Bildschirm. */
.mw-metronom-neu{min-width:0;container-type:inline-size;isolation:isolate}
.mw-metronom-neu .mw-metro-layout{display:flex;flex-wrap:wrap}
.mw-metronom-neu .mw-metro-main{flex:1.25 1 320px;max-width:100%}
.mw-metronom-neu .mw-metro-settings{flex:1 1 280px;max-width:100%}
.mw-metronom-neu :is(button,input,select){max-width:100%}
.mw-metronom-neu button{touch-action:manipulation;white-space:normal;overflow-wrap:anywhere}
.mw-metronom-neu .mw-metro-settings label{overflow-wrap:anywhere}
@container(max-width:650px){
 .mw-metronom-neu .mw-metro-layout{flex-direction:column}
 .mw-metronom-neu .mw-metro-main,.mw-metronom-neu .mw-metro-settings{flex-basis:auto;width:100%;padding:24px 16px}
 .mw-metronom-neu .mw-metro-settings{border-left:0;border-top:1px solid #dedede}
 .mw-metronom-neu header{padding:24px 16px}
 .mw-metronom-neu footer{padding:16px}
}
@container(max-width:360px){
 .mw-metronom-neu .mw-metro-slider{gap:8px}
 .mw-metronom-neu .mw-metro-scale{margin-left:54px;margin-right:54px}
 .mw-metronom-neu .mw-metro-actions{flex-direction:column}
 .mw-metronom-neu .mw-metro-actions button{width:100%}
 .mw-metronom-neu h2{font-size:28px}
}