.or-confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:9999}
.flag-wave{display:inline-block;transform-origin:left center;animation:flagwave 1.3s ease-in-out infinite}
@keyframes flagwave{0%{transform:rotate(0)}25%{transform:rotate(8deg)}50%{transform:rotate(0)}75%{transform:rotate(-8deg)}100%{transform:rotate(0)}}

.or-party {
  margin-top: 8px;
}

.or-party-badge {
  display: inline-flex;
  flex-direction: column;      /* 👈 stapelt senkrecht */
  align-items: center;         /* zentriert horizontal */
  justify-content: center;
  gap: .5rem;
  background: linear-gradient(90deg,#ffe9f5,#e6f7ff);
  color: #111;
  padding: 1rem 1.5rem;
  border-radius: 12px;         /* runder Kasten statt Pillenform */
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  text-align: center;
}

.or-party-badge i,
.or-party-badge svg {
  font-size: 2.5rem;           /* Flagge größer machen */
  margin-bottom: .5rem;        /* Abstand zum Text */
}

/* Badges nebeneinander; jeder Block vertikal zentriert */
.or-meta-row{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap: 18px;
  flex-wrap: wrap; /* auf kleinen Screens untereinander */
}
.or-meta-col{
  display:flex;
  flex-direction:column;
  align-items:center; /* Badge + Titel zentriert */
}
.or-meta-title{
  font-weight:700;
  margin-bottom:6px;
}



.or-cta{
  padding:.9rem 2rem;
  background:linear-gradient(135deg,#ff2f87,#ff3261);
  box-shadow:0 16px 40px rgba(255,50,120,.35);
}
.or-cta:hover{transform:translateY(-1px)}

/* Größerer, gut lesbarer CTA-Button */
.uk-button.or-cta{
  font-size: clamp(28px, 4.5vw, 34px); /* min 20px, auf großen Screens bis ~26px */
  font-weight: 700;
  line-height: 1.2;
  padding: 1.1rem 2.2rem;              /* etwas mehr Fläche */
  letter-spacing: .2px;
}

/* Icon skaliert mit */
.uk-button.or-cta .fa,
.uk-button.or-cta [class*="fa-"],
.uk-button.or-cta svg{
  font-size: 1.1em;
  vertical-align: -0.15em;
}

/* Konfetti bleibt wie gehabt ... */

/* Oscar-Overlay über allem */
#or-oscar{
  position: fixed;
  left: 50%;
  bottom: -45vh;               /* Start unterhalb */
  transform: translateX(-50%);
  z-index: 10002;              /* über Konfetti */
  text-align: center;
  pointer-events: none;
}

#or-oscar .or-oscar-inner{
  transform-origin: 50% 100%;
}

#or-oscar .hb{
  font-weight: 900;
  font-size: clamp(32px, 7vw, 64px);
  line-height: 1.05;
  margin-bottom: .35rem;
  background: linear-gradient(90deg,#f10185,#7202fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,.15);
}

#or-oscar img{
  height: clamp(150px, 30vw, 300px);
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.28));
}

/* Einblendung: fährt hoch, poppt und wackelt */
#or-oscar.or-oscar-in{
  animation: oscarRise .9s cubic-bezier(.17,.84,.44,1) forwards;
}
#or-oscar.or-oscar-in .or-oscar-inner{
  animation: oscarPop .9s cubic-bezier(.17,.84,.44,1) .0s both,
             oscarBob 2.8s ease-in-out .9s infinite;
}

@keyframes oscarRise{
  from { bottom: -45vh; }
  to   { bottom: 4vh; }
}
@keyframes oscarPop{
  0%{ transform: scale(.7) rotate(-4deg); }
  60%{ transform: scale(1.06) rotate(1deg); }
  100%{ transform: scale(1) rotate(0); }
}
@keyframes oscarBob{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-6px) }
}


/* Speech-bubble / Wolke hinter dem Text */
#or-oscar .hb-bubble{
  display: inline-flex;                 /* zentriert Inhalt sauber */
  align-items: center;
  justify-content: center;
  padding: .6rem 1.2rem;
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 16px 32px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.65);
  margin-bottom: .55rem;
  position: relative;
  pointer-events: none;

  /* 👉 breiter: min 280px, auf Handy ~70vw, max 560px */
  inline-size: clamp(280px, 70vw, 560px);
  text-align: center;
  box-sizing: border-box;
  word-break: normal;
  hyphens: auto;
}

/* optional etwas größer auf Tablets/Desktops */
@media (min-width: 640px){
  #or-oscar .hb-bubble{ inline-size: clamp(320px, 60vw, 640px); }
}



/* Text in der Bubble */
#or-oscar .hb{
  font-weight: 900;
  font-size: clamp(28px, 6.2vw, 48px);
  line-height: 1.05;
  margin: 0;
  background: linear-gradient(90deg,#f801cb,#9302e2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,.10);
}

/* Nach 9s ausblenden */
#or-oscar .hb-bubble.hb-fade{
  animation: hbFade .8s ease forwards;
}
@keyframes hbFade{
  to { opacity:0; transform: translateY(-8px) scale(.98); }
}


/* Fixe 3er-Toolbar oben */
.or-toolbar{
  position: sticky; top: 0; z-index: 10005;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.or-toolbar-spacer{ height: 56px; } /* Platz unter der Leiste */

.or-tbtn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem .9rem; border-radius:999px; border:0; cursor:pointer;
  font-weight:700; line-height:1; text-decoration:none;
  color:#111; background:#f3f5f7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.06);
}
.or-tbtn i{ font-size:1.05em }
.or-tbtn:active{ transform: translateY(1px) }

.or-alarm{ color:#fff; background:linear-gradient(135deg,#ff3b66,#ff006a); }
.or-tbtn.is-off{ opacity:.55 }
.or-tbtn.is-on  { box-shadow: 0 6px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.7); }

/* Farbzustände */
.or-tbtn.is-success{
  color:#fff;
  background: linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow: 0 6px 18px rgba(22,163,74,.25), inset 0 1px 0 rgba(255,255,255,.7);
}
.or-tbtn.is-danger{
  color:#fff;
  background: linear-gradient(135deg,#ff3b66,#ff006a);
  box-shadow: 0 6px 18px rgba(255,0,106,.25), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Wenn aus + erlaubt => trotzdem grün und nicht ausgegraut */
.or-tbtn.is-success.is-off{ opacity:1; }

/* kein zusätzlicher Rand über Klassen nötig (wir nutzen gap) */
.or-tbtn i{ margin:0; }



/* PIN-Widget unten */
.or-pin{
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 10010; text-align: center;
}
.or-pin-toggle{
  border: 0; border-radius: 999px; padding: .5rem .9rem;
  font-weight: 700; cursor: pointer;
  color: #111; background: #eef1f5; opacity: .88;
  box-shadow: 0 6px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
.or-pin-toggle i{ margin:0 .35rem 0 0; }

.or-pin-form{
  display: inline-flex; gap: .4rem; margin-top: .5rem;
  padding: .35rem; border-radius: 999px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7);
}
.or-pin-input{
  width: 110px; border: 1px solid #e3e8ee; border-radius: 999px;
  padding: .4rem .7rem; text-align: center; font-weight: 700; letter-spacing: .08em;
}
.or-pin-send{
  border:0; border-radius:999px; padding:.4rem .9rem; font-weight:700; cursor:pointer;
  color:#fff; background: linear-gradient(135deg,#ff3b66,#ff006a);
}
.or-pin-msg{ margin-top:.35rem; font-size:.85rem; color:#333; }
.or-pin.ok .or-pin-toggle{ background: #22c55e; color:#fff; }
.or-pin.ok .or-pin-form{ display:none !important; }


/* Broadcast Overlay Alarm */
.or-bc{
  position:fixed; inset:0; z-index:999999;
  background:rgba(200,0,0,.97); color:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.or-bc-inner{ text-align:center; max-width:720px; }
.or-bc-icon{ font-size:72px; margin-bottom:16px; }
.or-bc-text{ font-size:36px; font-weight:800; line-height:1.2; margin-bottom:20px; }
.or-bc .or-bc-call{ font-size:20px; padding:.9rem 1.4rem; }


/* Confetti weich ein/ausblenden */
.or-confetti-wrap{
  opacity: 0;
  transition: opacity .6s ease;
}
.or-confetti-wrap.is-active{ opacity: 1; }     /* beim Start */
.or-confetti-wrap.is-fading{ opacity: 0; }     /* beim Stop */

/* Oscar weich ein/aus */
#or-oscar { opacity: 0; transition: opacity .5s ease; }
#or-oscar.or-oscar-in { opacity: 1; }

#or-oscar .or-oscar-inner{
  animation: oscarIn .8s cubic-bezier(.2,.8,.2,1) both;
}
#or-oscar.or-oscar-out .or-oscar-inner{
  animation: oscarOut .55s ease both;
}

/* Bubble dezente Ausblendung (du nutzt bereits .hb-fade) */
#or-oscar .hb-bubble{ transition: opacity .60s ease, transform .6s ease; }
#or-oscar .hb-bubble.hb-fade{ opacity: 0; transform: translateY(6px); }

@keyframes oscarIn{
  from{ transform: translateY(30px); opacity:.0 }
  to  { transform: translateY(0);    opacity:1 }
}
@keyframes oscarOut{
  from{ transform: translateY(0);   opacity:1 }
  to  { transform: translateY(18px); opacity:0 }
}

/* Bewegungs-Reduktion respektieren */
@media (prefers-reduced-motion: reduce){
  .or-confetti-wrap, #or-oscar { transition:none }
  #or-oscar .or-oscar-inner{ animation:none }
}


.or-step-marker .or-step-label {
  background: #fff;
  border: 2px solid #333;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #000;
}


/* Kompass – dezentes Styling */
#or-compass { color:#111; }
#or-compass .or-compass-label { font-weight:700; }
#or-compass .or-needle polygon:first-child { fill:#ff2f7e; } /* Primärfarbe Spitze */
#or-compass .or-needle polygon:last-child  { fill:#333; }

#or-compass svg { display:inline-block }
#or-compass #orArrowNeedle { will-change: transform; }