/* FF Final4 Banner - Generator-Seite. Eigenes Praefix ffb-, Werte des FF-Designsystems (Navy, Orange/Link) */
.ffb{max-width:100%;color:#33465f;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6}
.ffb *{box-sizing:border-box}
.ffb-h2{font-family:"Barlow Condensed",Inter,sans-serif;font-weight:700;font-size:2.5rem;line-height:1.1;color:#0E2A52;margin:0 0 .5rem}
.ffb-lead{font-size:1.05rem;max-width:760px;margin:0 0 1.75rem}
.ffb-grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:1.75rem;align-items:start}
.ffb-panel,.ffb-stage{background:#fff;border:1px solid #dfe5ee;border-radius:12px;box-shadow:0 1px 3px rgba(14,42,82,.06);padding:1.25rem}
.ffb-field{border:0;margin:0 0 1.15rem;padding:0;min-width:0}
.ffb-field label,.ffb-field legend,.ffb-lbl{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#a8481b;margin:0 0 .4rem;padding:0}
.ffb input[type=text],.ffb input[type=search],.ffb select,.ffb-det summary,.ffb-det input[type=file]{display:block;width:100%;min-height:46px;font:inherit;font-size:1rem;line-height:1.3;padding:.65rem .85rem;border:1px solid #c9d3e3;border-radius:8px;background:#fff;color:#0E2A52;margin:0}
.ffb input[type=text]:focus,.ffb select:focus,.ffb-chip:focus-visible,.ffb-btn:focus-visible,.ffb-link:focus-visible,.ffb-det summary:focus-visible{outline:2px solid #e07645;outline-offset:2px}
.ffb-list{list-style:none;margin:.4rem 0 0;padding:.3rem;border:1px solid #c9d3e3;border-radius:10px;background:#fff;max-height:420px;overflow:auto;box-shadow:0 4px 14px rgba(14,42,82,.08)}
.ffb-list[hidden]{display:none}
.ffb-li{display:flex;align-items:center;gap:.75rem;padding:.5rem .6rem;border-radius:8px;cursor:pointer;margin:0}
.ffb-li:hover,.ffb-li[aria-selected=true]{background:#eef3fb}
.ffb-th{flex:0 0 44px;width:44px;height:44px;border:1px solid #dfe5ee;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px}
.ffb-th img{max-width:100%;max-height:100%;object-fit:contain}
.ffb-th-i{font-weight:800;color:#0E2A52;font-size:.9rem}
.ffb-tx{display:flex;flex-direction:column;min-width:0}
.ffb-nm{font-weight:700;color:#0E2A52;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.ffb-nm mark{background:#ffe3d6;color:inherit;padding:0 1px;border-radius:2px}
.ffb-sb{font-size:.82rem;color:#5a6b82;line-height:1.3}
.ffb-li-h{padding:.45rem .6rem;font-size:.82rem;color:#5a6b82;margin:0;list-style:none}
.ffb-hint{font-size:.85rem;color:#5a6b82;margin:.4rem 0 0}
.ffb .ffb-chk{display:flex;gap:.55rem;align-items:flex-start;text-transform:none;letter-spacing:0;font-family:inherit;font-weight:500;font-size:.95rem;color:#33465f;margin:0 0 .45rem}
.ffb .ffb-chk input{margin-top:.28rem}
.ffb .ffb-inline{text-transform:none;letter-spacing:0;font-family:inherit;font-weight:500;font-size:.92rem;color:#33465f;margin-top:.7rem}
.ffb .ffb-inline select{margin-top:.3rem}
.ffb-det{margin:0 0 1.15rem}
.ffb-det summary{cursor:pointer;color:#a8481b;font-weight:600;font-size:.95rem}
.ffb-det[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.ffb-det input[type=file]{margin-top:.6rem;font-size:.9rem}
.ffb-det input[type=file]::file-selector-button{font:inherit;font-weight:600;margin-right:.7rem;padding:.35rem .8rem;border:1px solid #0E2A52;border-radius:6px;background:#fff;color:#0E2A52;cursor:pointer}
.ffb-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .6rem}
.ffb-grp{flex:0 0 100%;font-size:.8rem;font-weight:600;color:#5a6b82}
.ffb-chip{font:inherit;font-size:.85rem;font-weight:600;padding:.35rem .65rem;border-radius:999px;border:1px solid #c9d3e3;background:#fff;color:#0E2A52;cursor:pointer}
.ffb-chip:hover{border-color:#0E2A52}
.ffb-chip[aria-pressed=true]{background:#0E2A52;border-color:#0E2A52;color:#fff}
.ffb-canvaswrap{background:repeating-conic-gradient(#eef2f8 0 25%,#fff 0 50%) 0 0/16px 16px;border:1px solid #dfe5ee;border-radius:10px;padding:.75rem;display:flex;justify-content:center;overflow:auto}
.ffb-canvas{display:block;width:100%;height:auto;max-width:100%;box-shadow:0 6px 20px rgba(14,42,82,.25)}
.ffb-meta{font-size:.85rem;color:#5a6b82;margin:.7rem 0}
.ffb-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ffb-btn{font:inherit;font-weight:700;font-size:.95rem;padding:.7rem 1.2rem;border-radius:6px;border:2px solid #bf5320;background:#bf5320;color:#fff;cursor:pointer}
.ffb-btn:hover:not(:disabled){background:#0E2A52;border-color:#0E2A52}
.ffb-btn:disabled{opacity:.45;cursor:not-allowed}
.ffb-btn-ghost{background:transparent;color:#0E2A52;border-color:#0E2A52}
.ffb-btn-ghost:hover:not(:disabled){color:#fff}
.ffb-link{font:inherit;font-size:.9rem;background:none;border:0;color:#a8481b;font-weight:600;cursor:pointer;padding:.5rem .3rem}
.ffb-status{min-height:1.5em;font-size:.92rem;margin:.7rem 0 0;color:#0E2A52}
.ffb-err{color:#b3261e}
.ffb-tip{margin-top:1rem;padding:1rem 1.1rem;background:#fbf1ec;border-left:4px solid #e07645;border-radius:0 8px 8px 0;font-size:.95rem}
.ffb-wall{margin-top:2.25rem}
.ffb-wall h3{font-family:"Barlow Condensed",Inter,sans-serif;font-weight:700;font-size:1.6rem;color:#0E2A52;margin:0 0 .6rem}
.ffb-logos{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.ffb-logos li{width:64px;height:64px;border:1px solid #dfe5ee;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:6px;margin:0}
.ffb-logos img{max-width:100%;max-height:100%;object-fit:contain}
.ffb-logos .ffb-ini{font-weight:800;color:#0E2A52;font-size:1rem}
@media (max-width:860px){.ffb-grid{grid-template-columns:1fr}.ffb-h2{font-size:2rem}}
@media (prefers-reduced-motion:reduce){.ffb-canvas{scroll-behavior:auto}}

/* Lockeffekt: pulsierender Glow, solange das Vereinsfeld leer und nicht fokussiert ist */
.ffb input#ffb-club:placeholder-shown:not(:focus){border-color:#e07645;box-shadow:0 0 0 0 rgba(224,118,69,.55);animation:ffbGlow 2s ease-in-out infinite}
@keyframes ffbGlow{0%{box-shadow:0 0 0 0 rgba(224,118,69,.55),0 0 6px 0 rgba(224,118,69,.35)}70%{box-shadow:0 0 0 9px rgba(224,118,69,0),0 0 18px 4px rgba(224,118,69,.45)}100%{box-shadow:0 0 0 0 rgba(224,118,69,0),0 0 6px 0 rgba(224,118,69,.35)}}
@media (prefers-reduced-motion:reduce){.ffb input#ffb-club:placeholder-shown:not(:focus){animation:none;box-shadow:0 0 0 3px rgba(224,118,69,.45)}}