/* ==========================================================================
   Bausteine — Klassen, die im Design-System die JSX-Komponenten verwenden.
   Werte 1:1 aus der Nexview-App. Unverändert übernommen aus
   „Nexapps Design System" / components/components.css.
   ========================================================================== */

/* Knöpfe */
.nv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);padding:.625rem 1.25rem;font:600 .875rem/1.2 var(--font-sans);border:1px solid transparent;cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);text-decoration:none}
.nv-btn--primary{background:var(--accent-500);color:#fff;box-shadow:var(--shadow-accent)}
.nv-btn--primary:hover{background:var(--accent-400);color:#fff}
.nv-btn--ghost{border-color:var(--ink-700);background:var(--ink-850);color:var(--mist-300)}
.nv-btn--ghost:hover{background:var(--ink-800);color:var(--mist-100)}
.nv-btn:disabled{cursor:not-allowed;opacity:.6}
.nv-btn:active{transform:translateY(1px)}
.nv-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900);padding:.375rem;color:var(--mist-300);cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.nv-iconbtn:hover{border-color:var(--accent-500);background:var(--accent-500);color:#fff}

/* Formularfeld */
.nv-field{display:flex;flex-direction:column;gap:.375rem}
.nv-field__label{font-size:.875rem;font-weight:500;color:var(--mist-300)}
.nv-field__input{border-radius:var(--radius-lg);border:1px solid var(--ink-700);background:var(--ink-900);padding:.625rem 1rem;font:inherit;font-size:.875rem;color:var(--mist-100);transition:border-color var(--dur-fast)}
.nv-field__input::placeholder{color:var(--mist-600)}
.nv-field__input:focus{border-color:var(--accent-500);outline:none}
.nv-field__hint{font-size:.75rem;color:var(--mist-500)}

/* Karte */
.nv-card{border-radius:var(--radius-xl);border:1px solid var(--ink-700);background:rgb(22 22 29/.8);padding:1.5rem;box-shadow:var(--shadow-card);backdrop-filter:blur(8px)}

/* Fehlermeldung */
.nv-error{border-radius:var(--radius-lg);border:1px solid rgb(185 22 38/.5);background:rgb(143 15 28/.15);padding:.75rem 1rem;font-size:.875rem;color:var(--accent-400)}
.nv-warning{border-radius:var(--radius-lg);border:1px solid rgb(234 179 8/.4);background:rgb(234 179 8/.1);padding:.5rem .75rem;font-size:.875rem;color:var(--warn-500)}

/* Status-Etiketten: Kapseln mit 1px-Ring, dezent, damit die Poster wirken */
.nv-badge{display:inline-flex;align-items:center;border-radius:var(--radius-full);padding:.25rem .625rem;font-size:var(--text-2xs);font-weight:600;box-shadow:inset 0 0 0 1px var(--status-neutral-ring);background:var(--status-neutral-bg);color:var(--status-neutral-fg);backdrop-filter:blur(4px);white-space:nowrap}
.nv-badge--pending{background:var(--status-pending-bg);color:var(--status-pending-fg);box-shadow:inset 0 0 0 1px var(--status-pending-ring)}
.nv-badge--requested{background:var(--status-requested-bg);color:var(--status-requested-fg);box-shadow:inset 0 0 0 1px var(--status-requested-ring)}
.nv-badge--searching{background:var(--status-searching-bg);color:var(--status-searching-fg);box-shadow:inset 0 0 0 1px var(--status-searching-ring)}
.nv-badge--ok{background:var(--status-ok-bg);color:var(--status-ok-fg);box-shadow:inset 0 0 0 1px var(--status-ok-ring)}
.nv-badge--bad{background:var(--status-bad-bg);color:var(--status-bad-fg);box-shadow:inset 0 0 0 1px var(--status-bad-ring)}
.nv-badge--muted{background:var(--status-muted-bg);color:var(--status-muted-fg);box-shadow:inset 0 0 0 1px var(--status-muted-ring)}

/* Bewertungs-Kapsel */
.nv-rating{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);background:rgb(11 11 15/.8);padding:.25rem .5rem;font-size:.75rem;font-weight:600;box-shadow:inset 0 0 0 1px var(--ink-700);backdrop-filter:blur(4px)}
.nv-rating--good{color:var(--ok-500)}.nv-rating--mid{color:var(--warn-500)}.nv-rating--bad{color:var(--bad-500)}.nv-rating--none{color:var(--mist-600)}

/* Avatar */
.nv-avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);border:1px solid var(--ink-700);font-size:.75rem;font-weight:700;width:2rem;height:2rem;object-fit:cover;overflow:hidden}
.nv-avatar--0{background:var(--accent-700);color:#fff}
.nv-avatar--1{background:var(--ink-700);color:var(--mist-100)}
.nv-avatar--2{background:var(--accent-600);color:#fff}
.nv-avatar--3{background:rgb(34 197 94/.3);color:var(--ok-500)}
.nv-avatar--4{background:rgb(234 179 8/.25);color:var(--warn-500)}

/* Spinner + Ladebalken */
.nv-spinner{animation:nv-spin 1s linear infinite}
.nv-loading-bar{pointer-events:none;position:relative;height:2px;overflow:hidden}
.nv-loading-bar__sweep{height:100%;width:100%;background:linear-gradient(to right,transparent,var(--accent-500),transparent);animation:nv-sweep 1.1s ease-in-out infinite}

/* Suchfeld */
.nv-search{position:relative}
.nv-search__input{width:100%;box-sizing:border-box;border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900);padding:.625rem 2.5rem;font:inherit;font-size:.875rem;color:var(--mist-100);transition:border-color var(--dur-fast)}
.nv-search__input::placeholder{color:var(--mist-600)}
.nv-search__input:focus{border-color:var(--accent-500);outline:none}
.nv-search__icon{pointer-events:none;position:absolute;top:50%;left:.875rem;width:1rem;height:1rem;transform:translateY(-50%);color:var(--mist-600)}
.nv-search__clear{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);border:none;background:none;border-radius:var(--radius-full);padding:0 .375rem;color:var(--mist-600);cursor:pointer;font-size:.875rem}
.nv-search__clear:hover{color:var(--mist-100)}

/* Auswahl + Schalter (Filterleiste) */
.nv-select{display:flex;flex-direction:column;gap:.25rem}
.nv-select__label{font-size:var(--text-2xs);font-weight:500;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mist-600)}
.nv-select__control{border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900);padding:.375rem .875rem;font:inherit;font-size:.875rem;color:var(--mist-100);transition:border-color var(--dur-fast)}
.nv-select__control:focus{border-color:var(--accent-500);outline:none}
.nv-toggle{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900);padding:.375rem .875rem;font-size:.875rem;color:var(--mist-500);cursor:pointer;user-select:none;transition:color var(--dur-fast),background-color var(--dur-fast),border-color var(--dur-fast)}
.nv-toggle:hover{color:var(--mist-100)}
.nv-toggle--on{border-color:rgb(225 29 47/.6);background:rgb(225 29 47/.15);color:var(--accent-400)}
.nv-toggle input{accent-color:var(--accent-500);width:.875rem;height:.875rem;margin:0}
.nv-toggle--disabled{cursor:not-allowed;opacity:.6}

/* Navigation (Kopfzeile) */
.nv-navpill{border-radius:var(--radius-full);padding:.375rem .875rem;font-size:.875rem;font-weight:500;color:var(--mist-500);text-decoration:none;transition:background-color var(--dur-fast),color var(--dur-fast);white-space:nowrap}
.nv-navpill:hover{background:var(--ink-850);color:var(--mist-100)}
.nv-navpill--active{background:rgb(225 29 47/.15);color:var(--accent-400)}
.nv-navpill--active:hover{background:rgb(225 29 47/.15);color:var(--accent-400)}

/* Dialog */
.nv-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgb(11 11 15/.8);padding:1rem;backdrop-filter:blur(4px)}
.nv-dialog{width:100%;max-width:28rem;border-radius:var(--radius-xl);border:1px solid var(--ink-700);background:var(--ink-850);padding:1.5rem;box-shadow:var(--shadow-pop)}

/* Poster */
.nv-poster{height:100%;width:100%;object-fit:cover;display:block}
.nv-poster-fallback{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;background:linear-gradient(to bottom right,var(--ink-800),var(--ink-900));padding:.75rem;text-align:center;box-sizing:border-box}

/* Besetzungs-Streifen */
.nv-cast{display:flex;gap:.75rem;overflow-x:auto;padding-bottom:.5rem}
.nv-cast__card{width:7rem;flex-shrink:0;text-decoration:none;color:inherit}
.nv-cast__photo{aspect-ratio:2/3;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--ink-700);background:var(--ink-900);transition:border-color var(--dur-fast)}
.nv-cast__card:hover .nv-cast__photo{border-color:rgb(185 22 38/.6)}

/* Slider */
.nv-slider{position:relative}
.nv-slider__track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.25rem .25rem .5rem;margin:0 -.25rem;scrollbar-width:none}
.nv-slider__track::-webkit-scrollbar{display:none}
.nv-slider__arrow{position:absolute;top:50%;transform:translateY(-50%);border-radius:var(--radius-full);border:1px solid var(--ink-700);background:rgb(11 11 15/.9);padding:.625rem .875rem;color:var(--mist-300);cursor:pointer;backdrop-filter:blur(8px);transition:border-color var(--dur-fast);font-size:1rem;line-height:1}
.nv-slider__arrow:hover{border-color:var(--accent-600)}

/* Sterne */
.nv-stars{color:var(--accent-500);letter-spacing:var(--tracking-tight);line-height:1}
.nv-stars .off{color:var(--ink-600)}

/* ————— Website-Bausteine (nexapps.dev / Nexview-Seite) ————— */
.nx-container{max-width:var(--page-max);margin:0 auto;padding-left:var(--page-pad);padding-right:var(--page-pad)}
@media(min-width:640px){.nx-container{padding-left:var(--page-pad-sm);padding-right:var(--page-pad-sm)}}
.nx-header{position:sticky;top:0;z-index:20;border-bottom:1px solid rgb(38 38 47/.8);background:rgb(11 11 15/.8);backdrop-filter:blur(24px)}
.nx-header__row{display:flex;align-items:center;gap:1rem;padding-top:.75rem;padding-bottom:.75rem}
.nx-kicker{font-size:.75rem;font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--accent-400)}
.nx-section{padding:5rem 0}
@media(max-width:640px){.nx-section{padding:3.5rem 0}}
.nx-section__head{max-width:38rem;display:flex;flex-direction:column;gap:.75rem;margin-bottom:2.5rem}
.nx-h2{font-size:var(--text-h2);font-weight:700}
.nx-lede{color:var(--mist-500);font-size:var(--text-body);line-height:var(--leading-relaxed);text-wrap:pretty}

/* Bildschirmfoto-Rahmen */
.nx-frame{border-radius:var(--radius-xl);border:1px solid var(--ink-700);background:var(--ink-900);box-shadow:var(--shadow-card),0 0 80px -20px rgb(225 29 47/.15);overflow:hidden}
.nx-frame__bar{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--ink-700);background:var(--ink-850);padding:.625rem .875rem}
.nx-frame__dot{width:.625rem;height:.625rem;border-radius:var(--radius-full);background:var(--ink-600)}
.nx-frame__url{margin-left:.5rem;flex:1;max-width:20rem;border-radius:var(--radius-full);background:var(--ink-900);padding:.25rem .75rem;font-size:var(--text-2xs);color:var(--mist-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-frame__body{background:var(--ink-950)}
.nx-frame--phone{border-radius:1.75rem;max-width:22rem}
.nx-frame--phone .nx-frame__bar{justify-content:center;border-bottom-color:rgb(38 38 47/.6)}
.nx-frame--phone .nx-frame__notch{width:5rem;height:.375rem;border-radius:var(--radius-full);background:var(--ink-600)}

/* Funktions-Kacheln */
.nx-feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.nx-feature{display:flex;flex-direction:column;gap:.625rem;border-radius:var(--radius-xl);border:1px solid var(--ink-700);background:rgb(22 22 29/.8);padding:1.25rem;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.nx-feature:hover{background:var(--ink-800);border-color:var(--ink-600)}
.nx-feature__icon{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:rgb(225 29 47/.12);color:var(--accent-400);box-shadow:inset 0 0 0 1px rgb(225 29 47/.25)}
.nx-feature__title{font-size:.9375rem;font-weight:600;color:var(--mist-100)}
.nx-feature__text{font-size:.8125rem;line-height:var(--leading-snug);color:var(--mist-500)}

/* Ablauf */
.nx-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;counter-reset:step}
.nx-flow__step{position:relative;display:flex;flex-direction:column;gap:.5rem;border-radius:var(--radius-xl);border:1px solid var(--ink-700);background:rgb(22 22 29/.8);padding:1.25rem;counter-increment:step}
.nx-flow__num{display:flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;border-radius:var(--radius-full);background:rgb(225 29 47/.15);color:var(--accent-400);font-size:.75rem;font-weight:700;box-shadow:inset 0 0 0 1px rgb(225 29 47/.35)}
.nx-flow__title{font-size:.9375rem;font-weight:600}
.nx-flow__text{font-size:.8125rem;line-height:var(--leading-snug);color:var(--mist-500)}

/* Installations-Block */
.nx-install{border-radius:var(--radius-xl);border:1px solid var(--ink-700);background:var(--ink-900);overflow:hidden}
.nx-install__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--ink-700);background:var(--ink-850);padding:.5rem .625rem .5rem 1rem}
.nx-install__label{font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mist-600)}
.nx-install__pre{margin:0;padding:1rem 1.25rem;font-size:.875rem;line-height:1.7;color:var(--mist-100);overflow-x:auto}
.nx-install__pre .c{color:var(--mist-600)}.nx-install__pre .k{color:var(--accent-400)}
.nx-install__hint{margin-top:.75rem;font-size:.8125rem;color:var(--mist-500)}
.nx-copy{display:inline-flex;align-items:center;gap:.375rem;border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900);padding:.3125rem .75rem;font:500 .75rem var(--font-sans);color:var(--mist-300);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast)}
.nx-copy:hover{border-color:var(--accent-500);color:var(--mist-100)}

/* Rollen-Tabelle */
.nx-roles{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ink-700);border-radius:var(--radius-xl);overflow:hidden;background:rgb(22 22 29/.8);font-size:.875rem}
.nx-roles th{padding:.875rem 1.25rem;text-align:left;font-weight:600;color:var(--mist-100);background:var(--ink-850);border-bottom:1px solid var(--ink-700)}
.nx-roles td{padding:.75rem 1.25rem;color:var(--mist-300);border-bottom:1px solid rgb(38 38 47/.6)}
.nx-roles tr:last-child td{border-bottom:none}
.nx-roles td:first-child{color:var(--mist-500)}
.nx-roles .yes{color:var(--ok-500)}.nx-roles .no{color:var(--mist-600)}.nx-roles .part{color:var(--warn-500)}

/* Fußzeile */
.nx-footer{border-top:1px solid rgb(38 38 47/.6);margin-top:2rem}
.nx-footer__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1rem;padding:1.25rem 1rem;font-size:.75rem;color:var(--mist-600)}
.nx-footer__row a{color:var(--mist-600)}
.nx-footer__row a:hover{color:var(--mist-300)}