@font-face {
  font-family: "Roboto Condensed";
  src: url("/styles/RobotoCondensed-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("/styles/RobotoCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("/styles/RobotoCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:"Roboto Condensed",Arial,sans-serif;
  font-size:18px;
}

a{color:#fff}

.topbar{
  border-top:5px solid #666;
  border-bottom:1px solid #333;
  min-height:100px;
  padding:22px max(24px,calc((100% - 1100px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:#000;
}

.topbar strong{
  display:block;
  font-size:42px;
  line-height:1;
  font-weight:700;
}

.topbar span{font-size:14px}

.topbar nav{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.topbar nav a{text-decoration:none}

.container{
  width:min(calc(100% - 40px),1100px);
  margin:42px auto;
}

.auth-card{
  width:min(calc(100% - 40px),460px);
  margin:8vh auto;
  padding:38px;
  border-top:5px solid #666;
  background:#000;
  box-shadow:0 8px 35px rgba(255,255,255,.05);
}

.auth-card h1{
  font-size:58px;
  margin:0;
  line-height:1;
}

.tagline{
  margin-top:8px;
  color:#aaa;
}

h1{font-size:42px}
h2{font-size:26px}

label{
  display:block;
  margin:18px 0 8px;
}

input,textarea,select{
  width:100%;
  padding:12px;
  border:1px solid #666;
  background:#111;
  color:#fff;
  font:inherit;
}

textarea{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;
}

button,.button{
  display:inline-block;
  border:1px solid #fff;
  background:#fff;
  color:#000;
  padding:11px 16px;
  text-decoration:none;
  font:inherit;
  cursor:pointer;
}

.button.secondary{
  background:#333;
  color:#fff;
  border-color:#666;
}

button.small{
  padding:7px 10px;
  font-size:14px;
}

.error{
  background:#5a1111;
  color:#fff;
  padding:12px;
}

.success{
  background:#153f1d;
  color:#fff;
  padding:12px;
}

.muted{color:#aaa}

.page-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  margin:30px 0;
}

.page-card,.panel{
  border:1px solid #333;
  padding:22px;
  background:#090909;
}

.member-content{line-height:1.65}

.user-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px;
}

.table-wrap{overflow:auto}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:10px;
  border-bottom:1px solid #333;
  text-align:left;
  vertical-align:top;
}

@media(max-width:700px){
  body{font-size:16px}
  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .topbar strong{font-size:36px}
  .user-form{grid-template-columns:1fr}
  .auth-card{padding:24px}
  .auth-card h1{font-size:48px}
}

.warning{background:#4a3b0d;color:#fff;padding:12px}
.password-form{max-width:620px}
.auth-card p a{text-decoration:underline}

/* =========================================================
   Responsive Desktop-Basis
   Die Anwendung nutzt die verfügbare Fensterbreite,
   ohne Inhalte per Browser-Zoom zu skalieren.
   ========================================================= */
:root{
  --app-page-gap:clamp(12px,1.5vw,28px);
  --app-content-gap:clamp(18px,2.4vw,48px);
  --app-sidebar-width:clamp(240px,18vw,320px);
}

html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.topbar{
  width:100%;
  padding-left:var(--app-page-gap);
  padding-right:var(--app-page-gap);
}

.container{
  width:calc(100% - (2 * var(--app-page-gap)));
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

img,svg,video,canvas{
  max-width:100%;
}

.table-wrap{
  width:100%;
  max-width:100%;
  overflow:auto;
}

table{
  max-width:100%;
}

input,textarea,select{
  min-width:0;
  max-width:100%;
}

@media (min-width:801px){
  .page-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  }
}



/* =========================================================
   Volle Desktop-Fensterbreite
   ========================================================= */
html,
body{
  width:100%;
  min-width:100%;
  max-width:none;
}

body{
  overflow-x:hidden;
}

.topbar{
  width:100%;
  max-width:none;
  margin:0;
}

.container{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:var(--app-page-gap,16px);
  padding-right:var(--app-page-gap,16px);
}


/* =========================================================
   HARTE VOLLBREITE – Desktop
   ========================================================= */
@media (min-width:801px){
  html,
  body{
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    padding:0 !important;
  }

  .topbar{
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
  }

  .container{
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* =========================================================
   Einheitliche Buttonfarbe
   RGB 5, 129, 184
   ========================================================= */
button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
label.button,
.mv-action-button,
.mv-photo-button,
.mv-password-button,
.nmButton,
.paypal-button,
.bb-button{
  background:rgb(5,129,184) !important;
  border-color:rgb(5,129,184) !important;
  color:#fff !important;
}

button:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
label.button:hover,
.mv-action-button:hover,
.mv-photo-button:hover,
.mv-password-button:hover,
.nmButton:hover,
.paypal-button:hover,
.bb-button:hover{
  background:rgb(5,129,184) !important;
  border-color:rgb(5,129,184) !important;
  color:#fff !important;
  filter:brightness(1.08);
}

button:disabled,
.button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled{
  background:rgb(5,129,184) !important;
  border-color:rgb(5,129,184) !important;
  color:#fff !important;
  opacity:.45;
}

.button.secondary{
  background:rgb(5,129,184) !important;
  border-color:rgb(5,129,184) !important;
  color:#fff !important;
}

/* =========================================================
   Topzeile: myVerve links / Navigation rechts
   ========================================================= */
.topbar{
  width:100vw !important;
  max-width:100vw !important;
  margin:0 !important;
  padding-left:22px !important;
  padding-right:22px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.topbar > div:first-child{
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
}

.topbar nav{
  margin-left:auto !important;
  margin-right:0 !important;
  justify-content:flex-end !important;
  text-align:right !important;
  display:flex !important;
  gap:20px !important;
  flex-wrap:wrap !important;
}

@media (max-width:700px){
  .topbar{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .topbar nav{
    margin-left:0 !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }
}

/* =========================================================
   Rahmenfarbe für Fenster und Scrollbereiche
   RGB 168, 103, 122
   ========================================================= */
:root{
  --mv-frame-color:rgb(168,103,122);
}

/* Allgemeine Fenster-/Panelrahmen */
.page-card,
.panel,
.auth-card,
.transaction-panel,
.transaction-content,
.detail-card,
.empty-state,
.table-wrap,
.mv-list-wrap,
.mv-photo-box,
.mv-bankdata-inline,
.mv-password-inline,
.paypal-list,
.paypal-grid-scroll,
.bb-position-card,
.bb-positions-scroll,
.bb-position-table-wrap,
.bv-table-wrap,
.hb-table-wrap,
.nm-contact-search,
#nmForm,
#nmAttachmentBox{
  border-color:var(--mv-frame-color) !important;
}

/* Tabellen- und Feldtrennlinien */
table,
th,
td,
.mv-member-entry,
.tree-group,
.transaction-heading,
.login-name-panel{
  border-color:var(--mv-frame-color) !important;
}

/* Sichtbare Scrollbar-Rahmen */
.mv-scroll-track,
.mv-scrollbar{
  border-color:var(--mv-frame-color) !important;
}

/* Native Scrollbars, soweit Browser unterstützt */
*{
  scrollbar-color:rgb(168,103,122) #151515;
}

*::-webkit-scrollbar-track{
  border:1px solid rgb(168,103,122);
}

*::-webkit-scrollbar-thumb{
  border:1px solid rgb(168,103,122);
}

/* =========================================================
   Spezielle Aktionsbuttons – RGB 225, 134, 113
   Neuer Eintrag / Excel / Alle löschen / Speichern / Löschen /
   Bild laden / BKZ finden / Kontenauszug hochladen/löschen
   ========================================================= */
:root{
  --mv-special-action:rgb(225,134,113);
}