/* Sprachen-Band „Alle NiSV-Kurse in 3 Sprachen“ – wehende Fahnen, nur transform/opacity animiert (nichts verschiebt sich) */
.sb { position: relative; overflow: hidden; background: #16120F; color: #fff; isolation: isolate; }
.sb::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, #000 0 11%, #DD0000 11% 22%, #FFCE00 22% 33%, #E30A17 33% 50%, #fff 50% 52%, #E30A17 52% 66%, #005430 66% 100%);
  background-size: 200% 100%; animation: sb-linie 14s linear infinite; }
.sb-glanz { position: absolute; top: -60%; bottom: -60%; left: -50%; width: 200%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 90, 35, .30), transparent) 18% 50% / 46% 70% no-repeat,
              radial-gradient(closest-side, rgba(255, 206, 0, .10), transparent) 52% 40% / 40% 60% no-repeat,
              radial-gradient(closest-side, rgba(0, 84, 48, .28), transparent) 82% 60% / 46% 70% no-repeat;
  animation: sb-glanz 16s ease-in-out infinite alternate; }
.sb-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 38px 28px 40px; display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; }

/* Fahnen */
.sb-fahnen { --b: 126px; --h: 84px; display: flex; gap: 40px; padding: 8px 0 0 10px; }
.sb-fahne { position: relative; display: grid; justify-items: start; gap: 12px; animation: sb-hoch .9s cubic-bezier(.2, .8, .2, 1) both, sb-aktiv 6s ease-in-out infinite; animation-delay: calc(var(--i) * .15s), calc(1.2s + var(--i) * 2s); }
.sb-stange { position: absolute; left: -8px; top: -10px; width: 4px; height: calc(var(--h) + 40px); border-radius: 3px; background: linear-gradient(90deg, #7d5f36, #f0d9a8 45%, #8a6a3e); }
.sb-stange::before { content: ''; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3d6, #c9a265 60%, #7d5f36); }
.sb-tuch { display: flex; width: var(--b); height: var(--h); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }
.sb-tuch i { position: relative; flex: 1 1 0; height: 100%; display: block;
  background-image: var(--flagge); background-size: var(--b) var(--h); background-repeat: no-repeat;
  background-position: calc(var(--s) * var(--b) / -24) 0; margin-right: -.5px;
  --amp: calc(.4px + var(--s) * .27px);
  animation: sb-wehen 2s ease-in-out infinite; animation-delay: calc(var(--s) * -.07s - var(--i) * .55s); }
.sb-tuch i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .20)); opacity: 0;
  animation: sb-falte 2s ease-in-out infinite; animation-delay: inherit; }
.sb-tuch i:first-child { border-radius: 3px 0 0 3px; }
.sb-tuch i:last-child { border-radius: 0 3px 3px 0; margin-right: 0; }
.sb-name { font: 800 11.5px/1 'Manrope', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #D9CFC4; padding-left: 2px; }
.sb-name[lang=ar] { letter-spacing: 0; font-size: 15px; text-transform: none; font-family: 'Geeza Pro', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; font-weight: 700; }

/* Text */
.sb-text { animation: sb-text .9s .25s cubic-bezier(.2, .8, .2, 1) both; }
.sb-text p { margin: 0; }
.sb-dach { display: flex; align-items: center; gap: 12px; font: 800 12px/1.2 'Manrope', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #F7A37F; margin-bottom: 12px !important; }
.sb-dach span { width: 30px; height: 1.5px; background: currentColor; }
.sb-satz { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-variation-settings: 'opsz' 72; font-weight: 400; font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.18; letter-spacing: -.005em; color: #fff; }
.sb-drei { font-style: italic; font-weight: 500; color: #F7A37F; }
.sb-sprachen { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-variation-settings: 'opsz' 72; font-style: italic; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.25; color: #CFC5BB; margin-top: 4px !important; }
.sb-w { position: relative; display: inline-block; color: #F7A37F; animation: sb-wort 6s ease-in-out infinite; animation-delay: calc(1.2s + var(--i) * 2s); }
.sb-w::after { content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: 3px; border-radius: 2px; background: #F05A23; transform: scaleX(0); transform-origin: left; animation: sb-strich 6s ease-in-out infinite; animation-delay: inherit; }

@keyframes sb-wehen { 0%, 100% { transform: translateY(calc(var(--amp) * -1)); } 50% { transform: translateY(var(--amp)); } }
@keyframes sb-falte { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes sb-aktiv { 0%, 36%, 100% { transform: none; } 6%, 28% { transform: translateY(-7px) scale(1.09); } }
@keyframes sb-wort { 0%, 36%, 100% { color: #F7A37F; } 6%, 28% { color: #fff; } }
@keyframes sb-strich { 0%, 36%, 100% { transform: scaleX(0); } 8%, 28% { transform: scaleX(1); } }
@keyframes sb-hoch { from { opacity: 0; transform: translateY(18px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes sb-text { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes sb-glanz { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes sb-linie { to { background-position: -200% 0; } }

@media (max-width: 900px) {
  .sb-in { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; padding: 28px 18px 30px; }
  .sb-dach { justify-content: center; }
  .sb-fahnen { --b: 88px; --h: 58px; gap: 26px; padding-left: 8px; }
}
@media (max-width: 380px) {
  .sb-fahnen { --b: 74px; --h: 49px; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb::before, .sb-glanz, .sb-fahne, .sb-tuch i, .sb-tuch i::after, .sb-text, .sb-w, .sb-w::after { animation: none !important; }
  .sb-w::after { transform: scaleX(1); }
}