/* bpm-ci.css – gemeinsame CI-Schicht des Hochzeitsportals (Quelle: neu.css der Hauptseite, gemessen 08.11.2026).
   Tokens, Buttons, Karten, Eingaben, flache Flaechen, Foto-Vorhang, Reveal. Steht NACH dem Inline-CSS der Seite
   und gewinnt deshalb gegen aeltere Schichten. Bei Aenderungen die ?v= in hochzeit.php hochzaehlen. */
:root{--black:#08171B;--surface:#0F282E;--surface2:#143138;--gold:#E0A458;--gold2:#E0A458;--gold-light:#EFC186;--gold-dark:#A87838;
  --text:#F5F0E8;--muted:rgba(255,255,255,.72);--dim:rgba(242,233,222,.6);--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.08);
  --r:12px;--r-lg:20px;--ease:cubic-bezier(.22,1,.36,1)}
/* ── Flach wie die Hauptseite (Betreiberwunsch 08.11.2026): keine Schatten-, Glüh- oder Kachel-Rahmung ── */
html,body{background:var(--black)!important}
.wrap{background:transparent!important}
#page-wrap{background:transparent!important;box-shadow:none!important}
.hdr,.tabs-wrap,.tabs,.card,.cd-wrap,.step,.info-cell,.moment,#welcome-banner,.welcome-banner-inner,.hz-ebook,.genre-chip,.mom-song-input{box-shadow:none!important}
.cd-wrap{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--r)!important}
.cd-wrap::before{display:none!important}

/* ── CI v2 (08.11.2026): gemessen an neu.css der Hauptseite ──────────────────────────────
   Buttons: Pille 999px, Outfit 500, Gold #E0A458 flach (kein Verlauf, kein Schatten), Text #1a1206.
   Ghost: rgba(255,255,255,.03) mit Haarlinie rgba(255,255,255,.22). Karten Radius 20px mit Verlauf
   160deg #143138 -> #0F282E, Eingaben Radius 12px. Hover Gold -> #EFC186. */
:root{--ease:cubic-bezier(.22,1,.36,1)}
.btn,.btn-sm,.btn-lg,.abschluss-btn,.add-btn-small,.pane-next-btn,button[style*="background:var(--gold)"],button[style*="background: var(--gold)"],a[style*="background:var(--gold)"],a[style*="background: var(--gold)"]{
  border-radius:999px!important;font-family:var(--font-b)!important;font-weight:500!important;letter-spacing:.04em!important;
  text-transform:none!important;text-shadow:none!important;transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)!important}
.btn-primary,.abschluss-btn,button[style*="background:var(--gold)"],button[style*="background: var(--gold)"],a[style*="background:var(--gold)"],a[style*="background: var(--gold)"]{
  background:var(--gold)!important;background-image:none!important;color:#1a1206!important;box-shadow:none!important;border:1px solid transparent!important}
.abschluss-btn{padding:0 28px!important;min-height:52px!important}
.btn-primary::before,.abschluss-btn::before,.add-btn-small::before{display:none!important}
@media(hover:hover) and (pointer:fine){
  .btn-primary:hover,.abschluss-btn:hover,button[style*="background:var(--gold)"]:hover,button[style*="background: var(--gold)"]:hover{background:var(--gold-light)!important;color:#1a1206!important;transform:none!important;box-shadow:none!important}
}
.btn-secondary,.btn-ghost,.add-btn-small{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.22)!important;color:var(--text)!important}
@media(hover:hover) and (pointer:fine){.btn-secondary:hover,.btn-ghost:hover,.add-btn-small:hover{border-color:rgba(255,255,255,.4)!important;color:var(--text)!important;transform:none!important}}
.btn:active,.abschluss-btn:active,.add-btn-small:active{transform:scale(.97)!important}
.btn-sm,.btn-lg,.btn,.add-btn-small{min-height:44px}
.btn,.btn-sm,.btn-lg,.add-btn-small{font-size:15px!important}
#btn-abschluss,#btn-abschluss.btn-shimmer{background:var(--gold)!important;background-image:none!important;border-radius:999px!important;box-shadow:none!important;animation:none!important;color:#1a1206!important}
@media(hover:hover) and (pointer:fine){#btn-abschluss:hover{background:var(--gold-light)!important;transform:none!important;box-shadow:none!important}}
/* Karten wie die Bewertungs-Karten der Hauptseite */
.card{background:linear-gradient(160deg,var(--surface-2),var(--surface))!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:20px!important}
.step,.info-cell,.cd-wrap{border-radius:12px!important}
.cd-wrap{background:linear-gradient(160deg,var(--surface-2),var(--surface))!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:20px!important}
/* Eingaben wie .fld der Hauptseite */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),textarea,select{
  border-radius:12px!important;background-color:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important;color:var(--text)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,textarea:focus,select:focus{border-color:var(--gold)!important;outline:none}
/* Pillen-Navigation und Chips */
.tabs .tab-btn{font-weight:500}
.chip,.jz-chip,.info-chip{border-radius:999px}

/* Reveal wie .rv der Hauptseite: nur wenn bpm-ci.js laeuft und keine reduzierte Bewegung gewuenscht ist */
.rv{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
/* Foto-Vorhang (wie .frame.fx-wait der Hauptseite): Foto startet unscharf und klart auf */
#wb-img-paerchen{transition:filter 1.1s var(--ease),transform 1.1s var(--ease)}
#wb-img-paerchen.fx-wait{filter:contrast(1.5) blur(14px) brightness(.8)!important;transform:scale(1.06)}
.bpm-grain{position:absolute;inset:-20%;pointer-events:none;opacity:0;mix-blend-mode:overlay;transition:opacity 1.1s var(--ease);z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.bpm-grain.on{opacity:.55}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}#wb-img-paerchen{transition:none}}

/* ── Handy und Tablet (Pruefung 08.11.2026) ───────────────────────────────────────────── */
/* Untere Menueleiste: feste Flaeche ohne Weichzeichner, ohne Uebergang und ohne will-change. "transition: all" liess sie springen,
   wenn sich die Fensterhoehe aenderte (Adressleiste ein-/ausfahren), backdrop-filter flackert dort. */
@media(max-width:900px){
  .mobile-nav{left:0!important;right:0!important;width:100%!important;transform:none!important;transition:none!important;will-change:auto!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--black)!important;box-shadow:none!important}
  .mobile-nav a{transition:color .15s var(--ease)!important}
  /* Seitenrand auf allen Reitern (nur Start lag in .wrap, alle anderen Reiter klebten am Bildschirmrand) */
}
.pane:not(#pane-overview){padding-left:32px;padding-right:32px}
@media(max-width:640px){.pane:not(#pane-overview){padding-left:16px;padding-right:16px}}
/* Beruehrungsflaechen mindestens 44 px (Apple 44, Material 48) */
@media(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select{min-height:44px}
  .ablauf-song-such,.start-link,a.voll,#pane-tipps a[href^="#"]{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
  .ngc-del,button[aria-label="Entfernen"],button[title="Entfernen"],button[onclick*="del"]{min-width:44px;min-height:44px}
  .moment input[type=checkbox]{position:relative}
  .moment input[type=checkbox]::before{content:'';position:absolute;inset:-13px}
  .tabs .tab-btn{min-height:44px}
  .pane a[href^="https://open.spotify.com"],.pane a[target="_blank"][style*="inline-block"]{display:inline-flex!important;align-items:center;min-height:44px}
  .pane button:not(.gc-stars button){min-width:44px}
}
/* Kleine Plaketten (Eroeffnungstanz, Party-Highlight ...): nie breiter als ihr Feld, sonst laufen sie unter Knoepfe */
@media(max-width:640px){[style*="display:inline-block"][style*="text-transform:uppercase"]{font-size:12px!important;letter-spacing:.3px!important;padding:1px 6px!important;max-width:100%;box-sizing:border-box;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}}

/* Hinweis fuer Handy und Tablet (bpm-ci.js, pcHinweis) */
.bpm-pchint{display:flex;align-items:center;gap:8px;margin:12px 16px 0;padding:4px 4px 4px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--muted);font-size:15px;line-height:1.4}
.bpm-pchint p{flex:1;margin:0}
.bpm-pchint button{flex:0 0 auto;min-width:44px;min-height:44px;background:none;border:0;color:var(--text);font-size:22px;line-height:1;cursor:pointer;border-radius:999px}