@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/karneval/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:800;font-display:swap;src:url(/karneval/fonts/inter-latin-800-normal.woff2) format("woff2")}

/* ---------- Hinweisbox (responsive Komponente) ---------- */
.mt-hinweis{
  position:relative;overflow:hidden;box-sizing:border-box;
  display:flex;align-items:center;gap:36px;
  max-width:1136px;margin:0 0 32px;
  padding:24px 40px 24px 24px;
  border-radius:24px;
  /* Konfetti als gekacheltes Hintergrundmuster, darunter der gelbe Verlauf */
  background:
    url(assets/konfetti-hinweisbox.svg) 0 0/1136px auto repeat,
    radial-gradient(circle at 18% 50%,#FAE04E 0%,#FFCB00 45%);
  font-family:"Inter",system-ui,sans-serif;color:#4E3629;
  margin:0 auto 80px auto;
}
.mt-hinweis__bild{
  position:relative;flex:none;width:290px;height:auto;
  transform:rotate(-8deg);
}
.mt-hinweis__text{
  position:relative;flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;gap:12px;
}
.mt-hinweis__headline{margin:0}
.mt-hinweis__headline img{display:block;height:72px;width:auto;max-width:100%}
.mt-hinweis__copy{margin:0;font-size:17px;line-height:1.5;max-width:640px}
.mt-hinweis__button{
  align-self:flex-start;
  background:#CC093F;color:#FFFFFF;text-decoration:none;
  font-weight:800;font-size:17px;line-height:1.2;
  padding:13px 28px;border-radius:999px;
}
.mt-hinweis__button:hover{background:#A80734}
.mt-hinweis__button:focus-visible{outline:3px solid #4E3629;outline-offset:3px}

/* Tablet: Bild kleiner */
@media (max-width:1170px){
  .mt-hinweis{margin-left:10px; margin-right:10px;}
}

@media (max-width:900px){
  .mt-hinweis{gap:24px;padding:20px 28px 20px 16px}
  .mt-hinweis__bild{width:200px}
  .mt-hinweis__headline img{height:56px}
}
/* Smartphone: Bild über dem Text, alles untereinander */
@media (max-width:600px){
  /* mobil: Konfetti nur oben rund um das Mini und als Streifen unter dem Button,
     damit nichts hinter dem Text liegt */
  .mt-hinweis{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 20px 56px;
    background:
      url(/karneval/assets/konfetti-hinweisbox-mobil-oben.svg) center top/100% auto no-repeat,
      url(/karneval/assets/konfetti-hinweisbox-mobil-unten.svg) center bottom/100% auto no-repeat,
      radial-gradient(circle at 50% 15%,#FAE04E 0%,#FFCB00 55%)}
  .mt-hinweis__bild{width:180px;align-self:center;margin-top:-4px}
  .mt-hinweis__headline img{height:auto;width:100%;max-width:300px}
  .mt-hinweis__copy{font-size:16px}
  .mt-hinweis__button{align-self:stretch;text-align:center;padding:15px 20px}
}